@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Montserrat:300,400,500,600,700,800&display=swap');
/*
font-family: 'Montserrat', sans-serif;
font-family: 'Josefin Sans', sans-serif;


/*-------------
 	General
-------------*/

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font: normal 16px sans-serif;
	color: #f7f7ff;
	font-family: 'Montserrat', sans-serif;
	background: #403f4c;
}

ul,
nav {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.9;
}

a:hover {
	opacity: 1;
}

body {
	max-width: 100vw;
}

/* -------------
 	typography
 ------------- */

p {
	color: #f5f5f5;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 400;
	/* margin: 1.5em 0; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #8b66b2;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 800;
	line-height: 1em;
}

h1 {
	font-size: 2.125em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.825em;
}

h4 {
	font-size: 1.5em;
}

h5 {
	font-size: 1.25em;
}

h6 {
	font-size: 1.125em;
}

/* *900PX SCREENS AND UP for-tablet-landscape-up*/
@media only screen and (min-width: 56.250em) {

	/* h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 3em;
	} */

	h1 {
		font-size: 2.825em;
	}

	h2 {
		font-size: 2.5em;
	}

	h3 {
		font-size: 2.25em;
	}

	h4 {
		font-size: 2em;
	}

	h5 {
		font-size: 1.5em;
	}

	h6 {
		font-size: 1.25em;
	}

}


/* -------------
	 DESIGN MOBILE FIRST. ALL CSS IS FOR MOBILE SCREENS UP TO 599PX WIDE= 37.4EM
------------- */

/* *600PX SCREENS AND UP for-tablet-portrait-up*/
@media only screen and (min-width: 37.5em) {}

/* *900PX SCREENS AND UP for-tablet-landscape-up*/
@media only screen and (min-width: 56.250em) {}

/* *1200PX SCREENS AND UP for-desktop-up*/
@media only screen and (min-width: 75em) {}

/* *1800PX SCREENS AND UP for-big-desktop-up*/
@media only screen and (min-width: 112.50em) {}

/* -------------
 SITE COLORS
 ------------- */
.brandpurple {
	color: #8b66b3;
}

.brandwhite {
	color: #f5f5f5;
}

.brandgreen {
	color: #bed390;
}

.brandyellow {
	color: #fac76c;
}

.brandblue {
	color: #06bbe8;
}

.brandlightblue {
	color: #b8e7f3;
}

/* -------------
 SPACING AND HIDING HACKS
 ------------- */

.mobile-hide {
	display: none;
}

.desktop-hide {
	display: inline;
}

@media only screen and (min-width: 56.250em) {
	.mobile-hide {
		display: inline;
	}

	.desktop-hide {
		display: none;
	}
}

.five {
	height: 5vh;
}

.ten {
	height: 10vh;
}

.twenty {
	height: 20vh;
}

hr {
	width: 50vw;
	height: 0.1vh;
	background-color: #f7f7f7;
	border: 0;
	margin: 0 auto;
	margin-bottom: 2vh;
	margin-top: 2vh;
}

/* -------------
 BUTTONS
 ------------- */
.btn {
	color: #f5f5f5;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #8b66b2;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.3rem;
	text-align: center;
	padding: 3vh 6vh;
	border: 0px;
	cursor: pointer;
	margin: 2vh;
	-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btnbanner {
	color: #f5f5f5;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #8b66b2;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.1rem;
	line-height: 1.2em;
	text-align: center;
	padding: 1.5vh 2vh;
	border: 0px;
	cursor: pointer;
	margin: 2vh;
	-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-ghost {
	color: #f7f7f7;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: rgba(0, 0, 0, 0.3);
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0.3rem;
	text-align: center;
	padding: 3vh 6vh;
	border: 1px solid #f7f7f7;
	cursor: pointer;
	margin: 2vh;
	-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-cta {
	color: #403f4c;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #80ced7;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.3rem;
	text-align: center;
	padding: 3vh 6vh;
	border: 0px;
	cursor: pointer;
	margin: 2vh;
	-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-blue {
	color: #fff;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #06bbe8;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.3rem;
	text-align: center;
	padding: 3vh 6vh;
	border: 1px solid #fff;
	cursor: pointer;
	margin: 2vh;
	-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 56.250em) {

	.btnbanner {
		font-size: 1em;
		letter-spacing: 0.3rem;
		padding: 3vh 6vh;

	}
}


/* :::::::::::::::

IMG CLASSES

::::::::::::::: */


img {
	display: block;
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
}

img.logo {
	max-height: 15vh;
	width: auto;
}

img.logo-hero {
	max-width: 70vw;
	height: auto;
}

img.logo-webapp {
	max-height: 10vh;
	width: auto;
}

img.scrollicon {
	display: block;
	max-height: 10vh;
	width: auto;
	margin: 0 auto;
}

img.socialicon {
	max-width: 8vw;
	height: auto;
	margin: 2vh;
}

img.iconFooter {
	max-width: 10vw;
	height: auto;
	margin: 0 auto;
}

img .half-image {
	max-width: 100vw;
	height: auto;
}

@media only screen and (min-width: 56.250em) {
	img.logo-hero {
		max-width: 25vw;
	}

	img.socialicon {
		max-width: 2vw;
	}

	img.iconFooter {
		max-width: 3vw;
	}

	img.half-image {
		max-width: 50vw;
		height: auto;
		max-height: 100%;
	}
}

/* :::::::::::::::::::::::::::::::::::::::::::::

L A Y O U T

::::::::::::::::::::::::::::::::::::::::::::: */

/*---------------------
 	PAge Section
---------------------*/
.page {
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: url(img/hero.jpg) no-repeat center left fixed;
	background-size: cover;
	padding: 10vh 2.5vh 8vw;
}

.page h1 {
	font-size: 2em;
}

.page h4 {
	color: #1f678a;

}


.page p {
	font-size: 0.8em;
}

.page-row {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

@media only screen and (min-width: 56.250em) {
	.page {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.page h1 {
		font-size: 5em;
	}

	.page p {
		font-size: 2em;
	}

}

/*---------------------
 	PAge Section
---------------------*/
.lineup {
	background-color: #bed390;
	background: url(img/hero.jpg) no-repeat center left fixed;
	background-size: cover;
	min-height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0vh 0vh 2vw;
	text-align: center;
}

.program {
	background: rgba(139, 102, 178, 0.7);
	width: 98vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 2vh 0;
}

.program-left {
	width: 22vw;
	margin-bottom: 1vh;
}

.program-right {
	width: 73vw;
	margin-bottom: 1vh;
}

.program h1 {
	font-size: 1.4em;
	color: #fac76c;
	;
}

.program p {
	font-size: 1em;
}

.artist-row {
	width: 100%;
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.artist-image {
	max-width: 50vw;
	height: auto;
}

.col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

@media only screen and (min-width: 56.250em) {
	.artist-image {
		max-width: 25vw;
		height: auto;
	}

	.program {
		width: 60vw;
		padding: 2vh 0;
	}

	.program-left {
		width: 10vw;
		margin-bottom: 1vh;
	}

	.program-right {
		width: 50vw;
		margin-bottom: 1vh;
	}

	.program h1 {
		font-size: 3em;
		color: #fac76c;
		;
	}
}

.tshirts {
	background-color: #8b66b2;
	/* background: url(img/heroaeb.jpg) no-repeat top center fixed;
	background-size: cover; */
	min-height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0vh 0vh 2vw;
	text-align: center;
}

.tshirts h1 {
	color: #FFF;
	font-size: 3em
}

@media only screen and (min-width: 56.250em) {
	.tshirts h1 {
		color: #FFF;
		font-size: 5em
	}
}

.sponsors {
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0vh 0vh 2vw;
	text-align: center;
}

.sponsors-logo {
	max-width: 30vw;
	height: auto;
	margin: 0 5vw;
}

@media only screen and (min-width: 56.250em) {
	.sponsors-logo {
		max-width: 20vw;
		height: auto;
		margin: 0 5vw;
	}
}

.row {
	width: 100%;
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.wide {
	width: 45vw;
}

.narrow {

	width: 35vw;

}

.green {
	background-color: #63c7b2;
}

.blue {
	background-color: #80ced7;
}

.project p {
	font-size: 1.3em;
	line-height: 1.2em;
	text-align: left;
}

.project h2 {
	font-size: 1.2em;
}

@media only screen and (min-width: 56.250em) {
	.project p {
		font-size: 2em;
		padding: 0 20vh;
		text-align: center;
	}

	.project h2 {
		font-size: 2.5em;
	}

	.more {
		padding: 20vh;
	}
}



.more p {
	font-size: 1.3em;
	line-height: 1.2em;
	text-align: left;

}

@media only screen and (min-width: 56.250em) {
	.more p {
		font-size: 1.5em;
	}

}

.song {
	background: url(img/hero.jpg) no-repeat center center fixed;
	background-size: cover;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;


}

/*---------------------
 	Contact Section
---------------------*/

.contact {
	background-color: #fac76c;
	min-height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	/* background: url(img/hero.jpg) no-repeat center center fixed;
	background-size: cover; */
	padding: 20vh 2.5vh 8vw;

}

.contact p {
	font-size: 1.5em;
}


/* :::::::::::::::::::::::::::::::::::::::::::::

FOOTER  NAVBAR  MOBILE APP MODULE

::::::::::::::::::::::::::::::::::::::::::::: */

.navbar {
	z-index: 9;
	background: transparent;
	width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0;
	position: fixed;
	bottom: 0;
}

.navbar p {
	color: #fcd0a1;
	letter-spacing: 0.3em;
	font-size: 0.825em;
	line-height: 1.0em
}

.navbutton {
	width: 100%;
	background: rgba(0, 0, 0, 0.9);
	height: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 0px;
	text-align: center;
	border-right: rgba(64, 63, 76, 0.8) solid 1px;
}

.last {
	border-right: 0px;
}

@media only screen and (min-width: 56.250em) {
	.navbar {
		display: none;
	}
}


/*::::::::::::
 	Header
::::::::::::*/

header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

header nav li {
	margin: 0;
}

header nav li:first-child {
	margin-left: 0;
}

header nav li:last-child {
	margin-right: 0;
}

/**---- Header ----**/

.header {
	z-index: 9;
	position: fixed;
	top: 0;
	left: 100vw;
	padding-top: 10vh;
	padding-bottom: 4em;
	/* width: 30vw; */
	height: 100%;
	background-color: rgba(0, 0, 0, 1);
	/* overflow-y: scroll; */
	text-align: center;
	-webkit-transition: -webkit-transform 300ms ease;
	transition: -webkit-transform 300ms ease;
	transition: transform 300ms ease;
	transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.header nav,
.header ul {
	height: 100%;
	width: 50vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.header li {
	border-bottom: 0px solid #1f678a;
}

.header a {
	font-weight: 400;
	letter-spacing: 0.3em;
	color: #80ced7;
	display: block;
	padding: 1vh;
	-webkit-transition: background-color 300ms ease-in;
	transition: background-color 300ms ease-in;
	font-size: 1em;
}

.header a:hover {
	color: #dbf4a7;
}

.menu-icon p {
	opacity: 0;
}


@media only screen and (min-width: 56.250em) {

	.header a {
		font-size: 2em;
	}

	.menu-icon p {
		font-size: 4em;
		opacity: 1;

	}

	.header nav,
	.header ul {
		width: 30vw;
	}
}

/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/**---- Menu Icon ----**/
/**---- Menu Icon ----**/
/**---- Menu Icon ----**/

/* TO USE MENU ICON INSTEAD OF WORD "MENU"  PLACE THIS IN mobile-bar-right DIV */

/* <label for="menu-toggle" class="menu-icon">
  <span></span>
</label> */

.menu-icon {
	z-index: 10;
	display: block;
	position: relative;
	width: 25px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: -webkit-transform 300ms ease;
	transition: -webkit-transform 300ms ease;
	transition: transform 300ms ease;
	transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon>span {
	display: block;
	position: absolute;
	top: 55%;
	margin-top: -0.3em;
	width: 100%;
	height: 0.3em;
	border-radius: 1px;
	background-color: #06bbe8;
	-webkit-transition: -webkit-transform 300ms ease;
	transition: -webkit-transform 300ms ease;
	transition: transform 300ms ease;
	transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon>span:before,
.menu-icon>span:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 1px;
	background-color: #06bbe8;
	-webkit-transition: -webkit-transform 300ms ease;
	transition: -webkit-transform 300ms ease;
	transition: transform 300ms ease;
	transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon>span:before {
	-webkit-transform: translateY(-0.6em);
	transform: translateY(-0.6em);
}

.menu-icon>span:after {
	-webkit-transform: translateY(0.6em);
	transform: translateY(0.6em);
}

/**---- Menu Icon Effects ----**/

.menu-toggle:checked+.mobile-bar .menu-icon {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.menu-toggle:checked+.mobile-bar span:before,
.menu-toggle:checked+.mobile-bar span:after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/**---- Off-Canvas Effect ----**/
/* CHANGE THE WIDTH OF THE SLIDE IN NAVIGATION
EG:  -100% AND 100% IS FULL PAGE */

.menu-toggle:checked~.header {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.menu-toggle:checked~.container {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}

@media only screen and (min-width: 56.250em) {
	.menu-toggle:checked~.header {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	.menu-toggle:checked~.container {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

/**---- Mobile Bar ----**/

.menu-toggle {
	display: none;
}

.mobile-bar {
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 2.5vw;
	width: 100vw;
	height: 10vh;
	background-color: transparent;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.mobile-bar-left {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.mobile-bar-center {
	z-index: 8;
	-webkit-box-flex: 3;
	-ms-flex: 3;
	flex: 3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.mobile-bar-right {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.mobile-bar-logo {
	width: 50vw;
	height: auto;
}



/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */
/* MOBILE NAVIGATION OFF CANVAS RIGHT :::::::::::::::::::::::::::::::::: */



form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width: 100%;
	width: 100%;
	/* margin: 5vh auto; */
}

form input {
	padding: 15px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	width: 75vw;
	font-size: 1.2em;
	color: #555;
	margin: 0 0 2vh 0;
}

form .btn {
	color: #f7f7f7;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #9db5b2;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.3rem;
	text-align: center;
	padding: 3vh 6vh;
	border: 0px;
	cursor: pointer;
	margin: 2vh;
	-webkit-box-shadow: #000;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 56.250em) {

	form input {
		width: 25vw;
	}
}

/*----------------------
 	video Section
----------------------*/

.video {
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0vw 2vw;
}

.video h1 {
	font-size: 4vh;
	/* color: #fff; */
}

.video p {
	color: #ecdccd;
	text-align: left;
	font-size: 2.5vh;
	line-height: 1.2;
	margin-bottom: 0;
}

.iframe-container {
	position: relative;
	width: 95%;
	margin: 0 auto;
}

.iframe-container .ratio {
	display: block;
	width: 100%;
	height: auto;
}

.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media only screen and (min-width: 56.250em) {
	.iframe-container {
		width: 70%;
	}

	.video {
		padding: 10vw 10vw;

	}

	.video p {
		font-size: 2em;
		line-height: 1.5;
	}

}


/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */


.video-page {
	min-height: 100vh;
	max-width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.video-page-main {

	max-width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	margin: 0 auto;
	/* padding-top: 20vh; */
}

.video-page-side {
	max-width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.video-page h3 {
	font-size: 3em;
}

.video-page hr {
	border: 0;
	height: 1vh;
	width: 50vw;
	background: #FEDA5B;
	margin: 0;
}

@media only screen and (min-width: 56.250em) {
	.video-page {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		text-align: center;
	}

	.video-page-main {
		max-width: 75vw;
	}

	.video-page-side {
		max-width: 25vw;
	}

	.video-preview-page h3 {
		font-size: 3.5em;
	}

	.video-page p {
		font-size: 2em;
		line-height: 1.5;
	}
}

.iframe-container {
	position: relative;
	width: 80%;
	padding: 2vh;
	margin: 1 auto;
}

.iframe-container .ratio {
	display: block;
	width: 100%;
	height: auto;
}

.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.iframe-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 800px) {
	.iframe-container {
		width: 100%;
	}

	.video {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		/* width: auto; */
		max-height: 80vh;
	}
}

.footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	bottom: 0;
	padding-bottom: 4em;
}

.footer p {
	font-size: 0.8em;
	line-height: 1em;
	margin: 1vh 0;
}

/* EMAIL SPAM FILTER CSS///////////////////////// 
    This styling will hide the email field from display, but it will still be seen by spambots */

#email_add {
	display: none;
}

.whiteColor {
	color: #f6f6f6;
}