@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body{
    margin: 0px;
}
header{
    /* background: linear-gradient(to right, rgba(0,112,110,0.95) 0%,rgba(46,61,107,0.95) 47%,rgba(17,29,66,0.95) 100%); */
    background-image: url(../images/cabecera.png);
    background-size: 100% 160%;
    height: 16%;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
    z-index: 200;
    animation-name: cab;
    animation-duration: 5s;
}
@keyframes cuadro2 {
    0% {
        transform: scale(1) rotate(0deg) translateX(30%) translateY(0%);
        background-position-x: 50%;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        background-position-x: 0%;
        
    }
}


.portada4{
    background-image: url(../images/portada55min.jpg);
    background-size: 100%;
    background-position: center;
    width: 100%;
    height: 600px;
    margin-top: 2px;
    text-align: left;
}
/* .portada5{
    background-image: url(../images/portada6.jpeg);
    background-size: 100%;
    background-position: center;
    width: 100%;
    height: 600px;
    margin-top: 2px;
    text-align: center;
} */
.menu{
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
}

.contenedor div:hover{
    /* background: #f4f4f4; */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); 
}
footer{
    /* background: #27282b; */
    /* background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
    color:#939393;
    padding: 30px;
    text-align: center;
}
.logoQ{
    width: 200px;
    margin-bottom: 30px;
}
.menu-normal{
    position: absolute;
    top: 2350px;

}
.pieImg{
    height: 80px;
    margin-left: 50px;
    margin-right: 50px;
}

.pies{
    /* background: rgba(255,255,255,0.05); */
    padding: 20px;
    border-radius: 10px;
}
.bordeBajo{
    border-bottom: 1px solid #e0dede;
}
.imgPrincipal{
    width: 50%;
    margin-left: 25%;
}
/* .parrafo{
    color:white;
    padding: 60px 200px;
    display: inline-block;
}
.parrafo h1{
    font-size: 60px;
    font-weight: bold;
    font-family: 'Lato', Calibri, Arial, sans-serif;
}
.apartadoLetra{
    font-size: 20px;
    text-align: justify;
    display: inline-block;
}
.apartadoImagen{
    background: white;
    display: inline-block;
} */

.parrafo3{
    color:white;
    padding: 0px 10px 10px 20px;
    font-size: 15px;
}
.parrafo3 h1{
    font-size: 50px;
    font-weight: bold;
}

.exi{
    width: 50%;
}
.margenArriba{
    margin-top: 40px;
}
.animacionH1{
    animation-name: animaH1;
    animation-duration: 1.5s;
}
@keyframes animaH1 {
    0% {
        transform: scale(1) rotate(0deg) translateX(-50%) translateY(0%);
        opacity: 0.2;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.animacionp{
    animation-name: animap;
    animation-duration: 3s;
}
@keyframes animap {
    0% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(10%);
        opacity: 0.2;
    }
    50% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(10%);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.animacionc1{
    animation-name: animac1;
    animation-duration: 1s;
}
@keyframes animac1 {
    0% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    75% {
        transform: scale(1.1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.animacionc2{
    animation-name: animac2;
    animation-duration: 1.5s;
}
@keyframes animac2 {
    0% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    30% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    65% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    75% {
        transform: scale(1.1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.animacionc3{
    animation-name: animac3;
    animation-duration: 2s;
}
@keyframes animac3 {
    0% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    75% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    87% {
        transform: scale(1.1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.animacionc4{
    animation-name: animac4;
    animation-duration: 2.5s;
}
@keyframes animac4 {
    0% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    60% {
        transform: scale(1) rotate(0deg) translateX(50%) translateY(0%);
        opacity: 0;
    }
    80% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        transform: scale(1.1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.reg{
    /* background: rgba(255, 255, 255, 0.8); */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); 
    margin: 15px;
    color:#444444;
    font-size: 16px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    text-align: justify;
}
.reg span{
    font-weight: bold;
    color:#1a6866;
    font-size: 20px;
}

.titulo-var{
    background: rgba(84, 181, 161, 0.7);
    color:white;
    padding: 10px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
}
.contenido-val{
    padding: 25px;
    color:#242222;
    border-radius: 0px 0px 5px 5px;
    text-align: justify;

}
.cuadro1{
    animation-name: cuadro1;
    animation-duration: 2s;
}
@keyframes cuadro1 {
    0% {
        transform: scale(1) rotate(0deg) translateX(-30%) translateY(0%);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.cuadro2{
    animation-name: cuadro2;
    animation-duration: 2s;
}
@keyframes cuadro2 {
    0% {
        transform: scale(1) rotate(0deg) translateX(30%) translateY(0%);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.cuadro3{
    animation-name: cuadro3;
    animation-duration: 2.5s;
}
@keyframes cuadro3 {
    0% {
        transform: scale(1) rotate(0deg) translateX(30%) translateY(0%);
        opacity: 0;
    }
    30% {
        transform: scale(1) rotate(0deg) translateX(30%) translateY(0%);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.animaLetra{
    animation-name: letras;
    animation-duration: 2s;
}
@keyframes letras {
    0% {
        transform: scale(1) rotate(0deg) translateX(10%) translateY(0%);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
}
.justi{
    text-align: justify;
}
/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    .portada1{
        margin-top: 8%;
        background-image: url(../images/portada2bmin.jpg);
        background-size: 100%;
        background-position: center;
        width: 100%;
        height: 600px;
    }
    .portada3{
    background-image: url(../images/portada4min.jpg);
    background-size: 100%;
    background-position: center;
    width: 100%;
    height: 600px;
    margin-top: 2px;
}

    .parrafo{
        color:white;
        padding: 40px 10px 10px 40px;
    }
    .parrafo h1{
        font-size: 55px;
        font-weight: bold;
    }

    .imgCentro{
        width: 40%;
        margin-left: 25%;
        padding: 10px;
        text-align: center;
    }

    .parrafo div{
        font-size: 21px;
        text-align: justify;
    }
    .exito{
        width: 100%;
        margin: 5%;
        height: 150px;
        background: rgba(255,255,255,0.7);
        border-radius: 5px;
    
    }
    .fondo1{
        background-image: url(../images/cuadro1.png);
        background-size: auto 100%;
        background-position: center;
    }
    .fondo2{
        background-image: url(../images/cuadro2.png);
        background-size: auto 100%;
        background-position: center;
    }
    .fondo3{
        background-image: url(../images/cuadro3.png);
        background-size: auto 100%;
        background-position: center;
    }
    .fondo4{
        background-image: url(../images/cuadro4.png);
        background-size: auto 100%;
        background-position: center;
    }

    .portada2{
        background-image: url(../images/portada23min.jpg);
        background-size: 100%;
        background-position: center;
        width: 100%;
        height: 600px;
        margin-top: 2px;
    }
    .parrafo2{
        color:white;
        padding: 0px 10px 10px 20px;
    }
    .parrafo2 h1{
        font-size: 50px;
        font-weight: bold;
    }
    .contenido-val{
        padding: 25px;
        color:#242222;
        border-radius: 0px 0px 5px 5px;
        text-align: justify;
    
    }
    .menu .contenedor{
        background: rgba(255, 255, 255, 0.9);
        border-radius: 5px;
        padding: 10px;
        margin: 30px;
        font-weight: bold;
        display: inline-block;
        box-shadow: 0px 0px 15px rgba(0, 0, 0,0.5);
    }
    .contenedor div{
        /* background: white; */
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
        border:1px solid #c6c6c6;
        padding: 10px;
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 5px;
        width: 130px;
        display: inline-block;
        font-size: 12px;
        color:#545454;
        cursor: pointer;
    }
    .portada4{
        background-image: url(../images/portada55min.jpg);
        background-size: 100%;
        background-position: center;
        width: 100%;
        height: 600px;
        margin-top: 2px;
        text-align: left;
    }

    .parrafo5{
        color:#444444;
        padding: 10px 10px 10px 20px;
        font-size: 18px;
        /* text-align: justify; */
    }
    .parrafo5 h1{
        font-size: 50px;
        font-weight: bold;
        color:#333333;
    }

    .container-val{
        background: rgba(255, 255, 255, 0.7);
        width: 100%;
        border-radius: 5px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 767px) {
    .portada1{
        margin-top: 28%;
        background-image: url(../images/portada2bmin.jpg);
        background-size: auto 100%;
        background-position: center;
        width: 100%;
        /* height: 600px; */
    }
    .portada3{
    background-image: url(../images/portada4min.jpg);
    background-size: auto 100%;
    background-position: -160px;
    width: 100%;
    /*height: 600px;*/
    margin-top: 2px;
}
    .fondo1{
        background-image: url(../images/cuadro1.png);
        background-size: auto 100%;
        background-position: center;
    }
    .fondo2{
        background-image: url(../images/cuadro2.png);
        background-size: auto 100%;
        background-position: center;
    }
    .fondo3{
        background-image: url(../images/cuadro3.png);
        background-size: auto 100%;
        background-position: center;
    }
    .fondo4{
        background-image: url(../images/cuadro4.png);
        background-size: auto 100%;
        background-position: center;
    }

    .parrafo{
        color:white;
        padding: 40px 10px 10px 10px;
    }
    .parrafo h1{
        font-size: 22px;
        font-weight: bold;
        text-align: center;
    }

    .imgCentro{
        width: 50%;
        margin-left: 25%;
        padding: 10px;
        text-align: center;
    }
    .parrafo div{
        font-size: 16px;
        text-align: justify;
    }
    .exito{
        width: 100%;
        margin: 10px 10px 10px 0px;
        height: 150px;
        /*background: rgba(255,255,255,0.7);*/
        border-radius: 5px;
    
    }

    .portada2{
        background-image: url(../images/portada23min.jpg);
        background-size: auto 100%;
        background-position: center;
        width: 100%;
        /* height: 600px; */
        margin-top: 2px;
    }

    .parrafo2{
        color:white;
        padding: 0px 10px 10px 20px;
    }
    .parrafo2 h1{
        font-size: 30px;
        font-weight: bold;
    }
    .contenido-val{
        padding: 20px;
        color:#242222;
        border-radius: 0px 0px 5px 5px;
        text-align: justify;
        /* text-decoration: none; */
    
    }
    .contenido-val li{
        list-style:none;
        margin-left: -40px;
    }
    .menu .contenedor{
        background: rgba(255, 255, 255, 0.9);
        /* border-radius: 5px; */
        padding: 5px;
        /* margin: 30px; */
        font-weight: bold;
        display: inline-block;
        box-shadow: 0px 0px 15px rgba(0, 0, 0,0.5);
        width: 100%;
    }

    .contenedor div{
        /* background: white; */
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
        
        border:1px solid #c6c6c6;
        padding: 10px;
        margin-left: 0px;
        margin-right: 0px;
        border-radius: 5px;
        width: 45%;
        display: inline-block;
        font-size: 10px;
        color:#545454;
        cursor: pointer;
        margin-bottom: 5px;
    }
    .portada4{
        background-image: url(../images/portada55min.jpg);
        background-size: auto 100%;
        background-position: center;
        width: 100%;
        /* height: 600px; */
        margin-top: 2px;
        text-align: left;
    }

    .parrafo5{
        color:#444444;
        padding: 10px 10px 10px 20px;
        font-size: 18px;
        /* text-align: justify; */
    }
    .parrafo5 h1{
        font-size: 30px;
        font-weight: bold;
        color:#333333;
    }
    .sinmargen{
        margin: 0px -15px;
    }
    .container-val{
        background: rgba(255, 255, 255, 0.7);
        width: 100%;
        border-radius: 5px;
        margin-bottom: 10px;
    }
}