// Colors
// Blue:		#007fdc	rgb(0, 127, 220)
// Green:		#00d59f	rgb(0, 213, 159)
// Red:		#ff5555	rgb(255, 85, 85)
// Dark Gray:	#4d4d4d	rgb(77, 77, 77)
// Light Gray:	#f2f2f2	rgb(242, 242, 242)


// Fonts
@font-face{font-family:MyriadPro-Regular; src:url(../fonts/MyriadPro-Regular.otf)}
@font-face{font-family:dejavuBold; src:url(../fonts/MyriadPro-Regular.otf)}
@font-face{font-family:dejavuLight; src:url(../fonts/atwriter.ttf)}

body {
	/*background: #f2f2f2;*/
    background: black;
}

* {
	box-sizing: border-box;
}

header {
	z-index: 2;
	width: 100%;
	background: #231f20;
	text-align: center;
	position: fixed;
	top: 0px;
	padding: 10px 20px;
}

// header.tagline {
// 	padding: 20px;
// }

header img {
	height: 80px;
	float: left;
}

header h2 {

}

header a {
    float: right;
	color: white;
	border-radius: 5px;
	padding: 10px 15px;
	text-decoration: none;
	font-family: dejavuBold;
	margin-top: 20px;
	font-size: 16px;
}

header a:hover {
	background: #000000
}

header .inline-with-logo {
	position: relative;
	top: -40px;
	left: -10px;
	font-size: 24px;
}

.tagline {
	font-family: dejavuBold, sans-serif;
	text-transform: uppercase;
	color: #4d4d4d;
	text-align: center;
	float: left;
	width: 100%;
	padding: 40px 20px;
	background: white;
}

.tagline.more-space {
	padding: 100px 20px;
}

.tagline.more-space h2 {
	margin-top: 0px;
}

.tagline strong {
	font-family: dejavuBold;
}

.tagline.offset-image {
	padding-top: 0px;
}

.tagline.light { background: #f2f2f2; color: #4d4d4d;}
.tagline.light p { color: #2d2d2d; }
.tagline.positive { background: #00d59f; color: white; }
.tagline.primary { background: #007fdc; color: white }
.tagline.dark { background: #231f20; color: white }

.hero {
	float: left;
	width: 100%;
	text-align: center;
	background: black;
}

.hero img {
	margin-left: 4%;
}

img.full-img {
	width: 100%;
}

#primary-img {
    /* Use a smaller image for quicker loads! */
    background: url('../images/old_1920.jpg') 50% 25%;
    background-size: cover;
    height: calc(100vh - 70px);
    position: relative;
    z-index: 1;
}

#seconday-img {
    background: url('../images/logo.jpg') 50% 25%;
    background-size: cover;
    height: calc(100vh - 70px);
    position: relative;
    z-index: 1;
}

.shadow-box {
	position: absolute;
    color: white;
    background: rgba(0,0,0,.05);
    width: 920px;
    padding: 20px;
    left: calc(50% - 460px);
    bottom: 0px;
    font-family: MyriadPro-Regular;
    text-transform: uppercase;
}

.shadow-box.attention {
	background: rgba(0, 0, 0, 0.82);
}

#primary-img h2 strong {
	font-family: dejavuBold;
}

#lame-conversation {
	padding: 0px 10px;
	position: relative;
	top: 30px;
}

.tagline a:hover {
	background: #32ffcf;
}

section p {
	text-transform: initial;
	font-family: dejavuLight;
	font-size: 22px;

	margin: 0 auto;
}

h2 {
	font-size: 32px;
}



h3 {
	font-family: dejavuBold;
	font-size: 28px;
}

.one-third {
	float: left;
	width: 33%;
	padding: 0px 20px;
	text-align: center;
}

.content-wrapper {
	width: 1020px;
	margin: 0 auto;
}

.category-icon {
	font-size: 150px;
	color: #007fdc;
}

.finale {
	background: #000000;
    background-size: cover;
	height: 440px;
	position: relative;
}

.finale h2 {
	margin-top: 500px;
    color: white;
    text-shadow: 0px 1px 0px #000;
}

.finale .shadow-box {
	padding-bottom: 60px;
}

.white {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

a:hover {
	color: #CCC;
}

/* MGH: Add a logout button */
/* See http://learnlayout.com/position.html*/
#logout_link {
    z-index: 10;
    border: 1px solid green;
    color: green;
    background-color: #231f20;
    padding: 5px;
    font-family: dejavuLight;
    font-size: 18px;
    position: fixed;
    right: 15px;
    top: 15px;
}

#logout_link:hover {
    border: 1px solid green;
    color: #231f20;
    background-color: green;
    text-decoration: none;
}