*{
    margin: 0;
    padding: 0;
}
body{
    background: #F1F1F1;
    font: 14px 'Open Sans', sans-serif;
}

  /* MARCO EXTERIOR QUE ENCIERRA A TODOS LOS DIV */
.contenedor{
	width: 100%;
	margin:0 auto;
  max-width:1600px;
    overflow:hidden ;
	background: #FFFFFF;
	font: 14px 'Open Sans', sans-serif;
}

     /* la clase main la uso para el texto que tengo en la section , y la cambio cuando se accesa en un telefono 

.main{
	width: 100%;
	box-sizing:border-box;
 margin:0 auto;
  padding:80px;
	float:left;
	 font: 13px 'Open Sans', sans-serif;
	
}*/
 

.main img{
	width: auto;
	heigh: auto;
  
}


header, nav{
    display: block;
}

/* Definimos un ancho 100% y una altura fija para nuestro menú */
.header{
    height:auto;
  
	/* background: #333333;*/
	width: 100%;
 max-width:1600px;
}



 /* COLOR AL FONDO DEL MENU PRINCIPAL */

.header_menu{
    height:auto;
  
	 background: #cccccc;
	width: 100%;
 max-width:1600px;
 

}
    /*ESTE ES EL CARACTER SEPARADOR*/
	#menu li + li a:before {
content: "|";

padding-right:5px;
}

/* LOS SIDEBAR SON USADOS EN EL INDEX */

/* Los slide_baner se encargan de mostrar baner en forma escritorio y solo mostrar logo en forma telefono */
.sidebar_baner {	
	display:none;	
	
}
.sidebar_baner1 {	
	display:block;	
	position: relative;
  top: 5.7em;
   z-index:50;
  
}
.sidebar_baner2 {	
	display:none;	
	position: relative;
top: 5.7em;
z-index:55;
}
/* imagenes de los 3 productos en el index que permiten una al lado de la otra y en forma telefono se colocan una debajo de la otra */
.sidebar_index {
	height:auto;
	float:left ;
	width: 25%;
	/*background: #ffffff;
	/*padding-bottom: 10px;*/
	 margin: 26px 50px 30 50px;
	bottom: 70px;
}
/* parrafor descriptivo de la empresa al pie del index que permite ubicaro al lado de la imagen de direccion */
.sidebar1 {
text-align: justify;
	float: left;
	width: 50%;
	background: #EEEFEC;
	font: 14px 'Open Sans', sans-serif;
	
padding: 10px;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
/* imagenen de la direccion telefono e email */
.sidebar2 {
	float: right;
	width: 48%;
	/*background: #ffffff;*/
	padding-bottom: 10px;
}




/* El logo sera flotado a la izquierda 
#logo{
    background: url(logo1.png) no-repeat 0 0;
    display: block;
    float: left;
    margin: 6px 10px 0;
    width: 417px;
    height: 138px;
    text-indent: -9999px
}

*/
/* Nuestro nav con id #menu lo flotaremos a la izquierda*/
#menu{
float: left;

/* background: #13293E;*/
   position: fixed;
  top: 0;
    height:auto;
 	width: 100%;
 max-width:1600px;
 z-index:50;
  background-color: rgba(18,43,63,.4);
}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
        font-size: 13px;
		float: right;
	
    }
        
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
           display: block;
           float: left;
           text-transform: uppercase;
   
		   text-align:justify;
		    margin: 0px;
			
        }
            
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #ccc;
                text-decoration: none;
                height: 60px;
                line-height: 60px;
                padding: 0 26px;
            }
            #menu li a:hover{
                background: ;
                color: #fff;
            }
    
    /* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
        display: none;
        background: url(nav.png) no-repeat center center;
        float: right;
        width: 60px;
        height: 60px;
        position: absolute;
        right: 0;
        top:0;
        opacity: .6;

    }   
        /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;
        }


    h2{
        font-size: 50px;
        font-weight: 600;
        text-transform: uppercase;
        color: #624c3f;
    }

		
	/* ~~ The footer ~~ */
.footer {
	padding: 10px 0;
	/*background: #FFFFFF;*/
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
	
	
	/* Content es el que contiene a toda la pagina Web, el margin tiene dos numeros el primero es el margen vertical y el segundo son los margenes horizontales 
#content{
    width: 90%;
    margin: 0px auto;
    text-align: justify;
    overflow: hidden;
	 max-width:1203px;
	    
	 	 background-image: url('../ima/baner/baner_ergosillas_r6_c1.jpg');        
         background-size: 100% 100%;
	
}*/
	
	/* para el parrafo 
	
		section,aside {
		padding: 10px;
		background:#555E63;
		
	}

	section {
		float: left;
		width: 47%;
		 margin: 0px auto;
		   color: #ccc;
		
	}
	aside {
		float: right;
		width: 47%;
		background:#DDE4E8;
		
	}
		
	*/	
		
		/* LOS SECTION PRINCIPAL Y ASIDE PRINCIPAL SON USADOS EN LAS PAGINAS INTERNAS */
		
		/* para el parrafo izquierdo de las páginas internas, cambia el fondo y justifica el texto */
		section_principal,aside_principal,section_larga {
		padding: 10px;
		 background:#fif2f2;
		text-align : justify;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
			}
	/* para el parrafo izquierdo de las páginas internas, cambia ancho y posicion */
	section_principal {
		float: left;
		width: 45%;
		   margin: 25px 10px 0;		
		}
	/* para el parrafo derecho de las páginas internas, cambia ancho y posicion */
	aside_principal {
		float: right;
		width: 45%;	
		margin: 25px 10px 0;		
	}	
	
	/* para el parrafo largo de las páginas internas, cambia ancho y posicion */
	section_larga {
		float: left;
		width: 98%;	
		text-align : justify;
		 margin: 25px 10px 25px 10px;
		
		 	
	}		
	
		/* para el parrafo largo de las páginas internas, cambia ancho y posicion */
	section_larga_efecto {
		float: left;
		width: 96%;	
		text-align : justify;
		 margin: 25px 10px 25px;
		 	
	}	
		
		section_index {
		float: left;
		width: 80%;	
		text-align : justify;
		 margin: 25px 10px 25px;
		 	
	}	
		
	/* permite que las imagenes se adapten con la pantalla */
	img{
 width:100%;
    max-width:1600px;
height:auto;
 float: center;

}			
 
		img.pequena{
  width: 250px; height: 250px;
  position:fixed;
top:20px;
right:10px;

  z-index:1260;
  
  
}

		img.pequena2{
  width: 173px; height: 47px;
  ;
top:20px;
right:10px;

  z-index:1260;
  
  
}
		
/*
    MEDIA QUERY
*/

@media only screen and (max-width: 800px) {
        /* Content 
 #content{
    width: 90%;
    margin: 0px 0px;
    text-align: justify;
    overflow: hidden;
		
	
}*/
    h2{font-size: 30px;
	
	}
    /* MENU DE TELEFONO */
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 160px;
	
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu que se despliega */
            #menu li{
                background: #122B3F;
                border-bottom: 1px solid #666;
                float: left;
				 width: 100%;
				 
				 padding-left:30px;
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 15px 15px;
                    height: auto;
                    line-height: normal;
                }
                #menu li a:hover{background:#2C4F6D}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
		
		.contenedor{
	width: 100%;
	font: 12px 'Open Sans', sans-serif;
	
}
		.header_menu{

  
	 background: #13293E;

}

#main{
        display: none;
      
    }  

	   #menu ul{
        list-style: none;
        font-size: 10px;

	
    }
	
	    /*ESTE ES EL CARACTER SEPARADOR*/
	#menu li + li a:before {
content: ">";
padding-right: 10px;
}
	/*img{
 
  width:100%;
    max-width:1600px;
height:auto;
 float: center;
 
}
*/	
 /* 
	section {
			width:90%;
		}
		
			aside {
		float: left;
		width: 90%;
		margin-top:5px;
	}	
	*/	
		
		section_principal {
			width:90%;
									
		}
				aside_principal {
		float: left;
		width: 90%;
		  margin: 25px 10px 0;
		  	padding: 5px;
	}	
			section_larga {
			float: left;
		width: 90%;
		  margin: 25px 10px 0;
		}
		
				section_larga_efecto {
			width:90%;
					padding: 5px;
					font: 12px 'Open Sans', sans-serif;
					 top:0;
				
		}
		
		
	
	/* la clase main la uso para el texto que tengo en la section , y la cambio cuando se accesa en un telefono, por ejemplo sustituyo el color del fondo y ajusto el tamaño de letra si quiero 
	.main{
	width: 100%;
	box-sizing:border-box;
 margin:0 auto;
  padding:10px;
	float:left;
	 font: 13px 'Open Sans', sans-serif;
	 background: #F1F1F1;
}*/
	
	
	.sidebar1 {
	text-align: justify;
	float: left;
	width: 96%;
	background:#ffffff ;
padding: 5px;
}
	
	.sidebar2 {
	float: left;
	width: 100%;
	/*background: #ffffff;*/
	padding-bottom: 10px;
}
	
	.sidebar_index {
		height:auto;

	float:left ;
	width: 90%;
	/*background: #ffffff;*/
	padding-bottom: 10px;
	 margin: 6px 10px 0;
}
	
.sidebar_baner {
	
	display:block;
	float:left ;
	width: 60%;
	 z-index:150;
	
}	
	
.sidebar_baner1 {
	
	
	
}
.sidebar_baner2 {	
	display:block;	
	position: relative;
top: 0;
z-index:55;


}
.footer {
			display:none;
		}
		
		img.pequena{
 display:none;
 
 
}
}


/*TUTORIAL SOBRE LOS MARGENES.
 Si solo se indica un valor, todos los márgenes tienen ese valor.
		Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
		Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes		 izquierdo y derecho.
		Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.*/


/*TUTORIAL SOBRE LOS PADDING O RELLENO.
La notación {1, 4} de la definición anterior significa que la propiedad padding admite entre uno y cuatro valores, con el mismo significado que el de la propiedad margin. Ejemplo:

body {padding: 2em}     /* Todos los rellenos valen 2em */
/*body {padding: 1em 2em}  Superior e inferior = 1em, Izquierdo y derecho = 2em */
 /*body {padding: 1em 2em 3em} Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */
/*body {padding: 1em 2em 3em 4em}  Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */




/* El tamaño por defecto de 200px ya estaría establecido previamente */
/* @media all and (max-width: 1000px){

}
@media all and (max-width: 400px){
img{
width:100%;
}
}