/*********************** Demo - 1 *******************/ .box1 img,.box1:after,.box1:before{width:100%;transition:all .3s ease 0s} .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} .box3 .post,.box4 .post,.box5 .post,.box7 .post{font-style:italic} body{background-color:#000000} .mt-30{margin-top:30px} .mt-40{margin-top:40px} .mb-30{margin-bottom:30px} .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:all .5s ease .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:all .3s ease .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:all .3s ease 0s} .box2 .icon li a,.box3 .icon a:hover,.box4 .icon li a:hover,.box5 .icon li a,.box6 .icon li a{border-radius:50%} .box1 .icon li a:hover{color:#fff;box-shadow:0 0 10px #000 inset,0 0 0 3px #fff} @media only screen and (max-width:990px){.box1{margin-bottom:30px} } /* call to box2 */ .box2{position:relative} .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:all .5s ease 0s} .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} .box1 .box-content:after{background:linear-gradient(45deg,transparent 49%,rgba(0,0,0,.3) 50%);left:160%} .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:all .3s ease .2s} .box2 .inner-content:after{width:100%;height:100%;background:rgba(0,132,188,.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:all .3s ease 0s} .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} .box10 .title,.box11 .title,.box4 .title,.box5 .title,.box6 .box-content,.box7 .title{text-transform:uppercase} .box2 .icon{padding:0;margin:0;list-style:none;transform:rotateY(360deg) scale(0);transition:all .3s ease 0s} .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:all .3s ease 0s} .box2 .icon li a:hover{box-shadow:0 0 0 5px rgba(0,0,0,.5);background:#fff;color:#0000ff} @media only screen and (max-width:990px){.box2{margin-bottom:30px} } @media only screen and (max-width:320px){.box2 .inner-content{padding:25px 0} .box2 .title{font-size:16px} }