@charset "utf-8";

/*---------------------------------------------------------
FONTS
---------------------------------------------------------*/
@font-face {
	font-family: 'Interstate-Regular';
	src: url('../fonts/Interstate-Regular.ttf') format('truetype'),
		url('../fonts/Interstate-Regular.svg#Interstate-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'AngiesNewHouse';
	src: url('../fonts/AngiesNewHouse.ttf') format('truetype'),
		url('../fonts/AngiesNewHouse.svg#AngiesNewHouse') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Interstate-RegularItalic';
	src: url('../fonts/Interstate-RegularItalic.ttf') format('truetype'),
		url('../fonts/Interstate-RegularItalic.svg#Interstate-RegularItalic') format('svg');
	font-weight: normal;
	font-style: italic;
}
/*---------------------------------------------------------
HELPERS
---------------------------------------------------------*/
.hidden{display: none !important}
.centerXY{position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;}
.centerX{position: absolute;margin: auto;left: 0;right: 0;}
.screen{position: absolute;width: 1024px;height: 768px;top: 0;left: 0;}
.italic{
  font-family: 'Interstate-RegularItalic' !important;
  font-style: italic !important}

/*---------------------------------------------------------
APPLICATION: global
---------------------------------------------------------*/
#app{overflow: hidden;}
.bt{
  padding: 12px;
  background: #feae00; /* Old browsers */
  background: -moz-linear-gradient(top, #fed600 0%, #feae00 100%);
  background: -webkit-linear-gradient(top, #fed600 0%, #feae00 100%);
  background: linear-gradient(to bottom, #fed600 0%, #feae00 100%);
  border: 1px solid #FEFF00;
  border-radius: 20px;
  box-shadow: 0 0 0 8px #231F20, 0px 3px 20px 10px rgba(0,0,0,0.3);
  text-align: center;
  font-family: 'AngiesNewHouse';
  line-height: 38px;
  font-size: 38px;
  text-transform: uppercase;
  text-decoration: none;
  color: #231F20;
  cursor: pointer;
}
.bt:hover{
  background: #fffd00;
  box-shadow: 0 0 0 8px #463c1f, 0px 3px 20px 10px rgba(0,0,0,0.3);
  color: #463c1f;
}
#blackout{
  background: #000;
  opacity: 0
}
/*---------------------------------------------------------
APPLICATION: Start screen
---------------------------------------------------------*/
#start{background:url('../imgs/bg_start.png') no-repeat}
#start p {
  font-family: 'Interstate-Regular';
  width: 653px;
  height: 182px;
  top: 100px;
  font-size: 22px;
  color: #28E0E3;
}
.bt-start{
    width: 140px;
    top: 545px;
}

/*---------------------------------------------------------
APPLICATION: simulator screen
---------------------------------------------------------*/
#main{background: url('../imgs/bg_main.png') no-repeat}
#main p {
  width: 693px;
  height: 58px;
  top: 110px;
  font-family: 'Interstate-Regular';
  font-size: 18px;
  text-align: center;
  color: #000;
}
.bt-simulate{
  width: 250px;
  top: 470px;
  padding: 10px;
  border-radius: 15px;
  font-size: 30px;
  white-space: nowrap;
}
#video{
  width: 517px;
  height: 292px;
  top: 182px;
  border-radius: 5px;
}
.bt-fullscreen{
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 10px;
  right: 10px;
  padding: 0;
  box-shadow: 0 0 0 4px #231f20;
  border: 1px solid #feff00;
  border-radius: 4px;
}
.bt-fullscreen::after{
  content: '';
  position: absolute;
  width: 37px;
  height: 37px;
  top: 1px;
  left: 2px;
  background: url('../imgs/video_resize_sprite.png') no-repeat;
}
.bt-fullscreen.minimize{
  bottom: 120px;
  right: 30px;
}
.bt-fullscreen:hover::after{
  background-position: left bottom;
}
.bt-fullscreen:hover{
  box-shadow: 0 0 0 4px #463c1f;
}
.bt-fullscreen.minimize::after{
  background-position: right top;
}
.bt-fullscreen.minimize:hover::after{
  background-position: right bottom;
}
#menu {
  position: absolute;
  top: 0;left: 0;
}
#menu header {
  padding: 16px 20px;
  font-family: 'AngiesNewHouse';
  font-size: 20px;
  text-transform: uppercase;
}
#menu > div {
  position: absolute;
  top: 550px;
  height: 189px;
  margin-left: 10px;
  overflow: hidden;
}
#vehicles{
  left: 19px;
  width: 544px;
  margin-left: 0 !important;
  background: url('../imgs/box_menu_grande.png') no-repeat;
}
#safety,
#type{
  width: 208px;
  background: url('../imgs/box_menu_pequeno.png') no-repeat;
}
#safety {left: 566px;}
#type {left: 786px;}

#vehicles .options:nth-of-type(1) {
  margin-left: 25px;
}
.options {
  margin-left: 18px;
}
.options div {
  position: relative;
  margin-left: 50px;
  margin-top: 15px;
  font-family: 'Interstate-Regular';
  font-size: 18px;
  color: #28E0E3;
  white-space: nowrap;
}
.options div::before{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  left: -50px;
  border: 2px solid #28E0E3;
  border-radius: 50%;
  cursor: pointer;
}
.options div::after{
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 10px;
  left: -40px;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(0);
  -webkit-transition: background .2s linear, transform .3s linear ;
  -moz-transition: background .2s linear, transform .3s linear ;
  transition: background .2s linear, transform .3s linear ;
}
.options div.checked::after{
  background: #28E0E3;
  transform: scale(1);
  -webkit-transition: background .2s linear, transform .1s linear ;
  -moz-transition: background .2s linear, transform .1s linear ;
  transition: background .2s linear, transform .3s linear ;
}
.num{
  font-family: 'Interstate-Regular';
  position: relative;
  font-size: 26px;
  top: -7px;
  color: #28E0E3;
}
#type .options{
  margin-top: 25px;
}
#type div::before{
  margin-top: -10px;
}
#type div::after{
  top:0;
}
#type .options .it2{
  margin-top: 36px;
}
#vehicles .options div {
  width: 75px;
  height: 38px;
  margin-right: 30px;
  display: inline-block;
  background: url('../imgs/vehicles.png') no-repeat;
}
#vehicles .it2{
  width: 82px !important;
  background-position: -81px 5px !important
}
#vehicles .it3{
  width: 76px !important;
  margin-right: 0 !important;
  background-position: -178px 0 !important;
}
.instructions{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}
#main .instructions p {
  width: 100%;
  color: #fff;
  margin-top: 110px;
  font-size: 22px;
}
/*---------------------------------------------------------
APPLICATION: modal
---------------------------------------------------------*/
#video.full {
  position: absolute;
  width: 1024px;
  height: 768px;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1;
}

._android .bt-fullscreen {display: none;}
._android .bt-fullscreen.minimize {display: block; z-index: 10;}

._android a:not(.bt-fullscreen):not(._midia),
._android #menu header,
._ios a:not(.bt-fullscreen):not(._midia),
._ios #menu header,
._javafx a:not(.bt-fullscreen):not(._midia),
._javafx #menu header {
  padding-top: 17px;
}
._android #type {
  background-position: -2px 0
}
._android #main p {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
._android #menu > div {
  -webkit-border-radius: 25px;
}
.inside-border {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 19px;
  overflow: hidden;
}
._android #video > div:not(.hidden)
._android #video > div:not(.instructions),
._android .video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
._android #video > div a > img {
  position: absolute;
  top: 0;
}
#androidVideos {
  display: none;
  top: 0;
  left: 0;
}
._android #androidVideos {
  display: block;
}