@charset "utf-8";
/*--------------- HERO --------------------*/
#hero-rel {
  width: 100%;
  height: 100%;
  position: relative;
}
#hero-abs {
  position: absolute;
  right: 10%;
  bottom: 10vh;
  width: 290px;
  text-align: right;
}
#hero-abs span {
  font-family: montserrat, sans-serif; 
  font-size: 3.5rem;
  line-height: 3.9rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
#hero-abs hr {
  border: 4px solid #fff;
  width: 25%;
  float: right;
  padding: 0;
  margin: 30px 0 0 0;
}
.mySlides {
  background-repeat: no-repeat;
  background-color: #333;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 85vh;
}
.mySlides h1 {
  margin: 280px 0 6px 0;
  padding: 0 0 0 0;
  font-size: 2.0rem;
  line-height: 2.2rem;
  text-transform: uppercase;
  color: #FFF;
  font-weight: 300;
}
.mySlides p {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 7.0rem;
  line-height: 7.2rem;
  text-transform: uppercase;
  color: #FFF;
  font-weight: 300;
}
.w3-content {
  width: 100%;
  max-width: 100%;
}
.w3-left, .w3-right, .w3-badge {
  cursor: pointer;
  color: #FFF;
}
.w3-left, .w3-right {
  padding: 4px 12px 4px 12px;
  font-size: 1.4rem;
}
.w3-left:hover, .w3-right:hover {
  background: rgba(22, 68, 123, .8);
}
.w3-badge {
  background: #FFF;
  height: 12px;
  width: 12px;
  padding: 0;
  border: none;
}
#anchor1 {
  width: 36px;
  height: 36px;
  position: absolute;
  left: 49.25%;
  bottom: 6vh;
}
#anchor1 img {
  height: 100%;
  width: 36px;
}
/*--------------- SLIDE 2 --------------------*/
#slide2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#sect1{
    display: flex;
    align-items: center;
}
#sect2 {
    display: flex;
    align-items: center;
}

#slide2 .hgroup2 {
    display: flex;
    flex-wrap: wrap;
    width: 50vw;  
    padding: 0 5em;
}
.slide2-image {
    display: block;
    width: 50vw;
}
#slide2 h1 {
  font-family: montserrat, sans-serif; 
  color: #222;
  margin: 0 0 6px 0;
  padding: 0 0 0 0;
  font-size: 1.6rem;
  line-height: 1.8rem;
  display: inline-block;
}
#slide2 h2 {
  font-family: montserrat, sans-serif; 
  color: #ED3025;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 1.6rem;
  line-height: 1.8rem;
  display: inline-block;
}
#slide2 hr {
  border: 4px solid #CF102D;
  width: 80px;
  margin: 5vh auto;
}
#slide2 button {
    background-color: #ED3025;
    border: none;
    color: #fff;
    padding: 10px 5em;
    margin-top: 2em;
}

.intro {
  font-family: montserrat, sans-serif; 
  margin: 0 auto 0 auto;
  border: none;
  padding: 0 0 0 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}
/*--------------- SLIDE 3 --------------------*/
#slide3 {
  padding: 10em 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  
}

#slide3 h2 {
  color: #000;
  font-family: montserrat, sans-serif; 
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
	
}
.buttons {
	width: 25%;
	padding: 0;
	display: block;
  	overflow: hidden;
	margin: 5vh auto 0 auto;
}
.buttons a, .buttons button {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	display: block;
	float: left;
	text-align: center;
	margin: 0 5px 0 0;
	min-width: 80px;
	text-decoration: none;
	cursor: pointer;
	padding: 5px 10px 5px 10px; /* Links */
}
.buttons button, .buttons a {
	width: 100%;
	overflow: visible;
	background-color: rgba(0,0,0,0.00);
	border: 3px solid #fff;
	font-family: montserrat, sans-serif; 
	text-transform: uppercase;
	font-weight: 900;
	color: #fff;
	font-size: .8rem;
	margin: 0;
	padding: 2px 10px; /* IE6 */
}
.buttons button:hover, .buttons a:hover {
	background-color: #ED3025;
	border: 3px solid #ED3025;
	color: #fff;
}

button:focus, .buttons a:focus {
	color: #ED3025;
	background-color: #fff;
}
/*--------------- SLIDE 4 --------------------*/
#slide4 {
  padding: 5em;
  display: flex;
    justify-content: center;
}
#slide4 h2 {
	grid-column: 2/11;
  color: #222;
  text-align: center;
  font-family: montserrat, sans-serif; 
  text-transform: uppercase;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

#dynContainer {
	grid-column: 2/11;
	display: flex;
	margin: 5em 0;
}
.dynTile {
	display: flex;
	grid-column: 1/2;
	position: relative;
	background-color: #333;
	width: 100%;
	aspect-ratio: 1.5;
	color: #111;
}
.dynTile:hover {
	color: #111;
}
.dynTile:nth-child(2) {
	margin-left: 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;
}
.button {
	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 {
	color: #fff;
	background-color: #111;
	text-decoration: none;
}

#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;
}

/*--------------- SLIDE 5 --------------------*/
#slide5 {
  padding: 10em 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

/*--------------- Subpage Box overide --------------------*/
a.subpageBox {
  border: none;
  background: #FFF;
  margin: 0;
}
a.subpageBox:hover {
  text-decoration: none;
  background: #FFF;
}
a.subpageBox h3 {
  text-align: center;
  color: #000;
  font-size: 1rem;
  margin: 10px 0;
  padding: 0 20px 0 20px;
  text-transform: uppercase;
}
/* 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) {
	#slide2 {
		padding: 2em 0;
        
	}
    #sect1 {
        justify-content: center;
    }
    #slide2 .hgroup2 {
    width: 100%;  
    padding: 2em 2em;
}
    .slide2-image {
        display: none;
    }
	#slide3 {
		padding: 2em 0;
	}
	#slide4 {
		padding: 2em 0;
	}
	
	#dynContainer {
		display: block;
	}
	.dynTile:nth-child(2) {
		margin-left: 0;
		margin-top: 5em;
	}
	
	
	a.subpageBox {
  border: none;
  background: #FFF;
  margin: 0 0 30px 0;
}
	.buttons {
		width: 100%;
		margin-top: 0px;
	}
	
}
/* Mobile */
@media only screen and (max-width: 549px) {}