/******************************************************************
Site Name: Rotary NADA 2024 Landing Page
Stylesheet: Page Stylesheet
******************************************************************/

@charset 'utf-8';

// Colors
:root {
	--white: #FFFFFF;
	--black: #000000;
	--dark-gray: #050505;
	--mid-gray: #707070;
	--gray: #C6C6C6;
	--light-gray: #ACACAC;
	--screen-gray: #E2E2E2;
	--vsg-red: #E02B20;
	--vsg-dark-red: #A41E16;
	--vsg-blue: #1E79C7;
	--vsg-dark-blue: #145893;
	--text-color: var(--dark-gray);
}

// Screen width variables
$mobile-lg: 	576px;
$tablet: 		768px;
$tablet-lg: 	992px;
$desktop: 		1200px;
$desktop-lg:	1400px;
$desktop-xl:	1600px;

// Global Layout
.nada-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;

	@media screen and (min-width: $mobile-lg) {
		max-width: 540px;
	}

	@media screen and (min-width: $tablet) {
		max-width: 720px;
	}

	@media screen and (min-width: $tablet-lg) {
		max-width: 960px;
	}

	@media screen and (min-width: $desktop) {
		max-width: 1140px;
	}

	@media screen and (min-width: $desktop-lg) {
		max-width: 1320px;
	}

	@media screen and (min-width: $desktop-xl) {
		max-width: 1510px;
	}

}

// Top Banner
#nada-banner {
	background-color: var(--screen-gray);
	padding-top: 30px;
	padding-bottom: 30px;

	.logo-wrap {
		text-align: center;
		padding-bottom: 12px;
		border-bottom: solid 6px var(--light-gray);
	}

	.booth-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 12px;

		.booth-text {
			flex: 1;

			h2 {
				font-size: 40px;
				line-height: 1.2;
				font-weight: 700;
				color: var(--vsg-red);
				margin-bottom: 0;
				padding-bottom: 0;
				padding-right: 12px;

				span {
					display: block;
					font-size: 12px;
					line-height: 1;
					text-transform: uppercase;
					color: var(--mid-gray);
					margin-bottom: -6px;
				}

				@media screen and (min-width: $mobile-lg) {
					font-size: 48px;

					span {
						font-size: 20px;
					}

				}

			}

		}

		.data-card {
			flex: 1;
			background-color: var(--white);
			text-align: center;
			padding: 12px;
			border: solid 3px var(--light-gray);
			border-radius: 20px;

			h4 {
				font-size: 18px;
				line-height: 1.2;
				font-weight: 700;
				color: var(--vsg-red);
				margin-bottom: 0;
				padding-bottom: 0;

				span {
					display: block;
					font-weight: 400;
					color: var(--text-color);
				}

			}

			&.full {
				width: 100%;
				max-width: 300px;

				h4 {
					font-size: 24px;
				}

			}

			@media screen and (min-width: $mobile-lg) {
				border-width: 6px;

				h4 {
					font-size: 24px;
				}

			}

		}

	}

	@media screen and (min-width: $tablet) {

		> .nada-container {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.logo-wrap {
			flex: 0.6;
			padding: 12px 24px 10px 0;
			border-bottom: 0;
			border-right: solid 6px var(--light-gray);
		}

		.booth-wrap {
			flex: 1;
			justify-content: center;
			padding: 0 0 0 24px;

			.booth-text {
				flex: 0 0 auto;

				h2 {
					font-size: 40px;

					span {
						font-size: 18px;
					}

				}

			}

			.data-card {
				flex: 0 0 auto;
			}

		}

	}

	@media screen and (min-width: $tablet-lg) {

		.logo-wrap {
			width: 50%;
			flex: 0 0 auto;
			padding: 4px 24px 0 0;
		}

		.booth-wrap {
			width: 50%;
			flex: 0 0 auto;

			.booth-text {

				h2 {
					font-size: 48px;

					span {
						font-size: 20px;
					}

				}

			}
		}

	}

	@media screen and (min-width: $desktop) {

		.booth-wrap {

			.booth-text {

				h2 {
					font-size: 60px;
					padding-right: 24px;

					span {
						font-size: 24px;
					}

				}

			}

			.data-card {
				padding: 24px;

				h4 {
					font-size: 30px;
				}

			}

		}

	}

	@media screen and (min-width: $desktop-lg) {

		.booth-wrap {

			.booth-text {

				h2 {
					font-size: 72px;
					margin-bottom: -18px;
					padding-right: 48px;

					span {
						font-size: 24px;
						margin-bottom: -12px;
					}

				}

			}

			.data-card {
				padding: 24px 36px;

				h4 {
					font-size: 30px;
				}

			}

		}

	}

}

// Main Banner
#main-banner {
	height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #1A1A1A url(../images/banner_main-hero.png) no-repeat center left;

	h1 {
		font-size: 48px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		color: var(--white);

		span {
			display: block;
			font-size: 36px;
			font-weight: 400;
		}

	}

	img {
		display: none;
	}

	&.end {
		background: transparent;
		display: block;
		height: auto;

		h1 {
			color: #E02B20;
			text-align: center;
			max-width: 100%;
			padding: 70px 50px 0;

			span {
				color: #000;
			}
		}
	}

	@media screen and (min-width: $mobile-lg) {

		h1 {
			font-size: 52px;

			span {
				font-size: 36px;
			}

		}

	}

	@media screen and (min-width: $tablet) {
		position: relative;

		h1 {
			max-width: 540px;
		}

		img {
			display: block;
			width: 75%;
			position: absolute;
			right: -250px;
		}

	}

	@media screen and (min-width: $tablet-lg) {
		height: 440px;

		h1 {
			font-size: 64px;
			max-width: 680px;

			span {
				font-size: 42px;
			}

		}

		img {
			top: 110px;
			right: -280px;
		}

	}

	@media screen and (min-width: $desktop) {

		h1 {
			max-width: 820px;
			font-size: 72px;
			padding-left: 36px;

			span {
				font-size: 52px;
			}

		}

		img {
			top: 80px;
			right: -320px;
			width: auto;
		}

	}

	@media screen and (min-width: $desktop-lg) {

		img {
			right: auto;
			left: 55%;
		}

	}

	@media screen and (min-width: $desktop-xl) {
		background-position: center center;

		h1 {
			padding-left: 100px;
		}

	}

}

// End Banner Section
#end-banner {
	display: flex;
	align-items: center;

	img {
		max-width: 900px;
		width: 100%;
	}
}

// Hero Section
#hero-section {
	position: relative;

	.hero-image {
		text-align: center;

		img {
			width: 100%;
			max-width: 592px;
			margin-top: -64px;
			margin-right: auto;
			margin-left: auto;
		}

	}

	.hero-content {
		padding-top: 30px;
		padding-bottom: 30px;

		h2 {
			font-size: 36px;
			font-weight: 700;
			line-height: 1;
			text-transform: uppercase;
			color: var(--vsg-red);
			margin-bottom: 24px;
			padding-bottom: 0;

			@media screen and (min-width: $desktop) {
				font-size: 42px;
			}

			@media screen and (min-width: $desktop-lg) {
				font-size: 48px;
			}

		}

		p {
			font-size: 20px;
			font-weight: 400;
			line-height: 1.5;
			color: var(--text-color);
			margin-bottom: 24px;
			padding-bottom: 0;

			&.red {
				color: var(--vsg-red);
			}

		}

		&.end {
			width: 100%;
			padding: 0 50px 50px;
			text-align: center;
		}

	}

	@media screen and (min-width: $tablet) {
		display: flex;

		.hero-image {
			width: 40%;
			flex: 0 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			img {
				margin-top: 0;
			}

		}

		.hero-content {
			width: 60%;
			flex: 0 0 auto;
			padding: 100px 0 30px 24px;
		}

	}

	@media screen and (min-width: $tablet-lg) {

		.hero-content {
			padding-top: 120px;

			p {
				font-size: 24px;
			}

		}

	}

	@media screen and (min-width: $desktop) {

		.hero-image {
			width: 50%;

			img {
				margin-top: -96px;
			}

		}

		.hero-content {
			width: 50%;
			padding: 160px 24px 30px 48px;
		}

	}

	@media screen and (min-width: $desktop-lg) {

		.hero-content {

			p {
				font-size: 26px;
			}

		}

	}

}

// CTA Callout
.callout-top {
	background-color: var(--screen-gray);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 24px;

	img {
		width: 153px;
	}

	p {
		font-size: 24px;
		font-weight: 500;
		line-height: 1.2;
		color: var(--text-color);
		text-align: center;
		padding-bottom: 0;
	}

	@media screen and (min-width: $tablet) {
		flex-wrap: nowrap;
		align-items: center;

		p {
			text-align: left;
			padding-left: 24px;
		}

	}

	@media screen and (min-width: $desktop) {

		p {
			font-size: 36px;
		}

	}

}

.callout-bottom {
	background: rgb(54,54,54);
	background: linear-gradient(180deg, rgba(54,54,54,1) 0%, rgba(120,120,120,1) 100%);
	padding: 24px;

	p {
		font-size: 24px;
		font-weight: 400;
		line-height: 1.2;
		color: var(--white);
		text-align: center;
		margin-bottom: 24px;
		padding-bottom: 0;
	}

	.fluid-width-video-wrapper {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	
		iframe, video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	
	}

	@media screen and (min-width: $tablet) {
		padding: 36px 24px;
	}

	@media screen and (min-width: $desktop) {
		padding: 48px 24px;

		p {
			font-size: 36px;
			margin-bottom: 36px;
		}

	}

	@media screen and (min-width: $desktop-lg) {

		p {
			font-size: 48px;
		}

	}

}

// Email Form
.hs-form {
	display: flex;
	justify-content: center;
	align-items: flex-start;

	.hs_email {
		padding-right: 6px;
	}

	label:not(.hs-error-msg) {
		display: none;
	}

	label.hs-error-msg {
		display: block;
		background: #FFD7D5;
		font-size: 13px;
		color: var(--vsg-red);
		margin-top: 12px;
		padding: 6px 12px;
		border-radius: 4px;
	}

	input {
		height: 48px;
		font-size: 18px;
		line-height: 1;
		border: solid 3px var(--gray);
		border-radius: 10px;
	}

	.hs-button.primary.large {
		background-color: var(--vsg-blue);
		font-weight: 700;
		text-transform: uppercase;
		margin-top: 0;
		padding: 8px 12px !important;
		border-color: transparent;
		border-radius: 10px !important;
	}

	@media screen and (min-width: $desktop) {

		.hs_email {
			padding-right: 12px;
		}

		input {
			height: 64px;
			font-size: 30px;
		}

		.hs-button.primary.large {
			font-size: 24px;
			padding: 8px 24px !important;
		}

	}

}

.submitted-message {
	max-width: 450px;
	background-color: var(--white);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--vsg-red);
	text-align: center;
	margin: 0 auto;
	padding: 12px;
	border: solid 3px var(--gray);
	border-radius: 10px;

	@media screen and (min-width: $desktop) {
		font-size: 36px;
		max-width: 660px;
	}

}

// Card Section
#card-section {
	padding-top: 30px;
	padding-bottom: 30px;

	h2 {
		font-size: 36px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		text-align: center;
		color: var(--vsg-red);
		margin-bottom: 0;
		padding-bottom: 0;
	}

	p.lead {
		font-size: 24px;
		font-weight: 400;
		line-height: 1.2;
		text-align: center;
		color: var(--text-color);
		margin-bottom: 24px;
		padding-bottom: 0;

		span {
			white-space: nowrap;
		}

	}

	@media screen and (min-width: $desktop) {
		padding-top: 60px;
		padding-bottom: 60px;

		h2 {
			font-size: 42px;
		}

		p.lead {
			font-size: 36px;
		}

	}

	@media screen and (min-width: $desktop-lg) {

		h2 {
			font-size: 48px;
		}

	}

}

// Blaze Slider
.blaze-slider {
	--slides-to-show: 1;
	--slide-gap: 24px;
	direction: ltr;
}

.blaze-container {
	position: relative;
	padding-left: 36px;
	padding-right: 36px;

	button {
		position: absolute;
		top: calc(50% - 18px);
		text-indent: -9999px;
		width: 36px;
		height: 36px;
		border: none;
		cursor: pointer;

		&.blaze-prev {
			left: 0;
			background: url(../images/bg_left-arrow.svg) no-repeat center center;
			background-size: contain;
		}

		&.blaze-next {
			right: 0;
			background: url(../images/bg_right-arrow.svg) no-repeat center center;
			background-size: contain;
		}

	}

}

.blaze-track-container {
	overflow: hidden;
	margin-top: -30px;
	margin-bottom: -30px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.blaze-track {
	will-change: transform;
	touch-action: pan-y;
	display: flex;
	gap: var(--slide-gap);
	--slide-width: calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));
	box-sizing: border-box;
}

.blaze-track > * {
	box-sizing: border-box;
	width: var(--slide-width);
	flex-shrink: 0;
}

.blaze-track {

	.playing-card-wrap {
		perspective: 1000px;
		transform-style: preserve-3d;
  		transition: all 600ms;
		cursor: pointer;

		&:hover {

			.playing-card {
				transform: rotateY(30deg);
			}

		}

	}

	.playing-card {
		position: relative;
		width: 100%;
		padding-top: calc(16/10.5 * 100%);

		&.flipper {
			transform-style: preserve-3d;
  			transition: all 600ms;

			&.flipped {
				transform: rotateY(180deg);
			}

		}

		.front, .back {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 36px 48px;
			border-radius: 15px;

			h3 {
				position: relative;
				font-size: 36px;
				font-weight: 700;
				line-height: 1;
				text-transform: uppercase;
				text-align: center;
				color: var(--white);

				@media screen and (min-width: $mobile-lg) {
					font-size: 30px;
				}

				@media screen and (min-width: $tablet) {
					font-size: 36px;
				}

				@media screen and (min-width: $desktop-lg) {
					font-size: 32px;
				}

				@media screen and (min-width: $desktop-xl) {
					font-size: 36px;
				}

			}

			.flip-directions {
				position: absolute;
				right: auto;
				bottom: 48px;
				left: auto;
				display: flex;
				align-items: center;

				img.flip-icon {
					margin-right: 6px
				}

				span {
					font-weight: 700;
					color: var(--white);
				}

			}

		}

		.front {
			background: var(--vsg-blue) url(../images/bg_card-front.png) no-repeat center center;
			background-size: contain;
			backface-visibility: hidden;
		}

		.back {
			background-color: var(--screen-gray);
			transform: rotateY(180deg);
			backface-visibility: hidden;
			padding: 12px;

			img.rotary-logo {
				position: absolute;
				top: 22px;
				left: 12px;
				width: 80px;
				height: auto;
			}

			.content-wrap {
				height: 100%;
				padding: 12px;
				border: solid 1px var(--light-gray);
				border-radius: 8px;

				img {
					width: 106px;
					display: block;
					margin: 0 auto 12px;
				}

				h4 {
					font-size: 18px;
					font-weight: 700;
					line-height: 1.2;
					text-transform: uppercase;
					text-align: center;
					color: var(--text-color);

					a {
						color: var(--vsg-red);

						&:hover, &:focus {
							color: var(--vsg-red);
						}

					}

				}

				p {
					font-size: 14px;
					line-height: 1.3;
					color: var(--text-color);
					margin-bottom: 12px;
				}

				ul {
					list-style-type: none;
					margin-bottom: 0;
					padding-left: 12px;

					li {
						font-size: 13px;
						line-height: 1.3;
						color: var(--text-color);
						margin: 3px 0;

						&::before {
							content: "\2022";
							color: var(--vsg-red);
							font-weight: bold;
							display: inline-block;
							width: 1em;
							margin-left: -1em;
						}

					}

				}

				@media screen and (min-width: $mobile-lg) {
					padding: 24px;

					img {
						width: 180px;
					}

					h4 {
						font-size: 24px;
					}

					p {
						font-size: 18px;
					}

					ul li {
						font-size: 16px;
					}

				}

				@media screen and (min-width: $tablet) {
					padding: 12px;

					img {
						width: 96px;
					}

					h4 {
						font-size: 16px;
					}

					p {
						font-size: 13px;
					}

					ul li {
						font-size: 13px;
					}

				}

				@media screen and (min-width: $tablet-lg) {
					padding: 24px;

					img {
						width: 180px;
					}

					h4 {
						font-size: 24px;
					}

					p {
						font-size: 18px;
					}

					ul li {
						font-size: 16px;
					}

				}

				@media screen and (min-width: $desktop) {
					padding: 12px;

					img {
						width: 120px;
					}

					h4 {
						font-size: 18px;
					}

					p {
						font-size: 14px;
					}

					ul li {
						font-size: 14px;
					}

				}

				@media screen and (min-width: $desktop-lg) {
					padding: 24px;

					img {
						width: 160px;
					}

					h4 {
						font-size: 22px;
					}

					p {
						font-size: 16px;
					}

					ul li {
						font-size: 14px;
					}

				}

				@media screen and (min-width: $desktop-xl) {
					padding: 24px 12px 12px;

					img {
						width: 140px;
					}

					h4 {
						font-size: 18px;
					}

					p {
						font-size: 14px;
					}

					ul li {
						font-size: 13px;
					}

				}

			}

		}

	}

}

// Video Content
#video-player {
	width: 100%;
	max-width: 960px;
	border: none;

	.fluid-width-video-wrapper {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		clear: both;
	
		iframe, video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	
	}

	button {
		float: right;
		background-color: transparent;
		font-weight: 700;
		color: var(--vsg-blue);
		text-align: right;
		margin-bottom: 6px;
		border: none;
		cursor: pointer;
	}

}

::backdrop {
	background-color: #000;
	opacity: 0.75;
}

#video-content {

	.video-col {
		padding: 12px;

		a {
			position: relative;
			display: block;
			
			img {
				display: block;
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 1;
				background: url(../images/icon-play.svg) no-repeat center center;
				background-size: 48px;
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: #000;
				opacity: 0.5;
			}

		}

		h5 {
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			margin-top: 12px;
		}

	}

	@media screen and (min-width: $mobile-lg) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.video-col {
			width: 50%;
			flex: 0 0 auto;
		}

	}

	@media screen and (min-width: $desktop) {

		.video-col {
			width: 25%;
		}

	}

}

// Sub-Content
#sub-content {
	padding-top: 30px;
	padding-bottom: 30px;

	@media screen and (min-width: $tablet) {
		display: flex;
	}

	@media screen and (min-width: $desktop) {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.left-column {
		// height: 540px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		// background: url(../images/bg_muscle-car.png?v=2) no-repeat center center;
		// background-size: 410px auto;
		padding: 36px 0;

		h2 {
			font-size: 36px;
			font-weight: 700;
			line-height: 1;
			text-transform: uppercase;
			text-align: center;
			color: var(--vsg-red);
			margin-bottom: 0;
			padding-bottom: 0;
		}

		h3 {
			font-size: 30px;
			font-weight: 700;
			line-height: 1.2;
			text-align: center;
			color: var(--vsg-red);
			margin-bottom: 0;
			padding-bottom: 0;

			span {
				font-weight: 500;
				color: var(--text-color);
			}

		}

		img.large-logo {
			width: 600px;
			max-width: 100%;
			margin: 0 auto 36px;
		}

		p {
			font-size: 24px;
			font-weight: 400;
			line-height: 1.2;
			text-align: center;
			color: var(--text-color);
			margin-bottom: 24px;
			padding-bottom: 0;

			span {
				white-space: nowrap;
			}

		}

		@media screen and (min-width: $mobile-lg) {
			// background-size: 500px auto;
		}

		@media screen and (min-width: $tablet) {
			width: 50%;
			flex: 0 0 auto;
			// background-size: 410px auto;
			padding: 36px;

			h3 {
				font-size: 36px;

				span {
					display: block;
				}

			}

		}

		@media screen and (min-width: $tablet-lg) {
			// background-size: 500px auto;
		}

		@media screen and (min-width: $desktop) {
			height: 650px;
			// background-size: 620px auto;

			h2 {
				font-size: 42px;
			}

			p {
				font-size: 30px;
			}

		}

		@media screen and (min-width: $desktop-lg) {
			height: 740px;
			background-size: 700px auto;

			h2 {
				font-size: 48px;
			}

			p {
				max-width: 560px;
				margin: 0 auto;
			}

		}

	}

	.right-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgb(54,54,54);
		background: linear-gradient(180deg, rgba(54,54,54,1) 0%, rgba(120,120,120,1) 100%);
		padding: 36px 24px;
		border-radius: 20px;

		h2 {
			font-size: 36px;
			font-weight: 400;
			line-height: 1;
			text-transform: uppercase;
			text-align: center;
			color: var(--white);
			margin-bottom: 24px;
			padding-bottom: 0;
		}

		p {
			font-size: 24px;
			font-weight: 400;
			line-height: 1.2;
			color: var(--white);
			text-align: center;
			margin-bottom: 24px;
			padding-bottom: 0;
		}

		.btn-blue {
			background-color: var(--vsg-blue);
			font-size: 20px;
			font-weight: 700;
			color: var(--white);
			padding: 12px 24px;
			border-color: transparent;
			border-radius: 10px;
			transition: background-color .24s ease-in-out;

			&:hover, &:focus {
				background-color: var(--vsg-dark-blue);
			}

		}

		@media screen and (min-width: $tablet) {
			width: 50%;
			flex: 0 0 auto;

			&.full {
				width: 100%;
			}

		}

		@media screen and (min-width: $desktop) {
			padding: 36px 32px;

			h2 {
				font-size: 42px;
			}

			p {
				font-size: 24px;
				margin-bottom: 48px;
			}

			.btn-blue {
				font-size: 24px;
				padding: 24px 36px;
			}

		}

		@media screen and (min-width: $desktop-lg) {

			h2 {
				font-size: 48px;
			}

			p {
				font-size: 26px;
			}

		}

	}

}

// Footer Logos
#footer-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 30px;

	img {
		width: 50%;
		max-width: 355px;
		margin: 12px 0 12px;
	}

	@media screen and (min-width: $mobile-lg) {
		flex-direction: row;
		justify-content: center;

		img {
			width: 40%;
			padding: 0 12px;
		}

	}

}