@import url("common.css");
*{padding:0; margin:0; /*transition: all 0.5s ease-in-out;*/ box-sizing:border-box;}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
@font-face {
  font-family: 'Jokerman-Regular';
  src: 	url('../font/Jokerman-Regular.eot?#iefix') format('embedded-opentype'),  
  		url('../font/Jokerman-Regular.woff') format('woff'), 
  		url('../font/Jokerman-Regular.ttf')  format('truetype'), 
  		url('../font/Jokerman-Regular.svg#Jokerman-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.bannerWraper	{ background:url(../images/gurantee-banner.jpg) no-repeat 50% 0px;}
.banner-cont	{ width:70%; margin-left:30%; text-align:center; padding:23px 0 25px 0; height:100%; overflow:hidden;}
.bannerWraper h1{ font-size:4.1em;}
.bannerWraper h2{ font-family: 'Dancing Script', cursive; color:#ef4b2a; font-weight:700; font-size:3em; margin-bottom:16px;}
.bannerWraper ul{ width:50%; float:left; margin-bottom:25px;}
.bannerWraper ul li	{ text-align: left; font-size:1.7em; font-style:italic; color:#192122; margin:4px 0;text-shadow:2px 2px #fff; background:url(../images/banner-blt.png) no-repeat 0px 9px; padding:0 0 0 20px;}
.bannerWraper p { clear: both; }
.bannerWraper p a	{ display:inline-block; background-color:#fc3176; padding:10px 20px; color:#fff; font-size:1.7em; border-radius:5px; margin-left:-5%; text-decoration:none; margin-bottom:25px;}
.bannerWraper p a span	{ display:block; font-size:0.7em; height:0px; overflow:hidden;}
.bannerWraper p a:hover { margin-bottom:0;}
.bannerWraper p a:hover span	{ height:25px;}
/*.howitworks		{ padding:40px 0; background:url(../images/lets_bg.jpg) repeat;}
.howitworks	h2	{ font-size:5em;}
.howitworks	h6	{ text-align:center; font-size:2em;}
.howitworks section	{ background-color:#8dc23a; width:80%; margin:0 auto;}
.howitworks section aside	{ width:30%; float:left;}
.howitworks section div	{ width:70%; float:right; }
.howitworks section div	div	{background-color:#f1c02e; border-bottom:1px solid #daa710; width:100%;}
.howitworks section div	ul li	{background-color:#d9d9d9; border-bottom:0; float:left; width:inherit;}*/

.top_block{padding: 45px 35px 70px;}
.top_block h2{font-family: 'Roboto Condensed', sans-serif; font-size: 90px; line-height: 1; color: #252525; text-transform: uppercase; text-align: left;}
.top_block p{font-size: 29px; line-height: 34px; color: #676767; font-weight: 700; font-style: italic; letter-spacing: -0.7px;}


.steps_main{padding-bottom: 45px;}
.steps{background-color: #8dc23a; margin-bottom: 90px; position: relative;}
.steps .line {
    content: "";
    display: block;
    background-color: #a1a1a1;
    width: 26px;
    position: absolute;
    height: 90px;
    bottom: -90px;
    left: 400px;
}
.steps:nth-child(even) .line{left: 590px;}
.steps:nth-child(7) .line{width: 108px; height: 234px; background: url(../images/last_step_arrow.png) 0 0 no-repeat; z-index: 1; left: 530px; bottom: -234px;}
.steps h3{font-family: 'Roboto Condensed', sans-serif; font-size: 50px; line-height: 55px; color: #000; font-weight: 400;}
.steps p{font-family: 'Roboto', sans-serif; font-size: 26px;line-height: 32px; color: #464646; font-style: italic;}
.steps .number{font-family: 'Jokerman-Regular'; font-size: 122px; line-height: 1; color: #fff; width: 270px; float: left; padding: 45px 35px; position: relative;}
.steps .number .img_cont{background-color: #d9d9d9; padding: 50px; width: 275px; height: 275px; border-radius: 50%; position: absolute; top: -35px;}

.steps .description{width: 900px; float: right; padding-bottom: 0px; background-color: #666;}
.steps .description .text_block{padding: 35px; background-color: #f1bf30;}

.steps ul{background-color: #d9d9d9; padding: 20px; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; line-height: 18px; text-transform: uppercase; color: #666; font-weight: 700; clear: both;}
.steps ul li{display: inline-block; vertical-align: top; width: 305px; padding: 0 0 0 10px; background: url(../images/description_sep.png) 0 50% no-repeat;}
.steps ul li:first-child{background: none;}
.steps ul li span{display: block; padding: 0 85px 0 119px;}
.steps ul li:first-child span{background: url(../images/call_icon.png) 45px 50% no-repeat;}
.steps ul li:nth-child(2) span{background: url(../images/mobile_icon.png) 75px 50% no-repeat;}
.steps ul li:last-child span{background: url(../images/arrow_icon.png) 75px 50% no-repeat;}

.steps .right_img{float: right; width: 210px; background-color: #d9d9d9; padding: 25px 25px 29px; text-align: center;}
.steps .right_img img{display: inline-block;}

.steps .bot_img{width: 215px; height: 165px; background-color: #8dc23a; position: absolute; right: 0; bottom: 0; text-align: center; padding: 22px 0 0;}
.steps .bot_img img{display: inline-block;}

.steps.left_orient .number .img_cont{right: -140px;}

.steps.right_orient .number{float: right; text-align: right;}
.steps.right_orient .number .img_cont{left: -140px;}
.steps.right_orient .description{width: 720px;}

.steps:first-child .description{padding: 0; background-color: #8dc23a;}
.steps:first-child .description .text_block{padding: 70px 120px 70px 200px;}
.steps:first-child ul{display: inline-block; float: left;}
.steps:first-child ul li{width: 220px;}
.steps:first-child ul li span{display: block; padding: 0 35px 0 83px;}
.steps:first-child ul li:first-child span{background: url(../images/call_icon.png) 25px 50% no-repeat;}
.steps:first-child ul li:nth-child(2) span{background: url(../images/mobile_icon.png) 45px 50% no-repeat;}
.steps:first-child ul li:last-child span{background: url(../images/arrow_icon.png) 45px 50% no-repeat;}

.steps:nth-child(2) .description{padding: 0;}
.steps:nth-child(2) .description .text_block{padding: 38px 150px 63px 35px;}

.steps:nth-child(3) .description .text_block{padding: 50px 20px 60px 160px;}

.steps:nth-child(4) .description{padding: 0;}
.steps:nth-child(4) .description .text_block{padding: 50px 170px 50px 40px;}

.steps:nth-child(5) .description .text_block{padding: 55px 35px 65px 150px;}

.steps:nth-child(6) .description{padding: 0;}
.steps:nth-child(6) .description .text_block{padding: 60px 145px 50px 20px;}

.steps:nth-child(7){margin-bottom: 225px;}
.steps:nth-child(7) .description .text_block{padding: 35px 35px 45px 150px;}

.lets_start{background-color: #bc6d1b; padding: 75px 45px 25px; position: relative; z-index: -1;}
.lets_start img{float: left;}
.lets_start .text{width: 50%; float: left; padding: 60px 0 0 10%;}
.lets_start .text h3{font-size: 70px; line-height: 80px; font-weight: 900; color: #fff; text-transform: uppercase; margin-bottom: 15px;}
.lets_start .text p{font-size: 55px; line-height: 60px; color: #ccc;}


@media screen and (max-width: 1023px) {
.bannerWraper{background-size: cover; background-position: 20% 0;}
.steps .description{width: 100% !important; float: right; padding-bottom: 53px;}
.steps:first-child .description .text_block{padding: 50px;}
.steps:nth-child(2) .description .text_block{padding: 40px;}
.steps:nth-child(3) .description .text_block{padding: 50px;}
.steps:nth-child(4) .description .text_block{padding: 50px;}
.steps:nth-child(5) .description .text_block{padding: 50px;}
.steps:nth-child(6) .description .text_block{padding: 50px;}
.steps:nth-child(7) .description .text_block{padding: 50px;}
.steps ul li{width: 25%;}
.steps ul li span{padding: 0 50px 0 70px;}
.steps ul li:first-child span{background-position: 15px 50%;}
.steps ul li:nth-child(2) span{background-position: 35px 50%;}
.steps ul li:last-child span{background-position: 25px 50%;}
}

@media screen and (max-width: 979px) {
.top_block h2{font-size: 4.5em;}
.top_block p{font-size: 2em; line-height: 1.3;}
.steps ul li span{padding: 0 0 0 50px;}
.steps ul li:first-child span{background-position: 5px 50%;}
.steps ul li:nth-child(2) span{background-position: 15px 50%;}
.steps ul li:last-child span{background-position: 15px 50%;}
}

@media screen and (max-width: 799px) {
.steps ul li{width: 22%;}
}

@media screen and (max-width: 767px) {
.bannerWraper{background-position: 50% 100%;}
.banner-cont{width: 100%; padding: 23px 0 70% 0; margin: 0;}
.steps:first-child ul li{width: 32%;}
.steps:first-child ul li span{padding: 0 35px 0 70px;}
.steps:first-child ul li:nth-child(2) span{background-position: 30px 50%;}
.steps:first-child ul li:last-child span{background-position: 30px 50%;}
.steps ul li span{padding: 0 0 0 44px;}
.steps ul li:first-child span{background-position: 0 50%;}
.steps ul li:nth-child(2) span{background-position: 10px 50%;}
}

@media screen and (max-width: 670px) {
.steps:first-child ul li span{padding: 0 30px 0 50px;}
.steps:first-child ul li:first-child span{background-position: 5px 50%;}
.steps:first-child ul li:nth-child(2) span{background-position: 15px 50%;}
.steps:first-child ul li:last-child span{background-position: 15px 50%;}
.steps:nth-child(even) .line {left: 70%;}
.steps:nth-child(7) .line{left: 40%;}
}

@media screen and (max-width: 570px) {
.steps ul li,
.steps:first-child ul li{width: 100%; background: none !important;}
.steps ul li span,
.steps:first-child ul li span{padding: 20px 35px 20px 70px !important;}
.steps .number .img_cont{padding: 30px; width: 180px; height: 180px; top: 20px;}
.steps .number .img_cont img{width: 100%; float: left;}
.steps.left_orient .number .img_cont{right: -40px;}
.steps.right_orient .number .img_cont{left: -25px;}
}

@media screen and (max-width: 450px) {
.banner-cont{padding: 23px 0;}
.bannerWraper ul{width: 100% !important; margin-bottom: 0; margin-top: 0;}
.bannerWraper p{padding-top: 40px; clear: both;}
.bannerWraper p a{margin-bottom: 20px;}

.steps .line{left: 40%;}
.lets_start img{max-width: 100%; float: none;}
.steps h3{font-size: 3em; line-height: 1.3;}
.steps p{font-size: 2em; line-height: 1.2;}
.steps .number .img_cont{top: 15px;}
.steps.right_orient .number .img_cont{left: -35px;}
.steps .right_img{float: none; width: 100%;}
.steps .bot_img{width: 100%; height: auto; position: static; padding: 22px 0;}
.lets_start .text{width: 100%; float: none;}
.lets_start .text h3{font-size: 3em; line-height: 1.2;}
.lets_start .text p{font-size: 2.8em; line-height: 1.2;}

.bannerWraper h1{font-size: 2.5em;}
.bannerWraper h2{font-size: 1.5em; margin-bottom: 20px;}
.bannerWraper ul li{font-size: 1.3em;}
}

@media screen and (max-width: 400px) {
/*.banner-cont{padding: 23px 0 120% 0;}*/
.steps h3{font-size: 2.5em;}
}

@media screen and (max-width: 350px) {
.steps h3{font-size: 2.2em;}
.steps .number .img_cont{width: 150px; height: 150px; top: 25px;}
.steps.left_orient .number .img_cont{right: 5px;}
.steps.right_orient .number .img_cont{left: 5px;}
.lets_start .text p{font-size: 2em;}

.bannerWraper h1{font-size: 1.5em;}
.bannerWraper h2{font-size: 1.2em; margin-bottom: 20px;}
.bannerWraper ul li{font-size: 1em;}
.bannerWraper p a{font-size: 1em;}
}