@charset "utf-8";
#slide1 {
	display: grid;
	grid-template-columns: repeat(11,1fr);
	padding: 5em 0;
}
.contact-info {
	grid-column: 2/6;
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}
.contact-form {
	grid-column: 6/11
}
#pagecontact {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 1em;
}
#projectTitle {
	display: grid;
	grid-template-columns: repeat(11,1fr);
	padding: 8em 0 5em 0;
}
.maintitle {
	grid-column: 2/10;
}
.projectDesc {
	grid-column: 2/7;
}
.serviceDesc {
	grid-column: 8/11;
}

#slide2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#slide2 .hgroup2 {
    width: 50vw;  
    padding: 0 5em;
}
#slide3 {
	/* padding: 5em 0 0 0; */
}
section {
}
section:last-of-type {
	margin-bottom: 0;
}
.Sectcontent {
	display: flex; 
	position: relative;
}
.Sectcontent h1 {
    font-size: 1.2rem;
	line-height: 2.0rem;
	font-weight: 500;
    color: #ED3025;
}
.Sectcontent h2 {
    font-size: 1.2rem;
	line-height: 2.0rem;
	font-weight: 500;
    color: #ED3025;
}
.texttile {
	width: 50vw;
	background-color: white;
	padding: 2em 7.5em;
	align-self: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
section:nth-child(even) .Sectcontent {
	flex-direction: row-reverse;
}

.texttile:nth-child(even) {
	
}
.sectionHero {
	width: 50vw;
    aspect-ratio: 1.5;
}
.toggleBody{
	display: grid; 
	grid-template-columns: repeat(11,1fr);
	width: 100%;
	grid-column: 1/11;
	padding: 5em 0;
	background-color: #f1f1f1;
	border-bottom: 4px solid #ED3025;
	
}
.button, .button a {
	grid-column: 1/12;
	padding: 1em 5em;
	background-color: #ED3025;
	color: #000;
	justify-self: center;
	text-align: center;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
	text-decoration: none;
}
.button:hover, .button a:hover {
	color: #fff;
	background-color: #111;
	text-decoration: none;
	cursor: pointer;
}
#social-follows {
	display: flex;
	gap: 10px;
	padding-top: .5em;
}
#social-follows a {
	width: 35px;
}
#social-follows a img {
	border-radius: 4px;
}

#projectslide {
	display: grid;
	grid-template-columns: repeat(11,1fr);
	padding: 5em 0; 
}
#dynContainer {
	grid-column: 2/11;
	display: flex;
	margin: 5em 0;
	flex-wrap: wrap;
	justify-content: space-between;
}
.dynTile {
	display: flex;
	grid-column: 1/2;
	position: relative;
	background-color: #333;
	width: 45%;
	aspect-ratio: 1.5;
	color: #111;
	margin-top: 0;
}
.dynTile:hover {
	color: #111;
}
.dynTile:nth-child(n+3) {
	margin-top: 5em;
}
.dynTile::before {
	content: '';
	background-color: #ED3025;
	display: block;
	position: absolute;
	top: -10px;
	left: -10px;
	width: 100%;
	height: 100%;
	z-index: -1;
	transition: 0.3s ease;
	
}
.dynTile::after {
	content: attr(data-line);
	font-family: montserrat, sans-serif; 
	width: 75%;
	position: absolute;
	padding: 1em 2em;
	bottom: -2%;
	right: -2%;;
	background-color: #fff;
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.45);
}
.dynTile:hover::after {
	background-color: #ED3025;
}
#galleryslide {
	display: grid;
	grid-template-columns: repeat(11,1fr); 
}
#galleryContainer {
	grid-column: 1/12;
	display: flex;
	flex-wrap: wrap;
}
.galleryTile {
	display: flex;
	grid-column: 1/2;
	position: relative;
	background-color: #333;
	width: 25%;
	aspect-ratio: 1.5;
	color: #111;
}
.galleryTile:hover {
	color: #111;
	cursor: pointer;
}
.galleryTile:hover::after {
	background-color: #ED3025;
}
/* ------------------------------- SLIDE 4 */
#slide4, #slide6 {
    background-color: #5B6665;
    color: #fff;
    padding: 5em 7.5em;
}

/* ------------------------------- SLIDE 5 */
#slide6 {
    
}


.car-brand {
    display: flex;
    padding: 2em 7.5em;
    flex-wrap: wrap;
}
.car-brand:nth-of-type(even) .brand-content {
    flex-direction: row-reverse;
} 
.car-brand hr {
    width: 100%;
    height: 1px;
    background-color: #000;
    border: none;
}
.car-brand:last-of-type hr {
    display: none;
}
.brand-content {
    width: 100%;
    display: flex;
    margin-bottom: 4em;
}

.car-brand:nth-of-type(even) .brand-content {
    flex-direction: row-reverse;
}

.brand-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
}
.brand-logo img {
    width: 30%;
}
.brand-text-group {
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.brand-text-group h3 {
    margin-top: 0;   
}
.brand-text-group p {
    margin-bottom: 0;   
}



#contact-slide {
	display: grid; 
	grid-template-columns: repeat(11,1fr); 
	background-image: url("../../media/static/images/McFarland-6.jpg"); 
	background-size: cover;
	background-position: center;
	background-blend-mode: screen;
	background-color: #ED3025; 
	height: 500px; 
}
#container {
		display: grid;
		grid-column: 1/12;
		align-content: center;
		justify-items: center;
		background-image: linear-gradient(to bottom right, rgba(183,212,52,.2), rgba(183,212,52,1));
	}
#contact-content {
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	width: 100%; height: 100%; 
}
#contact-content h3 {
	text-align: center; 
	width: 70%; 
	color: #fff; 
	font-size: 1.8rem; 
	line-height: 2.4rem;
}
#contact-content .button {
	background-color: #fff; 
	color: #111;  
	margin-top: 5em; 
	text-align: center;
}
#contact-content .button:hover {
	background-color: #111; 
	color: #fff;
}
/* Desktop (large) */
@media only screen and (min-width: 1100px) {}
/* Desktop (medium) */
@media only screen and (max-width: 1099px) {}
/* Desktop (small) */
@media only screen and (max-width: 749px) {
	.Sectcontent {
		margin: 0;
		display: flex;
		flex-direction: column-reverse;
	}
	.texttile {
		position: relative;
		grid-column: 1/12;
		box-shadow: none;
		}
	.dynTile {
	width: 95%;
}
	
	.dynTile{
		margin-top: 5em;
	}
	.galleryTile {
	width: 50%;
}
	.sectionHero {
	grid-column: 1/12;
}
	.contact-info {
	grid-column: 2/11;
	padding-bottom: 1em;	
}
.contact-form {
	grid-column: 2/11;
}
}
	
/* Mobile */
@media only screen and (max-width: 549px) {}