/* features section 5 */
.app2u_process_hor {
	width: 100%;
	text-align: center;
	padding: 70px 0px;
	background-color: #fc4242;
	font-size: 14px;
}

.app2u_process_hor .root {
	float: left;
	width: 100%;
	/*background: url(../img/site-img5.png) no-repeat center 14px;*/
	position: relative;
}
.app2u_process_hor .one_sixth i {
	color: #272727;
	font-size: 1.929em;
	width: 3.333em;
	height: 3.333em;
	text-align: center;
	vertical-align: middle;
	line-height: 3.333em;
	background-color: #fff;
	border-radius: 100%;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
	cursor: pointer;
}
.app2u_process_hor .one_sixth h5 {
	color: #fff;
	margin-top: 0.929em;
	margin-bottom: 0px;
	font-size: 1.614em;
}

.app2u_process_hor .one_sixth .hidden {
	display: none;
}
.app2u_process_hor .one_sixth i:hover {
	color: #fff;
	background-color: #272727;
}
.app2u_process_hor .one_sixth i.active {
	color: #fff;
	background-color: #272727;
}

.app2u_process_hor .left {
	float: left;
	width: 50%;
}
.app2u_process_hor .left h3, .app2u_process_hor .right h3 {
	margin-bottom: 10px;
	text-transform: uppercase;
	color : #777;
	font-size: 1.5em;
}
.app2u_process_hor .left h3{
	margin-bottom: 5px;
}

.app2u_process_hor .right strong {
	color: #454545;
	font-size: 1em;
	font-weight: normal;
	display: block;
	text-transform: none;
	margin-bottom: 20px;
}
/*.app2u_process_hor .left .circle {
	float: right;
	width: 250px;
	height: 250px;
	padding-top: 60px;
	padding-left: 30px;
	padding-right: 30px;
	background: url(../img/site-img6.png) no-repeat center top;
}*/
.app2u_process_hor .left .circle {
	float: right;
    width: 300px;
    height: 270px;
    padding-top: 90px;
    padding-left: 30px;
    padding-right: 30px;
    background: url(../img/site-img6.png) no-repeat center center;
    background-size: 330px;
}
.app2u_process_hor .right {
	float: left;
	width: 50%;
}
.app2u_process_hor .right .circle {
	float: left;
	width: 330px;
    height: 270px;
    padding-top: 90px;
    padding-left: 30px;
    padding-right: 30px;
    background: url(../img/site-img7.png) no-repeat center center;
    background-size: 331px;
}

.app2u_mark {
    position: absolute;
    left: 100%;
    top: 2.071em;
	display: block;
}

.app2u_process_hor .one_sixth .app2u_mark i {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) ;
    color: rgba(255, 255, 255, 0.77) ;
    font-size: 2.286em;
    height: 1em;
    line-height: 1em;
    width: 1em;
}

.app2u_dots{
	position: absolute;
	top: 3.214em;
	width: 100%;
	display: block;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.86) 40%, rgba(255, 255, 255, 0) 20%);
    background-position: top;
    background-size: 3px 1px;
    background-repeat: repeat-x;
}

h2.section_title_white {
	color: #fff;
	font-size: 35px;
	text-transform: uppercase;
	padding-bottom: 20px;
	font-weight: 200;
	background: url(../img/title-hline.png) no-repeat center bottom;
}

h2.section_title_white.fure {
	background: url(../img/title-hline3.png) no-repeat center bottom;
}

.app2u_process_hor .head-subtext{
	color: rgba(248, 248, 248, 0.87);
	margin-bottom: 30px;
	padding-top: 10px;
}

.circle > p {
    font-size: 1em;
    color: #7F7F7F;
    padding: 0px 20px;
}

.circle_init{
    font-size: 1.2em;
    padding: 70px 5px 0;
}

/* columns */
.one_half, .one_third, .one_fourth, .two_third, .three_fourth, .one_sixth {
	position: relative;
	margin-right: 4%;
	float: left;
}
.app2u_process_hor .one_full {
	width: 100%;
}
.app2u_process_hor .one_half {
	width: 48%;
}
.app2u_process_hor .one_third {
	width: 30.650%;
}
.app2u_process_hor .one_fourth {
	width: 22%;
}
.app2u_process_hor .one_sixth {
	width: 13.33%;
}
.app2u_process_hor .two_third {
	width: 65.350%;
}
.app2u_process_hor .three_fourth {
	width: 74%;
}

.app2u_process_hor .last {
	margin-right: 0 !important;
	clear: right;
}


/*****************************/
/******** RESPONSIVE *********/
/*****************************/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.app2u_process_hor{ font-size: 13px; }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.app2u_process_hor .container {width: 90%;}
	.app2u_process_hor{ font-size: 13px; }
}

@media only screen and (min-width: 620px) and (max-width: 767px) {
	.app2u_process_hor .container {width: 90%;}
	.app2u_process_hor .container .sixteen.columns{ width:100%; }
	.app2u_process_hor{ font-size: 12px; }
}

@media only screen and (min-width: 480px) and (max-width: 619px) {
	.app2u_process_hor .container {width: 90%;}
	.app2u_process_hor .container .sixteen.columns{ width:100%; }
	.app2u_process_hor{ font-size: 11px; }
	.app2u_process_hor .clearfix{ display: none;}
	.app2u_process_hor .root{ width: 40%; }
	.app2u_process_hor .right, .app2u_process_hor .left{ width: 60%; }
	.app2u_process_hor .app2u_dots {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.86) 40%, rgba(255, 255, 255, 0) 20%);
	    background-position: left;
	    background-size: 1px 3px;
	    background-repeat: repeat-y;
	    height: 100%;
	    left: 50%;
	    top: -20px;
	}
	
	.app2u_process_hor .app2u_mark {
		display: none;
		left: 0;
		top: auto;
		right: auto;
		bottom: -15px;
		width: 100%;
	}
	
	.app2u_process_hor .one_sixth .app2u_mark i{
		transform:rotate(90deg);
		-ms-transform:rotate(90deg); /* IE 9 */
		-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
		margin-left: 4px;
		color: rgba(255, 255, 255, 0.86);
	}
	
	.app2u_process_hor .one_sixth{
		margin-right: 0;
		width: 100%;
		margin-bottom: 20px;
	}
	
	.app2u_process_hor .left .circle, .app2u_process_hor .right .circle{
	    background-color: white;
	    border-color: white;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	    float: right;
	    height: 230px;
	    padding: 30px 40px;
	    width: 210px;
	}
	
	.app2u_process_hor .left .circle p, .app2u_process_hor .right .circle p{
	    color: rgba(80, 80, 80, 1);
	    font-family: 'open sans';
	    font-size: 1.1em;
	    font-weight: normal;
	}
	
	.app2u_process_hor .right .circle{
		margin-top:10px;
	}
	
	.circle_init{
		color: rgba(80, 80, 80, 0.85);
	}
	
	.app2u_process_hor .left .circle{
		margin-top: 60px;
	}
	
	.app2u_process_hor .right .circle{
		margin-top: 40px;
	}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
	.app2u_process_hor .container {width: 95%;}
	.app2u_process_hor .container .sixteen.columns{ width:100%; }
	.app2u_process_hor{ font-size: 10px; }
	.app2u_process_hor .clearfix{ display: none;}
	.app2u_process_hor .root{ width: 35%; }
	.app2u_process_hor .right, .app2u_process_hor .left{ 
		width: 65%; 
		box-sizing: border-box;
		padding: 0 4%;
	}
	.app2u_process_hor .app2u_dots {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.86) 40%, rgba(255, 255, 255, 0) 20%);
	    background-position: left;
	    background-size: 1px 3px;
	    background-repeat: repeat-y;
	    height: 100%;
	    left: 50%;
	    top: -20px;
	}
	
	.app2u_process_hor .app2u_mark {
		display: none;
		left: 0;
		top: auto;
		right: auto;
		bottom: -15px;
		width: 100%;
	}
	
	.app2u_process_hor .one_sixth .app2u_mark i{
		transform:rotate(90deg);
		-ms-transform:rotate(90deg); /* IE 9 */
		-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
		margin-left: 4px;
		color: rgba(255, 255, 255, 0.86);
	}
	
	.one_sixth{
		margin-right: 0;
		width: 100%;
		margin-bottom: 20px;
	}
	
	.app2u_process_hor .left .circle, .app2u_process_hor .right .circle{
	    background-color: white;
	    border-color: white;
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		border-bottom-left-radius: 10%;
		border-bottom-right-radius: 10%;
		box-sizing: border-box;
	    float: right;
	    height: auto;
	    padding: 10% 6%;
	    width: 100%;
	}
	
	.app2u_process_hor .right .circle{
		margin-top:10px;
	}
	
	.circle_init{
		padding: 60px 10px;
		color: rgba(80, 80, 80, 0.85);
	}
	
	.app2u_process_hor .left .circle p, .app2u_process_hor .right .circle p{
	    color: rgba(80, 80, 80, 1);
	    font-family: 'open sans';
	    font-size: 1.1em;
	    font-weight: normal;
	}
	
}

@media only screen and (max-width: 319px) {
	.app2u_process_hor .container {width: 98%;}
	.app2u_process_hor .container .sixteen.columns{ width:100%; }
	.app2u_process_hor{ font-size: 10px; display: none;}
}