/*CSS for www.yoga-klang-bewegung.ch BY www.dunkel.cc | 2015 */

/* YKB COLORS */
/*
YKB BACKGROUND: #fefefd / rgba(254, 254, 253, 1)
YKB RED: #e0581c / rgba(225, 88, 28, 1)
YKB HOVER: #bab1a8 / rgba(186, 177, 168, 1)
*/
/* YKB FONT */
/* FAMILY: "adobe-garamond-pro"; FONT-WEIGHTS: 400 700 */

/**************** RESET STYLES IS A GOOD THING *************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

a img {border: 0;}

figure {position: relative;}
figure img {width: 100%;}
/**********************************************************************************************************************/

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; outline: none;}

html, body{height: 100%;}

body{
	background-color: #fefefd;
	background-size: 100% auto;
	background-repeat: no-repeat;
	font-family: "adobe-garamond-pro", Georgia, Times, serif;
	letter-spacing: 0.5px;
}

body {background-image: url(/img/backgrounds/bluete.jpg);}
body.home{background-image: url(/img/backgrounds/home.jpg);}
body.kurse, body.portrait, body.kontakt, body.klang, body.bewegung, body.fortgeschrittene, body.kinaesthetics {background-image: url(/img/backgrounds/bluete.jpg);}
body.yoga, body.hatha-yoga {background-image: url(/img/backgrounds/yoga.jpg);}
body.mann {background-image: url(/img/backgrounds/yoga-mann.jpg);}
body.portrait {background-image: url(/img/backgrounds/blatt.jpg);}


h1,h2,h3,h4{font-weight: normal;}

h2, h4{font-size: 1.2em;}

main{max-width: 1024px; width: 100%; margin: 0 auto; min-height: 100%; position: relative;  padding-bottom: 150px;}

#header{width: 100%; text-align: center;}
#header img{width:40%; padding: 70px 0;}

#mainNav{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between;-ms-justify-content: space-between;justify-content: space-between; width: 40%; margin: 0 auto 70px;}
#mainNav a{color: #635747; text-decoration: none; font-size: 1.2em; transition: .5s;}
#mainNav a.active{color: #bab1a8; cursor: default; pointer-events: none;}
#mainNav a:hover:not(.active){color: #e0581c;}

#subNav{margin:-60px auto 70px; display: block; width: 70%; text-align: center;}
#subNav a{color: #635747; text-decoration: none; transition: .5s; margin: 0 10px;}
#subNav a.active{color: #bab1a8;pointer-events: none;cursor: default; }
#subNav span:last-of-type{display: none;}
#subNav a:hover:not(.active){color: #e0581c;}

#content{text-align: center;}
#content article{width: 40%; display: inline-block; color: #635747;}
#content article h2{margin: 0;}
#content article h3{font-size: 1.2em; font-style: italic; margin: 0;}
#content article p{margin: 0;margin-top: 30px;line-height: 1.5em;}
#content article p.left{text-align: left;}
#content article a{display: block; color:#635747; margin: 5px 0; transition: .5s;}
#content article a:hover{color: #bab1a8;}

#content .images{position: relative; left: -20%; width: 140%; margin: 30px 0 0;}
#content .images img{width: 50%; width: calc(50% - 15px); display: inline-block;}
#content .images img:nth-child(2n+1){margin-right: 30px;}

/* FORM */
#content form{margin-top: 30px;}
#content form label {color: #635747;}
#content form label, #content form input{margin-bottom: 0; resize: none; font: normal 1em "adobe-garamond-pro", Georgia, Times, "Times New Roman", serif; letter-spacing: 1px; display: block;width: 100%; text-align: left; height: 30px; line-height: 30px;}

#content .fui-submit {background-color: #bab1a8; border: none; border-radius: 0; padding: .25rem 3.5rem; font: normal 1em "adobe-garamond-pro", Georgia, Times, "Times New Roman", serif;}
#content .fui-submit:hover {background-color: #e0581c;}

#content form input{margin-bottom: 0; border-radius: 0; background: #eae4df; font: normal 0.98em "adobe-garamond-pro", Georgia, Times, "Times New Roman", serif; padding: 7px 5px 5px 7px; border: none;}
#content form input:focus{background: #f1f0ef;}
#content .fui-field {margin-bottom: 0;}
#content .fui-field-container {margin-bottom: .5rem;}

#content form input[type=submit]{width: 50%; width: calc(50% - 15px); background: #bab1a8; text-align: center; color: white; padding: 0;}
#content form input[type=submit]:hover {background-color: #e0581c; cursor: pointer;}

#content form textarea{margin-bottom: 0; border-radius: 0; resize: none; font: normal 1em "adobe-garamond-pro", Georgia, Times, "Times New Roman", serif; letter-spacing: 1px; display: block;min-width: 100%; max-width: 100%; text-align: left; min-height: 150px; background: #eae4df; border: none; margin-bottom: 30px; padding: 7px 5px 5px 7px;}
#content form textarea:focus {background: #f1f0ef;}
#content form textarea:focus, #content form input:focus {box-shadow: none;}
#content .fui-i {
	margin-top: 2rem;
}
#content .fui-alert {
	text-align: left;
	font: normal 0.98em "adobe-garamond-pro", Georgia, Times, "Times New Roman", serif;
}
#content .fui-error-message {
	text-align: left;
	font: normal 0.98em "adobe-garamond-pro", Georgia, Times, "Times New Roman", serif;
}

#content .team{position: relative; width: 140%; left: -20%; margin: 30px 0 0;text-align: left;}
#content .team figure{width: 50%; width: calc(50% - 15px); float: left; margin: 0;}
#content .team figure:nth-child(2n+1){margin-right: 30px;}
#content .team figure img{width: 100%; margin-bottom: 30px;}
#content .team figure a{margin-top: 30px;}

.circle{margin-right: 10px; margin-bottom: 10px; width: 270px; height: 270px; background-image: url(/img/kreis.png); display: inline-block; vertical-align: top; background-size: 100% 100%; text-align: center;padding: 65px 30px; color: #635747; text-decoration: none; transition: .5s;}
.circle:hover{color: #e0581c; cursor: pointer;}
.circle h2{margin-bottom: 15px;}
.circle p{font-style: italic;}
.circle:nth-child(6n+3), .circle:last-of-type{margin-right: 0;}

#footer{position: absolute; bottom: 30px; width: 100%; color: #bab1a8; font-size: 0.8em; text-align: center;}
#footer p{margin-bottom: 5px;}
#footer a{color: #bab1a8; text-decoration: none; transition: .5s; margin: 5px;}
#footer a:hover{color: #635747;}

/* VARIOUS CLASSES */
.ghost {display: none;}

.akkHead:first-of-type{margin-top: 30px;}
.akkHead{cursor: pointer; padding: 10px 0; text-align: left; border-top: 1px solid #635747; border-bottom: 1px solid #635747; margin-bottom: -1px;}
.akkHead:hover{color: #e0581c; border-top: 1px solid #e0581c; border-bottom: 1px solid #e0581c; z-index: 1; position: relative; }

.akkBody{text-align: left;}
#content article .akkBody p{margin: 30px 0;}


/************** GALLERY ***************/

#imgViewWrap{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: table;
}

.gBG{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
}

.imgView{
	height: auto;
    position: relative;  
    width: auto;
    display: inline-block;
    background: white;  
    border: 2px solid white;
    transition: 1s;
}

.imgTable{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.imgView .img{
	max-width: 90vw;
	max-height: 90vh;
	display: block;
}

.imgPrev{
	width: 50px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20px;
	margin: auto;
	opacity: 0.8;
	transition: opacity 1s;
	cursor: pointer;
	transform: rotate(90deg);
}

.imgPrev:hover{
	opacity: 1;
	border: 2px solid white;
	border-radius: 50%;
}

.imgNext{
	width: 50px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	opacity: 0.8;
	transition: opacity 1s;
	cursor: pointer;
	transform: rotate(-90deg);
}

.imgNext:hover{
	opacity: 1;
	border: 2px solid white;
	border-radius: 50%;
}



























/************* L LAYOUT FOR BIG SCREENS ******************************************************************************/
/**********************************************************************************************************************/
@media only screen and (min-width : 1400px) {

html, body {font-size: 105%;}
.circle{margin-right: 20px; margin-bottom: 20px; width: 290px; height: 290px; padding: 70px 30px; }

}










/************* NARROW LAYOUT FOR TABLETS ******************************************************************************/
/**********************************************************************************************************************/
@media only screen and (min-width : 721px) and (max-width : 880px) {

html, body {font-size: 100%;}

}







/************* MOBILE STYLES ******************************************************************************************/
/**********************************************************************************************************************/
@media only screen and (max-width : 720px) {

	html, body {font-size: 100%;}

	body.home, body.kurse, body.portrait, body.kontakt, body.yoga, body.klang, body.bewegung, body.fortgeschrittene, body.anfängerkurse {background-image: url(/img/backgrounds/mobile-bg.jpg);}
	

	#header img{width: 90%; padding: 30px 0;}
	
	#mainNav, #subNav{width: 90%;}
	#mainNav {margin: 0 auto 30px;}
	#subNav{margin-top: 70px;}
	#subNav a{display: block; margin: 10px 0;}
	#subNav span{display: none}
	
	#content article{width: 90%;}
	.circle{display: block; margin: 30px auto!important;}
	
	#content .images{width: 100%; position: static;}
	#content .team{width: initial; left: initial;}

}