@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Special+Elite');
/*
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Special Elite', cursive;


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

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

html {
	font: normal 16px sans-serif;
	color: #f7f7ff;
	font-family: 'Open Sans Condensed', 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: #f7f7f7;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: 300;
	/* margin: 1.5em 0; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #f7f7f7;
	font-family: 'Special Elite', cursive;
	font-weight: 500;
	line-height: 2em;
}

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
 ------------- */
.brandblack {
	color: #403f4c;
}

.brandgrey {
	color: #666a86;
}

.brandlightgrey {
	color: #d3d5d4;
}

.brandgreen {
	color: #63c7b2;

	background-color: #a2c5ac;
}

.brandblue {
	color: #80ced7;
}

/* -------------
 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: #403f4c;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #63c7b2;
	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-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: 1em;
	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);
}
/* :::::::::::::::

IMG CLASSES

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


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

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

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

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

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

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

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

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

	.socialicon {
		max-width: 2vw;
	}

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

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

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: center;
	-ms-flex-pack: center;
	justify-content: center;
	-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: 20vh 2.5vh 8vw;

}

.page h1 {
	font-size: 3.5em;
	color: #80ced7;
}
.page p {
	font-size: 2em;
	text-align: center;
}

.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: 14em;
	}
	.page p {
		font-size: 3em;
	}

}

/*---------------------
 	PAge Section
---------------------*/
.project {
	background-color: #403f4c;
	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: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
	padding: 5vh 2.5vh 8vw;
	text-align: center;
}

.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;
	justify-content: center;


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

.contact {
	background-color: #afd2e9;
	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: 2em;
}


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

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: #e6efe9;
	-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: #e6efe9;
	-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: flex;
	flex-direction: column;
	justify-content: flex-start;
	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;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 auto;
  }
  
  .video-page-main {

	max-width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	margin: 0 auto;
	/* padding-top: 20vh; */
  }
  
  .video-page-side {
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	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 {
	flex-direction: row;
	justify-content: center;
	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: flex;
	  justify-content: 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;
}