/********************************************************************
* Theme Name: Breakthrough Microsite
* Author: Devona
* Author URI: http://devona.com/
* Description: A Blank WP Template by DEVONA
* Written by DEVONA <interact@devona.com>
* Version 1.0
********************************************************************/


/*  Reset | http://meyerweb.com/eric/tools/css/reset/
---------------------------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,
caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,
figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,
legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,
strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
.clear:after,.clear:before,.clearfix:after{content:"";display:block}table{border-collapse:collapse;border-spacing:0}
.clearfix:after{visibility:hidden;clear:both;height:0}.clear:after{clear:both}.clear{zoom:1}:focus{outline:0}.hidden{display:none}


/*  Fonts
---------------------------------------------------------- */

@font-face {
    font-family: PublicoHeadline;
    src: url("fonts/PublicoHeadline-Bold.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: PublicoHeadline;
    src: url("fonts/PublicoHeadline-BoldItalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: PublicoText;
    src: url("fonts/PublicoText-Roman.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
}
@font-face {    
    font-family: PublicoText;
    src: url("fonts/PublicoText-Italic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
}


/*  Getting Organized // Base Structure & Styles
---------------------------------------------------------- */


html, body {
	height: 100%
}

body {
	background-color: white;
	color: #212121;
	font-size: 10px;
	letter-spacing: 0.5px;
	font-family: PublicoText, sans-serif;	
	font-style: normal;
	font-weight: 100;
	-webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,
header > button, 
nav li,
footer h4,
.callout h5,
#hero button, #banner{
	font-family: acumin-pro-extra-condensed, sans-serif;
	font-weight: 800;
	font-style: normal;	
}
h1,h2,h3,h4,h5{
	text-transform: uppercase;
}	
h1{
	font-size: 80px;
}
h2{
	font-size: 90px;
}
p {
 	padding: 0 0 20px 0;
}

a {
	text-decoration: none;
	color: #212121;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-webkit-tap-highlight-color: rgba(0,0,0,0);	
	border-bottom:2px solid transparent;
}

a:hover {
	color: #40d0f5;
}
div.rise,
#moments figure.wp-block-image{
	transform: translateY(25%);
	opacity: 0.01;
	transition: transform 1s linear, opacity 1.5s linear;
}
.wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 32px;
	position: relative;
}

.wrap.lg {
	max-width: none;
}

.wrap.sm {
	max-width: 600px;
}

.wrap:after {
	content:"";
	display:block;
	clear:both;
}

img {
	border: none;
}

.mobile {
	display: none !important;
}

.desktop {
	display: block;
}
header > button, 
nav li,
footer h4,
#nada{
	font-family: acumin-pro-extra-condensed, sans-serif;
	font-weight: 800;
	font-style: normal;	
}
#contact label,
#ft_contact label{
	margin: 0px 1.75rem 0px 3rem;
	display: inline-block;
	font-size: 22px;
	font-family: acumin-pro-extra-condensed, sans-serif;
	font-weight: 300;
	font-style: normal;
}

button{
	font-size: 22px;
}
#content{
	min-height: calc(100vh - 245px);
}

/* HEADER
---------------------------------------------------------- */

header{
	background-color: white;
	font-size: 22px;
	width: 100%;
	overflow: hidden;
	display: block;
	z-index: 800;
}
header, 
#contact{
	height: 88px;
	line-height: 88px;
	text-transform: uppercase;
}
header,
button,
#contact{
	text-transform: uppercase;
}
header > button,
#hero button{
	/*font-size: 100%*/;
	border: 0;
	padding: 0px;
	margin: 0px;
}
header > button{
	background-color: #FF0000;
}
header > button a:link,
header > button a:visited{
	color: white;
	display: block;
	padding: 28px;
}
header > button:hover{
	background-color: #505050;
}
header > button:hover a:link{
	color: white;
}
header nav a:hover{
	color: #DBD8D8;
}
header nav li.current_page_item a{
	color: #00A1ED
}
#contact{
	float: right;
}
#contact, #ft_contact{
	padding-right: 38px;
}
#contact label{
	color: #A2A2A2;
	text-transform: none;
}
#logo,
#ft_logo{
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	text-indent: -9999em;
	overflow: hidden;
	width: 60px;
	height: 100%;
}
#logo{
	background-image: url('images/logo.png');
	vertical-align: top;
}
#logo:hover{
	background-image: url('images/logo_gray.png');
}
.social_share{
	display: inline-block;
}
.social_share li {
	padding: 0px 12.5px;
	vertical-align: top;
}
.social_share li a:link {
	display: block;
}
.social_share li svg {
	height: 22px;
	fill: #505050;
	transform: translateY(15%);
}
.social_share li:hover svg {
	fill: #00A1ED;
}
#logo,
#ft_logo,
.social_share li,
nav,
nav li{
	display: inline-block;
	vertical-align: top;
}
nav li{
	margin-left: 4.8rem;
	line-height: 88px;
	padding: 0px;
}
#intro{
	min-height: 70vh;
}


/* HAMBURGER MENU
---------------------------------------------------------- */

#hamburger{
	position: absolute;
	top: 28px;
	right: 24px;
	display: none;
}
#menu_button {
	width: 20px;
	height: 17px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}
#menu_button span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #505050;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#menu_button span:nth-child(1) {
	top: 0px;
}
#menu_button span:nth-child(2),#menu_button span:nth-child(3) {
	top: 7.0px;
}
#menu_button span:nth-child(4) {
	top: 14px;
}
header.open #menu_button span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}
header.open #menu_button span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
header.open #menu_button span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
header.open #menu_button span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}
#menu_button:hover{
	opacity: 0.5;	
}

/* BANNER HEADERS
---------------------------------------------------------- */
#banner{
	display: flex;
	color: white;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 100vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#banner::after {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,161,237,0.77);
    z-index: 0;
}
#banner > h1 {
    margin: 0px auto;
	padding: 0px 10%;
	z-index: 100;
}

/* HOME
---------------------------------------------------------- */
#hero{
	display: flex;
	justify-content: space-evenly;
	align-items: stretch;
	flex-direction: row-reverse;
	position: relative;
	flex: 1 1 auto;
}
#hero > div{
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	flex: 1 1 auto;
}
#hero > div:before{
	content: '';
	background-color: rgba(21,152,222,0.85);
	width: 100%;
	height: 100%;
	display: block;
	z-index: 9999;
}
#hero > div h1{
	margin-bottom: 20px;
	line-height: 0.8em;
}
#hero > div p{
	font-size: 30px;
	line-height: 34px;
	margin-bottom: 1.5rem;
	max-width: 75%;
}
#hero > div p,
#counter,
#moments p,
#stories p,
#listings h2{
	font-family: acumin-pro-extra-condensed, sans-serif;
	font-weight: 100;
	font-style: normal;	
}
#hero > div,
#hero > img{
	width: 50vw;
}
#hero > div > span{
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#hero > div > span > div{
	max-width: 500px;
	margin: auto;
}
#hero > img{
	height: 100%;
}
#hero button{
	background-color: rgba(255,255,255,0.22);
	height: 50px;
	line-height: 50px;
}
#hero button a:link,
#hero button a:visited{	
	padding: 0px 25px;
	display: block;
	color: white;
}
#hero button:hover{
	background-color: rgba(255,255,255,1.0);
}
#hero button:hover a{
	color: #00A1ED
}
.callout {
	font-size: 18px;
	margin-top: 95px;
}
.callout > *{
	margin-left: auto;
	margin-right: auto;
}
.callout h2{
	font-size: 50px;
	line-height: .94em;
	text-align: left;
	color: #1598DE;
	max-width: 622px;
	margin-bottom: 10px;
}
.callout h5{
	font-size: 22px;
	color: #DBD8D8;
}
.callout p{
	line-height: 1.6em;
	margin-bottom: 10px;
}
.callout p,
#author.callout h2,
#author.callout h5{
	text-align: left;
	max-width: 622px;
}
#author.callout h2{
	margin-bottom: 15px;
}
#author.callout h5{
	margin-bottom: 10px;
}
.hatted{
	background-image: url(images/hat_pattern.png);
}
#video .wrap{
	background-color: #000000;
}
#video .wrap > span {
	position: relative;
	display: block;
	margin: 165px auto;
	text-align: center;
	max-width: 1070px;
}
#video .wrap > span img{
	height: 465px;
	width: auto;
	opacity: 0.8;
	transition: opacity .25s linear;
}
#video #live_vids:hover img{
	opacity: 0.6;
}
#video h3{
	text-align: left;
	font-size: 80px;
	line-height: 0.8625em;
	max-width: 80%;
	top: 95px;
	position: absolute;
	color: white;
}
#video ul{
	width: 80%;
	margin-left: 10%;
}
#video li{
	display: none;
}
#video li a{
	display:block;
}
#video #live_vids:hover #play svg{
	fill: #00A1ED;
}
#video li.active{
	display: block;
	cursor: pointer;
}
#counter{
	font-size: 72px;
	color: white;
	position: absolute;
	bottom: 0px;
}
#play{
	cursor: pointer;
	position: absolute;
	top: 0px;
} 
#play svg{
	height: 46px;
	fill: white;
}
div.arrow{
	position: absolute;
	right: 0px;
	cursor: pointer;
}
div.arrow svg{
	stroke: white;
	stroke-width: 4;
	fill: none; 
	stroke-miterlimit: 10; 
}
div.arrow:hover svg{
	stroke: #00A1ED;
}
.forward.arrow{
	top: 50%;
	transform: translate(-100%,-100%);
}
.backward.arrow{
	top: 100%;
	transform: translate(-100%,-100%) scaleX(-1);
	-moz-transform: translate(-100%,-100%) scaleX(-1);
	-o-transform: translate(-100%,-100%) scaleX(-1);
	-webkit-transform: translate(-100%,-100%) scaleX(-1);
}
.backward.arrow svg{
	stroke: #505050;
}

#video.firstvid .backward.arrow{
	display: none;
}

/* VIDEO LIGHTBOX
---------------------------------------------------------- */

.lightbox {
	background-color: #000000; 
	overflow: hidden;
	position: fixed;
	display: block;
	height: 100vh;
	bottom: 100%;
	right: 0;
	left: 0;
	opacity: 0.1;
	transition: bottom .25s linear .25s, opacity 1.25s linear .5s;
	z-index: 100;
}
body.video_open{
	overflow: hidden;
}
body.video_open .lightbox{
	bottom: 0%;
	opacity: 1.0;
	z-index: 900;
}
#vid-holder{
	max-width: 960px;
	position: relative;
	top: 50%;
	left: 45%;
	transform: translateX(-50%);
	margin: 0px 5%;
	box-sizing: border-box;
}
.video-container {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -28.1%;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#close_lb{
	position: fixed; 
	width: 35px;
	height: 35px;
	top: 60px;
	right: 60px;
}	
#close_lb span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: white;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#close_lb span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#close_lb span:nth-child(2) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#close_lb:hover span{
	background: #00A1ED;
	cursor: pointer;
}

/* GALLERY
---------------------------------------------------------- */
.banner-moments,
.banner-listings{
	padding: 65px 0px;
}	
#moments{
	max-width: 1140px;
	margin: 0px auto;
}
#moments p, 
#stories p{
	margin: 70px 0px;
	text-align: center;
	font-size: 36px;
	color: #00A1ED;
}
#moments figure{
	float: left;
}
#moments figure img{
	width: 100%;
}
figcaption,
figcaption p,
.wp-block-image figcaption{
	font-size: 15px;
	line-height: 21px;
	color: #505050;
	text-align: left !important;
}
figcaption span{
	display: block;
	color: #A2A2A2;
	font-size: 14px;
	line-height: 28px;
	font-style: italic;
}
#moments figure:nth-of-type(5n+1){
	width: 55%;
	margin: 0% 5% 0% 0%;
}
#moments figure:nth-of-type(5n+2){
	width: 40%;
	margin: 25% 0% 0% 0%;
}
#moments figure:nth-of-type(5n+3){
	width: 60%;
	margin: 5% 20% 5% 20%;
}
#moments figure:nth-of-type(5n+4){
	width: 40%;
	margin: 0% 0% 0% 0%;
}
#moments figure:nth-of-type(5n+5){
	width: 55%;
	margin: 5% 0% 5% 5%; 
}
#moments figure:first-of-type{
	margin-top: 5%;
}
#moments p + figure:first-of-type{
	margin-top: 0%;
}


/* LISTING
---------------------------------------------------------- */
#listings li{
	display: block;
	padding-bottom: 57px;
	margin-bottom: 57px;
	border-bottom: 1px solid #DBD8D8;
}
#listings img,
#listings li div{
	display: inline-block;
	vertical-align: top;
}
#listings img{
	width: 28%;
}
#listings a:link{
	display: block;
}
#listings li div{
	width: 66%;
	margin-left: 5%;	
}
#listings h2{
	text-transform: none;
	font-size: 48px;
	line-height: 52px;
	margin-bottom: 30px;
}
span.author,
span.date{
	font-size: 18px;
	line-height: 20px;
	font-family: "PublicoText";
	font-weight: 100;
}
span.author{
	font-style: normal;
	color: #505050;
}
span.date{
	color: #A2A2A2;
	font-style: italic;
}
span.date:before{
	content: '|';
	margin: 0px 20px;
}

#stories > h5{
	color: #DBD8D8;
	font-size: 22px;
	font-family: acumin-pro-extra-condensed, sans-serif;
	font-weight: 800;
	font-style: normal;
	padding-bottom: 35px;
	margin-bottom: 55px;
	border-bottom: 1px solid #DBD8D8;
}

/* SINGLE
---------------------------------------------------------- */

.single-banner{
	background-image: url('images/ba_banner.jpg');
	padding: 30px 0px;
}
.single-banner p{
	margin: 0px 40px;
	padding: 0px 0px;	
	font-size: 22px;
	color: white;
	z-index: 500;
}
.single-banner a:link,
.single-banner a:visited{
	color: white;
}
.single-banner a:hover{
	color: #505050;
}

.byline{
	display: block;
	text-align: center;
	font-size: 18px;
	line-height: 52px;
	margin: 0px auto;
}
.date{
	color: #A2A2A2;
}
#content-wrapper{
	margin-bottom: 90px;
}
.hero{
	margin: 0px auto;
	max-width: 100%;
}
#content-wrapper h1{
	max-width: 850px;
	color: #505050;
	margin: 50px auto 50px auto;
	text-align: center;
	font-size: 72px;
	line-height: 1em;
	font-weight: 100;
	text-transform: none;
}
#content-wrapper p{
	font-family: "PublicoText";
	font-weight: 100;
	font-style: normal;
	color: #707070;
	max-width: 625px;
	margin: 0px auto 25px auto;
	font-size: 18px;
	line-height: 30px;
}
#content-wrapper a:link{
	color: inherit;
	text-decoration: underline;
}
#content-wrapper figure.single-hero{
	font-size: 14px;
	line-height: 20px;
	margin: 60px auto 70px auto;
	text-align: center;
	max-width: 835px;
}
#content-wrapper figure.single-hero p{
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	max-width: none;
}
#content-wrapper figure.single-hero figcaption p span{
	display: inline-block;
}
#content-wrapper figure.single-hero img{
	margin-bottom: 10px;
}
#listings-wrapper{
	max-width: 1050px;
	margin: 50px auto 50px auto;
	overflow: hidden;
}
.left-column figure{
	max-width: 625px;
	margin: 50px auto 70px auto;
}
.left-column figure p,
.left-column figure.wp-block-image figcaption{
	font-size: 14px;
}
.more_stories{
	margin-bottom: 210px;
}

/* FOOTER
---------------------------------------------------------- */
footer{
	position: relative;
	background-image: url('images/mortorboards.png'), linear-gradient(to bottom, rgba(255,255,255,0) 0px,rgba(255,255,255,0) 40px,#00A1ED 40px, #00A1ED 100%);
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	color: white;
	height: 158px;
	width: 100%;
	overflow: hidden;
}
footer h4{
	font-size: 34px;
	text-transform: uppercase;
	height: 118px;
	line-height: 118px;
	position: absolute;
	bottom: 0px;
	left: 52px;
}
footer p{
    font-family: "PublicoText";
}
#ft_contact{
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 118px;
	line-height: 118px;
}
footer .social_share li svg {
	fill: white;
}
footer #ft_contact li:hover svg {
	fill: #505050;
}
#ft_logo{
	transform: translateY(35%);
	background-image: url('images/logo_white.png');
	width: 74px;
	height: 50px;
	vertical-align: initial;
}
#ft_contact label{
	opacity: 0.6;
}

/* 404
---------------------------------------------------------- */
#nada{
	font-size: 2rem;
	text-align: center;
}
#nada span{
	margin: 0px auto;
	display: block;
	transform: translateY(-50%);
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
}
#nada span a{
	color: rgba(21,152,222,1);
}
#nada h1{
	margin-bottom: 2rem;
	color: rgba(21,152,222,1);
}
/* Media Queries
---------------------------------------------------------- */


@media only screen and (max-width: 1080px) {
	#contact label:last-of-type,
	#logo{
		display: none;
	}
}


@media only screen and (max-width: 960px) {
	
	.mobile {
		display: block !important;
	}
	.wrap {
		padding: 20px;
	}
	#content{
		padding-top: 70px;
	}
	h1{
		font-size: 66px;
	}
	header, 
	header > button{
		height: 70px;
		line-height: 70px;
	}
	header{
		position: fixed;
		overflow: hidden;
		transition: height .25s linear;
		background: -webkit-linear-gradient(to bottom, rgba(255,255,255,1.0) 25%, rgba(255,255,255,0.0) 25%);
		background: -o-linear-gradient(to bottom, rgba(255,255,255,1.0) 25%, rgba(255,255,255,0.0) 25%);
		background: linear-gradient(to bottom, rgba(255,255,255,1.0) 80px, rgba(255,255,255,0.0) 25%);
	}
	header.open{
		height: 100vh;
	}
	header > span,
	nav li,
	#contact,
	#ft_contact{
		display: block;
	}
	header > span h1{
		font-size: 66px;
	}
	h1{
		font-size: 60px;
	}
	p{
		padding: 0 0 5px 0;
	}
	header > span{
		position: absolute;
		top: 70px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		padding: 40px 22px;
		overflow: scroll;
		background-color:#505050;
	}
	header > button a:link{
		padding: 0px 22px;
	}
	nav{
		width: 100%;
	}
	nav li{
		font-size: 60px;
		margin: 0px;
	}
	nav li a:link,
	nav li a:visited{
		display: block;
		color: white;
	}
	nav li a:hover{
		color: #808080;
	}
	#contact{
		float: none;
		padding-bottom: 100px;
	}
	#contact label{
		font-size: 28px;
		margin: 0px;
	}
	#contact label,
	.social_share,
	#logo{
		float: left;
	}
	#contact label:last-of-type{
		clear: left;
		margin-right: 40px;
	}
	header .social_share li{
		padding: 0px 0px 0px 50px;
		transform: translateY(10%);
	}
	header .social_share li svg {
		fill: white;
		height: 35px;
	}
	#logo{
		background-image: url('images/logo_white.png');
	}
	#logo:hover,
	#ft_logo:hover{
		background-image: url('images/logo.png');
	}
	#ft_contact label{
		display: block;
	}
	#hero{
		flex-direction: column;
	}
	#hero > img,
	#hero > div{
		width: 100vw;
	}
	#hero > div{
		height: auto;
		padding: 60px 22px;
		box-sizing: border-box;
	}
	#hero > div > span {
		position: relative;
		top: initial;
		left: initial;
		transform: none;
		width: 100vw;
		height: 100vw;
	}
	#hero button{
		margin-top: 35px;
	}
	#hero > div:before{
		display: block;
		z-index: 0;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	.callout {
		font-size: 18px;
		margin-top: 105px;
	}
	.callout h2{
		font-size: 40px;
		line-height: 40px;
	}
	#author h2{
		margin-bottom: 35px;
	}
	#author p{
		font-size: 16px;
		line-height: 26px;
	}
	#close_lb{
		top: 5%;
		right: 5%;
	}	
	#video .wrap{
		padding-right: 0px;
		padding-left: 0px;
	}
	#video .wrap > span{
		margin: 59vw auto;
	}
	#video .wrap > span img{
		width: 100vw;
		height: auto;
	}
	#video h3 {
		font-size: 60px;
		top: -8rem;
		left: 20px;
	}
	#video ul{
		width: auto;
		margin-left: 0;
	}
	#play{
		top:  -18rem;
		left: 20px;
	}
	#controls{
		position: absolute;
		width: 100vw;
	}
	#counter{
		font-size: 60px;
		position: relative;
		width: 50%;
		margin: 0px auto;
	}
	.forward.arrow,
	.backward.arrow{
		top: auto;
		bottom: 2px;
	}
	.forward.arrow{
		transform: translate(0px);
		right: 5%;
	}
	.backward.arrow{
		left: 5%;
		right: auto;
		transform: translate(0px) scaleX(-1);
		-moz-transform: translate(0px) scaleX(-1);
		-o-transform: translate(0px) scaleX(-1);
		-webkit-transform: translate(0px) scaleX(-1);
	}
	div.arrow svg{
		width: auto;
		height: 42px;
	}
	#banner > h1{
		padding: 0px;
	}
	#moments p, #stories p {
		font-size: 30px;
		line-height: 33px;
		margin: 30px 0px 60px 0px;
	}
	#moments figure{
		width: 100vw !important;
		margin: 0% 0% 50px 0% !important;
	}
	#moments figure > img{
		width: 100vw;
	}
	#listings li{
		padding-bottom: 42px;
		margin-bottom: 42px;
	}
	#listings li img{
		margin-bottom: 18px;
	}
	#listings h2{
		font-size: 40px;
		line-height: 42px;
		margin-bottom: 36px;
	}
	#listings img,
	#listings li div{
		width: 100%;
		margin: 0px 0px 0px 0px;
	}
	#listings span{
		display: block;
	}
	span.date:before{
		content: none;
	}
	#listings span.author{
		margin-bottom: 12px;
	}
	#content-wrapper{
		padding: 0px;
	}
	#content-wrapper h1{
		font-size: 60px;
		line-height: 64px;
		margin: 47px auto 35px auto;
	}
	#content-wrapper h1,
	.single-hero figcaption{
		padding: 0px 22px;
	}
	#content-wrapper .byline span{
		display: block;
		margin: 0px auto 15px auto;
	}
	.left-column{
		padding: 0px 20px;
		margin-bottom: 155px;
	}
	.more_stories{
		margin-bottom: 145px;
	}
	.single-banner p{
		margin: 0px 20px;
	} 
	footer{
		padding: 80px 20px 25px 20px;
		background-image: url('images/mortorboards_mobile.png'), linear-gradient(to bottom, rgba(255,255,255,0) 0px,rgba(255,255,255,0) 80px,#00A1ED 80px, #00A1ED 100%);
		background-position: top right;
		height: auto;
		box-sizing: border-box;
	}
	#ft_contact,
	footer h4{
		position: relative;
	}
	#ft_contact label{
		line-height: 80px;
		margin: 0px;
	}
	#ft_contact{
		height: auto;
		line-height: normal;
	}
	footer .social_share{
		float: none;
	}
	footer .social_share li{
		padding: 0px 12.5px 0px 0px;
	}
	#ft_logo{
		margin-bottom: 38px
	}
	footer h4{
		height: auto;
		line-height: normal;
		left: auto;
	}

}

@media only screen and (max-width: 600px) {
	

}

@media only screen and (max-width: 400px) {

	
}