@font-face {
    font-family: "Open Sans", sans-serif;
    font-display: swap;
    src: url(/fonts/OpenSans.woff2);
}


.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;
    }

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-30 {
    margin-bottom: 30px;
}


.box20 {
    position: relative;
    box-shadow: 8px 8px 15px darkgray;
    margin-bottom: 30px;
}

    .box20:after, .box20:before {
        position: absolute;
        content: "";
    }

    .box20:before {
        width: 80%;
        height: 220%;
        background: #C74A34;
        top: -50%;
        left: -100%;
        z-index: 1;
        transform: rotate(25deg);
        transform-origin: center top 0;
        transition: all .5s ease 0s;
    }

    .box20:hover:before {
        left: 10%;
    }

    .box20:after {
        width: 55%;
        height: 175%;
        background-color: rgba(0,0,0,.8);
        bottom: -1000%;
        left: 53%;
        transform: rotate(-33deg);
        transform-origin: center bottom 0;
        transition: all .8s ease 0s;
    }

    .box20 .box-content, .box20 .icon {
        width: 100%;
        padding: 0 20px;
        position: absolute;
        left: 0;
        z-index: 2;
        transition: all 1.1s ease 0s;
    }

    .box20:hover:after {
        bottom: -70%;
    }

    .box20 img {
        width: 100%;
        height: auto;
    }

    .box20 .box-content {
        top: -100%;
        color: #fff;
    }

    .box20:hover .box-content {
        top: 30px;
    }

    .box20 .title {
        margin: 0;
        color: white;
    }

    .box20 .icon li a, .box20 .post {
        display: inline-block;
        font-size: 14px;
    }

    .box20 .post {
        margin-top: 5px;
    }

    .box20 .icon {
        list-style: none;
        margin: 0;
        bottom: -100%;
    }

    .box20:hover .icon {
        bottom: 40px;
    }

    .box20 .icon li {
        display: inline-block;
    }

        .box20 .icon li a {
            /*width: 35px;
            height: 35px;*/
            /*line-height: 35px;*/
            background: #444;
            /*border-radius: 50%;*/
            /*margin: 0 3px;*/
            padding: 8px;
            color: #fff;
            text-align: center;
            transition: all .5s ease 0s;
        }

            .box20 .icon li a:hover {
                background: #fff;
                color: #000000;
            }

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

@media only screen and (max-width:479px) {
    .box20 .title {
        font-size: 20px;
    }
}