/* region ========== FONT ========== */
@font-face {
    font-family: 'nexa-bold';
    src: url("../fonts/nexa-bold/nexa-bold-webfont.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/nexa-bold/nexa-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/nexa-bold/nexa-bold-webfont.woff2") format("woff2"), url("../fonts/nexa-bold/nexa-bold-webfont.woff") format("woff"), url("../fonts/nexa-bold/nexa-bold-webfont.ttf") format("truetype"), url("../fonts/nexa-bold/nexa-bold-webfont.svg#svgFontName") format("svg");
    /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nexa-light';
    src: url("../fonts/nexa-light/nexa-light-webfont.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/nexa-light/nexa-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/nexa-light/nexa-light-webfont.woff2") format("woff2"), url("../fonts/nexa-light/nexa-light-webfont.woff") format("woff"), url("../fonts/nexa-light/nexa-light-webfont.ttf") format("truetype"), url("../fonts/nexa-light/nexa-light-webfont.svg#svgFontName") format("svg");
    /* Legacy iOS */
    font-weight: normal;
    font-style: normal; }
/* endregion ========== FONT ========== */

/* region ========== BASIC ========== */

* {
    font-family: "nexa-light", "calibri", "serif", "sans-serif";
    border-radius: 0 !important;
    color: white;
}

a {
    font-weight: bold;
}

body, h1, h2, h3, h4, h5, h6, span, ul, li, p {
    margin: 0;
    padding: 0;
}

body {
    background-color: #161616;
    overflow: hidden;
    height: auto;
    width: auto;
}

h1, h2, h3, h4, h5, h6, span {
    font-family: "nexa-bold", "calibri", "serif", "sans-serif";
}

ul, li {
    list-style-type: none;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */
}

/* endregion ========== BASIC ========== */

/* region ========== PAGE ========== */

#page_wrapper {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-areas:
        "showcase_header showcase_header"
        "showcase_navigation showcase_list";
    grid-template-rows: 100px 1fr;
    grid-template-columns: 300px 1fr;
}

/* endregion ========== PAGE ========== */

/* region ========== HEADER ========== */

#showcase_header {
    grid-area: showcase_header;
    display: flex;
    background-color: #2E2E2E;
}

#header_logo {
    align-self: center;
    margin: 10px 10px 0 10px;
}

#header_logo img {
    height: 75px;
}

#header_title {
    font-size: 32px;
    align-self: flex-end;
    color: #FFD051;
    font-family: "nexa-bold", "calibri", "serif", "sans-serif";
    font-weight: bold;
}

#header_more {
    display: none;
}

/* endregion ========== HEADER ========== */

/* region ========== NAVIGATION ========== */

#showcase_navigation {
    grid-area: showcase_navigation;
    background-color: #2E2E2E;
    /*border-top-right-radius: 0.25rem;*/
    overflow: auto;
    padding: 5px;
}

#showcase_navigation_title {
    line-height: 60px;
    font-size: 32px;
    margin: 0 0 0 10px;
    color: #FFD051;
}

.showcase_navigation_categories {
    padding-left: 20px;
    color: #FFD051;
    margin-top: 10px;
}

.active_categorie, .showcase_navigation_categories:hover {
    background-color: #ffd051;
    color: #FFFFFF;
}

.showcase_navigation_items {
    padding-left: 30px;
    color: #FFFFFF;
}

.showcase_navigation_items:hover {
    background-color: #161616;
}

/* endregion ========== NAVIGATION ========== */

/* region ========== LIST ========== */

#showcase_list {
    grid-area: showcase_list;
    /*background-color: #2E2E2E;*/
    overflow: hidden;
    position: relative;
}

/* endregion ========== LIST ========== */

/*region ========== ITEMS ==========*/

.showcase_item {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 165px;
    height: 165px;
    /*margin: 5px;*/
    float: left;
    overflow: hidden;
}

.showcase_item:hover {
    background-color: #2E2E2E !important;
}

.showcase_item:hover i {
    color: #FFD051 !important;
}

#showcase_item_logo {
    margin-top: 10px;
}

#showcase_item_title {
    font-size: 20px;
    text-align: center;
    font-family: "nexa-light", "calibri", "serif", "sans-serif";
    font-weight: bold;
    white-space: nowrap;
}

/*endregion ========== ITEMS ==========*/

/* region ========== FULLSCREEN ========== */

#showcase_fullscreen {
    display: grid;
    grid-template-areas:
        "fullscreen_navigation fullscreen_description fullscreen_description"
        "fullscreen_navigation fullscreen_description fullscreen_description";
    grid-template-rows: 60% 40%;
    grid-template-columns: 250px 1fr;
    margin: 5px;
    z-index: 10000;
    width: 165px;
    height: 165px;
    background-color: #9fcdff;
    position: absolute;
    top: 0;
    overflow: hidden;
}

#showcase_fullscreen_navigation {
    grid-area: fullscreen_navigation;
    display: grid;
    grid-template-areas:
            "fullscreen_navigation_logo"
            "fullscreen_navigation_texte"
            "fullscreen_navigation_run";
    grid-template-rows: 250px auto auto;
    grid-template-columns: 1fr;
    width: 100%;
    height: fit-content;
    /*max-height: 100%;*/
    padding-left: 20px;
}

#showcase_fullscreen_logo_div {
    grid-area: fullscreen_navigation_logo;
    display: grid;
    align-items: center;
    justify-items: center;
    height: 230px;
}

#showcase_fullscreen_navigation_text {
    grid-area: fullscreen_navigation_texte;
    align-self: center;
    margin-left: 10px;
    padding: 0 20px;
}

#showcase_fullscreen_navigation_name {
    font-size: 180%;
}

#showcase_fullscreen_navigation_difficulty_div {
    display: flex;
    align-items: center;
    margin-top: 50px;
}

#showcase_fullscreen_navigation_difficulty_img {
    width: 25px;
    height: 25px;
    margin-right: 12.5px;
}

#showcase_fullscreen_navigation_run_div {
    grid-area: fullscreen_navigation_run;
    justify-self: center;
    align-self: center;
    width: 75%;
    padding: 50px 0;
}

#showcase_fullscreen_header {
    grid-area: fullscreen_header;
    width: 100%;
    height: 100%;
}

#showcase_fullscreen_close {
    position: absolute;
    right: 5px;
    top: 7.5px;
    color: white;
    z-index: 1000;
}

#showcase_fullscreen_carousel_div {
    grid-area: fullscreen_carousel;
    /*background-color: rgba(0, 0, 0, 0.125);*/
    display: grid;
    align-items: center;
    justify-items: center;
    width: 65%;
    height: 55%;
    position: relative;
    overflow: hidden;
    float: right;
    margin-bottom: 5px;
}

#showcase_fullscreen_carousel {
    width: 92.5%;
}

#showcase_fullscreen_description_div {
    grid-area: fullscreen_description;
    width: 100%;
    height: 100%;
    padding: 40px 40px 0 0;
    overflow: auto;
}

#showcase_fullscreen_description {
    font-size: 1.25rem;
    font-family: "nexa-light", "calibri", "serif", "sans-serif";
    line-height: 1.75em;
    font-weight: 300;
    margin-top: 30px;
    text-align: justify;
}

/* endregion ========== FULLSCREEN ========== */

/* region ========== BUTTONS ========== */

.btn-outline-moonify {
    color: #FFD051;
    background-color: transparent;
    background-image: none;
    border-color: #FFD051;
}

.btn-outline-moonify:hover {
    color: #2E2E2E;
    background-color: #FFD051;
    border-color: #FFD051;
}

.btn-outline-moonify:focus, .btn-outline-moonify.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-moonify.disabled, .btn-outline-moonify:disabled {
    color: #FFD051;
    background-color: transparent;
}

.btn-outline-moonify:not(:disabled):not(.disabled):active, .btn-outline-moonify:not(:disabled):not(.disabled).active,
.show > .btn-outline-moonify.dropdown-toggle {
    color: #2E2E2E;
    background-color: #FFD051;
    border-color: #FFD051;
}

.btn-outline-moonify:not(:disabled):not(.disabled):active:focus, .btn-outline-moonify:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-moonify.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 208, 81, 0.5);
}

/* endregion ========== BUTTONS ========== */

/* region ========== LISTS ========== */

.list-group-item {
    padding: .5rem 1rem;
    border: inherit;
}

.list-group-item-moonify {
    color: #FFD051 !important;
    font-size: 1.5rem;
    background-color: #2E2E2E;
    border-top: 1px solid #2E2E2E;
    border-bottom: 1px solid #2E2E2E;
}

.list-group-item-moonify.list-group-item-action:hover, .list-group-item-moonify.list-group-item-action:focus {
    color: #FFFFFF !important;
    background-color: #161616;
}

.list-group-item-moonify.list-group-item-action.active {
    color: #FFFFFF !important;
    background-color: #161616;
    border-color: transparent;
    border-top: 1px solid #2E2E2E;
    border-bottom: 1px solid #2E2E2E;
}

/* endregion ========== LISTS ========== */

/* region ========== TRANSITION ========== */

.showcase_navigation_categories, .active_categorie, .showcase_navigation_categories:hover,
.showcase_navigation_items, .showcase_navigation_items:hover, .showcase_item,
.showcase_item_hover:hover, .showcase_item_hover:hover i {
    -o-transition: background 0.15s, box-shadow 0.15s;
    -moz-transition: background 0.15s, box-shadow 0.15s;
    -webkit-transition: background 0.15s, box-shadow 0.15s;
    transition: background 0.15s, box-shadow 0.15s;
}

.list-group-item-moonify:hover {
    -o-transition: background 0.15s, box-shadow 0.15s !important;
    -moz-transition: background 0.15s, box-shadow 0.15s !important;
    -webkit-transition: background 0.15s, box-shadow 0.15s !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}

/* endregion ========== TRANSITION ========== */

/* region ========== RESPONSIVE ========== */

@media screen and (max-width: 1250px) {
    #page_wrapper {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-areas:
            "showcase_header"
            "showcase_list";
        grid-template-rows: 75px 1fr;
        grid-template-columns: 1fr;
    }

    #showcase_header {
        position: fixed;
        left: 0;
        right: 0;
        height: 75px;
    }

    #header_title {
        font-size: 20px;
    }

    #header_more {
        display: block !important;
        position: fixed;
        right: 20px;
    }

    #header_more i {
        color: #FFD051 !important;
        line-height: 75px;
        font-size: 40px;
    }

    #header_logo img {
        width: 200px;
        height: auto;
    }

    #header_more {
        display: none;
    }

    #showcase_navigation {
        display: none;
    }

    .showcase_navigation_active {
        display: block !important;
        position: absolute;
        top: 75px;
        left: 0;
        right: 0;
        z-index: 30000;
        height: fit-content;
    }

    #showcase_list {
        padding-bottom: 75px;
    }

    #showcase_fullscreen {
        display: grid;
        grid-template-areas:
                "fullscreen_navigation"
                "fullscreen_description";
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
        margin: 5px;
        z-index: 1000;
        width: 17vh;
        height: 17vh;
        background-color: #9fcdff;
        position: absolute;
        top: 0;
        overflow: auto !important;
    }

    #showcase_fullscreen_navigation {
        grid-area: fullscreen_navigation;
        display: grid;
        grid-template-areas:
                "fullscreen_navigation_logo fullscreen_navigation_texte"
                "fullscreen_navigation_logo fullscreen_navigation_run";
        grid-template-rows: 75px 100px;
        grid-template-columns: 40% 1fr;
        padding: 10px 10px 10px 0;
    }

    #showcase_fullscreen_logo {
        font-size: 100px;
    }

    #showcase_fullscreen_navigation_text {
        display: grid;
        margin: 15px 0 0 0;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
    }

    #showcase_fullscreen_carousel {
        width: 100%;
    }

    #showcase_fullscreen_close {
        top: 5px;
        right: 0px;
        font-size: 25px;
    }

    #showcase_fullscreen_navigation_run_div {
        justify-self: inherit;
        padding: 0;
        margin-bottom: 20px;
        align-self: flex-end;
    }

    #showcase_fullscreen_navigation_difficulty_div {
        margin: 10px 0 0 0;
    }

    #showcase_fullscreen_carousel_div {
        float: inherit;
        width: 100%;
        height: 40%;
        margin: 0;
    }

    #showcase_fullscreen_description_div {
        overflow: unset;
        padding: 10px;
    }
}

@media screen and (max-width: 400px) {
    #header_logo {
        margin: 10px 5px 0 10px;
    }

    #header_logo img {
        width: 175px;
        height: auto;
    }

    #header_title {
        margin-bottom: 4px;
    }

    #header_more {
        right: 5px;
    }

    #showcase_fullscreen_description_div {
        overflow: unset;
        padding: 10px;
    }

    #showcase_fullscreen_carousel_div {
        margin: 0;
    }
}

.lootgame.fa-5x {
	background-image: url("../images/loot-logo-original.png");
	width: 100px;
	height: 80px;
	background-repeat: no-repeat;
	background-position: center;
}

.lootgame.fa-9x {
	background-image: url("../images/loot-logo-original-big.png");
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
	background-position: center;
}


/* endregion ========== RESPONSIVE ========== */

/* region ========== CSSSECTION ========== */

/* endregion ========== CSSSECTION ========== */