/* 3D Animatics */
    
    @font-face {
        font-family: 'Poppins', sans-serif;
        src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    }
    
     :root {
        /* colors */
        --main-color: #ea463d;
        --second-color: #6A2696;
        --third-color: #FFBF00;
        --fourth-color: #83D302;
        --fifth-color: #00BDD6;
        /* soft-colors */
        --main-color-soft: #ffe4e2;
        --second-color-soft: #f0d9ff;
        --third-color-soft: #fff1c8;
        --fourth-color-soft: #f0ffd8;
        --fifth-color-soft: #d2faff;
        /* hovers */
        --main-hover-color: #762723;
        --second-hover-color: #40175b;
        --third-hover-color: #a07f1c;
        --fourth-hover-color: #4e6f18;
        --fifth-hover-color: #125159;
        /* hover */
        --hover-main-color: #451664;
        --hover-second-color: #2a6a97;
        --hover-third-color: #ca873b;
        --hover-fourth-color: #989b9e;
        --hover-fifth-color: #e0c25f;
        /* neutral colors */
        --white-color: #fff;
        --light-color: #e6e6e6;
        --gray-color: #999999;
        --dark-color: #333;
        --hard-dark-color: #000;
        /* bg-colors */
        --bg-main-color: #00c492;
        --bg-second-color: #e1ffea;
        --bg-light-second-color: #eefff3;
        --bg-third-color: #7AFADA;
        --bg-fourth-color: #FA997A;
        --bg-fifth-color: #AD5032;
        /* bg-neutral colors */
        --bg-white-color: #fff;
        --bg-light-color: #e6e6e6;
        --bg-gray-color: #999999;
        --bg-dark-color: #333;
        --bg-hard-dark-color: #000;
        /* other colors */
        --whats-color: #00f078;
        --facebook-color: #1877F2;
        --twitter-color: #1DA1F2;
        --pinterest-color: #BD081C;
        --linkedin-color: #0A66C2;
        --link-color: #34465D;
        --whats-second-color: #128C7E;
        --whats-hover-color: #1b6c43;
        /* fonts */
        --poppins: 'Poppins', sans-serif;
        --size-10px: 10px;
        --size-12px: 12px;
        --size-14px: 14px;
        --size-16px: 16px;
        --size-18px: 18px;
        --size-20px: 20px;
        --size-24px: 24px;
        --size-28px: 28px;
        --size-34px: 34px;
        --size-38px: 38px;
        --size-46px: 46px;
        --size-54px: 54px;
        --size-64px: 64px;
        --size-72px: 72px;
        --size-88px: 88px;
        --box-shadow-1: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        --box-shadow-2: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
        --box-shadow-3: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    /* blog page */
    
    .blog-community-title {
        margin: 10px 0;
        font-size: .8rem;
        text-transform: uppercase;
        font-weight: 600;
        margin: 30px 0;
    }
    
    .blog-community-title * {
        color: var(--hard-dark-color) !important;
    }
    
    .blog-notice {
        /* margin-top: 3.5rem; */
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 60% auto;
    }
    
    .content-1 .title,
    .category,
    .related-div span {
        font-size: .9rem;
        margin: 10px 0;
    }
    
    .content-1 i,
    .related-div i {
        color: var(--main-color) !important;
    }
    
    .content-3 ul>li {
        list-style-type: none !important;
    }
    
    .content-4 {
        position: relative;
        text-align: center;
        margin: 30px 0;
    }
    
    .share {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        bottom: 2rem;
        left: 0rem;
    }
    
    .content-5 p,
    .content-5 span,
    .content-5 li {
        font-size: 14px !important;
        text-align: justify;
        margin: 0;
    }
    
    .content-5 p img {
        width: 100% !important;
    }
    
    .academy-avatar {
        display: flex;
        align-items: center;
        margin: 10px 0;
    }
    
    .academy-avatar img {
        width: 40px;
        border-radius: 50%;
    }
    
    .academy-class {
        padding: 0 10px;
    }
    /* related */
    
    .text-related {
        font-size: 14px;
        font-weight: 500;
        margin: 20px 0;
    }
    
    .grid-related {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 89px;
    }
    
    .flex-related {
        display: grid;
        grid-template-columns: 30% auto;
    }
    
    .related-img img {
        width: 100%;
        border-radius: 5px;
    }
    
    .related-card {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 10px;
    }
    
    .title-related {
        font-size: var(--size-14px);
        color: #252525;
        font-weight: 500;
    }
    
    .description-related {
        font-size: 12px;
        color: #777777;
    }
    
    .flex-related:hover * {
        color: var(--main-color);
        transition: .3s ease-in-out;
    }
    /* buttons */
    
    .text-blog-main {
        color: var(--main-color) !important;
        transition: .5s ease-in-out;
    }
    
    .text-blog-main:hover,
    .text-blog-main:focus,
    .text-blog-main:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    
    .text-blog-second {
        color: var(--second-color);
        transition: .5s ease-in-out;
        margin: 1rem 0;
        font-size: .8rem;
    }
    
    .text-blog-second:hover,
    .text-blog-second:focus,
    .text-blog-second:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--second-color) !important;
    }
    
    .btn-blog-main {
        width: auto;
        text-align: center;
        background-color: var(--main-color);
        color: var(--white-color) !important;
        border-radius: 5px;
        transition: .5s ease-in-out;
        margin: 1rem 0;
        font-size: .8rem;
    }
    
    .btn-blog-main:hover,
    .btn-blog-main:focus,
    .btn-blog-main:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--main-color) !important;
    }
    
    .btn-blog-second {
        width: auto;
        text-align: center;
        padding: 10px 20px;
        background-color: var(--second-color);
        color: var(--white-color) !important;
        border-radius: 10px;
        transition: .5s ease-in-out;
        margin: 1rem 0;
        font-size: .8rem;
    }
    
    .btn-blog-second:hover,
    .btn-blog-second:focus,
    .btn-blog-second:active {
        border: 1px solid var(--hover-main-color);
        background-color: transparent;
        color: var(--second-color) !important;
    }
    /* share */
    
    .share {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        top: 34%;
        left: 0rem;
        z-index: 0;
    }
    
    .share a {
        padding: 20px;
        background-color: var(--white-color);
        font-weight: 500;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
    #facebook-share i {
        color: var(--facebook-color) !important;
    }
    
    #linkedin-share i {
        color: var(--linkedin-color) !important;
    }
    
    #twitter-share i {
        color: var(--twitter-color) !important;
    }
    
    #pinterest-share i {
        color: var(--pinterest-color) !important;
    }
    
    #whatsapp-share i {
        color: var(--whats-color) !important;
    }
    
    #link-share i {
        color: var(--link-color) !important;
    }
    
    .share-title {
        visibility: hidden;
    }
    
    .alert-copied {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: rgb(196, 255, 213);
        color: rgb(26, 54, 16);
        padding: 10px;
    }
    /* lg */
    
    @media screen and (max-width: 1919px) {
        .alert-copied {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: rgb(196, 255, 213);
            color: rgb(26, 54, 16);
            padding: 10px;
        }
        .share {
            position: fixed;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            top: 41%;
            left: 0rem;
            z-index: 0;
        }
        .share a {
            padding: 10px;
            background-color: var(--white-color);
            font-weight: 500;
        }
        #facebook-share i {
            color: var(--facebook-color) !important;
        }
        #linkedin-share i {
            color: var(--linkedin-color) !important;
        }
        #twitter-share i {
            color: var(--twitter-color) !important;
        }
        #pinterest-share i {
            color: var(--pinterest-color) !important;
        }
        #whatsapp-share i {
            color: var(--whats-color) !important;
        }
        #link-share i {
            color: var(--link-color) !important;
        }
    }
    /* md */
    
    @media (min-width: 978.98px) and (max-width: 1199.98px) {}
    /* sm iPad Air */
    
    @media (min-width: 768px) and (max-width: 979px) {
        /* blog page */
        .blog-notice {
            margin-top: 3.5rem;
            display: grid;
            grid-gap: 2rem;
            grid-template-columns: repeat(1, 1fr);
        }
    }
    /* xs */
    
    @media (max-width: 480px) {
        .alert-copied {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: rgb(196, 255, 213);
            color: rgb(26, 54, 16);
            padding: 10px;
        }
        .share-title {
            display: none;
        }
        .share {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            top: -259px;
            left: 0;
            z-index: 0;
        }
        .share a {
            padding: 0 10px;
            background-color: var(--white-color);
            font-weight: 500;
        }
        .img-hover-zoom {
            height: 195px;
            overflow: hidden;
        }
        /* blog page */
        .blog-notice {
            margin-top: 3.5rem;
            display: grid;
            grid-gap: 2rem;
            grid-template-columns: repeat(1, 1fr);
        }
    }