html, body { 
margin: 0px; padding: 0px; width:100%; height: 100%; overflow:hidden;
} 

body {
background-color:#000000;
}


*, *:before, *:after {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
     
input, input:before, input:after {
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }



#preloadimages{
	display:none;
}

@font-face {
    font-family: 'apercu_regular';
    src: url('apercu_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'apercu_bold';
    src: url('apercu_pro_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#font1{
font-family: 'apercu_regular';
position:absolute;
left:-1000px;
visibility:hidden;
}

#font2{
font-family: 'apercu_bold';
position:absolute;
left:-1000px;
visibility:hidden;
}

.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-header {
font-family: 'apercu_bold';
color: #ffffff;
font-size:6vh;
}
.modal-content {
font-family: 'apercu_regular';
background-color: #0C5D8E;
margin: auto auto;
padding: 3dvh;
color:#ffffff;
border-radius: 3dvh;
text-align:center;
font-size:3dvh;
box-shadow: 0 0 0 0.5dvh #FFFFFF, 0 0 0 1dvh #000000;
position:relative;
}
.modal-body{
padding-left: 4dvh;
padding-right: 4dvh;
padding-top:2dvh;
padding-bottom:4dvh;
}

#tutorialwindow .modal-content{
width: 60vw;
max-width:800px;
}


.redbutton-small{
color: #ffffff;
font-family: 'apercu_bold';
width: 40dvh;
height: 12dvh;
font-size: 5dvh;
padding-bottom: 2dvh;
background-image: url('../images/redbutton.svg');
}

.bluebutton-small{
color: #ffffff;
font-family: 'apercu_bold';
width: 40dvh;
height: 12dvh;
font-size: 5dvh;
padding-bottom: 2dvh;
background-image: url('../images/bluebutton.svg');
}

.hoverbutton{
text-decoration: none;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: none;
background-size: contain;
background-repeat: no-repeat;
}





/* Portrait */
@media (orientation: portrait) {
	
#tutorialwindow .modal-content{
width: 80dvw;
}
.modal-content {

font-size:5dvw;
padding: 4dvw;
}

.modal-header{
font-size:7dvw;
}
.modal-body{
padding-left: 0dvw;
padding-right: 0dvw;
padding-top: 2dvw;
padding-bottom: 4dvw;
}

.redbutton-small{
font-size: 8dvw;
width: 73dvw;
height:20dvw;
padding-bottom:2dvw;
}

.bluebutton-small{
font-size: 8dvw;
width: 73dvw;
height:20dvw;
padding-bottom:2dvw;
	}


}