/* --------------------------------------------- */
/* ----------------- Variables ----------------- */

/*
@font-face {
    font-family: Atrament-SemiBold-Regular;
    src: url("/fonts/Atrament SemiBold Regular.otf");
}
*/

:root {
    --clr-white: #ffffff;
    --clr-background-white: #FBF7FF;
    --clr-black: #000000;
    --clr-grey: #D1CFD7;
    --clr-disabled-grey: #B5B2BC;
    --clr-dark-grey: #908C99;
    --clr-blue: #221C46;
    --clr-pink: #CC1480;
    --clr-light-blue: #1B51DC;
    --clr-light-green: #00EB5E;
    --clr-yellow: #FFDC37;
}

/* ------------------------------------------- */
/* ----------------- General ----------------- */

html {
    position: relative;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    overflow-x: hidden;
}

body {
    display: flex;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    color: var(--clr-blue);
    font-family: 'TT Travels Trl', sans-serif;
    letter-spacing: -0.05em;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

* {
    box-sizing: border-box;

    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;

    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--clr-blue);
    text-decoration: none;
}

.hidden {
    display: none !important;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

h1 {
    width: 100%;
    font-size: 3.2rem;
    line-height: 4rem;
    font-weight: 800;
    text-align: center;
}


input[type=checkbox] {
    width: 0vw;
    height: 0vw;
    margin: 0 3.4rem 0 0;
}

input[type=checkbox]:after,
input[type=checkbox]:checked:after {
    box-sizing: border-box;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0 0 0 0;
    display: inline-block;
    content: '';
    font-size: 1.5rem;
    color: transparent;
    font-weight: bold;
    background-color: var(--clr-white);
    border: solid 0.2rem var(--clr-dark-grey);
    transform: translateY(-50%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.4rem;
}

input[type=checkbox]:after {
    background-color: var(--clr-white);
}

input[type=checkbox]:hover:after,
input[type=checkbox]:checked:hover:after {
    background-color: var(--clr-transparent-light-blue);
    border-color: var(--clr-light-blue);
}

input[type=checkbox]:checked:after {
    color: var(--clr-blue);
    background-color: var(--clr-white);
    background-image: url("/images/global/icon-checkbox.svg");
    border-color: var(--clr-light-blue);
}

input[type=checkbox]:disabled:after,
input[type=checkbox]:disabled + label {
    color: var(--clr-disabled-grey) !important;
    border-color: var(--clr-disabled-grey);
    /*cursor: not-allowed;*/
}

input[type=checkbox]:checked:disabled:after {
    background-image: url("/images/global/icon-checkbox-disabled.svg");
}

input[type=checkbox]:checked:disabled:after {
    /*cursor: not-allowed;*/
}

input[type=checkbox]:disabled:hover:after,
input[type=checkbox]:checked:disabled:hover:after {
    background-color: var(--clr-white);
    border-color: var(--clr-disabled-grey);
}


/* ----------------------------------------- */
/* ----------------- Media ----------------- */

/* ----------------- Desktop 1280px ----------------- */
.tablet,
.mobile {
    display: none;
}

.tabletMobile {
    display: none;
}

:root {
    /*font-size: 0.781vw;*/
    /*font-size: 0.521vw;*/
    font-size: 0.65vw;
}


/* ----------------- 4K 1920px ----------------- */
@media only screen and (min-width: 2100px) {
    :root {
        font-size: 16.3px;
    }
}


/* ----------------- Tablet 720px ----------------- */
@media only screen and (max-width: 1000px) {
    .desktop,
    .mobile {
        display: none;
    }

    .tablet {
        display: block;
        font-size: 10px;
    }

    .desktopTablet {
        display: block;
    }

    .tabletMobile {
        display: block;
    }

    :root {
        font-size: 1.389vw;
    }

    html {
        width: 100vw;
    }
}


/* ----------------- Mobile 360px ----------------- */
@media only screen and (max-width: 500px) {
    .desktop,
    .tablet {
        display: none;
    }

    .desktopTablet {
        display: none;
    }

    .tabletMobile {
        display: block;
    }

    .mobile {
        display: block;
        font-size: 10px;
    }

    :root {
        font-size: 2.778vw;
    }

    html {
        width: 100vw;
    }
}