@import url("https://fonts.googleapis.com/css?family=Montserrat&subset=latin-ext");

.fadeInUp {
   animation: fadeInUp .4s forwards
}

@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translate3d(0, 2rem, 0)
   }
   to {
      opacity: 1;
      transform: translateZ(0)
   }
}

body {
   font-family: Montserrat, Arial, Helvetica, sans-serif;
   font-size: 16px;
   line-height: 1.4
}

h1, h2, h3, h4, h5, h6 {
   text-transform: uppercase
}

h1 {
   font-size: 3.4rem;
   line-height: 1
}

h2 {
   font-size: 2.2rem
}

h2, h3 {
   line-height: 1.1
}

h3 {
   font-size: 1.6rem
}

h4 {
   font-size: 1.4rem
}

h4, h5 {
   line-height: 1.1
}

h5 {
   font-size: 1.3rem
}

h6 {
   font-size: .9rem;
   line-height: 1.1
}

p {
   font-size: 1.6rem
}

h1, h2, h3, h4, h5, h6, li, p, span {
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .4), 0 1px 0 rgba(0, 0, 0, .4), -1px 0 0 rgba(0, 0, 0, .4), 1px 0 0 rgba(0, 0, 0, .4)
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none
}

html {
   font-size: 62.5%
}

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

body {
   overflow-x: hidden;
   min-width: 320px;
   min-height: 480px;
   background: #000;
   color: #fff;
   z-index: 0
}

body.minified {
   overflow: hidden
}

a {
   text-decoration: none
}

img {
   display: block;
   max-width: 100%;
   height: auto
}

ul {
   list-style-type: disc;
   margin-left: 2rem
}

ul li {
   font-size: 1.275rem;
   margin-bottom: .5rem;
   text-align: left
}

.clearfix:after {
   content: "";
   display: block;
   clear: both
}

.transition {
   transition: all .25s ease
}

.bg__content, .bg__item, .bgz, .gurl {
   background-size: cover;
   background-position: 50%;
   background-repeat: no-repeat
}

.t-center {
   text-align: center
}

.bg-primary {
   background-color: #000
}

.bg-accent {
   background-color: #fff
}

.c-primary {
   color: #000
}

.c-accent {
   color: #fff
}

.adult {
   position: fixed;
   left: 0;
   bottom: 0;
   padding: .75rem 0;
   z-index: 3;
   color: #fff;
   text-transform: uppercase;
   font-size: .875rem;
   -ms-flex-direction: column;
   flex-direction: column
}

.adult, .main {
   width: 100%;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center
}

.main {
   -ms-flex-pack: center;
   justify-content: center;
   overflow: hidden;
   padding-bottom: 1rem
}

.container, .main {
   position: relative;
   height: 100%;
   z-index: 1
}

.container {
   width: 100%;
   max-width: 50rem
}

.gurl {
   width: 100%;
   position: relative;
   max-width: 20rem;
   border-radius: 999rem
}

.gurl-mobile {
   display: block
}

.gurl-desktop {
   display: none
}

.gurl:after {
   content: "";
   display: block;
   padding-bottom: 100%
}

.btnbox {
   width: 100%;
   -ms-flex-direction: row;
   flex-direction: row
}

.btn, .btnbox {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
   justify-content: center;
   -ms-flex-align: center;
   align-items: center
}

.btn {
   width: 8rem;
   height: 8rem;
   padding: 0;
   margin: 0 1rem;
   color: #fff;
   font-size: 1.4rem;
   text-decoration: none;
   text-transform: uppercase;
   text-align: center;
   letter-spacing: .1rem;
   border-radius: 10rem;
   border: none;
   overflow: hidden;
   cursor: pointer;
   outline: none;
   background: #9255c7;
   background-image: linear-gradient(#6520a2 30%, #9255c7);
   box-shadow: 0 12px 6px -10px rgba(0, 0, 0, .8)
}

.btn:hover {
   box-shadow: 0 14px 14px -10px rgba(0, 0, 0, .5)
}

.btn:active {
   box-shadow: none
}

.btn--accent {
   opacity: .2 !important
}

.btn--block {
   width: 90%;
   height: 5.5rem;
   max-width: 24rem;
   margin: 0
}

.stepbox {
   position: relative;
   display: block;
   z-index: 1;
   overflow: hidden
}

.step, .stepbox {
   width: 100%;
   height: 100%
}

.step {
   position: absolute;
   left: 0;
   top: 0
}

.step__inner {
   position: relative;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-pack: end;
   justify-content: flex-end;
   padding: 1rem 1rem 5rem
}

.step__header {
   margin-bottom: 1rem
}

.step__body {
   margin-bottom: 2rem
}

.step:first-child .step__header {
   -ms-flex: 1;
   flex: 1;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center
}

.step:first-child h1 {
   margin-bottom: 1rem
}

.step {
   transform: translateY(200%)
}

.step__body, .step__footer, .step__header {
   position: relative;
   opacity: 0;
   transition: transform .25s ease 0s, opacity .25s ease 0s
}

.step__footer .btnbox a {
   position: relative;
   opacity: 0;
   transform: translateY(2rem)
}

.step__footer .btnbox a:first-child {
   transition: transform .25s ease .1s, opacity .25s ease .1s, box-shadow .25s ease 0s
}

.step__footer .btnbox a:nth-child(2) {
   transition: transform .25s ease 0s, opacity .25s ease 0s, box-shadow .25s ease 0s
}

.step.active {
   transform: translateY(0)
}

.step.active .step__body, .step.active .step__footer, .step.active .step__header {
   opacity: 1
}

.step.active .step__footer .btnbox a {
   opacity: 1;
   transform: translate(0)
}

.step.hidden .step__body, .step.hidden .step__footer, .step.hidden .step__header {
   opacity: 0
}

.bg {
   position: fixed !important
}

.bg, .bg:after {
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 0;
   display: block
}

.bg:after {
   content: "";
   position: fixed;
   background: rgba(0, 0, 0, .5)
}

.bg.blur .bg__content {
   filter: blur(4px)
}

.bg.blur .bg__content, .bg.blur .bg__content.active {
   transform: scale(1.2) translateY(0)
}

.bg__item {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   transform: translateY(100%);
   opacity: 0;
   transition: opacity .5s ease
}

.bg__item.active {
   transform: translateY(0);
   opacity: 1
}

.bg__content {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   transition: all .5s ease
}

.bg-mobile, .bg__content {
   display: block
}

.bg-desktop {
   display: none
}

@media screen and (min-width: 1024px) {
   .bg-mobile {
      display: none
   }
   
   .bg-desktop {
      display: block
   }
}

@media (min-width: 360px) {
   html {
      font-size: 75%
   }
}

@media (min-width: 768px) {
   html {
      font-size: 87.5%
   }
}

@media (min-width: 1300px) {
   html {
      font-size: 100%
   }
}

@media screen and (min-width: 768px) {
   .gurl {
      max-width: 25rem
   }
   
   .step:first-child .step__header {
      -ms-flex: 0;
      flex: 0;
      margin-bottom: 4rem
   }
   
   .step__inner {
      -ms-flex-pack: center;
      justify-content: center
   }
   
   .step__body, .step__header {
      margin-bottom: 2rem
   }
}

@media screen and (min-width: 1024px) {
   .gurl-mobile {
      display: none
   }
   
   .gurl-desktop {
      display: block
   }
}

@media screen and (min-width: 1280px) {
   .gurl {
      max-width: 22rem
   }
   
   .step:first-child .step__header {
      -ms-flex: 0;
      flex: 0;
      margin-bottom: 2rem
   }
}

@media screen and (min-width: 1920px) {
   .gurl {
      max-width: 24rem
   }
}

@media screen and (min-width: 2560px) {
   .gurl {
      max-width: 30rem
   }
}