@import url(submenu.css);
@import url(letras.css);

* {
    box-sizing: border-box;
    padding: 0;
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body{
    margin: 0;
}

.flex-vertical{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

header {
    width: 100%;
}

.logotipo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.logotipo .logo img {
    width: 300px;
    margin: 10px;
}

.submenu-pantalla {
    width:100%;
    text-align: center;
    letter-spacing: 7px; 
}

.submenu-pantalla a{
    color: #C99967;
    display: inline-block;
    width: 30%;
    margin:15px;
}

.submenu-pantalla a:hover{
    color: rgb(155, 4, 4);
}

main .contenedor {
    width: 100%;
}

.gris {
    background-color: #F2F2F2;
    padding: 30px 0;
    margin: 30px 0;
}

.gris article, .gris div {
    width: 45%;
}

.primera-seccion{
    width:100%;
    text-align: center;
    margin: 0 15px;
}
.primera-seccion a:hover{
    color: #C99967;
}
.imagen-principal {
    margin: 0 15px;
}
.imagen-principal img {
    width: 500px;
    border-radius: 5px;
    box-shadow: 0 0 15px 5px grey;
}

.marcas {
    margin: 30px 0;
}
.marcas img {
    max-width: 180px;
    box-shadow: 2px 2px 5px  grey;
    border-radius: 5px;
    display: block;
    margin:10px;
}

.marcas img:hover{
    box-shadow: 5px 5px 5px  #C99967;
}



.collage .primero img, .tercero img {
    width: 320px;
    margin: 10px;
}

.collage .segundo img {
    width: 350px;
    margin: 5px;
}

.collage .primero, .collage .tercero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.frase {
    margin: 20px 0;
}

.frase .quote {
    text-align: center;
    width: 50%;
}


@media screen and (max-width:501px){
    header {
        border-bottom: 1px solid #F2F2F2;
    }
    .imagen-principal {
        text-align: center;
    }
    .imagen-principal img{
        width: 95%;
        min-width:380px;
        margin: 30px 0;
    }
    header .submenu-pantalla{
        display: none;
    }
    .gris {
        padding: 25px 0;
        margin: 1px 0;
    }
    .logotipo {
        height: 60px;
    }
    .logotipo .logo img {
        width: 220px;
        margin: 10px;
    }
    .primera-seccion .tamano-uno {
        font-size: 14px;
    }
    
.gris article, .gris div {
    width: 100%;
}
    .titulo-principal{
        font-size: 40px;
    }
}