@import "https://fonts.googleapis.com/css?family=Roboto:300,400,700";
*{
    margin:0;
    padding:0;
    
    box-sizing:border-box;
}
:focus{
    outline:0;
}
img{
    border:none;
    display:block;
}
ol,ul{
    list-style:none;
}
iframe{
    border:none!important;
    width:0!important;
    height:0!important;
}
a{
    text-decoration:none;
    cursor:pointer!important;
}
html{
    font-size:62.5%;
    -webkit-text-size-adjust:100%;
}
body{
    font-family:roboto,Arial,sans-serif;
    font-size:1.8rem;
    font-weight:400;
    line-height:1.3;
    background:#fff;
    color:#7b7b7e;
}
.wrapper{
    min-height:400px;
    min-width:760px;
    overflow:hidden;
}
.center{
    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;
    max-width:1280px;
    margin:0 auto;
}
.toggleDirection .center{
    flex-direction:row-reverse;
}
.content-block{
    position:relative;
    z-index:2;
    flex-grow:1;
}
.shapes-block{
    position:absolute;
    z-index:3;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    width:30rem;
    height:70rem;
    pointer-events:none;
}
.wrapper:not(.toggleDirection) .shapes-block{
    left:0;
}
.toggleDirection .shapes-block{
    right:6.5rem;
}
.reverseAnim .shapes-block{
    -webkit-animation:fadeOut 1s both;
    animation:fadeOut 1s both;
}
.shape-item{
    display:inline-block;
    position:absolute;
    top:0%;
    width:100%;
    height:100%;
}
.shape-item .shape{
    position:absolute;
    width:8rem;
    height:8rem;
    margin:-4rem 0 0 -4rem;
    background:url(shapes.png) 0 0 no-repeat;
    background-size:48rem 8rem;
    top:50%;
    left:50%;
    -webkit-transform:translateX(-15rem);
    transform:translateX(-15rem);
    will-change:transform;
}
.shape-item-2{
    height:50%;
    -webkit-transform:rotateZ(-30deg);
    transform:rotateZ(-30deg);
}
.shape-item-3{
    -webkit-transform:rotateZ(30deg);
    transform:rotateZ(30deg);
}
.shape-item-4{
    height:45%;
    -webkit-transform:rotateZ(-50deg);
    transform:rotateZ(-50deg);
}
.shape-item-5{
    -webkit-transform:rotateZ(50deg);
    transform:rotateZ(50deg);
}
.shape-item-6{
    height:40%;
    -webkit-transform:rotateZ(60deg);
    transform:rotateZ(60deg);
}
.shape-item-1 .shape{
    background-position:0 0;
    -webkit-animation:movingShape 12s 0s linear infinite;
    animation:movingShape 12s linear 0s infinite;
}
.shape-item-2 .shape{
    background-position:-8rem 0;
    -webkit-animation:movingShape 8s 0s linear infinite;
    animation:movingShape 8s 0s linear infinite;
}
.shape-item-3 .shape{
    background-position:-16rem 0;
    -webkit-animation:movingShapeReverce 10s 0s linear infinite;
    animation:movingShapeReverce 10s 0s linear infinite;
}
.shape-item-4 .shape{
    background-position:-24rem 0;
    -webkit-animation:movingShapeReverce 20s 0s linear infinite;
    animation:movingShapeReverce 20s 0s linear infinite;
}
.shape-item-5 .shape{
    background-position:-32rem 0;
    -webkit-animation:movingShapeReverce 16s 0s linear infinite;
    animation:movingShapeReverce 16s 0s linear infinite;
}
.shape-item-6 .shape{
    background-position:-40rem 0;
    -webkit-animation:movingShapeReverce 14s 0s linear infinite;
    animation:movingShapeReverce 14s 0s linear infinite;
}
.step-block{
    position:relative;
    z-index:4;
    padding:2.5rem;
    padding-left:15rem;
}
.step-item{
    display:none;
}
.step-item.visible{
    display:block;
}
.step-header,.step-inner,.buttons-block{
    -webkit-animation:zoomIn .5s both;
    animation:zoomIn .5s both;
}
.step-header{
    font-weight:700;
    margin:0 0 3rem;
    text-transform:uppercase;
    line-height:1.2;
    font-size:4.4rem;
    color:#000;
    -webkit-animation-delay:0s;
    animation-delay:0s;
}
.step-header span{
    display:block;
}
.step-inner{
    margin:0 0 3rem;
    font-size: 2.5rem;
}
.step-inner,.buttons-block{
    -webkit-animation-delay:.5s;
    animation-delay:.5s;
}
.reverseAnim .step-header,.reverseAnim .step-inner,.reverseAnim .buttons-block{
    -webkit-animation-name:fadeOut;
    -webkit-animation-delay:0s;
    animation-name:fadeOut;
    animation-delay:0s;
}
.question-notice{
    text-transform:uppercase;
    font-size:1.8rem;
    color:#666;
    margin-bottom:1.5rem;
}
.checkbox-block{
    max-width:450px;
    margin:0 0 2rem;
}
.checkbox-item{
    position:relative;
    padding:1rem 1rem 1rem 5rem;
    text-align:left;
    line-height:2.5rem;
    cursor:pointer;
    transition:all .3s linear;
}
.checkbox-item-error{
    background-color:#ffccd6
}
.checkbox-item:before{
    content:"";
    position:absolute;
    width:2.5rem;
    height:2.5rem;
    border-radius:5px;
    border:3px solid #3b78d2;
    color:#7b7b7e;
    top:.7rem;
    left:.5rem;
    z-index:1;
    line-height:2.2rem;
    font-weight:700;
    font-size:2rem;
    text-align:center;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    background-color:#fff;
}
.checkbox-item.checked:before{
    background-color:#3b78d2;
}
.checkbox-block.two-cols{
    display:flex;
    flex-wrap:wrap;
}
.two-cols .checkbox-item{
    width:50%;
}
.buttons-block{
    display:flex;
}
.step-btn{
    display:block;
    min-width:15.5rem;
    height:5.2rem;
    line-height:5.2rem;
    padding:0 2rem;
    cursor:pointer;
    transition:all .3s linear;
    border-radius:2.6rem;
    background-color:#ff3c4d;
    box-shadow:0 .8rem .6rem rgba(255,60,77,.24);
    text-transform:uppercase;
    text-align:center;
    font-size:2rem;
    font-weight:300;
    color:#fff;
}
.step-btn:hover{
    background:#ff5664;
}
.step-btn:active{
    background:#b52b37;
}
.yes-btn,.no-btn{
    width:25%;
}
.no-btn{
    margin-left:2rem;
    background-color:#fdf4f5;
    color:#ff3c4d;
}
.no-btn:hover{
    background:#fff;
}
.no-btn:active{
    background:#f3c0c6;
}
.submit-btn{
    text-transform:uppercase;
}
.slider-block{
    position:relative;
    flex-shrink:0;
    width:68rem;
    height:75.2rem;
}
.slider-item{
    width:83rem;
    height:100%;
    position:absolute;
    top:0;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    opacity:0;
    will-change:transform;
}
.slider-item.active{
    opacity:1;
}
.slider-item.item-1.preload{
    background-image:url(photo11.jpg);
}
.slider-item.item-2.preload{
    background-image:url(photo12.jpg);
}
.slider-item.item-3.preload{
    background-image:url(photo13.jpg);
}
.slider-item.item-4.preload{
    background-image:url(photo14.jpg);
}
.slider-item.item-5.preload{
    background-image:url(photo15.jpg);
}
.slider-item.item-6.preload{
    background-image:url(photo16.jpg);
}
.slider-item.item-7.preload{
    background-image:url(photo17.jpg);
}
.wrapper:not(.toggleDirection) .slider-item{
    left:0;
    -webkit-transform:translateX(200%);
    transform:translateX(200%);
    -webkit-animation:slide-inRightToLeft .5s forwards;
    animation:slide-inRightToLeft .5s forwards;
}
.wrapper:not(.toggleDirection).reverseAnim .slider-item{
    -webkit-transform:translateX(-200%);
    transform:translateX(-200%);
    -webkit-animation:slide-outRightToLeft .5s forwards;
    animation:slide-outRightToLeft .5s forwards;
}
.toggleDirection .slider-item{
    right:0;
    -webkit-transform:translateX(-200%);
    transform:translateX(-200%);
    -webkit-animation:slide-inRightToLeft .5s forwards;
    animation:slide-inRightToLeft .5s forwards;
}
.toggleDirection.reverseAnim .slider-item{
    -webkit-transform:translateX(200%);
    transform:translateX(200%);
    -webkit-animation:slide-outLeftToRight .5s forwards;
    animation:slide-outLeftToRight .5s forwards;
}
@-webkit-keyframes fadeOut{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@keyframes fadeOut{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@-webkit-keyframes movingShape{
    from{
        -webkit-transform:rotate(0deg) translate(-350%) rotate(0)
    }
    to{
        -webkit-transform:rotate(360deg) translate(-350%) rotate(-360deg)
    }
}
@keyframes movingShape{
    from{
        transform:rotate(0deg) translate(-350%) rotate(0)
    }
    to{
        transform:rotate(360deg) translate(-350%) rotate(-360deg)
    }
}
@-webkit-keyframes movingShapeReverce{
    from{
        -webkit-transform:rotate(0deg) translateX(-350%) rotate(0)
    }
    to{
        -webkit-transform:rotate(-360deg) translateX(-350%) rotate(360deg)
    }
}
@keyframes movingShapeReverce{
    from{
        transform:rotate(0deg) translateX(-350%) rotate(0)
    }
    to{
        transform:rotate(-360deg) translateX(-350%) rotate(360deg)
    }
}
@-webkit-keyframes zoomIn{
    0%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
    50%{
        opacity:1
    }
}
@keyframes zoomIn{
    0%{
        opacity:0;
        transform:scale(.3)
    }
    50%{
        opacity:1
    }
}
@-webkit-keyframes slide-inRightToLeft{
    0{
        -webkit-transform:translateX(200%)
    }
    100%{
        -webkit-transform:translateX(0%)
    }
}
@keyframes slide-inRightToLeft{
    0{
        transform:translateX(200%)
    }
    100%{
        transform:translateX(0%)
    }
}
@-webkit-keyframes slide-outRightToLeft{
    0%{
        -webkit-transform:translateX(0%)
    }
    100%{
        -webkit-transform:translateX(200%)
    }
}
@keyframes slide-outRightToLeft{
    0%{
        transform:translateX(0%)
    }
    100%{
        transform:translateX(200%)
    }
}
@-webkit-keyframes slide-outLeftToRight{
    0%{
        -webkit-transform:translateX(0%)
    }
    100%{
        -webkit-transform:translateX(-200%)
    }
}
@keyframes slide-outLeftToRight{
    0%{
        transform:translateX(0%)
    }
    100%{
        transform:translateX(-200%)
    }
}

/* Smaller Desktop */
@media screen and (min-width: 1024px) and (max-width:1600px){
    html{
        font-size:55%;
    }
    .step-header{
        font-size:4rem;
    }
    .step-block{
        min-width:360px;
        padding:2rem;
    }
    .small-padding-left{
    	margin-left: 10%;
    }
    .small-padding-right{
    	margin-right: 15%;
    }
}

/* iPad */ 
@media all and (device-width: 768px) and (device-height: 1024px) {
    html{
        font-size:48%
    }
    .wrapper{
        min-width:0;
    }
    .center{
        flex-direction:column-reverse!important;
        justify-content:flex-end;
        align-items:stretch;
        padding:2rem 0 0;
    }
    .content-block{
        position:static;
    }
    .shapes-block{
        overflow:hidden;
        width:100%;
        height:100%;
        left:0;
        right:0;
    }
    .step-block{
        min-width:0;
        padding:2.5rem;
    }
    .step-header{
        margin:0 0 2rem;
        font-size:3rem;
        text-align:center;
    }
    .question-notice{
        text-align:center;
    }
    .slider-block{
        width:83vw;
        height:75vw;
        margin:0 auto;
        margin-top: 15%;
    }
    .slider-item{
        width:100%;
        height:100%;
    }
    .yes-btn,.no-btn,.step-btn{
        width:100%;
    }
    .checkbox-block{
        display:flex;
        flex-wrap:wrap;
        font-size: 15px;
    }
    .checkbox-item{
        flex:0 1 50%
    }
    .step-inner{
    	font-size:3rem;
    	text-align: center;
	}
}

@media only screen and (min-width: 481px) and (max-width: 1366px) and (orientation:portrait) {
    html{
        font-size:60%
    }
    .wrapper{
        min-width:0;
    }
    .center{
        flex-direction:column-reverse!important;
        justify-content:flex-end;
        align-items:stretch;
        padding:2rem 0 0;
    }
    .content-block{
        position:static;
    }
    .shapes-block{
        overflow:hidden;
        width:100%;
        height:100%;
        left:0;
        right:0;
    }
    .step-block{
        min-width:0;
        padding-left: 0;
    }
    .step-header{
        margin:0 0 2rem;
        font-size:3rem;
        text-align:center;
    }
    .question-notice{
        text-align:center;
    }
    .slider-block{
        width:83vw;
        height:75vw;
        margin:0 auto;
        margin-top: 15%;
    }
    .slider-item{
        width:100%;
        height:100%;
    }
    .yes-btn,.no-btn,.step-btn{
        width:100%;
    }
    .checkbox-block{
        display:flex;
        flex-wrap:wrap;
        font-size: 15px;
    }
    .checkbox-item{
        flex:0 1 50%
    }
    .step-inner{
    	font-size:3rem;
    	text-align: center;
	}
	.small-padding-left {
		padding-left: 5%;
		margin-left: 0;
	}
	.small-padding-right {
		padding-left: 5%;
		margin-right: 0;
	}
}

@media only screen and (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
    html{
        font-size:48%
    }
    .wrapper{
        min-width:0;
    }
    .step-block{
        min-width:0;
        padding:2.5rem;
    }
	.item-1 {
		margin-left: -7%;
	}
	.item-2 {
		margin-right: -10%;
	}
	.item-3 {
		margin-left: -7%;		
	}
}

/*Mobile Query*/
@media only screen and (max-width: 480px) {
    html{
        font-size:48%
    }
    .wrapper{
        min-width:0;
    }
    .center{
        flex-direction:column-reverse!important;
        justify-content:flex-end;
        align-items:stretch;
        padding:2rem 0 0;
    }
    .content-block{
        position:static;
    }
    .shapes-block{
        overflow:hidden;
        width:100%;
        height:100%;
        left:0;
        right:0;
    }
    .step-block{
        min-width:0;
        padding:2.5rem;
    }
    .step-header{
        margin:0 0 2rem;
        font-size:3rem;
        text-align:center;
    }
    .question-notice{
        text-align:center;
    }
    .slider-block{
        width:83vw;
        height:75vw;
        margin:0 auto;
        margin-top: 15%;
    }
    .slider-item{
        width:100%;
        height:100%;
    }
    .yes-btn,.no-btn,.step-btn{
        width:100%;
    }
    .checkbox-block{
        display:flex;
        flex-wrap:wrap;
        font-size: 15px;
    }
    .checkbox-item{
        flex:0 1 50%
    }
    .step-inner{
    	font-size:3rem;
    	text-align: center;
	}
}