@font-face {
    font-family: Satisfy;
    src: url(../fonts/Satisfy-Regular.ttf);
}


body,html, .start{
	font-family: 'Lato', sans-serif;
}


.overlay{
	background:rgba(0,0,0,0.8);
	width:100%;height:100%;
	position:fixed;
	z-index:99;
	display:none;
}
.overlay .wrap{
	position:absolute;
	height:100%;
	display:flex;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
	justify-content: center;
	align-items: center;
}
.overlay .box{
	background:url(../img/bg.png) no-repeat;
	background-size:cover;
	background-position:center center;
	max-width:500px;
	text-align:center;
	color:#fff;
	position:relative;
}
.overlay .box .border .padding{
	padding:50px;
}
.overlay .box .border{
	background:url(../img/border.png) no-repeat;
	background-size: 100% 100%;
	padding:15px 0px;
}
.overlay .box h2{
	font-weight:normal;
	font-size:26px;
}
.overlay .box .btn{
    display: inline-block;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 25px;
    width: 80%;
    background: linear-gradient(to top, #316a01, #76ff03);
    text-align: center;
    padding: 5px 0;
    border-radius: 10px;
    border: none;
    margin-top:25px;	
    margin-bottom:5px;
}
.overlay .box .icon{
	position:absolute;
	top:-30px;
	right:-35px;
	transform: rotate(25deg);
	width:120px;
}


.clear{
	clear:both;
}

.bg{
	background:url(../img/bg_thr.jpg) top center fixed no-repeat;
	width:100%;height:100%;
	background-size:250%;
	position:fixed;
	z-index:-1;
}

.head{
	height:20%;
	padding-top:20px;
}
.head h2{
	background:url(../img/header_bg.png) no-repeat;
	width:100%;
	padding:10px;
	font-size:20px;
	background-position:center;
    background-size: 100% 100%;	
	text-align:center;
	color:#fff;
	text-transform: uppercase;
	margin:0;
	letter-spacing: 2px;
}

.head .madam_content{
	display:flex;
	flex-direction: row;
}
.head .left{
	width:60%;
}
.head .left .madam{
	float:left;
}
.head .left .madam_text{
	color:#fff;
	position:relative;
}
.head .left .madam_text span{
	display:block;
	position:absolute;
	left:180px;
	width:320px;
	top:48px;
}
.head .left .talk{
	position:absolute;
	left:90px;
	top:30px;
}

.head .right{
	width:40%;
	align-self: center;
}


.video_logo{
	text-align:center;
	padding:25px;
}


.content .box{
	padding:25px;
	background:linear-gradient(to right, rgba(69, 3, 111, 0.8) 0px, rgba(141, 68, 153, 0.8) 50%, rgba(69, 3, 111, 0.8) 100%)!important;
	border:1px solid #fff;
}
.content .first.box{
	padding:50px 100px;
	margin:70px 0px;
}

.content{
	text-align:center;
	height: 65%;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding:30px 0px;
}
.content .card_box{
	display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 3%;
}
.content .card{
	margin: 0 10px;
    position: relative;
    cursor:pointer;
}
.content .card_text{
	position: absolute;
    top: 49%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.content .card_mid{
	margin-left:25px;
	margin-right:25px;
}

.content .form{
	width:480px;
	margin:0 auto;
}

.content .second{
	width:100%;
	margin:0 auto;
}
.content .third{
	width:990px;
}
.content .third .border{
	padding:115px 20px;
}
.content .third .border h2{
	font-size:40px;
}
.content .third .border span{
	font-size:16px;
}
.content .second .image{
	margin-top:15px;
	margin-bottom:25px;
}
.content .second .image h3{
	color:#fff;
	font-weight:900;
	font-size:24px;

}
.content .second .image img{
	border-radius:15px;
	width:250px;
}
.content .second .radio_cont{
	width:50%;
	float:left;
	position:relative;
	font-size:12px;
	cursor:pointer;
}
.content .second .anred{
	background:#fff;
	border-radius:5px;
	
}
.content .second .anred label .fa{
	float:right;
	font-size:19px;
	font-weight:900;
}
.content .second .anred label{
	width:100%;
	padding:12px;
	color:#000;
}
.content .second input[type="radio"]{
	position:absolute;
	opacity: 0;
}
.content .second input[type="radio"]:checked ~ .anred{
	background:linear-gradient(to top, #316a01, #76ff03);
}
.content .second input[type="radio"]:checked ~ .anred label{
	color:#fff;
}
.content form .anrede label{
	display:block;
}
.content .border{
    background-image: url(../img/border.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 45px 20px;
    width: 100%;
    color:#fff;
    margin-bottom:25px;
}
.content .border h2{
	margin-top:0;
    font-family: 'Satisfy', serif;	
}
.content .border .check{
	width:70%;
	text-align:left;
	margin:0 auto;
	margin-top:15px;
}
.content .border .check.last{
	width:80%;
	margin:0 auto;
	text-align:center;
	margin-top:15px;
}
.content .border .check.last span{
	width:100%;
	float:none;
}
.content .border .check img{
	float:left;
}
.content .border .check span{
	width:80%;
	float:left;
}
.content .form{
	color:#fff;
	text-align:left;
}



.content .third .thanksbtn{
	width:80%;
	margin:0 auto;
	cursor:pointer;
	display:none;
}
.content .third .thanksbtn .btn{
	background:#ffff33;
	border:5px solid #ffa633;
	width:100%;
	padding:25px;
	font-size:30px;
	font-weight:900;
	color:#000;
	border-radius:5px;
	cursor:pointer;
	outline:none!important;
	margin-top:20px;
	text-transform: uppercase;
}


.clock{
	width:300px;
	margin:0 auto;
	margin-top:25px;
	margin-bottom:40px;	
}


.flip-clock-wrapper .flip {
  height: 50px;
  width: 40px;
  margin: 1px; }

.flip-clock-divider {
  height: 50px; }

.flip-clock-wrapper ul li {
  line-height: 50px; }

.flip-clock-wrapper ul li a div div.inn {
  font-size: 40px; }

.flip-clock-divider .flip-clock-label {
  top: 60px;
  right: -64px;
  color: #fff;
  font-size: 12px;
  font-family: 'Bebas Neue Regular', sans-serif;
  letter-spacing: 1px; }

.flip-clock-divider.minutes .flip-clock-label {
  right: -63px; }

.flip-clock-divider.seconds .flip-clock-label {
  right: -67px; }


.second, .third{
	display:none;
}




.footer{
	padding-top:20px;
	height:10%;
	text-align:center;
	margin-bottom:50px;
	color:#fff;
}
.footer_content{
    padding: 10px 30px;	
	color:#fff;
	font-size:12px;
}
.footer a{
	color:#fff;
	text-decoration: underline;
	display:inline-block;
	margin-left:15px;
	margin-right:15px;
	font-size:16px;
}


.mobile{
	display:none;
}



.thanks_bg{
	background:url(../img/bg_thr.jpg) top center fixed no-repeat;
	width:100%;height:100%;
	background-size:250%;
	position:absolute;
	z-index:-1;
}



.step{
	display:none;
}
.bg{
	background:url(../img/bg_thr.jpg) top center fixed no-repeat;
	width:100%;height:100%;
	background-size:250%;
}
.step .head{
	text-align:center;
	padding:30px;
}
.step .head img{
	width:390px;
}
.step .box{
	background:linear-gradient(to right,rgba(69,3,111,0.8) 0,rgba(141,68,153,0.8) 50%,rgba(69,3,111,0.8) 100%);
	padding:25px;
	color:#fff;
    box-shadow: 0 0 20px 5px rgba(0,0,0,0.8);
    border-radius:5px;
    margin-bottom:45px;
}
.step .box h2{
	margin:0;
	font-weight:900;
}
.step .box .checkmark{
	margin-top:20px;
	margin-bottom:20px;
	font-size:20px;
}
.step .box .check{
	float:left;
	width:40px;
	height:40px;
	margin-right:15px;
	background:#fff;
	color:#d89f34;
}
.step .box .check .fa{
	font-size:40px;
}
.step .box.one .checkmark{
	margin-top:20px;
	margin-bottom:20px;
	font-size:20px;
	height:59px;
}
.step .box.one .checkmark .text{
	width:90%;
	padding-top:5px;
}
.step .box.one .checkmark .text span b{
	background: #fff;
    color: #d89f34;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 20px;
    margin-left: 15px;
}
.step .box .step_btn{
	width:448px;
	margin:0 auto;
	display:block;
	text-align:center;
}
.step .box .endprice{
	background:#fff;
	padding:15px;
	width:100%;
	color:#000;
	text-align:center;
	border-radius:5px;
	margin:0;
}

.step .box .left{
	width:50%;
	float:left;
	padding-right:15px;
	padding-top:25px;
}
.step .box .left img{
	width:50%;
	margin:-2px;
	padding:10px;
}
.step .box .left video{
	width:100%;
}
.step .box .right{
	width:50%;
	float:left;
	padding-left:15px;
	padding-top:0px;
}
.step .box ul{
	font-size:25px;
}
.step .box ul li{
	margin-top:15px;
}

.step .box .user{
	width:50%;
	padding:15px;
	float:left;
}
.step .box .user img{
	width:35%;
	float:left;
	padding-right:10px;
}
.step .box .user .text{
	width:65%;
	float:left;
	padding-left:10px;
	font-size:14px;
}
.step .box .user .name{
	display:block;
	text-align:right;
	font-style: italic;
	margin-top:15px;
}

.step .box .head_images img{
	width:33.333333%;
	margin:-2px;
	margin-bottom:25px;
	border-radius:10px;
	padding:5px;
}




.step_btn{
	width:100%;
}

.content .card{
	margin-bottom:15px;
}

.modal{
	z-index:999999999;
}


@media only screen and (max-width:480px){
	
	html, body, .start{
		height: auto;
		overflow: scroll;
	}
	
	.thanks_bg{
		background-size:550%;
		position:fixed;
	}
	.step.thanks .box{
		margin-left:15px;
		margin-right:15px;
		padding:25px;
	}
	
	.overlay .box{
		max-width:90%;
	}
	.overlay .box img{
		width:100%;
	}
	.overlay .box .icon{
		top: -23px;
	    right: -18px;
	    transform: rotate(18deg);
	    width: 90px;
	}
	.overlay .box .btn{
		width:100%;
	}
	.overlay .box h2{
		font-size:22px;
	}
	.overlay .box .border .padding{
		padding:25px 40px;
	}
	
	.bg{
		background-size: 450%;
	}
	
	.content .first.box{
		padding:25px 0px;
	}
	.content .second.box{
		margin-top:25px;
	}
	.content .box{
		padding:15px;
	}
	
	.first{
		width:100%;
	}
	.head{
		padding:15px;
		height:30%;
		padding-bottom:0;
	}
	.head h2{
		font-size:17px;
	}
	.head .left{
		width:100%;
		margin-top:15px;
	}
	.head .left .talk{
		width: 270px;
		height: 70px;
		top:10px;
		left:70px;
	}
	.head .left .madam_text span{
		left:132px;
		width:200px;
		font-size:12px;
		top:21px;
	}
	.head .left .madam img{
		width:220px;
	}
	.head .right{
		width:100%;
		float:none;
	}
	.desktop{
		display:none;
	}
	.mobile{
		display:block;
	}
	.head .mobile{
		width:200px;
		margin:0 auto;
		margin-top:10px;
		margin-bottom:-20px;
	}
	.head .madam_content{
		display:inline-block;
		flex-direction: inherit;
		width:100%;
	}
	.head .right{
		align-self: auto;
		text-align:center;
	}
	.head .right img{
		margin-top:15px;
		margin-bottom:15px;
	}
	
	.content{
		margin: 15px 0;
	    height: 50%;
	    flex-direction: column;
		margin-top:0px;
	}
	.content .card_mid{
		width:70px;
		margin:0;
	}
	.content .card_box{
	    width: 375px;
		margin: 0 auto;
	}
	.content .card_img{
		width:133px;
	}
	
	.content .second{
		width:100%;
	}
	.content .border .check{
		width:80%;
	}
	.content .border .check span{
		width:85%;
	}
	.content form{
		padding:10px;
		margin-top:-20px;
	}
	.content .border{
		margin-bottom:10px;
	}
	.content .second .image img{
		width:190px;
	}

	
	.content .third{
		width:100%;
		margin-top:40px;
		margin-bottom:40px;
	}
	.content .third h2{
		font-size:28px;
	}
	.content .third video{
		width:100%;
	}
	.content .third .thanksbtn img{
		width:100%;
	}
	
	.video_logo img{
		width:100%;
	}
	
	
	
	.step{
		background-size: 480%;
	}
	.step .head{
		padding:20px;
	}
	.step .head img{
		width:100%;
	}
	
	.step .box{
		padding:10px;
	}
	.step .box.one h3{
		font-size:20px;
	}
	.step .box.one h2{
		font-size:30px!important;
	}
	.step .box .head_images img{
		margin-bottom:5px;
	}
	.step .box h2{
		font-size:18px;
	}
	.step .box .checkmark .text{
		font-size:15px;
	}
	.step .box .check .fa{
		font-size:30px;
	}
	.step .box .check{
		width:30px;
		height:30px;
	}
	.step .box .checkmark .text{
		width:100%;
	}
	.step .box .checkmark .text.firstext{
		padding-top:0;
		margin-bottom:-13px;
	}
	.step .box .step_btn{
		width:85%;
		margin-bottom:15px;
	}
	.step .box .left, .step .box .right{
		width:100%;
		padding:0;
	}
	.step .box ul{
		font-size:14px;
	}
	.step .box .right{
		padding-top:15px;
	}
	.step .box .right h2{
		margin-left:15px;
	}
	.step .box .user{
		width:100%;
	}
	.step .box .user{
		margin-bottom:25px;
	}
	.step .box.three .step_btn{
		margin-top:-25px;
	}
	.step .box.one .checkmark{
		margin-bottom:25px;
		height:79px;
	}
	.step .box.one .checkmark .text span b {
	    background: #fff;
	    color: #d89f34;
	    padding: 6px 12px;
	    border-radius: 5px;
	    font-size: 11px;
	    margin-left: 45px;
	    display: block;
	    width: 110px;
	    text-align: center;
	    margin-top: 5px;
	}
	
	
	
	.content .first.box{
		margin:0;
	}
	.footer_content{
		padding:10px;
	}
	.footer .footer_content a{
		margin-left:10px;
		margin-right:10px;
		font-size:14px;
	}
	.content .form{
		width:100%;
	}
	
	
	.geb_box .step_btn{
		margin-top:-25px;
	}
	.mobile img{
		margin-top:25px;
		margin-bottom:25px;
	}
	.content .card{
		margin:0;
		margin-bottom:15px;
	}
		
}
@media only screen and (max-width:320px){
	.content .card_img{
		width:105px;
	}
	.head .left .madam img{
		width:140px!important;
	}
	.head .left .talk{
		left:30px;
	}
	.head .left .madam_text span{
		left:92px;
	}
	.content .card_box{
		width:100%;
		justify-content: center;
	}
	.content .second .image{
		margin-bottom:15px;
	}
}