@charset "utf-8";
/* CSS Document */

/*  Classes are defined here  */

body {height: 570px;}
#main-window {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	width: 708px;
	height: 427px;	
	top: 0;
	left: 0;
	visibility: hidden;
	display: block;
}

#v3dframe  {
	position: absolute;
	width: 708px;
	height: 427px;
	top: 0;
	left: 0;
	border: none;
}

#preloader {
	visibility: visible;
}

#loading_progress {
	position: relative;
	top: 275px;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2em;
	color: #ff6e00;
	font-weight: bolder;
}

#backbutton {
	position: relative;
	width: 38px;
	top: 367px;
	right: -10px;
	z-index: 1;
	display: none;
}



/*  Class IDs are defined here  */

.calloutsOFF { 
   display: none;
}

.calloutsON {
    position: fixed;
    top: 427px;
    z-index: 100;
	padding-top: 20px;
    line-height: 1.42rem;
    color: #475156;
	display: block;
	animation: textin .5s 1;
}

.calloutsON img {
	width: 20px;
	float: left;
	padding-right: 2px;
	padding-top: 1px;
	animation: textin .5s 1;
}

.head {
	font-weight:bold;
	font-size: 1.15em;	
}

.preloader-gif {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0; 
    background-image: url('media/ifm_preloader.gif');
    background-position: top;
    background-repeat: no-repeat;
    background-size: 250px 250px;
}


/* Media queries defined here  */

@media all and (max-width: 580px) {
	body {height: 450px;}
	#v3dframe {width: 580px; height: 350px;}
	#main-window {width: 580px; height: 350px;}
	#loading_progress {top: 265px;}
	#backbutton {top: 290px;}
	.calloutsON {top: 350px; padding-top: 10px;  animation: textin580 .5s 1;}
}

@media all and (max-width: 452px) {
	body {height: 400px;}
	#v3dframe {width: 452px; height: 273px;}
	#main-window {width: 452px; height: 273px;}
	#backbutton {top: 228px; width: 35px;}
	.calloutsON {top: 273px; animation: textin452 .5s 1;}
}

@media all and (max-width: 420px) {
	#v3dframe {width: 420px; height: 252px;}
	#main-window {width: 420px; height: 252px;}
	#backbutton {top: 207px; width: 35px;} 
	.calloutsON {top: 252px; animation: textin420 .5s 1;}
}

@media all and (max-width: 416px) {
	body {height: 300px;}
	#v3dframe {width: 100%; height: 252px;}
	#main-window {width: 100%; height: 252px;}
	#loading_progress {display: none;}
	.calloutsON {display: none;}
	.preloader-gif {background-size: 60%;}
}
	
@keyframes textin {
	from {opacity: 0;}
	  to {opacity: 1;}
	  0% {top: 400px;}
  }
  
  @keyframes textin580 {
	from {opacity: 0;}
	  to {opacity: 1;}
	  0% {top: 333px;}
  }
  
  @keyframes textin452 {
	from {opacity: 0;}
	  to {opacity: 1;}
	  0% {top: 259px;}
  }
  
  @keyframes textin420 {
	from {opacity: 0;}
	  to {opacity: 1;}
	  0% {top: 235px;}
  }