/* Font downloaded from FontsForWeb.com */
@font-face {
         font-family: 'Sunset';
         src: url('../font/Overdrive Sunset.otf') 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{font-size:14px; color:#681664; text-decoration:underline;}

html, body{margin:0; padding:0; width:100%; height:100%; width:100%; overflow:hidden;}
body {background-color:#ffffff; font-family:calibri, arial, sans-serif, helvetica; color:#333; background:#000;}
body.home{background:#fff;}

body {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.top0{top:0%;}
.left0{left:0%;}
.right0{right:0%;}
.bottom0{bottom:0%;}

.poFi{position:fixed;}

div{overflow:hidden; box-sizing:border-box;}

h1,h2,h3 {margin:0px; padding:0px;}

.left, .right{float:left; width:50%;}
.center{float:left; width:100%;}

.fl{float:left;}

.w100{width:100%;}
.w75{width:75%;}
.w50{width:50%;}
.w25{width:25%;}

.h100vh{height:100vh;}

.paBo250px{padding-bottom:250px;}

.ma0{margin:0 auto;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt25{margin-top:25px;}
.mt50{margin-top:50px;}

.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb25{margin-bottom:25px;}
.mb50{margin-bottom:50px;}

.ml15{margin-left:15px;}
.ml25{margin-left:25px;}
.mlm50{margin-left:-50px;}
.mlm75{margin-left:-75px;}
.mlm100{margin-left:-100px;}

.mt10p{margin-top:10%;}
.ml10p{margin-left:10%;}
.mr10p{margin-right:10%;}
.mb10p{margin-bottom:10%;}


.paTo25px{padding-top:25px;}
.paLe25px{padding-left:25px;}
.paRi25px{padding-right:25px;}
.paBo25px{padding-bottom:25px;}

.ta_l{text-align:left!important;}
.ta_c{text-align:center!important;}
.ta_rc{text-align:right!important;}

.fl{float:left;}
.ovhi{overflow:hidden;}
.ovScY{overflow-y:scroll;}

.textColorWhite, .colorWhite{color:#fff!important;}
.colorBorder{text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);}
.textShadow{text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.75);}
.textShadowW{text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75);}            

.colorWhite{color:#fff;}
.colorBlack{color:#000;}
.backgroundwAPPStore{background:#0782de;}
.backgroundWhite{background-color: rgba(255, 255, 255, 0.7);}

#installButtonPWABox {z-index:999; background:#f4f4f4; -webkit-box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);-moz-box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);-o-box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);box-shadow: 5px 5px 10px 0px rgba(204,204,204,0.75);}
#installButtonPWABox a:link, #installButtonPWABox a:visited{color:#ffffff;}
#installButtonPWABox a:hover, #installButtonPWABox a:focus, #installButtonPWABox a:active{text-decoration:underline;}



/**********************************************************
                 Home
**********************************************************/
#home{width:100%; height:100vh; text-align:center; box-sizing:border-box; padding-top:30vh; font-size:25px;}
#home_img{width:50%; max-width:300px;}
#home_logo{width:50%; max-width:300px;}



/**********************************************************
                 Browser
**********************************************************/
#landscape{margin-top:150px; width:15%;}
#menu, #lineBox, #textBox, #einstellungenBox, #restartBox, #installButtonPWABox, #background {visibility:hidden; display:none;}


@media screen and (max-width:1024px){
         #landscape{margin-top:150px; width:25%;}
}

@media screen and (max-width:765px){
         #landscape{margin-top:150px; width:50%;}
}


/**********************************************************
                 Smartphone
**********************************************************/
@media only screen and (orientation: portrait) {

#landscape{visibility:hidden; display:none;}
#menu, #lineBox, #textBox, #einstellungenBox, #restartBox, #installButtonPWABox, #background {visibility:visible; display:block;}

#menu{z-index:5; padding-top:35%; overflow-y:scroll;}

/**********************************************************
                 Inputs
*****************************************************/
select, textarea, input[type="text"], input[type="month"], input[type="search"], input[type="date"], input[type="number"], input[type="password"]{background:#fff; box-sizing:border-box; outline: none; height:35px; border:1px solid #ccc; padding:5px; -webkit-box-shadow: inset 0px 0.3125em 0.3125em rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0px 0.3125em 0.3125em rgba(0, 0, 0, 0.08); box-shadow: inset 0px 0.3125em 0.3125em rgba(0, 0, 0, 0.08);}
textarea{min-height:200px; max-height:200px; max-width:100%; min-width:100%; resize: none; display:block; font-size:15px;}
input[type="submit"]{box-sizing:border-box; height:35px;}


/**********************************************************
                 Razor
**********************************************************/
#iLiNE_Logo, #lineOneImg, #lineThreeImg {
           -webkit-transition: left 0.0s;
           transition: left 0.0s;
           -moz-transition: left 0.0s;
           -o-transition: left 0.0s;
           }

#lineBox {display:flex; justify-content:center; align-items:center; height:100vh; width:100vw;}

#iLiNE_Logo{width:80vw; position:relative; z-index:10;}

#clickerLeft, #clickerRight{height:100vh; width:50%; position:fixed; z-index:15; left:0%; visibilit:hidden; display:none;}
#clickerRight{left:50%;}
#blackBoxLeft{position:absolute; right:0px; height:100vh; width:0%; background:#000;}
#blackBoxRight{position:absolute; left:0px; height:100vh; width:0%; background:#000;}

#linesBox{top:0px; left:0px; position:absolute; z-index:8; width:100vw; height:100vh;}

#lineOneImg, #lineTwoImg, #lineThreeImg{position:absolute; height:68vh; display:block; opacity:0.0;}

#lineOneImg img, #lineTwoImg img, #lineThreeImg img{height:100%; width:auto;}

#lineOneImg, #lineTwoImg, #lineThreeImg {z-index:20;}
#lineOneImg,#lineThreeImg{width:20px;}
#lineTwoImg {left:45%; z-index:20;}

#blackBox1Top, #blackBox1Bottom, #blackBox2Top, #blackBox2Bottom, #blackBox3Top, #blackBox3Bottom{position:absolute; height:0px; background:#000; width:100%}
#blackBox1Top, #blackBox2Top, #blackBox3Top{top:0px;}
#blackBox1Bottom, #blackBox2Bottom, #blackBox3Bottom{bottom:0px;}


#textBox h1, #textBox h2 {
           -webkit-transition: all 0.5s;
           transition: all 0.5s;
           -moz-transition: all 0.5s;
           -o-transition: all 0.5s;
           }

#textBox{position:fixed; top:0px; left:0px; padding-top:40vh; z-index:100; width:100vw; height:vh; background:black; font-family:Sunset; display:none; visibility:hidden;}
#textBox h1{font-size:80px;}
#textBox h1.on{font-size:60px;}
#textBox h2{font-size:70px;}
#textBox h2.on{font-size:50px;}

#restartBox{position:fixed; z-index:100; bottom:5px; display:none; visibility:hidden; font-family:Sunset; font-size:30px;}
#restartBox a:link, #restartBox a:visited{font-size:30px; color:#fff; font-family:Sunset;}
#restartBox a:hover, #restartBox a:focus, #restartBox a:active{text-decoration:underline;}
/**********************************************************
                 Einstellungen
**********************************************************/
#einstellungenButton{position:fixed; z-index:15; bottom:10px; right:10px;}
#einstellungenImg{width:40px;}

#einstellungenBox{position:fixed; z-index:10; padding:2.5%; bottom:-150px; width:100%; background:#000000; float:left; border:3px solid #ccc; box-sizing:border-box;
                 -webkit-transition: bottom 1s;
                 transition: bottom 1s;
                 -moz-transition: bottom 1s;
                 -o-transition: bottom 1s;
                 }
                 #einstellungenBox.on{bottom:0px;}


/*weichen*/
/*opera*/
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {


}


/* Nur Firefox */
@-moz-document url-prefix(){

}

/* Safari only override */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){

}


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

}


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

}

/*@media screen and (max-width:768px){ */


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