@font-face {
   font-family : OnboardingFont;
   src : url("Baloo-cyrillic.ttf") format("truetype");
   font-weight : normal;
}

.hidden {
  display: none;
}

body { 
    width: 100vw;
    height: 100vh;
	padding: 0;
	margin: 0;   
}

#rotate-device{
    width: inherit;
    height: inherit;
    background-image: url(../images/load_screen_bg_portrait.png);
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#rotate-device-content{
    width: 200px;
    height: 150px;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin: 0 auto;
    transform: translate(-50%, -50%);
}

#rotate-device-content-image{
    width: inherit;
    height: 80%;
    background-image: url(../images/screen-rotation-icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;	
}

#rotate-device-content-text{
    width: inherit;
    height: 20%;
    text-align: center;
    color: #462D9E;
    font-weight: bold;
}

#app-container{
    width: inherit;
    height: inherit;
    background-image: url(../images/load_screen_bg_landscape.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

#unity-container { 
    width: fit-content;
	height: fit-content;
    margin: 0 auto;
    position: relative;    
}

#loadscreen-container{
    width: inherit;
    height: inherit;
}

.loader {
    width: 250px;
	height: 20px;	
	position: fixed;
    left: 50%;
    bottom: 40px;
    margin: 0 auto;
    transform: translate(-50%, -50%);
}

.loader-dot {
    width: 10px;
    height: 10px;	
    position: absolute;
    background-color: white;
    border: 1px solid #82FF70;
    border-radius: 100%;
	animation-name: loader;
	animation-timing-function: ease-in-out;
	animation-duration: 3s;
	animation-iteration-count: infinite;    
}

.loader-dot:first-child {
	animation-delay: 0.5s;
}

.loader-dot:nth-child(2) {
	animation-delay: 0.4s;
}

.loader-dot:nth-child(3) {
	animation-delay: 0.3s;
}

.loader-dot:nth-child(4) {
	animation-delay: 0.2s;
}
.loader-dot:nth-child(5) {
	animation-delay: 0.1s;
}

.loader-dot:nth-child(6) {
	animation-delay: 0s;
}

@keyframes loader {
	15% {
		transform: translateX(0);
	}
	45% {
		transform: translateX(230px);
	}
	65% {
		transform: translateX(230px);
	}
	95% {
		transform: translateX(0);
	}
}

#unity-canvas { 
}

#unity-warning { 
	position: absolute; 
	left: 50%; 
	top: 5%; 
	transform: translate(-50%); 
	background: white; 
	padding: 10px; 
	display: none 
}

.btns-panel{
        overflow        : hidden;
        position        : relative;
        left            : 18%;
        top             : 87%;
        width           : 64%;
		height          : 10%;
}

.btns-panel .btn{
		float : left;
		
        color                   : white;
        font-weight				: normal;
        font-size               : 6.0vh;
        background-position 	: 0px 0px;
        background-repeat       : no-repeat;
        text-align              : center;
        text-decoration         : none;
        height                  : 100%;
        width                   : 100%;
		
		text-shadow: -1.5px -1.5px 0 #077e1d, 1.5px -1.5px 0 #077e1d, -1.5px 2.0px 0 #077e1d, 1.8px 2.0px 0 #077e1d;
		letter-spacing: .04em;
		
		line-height				: 155%;

}

.btns-panel .btn:hover{
        //background-position : 0px -82px;
		background-position : 0px 100%;
}

.btns-panel .btn-continue{
        background : url("../images/btn_play.png") no-repeat center top;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

@media screen and (orientation: portrait) {
	#loadscreen-container {
		display : none;
	}

	#rotate-device{
		display: block;
	}
}

@media screen and (orientation: landscape) {
	#loadscreen-container {
		display : block;
	}

	#rotate-device{
		display : none;
	}
}