/* THIS FILE IS COPYRIGHT ©2015 OSCAR STRANGIO AND IS INTENDED ONLY FOR USE ON THE COMMON ROOM PRODUCTIONS SITE */

/*
* Proxima Nova Web Fonts from fontspring.com
*
* All OpenType features and all extended glyphs have been removed.
* Fully installable fonts can be purchased at http://www.fontspring.com
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Fontspring. The fonts are protected under domestic and international trademark and 
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* (c) 2010-2014 Fontspring
*
*
*
*
* The fonts included are copyrighted by the vendor listed below.
*
* Vendor:      Mark Simonson Studio
* License URL: http://www.fontspring.com/fflicense/mark-simonson-studio
*
*
*/

/* - - - FONTS & ANIMATIONS - - - */
@import url("reset.css");
@import url("fonts/font-awesome.min.css");
@font-face {
    font-family: 'proxima_nova-regular';
    src: url('fonts/ProximaNova-Reg-webfont.eot');
    src: url('fonts/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ProximaNova-Reg-webfont.woff') format('woff'),
         url('fonts/ProximaNova-Reg-webfont.ttf') format('truetype'),
         url('fonts/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova-semibold';
    src: url('fonts/ProximaNova-Sbold-webfont.eot');
    src: url('fonts/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ProximaNova-Sbold-webfont.woff') format('woff'),
         url('fonts/ProximaNova-Sbold-webfont.ttf') format('truetype'),
         url('fonts/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* - - - BASE STYLES - - - */
*{
	margin:0;
	padding:0;
}
html, body{
	background: white;
	height: 100%;
}
body{
	font-family: 'proxima_nova-regular', Helvetica, Arial, sans-serif; 
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 16px;
	background: white;
	color: rgb(80, 80, 80);
	cursor: default;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
hr{
	display: block;
	height: 1px;
	width: 80px;
    border: none;
    border-top: 1px solid #ccc;
    margin: 40px auto;
    padding: 0;
    text-align: center;
}
h1{
	font-family: 'proxima_nova-semibold', Helvetica, Arial, sans-serif; 
	font-size: 32px;
	font-weight: normal;
	font-style: normal;
	color: inherit;
	line-height: 32px;
}
h2{
	font-family: 'proxima_nova-semibold', Helvetica, Arial, sans-serif; 
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	color: inherit;
	line-height: 24px;
}
h3{
	font-family: 'proxima_nova-regular', Helvetica, Arial, sans-serif; 
	font-size: 26px;
	font-weight: normal;
	font-style: normal;
	color: inherit;
	line-height: 32px;
}
p, p br{
	font-size: 16px;
	line-height: 26px;
}
.indent{
	padding: 10px 20px;
}
li{
	list-style: none;
}
b{
	font-family: 'proxima_nova-semibold', Helvetica, Arial, sans-serif; 
	font-weight: normal;
	font-style: normal;
}
a, a:visited{
	color: inherit;
	cursor: pointer;
	font-weight: normal;
	text-decoration: none;
}
p a, p a:visited{
	color: #08c;
}
a:hover{
	color: #08c;
	text-decoration: underline;
}
p, h1, h2, h3{
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	-o-user-select: text;
	user-select: text;
}
iframe{
	border: none;
	outline: none;
}

/* - - - COMMON ELEMENTS - - - */
.horizontal-wrapper{
	position: relative;
	max-width: 850px;
	padding: 0px 50px;
	margin-left: auto;
	margin-right: auto;
}
.spacer{
	clear: both;
}
.nav-spacer{
	clear: both;
	height: 70px;
}
.footer-spacer{
	clear: both;
	height: 70px;
}
.laurels-wrapper{
	text-align: center;
	padding: 0px;
}
.laurels-wrapper .laurels{
	display: inline-block;
	background: url('/resources/system/laurels.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 120px;
	height: 76px;
	margin: 10px;
}
.laurels-wrapper .laurels .laurels-inner{
	display: table;
	overflow: hidden;
	height: 75px;
	width: 75px;
	margin: 0px auto;
}
.laurels-wrapper .laurels .laurels-inner br{
	line-height: 15px;
}
.laurels-wrapper .laurels .laurels-inner span{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 1px;
}

/* - - - HEADER - - - */
.nav-wrapper{
	position: relative;
	width: 100%;
	height: 70px;
	background: rgba(0,0,0,0.8);
	z-index: 100;
}
.nav-wrapper .logo{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 122px;
	height: 50px;
}
.nav-wrapper .mobile-nav{
	color: white;
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 27px;
	z-index: 200;
}
.nav-wrapper .mobile-nav .mobile-nav-icon{
	width: 20px;
	height: 18px;
	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;
}
.nav-wrapper .mobile-nav .mobile-nav-icon span{
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: white;
	border-radius: 9px;
	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;
}
.nav-wrapper .mobile-nav .mobile-nav-icon span:nth-child(1){
	top: 0px;
}
.nav-wrapper .mobile-nav .mobile-nav-icon span:nth-child(2), .nav-wrapper .mobile-nav .mobile-nav-icon span:nth-child(3){
	top: 7px;
}
.nav-wrapper .mobile-nav .mobile-nav-icon span:nth-child(4){
	top: 14px;
}
.nav-wrapper.active .mobile-nav .mobile-nav-icon span:nth-child(1){
	top: 7px;
	width: 0%;
	left: 50%;
}
.nav-wrapper.active .mobile-nav .mobile-nav-icon span:nth-child(2){
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.nav-wrapper.active .mobile-nav .mobile-nav-icon span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.nav-wrapper.active .mobile-nav .mobile-nav-icon span:nth-child(4) {
	top: 7px;
	width: 0%;
	left: 50%;
}
.nav-wrapper .nav{
	position: absolute;
	top: 27px;
	right: 20px;
	color: white;
}
.nav-wrapper ul li{
	display: inline;
}
.nav-wrapper ul li a{
	font-family: 'proxima_nova-regular', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	color: #ddd;
}
.nav-wrapper ul li a:hover{
	text-decoration: none;
	color: white;
}
.nav-wrapper ul li.active a{
	font-family: 'proxima_nova-semibold', Helvetica, Arial, sans-serif;
	color: white;
}
.nav-wrapper hr, .nav-wrapper ul li.home-nav, .nav-wrapper .mobile-nav{
	display: none;
}

/* - - - FOOTER - - - */
.footer{
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: rgba(0,0,0,0.8);
	color: white;
	overflow: hidden;
}
.footer a, .footer a:visited{
	color: white;
}
.footer a:hover{
	color: #08c;
}
.footer p{
	position: relative;
	padding: 10px;
	line-height: 22px;
}
.footer p.copyright{
	position: absolute;
	width: 100%;
	padding-top: 13px;
	font-size: 14px;
	text-align: center;
}
.footer p.contact{
	float: left;
	padding: 10px 10px 10px 12px;
	text-align: left;
	z-index: 50;
}
.footer p.social{
	float: right;
	padding: 12px 8px 0px 0px;
	font-size: 22px;
	text-align: right;
	z-index: 50;
}
.footer p.social a{
	margin: 0px 8px;
}

/* - - - MOBILE - - - */
@media all and (max-width:768px){
	.nav-wrapper .nav{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background: rgba(0,0,0,0.9);
		z-index: 150;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
		-moz-transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
		-o-transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
		transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
	}
	.nav-wrapper.active .nav{
		visibility: visible;
		opacity: 1;
	}
	.nav-wrapper .mobile-nav, .nav-wrapper .nav ul li.home-nav{
		display: block;
	}
	.nav-wrapper.active .mobile-nav{
		position: fixed;
	}
	.nav-wrapper .nav ul{
		position: absolute;
		width: 100%;
		top: 50%;
		margin-top: -88px;
	}
	.nav-wrapper .nav ul li{
		display: block;
		margin: 25px;
		text-align: center;
		-webkit-transition: opacity .55s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-o-transition: opacity .25s ease-in-out;
		transition: opacity .25s ease-in-out;
		-webkit-transition-delay: .25s;
		-moz-transition-delay: .25s;
		-o-transition-delay: .25s;
		transition-delay: .25s;
		opacity: 0;
	}
	.nav-wrapper.active .nav ul li{
		opacity: 1;
	}
	.nav-wrapper .nav ul li.separator{
		display: none;
	}
	.nav-wrapper .nav ul li a{
		font-size: 22px;
	}
	.footer-spacer{
		height: 70px;
	}
	.footer{
		position: relative;
	}
	.footer p.copyright, .footer p.contact, .footer p.social{
		position: relative;
		text-align: center;
		padding: 10px;
		float: none;
	}
	.footer p.social{
		padding-top: 12px;
	}
	.footer p.contact{
		padding: 0px;
	}
}