/*ESTILOS GENERALES*/

/*CARGA DE FUENTES*/
@font-face {
    font-family:'MiHelvetica';
    src: url('../fonts/HelveticaLTStd-Blk.eot');
    src: url('../fonts/HelveticaLTStd-Blk.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaLTStd-Blk.woff2') format('woff2'),
        url('../fonts/HelveticaLTStd-Blk.woff') format('woff'),
        url('../fonts/HelveticaLTStd-Blk.svg#HelveticaLTStd-Blk') format('svg');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    
}
*,
*:before,
*:after{
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
body{
    font:100% /1.5 Arial, sans-serif;
}

.contenedor{
    display: table;                /*overflow: hidden;*/ 
    clear: both; 
    width: 90%;
    margin: 0 auto;  
}


/*------------------------------------------
ESTILOS DE ENCABEZADOS
------------------------------------------*/
header.encabezado{
    padding: 0.2em 1.75em;
}

.logo{
    display: block;
    float: left;
    width: 20,8695652173913%; /*240*100/1150*/ /*original 229-1150*/
    
}
.logo img{
    max-width: 100%;    
}


.barra-encabezado{
    float: right;
    margin-top: 4.9375em;    /*para centrar barra de telefono, buscador, redes sociales*/
    /*border: 1px solid silver;*/
}
.barra-encabezado .telefono{
    display: inline-block;
    color: #009245;   /*color: silver;*//*color: #a49c8f;*/
    padding-right: 7.1em;
    text-decoration: none;
    font-size: 1.25em; /*20px-16*/
    cursor: default;
}

.barra-encabezado .telefono .fa-phone{
    font-size: 1.8em; /*35px-16*/
    vertical-align: middle;
    padding-right: 0.1em; /*2-20 mover logo al centro*/ 
}

.barra-encabezado form input{
    background: #f2f2f1;
    padding: 0.625em;
    color: #a49c8f;
    border: 1px solid #dedede;                   /*border: 0.0625em solid #dedede;*/
    border-radius: 0.3125em;
}

.barra-encabezado form input:hover,
.barra-encabezado form input:focus{
    background: #EAEAEA;
    border: 1px solid #ED8D21;
    outline: none;

}


.barra-encabezado form{
    display: inline-block;
    margin: 0 2.5em;
}
.barra-encabezado .redes-sociales{
    display: inline-block;
    padding: 0;
    margin: 0;
}
.barra-encabezado .redes-sociales li{
    display: inline-block;
}

.barra-encabezado .redes-sociales li a{
    text-decoration: none;
    color: white;
    background: #f1af44;
    display: block;
    width: 2.25em;
    height: 2.25em;
    text-align: center;
    line-height: 2.25em;
    border-radius: 50%;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.barra-encabezado .redes-sociales li a:hover{    
    background: #a49c8f;
   
}
/*------------------------------------------------------
ESTILOS PARA MENU PRINCIPAL
----------------------------------------------------*/
nav.menu-principal{
    background:     #ee5624
}
nav.menu-principal ul{
    margin: 0;
    padding: 0;
    display:table;
    width: 100%;
}

nav.menu-principal ul li{
    display:table-cell;
}

nav.menu-principal ul li a{
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-size: 1.25em 0em;    /* tamaño fuente de nuestro menu horizontal*/
    padding: 1.25em;
    border-left: 0.0625em solid  #ff7041;   /*0.0625 o 1px*/
    border-right: 0.0625em solid  #cf3705;   /*0.0625 o 1px*/
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

 }   
    nav.menu-principal ul li:first-child a{
        border-left: none;
    }

    nav.menu-principal ul li:last-child a{
        border-right: none;
    }
    nav.menu-principal ul li a:hover{
        background: rgb(249, 132,93);
    }

/*--------------------------------------------------
ESTILOS PARA LA PRESENTACION
--------------------------------------------------*/


section.presentacion{
    background: url("../images/fondo-presentacion.png") no-repeat center top / cover;

}
section.presentacion .texto-presentacion{
    float: left;
    width: 53.217391304347783%;
    /*border:1px solid red;*/
    text-align: center;
    
}

section.presentacion .texto-presentacion h1{
    font-family: 'MiHelvetica';
    color: white;
    text-shadow: 1px 1px 0 rgb(56, 55, 55);
    font-size: 2.5em;    /*50px-----50/16=3,125em*/
    letter-spacing: 2px;
    margin: 1em 0 0 0;    /*50px-----50/50=1em  subir o bajar imprime tu marca*/
    line-height: 1.1;
    
}
section.presentacion .texto-presentacion h2{
    font-family: 'MiHelvetica';
    color: white;
    text-shadow: 1px 1px 0 rgb(56, 55, 55);
    font-size: 1.5em;    /*50px-----24/16=3,125em*/    
     margin:0;  
    line-height: 1.1;    
}
section.presentacion .texto-presentacion .boton-principal{
    display: inline-block;
    color: white;
    
    font-size: 1.65em;  /*28px-20*/
    padding: 0.7142857142857143em;         /*20px-28*/
    border: 0.25em solid rgba(255, 255, 255, 0.42);  /*5-20*/
    border-radius: 0.2857142857142857em;     /*8px-28*/
    background-color: #ee5624;
    background-clip: padding-box; 
    text-decoration: none;   
    margin: 0.6071428571428571em 0 0 0;  /*20px-28 Mover ver nuestros productos*/
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
section.presentacion .texto-presentacion .boton-principal:hover{
    
    border: 0.25em solid rgba(255, 255, 255, 0.87);    /*5-20*/
    background-color: #ca3200;/*#ee5624;*/
   
}

section.presentacion .images-presentacion{
    float: right;
    width: 43.91304347826087%;
    
    
}
section.presentacion .images-presentacion img{
   position: relative;
   top: 0.55em;  /*20-16 se puede mover el logo de arriba hacia abajo*/
   max-width: 100%; /*imagen sobre puesta se achica segun dispositivo*/
    
}
/*-----------------------------------------------
ESTILOS PARA BIENVENIDOS
-----------------------------------------------*/
.bienvenidos h2{
    font-family: 'MiHelvetica';
    color: blue;    /* en esta linea se cambia color al titulo h2*/
    font-size: 2.5em;
    margin: 0,5833333333333333em 0 0 0;   /*28-48*/ 
    line-height: 1.1;
    text-align: center;    
}
.bienvenidos p{
    font-family: 'MiHelvetica';
    color: #5a605b;    
    font-size: 1.75em;/*28-16*/
    margin: 0.2857142857142857em 0 0 0;  /*8-28*/  
    line-height: 1.1;
    text-align: center;    
}


.bloque-bienvenidos{
    display: table;
    margin: 0.3125em 0 0 0; /*5-16*/
}
.bloque-bienvenidos figure{    
    display: block;  /*table-cell*/
    text-align: center;
    padding: 0.9375em 2.1875em;/*15px 35px*/
}

.bloque-bienvenidos figure a{
    text-decoration: none;
    display: center;
}
.bloque-bienvenidos figure img{
    max-width: 100%;
    display: center;

}
.bloque-bienvenidos figure a h3{
    color:#5a605b;



}

.bienvenidos h3{
    font-family: 'MiHelvetica';
    color: #5a605b;
    font-size: 1.25em; /*25-16*/
    margin: 0.6em 0 0 4em 0;/*15px 0 10px 0*/
    line-height: 1.4;
    text-align: left;
    display: inline-block;
    text-align: left;
    
}
/*------------------------------------------
ESTILOS CONTENIDO PRINCIPAL DEL SITIO
--------------------------------------------*/
main{
    background: #ee5624;
    color: white;  /* color para quienes somos y aqui estamos*/
    padding-bottom: 3.125em; /*espaciado de bordes 50-16*/
}
main article.quienes-somos{
    display: table-cell;
    width: 50%;
    padding: 0.625em; /*10px*/
}

main article.quienes-somos img{
    /*margin-right: 0.625em;  /*10px*/
    float: left;
    width: 30%;   /*tamaño logo quienes somos*/
}

main article.quienes-somos p{
    float: left;
    width: 58%;
    margin: 0 0 0 2%;
}


main article.quienes-somos a{
    display: inline-block;    
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1.75em;  /*28px-20*/
    padding: 0.3571428571428571em 1.071428571428571em; /*10-30 base28*/
    border: 0.25em solid rgba(255, 255, 255, 0.42);  /*5-base20*/
    border-radius: 0.2857142857142857em;     /*8px-28*/
    background-color: #ee5624;
    background-clip: padding-box; 
    text-decoration: none;   
    margin: 20px 0 0 0;  /*20px-28 Mover ver mas*/
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

main article.quienes-somos a:hover{
     border: 0.25em solid rgba(255, 255, 255, 0.87);    
    background-color: #ca3200;
}


main article h2{
    font-family: 'MiHelvetica';
    font-size: 2.1875em; /*25-16*/
}


main article.aqui-estamos{
    display: table-cell;
    width: 50%;
    padding: 0.625em; /*10px base 16*/
}
main article.aqui-estamos iframe{
    height: 20.5em;
}
/*------------------------------------------
ESTILOS PARA EL PIE DE PAGUNA
--------------------------------------------*/
footer.piedepagina{
    background: #444444;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/*Ocultamos boton Movil*/
#menumovil{
    display: none;
}


/*-------------------------------------
MediaQueries a los 1200px
------------------------------------*/
@media screen and (max-width: 75em){

    section.presentacion .texto-presentacion h1 {

        font-size: 3em;

    }

    } /*Fin de mediasqueries*/

/*-------------------------------------
MediaQueries a los 990px
------------------------------------*/
@media screen and (max-width: 61.875em){

    section.presentacion .texto-presentacion h1 {
        font-size: 2.8em;
        margin: 1.1em 0 0 0;
    }

    } /*Fin de mediasqueries*/

/*-------------------------------------
MediaQueries a los 966px
------------------------------------*/
@media screen and (max-width: 60.375em){

    body{
        font-size: 87.5%; /*14px*/
    }
    .contenedor {
        width: 96%;
    }
    } /*Fin de mediasqueries*/


/*-------------------------------------
MediaQueries a los 770px
------------------------------------*/
@media screen and (max-width:48.125em){

    section.presentacion {
        background: url("../images/fondo-presentacion-mediano.jpg") no-repeat center top;

    }

    section.presentacion .texto-presentacion h1 {
        font-size: 2.4em;
        margin: 0.6em 0 0 0;
    }

    section.presentacion .texto-presentacion .boton-principal {
        font-size: 1.6em;
        padding: 0.5em;
    }

    } /*Fin de mediasqueries*/


/*-------------------------------------
MediaQueries a los 750px
------------------------------------*/
@media screen and (max-width: 46.875em){
    .contenedor{
        width: 100%;
    }

    main article.quienes-somos {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    main article.aqui-estamos {
        display: block;
        width: 100%;
        padding: 0.625em;
    }

    nav.menu-principal ul li a{
        font-size: 1em;

    }

    header.encabezado {
        padding: 1em 0;
    }
    .logo{
        width: 100%;
        display: block;
        float: none;
        text-align:center;
    }

    .barra-encabezado {
        float: none;

        text-align: center;
    }



    /*Estilos Menu Movil*/
    nav.menu-principal ul{
        display: none;
        background:#222222;
    }


    nav.menu-principal ul li{
        float: none;
        width: auto;
        border-top: 1px solid #696565;
        border-bottom: 1px solid #1e1e1e;
        display: block;
    }

    nav.menu-principal ul li a{
        background: #3d3c3e;
        color: white;
        border-radius:0; /*6px / 16px*/
        margin: 0; 
        transition:all 0.5s ease;
    }

    nav.menu-principal ul li a:hover{
        background: #1D1C1D;
        border-radius: 0;
    }



    /*Estilos para el boton de 3 linea*/
    #menumovil{
        display: block;
        background:#EE5624;
        position: relative;
        color: white;
        text-decoration:none;
        text-align: center;
        
        line-height: 3em; /*48px 16px*/
    }
    #menumovil:hover{
        background:#000;
    }

    #menumovil:before{
        content: "";
        position: absolute;
        right: 0.75em; /*12 16px*/ 
        top: 0.75em; /*12 16px*/ 
        width: 1.875em; /*30px  16px*/
        height: 1.28em;
        border-top: 0.25em solid white; /*4 -16*/
        border-bottom: 0.75em double white; /*12-16*/
        transition:all 0.5s ease;
    }

    #menumovil:hover:before{
        content: "";
        border-top: 0.25em  solid #ff6854;
        border-bottom: 0.75em double #ff6854;
    }


    .bloque-bienvenidos figure {
        display: block;
        text-align: center;
        padding: 0.2em 2.1875em;
        overflow: hidden;
        border-bottom:0.3125em solid rgba(238, 86, 36, 1); /* 5-16*/
    }
    .bloque-bienvenidos figure img {
        float: left;
        margin-right: 2%;
    }


    .bienvenidos h3 {
        text-align: left;
    }
    .bienvenidos figcaption{
        text-align: left;
    }


    section.presentacion .texto-presentacion .boton-principal {
        font-size: 1.4em;
    }

    } /*Fin de mediasqueries*/


/*-------------------------------------
MediaQueries a los 550px
------------------------------------*/
@media screen and (max-width: 34.375em){

    .barra-encabezado .telefono {
        display: block;
        cursor: pointer;
    }
    .barra-encabezado form {
        display: block;
        margin: 0.5em 0;

    }
    .barra-encabezado .redes-sociales {
        display: block;
        padding: 0;
        margin: 0;
    }

    .barra-encabezado form input {
        width: 96%;
        padding:1em;
    }


    .barra-encabezado .telefono {
        display: block;
        cursor: pointer;
        background: rgb(238, 86, 36);
        color: white;
        padding: 0.5em;
        border-radius: 0.3125em;
        width: 96%;
        font-size: 1.5em;
        margin: 0 auto;
        text-shadow: 1px 1px 0 rgb(150, 44, 9);
    }

    .barra-encabezado .telefono:hover {
        background: rgb(240, 173, 21);
    }

    section.presentacion .texto-presentacion h1 {
        font-size: 2.3em;
        margin: 0.1em 0 0 0;
    }

    } /*Fin de mediasqueries*/


/*-------------------------------------
MediaQueries a los 515px
------------------------------------*/
@media screen and (max-width: 32.1875em){

    section.presentacion {
        background: url("../images/fondo-presentacion-chica.jpg") no-repeat center top;
    }

    section.presentacion .texto-presentacion h2 {

        display: none;
    }
    section.presentacion .texto-presentacion .boton-principal {
        font-size: 1.1em;
    }



    .bloque-bienvenidos figure img {
        float: none;
        margin-right:0%;
    }


    .bienvenidos h3 {
        text-align: center;
    }
    .bienvenidos figcaption{
        text-align: center;
    }

    } /*Fin de mediasqueries*/


/*-------------------------------------
MediaQueries a los 420px
------------------------------------*/
@media screen and (max-width: 26.25em){

    main article.quienes-somos img {
        float: none;
        width: 50%;
        margin: 0 auto;
        display: block;
    }


    main article.quienes-somos p {
        float: none;
        width: 96%;
        margin: 0;
    }

    section.presentacion .texto-presentacion .boton-principal {
        font-size: 0.8em;
        margin-bottom: 0.6em;
    }

    } /*Fin de mediasqueries*/





/*-------------------------------------
MediaQueries a los 1800px
------------------------------------*/
@media screen and (min-width: 112.5em){
    body{
        font-size: 125%;/*20px*/
    }


    section.presentacion .texto-presentacion .boton-principal {
        margin: 0.714286em 0 1em;

    }
    section.presentacion .images-presentacion img {
        top: 3.5em;

    }

    } /*Fin de mediasqueries*/

/*-------------------------------------
MediaQueries a los 2100px
------------------------------------*/
@media screen and (min-width: 131.25em){
    body{
        font-size: 162.5%;/*26px*/
    }
    .contenedor{
        max-width:76.92307692307692em; /* 2000-26*/

    }


    } /*Fin de mediasqueries*/







































/*------------------------------------------------
ESTILOS PARA INTERNET EXPLORER 8 -
--------------------------------------------------*/
.lt-ie9 .barra-encabezado form input,
.lt-ie9 .barra-encabezado .redes-sociales li a,
.lt-ie9 section.presentacion .texto-presentacion .boton-principal,
.lt-ie9 main article.quienes-somos a{
    behavior:url(js/pie/PIE.php);
}

/*Correccion para estilos*/
.lt-ie9 section.presentacion .texto-presentacion .boton-principal {
    border: 0.25em solid rgb(255, 255, 255);
    position:relative;
}

.lt-ie9 main article.quienes-somos a {
    border: 0.25em solid rgb(255, 255, 255);
    position: relative;

}