body
{
	width: 100%;
	/*background-color:#0e7893;*/
	background-color: #f2f2f2;
	text-align: center;
	margin:0;
}

#container { 
        
        	position: relative;
        }
        
        	li{
        		list-style: none;
        	}




        #container li 
        { 
  

        	margin-top: 3em;
        	width:125px;
        	height:0.1px;
        	position:absolute; 
        	left:0; 
            text-align:center;
            /*border:solid 1px #aaa;*/
            cursor:pointer;
            -moz-box-shadow: 0px 0px 3px #888;
            -webkit-box-shadow: 0px 0px 3px #888; 
            box-shadow: 0px 0px 3px #888;
           
        }



#cabecera{
	background-color: white;
	width: 100%;
	height: 80px;
}



#logo img{
	width:80px;
	height:80px;
	margin: 0 0 0 8em;
	float: left;
}

#fecha{
	width:280px;
	height:80px;
	float:left;
	position:relative;
	font-size: 1em;
	font-family: Open Sans;
	font-weight: 100;
	color: #515353;
	top: 15px;
}

h1{
	font-size: 1em;
	font-family: Open Sans;
	font-weight: 200;
	color: #515353;
	padding-top: 1em;
}

.inner
{
	max-width: 1280px;
	margin: 0 auto;
	margin-top: 3em !important;
}

#menu{
	width:160px;
	height:80px;
	margin: 0 0 0 0;
	float:left;
	position:relative;
	margin-left: 6em;
}

#menu2{
	width:437px;
	height:80px;
	margin: 0 0 0 0;
	float:left;
	position:relative;
	/*margin-left: 5em;*/

}

h2{
	font-size: 1em;
	font-family: Open Sans;
	font-weight: 200;
	color: #339dbf;
	padding-top: 1em;
	
	float: left;
	position: relative;

}

h3{
	font-size: 1em;
	font-family: Open Sans;
	font-weight: 200;
	color: #515353;
	padding-top: 0.8em;
	float: left;
	position: relative;
	padding-left: 1em;

}

menu a h2{
	text-decoration: none;
	color: #339dbf;
	}

menu a h3{
	text-decoration: none;

	}	


#fondo{
	width: 100%;
	height: 600px;
	background-image: -webkit-gradient(
	linear,
	right bottom,
	right top,
	color-stop(0, #034F6B),
	color-stop(0.51, #0CB3EB),
	color-stop(1, #04627A)
);
background-image: -o-linear-gradient(top, #034F6B 3%, #0CB3EB 40%, #04627A 95%);
background-image: -moz-linear-gradient(top, #034F6B 2%, #0CB3EB 40%, #04627A 95%);
background-image: -webkit-linear-gradient(top, #034F6B 3%, #0CB3EB 40%, #04627A 95%);
background-image: -ms-linear-gradient(top, #034F6B 3%, #0CB3EB 40%, #04627A 95%);
background-image: linear-gradient(to top, #034F6B 2%, #0CB3EB 40%, #04627A 95%);

}

footer{
	width: 100%;
	display: inline-block;
	position: relative;
}



#footer1{
	width: 500px;
	height: 183px;
	background-color: #309bbd; 
	float: left;
	position: relative;
	margin-top: -10.3em;
	display: inline-block;
	top:-56px;
}

#slogan{
	width: 350px;
	height: 150px;
	float: left;
	position: relative;
	margin-top: 0.1em;
	margin-left: 6em;


}

#slogan h2{
	font-size: 1.6em;
	font-family: Open Sans;
	color: white;
	text-align: center;
	margin-top: 0.4em;
	margin-left: 1em;
}

#redes{
	width: 400px;
	height: 66px;
	float: left;
	position: relative;
	
}

#footer2{
	width: 440px;
	height: 183px;
	background-color: #309bbe;
	float: left;
	position: relative;
	margin-top: -10.3em;
	display: inline-block;
	top:-56px;
}

#footer3{
	width: 340px;
	height: 183px;
	background-color: #71c3de;
	float: right;
	position: relative;
	display: inline-block;
	top: -221px;
}

#footer3 img{
	margin: 0.9em 3.4em 0 0em;
	width: 170px;
	height: 158px;

}

#tit_prin{
	float: left;
	position: relative;
	margin-left: 7.7em;
	margin-top: 2em;
	font-size: 1.3em;
	font-family: Open Sans;
	font-weight: 100;
	color: #ffffff;
}

#bold{
	font-weight: bold;
}

#none{
	font-weight: none;
}


#telegrafo{
	width: 387px;
	height: 800px;
	float: left;
	position: relative;
	display: inline-block;

}

#telegrafo img{
	width: 314px;
	height: 454px;
	left:5em;
	position: relative;
	display: inline-block;
	margin-left: 1em;
	margin-top: 1em;
	/*z-index:1;filter:alpha(Opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;*/

}


	#sombra img{
	width: 314px;
	height: 425px;
	top: 4.1em;
	left: 10.4em;
	 position: absolute;
	 /*background-color: #000;*/
	 /*z-index:0;filter:alpha(Opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;*/
	/*z-index: 2;*/
}



#reflejo{
	margin-top: 2.5em;
	box-shadow: 20px -30px 8px #4b626a
	margin-bottom: 120px;
	-webkit-box-reflect: below 1.2px -webkit-linear-gradient(bottom, rgba(255,255,255,0.6) 0%, transparent 10%, transparent 100%);


}

#reflejo2{
	margin-top: 2.5em;
	box-shadow: -15px 20px 10px 10px rgba(0, 0, 0, 0.2);
	opacity:1em ;
	margin-bottom: 120px;
	-webkit-box-reflect: below 1px -webkit-linear-gradient(bottom, rgba(52,54,54,0.3) 0%, transparent 18%, transparent 100%);


}


#articulos{
	width: 57%;
	height: 100%;
	float: right;
	position: relative;
	display: inline-block;
	
}

.r2{
	width: 400px;
	height: 25px;
	text-align: left;
	margin-left: 2em;


}

.r3{
	width: 400px;
	height: 66px;
}

.r4{
	width: 400px;
	height: 65px;
	text-align: left;
}

.iconos
{
	/*background: #196C9B;*/
	display: inline-block;
	height: 57px;
	vertical-align: top;
	margin-left: 1.3em;
	width: 55px;
	margin-top: 0em;
}

.iconos img{
	width: 65px;
	height: 65px;
}


.r3 h4{
	font-size: 0.7em;
	font-family: Open Sans;
	font-weight: 200;
	color: white;
	float: left;
	position: relative;
}

#redes_txt .iconos{
	display: inline-block;
	height: 57px;
	vertical-align: top;
	margin-left: 0.2em;
	width: 80px;
	margin-top: 0em;
}

.r2 h2{
	font-size: 1em;
	font-family: Open Sans;
	font-weight: 200;
	color: white;
	}


.rotar{
        box-shadow: 12px 10px 30px #000;
        -webkit-box-reflect: below 1.2px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 4%, transparent 10%);
        transform:rotate(25deg);
		-ms-transform:rotate(25deg); /* IE 9 */
		-webkit-transform:rotate(25deg); /* Opera, Chrome, and Safari */
        margin-left: 8em;
        transition-duration:1s;
	}

/*carton piedra*/
#a1{
	position: absolute;
	top: 180px;
	left: 100px;
	width: 185px;
	height: 251px;	
	display: inline-block;
	float: left;

}

/*masquemenos*/
#a2{
	position: absolute;
	top: 50px;
	left: -50px;
	width: 185px;
	height: 251px;	
	display: inline-block;
	float: left;

}

/*telemix*/
#a3{
	position: absolute;
	top: 160px;
	left: 190px;
	width: 185px;
	height: 251px;		
	display: inline-block;
	float: left;
}

/*inmoteca*/
#a4{
	position: absolute;
	top: 60px;
	right: -100px;
	width: 185px;
	height: 251px;	
	display: inline-block;
	float: left;	
}


#flecha{
	width: 140px;
	height: 77px;
	position: relative;
	float: right;
	bottom: -484px;
	margin-right: 2em;
	
}

#txt_flecha{
	width: 50px;
	height: 77px;
	position: relative;
	float: left;
	font-size: 0.6em;
	font-family: Open Sans;
	font-weight: 100;
	color: white;
	text-align: left;
	top: 1em;
	
}

/*codigo para lineas sobre productos*/

.suplemento-title {        
                width: 200px;
                text-align: left;
                padding: 0.3em 0 0.3em 1.5em;              
                /*border-radius: 0.5em;*/
                display: none;
}
 
.suplemento-title span {
                font-size: 1em;
                font-family: Open Sans;
                /*letter-spacing: 0.05em;*/
                font-weight: 100;
}             
 
.line {
                display: none;
                width: 0;
                position: absolute;
}
 
#title1 {
                position: absolute;
                top: 0;
                left: 200px;
                top:-25px;
                
}
 
#title1 span {
                color: #fff;
}
 
#line1 {
    border-left: 1px solid #fff;	
    height: 379px;
    left: 230px;   
    top: 2px;  
    z-index: 1;
}
 
#title2 {
                position: absolute;
                top: 0;
                left: 423px;
                
                
}
 
#title2 span {
                color: #fff;
}
 
#line2 {
    border-left: 1px solid #fff;
    height: 256px;
    left: 500px;
    top: 25px;
    z-index: 1;
}
 
#title3 {
     
    left: -7px;
    position: absolute;
    top: -20px;
}
 
#title3 span {
    color: #fff;
}
 
#line3 {
  border-left: 1px solid #FFFFFF;
  height: 250px;
  left: 20px;
  top: 5px;
  z-index: 1;
}
 
#title4 {
    
    
    left:137px;
    position: absolute;
    top: -30px;
}
 
#title4 span {
                color: #fff;
}
 
#line4 {
  border-left: 1px solid #FFFFFF;
  height: 147px;
  left: 250px;
  top: -5px;
   z-index: 1;
}


.ver{
	font-size: 0.6em;
    font-family: Open Sans;
    font-weight: 100;
    color: #fbed08;
    margin-left: 6px;
}


#cuadro{
	width: 100px;
	height:25px;
	background-color:#006883;
	border: 1px solid #fff;
	margin-top: 28px;
	left: 10px;
	float: left;
	position: relative;
}


#cuadro:hover{
	
	background-color:#0babd7;
	width: 100px;
	height:25px;

	float: left;
	position: relative;
}	

#text{
	font-size: 1em;
	font-family: Open Sans;
	font-weight: 200;
	color: #fff;
	padding-top: 0em;
	float: left;
	position: relative;
	padding-left: 0.5em;

}


#text2{
	font-size: 0.8em;
	font-family: Open Sans;
	font-weight: 200;
	color: #fcee06;
	padding-top: 0.2em;
	float: left;
	position: relative;
	padding-left: 0.5em;

}

#fuente{
	color:#04627a; 
}

@media (min-width: 769px) and (max-width: 1366px) {
#footer3{
	width: 340px;
	height: 183px;
	background-color: #71c3de;
	float:left;
	position: relative;
	margin-top: -19.2em;
	display: inline-block;
	top:105.2px;

}
}


@media (min-width: 769px) and (max-width: 1680px) {
#footer3{
	width: 340px;
	height: 183px;
	background-color: #71c3de;
	float:left;
	position: relative;
	margin-top: -21.8em;
	display: inline-block;
	top:128.2px;

}
}

@media (min-width: 1280px) and (max-width: 1280px) {

#footer3{
	width: 325px;
	height: 183px;
	background-color: #71c3de;
	float:right;
	position: relative;
	margin-top: -19em;
	display: inline-block;
	top:83px;

}

}



@media (min-width: 769px) and (max-width: 1278px) {

#menu{
	width:16%;
	height:80px;
	margin: 0 0 0 0;
	float:left;
	position:relative;
	margin-left: 0.6em;
	display: inline-block;
}

#menu2{
	width:40%;
	height:80px;
	margin: 0 0 0 0;
	float:left;
	position:relative;
	margin-left: 1em;
	display: inline-block;

}

#cuadro{
	width: 100px;
	height:25px;
	background-color:#006883;
	border: 1px solid #fff;
	margin-top: 28px;
	left: 8px;
	float: left;
	position: relative;
	display: inline-block;
}


#cuadro:hover{
	
	background-color:#0babd7;
	width: 100px;
	height:25px;

	float: left;
	position: relative;
	display: inline-block;
}	

h2{
	font-size: 0.9em;
	font-family: Open Sans;
	font-weight: 200;
	color: #339dbf;
	padding-top: 1.3em;
	
	float: left;
	position: relative;

}

h3{
	font-size: 0.9em;
	font-family: Open Sans;
	font-weight: 200;
	color: #515353;
	padding-top: 1.3em;
	float: left;
	position: relative;
	padding-left: 1em;

}

#logo img{
	width:80px;
	height:80px;
	margin: 0 0 0 2em;
	float: left;
}

#fecha{
	width:180px;
	height:80px;
	float:left;
	position:relative;
	font-size: 0.9em;
	font-family: Open Sans;
	font-weight: 100;
	color: #515353;
	top: 16px;
}

#telegrafo img{
	width: 314px;
	height: 454px;
	left:0em;
	top: 0em;
	position: relative;
	margin-left: none;
	margin-top: none;
	/*z-index:1;filter:alpha(Opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;*/

}

	#sombra img{
	width: 314px;
	height: 425px;
	top: 4.1em;
	left: 6em;
	 position: absolute;
	 /*background-color: #000;*/
	 /*z-index:0;filter:alpha(Opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;*/
	/*z-index: 2;*/
}

#articulos{
	width: 48%;
	height: 100%;
	float: right;
	position: relative;
	display: inline-block;
	left: -10em;
	
}

#footer1{
	width: 400px;
	height: 183px;
	background-color: #309bbd; 
	float: left;
	top:165px;
	left: -25em;
}

#slogan{
	width: 350px;
	height: 150px;
	float: left;
	position: relative;
	margin-top: 0.1em;
	margin-left: 6em;


}

#slogan h2{
	font-size: 1.6em;
	font-family: Open Sans;
	color: white;
	text-align: center;
	margin-top: 0.4em;
	margin-left: 0em;
	left: -2.5em;
}

#footer2{
	width: 433px;
	height: 183px;
	background-color: #309bbe;
	float: left;
	position: relative;
	margin-top: -9em;
	display: inline-block;
	top:126px;
	left: -0.4em;
}

#footer3{
	width: 190px;
	height: 183px;
	background-color: #71c3de;
	float: right;
	position: relative;
	display: inline-block;
	top: 292px;
}

#footer3 img{
	margin: 2em 0em 0 0em;
	width: 130px;
	height: 120px;

}

#container {
	margin: 0 auto;
	padding: 0;
	width: 640px;
}

#fuente{
	display: none;
}

footer{
	width: 100%;
	display: block;
	position: relative;
	margin: 0 auto;
	top: none;
	}


}






@media (min-width: 480px) and (max-width: 768px) {


body
{
	width: 100%;
	/*background-color:#0e7893;*/
	/*background-color: #f2f2f2;*/
	text-align: center;
	margin:0;
	background-color: #078cb3;
}

#fondo{
	background-image: none !important;

}


#menu{
	width:100%;
	height:100px;
	margin: 0 auto;
	float:left;
	position:relative;
	margin-left:none;
	display: inline-block;
	top: -8em;

}

#cuadro3{
	width: 100%;
	height:46px;
	background-color:#71c3de;
	border: 1px solid #71c3de;
	margin-top: -400px;
	left: -17em;
	margin: 0 auto;
	display: inline-block;
}


#cuadro3:hover{
	
	background-color:#0babd7;
	width: 100%;
	height:46px;
	float: left;
	display: inline-block;
}	


.inner
{
	max-width: none;
	margin: 0 auto;
	margin-top: none;
}


#menu2{
	width:80%;
	height:10px;
	margin: 0 0 0 2em;
	float:right;
	position:relative;
	margin-left: 1em;
	display: inline-block;
	top:-12em; 

}

#cuadro{
	width: 80px;
	height:25px;
	background-color:#006883;
	border: 1px solid #fff;
	margin-top: 40px;
	left: 10px;
	float: left;
	position: relative;
	display: inline-block;
}


#cuadro:hover{
	
	background-color:#0babd7;
	width: 80px;
	height:25px;

	float: left;
	position: relative;
	display: inline-block;
}	

h2{
	font-size: 1.3em;
	font-family: Open Sans;
	font-weight: 200;
	color: #fff;
	padding-top: none;
	top: -1.4em;	
	float: right;
	position: relative;
	padding-right: 1em;

}

h3{
	font-size: 1.1em;
	font-family: Open Sans;
	font-weight: 200;
	color: #515353;
	padding-top: 1.3em;
	float: left;
	position: relative;
	padding-left: 1em;

}

#logo img{
	width:80px;
	height:80px;
	margin: 0 0 0 0;
	float: left;
}

#fecha{
	width:180px;
	height:10px;
	float:left;
	position:relative;
	font-size: 0.9em;
	font-family: Open Sans;
	font-weight: 100;
	color: #fff;
	top:-1.1em;
	z-index: 1;
	left: -2em;

}


#telegrafo{
	width: 450px;
	height: none;
	float: none;
	position: relative;
	display: inline-block;
	margin: 0 auto;



}


#telegrafo img{
	width: 465px;
	height: 600px;
	left:-1.5em;
	top: -4em;
	position: relative;
	margin-left: none;
	margin-top: none;
	/*z-index:1;filter:alpha(Opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;*/

}

	#sombra img{
	width: 314px;
	height: 425px;
	top: 4.1em;
	left: 6em;
	 position: absolute;
	 /*background-color: #000;*/
	 /*z-index:0;filter:alpha(Opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;*/
	/*z-index: 2;*/
}

#articulos{
	width: 100%;
	height: none;
	float: left;
	position: absolute;
	display: block;
	left: none;
	top: 54em;
	margin: 0 auto;
	background-color: #04acdc;
}

#flecha {
	display: none;
}

footer{
	width: 100%;
	position: relative;
	margin: 0 auto;
	top: 62em;
	}

#footer1{
	width: 100%;
	height: 80px;
	background-color:#309bbe; 
	top:none;
	left: none;
	
}

#slogan{
	width: 100%;
	height: 150px;
	float: left;
	position: relative;
	margin-top: 0.1em;
	margin-left: 1.3em;


}

#slogan h2{
	font-size: 1.1em;
	font-family: Open Sans;
	color: white;
	text-align: center;
	position: relative;
	width: 100%;
	float: left;
	margin-top: 1.4em;
	margin-left: 0em;
	left: -1em;

}

#footer2{
	width: 100%;
	height: 194px;
	background-color: #71c3de;
	position: relative;
	margin-top:none;
	top:1.5em;
	float:none;
}

#footer3{
	width: 100%;
	height: -2px;
	background-color: #309bbe;
	top:9em;
	float: none;

}

#footer3 img{
	margin: 2em 0em 0 0em;
	width: 130px;
	height: 120px;

}

#sombra {
	display: none;
}

#tit_prin{
	float: left;
	position: relative;
	margin-left: 7.7em;
	margin-top: -4.5em;
	font-size: 1.3em;
	font-family: Open Sans;
	font-weight: 100;
	color: #ffffff;
}

#reflejo{
	display: none;
	-webkit-box-reflect:none;
	-webkit-linear-gradient:none;
}

.rotar{
        box-shadow: none;
        -webkit-box-reflect: none; 
        -webkit-linear-gradient:none;
        transform:none;
		-ms-transform:none; /* IE 9 */
		-webkit-transform:none; /* Opera, Chrome, and Safari */
        margin-left: none;
        transition-duration:none;
	}


/*codigo para lineas sobre productos*/

.suplemento-title {        
    display: none;
}
 
.suplemento-title span {
	display: none;
}             
 
.line {
    display: none;
}
 
#title1 {
	display: none;
                
}
 
#title1 span {
	display: none;
}
 
#line1 {
	display: none;
}
 
#title2 {
	display: none;      
}
 
#title2 span {
	display: none;
}
 
#line2 {
	display: none;
}
 
#title3 {
	display: none;
}
 
#title3 span {
	display: none;
}
 
#line3 {
	display: none;
}
 
#title4 {
	display: none;
}
 
#title4 span {
	display: none;
}
 
#line4 {
	display: none;
}


.ver{
	display: none;
}
/*------------*/

/*carton piedra*/
#a1{
	position: absolute;
	top: 50px;
	left: 1em;
	width: 210px;
	height: 275px;	
	display: inline-block;
	float: left;
	margin: 0 auto;
}

/*masquemenos*/
#a2{
	position: absolute;
	top: 50px;
	left: -6em;
	width: 210px;
	height: 275px;	
	display: inline-block;
	float: left;

}

/*telemix*/
#a3{
	position: absolute;
	top: 340px;
	left: -3.3em;
	width: 210px;
	height: 275px;	
	display: inline-block;
	float: left;
	margin: 0 auto;	
}

/*inmoteca*/
#a4{
	position: absolute;
	top: 340px;
	left: 6.2em;
	width: 210px;
	height: 275px;		
	display: inline-block;
	float: left;
	margin: 0 auto;
}

#invisible{
	display: block;
	float: left;
	width: 100%;
	height: 45px;
	text-align: center;
	margin-top: -230px;
	background-color:#04627a; 
	padding-top: 1em;
	
}

#fuente{
	font-size: 1.2em;
	font-family: Open Sans;
	color: white;
	font-weight:100;
	top: 3em;
	}


#container {
	margin: 0 auto;
	padding: 0;
	width: 470px;
	margin-top: -4em;
}

#flecha{
	display: none;
}

.r2 h2{
	font-size: 0.8em;
	font-family: Open Sans;
	font-weight: 200;
	color: white;
	position: relative;
	float: left;
	}


.r2{
	width: none;
	height: 25px;
	text-align: left;
	margin-left: 2em;
	margin-top: 1em;
}

.r3{
	width: 400px;
	height: 66px;
	position: relative;
	float: left;
}


#text2 {
  font-size: 0.6em;
  font-family: Open Sans;
  font-weight: 200;
  color: #fcee06;
  padding-top: 0.5em;
  float: left;
  position: relative;
  padding-left: 0.9em;
}

#text {
  font-size: 0.6em;
  font-family: Open Sans;
  font-weight: 200;
  color: #fff;
  padding-top: 0.5em;
  float: left;
  position: relative;
  padding-left: 1.4em;
}


}