/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700|Lobster|Permanent+Marker|Oleo+Script|Sail|Sonsie+One);
*{
	box-sizing: border-box;
}

html {
	
}

body {
	font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	margin-top: 60px;
}

div {
	
}

.container {
	width: 95%;
	margin: 25px auto;
	background: #fff;
	max-width: 1200px; 
	display: table;
}

#header {
	overflow: auto;
}
	
.hide_me {
	display: none;
}

.title {
	width: 100%;
	color: #45362F;
}

.personal {
	float: left;
}

.personal ul li {
	padding-bottom: .3em;
}

.contact {
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 1em;
	text-align: right;
	float: right;
}

.name {
	font-family: 'Oswald', sans-serif;
	font-size: 1.7em;
	text-transform: uppercase;
	letter-spacing: .2em;
}

.role {
	text-transform: lowercase;
	letter-spacing: .55em;
}

.contact ul {
	display: inline-block;
	margin-left: 30px;
}

.contact ul li {
	padding-bottom: .6em;
}
.menu {
	font-size: .8em;
	letter-spacing: .37em;
}
.list-inline li {
	float: left;
}
.phone {
	font-size: .8em;
	letter-spacing: .37em;
}

.email {
	font-size: .8em;
	text-transform: lowercase;
	letter-spacing: .1em;
}

li.social a {
	font-size: .7em;
	margin-left: .8em;
}

a {
	color: #45362F;
	-webkit-transition: color 0.4s ease;
	transition: color 0.4s ease;
}

a:hover, a:active {
	color: #FF6C36; 
	-webkit-transition: color 0.4s ease;
	transition: color 0.4s ease;
}

.menu-link {
	font-family: 'Sail', cursive;
	font-size: 1.5em !important;
	padding-right: 16px;
}

#bio-link {
}

#main-link {
}

.active {
	color: #FF6C36;
	font-family: 'Sail', cursive;
	font-size: 1.5em !important;
	padding-right: 16px;
}

.tele {
	padding-left: 40px;
}



/* ****************** MEDIA BOXES ****************** */

.media-boxes-no-more-entries, .media-boxes-loading, .media-boxes-load-more-buttonxxx {
	display: none;
}

.media-boxes-load-more-button {
	background-color: #fafafa;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #ccc;
}

.media-box-container {
	-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0);
	-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0);
	box-shadow: 0px 0px 0px 0px rgba(255,255,255,0);
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}	
/* CUSTOM - WHITE ON BLACK OVERLAYS, MOTION AND STILLS */	
.mb-custom-title.white {
	text-align: center;
	font-size: 1.6em;
	letter-spacing: .1em;
	color: white;
	padding: 0 0 4px 0;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

.mb-custom-subtitle.white {
	text-align: center;
	padding: 0;
	margin-top: .5em;
	color: white;
	letter-spacing: .05em;
	font-weight: 300;
	letter-spacing: .2em;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 1.3em;
}  

.thumbnail-overlay{
    background: black; /* fallback for IE8 */
    background-color: rgba(0,0,0, .60);
    color: #333333;
  }

  .media-box-content{
	padding: 0 0 16px 0;
    background: #fff;
	font-size: 1.2em;
	font-weight: 400;
	font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	text-align: justify;
  }


/* ****************** ILIGHTBOX ****************** */



.ilightbox-overlay.metro-white {
	/*opacity: 1 !important;*/
}

.ilightbox-loader {
	display: none !important;
}

.ilightbox-holder {
	-webkit-box-shadow: 0 0 0 rgba(0,0,0,0) !important;
	box-shadow: 0 0 0 rgba(0,0,0,0) !important; 
}

.ilightbox-holder.metro-white .ilightbox-inner-toolbar .ilightbox-title {
	padding: 5px 0 !important;
	font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: .8em;
	letter-spacing: .1em;
	padding-bottom: 3em;
	color: #000;
}

.ilightbox-holder.metro-white .ilightbox-inner-toolbar .ilightbox-title span {
	color: #5488AC;
	text-transform: capitalize;
	color: #000;
}

.ilightbox-holder.metro-white .ilightbox-inner-toolbar .ilightbox-title span span {
	font-weight: 300;
}

.player, .video-wrapper {
	background: #fff !important;
}

/* -------------------- noscript backup ------------------------------ */

.no_script {
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 1.1em;
	letter-spacing: .1em;
	color: #666;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: #FFFF00;
	padding: 6px;
	
}

.noscript_box {
	float:right; 
	width: 300px;
	min-width: 200px; 
	padding: 4px;
	margin-bottom: -26px;  
}

.noscript_box2 {
	float: left;
	width: 400px;
	min-width: 200px; 
	padding: 16px;
}

.noscript_box3 {
	float: left;
	width: 1200px;
	min-width: 200px; 
	padding: 16px;
}

.noscript_box3 > img, .noscript_box2 > img {
	width: 100%;
}

.noscript_overlay {
	position: relative; 
	top: -26px; 
	left: 4px;
	z-index: 3; 
	color: white; 
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 1.05em;
	letter-spacing: .1em;
}

.container {
}



/* -------------------- all small screens ------------------------------ */

/* @media screen and (min-width: 320px) and (max-width: 540px) { */

@media screen and (min-width: 320px) and (max-width: 730px) {

body {
	margin-top: 30px;
}

.container {
	margin: 8px auto;
}

.personal {
	width: 100%;
	text-align: right;
}

.contact {
	width: 100%;
/*	padding-top: 4.5em; */
	float: none;
	text-align: right;
}

  .media-box-content{
	padding: 10px;
	font-size: 1.1em;
  }
  
.tele {
	padding-left: 16px;
	display: block;
}

.menu-link {
	padding-right: 0;
	padding-left: 8px;
}

.menu {
	line-height: 3;
}

.active {
	padding-right: 0;
	padding-left: 8px;
	
}


}

/* -------------------- PHONES, PORTRAIT & LANDSCAPE ------------------------------ */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
	.ilightbox-holder.metro-white .ilightbox-inner-toolbar .ilightbox-title {
		font-size: .4em;
		margin-bottom: -6px;
	}

	.tele {
		padding-left: 10px;
	}
}

/* -------------------- PHONES, PORTRAIT ONLY ------------------------------ */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {

	.ilightbox-holder.metro-white .ilightbox-inner-toolbar .ilightbox-title {
}

	.contact ul {
		margin-bottom: 10px;
	}

}


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

	.list-inline.menu {
		line-height: 2;
	}
	
	.list-inline.menu li {
		width:  100%;
	}

}