@charset "UTF-8";
/*@autor: Carlos Roman y Fabian Leon*/

/*	Guías	*
	*Tipografías
		font-family: 'Gotham-Medium';
		font-family: 'Gotham-Bold';
		font-family: 'Gotham-Black';

	*Colores
		Naranja: #FFA500;
		Gris: #333333;

	*Libro de marca
		Amarillo: #FFB819;
		Rojo: #F42534;
		Negro: #000000;
*/


/*	Predefinidas	*/
	html{ overflow-x: hidden; }
	.fl{ float: left; }
	.fr{ float: right; }
	a, button{ cursor: pointer; }
	.parallax{ background-attachment: fixed !important; }
	.tac{ text-align: center !important; width: 100%; }

	/*Animación en cada link*/
	a:hover, a:focus,
	a:hover img, a:focus img,
	a:hover i, a:focus i{
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}




	/*Colores*/
	.naranja{ color: #FFA500 !important; }

	/*No seleccionar texto*/
	a, button, img{
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select:none;
		-o-user-select: none;
		user-select: none;
	}
	.mtb50px {
		height: 100px;
		float: left;
		width: 100%;
	}
	.mt50px {
		height: 50px;
		float: left;
		width: 100%;
	}
	header, .container-fluid, footer {
		margin: 0 auto;
		float: left;
		width: 100%;
	}
	body{
		background: #F3F3F3;
		font-family: 'Gotham-Medium';
	}
	.rotate180{ transform: rotate(180deg); }

	/*Info Mapa interactivo*/
	.infoMapa{
		text-align: center;
		cursor: pointer;
	}
		.infoMapa img{
			width: 150px;
			float: left;
		}
		.infoMapa strong{
			clear: both;
			margin-top: 5px;
			float: left;
			width: 100%;
		}
		.infoMapa b{ color: orange; }


/*  Loading   */
	.loadingBox{
		width: 100%;
		height: 100%;
		/*background: rgba(255, 255, 255, 0.5);*/
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 9999;
		display: none;
	}
		.loadingBox > img{
			position: fixed;
			width: 100px;
			left: 50%;
			margin-left: -50px;
			top: 50%;
			margin-top: -50px;
			background: #FFFFFF;
			border-radius: 50px;
			padding: 20px;
			box-shadow: 0px 0px 25px #FFFFFF, 0px 0px 20px #FFFFFF, 0px 0px 15px #FFFFFF, 0px 0px 10px #FFFFFF, 0px 0px 5px #FFFFFF, 0px 0px 0px #FFFFFF;
		}


/*	Billboard	>	Header	*/
	.encabezado, .encabezado header, .encabezado header > a {
		padding: 0px;
	}
	.encabezado {

	}
		.encabezado > img{
			width: 100%;
			top: 0px;
			left: 0px;
		}

		/*Menu*/
		.encabezado header{
			position: fixed;
			top: 0px;
			left: 0px;
			z-index: 999;
			background: rgba(0, 0, 0, 0.5);
		}

			.encabezado header hr{
				margin: 0px;
				position: absolute;
				height: 0px;
				border-top: 20px solid orange;
				z-index: 90;
				width: 100%;
				top: 0px;
			}

			/*Izquierda*/
			.encabezado header > a{
				position: relative;
				z-index: 91;
			}
				.encabezado header > a > img{
					float: left;
					width: 100%;
				}

			/*Derecha*/
			.encabezado header nav{
				/*padding: 40px 0 0;*/
				position: relative;
				z-index: 92;
				margin-left: 0px;
			}
				.encabezado header nav ul{
					padding: 0px;
				}
					.encabezado header nav ul li{
						list-style: none;
						display: inline-block;
						text-align: center;
					}
						.encabezado header nav ul li a{
							text-decoration: none;
							font-family: 'Gotham-Bold';
							font-size: 14px;
						}
						.encabezado header nav ul li a{
							color: #FFFFFF;
						}
						.encabezado header nav ul li a:hover,
						.encabezado header nav ul li a:focus{
							font-weight: bold;
							color: #FBB719;
						}
			/*Hamb*/
			.encabezado header p.hamb{
				position: absolute;
				top: 0px;
				right: 0px;
				color: #FFFFFF;
				z-index: 999;
				font-size: 28px;
				padding: 8px 13px;

				display: none;
			}

			/*
			.faceIconHeader, .faceIconHeader i{
				font-size: 55px;
				margin-top: -18px;
				margin-left: 10px;
				color: #3b5998;
			}
			*/

			.faceIconHeader, .faceIconHeader img{
				width: 55px;
				margin-top: -18px;
				margin-left: 10px;
			}

			/*
			.faceIconHeader:hover,
			.faceIconHeader:focus,
			.faceIconHeader:hover i,
			.faceIconHeader:focus i{
				color: #FFFFFF;
			}
			*/

		/*Busqueda Header*/
		.encabezado .busquedaHead{
			text-align: center;
			height: 50px;
			margin: 380px 0 0;
		}
		.busquedaHead form input[type="text"],
		.busquedaHead form input[type="button"]{
			font-size: 14px;
			box-shadow: 0px 0px 15px #000000;
			border: 0px none;
			line-height: 0px;
			float: none;
		}
		.busquedaHead form input[type="text"]{
			color: #000000;
			padding: 15px;
		}
		.busquedaHead form input[type="button"]{
			color: #FFFFFF;
			background: #FCB136;
			margin-left: 20px;
			padding: 22px;
		}


/*	Slider Marcas	*/
	.sliderMarcas {
		padding: 20px 0px;
		height: auto;
		background: #FFFFFF;
	}


/*	Mapa Index 	*/
	.mapaInicio{
		padding: 0px;
		position: relative;
	}
		.mapaInicio #map{
			padding: 0px;
			width: 100%;
			height: 380px;
		}

/*	Estilos Mapa Fabi  */
			#locationField {
				box-sizing: border-box;
				position: relative;
				width: 270px;
				height: 40px;
				float: left;
				background-color: #fff;
			}

			.mapaInicio input,
			.mapaInicio input::-webkit-input-placeholder {
				font-size: 14px;
				line-height: 3;
			}

			#search-container {
				position: absolute;
				left: 0;
				right: 0;
				margin: 0 auto;
				z-index: 5;
				top: 11px;
				width: 320px;
				box-shadow: 0px 0px 7px #999;
			}

			#btn {
				box-sizing: border-box;
				background: #ed1a3a;
				color: #fff;
				border: none;
				font-size: 14px;
				position: relative;
				height: 40px;
				width: 50px;
				float: left;
				cursor: default;
			}

			#controls {
				position: absolute;
				left: 300px;
				width: 140px;
				top: 0px;
				z-index: 5;
				background-color: #fff;
			}

			#autocomplete {
				box-sizing: border-box;
				padding: 5px;
				width: 100%;
				height: 100%;
				font-size: 14px;
			}


/*	Gasolineras Principales	 */
	.gasDestacadas{
		background: url("../img/misc/fondoO.png") #FFFFFF;
		background-size: 100%;
		padding: 50px 0px;
		text-align: center;
	}
		.gasDestacadas h1{
			text-transform: uppercase;
			font-size: 30px;
			font-weight: lighter;
		}
		.gasDestacadas hr{
			width: 40px;
			height: 0px;
			border-bottom: 2px solid #ED1B3A;
			margin: 20px auto;
		}
		.gasDestacadas > p{
			color: #666666;
			font-size: 14px;
			font-weight: normal;
		}
		.gasDestacadas ol{
			list-style: none;
			margin: 0 auto;
			text-align: center;
		}
			.gasDestacadas ol li{
				position: relative;
				margin: 40px 0px 0px;
				padding: 0px 10px;
				cursor: pointer;
				float: none;
				display: inline-grid;
			}
			.gasDestacadas ol li:hover img:nth-child(2),
			.gasDestacadas ol li:focus img:nth-child(2){
				transform: scale(1.04, 1.04);
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			.gasDestacadas ol li:hover p, .gasDestacadas ol li:hover b,
			.gasDestacadas ol li:focus p, .gasDestacadas ol li:focus b{
				color: #FFA500;
			}
				.gasDestacadas ol li img:nth-child(1){
					margin: -19px 0 -20px -15px;
					position: absolute;
					left: 50%;
					background: #FFFFFF;
					border-radius: 50px;
					border: 3px solid #FFFFFF;
					width: 40px;
					z-index: 9;
				}
				.gasDestacadas ol li img:nth-child(2){
					width: 100%;
					border: 3px solid #BE0000;
					float: left;
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
				}
				.gasDestacadas ol li p,
				.gasDestacadas ol li b{
					font-size: 12px;
				}
				.gasDestacadas ol li p{
					font-weight: normal;
					padding: 10px;
					color: #666666;
					background: #FFFFFF;
					width: 100%;
					box-shadow: 0px 0px 5px #CCCCCC;
					float: left;
					border-bottom-right-radius: 5px;
					border-bottom-left-radius: 5px;
				}
				.gasDestacadas ol li b{
					position: relative;
					float: left;
					left: 50%;
					transform: translate(-50%);
					color: #666666;
					background: #FFFFFF;
					width: 100%;
				}


/*	Enersol Extras  */
	.extras{
		padding: 50px 0px 80px;

		/* Old browsers */
		background: #EF0C28;
		/* Chrome10-25,Safari5.1-6 */
		background: -webkit-radial-gradient(center, ellipse cover, #EF0C28 50%,#8F050E 100%);
		/* FF3.6-15 */
		background: -moz-radial-gradient(center, ellipse cover, #EF0C28 50%, #8F050E 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		background: radial-gradient(ellipse at center, #EF0C28 50%,#8F050E 100%);
		/* IE6-9 fallback on horizontal gradient */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EF0C28', endColorstr='#8F050E',GradientType=1 );
	}
		.extras ol{
			list-style: none;
			padding: 0px;
		}
			.extras ol li.hijoUno{
				text-align: left;
			}
				.extras ol li.hijoUno img{
					width: 20px;
					float: left;
					position: absolute;
					left: -5px;
				}
				.extras ol li h1{
					float: left;
					color: #FFFFFF;
					text-transform: uppercase;
					margin-left: 10px;
					font-weight: lighter;
					letter-spacing: 1px;
					font-size: 19px;
					margin-top: 1px;
					margin-bottom: 30px;
				}
				.extras ol li p {
					color: #FFFFFF;
					font-size: 12px;
					/*float: left;*/
					font-weight: normal;
				}
				.extras ol li:nth-child(1) p{
					float: left;
				}

			.extras ol li{
				text-align: center;
			}
				.extras ol li img{
					width: 50px;
				}
				.extras ol li h2{
					margin-top: 15px;
					margin-bottom: 15px;
					color: #FFFFFF;
					font-size: 16px;
				}

			.imgExtraServ{
				margin-top: 20px;
				width: 75% !important;
				margin-bottom: -30px;
				border-radius: 5px;
				box-shadow: 0px 0px 5px #500000;
			}

			div.extrasBrands img{
				width: 100%;
				min-width: 75px;
				max-width: 200px;
				background: #FFFFFF;
				border-radius: 30px;
				box-shadow: 0px 0px 2px #FFFFFF;
			}


/*	Gasolineras Afiliads  */
	.gasAfiliadas{
		/* Old browsers */
		background: #fcb136;
		/* Chrome10-25,Safari5.1-6 */
		background: -webkit-radial-gradient(center, ellipse cover,
			#fcb136 10%, #ef8813 15%, #fcb136 30%, #f76e13 90%);
		/* FF3.6-15 */
		background: -moz-radial-gradient(center, ellipse cover,
			#fcb136 10%, #ef8813 15%, #fcb136 30%, #f76e13 90%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		background: radial-gradient(ellipse at center,
			#fcb136 10%, #ef8813 15%, #fcb136 30%, #f76e13 90%);
		/* IE6-9 fallback on horizontal gradient */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcb136', endColorstr='#f76e13',GradientType=1 );

		background-size: 100% 800px;
		background-position: 0% 50%;
		margin: 50px 0px;
	}
		.gasAfiliadas img:nth-child(1){
			width: 280px;
			position: relative;
			left: 50%;
			transform: translate(-50%);
			margin-top: -35px;
			margin-bottom: -35px;
			float: left;
		}
		.gasAfiliadas img:nth-child(2){
			float: left;
			position: relative;
			left: 50%;
			transform: translate(-50%);
			clear: both;
			margin-top: -80px;
			width: 35px;
		}
		.gasAfiliadas h5{
			position: relative;
			left: 50%;
			transform: translate(-50%);
			float: left;
			clear: both;
			margin-top: -125px;
			color: #FFFFFF;
			text-transform: uppercase;
			font-weight: lighter;
			font-size: 16px;
			text-align: center;
		}
		.gasAfiliadas h6{
			position: relative;
			left: 50%;
			transform: translate(-50%);
			float: left;
			clear: both;
			margin-top: -170px;
			font-size: 38px;
			font-weight: bold;
			color: #FF0000;
		}


/*	Afiliarse  */
	.afiliarse{
		/* Old browsers */
		background: #EF0C28;
		/* Chrome10-25,Safari5.1-6 */
		background: -webkit-radial-gradient(center, ellipse cover, #EF0C28 50%,#8F050E 100%);
		/* FF3.6-15 */
		background: -moz-radial-gradient(center, ellipse cover, #EF0C28 50%, #8F050E 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		background: radial-gradient(ellipse at center, #EF0C28 50%,#8F050E 100%);
		/* IE6-9 fallback on horizontal gradient */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EF0C28', endColorstr='#8F050E',GradientType=1 );
	}
		.afiliarse img:nth-child(1){
			margin: 20px 0 0;
			float: left;
		}
		.afiliarse p{
			float: left;
			color: #FFFFFF;
			margin: 40px 0px;
			padding: 45px 20px;
			border-right: 1px solid #FFFFFF;
			font-size: 14px;
		}
		.afiliarse img:nth-child(3){
			width: 250px;
			margin: 20px;
			padding: 65px 20px;
			cursor: pointer;
		}
		.afiliarse img:nth-child(3):hover,
		.afiliarse img:nth-child(3):focus{
			transform: scale(1.04, 1.04);
		}


/*	FAQs  */
	.faqs{
		padding: 50px 20px;
		text-align: center;
	}
		.faqs h1{
			color: #000000;
			text-transform: uppercase;
			font-size: 20px;
			font-weight: normal;
		}
		.faqs hr{
			height: 0px;
			border-bottom: 2px solid #FF0000;
			width: 30px;
			position: relative;
			left: 50%;
			transform: translate(-50%);
			margin: 15px 0 10px;
		}
		.faqs p{
			color: #666666;
			font-size: 14px;
			font-weight: normal;
			margin-bottom: 40px;
		}

		.faqs ol:nth-child(4){
			float: left;
			clear: both;
		}
		.faqs ol{
			list-style: none;
			padding: 0px 10px;
		}
			.faqs ol li{
				border-bottom: 1px solid #F1F1F1;
				float: left;
				background: #FFFFFF;
				box-shadow: 1px 1px 3px #CCCCCC;
				width: 100%;
				text-align: left;
			}
				.faqs ol li h6{
					font-size: 13px;
					padding: 15px 15px;
					color: #666666;
					cursor: pointer;
					padding-right: 30px;
					position: relative;
				}
					.faqs ol li h6 i{
						color: #999999;
						font-size: 14px;
						position: absolute;
						top: 15px;
						right: 12px;
					}
				.faqs ol li div{
					font-size: 14px;
					padding: 5px 20px 20px;
					text-align: justify;
					display: none;
					transition: all;
				}


/*	Footer  */
	footer{
		background: #282828;
		padding: 0px !important;
		font-family: 'Gotham';
	}
		footer ol{
			list-style: none;
			padding: 30px 0px;
		}
			footer ol li{

			}
				footer > ol > li > p,
				footer > ol > li > a{
					float: left;
					clear: both;
				}
				footer ol li p:nth-child(1){
					color: #FFFFFF;
					text-transform: uppercase;
					font-weight: normal;
					border-left: 2px solid #E69D00;
					padding-left: 10px;
					font-size: 14px !important;
					margin-bottom: 30px;
				}
				footer ol li a i{
					color: #E69D00;
					font-size: 16px !important;
					margin-right: 12px;
				}

			/*Columna 1*/
			footer ol li:nth-child(1) a{
				font-size: 12px;
			}
			footer ol li:nth-child(1) a i{
				float: left;
			}
			footer ol li:nth-child(1) a b{
				float: left;
				width: 70%;
			}
			footer ol li:nth-child(1) a small{
				clear: both;
				float: left;
				margin-left: 30px;
				margin-bottom: 25px;
				margin-top: 10px;
				font-size: 11px;
			}
			footer ol li:nth-child(1) a:hover,
			footer ol li:nth-child(1) a:focus{
				color: #FBB719;
			}

			/*Columna 2*/
			footer ol li:nth-child(2) div{
				float: left;
				clear: both;
				color: #FFFFFF;
				font-size: 12px;
				margin-bottom: 10px;
				width: 100%;
			}
				footer ol li:nth-child(2) div a{
					text-decoration: none;
				}
				footer ol li:nth-child(2) div a:hover,
				footer ol li:nth-child(2) div a:focus{
					color: #FBB719;
				}
				footer ol li:nth-child(2) div a:nth-of-type(1) img{
					border: 1px solid #FF0000;
					margin-right: 10px;
					width: 60px;
					float: left;
					margin-bottom: 10px;
				}
				footer ol li:nth-child(2) div a:hover:nth-of-type(1) img,
				footer ol li:nth-child(2) div a:focus:nth-of-type(1) img{
					border: 1px solid #FBB719;
				}
				footer ol li:nth-child(2) div a:nth-of-type(1) p{
					float: left;
					width: 55%;
				}
				footer ol li:nth-child(2) div a:nth-of-type(2){
					position: relative;
					top: -15px;
					float: right;
					clear: both;
					text-align: right;
				}
				footer ol li:nth-child(2) div a:nth-of-type(2) small{
					color: #999999;
				}
				footer ol li:nth-child(2) div a:hover:nth-of-type(2) small,
				footer ol li:nth-child(2) div a:focus:nth-of-type(2) small{
					color: #FBB719;
				}
					footer ol li:nth-child(2) div a:nth-of-type(2) small i{
						color: #FFA500;
						margin-right: 0px;
					}
				footer ol li:nth-child(2) div a:nth-of-type(2) p{
					float: right;
					margin-top: 3px;
				}
				footer ol li:nth-child(2) div a:nth-of-type(2) img{
					width: 70px;
					float: right;
					margin-top: 0px;
				}

			/*Columna 3*/
			footer ol li:nth-child(3) a{
				font-size: 12px;
				padding: 10px 0px;
				width: 100%;
				border-bottom: 1px solid #333333;
				text-decoration: none;
			}
				footer ol li:nth-child(3) a p{
					float: left;
					margin-top: 5px;
				}
				footer ol li:nth-child(3) a i{
					margin: 5px 10px 0 0;
					font-size: 22px !important;
					float: left;
				}
			footer ol li:nth-child(3) a:hover,
			footer ol li:nth-child(3) a:focus{
				color: #FBB719;
			}

			/*Columna 4*/
			footer ol li:nth-child(4) a{
				font-size: 12px;
				padding: 10px 0px;
				width: 100%;
				border-bottom: 1px solid #333333;
				font-weight: bold;
				text-decoration: none;
			}
			footer ol li:nth-child(4) a:hover,
			footer ol li:nth-child(4) a:focus{
				color: #FBB719;
			}

		/*Cinta roja*/
		footer > div{
			background: #EF0C28;
			width: 100%;
			text-align: center;
			float: left;
		}
			footer > div > img{
				width: 200px;
				margin: 20px;
			}

		/*Cinta Amarilla*/
		footer > p{
			background: #E69D00;
			float: left;
			width: 100%;
			font-size: 12px;
			text-align: center;
			color: #FFFFFF;
			padding: 10px 0px;
			border-top: 2px solid #282828;
			border-bottom: 2px solid #282828;
			padding-bottom: 60px;
		}

		.faceIconFooter{
			color: #FFFFFF;
			padding-left: 7px;
			font-size: 28px !important;
		}


/*	Cotizar Ahora Botón  */
	.cotizarAhoraBttnWrapper{
		position: fixed;
		width: 150px;
		height: 50px;
		bottom: 0px;
		left: 0px;
		z-index: 99;
	}
		.cotizarAhoraBoton{
			position: fixed;
			bottom: 0px;
			left: 0px;
			z-index: 999;
			width: 173px;
			height: 59px;
			background: url("../img/misc/cotizarAhoraBtn1.png");
			background-size: cover;
			background-position: center;
			cursor: pointer;
		}
		.cotizarAhoraBoton:hover,
		.cotizarAhoraBoton:focus{
			background: url("../img/misc/cotizarAhoraBtn2.png");
			background-size: cover;
			background-position: center;
		}


/*Responsive*/
/*Fabian*/
	@media screen and (max-width: 425px) {
		#locationField {
			width: 200px;
			height: 40px;
		}
		input,
		input::-webkit-input-placeholder {
			font-size: 12px;
			line-height: 3;
		}
		#search-container {
			width: 250px;
		}
	}
	@media screen and (max-width: 320px) {
		#locationField {
			width: 175px;
			height: 35px;
			}
		input,
		input::-webkit-input-placeholder {
			font-size: 10px;
			line-height: 3;
		}
		#btn {
			font-size: 13px;
			height: 35px;
			width: 40px;
		}
		#search-container {
			width: 215px;
		}
	}

/*Charly*/
	/*Min*/
	@media screen and (min-width: 768px) {
		/*Cinta Amarilla*/
		footer > p{
			padding-bottom: 10px;
		}
		/*Derecha*/
		.encabezado header nav{
			margin-left: -5%;
		}
	}
	/*Max*/
	@media screen and (max-width: 640px) {
		.encabezado header nav{
			padding-top: 0px !important;
			display: none;
			background: orange;
		}
		.encabezado header nav ul li{
			margin: 15px 0px;
		}
		.encabezado header p.hamb{
			display: block;
		}
		.encabezado>img{
			margin-top: 39px;
		}
		.extras ol li.hijoUno img{
			margin-top: 2px;
		}
		.extras ol li{
			margin: 20px 0px;
		}
		.afiliarse p{
			margin: 0px;
			text-align: center;
			border: 0px none;
		}
		.afiliarse img:nth-child(3){
			position: relative;
			left: 50%;
			transform: translate(-50%);
			margin: 0px;
			padding-top: 20px;
		}
		footer ol li:nth-child(1),
		footer ol li:nth-child(2),
		footer ol li:nth-child(3){
			margin-bottom: 50px;
		}
		footer ol li:nth-child(4){
			margin-bottom: 30px;
		}
	}
	@media screen and (max-width: 768px) {
		.encabezado header nav ul li a:hover,
		.encabezado header nav ul li a:focus{
			color: #000000;
		}
		.extras ol li h1{
			width: 70%;
		}
		.extras ol li.hijoUno img{
			margin-top: 12px;
		}
		.imgExtraServ{
			margin-bottom: 0px;
		}
		.afiliarse img:nth-child(1){
			margin-top: 60px;
		}
		.afiliarse img:nth-child(3){
			margin-top: 45px;
		}
	}