/*!
Styles Name: Aston Martin - México
Author: Enigma
Author URI: http://enigma.mx
Description: Estilos para el sitio de Aston Martin México.
Version: 1.0.0
*/

@charset "utf-8";

/* estilos home */
section.search {
	background-color: var(--opal-green);
	color: var(--white);
}

section.quick-links {
	ul {
		* {
			color: var(--white);
		}
		
		li {
			background-color: var(--opal-green);
			background-size: cover;
			position: relative;
			overflow: hidden;
			
			h3 {
				width: 100%;
				font-size: 24px;
				line-height: 33px;
			}
			
			a {
				position: relative;
				z-index: 2;
			}
			
			a p {
				border-bottom: solid 1px var(--alt-olive);
				
				display: inline-block;
			}
			
			img {
				border-bottom: solid 1px var(--alt-olive);
				width: 24px;
			}
			
			a:hover p {
				border-bottom-color: var(--mid-olive);
			}
			
			/*&:before, */
			&:after {
				content: '';
				width: 100%;
				height: 100%;
				
				display: block;
				
				position: absolute;
				top: 0;
				left: 0;
			}
			/*
			&:before {
				z-index: 0;
			}*/
			
			&:after {
				background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 69.06%);
				
				z-index: 1;
			}			
		}
		/*
		li:nth-child(1):before {
			background: url('img/static-delete/new-cars.png') center / cover no-repeat;
		}
		
		li:nth-child(2):before {
			background: url('img/static-delete/pre-owned.png') center / cover no-repeat;
		}
		
		li:nth-child(3):before {
			background: url('img/static-delete/book-a-service.png') center / cover no-repeat;
		}
		
		li:nth-child(4):before {
			background: url('img/static-delete/value.png') center / cover no-repeat;
		}*/
	}
}

section.why-us {
	background-color: var(--soft-bkg);
	
	ul {
		li {
			box-sizing: border-box;
			
			p {
				margin: 0 auto;
			}
		}
		
		li:first-child p {
			margin: 0;
		}
		
		li:last-child {
			border-right: none;
		}
	}
}

section.model-range {
	background-position: center top;
	background-size: cover;	
	
	h1 {}
	
	.swiper {
		.swiper-wrapper {
			.swiper-slide {
				.model {
					aspect-ratio: 16 / 7;
					display: grid;
					place-items: center;

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				
				.infobox {
					margin: 0 auto;
					text-align: center;
				}
			}
		}
	}
}

/* estilos models */
section.hero {
	position: relative;
	
	.infobox {
		position: absolute;
		
		* {
			color: var(--white);
		}
	}
}

.enquire.overlay-box {
	&.showBox {
		display: block;
		
		.closeEnquire {
			background-size: contain;
			cursor: pointer;
		}
	}
}

.models {
	section.intro {
		background-color: var(--white);
		overflow: hidden;
		position: relative;
		
		.superCopy {
			opacity: .03;
			display: block;
			
			position: absolute;
		}
	}
	
	section#models {
		background-color: var(--soft-bkg);
		position: relative;
		
		.models-nav {
			border-bottom: solid 1px var(--neutral-10);
			background-color: var(--soft-bkg);
			
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			
			z-index: 2;
			
			.swiper-wrapper {
				.swiper-slide {
					border-bottom: solid 2px transparent;
					width: auto;
					color: var(--neutral-50);
					
					cursor: pointer;

					button {
						appearance: none;
						background: transparent;
						border: 0;
						color: inherit;
						cursor: pointer;
						font: inherit;
						padding: 0;
					}
					
					&.swiper-slide-active {
						border-bottom-color: var(--opal-green);
						color: var(--opal-green);
					}
				}
			}
			
			&.fixed {
				width: 100%;
				
				position: fixed;
			}
		}
		
		.model.family {
			overflow: hidden;
			
			position: relative;
			
			.about {
				h2 {
					font-family: 'AM-Flare';
					font-weight: 400;
					
					/* Mobile */
					@media screen and (max-width : 1023px) {
						font-size: 30px;
						line-height: 40px;
					}
					/* Desktop */
					@media screen and (min-width : 1024px) {
						font-size: 48px;
						line-height: 60px;
					}
				}
				
				p {
					font-size: 16px;
					line-height: 24px;
				}
			}
			
			.family-list {
				overflow: hidden;
				
				.swiper {
					overflow: visible;
					
					.swiper-wrapper {
						.swiper-slide {
							background-color: var(--white);
							box-shadow: 0px 1px 3px 0px #1212121A;
							box-shadow: 0px -0.5px 0px 0px #12121212 inset;
							box-shadow: 0px 0px 0px 1px #1212120D;
							
							img {
								margin: 0 auto;
							}
							
							a.cta-text {
								background-size: 24px;
								display: inline-flex;
							}
						}
					}
					
					.swiper-pagination {
						margin: auto;
						right: 0;
						
						.swiper-pagination-bullet {
							background-color: var(--black);
							opacity: .15;
						}
						
						.swiper-pagination-bullet-active {
							background-color: var(--neutral-100);
							opacity: 1;
						}
					}
					
					.button-prev,
					.button-next {
					}
				}
			}
		}
	}
}

/* estilos models */
section.hero.single {
	.video-cont {
		width: auto;
		max-width: none;
		position: relative;
		
		overflow: hidden;
		
		video {
			position: absolute;
			width: calc(100% + 2px);
			height: 100%;
			object-fit: cover;
			object-position: 50% 50%;
		}
	}	
}

section.specs {
	>div:first-child {
		position: relative;
		
		&:before {
			background-repeat: repeat;
			background-position: center center;
			background-size: cover;
			content: "";
			width: 100%;
			height: 100%;
			
			position: absolute;
			top: 0;
			left: 0;
			
			z-index: 0;
			
			display: block;
			
			backdrop-filter: blur(94px);
		}
		
		ul, a, button {
			position: relative;
			z-index: 1;
		}
		
		* {
			color: var(--cream);
		}
		
		span {
			color: var(--neutral-40);
		}
	}
	
	&.showSpecs,
	&.showBox {
		.specifications.overlay-box {
			display: block;
			
			#closeSpecs {
				background-size: contain;
				cursor: pointer;
			}
		}
	}
}

section.engineering-performance,
section.interior {
	background-color: var(--soft-bkg);
	
	.tile {
		&.tile-1,
		&.tile-2 {
			div:first-child {
				/* Mobile */
				@media screen and (max-width : 1023px) {
					font-size: 26px;
					line-height: 36px;
				}
				/* Desktop */
				@media screen and (min-width : 1024px) {
					font-size: 32px;
					line-height: 40px;
				}
			}
		}
	}
}

section.advert {
	background-color: var(--opal-green);
	
	p {
		color: var(--white-50);
		font-weight: 300;
		
		/* Mobile */
		@media screen and (max-width : 1023px) {
			font-size: 28px;
			line-height: 36px;
		}
		/* Desktop */
		@media screen and (min-width : 1024px) {
			font-size: 44px;
			line-height: 58px;
		}
	}
	
	strong {
		font-weight: 400;
	}

	strong, ul >li {
		color: var(--white);
	}
	
	ul ul li {
		color: var(--white-70);
	}
	
	.d-10 >ul {
		position: relative;
		
		&:before {
			background-color: var(--white);
			content: "";
			height: 2px;
			margin: auto;
			
			display: block;
			
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
		}
	}
	
	&.alt {
		background-color: var(--neutral-90);
	}
}

/* estilos override grand-chelem */
body {
	.vehicle-details {
		section.title .container {
			h1 {
				span.brand {
					text-transform: uppercase;
					display: block;
				}
				
				span.title {
					font-family: 'AM-Flare';
				}
				
				/* Mobile */
				@media screen and (max-width : 1023px) {
					span.brand, span.year {
						font-size: 16px;
						line-height: 24px;
					}
					
					span.title {
						font-size: 36px;
						line-height: 45px;
					}
				}
				/* Desktop */
				@media screen and (min-width : 1024px) {
					span.brand, span.year {
						font-size: 18px;
						line-height: 24px;
					}
					
					span.title {
						font-size: 54px;
						line-height: 70px;
					}
				}
			}
		}
		
		section.tech-specs .container {
			.title {
				border-bottom: 1px solid var(--neutral-10);
				position: relative;
				
				h2 {
					/* Mobile */
					@media screen and (max-width : 1023px) {
						font-size: 26px;
						line-height: 39px;
					}
					/* Desktop */
					@media screen and (min-width : 1024px) {
						font-size: 30px;
						line-height: 45px;
					}
				}
					
				&:after {
					position: absolute;
					content: "";
					display: block;
					background-color: var(--opal-green);
					height: 2px;
					left: 0;
					right: 0;
					width: 0%;
					bottom: 0;
					z-index: 1;
					transition: width 1s ease-in-out;
				}
				
				&.visible {
					&:after {
						width: 100%;
					}
				}
			}
			
			.specs {
				dl {
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
				}
				
				dd {
					font-family: 'AM-Flare';
					font-weight: 400;
					color: var(--opal-green);
					
					/* Mobile */
					@media screen and (max-width : 1023px) {
						font-size: 26px;
						line-height: 39px;
					}
					/* Desktop */
					@media screen and (min-width : 1024px) {
						font-size: 30px;
						line-height: 45px;
					}
				}
				
				dt {
					font-family: 'AM-Sans';
					font-size: 16px;
					line-height: 24px;
					color: var(--neutral-40);
				}
			}
		}
		
		section.car-specs .container {
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			
			.description {
				position: relative;
				z-index: 4;
				
				&:before {
					content: "";
					display: block;
					position: absolute;
					background-color: var(--neutral-10);
					top: 0;
					right: 0;
					left: -100%;
					z-index: -10;
					bottom: 0;
				}
				
				.text p:last-of-type {
					margin-bottom: 0;
				}
			}
			
			.extra-specs {
				dt, dd {
					font-family: 'AM-Sans';
					font-weight: 400;
				}
				
				dt {
					color: var(--neutral-60);
					
					font-size: 14px;
					line-height: 30px;
				}
				
				dd {
					/* Mobile */
					@media screen and (max-width : 1023px) {
						font-size: 16px;
						line-height: 24px;
					}
					/* Desktop */
					@media screen and (min-width : 1024px) {
						font-size: 18px;
						line-height: 30px;
					}
				}
			}
		}
	}
}

/* Mobile */
@media screen and (max-width : 1023px) {
	/* estilos home */
	section.search {
		height: 180px;
	}
	
	section.quick-links {
		padding: var(--basem) 0 0 0;
		
		ul {
			max-width: 600px;
			margin: 0 auto;
			
			li {
				border-radius: calc( var(--basem) * 0.375 );
				margin-bottom: var(--basem);
				
				a {
					padding: calc( var(--basem) * 1.5625) calc( var(--basem) * 1.5) calc( var(--basem) * 1.625) calc( var(--basem) * 1.5);
				}
				
				h3 {
					margin-bottom: calc( var(--basem) * 0.75 );
				}
				
				img {
					padding-left: calc( var(--basem) * 0.25 );
				}
			}
		}
	}
	
	section.why-us {
		padding: calc( var(--basem) * 2.5 ) 0 calc( var(--basem) * 2 ) 0;
		
		h2, ul {
			max-width: 600px;
		}
		
		ul {
			margin-top: var(--basem);
			
			li {
				border-bottom: solid 1px var(--neutral-grey);
				width: 100%;
				padding: calc( var(--basem) * 1.25 ) 0;
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
	
	section.model-range {
		background-position: center top;
		background-size: cover;
		padding: calc( var(--basem) * 3.375 ) 0 calc( var(--basem) * 3 );
		
		.swiper {
			max-width: 600px;
			margin-top: calc( var(--basem) * 3.75 );
			
			.swiper-wrapper {
				.swiper-slide {
					.model {
						/*margin-bottom: calc( var(--basem) * 1.5);*/
					}
					
					.infobox {
						max-width: 400px;
						
						h2 {
							margin-bottom: calc( var(--basem) * 0.75 );
						}
						
						p {
							margin-bottom: calc( var(--basem) * 1.5 );
						}
						
						a {
							margin: 0 calc( var(--basem) * 0.5 );
						}
					}
				}
			}
			
			.button-prev,
			.button-next {
				bottom: 20px;
			}
			
			.button-prev {
				left: var(--sidem);
			}
			
			.button-next {
				right: var(--sidem);
			}
		}
	}
	
	/* estilos models */
	section.hero {
		.img-cont {
			height: 604px;
		}
		
		.infobox {
			bottom: calc( var(--basem) * 3.75 );
			max-width: 560px;
			left: var(--sidem);
			
			h4 {
				margin-bottom: calc( var(--basem) * .5 );
			}
			
			p {
				margin-top: calc( var(--basem) * .5 );
			}
			
			a {
				width: calc(100% - 64px);
				margin-top: calc( var(--basem) * 1.5 );
			}
		}
	}
	
	.enquire.overlay-box {
		&.showBox {
			.scroll.box.flex {
				display: block;
			}
		}
	}
	
	.models {
		section.intro {
			padding: calc( var(--basem) * 3) 0;
			
			>div {
				max-width: 560px;
				
				h3 {
					margin-bottom: calc( var(--basem) * 2);
				}
			}
			
			.superCopy {
				display: none;
			}
		}
		
		section#models {
			padding-bottom: calc( var(--basem) * 3 );
			
			.models-nav {
				margin-bottom: var(--soft-bkg);
				padding: 0 var(--sidem);
				
				.swiper-wrapper {
					.swiper-slide {
						padding: calc( var(--basem) * 1.375 ) 0;
						margin-right: calc( var(--basem) * 1.5 );
						font-size: 18px;
						line-height: 20px;
					}
				}
				
				&.fixed {
					top: 92px;
				}
			}
			
			.model.family {
				padding: calc( var(--basem) * 8.6 ) 0 0;
				
				.about {
					padding-bottom: calc( var(--basem) * 1.5 );
					
					h2 {
						margin-left: 0;
					}
					
					img {
						max-width: 620px;
					}
					
					p {
						/*margin-top: var(--basem); */
					}
				}
				
				.family-list {
					.swiper {
						max-width: 475px;
						padding-bottom: calc( var(--basem) * 3.5);
						
						.swiper-wrapper {
							.swiper-slide {
								padding: var(--basem) 0 calc( var(--basem) * 2 );
								
								h3, img, div {
									margin: 0 var(--basem);
								}
								
								img {
									width: calc( 100% - 32px );
									margin-bottom: calc( var(--basem) * 1.5 )
								}
								
								a:not(.cta-text) {
									width: 100%;
									padding-left: 0;
									padding-right: 0;
									margin-bottom: var(--basem);
								}
								
								a.cta-text {
									background-position: right center;
									border-bottom: none;
									max-width: 82px;
									margin: 0 auto;
									display: block;
								}
							}
						}
						
						.swiper-pagination {
							bottom: calc( var(--basem) * 0.75 );
							max-width: calc(100% - 60px);
						}
					}
				}
			}
		}
	}
	
	/* estilos models */
	section.hero.single {
		.img-cont, .video-cont {
			height: calc(100vh - 160px);
		}
		
		.infobox {
			bottom: calc( var(--basem) * 1.5 );
		}
	}
	
	section.hero.single + .blocks .block {
		>div {
			.text {
				margin-bottom: calc( var(--basem) * 2 );
			}
		}
	}
	
	section.specs {
		>div:first-child {
			background-size: contain;
			padding-top: calc( var(--basem) * 1 );
			padding-bottom: calc( var(--basem) * 2 );
			
			>ul, >div {
				max-width: 600px;
				margin: 0 auto;
			}
			
			ul {
				margin-bottom: var(--basem);
				
				li {
					border-bottom: solid 1px rgba(255,255,255,0.2);
					padding: calc( var(--basem) * 1.5 ) 0;
					
					h6 {
						margin-bottom: var(--basem);
					}
					
					h2 {
						font-size: 60px;
						line-height: 60px;
					}
					
					&:last-child {
						border-bottom: 0;
					}
				}
			}
			
			.cta {
				padding-right: 0;
				padding-left: 0;
			}
		}
		
		.specifications.overlay-box {
			.scroll.box {
				div.specs {
					.spec {
						border-top: solid 1px var(--neutral-10);
						padding: calc( var(--basem) * 1.5 ) var(--sidem);	
						
						.title {
							margin-bottom: calc( var(--basem) * 0.75 );
						}
						
						.text {}
					}
				}
			}
		}
	}
	
	section.engineering-performance,
	section.interior {
		background-color: var(--soft-bkg);
		padding: calc( var(--basem) * 1.5 ) 0 0;
		
		h1, >div {
			max-width: 600px;
		}
		
		h1 {
			margin-bottom: var(--basem);
		}
		
		.tile {
			border: 1px solid var(--neutral-10);
			background-color: var(--white);
			padding-bottom: var(--basem);
			margin-bottom: var(--basem);
			
			div:first-child {
				padding: var(--basem);
				
				p.subtitle {
					margin-bottom: calc( var(--basem) * 0.2 );
				}
				
				h2, h3 {
					margin-bottom: calc( var(--basem) * 0.75 );
				}
			}
			
			.img-cont {
				height: 175px;
				margin: 0 var(--basem);
			}
		}
	}
	
	section.advert {
		padding: calc( var(--basem) * 3 ) 0;
		
		>div {
			>ul {
				padding-left: calc( var(--basem) * 4);
				margin-top: calc( var(--basem) * 2);
				
				>li {
					font-size: 20px;
					line-height: 24px;
				}
				
				&:before {
					width: calc( var(--basem) * 3);
				}
			}
		}
	}
	
	/* estilos override grand-chelem */
	body {
		.inventory .container .headling h2, body .models .container .headling h2 {
			margin-left: 0;
		}
		
		.vehicle-details {
			section.title {
				padding: calc( var(--basem) * 1.25) 0;
			}
			
			section.tech-specs .container {
				padding-top: calc( var(--basem) * 1.5);
				
				.title {
					padding-bottom: calc( var(--basem) * 1.25);
					margin-bottom: calc( var(--basem) * 1);
				}
				
				.specs {
					margin-bottom: calc( var(--basem) * 1.5);
					
					dl {
						flex-wrap: wrap;
						
						.spec {
							width: 50%;
							margin-bottom: calc( var(--basem) * .75);
						}
						
						.motor {
							width: 100%;
						}
					}
					
					dd {}
				}
			}
			
			section.car-specs .container {
				flex-direction: column;
				
				.description {
					padding-top: calc( var(--basem) * 3.25);
					padding-bottom: calc( var(--basem) * 4.5);
					position: relative;
					
					&:before {
						bottom: calc( var(--basem) * 1.625);
					}
					
					.text {
						padding-right: calc( var(--basem) * 1.625);
					}
					
					.info-cta {
					    position: absolute;
					    bottom: 0;
					    right: 0;
					}
				}
				
				.extra-specs {
					margin-bottom: calc( var(--basem) * 1.625);
					
					dl {
						margin-top: calc( var(--basem) * 1.5);
						display: -webkit-box;
						display: -ms-flexbox;
						display: -webkit-flex;
						display: flex;
						flex-wrap: wrap;
						
						.spec {
							width: 50%;
							margin-bottom: calc( var(--basem) * .8);
						}
					}
				}
			}
		}
		
		footer.grand-chelem {
			margin-top: 0;
		}
	}
}

/* Desktop */
@media screen and (min-width : 1024px) {
	/* estilos home */
	section.search {
		height: 216px;
	}
	
	section.quick-links {
		padding: calc( var(--base) * 1.875) 0;
		
		ul {
			li {
				border-radius: calc( var(--base) * 0.1875 );
				min-height: 130px;
				
				a {
					margin: var(--base) 6.7307%;
				}
	
				h3 {
					margin-bottom: calc( var(--base) * 0.375 );
				}
				
				img {
					padding-left: calc( var(--base) * 0.25 );
				}			
			}
		}
	}
	
	section.why-us {
		padding: calc( var(--base) * 2 ) 0;
		
		ul {
			width: 100%;
			margin-top: var(--base);
			
			li {
				border-right: solid 1px var(--neutral-grey);
				font-size: 24px;
				line-height: 32px;
				
				p {
					max-width: 77.6018%;
				}
			}
		}
	}
	
	section.model-range {
		padding: calc( var(--base) * 3 ) 0 calc( var(--base) * 1.875 );
		
		.swiper {
			min-width: 600px;
			margin-top: calc( var(--base) * .8125);
			
			.swiper-wrapper {
				.swiper-slide {
					.model {
						max-width: 900px;
						/*margin-bottom: calc( var(--base) * 1.875);*/
						margin-right: auto;
						margin-left: auto;
					}
					
					.infobox {
						width: 400px;
						
						p {
							margin-bottom: var(--base);
						}
						
						a {
							margin: 0 calc( var(--base) * .25 );
						}
					}
				}
			}
			
			.button-prev,
			.button-next {
				bottom: 130px;
			}
			
			.button-prev {
				left: 6%;
			}
			
			.button-next {
				right: 6%;
			}
		}
	}
	
	/* estilos models */
	section.hero {
		.img-cont {
			height: 620px;
		}
		
		.infobox {
			min-width: 800px;
			bottom: calc( var(--base) * 1.875 );
			left: 3.95833%;
			
			h4 {
				font-size: 18px;
				line-height: 24px;
			}
			
			p {
				max-width: 600px;
				margin-top: calc( var(--base) * 0.5 );
			}
			
			a {
				margin-top: var(--base);
			}
		}
	}
	
	.models {
		section.intro {
			padding: calc( var(--base) * 3.25) 0;
			
			>div {
				margin-left: calc( var(--col) + var(--gut) + var(--side) );
				
				h3 {
					margin-bottom: var(--base);
				}
			}
			
			.superCopy {
				width: 6000px;
				height: 300px;
				
				margin: auto;
				font-size: 300px;
				line-height: 300px;
				
				position: absolute;
				top: 0;
				bottom: 0;
				left: 50%;
				
				opacity: .03;
				display: block;
			}
		}
		
		section#models {
			padding-top: 67px;
			margin-bottom: calc( var(--base) * 2 );
			
			.models-nav {
				padding: 0 var(--side);
				
				.swiper-wrapper {
					.swiper-slide {
						padding: calc( var(--base) * .625 ) 0;
						margin-right: calc( var(--base) * 1.5 );
						font-size: 18px;
						line-height: 24px;
					}
				}
			}
			
			.model.family {
				padding: calc( var(--base) * 3.25 ) 0 calc( var(--base) * 1.5 );
				
				.about {
					position: absolute;
					left: var(--side);
					
					h2 {
						margin-left: 0;
					}
					
					img {
						width: 82.7146%;
						max-width: 620px;
						margin-left: 17.2854%;
						
						position: absolute;
						top: calc( var(--base) * 3.25 );
					}
					
					p {
						width: 60%;
						max-width: 267px;
					}
				}
				
				.family-list {
					width: calc( var(--col-8) + var(--side) );
					margin-left: calc( var(--col-4) + var(--gut) + var(--side) );
					
					.swiper {
						min-width: 650px;
						padding-bottom: calc( var(--base) * 2.5);
						margin-right: 6.6022%;
						
						.swiper-wrapper {
							.swiper-slide {
								padding: var(--base) 0;
								
								h3 {
									margin: 0 7.0796460177%;
									margin-bottom: calc( var(--base) * .5 );
								}
								
								img {
									width: 85.8407%;
									margin-bottom: calc( var(--base) * .75 );
								}
								
								div {
									margin: 0 0 0 calc(7.0796% - 8px);
								}
								
								a {
									margin: 0 calc( var(--base) * .25 );
								}
								
								a.cta-text {
									background-position: bottom 2px right;
									padding-top: calc( var(--base) * .5 );
									margin-bottom: calc( var(--base) * .5 );
								}
							}
						}
						
						.swiper-pagination {
							bottom: calc( var(--base) * 0.875 );
							max-width: calc(100% - 128px);
						}
					}
				}
			}
		}
	}
	
	/* estilos models */
	section.hero.single {
		.img-cont, .video-cont {
			height: calc(100vh - 140px);
		}
	}
	
	section.hero.single + .blocks .block {
		padding-top: calc( var(--base) * 3.25 );
	}
	
	section.specs {
		>div:first-child {
			padding-top: calc( var(--base) * 6.375 );
			padding-bottom: calc( var(--base) * 5.125 );
			
			ul {
				li {
					border-left: solid 1px var(--neutral-60);
					padding-left: calc( var(--base) * .75 );
					
					&:first-child {
						border-left-color: transparent;
					}
					
					&:last-child {
						max-width: 150px;
					}
				}
			}
			
			.cta {
				margin: 0 auto;
			}
			
			>div {
				margin-top: calc( var(--base) * 3 );
			}
		}
		
		.specifications.overlay-box {
			.close {
				width: 60px;
				height: 60px;
				top: 54px;
				left: 54px;
			}
			
			.scroll.box {
				div.specs {
					width: 100%;
					margin-top: calc( var(--base) * 5.75 );
									
					.spec {
						border-top: solid 1px var(--neutral-10);
						padding: calc( var(--base) * 1.25 ) 3.7671%;
						
						display: -webkit-box; 
						display: -ms-flexbox;
						display: -webkit-flex;
						display: flex;
						
						.title {
							width: 30%;
							padding-right: var(--base);
						}
						
						.text {
							width: 70%;
							padding-top: 11px;
						}
					}
				}
			}
		}
	}

	section.engineering-performance,
	section.interior {
		padding-top: calc( var(--base) * 2.75 );
		padding-bottom: calc( var(--base) * 3.25 );
		
		overflow: auto;
		
		h1 {
			margin-bottom: calc( var(--base) * 1.75);
		}
		
		.tile {
			background-color: var(--white);
			float: left;
			
			position: relative;
			
			display: -webkit-box; 
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			
			div:first-child {
				width: 35.8797%;
				padding: var(--base) 0;
				margin-left: 4.6296%;
				margin-right: 4.6296%;
				
				p.sm {
					margin-top: calc( var(--base) * 0.5 );
				}
			}
			
			.img-cont {
				width: 54.8611%;
				
				position: absolute;
				bottom: 0;
			}
		}
		
		.tile.tile-0 {
			padding-bottom: 486px;
			
			justify-content: space-between;
			
			div:first-child {
				width: 90.7407%;
				max-width: 600px;
				margin-left: 4.6296%;
				
				p.sm {
					margin-top: calc( var(--base) * 0.5 );
				}
			}
			
			.img-cont {
				width: 100%;
				height: 486px;
				
				left: 0;
			}
		}
		
		.tile {
			&.tile-1,
			&.tile-2 {
				min-height: 380px;
				margin: 0 var(--gut);
			}
			
			&.tile-2 {
				margin-top: var(--base);	
			}
			
			.img-cont {
				height: 100%;
				
				right: 0;
			}
		}
		
		>div {
			display: -webkit-box; 
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			
			justify-content: space-between;
			
			.tile {
				min-height: 380px;
				
				&:first-child {
					margin-bottom: var(--base);	
				}
				
				.img-cont {
					height: 100%;
					
					right: 0;
				}
			}
			
			&.sp-left {
				margin-right: var(--gut);
			}
		}
		
		.spacer {
			float: left;
		}
	}
	
	section.engineering-performance {
		.tile.tile-0 {
			margin: 0 0 0 var(--side);
		}
	}
	
	section.interior {
		.tile.tile-0 {
			margin: 0 var(--side) 0 0;
			float: right;
		}
		
		.tile.tile-1,
		.tile.tile-2 {
			margin-left: var(--side);
		}
	}
	
	section.advert {
		padding: calc( var(--base) * 4.25 ) 0 calc( var(--base) * 3.0625 );
		
		>div {
			margin: 0 auto;
			
			>ul {
				padding-left: calc( var(--base) * 2);
				margin-top: calc( var(--base) * 2.3125);
				
				&:before {
					width: calc( var(--base) * 1.5);
				}
			}
		}
	}
	
	/* estilos override grand-chelem */
	body {
		.vehicle-details {
			padding-bottom: calc( var(--base) * 1.5 );
			
			section.title .container {
				margin: calc( var(--base) * 1.25) 0 var(--base);
			}
			
			section.tech-specs .container {
				padding-top: calc( var(--base) * 1.5);
				
				.title {
					margin-left: 4.5%;
				    width: 77.9%;
				    padding-bottom: calc( var(--base) * 1.5);
				    border-bottom: 1px solid var(--neutral-10);
				    margin-bottom: calc( var(--base) * 1.25);
				}
				
				.specs {
					margin-left: 4.5%;
					margin-bottom: calc( var(--base) * 2.75);
					
					dl {
						justify-content: space-between;
					}
				}
			}
			
			section.car-specs .container {
				.description {
					width: 65.9%;
					padding-top: calc( var(--base) * 1.9375 );
					padding-bottom: calc( var(--base) * 3.75 );
					margin-right: 5%;
					position: relative;

					&:before {
						bottom: var(--base);
					}
					
					.text {
						width: 67.98%;
						padding-right: 25.34%;
						padding-left: 6.67%;
					}
					
					.info-cta {
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				
				.extra-specs {
					width: 20%;
					margin-right: 9.1%;
					margin-bottom: calc( var(--base) * 1.875 );
					
					dl {
						margin-top: var(--base);
					}
				}
			}
		}
		
		footer.grand-chelem {
			margin-top: 0;
		}
	}
}

/* Mid */
@media screen and (min-width : 1024px) and (max-width : 1200px) {
	section.engineering-performance,
	section.interior {
		.tile,
		.tile.tile-0,
		.tile.tile-1,
		.tile.tile-2 {
			min-width: 600px;
			margin-right: calc(50% - 300px);
			margin-left: calc(50% - 300px);
		}
		
		.tile.tile-1 {
			margin-top: var(--base);	
		}
	}
}