@charset "UTF-8";
/**
 * @license
 * MyFonts Webfont Build ID 3586170, 2018-05-23T10:04:04-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: ClarikaGeometric-MediumItalic by The Refinery
 * URL: https://www.myfonts.com/fonts/the-refinery/clarika/geometric-medium-italic/
 * Licensed pageviews: Unlimited
 * 
 * Webfont: ClarikaGeometric-Medium by The Refinery
 * URL: https://www.myfonts.com/fonts/the-refinery/clarika/geometric-medium/
 * Licensed pageviews: Unlimited
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3586170
 * Webfonts copyright: Copyright © 2017 by The Refinery LLC. All rights reserved.
 * 
 * © 2018 MyFonts Inc
*/


/*
.ClarikaGeometric-MediumItalic { font-family: ClarikaGeometric-MediumItalic; }
.ClarikaGeometric-Medium { font-family: ClarikaGeometric-Medium; }
*/  
@font-face {font-family: 'ClarikaGeometric-MediumItalic';src: url('../fonts/36B87A_0_0.eot');src: url('../fonts/36B87A_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/36B87A_0_0.woff2') format('woff2'),url('../fonts/36B87A_0_0.woff') format('woff'),url('../fonts/36B87A_0_0.ttf') format('truetype');}  
@font-face {font-family: 'ClarikaGeometric-Medium';src: url('../fonts/36B87A_1_0.eot');src: url('../fonts/36B87A_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/36B87A_1_0.woff2') format('woff2'),url('../fonts/36B87A_1_0.woff') format('woff'),url('../fonts/36B87A_1_0.ttf') format('truetype');}
 


/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,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,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


/* Basics */

html {	height: 100%; }
body{  	
	width: 100%; height: 100%; min-height:100%;
	font-family: ClarikaGeometric-Medium;
	color:#000; font-size: 18px; line-height: 24px; letter-spacing:0pt; font-style: normal; 
	margin:0; padding: 0;
	background: #7c98a0 ;
	overflow:hidden;
	/* -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; */
}
h1, h2, h3, h4, h5, h6{	 font-weight: normal; }
h1 { font-size: 30px; line-height:36px;  margin: 1px 0 10px 0; }
h2 { font-size: 18px; line-height: 24px; font-style: italic;  margin: 0 0 0 30px;}
h3 { font-size: 17px; line-height: 25px; letter-spacing: 0.5pt; color:#5f605c; margin: 0 0 16px 0;}
a{ text-decoration: underline; font-weight: normal; color: #5f605c; border:none; outline:none !important; border: none !important; }
a:hover{ color: #e3dc49; }
a:focus, area, area a , map, map area { outline: none; }
b, strong {  font-weight: normal; }
i, em { font-family: ClarikaGeometric-Medium;  }
table {	border-collapse: collapse; border-spacing: 0; border: 0; }
td{	vertical-align:top;}
hr{ border:none; border-bottom: 1px solid #5f605c; margin: 20px 0 20px 0; padding:0; clear: both;	}
img, img a{	border:0; }
sup { margin:0;padding:0; line-height:3px; vertical-align: middle; position: relative; top: -5px; font-size: 10px;}
.clearfloat{ clear:both; height:0px; font-size: 1px; line-height: 0px; margin:0px; padding:0px;display:block; }
.clearfix:after { content:""; display:table; clear:both; }
.rollover { cursor: pointer;}
.hidden { display: none;}
.visible { display: block;}
.nowrap { white-space: nowrap; }

.lead { font-size: 30px; line-height:36px; margin:1px 0 0 0;  -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}


#canvas-holder { position:fixed;}

#mainwrap {  min-height: 100%; width: 100%; }




/* Header */

#mainheader { width: 100%; height: 150px; background-color: #7c98a0; top: 0; position: fixed; z-index: 10; padding: 0 3% 0 3%; box-sizing: border-box;}

#logo { margin: 38px 0 0 0; float: left;}
#logo img { width: 445px; height: auto; }

#naviButton { display:block; margin: 35px 0 0 0; float:right; cursor: pointer; }
#naviButton img { width: 38px; height: auto; }
#navTitle { display: inline; float: left; font-size: 18px; line-height: 24px;  color: #FFF; padding: 8px 50px 0 0;}


#mainnav {  display: block; background-color: #dad473; height: 100%; width: 0; position: fixed; z-index: 200; right:0; overflow: scroll; }
#closeMainnavi { margin: 18px 0 0 369px; cursor: pointer; } 

#mainnav ul { list-style: none;  width: 320px; margin: 28px 0 0 30px; position: relative;  }
#mainnav li, #mainnav li .hassub  { letter-spacing: 0.2pt; font-weight: normal; padding: 0; cursor:pointer;}

#mainnav li a , #mainnav li.hassub, ul.nav li a{ font-size: 18px; line-height: 24px; padding: 0 0 0 0; display: block; color: #000; text-decoration: none;  font-family: ClarikaGeometric-MediumItalic;}
#mainnav li a:hover , #mainnav li.hover a, #mainnav li.hassub:hover, #mainnav li.active { color:#7c98a0; }
#mainnav li.active a { color:#7c98a0; }

#mainnav li.hassub:hover, #mainnav li.hassub.active { color:#000;}

#mainnav ul li ul.subnav, #mainnav ul li ul.subnavA { display: none; position: relative; margin: 0 0 10px; 0px; width: 100%; overflow: hidden;}
#mainnav ul li.active ul.subnav, #mainnav ul li ul.subnavA  { display: block;}
#mainnav ul li ul.subnav li, #mainnav ul li ul.subnavA li { color: #000; clear: both;  font-size: 18px; line-height: 20px; letter-spacing: 0.5pt; }
#mainnav ul li ul.subnav li a, #mainnav ul li ul.subnavA li a { color: #000; float: left; padding: 0;   padding: 0px 0 0 30px ;}
#mainnav ul li ul.subnav li a:hover, #mainnav ul li ul.subnav li.active a, #mainnav ul li ul.subnavA li.active a, #mainnav ul li ul.subnavA li a:hover { color: #7c98a0; }


#address { position:fixed; bottom: 85px ; left: 3%; color:#fff; letter-spacing:0;}
#address a{ color:#fff; text-decoration:underline; }
#address a:hover{ color:#e3dc49; }








/* Content */

#maincontent { position:absolute; bottom:0; z-index: 20; width:100%;  background:#FFF; max-height: 85%; }
#maincontent ul li { list-style: none; background: url(../images/list.png) no-repeat left 13px;  background-size: 10px; padding: 0 0 0 20px;	margin: 0 0 0 0; }


#maincontent ul.nav li { list-style: none; background:none;  padding: 0 0 0 0;}
#maincontent ul.nav li a:hover, #maincontent ul.nav li.active a{ color:#7c98a0;}


.contentHeader { height: 50px; overflow:hidden; padding:17px 3% 0 3%; font-style:italic; }
.contentTitle {float:left;}

.contentFooter {  height: 50px; overflow:hidden; padding:0px 50px ; margin-top:0px; text-align:center; } 
.scrollNav { display: inline-block; cursor:pointer; }
.scrollNav img { width:20px; height:auto; vertical-align:middle; margin-top:-3px;}

#srollWrap {    height: auto;    width: auto; padding: 0 45px 40px 0; background:#ccc;  overflow: hidden;    position: relative;    background-color: #FFF;}
#scrollSectionBox {    position: realtive;  margin:0 0px 0 0px;  height: calc(100% - 20px); padding: 0 0 0 3% ;   height: auto;    width: auto;    overflow: hidden;     top: 0;    z-index: 5;    white-space: nowrap;  	vertical-align:top;}
#scrollSectionBox .col {   display:inline-block;  margin: 0 0 0 3% ; width: 31%; max-width:500px; padding-bottom:0px;  height:100%;  white-space: normal; vertical-align:top; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
#scrollSectionBox .col:first-child  {   margin: 0  ;}

#scrollSectionBox .col.bild { height:auto; vertical-align:middle; padding-top:5px;}
#scrollSectionBox .col img { height:auto; width:100%;}




.openBtn { transition: all 1s ease; width: 35px; height: 35px; cursor:pointer; float:right; margin-right:0px;}
.minus { transition: all 1s ease;  transform: rotate(225deg);  }

.plus.icon:after {  content: '';  position: absolute;  width: 35px;  height: 1px;  background-color: currentColor;  -webkit-transform: rotate(90deg);          transform: rotate(90deg);}
.plus.icon:before {  content: '';  position: absolute;  width: 35px;  height: 1px;  background-color: #000;}
.plus.icon {  transform: rotate(0deg); color: #000;  position: absolute;  margin-left: 0px;  margin-top: 17px;}
.icon {  position: absolute;}
.icon:before {  content: '';  position: absolute;}
.icon:after {  content: '';  position: absolute;}



#loginform input.textinput { border:solid 1px #000; padding: 2px 5px; margin:5px 0 0 0; width:200px; font-family: ClarikaGeometric-Medium; color:#000; font-size: 18px; line-height: 24px;}
.button { background:#7c98a0; border-radius: 3px; padding:3px 20px; margin:10px 0 0 0; border:none; color:#FFF; font-family: ClarikaGeometric-Medium;  font-size: 18px; line-height: 24px; cursor:pointer; }
.button:hover { background:#e3dc49; color:#000;  }


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Media Queries ************************************************************************/


@media only screen and (max-height: 955px) {
	
	#scrollSectionBox .col.bild { text-align:center; }
	#scrollSectionBox .col.bild img { width:75%; }
}

@media only screen and (max-height: 700px) {
	
	#scrollSectionBox .col.bild img { width:50%; }
}


@media only screen and (max-width: 1324px),(max-height: 700px) {
	
	#maincontent { max-height: auto;  height: calc(100% - 140px); }
	
	#mainnav ul { margin: -4px 0 0 30px; }
	
	#srollWrap { padding-bottom:10px; }
	#scrollSectionBox { padding: 0 0 0 3% ; box-sizing:inherit; overflow:hidden; }
	#scrollSectionBox .col {   margin: 0 0 0 3% ; width: 48%; max-width:100%; }
	#scrollSectionBox .col:last-child  {  margin-right:30px; }
	#scrollSectionBox .col img { height:auto; width:70%; margin-left:15%;}
	
	#scrollSectionBox .col.bild img { width:75%; }

}

@media only screen and (max-width: 1024px),(max-height: 690px) {
	
	#scrollSectionBox .col.bild img { width:60%; }
}


@media only screen and (max-width:768px),(max-height: 360px) {
	
	#maincontent { max-height: auto;  height: calc(100% - 190px); }
	
	#srollWrap { width: 100%; overflow:auto;  height: calc(100% - 110px); padding-right:0; }
	#scrollSectionBox { width: 100%;  box-sizing:border-box; overflow:auto; }
	#scrollSectionBox .col, #scrollSectionBox .col:first-child  { margin: 0 0 30px 0 ; width: 100%;  height:100%; display:block; max-width:100%; }
	
	
	#scrollSectionBox .col img { height:auto; width:100%; margin-left:0; }
	
	.contentFooter { display:none; }

}


@media only screen and (max-width:750px),(max-height: 360px) {
	
	#mainheader { height: 100px; }
	
	#maincontent { max-height: auto;  height: calc(100% - 103px); }
	
	h1, .lead { font-size: 21px; line-height:25px; margin:1px 0 0 0; }
	
	#logo { margin: 19px 0 0 0;}
	#logo img { width: 266px; }
	
	#mainheader {  padding: 0 13px 0 13px; }
	#address { left: 13px; }
	.contentHeader {  padding:13px 15px 0 13px;}
	#scrollSectionBox { padding: 0 13px ; }
	
	#navTitle { display: none; } 
	#naviButton { margin: 0 0 0 0; position:absolute; right:13px; top:9px; }
	#naviButton img { width: 24px; height: auto; }
	
	.openBtn { width: 22px; height: 22px; margin-right:-3px; margin-top:-3px; }
	.plus.icon:after {  width: 22px;}
	.plus.icon:before { width: 22px;}
	.plus.icon {  margin-top: 11px;}
	
	.contentFooter { display:none; }
	
}

@media only screen and (max-width:420px), (max-height: 700px) {
	
	#closeMainnavi { margin: 26px 0 0 278px; cursor: pointer; } 
	
	#mainnav ul { width: 320px; margin: -7px 0 0 13px; }
	#mainnav ul li ul.subnav li a, #mainnav ul li ul.subnavA li a {  padding: 0px 0 0 13px ;}
	
	.contentFooter { display:none; }
	
}
@media only screen and (max-width:550px) {


	#scrollSectionBox .col.bild img { width:100%; }
}




@media print {




}