/* Table of contents

    1. Global
    2. Layout
        Header
        Footer
    3. Navigation
        3.1. Hyperlinks
        3.2. Navigation menus
        Pages menu
        Menu toggler
        Language menu
        Main menu
        Horizontal menu
        Side menu
        Footer menu
        Social menu
        Navigation tabs
    Sponsors
    Media
    Table
        Table caption
        Table header
        Table body

*/


/* ========================================
    1. GLOBAL
   ======================================== */

:root {
    --clr-blue:   #0d6efd;
    --clr-indigo: #6610f2;
    --clr-purple: #6f42c1;
    --clr-pink:   #d63384;
    --clr-red:    #dc3545;
    --clr-orange: #fd7e14;
    --clr-yellow: #ffc107;
    --clr-green:  #198754;
    --clr-teal:   #20c997;
    --clr-cyan:   #0dcaf0;

    --clr-white:    #fff;
    --clr-gray-100: #f8f9fa;
    --clr-gray-200: #e9ecef;
    --clr-gray-300: #dee2e6;
    --clr-gray-400: #ced4da;
    --clr-gray-500: #adb5bd;
    --clr-gray-600: #6c757d;
    --clr-gray-700: #495057;
    --clr-gray-800: #343a40;
    --clr-gray-900: #212529;
    --clr-black:    #000;

    --clr-grey: #474D4E;

    --clr-primary: #0095D7;
    --clr-primary-dark: #00628C;
    --clr-primary-light: #0095D7;

    --clr-secondary: #8C4B00;
    --clr-secondary-light: #D97400;

    --clr-menu-horizontal: #8C734B;
    --clr-menu-horizontal-hover: #40321C;

    
    --clr-menu: #FFF;
    --clr-menu-hover: #19BAFF;

    --clr-submenu-background: var(--clr-primary-light);
    --clr-submenu-spacer: var(--clr-white);
    --clr-submenu-text: var(--clr-menu);
    --clr-submenu-hover: var(--clr-menu-hover);

    --fs-primary: 14px;
    --ff-primary: 'Roboto', sans-serif;

    --footer-height: 10rem;
}

html {
    font-size: var(--fs-primary);
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--ff-primary);
    font-size: 1rem;
}

.wrapper {
    position: relative;
    min-height: calc(100vh + var(--footer-height));
}

@media (min-width: 768px) {
    .wrapper:not(.wrapper--no-footer) {
        padding-bottom: var(--footer-height);
    }
}

.wrapper--no-footer {
    min-height: 100vh;
}

/* ========================================
    2. LAYOUT
   ======================================== */

.header__top {
    background: var(--clr-grey);
    border-bottom: solid 1px white;
}

/* Language switcher position */
@media screen and (min-width: 1200px) and (max-width: 1359px) {.header__top > div > div >div > div {justify-content: flex-start !important;}}
@media screen and (min-width: 1360px) {.header__top > div > div >div > div {width: 79.5%;}}

.header__menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 0;
    min-height: 75px;
}

.header__menu__item {
    flex: 0 0 auto;
}

/* Header logo size */
.header__menu__item:first-child {
    flex-basis: calc(100vw - 30%);
    display: flex; 
    margin-right: 10px;
    align-items: center;
}

/* Front page logo */
@media screen and (min-width: 400px) {
    .header__menu__item:first-child {flex-basis: 200px;}
    .header__menu__item.logo--aerobike {flex-basis: 300px;}
    .header__menu__item.logo--temposari {flex-basis: 220px;}
    .header__menu__item.logo--rullituur {flex-basis: 300px;}
}

@media screen and (min-width: 992px) {
    .header__menu {
        justify-content: flex-start;
    }

    /* Align main menu to the bottom of the container */
    .header__menu__item:last-child { 
        display: flex; 
        padding-left: 15px;
    }
    
    .header__menu__item:not(:first-child) > * { margin-top: auto; }
}

/* Footer */

.footer {
    padding-top: 0.25rem;
    padding-bottom: 5px;
    width: 100%;
    background-color: #0095d7;
    color: #FFF;
}

.footer__logo a {
  display: flex;
  justify-content: center;
}

.footer__logo img {
  width: min(100%, 14rem);
}

@media screen and (min-width: 577px) {
  .footer .row > div + div {
      border-left: solid 1px #FFF;
  }
}

@media screen and (min-width: 768px) {
  .footer {
      position: absolute;
      bottom: 0;
      height: var(--footer-height);
  }
}

@media screen and (min-width: 1200px) {
  .footer__logo a {
    display: block;
  }
}


/* Copyright */

.copyright {
    margin-top: 10px;
    padding-top: 10px;
    color: #CCC;
    font-size: 0.8rem;
}

.copyright::before {
    content: "";
    display: block;
    margin-bottom: 5px;
    height: 1px;
    background: -moz-linear-gradient(left, #0095D7 0%, #FFF 50%, #0095D7 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #0095D7), color-stop(50%, #FFF), color-stop(100%, #0095D7));
    background: -webkit-linear-gradient(left, #0095D7 0%, #FFF 50%, #0095D7 100%);
    background: -o-linear-gradient(left, #0095D7 0%, #FFF 50%, #0095D7 100%);
    background: -ms-linear-gradient(left, #0095D7 0%, #FFF 50%, #0095D7 100%);
    background: linear-gradient(to right, #0095D7 0%, #FFF 50%, #0095D7 100%);
}


/* 
 * Headings 
 */

h1,
.componentheading,
.contentheading {
    padding-top: 0px;
    padding-bottom: 20px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #000;
    line-height: 1.1;
}

h2 {
    font-weight: bold;
    font-family: var(--ff-primary);
}

h4 {
    padding-bottom: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #000;
}

h5 {
    padding-bottom: 15px;
    
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--clr-primary);
}

:is(h1, h2, h3, h4, h5) + :is(h1, h2, h3, h4, h5) {
    margin-top: -15px;
}

ol li::marker {
    font-weight: bold;
}

/* ========================================
    3. NAVIGATION
   ======================================== */

/* 3.1 Hyperlinks */

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

a:is(:active, :visited, :hover, :focus) {color: var(--clr-primary-light);}
a:is(:hover, :focus) {text-decoration: underline;}

/* .peetri-jooks a:active, .peetri-jooks a:visited {color: var(--clr-primary)} */

a:focus {
    outline-color: var(--clr-primary);
    outline-offset: 1px;
}


.nav__wrapper {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1000;
}

@media screen and (min-width: 992px) {
    .nav__wrapper {
        display: block;
        position: relative;
        background-color: transparent;
        overflow: inherit;
    }
}

.nav__background {
    position: absolute;
    top: 0;    
    width: 100%;
    height: auto;
    padding: 20px;
    background-color: var(--clr-grey);
    overflow: auto;
    -webkit-animation: slideDownOpen 1s ease;
    animation: slideDownOpen 1s ease;
}

@media screen and (min-width: 992px) {
    .nav__background {
        position: relative;
        padding: 0;
        background-color: transparent;
        overflow: inherit;
        -webkit-animation: none !important;
        animation: none !important;
    }
}

.nav {
    flex-direction: column;
}

.nav-toggler__checkbox {
    display: none;
}

.nav-toggler__checkbox:checked ~ .nav__wrapper {
    display: block;
}

.nav-toggler__label {
    font-size: 3rem;
    color: var(--clr-white);
    padding-right: 0.8rem;
    transform: translateY(0.15em);
}

.nav-toggler__label--text {font-size: 1rem;}

@media screen and (min-width: 992px) {.nav-toggler__label {display: none;}}

.nav-toggler__checkbox:checked ~ .nav-toggler__label--text {
    display: none;
}

.nav-toggler__label > i {transform: translateY(-2.5px);} /* Fix icon position */



/* 3.2 Navigation menus */

.nav__item {
    position: relative;
}

.nav__item.active::before,
.nav__item.active::after {
    background: transparent;
}

.nav__item a,
.nav-link {
    display: inline-block;
    width: 100%;
    border: solid 1px var(--clr-white);
    padding: 15px 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
    margin-bottom: 5px;
    font-size: 1rem;
    color: var(--clr-white);
}

.nav__item a:focus,
.nav-link:focus {
    text-decoration: none;
}

/* Pages menu */

.navbar--pages {
    padding: 3px 0;
}

.navbar--pages .nav__background {
    left: 0;
}

@media screen and (min-width: 992px) {
    .nav--pages {
        flex-direction: row;
    }

    .nav--pages > .nav__item {
        margin-bottom: 0;
    }
    
    .nav--pages > .nav__item + .nav__item > a,
    .nav--pages > .nav__item.current:first-child > a {
        padding-left: 9px;
        border-left: solid 1px white;
    }
    
    .nav--pages > .nav__item.current:last-child {
        padding-right: 10px;
        border-right: solid 1px white;
    }
    
    .nav--pages > .nav__item > * {
        border: none;        
        padding: 0.2rem 10px 0.1rem 0;
        margin-bottom: 0;
        font-size: 0.8rem;
        color: white;
        text-decoration: none;
        line-height: 1;
    }

    .nav--pages > .nav__item:not(.current) > *:hover,
    .nav--pages > .nav__item:not(.current) > *:focus {
        color: var(--clr-primary);
    }
    
    .nav--pages > .nav__item.current,
    .nav--pages > .nav__item.current::after, 
    .nav--pages > .nav__item.current::before {
        background-color: var(--clr-primary);
    }
    
    .nav--pages > .nav__item.current::after, 
    .nav--pages > .nav__item.current::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 10px;
    }
    
    .nav--pages > .nav__item.current::after {
        bottom: -10px;
        left: 0;
    }
    
    .nav--pages > .nav__item.current::before {
        top: -10px;
        left: 0;
    }
}

@keyframes slideOpen {
    from {
        opacity: 0;
        transform: translate3d(60%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideClose {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(60%, 0, 0);
    }
}

@keyframes slideDownOpen {
    from {
        opacity: 0;
        transform: translate3d(0, -60%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideDownClose {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 60%, 0);
    }
}

/* Main menu */

@media screen and (max-width: 991px) {
    .navbar--main {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.navbar--main .nav__background {
    background-color: var(--clr-primary);
    right: 0;
    bottom: 0;
    width: 80%;
    height: 100%;
    -webkit-animation: slideOpen 1s ease;
    animation: slideOpen 1s ease;
}

@media screen and (min-width: 992px) {
    .navbar--main .nav__background {width: 100%;}

    .nav--main {flex-direction:  row;}
    
    .nav--main > .nav__item > a {
        padding: 3px 4px;
        border-width: 1px;
        border-style: solid;
        border-image: linear-gradient(to top, transparent 0%, white 50%, transparent 100%) 1 100%;
        color: white;
        font-size: 1rem;
        line-height: 1;
        text-decoration: none;
        text-transform: uppercase;
    }

    .nav--main > .nav__item + .nav__item > a {
        border-left: none;
        border-left-width: 0;
    }
    
    .nav--main > .nav__item:hover > a,
    .nav--main > .nav__item.current > a {
        color: var(--clr-menu-hover);
    }
}

/* Menu child menu */

.nav--child {
    display: none;
    list-style: none;
}

@media screen and (min-width: 992px) {
    .nav--child {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        margin-top: 1.8rem;
        padding: 10px;
        min-width: 100%;
        background: var(--clr-submenu-background);
        list-style: none;
        z-index: 100;
    }
}


.nav--child > .nav__item > a {
    color: var(--clr-submenu-text);
    text-decoration: none;
    white-space: nowrap;
}

.nav--child > .nav__item > a:hover { 
    color: var(--clr-submenu-hover);
}

@media screen and (min-width: 992px) {
    .nav--child > .nav__item > a {
        padding: 0.8rem 0;
        border: none;
    }
    
    .nav--child > .nav__item + .nav__item a {
        border-top: solid 1px var(--clr-submenu-spacer);
    }

    .nav__item:hover .nav--child {
        display: block;
    }
}


/* Footer menu */

.nav--list {
    margin: auto 0;
    padding: 0.5rem 1rem;
    list-style: none;
    text-align: center;
}

.nav--list ul {
    padding: 0;
}

.nav--list a {
    padding: 0.1rem 1rem;
    color: white;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
}

.nav--list a:hover,
.nav--list a:focus {
    color: white;
    text-decoration: none;
}

.nav--footer { 
    display: flex;
    flex-direction: column;
    align-items: center
}

.nav--social {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 577px) {
    .nav--social { 
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.nav--social {flex-direction: row;}
.nav--social .nav__item {border:none;}

.nav--social i {
    font-size: 2.4rem;
}

/* 3.2.?? Horizontal menu */

.nav--horizontal {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

@media (min-width: 900px) { .nav--horizontal { flex-direction: row; } }

.nav--horizontal li,
.nav--horizontal a {
    color: var(--clr-menu-horizontal);
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    hyphens: manual;   
}

.nav--horizontal li {
    display: flex;
    flex: 1 1 0px;
    margin-bottom: 5px;
    max-width: 560px;
}

.nav--horizontal a {
    flex: 1;
    display: block;
    padding: 0.5rem 0.3rem 0.5rem 0.7rem;
    text-transform: uppercase;
    border: solid 1px var(--clr-menu-horizontal);
}

.nav--horizontal a:hover {text-decoration: none;}

@media (min-width: 900px) { 
    .nav--horizontal li { margin-bottom: 0; }
    .nav--horizontal li:not(:first-child) { margin-left: 5px; }
    .nav--horizontal li:not(:last-child) { margin-right: 5px; } 
}

.nav--horizontal li.current,
.nav--horizontal li.current a,
.nav--horizontal li:hover,
.nav--horizontal li:hover a {
    color: #FFF;
}

.nav--horizontal li.current a {
    background: var(--clr-menu-horizontal);
}

.nav--horizontal li:hover a {
    border-color: var(--clr-menu-horizontal-hover);
    background: var(--clr-menu-horizontal-hover);
}


.nav--years {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
}

.nav--years > li {
    flex: 0 1 calc(25% - 3.75px);
    margin: 0 !important;
}

@media screen and (min-width: 576px) {
    .nav--years > li {
        flex-basis: calc(14.285% - 4.285px);
    }
}


/*
 * Buttons
 */

.btn {
    border-radius: 0;
}

.btn > .d-flex > * {
    align-self: center;
}

.btn--block {
    display: block;
    width: 100%;
}

.btn--primary {
    background-color: var(--clr-primary);
    font-weight: bold;
    color: white;
}

.btn:is(:visited, :active, :hover, :focus) {
    text-decoration: none;
}

.btn--cart-tools {
    font-size: 2.5rem;
}

@media screen and (min-width: 768px) {
    .btn--cart-tools {
        font-size: 1rem;
    }  
}


/* Primary buttons */

.btn-primary {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    background-color: var(--clr-primary);
    border: none;
    border-radius: 0;
    padding: 0.6rem 1rem;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary.active {
    background-color: var(--clr-primary-light);
    color: white;
}
.btn-primary:focus {
    outline: dotted 1px var(--clr-primary-light);
    border: none;
}

.btn-primary:disabled {
    background-color: #E6E6E6;
    color: #474747
}

.btn-primary:is(:visited, :active, :hover, :focus) {
    color: var(--clr-white);
}


/* Grey buttons */

.btn-grey {
    background-color: #DEDEDE;
    color: black;
    font-weight: 600;
    text-align: left;
    line-height: 1;
    padding: 0.6rem 1rem;
    border-radius: 0;
    transition: none;
}
.btn-grey:hover,
.btn-grey:focus,
.btn-grey.focus,
.btn-grey.active {
    color: white;
    background-color: var(--clr-primary-light);
}

/* Success buttons */

.btn-success {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    background-color: #EE7623 ; /*#A7C73C;*/
    border: none;
    border-radius: 0;
    
    padding: 0.6rem 1rem;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success.active {
    background-color: #A14A0C;
    color: #FFF;
}

.btn-success:focus {
    outline: dotted 1px #A14A0C;
    border: none;
}

/* 
 * Tabs 
 */

.tabs {
    display: flex;
    margin-bottom: 10px;
    font-weight: bold;
    border-bottom: solid 5px var(--clr-primary);
}

.tabs__item {
    position: relative;
    flex: 1 1 auto;
    padding: calc(0.375rem + 2.5px) 3px calc(0.375rem - 2.5px) 3px;
    line-height: 1.5;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
}

.tabs__item.active {
    background: var(--clr-primary);
    color: white;
}

.tabs__item.active::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--clr-primary);
}

.tabs__item + .tabs__item {
    margin-left: 2px;
}

@media screen and (min-width: 768px) {
    .tabs__item {
        flex: 1 1 0;
    }
}

/* Navigation tabs */

.nav--tabs .nav-item {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 5px;
}

@media (min-width: 700px) {
    .nav--tabs .nav-item {
        flex-grow: 1;
        flex-basis: 0;
    }
    
    .nav--tabs .nav-item:not(:last-child) {
        margin-right: 10px;
    }   
}

.nav--tabs .nav-item .nav-link {
    padding: 0.5rem 0.3rem;
    padding-left: 10px;
    
    background: transparent;
    
    border: solid 1px var(--clr-primary);
    border-radius: 0;
    
    text-align: left;
    font-weight: bold;
    color: var(--clr-primary);
}

.nav--tabs .nav-item.active .nav-link,
.nav--tabs .nav-item .nav-link.active {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: white;
}

.nav--tabs .nav-item .nav-link:hover {
    background: var(--clr-primary-light);
    border-color: var(--clr-primary-light);
    color: white;
}

/********************************
 *
 *      FORMS
 *
 ********************************/

.form-control {
    border-radius: 0;
}

 .form__group {
    position: relative;
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr);
    margin-bottom: 2px;
}

.form__group--date-and-gender {
    grid-template-rows: 1fr 1fr;
    row-gap: 2px;
}

.form__label {
    margin-bottom: 0;
    padding: calc(0.375rem + 1px) 5px;
    background: #474D4E;
    font-size: 1rem;
    line-height: 1.5;
    color: white;
    font-weight: bold;
}

.form__label--alt {
    background: transparent;
    color: black;
}

.form__control {
    border: solid 1px #474D4E;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5; 
}

.form__addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #474D4E;
    color: white;
}

::placeholder {
    color: #cecece;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #cecece;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color:#cecece;
}

@media screen and (min-width: 576px) { 
    .form__group { 
        grid-template-columns: 30% 1fr;
    } 

    .form__group--date-and-gender {
        grid-template-columns: 30% 1fr;
    }
}

@media screen and (min-width: 768px) { 
    .form__group { 
        grid-template-columns: 20% 1fr;
    } 

    .form__group--date-and-gender {
        grid-template-columns: 20% 30% 20% 30%;
        grid-template-rows: 1fr;
    }
}

.form__group .form-select {
    border-color: #474D4E;
    border-radius: 0;
}

.form-check-input.empty,
.form__control.empty,
.form-select.empty {
    border-color: red;
}


.form__group .input__group--date .form-select {
    border-right: none;
    border-left: none;
}


.input__group--date {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto);
}

.input-group-btn .btn {
    height: 100%;
}

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

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

.button__group--form > * {
    width: calc(35% + 1px);
}

@media screen and (min-width: 576px) { 
    .button__group--form > * {
        width: calc(30% + 1px);
    }
}

@media screen and (min-width: 768px) { 
    .button__group--form > * {
        width: calc(20% + 1px);
    }
}

.custom-select--start {
    width: 10ch;
    min-height: 23px;
    padding-top: 3px;
}


/* Custom checkbox */
.custom-checkbox {display: none;}

.custom-checkbox ~ label:first-of-type {
    border: solid 1px var(--clr-gray-700);
    height: 23px;
    width: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-checkbox[disabled] ~ label:first-of-type {
    border-color: var(--clr-gray-500);
}

.custom-checkbox ~ label:first-of-type > .checked,
.custom-checkbox:checked ~ label:first-of-type > .unchecked {
    visibility: hidden; 
    opacity: 0;
}

.custom-checkbox:checked ~ label:first-of-type > .checked,
.custom-checkbox ~ label:first-of-type > .unchecked {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 200ms;
}

.custom-radio {display: none;}
.custom-radio + label {
    position: relative;
    display: flex;
    width: 1.6rem;
    height: 1.6rem;
    border: solid 2px var(--clr-grey);
    border-radius: 100vh;
    background-color: var(--clr-white);
    justify-content: center;
    align-items: center;
}

.custom-radio:checked + label {
    border-color: var(--clr-primary-dark);
    stroke: var(--clr-primary-dark);
    color: var(--clr-primary-dark);
}

.custom-radio + label > * {display: none}
.custom-radio:checked + label > * {display: block}


/* Alerts */

.alert {
    border-radius: 0;
    border: none;
    color: var(--clr-white);
}

.alert .close, .alert .alert-heading {display: none;}

.alert-warning {background-color: var(--clr-red);}

.alert-danger,
.alert--danger {
    background-color: #dc3545;
    color: white;
}

.form__group .alert {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: -52px;
}


/********************************
 *
 *      TABLES
 *
 ********************************/

.dataTables_filter { display: none; }

/* .table--bordered {
    border: solid 3px var(--clr-primary);
}

.table--bordered :is(td, th) {
    border: none;
    border-top: solid 1px var(--clr-gray-300);
} */

.table .bg-primary { 
    color: var(--clr-white);
}
.peetri-jooks .table .bg-primary {
    color: black;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom-width: 0;
}

.table--border {
    padding: 3px;
    background-color: var(--clr-primary);
    margin-bottom: 1rem;
}

.table--border .table {
    background-color: var(--clr-white);
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .table--registration :is(table, thead, tbody, tfoot, tr, th, td) {
        display: block;
        width: 100%;
    }

    .table--registration tr {
        border-bottom: solid 1px var(--clr-gray-400);
    }

    .table--registration :is(th, td) {
        display: flex;
        gap: 10px;
        border-bottom: none;
    }

    .table--registration thead > tr > th > *:first-child {
        flex: 0 0 60%;
        text-align: right;
    }

    .table--registration thead > tr > th:last-child {
        display: none;
    }

    .table--registration td[data-label]::before {
        display: block;
        content: attr(data-label);
        width: 60%;
        min-width: 60%;
        text-align: right;
    }
}

/********************************
 *
 *      DISTANCES VIEW
 *
 ********************************/

/* Distances column */

.distances--col > .distances__item + .distances__item {
    margin-top: 15px;
}

@media screen and (min-width: 768px) {
    .distances--col > .distances__item {
        display: flex;
    }

    .distances--col > .distances__item:nth-child(odd) {
        flex-direction: row-reverse;
    }
}

.distances--col > .distances__item:nth-child(even) {
    background-color: var(--clr-primary);
    padding: 15px;
    color: white;
}

.distances--col > .distances__item:nth-child(odd) > .distances__item__body {padding-right: 15px;}

.distances--col > .distances__item:nth-child(even) > .distances__item__body {padding-left: 15px;}
.distances--col > .distances__item:nth-child(even) > .distances__item__body > * {color: var(--clr-white);}

/* .distances--col > .distances__item > .distances__item__image {
    flex: 0 0 100%;
}

.distances--col > .distances__item > .distances__item__body {
    flex: 0 0 100%;
} */

@media screen and (min-width: 768px) {
    .distances--col > .distances__item > .distances__item__image {
        flex: 0 0 41.666667%;
    }
    
    .distances--col > .distances__item > .distances__item__body {
        flex: 0 0 58.333333%;
    }
}

/* Distances grid */

.distances--grid { 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(aut-fill, 1fr);
    gap: 15px;
}

@media screen and (min-width: 768px) {
    .distances--grid {
        grid-template-columns: 1fr 1fr;
    }
}

.distances--grid > .distances__item {
    display: flex;
    border: solid 3px var(--clr-primary);
}

.distances--grid > .distances__item > * {
    flex: 1 1 0;
}

.distances--grid > .distances__item > .distances__item__image {
    display: flex;
    overflow: hidden;
}

.distances--grid > .distances__item > .distances__item__image > img {
  object-fit: cover;
  width: 100%;
  height: auto;
  /* margin: auto 0; */
  transition: transform 0.5s ease; 
}

.distances--grid > .distances__item > .distances__item__image:hover > img {
    transform: scale(1.1);
}

.distances--grid > .distances__item > .distances__item__body {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}

.distances--grid > .distances__item > .distances__item__body > *:first-child {
    margin-top: auto;
}

.distances--grid > .distances__item > .distances__item__body > *:last-child {
    margin-bottom: auto;
}

.distances--grid > .distances__item > .distances__item__body > h5 {
    padding-bottom: 0;
}
.distances--grid > .distances__item > .distances__item__body > h5 + h5 {
    padding-top: 10px;
}

:is(.distances--col, .distances--grid) > :is(a, a:hover) {
    text-decoration: none;
    color: var(--clr-black);
}


/********************************
 *
 *      SEASON VIEW
 *
 ********************************/


/* Slideshow */
#slides {
    position: relative;
    height: 100%;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0;
}
.showing {
    opacity: 1;
    z-index: 2;
}
.slideshow-controls {
    position: absolute;
    /*display: none;*/
    z-index: 20;
    width: 30%;
    height: 100%;
    border: none;
    background: transparent;
}
.slideshow-controls:focus {
    outline: none;
}
.slideshow-controls#previous {
    top: 0;
    left: 0;
}
.slideshow-controls#next {
    top: 0;
    right: 0;
}

.card-peetrijooks,
.card-slideshow {
    clear: both;
    
    min-height: 600px;
    height: calc(100vh - 105px);
    
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0;
    /*
    opacity: 0;
    -webkit-transition: opacity 1.0s linear 0s;
    transition: opacity 1.0s linear 0s;*/
}
.card-img-overlay-peetrijooks,
.card-slideshow-overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    align-items: center;
    
    min-height: 600px;
    height: calc(100vh - 105px);
    
    z-index: 10;
}

.slogan {
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
/*    -webkit-animation: fadeIn 2.5s ease;
    animation: fadeIn 2.5s ease;*/
    padding: 0 20px;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -40%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.slogan-notice,
.slogan-main,
.slogan-main a {
    font-size: 2rem;
    line-height: 1;
    text-shadow: -1px -1px 2px rgba(0,0,0,0.9), 
        -1px 1px 2px rgba(0,0,0,0.9),
        1px -1px 2px rgba(0,0,0,0.9),
        3px 3px 5px rgba(0,0,0,0.9);
    margin-bottom: 1.1rem;
}
.slogan-date {
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 30px;
}
.slogan-date a {
    color: #FFF;
}
.slogan-date a:hover { text-decoration: none; }
.slogan-date a:focus,
.slogan-date a:active {
    outline: none;
    color: #FFF;
}
.slogan-date::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #FFF;
    background: linear-gradient(to left, rgba(1, 1, 1, 0), #FFF 10%, #FFF 80%, rgba(1, 1, 1, 0));
    display: block;
    position: relative;
    top: -8px;
}
.slogan-date span {
    position: relative;
    
    padding: 0.4rem 1rem;
    z-index: 1;
    
    background: var(--clr-primary);
    border: 1px solid #FFF;
    border-image-source: linear-gradient(10deg, var(--clr-primary), #FFF 10%, #FFF 80%, var(--clr-primary)); 
    border-image-slice: 1;
    /*-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px; */
}

.slogan a,
.slogan a:hover {
    text-decoration: none;
}

.slogan-date span.slogan-btn {
    border-radius: 0;
}

.slogan-date span.slogan-btn:hover {
    background: var(--clr-primary-light);
}

.slogan-date span a:hover,
.slogan-date span a:focus {
    text-decoration: none;
}

.slogan-date-one {
    margin-bottom: 14px;
}

.liveContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
@media (max-width: 600px) {
    .slogan-main {
        font-size: 1.3rem;
        line-height: 1
    }
    .slogan-date {
        font-size: 0.9rem;
    }
}
@media (max-width: 420px) {
    .slogan-main {
        font-size: 1.3rem;
        line-height: 1;
    }
}
@media (max-width: 360px) {
    .slogan-main {
        font-size: 1.1rem;
        line-height: 1;
    }
    .slogan-date {
        font-size: 1rem;
    }
    .slogan-date span {
        padding: 0.2rem 0.5rem;
    }
}
@media (max-width: 272px) {
    .slogan-main {
        font-size: 1.1rem;
        line-height: 1;
    }
    .slogan-date {
        font-size: 0.8rem;
    }
    .slogan-date span {
        padding: 0.2rem 0.5rem;
    }
}


/* 
    FB PAGE PLUGIN 
*/
.fb-column {
    text-align: center;
}

@media (min-width: 771px) {
    .fb-column { text-align: right; }
}

.fb-popup .modal-dialog {
    max-width: 340px;
}

.fb-popup .modal-content {
    border: none;
    background: transparent;
}

.fb-popup .modal-header {
    border: none;
}

.fb-popup .modal-body {
    padding: 0;
}

.fb-popup .close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    color: #FFF;
    background: #333;
    opacity: 0.5;
    border: solid 2px #FFF;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    z-index: 9999;
}

.fb-popup .close:hover {
    opacity: 1.0;
}


/* Payment methods */

.payment-methods {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
    gap: 5px;
    margin-bottom: 5px;
}

@media screen and (min-width: 330px) {
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 576px) {
    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 992px) {
    .payment-methods {
        grid-template-columns: repeat(6, 1fr);
    }
}

.payment-method {
    border: solid 1px #DDD;
    text-decoration: none;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
}

.payment-method button:disabled {
    opacity: 0.5;
}

.payment-method > .btn-link {
    padding: 0;
    margin: 0;
    color: black;
}

.payment-method > .btn-link:hover {
    text-decoration: none;
}

.payment-method > .btn-link > span {
    margin: auto;
}

.payment-method:hover {
    border: solid 1px var(--clr-primary-light);
    text-decoration: none;
}

.payment-method--voucher {
    padding: 17.43px 5px;
}



/* Flex containers, frontpage (?) */

.flex-container {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
}

.flex-cell {
    position: relative;
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0.5rem;
    box-sizing: border-box;
}

.flex-cell > div {position: relative;}

@media (max-width: 991px) {
    .flex-cell {
        flex: 0 0 33%;
    }
}

@media (max-width: 576px) {
    .flex-cell {
        flex: 0 0 50%;
    }
}

.flex-squares .flex-cell:before {
    content: '';
    display: table;
    padding-top: 100%;
}

.cols-2 .flex-cell { flex: 0 0 50%; }
.cols-3 .flex-cell { flex: 0 0 33.333%; }
.cols-4 .flex-cell { flex: 0 0 25%; }

.row-height--2 > * { height: calc((100vh - 190px) / 2); }
.row-height--3 > * { height: calc((100vh - 210px) / 3); }
.row-height--4 > * { height: calc((100vh - 230px) / 4); }

@media (max-width: 320px) {
    .flex-cell,
    .cols-2 .flex-cell,
    .cols-3 .flex-cell,
    .cols-4 .flex-cell {
        flex: 0 0 100%;
    }
}

.flex-item {
    position: relative;
    flex-grow: 1;
    background: #FFF;
    background-size: cover !important;
    background-position: 50% 50% !important;
    color: #FFF;

    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.flex-item[onclick] {
    cursor: pointer;
}

.flex-item-body {
    position: relative;
    padding-bottom: 20px;
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
}

.flex-item-title {
    text-align: center;
    color: #FFF;
    font-size: 2.1rem;
    line-height: 0.8;
    text-shadow: -1px -1px 2px rgba(0,0,0,0.9), 
        -1px 1px 2px rgba(0,0,0,0.9),
        1px -1px 2px rgba(0,0,0,0.9),
        3px 3px 5px rgba(0,0,0,0.9);
}

.flex-item-title a {
    color: var(--clr-white);
}

.link-container:not(.media) {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}

.link-container:hover {
    text-decoration: none;
}

.img-bg {
    width: 100%;
    height: 240px;
    background-size: cover !important;
    background-position: 50% 50% !important;
}

@media (min-width: 769px) {
    .img-bg {
        height: 100%;
    }
}

.background {
    width: 100%;
    height: 100% !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}

.bg-hover-zoom {
    overflow: hidden;
}

.bg-hover-zoom .background,
.bg-hover-zoom .media-image,
.img-hover-zoom img {
    transition: transform .5s, filter 1.5s ease-in-out;
}

/* The Transformation */
.bg-hover-zoom:hover .background,
.bg-hover-zoom:hover .media-image,
.img-hover-zoom:hover img {
    transform: scale(1.1);
}

/* Colorize-zoom Container */
.bg-hover-zoom--colorize,
.img-hover-zoom--colorize img {
    transition: transform .5s, filter 1.5s ease-in-out;
    filter: grayscale(100%);
}

/* The Transformation */
.bg-hover-zoom--colorize:hover,
.img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    transform: scale(1.1);
}

.bg-position-0, .media-image.bg-position-0 { background-position: 0 0 !important; }
.bg-position-25, .media-image.bg-position-25 { background-position: 25% 25% !important; }
.bg-position-50, .media-image.bg-position-50 { background-position: 50% 50% !important; }
.bg-position-75, .media-image.bg-position-75 { background-position: 75% 75% !important; }
.bg-position-100, .media-image.bg-position-100 { background-position: 100% 100% !important; }

@media (min-width: 576px) {
    .bg-position-sm-0, .media-image.bg-position-sm-0 { background-position: 0 0 !important; }
    .bg-position-sm-25, .media-image.bg-position-sm-25 { background-position: 25% 25% !important; }
    .bg-position-sm-50, .media-image.bg-position-sm-50 { background-position: 50% 50% !important; }
    .bg-position-sm-75, .media-image.bg-position-sm-75 { background-position: 75% 75% !important; }
    .bg-position-sm-100, .media-image.bg-position-sm-100 { background-position: 100% 100% !important; }
}

@media (min-width: 768px) {
    .bg-position-md-0, .media-image.bg-position-md-0 { background-position: 0 0 !important; }
    .bg-position-md-25, .media-image.bg-position-md-25 { background-position: 25% 25% !important; }
    .bg-position-md-50, .media-image.bg-position-md-50 { background-position: 50% 50% !important; }
    .bg-position-md-75, .media-image.bg-position-md-75 { background-position: 75% 75% !important; }
    .bg-position-md-100, .media-image.bg-position-md-100 { background-position: 100% 100% !important; }
}

@media (min-width: 992px) {
    .bg-position-lg-0, .media-image.bg-position-lg-0 { background-position: 0 0 !important; }
    .bg-position-lg-25, .media-image.bg-position-lg-25 { background-position: 25% 25% !important; }
    .bg-position-lg-50, .media-image.bg-position-lg-50 { background-position: 50% 50% !important; }
    .bg-position-lg-75, .media-image.bg-position-lg-75 { background-position: 75% 75% !important; }
    .bg-position-lg-100, .media-image.bg-position-lg-100 { background-position: 100% 100% !important; }
}

@media (min-width: 1200px) {
    .bg-positionl-0, .media-image.bg-positionl-0 { background-position: 0 0  !important; }
    .bg-positionl-25, .media-image.bg-positionl-25 { background-position: 25% 25% !important; }
    .bg-positionl-50, .media-image.bg-positionl-50 { background-position: 50% 50% !important; }
    .bg-positionl-75, .media-image.bg-positionl-75 { background-position: 75% 75% !important; }
    .bg-positionl-100, .media-image.bg-positionl-100 { background-position: 100% 100% !important; }
}

.bg-position-y-0, .media-image.bg-position-y-0 { background-position-y: 0 !important; }
.bg-position-y-25, .media-image.bg-position-y-25 { background-position-y: 25% !important; }
.bg-position-y-50, .media-image.bg-position-y-50 { background-position-y: 50% !important; }
.bg-position-y-75, .media-image.bg-position-y-75 { background-position-y: 75% !important; }
.bg-position-y-100, .media-image.bg-position-y-100 { background-position-y: 100% !important; }

@media (min-width: 576px) {
    .bg-position-sm-y-0, .media-image.bg-position-sm-y-0 { background-position-y: 0 !important; }
    .bg-position-sm-y-25, .media-image.bg-position-sm-y-25 { background-position-y: 25% !important; }
    .bg-position-sm-y-50, .media-image.bg-position-sm-y-50 { background-position-y: 50% !important; }
    .bg-position-sm-y-75, .media-image.bg-position-sm-y-75 { background-position-y: 75% !important; }
    .bg-position-sm-y-100, .media-image.bg-position-sm-y-100 { background-position-y: 100% !important; }
}

@media (min-width: 768px) {
    .bg-position-md-y-0, .media-image.bg-position-md-y-0 { background-position-y: 0 !important; }
    .bg-position-md-y-25, .media-image.bg-position-md-y-25 { background-position-y: 25% !important; }
    .bg-position-md-y-50, .media-image.bg-position-md-y-50 { background-position-y: 50% !important; }
    .bg-position-md-y-75, .media-image.bg-position-md-y-75 { background-position-y: 75% !important; }
    .bg-position-md-y-100, .media-image.bg-position-md-y-100 { background-position-y: 100% !important; }
}

@media (min-width: 992px) {
    .bg-position-lg-y-0, .media-image.bg-position-lg-y-0 { background-position-y: 0 !important; }
    .bg-position-lg-y-25, .media-image.bg-position-lg-y-25 { background-position-y: 25% !important; }
    .bg-position-lg-y-50, .media-image.bg-position-lg-y-50 { background-position-y: 50% !important; }
    .bg-position-lg-y-75, .media-image.bg-position-lg-y-75 { background-position-y: 75% !important; }
    .bg-position-lg-y-100, .media-image.bg-position-lg-y-100 { background-position-y: 100% !important; }
}

@media (min-width: 1200px) {
    .bg-position-xl-y-0, .media-image.bg-position-xl-y-0 { background-position-y: 0 !important; }
    .bg-position-xl-y-25, .media-image.bg-position-xl-y-25 { background-position-y: 25% !important; }
    .bg-position-xl-y-50, .media-image.bg-position-xl-y-50 { background-position-y: 50% !important; }
    .bg-position-xl-y-75, .media-image.bg-position-xl-y-75 { background-position-y: 75% !important; }
    .bg-position-xl-y-100, .media-image.bg-position-xl-y-100 { background-position-y: 100% !important; }
}

.bg-position-x-0, .media-image.bg-position-x-0 { background-position-x: 0 !important; }
.bg-position-x-25, .media-image.bg-position-x-25 { background-position-x: 25% !important; }
.bg-position-x-50, .media-image.bg-position-x-50 { background-position-x: 50% !important; }
.bg-position-x-75, .media-image.bg-position-x-75 { background-position-x: 75% !important; }
.bg-position-x-100, .media-image.bg-position-x-100 { background-position-x: 100% !important; }

@media (min-width: 576px) {
    .bg-position-sm-x-0, .media-image.bg-position-sm-x-0 { background-position-x: 0 !important; }
    .bg-position-sm-x-25, .media-image.bg-position-sm-x-25 { background-position-x: 25% !important; }
    .bg-position-sm-x-50, .media-image.bg-position-sm-x-50 { background-position-x: 50% !important; }
    .bg-position-sm-x-75, .media-image.bg-position-sm-x-75 { background-position-x: 75% !important; }
    .bg-position-sm-x-100, .media-image.bg-position-sm-x-100 { background-position-x: 100% !important; }
}

@media (min-width: 768px) {
    .bg-position-md-x-0, .media-image.bg-position-md-x-0 { background-position-x: 0 !important; }
    .bg-position-md-x-25, .media-image.bg-position-md-x-25 { background-position-x: 25% !important; }
    .bg-position-md-x-50, .media-image.bg-position-md-x-50 { background-position-x: 50% !important; }
    .bg-position-md-x-75, .media-image.bg-position-md-x-75 { background-position-x: 75% !important; }
    .bg-position-md-x-100, .media-image.bg-position-md-x-100 { background-position-x: 100% !important; }
}

@media (min-width: 992px) {
    .bg-position-lg-x-0, .media-image.bg-position-lg-x-0 { background-position-x: 0 !important; }
    .bg-position-lg-x-25, .media-image.bg-position-lg-x-25 { background-position-x: 25% !important; }
    .bg-position-lg-x-50, .media-image.bg-position-lg-x-50 { background-position-x: 50% !important; }
    .bg-position-lg-x-75, .media-image.bg-position-lg-x-75 { background-position-x: 75% !important; }
    .bg-position-lg-x-100, .media-image.bg-position-lg-x-100 { background-position-x: 100% !important; }
}

@media (min-width: 1200px) {
    .bg-position-xl-x-0, .media-image.bg-position-xl-x-0 { background-position-x: 0 !important; }
    .bg-position-xl-x-25, .media-image.bg-position-xl-x-25 { background-position-x: 25% !important; }
    .bg-position-xl-x-50, .media-image.bg-position-xl-x-50 { background-position-x: 50% !important; }
    .bg-position-xl-x-75, .media-image.bg-position-xl-x-75 { background-position-x: 75% !important; }
    .bg-position-xl-x-100, .media-image.bg-position-xl-x-100 { background-position-x: 100% !important; }
}

.contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.position-bottom {
    width: 100%;
    position: absolute;
    bottom: 20px;
}



.link-container:not(.media) {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}

.link-container:hover {
    text-decoration: none;
}

.rows-2 .media {
    height: calc((100vh - 190px) / 2);
}

.rows-2.contacts-grid .media {
    height: 500px;
}

@media (min-width: 401px) {
    .rows-2.contacts-grid .media {
        height: calc((100vh - 190px) / 2);
    }
}

.rows-3 .media {
    height: calc((100vh - 210px) / 3);
}

/* Google Maps */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.responsive-google-form {
    height: 2200px;
}

@media (max-width: 700px) {
    .responsive-google-form {
        height: 2270px;
    }
}

@media (max-width: 600px) {
    .responsive-google-form {
        height: 2300px;
    }
}

@media (max-width: 550px) {
    .responsive-google-form {
        height: 2500px;
    }
}

@media (max-width: 500px) {
    .responsive-google-form {
        height: 2700px;
    }
}

/* @media (max-width: 460px) {
    .responsive-google-form {
        height: 2100px;
    }
} */

@media (max-width: 350px) {
    .responsive-google-form {
        height: 3000px;
    }
}

.small-only { position: relative; }

@media (min-width: 992px) {
    .small-only { display: none; }
}


/* Language switcher */
div.mod-languages li {
    margin-left: 1px;
    margin-right: 1px;
}

div.mod-languages img {
    width: 1.8em;
}


/* Sponsors */
.sponsors-grid {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}

/* .sponsors__row--peetri-jooks .sponsors-grid {justify-content: space-between;} */

.sponsors-grid-animated {
    position: relative;
    
    display: grid;
    grid-template-columns: 2rem auto 2rem;

    width: 100%;
}

.sponsors-grid-animated-outer {
    width: 100%;
    overflow: hidden;
}

.sponsors-grid-animated-inner {
    display: flex;
    flex-direction: row;
    
    width: 100%;
}

.sponsors-grid-animated-inner .sponsor {
    flex-basis: auto;
}

.sponsors-grid-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sponsors-grid-button a {
    font-size: 2rem;
    color: #0095D7;
}

.sponsors-grid-button a:hover {
    color: #19BAFF;
    text-decoration: none;
}

.sponsors-grid-button.next {
    text-align: right;
}

.sponsor {
    /*flex-basis: 11.1111%;*/
    flex-basis: 14.25%;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    align-items: center;
}

.sponsors-row-2 .sponsor:not(.sponsor-animated) {
    flex-basis: 50%;
}

.sponsors-row-3 .sponsor:not(.sponsor-animated) {
    flex-basis: 33.333333%;
}

@media (min-width: 576px) {
    .sponsors-row-2 .sponsor:not(.sponsor-animated), /* {flex-basis: 25%} */
    .sponsors-row-3 .sponsor:not(.sponsor-animated) {flex-basis: 20%}
}

@media (min-width: 992px) {
    .sponsors-row-2 .sponsor:not(.sponsor-animated),
    .sponsors-row-3 .sponsor:not(.sponsor-animated) {flex-basis: 16.66667%}
}

.sponsor-featured .sponsors-grid {
    justify-content: center;
}

.sponsor-featured .sponsor {
    flex-basis: 100%;
}

@media screen and (min-width: 576px) {.sponsor-featured .sponsor {flex-basis: 50%;}}

.sponsor-link {
    padding: 5px;
}


/* .sponsors-row-2 .sponsor__item--peetri-jooks {flex-basis: 15%;} */
.sponsor-featured .sponsor__item--peetri-jooks {flex-basis: 60%;}
@media screen and (min-width: 576px) {.sponsor-featured .sponsor__item--peetri-jooks {flex-basis: 40%;}}
@media screen and (min-width: 992px) {.sponsor-featured .sponsor__item--peetri-jooks {flex-basis: 20%;}}

.sponsor-featured .sponsor__item--hiiumaa {flex-basis: 40%}
@media screen and (min-width: 577px) {.sponsor-featured .sponsor__item--hiiumaa {flex-basis: 25%}}

.tickets {
    --tickets-per-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--tickets-per-row), 1fr);
    gap: 1em;
}

@media screen and (min-width: 768px) {.tickets {--tickets-per-row: 2}}
@media screen and (min-width: 1024px) {.tickets {--tickets-per-row: 4}}

/* ==================================================
Page specific styles
================================================== */

.page--hiiumaa-juhend-ratturile ol>li>ol {
    padding-left: 0;
}

.page--hiiumaa-juhend-ratturile ol {
    counter-reset: item;
    list-style-type: none;
}

.page--hiiumaa-juhend-ratturile ol>li {
    counter-increment: item;
}

.page--hiiumaa-juhend-ratturile ol>li::before {
    content: counters(item, '.') ' - ';
    font-weight: bold;
}



/********************************
 *
 *      UTILITIES
 *
 ********************************/

/* Padding */

.p-0 { padding: 0 !important; }
.pr-0 {padding-right: 0}
.pl-0 {padding-left: 0}
/*
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 5px !important; }
.pt-2 { padding-top: 10px !important; }
.pt-3 { padding-top: 15px !important; }
.pt-4 { padding-top: 20px !important; }
.pt-5 { padding-top: 30px !important; }

.pr-0 { padding-right: 0 !important; }
.pr-3 { padding-right: 15px !important; }
.pr-5 { padding-right: 30px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb--1 { padding-bottom: 5px !important; }
.pb--2 { padding-bottom: 10px !important; }
.pb-3 { padding-bottom: 15px !important; }
.pb--4 { padding-bottom: 20px !important; }
.pb--5 { padding-bottom: 30px !important; }

.pl-0 { padding-left: 0 !important; }
.pl-3 { padding-left: 15px !important; }
.pl-5 { padding-left: 30px !important; } */

/* Margins */

.m-0, .m--0 { margin: 0 !important; }

.mt--3 { margin-top: 15px !important; }
.mt-5 { margin-top: 30px !important; }

.mb--0 { margin-bottom: 0 !important; }
.mb--1 { margin-bottom: 5px !important; }
.mb--2 { margin-bottom: 10px !important; }
.mb--2px { margin-bottom: 2px !important; }
.mb--6px { margin-bottom: 6px !important; }

.mt-auto {margin-top: auto !important}
.mt-0 { margin-top: 0 !important}
.mt-1 {margin-top: 0.25rem !important}
.mt-2 {margin-top: 0.5rem !important}
.mt-3 {margin-top: 0.75rem !important}
.mt-4 {margin-top: 1rem !important}
/* .mt-5 {margin-top: 1.25rem} */
.mt-6 {margin-top: 1.5rem !important}
.mt-7 {margin-top: 1.75rem !important}
.mt-8 {margin-top: 2rem !important}

.mb-auto {margin-bottom: auto !important}
.mb-0 { margin-bottom: 0 !important}
.mb-1 {margin-bottom: 0.25rem !important}
.mb-2 {margin-bottom: 0.5rem !important}
.mb-3 {margin-bottom: 0.75rem !important}
.mb-4 {margin-bottom: 1rem !important}
.mb-5 {margin-bottom: 1.25rem !important}
.mb-6 {margin-bottom: 1.5rem !important}
.mb-7 {margin-bottom: 1.75rem !important}
.mb-8 {margin-bottom: 2rem !important}
.mb-40 {margin-bottom: 5rem !important}

.p-1 {padding: 0.25rem !important}
.p-2 {padding: 0.5rem !important}
.p-3 {padding: 0.75rem !important}
.p-4 {padding: 1rem !important}
.p-5 {padding: 1.25rem !important}
.p-6 {padding: 1.5rem !important}
.p-7 {padding: 1.75rem !important}
.p-8 {padding: 2rem !important}

.px-1 {padding-left: 0.25rem !important; padding-right: 0.25rem !important;}
.px-2 {padding-left: 0.5rem !important; padding-right: 0.5rem !important;}
.px-3 {padding-left: 0.75rem !important; padding-right: 0.75rem !important;}
.px-4 {padding-left: 1rem !important; padding-right: 1rem !important;}
.px-5 {padding-left: 1.25rem !important; padding-right: 1.25rem !important;}
.px-6 {padding-left: 1.5rem !important; padding-right: 1.5rem !important;}
.px-7 {padding-left: 1.75rem !important; padding-right: 1.75rem !important;}
.px-8 {padding-left: 2rem !important; padding-right: 2rem !important;}

.py-1 {padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;}
.py-2 {padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;}
.py-3 {padding-top: 0.75rem !important; padding-bottom: 0.75rem !important;}
.py-4 {padding-top: 1rem !important; padding-bottom: 1rem !important;}
.py-5 {padding-top: 1.25rem !important; padding-bottom: 1.25rem !important;}
.py-6 {padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;}
.py-7 {padding-top: 1.75rem !important; padding-bottom: 1.75rem !important;}
.py-8 {padding-top: 2rem !important; padding-bottom: 2rem !important;}

.pt-1 {padding-top: 0.25rem !important}
.pt-2 {padding-top: 0.5rem !important}
.pt-3 {padding-top: 0.75rem !important}
.pt-4 {padding-top: 1rem !important}
.pt-5 {padding-top: 1.25rem !important}
.pt-6 {padding-top: 1.5rem !important}
.pt-7 {padding-top: 1.75rem !important}
.pt-8 {padding-top: 2rem !important}
.pt-12 {padding-top: 3rem !important}
.pt-16 {padding-top: 4rem !important}
.pt-20 {padding-top: 5rem !important}

.pr-1 {padding-right: 0.25rem !important}
.pr-2 {padding-right: 0.5rem !important}

.pb-1 {padding-bottom: 0.25rem !important}
.pb-2 {padding-bottom: 0.5rem !important}
.pb-3 {padding-bottom: 0.75rem !important}
.pb-4 {padding-bottom: 1rem !important}
.pb-5 {padding-bottom: 1.25rem !important}
.pb-6 {padding-bottom: 1.5rem !important}
.pb-7 {padding-bottom: 1.75rem !important}
.pb-8 {padding-bottom: 2rem !important}
.pb-12 {padding-bottom: 3rem !important}
.pb-16 {padding-bottom: 4rem !important}
.pb-20 {padding-bottom: 5rem !important}

.pl-0 {padding-left: 0}
.pl-1 {padding-left: 0.25rem !important}
.pl-2 {padding-left: 0.5rem !important}
/* .pl-3 {padding-left: 0.75rem} */
.pl-4 {padding-left: 1rem !important}
/* .pl-5 {padding-left: 1.25rem} */
.pl-6 {padding-left: 1.5rem !important}

@media screen and (min-width: 992px) {
    .lg\:pl-0 {padding-left: 0 !important}
    .lg\:pb-20 {padding-bottom: 5rem !important}
}

/* Bootstrap overrides / additions */

.text-sm {font-size: 0.875rem}
.text-md {font-size: 1rem}
.text-lg {font-size: 1.125rem}
.text-xl {font-size: 1.25rem}
.text-2xl {font-size: 1.375rem}
.text-3xl {font-size: 1.5rem}
.text-4xl {font-size: 1.625rem}
.text-5xl {font-size: 3rem; line-height: 1;}
.text-6xl {font-size: 3.75rem; line-height: 1;}
.text-7xl {font-size: 4.5rem; line-height: 1;}
.text-8xl {font-size: 6rem; line-height: 1;}
.text-9xl {font-size: 8rem; line-height: 1;}

@media screen and (min-width: 786px) {
    .md\:text-sm {font-size: 0.875rem}
    .md\:text-md {font-size: 1rem}
    .md\:text-lg {font-size: 1.125rem}
    .md\:text-xl {font-size: 1.25rem}
    .md\:text-2xl {font-size: 1.375rem}
    .md\:text-3xl {font-size: 1.5rem}
}

@media screen and (min-width: 992px) {
    .lg\:text-sm {font-size: 0.875rem}
    .lg\:text-md {font-size: 1rem}
    .lg\:text-lg {font-size: 1.125rem}
    .lg\:text-xl {font-size: 1.25rem}
    .lg\:text-2xl {font-size: 1.375rem}
    .lg\:text-3xl {font-size: 1.5rem}
    .lg\:text-5xl {font-size: 3rem; line-height: 1;}
    .lg\:text-6xl {font-size: 3.75rem; line-height: 1;}
    .lg\:text-7xl {font-size: 4.5rem; line-height: 1;}
    .lg\:text-8xl {font-size: 6rem; line-height: 1;}
    .lg\:text-9xl {font-size: 8rem; line-height: 1;}
}

.leading-1 {line-height: 1}
.leading-1\.1 {line-height: 1.1}
.leading-1\.2 {line-height: 1.2}
.leading-1\.3 {line-height: 1.3}
.leading-1\.4 {line-height: 1.4}

.list-none {list-style-type: none}

.text-decoration-0,
.text-decoration-0:hover {
    text-decoration: none;
}

.font--thin       {font-weight: 100}
.font--extralight {font-weight: 200}
.font--light      {font-weight: 300}
.font--normal     {font-weight: 400}
.font--medium     {font-weight: 500}
.font--semibold   {font-weight: 600}
.font--bold       {font-weight: 700}
.font--extrabold  {font-weight: 800}
.font--black      {font-weight: 900}

.text--white {color: var(--clr-white)}
.text--black {color: var(--clr-black)}
.text--gray-100 {color: var(--clr-gray-100)}
.text--gray-200 {color: var(--clr-gray-200)}
.text--gray-300 {color: var(--clr-gray-300)}
.text--gray-400 {color: var(--clr-gray-400)}
.text--gray-500 {color: var(--clr-gray-500)}
.text--gray-600 {color: var(--clr-gray-600)}
.text--gray-700 {color: var(--clr-gray-700)}
.text--gray-800 {color: var(--clr-gray-800)}
.text--gray-900 {color: var(--clr-gray-900)}

.hover\:text--white:hover {color: var(--clr-white)}
.hover\:text--black:hover {color: var(--clr-black)}
.hover\:text--gray-100:hover {color: var(--clr-gray-100)}
.hover\:text--gray-200:hover {color: var(--clr-gray-200)}
.hover\:text--gray-300:hover {color: var(--clr-gray-300)}
.hover\:text--gray-400:hover {color: var(--clr-gray-400)}
.hover\:text--gray-500:hover {color: var(--clr-gray-500)}
.hover\:text--gray-600:hover {color: var(--clr-gray-600)}
.hover\:text--gray-700:hover {color: var(--clr-gray-700)}
.hover\:text--gray-800:hover {color: var(--clr-gray-800)}
.hover\:text--gray-900:hover {color: var(--clr-gray-900)}

.focus\:text--white:focus {color: var(--clr-white)}
.focus\:text--black:focus {color: var(--clr-black)}
.focus\:text--gray-100:focus {color: var(--clr-gray-100)}
.focus\:text--gray-200:focus {color: var(--clr-gray-200)}
.focus\:text--gray-300:focus {color: var(--clr-gray-300)}
.focus\:text--gray-400:focus {color: var(--clr-gray-400)}
.focus\:text--gray-500:focus {color: var(--clr-gray-500)}
.focus\:text--gray-600:focus {color: var(--clr-gray-600)}
.focus\:text--gray-700:focus {color: var(--clr-gray-700)}
.focus\:text--gray-800:focus {color: var(--clr-gray-800)}
.focus\:text--gray-900:focus {color: var(--clr-gray-900)}

.visited\:text--white:visited {color: var(--clr-white)}
.visited\:text--black:visited {color: var(--clr-black)}
.visited\:text--gray-100:visited {color: var(--clr-gray-100)}
.visited\:text--gray-200:visited {color: var(--clr-gray-200)}
.visited\:text--gray-300:visited {color: var(--clr-gray-300)}
.visited\:text--gray-400:visited {color: var(--clr-gray-400)}
.visited\:text--gray-500:visited {color: var(--clr-gray-500)}
.visited\:text--gray-600:visited {color: var(--clr-gray-600)}
.visited\:text--gray-700:visited {color: var(--clr-gray-700)}
.visited\:text--gray-800:visited {color: var(--clr-gray-800)}
.visited\:text--gray-900:visited {color: var(--clr-gray-900)}

/* Custom */

.bg--primary, .bg-primary { background-color: var(--clr-primary) !important; }
.bg--gray {background-color: #f1f3f7;}

.bg--gray-100 {background-color: var(--clr-gray-100)}
.bg--gray-200 {background-color: var(--clr-gray-200)}
.bg--gray-300 {background-color: var(--clr-gray-300)}
.bg--gray-400 {background-color: var(--clr-gray-400)}
.bg--gray-500 {background-color: var(--clr-gray-500)}
.bg--gray-600 {background-color: var(--clr-gray-600)}
.bg--gray-700 {background-color: var(--clr-gray-700)}
.bg--gray-800 {background-color: var(--clr-gray-800)}
.bg--gray-900 {background-color: var(--clr-gray-900)}

.bg-gray-100 {background-color: var(--clr-gray-100)}
.bg-gray-100 {background-color: var(--clr-gray-100)}
.bg-gray-200 {background-color: var(--clr-gray-200)}
.bg-gray-300 {background-color: var(--clr-gray-300)}
.bg-gray-400 {background-color: var(--clr-gray-400)}
.bg-gray-500 {background-color: var(--clr-gray-500)}
.bg-gray-600 {background-color: var(--clr-gray-600)}
.bg-gray-700 {background-color: var(--clr-gray-700)}
.bg-gray-800 {background-color: var(--clr-gray-800)}
.bg-gray-900 {background-color: var(--clr-gray-900)}

/* Piirid */

.border {
    --border-style: solid;
    --border-width: 3px;
    --border-color: var(--clr-primary);
    border: var(--border-style) var(--border-width) var(--border-color) !important;
}

.border--t {
    --border-style: solid;
    --border-width: 1px;
    --border-color: var(--clr-primary);
    border-top: var(--border-style) var(--border-width) var(--border-color) !important;
}

.border--1 {--border-with: 1px}
.border--2 {--border-with: 2px}
.border--3 {--border-with: 3px}
.border--4 {--border-with: 4px}
.border--5 {--border-with: 5px}

.border--primary-500 {--border-color: var(--clr-primary)}
.border--secondary-500 {--border-color: var(--clr-secondary)}
.border--gray-100 {--border-color: var(--clr-gray-100)}
.border--gray-200 {--border-color: var(--clr-gray-200)}
.border--gray-300 {--border-color: var(--clr-gray-300)}
.border--gray-400 {--border-color: var(--clr-gray-400)}
.border--gray-500 {--border-color: var(--clr-gray-500)}
.border--gray-600 {--border-color: var(--clr-gray-600)}
.border--gray-700 {--border-color: var(--clr-gray-700)}
.border--gray-800 {--border-color: var(--clr-gray-800)}
.border--gray-900 {--border-color: var(--clr-gray-900)}




.border--none { border: none; }
.border--top--none { border-top: none !important; }
.border--bottom--none { border-bottom: none !important; }

.border--primary {border: solid 1px var(--clr-primary);}

/* TODO: Refactor */
.border-b-primary-light {border-bottom: solid 1px var(--clr-primary-light);}
.border-bottom-secondary {border-bottom: solid 1px var(--clr-secondary);}
.border-b-grey {border-bottom: solid 1px #DEDEDE;}
.border-bottom-grey-5 {border-bottom: solid 5px #DEDEDE;}

.border--bottom--white, .border-bottom-white { border-bottom: solid 1px white; }

.border-width--1 {border-width: 1px;}
.border-width--2 {border-width: 2px;}
.border-width--3 {border-width: 3px;}
.border-width--4 {border-width: 4px;}
.border-width--5 {border-width: 5px;}

.caption--top { caption-side: top; }
.caption--bottom { caption-side: bottom; }

.text-primary, .text--primary {color: var(--clr-primary) !important;}
.text--white { color: white !important; }

.text--secondary {color: var(--clr-secondary)}

.tbl--header { display: table-header-group; }

.img-middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.flex-basis--0   {flex-basis: 0;}
.flex-basis--10  {flex-basis: 10%;}
.flex-basis--20  {flex-basis: 20%;}
.flex-basis--30  {flex-basis: 30%;}
.flex-basis--40  {flex-basis: 40%;}
.flex-basis--50  {flex-basis: 50%;}
.flex-basis--60  {flex-basis: 60%;}
.flex-basis--70  {flex-basis: 70%;}
.flex-basis--80  {flex-basis: 80%;}
.flex-basis--90  {flex-basis: 90%;}
.flex-basis--100 {flex-basis: 100%;}

.gap--1 {gap: 1px;}
.gap--2 {gap: 2px;}
.gap--3 {gap: 3px;}
.gap--4 {gap: 4px;}
.gap--5 {gap: 5px;}
.gap--10 {gap: 10px;}
.gap--24 {gap: 24px}

.flex-col {flex-direction: column}
.flex-row {flex-direction: row}
.flex-row-reverse {flex-direction: row-reverse}

@media screen and (min-width: 992px) {
    .lg\:flex-col {flex-direction: column}
    .lg\:flex-row {flex-direction: row}
    .lg\:flex-row-reverse {flex-direction: row-reverse}
}


.scale--2 {transform: scale(1.2);}

/* Animations */

/* Hover effect: zoom */
.hover--zoom {overflow: hidden;}

.hover--zoom > * {
    width: 100%;
    height: auto;
    margin: auto 0;
    transition: transform 0.5s ease; 
}

.hover--zoom:hover > * {transform: scale(1.1);}
.hover--zoom:hover > .scale--2 {transform: scale(1.3);}




.visibility-toggle ~ .visibility-toggle__target {
    visibility: hidden;
    opacity: 0;
    width: 0;
}

.visibility-toggle:checked ~ .visibility-toggle__target {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 200ms;
}

.visibility-toggle:checked ~ .visibility-toggle__target.custom-select--start {
    width: 10ch;
}


/* Google Maps */
.map--responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    margin-bottom: 0.35rem;
    position: relative;
    height: 0;
}

.map--responsive > iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.no-gutters {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
}


.h--30   {height: 30rem}
.h--auto {height: auto}
.h--full {height: 100%}

.max-h-0 {max-height: 0}
.max-h-full {max-height: 100%}

@media screen and (min-width: 576px) {
    .sm\:h--30 {height: 30rem}
    .sm\:h--auto {height: auto}
    .sm\:h--full {height: 100%}
}

@media screen and (min-width: 768px) {
    .md\:h--30 {height: 30rem}
    .md\:h--auto {height: auto}
    .md\:h--full {height: 100%}
}

@media screen and (min-width: 992px) {
    .lg\:h--30 {height: 30rem}
    .lg\:h--auto {height: auto}
    .lg\:h--full {height: 100%}
}

@media screen and (min-width: 1200px) {
    .xl\:h--30 {height: 30rem}
    .xl\:h--auto {height: auto}
    .xl\:h--full {height: 100%}
}

@media screen and (min-width: 1400px) {
    .xxl\:h--30 {height: 30rem}
    .xxl\:h--auto {height: auto}
    .xxl\:h--full {height: 100%}
}

.w--6 {width: 1.5rem}
.w--8 {width: 2rem}

@media screen and (min-width: 768px) {
    .w--md--5   {width: 5%;}
    .w--md--30  {width: 30%;}
}

/* Widths */

.w-auto {width: auto}
.w-full, .w--100 { width: 100%; }

.w-1\/12 {width: 8.333333%}
.w-1\/11 {width: 9.090909%}
.w-1\/10 {width: 10%}
.w-1\/9 {width: 11.1111111%}
.w-1\/8 {width: 12.5%}
.w-1\/7 {width: 14.2857142%}
.w-1\/6 {width: 16.6666666%}
.w-1\/5 {width: 20%}
.w-1\/4 {width: 25%}
.w-1\/3 {width: 33.3333333%}
.w-1\/2 {width: 50%}

.w-2\/3 {width: 66.6666666%}

.w-2\/5 {width: 40%}
.w-3\/5 {width: 60%}
.w-4\/5 {width: 80%}

.w-1\/12 {width: 8.333333%}
.w-2\/12 {width: 16.666667%}
.w-3\/12 {width: 25%}
.w-4\/12 {width: 33.333333%}
.w-5\/12 {width: 41.666667%}
.w-6\/12 {width: 50%}
.w-7\/12 {width: 58.333333%}
.w-8\/12 {width: 66.666667%}
.w-9\/12 {width: 75%}
.w-10\/12 {width: 83.333333%}
.w-11\/12 {width: 91.666667%}

@media screen and (min-width: 992px) {
    .lg\:w-auto {width: auto}
    .lg\:w-full {width: 100%}

    .lg\:w-1\/12 {width: 8.333333%}
    .lg\:w-1\/11 {width: 9.090909%}
    .lg\:w-1\/10 {width: 10%}
    .lg\:w-1\/9 {width: 11.1111111%}
    .lg\:w-1\/8 {width: 12.5%}
    .lg\:w-1\/7 {width: 14.2857142%}
    .lg\:w-1\/6 {width: 16.6666666%}
    .lg\:w-1\/5 {width: 20%}
    .lg\:w-1\/4 {width: 25%}
    .lg\:w-1\/3 {width: 33.3333333%}
    .lg\:w-1\/2 {width: 50%}

    .lg\:w-2\/3 {width: 66.6666666%}

    .lg\:w-1\/5 {width: 20%}
    .lg\:w-2\/5 {width: 40%}
    .lg\:w-3\/5 {width: 60%}
    .lg\:w-4\/5 {width: 80%}
}

.shadow--100 {box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1)}

.rounded--8 {border-radius: 8px}
.rounded--full {border-radius: 100vh}


.mb--10 {margin-bottom: 2.5rem}
.mb--20 {margin-bottom: 5rem}
.mb--40 {margin-bottom: 10rem}


.text--3 {font-size: 0.75rem}
.text--5 {font-size: 1.25rem}


.message__item {
    padding: 1em;
    background-color: #f1f3f7;
}

.message__title {
    padding-bottom: 0.5em;
}



/** Display */

/* .grid {
    --columns: 1;
    display: grid;
    grid-template-columns: var(--columns);
} */

.grid--columns-1 {grid-template-columns: 1fr;}
.grid--columns-2 {grid-template-columns: 1fr 1fr;}
.grid--columns-3 {grid-template-columns: 1fr 1fr 1fr;}

/* .grid-cols-1 {--columns: 1}
.grid-cols-2 {--columns: 2}
.grid-cols-3 {--columns: 3}
.grid-cols-4 {--columns: 4}
.grid-cols-5 {--columns: 5}
.grid-cols-6 {--columns: 6} */

/* @media screen and (min-width: 768px) {
    .grid--md--columns-2 {grid-template-columns: 1fr 1fr;}
    .md\:grid-cols-1 {--columns: 1}
    .md\:grid-cols-2 {--columns: 2}
    .md\:grid-cols-3 {--columns: 3}
    .md\:grid-cols-4 {--columns: 4}
    .md\:grid-cols-5 {--columns: 5}
    .md\:grid-cols-6 {--columns: 6}
} */

.block, .d--block {display: block}
.flex, .d--flex {display: flex}
.grid, .d--grid {display: grid}

@media screen and (min-width: 992px) {
    .lg\:block {display: block}
    .lg\:flex {display: flex}
    .lg\:grid {display: grid}
    .lg\:inline-block {display: inline-block}
}

.absolute {position: absolute}
.relative {position: relative}
.sticky {position: sticky}

.top-0, .top {top: 0}
.top-1 {top: 0.25em}
.top-2 {top: 0.5em}
.top-3 {top: 0.75em}
.top-4 {top: 1em}
.top-5 {top: 1.25em}
.right-0, .right {right: 0}
.right-1 {right: 0.25em}
.right-2 {right: 0.5em}
.right-3 {right: 0.75em}
.right-4 {right: 1em}
.right-5 {right: 1.25em}
.bottom-0, .bottom {bottom: 0}
.bottom-1 {bottom: 0.25em}
.bottom-2 {bottom: 0.5em}
.bottom-3 {bottom: 0.75em}
.bottom-4 {bottom: 1em}
.bottom-5 {bottom: 1.25em}
.left-0, .left {left: 0}
.left-1 {left: 0.25em}
.left-2 {left: 0.5em}
.left-3 {left: 0.75em}
.left-4 {left: 1em}
.left-5 {left: 1.25em}

/** Justify content */
.justify-center, .justify--center {justify-content: center}
.justify--end {justify-content: end}

.template-cols-1  {grid-template-columns: 1fr}
.template-cols-2  {grid-template-columns: repeat(2, minmax(0, 1fr))}
.template-cols-3  {grid-template-columns: repeat(3, minmax(0, 1fr))}
.template-cols-4  {grid-template-columns: repeat(4, minmax(0, 1fr))}
.template-cols-5  {grid-template-columns: repeat(5, minmax(0, 1fr))}
.template-cols-6  {grid-template-columns: repeat(6, minmax(0, 1fr))}
.template-cols-7  {grid-template-columns: repeat(7, minmax(0, 1fr))}
.template-cols-8  {grid-template-columns: repeat(8, minmax(0, 1fr))}
.template-cols-9  {grid-template-columns: repeat(9, minmax(0, 1fr))}
.template-cols-10 {grid-template-columns: repeat(10, minmax(0, 1fr))}
.template-cols-11 {grid-template-columns: repeat(11, minmax(0, 1fr))}
.template-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr))}

@media screen and (min-width: 576px) {
    .sm\:template-cols-1  {grid-template-columns: 1fr}
    .sm\:template-cols-2  {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .sm\:template-cols-3  {grid-template-columns: repeat(3, minmax(0, 1fr))}
    .sm\:template-cols-4  {grid-template-columns: repeat(4, minmax(0, 1fr))}
    .sm\:template-cols-5  {grid-template-columns: repeat(5, minmax(0, 1fr))}
    .sm\:template-cols-6  {grid-template-columns: repeat(6, minmax(0, 1fr))}
    .sm\:template-cols-7  {grid-template-columns: repeat(7, minmax(0, 1fr))}
    .sm\:template-cols-8  {grid-template-columns: repeat(8, minmax(0, 1fr))}
    .sm\:template-cols-9  {grid-template-columns: repeat(9, minmax(0, 1fr))}
    .sm\:template-cols-10 {grid-template-columns: repeat(10, minmax(0, 1fr))}
    .sm\:template-cols-11 {grid-template-columns: repeat(11, minmax(0, 1fr))}
    .sm\:template-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr))}
}

@media screen and (min-width: 768px) {
    .md\:template-cols-1  {grid-template-columns: 1fr}
    .md\:template-cols-2  {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .md\:template-cols-3  {grid-template-columns: repeat(3, minmax(0, 1fr))}
    .md\:template-cols-4  {grid-template-columns: repeat(4, minmax(0, 1fr))}
    .md\:template-cols-5  {grid-template-columns: repeat(5, minmax(0, 1fr))}
    .md\:template-cols-6  {grid-template-columns: repeat(6, minmax(0, 1fr))}
    .md\:template-cols-7  {grid-template-columns: repeat(7, minmax(0, 1fr))}
    .md\:template-cols-8  {grid-template-columns: repeat(8, minmax(0, 1fr))}
    .md\:template-cols-9  {grid-template-columns: repeat(9, minmax(0, 1fr))}
    .md\:template-cols-10 {grid-template-columns: repeat(10, minmax(0, 1fr))}
    .md\:template-cols-11 {grid-template-columns: repeat(11, minmax(0, 1fr))}
    .md\:template-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr))}
}

@media screen and (min-width: 992px) {
    .lg\:template-cols-1  {grid-template-columns: 1fr}
    .lg\:template-cols-2  {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .lg\:template-cols-3  {grid-template-columns: repeat(3, minmax(0, 1fr))}
    .lg\:template-cols-4  {grid-template-columns: repeat(4, minmax(0, 1fr))}
    .lg\:template-cols-5  {grid-template-columns: repeat(5, minmax(0, 1fr))}
    .lg\:template-cols-6  {grid-template-columns: repeat(6, minmax(0, 1fr))}
    .lg\:template-cols-7  {grid-template-columns: repeat(7, minmax(0, 1fr))}
    .lg\:template-cols-8  {grid-template-columns: repeat(8, minmax(0, 1fr))}
    .lg\:template-cols-9  {grid-template-columns: repeat(9, minmax(0, 1fr))}
    .lg\:template-cols-10 {grid-template-columns: repeat(10, minmax(0, 1fr))}
    .lg\:template-cols-11 {grid-template-columns: repeat(11, minmax(0, 1fr))}
    .lg\:template-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr))}
}

.template-rows-1  {grid-template-rows: 1fr}
.template-rows-2  {grid-template-rows: repeat(2, minmax(0, 1fr))}
.template-rows-3  {grid-template-rows: repeat(3, minmax(0, 1fr))}
.template-rows-4  {grid-template-rows: repeat(4, minmax(0, 1fr))}
.template-rows-5  {grid-template-rows: repeat(5, minmax(0, 1fr))}
.template-rows-6  {grid-template-rows: repeat(6, minmax(0, 1fr))}
.template-rows-7  {grid-template-rows: repeat(7, minmax(0, 1fr))}
.template-rows-8  {grid-template-rows: repeat(8, minmax(0, 1fr))}
.template-rows-9  {grid-template-rows: repeat(9, minmax(0, 1fr))}
.template-rows-10 {grid-template-rows: repeat(10, minmax(0, 1fr))}
.template-rows-11 {grid-template-rows: repeat(11, minmax(0, 1fr))}
.template-rows-12 {grid-template-rows: repeat(12, minmax(0, 1fr))}

@media screen and (min-width: 576px) {
    .sm\:template-rows-1  {grid-template-rows: 1fr}
    .sm\:template-rows-2  {grid-template-rows: repeat(2, minmax(0, 1fr))}
    .sm\:template-rows-3  {grid-template-rows: repeat(3, minmax(0, 1fr))}
    .sm\:template-rows-4  {grid-template-rows: repeat(4, minmax(0, 1fr))}
    .sm\:template-rows-5  {grid-template-rows: repeat(5, minmax(0, 1fr))}
    .sm\:template-rows-6  {grid-template-rows: repeat(6, minmax(0, 1fr))}
    .sm\:template-rows-7  {grid-template-rows: repeat(7, minmax(0, 1fr))}
    .sm\:template-rows-8  {grid-template-rows: repeat(8, minmax(0, 1fr))}
    .sm\:template-rows-9  {grid-template-rows: repeat(9, minmax(0, 1fr))}
    .sm\:template-rows-10 {grid-template-rows: repeat(10, minmax(0, 1fr))}
    .sm\:template-rows-11 {grid-template-rows: repeat(11, minmax(0, 1fr))}
    .sm\:template-rows-12 {grid-template-rows: repeat(12, minmax(0, 1fr))}
}

@media screen and (min-width: 768px) {
    .md\:template-rows-1  {grid-template-rows: 1fr}
    .md\:template-rows-2  {grid-template-rows: repeat(2, minmax(0, 1fr))}
    .md\:template-rows-3  {grid-template-rows: repeat(3, minmax(0, 1fr))}
    .md\:template-rows-4  {grid-template-rows: repeat(4, minmax(0, 1fr))}
    .md\:template-rows-5  {grid-template-rows: repeat(5, minmax(0, 1fr))}
    .md\:template-rows-6  {grid-template-rows: repeat(6, minmax(0, 1fr))}
    .md\:template-rows-7  {grid-template-rows: repeat(7, minmax(0, 1fr))}
    .md\:template-rows-8  {grid-template-rows: repeat(8, minmax(0, 1fr))}
    .md\:template-rows-9  {grid-template-rows: repeat(9, minmax(0, 1fr))}
    .md\:template-rows-10 {grid-template-rows: repeat(10, minmax(0, 1fr))}
    .md\:template-rows-11 {grid-template-rows: repeat(11, minmax(0, 1fr))}
    .md\:template-rows-12 {grid-template-rows: repeat(12, minmax(0, 1fr))}
}

@media screen and (min-width: 992px) {
    .lg\:template-rows-1  {grid-template-rows: 1fr}
    .lg\:template-rows-2  {grid-template-rows: repeat(2, minmax(0, 1fr))}
    .lg\:template-rows-3  {grid-template-rows: repeat(3, minmax(0, 1fr))}
    .lg\:template-rows-4  {grid-template-rows: repeat(4, minmax(0, 1fr))}
    .lg\:template-rows-5  {grid-template-rows: repeat(5, minmax(0, 1fr))}
    .lg\:template-rows-6  {grid-template-rows: repeat(6, minmax(0, 1fr))}
    .lg\:template-rows-7  {grid-template-rows: repeat(7, minmax(0, 1fr))}
    .lg\:template-rows-8  {grid-template-rows: repeat(8, minmax(0, 1fr))}
    .lg\:template-rows-9  {grid-template-rows: repeat(9, minmax(0, 1fr))}
    .lg\:template-rows-10 {grid-template-rows: repeat(10, minmax(0, 1fr))}
    .lg\:template-rows-11 {grid-template-rows: repeat(11, minmax(0, 1fr))}
    .lg\:template-rows-12 {grid-template-rows: repeat(12, minmax(0, 1fr))}
}

.gap-1 {gap: 0.25rem !important}
.gap-2 {gap: 0.5rem !important}
.gap-3 {gap: 0.75rem !important}
.gap-4 {gap: 1rem !important}
.gap-5 {gap: 1.25rem !important}
.gap-6 {gap: 1.5rem !important}
.gap-7 {gap: 1.75rem !important}
.gap-8 {gap: 2rem !important}

@media screen and (min-width: 992px) {
    .lg\:gap-1 {gap: 0.25rem !important}
    .lg\:gap-2 {gap: 0.5rem !important}
    .lg\:gap-3 {gap: 0.75rem !important}
    .lg\:gap-4 {gap: 1rem !important}
    .lg\:gap-5 {gap: 1.25rem !important}
    .lg\:gap-6 {gap: 1.5rem !important}
    .lg\:gap-7 {gap: 1.75rem !important}
    .lg\:gap-8 {gap: 2rem !important}
}

.transform {
    --translate-x: 0;
    --translate-y: 0;
    --scale-x: 1;
    --scale-y: 1;

    transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale-x), var(--scale-y));
}

@media screen and (min-width: 992px) {
    .lg\:transform {
        --translate-x: 0;
        --translate-y: 0;
        --scale-x: 1;
        --scale-y: 1;
    
        transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale-x), var(--scale-y));
    }
}

.translate-y-full {--translate-y: 100%}
.-translate-y-full {--translate-y: -100%}
.-translate-y-36 {--translate-y: -8rem}

.scale-y-0 {--scale-y: 0}
.scale-y-full {--scale-y: 1}

.hover\:scale-1\/3:hover {--scale-x: 1.33333; --scale-y: 1.33333}
.hover\:scale-2:hover {--scale-x: 2; --scale-y: 2}

.transition {
    transition: all 0.3s ease-in-out;
}