/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

html {
	margin: 0px;
	padding: 0px;
	color:#000;
	display: block;
	width:100%;
	height:100%;
	border:none;
	-webkit-user-select:none;
	-moz-user-select:none;
}

body {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0;
	-webkit-text-size-adjust: 100%;
	width:100%;
	height:100%;
	font-size: 100%;
	background-color: black;
	color:white;
	overflow: hidden;
}

li { list-style:none; }

a {
    }

a:link {
    color:#fff;
    text-decoration:none;
}

a:visited {
    color:#fff;
    text-decoration:none;
}

a:hover {
    color:#fff;
    text-decoration:none;
}

p { color:#fff; position: relative; z-index: 2}


h1 { font-size: 2.5625em; color:white; position: relative; z-index: 2;} /*41px*/
h2 { font-size: 1.875em; color:white; line-height: 27px; position: relative; z-index: 2; } /*30px*/
h3 { font-size: 1.125em; color:white; line-height: 23px; position: relative; z-index: 2; margin-bottom: 24px;} /*18px*/
h4 { font-size: 1.125em; color:white; position: relative; z-index: 2; line-height: 24px; margin-bottom: 24px;}
form { position: relative; z-index: 2; }
form input {height: 28px; font-size: 18px; border: none!important; border-radius: 0!important; padding-left: 15px!important; font-family: "AvenirNextLTW01-Regular"!important;}
form #emailMessage { width: 400px; height: 200px; vertical-align: top; padding-left: 14px; padding-top: 10px; font-family: "AvenirNextLTW01-Regular";}
#emailSubmit { background: url(../images/email/sendBtn.png) no-repeat; width: 110px; height: 40px; font-size: 18px; border: none; border-radius: 0; float: left; height: 40px;}
#emailSubmit:hover {background: url(../images/email/sendOver.png);}
.sentState {background: url(../images/email/sendOk.png); display: none; float: left; width: 30px; height: 30px; margin: 5px 15px;}
.fail {background:url(../images/email/sendFail.png); }

.contentText { font-size: .8125em; color:white; line-height: 17px; position: relative; z-index: 2;}
.highlight { color:#f26c4f; }
.footer { font-size: .625em; color:white;}
.noBG { background:none!important; }
.what h2 { line-height: 36px; }
.quality h4 { margin-bottom: 17px;}
.privacy .contentText { line-height: 20px;}

/*------------content------------*/
.content {color:white;}
.contentPage { display:block; position: relative; text-align: left!important; float:left; width: 560px; padding: 50px 40px; height: 100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.contentPage h2 {margin-bottom: 40px;}
.who.contentPage h2, .quality.contentPage h2 {margin-bottom: 20px;}
#sideBGCon {height: 100%; }
.sideBG { display: none; height: 100%; margin-left: 560px; background-size: cover;}
.container { position: relative; display: block; z-index: 99; }
/*-----------------------------header-------------------------------*/

/*-----------------------------logo-------------------------------*/

/*-----------------------------menu-------------------------------*/

/* #Page Styles
================================================== */


/*-----------------------------main-------------------------------*/
#web-nav { height: 100%; position: fixed; left: 0; top: 0; width: 150px; min-height: 570px; display: none;}
#web-nav img.logo { width: 125px; height: auto; margin: 15px auto 60px auto; display: block;}

#wrap { display: none; width: 100%; height:100%; background:url(../images/main/mainBG.jpg) no-repeat center center fixed; background-size: cover; margin-left: 150px; overflow: hidden;  text-align: center; position: relative; }
#wrap .content{ position: absolute; top:50%; margin: -88px 0 0 -50%; left:50%; width: 100%; height: 177px; padding: 0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#wrap p { margin-top:-15px; margin-bottom: 25px;}
#wrap img {  }
.mainText { display: none; }
.nextBtn { display: none; }

#menu { text-align: right; padding-right: 15px; }
#menu li { padding-bottom: 12px; }
#navigator { width: 0; height: 20px; position: absolute; right: 0; top:0; display: block; background-color: #f26c4f; }
.lang { text-align: center; position: absolute; bottom:20px; left:50%; margin-left: -1.5em;}

.footer {display: none; height:30px; background-color: #f26c4f; position: absolute; left:150px; bottom: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; z-index: 20;}
#footerMenu { float:left; margin-left: 1.5%; margin-top: 5px;}
#footerMenu li { display: inline; padding-right: 15px;}
.copyright { float: right; margin-top: 4px; margin-right: 1.5%; }

/*-----------------------------mobile-------------------------------*/
#mobile-nav { display: none; width: 100%; height: 45px;}
#mobile-nav .indexBtn { display: inline-block; }
#menuText { font-size: 0.9375em; color:white; position: relative; z-index: 2; display: inline; float: right; margin-top: 12px; margin-right: 40px;} /*15px*/


/*-----------------------------who-------------------------------*/
.who { }
.line01 {
	content: "";
	display: inline-block;
	position: absolute;
	left:195px;
	/*right: -40px;*/
	top: 130px;
	border-width: 0;
	width: 400px;
	height: 5px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.line02 {
	content: "";
	display: inline-block;
	position: absolute;
	/*right: -205px;*/
	left:-240px;
	top: 280px;
	border-width: 0;
	width: 1000px;
	height: 5px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.line03 {
	content: "";
	display: none;
	position: absolute;
	background-color: #00b6b5;
	right: -25px;
	top: 150px;
	border-width: 0;
	width: 450px;
	height: 5px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.line04 {
	content: "";
	display: none;
	position: absolute;
	background-color: #f26c4f;
	right: -185px;
	top: 280px;
	border-width: 0;
	width: 1000px;
	height: 5px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.line05 {
	content: "";
	display: none;
	position: absolute;
	background-color: #00b6b5;
	right: -50px;
	top: 130px;
	border-width: 0;
	width:400px;
	height: 5px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.line06 {
	content: "";
	display: none;
	position: absolute;
	background-color: #f26c4f;
	right: -75px;
	top: 170px;
	border-width: 0;
	width: 500px;
	height: 5px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.whoSideBG { background: url(../images/who/sideBG.jpg) no-repeat center center; height: 100%; background-size: cover;}

.whatSideBG { background: url(../images/what/sideBG.jpg) no-repeat 20% center; background-size: cover;}
.whatList li { list-style-type:disc; margin-left: 20px;}

.socialSideBG { background: url(../images/social/sideBG.jpg) no-repeat 20% center; background-size: cover;}
.qualitySideBG { background: url(../images/quality/sideBG.jpg) no-repeat 20% center; background-size: cover;}
.downloadSideBG { background: url(../images/download/sideBG.jpg) no-repeat 20% center; background-size: cover;}
.downloadTitle { display: inline-block; text-align: center; width: 235px; position: relative;}
.downloadTitle p { padding-top: 16px; padding-left: 2px; line-height: 18px; font-size: 12px!important;}
.mouseOver { position: absolute; top:0; left: 0; display: none;}
.emailSideBG { background: url(../images/email/sideBG.jpg) no-repeat 20% center; background-size: cover;}
.sideBG.emailSideBG {margin-left: 0;}
.imprintSideBG { }
.imprint h3 { width: 460px;}
/*.imprint h2,.imprint h3, .imprint h4, .privacy h2,.privacy h3, .privacy h4, .privacy .contentText{ color:black; }*/
.privacy p { padding-top: 16px; width: 460px; }
.imprint.contentPage, .privacy.contentPage { overflow: hidden; overflow-y: scroll;}

#logInContent { margin:50px auto; display: table; text-align: center;}
#logInContent .logo { width: 65px; }
#logInContent form { margin: 35px auto; display: table; }
#logInContent form #inputPassword { margin-top: 25px; padding-left:10px;}
#inputSubmit { background: url(../images/download/enterBtn.png) no-repeat; width: 110px; height: 50px; font-size: 18px; border: none; border-radius: 0; }
.inputConfirm {  height: 40px;}
/* all */
::-webkit-input-placeholder { color:#000; }
::-moz-placeholder { color:#000; } /* firefox 19+ */
:-ms-input-placeholder { color:#000; } /* ie */
input:-moz-placeholder { color:#000; }

/* #Media Queries
================================================== */

@media screen and (max-width: 860px) {
    #web-nav { display: none!important; }
    #wrap { margin-left:0; width: 100%!important;}
    .footer { left:0; width: 100%!important; }
    #menuText { cursor:pointer; }
    #menu { display: none; background-color: rgba(207, 201, 200, .8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2; margin-top: 45px; text-align: left; -webkit-user-select:none; -moz-user-select:none; }
    .mobileMenu { font-size: 0.9375em; width: auto; position: absolute; display: table; right:60px; top:51px; color: black;}
    .mobileMenu a:link { color: black; }
    .mobileMenu a:hover { color: black; }
    .mobileMenu a:visited { color: black; }
    .contentPage { padding-top: 85px; max-width: 560px; width: 100%; overflow:hidden; overflow-y:scroll; }
    .privacy p, .imprint p,.imprint h2,.imprint h3, .imprint h4, .privacy h2,.privacy h3, .privacy h4, .privacy .contentText { max-width: 460px; width: 100%; }

    #mobile-nav { display: none; position: fixed; top:0; left: 0; z-index: 99; background-color: black;}
    #mobile-nav img.logo { width: 25px; height: auto; margin: 4px auto 0 20px; display: block;}
    .lang { display: inline; float: right; position: relative; bottom:0; left: 0; margin-top: 11px; margin-right: 15px;}
    .closeBtn { width: 45px; height: 45px; cursor: pointer; position: absolute; right:30px; top:15px; display: block; }
    .closeBtn::before {
		 content: "";
		 display: inline-block;
		 position: absolute;
		 left: -7px;
		 top: 20px;
		 border-width: 0;
		 background: #f26c4f;
		 width: 60px;
		 height: 4px;
		 z-index: 1;
		 -webkit-transform: rotate(-45deg);
		    -moz-transform: rotate(-45deg);
		     -ms-transform: rotate(-45deg);
		      -o-transform: rotate(-45deg);
	}

	.closeBtn::after {
		 content: "";
		 display: inline-block;
		 position: absolute;
		 left: -7px;
		 top: 20px;
		 border-width: 0;
		 background: #f26c4f;
		 width: 60px;
		 height: 4px;
		 z-index: 1;
		 -webkit-transform: rotate(45deg);
		    -moz-transform: rotate(45deg);
		     -ms-transform: rotate(45deg);
		      -o-transform: rotate(45deg);
	}
}

@media screen and (max-width: 400px) {
	#footerMenu li { padding-right: 10px; }
	.copyright { font-size:.4em; margin-top:6px; }
}

	


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
        
        @font-face /* the bebas font is created by Bagel & Co. and you go to http://d.hatena.ne.jp/banbino2/ */
		{
			
		}