*{
    margin: 0px auto;
    padding: 0px;
}

/*Fuentes añadidas*/
@font-face {
    font-family: "WebSymbolsRegular";
    src: url("fonts/websymbols-regular-webfont.eot");
    src: url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"),
        url("fonts/websymbols-regular-webfont.woff") format("woff"),
        url("fonts/websymbols-regular-webfont.ttf") format("truetype"),
        url("fonts/websymbols-regular-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

body{
    background: url("/img/pattern.png");
}

#content{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 200px 1fr 500px;
    grid-template-areas: 
    "cabecera cabecera cabecera cabecera" 
    "contenido contenido contenido lateral"
    "pie pie pie pie"
    ;
    width: 100%;
    height: 1500px;
    margin: 0px auto;
    
}

#cabecera{
    display: grid;
    grid-area: cabecera;
    width: 90%;
}

#cabecera #logocompleto{
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-areas: "texto logo";
    width: 50%;
    height: 50px;
    margin-top: 30px;
}

#cabecera #logocompleto h1{
    grid-area: texto;
    width: 60%;
    height: 50px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 315%;
    text-align: center;
    margin-top: 30px;
    margin-left: 20%;
    color: #00f6f3;
}

#cabecera #logocompleto a .logo{
    grid-area: logo;
    width: 43%;
    height: auto;
    margin-top: 12px;
    margin-left: 0%;
}

#cabecera #logocompleto a .logo:hover{
    color: white;
    
}

#header{
    width: 75%;
    height: 100px;
}

#cabecera #header #menu{
    width: 100%;
    height: 100%;
}

#cabecera #header #menu ul{
    display: grid;
    grid-template-columns: repeat(4,17%);
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    list-style: none;
    margin-top: 15px;
}

#menu ul li a{
    color: black;
    text-transform: uppercase;
    padding: 10px;
    text-decoration: none;
    font-size: 25px;
}

#menu ul li a:first-child{
    margin-left: -45%;
}

#menu ul li a:hover{
    color: #00f6f3;
    font-size: 22px;
    border-bottom: 10px black;
}

#section{
    display: grid;
    grid-area: contenido;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 300px 100px 1000px 100px 1000px 100px 600px;
    grid-template-areas: 
    "hotsale"
    "seccion-carrusel"
    "oferta"
    "seccion-oferta"
    "producto"
    "seccion-producto"
    "nosotros"
    "seccion-nosotros"
    ;
    width: 100%;
    height: 3600px;
}

#section #lo-mas-vendido-h3{
    grid-area: hotsale;
    font-size: 35px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #b75beb;
    text-align: center;
    margin-top: 40px;
    text-shadow: 0px 0px 2px #101010;
}

#section #carrusel{
    grid-area: seccion-carrusel;
    width: 90%;
    height: 100%;
    border-radius: 0px 30px 0px 30px;
    box-shadow: 0px 0px 5px rgb(135, 135, 135) inset;
    overflow: hidden;
    background: rgb(237, 237, 237);
}

#section #carrusel .carrusel-items{
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 85px;

}
#section #carrusel .item1{
    margin-top: 0px;
}

#carrusel .carrusel-items .tarjeta-por-cuatro{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-right: 0px;

}


#carrusel .carrusel-items .flechas-items{
    position: absolute;
    top: 120px;
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    text-align: center;
    justify-content: space-between;
    padding: 20px;

}

#carrusel .carrusel-items .flechas-items .boton-left{
    margin-left: -4%;
}

#carrusel .carrusel-items .flechas-items .boton-right{
    margin-left: 84%;
}

.card{
    width: 200px;
    height: 250px;
    float: right;
    margin-top: 25px;
    background: #b75beb;
    box-shadow: 1px -2px 5px rgb(95, 95, 95);
    border-radius: 0px 30px 0px 30px;
    margin-left: 3%;
}

.card .img-card{
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;

}

.card .img-card img{
    display: block;
    width: 100%;
    height: 100%;

}
.card p{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 13px;
    color: white;
}

.card span{
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
    margin-left: 10%;
    color: white;
    
}
.card a{
    display: block;
    width: 50%;
    height: 33px;
    color: white;
    text-decoration: none;
    background-color: #00f6f3;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-top: -23px;
    text-align: center;
    padding-top: 5px;
    margin-left: 50%;
}

.card a:hover{
    
    cursor: pointer;
    color: black;
    box-shadow: 0px 0px 5px rgb(135, 135, 135) inset;
    border-radius: 7px;
    margin-top: -22px ;
}

#section #oferta-h3{
    grid-area: oferta;
    font-size: 35px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #4f5af5;
    text-align: center;
    margin-top: 40px;
    text-shadow: 0px 0px 2px #101010;
}

#section #ofertas{
    display: grid;
    width: 90%;
    height: 100%;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
}

.card-ofertas {
    width: 200px;
    height: 300px;
    margin-top: 20px;
    background: #4f5af5;
    box-shadow: 1px -2px 5px rgb(95, 95, 95);
    margin-left: 3%;
}

.card-ofertas .img-card-ofertas{
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;

}

.card-ofertas .img-card-ofertas img{
    display: block;
    width: 100%;
    height: 100%;

}
.card-ofertas p{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 13px;
    color: white;
}

.card-ofertas span{
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
    margin-left: 20%;
    color: black;
    
}
.card-ofertas #precio-ant{
    color: red;
}

.card-ofertas a {
    display: block;
    width: 100%;
    height: 33px;
    color: white;
    text-decoration: none;
    background-color: #00f6f3;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-top: 8px;
    text-align: center;
    padding-top: 5px;

}

.card-ofertas a:hover{
    
    cursor: pointer;
    color: black;
    box-shadow: 0px 0px 5px rgb(135, 135, 135) inset;
    border-radius: 7px;
    margin-top: 8px ;
}


#section #producto-h3{
    grid-area: producto;
    font-size: 35px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #2789f0;
    text-align: center;
    margin-top: 40px;
    text-shadow: 0px 0px 2px #101010;
}

#section #productos{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(4,1fr);
    width: 90%;
    height: 100%;
}


.card-productos {
    width: 200px;
    height: 290px;
    margin-top: 0px;
    background: #2789f0;
    box-shadow: 1px -2px 5px rgb(95, 95, 95);
    border-radius: 30px 30px 30px 30px;
    margin-left: 3%;
    margin-top: 20px;
}



.card-productos .img-card-productos{
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;

}

.card-productos .img-card-productos img{
    display: block;
    width: 100%;
    height: 100%;

}
.card-productos p{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 13px;
    color: white;
}

.card-productos span{
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    margin-left: 25%;
    color: white;
    
}

.card-productos a {
    display: block;
    width: 100%;
    height: 33px;
    color: white;
    text-decoration: none;
    background-color: #00f6f3;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-top: 8px;
    text-align: center;
    padding-top: 5px;
    border-radius: 0px 0px 30px 30px;

}

.card-productos a:hover{
    
    cursor: pointer;
    color: black;
    box-shadow: 0px 0px 5px rgb(135, 135, 135) inset;
    border-radius: 7px;
    margin-top: 8px ;
}



#section #nosotros-h3{
    grid-area: nosotros;
    font-size: 35px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #b75beb;
    text-align: center;
    margin-top: 40px;
    text-shadow: 0px 0px 2px #101010;
}

#section #nosotros{
    width: 90%;
    height: 100%;
}

#section #nosotros h4{
    display: block;
    background: rgb(239, 241, 241);
    font-size: 30px;
    font-family: 'Courier New', Courier, monospace;
    color: #00f6f3;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;

}

#section #nosotros p{
    font-family:'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    color: black;
}

#content #lateral{
    grid-area: lateral;
    width: 95%;
    height: 91%;
    box-shadow: 0px 0px 5px rgb(135, 135, 135) inset;
    overflow: hidden;
}
#content #lateral #tarjetas{
    width: 90%;
    height: 40%;
    overflow: hidden;
}
#content #lateral #tarjetas h3{
    font-size: 45px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #0089db;
    margin-top: 15px;
}

#content #lateral #tarjetas img{
    display: block;
    width: 100%;
    height: 15%;
    margin-top: 10px;
}
#content #lateral #comentarios{
    width: 90%;
    height: 40%;
    margin-top: -20%;
}

#content #lateral #comentarios h3{
    font-size: 45px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #e857b6;
    margin-top: 15px;
}

#content #lateral #comentarios p{
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    font-size: 15px;
    margin-top: 10px;
}
#content #lateral #comentarios p:hover{
    color: #e857b6;
}

#content #lateral #comentarios p span{
    display: block;
    background: #333;
    color: rgb(240, 237, 237);
    font-size: 20px;
}
#content #lateral #comentarios p:hover span{
    background: black;
    color: #e857b6;
}

#content #lateral #preguntas{
    width: 90%;
    height: 20%;
    margin-top: -94%;
}

#content #lateral #preguntas h3{
    font-size: 45px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #de0f96;
    margin-top: 15px;
    
}

#content #lateral #preguntas h5{
    display: block;
    background: black;
    color: white;
    font-size: 25px;
    text-align: center;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-top: 10px;

}
#content #lateral #preguntas h5:hover{
    color: #1960ee;
    background: white;
    border:0.5px solid black;
}
#content #lateral #preguntas p{
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    font-size: 15px;
    margin-top: 10px;
}

#content #lateral #preguntas a{
    text-decoration: none;
    color: #de0f96;
    cursor: pointer;
}
#content #lateral #preguntas a:hover{
    color: #570139;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}



#content #pie-de-pagina{
    grid-area: pie;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 90% 10%;
    grid-template-areas: 
    "pie-pagina"
    "desarrollado"
    ;
    background: black;
    margin-top: -15%;
}
#content #pie-de-pagina #footer{
    grid-area: pie-pagina;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-areas: 
    "menu-pie mapa-pie redes-pie";
    width: 90%;
    height: 100%;
}

footer #menu-footer{
    grid-area: menu-pie;
    width: 100%;
    height: 100%;
}
footer #menu-footer h5{
    display: block;
    background: #00f6f3;
    height: 45px;
    letter-spacing: 2px;
    text-align: center;
    font-size: 35px;
    color: white;
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 30px;
    margin-left: 5%;
    margin-right: 5%;

}

footer #menu-footer ul{
    list-style-type: none;
    margin-top: 20%;
    text-align: center;
}
footer #menu-footer ul li{
    margin-top: 40px;
}

footer #menu-footer ul li a{
    font-size: 20px;
    text-decoration: none;
    color: white;
    margin-top: 30px;
}
footer #menu-footer ul li a:hover{
    color: #00f6f3;
    font-size: 25px;
    transition: all 300ms;
}


footer #location{
    grid-area: mapa-pie;
    width: 100%;
    height: 100%;
}

footer #location h5{
    display: block;
    background:#00f6f3;
    height: 45px;
    letter-spacing: 2px;
    text-align: center;
    font-size: 35px;
    color: white;
    border-radius: 5px;
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

footer #location iframe{
    display: block;
    width: 70%;
    height: 70%;
    justify-content: center;

}


footer #contacto-redes{
    grid-area: redes-pie;
    width: 100%;
    height: 100%;
}


footer #contacto-redes h5{
    display: block;
    background: #00f6f3;
    height: 45px;
    letter-spacing: 2px;
    text-align: center;
    font-size: 35px;
    color: white;
    border-radius: 5px;
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

.icon{
    font-family: WebSymbolsRegular;
}


footer #contacto-redes #logos-redes ul{
    list-style-type: none;
    margin-top: 10%;
    text-align: center;
}

footer #contacto-redes #logos-redes ul li a{
    font-size: 80px;
    text-decoration: none;
    color: white;
    margin-top: 30px;
}
footer #contacto-redes #logos-redes ul li .f:hover{
    color: #1960ee;
}
footer #contacto-redes #logos-redes ul li .g:hover{
    color: #e31e1e;
}
footer #contacto-redes #logos-redes ul li .t:hover{
    color: #1998ec;
}

#content #pie-de-pagina #desarrollado-autor{
    grid-area: desarrollado;
    width: 100%;
    height: 100%;
    background: black;
}

#content #pie-de-pagina #desarrollado-autor p{
    text-align: center;
    font-size: 20px;
    color: white;
}
#content #pie-de-pagina #desarrollado-autor p a{
    text-decoration: none;
    color: white;
}

#content #pie-de-pagina #desarrollado-autor:hover{
    background: white ;
    transition: all 300ms;
}
#content #pie-de-pagina #desarrollado-autor:hover p{
    color: black;
}

#content #pie-de-pagina #desarrollado-autor:hover a{
    color: black;
}

#content #pie-de-pagina #desarrollado-autor p a:hover{
    color: #035453;
}