@font-face {
		font-family: 'CenturyGothic';
		src: url('../fonts/CenturyGothic/GOTHIC.eot');
		src: url('../fonts/CenturyGothic/GOTHIC.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/CenturyGothic/GOTHIC.TTF') format('truetype'),
				 url('../fonts/CenturyGothic/GOTHIC.TTF.woff') format('woff'); 
		font-weight: normal;
		font-style: normal;
}

@font-face {
		font-family: 'CenturyGothic';
		src: url('../fonts/CenturyGothic/GOTHICB.eot');
		src: url('../fonts/CenturyGothic/GOTHICB.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/CenturyGothic/GOTHICB.TTF') format('truetype'),
				 url('../fonts/CenturyGothic/GOTHICB.TTF.woff') format('woff'); 
		font-weight: bold;
		font-style: normal;
		font-style: normal;
}


@font-face{
	font-family:"AvantGarde"; /* nombre de la fuente */
	src: url(../fonts/avant-garde/Avant-Garde-Book-BT.ttf);
	src: url(../fonts/avant-garde/Avant-Garde-Book-BT.woff);
}

@font-face{
	font-family:"Impact"; /* nombre de la fuente */
	src: url(../fonts/Impact/impact.ttf);
	src: url(../fonts/Impact/impact.woff);
}

@font-face{
	font-family:"Serpentine"; /* nombre de la fuente */
	src: url(../fonts/serpent/Serpentine-Bold.ttf);
	src: url(../fonts/serpent/Serpentine-Bold.woff);
}


@font-face {
		font-family: 'FuturaBk';
		src: url('../fonts/FuturaBK/tt0140m_-webfont.eot');
		src: url('../fonts/FuturaBK/tt0140m_-webfont.eot?#iefix') format('embedded-opentype'),
					url('../fonts/FuturaBK/tt0140m_-webfont.woff') format('woff'),
				 url('../fonts/FuturaBK/tt0140m_-webfont.ttf') format('truetype');
				 
		font-weight: normal;
		font-style: normal;

}

@font-face {
		font-family: 'Futura';
		src: url('../fonts/Futura/futura_oblique-webfont.eot');
		src: url('../fonts/Futura/futura_oblique-webfont.eot?#iefix') format('embedded-opentype'),
				url('../fonts/Futura/futura_oblique-webfont.woff') format('woff'),
				 url('../fonts/Futura/futura_oblique-webfont.ttf') format('truetype'); 
		font-weight: normal;
		font-style: normal;

}

@font-face {
		font-family: 'FuturaMdBt';
		src: url('../fonts/FuturaMdBt/tt0142m_-webfont.eot');
		src: url('../fonts/FuturaMdBt/tt0142m_-webfont.eot?#iefix') format('embedded-opentype'),
				url('../fonts/FuturaMdBt/tt0142m_-webfont.woff') format('woff'),
				 url('../fonts/FuturaMdBt/tt0142m_-webfont.ttf') format('truetype'); 
		font-weight: normal;
		font-style: normal;

}

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

@font-face {
		font-family: 'HelveticaNeue_Thin';
		src: url('../fonts/HelveticaNeue-Thin/HelveticaNeue-Thin.eot');
		src:  url('../fonts/HelveticaNeue-Thin/HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
					url('../fonts/HelveticaNeue-Thin/HelveticaNeue-Thin.woff') format('woff'),
					url('../fonts/HelveticaNeue-Thin/HelveticaNeue-Thin.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}

@font-face {
		font-family: 'Helvetica';
		src:url('../fonts/helvetica/Helvetica-Normal.woff') format('woff'),
				url('../fonts/helvetica/Helvetica-Normal.ttf') format('opentype');
		font-weight: normal;
		font-style: normal;
}

@font-face {
		font-family: 'HelveticaMed';
		src: url('../fonts/Helvetica-medium/HelveticaMed.eot');
		src: url('../fonts/Helvetica-medium/HelveticaMed.eot?#iefix') format('embedded-opentype'),
				url('../fonts/Helvetica-medium/HelveticaMed.woff') format('woff'),
				 url('../fonts/Helvetica-medium/HelveticaMed.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}




@font-face {
		font-family: 'AvantGarde';
		src: url('../fonts/avant-garde/Avant-Garde-Book-BT.eot');
		src: url('../fonts/avant-garde/Avant-Garde-Book-BT.eot?#iefix') format('embedded-opentype'),
					url('../fonts/avant-garde/Avant-Garde-Book-BT.woff') format('woff'),
				 url('../fonts/avant-garde/Avant-Garde-Book-BT.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}

@font-face {
		font-family: 'Humanst521_BT';
		src: url('../fonts/Humanst521_BT/Humanst521_BT_Roman.eot');
		src: url('../fonts/Humanst521_BTe/Humanst521_BT_Roman.eot?#iefix') format('embedded-opentype'),
					url('../fonts/Humanst521_BT/Humanst521_BT_Roman.woff') format('woff'),
				 url('../fonts/Humanst521_BT/Humanst521_BT_Roman.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}

/*reseteadores*/

html, body {
	width:100%;
	height:100%;
}

@media only screen and (max-width: 768px) {
	html, body {
		width:auto;
		height:auto;
	}
}	

body {
	background:#fbfbfb;
	margin:0px;
	padding:0px;
	font-family:Verdana;
	font-size:9pt;
	text-align:center;
}

p, ul, label{
	padding:0px;
	margin:18px 0px;
	font-family:Verdana;
	font-size:9pt;
	color:#4f636d;
	position:relative;
}

ol{
	font-family:Verdana;
	font-size:9pt;
	color:#4f636d;	
}

ol li{
	margin:15px;
	position:relative;
}


i{
	color:#1791d0;
	font-style:normal;
}

a{
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

div, textarea, input{
	/*border:dotted 1px red!important;*/
	box-sizing:border-box;
}

h1{
	
	font-weight:normal;
	font-family:CenturyGothic;
	font-size:27pt;
	color:#FFF;
	background-color:#f8a732;
	border-radius:0px 8px 8px 0px;
	display:inline-block;
	margin:35px 0px;
	padding:8px 25px 5px 50px;
	position:relative;
}

h2{
	padding:0px;
	margin:2px;
	font-weight:normal;
	font-family:FuturaMdBt;
	color:#1791d0;
	font-size:21pt;
	position:relative;
}


h3{
	padding:0px;
	margin:2px;
	font-weight:normal;
	font-family:FuturaMdBt;
	color:#4f636d;
	font-size:13pt;
	position:relative;
}

h2+p{
	margin:10px 0px;
}

footer{
	text-align:center;
	color:#4f636d;
	clear:both;
	border:dotted white 1px;
}

footer p{
	margin:30px;
	background-image:url(../img/footer_back.png);
	background-position:center;
	background-repeat:no-repeat;
}

footer a{
	color:#4f636d;
}

/*efectos*/
.contenido{
	opacity:0.5;
}

p.burla{
	display:none;	
}

.contenido h1,
.contenido h2,
.contenido h3,
.contenido img,
.contenido p,
.contenido li{
	opacity:0;
}

#loading{
	background-image:url(../img/loading.gif);
	width:100%;
	height:500px;
	position:absolute;
	top:0px;
	opacity:1!important;
	background-position:center;
	background-repeat:no-repeat;
}

@media only screen and (max-width: 768px) {
	footer{
		text-align:center;
		color:#4f636d;
		opacity:0.6;
		clear:both;
		border:dotted white 1px;
	}
	
	footer p{
		text-align:center;
		background-image:none;
		font-size:9pt;
	}
	
	footer a{
		color:#4f636d;
	}
	

}
#push_top{
	display:block;
	width:50%;
	height:50%;
	position:relative;
	top:0px;
	left:0px;
}


table{
   border: 0px solid black;
   border-spacing: 7px;
}
	th, td{
		border:solid 1px #78b2c3;
		border-radius:5px;
		text-align:center;
		padding:13px 15px 7px 15px;
		margin:7px;
		vertical-align:bottom;
	}
	
	th:first-child, td:first-child{
		text-align:right;
	}	
	
	thead th{
		background-color:#282828;
		color:white;
		font-weight:normal;
		padding:30px 15px 7px 15px;
	}


.contenido{
	display:inline-block;
	border:dotted 0px red;
	text-align:left;
	min-height:500px;
	margin:0px;
	position:relative;
	overflow:hidden;
}

.contenido, #header nav ul{
	width:1000px;
}

.contenido ul{
	position:relative;
}

.contenido ul li{
	position:relative;
}

@media only screen and (max-width: 1024px){
	body {
		margin:0px;
		padding:0px;
		text-align:left;
	}	
}

@media only screen and (max-width: 768px){

	.contenido{
		display:block;
		border:dotted 0px red;
		text-align:left;
		width:100%;
		margin:0px;
		min-height:auto;
	}
}

#home{
	height:582px;
	width:1000px;
	position:relative;
	border:dotted 0px red;
	margin:0px auto;
	background-image:url(../img/loading.gif);
	background-position:center;
	background-repeat:no-repeat;
	overflow:hidden;
}

#home *{
	opacity:0;
}
	#home .simbolo{
		width:auto;
		padding-left:126px;
		height:113px;
		background-image:url(../img/simbolo_vice.png);
		background-repeat:no-repeat;
	}
	
		#home .simbolo p{
			font-family:"Serpentine";
			font-size:45pt;
			text-shadow: 0 2px 0 white, 0 -3px 0 white, 3px 0 0 white, -3px 0 0 white;
			margin:0px;
			padding:0px;
			text-align:left;
			line-height:35pt;
		}	

	#home .diapositiva{
		width:1000px;
		height:524px;
		position:absolute;
		top:0px;
		left:0px;
	}
	
		#diapositiva0{
		}	
		
		#diapositiva0 .simbolo{
			position:absolute;
			left:60px;
			top:374px;
		}
		
			#diapositiva0 .simbolo p:first-child{
				color:#f69818;
				margin-left:0px;
				font-size:42.5pt;
			}
			
			#diapositiva0 .simbolo p:last-child{
				color:#d21b1f;
				margin-left:15px;
				font-size:45.3pt;
			}			
						
	
			#diapositiva0 img{
				position:absolute;
				left:0px;
				top:-240px;
			}		

		#diapositiva1{
		}	
		
		#diapositiva1 .simbolo{
			position:absolute;
			left:45px;
			top:390px;
		}
		
			#diapositiva1 .simbolo p:first-child{
				color:#108bee;
				margin-left:0px;
				font-size:40pt;
			}
			
			#diapositiva1 .simbolo p:last-child{
				color:#0a62a8;
				margin-left:15px;
				font-size:41pt;
			}			
						
	
			#diapositiva1 img{
				position:absolute;
				left:0px;
				bottom:0px;
			}
			
		#diapositiva2{
		}
		
		#diapositiva2 .simbolo{
			position:absolute;
			left:540px;
			top:40px;
		}
		
			#diapositiva2 .simbolo p{
				color:#f8a32f;
				margin-left:15px;
				font-size:41pt;
			}		
		
			#diapositiva2 .simbolo p:first-child{
				margin-left:0px;
				font-size:30pt;
			}
			
			#diapositiva2 .simbolo p:last-child{
				margin-left:75px;
				font-size:32pt;
			}			
						
	
			#diapositiva2 img{
				position:absolute;
				left:0px;
				bottom:0px;
			}
			
		#diapositiva3{
			background-color:#FFF;
		}

	#grifo_home{
		height:524px;
		width:1000px;
		border:dotted 0px green;
		background-image:url(../img/grifo_home.jpg);
		background-repeat:no-repeat;
		position:absolute;
		top:-100px;
		left:0px;
	}
	
		#grifo_home p{
			font-family:Impact;
			font-size:39pt;
			color:#f8a32f;
			text-shadow: 0 2px 0 white, 0 -2px 0 white, 2px 0 0 white, -2px 0 0 white;
			position:absolute;
		}
		
			#grifo_home p:nth-child(1){
				color:#ee3137!important;
				top:40px;/*20px*/
				left:500px;
			}
			
			#grifo_home p:nth-child(2){
				color:#3788c5!important;
				top:100px;/*80*/
				left:588px;
			}
			
			#grifo_home p:nth-child(3){
				top:170px;/*150*/
				left:680px;
				
			}			
			
			#grifo_home p:nth-child(4){
				font-size:30pt;
				top:225px;/*205*/
				left:758px;
				
			}
			
			#grifo_home p:nth-child(5){
				font-size:26pt;
				top:270px;/*250*/
				left:808px;				
			}

		
										
		#engine_home{
			top:170px;
			left:120px;
			position:absolute;
			width:300px;
			height:320px;
		}
		
		#base{
			position:absolute;
			top:0px;
			left:0px;
			width:541px;
			height:524px;
			background-color:#FFF;
		}

			#logo_solucion{
				background-image:url(../img/solucion_b5_logo.png);
				width:448px;
				height:147px;
				left:-10px;/*20*/
				top:30px;
				position:absolute;
			}
			
			#limpieza{
				background-image:url(../img/limpieza.gif);
				width:80px;
				height:70px;
				position:absolute;
				right:-80px;
				top:5px;
			}
			
			#temperatura{
				background-image:url(../img/temperatura.gif);
				width:45px;
				height:70px;
				position:absolute;
				right:-70px;
				top:90px;
			}			
			
			#anticorrosivo{
				background-image:url(../img/corrosivo.gif);
				width:78px;
				height:64px;
				position:absolute;
				right:-80px;
				top:175px;
			}
			
			#leaf{
				background-image:url(../img/leaf.png);
				width:39px;
				height:65px;
				position:absolute;
				right:-60px;
				top:250px;
			}			
												
			#engine_home p{
				font-family:FuturaBk;
				font-size:22pt;
				text-align:right;
				margin:10px;
			}
			
				#engine_home p:nth-child(1){
					color:#1791d0;		
				}
						
				#engine_home p:nth-child(2){
					color:#f58220;	
				}
							
				#engine_home p:nth-child(3){
					color:#2e3192;		
				}	
				
				#engine_home p:nth-child(4){
					color:#649600;
				}
		#engine{
			background-image:url(../img/engine.png);
			width:692px;
			height:551px;
			position:absolute;
			bottom:-10px;
			right:10px;
		}
									
		#grifo_footer{
			background-color:#1791d0;
			height:58px;
			width:100%;
			position:absolute;
			bottom:0px;/*-58*/
		}
			#grifo_footer .circle{
				width:16px;
				height:16px;
				border-radius:8px;
				background-color:#FFF;
				float:left;
				margin:20px 8px;
				cursor:pointer;
				z-index:2;
				opacity:0;
			}
			
				#grifo_footer .circle:first-child{
					margin:20px 8px 20px 20px;
				}			
				
			#grifo_footer p{
				font-family:Humanst521_BT;
				font-size:24pt;
				color:#FFF;
				border:dotted 0px red;
				margin:10px 150px 0px 300px;
				text-align:right;
			}
		
			#hand_nozzle{
				background-image:url(../img/grifo_hand_noozle.png);
				width:133px;
				height:94px;
				position:absolute;
				top:-45px;/*-100*/
				right:15px;
			}
			
#ubicanos{
		min-height:524px;
}

	#ubicanos h1{
		padding:8px 90px 5px 50px;
		
	}

	#ubicanos h2{
		background-image:url(../img/gasoline_station_bullet.png);
		background-repeat:no-repeat;
		padding:18px 2px 2px 60px;
		cursor:pointer;
		color:#4f636d;
		transition:all 0.3s;
		z-index:-2;
		width:200px;
		border:dotted 0px red;
		cursor:pointer;
		z-index:2;
	}
	
		#ubicanos h2:hover{
			background-image:url(../img/gasoline_station_bullet_hover.png);
			color:#1791d0;
		}
		
			#ubicanos h2.hover{
				background-image:url(../img/gasoline_station_bullet_hover.png);
				color:#1791d0;
			}			
	
	#ubicanos h1+h2{
		background-image:url(../img/office_bullet.png);
		background-repeat:no-repeat;
	}
	
		#ubicanos h1+h2:hover{
			background-image:url(../img/office_bullet_hover.png);
		}
		
			#ubicanos h1+h2.hover{
				background-image:url(../img/office_bullet_hover.png);
			}		
	#ubicanos ul{		
		margin-left:90px;
		font-family:Futura;
		font-size:13pt;
		line-height:16pt;
		z-index:-2;
		border:dotted 0px red;
		width:250px;
	}
	
		#ubicanos ul li{		
			padding-left:38px;
			width:145px;
			background-image:url(../img/phone_bullet.png);
			background-repeat:no-repeat;
		}
		
		#ubicanos ul li:first-child{		
			background-image:url(../img/gps_bullet.png);
		}
				
	#map_canvas{
		width:631px;
		height:524px;
		background-color:#CCC;
		position:absolute;
		top:0px;
		right:0px;
		opacity:0;
	}	
	
		#map_canvas *{
			opacity:1;
		}		
	
		#content_map h1{
			background:none;
			font-size:15pt;
			color:#4f636d;
			margin:0px;
			padding:10px 2px 2px 2px;
		}
		
		#content_map p{
			background:none;
			font-size:12pt;
			color:#4f636d;
			margin:0px;
			padding:2px;
			text-align:left;
		}		
			#content_map{
				color:#4f636d;
				text-align:left;
			}
	
	@media only screen and (max-width: 768px) {
		#map_canvas{
			/*width:auto;
			height:400px;
			background-color:#CCC;
			position:relative;
			top:0px;
			right:0px;
			z-index:auto;*/
			display:none;
		}		
	}

#servicios{
	background-image:url(../img/servicios_imagen.jpg);
	background-repeat:no-repeat;
	background-position:left top;
}

	#servicios h1{
		padding:8px 90px 5px 106px;
		margin-left:295px;
	}
	
	#servicios h2{
		margin-left:369px;
		
	}
	
	#servicios p, .ul_columnas{
		margin-left:500px;
	}
	
	#servicios .ul_columnas, #productos .ul_columnas{
		width: 350px;
		border:dotted 0px red;
		display:inline-block;
	}
		
	#servicios .ul_columnas ul, #productos .ul_columnas ul{
		padding:0px;
		float:left;
		width:50%;
	}
		
	#servicios .galon ul li{
		background-image:url(../img/galon_bullet.png);
		background-repeat:no-repeat;
		padding-left:23px;
		margin:13px;
	}
	
		
	#servicios .combustible ul li, #productos .combustible ul li{
		background-image:url(../img/gas_noozle.png);
		background-repeat:no-repeat;
		padding:2px 2px 2px 32px;
		margin:13px;
	}
	
	@media only screen and (max-width: 768px) {
		#servicios .ul_columnas{
			width:auto;
			border:dotted 0px red;
			display:inline-block;
			margin-left:10px;
		}
		
			#servicios .ul_columnas ul{
				padding:0px;
				float:none;
				width:auto;
			}		
				
	}
		

#politica{
	background-image:none;
}

	#politica h1{
		padding:8px 90px 5px 106px;
	}
	
	#politica h2{
		margin:15px 10px 10px 120px;
	}
	
	#politica h3{
		margin-left:90px;
	}
	
	#politica img{
		position:absolute;
		left:110px;
		margin-top:270px;
	}
	
	@media only screen and (max-width: 768px) {
		#politica img{
			display:none;
		}				
	}
		
	#politica ol{
		width:600px;
		margin:10px 10px 50px 300px;
	}

#nosotros{
    height: 530px;
}

	
	#nosotros h1{
		padding:8px 25px 5px 300px;
	}
		
	#nosotros h1+img{
		position:absolute;
		top:0px;
		left:0px;
	}
			
	#nosotros div{
		width:375px;
		margin:0px 0px 0px 185px;
		border:dotted 0px red;
	}
	
		#nosotros div p{
			margin:18px 0px 0px 19px;
		}
		

	
	#nosotros div.columna2{
		position:absolute;
		top:127px;
		right:57px;		
		width:355px;
	}
		
		#nosotros div.columna2 h2{
			padding:0px;
			margin:25px 2px 2px 2px;
		}
					
		#nosotros div.columna2 h2:first-child{
			padding:0px;
			margin:2px;
		}
			
	@media only screen and (max-width: 768px) {
		#nosotros h1+img{
			position:relative;
			top:0px;
			left:0px;
			display:none;
		}
		
		#nosotros div{
			margin:0px;
			width:auto;
		}
			#nosotros div p{
				margin:2px;
			}
					
		#nosotros div.columna2{
			position:relative;
			top:0px;
			right:0px;		
			width:auto;
		}
			
			#nosotros div.columna2 h2{
				padding:0px;
				margin:25px 2px 2px 2px;
			}
						
			#nosotros div.columna2 h2:first-child{
				padding:0px;
				margin:2px;
			}		
	}		
		
#contactenos{
	background-image:url(../img/contactenos_noozle_vecto.png);
	background-repeat:no-repeat;
	background-position:right top;
}

	#frm_riel{
		width:485px;
		height:447px;
		margin: -100px 57px 0px 0px;
		float:right;
		top:0px;
		right:0px;
		position:relative;
		overflow:hidden;
	}
	
	#frm_train{
		position:absolute;
		top:0px;
		left:0px;
		width:972px;
		height:447px;
	}
	
			#box_response{
				padding:0px 10px;
				border:dotted 0px green;
				position:relative;
			}
						
			#box_response p:last-child{
				margin:40px 2px 2px 2px;
			}
							
			#box_response a{
				padding:10px;
				background-color:#4f636d;
				border-radius:5px;
				color:#FFF;
				text-decoration:none;
				cursor:pointer;
			}	
			
			#box_response a:hover{
				background-color:#1791d0;
			}			

	#contactenos form, #box_response{
		width:485px;
		float:left;
	}

	#contactenos h1+p{
		margin:0px 0px 18px 60px;
	}	
	
	#contactenos h2{
		margin-left:60px;
	}
	
		#contactenos h2+ul{
			margin:18px 0px 50px 90px;
		}	
	@media only screen and (max-width: 768px) {
		#frm_riel{
			margin:0px 0px 0px 0px;
			float:none;
			border:dotted 0px red;
			width:100%;
			box-sizing:border-box;
			height:700px;
		}		
		
			#contactenos form p{
				border:dotted 0px blue;
				display:block;
				width:100%;
				box-sizing:border-box;
			}
			
			#contactenos form p.burla{
				display:none!important;
			}			
			
			#contactenos h2+ul{
				margin:18px 0px 50px 18px;
			}
			#contactenos form p:last-child{
				text-align:center;
			}
								
			#contactenos form input[type="text"],
			#contactenos form input[type="tel"],
			#contactenos form input[type="mail"],
			#contactenos form textarea,
			#contactenos form select{
				float:none!important;
				display:block!important;
				width:93%!important;
				margin:0px;
				box-sizing:border-box!important;
			}
			
										
			#contactenos input[type="reset"],#contactenos input[type="submit"]{
				margin:10px 5px 5px 5px;
				cursor:pointer;
			}
		
	}

#productos{
	background-image:url(../img/porducto_gas_noozle.png);
	background-repeat:no-repeat;
	background-position:right top;
}


@media only screen and (max-width: 768px) {
	#productos{
		background-image:none;
	}
}
	#productos img{
		display:block;
		margin-left:30px;
	}
	@media only screen and (max-width: 768px) {
		#productos h1+img{
			display:block;
			width:90%;
			max-width:448px;
			height:auto;
			margin:10px;
		}	
	}	
	
	#productos h2{
		margin-left:90px;
	}
	
	
	#productos p{
		width:450px;
		margin:18px 0px 18px 90px;
	}
	
	#productos h1+h2{
		margin-left:40px;
	}	
	
	#productos h1+h2+p{
		width:450px;
		margin:18px 0px 18px 40px;
	}	
	
	#productos .ul_columnas{
		margin: 0px 0px 20px 90px;
	}
	
	#productos img+p{
		width:482px;
		margin:18px 0px 18px 40px;
	}
	
	#productos table{
		position:absolute;
		top:582px;
		right:0px;
	}
	
	@media only screen and (max-width: 768px) {
		#productos table{
			position:relative;
			top:0px;
			right:0px;			
		}		
	}	

	
#contenido_construccion{
	margin-top:-200px;
	display:inline-block;
	position:relative;
	left:0px;
	overflow:hidden;
	text-align:center;
}

	#contenido_construccion h1{
		padding:0px;
		margin:2px;
		font-weight:normal;
		font-family:FuturaMdBt;
		color:#0191E8;
		background:none;
	}
	
	#contenido_construccion .logo{
		background-image:url(../img/logo_grifovicesac.png);
		width:645px;
		height:181px;
		background-repeat:no-repeat;
		display:block;
	}
		
	#contenido_construccion .texto_direccion{
		border-top:dotted 1px #ddd;
		margin:10px 0px 0px 0px;
		padding:15px;
		text-align:center;
		display:inline-block;
		font-family:Verdana;
		font-size:10pt;
		color:#0F3A6F;
	}
	
	#contenido_construccion div{
		display:block;
	}

#logo{
	background-image:url(../img/logo_vice.png);
	background-color:#FFF;
	background-position:center;
	background-repeat:no-repeat;
	width:287px;
	height:84px;
	border-radius:0px 0px 5px 5px;
	border:dotted 0px red;
	display:inline-block;
	position:absolute;	
	top:0px;
	left: -moz-calc(((100% - 960px)/2));
	left: -webkit-calc(((100% - 960px)/2));
	left: calc(((100% - 960px)/2));		
	cursor:pointer;
	z-index:1;
	}

	@media only screen and (max-width: 1000px) {
		#logo{
			position:absolute;	
			left:10px;	
		}
	}	
	
	@media only screen and (max-width: 768px) {
		#logo{
			position:relative;	
			left:0px;	
			width:100%;
			height:70px;	
			background-image:url(../img/grifo_vice_movil.png);
			background-repeat:no-repeat;				
		}
	}	



#frame{
	background-color:#fff;
	overflow:hidden;
	width:908px;
	height:523px;
	border:dotted #009900 0px;
	position:relative;
	}
	
#texto_direccion{
	border-top:dotted 1px #ddd;
	margin:10px 0px 0px 0px;
	padding:15px;
	text-align:center;
	display:inline-block;
	font-family:Verdana;
	font-size:10pt;
	color:#0F3A6F;
	}

ul{
	list-style-type:none;
}

	ul li span{
		display:inline-block;
		width:70px;
	}

#header{
	height:96px;
	width:100%;
	position:relative;
	display:block;
	text-align:center;
}

	#header a.intranet{
		display:inline-block;
		position:absolute;
		top:0px;
		right: -moz-calc(((100% - 960px)/2));
		right: -webkit-calc(((100% - 960px)/2));
		right: calc(((100% - 960px)/2));		
		margin:0px;
		background-color:#1791d0;
		color:white;
		border-radius:0px 0px 8px 8px;
		border:solid 0px red;
		padding:5px 10px 5px 40px;
		font-family:"CenturyGothic";
		font-size:11pt;
		text-decoration:none;
		background-image:url(../img/intranet.png);
		background-repeat:no-repeat;
		background-position:5px 0px;
		transition:0.3s all;
	}
	
	#header a.intranet:hover{
		padding:8px 10px 5px 40px;
		background-position:5px 3px;
	}
		
	
	#header nav{
		width:100%;
		height:56px;
		position:absolute;
		bottom:0px;
		background-color:#043f79;
		text-align:center;
		z-index:0;
		
	}
	
	@media only screen and (max-width: 768px) {
		#header{
			height:auto;
			width:auto;
			position:relative;
			display:block;
			text-align:center;
		}	
	}
	
		#header nav ul{
			list-style-type:none;
			display:inline-block;
			margin:0px;
		}	
		
			#header nav ul li{
				float:left;
				padding:8px 5px;
				border:dotted 0px white;
				display:block;
				margin:0px;
			}
			
			#header nav ul li:first-child{
				padding:8px 5px 8px 320px;
			}
			
			#header nav ul li:last-child{
				padding:8px 0px 8px 5px;
			}
						
			#header nav ul li a{
					color:white;
					font-family:FuturaBk;
					font-size:10.5pt;
					transition:all 0.25s;
					padding:10px 8px;
					border-radius:5px;
					display:inline-block;
					margin:0px;	
					text-decoration:none;
			}
			
				#header nav ul li a:hover{
					color:#1791d0;
					background-color:#FFF;
				}
				
					
			
	@media only screen and (max-width: 768px) {
		#header nav{
			width:100%;
			position:relative;
			height:10px;
			display:inline-block;
			overflow:hidden;
			
		}
			#header nav ul{
				width:auto;
				background-color:#043f79;
				border:dotted 0px white;
				display:inline-block;
				box-sizing:border-box;
				text-align:center;
				padding:10px 0px;
				
			}
				#header nav ul li{
					float:none;
					width:70%;
					margin:10px;
					text-align:left;
					border:dotted 0px yellow;
					padding:0px;
					display:inline-block;
				}
				
				#header nav ul li:first-child{
					padding:0px;
				}
				
				#header nav ul li:last-child{
					padding:0px;
				}
				
				#header nav ul li a{
					color:white;
					width:auto;
					display:block;
					font-family:FuturaBk;
					font-size:12pt!important;
					padding:10px 0px 10px 15px;
					transition:all 0.25s;
					border:solid 1px white;
					background-color:#1791d0;
					border-radius:8px;
					box-sizing:border-box;
				}							
			
	}				
				
			
form{
	border:dotted 0px red;
}
	form p label{
		margin:8px 0px;
		border:dotted 0px red;
		float:left;
	}
	
	form p{
		display:inline-block;
		width:100%;
		margin:0px 0px 11px 0px;
		border:dotted 1x red;
	}
	
	form p:last-child{
		margin:0px;
		text-align:right;
	}

	input[type="text"], input[type="tel"], input[type="mail"], select, textarea{
		border:solid 1px #78b2c3;
		border-radius:5px;
		padding:8px;
		font-family:verdana;
		color:#4f636d;		
	}
	
	input[type="text"], input[type="tel"], input[type="mail"], select{
		width:330px;
		float:right;		
	}
	
	select option{
		margin:10px;
	}
	
	input[type="reset"], input[type="submit"]{
		background-color:#4f636d;
		color:white;
		text-align:center;
		border-radius:5px;
		border:none;
		padding:15px 0px;
		margin:0px 0px 0px 10px;
		width:100px;
		
		cursor:pointer;
	}
	
		input[type="reset"]:hover, input[type="submit"]:hover{
			background-color:#1791d0;
		}	
	
	textarea{
		width:100%;
		height:115px;
		resize:none;
	}

@media only screen and (max-width: 768px) {
	@font-face {
		font-family: 'verdana';
		src:	url('../fonts/verdana/verdana.ttf') format('truetype'),
				 url('../fonts/verdana/verdana.woff') format('woff'); 
		font-weight: normal;
		font-style: normal;
	}
	
	.contenido{
		background-image:none!important;
	}
	
	
	h1{
		margin:10px 10px 10px 0px!important;
		font-weight:normal;
		font-family:CenturyGothic;
		font-size:16pt!important;
		color:#FFF;
		background-color:#f8a732;
		border-radius:0px 8px 8px 0px;
		display:inline-block;
		padding:8px 25px 5px 50px!important;
	}
	
	h2{
		padding:0px;
		margin:10px 20px!important;
		font-weight:normal;
		font-family:FuturaMdBt;
		color:#1791d0;
		font-size:15pt!important;
		display:block;
	}
	
	h3{
		padding:0px;
		margin:10px 20px!important;
		font-weight:normal;
		font-family:FuturaMdBt;
		color:#4f636d;
		font-size:10pt;
	}
	
	ol{	
		width:auto!important;
		margin:10px!important;
	}
	
	ul, ol{
		font-size:12pt;
	}
	
	p, label{
		width:auto!important;
		margin:10px 20px!important;
		line-height:15pt;
		text-align:left;
		font-size:12pt;
	}
	
	label{
		margin:10px 0px!important;
	}	
	
	p, ul , ol{
		color:#4f636d;
	}
	
	h1+p{
		width:auto!important;
		margin:10px 20px!important;
	}
	
	th, td{
		border:solid 1px #78b2c3;
		border-radius:5px;
		text-align:center;
		padding:10px;
	}
	
	th:first-child, td:first-child{
		text-align:right;
	}	
	
	thead th{
		background-color:#282828;
		color:white;
		font-weight:normal;
		padding:10px;
	}

	#loading{
		background-image:url(../img/loading.gif);
		width:100%;
		height:250px;
		position:absolute;
		top:0px;
		opacity:1!important;
		background-position:center;
		background-repeat:no-repeat;
	}

}