@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic");

/*
	Strata by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Basic */

	body {
		background: #fff;
	}

		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, select, textarea {
		color: #a2a2a2;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 16pt;
		font-weight: 400;
		line-height: 1.75em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #49bf9d;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #49bf9d !important;
			text-decoration: none;
		}

	strong, b {
		color: #787878;
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #787878;
		font-weight: 400;
		line-height: 1em;
		margin: 0 0 1em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2em;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.5em;
		line-height: 1.5em;
	}

	h3 {
		font-size: 1.25em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 2px #efefef;
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	blockquote {
		border-left: solid 6px #efefef;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 1.5em;
	}

	code {
		background: #f7f7f7;
		border-radius: 0.35em;
		border: solid 2px #efefef;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

/* Form */

	form {
		margin: 0 0 2em 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #f7f7f7;
		border-radius: 0.35em;
		border: solid 2px transparent;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 0.75em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #49bf9d;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em;
	}

/* Box */

	.box {
		border-radius: 0.35em;
		border: solid 2px #efefef;
		margin-bottom: 2em;
		padding: 1.5em;
	}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

/* Image */

	.image {
		border-radius: 0.35em;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 0.35em;
			display: block;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.avatar {
			display: none !important; 
		}

/* Navigation - COMPACT & RAISED SLIGHTLY */

#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav ul li {
    margin-bottom: 0 !important; 
    padding: 0;
}

#nav ul li a {
    color: rgba(255, 255, 255, 0.5);
    border-bottom: none;
    font-size: 0.75em; 
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    line-height: 1.25em !important; /* Tighter spacing */
    padding: 0.25em 0 !important;
}

#nav ul li a:hover {
    color: #49bf9d !important;
}

/* Header - Desktop Sidebar */

#header {
    background-color: #1f1815;
    background-image: url("images/overlay.png"), url("../images/Tumu_Siime_Conan_Landscape_3.jpg");
    background-position: left center;
    background-size: cover;
    background-attachment: fixed;
    position: fixed;
    left: 0;
    top: 0;
    width: 35%;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    padding: 0 4em 0 0;
}

#header .header-content {
    padding-top: 28em !important; /* Raised slightly from 32em */
    height: 100%;
}

#header h1 {
    color: #fff;
    font-size: 1.25em;
    margin-bottom: 0.4em !important;
}

/* Footer */

	#footer {
		bottom: 0;
		left: 0;
		padding: 0 4em 6em 0;
		position: fixed;
		text-align: right;
		width: 35%;
	}

/* Main Content */

	#main {
		margin-left: 35%;
		max-width: 54em;
		padding: 8em 4em 4em 4em;
		width: calc(100% - 35%);
	}

		#main > section {
			border-top: solid 2px #efefef;
			margin: 4em 0 0 0;
			padding: 4em 0 0 0;
		}

			#main > section:first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
			}

/* Button */

	.button {
		transition: background-color 0.2s, color 0.2s, border-color 0.2s;
		background-color: transparent;
		border-radius: 0.35em;
		border: solid 3px #efefef;
		color: #787878 !important;
		display: inline-block;
		height: 3em;
		line-height: 2.75em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
	}

		.button.special {
			background-color: #49bf9d;
			border-color: #49bf9d;
			color: #ffffff !important;
		}

		.button:hover {
			border-color: #49bf9d;
			color: #49bf9d !important;
		}

/* Video Grid Styles */

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 6px;
    margin-bottom: 1em;
}

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

.video-item p {
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
}

/* Mobile Responsiveness */

@media screen and (max-width: 736px) {
    #header {
        position: relative;
        width: 100%;
        height: auto;
        padding: 3em 1em;
        text-align: center;
        background-attachment: scroll;
    }
    
    #header .header-content {
        padding-top: 2em !important; 
    }

    #main {
        margin-left: 0;
        width: 100%;
        padding: 2em 1.5em;
    }

    #footer {
        position: relative;
        width: 100%;
        text-align: center;
        padding: 2em 0;
    }
}