/* common css start */
.stapu-l .dt{display:table;}
.stapu-l .dtc{display:table-cell;}
.stapu-l .uc{text-transform:uppercase;}
.stapu-l .vb{vertical-align:bottom;}
.stapu-l  ul{padding:0;}
.stapu-l .no_padding{padding:0;}	
.stapu-l ul li{list-style:none;}
.stapu-l .heading-border{ display:inline-block;}
.stapu-l .heading-border h1:before{ content:""; position:absolute; border:3px solid #f5d737; top: 28px; bottom:-33px; left:40px; right:-40px; z-index:-9;}
.stapu-l .heading-border h1{display:inline-block; font-size:50px; color:#3f3f3f; font-family: 'GothamBlack'; z-index:9; position:relative;}
 /* common css end */
 
/* banner start */
.stapu-l section.banner-stbrand{width:100%; background-color:#f5d737;}
.stapu-l section.banner-stbrand .banner-inner{display:block; background-image:url(../portfolio/stapu-branding/images/bg-pattern.png); background-attachment: fixed;
    background-position: 103px -18px;}
.stapu-l section.banner-stbrand .banner-inner .logo{display:block; padding:260px 0; }
.stapu-l section.banner-stbrand .banner-inner .logo img{display:inline-block; max-width:100%;}
/* banner end */

/* typography stat */
.stapu-l section.typography{width:100%; padding-bottom:80px;}
.stapu-l section.typography .font{width:100%; display:inline-block; margin-top:130px;}
.stapu-l section.typography .bottom {margin-top:95px; color:#727272;}
.stapu-l section.typography .bottom .heading h1{ font-family: 'HoboStd'; font-size:132px; margin:0;line-height: 96px; padding-left:10px;}
.stapu-l section.typography .bottom .heading-2 h3{ font-family: 'HoboStd'; font-size:25px;  margin:0;line-height: 19px; padding:0 20px;}
.stapu-l section.typography .bottom .heading-3 h3{ font-family: 'HoboStd'; font-size:25px;  margin:0;    line-height: 26px;}
.stapu-l section.typography .bottom .heading-3 h3 + h3{ padding-top:24px;}
.stapu-l section.typography .colors{margin-top:160px; width:100%; display:inline-block;}
.stapu-l section.typography .colors li{display:inline-block; }
.stapu-l section.typography .colors li + li{margin-left:190px;}
.stapu-l section.typography .colors li .clr{display:inline-block; }
.stapu-l section.typography .colors li .clr-code{display:block; text-align:center; font-family: 'GothamBlack'; font-size:15px; padding-top:33px;}
/* typography end */

/* logo-concept start */
.stapu-l section.logo-concept{background-color:#cb2229;}
.stapu-l section.logo-concept .heading-border { margin-top:130px;}
.stapu-l section.logo-concept .heading-border h1{color:#fefefe; }
.stapu-l section.logo-concept ul.logo-area{max-width:890px; display:table; margin:140px auto 150px auto; width:100%;  }
.stapu-l section.logo-concept ul.logo-area li{display:table-cell; vertical-align:middle;}
.stapu-l section.logo-concept ul.logo-area li .img img{display:inline-block;}
.stapu-l section.logo-concept ul.logo-area li .img{min-height:105px;}
.stapu-l section.logo-concept ul.logo-area li .img,
.stapu-l section.logo-concept ul.logo-area li .name{display:block; text-align:center;}
.stapu-l section.logo-concept ul.logo-area li .name{margin-top:30px; font-size:20px; color:#fff;}
/* logo-concept end */

/* app icon start */
.stapu-l section.app-icon{padding-top:130px;}
.stapu-l section.app-icon ul.apps{padding-top:110px; display:block; margin:0; text-align:center; padding-bottom:120px;}
.stapu-l section.app-icon ul.apps li{display:inline-block;}
.stapu-l section.app-icon ul.apps li + li{margin-left:62px;}
/* app icon end */

/* vcisiting_card start */
.stapu-l section.vcisiting_card{display:block; width:100%; height:100vh; background-image:url(../portfolio/stapu-branding/images/v-card.png); background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size:cover;}
/* vcisiting_card end */

/* print start */
.stapu-l section.print{display:block; width:100%; height:100vh; background-image:url(../portfolio/stapu-branding/images/print.png); background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size:cover;}
/* print end */

/* logo and app start */
.stapu-l section.logo-app{display:block; width:100%;}
.stapu-l section.logo-app .image-app{display:inline-block; width:100%;}
.stapu-l section.logo-app .image-app img{display:inline-block; width:100%;}
/* logo and app end */

/* footer start */
.stapu-l footer.stapu-brand{display:block;width:100%; height:100vh; background-image:url(../portfolio/stapu-branding/images/footer-bg.jpg); background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size:cover;}
/* footer end */


        /* meadia quaries start */
@media(min-width:768px){

}

@media(max-width:1199px){
.stapu-l section.typography .bottom .heading h1{font-size: 80px; line-height:58px;}
.stapu-l section.typography .bottom .heading-2 h3{font-size: 20px;}
.stapu-l section.typography .bottom .heading-3 h3{font-size: 20px;}
.stapu-l section.typography .bottom .heading-3 h3 + h3{padding-top:10px;}
.stapu-l section.app-icon ul.apps li + li{margin-left:30px;}
}

@media(max-width:991px){
.stapu-l section.typography .bottom .heading h1{font-size: 70px; line-height:50px;}
.stapu-l section.typography .bottom .heading-2 h3{font-size: 16px; padding: 0 10px; line-height: 14px;}
.stapu-l section.typography .bottom .heading-3 h3{font-size: 16px; line-height: 14px;}
.stapu-l section.typography .bottom .heading-3 h3 + h3{padding-top:20px;}
.stapu-l section.typography .colors li + li{margin-left:90px;}
.stapu-l section.logo-concept ul.logo-area li + li{padding-left:33px;}
.stapu-l section.app-icon ul.apps li{width:49%; margin-bottom:50px;}
.stapu-l section.app-icon ul.apps li + li{margin-left:0; }
}
@media(max-width:767px){
.stapu-l section.banner-stbrand .banner-inner .logo{padding:170px 0;}
.stapu-l section.typography .bottom .heading h1{padding-left:0;}
.stapu-l section.typography .bottom .heading h1{font-size:46px; line-height: 30px;}.
.stapu-l section.typography .bottom .heading-3 h3 + h3{padding-top:10px !important;}
.stapu-l section.typography .bottom{display:block;}
.stapu-l .heading-border h1{font-size:44px;}
.stapu-l .heading-border h1:before{top: 24px; bottom: -24px; left: 33px; right: -33px;}
.stapu-l section.typography .bottom .heading {display:block;}
.stapu-l section.typography .bottom .heading-2 {display:block; margin-top:45px;}
.stapu-l section.typography .bottom .heading-2 h3{padding:0; font-size:20px;}
.stapu-l section.typography .bottom .heading-3 {display:block; margin-top:60px;}
.stapu-l section.typography .bottom .heading-3 h3{font-size:20px; line-height:25px;}
.stapu-l section.typography .bottom .heading-3 h3 + h3{padding-top:20px;}
.stapu-l section.typography .font{margin-top:80px;}
.stapu-l section.typography .colors{margin-top:75px;}
.stapu-l section.logo-concept .heading-border{margin-top:30px;}
.stapu-l section.logo-concept ul.logo-area{display:block;    margin: 125px auto 124px auto;}
.stapu-l section.logo-concept ul.logo-area li{display:block;}
.stapu-l section.logo-concept ul.logo-area li + li{padding-left:0; padding-top:65px;}
.stapu-l section.logo-concept ul.logo-area li .name{margin-top:20px;}
.stapu-l section.logo-concept ul.logo-area li .img{min-height:auto;}
.stapu-l section.app-icon{padding-top:65px;}
.stapu-l section.app-icon ul.apps{padding-top:95px;}
.stapu-l section.typography .colors li + li{margin-left:27px;}
}
@media(max-width:480px){
.stapu-l section.banner-stbrand .banner-inner .logo img{max-width:80%;}
.stapu-l .heading-border h1{font-size:32px;}
.heading-border h1:before{top: 17px; bottom: -17px; left: 20px; right: -10px}
.stapu-l section.typography .bottom{margin-top:70px;}
.stapu-l section.typography .colors li{display:block; text-align:center;}
.stapu-l section.typography .colors li .clr-code{padding-top:20px;}
.stapu-l section.typography .colors li + li{margin-left:0px; margin-top:40px;}
.stapu-l section.app-icon ul.apps li{display:block; width:100%; margin-bottom:35px;}
.stapu-l section.app-icon ul.apps{padding-bottom:25px;}

}
		/* meadia quaries start */