*{
    margin: 0;
    padding: 0;}
a{
    text-decoration: none;
}
body{
    background-color: rgba(0,0,0,0.1);
}
.g-recaptcha{
    float: left;
    margin: 1% 25%;
}
.ir-arriba {
	display:none;
	width: 40px;
	height: 40px;
	text-align: center;
    z-index: 100;
	line-height: 50px;
	background:black;
	font-size:30px;
	font-weight: bolder;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;}
.vertodos{
	display:none;
	width: auto;
	height: 40px;
    padding: 0% 1%;
	text-align: left;
	background:black;
	font-size:14px;
    border-right: 2px solid white;
    font-family: opensans;
	position: fixed;
    z-index: 100;
	bottom:20px;
	right:60px;} 
.vertodos a{
    color: white;
}
.iconomensaje2{
    width: 40px;
    padding-left: 5px;
    height: 40px;
    border-left: 2px solid white;
}
h56{
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
}
b{
    font-family: opensansbold;
}
@media (min-width:2000px){
    *{    
        max-width: 2000px;
        margin: 0 auto;}
}
@media (max-width:500px){
    .g-recaptcha{
        margin: 1%;}
    .ir-arriba {
        width: 11%;
        text-align: center;
        padding: 0;}
    .vertodos{
        width: 60%;
        text-align: left;}
    .iconomensaje2{
        width: 15%;
        float: right;
        padding: 0px 5px;
        height: 40px;
        border-left: 2px solid white;}
}
@media (max-width:350px){
    .vertodos{
        width: 70%;}
}

/*---------------------------------FUENTES-----------------------------------*/
@font-face {
    font-family: "opensans";
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular.woff') format('woff'),
         url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: "opensanslight";
    src: url('../fonts/OpenSans-Light.eot');
    src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Light.woff') format('woff'),
         url('../fonts/OpenSans-Light.ttf') format('truetype');}
@font-face {
    font-family: "opensansbold";
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold.woff') format('woff'),
         url('../fonts/OpenSans-Bold.ttf') format('truetype');}
@font-face {
    font-family: "opensansitalic";
    src: url('../fonts/OpenSans-Italic.eot');
    src: url('../fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic.woff') format('woff'),
         url('../fonts/OpenSans-Italic.ttf') format('truetype');}

/*---------------------------------BOTONERA-----------------------------------*/
nav{
    width: 100%;
    max-width: 2000px;
    height: auto;
    z-index: 10000;
    float: left;
    position: relative;}
.fixed{
    z-index: 100;
    max-width: 1900px;
    position:fixed; 
    border-bottom: 1px solid grey;
    transition: .5s;
    top:0;    
    padding: .5% 2%;
    height: 70px;}
.menu{
    width: 96%;
    float: left;
    font-family: opensanslight;
    letter-spacing: 2px;
    padding: 1% 2% 0% 2%;
    background-color: rgba(0,0,0,0.8);}
.logonav{
    height: 60px;
    margin: 5px;
    transition: .3s;
    float: left;}
.logonav:hover{
    opacity: .5;
}
.menu ul.menugeneral{
    width: auto;
    float: right;
    color: white;
    margin-top: 18px;
    display: flex;}
.menu ul.menugeneral a{ 
    color: white;
    margin: 0;}
.menu ul.menugeneral li.general{
    width: auto;
    float: right;
    text-align: center;
    display: block;
    color: white;
    transition: .3s;
    margin: 0px 20px 0px;
    padding: 20px 1px;}
.menu ul.general li.general:hover{
    font-family: opensans;
    margin: -2px 20px 0px;
    border-top: 2px solid white;}

#datos{
    width: 100%;
    height: 30px;
    z-index: 1000;
    background: grey;
    float: left;}
.iconav{
    height: 15px;
    margin: 7px 5px;
    float: left;}
p.texnav{
    width: auto;
    float: left;
    color: white;
    letter-spacing: 1px;
    font-size: 11px;
    line-height: 30px;
    font-family: opensanslight;
    height: 30px;}
#btn-menu{
    display: none;
    float: left;
    margin: 0;}
#iconomenu{    
    width:100%;
}
#iconomenu2{    
    width:100%;
}
.abrir{
    display:none;
    float: left;
    width:30px;
    height: 30px;
    padding: 10px;}
.cerrar{
    display:none;
    float: left;
    width:30px;
    height: 30px;
    padding: 10px;
}
.abrir:hover{
    cursor:pointer;
    background: rgba(0,0,0,0.3);}
.logonavrespon{
    display: none;
}

.listacompleta{
    margin-left: 65%;
    transition: .3s;
    height: 0px;
    display: none;
    position:absolute;
    background: rgba(0,0,0,0.7);
    width: 30%;
    top:90px;
    line-height: 20px;
    left:0;
    padding:1%;}
.listacompleta li{
    list-style: none;
    float:right;
    width:100%;
    transition: .3s;
    float: left;
    padding:.5% 0%;
    margin: 0;
    font-size: 14px;
    line-height: 21px;}
.listacompleta li a{
    border-bottom: 1px solid white;}
.menu li#productosboton:hover{
    font-family: opensans;
    margin: -2px 20px 0px;
    border-top: 2px solid white;}
.menu ul.listacompleta li:hover{
    font-family: opensansbold;
}
.menu ul li:hover > ul {
    height: auto;
    display:block;
}


.idioma{
    float: right;
    color: white;
    margin: 5px 15px;}
.img-idioma{
    transition: .3s;
    width: 20px;}
.img-idioma:hover{
    opacity: 0.6;}
.idiomamenuresponsive{
    display: none;}

@media (max-width:800px){ 
    .menu ul li:hover > ul {
        display:none;}
    .logonavrespon{
        display: block;
        float: right;
        height: 40px;
        margin: 5px;}
    .logonav{
        display: none;}
    #datos{
        display: none;}
    nav{
        background: rgba(255,255,255,0.6);
        float: left;
        height: 50px;
        transition: .3s;
        position: fixed;
        z-index: 1000;}
    nav .abrir{
        display: block;}
    .cerrar{
        display: none;}
    .menu{
        position: absolute;
        height: auto;
        width:80%;        
        background: rgba(0,0,0,0.9);
        margin-top: 50px;
        color: white;
        margin-left: -85%;
        transition: all .5s;}    
    .menu ul a{ 
        color: white;}
    .menu ul.menugeneral{
        width: 100%;
        flex-direction: column;}   
    .menu li{
        border-top:1px solid white;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        border-right: 0px;}
    #btn-menu:checked ~ .menu{
        margin-left:0;} 
    #btn-menu:checked ~ .cerrar{
        display: block;} 
    #btn-menu:checked ~ .abrir{
        display: none;} 
    .idiomamenuresponsive{
        text-align: center;
        width: 100%;
        border-top: 1px solid white;
        float: left;
        padding: 20px 0px;
        display: block;
        font-family: opensans;
        color: white;}
    .idiomamenuresponsive a{
        color: white;}
    
}
@media (max-width:500px){
    p.texnav{
        font-size: 9px;}
}
@media (max-width:400px){
    #datos{
        display: none;} 
}


/*---------------------------------HEADER-----------------------------------*/
header{
    width: 100%;
    height: auto;
    margin: 0;
    z-index: -1000;
    float: left;}
#imagenfondoheader{
    width: 100%;
    height: 1000px;
    background-image: url(../img/header1.jpg);
    background-position: bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;}
#contenidoheader{
    width: 100%;
    height: auto;
    float: left;
    z-index: -1000;}
.frases{
	width: 70%;
    height: auto;
    float: left;
    margin-top: 20%;
    margin-bottom: 10%;
	overflow: hidden;}
.imgfrase{
    width: 90%;
    float: right;
    position: absolute;
    opacity: 0;
    animation-duration: 10s;
    animation-iteration-count: infinite;}
.frase1{
    animation-name: opacidad1;
}
.frase2{
    animation-name: opacidad2;
}
.frase3{
    animation-name: opacidad3;
}

@keyframes opacidad1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	20% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 0;}
	80% {opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes opacidad2 {
	0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 0;}
	50% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 1;}
	80% {opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 0;}
} 
@keyframes opacidad3 {
	0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 0;}
	80% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 1;}
}

@media (max-width:2000px){
    .frases{
        margin-left: 5%;
    }
}
@media (max-width:1600px){
    #imagenfondoheader{
        width: 100%;
        height: 800px;
        background-origin: border-box;
        background-attachment: inherit;
        background-size:cover;
        background-position: left;}
    .frases{
        width: 100%;
        margin-left: 0%;
        margin-top: 15%;
        margin-bottom: 5%;}
    .imgfrase{
        width: 80%;
        margin-left: 20%;
        float: right;}
}
@media (max-width:1100px){
    #imagenfondoheader{
        height: 600px; }
}
@media (max-width:800px){
    #imagenfondoheader{
        height: 400px;}
    .frases{
        margin-top: 20%;}
}
@media (max-width:500px){
    #imagenfondoheader{
        height: 400px;}
    .frases{
        width: 100%;
        margin-top: 25%;} 
    .imgfrase{
        width: 100%;
        margin: 0;}
}


/*---------------------------------ESPACIO-----------------------------------*/
.espacio{
    float: left;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    background: white;
    z-index: 1;}
.logoparalax{
    width: 50%;
    margin: 10% 25%;}

/*------------------------------PRODUCTOS DETALLE--------------------------------*/

section#productos{
    float: left;
    width: 90%;
    padding: 5%;
    height: auto;
    background-color: rgba(200,200,200,0.6);
    text-align: center;
    z-index: -100;}
.produ{
    width: 90%;
    padding: 5%;
    height: auto;
    text-align: center;
    float: left;    
    background-image: url(../img/header2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; 
}
.productdetalle{
    width: 30%;
    margin: 1% 1.5%;
    padding: 2% 0%;
    height: auto;
    float: left;
    border-bottom: 2px solid dimgrey;
    font-family: opensans; 
    text-transform: uppercase;
    letter-spacing: 2px;
    color: dimgrey;
    text-align: center;
    transition: .5s;}
.productdetalle:hover{
    font-family: opensansbold;
}

@media (max-width:1000px){
    .productdetalle{
        font-size: 12px;
        padding: 1% 0%;
     }
    #productos{
        margin-top: 20px;
    }
}
@media (max-width:850px){
    .productdetalle{
        width: 47%;
        font-size: 12px;
        padding: 1% 0%;
     }
}
@media (max-width:600px){
    .productdetalle{
        width: 97%;}
}

/*---------------------------------TEXTO-----------------------------------*/
.texto{
    width: 100%;
    height: auto;
    padding: 10% 0%;
    background: white;
    float: left;
    text-align: center;
}
h200{
    font-family: opensanslight;
    font-size: 50px;
    color: grey;
    letter-spacing: 10px;
    text-transform: uppercase;
    line-height: 200px;
}

/*---------------------------------FOOTER-----------------------------------*/
footer{
    width: 100%;
    height: auto;
    float: left;
    background-image: url("../img/bannerfooter.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
#botonerafooter{
    width: 100%;
    height: 40px;
    float: left;
    background: rgba(181,212,232,1.0);}
#botonerafooter ul{
    width: 50%;
    list-style: none;
    font-family: opensanslight;
    margin: 0% 25%;}
#botonerafooter ul li{
    width: 25%;
    float: left;
    line-height: 40px;
    font-size: 18px;
    text-align: center;}

#botonerafooter ul li:hover{
    font-family: opensans;
}
#botonerafooter ul li a{
    color: grey;
}
.logofooter{
    width: auto;
    height: 100px;
    float: left;
    margin: 4%;}
#datosfooter{
    width: 98%;
    margin-right: 2%;
    color: white;
    float: right;
    font-family: opensans;}
#datosfooter a{
    color: white;
    text-decoration: none;
}
.iconodatofooter{
    width: 3%;
    float: right;
    margin: 5px;
}
.dato{
    width: 100%;
    text-align: right;
    float: right;
    line-height: 30px;
}

#footerderecha{
    width: 50%;
    margin-top: 2%;
    margin-bottom: 2%;
    float: right;}
#footerizquierda{
    width: 50%;
    margin-top: 2%;
    margin-bottom: 2%;
    float: left;}

@media (max-width:1000px){
    #botonerafooter ul{
        width: 80%;
        margin: 0% 10%;}
}
@media (max-width:768px){
    #botonerafooter ul{
        width: 100%;
        margin: 0%;}
    h200{
        font-size: 30px;}
    #footerizquierda{
        width: 100%;
        float: left;
        text-align: center;
        margin: 0;
    }
    #footerderecha{
        width: 100%;
        float: left;
        text-align: center;
        margin: 0;
    }
    .logofooter{
        width: 50%;
        margin: 2% 25%;}
    .dato{
        text-align: center;
    }
    .iconodatofooter{
        width: 2%;
        margin: 1% 48%;
    }
    
}
@media (max-width:500px){
    #botonerafooter ul li{
        font-size: 12px;}
    h200{
        font-size: 20px;}
    .iconodatofooter{
        width: 5%;
        margin: 1% 47.5%;
    }
        
}
@media (max-width:400px){
    h200{
        font-size: 12px;
        letter-spacing: 2px;}        
}

/*---------------------------------CONTACTO-----------------------------------*/
.banner{
    width: 100%;
    height: auto;
    z-index: -100;
    float: left;}
.titulobanner{
    width: 76%;
    float: right;
    padding: 8% 1% 1%;
    margin: 5%;
    border-bottom: 5px solid white;
    color: white;
    font-family: opensans;
    letter-spacing: 15px;
    font-size: 85px;
    text-align: right;
}
.contacto{
    background-image: url(../img/banner2.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;}

#datoscontacto{
    width: 50%;
    margin: 5% 25%;
    float: left;}
#datoscontacto a{
    color: black;
}
.datocont{
    width: 48%;
    margin: 1%;
    float: left;}
.iconodato{
    width: 20px;
    float: left;}
.datocont p{
    float: left;
    font-family: opensans;
    line-height: 25px;
    font-size: 20px;
    margin-left: 10px;}

section#contacto{
    float: left;
    width: 100%;
    height: auto;
    z-index: -1000;
    margin-top: 5%;}
h5{
    text-align: center;
    margin-top: -2%;
    font-size: 16px;
    letter-spacing: 2px;
    font-family: opensans;}
#formulario{
    width: 50%;
    margin: 1% 25%;
    height: auto;
    float: left;}
.labelform{
    width: 49%;
    float: left;
    height: 30px;}
.labelform3{
    width: 49%;
    float: right;
    height: 30px;}
.labelform2{
    width: 99.5%;
    margin-top: 2%;
    float: left;
    height: 30px;}
.textform{
    width: 99.8%;
    height: 100px;
    margin-top: 2%;
    float: left;}
.botoncont{
    width: 30%;
    height: 30px;
    background: rgba(51,51,51,1.0);
    color: white;
    margin: 2% 35%;
    font-family: opensans;
    letter-spacing: 2px;
    transition: .3s;}
.botoncont:hover{
    letter-spacing: 5px;
    cursor: pointer;}
#mapa{
    width: 100%;
    height: 200px;
    float: left;
}

@media (max-width:1100px){
    #datoscontacto{
        width: 80%;
        margin: 2% 10%;
        float: left;}
    #formulario{
        width: 70%;
        margin: 3% 15%;}
}
@media (max-width:950px){
    .titulobanner{
        font-size: 60px;
    }
    .datocont p{
        line-height: 25px;
        font-size: 14px;}
}
@media (max-width:700px){
    .titulobanner{
        font-size: 40px;}
    .datocont{
        width: 48%;
        float: left;}
    .labelform{
        width: 100%;}
    .labelform3{
        width: 100%;
        margin-top: 1.5%;
        float: left;}
    #datoscontacto{
        width: 100%;
        text-align: center;
        margin: 2% 0%;}
    .iconodato{
        width: 8%;
        height: auto;
        margin: 0% 42%;}
    .datocont p{
        width: 100%;
        margin: 0%;
        padding: 0%;
        font-size: 20px;
        text-align:center;}
}
@media (max-width:550px){
    .datocont p{
        font-size: 14px;
    }
    .titulobanner{
        width: 90%;
        margin: 7% 5%;
        font-size: 30px;
        text-align: center;}
}
@media (max-width:350px){
    #botonerafooter ul{
        display: none;}
    .datocont{
        width: 98%;
    }
}

/*---------------------------------ABOUT US-----------------------------------*/
.aboutus{
    background-image: url(../img/banner1.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;}
#about{
    width: 90%;
    max-width: 1000px;
    margin: auto;}
.textoabout{
    width: 60%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 16px;
    text-align: justify;
    font-family: opensans;}
.textoabout ul{
    margin-left: 20px;
    float: left;
}
.imgabout{
    width: 35%;
    float: right;
    margin-top: 2%;
    margin-bottom: 2%;}

@media (max-width:1000px){
    .textoabout{
        width: 65%;
    font-size: 12px;}
    .imgabout{
        width: 30%;}
}
@media (max-width:768px){
    .textoabout{
        width: 80%;
        margin: 1% 10%;
        text-align: center;
        font-size: 12px;}
    .textoabout ul{
        width: 100%;
        text-align: left;
        margin-left: 20px;
        float: left;
}
    .imgabout{
        width: 80%;
        margin: 1% 10% 5%;}
}

/*-----------------mensaje enviado---------------------*/
#iconomensaje{
    width: 100%;
    float: left;
    text-align: center;}
.iconmensaje{
    animation-name: mensaje;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    width: 15%;}
@keyframes mensaje{
    0%{
        margin-left: -50px;
    }
    50%{
        margin-left: 100px;
    }
    100%{
        margin-left: -50px;
    }
    
    
}
#mensajeenviado{
    font-family: opensanslight;
    letter-spacing: 4px;
    line-height: 80px;
    font-size: 50px;
    color: white;
    text-align: center;
    width: 50%;
    margin: 1% 20% 5%;
    padding: 5%;
    background: grey;
    border-radius: 50px;
    float: left;
}
#volver{
    width: 50%;
    margin: 2% 25%;
    float: left;
    text-align: center;
    background: white;
    font-size: 20px;
    color: grey;
    cursor: pointer;
    margin-top: 4%;
    transition: .3s;
}
#volver:hover{
    opacity: .5;
}

@media (max-width:1000px){
    #mensajeenviado{
        font-size: 20px;
        line-height: 40px;
    }
}
@media (max-width:800px){
    #volver{
        width: 70%;
        margin: 2% 15%;}
}
@media (max-width:550px){
    #mensajeenviado{
        font-size: 14px;
        line-height: 25px;}
    #volver{
        font-size: 14px;
        width: 80%;
        margin: 2% 10%;}
}
@media (max-width:380px){
    #mensajeenviado{
        margin-top: 80px;
        font-size: 14px;
        line-height: 25px;}
    #volver{
        font-size: 12px;
        margin-top: 5%;
        letter-spacing: 2px;}
}

/*---------------------------------PRODUCTOS----------------------------------*/
.tituloprodu{
    width: 98%;
    text-align: center;
    float: right;
    color: white;
    font-family: opensanslight;
    letter-spacing: 15px;
    font-size: 40px;}
h4{
    width: 98%;
    color: white;
    float: left;
    padding: 0.5% 1%;
    background: rgba(181,212,232,1.0);
    text-align: center;
    font-size: 45px;
    font-family: opensansbold;
    letter-spacing: 4px;
    text-transform: uppercase;}

.productsbanner{
    background-image: url(../img/banner1.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;}
.produpc{
    width: 100%;
    height: auto;
    text-align: center;
    float: left;}
#productosseccion{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    height: auto;
    float: left;
    overflow: hidden;
    z-index: -100;
    background: white;
    background-image: url(../img/header2.jpg);
    background-attachment: fixed;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;}
#info-producto{
    width: 90%;
    float: right;
    margin: 5%;}
h400{
    font-family: opensansitalic;
    font-size: 20px;
    line-height: 10px;
    float: right;}
h401{
    font-family: opensansbold;
    font-size: 40px;
    float: right;}
hr{
    width: 100%;
    float: left;
    margin: 1% 0%;
    border: 1px solid black;}
#infopro{
    width: 96%;
    height: auto;
    padding: 2%;
    float: left;}

.imgproducto{
    width: 90%;
    float: left;
    margin: 2% 5%;
    height: auto;}
.imgproductodetalle{
    width: 70%;
    float: left;
    margin: 2% 15%;}
.fotoactiva{
    display: block;
}
.fotohover{
    display: none;
}
.imgproducto:hover .fotoactiva{
    display: none;
}
.imgproducto:hover .fotohover{
    display: block;
}

.textoproducto{
    width: 90%;
    float: left;
    margin: 2% 5%;
    height: auto;
    text-align: center;}
.titulotextoproducto{
    font-size: 30px;
    text-align: center;
    margin-bottom: -40px;
    font-family: opensansbold;}
.contetextoproducto{
    font-size: 12px;
    font-family: opensans;}
.columnaproducto1{
    width: 50%;
    float: left;}
.columnaproducto2{
    width: 50%;
    float: right;}
.producto1{
    width: 94%;
    margin: 1.5%;
    padding: 1.5%;
    float: left;
    background: white;
    border-right: 2px solid black;
    border-bottom: 2px solid black}
.produmovil{
    display: none;
}

@media (max-width:768px){
    .produmovil{
        display: block;}
    .produpc{
        display: none;}
    h4{
        font-size: 25px;}
    .tituloprodu{
        margin-top: 40px;
        font-size: 40px;}
    .columnaproducto1{
        width: 100%;}
    .columnaproducto2{
        width: 100%;}
}
@media (max-width:600px){
    h4{
        margin-top: 10px;
        font-size: 15px;}
    .titulotextoproducto{
        font-size: 25px;
        line-height: 25px;
        font-family: opensans;
        margin-top: 15px;
        position: relative;
        color: white;
        background: rgba(0,0,0,0.8);}
    .imgproducto{
        z-index: -10;
        margin-bottom: 20px;
    }
}
@media (max-width:400px){
    .titulotextoproducto{
        font-size: 16px;
        line-height: 20px;}
    .tituloprodu{
        letter-spacing: 5px;
        font-size: 30px;}
}

/*---------------------------------INDEX----------------------------------*/
.imagenesproductos{
    width: 90%;
    float: left;
    margin: 1% 5%;}
.destacado1{
    width: 20%;
    float: left;
    padding: 1%;
    letter-spacing: 0px;
    border-bottom: 2px solid grey;
    transition: .3s;
    text-align: center;
    text-transform: uppercase;
    color: grey;
    margin: 1.5%;}
.imgchiquita{
    width: 90%;
    margin: 5%;}
.destacado1 a{
    font-family: opensans;
    color: grey;}
.destacado1:hover{
    letter-spacing: 1px;
}
#vertodoslospro{
    width: 100%;
    text-align: center;
    font-family: opensanslight;
    height: 50px;
    line-height: 50px;
    transition: .3s;
    text-transform: uppercase;
    color: white;
    background: grey;
    float: left;}
#vertodoslospro:hover{
    font-family: opensansbold;
    font-size: 18px;}
h4000{
    width: 98%;
    color: white;
    float: left;
    padding: 0.5% 1%;
    background: rgba(181,212,232,1.0);
    text-align: center;
    font-size: 45px;
    font-family: opensansbold;
    letter-spacing: 4px;
    text-transform: uppercase;}
#homeabout{
    width: 70%;
    padding: 5% 15%;
    text-align: center;
    font-family: opensans;
    float: left;
}
.linkmicro{
    color:#6694a8;
    font-weight: bold;
}

.seccionredes{
    width: 100%;
    text-align: center;
    font-family: opensans;
    font-size: 30px;
    float: left;}
.tituloredes{
    width: 100%;
    float: left;
    text-align: center;}
.iconoredes{
    width: 6%;
    transition: .3s;
    margin: 1%;}
.iconoredes:hover{
    opacity: .6;
}

@media (max-width:1100px){
    .destacado1{
        width: 28%;
        padding: 2%;
        margin: 1.5%;}
}
@media (max-width:768px){
    h4000{
        font-size: 30px;}
    .destacado1{
        width: 44%;
        margin: 2%;
        padding: 1%;}
    .imgchiquita{
        width: 80%;
        margin: 10%;}
    #homeabout{
        width: 90%;
        padding: 2% 5%;}
    .seccionredes{
        margin: 5% 0%;
    }
    .iconoredes{
        width: 10%;}
}
@media (max-width:500px){
    h4000{
        font-size: 30px;}
    .destacado1{
        width: 90%;
        margin: 2%;
        padding: 2%;}
    .imgchiquita{
        width: 80%;
        margin: 10%;}
    .seccionredes{
        border-top: 2px solid grey;
        padding-top: 2%;}
    .tituloredes{
        font-size: 18px;}
    .iconoredes{
        width: 15%;
        margin: 2%;
    }
}

/*---------------------------------ICONO WHATSAPP----------------------------------*/
.whatsapp {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;
}
.whatsapp2 {
  position:fixed;
  width:40px;
  height:40px;
  bottom:20px;
  right:20px;
  background-color:#25d366;
  color:#FFF;
  text-align:center;
  font-size:30px;
  z-index:100;
}
.whatsapp-icon {
  margin-top:13px;
}

/*---------------------------------PAGINA PRODUCTOS--------------------------------*/
#productostodos a{
    width: 30%;
    float: left;
    margin: 1.5%;
    transition: .3s;}
.imgmuestra{
    width: 100%;
    float: left;}
.txmuestra{
    width: 100%;
    height: 40px;
    float: left;
    text-align: center;
    background: rgba(0,0,0,0.7);
    color: white;
    font-family: opensans;
    font-weight: lighter;
    line-height: 40px;
    text-transform: uppercase;
    font-size: 20px;}
#productostodos a:hover{
    letter-spacing: 2px;
    opacity: .7;
} 

#productosseccion{
    width: 100%;
    float: left;
    margin-top: 0px;
    margin-bottom: -60px;}
#productosseccion ul li {
    list-style: none;}
.nohover{
    float: left;
    width: 14.2857%;
    text-align: center;
    font-size: 12px;
    color: white;
    line-height: 40px;
    height: 40px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.8);
    transition: .3s;
    position: relative;
    font-family: sans-serif;
    font-weight: lighter;} 
.ahover{
    float: left;
    width: 14.2857%;
    text-align: center;
    font-size: 12px;
    line-height: 40px;
    height: 40px;
    text-transform: uppercase;
    border-top:3px solid black;
    letter-spacing: 2px;
    background: white;
    color: black;
    transition: .3s;
    position: relative;
    font-family: sans-serif;
    font-weight: lighter;}
#sec{
    width: 100%;
    float: left;
    height: 100px;}
.nohover:hover{
    border-top:3px solid white;
    letter-spacing: 1px;
    background: rgba(0,0,0,0.4);
}

@media (max-width:1000px){
    .nohover{
        font-size: 12px;} 
    .ahover{
        font-size: 12px;}
}
@media (max-width:768px){
    #sec{
        display: none;}
    .txmuestra{
        font-size: 16px;}
    .nohover{
        width: 33%;
        border-left: 2px solid white;
        font-size: 12px;} 
    .ahover{
        font-size: 12px;
        width: 33%;
        border:0px;
        border-left: 2px solid white;
        font-size: 10px;}
    .nohover:hover{
        border-top:0px;
        letter-spacing: 2px;
        background: rgba(0,0,0,0.4);}
}
@media (max-width:600px){
    .txmuestra{
        font-size: 14px;}
    .nohover{
        width: 32.9%;} 
    .ahover{
        width: 32.9%;}
}
@media (max-width:500px){
    .nohover, .ahover{
        width: 32%;
        height: 23px;
        font-size:11px;
        line-height: 23px;
        border-bottom: 1px solid white;
        margin: 0%;}
    #productos{
        margin-top: 40px;}
    
}
@media (max-width:400px){
    .txmuestra{
        font-size: 10px;}
    .nohover, .ahover{
        width: 32.7%;
        font-size:10px;}
    #productosseccion{
        min-width: 330px;
    }
}