
/* coman css */
.stap ul{margin:0; padding:0;}
.stap ul li{list-style:none; display:inline-block;}
/* banner css start */
.stap section.banner{position:relative; width:100%; z-index:3;}
.stap section.banner .top{width:100%; background-image:url(../portfolio/stapu-mobile/images/bgs/bg-1.png); background-position:bottom; text-align:center; background-size:cover;  background-repeat:no-repeat; }
.stap section.banner .top .logo{display:inline-block; width:100%; text-align:center;}
.stap section.banner .top .logo img{display:inline-block; max-width:100%;}
.stap section.banner .bottom{width:100%; background-image:url(../portfolio/stapu-mobile/images/bgs/bg-2.png); background-position:top; text-align:center; background-size:cover;  background-repeat:no-repeat; position:relative; padding-bottom:35px; z-index:9;}
.stap section.banner .bottom:after{position:absolute;content:"";max-width:100%; background-image:url(../portfolio/stapu-mobile/images/road.png); background-position:center; background-size:cover;  background-repeat:no-repeat; left:0; right:0;bottom:-243px; height:365px;}
.stap section.banner .bottom .mobiles{display:inline-block; width:100%; text-align:center;}
.stap section.banner .bottom .mobiles img{display:inline-block;}
/* banner css end */

/* app-screen start */
.stap section.app-screen{width:100%; background-image:url(../portfolio/stapu-mobile/images/secondbanner.png); background-size:cover;  padding-top:350px; padding-bottom:300px; position:relative; background-attachment:fixed;}
.stap section.app-screen:after{content:"";position:absolute;;max-width:100%; background-image:url(../portfolio/stapu-mobile/images/road2.png); background-position:center; background-size:cover;  background-repeat:no-repeat; left:0; right:0;bottom:-170px; height:400px;}
.stap section.app-screen .app-img{width:100%; display:inline-block; }
.stap section.app-screen .app-img img{max-width:100%; display:inline-block; }
/* app-screen end */

/* icon section start */
.stap section.icon{padding-top:130px; width:100%;background-image:url(../portfolio/stapu-mobile/images/4th-bg.png);  background-repeat:no-repeat; background-size:cover;background-position:center; background-attachment:fixed;}
.stap section.icon h1{font-size:80px; color:#3995b0; font-family: 'BebasNeueBold';	} 
.stap section.icon ul.icons-bar{display:block; margin-top:80px; } 
.stap section.icon ul.icons-bar li img{max-width:100%;}
.stap section.icon ul.icons-bar li + li{margin-left:80px;} 
.stap section.icon .typography{display:inline-block; margin-top:115px;} 
.stap section.icon h2{font-size:45px; color:#989898; font-family: 'BebasNeueBold';	} 
.stap section.icon ul.font-1 li:last-child, section.icon ul.font-2 li:last-child{margin:0; }
.stap section.icon ul.font-1, section.icon ul.font-2{display:block; font-size:39px; color:#989898; }
.stap section.icon ul.font-1{margin-top:70px;font-family: 'BebasNeueBold'; }
.stap section.icon ul.font-1 li{margin-right:23px; }
.stap section.icon ul.font-2{margin-top:65px; font-family: 'HoboStd';}
.stap section.icon ul.font-2 li{margin-right:8px; }
.stap section.icon .mobile-screen{display:inline-block; width:100%; margin-top:170px;}
/* icon section end */

/* footer start */
.stap footer.stapufooter{width:100%; background-image:url(../portfolio/stapu-mobile/images/footer-bg.png);  background-repeat:no-repeat; background-size:cover; background-position:top; padding-top:205px;}
.stap footer.stapufooter img{display:inline-block !Important;}
/* footer end */

@media(min-width:1499px){
.stap section.banner .bottom:after{height:500px; bottom:-328px;}
.stap section.app-screen:after{height:500px; bottom:-222px;}
}
@media(max-width:1199px){
.stap section.icon ul.icons-bar li + li{margin-left:45px;}
.stap section.icon ul.font-1 li{margin-right:14px;}
.stap section.icon ul.font-2 li{margin-right:0;}
}
@media(max-width:1024px){
.stap section.icon h1{font-size:60px;}
.stap section.icon h2{font-size:30px;}
.stap section.icon ul.icons-bar{margin-top:60px;}
.stap section.icon .typography{margin-top:70px;}
.stap section.icon ul.font-1, section.icon ul.font-2{font-size:34px;}
.stap section.icon ul.font-1{margin-top:50px;}
.stap section.icon ul.font-2{margin-top:60px;}
.stap section.icon .typography{width:100%;}
}
@media(max-width:991px){
.stap section.icon ul.icons-bar li + li{margin-left:10px;}
}
@media(max-width:767px){
.stap section.banner .top .logo img{max-width:60%;}
.stap section.banner .bottom .mobiles img{max-width:80%;}
.stap section.icon ul.icons-bar li {width:49%; text-align:center; margin-bottom:25px;}
.stap section.icon ul.icons-bar li + li{margin-left:0; margin-bottom:25px;}
.stap section.app-screen .app-img{text-align:center; margin-bottom:25px;}
.stap section.icon h1{font-size:44px; text-align:center;}
.stap section.icon h2{text-align:center;}
.stap section.icon ul.font-1 li{margin-right:5px;}
.stap section.icon ul.font-1, section.icon ul.font-2{font-size:18px;}
.stap section.icon ul.icons-bar li{display:block; width:100%;}
.stap section.icon ul.font-1, section.icon ul.font-2{text-align:center;}
.stap section.icon ul.font-2{margin-top:20px;}
.stap section.icon .mobile-screen{margin-top:120px;}
.stap footer.stapufooter{padding-top:60px;}
}
@media(max-width:480px){
.stap section.icon .mobile-screen{margin-top:90px;}
}




