#footerpad{padding-top:2rem;padding-bottom:2rem;background-color:#2c3e50;color:#fff} .box1 img,.box1:after,.box1:before{width:100%;transition:.3s} .box1 .icon,.box2,.box3,.box4,.box5 .icon li a{text-align:center} .box10:after,.box10:before,.box1:after,.box1:before,.box2 .inner-content:after,.box3:after,.box3:before,.box4:before,.box5:after,.box5:before,.box6:after,.box7:after,.box7:before{content:""} .box1,.box11,.box12,.box13,.box14,.box16,.box17,.box18,.box2,.box20,.box21,.box3,.box4,.box5,.box5 .icon li a,.box6,.box7,.box8{overflow:hidden} .box1 .title,.box10 .title,.box4 .title,.box7 .title{letter-spacing:1px} 
.mt-40{margin-top:40px} .box1 .icon,.box1 .title{margin:0;position:absolute} .box1{box-shadow:0 0 3px rgba(0,0,0,.3);position:relative} .box1:after,.box1:before{height:50%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;z-index:1;transform-origin:100% 0;transform:rotateZ(90deg)} .box1:after{top:auto;bottom:0;transform-origin:0 100%} .box1:hover:after,.box1:hover:before{transform:rotateZ(0)} .box1 img{height:auto;transform:scale(1) rotate(0)} .box1:hover img{filter:sepia(80%);transform:scale(1.3) rotate(10deg)} .box1 .title{font-size:19px;font-weight:600;color:#fff;text-transform:uppercase;text-shadow:0 0 1px #004cbf;bottom:10px;left:10px;opacity:0;z-index:2;transform:scale(0);transition:.5s .2s} .box1:hover .title{opacity:1;transform:scale(1)} .box1 .icon{padding:7px 5px;list-style:none;background:#004cbf;border-radius:0 0 0 10px;top:-100%;right:0;z-index:2;transition:.3s .2s} .box1:hover .icon{top:0} .box1 .icon li{display:block;margin:10px 0} .box1 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:10px;font-size:18px;color:#fff;transition:.3s} .box1 .icon li a:hover{color:#fff;box-shadow:0 0 10px #000 inset,0 0 0 3px #fff} .box2{position:relative;overflow:hidden} .box2 img{width:100%;height:auto} .box2 .box-content{width:100%;height:100%;position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)} .box2 .box-content:after,.box2 .box-content:before,.box2:after,.box2:before{content:"";width:80%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);transition:.5s} .box2:before{background:linear-gradient(45deg,rgba(0,0,0,.2) 49%,transparent 50%);left:-100%} .box2:after{background:linear-gradient(45deg,transparent 49%,rgba(0,0,0,.2) 50%);left:160%} .box2 .box-content:after,.box2 .box-content:before{width:65%;height:65%;background:linear-gradient(45deg,rgba(0,0,0,.3) 49%,transparent 50%);left:-100%;transition-delay:.1s} .box2:hover .box-content:after,.box2:hover .box-content:before,.box2:hover:after,.box2:hover:before{left:50%} .box2 .inner-content{width:50%;height:50%;color:#fff;padding:40px 0;position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%) scale(0);transition:.3s .2s} .box2 .inner-content:after{width:100%;height:100%;background:rgba(255,79,79,.8);position:absolute;top:50%;left:50%;z-index:-1;transform:translate(-50%,-50%) rotate(45deg)} .box2:hover .inner-content{transform:translate(-50%,-50%) scale(1);transition:.3s} .box2 .title{font-size:18px;font-weight:700;text-transform:uppercase;margin-bottom:5px} .box2 .post{display:block;font-size:14px;text-transform:capitalize;margin-bottom:7px} .box2 .icon{padding:0;margin:0;list-style:none;transform:rotateY(360deg) scale(0);transition:.3s} .box2:hover .icon{transform:rotateY(0) scale(1)} .box2 .icon li{display:inline-block;margin:0 3px} .box2 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:16px;color:#505050;transition:.3s} .box2 .icon li a:hover{box-shadow:0 0 0 5px rgba(0,0,0,.5);background:#fff;color:#ff4f4f} 
@media only screen and (max-width:320px){.box2 .inner-content{padding:25px 0} .box2 .title{font-size:16px} } .box3{box-shadow:0 0 3px rgba(0,0,0,.3);position:relative;overflow:hidden} .box3 .box-content,.box3:after,.box3:before{position:absolute;left:7%;right:7%;transition:.3s} .box3:after,.box3:before{display:block;background:rgba(0,0,0,.3);top:10%;bottom:10%;z-index:1;transform:scale(0,1)} .box3:after{top:10.8%;bottom:10.8%;transform:scale(1,0)} .box3:hover:after,.box3:hover:before{transform:scale(1);animation:1.5s animate} .box3:hover:before{border-top:3px solid #fff;border-bottom:3px solid #fff} .box3:hover img{transform:scale(1.2);filter:blur(5px);-moz-filter:blur(5px);-webkit-filter:blur(5px)} .box3 .box-content{padding:30px 10px;top:10%;bottom:10%;opacity:0;z-index:2} .box3:hover .box-content{box-shadow:0 0 0 35px rgba(255,255,255,.3);opacity:1;transition:.3s} .box3 .title{font-size:24px;font-weight:600;color:#88c425;margin:0 0 5px} .box3 .post{display:block;margin:0 0 5px;font-size:14px;color:rgba(255,255,255,.8)} .box3 .description{font-size:14px;color:#fff;margin:0 0 20px} .box3 .icon{padding:0;margin:0;list-style:none} .box3 .icon li{display:inline-block;margin:0 10px 0 0} .box3 .icon li a{display:block;width:30px;height:30px;line-height:30px;color:#fff;background:#88c425;transition:.5s} .box3 .icon a:hover{text-decoration:none;animation:.5s animate-hover;transition:.3s} 
@media only screen and (max-width:990px){.box1,.box2,.box3{margin-bottom:30px} .box3 .box-content{padding:10px} .box3 .description{margin-bottom:10px} } @media only screen and (max-width:479px){.box3 .title{margin:0} } *{-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-webkit-transition-timing-function:ease-in-out;transition-duration:.2s;-moz-transition-duration:.2s;-webkit-transition-duration:.2s;-o-transition-duration:.2s;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;box-sizing:border-box} button,button:focus,input{outline:0} h1,h2,h3,h4,h5,h6{margin:0;padding:0;color:#000} .btn{width:auto;font-family:Montserrat,sans-serif!important;cursor:pointer!important} .btn:hover{opacity:.7} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit} button,select{text-transform:none} button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer} button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit} .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit} .h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px} .btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px} .btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px} .btn.focus,.btn:focus,.btn:hover{text-decoration:none} .btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)} .btn.active.focus,.btn.active:focus,.btn.focus,.btn.focus:active,.btn:active:focus,.btn:focus{outline:0;box-shadow:none} 
header{background:url("../../assets/img/bg22.jpg") 0 0/cover;text-align:center;width:100%;height:auto;position:relative;overflow:hidden;border-radius:0 0 85% 85%/30%} header .overlay{width:100%;height:100%;padding:50px;color:#fff;text-shadow:1px 1px 1px #333;background-color:rgba(30,41,99,.53)} h1{font-family:'Dancing Script',cursive;font-size:80px;margin-bottom:30px} h3,p{font-family:'Open Sans',sans-serif;margin-bottom:30px} button{overflow:visible;border:none;outline:0;padding:10px 20px;border-radius:50px;color:#333;background:#fff;margin-bottom:50px;box-shadow:0 3px 20px 0 #000} button:hover{cursor:pointer} *,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}