@font-face {
    font-family: 'BebasRegular';
    src: url('../fonts/bebas/BEBAS___-webfont.eot');
    src: url('..//bebas/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas/BEBAS___-webfont.woff') format('woff'),
         url('../fonts/bebas/BEBAS___-webfont.ttf') format('truetype'),
         url('../fonts/bebas/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
   Author's custom styles

   		Stefanie Noell
		http://www.stefanienoell.com
   ========================================================================== */

/* ===================== */
/* 		!GENERAL		 */
/* ===================== */


*{margin: 0; padding: 0;}

body{
	padding-top: 24px;
	font-family: "PT Sans", Arial, sans-serif;
	background: #000;
	color: #fff;
}

hr{
	margin: 0;
	display: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: BebasRegular, "Arial Narrow", sans-serif;
	line-height:1;
}

h1{
	font-size: 1.6em;
	color: #E67E00;
}


/* !NAVBAR */
.navbar{ /* only show on narrow screens */
	display: none;
}

.navbar-fixed-top{
	margin: 0;
}

.navbar-inner{
	border-bottom: 1px solid #917A5F;
	background-image: -webkit-linear-gradient(top,#fafafa,#F2F2F2);
}
.navbar .nav > li > a {
	font-weight: bold;
/* 	font-size: 1.1em; */
	font-style: italic;
	color: #E67E00;
	text-shadow: 0 1px 0 #fff;
	padding: 16px 40px;
}
.navbar .nav > .active > a, .navbar .nav > a:hover, .navbar .nav > a:focus {
	color: #fafafa;
	background-color: #E67E00;
	text-shadow: 0 1px 0 #999;
}


/* ==================== */
/* 		!HEADER 		*/
/* ==================== */

header{
	font-family: BebasRegular, "Arial Narrow", sans-serif;
	line-height:1;
	letter-spacing: 1px;
	margin:24px 0 24px 0;
	padding: 0px;
}

header h1{
	float: left;
	width: 214px;
	margin: 0 12px 12px 0;
	padding-top: 1px;	/* padding 0 cuts off top of type */
	color: #aaa;
	font-size: 1em;
	font-weight: normal;
	line-height: 1;
	border-right: 8px solid #fff;
	overflow: hidden;
}

header h2, header h3, header p{
	display: block;
	margin: 0 0 8px 0;
	line-height: 1;
	font-weight: normal;
}

header h2{
	font-size: 3.8em;
	margin-bottom: 24px;
}

header h2 .add-info{
	color: #E67E00;
}

header h3{
	font-size: 2.5em;
	margin-bottom: 24px;
}

header p{
	font-size: 1.6em;
	line-height: 1.2;
	margin-bottom: 0;
	z-index:1002;
}

abbr[title] {
	border: none;
}


#firstname{
	display:block;
	font-size: 3.8em;
	margin-bottom: 16px;
}

#lastname{
	display:block;
	font-size: 6.9em;
	margin-bottom: -9px;
}

#details{
	float:left;
	width: 66.46%;
}

/* ===================== */
/* 		!VIDEOCLIPS		 */
/* ===================== */

#videoclips{
	padding-top: 24px;
	padding-bottom: 48px;
}

.vimeoContainer{
	position: relative;
	margin-bottom: 24px;
	padding: 0;
	padding-bottom: 56.25%; 	/* 16/9 ratio */
	padding-top: 30px: /* IE6 workaround */
	height: 0px;
	overflow: hidden;
	border: 8px solid #aaa;
}

.vimeoContainer:hover{
	border-color: #fff;
}

.vimeoContainer embed, 
.vimeoContainer iframe, 
.vimeoContainer object{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;	
}


iframe{
	display: block;
	position: relative;
	z-index:1001;
}

/* ===================== */
/* 		!ABOUT			 */
/* ===================== */

#about{
	background-color: #E67E00;
	padding-top: 48px;
	padding-bottom: 48px;
}


#about a{
	color: #444;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

#about a:hover, #about a:focus{
	color: #222;
	text-decoration: none;
	border-bottom: 1px dotted #444;
}


#about .btn{
	border: none;
}

#about .btn:hover, #about .btn:focus{
	border: none;
}



/* ===================== */
/* 		!MAIL			 */
/* ===================== */

form .input-group{
	position: relative;
}


input, button, select, textarea{
	width: 90%;
	font-family: "PT Sans", Arial, sans-serif;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	color: #aaa;
}
input:focus, textarea:focus{
	color: #444;
}
input[type="submit"]{
	/*
		width: 17em;
		padding: 10px;
		font-size: 1.2em;
	*/
}


label {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: -38px;
	right: 32px;
	width: auto;
	height: 10px;
	line-height: 10px;
	padding: 10px;
	font-size: 14px;
	text-align: left;
	color: rgb(102, 102, 102);
	background: rgb(204, 204, 204);
	border: 1px solid rgb(204, 204, 204);
	border-radius: 5px;
	text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
	box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
	
	transition: opacity 0.5s ease;
}

label:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: #ccc transparent transparent transparent;
	top: 30px;
	right: 8px;
}

input:focus + label, textarea:focus + label{
	visibility: visible;
	opacity: 1;
}


#contactForm #loading {
    width:32px;
    height:32px;
    background-image:url(../img/loading.gif);
    display:block;
    position:absolute;
    right:130px;
    bottom:16px;
/*     display:none; */
}

#contactForm #errors {
    display:none;
    margin: 10px 24px 10px 0;
	color: #444;
	background: #bbb;
	padding: 0 4px;
	-webkit-border-radius: 3px; /* Android ? 1.6, iOS 1-3.2, Safari 3-4 */
	border-radius: 3px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

#contactForm #errors li {
    padding:2px;
    list-style-type:circle;    
}


#contactForm #errors #info {
    font-weight:bold;
    list-style-type:none; 
}

#contactForm #errors #info:before {
    content: '';    
}

#contactForm #success {
    border:solid 1px #83D186;
    padding:25px 10px;
    margin:25px 0px;
    display:block;
    width:90%;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
    font-weight:bold;
    display:none;
}

#contactForm #errors.visible, #contactForm #success.visible {
    display:block;    
}


/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/* Normalize placeholder styles */

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}





/* ===================================== */
/* 		!TWEET	(seaofclouds plugin)	 */
/* ===================================== */

.tweet_list{
	list-style-type: none;
	margin: 0;
}

.tweet_list li{
	border-top: 1px dotted #EBB058;
	
}

.tweet_list li{
	border-top: 1px dotted #EBB058;
	padding-top: 10px;
	margin-top: 10px;
}

.tweet_list li.tweet_first{
	border: none;
}

.tweet_time{
	color: #444;
	background: #bbb;
	padding: 0 4px;
	-webkit-border-radius: 3px; /* Android ? 1.6, iOS 1-3.2, Safari 3-4 */
	border-radius: 3px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

.tweet_time:after {
   content: ":";
}

.tweet_time:hover, .tweet_time:focus{
	color: #fff;
	background: #aaa;
}

#about .tweet_time:hover a, #about .tweet_time:focus a{
	color: #fff;
	border: none;
}




/* ===================== */
/* 		!FOOTER			 */
/* ===================== */

#footer{
	background: #fff;
	color: #000;
}

footer{
	margin:0 auto;
	padding: 8px 40px;
	text-align: center;
	font-size: 0.8em;
}

footer .label{
	color: #333;
}

footer a { color: #333; border-bottom: 1px dotted #333; text-decoration: none; padding: 0 4px;}
footer a:visited { color: #333; border-bottom: 1px dotted #333; }
footer a:hover { color: #000; border-bottom: 1px solid #000; text-decoration: none;}
footer a:focus { outline: thin dotted; }

/* ===================== */
/* 		!@MEDIA			 */
/* ===================== */

@media (max-width: 979px){
	
	/* 		!HEADER max-width 979px		*/

	header h2 .add-info{
		display: inline-block;
		width: 3em;
		font-size: 0.46em;
	}
	
}

@media (max-width: 767px){
	body {
		padding-top: 0px;
		padding-right: 0px;
		padding-left: 0px;
	}
	.wrapper {
		padding-right: 20px;
		padding-left: 20px;
	}
	.navbar{
		display: block;
	}		
	.span4{
		margin-bottom: 48px;
	}

}

@media (max-width: 739px){
	
	/* 		!HEADER max-width 739px		*/
	/* this is the size where the header doesn't fit anymore... */
	
	
	.wrapper#header{
		background: #222;
	}
	
	header{
/* 		padding-bottom: 24px; */
/* 		border-bottom: 8px solid #fff; */
	}
	
	header h1{
		float: none;
		width: auto;
		border: none;
	}
	
	#firstname{
		display:inline-block;
		font-size: 3.8em;
		margin-bottom: 12px;
		margin-right: 0.2em;
	}
	
	#lastname{
		display:inline-block;
		font-size: 3.8em;
		margin-bottom: 12px;
	}
	
	#details{
		float:none;
		width: 100%;
	}

}

@media (max-width: 480px){
	
	/* 		!HEADER max-width 480px		*/
	
	header{
		font-size: 0.65em;
	}
	

}