@font-face {
    font-family: 'arimo';
    src: url('font/Arimo-Regular.ttf') format('truetype'),
		 url('font/arimo-regular-webfont.woff2') format('woff2'),
         url('font/arimo-regular-webfont.woff') format('woff');    
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'arimo-bold';
    src: url('font/Arimo-Bold.ttf') format('truetype'),
		 url('font/arimo-bold-webfont.woff2') format('woff2'),
         url('font/arimo-bold-webfont.woff') format('woff');    
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'tangerine';
    src: url('font/Tangerine_Regular.ttf') format('truetype'),
    	 url('font/tangerine_regular-webfont.woff2') format('woff2'),
         url('font/tangerine_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}    
@font-face {
    font-family: 'tangerine-bold';
    src: url('font/Tangerine_Bold.ttf') format('truetype'),  
    	 url('font/tangerine_bold-webfont.woff2') format('woff2'),
         url('font/tangerine_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}    
body {
	background-color: #8CA9C7;
}

div {
    box-sizing: border-box;
}

/* startpage start */
.idxheader {
	position: absolute;
	width: 100%;
	height: 140px;
	background-color: rgba(255,255,255,0.8);
}
.idxheader img {
	padding-left: 41px;
	padding-top: 16px;
	width:510px;
	height: 107px;
}
.toenter {
	position: absolute;
	right: 31px;
	top:30px;
	font-family: 'arimo';
	font-size: 15px;
	color: black;
	letter-spacing: 0;          
}
.claim_bottom {
	position: absolute;
	bottom:33px;
	right: 31px;
}
.claim_bottom img {
	width: 825px;
	height: 37px;
}
/* startpage end */

#intro_img {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	background-size: contain;
	background-position: center;    
	background-repeat: no-repeat;
	text-align: center;        
	transition:opacity 1500ms ease-out 1500ms ; 
	overflow: hidden;
}
.intro_text {        
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(-16deg);        
	padding-top: 150px;
	font-family: 'tangerine-bold';
	font-size: 445px;                
	color: #789BBE;
	opacity: 0.5;
	overflow: hidden;
}
#white_bg {
	background-color: white;
	height: 100%;
	overflow: hidden;
	position: absolute;
	transition: opacity 200ms ease-out 200ms;
	width: 100%;    
	z-index: 1;
}
.nav_block {
	position: absolute;
	width: 100%;
	z-index: 2;
}
.dtnav {	
	margin: auto;
	max-width: 1106px;	
}
.dtnav a {
	height: 61px;
	display: block;
	float: left;
	box-sizing: border-box;
}
#content {	
	background-size: cover;
	background-position: center; 
	height: 100%;
	width: 100%;        
	position:absolute;
}
.logo {
	width:197px;
	background-color: rgba(255,255,255,0.85);        
}
.logo img {
	padding-top: 15px;
	width: 193px;
	height: 42px;
}
.menu {
	width:96px;
	margin-left: 2px;
	margin-bottom: 2px;
	padding-top:42px;
	padding-left: 8px;
	font-family: 'arimo';
	font-size: 12px;
	color: black;
	letter-spacing: 0.2px;  
	text-transform: uppercase;
	text-decoration: none;
	background-color: rgba(255,255,255,0.85);
}
.menu:hover,
.logo:hover, 
.menu.active {    
	color: white;
	font-family: 'arimo-bold';
	background-color: rgba(120,155,190,0.8);
}
.claim_area {
	margin: auto;
	margin-top:150px;
	max-width: 1206px;
	opacity: 0;	
	transition:opacity 1500ms ease-out 1000ms ;     	
}
.claim {
  width: 330px;
  height: 330px;
  border-radius: 165px;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  color: #789BBE;
}
.title {
	padding-top: 59px;
	text-align: center;
	font-family: 'tangerine-bold';
	font-size: 74px;        
	/* letter-spacing: 0.2px; */          
}
.imprint .title {
	padding-top: 10px;
}
.subtitle {
	font-family: 'arimo';
	font-size: 22px;        
	letter-spacing: 0;  
}
.smalltext {
	padding-top: 10px;
	font-family: 'arimo';        
	font-size: 16px;      
	letter-spacing: -0.2px;
	line-height:22px;
}
.subtext_bold {
	font-family: 'arimo-bold';
}

/* imprint contact start */
.imprint, 
.contact {
	margin: auto;
	margin-top:110px;
	max-width: 620px;
	color: white;
	text-align: center;
	padding-bottom: 40px;
}
.imprint {
	max-width: 620px;
}	
.imprint_head, 
.imprint_text {
	font-family: 'arimo';
	font-size: 17px;        
	letter-spacing: -0.1px;  
	line-height:25px;
}
.imprint_head {
	font-family: 'arimo-bold';
}	
.imprint_text {
	padding-bottom: 20px;
}
.contact a,
.imprint a {
	color: white;
	text-decoration: none;
}
.contact_text {
	font-family: 'arimo';
	font-size: 24px;        
	letter-spacing: -0.1px;  
	line-height:34px;
}
/* imprint contact end */
footer {
	position:  fixed;
	bottom: 0;
	width: 100%;
	height: 26px;  
	background-color: white;
	font-family: 'arimo';
	color: #789BBE;
	font-size: 10px;
	letter-spacing: 0.65px;
	padding-top: 6px;
	box-sizing: border-box;
	z-index: 2;
}
.copyright {
	padding-left: 10px;        
}
.impressum {
	position: absolute;
	right: 15px;
}
.impressum a {
	color: #789BBE;
	text-decoration: none;
}
.impressum a.imp {
	margin-left: 30px;
}
.impressum a.lang {
	margin-left: 10px;
}    
.impressum a:hover,    
.impressum a.active {
	font-family: 'arimo-bold';
}
.preloadbg {
	width: 0;
	height: 0;
	border: 0;
}
/* mobile */
    #content.mobile {        
        background-color: white;
    }    
    .mobile .logo {
        width: 224px;
        background-color: transparent;
    }
    .mobile .logo img {
        width: 235px;
        height: 54px;
        padding-top: 3px;
        padding-left:3px;
    }    
    .mobile	.logo:hover {    
		background-color: transparent;
	}    
    .subtitle {
        letter-spacing: -0.2px;
    }
    
    .mobile .title img {
        width: 136px;
        height: 136px;
    }
    .mobile .unterschrift {
        font-family: 'tangerine';
        font-size: 38px;        
    }
    .mobnav {
        visibility: hidden;
        display:none;
        position: fixed;
        width: 100%;
        height:100%;
        z-index: 1;
        padding-top: 65px;
        background-color: rgba(255, 255, 255, 0.85);            
        color: black;
        
        padding-top: 87px;
        margin: auto;
        margin-top: 0;
    }
    .mobnav .lcont {
        text-align: center;
    }
    .mobnav .lcont a {
        display: block;
        font-family: 'arimo';
        font-size: 25px;
        color: black;
        letter-spacing: 0;          
        text-decoration: none;    
        padding-bottom: 10px;
        text-transform: uppercase;
    }
    .nav_open .mobnav {
        visibility: visible;
        display: block;        
    }
    .mobtopnav {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 60px;
        z-index: 2;
        background-color:  rgba(255, 255, 255, 0.85);
    }
    article {
        position:relative;
        padding-top: 60px;
    }    
    .article_img {
        position: relative;
        width: 100%;
        height: 208px;
        /* height: 283px; */
        background-position: center center;
        background-size: cover;
    }
    .philosophy .article_img {
        background-image: url(img/Philosophie_mob.jpg);
    }    
    .article_text {
        color: #789BBE;
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
    }    
    article .title.rotate {
        -moz-transform: rotate(-19deg);
        -ms-transform: rotate(-19deg);
        -o-transform: rotate(-19deg);
        -webkit-transform: rotate(-19deg);
        transform: rotate(-19deg);        
        padding-top: 31px;
        font-family: 'tangerine-bold';
        letter-spacing: -1px;
        font-size: 100px;                
        color: #789BBE;
        padding-bottom: 16px;
        max-width: 96%;
    }
    article.yinyang .title.rotate {
        padding-bottom: 44px;
    }    
    article .subtitle {
        text-transform: uppercase;
    }
    article .smalltext {
        padding-left: 40px;
        padding-right: 40px;
        max-width: 503px;
        margin: auto;
    }
    .philosophy .title {
         padding-top: 43px;         
    }
    
    .openclose {
        float: right;
        padding-top: 16px;
        padding-right: 12px;
    }
    .openclose .burger {
        width: 27px;
        height: 17px;
    }
    .openclose .close {
        visibility: hidden;
        display: none;                    
        width: 20px;
        height: 20px;
    }
    .nav_open .openclose .burger {
        visibility: hidden;
        display: none;                    
    }
    .nav_open .openclose .close {
        visibility: visible;
        display: block;                    
    }
    .mobnav .mob_menu_elem a {
        color: black;
        
    }
    .pause .article_img {
        background-image: url(img/Pause_mob.jpg);
    }    
    .relaxing .article_img {
        background-image: url(img/Relaxing_mob.jpg);
    }    
    .balance .article_img {
        background-image: url(img/Balance_mob.jpg);
    }    
    .yinyang .article_img {
        background-image: url(img/Yinyang_mob.jpg);
    }    
    .fun .article_img {
        background-image: url(img/Fun_mob.jpg);
    }    
    .holz .article_img {
        background-image: url(img/Holz_mob.jpg);
    }    
    .extras .article_img {
        background-image: url(img/Extras_mob.jpg);
    }    
    article.imprint,
    article.contact {
        background-color: #8ca9c7;
        width: 100%;
        max-width: 1620px;
        margin-top: 0;
    }    
    article.imprint .imprint_text {         
        padding-left: 30px;
        padding-right: 30px;        
    }
    .linkblock {
        float:left;
        width: 200px;
    }
    .lcont {
        max-width: 400px;
        margin: auto;
    }
    @media only screen and (max-width:500px) {
        .mobnav {
            /* padding-top: 80px; */
        }
        .lcont {
            max-width: 200px;
        }    
    }
    .mobile footer .copyright {
        display: inline-block;
        text-align: left;
    }
    .small_break {
        visibility: hidden;
        display: none;    
    }
    .mobile footer {
        font-size: 13px;
        height: 45px;
        padding-left: 18px;
    }
    .mobile .impressum a.lang {
        margin-left: 13px;
    }
    .mobile .impressum a.imp {    
        margin-right: 10px;
    }    
     @media only screen and (max-width:650px) {
        .small_break {
            visibility: visible;
            display: inline;        
        }         
        .mobile footer {
            height: 73px;
        }
        .mobile footer .copyright {
            text-align: left;            
            display: block;        
            padding-bottom: 10px;
            padding-left: 0;
        }
        .mobile footer .impressum {
            left: 4px;
            right: 4px;
            bottom: 4px;
            text-align: left;
        }
        .mobile footer .impressum .imp {
            float: right;
        }
    }   

    @media only screen and (max-width: 380px), screen and (max-height: 510px) {
    .mobnav {
    	padding-top: 58px;
    }
    .mobnav .lcont a {
        font-size: 21px;
        padding-bottom: 8px;
    }