@import "https://fonts.googleapis.com/css?family=Open+Sans:400,700,800";
@import "https://fonts.googleapis.com/css?family=Boogaloo:400";
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box}
a{
  text-decoration:none;
  cursor:pointer !important}
ul li{
  list-style:none}
html{
  font-size:62.5%;
  -webkit-text-size-adjust:100%}
img{
  border:none;
  vertical-align:middle;
  max-width:100%}
p{
  margin-bottom:1rem}
body{
  font-family:'Open Sans', Arial, sans-serif;
  font-size:1.8rem;
  min-width:320px;
  line-height:1.3;
  color:#fff;
  background:#000;
  overflow:hidden;
  height:100%}
:focus{
  outline:0}
.step-box{
  padding-top:8rem}
.step{
  display:none;
  margin:0 auto;
  max-width:960px;
  width:90%;
  position:relative;
  vertical-align:middle;
  text-align:center}
.step.visible{
  display:inline-block}
.step.step1{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-align:stretch;
  -ms-flex-align:stretch;
  align-items:stretch;
  font-weight:800;
  text-align:left}
.step1 .step-content{
  width:46%}
.logo-text{
  font-size:4rem;
  margin:1.5rem 0 10rem}
.slogan{
  line-height:1;
  font-size:7.2rem;
  color:#ff6710}
.slogan span{
  display:block}
.slogan .white{
  color:#fff}
.collage{
  width:54%;
  position:relative}
.collage-item{
  border-radius:0.6rem;
  border:0.4rem solid #ff6710;
  position:absolute;
  -webkit-box-shadow:-1px 1px 10px 0 rgba(0,0,0,0.4);
  box-shadow:-1px 1px 10px 0 rgba(0,0,0,0.4);
  -webkit-transition:all 0.6s ease-out;
  -o-transition:all 0.6s ease-out;
  transition:all 0.6s ease-out}
.collage-item.item1{
  z-index:4;
  left:-20vw;
  top:-100vh;
  -webkit-transition-delay:0.1s;
  -o-transition-delay:0.1s;
  transition-delay:0.1s}
.collage-item.item2{
  z-index:6;
  left:50%;
  top:-100vh;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  transition-delay:0.4s}
.collage-item.item3{
  z-index:4;
  right:-20vw;
  top:-100vh;
  transition-delay:0.2s}
.collage-item.item4{
  z-index:1;
  bottom:-100vh;
  left:-15vw;
  transition-delay:0.3s}
.collage-item.item5{
  z-index:5;
  left:50%;
  top:100vh;
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  transform:translateX(-50%);
  transition-delay:0.5s}
.collage-item.item6{
  z-index:1;
  bottom:-100vh;
  right:-30vw}
.collage-item.item1.animated{
  left:0;
  top:8%}
.collage-item.item2.animated{
  z-index:6;
  left:50%;
  top:40%}
.collage-item.item3.animated{
  right:0;
  top:8%}
.collage-item.item4.animated{
  bottom:15%;
  left:-10%}
.collage-item.item5.animated{
  left:50%;
  top:55%}
.collage-item.item6.animated{
  bottom:15%;
  right:-10%}
.step-title{
  color:#ff6710;
  font-size:2.7rem;
  font-weight:800;
  margin:2rem 0 4rem}
.options{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap}
.option{
  margin-top:1rem;
  position:relative;
  cursor:pointer;
  width:24%}
.option img{
  width:100%;
  transition:all 0.2s linear;
  border:0.3rem solid transparent}
.option:hover img{
  -webkit-box-shadow:0 0 40px 3px rgba(255,255,255,0.5);
  box-shadow:0 0 40px 3px rgba(255,255,255,0.5)}
.option.selected img{
  border:0.3rem solid #ff6710}
.option .name{
  display:block;
  transition:all 0.2s linear;
  font-size:2rem;
  text-align:center;
  margin:1rem 0}
.option.selected .name,.option:hover .name{
  color:#ff6710}
.btn-block{
  margin:3rem auto 2rem}
.step1 .btn-block{
  text-align:left}
.btn{
  color:#fff;
  display:inline-block;
  text-transform:uppercase;
  transition:all 0.2s linear;
  font-family:'Boogaloo', Arial, sans-serif;
  font-size:2.4rem;
  margin:0 2rem;
  font-weight:700}
.btn:hover{
  color:#10ff53;
  border-color:#10ff53}
.btn-ok{
  font-size:2.2rem;
  margin:0;
  border:3px solid #fff;
  padding:0.5rem 1rem;
  border-radius:1rem}
@media (max-width:960px),(max-height:700px){
  html{
    font-size:45%}
  body{
    overflow:auto}
  .step-box{
    padding-top:4rem}
  .logo{
    max-width:200px}
  .logo-text{
    margin-bottom:3rem}
  .slogan{
    font-size:5rem}
  .step.step1{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-flow:column wrap;
    flex-flow:column wrap;
    text-align:center}
  .step1 .btn-block{
    text-align:center}
  .step1 .step-content,.collage{
    width:100%}
  .collage{
    max-width:500px;
    -ms-flex-item-align:center;
    align-self:center}
  .collage-item{
    position:static;
    -webkit-transform:none !important;
    -ms-transform:none !important;
    transform:none !important}
  .collage-item.item1,.collage-item.item3,.collage-item.item5{
    width:30%;
    display:inline-block}
  .collage-item.item2,.collage-item.item4,.collage-item.item6{
    width:90%;
    max-width:400px;
    margin:1rem auto;
    display:block}
  .btn-ok{
    font-size:3rem}
}
@media (max-width:600px){
  .step-box{
    padding-top:1rem}
  .logo{
    max-width:140px}
  .option{
    width:44%}
  .option img{
    max-width:80px}
  .slogan{
    font-size:4rem}
  .slogan span{
    display:inline-block}
}