/* 3D Animatics */
    
    @font-face {
        font-family: 'Poppins', sans-serif;
        src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype'), url('../fonts/Montserrat/Montserrat-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;
        --whats-second-color: #128C7E;
        --whats-hover-color: #1b6c43;
        /* fonts */
        --poppins: 'Poppins', sans-serif;
        --montserrat: 'Montserrat', 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;
    }
    
    .main-form {
        background-color: #f9f9f9;
    }
    /* blog community */
    
    .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-community-grid {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 70% auto;
    }
    
    .blog-flex-main {
        display: flex;
        flex-direction: column;
    }
    /* flex-card-post */
    
    .grid-card-post {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2rem;
        margin-bottom: 50px;
    }
    
    .flex-card-post {
        position: relative;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        background-color: var(--white-color);
        transition: .3s ease-in-out;
    }
    
    .flex-card-post:hover {
        box-shadow: var(--box-shadow-3);
    }
    
    .flex-card-post:hover .blog-card-title {
        color: var(--main-color);
    }
    
    .img-card-post-community img {
        width: 100%;
        border-radius: 10px 10px 0 0;
        object-fit: cover;
        height: 250px;
        transition: transform .5s ease;
    }
    
    .img-card-post-community {
        overflow: hidden;
    }
    
    .img-card-post-community:hover img {
        transform: scale(1.1);
    }
    
    .blog-card-content-community {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
    }
    
    .blog-card-title {
        font-family: var(--montserrat);
        font-weight: 600;
        font-size: 16px;
        color: var(--hard-dark-color);
        margin: 10px 0;
        transition: .3s ease-in-out;
    }
    
    .blog-card-content {
        color: var(--hard-dark-color);
        font-size: 12px;
        margin: 10px 0;
    }
    
    .blog-card-release {
        text-transform: uppercase;
        color: var(--gray-color);
        font-size: 10px;
    }
    /* blog-navbar-left */
    
    .filter-body {
        padding: 10px;
        background-color: var(--white-color);
        width: 100%;
    }
    
    .filter-body input::placeholder {
        font-size: .8rem;
        color: #d3d3d3;
    }
    
    .blog-navbar-left {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .avatar-img img {
        width: 80px;
    }
    
    .flex-card-reference {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--white-color);
        border-radius: 10px;
        padding: 10px;
    }
    
    .reference-title {
        font-family: var(--montserrat);
        font-weight: 600;
        font-size: 16px;
        color: var(--hard-dark-color);
        margin: 10px 0;
        transition: .3s ease-in-out;
    }
    
    .reference-content {
        font-size: .8rem;
        margin: 10px 0;
    }
    
    .reference-social-media span {
        font-size: 12px;
        text-transform: uppercase;
    }
    
    .reference-social-media a {
        font-size: 1rem;
        color: var(--hard-dark-color);
    }
    /* events-title-reference */
    
    .events-title-reference {
        position: relative;
        margin: 30px 0;
        padding: 0 10px;
        font-family: var(--montserrat);
        font-weight: 600;
        font-size: 16px;
        color: var(--hard-dark-color);
    }
    
    .events-title-reference a {
        color: var(--hard-dark-color);
    }
    /* flex-body-mostevent */
    
    .flex-body-mostevent {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .flex-card-mostevent {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 10px;
        padding: 5px;
    }
    
    .flex-a-mostevent {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 60% auto;
        transition: ease-in-out .3s;
        background-color: var(--white-color);
        padding: 10px;
        margin: 10px 0;
    }
    
    .content-mostevent {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .flex-a-mostevent:hover .title-mostevent {
        color: var(--main-color);
    }
    
    .title-mostevent {
        font-family: var(--montserrat);
        font-weight: 600;
        font-size: 14px;
        color: var(--hard-dark-color);
    }
    
    .release-mostevent {
        text-transform: uppercase;
        color: var(--gray-color);
        font-size: 10px;
    }
    
    .img-mostevent {
        overflow: hidden;
    }
    
    .img-mostevent img {
        width: 80%;
        border-radius: 10px;
        transition: transform .5s ease;
    }
    
    .img-mostevent:hover img {
        transform: scale(1.1);
    }
    
    .blog-card-title h1 {
        font-size: 1rem;
    }
    /* lg */
    
    @media screen and (min-width: 1900px) {
        .sticky {
            position: fixed;
            top: 10%;
            width: 20%;
            background-color: var(--white-color);
            right: 15%;
        }
    }
    /* md */
    
    @media (min-width: 978.98px) and (max-width: 1899.98px) {
        .sticky {
            position: fixed;
            top: 10%;
            width: 25%;
            background-color: var(--white-color);
            right: 5%;
        }
    }
    /* sm iPad Air */
    
    @media (min-width: 768px) and (max-width: 979px) {
        .filter-body {
            position: fixed;
            bottom: 0;
            width: calc(100% - 80px);
            padding: 10px;
            z-index: 9;
            background-color: var(--white-color);
        }
        .sticky {
            position: relative;
        }
        /* blog page */
        .blog-community-grid {
            grid-template-columns: repeat(1, 1fr);
        }
        .grid-card-post {
            grid-template-columns: repeat(2, 1fr);
        }
        .img-card-post-community img {
            height: 180px;
        }
        .blog-card-title {
            font-size: 0.8rem;
        }
        .blog-card-content {
            font-size: 0.7rem;
        }
    }
    /* xs */
    
    @media (max-width: 480px) {
        .blog-navbar-left {
            align-items: center !important;
        }
        .filter-body {
            position: fixed;
            bottom: 0;
            width: calc(100% - 20px);
            padding: 10px;
            z-index: 9;
            background-color: var(--white-color);
        }
        .sticky {
            position: relative;
        }
        /* blog page */
        .blog-community-grid {
            grid-template-columns: repeat(1, 1fr);
        }
        .grid-card-post {
            grid-template-columns: repeat(1, 1fr);
        }
    }