*{
  margin:0;
  padding:0;
  outline:0;
  -webkit-backface-visibility:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-appearance:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
  box-sizing:border-box}
html{
  font-size:62.5%}
html,body{
  height:100%}
body{
  font-size:1.8rem;
  font-family:open sans,Arial,sans-serif;
  background:#dac4be;
  color:#303030}
a{
  color:#000;
  text-decoration:none}
.hidden{
  display:none}
iframe{
  border:none;
  width:0;
  height:0}
.wrapper{
  position:relative;
  text-align:center;
  min-height:100%;
  overflow:hidden;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
  flex-direction:column}
.bg-block{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  overflow:hidden}
.bg-block::after{
  content:"";
  display:block;
  position:fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:rgba(0,0,0,.2);
  z-index:1}
.bg-block video{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  height:100%}
video::-webkit-media-controls{
  display:none}
.panel-1{
  position:relative;
  z-index:4;
  width:100%;
  background:#040404 url(../img/top_panel0.png) 50% 0 no-repeat;
  background-size:320px 32px;
  height:32px}
.panel-2{
  position:relative;
  z-index:5;
  width:100%;
  background:rgba(0,0,0,.5) url(../img/bottom_panel0.png) 50% 0 no-repeat;
  background-size:320px 98px;
  height:98px}
.panel-2 .panel-inner{
  width:320px;
  margin:0 auto}
.small-photo{
  display:none;
  float:left;
  margin-top:3px;
  margin-left:20px;
  width:37px;
  height:37px;
  border-radius:10px;
  background-size:cover;
  border:solid 2px #fff}
.flash{
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:100%;
  height:100%;
  pointer-events:none}
.flash.active{
  background:#fff;
  -webkit-animation:flashAnimation .3s linear 1;
  animation:flashAnimation .3s linear 1;
  opacity:0}
@-webkit-keyframes flashAnimation{
  60%{
    opacity:0}
  61%{
    opacity:1}
  85%{
    opacity:0}
}
@keyframes flashAnimation{
  60%{
    opacity:0}
  61%{
    opacity:1}
  85%{
    opacity:0}
}
.btn-tap{
  margin:35px auto 0;
  width:42px;
  height:42px;
  border-radius:50%;
  background-color:#fff;
  box-shadow:inset 0 0 0 2px #111,0 0 0 4px #fff}
.step-block{
  position:relative;
  z-index:30;
  width:92%;
  -webkit-box-flex:1;
  -webkit-flex-grow:1;
  flex-grow:1;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  margin:1rem 0}
.step-item{
  display:none;
  width:100%}
.step-item-1{
  display:block}
.step-header{
  display:inline-block;
  position:relative;
  margin:5rem 0 1rem;
  padding:2rem;
  max-width:70rem;
  border-radius:1rem;
  background:#fff;
  border:.4rem solid #000;
  box-shadow:0 0 1.9rem rgba(0,0,0,.61)}
.step-description{
  color:#000;
  font-size:3rem;
  line-height:1}
.step-inner{
  max-width:70rem;
  margin:0 auto;
  text-align:center;
  padding-left:4rem}
@-webkit-keyframes fadeIn{
  0%,10%{
    opacity:0}
  100%{
    opacity:1}
}
@keyframes fadeIn{
  0%,10%{
    opacity:0}
  100%{
    opacity:1}
}
.question-block{
  background-color: rgba(0, 0, 0, 0.5);
    
    text-align: center;
    padding: 2rem 1.5rem;
    color: #fff;}
.question-title{
  font-size:2.1rem;
  font-weight:800;
  padding:0 0 .3rem}
.question-content{
  line-height:2rem}
.question-content p{
  padding:0 0 1rem}
.step-item-9 .question-content{
  font-size:1.4rem}
.question-notice{
  font-size:1.2rem;
  color:#474747}
.step-btn{
  position:relative;
  display:inline-block;
  margin:1.5rem;
  padding:.7rem 2rem;
  min-width:12.3rem;
  border-radius:.3rem;
  font-size:2.3rem;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 0 .7rem rgba(0,0,0,.91);
  -webkit-transition:background-color .2s linear;
  transition:background-color .2s linear;
  opacity:0;
  -webkit-animation-duration:1s;
  -webkit-animation-name:fadeIn;
  -webkit-animation-fill-mode:forwards;
  animation-duration:1s;
  animation-name:fadeIn;
  animation-fill-mode:forwards}
.step-btn:nth-of-type(1){
  -webkit-animation-delay:0ms;
  animation-delay:0ms}
.step-btn:nth-of-type(2){
  -webkit-animation-delay:300ms;
  animation-delay:300ms}
.yes-btn,.submit-btn{
  background: rgba(255,132,0,1);
background: -moz-linear-gradient(-45deg, rgba(255,132,0,1) 0%, rgba(173,32,175,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,132,0,1)), color-stop(100%, rgba(173,32,175,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,132,0,1) 0%, rgba(173,32,175,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,132,0,1) 0%, rgba(173,32,175,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,132,0,1) 0%, rgba(173,32,175,1) 100%);
background: linear-gradient(135deg, rgba(255,132,0,1) 0%, rgba(173,32,175,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8400', endColorstr='#ad20af', GradientType=1 );
border-radius: 64px 64px 64px 64px;
-moz-border-radius: 64px 64px 64px 64px;
-webkit-border-radius: 64px 64px 64px 64px;
border: 0px solid #000000;
  color:#fff}
.yes-btn:hover,.submit-btn:hover{
  background-color:#61caff}
.yes-btn:active,.yes-btn.active,.submit-btn:active,.submit-btn.active,{
  background-color:#0091d9}
.no-btn{
  background-color:#fff;
  color:#000}
.no-btn:hover{
  background-color:#f4f4f4}
.no-btn:active,.no-btn.active{
  background-color:#eee}
.checkbox-block{
  display:inline-block;
  width:26rem}
.step-item-8 .checkbox-block{
  width:18rem}
.checkbox-item{
  margin:1rem 0;
  position:relative;
  padding:0 0 0 2rem;
  text-align:left}
.step-item-5 .checkbox-item,.step-item-6 .checkbox-item{
  width:33.33%;
  display:inline-block;
  float:left}
.checkbox-item label{
  cursor:pointer;
  font-size:1.4rem!important;
  line-height:1;
  font-weight:100}
.checkbox-item label::before,.checkbox-item label::after{
  content:'';
  position:absolute}
.checkbox-item label::before{
  top:.5rem;
  left:0;
  margin:0;
  width:1.3rem;
  height:1.3rem;
  border-radius:.3rem;
  box-shadow:inset 0 0 0 .1rem #474747}
.checkbox-item label::after{
  top:.7rem;
  left:.2rem;
  margin:0;
  opacity:0;
  -webkit-transform:translate3d(-40px,0,0) scale(.5);
  transform:translate3d(-40px,0,0) scale(.5);
  -webkit-transition:opacity .25s ease-in-out,-webkit-transform .25s ease-in-out;
  transition:opacity .25s ease-in-out,transform .25s ease-in-out;
  width:.9rem;
  height:.9rem;
  border-radius:.2rem;
  background-color:#0af;
  box-shadow:0 0 0 .1rem #fff}
.checkbox-item input[type=checkbox]{
  position:absolute;
  top:0;
  left:-9999px;
  visibility:hidden}
.checkbox-item input[type=checkbox]:checked+label::after{
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  opacity:1}
@-webkit-keyframes warning-animation{
  0,100%{
    opacity:1}
  50%{
    opacity:0}
}
@keyframes warning-animation{
  0,100%{
    opacity:1}
  50%{
    opacity:0}
}
.warning-trigger{
  -webkit-animation-name:warning-animation;
  -webkit-animation-duration:500ms;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-iteration-count:2;
  animation-name:warning-animation;
  animation-duration:500ms;
  animation-timing-function:ease-in-out;
  animation-iteration-count:2}
@media(max-height:500px) and (min-width:400px){
  .bg-block video{
    width:100%;
    height:auto;
    min-height:100%}
}
.email-container{
  max-width:600px;
  margin:0 auto}