@import url('https://fonts.googleapis.com/css?family=Oswald:400,300,700');
@import url('https://fonts.googleapis.com/css?family=Gentium+Basic:400,400italic,700,700italic');

@import url('font-awesome.min.css');
@import url('font-awesome-ie7.min.css');
@import url('reset.css');
@import url('sequencejs-theme.modern-slide-in.css');
@import url('contactable.css');

body {
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 1.1rem;
	color: #333;
	background-color:#ffffff;
}
*::selection {
    background: none repeat scroll 0 0 #366992;
    color: #FFFFFF;
}
*::-moz-selection {
    background: none repeat scroll 0 0 #366992;
    color: #FFFFFF;
}

article img {
	max-width: 100%;
	min-width: 100%;
}

a:link, a:visited {
	color: #3b8dbf;
	text-decoration: none;
}
a:hover {
	color: #25567d;
	text-decoration: none;
}

p {margin: 0 0 20px 0;}

h1 {
	font-size: 6em;
	letter-spacing: -3px;
	font-family: 'Gentium Basic', serif;
	font-style: italic;
	margin: -10px 0 0 0;
	line-height: 1.3em;
}
h2 {
	font-size: 1.3em;
	font-weight: 400;
	margin: 0 0 40px 0;
}

h2.withoutspace {margin: 0;}

h3 {
	font-size: 1rem;
	margin: 0;
	padding: 0;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid white;
}

.whitetext {color: white;}
.whitetext a {color: white;}
.withoutSpace {margin: 0;}



/* ***************** GRID START ***************** */

.container{
	position: relative;
	width: 90%; /*width: 1000px;*/
	max-width: 1000px;
	margin: auto;
}

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:after { clear: both; }

.row-fluid {
	width: 100%;
    *zoom: 1;
}
.row-fluid:before, .row-fluid:after {
	display: table;
    content: "";
    line-height: 0;
}
.row-fluid:after {
    clear: both;
}
.row-fluid [class*="span"] {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-left: 2.564102564102564%;
    *margin-left: 2.5109110747408616%;
}
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
    margin-left: 2.564102564102564%;
}
.row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
}
.row-fluid .span11 {
    width: 91.45299145299145%;
    *width: 91.39979996362975%;
}
.row-fluid .span10 {
    width: 82.90598290598291%;
    *width: 82.8527914166212%;
}
.row-fluid .span9 {
    width: 74.35897435897436%;
    *width: 74.30578286961266%;
}
.row-fluid .span8 {
    width: 65.81196581196582%;
    *width: 65.75877432260411%;
}
.row-fluid .span7 {
    width: 57.26495726495726%;
    *width: 57.21176577559556%;
}
.row-fluid .span6 {
    width: 48.717948717948715%;
    *width: 48.664757228587014%;
}
.row-fluid .span5 {
    width: 40.17094017094017%;
    *width: 40.11774868157847%;
}
.row-fluid .span4 {
    width: 31.62393162393162%;
    *width: 31.570740134569927%;
}
.row-fluid .span3 {
    width: 23.076923076923077%;
    *width: 23.023731587561375%;
}
.row-fluid .span2 {
    width: 14.529914529914532%;
    *width: 14.476723040552828%;
}
.row-fluid .span1 {
    width: 5.982905982905983%;
    *width: 5.929714493544281%;
}
.row-fluid .offset12 {
    margin-left: 105.12820512820512%;
    *margin-left: 105.02182214948171%;
}
.row-fluid .offset12:first-child {
    margin-left: 102.56410256410257%;
    *margin-left: 102.45771958537915%;
}
.row-fluid .offset11 {
    margin-left: 96.58119658119658%;
    *margin-left: 96.47481360247316%;
}
.row-fluid .offset11:first-child {
    margin-left: 94.01709401709402%;
    *margin-left: 93.91071103837061%;
}
.row-fluid .offset10 {
    margin-left: 88.03418803418803%;
    *margin-left: 87.92780505546462%;
}
.row-fluid .offset10:first-child {
    margin-left: 85.47008547008548%;
    *margin-left: 85.36370249136206%;
}
.row-fluid .offset9 {
    margin-left: 79.48717948717949%;
    *margin-left: 79.38079650845607%;
}
.row-fluid .offset9:first-child {
    margin-left: 76.92307692307693%;
    *margin-left: 76.81669394435352%;
}
.row-fluid .offset8 {
    margin-left: 70.94017094017094%;
    *margin-left: 70.83378796144753%;
}
.row-fluid .offset8:first-child {
    margin-left: 68.37606837606839%;
    *margin-left: 68.26968539734497%;
}
.row-fluid .offset7 {
    margin-left: 62.39316239316238%;
    *margin-left: 62.28677941443899%;
}
.row-fluid .offset7:first-child {
    margin-left: 59.82905982905983%;
    *margin-left: 59.72267685033642%;
}
.row-fluid .offset6 {
    margin-left: 53.84615384615384%;
    *margin-left: 53.739770867430444%;
}
.row-fluid .offset6:first-child {
    margin-left: 51.28205128205128%;
    *margin-left: 51.175668303327875%;
}
.row-fluid .offset5 {
    margin-left: 45.299145299145295%;
    *margin-left: 45.1927623204219%;
}
.row-fluid .offset5:first-child {
    margin-left: 42.73504273504273%;
    *margin-left: 42.62865975631933%;
}
.row-fluid .offset4 {
    margin-left: 36.75213675213675%;
    *margin-left: 36.645753773413354%;
}
.row-fluid .offset4:first-child {
    margin-left: 34.18803418803419%;
    *margin-left: 34.081651209310785%;
}
.row-fluid .offset3 {
    margin-left: 28.205128205128204%;
    *margin-left: 28.0987452264048%;
}
.row-fluid .offset3:first-child {
    margin-left: 25.641025641025642%;
    *margin-left: 25.53464266230224%;
}
.row-fluid .offset2 {
    margin-left: 19.65811965811966%;
    *margin-left: 19.551736679396257%;
}
.row-fluid .offset2:first-child {
    margin-left: 17.094017094017094%;
    *margin-left: 16.98763411529369%;
}
.row-fluid .offset1 {
    margin-left: 11.11111111111111%;
    *margin-left: 11.004728132387708%;
}
.row-fluid .offset1:first-child {
    margin-left: 8.547008547008547%;
    *margin-left: 8.440625568285142%;
}
  
  
@media (min-width: 768px) and (max-width: 979px) {
	.row-fluid {
		width: 100%;
		*zoom: 1;
	}
	.row-fluid:before, .row-fluid:after {
		display: table;
		content: "";
		line-height: 0;
	}
	.row-fluid:after {
		clear: both;
	}
	.row-fluid [class*="span"] {
		display: block;
		width: 100%;
		min-height: 30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		margin-left: 2.7624309392265194%;
		*margin-left: 2.709239449864817%;
	}
	.row-fluid [class*="span"]:first-child {
		margin-left: 0;
	}
	.row-fluid .controls-row [class*="span"] + [class*="span"] {
		margin-left: 2.7624309392265194%;
	}
	.row-fluid .span12 {
		width: 100%;
		*width: 99.94680851063829%;
	}
	.row-fluid .span11 {
		width: 91.43646408839778%;
		*width: 91.38327259903608%;
	}
	.row-fluid .span10 {
		width: 82.87292817679558%;
		*width: 82.81973668743387%;
	}
	.row-fluid .span9 {
		width: 74.30939226519337%;
		*width: 74.25620077583166%;
	}
	.row-fluid .span8 {
		width: 65.74585635359117%;
		*width: 65.69266486422946%;
	}
	.row-fluid .span7 {
		width: 57.18232044198895%;
		*width: 57.12912895262725%;
	}
	.row-fluid .span6 {
		width: 48.61878453038674%;
		*width: 48.56559304102504%;
	}
	.row-fluid .span5 {
		width: 40.05524861878453%;
		*width: 40.00205712942283%;
	}
	.row-fluid .span4 {
		width: 31.491712707182323%;
		*width: 31.43852121782062%;
	}
	.row-fluid .span3 {
		width: 22.92817679558011%;
		*width: 22.87498530621841%;
	}
	.row-fluid .span2 {
		width: 14.3646408839779%;
		*width: 14.311449394616199%;
	}
	.row-fluid .span1 {
		width: 5.801104972375691%;
		*width: 5.747913483013988%;
	}
	.row-fluid .offset12 {
		margin-left: 105.52486187845304%;
		*margin-left: 105.41847889972962%;
	}
	.row-fluid .offset12:first-child {
		margin-left: 102.76243093922652%;
		*margin-left: 102.6560479605031%;
	}
	.row-fluid .offset11 {
		margin-left: 96.96132596685082%;
		*margin-left: 96.8549429881274%;
	}
	.row-fluid .offset11:first-child {
		margin-left: 94.1988950276243%;
		*margin-left: 94.09251204890089%;
	}
	.row-fluid .offset10 {
		margin-left: 88.39779005524862%;
		*margin-left: 88.2914070765252%;
	}
	.row-fluid .offset10:first-child {
		margin-left: 85.6353591160221%;
		*margin-left: 85.52897613729868%;
	}
	.row-fluid .offset9 {
		margin-left: 79.8342541436464%;
		*margin-left: 79.72787116492299%;
	}
	.row-fluid .offset9:first-child {
		margin-left: 77.07182320441989%;
		*margin-left: 76.96544022569647%;
	}
	.row-fluid .offset8 {
		margin-left: 71.2707182320442%;
		*margin-left: 71.16433525332079%;
	}
	.row-fluid .offset8:first-child {
		margin-left: 68.50828729281768%;
		*margin-left: 68.40190431409427%;
	}
	.row-fluid .offset7 {
		margin-left: 62.70718232044199%;
		*margin-left: 62.60079934171858%;
	}
	.row-fluid .offset7:first-child {
		margin-left: 59.94475138121546%;
		*margin-left: 59.83836840249207%;
	}
	.row-fluid .offset6 {
		margin-left: 54.14364640883978%;
		*margin-left: 54.037263430116376%;
	}
	.row-fluid .offset6:first-child {
		margin-left: 51.38121546961326%;
		*margin-left: 51.27483249088986%;
	}
	.row-fluid .offset5 {
		margin-left: 45.58011049723757%;
		*margin-left: 45.47372751851417%;
	}
	.row-fluid .offset5:first-child {
		margin-left: 42.81767955801105%;
		*margin-left: 42.71129657928765%;
	}
	.row-fluid .offset4 {
		margin-left: 37.01657458563536%;
		*margin-left: 36.91019160691196%;
	}
	.row-fluid .offset4:first-child {
		margin-left: 34.25414364640884%;
		*margin-left: 34.14776066768544%;
	}
	.row-fluid .offset3 {
		margin-left: 28.45303867403315%;
		*margin-left: 28.346655695309746%;
	}
	.row-fluid .offset3:first-child {
		margin-left: 25.69060773480663%;
		*margin-left: 25.584224756083227%;
	}
	.row-fluid .offset2 {
		margin-left: 19.88950276243094%;
		*margin-left: 19.783119783707537%;
	}
	.row-fluid .offset2:first-child {
		margin-left: 17.12707182320442%;
		*margin-left: 17.02068884448102%;
	}
	.row-fluid .offset1 {
		margin-left: 11.32596685082873%;
		*margin-left: 11.219583872105325%;
	}
	.row-fluid .offset1:first-child {
		margin-left: 8.56353591160221%;
		*margin-left: 8.457152932878806%;
	}
}

@media (max-width: 767px) {
	.row-fluid [class*="span"] {
		float: none;
		display: block;
		width: 100%;
		margin-left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.span12,
	.row-fluid .span12 {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row-fluid [class*="offset"]:first-child {
		margin-left: 0;
	}
}
  
/* ***************** GRID END ***************** */

.slogan {
	text-align: center;
	background: #366992;
	color: #fff;
}
.slogan h2 {
	margin: 0;
}
.slogan	h1 {
	font-size: 2em;
	letter-spacing: 0;
	font-family: 'Oswald', Arial, Helvetice, sans-serif;
	font-style: normal;
}
.slogan p {
	letter-spacing: 1px ;
}



/* Navigation */

.menu {
	position:fixed;
	top:0px;
	width:100%; 
	height:auto; 

	/*background:url(../img/40947029.jpg) no-repeat 0 center;
	background-size: cover;
	background: #fff;*/
	z-index: 2000;
	font-family: 'Oswald', Arial, Helvetice, sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	text-transform: uppercase;
	/*opacity: 0.8;
	filter: alpha(opacity=80);
	border-bottom: 10px solid #f8940a;
	background: no-repeat center left #366992;*/
	background: no-repeat center left #333333;
	opacity: 0.95;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; /* IE8 */
    filter: alpha(opacity=95); /*IE7 und kleiner*/
	-webkit-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	-moz-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
}
#logo {
	padding: 10px 10px 10px 0;
}

.navigation{
	list-style: none;
	float: right;
	margin: 47px 0 0 0;
}
.navigation li{
	position: relative;
	display: block; 
	float: left;
	padding: 0 2%;
	color: #c3d2df;
	font-size: 1.1em;
	font-weight: 400;
	width: auto;
}
/*
.navigation ul li ul{ 
	display: none;
	position: absolute;
	top: 25px;
	left: 0;
	padding: 9px 0;
	width: 150px;
	background: #366992;
	-webkit-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	-moz-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	}
*/
.navigation li:hover{
	cursor:pointer;
	color: #fff;
	transition: all 0.4s ease-in-out 0s;
}
.navigation li:hover ul, .navigation .active ul{display: block;}

.navigation ul li ul li {width: 100%; padding:3px 15px; font-size: 0.9em;}

.navigation .active{
	cursor:pointer;
	color: #fff;
}




/* General Slides */ 

.slide{
	background-attachment: fixed;
	width:100%;
	height:auto;
	position: relative;
	border-bottom: 10px solid #333333;
}

.slide nav {position:relative; clear:both;}
.slide nav ul {position: relative;}

/* ***************** CONTENT ***************** */
.info { 
	text-align: center;
	font-size: 5em;
	padding: 25px 20px;
}

/* Slide Home */ 
#slideHome {
	background:url('../images/GitarrenschuleBodensee.jpg');
	background-size: cover;
	background-position: 0 200%;
	height: 550px;
	margin: 0 0 200px 0;
		-webkit-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	-moz-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
}

#slideHome h2 {
	font-size: 4rem;
	margin: 0;
	text-shadow:
    1px 1px #333,
    2px 2px #333,
    3px 3px #333,
    4px 4px #333,
    5px 5px #333,
    6px 6px #333;
   /* text-shadow:
    0 0 10px #FFFFFF,
    0 0 20px #FFFFFF,
    0 0 30px #FFFFFF,
    0 0 40px #8f6149,
    0 0 70px #8f6149,
    0 0 80px #8f6149,
    0 0 100px #8f6149,
    0 0 150px #8f6149;*/
}

#slideHome h3 {
	font-size: 1.8rem;
	text-shadow:
    1px 1px #333,
    2px 2px #333,
    3px 3px #333,
    4px 4px #333;
}


/* Slide Enter */ 
#slideEnter .navigation, #Gitarrenunterricht .navigation, #slidePreise .navigation {float:left; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; padding: 20px 0; margin:20px 0 30px 0;}
#slideEnter .navigation li , #Gitarrenunterricht .navigation li, #slidePreise .navigation  li {padding: 5px 30px 5px 0;color:#366992;}
#slideEnter .navigation li:hover, #Gitarrenunterricht .navigation li:hover, #slidePreise .navigation  li:hover {color:#C3D2DF;}
#slideEnter .navigation .active, #Gitarrenunterricht .navigation .active, #slidePreise .navigation  .active {color:#366992;}





/* Slide Info */ 
#slideInfo{
	background:url('../images/Gitarist.jpg') 0 200%;
	background-size: cover;
}


/* Slide Info2 */ 
#slideInfo2{
	background:url('../images/FrauGitarre.jpg')  0 350%;
	background-size: cover;
}

/* Slide Gutschein */ 
#slideGutschein{
	background:url('../images/Geschenkgutschein.jpg') 0 250%;
	background-size: cover;

}


/* Slide DrummersFocus */ 
#slideDrummersFocus{
	background:url('../images/DrummersFocus.jpg') 0 -100%;
	background-size: cover;
}
#slideDrummersFocus img {max-width:284px;min-width:284px;}

/* Slide Preise */ 
.PriceBox {
	background:#eee; 
	padding:15px;
	margin: 10px 0;
}


/* Slide Kontakt */
#slideKontakt{
	background-image:url('../images/Gitarre.jpg');
	background-size: cover;
	/*opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=0.8);*/
}

.wrap { padding: 140px 0; }
.wrapsmall { padding: 70px 0; }
.OverlayPattern {background: url('../img/OverlayPattern.png');}


/* Google Map */
#map {width: 100%; height: 300px;}


/* Button */
a.LikeButton {
	color:#FFFFFF;
	font-size: 1.5rem;
	background-color:#366992;
	cursor:pointer;
	left:0;
	margin-left:-5px; 
	*margin-left:-5px; 
	overflow:hidden;
	position:fixed;
	*position:absolute;
	top:163px;
	*margin-top:10px;
	width:44px;
	z-index:9900000;
	text-align: center;
	padding: 10px 10px 12px;
	/*-webkit-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	-moz-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);*/
}
a.LikeButton:hover {
	padding: 10px 10px 12px 20px;
}

li.Impressum {
	color:#FFFFFF;
	font-size: 1.2rem;
	background-color:#366992;
	cursor:pointer;
	left:0;
	margin-left:-5px; 
	*margin-left:-5px; 
	overflow:hidden;
	position:fixed;
	*position:absolute;
	top:257px;
	*margin-top:10px;
	width:44px;
	z-index:9900000;
	text-align: center;
	padding: 0px 10px 5px 10px;
	/*-webkit-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	-moz-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);*/
}
li.Impressum:hover {padding: 0px 10px 5px 20px;}
li.Impressum span {
	display: block;
	font-size: 0.6rem;
	margin: -2px 0 0 0;
}


li.Datenschutz {
	color:#FFFFFF;
	font-size: 1.2rem;
	background-color:#333;
	cursor:pointer;
	left:0;
	margin-left:-5px; 
	*margin-left:-5px; 
	overflow:hidden;
	position:fixed;
	*position:absolute;
	top:303px;
	*margin-top:10px;
	width:44px;
	z-index:9900000;
	text-align: center;
	padding: 0px 10px 5px 10px;
	/*-webkit-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	-moz-box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);
	box-shadow: 0px 10px 14px 0px rgba(51,51,51,0.6);*/
}
li.Datenschutz:hover {padding: 0px 10px 5px 20px;}
li.Datenschutz span {
	display: block;
	font-size: 0.6rem;
	margin: -2px 0 0 0;
	padding: 12px 0 4px 0;
}


/* toTop Link */
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(../img/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(../img/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}


/* Accordion */
.accordion div.first { display:block;}
.accordion div {
	display:none;
	background: white;
	padding: 15px;
  }
.accordion h4 {
	background: #eeeeee;
	padding: 10px 15px;
	margin: 0 0 1px 0;
	font-size: 1rem;
	cursor: pointer;
  }

.accordion h4:hover {background: #f8f8f8;}
.accordion h4 span {font-weight: 100; margin: 0 20px 0 0;}




/* ***************** TABLET ***************** */

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

	#logo {
		width: 100%;
		text-align: center;
	}

	#nav {
		width:100%;
		text-align:center;
		margin:10px 0;
	}

	.navigation{
		width: 100%;
		float: center;
		list-style: none;
		margin: 0;
		padding:0;
	}

	.navigation li{
		float: left;
		/*width:25%;
		padding:0;*/
	}



	#decorative {
		display:none;
	}

	#content {
		text-align:center;
		width:100%;
	}


}













/* ***************** MOBILE ***************** */

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

h1 {
	font-size: 2.5em;
	letter-spacing: -3px;
	font-family: 'Gentium Basic', serif;
	font-style: italic;
	margin: -10px 0 0 0;
	line-height: 1.3em;
}


	#logo {
		width: 100%;
		text-align: center;
	}


	#nav {
		width:100%;
		margin:5px 0;
	}

	.navigation{
		width: 100%;
		float: left;
		list-style: none;
		margin: 0 0 30px 0;
		padding:0;
		text-align: center;
	}

	.navigation li{
		display: block;
		width: 100%;
		/*float: left;
		width:25%;*/
	}

	.slide{
		background-attachment: fixed;
		width:100%;
		position: relative;
		/*padding:150px 0;*/
	}
	
	.wrap { padding: 60px 0; }
	.wrapsmall { padding: 30px 0; }
	#slideHome {margin: 0px;}
	
	li.Impressum {position: relative; width:44px; top:auto;}
	a.LikeButton {position: relative; top:107px; padding: 10px 21px 12px 22px;}
	.menu {position: relative;}
	#contactable-inner {position: relative; top:180px; padding: 10px 20px 12px;}
	#contactable-contactForm {width:300px;}
	form#contactable-contactForm input, form#contactable-contactForm textarea {width:260px;}
	form#contactable-contactForm select, form#contactable-contactForm .contactable-submit {width:272px;}

	

}


.whitetext a {
	border-bottom: 1px solid #fff;
}
.whitetext a:hover {
	color: #333;
	border-bottom: 1px solid #333;
}