.displaynone{
	display:none;
}
@media (max-width: 900px) { /* This hides on screens smaller than 900px */
	.hide-on-small-screen {
		display: none !important;
	}
	.fastFlash{
		animation: topToBottom .8s linear 1 forwards;
		font-size:62px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		top:52%;left:0;right:0;bottom:0;
	}
	.medFlash{
		animation: topToBottom 1.6s linear 1 forwards;
		font-size:62px;
		opacity: 0;
		overflow: hidden;
		position:absolute;
		top:52%;left:0;right:0;bottom:0;
	}
	
	.finalFlash{
		animation: finalFlash 1.6s ease-in 1 forwards;
		font-size:62px;
		opacity: 0;
		overflow: hidden;
		position:relative;
		top:20%;
	}
	.drop{
		animation: slideDown 1s linear 1 forwards;
		font-size:92px;
		line-height: 85px;
		opacity: 0;
		overflow: hidden;
		position:relative;
		top:18%;
	}
	
}
#header{
	display:flex;
	flex-flow:row nowrap;
	position:fixed;top:0;
	width:100%;
	flex:1;
	z-index:10;
	padding:.5em 1em 0em 1em;
}
#menu{
	display:flex;
	justify-content:space-between;
	align-items:center;
	display:inline-flex;
	flex:12 0;
	text-align:center;
	padding:0 3em 0 3em;
	max-height:64px;
}
#menu a.menulink {
	color:white;
	text-decoration: none;
	font-weight: 600;
}
#menu a.menulink:visited {
	color:white;
}
#menu a.menulink:hover {
	background-color: transparent;
	color: #f3b407;
}
#loginContainer a.whitelink {
	color:white;
	text-decoration: none;
	font-weight: 600;
}
#loginContainer a.whitelink:visited {
	color:white;
}
#loginContainer a.whitelink:hover {
	background-color: transparent;
}
#header a.logo {
	color:white;
	text-decoration: none;
	font-weight: 600;
}
#header a.logo:visited {
	color:white;
}
#header a.logo:hover {
	background-color: transparent;
}
#mainLogo{
	flex:2 1;

	min-width:0;
	max-height:57px;
	max-width:183px;
	padding-bottom: 3px;
}

#loginFlush, #registerFlush{
	display:none;
}
#loginContainer{
	flex: 6 0;
	display:flex;
	flex-flow: row nowrap;
}
#signup h4.darktext {
	color:rgb(0, 0, 0);
	font-weight: 600;
}
#signup p.darktext {
	color:rgb(0, 0, 0);
	font-size: 16px;
	font-weight: 600; 
}

#loginContainer h5 {
	font-weight: 600;
	color: #fff;
}
#login{
	flex:1;
	display:flex;
	flex-flow:row wrap;
	background-color:#444444;
	padding:.5em;
}
#login form{
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	justify-content:space-between;
}
#login input{
	background-color:#bbbbbb;
	border:none;
}
#login button{
	background-color:#e9a521;
	color:white;
	font-size: 18px;
	font-weight: 600;
	padding:.2em .5em .2em .5em;
}
#login a{
	color:#e9a521;
	font-size:1.2em;
}
#login *, #signup *{
	margin:.2em;
}
#signup{
	flex:1;
	width:14em;
	padding:.5em;
	text-align:center;
	width:14em;
	display:flex;
	flex-flow:column;
}
#signup button{
	background-color:#e9a521;
	padding:.2em .5em .2em .5em;
	color:white;
	font-size:1.2em;
	margin:auto;
}
#signup a.signupbtn {
	color:white;
	text-decoration: none;
	font-weight: 600;
}
#signup a.signupbtn:visited {
	color:white;
}
#signup a.signupbtn:hover {
	background-color: transparent;
}
#signup a.havecodebtn {
	color:rgb(0, 0, 0);
	text-decoration: none;
	font-weight: 600;
}
#signup a.havecodebtn:visited {
	color:rgb(0, 0, 0);
}
#signup a.havecodebtn:hover {
	color:rgb(4, 20, 40);
	background-color: transparent !important;
	text-decoration: underline !important;
}
#front_page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #eeeeee;
    background-size: cover; /* Use cover to scale the background image */
    overflow: hidden;
}
/* Add a media query for screens with a maximum width of 768px (adjust this value as needed) */
@media (max-width: 992px) {
    #mainvideo {
        position: absolute;
        top: 0;
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Move left by 50% of its own width to center it */
        width: 100%; /* Make sure the video covers the entire width */
        height: auto; /* Maintain the video's aspect ratio */
    }

}

h1.thick-bold-yellow {
	font-size:5em;
	font-weight: 900;
	color: #e9a521;
}
h1.mid-bold-yellow {
	font-size:5em;
	font-weight: 700;
	color: #e9a521;
}
h1.mid-bold-yellow-inline {
	font-size:5em;
	font-weight: 700;
	color: #e9a521;
	display: inline;
}
h4.mid-bold-yellow-inline {
	font-size:2.5em;
	font-weight: 700;
	color: #e9a521;
	display: inline;
}
h1.thick-bold-blue {
	font-size:5em;
	font-weight: 900;
	color: #324a6d;
}
h1.mid-bold-blue {
	font-size:5em;
	font-weight: 700;
	color: #324a6d;
}
h2.mid-bold-blue {
	font-size:3.5em;
	font-weight: 500;
	color: #324a6d;
}

h1.mid-bold-blue-inline {
	font-size:5em;
	font-weight: 700;
	color: #324a6d;
	display: inline;
}
h4.mid-bold-blue-inline {
	font-size:2.5em;
	font-weight: 700;
	color: #324a6d;
	display: inline;
}	
img.yellow-stars {
		font-size:5em;
		font-weight: 500;
		color: #e9a521;
}
img.prices {
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	margin: 15px;
}

/* Add this CSS to control the order of columns on small screens */
@media (max-width: 996px) {
    .changeOrder-1 {
        order: 2; /* Change the order for small screens */
    }
    .changeOrder-2 {
        order: 1; /* Change the order for small screens */
    }
	.h4 {
		font-size:1em !important;
	}
	h4 {
		font-size:1em !important;
	}
	p {
		font-size:1em !important;
	}
	li {
		font-size:1em !important;
	}
	h1.thick-bold-yellow {
		font-size:3em;
		font-weight: 700;
		color: #e9a521;
	}
	h1.mid-bold-yellow {
		font-size:3em;
		font-weight: 500;
		color: #e9a521;
	}
	h1.mid-bold-yellow-inline {
		font-size:3em;
		font-weight: 500;
		color: #e9a521;
		display: inline;
	}
	h4.mid-bold-yellow-inline {
		font-size:2em !important;
		font-weight: 500;
		color: #e9a521;
		display: inline;
	}
	h1.thick-bold-blue {
		font-size:3em;
		font-weight: 700;
		color: #324a6d;
	}
	h1.mid-bold-blue {
		font-size:3em;
		font-weight: 500;
		color: #324a6d;
	}
	h2.mid-bold-blue {
		font-size:2em;
		font-weight: 300;
		color: #324a6d;
	}

	h1.mid-bold-blue-inline {
		font-size:3em;
		font-weight: 500;
		color: #324a6d;
		display: inline;
	}
	h4.mid-bold-blue-inline {
		font-size:2em !important;
		font-weight: 500;
		color: #324a6d;
		display: inline;
	}	
	img.yellow-stars {
			font-size:3em;
			font-weight: 300;
			color: #e9a521;
	}
	img.prices {
		border: 1px solid #ddd;
		border-radius: 5px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
		margin: 15px;
}
}

.alert {
    z-index: 1311;
	text-align: center;
}
/*
.alert {
	padding: 20px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert::before, .alert::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;

  }
  .alert::before {
	left: 0;
	background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
  }
  .alert::after {
	right: 0;
	background-image: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
  }
  
  #logout-text {
    cursor: pointer;
}

.alert-content {
    padding: 20px;
    background-color: white;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 10px; 
    width: 80%;
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 112;
}

.alert-close {
    position: absolute;
    right: 5px;
    top: 0px;
    cursor: pointer;
    color: #333;
    font-size: 2em;
}
*/
#words{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	font-size:5vw;
	font-weight:bold;
	color:white;
	width:100%;
	text-align:center;
}
#overlay{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	font-size:5vw;
	font-weight:bold;
	color:white;
	background-color:rgba(0,0,0,.4);
	width:100%;
	text-align:center;
}

#getStarted {
	font-size: 0.5em;
    z-index: 1000;
/*  margin-top: 1em;
	padding: 0.2em; */
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	color: #eeeeee;
  }
  #getStarted:hover {
	background-color: transparent !important;
  }


.chevron_right{
	height:1em;
	flex:0;
}
.chevron_down {
	height: 1em;
	margin-left: auto;
	margin-right: auto;
	opacity: 1 !important;
	transition: transform 0.3s ease, opacity 0.3s ease;
	animation: shake 4s linear infinite; /* Infinite loop for continuous animation */

  }
  /* Pause the animation for 2 seconds on hover */
.chevron_down:hover {
	animation-play-state: paused; /* Pause the animation on hover */
	transition-delay: 2s; /* Delay the animation restart by 2 seconds */
  }
/*								Animations									*/
.fastFlash{
	animation: topToBottom .8s linear 1 forwards;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top:52%;left:0;right:0;bottom:0;
}
.medFlash{
	animation: topToBottom 1.6s linear 1 forwards;
	opacity: 0;
	overflow: hidden;
	position:absolute;
	top:52%;left:0;right:0;bottom:0;
}

.finalFlash{
	animation: finalFlash 1.6s ease-in 1 forwards;
	opacity: 0;
	overflow: hidden;
	position:relative;
	top:20%;
}
.drop{
	animation: slideDown 1s linear 1 forwards;
	opacity: 0;
	overflow: hidden;
	position:relative;
	top:18%;
}
.fadeIn {
	animation: fadeIn 1.5s ease-in 1 forwards;
	opacity: 0;	
	position:relative;
	top:14%;
  }
.finalFlash>p,.drop{
	text-align:center;
	padding:0;
	margin:0;
}
.slidingVertical div:nth-child(1){
	animation-delay: .3s;
}
.slidingVertical div:nth-child(2){
	animation-delay: .3s;
}
.slidingVertical div:nth-child(2){
	animation-delay: 1.1s;
}
.slidingVertical div:nth-child(3){
	animation-delay: 1.9s;
}
.slidingVertical div:nth-child(4){
	animation-delay: 2.7s;
}
.slidingVertical div:nth-child(5){
	animation-delay: 4.3s;
}
.slidingVertical div:nth-child(6){
	animation-delay: 5.9s;
}
.slidingVertical div:nth-child(7){
	animation-delay: 7.5s;
}
.slidingVertical div:nth-child(8){
	animation-delay: 8.5s;
}
.slidingVertical a:nth-child(9){
	animation-delay: 10.1s;
}
.slidingVertical img:nth-child(10){
	animation-delay: 10.1s;
}
/*Flash Animation*/
@keyframes topToBottom{
	0% {opacity:1;}
	1% {opacity:1;}
	99% {opacity:1;}
	100% {opacity:0;}
}
/*finalFlash Animation*/
@keyframes finalFlash{
	0% {opacity:1;}
	100% {opacity:1;}
}
/*slideDown Animation*/
@keyframes slideDown{
	0% {opacity:0;transform:translateY(-50%)}
	1% {opacity:0;transform:translateY(-50%)}
	99% {opacity:1;transform:translateY(0)}
	100% {opacity:1;transform:translateY(0)}
}
/*fadeIn Animation*/
@keyframes fadeIn{
	0% {opacity:0;}
	100% {opacity:1;}
}
/* chevron shake animation start */
/* Define the shake animation */
@keyframes shake {
	0%, 100% {
	  transform: translateY(0);
	}
	25% {
	  transform: translateY(-2px);
	}
	50% {
	  transform: translateY(2px);
	}
	75% {
	  transform: translateY(-2px);
	}
  }
  
  #getStarted:hover {
	color: #fff;
	box-shadow: 0 10 15px rgba(157, 157, 137, 0.1);
	border: 0px solid rgb(130, 130, 130);
	background-color: rgba(68, 68, 68, 0.25); 
	border-radius: 50px;
 
}

  /* Apply the shake animation on hover */
  #getStarted:hover .chevron_down {
	animation: shake 1.0s ease infinite;
  }
/*											End of Animations 									*/
#mainvideo{
	position:absolute;top:0;left:0;
	width:auto;height:auto;
	z-index:-1;
	min-width:100%;min-height:100%;
	opacity: 0;
}
#mainvideo.loaded {
    display:flex;
	position:absolute;top:0;left:0;
	width:auto;height:auto;
	z-index:-1;
	min-width:100%;min-height:100%;
	opacity: 1;
	transition: opacity 2s ease-in-out;
	
}
#poster-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Adjust the transition duration as needed */
}
#mainvideo.poster {
    display: none;
}
#scrolling_body{
	margin-top:100vh;
	text-align:center;
	background-color:white;
}
.newrow{
	width:100%;
	display:flex;
}
.flexcolumn{
	flex-flow:column;
	justify-content:space-between;
	align-items:center;
}
.flexrow{
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:stretch;
}
.nowrap{
	flex-wrap:nowrap;
}
.textwidth{
	width:60em;
	max-width:100%;
	margin-bottom:2em;
}
.textwidth>h1{
	margin-bottom:1em;
}
.textwidth>p{
	width:100%;
}
.divider{
	width:85%;
	border:1px solid;
	margin: 4em auto 4em auto;
}
.grow{
	flex:1 0 auto;
}
#pitch{
	padding-top:80px;
	min-width:10em;
	max-width:100%;
	display:flex;
	justify-content:center;
	align-items:stretch;
	flex-flow:row wrap;
	margin:auto;
}
.step{
	width:50%;
	padding-bottom:1em;
	padding-top:1em;
	text-align:justify;
}
.step>img{
	width:20%;
	height:100%;
	float:left;
	margin:2%;
}
.step h5{
	color:red;
	margin-bottom:1em;
	text-align:left;
}
.step p{
	overflow:hidden;
}

/* The modal container */
/* The modal background */
.modal-background {
    display: none; /* Hide the modal by default */
    position: fixed; /* Position the modal in the center of the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Gray out the background */
    z-index: 22; /* Make sure the modal is on top of other elements */
}


/* The modal content */
.modal-content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 20px;
    padding: 30px;
    z-index: 33;
	max-height: 90vh; /* Set a maximum height based on viewport height */
  // padding-right: 17px; /* Create space for the scrollbar (adjust as needed) */

}
/* Adjust the scrollbar width as needed (you may need to use a more specific selector) */
::-webkit-scrollbar {
    width: 15px; /* Adjust the width as needed */
}

/* Style the scrollbar track (optional) */
::-webkit-scrollbar-track {
    background-color: transparent; /* Set a background color if desired */
}

/* Style the scrollbar thumb (optional) */
::-webkit-scrollbar-thumb {
    background-color: #dbdada; /* Set the thumb color */
    border-radius: 6px; /* Set the thumb's border radius */
}

.modal-background .modal-content-container {
    display: block;
	overflow-y: auto; /* Enable vertical scrolling when content overflows */
 
}

.modal-header {
    position: relative;
    top: 0px;
    right: 0px;
    z-index: 99999;
}

.modal-close-button {
	position: absolute;
	top: 18px;
	right: 25px;
    font-size: 28px;
    cursor: pointer;
	border: 0px;
	font-weight: 600;
}


.modal-content-container .modal-close-button {
    position: absolute;
}



/* The close button is hidden by default */
.modal-close-button {
    display: none;
}

/* Show the close button when the modal is open */
.modal-open .modal-content-container .modal-close-button {
    display: block;
}




#footer{
	margin-top:1em;
	margin-bottom:2em;
}
#signmeup{
	display:flex;
	flex-flow:row wrap;
	align-items:center;
}
.underline_amber{
	border-bottom:.2em solid #FFBF00;
}
.bg_orange {
    /* Fallback background color */
    background-color: #fac011;

    /* Gradient definition */
    background-image: linear-gradient(to bottom, #fee659, #e9a721);
}
.text_orange{color:	#f2a018;}

@media only screen and (max-width: 1200px) {
	/* On small screens, make the modal take up 95% of the screen */
	.modal-background {
	  width: 100%;
	  height: 100%;
	  top:0;
	  left:0;
	}
	.modal-content-container {
	  width: 75%;
	}
	#menu a:not(#loginFlush):not(#registerFlush):not(#contact_link):not(#team_link):not(#plans_link) {
        display: none;
    }
  }

@media only screen and (max-width: 800px) {
	/* On small screens, make the modal take up 95% of the screen */
	.modal-background {
	  width: 100%;
	  height: 100%;
	  top:0;
	  left:0;
	}
	.modal-content-container {
	  width: 95%;
	}#login{
		position: absolute;
		top: 2px;
		left: 160px;
		flex:1;
		width:14em;
		display:flex;
		flex-flow:row nowrap;
		background-color:#444444;
		padding:0em;
		margin:2em;
	}
	#signup{
		position: absolute;
		top: 2px; 
		left: 390px;
		width:14em;
		flex:1;
		padding:.5em;
		text-align:center;
		display:flex;
		flex-flow:wrap;
		margin:2em;
	}
	#menu a:not(#loginFlush):not(#registerFlush) {
        display: none;
    }

  }

  @media only screen and (max-width: 600px) {
	/* On small screens, make the modal take up 95% of the screen */
	
#login{
		position: absolute;
		top: 60px;
		left: 0px;
		flex:1;
		width:14em;
		display:flex;
		flex-flow:row nowrap;
		background-color:#444444;
		padding:0em;
		margin:1em;
	}
	#signup{
		position: absolute;
		top: 60px; 
		left: 230px;
		width:11em;
		flex:1;
		padding:.9em;
		text-align:center;
		display:flex;
		flex-flow:wrap;
		margin:1em;
	}
	#menu a:not(#loginFlush):not(#registerFlush) {
        display: none;
    }

  }