@media screen and (max-width: 992px) { /* Mobile & Tablets */
    .nav-container { /* We would like the navbar container (_intro/intro.html:30:32) to be full width */
        max-width: 100% !important; /* Therefore we are overriding the Bootstrap 4 .container default style, to make the maximum with equal to 100% */
        margin: 0; /* We are also removing margins and paddings */
        padding: 0;
    }

    .navbar.is-fixed { /* The is-fixed class is being added/removed to/from the navbar (top menu) using jQuery on scroll. (js/script.js:3-7) */
        position: fixed !important; /* We are making the navbar fixed */
        top: 0; /* To the top */
        z-index: 100;
        background-color: #000; /* With a black background color */
        border-bottom: 1px solid #fff; /* A white bottom border - to separate it from other content */
        width: 100%; /* And a 100% width */
    }
}

@media screen and (max-width: 768px) { /* Mobile */
    .left_aside .sidebar-collapse:focus, .left_aside .sidebar-collapse:active, .left_aside .sidebar-collapse:visited, .left_aside .sidebar-collapse:hover {
        box-shadow: none;
        text-decoration: none;
        border: 0;
    }

    /* Sidebar Collapsed */

    .left_aside:not(.open) { /* While the sidebar is collapsed, we want to give it a shadow to separate it from the page contents */
        box-shadow: 0 1rem 3rem rgba(0,0,0,.2) !important;
    }

    .left_aside:not(.open) .menu { /* While the sidebar is collapsed, we will hide the menu (_intro/intro.html:115), keeping the sidebar header only (_intro/intro.html:111) */
        display: none;
        transition: all 300ms ease-in-out;
    }

    .left_aside .menu li {
        /* transform: translateX(-120px); */ /* Uncomment if you want links to slide from left */
        opacity: 0; /* We will also set the opacity of the sidebar links to 0, to make a fading effect when showing them */
    }

    .left_aside .sidebar-header .sidebar-collapse::after { /* Here is the "hamburger" (3 bars) icon from Font Awesome 5 */
        content: "\f0c9";
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-style: normal;
        color: #000;
    }

    /* Sidebar Expanded */

    .left_aside.open .menu {
        display: block;
        animation: show-sidebar-menu 500ms ease-in-out; /* When the sidebar is expanded, we will run the "show-sidebar-menu" on the menu to show it */
        animation-fill-mode: forwards;
    }

    .left_aside.open .menu li {
        animation: show-sidebar-link 300ms ease-in-out; /* When the sidebar is expanded, we will run the "show-sidebar-link" on all sidebar links (li) to fade them in */
        animation-fill-mode: forwards;
        animation-delay: 250ms;
    }

    .left_aside.open .sidebar-header .sidebar-collapse {
        animation: show-sidebar-close 200ms ease-in-out; /* When the sidebar is expanded, we will run the "show-sidebar-close" on the sidebar toggle button (_intro/intro.html:113) to rotate it */
        animation-fill-mode: forwards;
    }

    .left_aside.open .sidebar-header .sidebar-collapse::after  {
        animation: show-sidebar-close 200ms ease-in-out; /* When the sidebar is expanded, we will run the "show-sidebar-close" on the sidebar toggle button::after (pseudo element) to change the icon */
        animation-fill-mode: forwards;
    }

    /* General */

    .right_content {
        padding-top: 50px;
    }
}

.nav-toggle {
    display: none;
}

@media screen and (max-width: 550px) { /* Very small devices */
    /* Floating Navigation */

    /* Navigation Hidden */
    .navbar {
        display: none;
        transition: all 200ms ease-in-out;
        overflow: hidden;
        box-shadow: 0px 0px 9px -1px #cecece;
    }

    .navbar .navbar-collapse .navbar-nav {
        overflow: auto;
        max-height: 80vh;
    }

    .nav-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 90px;
        right: 15px;
        width: 160px;
        /* height: 50px; */
        /* width: 50px; */
        background-color: #000;
        color: #fff;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-radius: 10px;
        /* border-radius: 50%; */
        z-index: 200;
        transition: all 200ms ease-in-out;
        box-shadow: 0px 0px 9px -1px #cecece;
    }

    .nav-toggle i {
        transition: all 300ms;
    }

    /* Navigation Expanded */
    .nav-toggle.is-fixed {
        top: 15px;
    }

    .nav-toggle.open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .nav-toggle.open i {
        transform: rotate(-90deg);
    }

    .navbar.open {
        display: flex;
        position: fixed;
        top: 138px;
        bottom: 10px;
        right: 15px;
        z-index: 999;
        background: #000;
        width: 160px;
        animation: slide-down-navbar 200ms ease-in-out;
        animation-fill-mode: forwards;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .navbar.open .navbar-nav {
        display: flex;
        flex-direction: column;
    }

    .navbar.reattach {
        top: 60px;
    }

    .navbar.reattach .navbar-collapse .navbar-nav {
        max-height: 90vh;
    }
}

@media screen and (max-width: 876px) {
    .right_big_picture .header-pictures:first-child {
        display: grid; /* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */
        grid-template-columns: repeat(3, 1fr); /* Here we are defining a colums template to the grid, our grid will have 3 columns, with 1 fraction each - meaning, equal widthes for all 3 columns */
        grid-column-gap: 0;
    }

    .right_big_picture .header-pictures:nth-child(2) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);  /* Here we are defining a colums template to the grid, our grid will have 4 columns, with 1 fraction each - meaning, equal widthes for all 4 columns */
    }
}


/* Animations */

@keyframes show-sidebar-menu {
    0% {
        display: block;
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        height: auto;
    }
}

@keyframes show-sidebar-link {
    0% {
        /* transform: translateX(-120px); */ /* Uncomment if you want links to slide from left */
        opacity: 0;
    }

    100% {
        /* transform: translateX(0px); */ /* Uncomment if you want links to slide from left */
        opacity: 1;
    }
}

@keyframes show-sidebar-close {
    0% {
        content: "\f0c9";
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-style: normal;
        color: #000;
        transform: rotate(120deg);
    }

    100% {
        content: "\f00d";
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-style: normal;
        color: #000;
    }
}

@keyframes slide-down-navbar {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


/**/

.tooltip {
    z-index: 999;
}

#img-tooltip {
    position: absolute;
}