/* Font downloaded from FontsForWeb.com */
@font-face {
         font-family: 'SansProLight';
         src: url('../font/SourceSansPro-Light.ttf') format('truetype');
}

body {-webkit-text-size-adjust:none;}
header,footer, nav, section {display:block;}

a:link, a:visited{font-size:14px; color:#0000EE; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
a:hover, a:focus, a:active{color:#681664; text-decoration:underline;}

html, body{margin:0; padding:0; width:100%; height:100%; background:#121212;}
body {font-family:'SansProLight', calibri, arial, sans-serif, helvetica; color:#333; overflow-x:hidden; overflow-y:auto;}

input[type="text"], input[type="button"] {width:50%; height:30px;}

div{overflow:hidden; box-sizing:border-box;}
h1, h2{margin-top:0px;}
img{border:0px;}

.poAb{position:absolute;}
.poRe{position:relative;}
.poFi{position:fixed;}

.top25{top:25%;}
.top75px{top:75px;}

.fl{float:left;}
.fr{float:right;}

.w10{width:10%!important;}
.w15{width:15%!important;}
.w20{width:20%!important;}
.w25{width:25%!important;}
.w30{width:30%!important;}
.w33{width:33%!important;}
.w35{width:35%!important;}
.w40{width:40%!important;}
.w45{width:45%!important;}
.w50{width:50%!important;}
.w5{width:55%!important;}
.wLeft, .wRight{width:49.5%!important;}
.wLeft{margin-right:1%;}
.w60{width:60%!important;}
.w65{width:65%!important;}
.w70{width:70%!important;}
.w75{width:75%!important;}
.w80{width:80%!important;}
.w85{width:85%!important;}
.w90{width:90%!important;}
.w95{width:95%!important;}
.w100{width:100%!important;}
.wAuto{width:auto; overflow-x:scroll;}


.maPa0{margin:0px; padding:0px;}
.mt25{margin-top:25px;}
.mt50{margin-top:50px;}

.mb25{margin-bottom:25px;}
.mb50{margin-bottom:50px;}

.pad25px{padding-top:25px; padding-bottom:25px;}
.pad50px{padding-top:50px; padding-bottom:50px;}

.paTo5px{paddin-top:5px;}
.paBo5px{paddin-bottom:5px;}
.pad5{padding-left:5%; padding-right:5%;}
.pad10{padding-left:10%; padding-right:10%;}
.pad20{padding-left:20%; padding-right:20%;}
.pad30{padding-left:30%; padding-right:30%;}

.pad25pxlr{padding-left:25px; padding-right:25px;}
.pad50pxlr{padding-left:50px; padding-right:50px;}

.paTo100{padding-top:100px;}
.paTo200{padding-top:200px;}
.pabo100{padding-bottom:100px;}

.diNo{display:none;}
.diIn{display:inline!important;}
.cuPo{cursor:pointer;}

.backgroundWhite{background:#fff;}
.backgroundBlack{background:#000;}
.backgroundDarkGrey{background:#121212;}
.backgroundDarkGreyT{background-color: rgba(18, 18, 18, 0.7);}
.backgroundHamaVision{background:#007d85;}

.colorWhite{color:#fff;}
.colorBlack{color:#333;}
.colorGrey{color:#ccc;}
.colorGreen{color:green;}
.colorBlue{color:#001c85!important;}
.HamaVisionColor{color:#007d85;}

.foSi15{font-size:15px!important;}
.foSi20{font-size:20px!important;}
.foSi22{font-size:22px!important;}
.foSi25{font-size:25px!important;}
.foSi30{font-size:30px!important;}
.foSi40{font-size:40px!important;}


.lineHeight50{line-height:50px;}
.lineHeight75{line-height:75px;}
.lineHeight100{line-height:100px;}

.ta_l{text-align:left;}
.ta_c{text-align:center;}
.ta_r{text-align:right;}

.ovVi{overflow:visible;}

.ovScY{overflow-y:scroll;}

/*===========================================================
                         Bewegung
===========================================================*/
#LogoBox, #SoundBox, #ImageBox, #menu{
                  -webkit-transition:all 1s ease;
                  -moz-transition:all 1s ease;
                  -o-transition:all 1s ease;
                  transition:all 1s ease;
}

/*===========================================================
                         Shadow
===========================================================*/
.shadowWhite{-webkit-box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
             -moz-box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
             -o-box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
             box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
}

.shadowBlack{-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
             -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
             -o-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
             box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
}


/*===========================================================
                         Header
===========================================================*/
#header{z-index:10; padding-top:10px;}
#logo, #menuButton{height:50px;}

#menu{z-index:15; right:-500px; top:0px; height:100vh; width:500px; padding:25px; line-height:50px; border-left:3px solid #ccc;}
#menu.on{right:0px;}
#menu img{height:30px!important; width:auto; margin-right:10px; margin-left:5px; padding-top:10px;}
#menu a:link, #menu a:visited{font-size:22px; color:#fff; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica; display:block;}
#menu a:hover, #menu a:focus, #menu a:active{color:#007d85; text-decoration:underline;}

#header input[type="text"], #header input[type="submit"], #section button{height:50px; box-sizing:border-box; border:1px solid #ccc;}

#header input[type="text"]{color:#999; font-size:30px;}
#header #searchSub{border-radius:0px 15px 15px 0px;}

/*===========================================================
                         Slider
===========================================================*/
#slider {width:100%; height:100%; z-index:1; overflow:hidden;}
         #slider img{width:100vw;; z-index:2; bottom:0px;}


/*===========================================================
                         Section
===========================================================*/
#section{z-index:5;}
#section input[type="text"], #section input[type="submit"], #section button{height:50px; box-sizing:border-box; border:1px solid #ccc;}

#section input[type="text"]{border-radius:15px 15px 0px 0px; color:#999; font-size:30px;}
#section #browserSub{border-radius:0px 0px 15px 0px;}
#section #searchSub{border-radius:0px 0px 0px 15px;}

#section.search{height:calc(100% - 75px); height:-webkit-calc(100% - 75px); height:-moz-calc(100% - 75px);}


/*===========================================================
                         Slider
===========================================================*/
#footer {z-index:10; bottom:0px;}
#footer a:link, #footer a:visited{font-size:14px; color:#fff; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
#footer a:hover, #footer a:focus, #footer a:active{color:#fff; text-decoration:underline;}


@media screen and (max-width:1400px){
         #slider{width:auto; height:auto; min-height:100vh; min-width:100%;}
         #slider img{height:100vh; width:auto;}

}



@media screen and (max-width:1350px){
}


@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){
         #logo, #menuButton{height:40px;}
}


@media screen and (max-width:765px){
         #logo, #menuButton{height:30px;}

}

@media screen and (max-width:600px){

}

@media screen and (max-width:500px){
         #menu{width:100%; right:-100%;}
}