@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,600);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
/* Marca Primario: 		#9c091b */
/* Marca Secundario: 	#2e3092 */
/* Txt: 				#4d4b50 #3c393e-O */
/* Border: 				#dedede */
/* BG Gris: 			#f6f6f6 */

/*------------------------[Re]seteo │ Iván Luna [Re]------------------------*/
*{margin: 0; padding: 0; outline: 0; border: 0; marker-offset: 0;}
*, *:after, *:before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure{
	padding: 0;
	border: 0;
	margin: 0; 
	outline: 0;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display: block;}
ul, ol{list-style: none;}
table{border-collapse: separate; border-spacing: 0;}

/*------------------------Rë-Generación------------------------*/
html{
	height: 100%;
	font-size: 90%;
}
body{
	height: 100%;
	font-family: 'Open sans', sans-serif;
	font-size: 12pt;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: #4d4b50;
}
h1{
	font-size: 1.5rem;
	font-weight: 400;
}
a{
	text-decoration: none;
	-webkit-transition: color .5s ease, background .5s ease;
	-moz-transition: color .5s ease, background .5s ease;
	-ms-transition: color .5s ease, background .5s ease;
	-o-transition: color .5s ease, background .5s ease;
	transition: color .5s ease, background .5s ease;
}
.num-font{
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	white-space: nowrap;
}
.llamar{
	cursor: pointer;
}
[class^="icon-"]:before,
[class*=" icon-"]:before{
	position: relative;
	top: .2em;
	margin-right: 10px;
	font-size: 100%;
}
@media only screen and (min-width: 480px) {
	html{
		font-size: 100%;
	}
}

/*------------------------General [Re]sponsive | Iván Luna [Re]------------------------*/
header, nav, main, footer{
	width: 100%;
	min-width: 240px;
	display: flex;
	overflow: hidden;
}
.re-central{
	width: 100%;
	position: relative;
	margin: 0 auto;
	/* background-image: url("../images/gasolinera.jpg"); */
}

/*------------------------Contenedores------------------------*/
html,
body,
main,
main > div.re-central{
	height: 100%;
	text-align: left;
	/* display: flex; */
	background-color: #fff;
	background-image: url("../images/fondo.jpeg");
	background-position: center;
}

main > div.re-central{
	position: relative;
	display: table;
	table-layout: fixed;
	text-align: right;
	-webkit-background-size: cover;
	/* background: linear-gradient(to right,#2881e3 0%,#c25dc7 100%); */
	background: -moz-linear-gradient(rgba(89, 97, 128, 0.261));
	background-size: cover;
	/* z-index: -2; */
}
main > div.re-central article{
	width: 50%;
	padding: 15px;
	margin:15vh 35vw;
	position: relative;
	z-index: 10;
	max-width: 1200px;
	/* background-color: rgba(89, 97, 128, 0.261); */
	/* transform: translateY(-50%); */
}

/*------------------------Marca------------------------*/
main > div.re-central article figure img{
	max-width: 350px;
	min-width: 300px;
	display: block;
	margin: 0 50px 0 auto;
	margin-bottom: 40px;
}

/*------------------------Datos------------------------*/
main > div.re-central article H1{
	text-shadow: 1px 3px 5px black;
}
main > div.re-central article address{
	color: white !important;
	font-weight: 500;
	text-shadow: 1px 3px 5px black;
}
main > div.re-central article address p{
	margin-bottom: 10px;
}
main > div.re-central article address a{
	font-size: 1.1rem;
	color: white;
}
main > div.re-central article address a:hover{
	
	color: #EE1147;
}
main > div.re-central article address a.correo{
	/* max-width: 18em; */
	display: block;
	/* margin: 0 auto; */
	font-weight: 500;
	/* color: black; */
	overflow: hidden;
	
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tramado{
	position: absolute;
	top: 0;
	right: 0;
	/* z-index: 1; */
	/* width: 50%; */
	
}
.ttl{
	color: white;
	font-weight: bold;
	margin-bottom: 15px;
}
.prod-img{
	width: 60%;
	min-width: 500px;
	max-width: 820px;
	position: absolute;
	right: -20px;
	bottom: -20px;
	/* z-index: 10; */
}
i{
	margin-right: 10px;
}
@media only screen and (max-width: 900px) {
	.prod-img{
		min-width: 90%;
	}
	article{
		width: 70% !important;
		margin: 15vh 8vh !important;
		/* padding: 50px !important; */
		z-index: 100;
	}
	.logo{
		width: 100%;
		min-width: 0 !important;
		max-width: 100%;
	}
}
@media only screen and (min-device-width: 768px) {
	article{
		margin: 10vh 10vw ;
	}

}
@media only screen and (max-device-width: 767px) {
	/* article{
		margin-top: 5vh !important;
	} */
	.tramado{
		width: 90%;
	}
}
@media only screen and (max-device-width: 414px){
	article{
		margin-top: 0;
	}
	/* .prod-img{
		min-width: 70%;
	} */
}
@media only screen and (max-device-width: 660px) {
	main > div.re-central article figure img{
		max-width: 150px;
		min-width: 120px;	
		display: block;
		/* margin: 0 50px 0 auto; */
		margin-bottom: 20px;
	}
	/* article{
		margin-top: 20px !important;
		padding: 10px 30px !important;
	} */
	h1{
		font-size: 1.2rem;
	}
}
@media only screen and (max-device-width: 823px) {
	@media (orientation: landscape){
		main > div.re-central article figure img{
			max-width: 220px;
			min-width: 200px;	
			display: block;
			/* margin: 0 50px 0 auto; */
			margin-bottom: 40px;
		}
		/* article{
			width: 80% !important;
			margin: 20px 40px !important;
		} */
		.prod-img{
			width: 60%;
			min-width: 200px;
		}
		h1{
			font-size: 1.1rem;
		}
	}
}
@media only screen and (max-device-width: 640px) {
	@media (orientation: landscape){
		main > div.re-central article figure img{
			margin-bottom: 20px;
		}
		main > div.re-central article{
			padding: 0;
			width: 60% !important;
		}
	}
}

/*--------------------------- Whatsapp--------------------- */
.visible-mobil{
	display: none;
}
@media only screen and (max-device-width:1024px){
	.visible-mobil{
		display: block;
	}
	.visible-desktop{
		display: none;
	}
}