body {
	margin: 0;
	padding: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 16px;
}

:root {
	--main-light-blue: rgb(192, 231, 250);
	--main-yellow: #ffc107;
	--main-blue: #6DBFE6;
	--main-black: #040404;
	--main-white: #FAFAFA;
	--main-red: #E91D23;
	--main-gray-text: #84949b;
}

/* PRESETS */
.box-shadow-bot {
	box-shadow: 0px 15px 15px -15px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 15px 15px -15px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 15px 15px -15px rgba(0,0,0,0.3);
}

.sub-blue-small {
	border-bottom: 2px solid var(--main-blue);
	width: 70%;
}

.grid-container {
	display: grid;
	grid-template: repeat(8, auto) / repeat(10, 1fr);
	grid-template-areas: "e-t e-t e-t e-t e-t e-t e-t e-t e-t e-t"
									"m-i m-i m-i m-i m-i m-i m-i m-i m-i m-i"
									"m-t-a m-t-a m-t m-t m-t m-t m-t m-t m-t-a-2 m-t-a-2"
									"m-c-2-1 m-c-2-1 m-c-1 m-c-1 m-c-1 m-c-1 m-c-1 m-c-1 m-c-2-2 m-c-2-2"
									"m-c-2-1 m-c-2-1 m-c-2 m-c-2 m-c-2 m-c-2 m-c-2 m-c-2 m-c-2-2 m-c-2-2"
									"a-s-1 a-s-1 a-c-1 a-c-1 a-c-1 a-c-1 a-c-1 a-c-1 a-s-2 a-s-2"
									"a-s-1 a-s-1 a-c-2 a-c-2 a-c-2 a-c-2 a-c-2 a-c-2 a-s-2 a-s-2"
									"m-c-3 m-c-3 m-c-3 m-c-3 m-c-3 m-c-3 m-c-3 m-c-3 m-c-3 m-c-3";
}

/* HEADER */
.main-image {
	grid-area: m-i;
	text-align: center;
	padding: 30px 0;
	margin-top: 10vh;
	height: 90vh;

	background-image: url('../media/4.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
	.main-image img {
		width: 55%;
		max-height: 100%;
	}

.el-tiempo {
	grid-area: e-t;
	text-align: center;
	background-color: var(--main-light-blue);

	position: fixed;
	width: 100%;
	z-index: 10;
	height: 10vh;
	padding: 10px 0;
}
	.el-tiempo img {
		width: 15%;
		max-height: 100%;
	}

.media-market {
	grid-area: m-k;
	text-align: center;
}
	.media-market p {
		text-transform: uppercase;
		font-weight: 300;
		font-size: 4rem;
		margin-top: 0;
	}
		.media-market p.dist {
			color: var(--main-yellow);
			font-weight: 700;
			font-size: 5rem;
			margin-top: -90px;
		}

/* MAIN */
.main-content {
	grid-area: m-c-1;
	padding: 0 5%;
}
	.main-content-image-container {
		grid-area: m-t;
		width: 100%;
		text-align: center;
		padding: 1rem 0;
		margin-bottom: 1rem;
	}
		.main-content-image-container img {
			width: 80%;
		}
	.title-aside-1 {
		grid-area: m-t-a;
	}
	.title-aside-2 {
		grid-area: m-t-a-2;
	}
	.main-text {
		text-align: center;
	}
	.main-text:after {
		height: 2px;
		display: block;
		width: 65%;
		margin-left: 17.5%;
		background: var(--main-blue);
		content: '';
	}
		.main-text p span {
			text-transform: uppercase;
		}
	.main-map-container {
		position: relative;
		margin: 1rem 0;
		background-image: url("../media/distribution.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		overflow: hidden;
		padding-top: 48.75%;
	}
		.main-map-container h2 {
			position: absolute;
			top: 0;
			left: 0;
			color: var(--main-white);
			font-weight: 400;
			padding: .5rem 1rem;
			background: rgb(147,70,73);
			background: linear-gradient(90deg, rgba(233,29,35,1) 0%,  rgba(147,70,73,1)100%);
		}
			.main-map-container h2 span {
				text-transform: uppercase;
			}
		.main-map-container p {
			font-size: .8rem;
			color: var(--main-gray-text);
			position: absolute;
			bottom: 0;
			right: 0;
		}

.main-why {
	grid-area: m-c-2;
	padding: 0 5% 2rem;
}
	.main-why h2, .contact-top form h3 {
		color: var(--main-white);
		display: inline-block;
		font-weight: 400;
		padding: .5rem 1rem;
		background: rgb(147,70,73);
		background: linear-gradient(90deg, rgba(233,29,35,1) 0%,  rgba(147,70,73,1)100%);
	}
		.main-why h2 span {
			text-transform: uppercase;
		}
	.why-grid {
		display: grid;
		grid-template-columns: 100px repeat(4, 1fr);
		grid-template-areas: "a b c d e";
	}	
		.why-grid div {
			padding: 0 .5rem;
			position: relative;
		}
			.why-grid div:nth-child(1) {
				grid-area: a;
			}
			.why-grid div:nth-child(2) {
				grid-area: b;
			}
			.why-grid div:nth-child(3) {
				grid-area: c;
			}
			.why-grid div:nth-child(4) {
				grid-area: d;
			}
			.why-grid div:nth-child(5) {
				grid-area: e;
			}
			.why-grid div:nth-child(2), .why-grid div:nth-child(3), .why-grid div:nth-child(4) {
				border-right: 2px solid var(--main-blue);
			}
			.why-grid div p span{
				background-color: var(--main-black);
				color: var(--main-white);
				font-weight: 600;
				text-transform: uppercase;
				padding: 2px;
			}

.main-contact {
	padding: 1rem 0;
	display: relative;
	box-shadow: 0px -15px 15px -15px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px -15px 15px -15px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px -15px 15px -15px rgba(0,0,0,0.3);
	width: 90%;
	margin: 0 5%;
}

.contact-top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
	.contact-top img {
		width: 40%;
	}

	.contact-top i.fab, .contact-top i.fas {
		font-size: 2rem;
		margin-right: 10px;
	}

	.main-contact-info a {
		display: flex;
		align-items: center;
		padding: 5px 0;
	}

	.contact-top form {
		text-align: center;
		width: 30%;
		height: 300px;
		display: inline-block;
		/* float: left; */
	}
		.contact-top form input {
			width: 90%;
			height: 25px;
			margin-top: 10px;
			border: 1px solid lightgrey;
			padding: 2px 5px;
		}
		.contact-top form input[type="submit"] {
			background-color: var(--main-blue);
			width: 100px;
			padding: 5px;
			height: 40px;
			border: none;
			border-radius: 15px;
			color: var(--main-white);
			font-weight: bold;
			font-size: 1.1rem;
		}
.contact-bottom {
	width: 100%;
	display: flex;

	align-items: center;
	justify-content: space-evenly;
}
	.contact-bottom i {
		font-size: 4rem;
		color: var(--main-blue);
	}
	.contact-bottom img {
		width: 20%;
	}
	.main-contact-info {
		display: inline-block;
		width: 300px;
		font-size: 1rem;
	}
		.main-contact-info a {
			text-decoration: none;
			color: var(--main-black);
		}
.footer--icon__fb i{
	color: #3f94df;
}
.footer--icon__tel i {
	color: #89e447;
}
.footer--icon__mail i {
	color: #eb3c3c;
}

.footer--icon__fb:hover {
	color: #3f94df;
}
.footer--icon__tel:hover {
	color: #89e447;
}
.footer--icon__mail:hover {
	color: #eb3c3c;
}

.main-aside-1 {
	grid-area: m-c-2-1;
}
	.main-aside-1 img {
		width: 90%;
		margin: 0 0 0 10%;
	}
	.main-aside-1 a {
		display: block;
		width: 90%;
		margin: 0 0 0 10%;
		text-align: center;
		text-decoration: none;
		color: var(--main-blue);
		font-weight: bold;
	}

.main-aside-2 {
	grid-area: m-c-2-2;
}
	.main-aside-2 img {
		width: 90%;
	}
	.main-aside-2 p {
		width: 90%;
		text-align: center;
		margin-top: 0;
		color: var(--main-gray-text);
	}
.main-contact {
	grid-area: m-c-3;
}

/* ADS */
.ads-aside-1 {
	grid-area: a-s-1;
	background-color: var(--main-light-blue);
}
.ads-aside-2 {
	grid-area: a-s-2;
	background-color: var(--main-light-blue);
}
.ads-container-1 {
	grid-area: a-c-1;
	background-color: var(--main-light-blue);
	text-align: center;
}
	.ads-container-1 h2 {
		color: var(--main-white);
		display: inline-block;
		font-weight: 400;
		padding: .5rem 1rem;
		background: rgb(147,70,73);
		background: linear-gradient(90deg, rgba(233,29,35,1) 0%,  rgba(147,70,73,1)100%);
		text-transform: uppercase;
	}
	.ads-grid {
		display: grid;
		/* Cambio para que sean 5 columnas en los Ads */
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 10px;
	}
		.ads-item {
			width: 100%;
		}
			.ads-item-top {
				background-color: var(--main-white);
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: space-between;
				max-width: 220px;
				margin: 0 0 0 auto;
			}
				.ads-item-top div {
					background: var(--main-red);
					color: var(--main-white);
					transform: rotate(270deg);
					display: inline-block;
					width: 42px;
					height: 20px;
					margin-left: -15px;
					font-weight: 600;
				}
				.ads-item-top p {
					display: inline-block;
					font-size: .8rem;
					text-align: right;
				}
				.ads-item-doubletruck .ads-item-top p {
					font-size: .8rem;
				} 
			.ads-item-bottom {
				background: rgb(147,70,73);
				background: linear-gradient(90deg, rgba(233,29,35,1) 0%,  rgba(147,70,73,1)100%);
				width: 75%;
				max-width: 150px;
				font-size: .8rem;
				float: right;
				padding: 0 5px;
				border-radius: 0 0 0 15px;
				height: 40px;
				text-align: right;
			}
			.ads-item-bottom p {
					color: var(--main-white);
					display: inline-block;
					margin: 0 0 0 auto;
					font-size: .7rem;
				}
			.ads-item img {
				width: 100%;
			}
	.ads-grid-2{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		background-color: var(--main-light-blue);
	}
		.ads-item-doubletruck {
			width: 100%;
			margin: 1rem 0;
		}	
		.ads-item-offers {
			width: calc(100% - 4rem);
			height: auto;
			padding: 1rem 2rem;
		}
			.ads-item-doubletruck img {
				width: 100%;
			}
			.ads-item-offers img {
				display: inline-block;
			}
			.ads-item-offers p {
				display: inline-block;
				font-size: 1.2rem;
			}
				.ads-item-offers p span {
					color: #07648f;
					font-weight: 700;
				}
				.ads-item-offers p.left-text {
					max-width: 60%;
				}
			.ads-text-container {
				border-bottom: 2px solid var(--main-blue);
			}
			.ads-item-offers .img-text-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2px solid var(--main-blue);
			}
				.img-text-container img{
					width: 35%;
				}
.ads-container-2 {
	grid-area: a-c-2;
}

/* PROPOSAL */
.proposal {
	grid-area: p;
	padding: 2rem 0 6rem;
	background-color: var(--main-light-blue);
}
	.proposal-blank-space {
		width: calc(100% - 2rem);
		height: 500px;
		padding: 1rem;
		box-shadow: inset 0px 15px 15px -15px rgba(0,0,0,0.3);
		-webkit-box-shadow: inset 0px 15px 15px -15px rgba(0,0,0,0.3);
		-moz-box-shadow: inset 0px 15px 15px -15px rgba(0,0,0,0.3);
		background-color: var(--main-white);
	}
		.proposal-blank-space img {
			width: 30%;
		}
		.proposal-blank-space h2 {
			display: inline-block;
			font-size: 3rem;
			text-transform: uppercase;
			font-weight: 300;
		}