/* CSS Document */
* {margin: 0; padding: 0; font-family: "Open sans", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; font-style: normal;}
body	{background-color: #666666;  position: relative; padding: 0px 0px 0px 0px;}
#wrap	{min-width: 100%; min-height: 100%; background-color: #000000; position: relative; top: 0; bottom: 100%; right: 0px; padding: 0px 0px 180px 0px;}
a img	{border: none;}

/* header ///////////////////////////////////////////*/
header	{position: fixed; top: 0px; left: 0px; right: 0px; background-color: #401c71; padding: 30px 10px 0px 50px; z-index: 1000; height: 60px; border-bottom: 1px solid #FFFFFF;}
main {display: block;}

#goToNL {position: fixed; right: -104px; top: 250px; transform: rotate(-90deg); color: #FFFFFF; background-color: #000000; display: block; padding: 5px 10px 5px 10px; font-size: 12px; text-transform: uppercase; text-decoration: none; letter-spacing: 3px; border: 1px solid #FFFFFF; }

h1	{width: 150px; height: 150px; background-image: url(../images/logo.png); background-repeat: no-repeat; position: absolute; left: 50px; top: 29px;}
h1 a	{color: #FFFFFF; text-decoration: none; text-transform: uppercase; text-indent: -400px; overflow: hidden; display: block;}

/* main navigation*/
#mainNavi {float: right; white-space: nowrap; }
#mainNavi ul {list-style-type: none; white-space: nowrap; }
#mainNavi ul li {display: inline; margin: 0px 20px 0px 0px; position: relative;}
#mainNavi ul li a {display: inline-block; padding: 0px 0px 35px 0px; color: #FFFFFF; text-decoration: none; text-transform: uppercase;}
#mainNavi ul li a:hover, #mainNavi ul li a.active {background-image: url(../images/naviActive.png); background-position: bottom center; background-repeat: no-repeat;}

/* lang switch */
#mainNavi ul li.sL { border-right: 1px solid #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px;}
#mainNavi ul li.sL:last-child	{border-right: none; margin: 0px;}
#mainNavi ul li.sL a	{color: #666666; padding: 0px!important}
#mainNavi ul li.sL a.active, #mainNavi ul li.sL a:hover	{background: none!important;}

#mainNavi ul#switchLanguage	{position: absolute; right: 0px; top: 90px; background-color: #FFFFFF; background-color: rgba(255, 255, 255, 0.8); height: 22px;}

/* /header///////////////////////////////////////////*/

.linearNavigation	{position: fixed; top: 49%; width: 30px; cursor: pointer; width: 30px; height: 60px; background-image: url(../images/arrowBg2.png); background-repeat: no-repeat;}
#leftArrow	{left: 0px; background-position: -30px 0px;}
#rightArrow	{right: 0px; background-position: 0px 0px;}
#leftArrow:hover	{background-position: -30px -62px;}
#rightArrow:hover	{background-position: 0px -62px;}

#navTrigger {position: fixed; top: 10px; right: 10px; z-index: 1002; width: 32px; height: 32px; cursor: pointer; background-image: url(../../johannesgaertner.de/images/navTriggerBg.png); z-index: 2000; display: none;}
#navTrigger.active	{}
#wrap.showNav {right: 200px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);}
#navTrigger, #navTrigger.active, #wrap {transition: right 0.2s;}

.split_h4 h4 {
	background-color: #9e508a;
	color: #FFFFFF;
	padding: 5px 10px;
	cursor: pointer;
}
.split_h4 h4+div {
	padding-bottom: 20px;
}

/* content ///////////////////////////////////////////*/
ul.sectionNavi, ul.filterNavi	{list-style: none; text-align: center; margin: 0px 0px 50px 0px;}
div.container ul.filterNavi	{margin: 0px 0px 10px 0px!important;}

ul.sectionNavi li, ul.filterNavi li	{display: inline-block; padding: 3px 10px 3px 10px; background-color: #000000; margin: 0px 5px 10px 5px!important; color: #FFFFFF; cursor: pointer;}
ul.sectionNavi li.noContent	{cursor: default!important;}
ul.sectionNavi li h3, ul.filterNavi li h3	{color: #FFFFFF;}
ul.sectionNavi li.active, ul.filterNavi li.active	{background-color: #E2C06C; color: #000000!important;}

section.filter ul.sectionNavi	{list-style: none; text-align: center; margin: 40px 0px 0px 0px;}
section.filter ul.sectionNavi li	{width: 400px; height: 80px; display: inline-block; padding: 10px; background-color: #E2C06C;margin: 10px; overflow: hidden;}
section.filter ul.sectionNavi li h3	{font-size: 20px; margin-bottom: 5px;}
section.filter ul.sectionNavi li span	{display: block; font-size: 14px; color: #000000;}


section	{min-height: 100vh; background-color: #FFFFFF; padding: 120px 0px 20px 0px; display: block; position: relative; box-sizing: border-box; overflow: auto;}
section h2	{font-size: 26px; color: #401c71; text-align: center; margin: 0px 0px 20px 0px;}

section h3	{}

section h4	{font-size: 20px; color: #000000; text-transform: uppercase; margin: 0px 0px 15px 0px; }
section h5 {font-size: 20px; color: #000000; margin: 0px 0px 15px 0px;}

.textContent p, .textContent ul, .textContent ol	{margin: 0px 0px 10px 0px;}
.textContent p:last-child {margin-bottom: 0px;}

section ul.sectionBackground	{position: absolute; top: 0px; left: 0px; bottom: 0px; z-index: 10; width: 100%!important; height: 100%; min-height: 100vh;}
section ul.sectionBackground li	{width: 100%; height: 100%; min-height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }

section ul.sectionBackground li.noBg:nth-child(n+3) {background-image: none!important;}

div.sectionHeader	{margin: -120px 0px 20px 0px; z-index: 20; position: relative;}
div.sectionFooter	{position: absolute; left: 0px; bottom: 0px; right: 0px; padding: 15px; z-index: 20; text-align: center;}
div.sectionFooter p	{margin: 0px!important; background-color: inherit!important; font-size: 14px; text-align: center;}


div.container	{max-width: 1000px; margin: auto; padding: 0px 40px 0px 40px; position: relative; z-index: 20;}
div.container a	{text-decoration: underline; color: #990000;}
div.container img	{max-width: 100%; height: auto;}
div.container table	{margin: 0px 0px 10px 0px;}
div.container th, div.container td	{text-align: left; padding: 0px 10px 0px 0px; font-size: 16px;}
div.container p	{margin-bottom: 15px;}	

div.contentArea span	{display: none;}

/* start content images //////////////////////////////////////////////////////////*/
ul.contentImages	{list-style: none; position: relative; margin: 0px 0px 15px 0px;  text-align: center;}
ul.contentImages li	{display: inline-block; margin: 0 5px 5px;}
ul.contentImages li img	{width: 100%; margin: 0px 1% 0px 0px; width: 200px;}

/* images in content text*/
img.align_right	{float: right; margin: 0px 0px 10px 10px; border: 1px solid #CCCCCC; padding: 5px;}
img.align_left	{float: left; margin: 0px 10px 10px 0px; border: 1px solid #CCCCCC; padding: 5px;}

/* img width by count */
.imgCount_1 ul.contentImages	{text-align: center;}
.imgCount_1 ul.contentImages li img	{width: 100%; max-width: 100%; margin: 0px 0px 0px 0px; height: auto;} 

/*
ul.slideShow	{width: 25%; position: absolute; top: 0px; left: 0px;}
ul.slideShow li	{position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh;}
ul.slideShow li img	{width: 100%; height: auto;}
*/
/* end content images //////////////////////////////////////////////////////////*/

/* start content videos //////////////////////////////////////////////////////////*/
ul.contentVideos	{list-style: none; position: relative; margin: 0px 0px 15px 0px; text-align: center;}
ul.contentVideos li	{display: inline-block; width: 32%; margin: 0px 1% 0px 0px;}
ul.contentVideos li a img	{width: 100%; display: block;}
ul.contentVideos li a {position: relative; display: inline-block;}
ul.contentVideos li a span {display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #9e508a; background-color: rgba(158, 80, 138, 0.7); background-image: url(../images/play.png); background-position: center; background-repeat: no-repeat; opacity: 1; transition: opacity 0.5s;}
ul.contentVideos li a:hover span {opacity: 0}
/* end content videos //////////////////////////////////////////////////////////*/

div.textContent+div.imageContent {
	margin-top: 15px;
}
div.textContent	ul, div.textContent	ol	{margin-left: 20px;} 
	
/* light box content*/
div.lightBox	{padding: 10px; background-color: #FFFFFF; max-width: 800px; margin: auto;}	
.lightBox h3, .lightBox p, .lightBox span	{margin-bottom: 10px;}
.lightBox ul.contentImages li {display: block; float: left; margin: 0px 10px 10px 0px;}
.lightBox ul.contentImages li img {display: block; margin: 0px!important; max-width: inherit;}
.lightBox ul.contentImages li a	{}
.lightBox a	{color: #990000;}

.lightBox .imageContent, .lightBox .videoContent, .lightBox .textContent, .lightBox .textTeaser	{border-bottom: 1px solid #CCCCCC; padding-bottom: 10px; padding-top: 10px; overflow: auto;} 


/* start custom link styles /////////////////////////////////////////////*/
a.showreel	{margin-top: 50px; display: inline-block; padding: 20px; background-color: #E2C06C; color: #FFFFFF!important; opacity: 0.8;}
a.portfolio	{display: inline-block; padding: 20px; background-color: #000000; color: #E2C06C!important; opacity: 0.8;}
/* end custom link styles /////////////////////////////////////////////*/

/* start custom section styles /////////////////////////////////////////////*/
section#start	{}
section#start h2	{display: none;}
section#start h3, section#start h4	{font-size: 24px; clear: left; float: left; margin: 0px 0px 2px 0px;  padding: 20px 20px 20px 20px; background-color: #E2C06C; color: #FFFFFF; text-transform: uppercase; opacity: 0.8;}
section#start h3 *, section#start h4 *	{color: inherit!important; font-size: inherit; text-decoration: none; font-weight: normal;}
section#start div.contentArea:nth-child(odd) h4	{color: #E2C06C; background-color: #000000;}

section#start p	{font-size: 16px; clear: left; float: left; padding: 5px 20px 5px 20px; background-color: #FFFFFF; opacity: 0.9;}
section#start p, section#start p *	{color: #000000; text-decoration: none;}

/*gallery*/
section#galerie	{background-color: #333333; text-align: center;}
section#galerie *	{color: #FFFFFF;}
section#galerie ul.contentImages {list-style: none; text-align: center; width: 100%; float: none;}
section#galerie ul.contentImages li	{margin: 0 10px 20px 10px; display: inline-block; opacity: 0.5;}
section#galerie ul.contentImages li:hover	{opacity: 1;}
section#galerie ul.contentImages li	{transition: opacity 0.2s}
section#galerie ul.contentImages li a	{height: 200px; display: inline-block; background-repeat: no-repeat; background-size: cover;}
section#galerie ul.contentImages li a img {height: 100%; width: auto;}

/*portrait*/
section#portrait div.contentArea.hasImages div.content	{position: relative; display: flex;}
section#portrait div.contentArea.hasImages div.imageContent {
	width: 25%;
}
section#portrait div.contentArea.hasImages div.textContent {
	width: 75%;
	padding-left: 25px;
	box-sizing: border-box;;
}

/*termine*/
section#termine h3 {
	
}
section#termine div.contentArea.hasImages div.content	{position: relative; display: flex; flex-wrap: wrap; width: 100%;}
section#termine div.contentArea.hasImages div.imageContent {
	width: 15%;
}
section#termine div.contentArea.hasImages div.textContent {
	width: 84.5%;
	padding-left: 25px;
	margin-left: 0.5%;
	box-sizing: border-box;;
}

/*werk*/
section#werk	{background-color: #333333;}

/*kontakt*/
section#kontakt	{background-color: #E2C06C;}
section#kontakt h2	{color: #000000;}
section#kontakt ul.sectionNavi li.active, section#kontakt ul.sectionNavi li:hover	{background-color: #FFFFFF; color: #000000;}
/* end custom section styles /////////////////////////////////////////////*/


/*formular*/
form.mailForm	{background-color: #000000; padding: 10px 20px 10px 20px; overflow: auto; margin: 0px 0px 20px 0px; clear: both;}
form.mailForm fieldset	{border: none; padding: 0px; margin: 0px 0px 20px 0px; clear: left; display: block; }
form.mailForm fieldset legend	{color: #E2C06C; padding: 0px; font-size: 14px; margin: 0px 0px 10px 0px;}
form.mailForm label	{padding-right: 30px;}
form.mailForm input, form.mailForm textarea, form.mailForm select	{background-color: #FFFFFF; border: none; padding: 5px; margin: 0px; box-sizing: border-box; color: #666666!important; font-size: 14px; text-transform: uppercase; }
form.mailForm select *	{color: #666666!important;}
form.mailForm input	{width: 48%;}
form.mailForm input[type=checkbox]	{width: auto; float: none!important}
form.mailForm textarea	{width: 100%; display: block;}
form.mailForm fieldset input:last-child	{float: right;}
form.mailForm button	{background-color: #E2C06C; color: #000000; border: none; font-size: 14px; padding: 5px 10px 5px 10px; width: 200px; float: right; text-transform: uppercase; margin-right: 10px;}
form.mailForm button.cancel	{}
form.mailForm button a	{font-size: inherit;}

/*formular*/
form.mailFormGen	{background-color: #000000; padding: 10px 20px 10px 20px; overflow: auto; margin: 0px 0px 20px 0px;}
form.mailFormGen fieldset	{border: none; padding: 0px; margin: 0px 0px 20px 0px; clear: left; display: block; }
form.mailFormGen fieldset legend	{color: #E2C06C; padding: 0px; font-size: 14px; margin: 0px 0px 10px 0px;}
form.mailFormGen fieldset div	{float: left; margin: 0px 0px 5px 0px;}
form.mailFormGen fieldset div:nth-child(even)	{float: right;}
form.mailFormGen label, form.mailFormGen label *	{color: #E2C06C; font-size: 14px;}
form.mailFormGen input, form.mailFormGen textarea, form.mailFormGen select	{background-color: #FFFFFF; border: none; padding: 5px; margin: 0px; box-sizing: border-box; color: #666666!important; font-size: 14px; text-transform: uppercase; width: 100%;}
form.mailFormGen select *	{color: #666666!important;}
form.mailFormGen input[type=checkbox]	{width: auto; float: none!important}
form.mailFormGen fieldset input:last-child	{float: right;}
form.mailFormGen button	{background-color: #E2C06C; color: #000000; border: none; font-size: 14px; padding: 5px 10px 5px 10px; width: 200px; float: right; text-transform: uppercase; margin-left: 10px;}
form.mailFormGen button.cancel	{}
form.mailFormGen button a	{font-size: inherit;}

/* /content ///////////////////////////////////////////*/


/* footer///////////////////////////////////////////*/
footer	{padding: 30px 0 30px 0; position: absolute; left: 0px; bottom: 0px; right: 0px; height: 120px;}
footer, footer *	{color: #FFFFFF; text-align: center; font-size: 14px;}
footer img	{margin: 0px 10px 20px 10px; width: 50px;}
footer div	{margin: 0px 20px 0px 0px;}
footer div *	{color: #FFFFFF; font-size: 14px; text-decoration: none;}
/* /footer///////////////////////////////////////////*/

cite	{font-size: 16px; font-style: italic; text-align: center; display: block;}
section div p.centeredBox	{display: inline-block; width: 490px; margin: 20px 0 20px 0; text-align: center; box-sizing: border-box; }
section div p.centeredBox:nth-child(2n+1)	{float: right!important;}
p.centeredBox img	{display: block; width: 100%;}
p.centeredBox strong	{font-size: 18px; display: block; text-transform: uppercase;}
p.centeredBox a	{font-weight: bold;}

#cboxPrint	{position: absolute; bottom: 70px; right: 10px; }
#cboxPrint button	{width: 35px; height: 35px; border: none; background-color: #FFFFFF; background-image: url(../images/print.png); background-repeat: no-repeat; background-position: 50% 50%; border-radius: 5px; }
#printFrame	{width: 0px; height: 0px;}

body.m h1	{}
body.m #mainNavi	{display: none;}
body.m #mobileNavi	{display: block;}
body.m #navTrigger {display: block;}

body.m section#start h4 {font-size: 18px; padding: 10px 20px; opacity: 0.6;}

body.m div.container	{padding: 0px 10px 0px 10px;}
body.m.w450 section.filter ul.sectionNavi li	{width: 90%!important; height: 200px!important;}

body.m #mainNavi	{top: 89px; z-index: 2000; position: absolute; left: 0px; right: 0px; display: none;}
body.m #mainNavi ul	{width: 100%; border-radius: 0; background-color: #333333; padding: 0px; text-align: left; box-shadow: none!important; border-bottom: 1px solid #FFFFFF; }
body.m #mainNavi ul li	{display: block; border-top: 1px solid #CCCCCC; margin: 0px!important; padding: 0px; }
body.m #mainNavi ul li:hover ul	{display: none;}
body.m #mainNavi ul li a	{display: block; padding: 10px 0px 10px 10px; text-align: center; border-radius: 0px; width: 100%; background-image: none;}
body.m #mainNavi ul li a span	{display: block; width: 42px; height: 40px; background-color: #000000; background-color: rgba(0, 0, 0, 0.2); float: right; margin-top: -10px; background-image: url(../images/arrow_down.png); background-repeat: no-repeat; background-position: 50% 50%;}

body.m #mainNavi li ul	{display: none; position: relative; top: 0px; }
body.m #mainNavi li:hover ul	{display: block;}
body.m #mainNavi li ul li	{}
body.m #mainNavi li ul li:first-child	{border: none;}
body.m #mainNavi li ul li a	{white-space: nowrap; text-transform: none; padding: 10px 0px 10px 40px; background-color: #FFFFFF; color: #0085be;}

/*
body.m #colorbox	{position: fixed!important; top: 0px!important; left: 0px!important; right: 0px!important; bottom: 0px!important; maxHeight: 100%!important; width: 100%!important;}

body.m #cboxWrapper {width: 100%!important; height: 100%!important;}
*/
body.m# leftArrow, body.m #rightArrow	{display: none!important;}

body.m p.centeredBox	{display: block; float: none!important; margin: 0px auto 20px auto;}
body.m p.centeredBox:nth-child(2n+1)	{float: none!important;}

section#cookies {
  z-index: 5000;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: black;
  min-height: 65px;
  padding: 1rem 200px 1rem 1rem;
}
section#cookies,
section#cookies * {
  color: white;
}
section#cookies h3 {
  font-size: 1.5rem;
  margin-bottom: 0;
  display: inline-block;
}
section#cookies a.button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-block;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  background-color: #990000;
  margin-left: 1rem;
  text-decoration: none;
}
@media only screen and (max-width: 660px) {
  section#cookies {
    text-align: center;
  }
  section#cookies * {
    text-align: center;
  }
  section#cookies a {
    margin: 0 0 1rem 0;
    float: none;
  }
}