/*SUBPAGE HERO SECTION | TWENTYPERCENT.COM */

.page-hero{height: 450px; width:100%;  text-align:center; background: transparent; }
.brochure-bg{background: url(../img/bg/spread.jpg) no-repeat center top; background-size: cover; }
.collateral-bg{background: url(../img/bg/rice.jpg) no-repeat center top; background-size: cover; }
.exploits-bg{background: url(../img/bg/exp-bg.jpg) no-repeat center top; background-size: cover; }
.logo-bg{background: url(../img/bg/rice.jpg) no-repeat center top; background-size: cover; }
.print-bg{background: url(../img/bg/reading.jpg) no-repeat center top; background-size: cover; }
.web-bg{background: url(../img/bg/laptop.jpg) no-repeat center top; background-size: cover; }
.typo a {font-size: 7em; color:#fff; font-weight: 800; }

/*SUBSECTIONS SECTION | TWENTYPERCENT.COM */

.sub {background: #fff; width: 100%; height: auto; }
.even{background: #fff; }
.odd{background: #f9f9f9; }
.sub h5 {font-weight: bold; font-size: 15px; padding: 0 0 10px 0; margin: 0!important; line-height:14px; }
.sub p { line-height: 2.4rem; }

.animated-icons {min-height: 400px; text-align: center; padding: 10rem 0; background: #fff; border: 1px solid #eee; margin-top: 50px;}
.animated-icons img {padding: 11rem 11rem 3rem 11rem;}
.animated-icons h3 {padding: 2rem 0 4rem; font-size: 2rem;}


/*PORTFOLIO BUTTON ANIMATION | TWENTYPERCENT.COM */


.button{display:inline-block;padding:1em 2em;border:0;background:0;color:inherit;vertical-align:middle;position:relative;z-index:1;-webkit-backface-visibility:hidden;-moz-osx-font-smoothing:grayscale}
.button:focus{outline:0}
.button>span{vertical-align:middle}
.button--round-s{border-radius:5px}
.button--moema{padding:1.5em 3em;border-radius:50px;background:#222;color:#fff;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}
.button--moema.button--inverted{background:#eceff1;color:#37474f}
.button--moema::before{content:'';position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;background:inherit;border-radius:50px;z-index:-1;opacity:.4;-webkit-transform:scale3d(0.8,0.5,1);transform:scale3d(0.8,0.5,1)}
.button--moema:hover{-webkit-transition:background-color .1s .3s,color .1s .3s;transition:background-color .1s .3s,color .1s .3s;color:#eceff1;background-color:#000;-webkit-animation:anim-moema-1 .3s forwards;animation:anim-moema-1 .3s forwards}
.button--moema.button--inverted:hover{color:#eceff1;background-color:#7986cb}
.button--moema:hover::before{-webkit-animation:anim-moema-2 .3s .3s forwards;animation:anim-moema-2 .3s .3s forwards}
@-webkit-keyframes anim-moema-1{60%{-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1)}
85%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}@keyframes anim-moema-1{60%{-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1)}
85%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}@-webkit-keyframes anim-moema-2{to{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}@keyframes anim-moema-2{to{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
    
    

}