@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Oswald";
    text-decoration: none;
    
}



.header_superior{

max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
padding: 8px 50px;


}

aside{

    float: right;
    width: 20%;
    height: 10%;
 
}

.img{
    width: 100px;
    height: 60px;
   
}

.cointainer__menu{

width: 100%;
height: 70%;
padding: 2px 10px;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
background: #f2f6f8; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */


}

.menu{

max-width: 1200px;
margin: auto;
height: 100%;

}

nav{
    height: 100%;
}

nav > ul{
   height: 100%;
   display: flex;

}

nav ul li{

height: 100%;
list-style: none;
position: relative;

}

nav > ul > li > a{
width: 100%;
height: 100%;
display: flex;
color: rgb(20, 10, 71);
align-items: center;
padding: 14px;
text-transform: uppercase;
font-size: 14px;    
transition: all 300ms ease;

} 

nav > ul > li > a:hover{
transform: scale(1.1);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
    background: #ebf1f6; /* Old browsers */
    background: -moz-linear-gradient(top,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
    
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

}


nav ul li ul{

    width: 200px;
    display:flex;
    flex-direction: column;
    background: white;   
    position: absolute; 
    padding: 14px 0px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    top: 50px;
    left: -5px;
    visibility: hidden;
    opacity: 5px;
    z-index: 10;
    transition: all 300ms ease;
    
}

nav ul li:hover ul{
    visibility: visible;
    opacity: 1;
    top: 70px;
}

nav ul li ul:before{
    content:'' ;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid white;
    position: absolute;
    top: -12px;
    left: 20px;

}

nav ul li ul li a{

display: block;
color: #051b29;
padding: 6px;
margin-left: 14px;
margin-top: 10px;
font-size: 14px;
text-transform: uppercase;
transition: all 300ms ease;

}


nav ul li ul li a:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(top,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */


color: #052033;
transform: scale(1.1);
padding-left: 30px;
font-size: 14px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}


/*articulos*/

.slider{
    width: 100%;
    height: 400px;
    overflow: hidden;
   

    
}


.slider ul{
    display: flex;
    animation: cambio 20s infinite alternate ease-in-out;
    width: 200%;
}

.slider li{
width: 100%;
list-style: none;
}

.slider img{

width: 100%;
height: 100%;

}

@keyframes cambio{

    0%{margin-left: 0;}
    20%{margin-left: 0;}

    25%{margin-left: -100%;}
    45%{margin-left: -100%;}

    50%{margin-left: -200%;}
    70%{margin-left: -200%;}

    75%{margin-left: -300%;}
    95%{margin-left: -300%;}

}

main{

    background: #93c1e4;
    padding: 40px 20px;
    margin-top: 194px;
   
}

article{
max-width: 1200px;
margin: 20px auto;
padding: 40px;
background:rgb(250, 248, 248) ;

}

article p{

    margin-top: 20px;
    font-size: 18px;
    font-weight: 300px;
}


.pie-pagina{
    width: 100%;
    background-color: #052033;
}

.pie-pagina .grupo-1{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);  
    grid-gap: 50px;
    padding: 45px 0px; 

}

.pie-pagina .grupo-1 .box figure{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.pie-pagina .grupo-1 .box figure img{
    width: 150px;
}

.pie-pagina .grupo-1 .box h2{
    color: #f2f6f8;
    margin-bottom: 25px;
    font-size: 20px;

}

.pie-pagina .grupo-1 .box p{
    color: #ebf1f6;
    margin-bottom: 10px;

}

.pie-pagina .grupo-1 .red-social a{
    display: inline-block;
    text-decoration: none;
    width: 45px;
    height: 45px;
    line-height:45px;
    color:#f7f8f2;
    margin-right: 10px;
    background-color: #051b29;
    text-align: center;
    transition: all 300ms ease;

}

.pie-pagina .grupo-1 .red-social a:hover{
color: #25d8f8;

}

.pie-pagina .grupo-2{

    background-color:#0a1a2a;
    padding: 15px 10px;
    text-align: center;
    color: #fff;
  
}



    


.logo {
    text-align: center;
    font-size: 3em;
}

.logo span {
    color: #44cc66;
}

.contact-wrapper {
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, .3);
}

.contact-wrapper > * {
    padding: 1em;
}

.contact-form {
    background: white;
}

.contact-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-form form label {
    display: block;
}

.contact-form form p {
    margin: 0;
    padding: 1em;
}

.contact-form form .block {
    grid-column: 1 / 3;
}

.contact-form form button,
.contact-form form input,
.contact-form form textarea {
    width: 100%;
    padding: .7em;
    border: none;
    background: none;
    outline: 0;
    color: rgb(24, 86, 139);
    border-bottom: 1px solid #2b0a55;
}

.contact-form form button {
    background: #cfddf7;
    border: 0;
    text-transform: uppercase;
    padding: 1em;
}

.contact-form form button:hover,
.contact-form form button:focus {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
background: #f2f6f8; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */

    color: rgb(6, 37, 65);
    transition: background-color 1s ease-out;
    outline: 0;
}



/* CONTACT INFO */
.contact-info {
    background: white;
}

.contact-info h4, .contact-info ul, .contact-info p {
    text-align: center;
    margin: 0 0 1rem 0;
}

/* LARGE SIZE */

.icon__menu{
    font-size: 18px;
  
      
    cursor: pointer;
    width: 18px;
    height: 100%;
    display: none;
    align-items: center;
}



#label__check{
    width: 20px;
    height: 100%;
    display: none;
   

}


#check__menu{
    display: none;
}




@media(min-width: 720px) {
    body {
        padding: 0 4em;
    }
    .contact-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    .contact-wrapper > * {
        padding: 2em;
    }
    .contact-info h4,
    .contact-info ul,
    .contact-info p {
        text-align: left;
    }
}


@media screen and (max-width:720px){
    .search input{
        display: none;
    }

    .header_superior{
        padding: 5px;
    }

    .img{
        width: 70px;
    }

    nav > ul{
        flex-direction: column;
        
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
        background: #f2f6f8; /* Old browsers */
        background: -moz-linear-gradient(top,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
        ;
        position: fixed;
        left: 0;
        top: 100px;
        width: 100%;
        height: 0px;
        transition: all 300ms ease;
        z-index: 100;
        opacity: 0;
        visibility: hidden;

    }

    nav > ul > li >a:hover{
transform: scale(1);

    }

    nav ul li ul{
        left: 90px;
    }


    nav > ul > li:hover ul{

        top: 50px;

    }

    #label__check{
        display: block;
    }

    .icon__menu{
        display: flex;
    }

    #check__menu:checked ~ nav > ul{
        height: 300px;
        visibility: visible;
        opacity: 1;

    }

main{
    margin-top: 100px;
}

    
}