@import 'reset.css';

html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  height: 100%;
  overflow:hidden;
  text-align: center;
}

#stage {
  margin: 0 auto;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  background-image: url(../assets/imgs/backgrounds/bg_1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
  #stage.loading {
    pointer-events: none;
  }

#mobile{
  height:100%;
  background-image: url(../assets/imgs/rotate-screen.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display:none;
  position: relative;
  z-index: 999999;
}

#spinner {
  position: absolute;
  z-index: 999;
  bottom: 7%;
  left: 11%;
  width: 20vw;
  display: none;
}
  #stage.loading #spinner{
    display: block;
  }
  
  #spinner img {
    width: 100%;
    height: auto;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @-webkit-keyframes spin
  {
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
  }
  @-moz-keyframes spin
  {
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
  }
  @-ms-keyframes spin
  {
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
  }
  @keyframes spin
  {
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }

div.popup {
  position: absolute;
  top: 15%;
  left: -100%;
  width: 80%;
  height: 70%;
  background: #fff;
  border-radius: 16px;
  z-index: 1001;
  padding: 2%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: transform 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition: transform 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
  div.popup.open {
    left: 10%;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  div.popup a.close {
    display: block;
    position: absolute;
    top: 1.3vw;
    right: 1.3vw;
    font-family: 'MuseoSansW01-Rounded900';
    font-size: 3vw;
    color: #01ab52;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    line-height: 0px;
    padding: .7vw 0px 1vw 0px;
    z-index: 2;
  }
    div.popup a.close:hover {
      opacity: .8;
    }
  div.popup .image {
    float: left;
    width: 40%;
    padding-top: 5.4vw;
  }
    div.popup .image img {
      width: 100%;
      height: auto;
    }
  div.popup .text {
    float: right;
    width: 55%;
    position: relative;
    font-family: 'MuseoSansW01-Rounded700';
    text-align: left;
  }
    div.popup strong {
      font-family: 'MuseoSansW01-Rounded100_942391';
    }
    div.popup .text h6 {
      font-size: 2.8vw;
      margin-top: 1vw;
      margin-bottom: 1vw;
      color: #cedd29;
      font-family: 'MuseoSansW01-Rounded900';
    }
    div.popup .text p {
      font-size: 1.5vw;
      line-height: 1.4;
      margin-bottom: .8vw;
      padding-left: 4vw;
    }
    div.popup .text .spacer {
      height: .8vw;
    }
  div.popup .bubble {
    position: absolute;
    font-size: 1.7vw;
    line-height: 2.8vw;
    font-family: 'MuseoSansW01-Rounded900';
    text-align: center;
    color: #fff;
    background: #cedd29;
    width: 2.8vw;
    height: 2.8vw;
    border-radius: 1.5vw;
    margin-top: .6vw;
  }
    div.popup .bubble > div {
      position: relative;
      top: -2px;
      background: #01ab52;
      width: 2.8vw;
      height: 2.8vw;
      border-radius: 1.5vw;
    }

div#shade {
  position: fixed;
  top: 0%;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
  div#shade.open {
    left: 0;
    opacity: .9;
  }



div.slide {
  position:absolute;
  display: none;
}
  div.slide#welcome {
    display: block;
  }
  
a:hover{cursor: pointer;}
div#step-back img,
div#step-forward img {width:100%;}

div#step-back {
  display:none;
  width:5%;
  position:absolute;
  left:1%;
  top:50%;
  margin-top:-2.5%;
  z-index: 100;
  cursor:pointer;
}
div#step-forward {
  display:none;
  width:5%;
  position:absolute;
  right:1%;
  top:50%;
  margin-top:-2.5%;
  z-index:100;
  cursor:pointer;
}
div.character {
  display:none;
  position:absolute;
  left:0;
  bottom:0;
  top:0;
  width:42%;
}
  div.character img {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    z-index:50;
    transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
  }
    div#main-character img.airborne.falling {
      animation-name: bounce;
      animation-duration: 800ms;
    }
      @keyframes bounce {
        0%   { bottom:100%; animation-timing-function: ease-in;  }
        37%  { bottom:0; animation-timing-function: ease-out; }
        55%  { bottom:25%; animation-timing-function: ease-in;  }
        73%  { bottom:0; animation-timing-function: ease-out; }
        82%  { bottom:7%; animation-timing-function: ease-in;  }
        91%  { bottom:0; animation-timing-function: ease-out; }
        96%  { bottom:2%; animation-timing-function: ease-in;  }
        100% { bottom:0; }
      }
      
  #stage.loading div.character img {
    opacity: .5;
  }

/* ==== Welcome Screen ==== */
#pause{display:none;}
#load-screen .load-text{
	position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 30%;
  width: 300px;
  animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes pulse_animation {
  0% { transform: scale(1); -webkit-transform: scale(1); }
  30% { transform: scale(1); -webkit-transform: scale(1); }
  40% { transform: scale(1.08); -webkit-transform: scale(1.08); }
  50% { transform: scale(1); -webkit-transform: scale(1); }
  60% { transform: scale(1); -webkit-transform: scale(1); }
  70% { transform: scale(1.08); -webkit-transform: scale(1.08); }
  80% { transform: scale(1); -webkit-transform: scale(1); }
  100% { transform: scale(1); -webkit-transform: scale(1); }
}
#load-screen .slider{
	position:absolute;
	top:50%;
  width: 160%;
	height:auto;
  right: 100%;
  transition: right 0.3s linear;
  -webkit-transition: right 0.3s linear;
}
  #load-screen .slider img{
  	width: 100%;
  }

div#welcome {}
div#welcome div.dinos {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  z-index:10;
}
div#welcome div.dinos div {position:absolute;}
div#welcome div.dinos div img {width:100%;}
div#welcome div.dinos div.skya {
  width:37%;
  left:-40%;
  bottom:-10%;
  z-index:5;
  transition: all 0.3s ease .8s;
  -webkit-transition: all 0.3s ease .8s;
}
div#welcome div.dinos div.trux {
  width:55%;
  left:-55%;
  bottom:-27%;
  z-index:10;
  transition: all 0.5s ease 1s;
  -webkit-transition: all 0.5s ease 1s;
}
div#welcome div.dinos div.stego {
  width:44%;
  right:-50%;
  bottom:-1%;
  z-index:5;
  transition: all 0.4s ease .7s;
  -webkit-transition: all 0.4s ease .7s;
}
div#welcome div.dinos div.rivet {
  width:33%;
  right:-60%;
  bottom:-11%;
  z-index:10;
  transition: all 0.5s ease 1s;
  -webkit-transition: all 0.5s ease 1s;
}

div#welcome div.content {
  width:36%;
  position:absolute;
  left:50%;
  margin-left:-18%;
  z-index:5;
  opacity: 0;
  transition: all 0.9s ease .5s;
  -webkit-transition: all 0.9s ease .5s;
}
div#welcome div.content.brand, div#welcome div.content.action {z-index:15;}
div#welcome div.content div {max-width:100%; margin:0 auto;}
div#welcome div.content div img {width:100%;}
div#welcome div.content div.dinotrux {width:83%; margin-top:4%;}
div#welcome div.content div.create-print {margin-top:8%;}
div#welcome div.content div.start {width:48%; margin-top:77%;}

.make-btn {
	width: 90px;
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 999;
    cursor: pointer;
}
.volume-btn {
    display: block;
    z-index: 999;
    position: absolute;
    top: 49px;
    left: 120px;;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

/* ==== Introduction ==== */
div#introduction {}

div#introduction div.trux img {width:100%;}
div#introduction div.trux {
  position:absolute;
  width:68%;
  left:-16%;
  bottom:-4%;
}

div#introduction div.sign {width:34%; position:absolute; right:10%; top:50%; margin-top:-15%; -webkit-transition: transform 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: transform 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);-webkit-transform: scale(0); transform: scale(0);}
div#introduction div.sign.show {-webkit-transform: scale(1); transform: scale(1);}
div#introduction div.sign img {width:100%; height: auto;}

/* ==== Steps ==== */

div.slide div.options {
  background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#00000000',GradientType=0 );
  width:83%;
  height:80%;
  position:absolute;
  top:10%;
  left:8%;
}
  #stage.loading div.slide div.options {
    opacity: .5;
  }

div.slide div.options div.slide-title {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../assets/imgs/title-bar.jpg) top center no-repeat;
  background-size: cover;
  height: 5vw;
  text-align: center;
  font-size: 2vw;
  text-transform: uppercase;
  line-height: 5vw;
  font-family: 'MuseoSansW01-Rounded900';
  color: #fff;
  text-shadow: .25vw .25vw .5vw rgba(0,0,0,.6);
}

div#species div.options {text-align: center; padding-top:7%; padding-left:5%; padding-right:5%; box-sizing: border-box;}
div#species div.options a {width:20%; padding:20px; float:left; display:block; box-sizing: border-box;}
div#species div.options a img {width:100%;}

div#color div.options {padding-left:40%; padding-top:8%; box-sizing: border-box;}
div#color div.options a {width:25%; float:left; margin-right:6%; margin-bottom:6%; display:block; box-sizing:border-box;}
div#color div.options a img {width:100%;}

div#body div.options {padding-left:40%; padding-top:10%; padding-right:5%; box-sizing: border-box;}
div#body div.options a {width: 29%;display: inline-block;padding: 1% 1% 5% 1%;}
div#body div.options a img {width:100%;}
div#body div.options .crane{height:250px;}
div#body div.options .crane img {height: 100%;width: 100%;margin: 0 auto;display: block;}

div#tail div.options {padding-left:40%; padding-top:10%; box-sizing: border-box;}
div#tail div.options a {
    width: 30%;
    margin-bottom: 6%;
    display: inline-block;
    box-sizing: border-box;
    padding-right: 4%;
}
div#tail div.options a img {width:100%;}

div#feet div.options {padding-left:33%; padding-top:10%; box-sizing: border-box;}
div#feet div.options a {
    width: 32%;
    margin-bottom: 10%;
    display: inline-block;
    box-sizing: border-box;
    padding-right: 5%;
}
div#feet div.options a img {width:100%;}

div#expression div.options {padding-left:40%; padding-top:10%; padding-right:5%; box-sizing: border-box;}
div#expression div.options a {
    box-sizing: border-box;
    display: inline-block;
    width: 49%;
    padding-right: 12%;
    padding-bottom: 8%;
}
div#expression div.options a img {width:100%;}

div.options a {position:relative;}
div.options a span.over {display:none;}
div.options a:hover span.over,
div.options a.active span.over {display:block; position:absolute; top:50%; margin-top:-25%; left:0;}
div.options a span.over img {opacity:.9;}

div#condition div.options {padding-left:40%; padding-top:8%; box-sizing: border-box;}
div#condition div.options a {width:25%; float:left; margin-right:6%; margin-bottom:6%; display:block; box-sizing:border-box;}
div#condition div.options a img {width:100%;}

div#friend div.options {padding-left:40%; padding-top:10%; padding-right:5%; box-sizing: border-box;}
div#friend div.options a{
	display: inline-block;
	width: 27%;
	padding: 2.5%;
	vertical-align: top;
}
div#friend div.options a img {width:100%;}

div#prop div.options {padding-left:40%; padding-top:10%; padding-right:5%; box-sizing: border-box;}
div#prop div.options a{
	display: inline-block;
	width: 27%;
	padding: 2.5%;
}
div#prop div.options a img {width:100%;}

div#background div.options {width:50%; left:auto; right:10%; padding-top:10%; padding-left:6%; box-sizing: border-box;}
div#background div.options a {width:40%; float:left; margin-right:6%; margin-bottom:6%; display:block; box-sizing:border-box;}
div#background div.options a img {width:100%;}

div.name div.options {width:50%; left:auto; right:10%; padding-top:10%; padding-left:6%; padding-right:6%; box-sizing: border-box;}
div.name #name {width: 85%; position: relative; top: -5%; font-family:'MuseoSansW01-Rounded900'; font-size:2.5vw; color:#fff; text-align: center;}
div.name div.options span {width:85%; margin-bottom:3%; display:block; box-sizing:border-box; background:url(../assets/imgs/name_plate.png) top left no-repeat; height:20%; background-size:100% 100%; color:#000; font-family:'MuseoSansW01-Rounded900'; font-size:3vw; text-decoration: none; text-align:center;padding-top: 6%;}
div.name div.options .refresh{position: absolute;right:14%;margin-top:-12%; width: 3vw; height: auto;}
div.name div.options .refresh:hover{cursor: pointer;}
div.name div.options .refresh[data-which="1"] {top: 46%;}
div.name div.options .refresh[data-which="2"] {top: 64%;}
div.name div.options .refresh[data-which="3"] {top: 82%;}

div#print div.options {width:47%; left:auto; right:10%; padding-top:10%; padding-left:6%; padding-right:6%; box-sizing: border-box;}
div#print div.poster_overlay {
  position:absolute;
  top:24%;
  left:10%;
  width:36%;
  height:49%;
  z-index: 5;
}
div#print div.poster_overlay img {width:100%; z-index:10; position:absolute;left:0%;}
div#print div.poster_overlay div.poster {
  width:90%; 
  height:65%;
  position:absolute; 
  top:20%; 
  left: 5%; 
  transform: rotate(-3.4deg);
  -webkit-transform: rotate(-3.4deg);
  z-index:5; 
  background-size:cover;
}
div#print div.poster_overlay div.poster div.character {left: 20%;}
div#print div.poster_overlay div.poster div.character img {bottom: 1%; left:20%;}
div#print div.poster_overlay div.name {
  transform: rotate(-3.4deg); 
  -webkit-transform: rotate(-3.4deg); 
  z-index:15; 
  font-family:'MuseoSansW01-Rounded900'; 
  font-size:1.2vw; 
  color:#fff; 
  text-align: center; 
  top:22%; 
  position:absolute; 
  width:100%;
}

#final-step-generate-assets img{
	width: 80%;
    z-index: 10;
    position: relative;
}

.ty_rivet_download {
    width: 16%;
    position: absolute;
    right: 12%;
    top: 86%;
    z-index: 7;
    display: none;
}
.ty_rivet_download img{
	width: 100%;
}
.ty-copy{
    width: 100%;
    position: relative;
    bottom: -49%;
    z-index: 6;
    left: -7%;
    display: none;
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
  #mobile {
    display: block;
  }
}


#end-options img {
  position: relative; 
}
  #end-options img:hover {
    top: -3px;
  }

#final-step-pre {
  
}
  #final-step-pre a {
    display: inline-block;
    margin-top: 28%;
  }

#final-step-post {
  display: none;
  z-index: 10;
  position: relative;
}
  #final-step-post .heading {
    width: 100%;
    height: auto;
  }
  #final-step-post ul {
    text-align: center;
  }
    #final-step-post li {
      display: inline-block;
    }
      #final-step-post li img {
        height: 3vw;
        width: auto;
        margin: 0 .2vw;
      }
  #end-options {
    padding: 5% 0;
  }

#final-step-loading {
  margin: 30% 0 0 0;
  display: none;
}
  #final-step-loading span{
    display: inline-block;
    font-family:'MuseoSansW01-Rounded900'; 
    font-size:3vw;
    color: #fff;
  }
    #final-step-loading span:after {
      overflow: hidden;
      position: absolute;
      display: inline-block;
      vertical-align: bottom;
      animation: ellipsis steps(4,end) 2400ms infinite;
      -moz-animation: ellipsis steps(4,end) 2400ms infinite;      
      -webkit-animation: ellipsis steps(4,end) 2400ms infinite;  
      -ms-animation: ellipsis steps(4,end) 2400ms infinite;  
      -o-animation: ellipsis steps(4,end) 2400ms infinite;  
      content: "\2026";
      width: 0px;
    }

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-moz-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-ms-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-o-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

.hoverzoom {
  -webkit-transition: transform 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition: transform 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.hoverzoom:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

/* MEDIA QUERIES */
@media (max-width: 1200px) {
	div.name div.options .refresh{
		bottom: 7%;
	}
}
@media (max-width: 820px) {
	.make-btn {
	    width: 60px;
	    left: 15px;
	    top: 15px;
	}
	.volume-btn {
	    top: 25px;
	    left: 71px;
	    width: 45px;
	    height: 45px;
	}
	.name .over img{
		width: 80%;
		padding-top: 2%;
	}
	div.name div.options .refresh {
	    bottom: 13%;
	    width: 25px;
	}
}
@media (max-width: 580px) {
	.make-btn {
	    width: 30px;
		left: 8px;
		top: 8px;
	}
	.volume-btn {
	    top: 8px;
		left: 37px;
		width: 30px;
		height: 30px;
	}
	div#expression div.options a{
		width: 48%;
	}
}
@media (max-width: 450px) {
	div.name div.options .refresh{
		bottom: 8%;
	}
}