/*-----------------------------------------------------------------------
			MOBILE CONFIGURATION (portrait orientation)
-----------------------------------------------------------------------*/

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>  FONTS  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
@font-face {
    font-family: 'playfair_displayregular';
    src: url('../../fonts/playfairdisplay-regular-webfont.woff2') format('woff2'),
         url('../../fonts/playfairdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'courier_primeregular';
    src: url('../../fonts/courier_prime-webfont.woff2') format('woff2'),
         url('../../fonts/courier_prime-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lobster_tworegular';
    src: url('../../fonts/lobstertwo-regular-webfont.woff2') format('woff2'),
         url('../../fonts/lobstertwo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>  VARIABLES  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
html {
    /* PAGES & POPUPS */
    --popup_top_bottom_padding_px: var(--page_top_bottom_padding_px);
    --popup_left_right_padding_px: var(--page_left_right_padding_px);
    /* COLORS */
        --khaki_color: rgba(95, 95, 64, 1);
        /* BROWN */
        --darkbrown_color: rgba(118, 95, 66, 1);
        --brown_color: rgba(133, 109, 79, 1);
        --lightbrown_color: rgba(167, 148, 125, 1);
        /* BOOKS */
        --creme_color: rgba(234, 224, 204, 1);
        --lightpink_color: rgba(201, 173, 161, 1);
        --darkgreen_color: rgba(32, 61, 76, 1);
        --green_color: rgba(77, 106, 109, 1);
        --lightgreen_color: rgba(121, 132, 120, 1);
        --verylightgreen_color: rgba(160, 160, 131, 1);
        --darkblue_color: rgba(4, 39, 77, 1);
        --blue_color: rgba(46, 76, 110, 1);
        /* RIBBON */
        --ribbon_main_color: var(--verylightgreen_color);
        --ribbon_medium_color: rgba(143, 143, 108, 1);
        --ribbon_last_color: rgba(119, 119, 90, 1);
        --ribbon_shadow_color: var(--khaki_color);
    /* BOOKASTIC BUTTONS */
    --bookastic_button_font_size: 1.1rem;
    --help_button_font_size: 1rem;
    /* DROPDOWN NAV */
    --dropdown_nav_font_size: var(--bookastic_button_font_size);
    /* ELLIPSIS */
    --ellipsis_padding_left_rem: 0.1rem;
    --ellipsis_width_rem: 0.5rem;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>  CSS CLASSES  >>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
    /*-- FLEXBOX ------------------------------------------------------*/
    .flex {
        display: flex;
    }

    .inline-flex {
        display: inline-flex;
    }

    .flex-direction-column {
        flex-direction: column;
    }

    .flex-direction-row {
        flex-direction: row;
    }

    .justify-content-start {
        justify-content: start;
    }

    .justify-content-center {
        justify-content: center;
    }

    .justify-content-space-around {
        justify-content: space-around;
    }

    .justify-content-space-between {
        justify-content: space-between;
    }

    .justify-content-space-evenly {
        justify-content: space-evenly;
    }

    .align-items-center {
        align-items: center;
    }

    .align-items-flex-start {
        align-items: flex-start;
    }

    .align-items-flex-end {
        align-items: flex-end;
    }

    .align-content-space-evenly {
        align-content: space-evenly;
    }

    .align-self-center {
        align-self: center;
    }

    .align-self-flex-start {
        align-self: flex-start;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-grow-1 {
        flex-grow: 1;
    }

    /*-- ELLIPSIS -----------------------------------------------------*/
    .ellipsis,
    .reverse-ellipsis {
        position: relative;
        overflow-x: hidden;
    }
    
    .ellipsis::after,
    .reverse-ellipsis::before {
        content: '\02026';
        background-color: inherit;
        position: absolute;
        top: 0;
        padding-top: inherit;
        padding-bottom: inherit;
        width: var(--ellipsis_width_rem);
        color: inherit;
    }

    .ellipsis::after {
        padding-left: var(--ellipsis_padding_left_rem);
        padding-right: var(--ellipsis_padding_right_px);
        right: 0;
    }

    .reverse-ellipsis::before {
        padding-left: var(--ellipsis_padding_right_px);
        padding-right: var(--ellipsis_padding_left_rem);
        left: 0;
    }

    .ellipsis span {
        float: left;
    }
    
    .reverse-ellipsis span {
        float: right;
    }

    /*-- ANIMATIONS ---------------------------------------------------*/
    @keyframes slide-in-top {
		0% {
			transform: translateY(calc(0px - var(--page_container_height_px)));
            opacity: 0;
		}
		100% {
			transform: translateY(0);
            opacity: 1;
		}
	}

	.slide-in-top-animation {
        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

	@keyframes slide-out-top {
		0% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateY(calc(0px - var(--page_container_height_px)));
			opacity: 0;
		}
	}

	.slide-out-top-animation {
        animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    @keyframes slide-in-bottom {
		0% {
            transform: translateY(var(--page_container_height_px));
			opacity: 0;
		}
		100% {
            transform: translateY(0);
			opacity: 1;
		}
	}
  
	.slide-in-bottom-animation {
		animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

	@keyframes slide-out-bottom {
		0% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateY(var(--page_container_height_px));
			opacity: 0;
		}
	}
  
	.slide-out-bottom-animation {
		animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    /*-- TEXT GRADIENT ------------------------------------------------*/
    .text-gradient {
        background: linear-gradient(var(--brown_color) 15%, var(--lightbrown_color) 50%, var(--brown_color) 85%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

    /*-- BUTTONS ------------------------------------------------------*/
    .bookastic-button {
        border: 1px solid var(--brown_color);
        background-color: transparent;
        font-family: 'playfair_displayregular', serif;
        text-transform: uppercase;
        text-decoration: none;
        font-size: var(--bookastic_button_font_size);
        line-height: var(--bookastic_button_font_size);
        width: 100%;
        padding: calc(var(--bookastic_button_font_size) - 0.7rem) calc(var(--bookastic_button_font_size) + 0.4rem);
        cursor: pointer;
    }

    .help-button {
        border: 1px solid var(--brown_color);
        border-radius: 50%;
        font-size: var(--help_button_font_size);
        padding: calc(var(--help_button_font_size) - 0.9rem) calc(var(--help_button_font_size) - 0.4rem);
        vertical-align: calc(var(--help_button_font_size) - 0.9rem);
        margin: 0 var(--help_button_font_size);
        cursor: pointer;
    }

    /*-- OTHER --------------------------------------------------------*/
    .display-none {
        display: none;
    }

    .cursor-pointer {
        cursor: pointer;
    }

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>  GLOBAL  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
html {
    overflow: hidden;
}

* {
    box-sizing: border-box;
    outline: none;
    color: white;
}

body {
    background-color: black;
    font-family: 'playfair_displayregular', serif;
    position: relative;
}

.page-container {
    width: var(--page_container_width_px);
    height: var(--page_container_height_px);
    max-width: var(--page_container_max_width_px);
    margin: auto;
    overflow: hidden;
}

#refresh-alert-panel {
    width: 100vw;
    height: var(--page_container_height_px);
    max-width: var(--page_container_max_width_px);
    margin: auto;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    z-index: 600;
}

#refresh-alert-panel p {
    text-align: center;
    margin-top: 50vh;
    transform: translateY(-50%);
}

    /*-- TITLES -------------------------------------------------------*/
    h1, h2, h3, h4, h5 {
        font-weight: normal;
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 1.4rem;
        line-height: 1.4rem;
        margin-bottom: 1.1rem;
        text-align: center;
    }

    h4 {
        font-size: 0.95rem;
        line-height: 1rem;
        margin-bottom: 0.65rem;
    }

    h5 {
        margin-bottom: 0.65rem;
    }

    /*-- TEXT AND LISTS -----------------------------------------------*/
    p, ol, ul, li {
        margin: 0;
        padding: 0;
    }

    ol, ul {
        padding-left: 1.5rem;
    }

    ul > li:not(:last-of-type) {
        margin-bottom: 0.15rem;
    }

    p, ul, address {
        margin-bottom: 0.4rem;
    }

    p, li, label, input, textarea, address {
        font-size: 0.8rem;
        line-height: 0.95rem;
    }

    address {
        text-align: center;
    }

    li {
        list-style: none;
    }

    label {
        display: inline-block;
        margin-bottom: 0.2rem;
    }

    /*-- LOGO & SLOGAN ------------------------------------------------*/
    #logo {
        display: block;
        margin: auto;
        width: 0px;
        max-width: 100%;
    }
    
    #slogan {
        font-size: 1.1rem;
        line-height: 1.7rem;
        margin-top: 1.3rem;
        margin-bottom: 2rem;
        display: inline-block;
    }

    /*-- CLASSIFICATION -----------------------------------------------*/
    .classification {
        visibility: hidden;
    }

    .classification .question-label {
        cursor: pointer;
    }

    .classification .question-label .triangle {
        display: inline-block;
        width: 0.7rem;
        height: 0.5rem;
        margin-right: 0.3rem;
        border-top : 0.35rem solid transparent;
        border-right : none;
        border-left : 0.5rem solid var(--brown_color);
        border-bottom : 0.35rem solid transparent;
    }

    .classification .question-label .triangle.unrolled {
        border-top : 0.5rem solid var(--brown_color) !important;
        border-right : 0.35rem solid transparent !important;
        border-left : 0.35rem solid transparent !important;
        border-bottom: none !important;
    }

    .classification .tags-container {
        margin-bottom: 0.5rem;
        width: 100%;
    }   
    
    /*-- CHECKBOXES ---------------------------------------------------*/
    input[type=checkbox] {
        /* REMOVE INITIAL APPEARANCE : */
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
    
        /* DESIGN NEW CHECKBOXES : */
        height: 0.8rem;
        width: 0.8rem;
        background: transparent;
        border: 1px solid white;
        margin: 0 0.2rem 0 0;
    }
    
    input[type=checkbox]:not(:disabled) {
        cursor: pointer;
    }
    
    input[type="checkbox"]:checked {
        position: relative;
    }
    
    input[type="checkbox"]:checked::before {
        content: 'X';
        display: block;
        height: 100%;
        width: 100%;
        color: white;
        font-size: 0.6rem;
        line-height: 0.7rem;
        text-align: center;
        position: absolute;
    }

    /*-- DROPDOWN NAV -------------------------------------------------*/
    .dropdown-nav {
        --line_height: calc(var(--dropdown_nav_font_size) + 0.1rem);
        --triangle_height: calc(var(--line_height) - 0.4rem);
        --triangle_half_width: calc(var(--line_height) - 0.7rem);
        --padding_top_bottom: calc(var(--line_height) - 0.8rem);
        --triangle_right_position: calc((2 * var(--triangle_half_width)) - 0.3rem);
        position: relative;
        text-align: center;
    }

    .dropdown-nav .choice,
    .dropdown-nav .choices {
        text-align: center;
        text-transform: uppercase;
        font-size: var(--dropdown_nav_font_size);
        line-height: var(--line_height);
        padding: var(--padding_top_bottom) calc(2 * (var(--triangle_right_position) + var(--triangle_half_width)));
        margin-bottom: 0;
        cursor: pointer;
    }

    .dropdown-nav .choice {
        border: 1px solid var(--brown_color);
        position: relative;
    }

    .dropdown-nav .choice::after {
        content: "";
        display : block;
        height : 0;
        width : 0;
        border-top : var(--triangle_height) solid var(--brown_color);
        border-right : var(--triangle_half_width) solid transparent;
        border-left : var(--triangle_half_width) solid transparent;
        position: absolute;
        top: calc(((2 * var(--padding_top_bottom)) + var(--line_height) - var(--triangle_height)) / 2);
        right: var(--triangle_right_position);
    }

    .dropdown-nav .nav-content {
        width: 100%;
        margin-bottom: 0;
        padding-left: 0;
        border-left: 1px solid var(--brown_color);
        border-bottom: 1px solid var(--brown_color);
        border-right: 1px solid var(--brown_color);
        background-color: black;
        position: absolute;
        left: 0;
        z-index: 50;
        display: none;
    }

    .dropdown-nav .choices[data-selected="yes"]::after,
    .dropdown-nav .choices:hover::after,
    .dropdown-nav .choices:active::after,
    .dropdown-nav .choices:focus::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        background-color: white;
        opacity: 0.2;
    }

    .dropdown-nav .choices[data-index="1"][data-selected="yes"]::after,
    .dropdown-nav .choices[data-index="1"]:hover::after,
    .dropdown-nav .choices[data-index="1"]:active::after,
    .dropdown-nav .choices[data-index="1"]:focus::after {
        top: 0;
    }

        /*-- 2 CHOICES ------------------------------------------------*/
        .two-choices.dropdown-nav .choices[data-selected="yes"]::after,
        .two-choices.dropdown-nav .choices:hover::after,
        .two-choices.dropdown-nav .choices:active::after,
        .two-choices.dropdown-nav .choices:focus::after {
            height: 50%;
        }

        .two-choices.dropdown-nav .choices[data-index="2"][data-selected="yes"]::after,
        .two-choices.dropdown-nav .choices[data-index="2"]:hover::after,
        .two-choices.dropdown-nav .choices[data-index="2"]:active::after,
        .two-choices.dropdown-nav .choices[data-index="2"]:focus::after {
            top: 50%;
        }

        /*-- 3 CHOICES ------------------------------------------------*/
        .three-choices.dropdown-nav .choices[data-selected="yes"]::after,
        .three-choices.dropdown-nav .choices:hover::after,
        .three-choices.dropdown-nav .choices:active::after,
        .three-choices.dropdown-nav .choices:focus::after {
            height: 33.33%;
        }

        .three-choices.dropdown-nav .choices[data-index="2"][data-selected="yes"]::after,
        .three-choices.dropdown-nav .choices[data-index="2"]:hover::after,
        .three-choices.dropdown-nav .choices[data-index="2"]:active::after,
        .three-choices.dropdown-nav .choices[data-index="2"]:focus::after {
            top: 33.33%;
        }

        .three-choices.dropdown-nav .choices[data-index="3"][data-selected="yes"]::after,
        .three-choices.dropdown-nav .choices[data-index="3"]:hover::after,
        .three-choices.dropdown-nav .choices[data-index="3"]:active::after,
        .three-choices.dropdown-nav .choices[data-index="3"]:focus::after {
            top: 66.66%;
        }

/*-----------------------------------------------------------------------
			MOBILE CONFIGURATION (landscape orientation)
-----------------------------------------------------------------------*/
@media (orientation: landscape) {
    /* Nothing... */
}

/*-----------------------------------------------------------------------
			TABLET CONFIGURATION (portrait orientation)
-----------------------------------------------------------------------*/
@media (min-width: 767px) and (orientation: portrait) {
    /* Nothing... */
}

/*-----------------------------------------------------------------------
		TABLET AND BIG SCREENS CONFIGURATION (landscape orientation)
-----------------------------------------------------------------------*/
@media (min-width: 1022px) and (orientation: landscape) {
    /* Nothing... */
}