/*BODY*/

body{margin:0; padding:0; font-family: 'Titillium Web', sans-serif; background:black; position:relative;}
header{height:100px; width:100%; background:white; position:relative; z-index:999;}
h1{font-size:24pt; font-weight: 400;}
h2{font-size:20pt; color:white; margin:0;}
h3{font-size:150%; color:white; width:99.5%; height:60px; background-color:#BA141A; list-style:none; text-align:center; text-decoration:none; 
    position:absolute; z-index:99; padding-top:25px; margin-top:0; float:left;}
h4{font-size:10pt; color:white; font-weight:300; text-align:center; margin:0;}

p{color:white; font-size:13pt; text-align:left; line-height:normal;}
.marca{float:left; margin-top:10px; height:70px; width:244px; padding-left:10%; padding-right:8%;}

/*MENU*/
.marca{float:left; margin-top:10px; height:70px; width:244px; padding-left:10%; padding-right:8%;}
ul, li{margin:0; padding:0; list-style:none;}
nav li{display:inline-block;}
nav a{display:block; height:100px; width:100%; color:black; padding:40px 20px; text-decoration:none; box-sizing:border-box; margin:0;}
nav a:hover{background:#BA141A; color:white;}
.presionado {background-color:#BA141A !important; color:white !important;}

/*SUBMENU*/

.submenu {width:100%; height:40px; background-color:#BA141A;}
.submenu ul, li{margin:0; padding:0; list-style:none;}
.submenu li{display:inline-block; height:40px; width:24%;}
.submenu a{display:block; text-decoration:none; margin:0; color:white; padding:10 0 0 0px !important; text-align:center; height:40px;}
.submenu a:hover{color:black;}

/*SECTION*/

section{max-width:100%; margin:0 auto; overflow:hidden; margin-bottom:50px;}

/*FOOTER*/

footer{width:100%; position:absolute; margin-bottom:5%; margin:0 auto;}
.redes-sociales li{display:inline-block; padding:0px 10px;}
.redes-sociales a{display:block; width:33px; height:33px;}
.redes-sociales{text-align:center; margin:0; position:relative;}
.facebook{background:url(images/facebook.png);}
.twitter{background:url(images/twitter.png);}
.instagram{background:url(images/instagram.png);}
.redes-sociales a:hover{background-position:0 -33px;}

/*SLIDE INDEX BACKGROUND*/

.cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100px;
    left: 0px;
    z-index: 0;
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 70% 70%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 9s linear infinite 0s;
    -moz-animation: imageAnimation 9s linear infinite 0s;
    -o-animation: imageAnimation 9s linear infinite 0s;
    -ms-animation: imageAnimation 9s linear infinite 0s;
    animation: imageAnimation 9s linear infinite 0s; 
    }

.cb-slideshow li:nth-child(1) span { 
    background-image: url(images/slide-home01.jpg);
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(images/slide-home02.jpg);
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(images/slide-home03.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{opacity: 1;}


/*INDEX EMPRESA*/

.nuestra-empresa{width:50%; padding-top:2%; padding-left:10%; float:left; z-index:99; position:absolute;}
.empresa{width:220px; height:220px; padding-top:5%;}

/*GALERIA GENERAL*/

.gallery{width:100%; display:block; margin:0px; position:relative;}
.columna-izq{width:50%; float:left; position:relative;}
.columna-der{width:50%; float:right; position:relative;}
.gallery img{width:99.5%; margin:0px; overflow:hidden; position: relative; z-index:1; text-align:center;}
.gallery img:hover {opacity: 0.5; transition: all 0.5s ease-in-out;}
.fancybox{z-index:999;}


/*GALERIA SECCION TIENDA*/

.columna-1, .columna-2, .columna-3 {width:33.33%; float:left; position:relative;}
.columna-1 img, .columna-2 img, .columna-3 img, {position: relative;}
.columna-1 ul, .columna-2 ul, .columna-3 ul, {position: absolute;}
.tienda {position:absolute; width:99.5%; z-index:99; margin-top:85px;}
.tienda ul{height: 160px;}
.tienda li{width:100%; margin:0; height:40px; background-color:white; opacity:0.8; padding:0;}
.tienda a{text-align:center; height:100%; padding:15px 0px; }
.tienda a:hover {color: white;}


/*SECCION FEE MENSUAL*/
.descripcion {margin-top:85px; text-align:center; color:black; position:absolute; float: left; width:99.5%; padding:20px 0; 
    z-index:99; opacity:0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    background-color: rgba(255, 255, 255, 0.7);}

.descripcion:hover{opacity:1; }



/*SECCION PUBLICIDAD*/
/*SLIDE BACKGROUND RESPONSIVE*/
.cb-slideshow-publicidad,
.cb-slideshow-publicidad:after { 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow-publicidad li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 0% 0%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 20s linear infinite 0s;
    -moz-animation: imageAnimation 20s linear infinite 0s;
    -o-animation: imageAnimation 20s linear infinite 0s;
    -ms-animation: imageAnimation 20s linear infinite 0s;
    animation: imageAnimation 20s linear infinite 0s; 
}


.cb-slideshow-publicidad li:nth-child(1) span { 
    background-image: url(images/publicidad/publicidad01.jpg) 
}
.cb-slideshow-publicidad li:nth-child(2) span { 
    background-image: url(images/publicidad/publicidad02.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow-publicidad li:nth-child(3) span { 
    background-image: url(images/publicidad/publicidad03.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow-publicidad li:nth-child(2) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow-publicidad li:nth-child(3) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{opacity: 1;}


/*SECCION CLIENTES*/

.clientes{width:100%; padding-bottom:1%;}
.columna1{width:25%; float:left;}
.columna2{width:25%; float:left;}
.columna3{width:25%; float:left;}
.columna4{width:25%; float:left;}
.clientes img{width:100%;}


/*SECCION CONTACTO*/

span{color:#BA141A;}
.contacto{padding:100 0 0 20%;}
.campo{width:300px; height:30px;}
.campo-consulta{width:300px; height:100px;}
.consultas{width:50%; padding:85 0 0 150px;}
.enviar{background:#BA141A; width:80px; height:40px; color: white; border-style:none; font-family: 'Titillium Web' !important, sans-serif; cursor:default;} 


.imgback{background:url(images/contacto.png) no-repeat bottom right; max-width:100%; height:100%;}



/*MENU RESPONSIVE*/

  /*nav*/
#nav-mobile{display:none; background:url(images/nav.png) no-repeat center center; float:right; width:60px; height:60px; position:absolute; right:0; top:0; opacity:.6;
padding:50px 100px 50px 0; z-index:9999;}   
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
#nav-mobile.nav-active{opacity:1;}


/*MEDIA QUERY*/ /*1255*/
@media only screen and (max-width: 1255px) {
    .marca{padding-left:8%; padding-right:3%;}
    nav a {padding: 40px 10px;}
    .nuestra-empresa{padding-left:8%;}
    .gallery {height: 60%;}
}


/*MEDIA QUERY*/ /*1024*/
@media only screen and (max-width: 1024px) {

    /*NAV MOBILE*/
    nav li{display:block;}
    /* mostramos #nav-mobile */
    #nav-mobile{display: block; z-index: 9999;}
 
    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo */
    #menu{width:100%; float:none;}
 
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{max-height: 0; overflow: hidden; padding:0; z-index: 9999;}
            /* estilos para los LI del menu */
            #menu li{background:white; border-bottom: 1px solid #282b30; float: none; text-align:center;}
                /* Quitamos el borde del ultimo item del menú */
                #menu li:last-child{ border-bottom: 0;}
 
                #menu li a{padding: 15px 0; height: auto; line-height: normal;}
                #menu li a:hover{background:black; color:white; }
 
        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{max-height: 400px; transition: max-height .4s; width: 100%; padding-top: 21px; z-index:9999;}
    /*NAV MOBILE*/


  .marca{padding-left:8%; padding-right:3%;}
  nav a{padding:40px 10px; margin:0;}
  .nuestra-empresa{padding-top:1%; padding-left:8%;}
  .gallery {height: 70%;}
  h2{font-size:20pt;}
  p{font-size:12pt;}


/*MEDIA QUERY*/ /*970*/
@media only screen and (max-width: 970px) {
    .nuestra-empresa{width:90%; padding-left:5%; padding-right:5%;}
    
    .consultas {width: 70%; padding: 10%;}
    .contacto {padding: 10%;}
    .imgback{padding-bottom:0px; height:80%;}

    footer{width:100%; position:absolute; margin-bottom:2%;}


/*MEDIA QUERY*/ /*768*/
@media only screen and (max-width: 768px) {
    .columna-izq{width:100%; position:relative;}
    .columna-der{width:100%; position:relative;}
    .columna1{width:50%; float:left;}
    .columna2{width:50%; float:left;}
    .columna3{width:50%; float:left;}
    .columna4{width:50%; float:left;}
    .columna-1, .columna-2, .columna-3 {width:100%; float:left;}


/*MEDIA QUERY*/ /*550*/
@media only screen and (max-width: 550px) {
    h2{font-size:15pt;}
   


    /*MEDIA QUERY*/ /*400*/

@media only screen and (max-width: 400px) {