html,body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100%;
    max-height: 100%;
	max-width: 100%;
}

body{
	 background-color: #ffffff;
}

.nav > li > a {
    color: rgb(124, 161, 204) !important;
}

.nav > li > a:hover,
.nav > li > a:focus {
    color: rgb(50, 88, 131) !important;
    background-color: rgba(50, 88, 131, 0.15);
}

.nav > .active > a {
    color: rgb(50, 88, 131) !important;
    background-color: rgba(50, 88, 131, 0.3);
}

.nav > .active > a:hover,
.nav > .active > a:focus {
    color: rgb(21, 55, 96) !important;
    background-color: rgba(7, 35, 68, 0.3);
}

#mobile-nav {
    margin: auto;
	margin-top: 10vh;
    width: 80%;
    height: 80%;
	background-color: rgba(255, 255, 255, 0.9);
}

#mobile-nav > li {
    height: 16.66%;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
	display: flex;
    justify-content: center;
    align-items: center;
}

#mobile-nav > li > a {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* For the hamburger icon */
.icon-bar {
    background-color: black
}

#nav-toggle {
    cursor: pointer; padding: 16px 35px 10px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: black;
    position: absolute;
    display: block;
    content: '';
}

#nav-toggle span:before {
    top: -10px;
}

#nav-toggle span:after {
    bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    transition: all 250ms ease-in-out;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-toggle.active span:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* Hamburger icon stuff ends here */

#header {
    height: 51px;
}

.logo {
	height: 5vh;
	max-height: 50px;
	position: absolute;
	top: 3vh;
    left: 3vw;
	z-index: 90;
}

#video-background {
	/*  making the video fullscreen  */
	position: fixed;
	top: 0; 
	left: 0;
	min-width: 100%; 
	min-height: 100%;
	height: 100vh;
	width: 100vw;
	z-index: -100;
}

#mobile-overlay {
    display: none;
    position: absolute;
    z-index: 1030;
    width: 100%;
    height: 100%;
	background-color: rgba(221, 221, 221, 0.6);
}

#mobile-selector {
	display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.footer {
    position: absolute;
    bottom: 0px;
	left: 0px;
	right: 0px;
	margin-top: -50px;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 5vh;
	max-height: 5vh;
    background-color: #ed0d6e;
	display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	color: #fff582;
	font-size: 2vh;
}

#content-container {
	height: 87vh;
	padding: 5px;
	display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
	display: flex;
    justify-content: center;
    align-items: center;
}

ol {
    -webkit-padding-start: 40px;
}

ol > li {
    padding-bottom: 5px;
}

#form-container{
	width: 90%; 
	height: 90%; 
	max-width: 700px; 
	max-height: 1080px; 
	border: 3px solid rgb(50, 88, 131);
	background-color: #dfdfdf;
	overflow-y: auto;
	margin: 0 auto;
}

.custom-form{
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	margin: 7px;
}

.custom-form-control{
    display: block;
    width: 100%;
    padding: 2px;
    line-height: 1.4;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-style{
    width: 50%
}

.form-style2{
    width: 100%
}

.facebook-button-container {
	z-index: 1031;
}

.facebook-button-container-hidebehind {
	z-index: 1029 !important;
}


@media (min-width: 768px){
	.share-button-buffer {
		top: 5px;
	}
	.facebook-button-container {
		position: absolute;
		width: 90px;
		left: 3vw;
		top: 9vh;
	}
    .img-class {
		height: 87vh;
		max-width: 100%;
	}
	.video-side-image {
		position: absolute; 
		left: 10px; 
		max-height: 87vh; 
		max-width: 30%; 
		margin: auto 0;
		z-index: -1;
	}
	.visible-xs-only {
		display: none !important;
	}
}

@media (min-width: 768px) and (orientation: portrait){
	.facebook-button-container {
		left: 1vw !important;
		top: 6vh !important;
	}
    .container {
		margin-right: 10px !important;
	}
	#bus {
		max-height: 87vh !important;
		max-width: 50% !important;
		z-index: -1 !important;
	}
	.logo{
		max-height: 35px;
		top: 1vh !important;
		left: 1vw !important;
	}
	.video-side-image {
		top: unset; 
		max-height: 87vh; 
		max-width: 30%; 
		margin: auto 0;
	}
}

@media (max-width: 767px){
	.facebook-button-container {
		position: absolute;
		right: 75px;
		top: 13px;
	}
	.img-class {
		height: 90%;
	}
	.container {
		margin-right: 5px !important;
	}
	.form-style{
		width: 100% !important;
	}
	#video-background {
		display: none;
	}
	.index-text {
		margin: 48% 0 auto 0 !important;
		width: 60%;
		position: absolute;
		left: 5%;
	}
	.link-button {
		max-height: 5vh;
	}
	.youtube-embed{
		position: inherit !important;
		right: 2.5% !important;
		margin: auto 0;
		width: 95% !important;
		height: 85% !important;
		z-index: 3;
	}
	#tandc-holder {
		width: 90% !important;
	}
	#content-container {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}

@media (max-width: 400px){
	#portrait img {
		left: 10px;
	}
}

.image-holder {
	width: 100%;
	height: 87vh;
	display: -webkit-flex;
    -webkit-justify-content: center;
	-webkit-flex-wrap: wrap;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#portrait{
	height: 87vh;
	margin-top: 5px;
	width: auto; 
	max-width: 100%;
	display: -webkit-flex !important;
    -webkit-justify-content: center;
	-webkit-flex-wrap: wrap;
	display: flex !important;
	justify-content: center;
	flex-wrap: wrap;
}

#portrait img {
	margin: auto;
    width: 90%;
    height: 84vh;
    max-height: 84vh;
    z-index: -1;
    position: absolute;
}

#landscape {
	height: 87vh;
	margin-top: 5px;
	max-width: 100%;
	width: 100vw;
	display: -webkit-flex;
    -webkit-align-items: center;
	display: flex;
	align-items: center;
}

.index-text {
	margin: auto;
	font-size: 2.5vh;
	text-align: center;
	font-family: 'Lato', sans-serif;
	z-index: 2;
	background: rgba(255, 255, 255, 0.8);
	padding: 6px;
}

.link-button {
	appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
	padding: 0px 15px;
    color: white;
    background-color: #447b9a;
    background-image: linear-gradient(#447b9a, #5591b2);
	box-sizing: border-box;
    position: relative;
    margin: 0.2em;
    padding: 0 15px;
    border: none;
    text-align: center;
    line-height: 5vh;
    white-space: nowrap;
    border-radius: 0.2em;
}

.youtube-embed {
	position: absolute;
	right: 5%;
	width: -webkit-calc(100% * 315 / 560);
    width: calc(100% * 315 / 560);
    height: 80%;
	z-index: 3;
}

#tandc-holder {
	max-height: 85vh; 
	width: 75%; 
	margin-top: 5px; 
	border: 5px solid #d0d0d0; 
	background-color: #d0d0d0;
}

#tandc-content {
	max-height: 80vh; 
	overflow-x: auto; 
	overflow-y: auto; 
	background-color: #ededed;
}

.button-holder {
	display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	position: relative;
    top: -10px;
}

button{
	cursor: pointer; 
}

.next {
	color: rgb(50, 88, 131);
}