@charset "UTF-8";

@import url("../fonts/web_fonts/stylesheet.css");

html {
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

html, body {
  height:100%;
  width: 100%;
}

body {
  margin:0;
  overflow:hidden;
  padding: 0;
  color: #a90a3a;
  font-family: sky_textregular;
  font-size: 8vw;
}

button {
  font-family: sky_textmedium;
  color: #ffffff;
  border: 0;
}

h1 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 10vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: sky_textmedium;
}

p {
  font-size: 6.5vw;
}

.iphone_bold {
  font-family: sky_textbold;
}

.abs_center {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.full_wnd_container, #pano {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#landscape_warning {
  z-index: 1000;
}

#intro {
  background-color: rgba(0, 0, 0, 0.3);
}

#intro_wnd, #countdown_wnd, #ending {
  background-image: url("../images/intro_background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#intro_wnd {
  width: 88%;
  height: 65%;
}

#countdown_wnd {
  width: 88%;
  height: 75%;
}

#ending {
  z-index: 2;
}

#ending_gallery {
  z-index: 3000;
}

#intro {
  z-index: 5;
}

#game {
  z-index: 4;
}

#intro_title_block {
  top: 28%;
}

#intro_title {
  text-transform: uppercase;
  font-family: sky_textmedium;
  line-height: 100%;
  font-size: 6vw;
}

#intro_subtitle {
  font-size: 5vw;
  margin-top: 24px;
}

#intro_image {
  position: absolute;
  top: 0;
  right: 0;
  height: 43.5%;
  max-width: 100%;
}

#intro_logo {
  top: 10%;
  height: 7.2%;
}

#countdown_logo {
  top: 88%;
  height: 7.2%;
}

#intro_copy, #countdown_copy {
  position: absolute;
  font-family: sky_textmedium;
}

#intro_copy {
  width: 95%;
  top: 50%;
  font-size: 5vw;
}

#countdown_copy {
  top: 56%;
  font-size: 5.5vw;
  margin-top: 0;
}

#intro_first_msg {
  margin-top: 120px;
}

#exit_intro_btn_container {
  width: 34%;
  top: 77%;
  height: 11%;
  background-image: url("../images/play_button.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  text-align: center;
}

#exit_intro_btn {
  background:none;
  width: 100%;
  height: 100%;
  font-size: 7vw;
  text-align: center;
}

#find_out_btn_container {
  top: 90%;
  height: 7%;
  width: 36%;
  background-image: url("/images/find_more_button.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#find_out_btn {
  border: 0;
  background: none;
  font-size: 4.5vw;
  width: 100%;
  height: 1px;
  font-family: sky_textmedium;
  color: #ffffff;
  position: absolute;
  top: 25%;
}

#ending_logo {
  top: 24%;
  height: 12%;
}

.abs_center_middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

#ending_logo img {
  width: 40%;
}

#ending_gallery {
  /*top: 36%;*/
  top: -40%;
  height: 33%;
}

#ending_msg {
  top: 75%;
  height: 15%;
}

#ending_msg p {
  margin-top: 4%;
  margin-bottom: 0;
  font-family: sky_textmedium;
  font-size: 7vw;
}

#ending_header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24%;
  background-color: #9b0c23;
  text-transform: uppercase;
  color: #ffffff;
}

#ending_header_content {
  top: 5%;
  /*background-color: green;*/
  height: 90%;
}
/*
#ending_header_content div {
  display: inline-block;
}
*/
#found_msg {
  font-size: 5.5vw;
  margin-bottom: 0;
  margin-top: 0;
}

#stars_summary {
  width: 100%;
  height: 25%;
/*  background-color: red;*/
}

#stars_summary img {
  height: 60%;
  margin-right: 1.5%;
  margin-left: 1.5%;
}

#header_replay img {
  height: 100%;
  margin-left: 24px;
}

#header_replay {
  height: 12%;
  font-size: 4.5vw;
  margin-top: 2%;
}

#landscape_warning {
  background-image: url("/images/sparkling_landscape.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: sky_textmedium;
  font-size: 5vw;
}

#landscape_warning_content {
  width: 60%;
  text-align: center;
}

#rotate_icon {
  margin-top: 20px;
  margin-bottom: 20px;
}

#footer {
  z-index: 2;
  background-image: url("/images/footer_background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  color: #ffffff;
}

#footer_border img {
  width: 100%;
}

#footer_border {
  z-index: 3;
  border-left: 0;
  border-bottom: 0;
  border-right: 0;
  /*border-top: 50px solid transparent;
  border-image: url("/images/snow_border.png") 50 round;
  -webkit-border-image: url("/images/snow_border.png") 50 round;
  -o-border-image: url("/images/snow_border.png") 50 round;
  -moz-border-image: url("/images/snow_border.png") 50 round;*/

  /*background-image: url("/images/snow_border.png");*/

  /*height: 32px;*/
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 16%;
}

#footer_logo {
  bottom: 11%;
  width: 30%;
}

#footer_logo img {
  width: 100%;
}

.footer_box {
  background-image: url("/images/footer_shade.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  border-radius: 18px;
  bottom: 45%;
  height: 30%;
  /*background-color: green;*/
}

#footer_timer {
  left: 4%;
  width: 36.7%;
}

#footer_score {
  right: 4%;
  width: 50.6%;
}

#footer_seconds {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55%;
  height: 100%;
  text-align: right;
}

#footer_cents {
  position: absolute;
  right: 0;
  top: 10%;
  width: 45%;
  height: 50%;
  text-align: left;
  font-size: 4vw;
}

#countdown {
  top: 30%;
  width: 60%;
  z-index: 2;
}

#countdown img {
  width: 100%;
}

.countdown_counter {
  font-size: 22vw;
  top: 48%;
}

#countdown_counter_3, #countdown_counter_2 {
  left: 51%;
}

#footer_score_label {
  /*background-color: green;*/
  position: absolute;
  bottom: 30%;
  height: 40%;
  left: 0;
  width: 35%;
  text-align: center;
  font-size: 5vw;
  line-height: 100%;
}

.score_star {
  position: absolute;
  bottom: 30%;
  height: 40%;
  display: inline-block;
  text-align: left;
  width: 13%;
}

.score_star img {
  display: inherit;
  height: 100%;
}

#star_1 {
  left: 35%;
}

#star_2 {
  left: 48%;
}

#star_3 {
  left: 61%;
}

#star_4 {
  left: 74%;
}

#star_5 {
  left: 87%;
}

#pano {
  /*background-color: green;*/
}

.legals_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 3vw;
  margin-right: 10px;
  margin-bottom: 10px;
}

#legal {
  z-index: 20;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-color: #ffffff;
}

#legal_copy {
  color: #000000;
  margin-left: 45px;
  margin-right: 45px;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 3vw;
  text-align: justify;
}

#legal_close_btn {
  position: absolute;
  right: 45px;
  top: 45px;
  font-size: 6vw;
}

.item {
  position: absolute;
  top: -100%;
}

#intro_title div {
  display: inline-block;
  margin-left: 16px;
  margin-right: 16px;
}

.gradient_line {
  display: inline-block;
  width: 100px;
  margin-bottom: 50px;
  height: 6px;
  border: 0;
  background: #9b0c23;
}

.left {
  background: -webkit-linear-gradient(right, #9b0c23 , #edfbfe); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, #9b0c23, #edfbfe); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, #9b0c23, #edfbfe); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to left, #9b0c23 , #edfbfe); /* Standard syntax */
}

.right {
  background: -webkit-linear-gradient(left, #9b0c23 , #bec9e4); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #9b0c23, #bec9e4); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #9b0c23, #bec9e4); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #9b0c23 , #bec9e4); /* Standard syntax */
}

#second_line_left, #second_line_right {
  margin-bottom: 1.8%;
}

#second_line_right {
  margin-left: 16px;
}

#second_line_left {
  margin-right: 16px;
}

body > div.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
  display: none !important;
  position: absolute !important;
  bottom: -100% !important;
}

.shine:after {
  animation: shine 3s ease-in-out infinite;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  left: -25%;
  top: -25%;
  width: 20%;
  height: 150%;
  opacity: 0;

  -moz-transform:rotate(25deg);
  -webkit-transform:rotate(25deg);
  -ms-transform:rotate(25deg);
  transform: rotate(25deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right,
    rgba(223, 229, 255, 0.13) 0%,
    rgba(223, 229, 255, 0.13) 77%,
    rgba(223, 229, 255, 0.4) 88%,
    rgba(223, 229, 255, 0.0) 100%
  );
}

.shine:active:after {
  opacity: 0;
}

@keyframes shine {
  10% {
    opacity: 1.0;
    left: -24%;
    transition-property: left, opacity;
  }
  100% {
    opacity: 0.4;
    left: 110%;
    transition-property: left, opacity;
  }
}

.shine_star {
  position: absolute;
  top: -90px;
  left: -90px;
  animation: shine_star 6s ease-in-out infinite;
  transform-origin: center center;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
}

@keyframes shine_star {
  35% {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform: rotate(360deg);
  }

  60% {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform: rotate(360deg);
  }
}

/* -------- IPAD PORTRAIT ------------------------------------------------ */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {

body {
  font-size: 7vw;
}

#intro_copy {
  font-size: 5vw;
  top: 48%;
}

#intro_wnd {
  height: 75%;
}

#countdown_copy {
  font-size: 4vw;
}

#legal {
  height: 35%;
}

#footer_logo {
  bottom: 6%;
}

#footer_score_label {
  font-size: 3vw;
}

#footer_cents {
  font-size: 3vw;
}

#footer_seconds {
  font-size: 6vw;
}

#ending_msg p {
  font-size: 5vw;
  margin-top: 2%;
}

h1 {
  font-size: 8vw;
}

#found_msg {
  font-size: 3.5vw;
}

#header_replay {
  font-size: 2.5vw;
}

#footer_border {
  bottom: 15%;
}

#exit_intro_btn {
  font-size: 5.5vw;
}

#countdown {
  width: 40%;
}

.countdown_counter {
  font-size: 18vw;
}

}