/**
* Fuel Theme
* Version 6.4.4
**/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

.hero{
	margin-bottom: 1.5rem !important; 
}

.hero-group{
	background: linear-gradient(180deg, #294868 0%, rgba(41, 72, 104, 0.8) 100%);
	padding: 1rem !important; 
	border-radius: 8px;
	border-top: 6px solid var(--accent-color);
	padding-bottom: 2rem !important ; 
}

.hero-tagline-one{
	font-size: 1.8rem !important ; 
	font-weight: 700; 
	text-align: center !important; 
}

.hero-tagline-two{
	font-size: 1.2rem !important ; 
	letter-spacing: 8%; 
	font-weight: 400; 
	text-align: center !important; 
	margin-bottom: 0 !important ;
}

@media (min-width: 68.5em) {
	.hero-tagline-one{
		max-width: 44rem !important ; 
		font-size: 3.2rem !important; 
		text-align: left !important; 
		margin-left: 2rem !important ; 
	}
	.hero-group .wp-block-buttons {
		max-width: 44rem !important ; 
		margin-left: 2rem !important ; 
	}
	.hero-line-sound-group{
		display: flex;
		max-width: 44rem !important ; 
	}
	.hero-tagline-two{
		font-size: 2rem !important; 
		margin-left: 2rem !important ; 
	}
	.hero-line-sound-group svg.aligncenter {
		margin-left: 2rem !important ; 
		margin-right: 1rem !important ; 
		width: 15rem;
  		height: 5rem;
	}
	.hero{
		padding-left: 2rem;
		padding-top: 6rem !important;
    	padding-bottom: 6.5rem !important;
		margin-bottom: 0 !important ; 
	}
	.hero-group {
		max-width: 40rem !important ;
  		margin-left: 0 !important;
	}
	#welcome_section:before {
		width: 27rem;
  		height: 35rem;
	}
}

@keyframes heroLine{
	to{
		opacity: 1;
	}
}

@keyframes heroText{
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero-tagline-two{
		opacity: 0; 
		transform: translateX(-2rem);
		animation: heroText .75s .75s ease forwards;
	}
	.first-inner,
	.first-outer{
		opacity: 0; 
		animation: heroLine .25s ease forwards;
	}
	.second-inner,
	.second-outer{
		opacity: 0; 
		animation: heroLine .25s .25s ease forwards;
	}
	.third-inner,
	.third-outer{
		opacity: 0; 
		animation: heroLine .25s .5s ease forwards;
	}
	.fourth-inner,
	.fourth-outer{
		opacity: 0; 
		animation: heroLine .25s .75s ease forwards;
	}
}

.hero-line-sound-group {
	margin-top: .25rem; 
}


/*--------------------------------------------------------------
# Sub hero
--------------------------------------------------------------*/

.home-sub-hero-group{
	position: relative;
	padding-bottom: 4rem; 
	margin-top: 0; 
}

.home-sub-hero-group:after{
	content:''; 
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	margin: auto; 
	width: 8rem; 
	height: 5rem; 
	background: url('../images/menu-desktop-logo.svg') no-repeat;
	background-size: 100%; 
	background-position: bottom; 
}

.home-sub-hero-group:before{
	content:'';
	position: absolute; 
	left: 0; 
	bottom: 0; 
	width: 100%;
	height: 2px;
	background: #364C62;
	background: linear-gradient(158deg, rgba(54, 76, 98, 1) 50%, rgba(193, 59, 58, 1) 50%);
}

.home-sub-hero-wrapper-left h1{
	font-size: 1.4rem !important; 
}

.home-sub-hero-wrapper-right{
	padding-left: 0; 
}

@media (min-width: 68.5em) {
	.home-sub-hero-wrapper-left h1{
		font-size: 2rem !important; 
	}
	.home-sub-hero-wrapper-right{
		padding-left: 2rem; 
	}	
	
	.home-sub-hero-wrapper{
		padding-top: 4rem !important; 
		padding-bottom: 7rem !important;  
	}
	.home-sub-hero-group:after{
		width: 16rem; 
		height: 10rem; 
	}
	.home-sub-hero-group {
		padding-bottom: 2rem !important ;
 		padding-top: 2rem !important ;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home-sub-hero-group:before{
		transform: scaleX(0);
		transform-origin: center; 
		transition: transform 1.25s 1s ease; 
	}
	.home-sub-hero-group.js-intersected:before{
		transform: scaleX(1);
	}
}

/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/

#welcome_section{
	background: linear-gradient(180deg, rgba(79, 111, 138, 0.3) 0%, rgba(79, 111, 138, 0.1) 100%);
	position: relative;
	padding-top: 3rem;
	padding-bottom: 5rem; 
	margin-top: 0 !important ; 
	overflow: hidden; 
}

#welcome_section:after{
	content:''; 
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	margin: auto; 
	max-width: 17rem;
	width: 100%; 
	height: 5rem; 
	background: url('../images/welcome-mtns.svg') no-repeat; 
	background-size: cover;
  	background-position: bottom;
}

#welcome_section:before{
	content:''; 
	position: absolute; 
	left: 0;
	top: 0; 
	width: 8rem;
	height: 8rem; 
	background: url('../images/cta-wrapper-circles.svg') no-repeat; 
	background-size: contain; 
	background-position: left top; 
}

@media (min-width: 68.5em) {
	#welcome_section::after {
		max-width: 49rem;
		width: 100%;
		height: 14rem;
	}
	#welcome_section:before{
		width: 29rem;
    	height: 29rem;
	}
}

/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/

/* .cta{
	z-index: 10; 
} */

.cta img{
	border-radius: 50%; 
	display: block;
  	margin: auto;
	width: 148px !important ;
	height: 148px !important ; 
	object-fit: cover;
	transition: box-shadow 0.5s .5s ease-in-out;
	box-shadow: 
    0 0 0 0px #fff, 
    0 0 0 2px rgba(255, 0, 0, 0);
	z-index: 10;

}


.cta h2{
	font-size: 1.2rem; 
}
.cta p{
	line-height: 1.9 !important ; 
}

.home #location_section{
	margin-top: 0;
	padding-bottom: 3rem; 
}

.cta .wp-block-column:first-child{
	order: 1; 
}

@media (min-width: 49em) {
	.cta {
		margin-top: 4rem !important ; 
		margin-bottom: 4rem !important ; 
	}
	.cta .wp-block-column:first-child{
		order: 0 ; 
	}
	.cta .wp-block-image{
		z-index: 10; 
		position: relative; 
	}

	.cta h2{
		font-size: 1.5rem; 
	}
}

@media (max-width: 68.5em){
	.cta img{
		border-radius: 50%; 
		display: block;
		margin: auto;
		width: 174px !important ;
		height: 174px !important ; 
		object-fit: cover;
		box-sizing: border-box;
		border: 15px solid #fff; 
		outline: 2px solid rgba(193, 59, 58, 1);
		outline-offset: 0; 
	}
}

@media (min-width: 68.5em){
 		.cta:nth-child(even){
			z-index: 100; 
		}
		.cta:first-child {
			position: relative; 
			z-index: 101; 
		}
 		.cta-balance {
			position: relative; 
			z-index: 1 !important ; 
		} 
		.cta:first-child img{
			position: relative; 
			z-index: 101; 
		}
		
		.cta:nth-child(even){
			transform: translateX(3rem);
		}
		.cta:nth-child(2) .wp-block-image:before {
			content: "";
			position: absolute;
			top: -7rem;
			right: 6rem; 
			width: 2px;
			height: 13rem; 
			background: var(--accent-color);
			transform: rotate(345deg);
			z-index: -1; 
		}
	
	.cta:nth-child(3) .wp-block-image:before {
			content: "";
			position: absolute;
			width: 2px;
			height: 13rem; 
			top: -7rem;
			right: 4rem;
			transform: rotate(371deg);
			background: var(--accent-color);
			z-index: -1; 
		}
	
	.cta:nth-child(4) .wp-block-image:before {
			content: "";
			position: absolute;
			top: -7rem;
			right: 6rem; 
			width: 2px;
			height: 13rem; 
			background: var(--accent-color);
			transform: rotate(345deg);
			z-index: -1; 
	}
}

@media (min-width: 98.5em){
	.cta:nth-child(2) .wp-block-image:before {
		top: -10rem; 
		height: 14rem;
	}
	.cta:nth-child(3) .wp-block-image:before{
		height: 13rem; 
	}
}

@media (min-width: 105.5em){
	.cta:nth-child(3) .wp-block-image:before{
		top: -8.7rem;
	}
	.cta:nth-child(4) .wp-block-image:before{
		top: -8.7rem; 
	}
}

@keyframes ctaLine{
	to{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@keyframes layerBorders {
  /* 0% to 50% (First 0.5s): Red line fades in, white stays at 0px */
  0% {
    box-shadow: 
      0 0 0 0px #fff, 
      0 0 0 2px rgba(193, 61, 61, 0);
  }
  10% {
    box-shadow: 
      0 0 0 0px #fff, 
      0 0 0 2px rgba(193, 61, 61, 1); /* Red is now fully solid */
  }
  
  /* 50% to 100% (Next 0.5s): White grows to 15px, pushing the red to 17px */
  100% {
    box-shadow: 
      0 0 0 15px #fff, 
      0 0 0 17px rgba(193, 61, 61, 1);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 68.5rem){
	.cta:nth-child(2) .wp-block-image:before,
	.cta:nth-child(3) .wp-block-image:before,
	.cta:nth-child(4) .wp-block-image:before{
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		
	}
	#welcome_section.js-intersected .cta:nth-child(2) .wp-block-image:before{
		animation: ctaLine 1s 1s ease forwards; 
	}
	#welcome_section.js-intersected .cta:nth-child(3) .wp-block-image:before{
		animation: ctaLine 1s 1.5s ease forwards; 
	}
	#welcome_section.js-intersected .cta:nth-child(4) .wp-block-image:before{
		animation: ctaLine 1s 2s ease forwards; 
	}
	/* animated borders */
	#welcome_section.js-intersected .cta:first-child img {
		animation: layerBorders .5s .5s ease-in forwards;
	}
	#welcome_section.js-intersected .cta:nth-child(2) img {
		animation: layerBorders .5s 1s ease-in forwards;
	}
	#welcome_section.js-intersected .cta:nth-child(3) img {
		animation: layerBorders .5s 1.5s ease-in forwards;
	}
	#welcome_section.js-intersected .cta:nth-child(4) img {
		animation: layerBorders .5s 2s ease-in forwards;
	}
	
}



/*--------------------------------------------------------------
# Home location 
--------------------------------------------------------------*/

.home #location_section h2{
	position: relative; 
	color: var(--primary-color);
	margin-top: .5rem !important ; 
	margin-bottom: .5rem !important ; 
}

.home #location_section h2:after{
	content:'';
	position: absolute;
	left: 0; 
	right: 0; 
	bottom: -.65rem; 
	margin: auto; 
	width: 2rem; 
	height: 1px; 
	background: var(--primary-color);
}

.home #location_section:before{
	content:''; 
	position: absolute; 
	right: 0;
	top: 0; 
	width: 8rem;
	height: 8rem; 
	background: url('../images/locations-circle-accent.svg') no-repeat; 
	background-size: contain; 
	background-position: right top; 
}

@media (min-width: 68.5em) {
	.home #location_section:before{
		width: 28rem;
  		height: 31rem;
	}
}