/*
Theme Name: Modern Cajon School by Nils Kinzig


*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}



/*------------ ALLGEMEIN ------------*/	

body{
	background: none repeat scroll 0 0 #FFFFFF;
	font-family: 'Nunito Sans', sans-serif;
}	

#content{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:0;
	
}

#container-header{
	padding: 50px 0px;
	}
	
h1, h2, h3, h4, h5, h6{	
	font-weight:800;
	color:#b2910e;
	font-size:50px;
	text-align: center;
	}
	
* {
    border: medium none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#rahmen{
	position:relative;
	margin: 0 auto;
	max-width:92.3em;
	z-index:2;
	height:auto;
	}

	
/*------------ GRID ------------*/


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col-menu {
	display: block;
	float:left;
}

.col:first-child, .col-menu:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

.span_menu_1_of_2 {
	width: 50%;
}


.span_1_of_1 {
	width: 100%;
}


/*------------ NAVI ------------*/


#header {
	position: fixed; 
	top:0px;
	width:100%;
	height:60px;
	z-index:900;
	background-color:#000000;
	border-bottom:#b2910e 2px solid;
	display:block;	
	overflow:hidden;
	}

#menu{
	float: right;
    font-size: 20px;
    font-weight: 400;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    right: 30px;
    top: 20px;
	}

#menu li {
	float: left;
	margin-left:15px;
	}


#rahmen #menu li a{
	color:#b2910e;
	display:inline;
	display:block;
	}

#rahmen #menu li a:hover{
	color:#FFFFFF;
	}

#logo{
	top:5px;
	left:30px;
	height:52px;
	z-index:15;
	position:absolute;
	}




/*------------ MOBILE NAVI ------------*/

#mobile-header{
	position:fixed;
	display:none;
	width:100%;
	height:60px;
	top:0px;
	z-index:16;
	background-color:#000000;
	border-bottom: 1px solid #b2910e;
	}

.mobile-menu{
	display:none;
	position:fixed;
	top:60px;
	font-size:20px;
	text-align:center;
	width:100%;
	z-index:15;
	background-color:#000000;
	}

#mobile-logo{
	height: 42px;
    left: 50%;
    margin-left: -113.5px;
    position: absolute;
    top: 10px;
    z-index: 15;
	}

.mobile-menu div{
	padding: 10px 0px;
	background-color:#000000;
	border-bottom:1px #b2910e solid;
	width:100%;
	color:#b2910e;	
	}

.hamburger {
	padding: 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, -webkit-filter;
	transition-property: opacity, filter;
	transition-property: opacity, filter, -webkit-filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible; 
  	}
  
.hamburger:hover {
	opacity: 0.7; 
	}

.hamburger-box {
 	width: 40px;
 	height: 27px;
 	display: inline-block;
 	position: relative; 
 	}

.hamburger-inner {
 	display: block;
 	top: 50%;
 	margin-top: -2px; 
 	}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #b2910e;
    border-radius: 4px;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
	}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; 
	}
	
.hamburger-inner::before {
    top: -10px; 
	}
	
.hamburger-inner::after {
    bottom: -10px; 
	}
	
.hamburger--collapse .hamburger-inner {
 	top: auto;
 	bottom: 0;
 	transition-duration: 0.15s;
 	transition-delay: 0.15s;
 	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
	}
  
.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; 
	}

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
	}

.hamburger--collapse.is-active .hamburger-inner {
  -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
          transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.32s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
  }

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; 
	}

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); 
	}


/*------------ HOME ------------*/


.home {
	height: 100vh;
	min-height: 100vh;
	background-image: url(images/modern-cajon-school-header.jpg);
  	background-size:cover !important;
	background-position: center center !important;
    background-repeat: no-repeat !important;
	margin-top:0px;
	background-attachment:fixed;
	overflow: auto;
}

/*------------ ME ------------*/


.me {
	width:100%;
	height:auto;
	background-color:#FFFFFF;
	background-attachment:fixed;
	}

.text-me{
	font-weight: 400;
	color: #444444;
	font-size: 20px;
	display: block;
	text-align: center;
	padding:0px 100px 50px 100px;
}

.picblock-me{
	padding-bottom: 50px;
    text-align: center;
	
}

.pic-me{
	width: 570px;
}

/*------------ EMPTY ------------*/


#empty-container{
	background-attachment:fixed;
	}

.empty1 {
	width:100%;
	height:600px;
	margin:0 0 0 0;
	background: url("images/modern-cajon-school-courses.jpg");
	background-position: center center !important;
    background-repeat: no-repeat !important;
	overflow: auto;
	}

.empty2 {
	width:100%;
	height:600px;
	margin:0 0 0 0;
	background: url("images/modern-cajon-school-contact.jpg");
	background-position: center center !important;
    background-repeat: no-repeat !important;
	overflow: auto;
	}


/*------------ COURSES ------------*/


.courses {
	width:100%;
	height:auto;
	background-color:#e6e3e3;
	background-attachment:fixed;
	}

.text-courses{
	display: block;
	text-align: center;
	font-weight: 400;
	color: #444444;
	font-size: 20px;
	padding:0px 100px 50px 100px;
}

.courses-block{
	padding: 0px 20px 40px 20px;
	overflow: hidden;
}

.courses-container{
	width: 33.3%;
	float: left;
}

.courses-content{	
	border:8px solid #FFFFFF;
	margin: 10px;
	overflow: hidden;
    position: relative;
}

.courses-content a{
	font-family: 'Nunito Sans', sans-serif;
	color: #fff;
    display: block;
    font-size: 25px;
    height: 100%;
    position: absolute;
    text-align: center;
    transition: background 0.3s ease-in-out 0s;
    width: 100%;
    z-index: 2;
	background: rgba(0,0,0, 0.2) none repeat scroll 0 0;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}

.courses-content a div{	
	left: 0;
    margin-top: -15px;
    position: absolute;
    top: 50%;
    width: 100%;
	font-weight: 800;
}
	

.courses-content a:hover{	
background: rgba(0,0,0, 0.5) none repeat scroll 0 0; 
}
	


.courses-content img{
	height: auto;
	width: 100%;
	display: block;
	margin: 0px;
}




/*------------ CONTACT-FORM ------------*/


.contact-form {
	width:100%;
	background-color:#FFFFFF;
	background-attachment:fixed;
	overflow:hidden;
	}
	
.contact-form-box{
	margin:0px 30px 50px 30px;
	height:auto;
	}

.contact-form .contact-name{
	height:50px;
	background-color:#e6e3e3;
	font-family: 'Nunito Sans', sans-serif;
	font-size:18px;
	color:#b2910e;
	margin-bottom: 20px;
	}
	
.contact-form .contact-email{
	height:50px;
	background-color:#e6e3e3;
	font-family: 'Nunito Sans', sans-serif;
	font-size:18px;
	color:#b2910e;
	margin-bottom: 20px;
	}

.contact-form .contact-subject{
	height:50px;
	background-color:#e6e3e3;
	font-family: 'Nunito Sans', sans-serif;
	font-size:18px;
	color:#b2910e;
	margin-bottom: 20px;
	}
	
.contact-form .contact-text{
	height:176px;
	background-color:#e6e3e3;
	font-size:18px;
	color:#b2910e;
	padding:12px 0px;
	}

form textarea {
    resize: none;
	font-family: 'Nunito Sans', sans-serif;
	margin-bottom: 20px;
	}
	
.send-button{
	height:50px;
	width:380px;
	background-color:#000000;
	font-family: 'Nunito Sans', sans-serif;
	font-size:25px;
	text-align:center;
	color:#FFFFFF;
	cursor:pointer;
	}

.contact-form .send-button:hover{
	background-color:#000000;
	color:#b2910e;
	}

/*------------ END ------------*/


.end {
	width:100%;
	background-color:#353434;
	background-attachment:fixed;
	height:150px;
	}	
	

/*------------ SHOW-IMPRESSUM ------------*/

#contact-button-footer{
	display:inline;}

.show-impressum {
	width:100%;
	background-color: #000000;
	border-top:#b2910e 1px solid;
	height:60px;
	background-attachment:fixed;
}	

.show-impressum #rahmen{
	text-align:center;	
	width:100%;
	margin-top:20px;
	}

.show-impressum #rahmen ul li{
	display:inline;
	margin-left:15px;
	color: #FFFFFF;
	}

.show-impressum #rahmen ul li a{
	padding:10px;
	color:#b2910e;
	}

.show-impressum #rahmen ul li a:hover{
	padding:10px;
	color:#FFFFFF;
	}	
	
	
/*------------ HIDDEN-IMPRESSUM ------------*/


.hidden-impressum {
	width:100%;
	height:auto;
	background-color: #7f7f7f;
	background-attachment:fixed;
	}
.hidden-impressum-content{
	margin:40px 50px 0px 50px;
	font-weight:400;
	font-size:20px;
	line-height:25px;
	color:#FFFFFF;
	text-align:justify;
	padding-bottom:40px;
	}

.hidden-impressum #backHome{
	text-decoration: none;
	color: #FFFFFF;
}


/*------------ VIDEO COURSES SEITEN ------------*/

.course-descr {
	width:100%;
	min-height:462px;
	margin:0 0 0 0;
	background: url("images/modern-cajon-school-courses.jpg");
	background-position: center center !important;
    background-repeat: no-repeat !important;
	overflow: auto;
	}

.course-descr #course-header{
	padding: 162px 0px 30px 0px;
	}

.course-descr #course-info{
	display: block;
	text-align: center;
	font-weight: 400;
	color:#FFFFFF;
	font-size: 20px;
	padding:0px 100px 50px 100px;
}
	
.course-video {
	width:100%;
	height:auto;
	background-color:#e6e3e3;
	background-attachment:fixed;
	}

.vid-container{
	padding: 40px 20px 40px 20px;
	overflow: hidden;
}

.vid-content{
	margin-bottom: 20px;
	height:auto;
	background-color: #ffffff;
	float: left;
	width: 100%;
}

.vid-clip{
	width:54%;
	margin:20px;
	height: 430px;
	float: left;
}

.vid-clip iframe{
	text-align: center;
	width: 100%;
	height: 100%;
}

.vid-info{
	width:40.57%;
	height: auto;
	float:left;
	margin:40px 0px 0px 0px;
}

.vid-title{
	font-size: 25px;
	font-weight: 800;
	margin-bottom: 20px;
	padding:0px 20px 0px 20px;
	color:#b2910e;
	font-family: 'Nunito Sans', sans-serif;
}

.vid-descr{
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 20px;
	padding:0px 20px 0px 20px;
	color:#444444;
	font-family: 'Nunito Sans', sans-serif;
	
}




/*------------ RESPONSIVE ANPASSUNG ------------*/


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

/* COURSES 50% BREITE */
.courses-container{
	width: 50%;
}

	
}






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

/*mobile menu*/

#mobile-header{
	display:block;
	}
	
.mobile-menu{
	display:block;
	}

/* ME BILD ANPASSUNG*/
.pic-me{
	width: 400px;
	}

/* COURSES 100% BREITE */

.courses-container{
	width: 100%;
}
	
/* VIDEO COURSE HEADER */

.course-descr #course-header{
	padding: 100px 0px 30px 0px;
	font-size: 40px;
	}

.course-descr #course-header h1{	
	font-size:40px;
	}

.course-descr #course-info{
	display: block;
	text-align: center;
	font-weight: 400;
	color:#FFFFFF;
	font-size: 18px;
}
	
.vid-clip{
	width:100%;
	margin:60px 0px 0px 0px;
	height: 430px;
}
	

.vid-info{
	width:100%;
	margin:40px 0px 0px 0px;
	text-align:center;
}

.vid-title{
	font-size: 20px;
}

.vid-descr{
	font-size: 18px;
}

/* TEXT ANPASSUNG */
	
.text-courses, .text-me, .course-descr #course-info{
	padding:0px 20px 50px 20px;
}
	

/*HINTERGRUND EBENE VERKLEINERN */
	
.home {
	margin-top:20px;
	background-attachment: scroll;
	}


/* höhe der Background bilder */

.empty1, .empty2, .empty3 {
	height:0px;
	display: none;
	}

/* AUSBLENDUNGEN */
#header {
	display:none;	
	}

#contact-button-footer{
	display:none;
	}


}

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


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
	.col { 
		margin: 1% 0 1% 0%;
	}
	.span_2_of_2, .span_1_of_2, .span_do_1_of_6 { width: 100%; }

/* ME BILD ANPASSUNG*/
.pic-me{
	width: 300px;
	}

	
/* BUTTON VERKLEINERN */
.send-button{
	width:315px;
	}


.contact-button{
	width:280px
	}
	
/* VIDEO COURSE HÖHE VERKLEINERN*/
.vid-clip{
	height: 250px;
}

/* IMPRESSUM */

.show-impressum #rahmen ul li{
	display:block;
	height:25px;
	width:100%;	
	}

.show-impressum {
	width:100%;
	background-color: #000000;
	border-bottom:#b2910e 1px solid;
	border-top:#b2910e 1px solid;
	height:100px;
	background-attachment:fixed;
	overflow:hidden;
	height: 75px;
}	

.hidden-impressum-content{
	font-size:13px;
}
	

}