@media screen and (max-width:1340px) {
    div#cards_container {
        grid-template-columns: repeat(4, 18%);
    }
}

@media screen and (max-width:1100px) {
    div#cards_container {
        grid-template-columns: repeat(3, 22%);
    }
}


/* @media screen and (max-width:900px) {
    .logo {
        display: none;
    }
} */

@media screen and (max-width:1100px) {
    div.main_container,
    div.second_container {
        display: flex;
        flex-direction: column;
    }
    div.page_grid_layout {
        grid-template-columns: 40% 60%;
    }
}

@media screen and (max-width:850px) {
    div#cards_container {
        grid-template-columns: repeat(2, 40%);
    }
    div#page_grid_layout {
        display: flex;
        flex-direction: column;
        gap: 30px;
        overflow: auto;
    }
    nav#navigation h1 {
        margin: 4px 0;
    }
    div.display>ul {
        flex-direction: column;
        align-items: center;
    }
    nav#navigation ul li {
        font-size: 1rem;
        padding: 10px;
        margin: 0;
        background-color: #ffffff;
        border-radius: 4px;
    }
    div.display {
        display: flex;
    }
    div.display>div.banner {
        display: none;
    }
    div.display>div {
        flex-shrink: 0;
    }
    div#posts_viewer {
        height: auto;
        max-height: fit-content;
    }
    div#posts_viewer p {
        width: auto;
        padding: 6px 10px;
    }
    div#logo_header {
        width: calc(100vw - 70vw);
    }
    div#logo_header {
        max-width: 150px;
    }
    ul.videos_thumb {
        gap: 15px;
    }
    nav#navigation h1 {
        font-size: 1rem;
    }
}

@media screen and (max-width:750px) {
    div.row {
        flex-direction: column;
    }
    .fg {
        flex: 0 0 auto;
    }
    .f_input {
        min-width: unset;
    }
    ul.videos_thumb li h3 {
        font-size: 1rem;
    }
    ul.videos_thumb li h4 {
        font-size: 0.8rem;
    }
}

@media screen and (max-width:600px) {
    body {
        background-color: #153858;
        background-image: none;
    }
    .page {
        overflow: initial;
        height: auto;
    }
    div#user-info a span {
        display: none;
    }
    div#cards_container {
        grid-template-columns: repeat(1, 90%);
    }
    div#slider_container>div {
        display: flex;
        flex-direction: column;
    }
    #anim {
        width: 100vw;
        height: 100vh;
    }
    .top-area {
        flex-direction: column;
        align-items: center;
        overflow: visible;
    }
    nav.navigation {
        width: 100%;
        flex-direction: column;
    }
    nav.navigation img {
        max-height: 120px;
    }
    nav.navigation .credits {
        flex-direction: column;
    }
    #navbar-menu ul li a {
        font-size: 1rem;
    }
    div#user-info i {
        font-size: 2rem;
    }
    #navbar-menu {
        overflow: auto;
    }
    #navbar-menu ul li {
        padding: 10px;
    }
    #navbar-menu ul {
        gap: 10px;
        margin: 0;
    }
    div#user-info {
        position: absolute;
        top: 10px;
        left: 0;
    }
    .logout_form {
        position: absolute;
        top: 0;
        right: 0;
    }
    div.page_grid_layout {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: auto;
    }
    div.display {
        justify-content: space-between;
        flex: 1;
    }
    div#video_container,
    div#posts_viewer {
        position: absolute;
        display: none;
        height: 100%;
        top: 0;
        backdrop-filter: blur(5px);
    }
    div#video_container.visible,
    div#posts_viewer.visible {
        display: flex;
    }
    div#posts_viewer {
        background-color: white;
        justify-content: flex-start;
    }
    video {
        width: 100%;
    }
    div#webinar_page div.page_grid_layout {
        height: auto;
        background-color: transparent;
    }
    div#webinar_page nav#navigation {
        border: none;
        overflow: auto;
    }
    div.page_header div.banner {
        display: none;
    }
    div.page_default_layout div.center_text p {
        text-align: center;
    }
    ul.videos_thumb li:hover {
        box-shadow: none;
    }
    ul.videos_thumb li h3 {
        font-size: 1rem;
    }
    ul.videos_thumb li h4 {
        font-size: 0.8rem;
    }
    button#close_viewer {
        display: block !important;
    }
}