*{
    margin: 0;
    padding: 0;
}
body{
    background-color: white;
    font: 16px/1 "Lato", sans-serif;
}

/*///////DIV MAIN////*/

.main{
    margin: auto;
    padding: 0;
    width: 100%;
    height: 600px;
    background-image: url(img/fondo1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; 

}

/*///////DIV CONTENEDOR DEL MENU///////*/

.contenedor-menu{
    margin: auto;
    width: 90%;
    height: 450px;
}

/*/////ESTILOS DEL ASIDE/////////*/

aside{
    margin: 0 auto;
    padding-top: 7%;
    width: 100%;
    height: 100%;
    float: left;

}

aside h1{
    text-align: justify;
    font-size: 6rem;
    color: whitesmoke;
    margin: auto;
    padding: 10px;
    font-style: italic;
    font-weight: bold;
}

aside h3{
    text-decoration: white;
    text-align:inherit;
    font-size: 1.5rem;
    font-style: italic;
    color: whitesmoke;
    margin: auto;
    padding: 10px;
}


/*////////////////////////////////////*/
/*///ESTILOS DE LA SECCION PRIMARY////*/
/*///////////////////////////////////*/

.primary{
    width: 100%;
    height: fit-content;
    margin: 0 auto;
    padding: 0;
    margin-top: 10px;
}

/*////ESTILOS DE LAS SECCIONES////*/

.seccion{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    min-width: 300px;
    min-width: 355px;
    height: 450px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    flex-direction:row;
}

/*////ESTILOS DE LOS CONTENEDORES DE IMAGENES/////*/

.cont-img{
    margin: 0 auto;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 0px;
    width: 500px;
    height: 400px;
    min-height: 140px;
    float: left;
}

.cont-img img{
    width: 100%;
    height: 400px;
    min-height: 140px;
    padding: 0;
    margin: 0;
    border-radius: 5%;
}


/*////ESTILOS DE LOS CONTENEDORES DEL TEXTO////*/

.cont-texto{
    margin: 0 auto;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-right: 10px;
    margin-left: 0px;
    width: 500px;
    height: 400px;
    min-height: 140px;
    float: right;
}

.cont-texto article{
    width: 95%;
    min-width: 140px;
    height: 100%;
    min-height: 300px;
    margin: 0 auto;
    padding: 0;
}

.cont-texto article strong em{
    text-align: left;
    font-size: 2rem;
    color: rgb(224, 145, 92);
    font-style: italic;
    font-family: Verdana, Geneva, Tahoma, sans-serif;


}

.cont-texto article span{
    min-width: 140px;
    min-height: 140px;
    text-align: justify;
    font-size: 18px;
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

/*////ESTILOS DE LA TABLA DE PRECIOS////*/

.tabla{
    margin: 0 auto;
    padding: 0;
    margin-top: 10px;
    float: center;
    width: 90%;
    min-width: 140px;
    height: 200px;
    min-height: 140px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.tabla table{
    width: 100%;
    min-width: 140px;
    height: 100%;
    min-height: 140px;
    border: none;
}

.tabla table th{
    text-align: center;
    padding: 5px;
    border: none;
    color: rgb(224, 145, 92);
    font-weight: bold;

}

.tabla table td{
    text-align: center;
    padding: 5px;
    border: none;
    font-weight: bold;
}



/*//////ESTILOS DEL DIV SECOND/////////*/

.second{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 500px;
    margin-top: 20px;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

/*/////ESTILOS DEL TITULO ENCABEZADO EN EL SLIDER///////*/

.second h3{
    text-align: center;
    font-size: 2rem;
    font-style: italic;
    font-weight: bold;
    color: rgb(224, 145, 92);
    margin: 0 auto;
    padding-top: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}




/*//////ESTILOS DEL CONTENEDOR DEL SLIDER///////*/

.slider{
    margin: 0 auto;
    padding: 0;
    margin-top: 50px;
    margin-left: 30px;
    width: 650px;
    overflow: hidden;
    height: 350px; 
    float: left;
}

.slider ul{
    display: flex;
    animation: cambio 20s infinite alternate linear;
}

.slider li{
    width: 650px;
    list-style: none;
}

.slider li img{
    margin: 0 auto;
    padding: 0;
    margin-left: 30px;
    width: 650px;
    height: 350px;
    border-image: auto;

}

.video1{
    margin: 0 auto;
    margin-top: 50px;
    margin-left: 20px;
    width: 650px;
    height: 350px;
    min-width: 150px;
    min-height: 150px;
    float: right;
}

@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%;}
    100%{margin-left: -300%;}

}

/*////////ESTILOS DEL VIDEO 1///////////*/

.video1{
    float: right;
    width: 40%;
    margin: 0 auto;
    margin-top: 50px;
    margin-right: 20px;
    padding: 0;
    height: 350px;
    min-width: 300px;
}

.video1 video{
    width: 100%;
    height: 350px;
    min-width: 300px;
}

/*///////////ESTILOS DEL VIDEO 2//////*/
.video2{
    float: left;
    width: 40%;
    margin: 0 auto;
    margin-top: 50px;
    margin-right: 20px;
    padding: 0;
    height: 350px;
    min-width: 300px;
}

.video2 video{
    width: 100%;
    height: 350px;
    min-width: 300px;
}














/*////////////////////////////////////////*/
/*///ESTILOS DEL DIV SECCION THIRD (#3)///*/
/*////////////////////////////////////////*/

.third{
    margin: 0 auto;
    padding: 0;
    margin-top: 10px;
    width: 100%;
    height: 700px;
    min-width: 300px;
    min-height: 300px;
    background-image: url(img/fondo5.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; 
    justify-content: center;
    flex-wrap: wrap;
}

.carta-menu{
    float: right;
    width: 40%;
    min-width: 100px;
    height: fit-content;
    margin: 0 auto;
    padding: 0;
    margin-top: 50px;
    margin-right: 50px;
}

.carta-menu h3{
    text-align: left;
    font-size: 1.3rem;
    font-style: oblique;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;
    
}

.carta-menu h1{
    text-align: left;
    font-size: 2.2rem;
    color: rgb(224, 145, 92);
    padding: 10px;
    padding-left: 10px;
    font-style: italic;
    font-weight: bold;

}

.carta-menu p{
    text-align: justify;
    font-size: 23px;
    font-weight: bold;
    padding: 5px;
    padding-left: 10px;
    padding-top: 30px;
    margin-bottom: 20px;
}

.planilla{
    margin: 0 auto;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    float: center;
    width: 90%;
    min-width: 100px;
    height: 200px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: none;
    table-layout:auto;
}

.planilla table{
    width: 100%;
    min-width: 100px;
    height: 100%;
    border: none;
}

.planilla th{
    text-align: center;
    font-size: 1.2rem;
    padding: 5px;
    border: none;
    border-bottom: 3px solid black;
    color: red;
    font-weight: bold;

}

.planilla td{
    text-align: justify, right;
    padding: 5px;
    border: none;
    font-weight: bold;
}


/*//////////////ESTILOS DEL VIDEO 2/////////*/

.video2{
    float: left;
    width: 40%;
    min-width: 200px;
    height: fit-content;
    margin: 0 auto;
    padding: 0;
    margin-top: 70px;
    margin-right: 20px;
    margin-left: 50px;
}


/* ************************* */
/*     FOTO DEL GRUPO        */
/* ************************* */

h4 em{
    text-align: left;
    font-size: 2rem;
    color: orangered;
    margin-top: 50px;
    margin-left: 30px;
    padding: 0 10px;
    float: center;
}

.integrantes{
    text-align: justify;
    list-style: none;
    text-decoration: none;
    font-size: 18px;
}

.integrantes li{
    text-align: justify;
    
}

p a{
    margin-left: 30px;
    text-align: justify;
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.foto-equipo{
    margin: 0 auto;
    padding: 0;
    margin: 10px 30px;
    width: 600px;
    height: 400px;

}
.foto-equipo h3{
    text-align: center;
    font-size: 2rem;
    color: orangered;
    padding: 10px 0;
    font-weight: bold;
}
.foto-equipo img{
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 3%;
}












footer{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: fit-content;
}

.pie{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: fit-content;
    float: center;
    text-align: center;
    background-color: rgb(1, 1, 60);
}

.pie h4{
    display: inline-block;
    padding: 20px;
    font-weight: bold;
    color: white;
    font-size: 15px;
}

.pie h4 a{
    color: white;
}


@media(max-width: 400px){
    .main{
        width: 50%;
        height: auto;
    }

    .contenedor-menu{
        width: 50%;
        height: auto;
    }

    .primary{
        width: 50%;
    }
    
    .seccion{
        width: 400px;
        height: fit-content;
    }

    .cont-img{
        width: 150px;
        height: 150px;
    }

    .cont-texto{
        width: 150px;
        height: 150px;
    }

    .cont-texto .tabla{
        width: 150px;
        height: 150px;
    }

    .second{
        width: 100%;
        height: 80vh;

    }

    .slider{
        width: 100%;
        height: 200px;
    }

    .slider img{
        width: 200px;
        height: 200px;
    }

    .video1{
        width: 80vh;
        height: 200px;
    }

    .third{
        width: 50%;
        height: fit-content;

    }

    .video2{
        width: 200px;
        height: 200px;
    }

    .carta-menu{
        width: 200px;
    }

    .carta-menu .contenedor-menu{
        width: 200px;
        height: auto;
    }
}