@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap');

.cuerpo-top {
    width: 100%;
    height: auto;
    padding: 5px 0px 5px 0px;
    background: #009ada;
}


.cuerpo-top-contenido {
    width: 320px;
    height: auto;
    margin: auto;
}

.cuerpo-top-logo {width:185px; height:83px; margin:auto;}
.logo {display:block; text-indent:-9000%; margin:auto;}
.logo {width:185px; height:83px;background:url("../img/flama-gas.png");}
.logo:hover {background-position:-185px;}

.cuerpo-top-nombre {
    width: 320px;
    height: auto;    
}

.cuerpo-top-txt-1 {
    font-family: 'Open Sans', sans-serif;
    font-weight:800;
    font-size: 30px;
    text-align: center;
    color: #ffffff;
}

.cuerpo-top-txt-2 {
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 20px;
    text-align: center;
    color: #ffffff;
    margin-top: -5px;
}


.cuerpo-menu {
    width: 100%;
    height: auto;
	background: #1d1d1d;
	margin-top: 1px;
}

.cuerpo-slide {
	width:1000px;
	height:300px;
	margin: auto;
	margin-top:1px;
	background: url(../img/slide-01.png) no-repeat;
}


.cuerpo {
	width: 1000px;
	height: auto;
	margin: auto;
	padding: 10px 0px 10px 0px;
	display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.inicio-box {
	width: 320px;
	height: 197px;
	margin: auto;
	margin-bottom: 10px;
}

.inicio-img {
	width: 320px;
	height: 140px;
	margin-bottom: 2px;
}

.inicio-bg {
	width: 320px;
	height: 55px;
	background: url(../img/inicio-box-bg.png) no-repeat;
}

.inicio-txt-01 {
	font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 15px;    
	color: #ffffff;
	padding: 2px 0px 0px 10px;
	
}

.inicio-txt-02 {
	font-family: 'Open Sans', sans-serif;
    font-weight:800;
    font-size: 30px;    
	color: #ffffff;
	padding: 0px 0px 0px 10px;
	margin-top: -6px;
	
}

.cuerpo-slogan {
	width: 100%;
	padding: 10px 0px 10px 0px;
	background: #1d1d1d;
}


.cuerpo-slogan-01 {
	font-family: 'Open Sans', sans-serif;
    font-weight:300;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	color: #fff;	
	
}

.cuerpo-slogan-02 {
	font-family: 'Open Sans', sans-serif;
    font-weight:400;
	font-size: 30px;  
	line-height: 35px;
	text-align: center;  
	color: #fff;	
}

.cuerpo-slogan-03 {
	font-family: 'Open Sans', sans-serif;
    font-weight:300;
	font-size: 18px;   
	line-height: 25px;
	text-align: center; 
	color: #fff;
		
}


.destacado-box {
	width: 150px;
	height: 190px;
	margin: auto;
	margin-bottom: 10px;
	background: url(../img/destacado-bg.png) no-repeat;
}


.destacado-txt-01 {
	width: 140px;
	height: 5px;	
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size: 14px;
	color: #ffffff;
	padding: 5px 0px 0px 10px;	
}

.destacado-txt-02 {
	width: 140px;
	height: 27px;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size: 14px;
	line-height: 15px;
	color: #ffffff;
	padding: 13px 0px 0px 10px;	
}

.destacado-img {
	width: 150px;
	height: 140px;
}



.cuerpo-mapa {
	width:1000px;
	height:160px;
	margin: auto;
	margin-top:1px;
	background: url(../img/mapa-puntos-de-venta.jpg) no-repeat;
}

.cuerpo-beneficios {
	width:1000px;
	height:160px;
	margin: auto;
	margin-top:1px;
	background: url(../img/beneficios-serviclub.jpg) no-repeat;
}


.base {
	width: 100%;
	height: auto;
	padding: 10px 0px 10px 0px;
	background: #1d1d1d;
}

.base-box {
	width: 320px;
	height: auto;
	margin: auto;
	margin-top: 0;
	margin-bottom: 10px;
}


.base-txt-1 {
    font-family: 'Open Sans', sans-serif;
    font-weight:800;
    font-size: 22px;
    text-align: center;
    color: #ffffff;
}

.base-txt-2 {
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    margin-top: -5px;
}


.base-titulo {
    font-family: 'Open Sans', sans-serif;
    font-weight:800;
    font-size: 18px;
    text-align: center;
	color: #ffffff;
	margin-bottom: 10px;
}

.base-txt {
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 13px;
    text-align: center;
    color: #ffffff;
    margin-top: -5px;
}

.base-icn {
	width: 320px;
	height: auto;
}


.btn-facebook {display:block; float:left; text-indent:-9000%;  margin:0px 0px 0px 123px; }
.btn-facebook {width:32px; height:32px; background:url(../img/icn-facebook.png); background-position:0px;}
.btn-facebook:hover {background-position:-32px;}


.btn-instagram {display:block; float:left; text-indent:-9000%;  margin:0px 0px 0px 10px; }
.btn-instagram {width:32px; height:32px; background:url(../img/icn-instagram.png); background-position:0px;}
.btn-instagram:hover {background-position:-32px;}



.base-linea {
	width: 320px;
	height: 1px;
	background: url(../img/inicio-box-bg.png) no-repeat;
	margin-top: 5px;
}


.contacto-box {
	width: 320px;
	height: auto;
	margin: auto;
	margin-top: 0;
	margin-bottom: 20px;
}



.contacto-titulo {
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    font-size: 22px;
    text-align: center;
	color: #666666;
	margin-bottom: 10px;
}

.contacto-txt {
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 16px;
    text-align: center;
    color: #666666;
    margin-top: -5px;
}



.producto-box {
	width: 480px;
	height: 150px;
	margin: auto;
	margin-bottom: 10px;	
}

.producto-col-a {
	width: 150px;
	height: 150px;
	float: left;
	margin-right: 2px;
}

.producto-col-b {
	width: 328px;
	height: 150px;
	float: left;
}

.producto-bg {
	width: 328px;
	height: 50px;
	background: url(../img/producto-bg.jpg) no-repeat;
	margin-bottom: 2px;
}

.producto-bg-gris {
	width: 318px;
	height: 93px;
	background: #c6c6c6;
	padding: 5px 0px 0px 10px;
	font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 16px;    
    color: #444444;
}

.producto-txt-01 {
	font-family: 'Open Sans', sans-serif;
    font-weight:300;
    font-size: 15px;    
	color: #ffffff;
	padding: 2px 0px 0px 10px;
	
}

.producto-txt-02 {
	font-family: 'Open Sans', sans-serif;
    font-weight:800;
    font-size: 27px;    
	color: #ffffff;
	padding: 0px 0px 0px 10px;
	margin-top: -6px;
	
}


.consejo-box {
	width: 320px;
	height: 70px;
	margin: auto;
	margin-bottom: 10px;
	
}

.consejo-col-a {
	width: 45px;
	height: 55px;
	margin: 0px 2px 0px 0px;
	padding: 15px 0px 0px 25px;
	float: left;
	background: url(../img/consejo-bg.jpg) no-repeat;
	font-family: 'Open Sans', sans-serif;
    font-weight:800;
    font-size: 30px;    
	color: #ffffff;
}

.consejo-col-b {
	width: 243px;
	height: 65px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 0px 5px;
	float: left;
	background: #c6c6c6;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
    font-size: 15px;    
	color: #444444;
}

/* ------------------------ INICIO - FORMULARIO CONSULTA ------------ */
.form {width:320px;}



.form > p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	text-align: left;
	color:#666666;
	font-size:13px;
	margin:0px;
	line-height: normal;
}

input, textarea {
	width:310px;
	height:30px;
	border:0;
	outline: 0;
	padding:5px;
	background:#e3e3e3;
	color:#222222;
	font-size:13px;
	border-radius:2px;	
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background:#bcbcbc;
	color:#3c3c3c;	
}

input:focus, textarea:focus {
	background:#c3ddf0;
	color:#666666;	
}

textarea {
	width:310px;
	max-width: 310px;
	height: 110px;
	max-height:110px;
	padding:5px;
	line-height: 130%;
}

form.form .ultimo{
    margin-bottom: 0;
    position: relative
}

.btn-contacto {
	width: 120px;
	height: 35px;
	padding: 5px 30px;
	margin-top: 15px;	
	margin-right: 195px;
	background-color: #666666; 
	border: none;
  	color: white;  	
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
  	cursor: pointer;
	border-radius:2px;	
}

.btn-contacto:hover{
	background:#6fab05;
	color:FFF;
	text-decoration: none;
}


.btn-sugerencia {
	width: 120px;
	height: 35px;
	padding: 5px 30px;
	margin-top: 15px;	
	margin-right: 195px;
	background-color: #666666; 
	border: none;
  	color: white;  	
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
  	cursor: pointer;
	border-radius:2px;	
}

.btn-sugerencia:hover{
	background:#6fab05;
	color:FFF;
	text-decoration: none;
}

.btn-contacto-respuesta {
	width: auto;
	height: 35px;
	padding: 5px 30px;
	margin-top: 15px;	
	margin-right: auto;
	background-color: #666666; 
	border: none;
  	color: white;  	
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
  	cursor: pointer;
	border-radius:2px;	
}

.btn-contacto-respuesta:hover{
	background:#6fab05;
	color:FFF;
	text-decoration: none;
}


.btn-servicio-tecnico {
	width: 120px;
	height: 35px;
	padding: 5px 30px;
	margin-top: 15px;	
	margin-right: 195px;
	background-color: #666666; 
	border: none;
  	color: white;  	
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
  	cursor: pointer;
	border-radius:2px;	
}

.btn-servicio-tecnico:hover{
	background:#6fab05;
	color:FFF;
	text-decoration: none;
}


/* AJAX Gif y mensajes de exito o fracaso */
.hide{
    display: none;
}

.ajaxgif{
    position: absolute;
    right: 20px;
    top: 20px;
}

.msg{
    min-width: 100px;
	right: 0px;
	height: 21px;
	padding: 9px 15px 5px 15px;
	color:#ffffff;	
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	text-align: left;
	font-size:14px;
	text-align:center;
    position: absolute;
	margin-top:15px;
	border-radius:2px;	
}

.msg_ok{
    background: #589D05;
}
.msg_error{
    background: red;
}



.msg2 {
    min-width: 100px;
	right: 0px;
	height: 21px;
	padding: 9px 15px 5px 15px;
	color:#ffffff;	
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	text-align: left;
	font-size:14px;
	text-align:center;
    position: absolute;
	margin-top:15px;
	border-radius:2px;	
}

.msg_ok2{
    background: #589D05;
}
.msg_error2{
    background: red;
}


/* ------------------------ FIN - FORMULARIO CONSULTA --------------- */
/* ------------------------------------------------------------------ */





/* ------------------------ INICIO - MENU  ------------------------- */
.menu_bar {
	display:none;
}

header {
	width:100%;

}

header nav {
	background: #1d1d1d;
	z-index:1000;
	max-width:900px;
	width:100%;
	margin:auto;
}

header nav ul {
	list-style:none;
}

header nav ul li {
	display:inline-block;
	position: relative;
}

header nav ul li:hover {
	background:#009ada;
	
}

header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding:5px 30px 5px 30px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size:22px;
}

header nav ul li a:hover {
	color:#ffffff;	
}



@media screen and (max-width: 800px) {
	body {
		padding-top:68px;		
	}

	.menu_bar {
		display:block;
		width:100%;
		position: fixed;
		top:0;				
		background: #1d1d1d;
		z-index:1000;
	}

	.menu_bar .bt-menu {
		display: block;
		padding: 17px 20px 17px 20px;
		color:#fff;
		overflow: hidden;	
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		font-size: 25px;
		text-decoration: none;
	}


	header nav {
		width: 100%;
		height: calc(100% - 80px);
		position: fixed;
		right:100%;
		margin: 0;
		overflow: scroll;
	}

	header nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}

	header nav ul li a {
		display: block;
	}

	header nav ul li:hover .children {
		display: none;
	}

	header nav ul li .children {
		width: 100%;
		position: relative;
	}

	header nav ul li .children li a {
		margin-left:20px;
	}

}
/* ------------------------ FIN - MENU ------------------------------- */
/* ------------------------------------------------------------------- */


/* ------------------------ INICIO - TEXTO  -------------------------- */

h1, h2 { 
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	color:#1d1d1d;
	text-align:center;
	
}

h1 { font-size: 36px;}
h2 { font-size: 30px; }



.h1-linea {
	width: 180px;
	height: 1px;
	background: #009de0;
	margin: auto;
}
p {
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	color:#666666;
	font-size: 18px;
	line-height: 35px;

}

.br-30 {
	width: 100%;
	height: 30px;
	margin: auto;
	clear: both;
}

/* ------------------------ FIN - TEXTO ------------------------------ */
/* ------------------------------------------------------------------- */


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


	.cuerpo-slide {
		width:320px;
		height:325px;
		margin: auto;
		margin-top:1px;
		background: url(../img/slide-01-movil.png) no-repeat;
	}


	.cuerpo-mapa {
		width:320px;
		height:160px;
		margin: auto;
		margin-top:1px;
		background: url(../img/mapa-puntos-de-venta-movil.jpg) no-repeat;
	}

	.cuerpo-beneficios {
		width:320px;
		height:452px;
		margin: auto;
		margin-top:1px;
		background: url(../img/beneficios-serviclub-movil.jpg) no-repeat;
	}

	.cuerpo { width: 320px;}





	.producto-box {
		width: 320px;
		height: 150px;
	}
	
	.producto-col-b {
		width: 168px;	
	}
	
	.producto-bg {
		width: 168px;
		
	}
	
	.producto-bg-gris {
		width: 158px;		
		font-size: 12px;
		
	}
	
	.producto-txt-01 {
		padding: 2px 0px 0px 5px;
		
	}
	

	.producto-txt-02 {
		width: 163px;
		font-weight:800;
		font-size: 14px;    
		color: #ffffff;
		padding: 0px 0px 0px 5px;
		margin-top: -3px;
		
	}

}


/* ------------------------ MAPA - INICIO  -------------------------- */	

#marker {
        background-image: url('../img/icono-mapa.png');
        background-size: cover;
        width: 64px;
        height: 64px;
        cursor: pointer;
    }
    
	.mapboxgl-popup {
    max-width: 400px;    
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	color:#666666;
	font-size: 14px;
    }


/* ------------------------ MAPA - FIN  ----------------------------- */
/* ------------------------------------------------------------------ */

/* ------------------------ WHATSAPP - INICIO  ----------------------- */
#container-floating {
	position: fixed;
	width:120px;
	height:48px;
	bottom:20px;
	right: 0px;
	z-index: 50;
}


.edit{
	position: absolute;
	top: 0;
	display: block;
	bottom: 0;
	left: 0;
	display: block;right: 0;
	padding: 0;
	opacity: 0;
	margin: auto;
	line-height: 65px;
	transform: rotateZ(-70deg);
	transition: all 0.3s;
	animation: edit-out 0.3s;
}

/* ------------------------ WHATSAPP - FIN  ------------------------- */
/* ------------------------------------------------------------------ */