*{
    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:1920px;
    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: #ffffff;
	width: 100%;
 
}


/* 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;	
}

/* 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: #fefefe;
	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;
}

.sidebar_contacto {
	height:auto;
	float:left ;
	width: 10%;
	/*background: #ffffff;
	/*padding-bottom: 10px;*/
	 margin: 26px 50px 30 50px;
	bottom: 70px;
}
/* Style the buttons */
.btn {
  
	
	display: block;
                color: #263238;
                text-decoration: none;
                height: 55px;
                line-height: 55px;
                padding: 0 px;
	font-size: 10px
}

/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
  background-color: #F3B8B9;
  color: white;
	
}

.active, .btn:active {
  background-color: #F3B8B9;
  

}

/* 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: #ffffff;
}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
        font-size: 14px;
    }
        
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
           display: block;
           float: left;
           text-transform: uppercase;
           text-align: center;
		   
        }
                #menu li2{
           display: block;
           float: right;
        
           text-align: right;
		   
        }
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #263238;
                text-decoration: none;
                height: 60px;
                line-height: 60px;
                padding: 0 26px;
            }
            #menu li a:hover{
                background: #efefef;
                color: #F80B0F;
            }

    	
    /* 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:#eaeaea;
		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: 100%;	
		text-align : justify;
		 margin: 25px 10px 25px;
		 	
	}		
	
		/* 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:1920px;
height:auto;
 float: center;

}			
 


		
/*
    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: 30px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,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 */
           /* estilos para los LI del menu que se despliega */
            #menu li{
                background: #ffffff;
                border-bottom: 1px solid #f0f0f0;
                float: none;
            }

            /* 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:#f0f0f0}

        /* 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: 14px 'Open Sans', sans-serif;
	
}
		
#main{
        display: none;
      
    }  

	
	/*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 {
			width:100%;
					padding: 0px;	
		}
		
				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: 100%;
	background: #f0f0f0;
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%;
	
	
}	
	
.sidebar_baner1 {
	
	display:none;
	
}

.footer {
			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%;
}
}