/*   
Theme Name: Moonbootica
Theme URI: http://derhintergrund.com
Description: Theme für Moonbootica
Author: blokstudio
Author URI: http://blokstudio.de 
Version: 1.0
*/


/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
body *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
body,html{width:100%;height:100%;padding:0;margin:0;background:#000000;position:absolute}
body {font: 14px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;}
body, select, input, textarea {color: #808080;}

a {color: #808080;text-decoration:none;}
a:hover {color: #dcdcdc;}

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

a:link {-webkit-tap-highlight-color: #dcdcdc;} 

.hidden{display:none}

/* Navigation Styling
-------------------------------------------------------------------------------*/

#footer {
	position:fixed;
	width:100%;
	height:70px;
	background:rgba(0,0,0,0.65);
	bottom:0;
	left:0;
	z-index:100;
}

#logo{
	margin-left:10px;
	margin-top:10px;
	float:left;
	cursor:pointer;
}

#icon-navigation{
	float:right;
}

#icon-navigation .icon{
	width:40px;
	height:40px;
	margin-top:15px;
	margin-right:12px;
	margin-left:12px;
	background:transparent;
	float:left;
}

#icon-navigation .icon:first-child{
	margin-left:0px;
}

#navigation{
	float:right;
	position:relative;
	text-transform:uppercase;
	font-weight:bold;
}

#navigation #btn-nav{
	width:70px;
	height:70px;
	display:block;
	background:url('./navicon.png');
	background-color:transparent;
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	padding-bottom:15px;
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
}

 #navigation #btn-nav.active{
	background:url('./navicon-hover.png');
	background-color:rgba(0,0,0,0.9);
	background-repeat:no-repeat;
	background-position:center center;
}

#navigation #main-nav{
	background-color:rgba(0,0,0,0.9);
	position:absolute;
	bottom:100%;
	right:0;
	width:175px;
	padding-top:25px;
	padding-right:15px;
	padding-left:30px;
	display:none;
	text-align:right;
}

#navigation #main-nav li.trenner{
	height:1px;
	background-color:#808080;
	display:block;
}

#navigation #main-nav li.trenner.hidden{
	
	display:none;
}


#navigation #main-nav li{
	margin-bottom:25px;
	text-align:right;
}

#navigation #main-nav .nav-wrap{
	display:inline-block;
	text-align:right;
	position:static;
	bottom:0;
}

#navigation #main-nav li.icon-alternative a, #navigationn #main-nav li.icon-alternative a:visited{
	color: #dcdcdc;
}


#navigation #main-nav li.icon-alternative a:hover,#navigationn #main-nav li.icon-alternative a:active{
	color: #808080;
}



/* Content Styling
-------------------------------------------------------------------------------*/

#content{
	
	background-color:#000000;
	position:relative;
	width:760px;
	padding:50;
	height:auto;
	margin:0 auto;
	z-index:30;
	font-size:14px;
	color:#dcdcdc;
	margin-top:50px;
	padding-right:10px;
	padding-left:100px;
	color:#808080;
	
	text-transform:uppercase;
}


#content-wrap{
	padding-right:90px;
}

.entry img{
min-width:100%;
max-width:100%;
height:auto;
}

#content .slimScrollBar{
	border-radius: 0px !important;
	opacity:0.15 !important;
}

#content h2{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
	color:#FFFFFF;
	font-style: normal;
}

#content p{
	margin-bottom:15px;
	font-style: italic;
}

#content a:link{color:#ffffff;}
#content a:visited{color:#ffffff;}
#content a:hover{color:#808080;}
#content a:active{color:#808080;}



#newsletter-signup, #newsletter-signup label,#newsletter-signup input{
	display:block;
		font-style: italic;

}



form input[type='text']{
	width:100%;
	padding:10px;
	background-color:#ffffff;
	border:none;
	color:#000000;
	margin-top:10px;
		font-style: normal;

}

form #response{
	margin-top:20px;
	font-style: italic;

}

form #response .error{
	color:#e93e7d;
}

form #response .success{
	color:#00ff24;
}

form .btn {
	width:115px;
	height:40px;
	background:transparent;
	background-image:url('./submit.png');
	border:none;
	padding:0;
	margin:0;
	margin-top:20px;

}
form .btn:hover {
		background-image:url('./submit-hover.png')
}



/* Background Video Styles
-------------------------------------------------------------------------------*/
#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:0;padding:10px;width:100%;background:rgba(0,0,0,.25);
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}
.vjs-control-bar{display:none !important;}

.poster {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
    opacity:0;
    position:absolute;
    top:0;
    left:0;
   -moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center center;
background-attachment: fixed;
background-repeat:no-repeat;
}

#pattern{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:url('_/img/pattern.png');
	z-index:20;
	opacity:0.5;
}

#btn-play{
	display:none;
	opacity:0.6;
	position:absolute;
	width:49px;
	height:49px;
	z-index:20;
	left:50%;
	top:50%;
	margin-top:-25px;
	margin-left:-25px;
}


/* Jonathan Johnson Promo
-------------------------------------------------------------------------------*/
#promo{
	position: absolute;
    z-index: 100;
    left: 10%;
    top: 0;
    width: 251px;
    height: 427px;
}

div.future {
 	font-size:136%;letter-spacing: 8px;text-align:center;margin-top:8px;margin-left:8px;color:white;font-weight:normal;
}

div.buyfuturenow {
	font-size:90%;letter-spacing: 3px;text-align:center;margin-top:30px;margin-bottom:50px;color:white;font-weight:bold;
}

@media (max-width:760px) {

	#promo{
		display:block;
		height: auto;
	    top: -10px;
	    width: 100px;
	}
	
	#promo div.future {
		font-size:8px;letter-spacing: 3px;text-align:center;margin-top:10px;margin-left:6px;color:white;font-weight:normal;
	}
	
	div.buyfuturenow {
		font-size:8px;letter-spacing: 3px;text-align:center;margin-top:10px;margin-bottom:20px;color:white;font-weight:bold;
	}
	
	div.buyfuturenow img {display:none;} 
	
		
}



/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}