.box1 img,.box1:after,.box1:before {
    width: 200%;
    transition: all .4s ease .4s
}

.box1 .icon li a {
    text-align: center
}

.box1:after,.box1:before {
    content: ""
}

.box1 {
    background-color: transparent;
    height: 300px;
    perspective: 1000px;
    display: inline-block;
    margin: 25px;
    overflow: hidden
}

.box1 .title {
    letter-spacing: 1px
}

.box1 .title p:not(.h4Heading) {
    font-size: 14px;
    padding: .25rem
}

.box1 .title p {
    line-height: 27px;
    padding: 10px 25px!important;
    display: inline-block;
    vertical-align: middle;
    line-height: normal
}

.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: .5rem .5rem 1.5rem rgba(0,0,0,.15)!important;
    position: relative
}

.box1 .h2Heading {
    width: 100%;
    font-size: 30px
}

.box1 .h4Heading {
    display: none!important;
    font-size: 30px
}

.box1:before {
    height: 100%;
    background: #2e34a6;
    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: 10px;
    color: #fff;
    text-shadow: 0 0 1px #004cbf;
    line-height: 300px;
    bottom: 10px;
    left: 0;
    top: 5px;
    opacity: 0;
    z-index: 2;
    transform: scale(0);
    transition: all .2s ease .2s;
    padding: 10px 10px
}

.box1:hover .title {
    opacity: 1;
    transform: scale(1);
    transition: all .7s ease .7s
}

.box1:hover .icon {
    top: 0
}

.box1 .icon li {
    display: block;
    margin: 10px 0
}

.box2 .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(max-width: 1199px) {
    .box1 .title {
        top:15px;
        height: fit-content;
        margin: auto
    }
}

@media only screen and (max-width: 990px) {
    .box1 {
        margin-bottom:30px
    }
}

@media(max-width: 767px) {
    .box1 {
        height:400px
    }

    .mt-40 {
        margin-top: 0
    }
}