html {
    scroll-behavior: smooth;
  }
  
body {
    padding: 5px;
    background: #f8f8f8;
    font-family:'Open Sans', sans-serif;
}
header .menu {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 20px;
}
header h1 {
   /*  margin-top: 250px; */
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    color:#6bb9e7;
}
header .peq {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    margin-top: 0;
    color:#b8c927;
}

.logo{
    width: 200px;
    border-radius:5%;
	border: 1px solid #6bb9e7;
}

.divlogo{margin: auto; width:200px;}


/* Alguna clase */
.centrado{text-align: center;}


section .wrapper {
   /*  padding-top: 40px; */
    margin: 0 auto;
    position: relative;
    text-align: center;
}
section .wrapper .caja {
    display: inline-block;
    width: 350px;
    padding: 40px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 20px;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}
section .icon {
    position: relative;
    width: 75px;
    height: 80px;
    color: white;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 40px;
    font-weight: 600;
    transition: 1s;
}

/* .hp{margin-top: 10px;} */

.icon img{
    width: 100px;
    border-radius: 5%;
}

.ico-server{

    margin: 0 10px;
    vertical-align: middle;
    margin-left: 40px;

    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
   }
   @-webkit-keyframes flash {
    0%, 50%, 100% {
    opacity: 1;
    }
   25%, 75% {
    opacity: 0;
    }
   }
   @keyframes flash {
    0%, 50%, 100% {
    opacity: 1;
    }
   25%, 75% {
    opacity: 0;
    }
   }


   .flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}
section h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
section .texto {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}
section a {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #181818;
    font-weight: bold;
}
.content{

    text-align: left;
}

.content h3, p.texto{

text-align: center;

}
section .caja .content,
section .caja a {
    z-index: 1;
    position: relative;
    transition: 0.5s;
   
}
section .caja:hover .content,
section .caja:hover a {
    color: white;
}


/* Efecto AZUL */

section .caja:nth-child(1) .icon,
section .caja:nth-child(5) .icon,
section .caja:nth-child(9) .icon,
section .caja:nth-child(13) .icon,
section .caja:nth-child(17) .icon,
section .caja:nth-child(21) .icon,
section .caja:nth-child(25) .icon {
    box-shadow: 0 0 0 0 #4056A1;
    background: #4056A1;
}
section .caja:nth-child(1):hover .icon,
section .caja:nth-child(5):hover .icon,
section .caja:nth-child(9):hover .icon,
section .caja:nth-child(13):hover .icon,
section .caja:nth-child(17):hover .icon,
section .caja:nth-child(21):hover .icon,
section .caja:nth-child(25):hover .icon {
    box-shadow: 0 0 0 400px #4056A1;
}


/* Efecto VERDE */

section .caja:nth-child(2) .icon,
section .caja:nth-child(6) .icon,
section .caja:nth-child(10) .icon,
section .caja:nth-child(14) .icon,
section .caja:nth-child(18) .icon,
section .caja:nth-child(22) .icon,
section .caja:nth-child(26) .icon {
    box-shadow: 0 0 0 0 #369963;
    background: #369963;
}
section .caja:nth-child(2):hover .icon,
section .caja:nth-child(6):hover .icon,
section .caja:nth-child(10):hover .icon,
section .caja:nth-child(14):hover .icon,
section .caja:nth-child(18):hover .icon,
section .caja:nth-child(22):hover .icon,
section .caja:nth-child(26):hover .icon {
    box-shadow: 0 0 0 400px #369963;
}


/* Efecto ROJO */

section .caja:nth-child(3) .icon,
section .caja:nth-child(7) .icon,
section .caja:nth-child(11) .icon,
section .caja:nth-child(15) .icon,
section .caja:nth-child(19) .icon,
section .caja:nth-child(23) .icon,
section .caja:nth-child(27) .icon {
    box-shadow: 0 0 0 0 #c83a3a;
    background: #c83a3a;
}
section .caja:nth-child(3):hover .icon,
section .caja:nth-child(7):hover .icon,
section .caja:nth-child(11):hover .icon,
section .caja:nth-child(15):hover .icon,
section .caja:nth-child(19):hover .icon,
section .caja:nth-child(23):hover .icon,
section .caja:nth-child(27):hover .icon {
    box-shadow: 0 0 0 400px #c83a3a;
}


/* Efecto NARANJA */


section .caja:nth-child(4) .icon,
section .caja:nth-child(8) .icon,
section .caja:nth-child(12) .icon,
section .caja:nth-child(16) .icon,
section .caja:nth-child(20) .icon,
section .caja:nth-child(24) .icon,
section .caja:nth-child(28) .icon {
    box-shadow: 0 0 0 0 #f38304;
    background: #f38304;
}
section .caja:nth-child(4):hover .icon,
section .caja:nth-child(8):hover .icon,
section .caja:nth-child(12):hover .icon,
section .caja:nth-child(16):hover .icon,
section .caja:nth-child(20):hover .icon,
section .caja:nth-child(24):hover .icon,
section .caja:nth-child(28):hover .icon {
    box-shadow: 0 0 0 400px #f38304;
}


/* Para los enlaces de las cajas */

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

a:hover, a:focus {
    background-size: 100% 2px;
}

/* Mobile */
@media (min-width: 0px) {
    .logo, .logo img {
        text-align: center;
       /*  margin-top: -250px; */
    }
    section .wrapper {
        /* padding-top: 40px; */
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    section .wrapper .caja {
        display: inline-block;
        width: 300px;
        padding: 40px;
        background: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin: 20px;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
    }
}
/* Tablet */
@media (min-width: 768px) {
    .logo, .logo img {
        text-align: center;
       /*  margin-top: -200px; */
    }
    section .wrapper {
       /*  padding-top: 40px; */
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    section .wrapper .caja {
        display: inline-block;
        width: 325px;
        padding: 40px;
        background: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin: 20px;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
    }
}
/* Desktop */
@media (min-width: 992px) {
    section .wrapper {
       /*  padding-top: 40px; */
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    section .wrapper .caja {
        display: inline-block;
        width: 350px;
        padding: 40px;
        background: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin: 20px;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
    }
}
/* Large-Desktop */
@media (min-width: 1200px) {
    section .wrapper {
       /*  padding-top: 40px; */
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    section .wrapper .caja {
        display: inline-block;
        width: 350px;
        padding: 40px;
        background: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin: 20px;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
    }
}