html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'open_sansbold';
}

a{ 
    text-decoration: none; 
    border: 0;
    cursor: pointer;
    outline: none;
    color: #ffffff;
}

@font-face {
    font-family: 'open_sansbold';
    src: url(../fonts/opensans-bold-webfont.eot);
    src: url(../fonts/opensans-bold-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/opensans-bold-webfont.woff2) format('woff2'),
         url(../fonts/opensans-bold-webfont.woff) format('woff'),
         url(../fonts/opensans-bold-webfont.ttf) format('truetype'),
         url(../fonts/opensans-bold-webfont.svg#open_sansbold) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansextrabold';
    src: url(../fonts/opensans-extrabold-webfont.eot);
    src: url(../fonts/opensans-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/opensans-extrabold-webfont.woff2) format('woff2'),
         url(../fonts/opensans-extrabold-webfont.woff) format('woff'),
         url(../fonts/opensans-extrabold-webfont.ttf) format('truetype'),
         url(../fonts/opensans-extrabold-webfont.svg#open_sansextrabold) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url(../fonts/opensans-regular-webfont.eot);
    src: url(../fonts/opensans-regular-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/opensans-regular-webfont.woff2) format('woff2'),
         url(../fonts/opensans-regular-webfont.woff) format('woff'),
         url(../fonts/opensans-regular-webfont.ttf) format('truetype'),
         url(../fonts/opensans-regular-webfont.svg#open_sansregular) format('svg');
    font-weight: normal;
    font-style: normal;
}
/* *****************************************************
   vmc HELPERS
****************************************************** */

.none { display: none; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.floatLeft { float: left; }
.floatRight { float: right; }
.clear { clear: both; }
.marginLeft10 { margin-left: 10px; }
.marginRight10 { margin-right: 10px; }
.marginLeft20 { margin-left: 20px; }
.marginRight20 { margin-right: 20px; }
.pointer, .escuchar_  { cursor: pointer; }
.pointer:active, .escuchar_:active  { outline: 1px solid #fff; }
.relative { position: relative; }
.bold { font-weight: bold; }
.upper { text-transform:uppercase; }
.normal { font-style: normal; }
.white {color: #fff;}
.black {color: #000;}


/* *****************************************************
   Comenzamos
****************************************************** */
/*Estilos Header*/
.header{
    width: 98%;
    height: auto;
    margin: 0 auto;
    z-index: 100;
    position: absolute;
    padding: 1%;
    top:0;
    left: 0;
    /*background:rgba(255,255,255,0.9);*/
}

.menu{
    width: 80%;
    max-width: 1024px;
    height: 125px;
    margin: 0 auto;
}

.logo{
    width: 30%;
    float: left;
    margin-top: 20px;
}

.menu .telefono{
    float: right;
    font-size: 21px;
    padding-top: 5px;
}

.menu .telefono img{
    float: left;
}

.menu .telefono p{
    float: right;
    padding: 0;
    margin: -2px 0 0 9px;
    color: #ffffff;
}

.menu ul{
    width: 70%;
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    font-size: 12px;
}

.menu ul li{
    float: right;
    padding: 10px 15px;
    display: inline-block;
    margin: 10px 0 0 2%;
    border: solid 2px #ff4500;
    text-decoration: none;
}

.menu ul li a{
        color:#ffffff;
    }

    .menu ul li a:hover{
        color:#ff4500;
    }

.facebook{
    width: 300px;
    font-size: 12px;
    float: right;
    margin-top: 10px;
}

.facebook p{
    float: right;
    padding: 0;
    margin: 1px 9px 0 0px;
    color: #ffffff;
}

.facebook img{
    float: right;
}

.menuHover img{
    display: none;
    }

/*Estilos Home*/

.carrusel, .flex-viewport{
    list-style: none;
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    line-height: normal;
    border: 0 !important;
    overflow: hidden;
    position: relative;
   /* background:url(../img/home2.png) no-repeat top left;
    background-size: cover;*/
}

.containercarrusel::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 160px;
    background: url(../img/gradiente.png) repeat-x top left transparent;
    top: 0px;
    left: 0;
}

.carrusel.slides li {
    width: 100%;
    height: 100%;
    background:url(../img/blank.png) no-repeat top right;
    background-size: cover;
    float: left;
}

.carrusel.slides li.slide_1 { background-image:url(../img/home1.jpg) }
.carrusel.slides li.slide_2 { background-image:url(../img/home2.jpg) }
.carrusel.slides li.slide_3 { background-image:url(../img/home3.jpg) }

.clear{
    clear: both;
}


/*Estilos Productos*/

.contenedor{
    width: 100%;
    height:auto;
}

.modulo{
    width:80%;
    max-width: 1024px;
    height: auto;
    text-align: center;
    margin: 70px auto;
}

.productos h1{
    font-size: 30px;
    color: #ff4500;
    font-family: 'open_sansextrabold';
    letter-spacing: -1px;
    margin: 0 0 15px 0;
}

.productos .filo{
    width: 10px;
    border-bottom: solid 2px #282828;
    margin: 0 auto;
}

.productos p{
    font-size: 18px;
    font-family: 'open_sansregular';
    margin: 30px 0 30px;
}

a.marca{
    width: 20%;
    height: auto;
    float: left;
    margin: -5px 0 0 0;
    padding: 0;
}

.marca img{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


/*Estilos Nosotros*/

.contenedorNosotros{
    width: 100%;
    height: 100%;
    min-height: 515px;
    background: url(../img/nosotros.jpg) no-repeat top left;
    background-size: cover;
}

.nosotros h1{
    font-size: 30px;
    color: #ffffff;
    font-family: 'open_sansextrabold';
    letter-spacing: -1px;
    margin: 15px 0 15px 0;
    text-align: left;
    padding-top: 70px;
}

.nosotros .filo{
    width: 10px;
    border-bottom: solid 2px #ff4500;
}

.nosotros p{
    max-width: 500px;
    font-size: 18px;
    color: #ffffff;
    font-family: 'open_sansregular';
    text-align: left;
}

.telefonoNosotros, .escribenosNosotros{
    float: left;
}

.telefonoNosotros img, .escribenosNosotros img{
    float: left;
}

.telefonoNosotros p, .escribenosNosotros p{
    font-family: 'open_sansbold';
    float: right;
    padding: 0;
    margin: -2px 0 0 9px;
    color: #ffffff;
}

/*Estilos Contacto*/

.contacto h1{
    font-size: 30px;
    color: #ff4500;
    font-family: 'open_sansextrabold';
    letter-spacing: -1px;
    margin: 0 0 15px 0;
}

.contacto .filo{
    width: 10px;
    border-bottom: solid 2px #282828;
    margin: 0 auto;
}

.ubicacion, .horario, .llamar, .correo{
    width: 50%;
    max-width: 375px;
    float: left;
    margin: 40px 0 0 0;
    font-family: 'open_sansregular';
    text-align: left;
}

.ubicacion, .llamar{
    margin-left: 100px;
}

.ubicacion img, .horario img, .llamar img, .correo img{
    width: 15%;
    float: left;
    margin: 0 20px 20px 0;
}

.ubicacion p, .horario p{
    margin: 0;
    padding: 0;
}

.llamar p{
    margin: 7px 0 0 0;
}

.correo p{
    margin: 15px 0 0 0;
}

/*EStilos Footer*/

.footer{
    width: 100%;
    height: 50px;
    background-color: #282828;
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    padding-top: 15px;
}

.telefonocontacto p{
    padding: 0;
    margin: 0 auto;
    color: #ffffff;
    display: block;
    text-align: center;
}

.telefonocontacto img{
    width: 10px;
}


/*Lightbox*/

.ligthbox{
    /*width: 50%;*/
    height: auto;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    font-family: 'open_sansregular';
    color: #ffffff;
    padding: 2%;
    max-width: 650px;
}

.ligthbox img{
    margin-bottom: 20px;
}

.ligthbox p{
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

.ligthbox a {
    font-family: 'open_sansbold';
    margin: 20px 0;
    display: block;
}

.urrea{
     background: url(../img/backUrrea.jpg) no-repeat top left;
}

.surtek{
     background: url(../img/backSurtek.jpg) no-repeat top left;
}

.surtek{
     background: url(../img/backSurtek.jpg) no-repeat top left;
}

.truper{
     background: url(../img/backTruper.jpg) no-repeat top left;
}

.rotoplas{
     background: url(../img/backRotoplas.jpg) no-repeat top left;
}

.bosch{
     background: url(../img/backBosch.jpg) no-repeat top left;
}

.rugo{
     background: url(../img/backRugo.jpg) no-repeat top left;
}

.simex{
     background: url(../img/backSimex.jpg) no-repeat top left;
}

.phillips{
     background: url(../img/backPhillips.jpg) no-repeat top left;
}

.lock{
     background: url(../img/backLock.jpg) no-repeat top left;
}

.fundamex{
     background: url(../img/backFundamex.jpg) no-repeat top left;
}


/*1118 px*/
@media screen and (max-width:1080px){

.ubicacion, .llamar{
    margin-left: 0px;
}
}



/*700 px*/
    @media screen and (max-width:700px) {
    /* inicia menu*/

    .menu .telefono{
        display: none;
    }

    .facebook{
        display: none;
    }

    .logo{
        width: 45%;
    }

    .menu ul li{
        border: none;
    }

    .menuHover{
        cursor: pointer;
    }

    .menuHover img{
        width:10%;
        height:auto;
        float:right;
        margin-top:25px;
        display: block !important;
    }

    .subMenu {
        width: 100%;
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 14px;
        text-align: center;
        display: none;
    }

    .subMenu ul {
        width: 100%;
        height: auto;
        padding: 0px;
        background-color: rgba(0,0,0,0.8);
    }

    .subMenu li {
        width: 100%;
        height: 50px;
        list-style: none;
        margin: 10px;
    }

    .subMenu a {
        font-size: 16px;
        display: block;
        /*border-bottom:solid 1px ;*/
        padding:15px 0 25px 0;
    }

    .subMenu a:hover {
        color: #fff;
    }

    .menu ul li a:hover{
        color:#ffffff;
    }

    .subMenu li:hover {
        background-color: #ff4500;
    }    
    .menuHover:hover div.subMenu { 
        display: block;
        -webkit-transition: all 200ms ease;
        -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        transition: all 200ms ease;
    }
    
    /* termina menu*/

    /*Estilos Productos*/

    .productos h1, .nosotros h1, .contacto h1{
        font-size: 20px;
    }
    .productos p, .nosotros p{
        font-size: 14px;
    }

    a.marca{
        width: 33%;
        height: auto;
    }

    /*Estilos Nosotros*/
    .telefonoNosotros img, .escribenosNosotros img{
        width: 14px;
        height: auto;
    }

    .escribenosNosotros p, .telefonoNosotros p{
        font-size: 12px;
    }

    .escribenosNosotros{
        margin-top: -20px;
    }

    /*Estilos Contacto*/

    .contacto .filo{
        margin-bottom: 30px;
    }
    .ubicacion, .horario, .llamar, .correo{
        width: 50%;
        font-size: 14px;
        margin: 10px auto 0;
        max-width: 300px;
    }

    .ubicacion img, .horario img, .llamar img, .correo img{
        width: 15%;
        margin: 0 10px 20px 0;
    }

    .llamar p{
    margin: 0;
    }

    .correo p{
        margin: 8px 0 0 0;
    }

    /*Estilos Footer*/
    .footer{
        font-size: 8px;
    }
}


@media screen and (max-width:800px) {
    .carrusel.slides li.slide_1 { background-image:url(../img/home1m.jpg) }
    .carrusel.slides li.slide_2 { background-image:url(../img/home2m.jpg) }
    .carrusel.slides li.slide_3 { background-image:url(../img/home3m.jpg) }
}
/*600 px*/
@media screen and (max-width:600px) {

    /*Estilos Contacto*/
    .ubicacion, .horario, .llamar, .correo{
        width: 100%;
        font-size: 14px;
    }

    .ubicacion img, .horario img, .llamar img, .correo img{
        width: 25%;
    }

    .llamar p{
    margin: 20px 0 0 0;
    }

    .correo p{
        margin: 30px 0 0 0;
    }

    .footer{
        font-size: 8px;
    }

    /*Lightbox*/

    .ligthbox{
        /*width: 80%;*/
        width: 300px;
        font-size: 14px;
        padding: 10px;
    }



}


/* *****************************************************
   flexslider
****************************************************** */
.flexslider {
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 0px;
}

.flex-viewport {
    overflow: hidden;
    position: relative;
}

.flex-direction-nav {
    line-height: normal;
}

.carrusel .flex-direction-nav a:before {
    color: #ff4500;
}


.mapa iframe {
    pointer-events : none;
}