/* Fonts */
@font-face {
  font-family: 'upheavtt';
  src: url('../../fonts/upheavtt.woff2') format("woff2"), 
    url('../../fonts/upheavtt.woff') format("woff"), 
    url('../../fonts/upheavtt.otf') format("otf"), 
    url('../../fonts/upheavtt.eot') format("eot"), 
    url('../../fonts/upheavtt.ttf') format("truetype");
}

@font-face {
  font-family: 'franklin-gothic';
  src: url('../../fonts/FranklinGothic-Book.woff2') format("woff2"), 
    url('../../fonts/FranklinGothic-Book.woff') format("woff");
  font-weight: 300;
}

@font-face {
  font-family: 'franklin-gothic';
  src: url('../../fonts/FranklinGothic-Demi.woff2') format("woff2"), 
    url('../../fonts/FranklinGothic-Demi.woff') format("woff");
  font-weight: 400;
  }

@font-face {
  font-family: 'franklin-gothic';
  src: url('../../fonts/FranklinGothic-Heavy.woff2') format("woff2"), 
    url('../../fonts/FranklinGothic-Heavy.woff') format("woff");
  font-weight: 600;
}

/* Variables */
:root {
    --primary-color: #e30612;
    --secondary-color: #ffff00;
    --white: #ffffff;
    --black: #000000;
}

/* Bordered Text */
:root {
  --kkr-text-shadow:
    1px 1px 0 var(--black),
    -1px 1px 0 var(--black),
    1px -1px 0 var(--black),
    -1px -1px 0 var(--black),
    0px 1px 0 var(--black),
    0px -1px 0 var(--black),
    -1px 0px 0 var(--black),
    1px 0px 0 var(--black),
    2px 2px 0 var(--black),
    -2px 2px 0 var(--black),
    2px -2px 0 var(--black),
    -2px -2px 0 var(--black),
    0px 2px 0 var(--black),
    0px -2px 0 var(--black),
    -2px 0px 0 var(--black),
    2px 0px 0 var(--black),
    1px 2px 0 var(--black),
    -1px 2px 0 var(--black),
    1px -2px 0 var(--black),
    -1px -2px 0 var(--black),
    2px 1px 0 var(--black),
    -2px 1px 0 var(--black),
    2px -1px 0 var(--black),
    -2px -1px 0 var(--black);
    --kkr-text-shadow-thick:
    1px 1px 0 var(--black),
    -1px 1px 0 var(--black),
    1px -1px 0 var(--black),
    -1px -1px 0 var(--black),
    0px 1px 0 var(--black),
    0px -1px 0 var(--black),
    -1px 0px 0 var(--black),
    1px 0px 0 var(--black),
    2px 2px 0 var(--black),
    -2px 2px 0 var(--black),
    2px -2px 0 var(--black),
    -2px -2px 0 var(--black),
    0px 2px 0 var(--black),
    0px -2px 0 var(--black),
    -2px 0px 0 var(--black),
    2px 0px 0 var(--black),
    1px 2px 0 var(--black),
    -1px 2px 0 var(--black),
    1px -2px 0 var(--black),
    -1px -2px 0 var(--black),
    2px 1px 0 var(--black),
    -2px 1px 0 var(--black),
    2px -1px 0 var(--black),
    -2px -1px 0 var(--black),
    3px 0px 0 var(--black),
    -3px 0px 0 var(--black),
    0px 3px 0 var(--black),
    0px -3px 0 var(--black),
    3px 3px 0 var(--black),
    -3px 3px 0 var(--black),
    3px -3px 0 var(--black),
    -3px -3px 0 var(--black),
    1px 3px 0 var(--black),
    -1px 3px 0 var(--black),
    1px -3px 0 var(--black),
    -1px -3px 0 var(--black),
    3px 1px 0 var(--black),
    -3px 1px 0 var(--black),
    3px -1px 0 var(--black),
    -3px -1px 0 var(--black),
    2px 3px 0 var(--black),
    -2px 3px 0 var(--black),
    2px -3px 0 var(--black),
    -2px -3px 0 var(--black),
    3px 2px 0 var(--black),
    -3px 2px 0 var(--black),
    3px -2px 0 var(--black),
    -3px -2px 0 var(--black);
}

/****************************************/
/* common styles used for v1 through v4 */
/****************************************/
html {
    font-size: 14px;
}

body {
    font-family: 'franklin-gothic', Arial, Helvetica, sans-serif;
    background: var(--primary-color);
    color: var(--white);
    margin: 0;
    min-height: 97.5vh;
    overflow-x: hidden;
    background: url('../../images/KIT_KAT_BREAKZONE_BG_DESKTOP.png') var(--primary-color) center center;
    background-size: cover;
}

/* body.path-frontpage {
    background: url('../../images/page_background.jpg') var(--black) center center;
    background-size: cover;
} */

/* body.path-frontpage header .site-logo,
body.path-frontpage .layout-content > h1 {
    display: none;
} */

body.path-frontpage:not(.kkr-game-active) {
    /* background: url('../../images/KIT_KAT_BREAKZONE_BG_DESKTOP.png') var(--primary-color) center center;
    background-size: cover; */
    min-height: 800px;
}

body.path-frontpage header .site-logo, body.path-frontpage .layout-content > h1 {
    display: block;
}

/* body.path-user {
    background: url('../../images/KIT_KAT_BREAKZONE_BG_DESKTOP.png') var(--primary-color) center center;
    background-size: cover;
} */


body,
#block-kitkat-racing-content article.node--type-page {
  --sb-track-color: #ffffff;
  --sb-thumb-color: #e35563;
  --sb-size: 10px;
}

body::-webkit-scrollbar,
#block-kitkat-racing-content article.node--type-page::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track,
#block-kitkat-racing-content article.node--type-page::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}

body::-webkit-scrollbar-thumb,
#block-kitkat-racing-content article.node--type-page::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body,
  #block-kitkat-racing-content article.node--type-page {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

h1 {
    text-align: center;
    font-size: 3.429rem;
    text-transform: uppercase;
}

p {
    margin-top: 0;
}

a {
    color: var(--white);
    transition: color 0.3s ease;
}

img {
    max-width: 100%;;
}

input,
.contact-message-form input, 
.contact-message-form .form-type-item {
    border: 1px solid #4E4D4D;
    padding: 5px 10px;
    border-radius: 0;
}

input[type=date]:invalid::-webkit-datetime-edit {
    color: #757575;
}

.contact-message-form input[type="submit"] {
    border: 0;
    padding: 14px 22px;
}

/* .contact-message-form > div.form-item.form-item-mail {
    border: 0;
    padding: 0;
} */

input:focus-visible {
    outline: 0;
}

input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--white);
    transition: background 0.3s ease;
    margin-right: 10px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background: url('../../images/icons/check_white.svg') var(--primary-color) center center;
}

div[data-drupal-messages=""] {
    z-index: 35;
    /* position: relative; */
}

.messages--error a {
    color: var(--primary-color);
}

.messages--warning a {
    color: #734c00;
}

ul.menu {
    text-align: center;
    margin: 0;
}

#block-kitkat-racing-main-menu ul.menu {
    padding-top: 25px;
}

.form-item, .form-actions {
    margin-top: 0;
    margin-bottom: 10px;
}

.region.region-highlighted  {
    height:0;
}

.messages--error {
    color: #e30612;
    background-color: #ffffff;
    background-image: url(/themes/custom/kitkat_racing/images/icons/error--red.svg);
    box-shadow: none;
    border: 0;
    font-size: 1.143rem;
    font-style: italic;
    box-shadow: none;
}

.messages--status  {
    background-color: #ffffff;
    background-image: url(/themes/custom/kitkat_racing/images/icons/check--red.svg);
    color: #DB1024;
    border: 0;
    font-size: 1.143rem;
    font-style: italic;
    box-shadow: none;
}

#block-kitkat-racing-main-menu ul.menu li a {
    /* text-decoration: none;
    color: var(--black);
    border-bottom: 2px solid transparent; */
    background: var(--white);
    color: var(--primary-color);
    width: calc(100% - 44px);
    display: block;
    margin-bottom: 10px;
}

#block-kitkat-racing-main-menu ul.menu li a:hover {
    color: var(--white);
    background: var(--primary-color);
}

#block-kitkat-racing-main-menu ul.menu li a.is-active {
    color: var(--black);
}

#block-kitkat-racing-main-menu ul.menu li a.is-active:hover {
    /* color: var(--white);
    border-bottom-color: transparent; */
}

#block-kitkat-racing-footermainmenu {
    background: var(--primary-color);
    text-align: center;
    width: 100%;
    z-index: 10;
    font-size: 1.143rem;
    padding: 0;
    border-top: 1px solid #ee6a71;
    border-bottom: 1px solid #AA0607;
}

#block-kitkat-racing-footerdisclaimer {
    padding: 0 10px;
}

#block-kitkat-racing-footermainmenu p {
    margin: 0;
    padding: 0;
}

#block-kitkat-racing-footermainmenu a {
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: block;
    padding: 10px 0;
    width: 100%;
}

#block-kitkat-racing-footermainmenu a:hover {
    text-decoration: none;
    color: var(--primary-color);
    background-color: var(--white);
}

#block-kitkat-racing-main-menu {
    background: var(--primary-color);
    border: 4px solid var(--white);
    border-radius: 20px;
    width: calc(100% - 60px);
    max-width: 380px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    padding: 30px;
    font-size: 2.571rem;
    display: none;
}

#block-kitkat-racing-main-menu h2 {
    font-size: 4.571rem;
    text-align: center;
    margin: 20px 0;
}

#block-kitkat-racing-main-menu a:hover {
    color: var(--black);
}

.menu_burger {
    cursor: pointer;
    width: 33px;
    height: 22px;
}

.menu_burger span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #0037ff;
    border-radius: 0px;
    z-index: 1;
    transform-origin: center;
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;
}

.menu_burger span:first-child {
    transform-origin: center;
}

.menu_burger span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu_burger.menu_burger--open span {
    opacity: 1;
    transform: rotate(45deg) translate(-6px,-7px);
    background: var(--white);
}

.menu_burger.menu_burger--open span:nth-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2,0.2);
    background: blue;
}

.menu_burger.menu_burger--open span:nth-child(1) {
    transform: rotate(-45deg) translate(-6px,6px);
}

.start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 20;
    background: url('../../images/start_screen_bg.webp') var(--black) no-repeat center center;
    background-size: cover;
}

.start-screen p {
    font-size: clamp(2.286rem, 8vw, 9.143rem);
    font-weight: 600;
    text-shadow: var(--kkr-text-shadow-thick);
    font-family: 'upheavtt', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    font-weight: 400;
    margin-bottom: 0;
    -webkit-animation: colorchange 2s infinite;
    -moz-animation: colorchange 2s infinite;
    animation: colorchange 2s infinite;
}

.current-user {
    -webkit-animation: colorchange 2s infinite;
    -moz-animation: colorchange 2s infinite;
    animation: colorchange 2s infinite;
}

.start-screen__mobile {
    display: none;
}

.start-screen img {
    max-width: 1450px;
    width: 100%;
}

footer {
    position: fixed;
    background: var(--black);
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
    z-index: 10;
    font-size: 1rem;
}

#block-kitkat-racing-footer {
    background: var(--black);
    text-align: center;
    width: 100%;
    z-index: 10;
    font-size: 1rem;
    padding: 0 10px;
}

#block-kitkat-racing-footer ul.menu {
    display: flex;
    margin: 14px 20px;
    justify-content: center;
}

#block-kitkat-racing-footer ul.menu li.menu-item {
    padding: 0 5px;
    border-right: 1px solid var(--white);
}

#block-kitkat-racing-footer ul.menu li.menu-item:last-of-type {
    border-right: 0;
}

#block-kitkat-racing-footer ul.menu li.menu-item a:hover,
#block-kitkat-racing-footerdisclaimer p a:hover,
#block-kitkat-racing-footer ul.menu a.is-active {
    color: var(--secondary-color);
}

#block-kitkat-racing-footerdisclaimer p {
    margin: 14px 0;
}

.screen_hide {
    background:var(--black);
    opacity: 0.8;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: none;
    z-index: 11;
}

.close-menu {
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 4.571rem;
    line-height: 1;
    cursor: pointer;
    font-family: 'upheavtt', Arial, Helvetica, sans-serif;
    color: var(--white);
    transition: color 0.3s ease;
}

.close-menu:hover {
    color: var(--secondary-color);
}

div[data-drupal-messages=""], 
#landscape_popup {
    width: max-content;
    max-width: 95%;
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
}

div[data-drupal-messages=""] .messages,
#landscape_popup .messages {
    border: 4px solid var(--primary-color);
    border-radius: 20px;
    text-align: center;
    background-image: none;
    padding: 30px 50px 15px 20px;
    font-size: 1.5rem;
}

div[data-drupal-messages=""] .messages a {
    color: var(--primary-color);
}

div[data-drupal-messages=""] .messages a {
    color: var(--black);
}

#landscape_popup .messages {
    background: var(--white);
    color: var(--primary-color);
    font-family: 'franklin-gothic', Arial, Helvetica, sans-serif;
    font-style: italic;
    padding: 45px 20px 15px;
}

.data-drupal-messages--class .close-menu,
#landscape_popup .close-menu,
.messages--status .close-menu {
    color: var(--primary-color);
    font-style: normal;
    font-size: 3.5rem;
    top: 0;
    right: 12px;
}

.data-drupal-messages--class .close-menu:hover,
#landscape_popup .close-menu:hover,
.messages--status .close-menu:hover {
    color: var(--black);
}

.page-container {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 32px);
    padding: 0 20px 120px;
    width: calc(100% - 40px);
    /* max-width: 440px; */
    max-width: 600px;
    margin: 0 auto;
}

body:not(.path-user) .page-container,
.page-container--center {
    justify-content: center;
    height: auto;
    min-height: 50vh;
}

body.kkr-game-active .page-container {
    justify-content: flex-start;
}

.kkr-game-active .page-container {
    padding-bottom: 0;
}

body.user-logged-in.path-user .page-container {
    justify-content: center;
}

.button,
#block-kitkat-racing-main-menu a {
    background: var(--primary-color);
    color: var(--white);
    padding: 14px 22px;
    text-align: center;
    width: 100%;
    border: 0;
    text-transform: uppercase;
	font-size: 1.571rem;
    text-decoration: none;
    border-top: 1px solid #d76066;
    border-bottom: 1px solid #aa0607;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 400;
}

.button:hover,
#block-kitkat-racing-main-menu a:hover {
    color: var(--primary-color);
    background: var(--white);
}

.button,
#block-kitkat-racing-main-menu a,
.user-form input:not([type="checkbox"]),
.user-login-form input:not([type="checkbox"]),
#openid-connect-login-form input,
.user-pass .form-submit {
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
}

input:not([type="submit"]):not([type="checkbox"]),
.contact-message-form div#edit-mail,
.contact-message-form textarea {
    font-size: 1rem;
    min-height: 29px;
    padding-left: 38px;
    width: calc(100% - 48px);
}

#openid-connect-login-form {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#openid-connect-login-form > div {
    width: 50%;
}

#openid-connect-login-form input {
    width: calc(100% - 5px);
    /* width: 75%; */
    font-size: 1.286rem;
    margin: 10px auto 0 !important;
    display: block;
    float: none;
}

#openid-connect-login-form a.button {
    font-size: 1.286rem;
    margin: 10px auto 0;
    width: calc(75% - 44px);
}

.register-title {
    line-height: 1.25;
    font-family: 'franklin-gothic-heavy-regular', Arial, Helvetica, sans-serif;
    margin-bottom: 0;
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 10px 2px;
    margin-bottom: 20px;
}

#reveal-register {
    background: var(--primary-color) !important;
    color: var(--white) !important;
}

#reveal-register.button--highlighted,
#reveal-register:hover {
    color: var(--primary-color) !important;
    background: var(--white) !important;
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    #openid-connect-login-form input,
    #edit-openid-connect-client-google-login {
        font-size: 1.143rem !important;
    }

    @media screen and (max-width: 440px) {
        #openid-connect-login-form input,
        #edit-openid-connect-client-google-login {
            font-size: 1.571rem !important;
        }
    }
}

/* #edit-openid-connect-client-google-login { */
#edit-openid-connect-client-generic-login {
    float: right;
}

.login-separator {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    text-align: center;
    margin: 20px 0;
    font-size: 1.2rem;
}

.login-separator span {
    width: 6%;
    display: inline-block;
}

.login-separator:before,
.login-separator:after {
    content: '';
    border-bottom: 2px solid var(--white);
    width: 43%;
    display: inline-block;
}

.text-center {
    text-align: center;
    margin-bottom: 5px;
}

.layout-content--login {
    background: var(--primary-color);
    border: 4px solid var(--white);
    padding: 10px 15px;
}

.layout-content--login .button {
    background: var(--white);
    color: var(--primary-color);
}

.layout-content--login .button:hover {
    background: var(--primary-color);
    color: var(--white);
}

body:not(.user-logged-in).path-user .page-container{
    max-width: 580px;
}

.contact-message-form div#edit-mail {
    color: var(--black);
    line-height: 2.5;
}

.field--type-boolean {
    /* text-align: center; */
    max-width: 380px;
    margin: 10px auto;
}

.user-logged-in #user-form {
    padding-bottom: 20px;
}

.user-form div :not(.form-type-checkbox) label,
.user-login-form div label,
.user-register-form .form-item-name,
.contact-form label {
    display: none;
}

.user-form .form-type-checkbox {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.user-form .form-type-checkbox label {
    font-size: 1rem;
    font-weight: 300;
    /* background: var(--primary-color); */
    padding: 5px 10px;
    width: calc(100% - 20px);
}

.user-form .form-required::after {
    margin: 0 0.2em;
}

#edit-name,
#edit-mail {
    background: url('../../images/icons/email.svg') var(--white) no-repeat 6px center;
    background-size: 25px;
}

#user-login-form #edit-pass,
#edit-pass-pass1,
#edit-pass-pass2,
#edit-current-pass {
    background: url('../../images/icons/lock.svg') var(--white) no-repeat 8px center;
    background-size: 22px;
    margin-bottom: 5px;
}

.password-strength__meter {
    margin: 0.5em 0;
}

.password-suggestions {
    border: 0;
    background: var(--primary-color);
    padding: 5px 10px;
}

.password-suggestions ul {
    margin-top: 5px;
}

#edit-pass--description,
.password-strength,
#edit-current-pass--description,
.password-confirm-message,
#edit-field-unique-entry-code-0-value--description {
    background: var(--primary-color);
    padding: 5px 10px;
    width: calc(100% - 20px);
}

.login-bottom > p {
    width: fit-content;
    margin: 0 auto 5px;
}

#edit-field-first-name-0-value, 
#edit-field-last-name-0-value {
    background: url('../../images/icons/user.png') var(--white) no-repeat 6px center;
    background-size: 25px;
}

#edit-field-initials-0-value,
#end_screen #initials_input_wrapper input {
    background: url('../../images/icons/podium.svg') var(--white) no-repeat 6px center;
    background-size: 25px;
}

#edit-field-date-of-birth-0-value-date {
    background: url('../../images/icons/calendar.svg') var(--white) no-repeat 5px center;
    background-size: 26px;
}

body.ios #edit-field-date-of-birth-0-value-date  {
    -webkit-appearance: none;
    -moz-appearance: none;
}

#edit-field-unique-entry-code-0-value {
    background: url('../../images/icons/trophy.svg') var(--white) no-repeat 5px center;
    background-size: 28px;
}

#edit-message-0-value,
#edit-captcha-response {
    background: url('../../images/icons/bubble-chat.svg') var(--white) no-repeat 6px 6px;
    background-size: 26px;
}

#edit-message-0-value {
    height: auto;
    max-height: 140px;
    width: 100%;
    padding-top: 10px;
}

.user-pass-reset p {
    background: var(--white);
    color: var(--black);
    font-weight: 400;
    margin: 0;
    padding: 5px 5px 10px;
}

.user-pass-reset #edit-submit {
    margin-top: 15px;
}

/* #user-form .field--name-field-unique-entry-code, */
#user-form .form-item-field-date-of-birth-0-value-date,
#user-form .form-type-email {
    display: none;
}

.site-logo {
    margin-bottom: 40px;
}

header a {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

header .site-logo {
    margin: 0 auto;
    display: block;
    padding-top: 30px;
}

.login-bottom_wrapper {
    width: 100%;
    overflow: hidden;
}

.login-bottom {
	margin: 30px -60px 0;
	font-weight: 300;
	text-align: center;
}

.login-bottom p a {
	font-weight: 400;
}

.login-bottom p a:hover {
    color: var(--secondary-color);
}

.form-type-date {
    width: 100%;
}

.field--type-datetime h4,
.user-pass .form-item-name label,
#edit-field-date-of-birth-0-value--description,
#edit-name--description,
#edit-mail--description,
.skip-link {
    display: none;
}

/* #edit-field-unique-entry-code-0-value--description, */
.user-pass > p {
    font-size: 1rem;
    font-weight: 300;
    max-width: 100%;
    margin: 0 auto;
    background: var(--primary-color);
    padding: 5px 10px;
}

.user-register-form #edit-actions {
    margin-top: 15px;
}

.grecaptcha-badge {
    visibility: hidden;
}

.captcha-type-challenge--math {
    background: #e30612ad;
    margin-bottom: 20px;
}

#openid-connect-login-form:has(> .captcha-type-challenge--math) { 
    flex-direction: column;
}

.overlay {
    grid-area: 1 / 1 / -1 / -1;
    display: grid;
    position: relative;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    --columns: 20;
    grid-template-columns: repeat(var(--columns), 1fr);
    top: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.overlay div {
	background: var(--black);
    aspect-ratio: 1 / 1;
}

.overlay div:nth-child(even) {
    background: var(--white);
}

.intro--closed {
	opacity: 0;
	pointer-events: none;
    z-index: -1;
}

#block-kitkat-racing-content article.node--type-page,
#user-pass-reset {
    background: var(--white);
    color: var(--black);
    padding: 10px 20px;
    max-height: 50vh;
    overflow-y: auto;
    font-weight: 300;
    border: 1px solid var(--black);
}

#block-kitkat-racing-content article.node--type-page ul,
#block-kitkat-racing-content article.node--type-page ol {
    padding-left: 20px;
}

#user-pass-reset {
    text-align: center;
    font-size: 1.14em;
}

#block-kitkat-racing-content article.node--type-page a:not(.button) {
    color: var(--primary-color);
}

.maintenance-page--flood main {
    background: #e30612ad;
    padding: 5px 10px 10px;
    text-align: center;
    font-size: 1.143rem;
    max-width: 600px;
    margin: 0 auto;
}

.maintenance-page--flood main h1 {
    margin-top: 0;
}

/* Cookies Table */
.node__content table {    
    background:rgba(255, 255, 255, 0.7);
    margin-bottom:15px;
}

.node__content td,
.node__content th {
    border:1px solid var(--white);
    padding:10px;
    min-width: 150px;
}

.node__content thead {
    background: var(--primary-color);
    color: var(--white);
    font-size:1.071rem;
}

.node__content table td {
    background: #e3061224;
    color: var(--black);
}

.node__content table td:first-of-type{
    background: var(--primary-color);
    width: 200px;
    color: var(--white);
}

/* @media(max-width:600px){ */
  .node__content table, 
  .node__content thead, 
  .node__content tbody, 
  .node__content th, 
  .node__content td, 
  .node__content table td:first-of-type,
  .node__content tr { 
    display: block; 
    width: calc(100% - 5px);
    min-width:0;
    border-bottom:0;
  }

  .node__content thead {
    display: none;
  }

  .node__content tr {
    margin-bottom: 30px;
    background: rgba(255,255,255,0.2);
    border-bottom:1px solid var(--white);
  }
  
  .cookies_tbl tbody td:nth-child(1):before{
    content:'Name: ';
    font-weight:bold;
  }

  .cookies_tbl tbody td:nth-child(2):before{
    content:'Expires: ';
    font-weight:bold;
  }

  .cookies_tbl tbody td:nth-child(3):before{
    content:'Category: ';
    font-weight:bold;
  }

  .cookies_tbl tbody td:nth-child(4):before{
    content:'Desciption: ';
    font-weight:bold;
  }
/* } */

@media screen and (min-width: 1920px) {
    body:not(.user-logged-in).path-user .page-container {
        max-width: 520px;
    }

    body:not(.user-logged-in).path-user .page-container .layout-content {
        width: 100%;
    }

    body:not(.user-logged-in).path-user .page-container .layout-content .form-item, .form-actions {
        margin-bottom: 15px;
    }

    body:not(.user-logged-in).path-user .page-container input:not([type="submit"]):not([type="checkbox"]) {
        font-size: 1.143rem;
        min-height: 38px;
    }

    body:not(.user-logged-in).path-user .page-container .login-bottom > p {
        font-size: 1.429rem;
    }

    /* .user-login-form input:not([type="checkbox"]){
        font-size: 1.857rem;
    }

    #openid-connect-login-form input,
    #edit-openid-connect-client-google-login {
        font-size: 1.571rem;
    } */
}

@media screen and (min-height: 1080px) {
    body:not(.user-logged-in).path-user .page-container {
        padding-top: 100px;
        min-height: calc(100vh - 222px);
    }
}

@media screen and (max-width: 1400px) {
    .start-screen__desktop {
        display: none;
    }
    .start-screen__mobile {
        display: block;
    }
}

@keyframes colorchange {
  0% {
    color: var(--white);
  }
  49.99% {
    color: var(--white);
  }
  50% {
    color: var(--secondary-color);
  }
  99.99% {
    color: var(--secondary-color);
  }
}

@keyframes colorchange_b {
  0% {
    color: var(--primary-color);
  }
  49.99% {
    color: var(--primary-color);
  }
  50% {
    color: var(--secondary-color);
  }
  99.99% {
    color: var(--secondary-color);
  }
}

/* @media screen and (max-width: 1400px) { 
    body.path-frontpage {
        background: url('../../images/KIT_KAT_BREAKZONE_BG_DESKTOP.png') var(--primary-color) center center;
        background-size: cover;
        min-height: 800px;
    }

    body.path-frontpage header .site-logo, body.path-frontpage .layout-content > h1 {
        display: block;
    }
 } */

@media screen and (max-width: 1400px) {
    .kkr-game-active header, 
    .kkr-game-active .page-title {
    display: none !important;
    }
}

@media screen and (max-width: 620px) {
    #openid-connect-login-form {
        flex-direction: column;
    }

    #openid-connect-login-form > div,
    #openid-connect-login-form input {
        width: 100%;
    }

    #openid-connect-login-form input {
        font-size: 1.571rem;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 460px) {
    #block-kitkat-racing-main-menu  {
        width: calc(90% - 40px);
        padding: 20px;
        font-size: 1.857rem;
    }

    #block-kitkat-racing-main-menu ul.menu {
        padding-top: 35px;
    }

    #block-kitkat-racing-main-menu ul.menu li a {
        font-size: 1.429rem;
    }
}

@media screen and (max-width: 440px) {
    h1 {
        margin: 0.25em 0;
    }
}

@media screen and (max-width: 420px) {
    h1 {
        font-size: 2.286rem;
    }

    .track_selection__copy p {
        font-size: 1.143rem;
    }

    header .site-logo {
        margin: 0 auto;
        max-width: 150px;
    }

    .page-container {
        padding: 0 10px 120px;
        width: calc(100% - 20px);
    }

    #track_selection button.slick-arrow {
        padding: 0;
    }
}