.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: ""
}
section.section3 {
    padding: 0;
}
.row.sliderbooksoks.slick-initialized.slick-slider.slick-dotted img {
    box-shadow: 10px 10px 20px rgb(0 0 0 / 50%);
}
.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: #0f2862;
    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) {
    .sliderbooksoks ul.slick-dots {
    display: flex;
    /* justify-content: space-between; */
}
    .sliderbooksoks ul.slick-dots li {
    margin-right: 10px;
}
    .box1 {
        height: 400px
    }
    .mt-40 {
        margin-top: 0
    }
}