@charset "UTF-8";
/* CSS Document */
* {
	box-sizing: border-box;
	font-family: "Arial";
	
}

html, body {
	margin: 0;
	padding: 0;
}



.main-header {
	/*background-color: #000000;*/
	position: absolute; /*POSITIONS NAV BAR ON TOP OF BACKGROUND IMAGE*/
	width: 100%;
	z-index: 99;
}

/***************NAVIGATION BAR*****************/

.main-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	background-color: rgba(23,217,152, .0);
	color: #ffffff;
	font-size: 1em;
	font-weight: lighter;
}

.brand-title {
	font-size: 1.5rem;
	margin: 1em 1.5rem 1.5em 1em;
}

.nav-logo {
	display: block;
	width: 200px;
}

.main-nav-links ul { 
	display: flex;
	margin: 0;
	padding: 0;
	font-size: 20px;
}

.main-nav-links li {
	list-style: none;
}

.main-nav-links li a {
	text-decoration: none;
	color: white;
	padding: 1rem;
	display: block;	
}

.main-nav-links li :hover {
	background-color: #E7E7E7;
	
}


.toggle-button {
	position: absolute; /*ALLOWS THE ABILITY TO ENFORCE BUTTON TO RIGHT SIDE OF SCREEN*/
	top: 1.75rem;
	right: 1rem;
	display: none; /*ENSURES THIS ONLY SHOWS UP ON SMALLER SCREENS*/
	flex-direction: column; /*ALIGNS SPANS ON TOP OF EACH OTHER*/
	justify-content: space-between;
	width: 30px;
	height: 20px;
}

.toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;	
}

@media (max-width : 999px ){
	.toggle-button {
		display: flex;
	}
	.main-nav-links {
		display: none;
		width: 100%;
	}
	.main-nav {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.brand-title {
		font-size: 1.5rem;
		margin: .5em 1.5rem 1.5em 1em;
}

	.nav-logo {
		display: block;
		width: 200px;
}
	.main-nav.active {
		background: #17D998;
	}
	.main-nav-links ul {
		width: 100%;
		flex-direction: column;
	}
	.main-nav-links {
		text-align: left;
	}
	.main-nav-links li a {
		padding: .5rem 1rem;
		font-size: 1.25em;
		margin: .5em 0em;
	}
	.main-nav-links.active {
		display: flex;
		background: #17D998;
		width: 100%;
		height: 20em;
	}
	.brand-title {
		padding-left: 0%;
	}
	.news-image {
		max-width: 100%;
	}

}

/*****************INTRODUCTION****************/

.intro-section {
	position: relative;
	width: 100%;
	max-height: 50em;
	border: thin #F87500;
}

.intro-section-img-container {
	max-height: 50em;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	position: relative;
}

.intro-section-img {
	margin: -800px 0px 0px -600px;
	filter: brightness(70%);
}

.intro-overlay-container {
	display: flex;
	position: absolute;
	width: 100%;
	top: 25%;
	left: 25%;
}

.intro-title-container {
	width: 50%;
	max-width: 550px;
	padding: 3em 0 0 0;
	text-align: left;
}

.intro-title {
	/*position: absolute;
	top: 30%;
	left: 20%;
	top: 250px;
	left: 260px;*/
	font-size: 4em;
	font-weight: bolder;
	color: #FFFFFF;
}

.intro-title-sub-text {
	/*position: absolute;
	top: 40%;
	left: 20.5%;
	top: 330px;
	left: 270px;*/
	font-size: 1.5em;
	color: #FFFFFF;
	padding-left: 10px;
}

.phone-container {
	width: 25%;
	
}
.phone-container img {
	/*position: absolute;
	/*top: 20%;
	left: 55%;
	top: 200px;
	left: 900px;*/
	width: 15em;
}

.intro-title-button {
	margin: 2em 0;
	text-align: center;
	vertical-align: middle;
	padding: 1em .5em;
	cursor: pointer;
}

.intro-title-button-style {
	color: white;
	background-color: #17D998;
	border: none;
	border-width: 1px;
	border-radius: 10em;
	font-size: 1.2em;
	font-weight: bold;
	width: 250px;
	height: 70px;
}
@media (max-width: 999px) {
	.intro-section {
	width: 100%;
	max-height: 70em;
	border: thin #F87500
}

.intro-section-img-container {
	max-height: 65em;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	margin-bottom: 4em;
}

.intro-section-img {
	margin: -800px 0px 0px -1250px;
	filter: brightness(70%)
}

.intro-overlay-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	top: 10%;
	left: 0%;
}

.intro-title-container {
	width: 100%;
	max-width: 550px;
	padding: 3em 0 3em 0;
	text-align: center;
}

.intro-title {
	/*position: absolute;
	top: 30%;
	left: 20%;
	top: 250px;
	left: 260px;*/
	font-size: 4em;
	font-weight: bolder;
	color: #FFFFFF;
}

.intro-title-sub-text {
	/*position: absolute;
	top: 40%;
	left: 20.5%;
	top: 330px;
	left: 270px;*/
	font-size: 1.5em;
	color: #FFFFFF;
}

.phone-container {
	width: 100%;
	
}
.phone-container img {
	/*position: absolute;
	/*top: 20%;
	left: 55%;
	top: 200px;
	left: 900px;*/
	width: 15em;
}

}
/*****************FEATURES****************/
.content-section {
	width: 100%;
	/*border: 2px solid #F80004;*/
	padding: 5em 0em;
	background: #ECECEC;
	overflow: hidden;
	/*box-shadow: 5px 5px 5px 1px #D3D3D3;*/
}

.feature-section {
	width: 100%;
	max-width: 1300px;
	overflow: hidden;
	/*border: 1px solid #FF00F6;*/
	margin: 0em auto;
	background: #FFFFFF;
	/*box-shadow: 5px 5px 5px 1px #D3D3D3;*/
}

.feature-content-right { /*IMAGE LEFT / CONTENT RIGHT*/
	display: inline-grid;
	/*grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));*/
	grid-template-columns: 60% 40%;
	grid-template-rows: 2, 350px;
	/*border: 1px solid #14FA02;*/
	
}
.feature-content-left { /*IMAGE RIGHT / CONTENT LEFT*/
	display: inline-grid;
	/*grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));*/
	grid-template-columns: 40% 60%;
	grid-template-rows: 2, 350px;
	/*border: 1px solid #14FA02;*/
	
}

.feature-description-block-rt {
	/*border: 1px solid #EF00F9;*/
	display: flex;
  	justify-content: left;
  	align-items: left;
	flex-direction: column;
	order: 2;
	padding: 0em 12em 0em 3em;
}

.feature-description-block-lf {
	/*border: 1px solid #EF00F9;*/
	display: flex;
  	justify-content: left;
  	align-items: left;
	flex-direction: column;
	order: 1;
	padding: 0em 12em 0em 6em;
}

.feature-header {
	font-size: 3em;
	color: #000000;
}

.feature-description {
	font-size: 1.5em;
	padding: 0em .75em 0em 0em;
}

.feature-img-lf-container {
	display: flex;
	height: 30em;
	overflow: hidden;
  	justify-content: flex-start; /*ALIGNS ITEMS TO THE RIGHT OF THE FLEX BOX*/
  	align-items: center;
	order: 1;
}

.feature-img-lf-img {
	width: 90%;
}

.feature-img-rt-container {
	/*border: 1px solid #026FC2;*/
	display: flex;
	height: 30em;
	overflow: hidden;
  	justify-content: flex-end; /*ALIGNS ITEMS TO THE RIGHT OF THE FLEX BOX*/
  	align-items: center;
	order: 2;
}

.feature-img-rt-img {
	width: 90%;
	}

.feature-img-rt-img #iphoneWeb {
	padding-right: 6em;
}


.button {
	display: block;
	margin: 2em 0em 0em 0em;
	text-align: center;
	vertical-align: middle;
	padding: 1em .5em;
	cursor: pointer;
}


.button-tour-plan {
	display: block;
	margin: 6em auto;
	text-align: center;
	vertical-align: middle;
	padding: 1em .5em;
	cursor: pointer;
}

.button-style {
	color: white;
	background-color: #17D998;
	border: solid;
	border-width: 1px;
	border-radius: 2em;
	font-size: 1em;
	font-weight: bold;
	width: 200px;
	height: 50px
}

.href-underline {
	text-decoration: none;
}
@media (max-width: 999px) {
	
	.content-section {
		width: 100%;
		/*border: 2px solid #F80004;*/
		padding: 0em 0em 0em;
		background: #FFFFFF;
		}

	.feature-section {
		width: 100%;
		max-width: 450px;
	}

	.feature-content-left {
		display: grid;
		grid-template-columns: 100%;
		padding: 0;
		justify-content: center;
	}
	
	.feature-content-right {
		display: grid;
		grid-template-columns: 100%;
		padding: 0;
		justify-content: center;
	}

	.feature-description-block-lf {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		padding: 0em 1em 1.5em;
		order: 2;
	}
	.feature-description-block-rt {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		padding: 0em 1em 1.5em;
		order: 2;
	}
	
	.feature-header {
		font-size: 2.75em;
		color: #000000;
		padding: 0em .75em;
	}
	
	.feature-img-lf-container {
		display: flex;
		justify-content: center;
		align-items: center;
		order: 1;
	}
	
	.feature-img-lf-img{
		width: 100%;
		/*FOR FADE TEST ONLY*/
		min-width: 300px;
		object-fit: cover;
		}
	
	.feature-img-rt-container {
		/*border: 1px solid #026FC2;*/
		display: flex;
		justify-content: center;
		align-items: center;
		order: 1;
		padding: 0;
	}
	
	.feature-img-rt-img{
		width: 100%;
		min-width: 300px;
		object-fit: cover;
		}
	
	.feature-img-rt-img #iphoneWeb {
		padding-right: 0;
	}
	
	.fade-in-img {
		opacity: 0;
		transition: opacity 250ms ease-in;
		/*BELOW CSS KEEPS ALIGNMENT OF PARENT DIV*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.fade-in-img.appear {
		opacity: 1;
		/*BELOW CSS KEEPS ALIGNMENT OF PARENT DIV*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}
	
	.fade-in-descr {
		opacity: 0;
		transition: 600ms;
		transform: translateY(-30px);
		/*BELOW CSS KEEPS ALIGNMENT OF PARENT DIV*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.fade-in-descr.appear {
		opacity: 1;
		transform: translateY(0px);
		/*BELOW CSS KEEPS ALIGNMENT OF PARENT DIV*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}
	
}

/*******************PLAN GRID************************/
/*REFERENCE: https://www.sitepoint.com/css-grid-repeat-function/
sticky header: https://melanie-richards.com/blog/css-grid-sticky/#:~:text=If%20you've%20ever%20tried,two%20layout%20concepts%20working%20together.
*/

.tour-plan-section {
	padding: 0 10em;
	margin-top: 5em;
}

.tour-plan-grid-container {
	height: 100%;
	max-width: 950px;
	min-width: 650px;
	margin: 0 auto;	
}

.feature-category {
	margin: 0em 1em;
	padding-bottom: .5em;
	color: #01C8F9;
}

.table-header {
	position: sticky;
	top: 0;
	background: #FFFFFF
}

.table-header-grid-wrapper {
	display: grid;
	max-width: 100%;
	grid-template-columns: 50% 25% 25%;
	grid-template-rows: 1, 400px;
	padding: 1em;
}
.table-row {
	display: grid;
	width: 100%;
	grid-template-columns: 50% 25% 25%;
	grid-template-rows: 1, 400px;
	padding: 1em;
}

.table-header-feature {
	margin: 0em 1em;
	
}

.table-header-pro {
	font-size: 2em;
	margin: 0em .5em;
	text-align: center;
}

.table-header-legacy {
	font-size: 2em;
	margin: 0em .5em;
	text-align: center;
}

.row-feature {
	border-bottom: 1px solid #D3D3D3;
	margin: 0em 1em;
	padding-bottom: .5em;

}

.feature-available-yes {
	border-bottom: 1px solid #D3D3D3;
	margin: 0em 1em;
	text-align: center;
	font-size: 1.5em;
	font-weight: 900;
	line-height: 15px;
	color: #17D998;
}

.feature-available-no {
	border-bottom: 1px solid #D3D3D3;
	margin: 0em 1em;
	text-align: center;
	font-size: 1.5em;
	font-weight: 900;
	line-height: 15px;
	color: #EDEDEE;
}

.player-max {
	border-bottom: 1px solid #D3D3D3;
	margin: 0em 1em;
	text-align: center;
	font-size: 1em;
	line-height: 15px;
	color: #000000;
}

@media (max-width: 999px){
	
	.tour-plan-section {
		padding: 0em;
		margin-top: 5em;
	}

	.tour-plan-grid-container {
		height: 100%em;
		max-width: 950px;
		min-width: 375px;
		margin: 0;	
	}

	.feature-category {
		margin: 0em 1em ;
		padding: 1em 0em;
		color: #01C8F9;
	}

	.table-header {
		position: sticky;
		top: 0;
		background: #FFFFFF
	}

	.table-header-grid-wrapper {
		display: grid;
		max-width: 100%;
		grid-template-columns: 50% 25% 25%;
		grid-template-rows: 1, 400px;
		padding: 1em;
	}
	.table-row {
		display: grid;
		width: 100%;
		grid-template-columns: 50% 25% 25%;
		grid-template-rows: 1, 400px;
		padding: .1em;
	}

	.table-header-feature {
		margin: 0em 1em;
	
	}

	.table-header-pro {
		font-size: 1.25em;
		font-weight: bold;
		margin: 0em;
		text-align: center;
	}

	.table-header-legacy {
		font-size: 1.25em;
		font-weight: bold;
		margin: 0em .5em;
		text-align: center;
	}

	.row-feature {
		display: flex;
		justify-content: left;
		align-items: center;
		border-bottom: 1px solid #D3D3D3;
		margin: 0em 1em;
		padding: .5em 0em;

	}

	.feature-available-yes {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #D3D3D3;
		padding: 0px 0px 10px 0px;
		margin: 0em 1em;
		font-size: 1.5em;
		font-weight: 900;
		line-height: 15px;
		color: #17D998;
	}
	
	.feature-available-no {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #D3D3D3;
		padding: 0px 0px 10px 0px;
		margin: 0em 1em;
		font-size: 1.5em;
		font-weight: 900;
		line-height: 15px;
		color: #EDEDEE;
	}
	
	.button-tour-plan {
		display: block;
		margin: 6em auto;
		text-align: center;
		vertical-align: middle;
		padding: 1em .5em;
		cursor: pointer;
	}

	.player-max {
		border-bottom: 1px solid #D3D3D3;
		margin: 0em 1em;
		text-align: center;
		font-size: .75em;
		line-height: 15px;
		color: #000000
	}

}

/**********************FOOTER******************/

.footer-container {
	display: inline-grid;
	width: 100%;
	height: 25em;
	grid-template-columns: 20% 20% 20%;
	background: #000000;
}

.footer-column {
	display: flex;
	flex-direction: column;
	padding: 5em 0em 0em 5em;

}
.footer-grid-header {
	display: flex;
	width: 100%;
	padding: 2.5em 0em 0em 2.5em;
	color: #17D998;
}

.footer-grid-items {
	color: #FFFFFF;
	list-style-type: none;
	width: 100%;
}

.footer-grid-items li {
	margin: 1em 0em;
}

.footer-grid-items li a {
	color: #FFFFFF; 
	text-decoration: none;
}

.footer-bottom-line {
	display: flex;
	width: 100%;
	height: 50px;
	padding-left: 10em;
	align-items: center;
	font-size: .75em;
	background: #000000;
	color: #848181;
	border-top: 1px solid #848181;
}

.ig-logo {
	width: 1.5em;
}

@media (max-width: 999px) {
	
	.footer-container {
		display: block;
		width: 100%;
		height: 600px;
		background: #000000;
	}

	.footer-column {
		display: block;
		width: 100%;
		flex-direction: column;
		padding: 2em 0em 0em 1em;
	}
	
	.footer-grid-header {
		display: block;
		width: 100%;
		padding: 1em 0em 0em 2.5em;
		color: #17D998;
	}

	.footer-grid-items {
		color: #FFFFFF;
		list-style-type: none;
		width: 100%;	
	}

	.footer-grid-items li {
		margin: 1em 0em;
	}

	.footer-bottom-line {
		display: flex;
		width: 100%;
		height: 50px;
		padding-left: 5em;
		align-items: center;
		font-size: .75em;
		background: #000000;
		color: #848181;
		border-top: 1px solid #848181;
	}
	
	.ig-logo {
	width: 1.5em;
	}
}