.urban_rider_box { background: #915c40 url(../img/urban-rider/urban_bg.jpg) repeat-y; background-size: 100%; overflow: hidden; margin: 40px 0 40px; }
.urban_rider_box li, .urban_rider_box p { color: var(--white); }
.urban_hdr { background: #392011; padding: 20px 30px; }
.urban_logo { background: url(../img/urban-rider/blue_pattern.jpg) repeat; padding: 30px 0; }
.brown_title { text-align: center; margin: 0 0 40px; }
.brown_title h4 { display: inline-block; color: var(--white); background: #392011; border-radius: 12px; font-weight: 400; padding: 10px 35px; margin: 0; }
.web_brief { background: rgba(57, 32, 17, .3); width: 100%; float: left; padding: 70px 0; position: relative; z-index: 11; }
.urban_rider_box { padding: 0 0 40px; }
.web_brief:before { content: ''; background-image: url(../img/urban-rider/divider2.png); background-size: 100%; background-repeat: no-repeat; padding: 16% 30%; position: absolute; top: -25%; right: 10%; opacity: .6; z-index: -1; }
.web_brief p:last-child { margin-bottom: 0; }
.urban_screenshot { padding: 40px 0; }
.urban_key_sec figure, .urban_screenshot, .urban_screenshot1 figure, .urban_ui_screen figure { display: inline-block; margin: 0; position: relative; z-index: 111; }
.urban_screenshot:after { content: ''; background-image: url(../img/urban-rider/urban_triangle.png); background-size: 100%; background-repeat: no-repeat; width: 106px; height: 108px; position: absolute; top: 35%; left: -17%; transform: rotate(17deg); -webkit-transform: rotate(17deg); }
.urban_key_sec { width: 100%; float: left; padding: 80px 0 0; }
.urban_key_sec figure:before { content: ''; background: url(../img/urban-rider/polygon.png) no-repeat; background-size: 100%; width: 117px; height: 117px; position: absolute; bottom: 0; right: -10px; z-index: -1; }
.urban_list { background: rgba(57, 32, 17, .6); border-radius: 10px; padding: 20px; text-align: left; display: inline-block; min-width: 370px; }
.urban_list li { position: relative; padding-left: 45px; margin: 0 0 20px; }
.urban_list li:before { content: ''; background-image: url(../img/urban-rider/check_ok.png); background-size: 100%; background-repeat: no-repeat; width: 30px; height: 30px; position: absolute; top: 0; left: 0; }
.urban_ui_screen { width: 100%; float: left; padding: 70px 0 0; position: relative; z-index: 11; }
.urban_ui_screen:after { content: ''; background-image: url(../img/urban-rider/urban_triangle.png); background-repeat: no-repeat; background-size: 100%; width: 106px; height: 108px; position: absolute; top: 50%; right: 50px; }
.urban_ui_screen figure:before { content: ''; background-image: url(../img/urban-rider/wave_line.png); background-repeat: no-repeat; background-size: 100%; width: 93px; height: 92px; position: absolute; bottom: 60px; left: -70px; z-index: -1; }
.web_des { margin: 40px 0 0; width: 100%; }
@media (max-width:1280px){
	.urban_screenshot, .urban_ui_screen figure { width: 80%; }
}
@media (max-width:991px){
	.urban_ui_screen, .web_brief { padding: 50px 0; }
	.urban_logo img { width: 320px; }
}
@media (max-width:880px){
	.urban_key_sec, .urban_ui_screen, .web_brief { padding: 50px 0; }
}
@media (max-width:767px){
	.urban_key_sec, .urban_ui_screen, .web_brief { padding: 40px 0; }
	.urban_screenshot:after, .urban_ui_screen:after { width: 56px; height: 58px; z-index: -1; }
	.urban_screenshot { padding: 30px 0; }
	.urban_list { min-width: 100%; }
}
@media (max-width:575px){
	.urban_web { margin: 0; }
	.urban_screenshot { padding: 20px 0; }
	.urban_key_sec, .urban_ui_screen, .web_brief { padding: 30px 0; }
	.urban_screenshot:after, .urban_ui_screen:after { width: 40px; height: 42px; }
	.urban_ui_screen:after { right: 20px; }
	.urban_ui_screen figure:before { bottom: 0; width: 87px; height: 87px; }
	.urban_list { min-width: 100%; }
	.urban_list li { margin-bottom: 12px; }
	.urban_hdr { flex-direction: column!important; }
}
@media (max-width:420px){
	.urban_logo { padding: 20px 0; }
	.urban_logo img { width: 70%; }
}