/* general */

.flex-container {
    display: flex;
}

.flex-right {
    flex-grow: unset;
    flex-shrink: unset;
    flex-basis: unset;
    margin-left: auto;
    margin-right: 0;
}

.title {
    position: absolute;
    background-color: black;
    color: white;
    padding: auto;
    width: fit-content;
    top: 30%;
    right: 20%;
    z-index: 5;
}

#title>img {
    display: block;
    height: 33vw;
    object-fit: cover;
}

#title>img.top {
    object-position: top;
}

#title>img.bottom {
    object-position: bottom;
}

#title {
    width: 100%;
    position: relative;
    display: block;
}

#title>div {
    position: absolute;
    /* bottom: 10%; */
    bottom: 0;
    right: 10%;
    text-align: center;
    color: white;
    padding: 2vw;
}


.padding {
    padding: 1em;
}

.margin {
    margin: 1em;
}

.hidden {
    display: none;
}

.center {
    text-align: center;
    margin: auto;
    justify-content: center;
}

.center-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reader,
.mobile-reader {
    padding-top: 10px;
    padding-bottom: 10px;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* article > *:not(img){
    padding: 5px;
} */

article>img {
    width: 100%;
}

article {
    margin: 0;
}

.full {
    width: 100%;
}

img {
    display: block;
}


/* Navbar */

.nav-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav a {
    /* padding-right: 1em; */
    /* padding-left: 1em; */
    padding: 1em;
    text-decoration: none;
}

.rounded {
    border-radius: 5px;
}

.rounded-top {
    border-radius: 5px 5px 0% 0%;
}

.rounded-bottom {
    border-radius: 0% 0% 5px 5px;
}

.nav-tabs>li>a {
    display: inline-block;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;

}

.nav-tabs>li {
    width: 100%;
    padding: 0;
}

.field {
    align-items: stretch;
}

.rm-decoration {
    text-decoration: none;
}

/* mobile first */

#logo {
    width: 100%;
}

.side-by-side {
    /* Disabled for mobile */
    display: flex;
    flex-direction: column;
}

.banner {
    margin-top: 0;
    margin-bottom: 0;
}

/* mobile exclusion */
@media (max-width : 1130px) {
    .only-dt {
        display: none;
    }

    .mobile-cap {
        width: 100%;
    }
}

@media (min-width : 1130px) {

    .mobile-reader {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .nav-tabs>li {
        width: auto;
    }


    .nav-tabs>li>a {
        text-align: center;
    }

    .rounded-dt-top {
        border-radius: 5px 5px 0% 0%;
    }

    .rounded-dt-bottom {
        border-radius: 0% 0% 5px 5px;
    }

    .rounded-dt {
        border-radius: 5px;
    }

    .nav-tabs>li {
        margin-right: 1em;
    }

    .mobile {
        display: none;
    }

    body>* {
        margin-left: 5rem;
        margin-right: 5rem;
    }

    #logo {
        width: 40%;
    }

    .side-by-side {
        align-items: stretch;
        flex-direction: row;
        margin: 0;
    }

    .side-by-side>* {
        flex: 1 1 0px;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .side-by-side>*:first-child {
        margin-left: 0rem;
    }

    .side-by-side>*:last-child {
        margin-right: 0rem;
    }

    .main-flex {
        flex-grow: 10;
    }

    .double-flex {
        flex-grow: 2;
    }

    .half-flex {
        flex-shrink: 2;
    }

    .double-flex>img {
        width: 100%;
    }

    .half-flex>img {
        width: 100%;
    }
}

body {
    position: relative;
}

#scroll-back {
    --offset: 50px;

    position: absolute;
    top: calc(100vh + var(--offset));

    right: 0;
    margin-right: 1em;

    bottom: 0;
}

#scroll-back a {
    position: sticky;
    top: calc(100vh - 8em);
    opacity: 0.8;
}

#scroll-back a img {
    width: 5em;
}


/* mobile specific */
@media (max-width : 1130px) {

    .mobile-center {
        text-align: center;
        margin: auto;
        justify-content: center;
    }

    .mobile-left {
        text-align: left;
    }

    .nav-container {
        position: fixed;
        display: none;
        overflow-y: auto;
        z-index: -1;
        top: 0;
        right: 0;
        width: 280px;
        height: 100%;
    }

    .nav-tabs {
        flex-direction: column;
        align-items: flex-end;
        margin-top: 80px;
        width: 100%;
    }

    .nav-tabs>li {
        padding-left: 1rem;
    }

    /* TODO:  click in empty => close  */
    :root {
        --menu-btn-size: 3em;
    }

    .menu-btn {
        position: relative;
        display: block;
        margin: 0;
        width: 2em;
        height: calc(var(--menu-btn-size)*0.8);
        cursor: pointer;
        z-index: 2;
        padding: 1em;
        padding-bottom: 0.5em;
        border-radius: 1em;
    }

    .menu-btn .menu {
        display: block;
        width: 100%;
        /* height: 0.15em; */
        height: calc(var(--menu-btn-size) / 10);
        /* border-radius: 0.15em; */
        border-radius: calc(var(--menu-btn-size) / 10);
    }

    .menu-btn .menu:nth-child(2) {
        /* margin-top: 0.3em; */
        margin-top: calc(var(--menu-btn-size) / 5);
        opacity: 1;
    }

    .menu-btn .menu:nth-child(3) {
        /* margin-top: 0.3em; */
        margin-top: calc(var(--menu-btn-size) / 5);
    }

    #menuToggle:checked+.menu-btn .menu {
        transition: transform 0.2s ease;
    }

    #menuToggle:checked+.menu-btn .menu:nth-child(1) {
        transform: translate3d(0, calc(var(--menu-btn-size) / 5), 0) rotate(45deg);
    }

    #menuToggle:checked+.menu-btn .menu:nth-child(2) {
        transform: rotate(-45deg) translate3d(-5.71429px, calc(var(--menu-btn-size) * -2 / 5), 0);
        opacity: 0;
    }

    #menuToggle:checked+.menu-btn .menu:nth-child(3) {
        transform: translate3d(0, calc(var(--menu-btn-size) * -2 / 5), 0) rotate(-45deg);
    }

    #menuToggle:checked~.nav-container {
        z-index: 1;
        display: flex;
        animation: menu-slide-left 0.3s ease;
    }

    @keyframes menu-slide-left {
        0% {
            transform: translateX(200px);
        }

        to {
            transform: translateX(0);
        }
    }
}