:root {
    --color-lemon: #dae014; /*#feed07;*/
    --color-orange: #ff7800; /*#ff9600;*/
    --color-strawberry: #f00;
    --color-gin-tonic: #427196; /*  rgb(66, 113, 150) */
    --color-orange-spritz: #d35434; /*  rgb(211, 84, 52) */
    --color-mojito: #8cab4c; /*     rgb(140, 171, 76) */
    --color-blue: #010134;
    --color-lightblue: #568fb6;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptsg8zYS_SKggPNyCg4Q4FqPfE.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
    @font-face {
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptug8zYS_SKggPNyC0ITw.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.cf {
    *zoom: 1
}

.cf:after, .cf:before {
    content: ' ';
    display: table
}

.cf:after {
    clear: both
}

.br:after {
    content: '\A';
    white-space: pre;
}

body {
    font-family: 'Raleway', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    /*background: var(--color-blue);*/
    background: #082c3f;
    color: #fff;
}

a {
    text-decoration: none;
    color: #fff;
    transition: all 0.25s ease;
}

a:hover {
    color: var(--color-lightblue);
    transition: all 0.25s ease;
}

body > header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(1, 1, 52, .3);
    backdrop-filter: blur(3.5px);
    transition: all 0.25s ease;
}

body > header.narrowed {
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

body > header.bg {
    background-color: var(--color-blue);
}

body > header .navbar {
    --bs-navbar-padding-y: 0;
}

body > header .navbar > .container {
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
}

body > header .navbar > .container:after {
    content: '';
    position: absolute;
    width: calc(100% - 1.5rem);
    height: 2px;
    bottom: 0;
    left: .75rem;
    background: #fff;
}

@media only screen and (min-width: 768px) {
    /*body > header {
        position: absolute;
        background-color: transparent;
    }*/
}

ul.navbar-nav {
    background-color: transparent;
    position: relative;
}

ul.navbar-nav a.nav-link {
    color: white;
    font-size: 16px;
    font-weight: lighter;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 15px !important;
}

ul.navbar-nav a.nav-link:hover {
    font-weight: 600;
}

ul.navbar-nav a.nav-link::before {
    display: block;
    content: attr(data-content);
    font-weight: 600;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

ul.navbar-nav a:hover,
ul.navbar-nav a.active,
ul.navbar-nav a.nav-link.active {
    font-weight: 600;
    color: #fff;
}

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    height: 40px;
}

.navbar-toggler-icon {
    filter: grayscale(1) invert(1);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 1px #fff;
}

@media only screen and (min-width: 768px) {
    body > header .navbar > .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    body > header.narrowed .navbar > .container {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    ul.navbar-nav a.nav-link {
        font-size: 16px;
        letter-spacing: 0;
        line-height: 1;
        padding: 5px 8px !important;
    }

    ul.navbar-nav a.nav-link:not(:last-child) {
        border-right: 1px solid #fff;
    }

    ul.navbar-nav li + li:before {
        position: absolute;
        content: '';
        display: block;
        height: calc(100% - 10px);
        top: 5px;
        width: 1px;
        background: #fff;
    }

    .navbar-brand img {
        height: 50px;
    }
}

@media only screen and (min-width: 992px) {
    ul.navbar-nav a.nav-link {
        font-size: 16px;
        letter-spacing: 0px;
        padding: 5px 15px !important;
    }

    .navbar-brand {
        padding: 5px 0;
    }

    .navbar-brand img {
        height: 60px;
    }

    body > header.narrowed .navbar-brand img {
        height: 40px;
    }
}

@media only screen and (min-width: 1200px) {
    body > header .navbar > .container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    body > header.narrowed .navbar > .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    ul.navbar-nav a.nav-link {
        font-size: 18px;
        letter-spacing: 1px;
        padding: 5px 18px !important;
    }

    .navbar-brand img {
        height: 70px;
    }

    body > header.narrowed .navbar-brand img {
        height: 40px;
    }
}

@media only screen and (min-width: 1400px) {
    body > header .navbar > .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    ul.navbar-nav a.nav-link {
        font-size: 17px;
        letter-spacing: 1px;
        padding: 5px 18px !important;
    }

    .navbar-brand img {
        height: 100px;
    }

    body > header.narrowed .navbar-brand img {
        height: 50px;
    }
}

.mvh-100 {
    min-height: 100vh;
}

section.item:not(.footer) {
    min-height: 100vh;
    position: relative;
}

section.single-bg:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

section#welcome:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: url('../../asset/images/bg/corner-orange.opt.png'),
    url('../../asset/images/bg/corner-lemon.opt.png'),
        url('../../asset/images/bg/corner-strawberry.opt.png'), url('../../asset/images/bg/bg-bubbles.opt.webp');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 20%, 33%, 25%, cover;
    background-position: right top, left bottom -75px, right bottom -75px, center;*/
    /*background-image: url('../../asset/images/bg/bg-kktail.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;*/
    background-image: url('../../asset/images/bg/corner-drink1b.svg'),
        url('../../asset/images/bg/corner-drink2b.svg'),
        url('../../asset/images/bg/corner-drink3b.svg'), 
        url('../../asset/images/bg/bg-kktail-min.svg');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 50%, 30%, 45%, cover;
    background-position: right bottom, left bottom 0px, right -50px top -28px, center;
    z-index: -1;
}

section#welcome .content:first-child {
    padding-top: 45px;
}

section#welcome .content h1,
section#welcome .content p {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0;
}

section#welcome .content p > strong {
    font-weight: 600;
}
/*
section#welcome .design {
    --top-padding: 100px;
    position: relative;
    background-image: url('../../asset/images/svg/low-calories.min.svg');
    background-repeat: no-repeat;
    background-size: var(--top-padding);
    background-position-x: right calc(var(--bs-gutter-x) * .5);
    background-position-y: top 0;
    padding-top: var(--top-padding);
    padding-bottom: 0;
}
*/
section#welcome .design img {
    max-width: 100%;
}

section#welcome a.caste {
    display: inline-block;
    width: auto;
    height: auto;
}

section#welcome .logo-caste {
    width: 100px;
}

section#welcome .footer {
    padding-bottom: 25px;
}

@media only screen and (min-width: 576px) {
    section#welcome .content h1,
    section#welcome .content p {
        font-size: 13px;
    }

    section#welcome .design img {
        max-width: 60vw;
    }
}

@media only screen and (min-width: 768px) {
    section#welcome .content h1,
    section#welcome .content p {
        font-size: 20px;
        line-height: 35px;
    }

    section#welcome:before {
        background-size: 15%, 25%, 20%, cover;
    }

    section#welcome .design {
        --top-padding: 60px;
        background-size: 120px;
        background-position-y: top calc(var(--top-padding) - 30px);
    }

    section#welcome .design img {
        width: auto;
        max-height: 50vh;
    }

    section#welcome a.caste {
        width: 100%;
    }

    section#welcome .logo-caste {
        width: auto;
    }

    section#welcome .footer {
        padding-bottom: 30px;
    }
}

@media only screen and (min-width: 992px) {
    section#welcome .content h1,
    section#welcome .content p {
        font-size: 24px;
        letter-spacing: .15em;
    }

    section#welcome:before {
        background-size: 12%, 20%, 17%, cover;
    }

    section#welcome .footer {
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 1200px) {
    section#welcome .content h1,
    section#welcome .content p {
        font-size: 26px;
    }

    section#welcome:before {
        background-size: 25%, 15%, 20%, cover;
    }

    section#welcome .footer {
        padding-bottom: 50px;
    }
}

@media only screen and (min-width: 1400px) {
    

    /*section#welcome:before {
        background-size: auto, auto, auto, cover;
    }*/

    section#welcome .design {
        --top-padding: 60px;
        background-size: 180px;
        background-position-x: right calc(var(--bs-gutter-x) * .5);
        background-position-y: top var(--top-padding);
        padding-top: var(--top-padding);
        padding-bottom: 50px;
    }

    section#welcome .design img {
        max-height: 50vh;
    }
}

section#kktail:before {
    background-image: url('../../asset/images/bg/bg-happy-people.webp');
}
section#kktail.single-bg::before {
    height: 80vh;
}
@media only screen and (orientation: landscape) {
    section#kktail.single-bg::before {
        height: 100vh;
    }
}

section#kktail .head,
section#inspiration .head {
    /*background-color: rgba(255, 255, 255, .65);*/
    padding-top: 10px;
    padding-bottom: 10px;
}


section#kktail .gradient {
    position: relative;
}
section#kktail .gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(116, 40, 22, .8) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(116, 40, 22, .8) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(116, 40, 22, .8) 100%);
    filter: blur(2px);
    -webkit-filter: blur(2px);
    z-index: -1;
    mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 200px);
    -webkit-mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 200px);
    backdrop-filter: blur(20px);
}

section#kktail .logo-soooda {
    width: 120px;
}

.space-between {
    flex-direction: column;
    justify-content: space-between;
}

section#kktail .content img {
    width: 70px;
    margin-right: 15px;
    -webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,.15));
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,.15));
}
@media only screen and (min-width: 992px) {
    section#kktail .content img {
        width: 90px;
        margin-right: 15px;
    }
}

section#kktail .content .item {
    display: flex;

}

section#kktail h1,
section#inspiration h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    color: var(--color-blue);
    color: #fff;
    text-shadow: 0px 1px 6px rgba(0,0,0,.8);
}

section#kktail h2 {
    color: var(--color-blue);
    font-weight: 700;
}

section#kktail p,
section#inspiration p {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: .6rem;
}

section#kktail h1 + p,
section#inspiration h1 + p {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--color-blue);
    letter-spacing: .3em;
    text-align: center;
    text-transform: lowercase;
    line-height: 1;
    margin-bottom: 15px;
}

section#kktail .products {
    position: relative;
    z-index: 10;
}

section#kktail .products > .col {
    position: relative;
    padding: 0;
    transition: all .20s;
}

section#kktail .products > .col:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    z-index: -1;
}

section#kktail .products > .col.lemon:hover::before {
    background-color: #ccd110;
}

section#kktail .products > .col.lemon:before {
    background-color: var(--color-lemon);
}

section#kktail .products > .col.orange:hover:before {
    background-color: #f07303;
}

section#kktail .products > .col.orange:before {
    background-color: var(--color-orange);
}

section#kktail .products > .col.strawberry:before {
    background-color: var(--color-strawberry);
}

section#kktail .products > .col.orange-spritz:hover::before {
    background-color: #0f2e71;
}

section#kktail .products > .col.orange-spritz:before {
    background-color: var(--color-orange-spritz);
}

section#kktail .products > .col.gin-tonic:hover::before {
    background-color: #0f2e71;
}

section#kktail .products > .col.gin-tonic:before {
    background-color: var(--color-gin-tonic);
}

section#kktail .products > .col.mojito:hover::before {
    background-color: #225d2a;
}

section#kktail .products > .col.mojito:before {
    background-color: var(--color-mojito);
}

section#kktail .products > .col a {
    display: block;
    height: 130px;
    padding: 10px 0 10px 10px;
}

section#kktail .products > .col img.can {
    height: 100%;
    display: inline-block;
}

section#kktail .products > .col img.arrow {
    display: inline-block;
    vertical-align: bottom;
    height: 30px;
}

section#kktail .products .lemon img.arrow {
    margin-left: -55px;
    margin-right: 10px;
}

section#kktail .products .orange img.arrow {
    margin-left: -50px;
}

section#kktail .products .strawberry img.arrow {
    margin-left: -50px;
}

@media only screen and (min-width: 576px) {
    section#kktail .products > .col a {
        height: 150px;
    }

    section#kktail .products .lemon img.arrow {
        margin-left: -65px;
        margin-right: 10px;
    }

    section#kktail .products .orange img.arrow {
        margin-left: -60px;
    }

    section#kktail .products .strawberry img.arrow {
        margin-left: -60px;
    }
}

@media only screen and (min-width: 768px) {
    section#kktail .logo-soooda {
        width: 160px;
    }

    section#kktail h1,
    section#inspiration h1 {
        font-size: 50px;
    }

    section#kktail p,
    section#inspiration p {
        font-size: 15px;
    }

    section#kktail h1 + p,
    section#inspiration h1 + p {
        font-size: 24px;
    }

    section#kktail .products > .col:before {
        height: 65px;
    }

    section#kktail .products > .col a {
        height: 180px;
    }

    section#kktail .products .lemon img.arrow {
        margin-left: -70px;
        margin-right: 15px;
    }

    section#kktail .products .orange img.arrow {
        margin-left: -60px;
    }

    section#kktail .products .strawberry img.arrow {
        margin-left: -60px;
    }
}

@media only screen and (min-width: 992px) {
    section#kktail .logo-soooda {
        width: 180px;
    }

    section#kktail h1,
    section#inspiration h1 {
        font-size: 50px;
    }

    section#kktail p,
    section#inspiration p {
        font-size: 16px;
        margin-bottom: 12px;
    }

    section#kktail h1 + p,
    section#inspiration h1 + p {
        font-size: 28px;
        letter-spacing: .6em;
    }

    section#kktail .products > .col:before {
        height: 80px;
    }

    section#kktail .products > .col a {
        padding: 15px 0 25px 10px;
        height: 200px;
    }
}

@media only screen and (min-width: 1200px) {
    section#kktail .head,
    section#inspiration .head {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    section#kktail .logo-soooda {
        width: 200px;
    }

    section#kktail h1,
    section#inspiration h1 {
        font-size: 60px;
    }

    section#kktail p,
    section#inspiration p {
        font-size: 18px;
        margin-bottom: 15px;
    }

    section#kktail h1 + p,
    section#inspiration h1 + p {
        font-size: 32px;
        margin-bottom: 30px;
        letter-spacing: .4em;
    }

    section#kktail .products > .col:before {
        height: 90px;
    }

    section#kktail .products > .col a {
        padding: 15px 0 25px 10px;
        height: 180px;
    }

    section#kktail .products > .col img.arrow {
        height: 50px;
    }

    section#kktail .products .lemon img.arrow {
        margin-left: -90px;
    }

    section#kktail .products .orange img.arrow {
        margin-left: -85px;
    }

    section#kktail .products .strawberry img.arrow {
        margin-left: -85px;
    }
}

@media only screen and (min-width: 1400px) {
    section#kktail .head,
    section#inspiration .head {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    section#kktail .logo-soooda {
        width: 190px;
    }

    section#kktail h1,
    section#inspiration h1 {
        font-size: 68px;
    }

    section#kktail p,
    section#inspiration p {
        font-size: 20px;
    }

    section#kktail h1 + p,
    section#inspiration h1 + p {
        font-size: 38px;
    }

    section#kktail .products > .col:before {
        height: 120px;
    }

    section#kktail .products > .col a {
        padding: 15px 0 25px 10px;
        height: 280px;
    }

    section#kktail .products > .col img.arrow {
        height: 60px;
    }

    section#kktail .products .lemon img.arrow {
        margin-left: -100px;
        margin-bottom: 5px;
    }

    section#kktail .products .orange img.arrow {
        margin-left: -95px;
        margin-bottom: 5px;
    }

    section#kktail .products .strawberry img.arrow {
        margin-left: -95px;
        margin-bottom: 5px;
    }
}

section#houseparty:before {
    /*background-image: url('../../asset/images/bg/bg-healthboost.webp');*/
    background-image: url('../../asset/images/bg/corner-drink1b.svg'),
        url('../../asset/images/bg/bg-kktail-min.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: 50%, cover;
    background-position: right bottom, center;
}
section#houseparty .overlay {
    position: relative;
    padding: 50px;
}
section#houseparty .overlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /*mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 34px);
    -webkit-mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 34px);*/
    mask: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 100%, #0000 0%);
    -webkit-mask: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 100%, #0000 0%);
    backdrop-filter: blur(20px);
    background-color: rgba(0, 105, 144, 0.15);
}

section#inspiration:before {
    background-image: url('../../asset/images/bg/bg-feel-good.webp');
    /*background-color: rgba(42, 114, 52, 0.33);*/
    background-color: rgba(15, 38, 62, 0.33);
    background-blend-mode: color;
}

/*section#inspiration .head {
    background-color: rgba(251, 210, 118, .75);
}*/

section#inspiration-- .gradient {
    background: rgb(42, 114, 52);
    background: -moz-linear-gradient(180deg, rgba(42, 114, 52, 0) 0%, rgb(71, 114, 42) 100%);
    background: -webkit-linear-gradient(180deg, rgba(42, 114, 52, 0) 0%, rgb(71, 114, 42) 100%);
    background: linear-gradient(180deg, rgba(42, 114, 52, 0) 0%, rgb(71, 114, 42) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
}
section#inspiration .gradient {
    position: relative;
}
section#inspiration .gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgb(42, 114, 52);*/
    background: -moz-linear-gradient(180deg, rgba(14, 62, 107, 0.1) 0%, rgba(14, 62, 107, 0.5) 100%);
    background: -webkit-linear-gradient(180deg, rgba(14, 62, 107, 0.1) 0%, rgba(14, 62, 107, 0.5) 100%);
    background: linear-gradient(180deg, rgba(14, 62, 107, 0.1) 0%, rgba(14, 62, 107, 0.5) 100%);
    filter: blur(2px);
    -webkit-filter: blur(2px);
    z-index: -1;
    mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 200px);
    -webkit-mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 200px);
    backdrop-filter: blur(20px);
}
section#inspiration .gradient2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgb(42, 114, 52);*/
    background: -moz-linear-gradient(180deg, rgba(42, 114, 52, 0.1) 0%, rgba(71, 114, 42, 0.5) 100%);
    background: -webkit-linear-gradient(180deg, rgba(42, 114, 52, 0.1) 0%, rgba(71, 114, 42, 0.5) 100%);
    background: linear-gradient(180deg, rgba(42, 114, 52, 0.1) 0%, rgba(71, 114, 42, 0.5) 100%);
    filter: blur(2px);
    -webkit-filter: blur(2px);
    z-index: -1;
    mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 200px);
    -webkit-mask: linear-gradient(180deg, #0000 0, rgba(0, 0, 0, 0.95) 200px);
    backdrop-filter: blur(20px);
}

/*section#inspiration h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: var(--color-blue);
}*/

section#inspiration h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

section#inspiration p {
    color: #fff;
    text-align: justify;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: .6rem;
}

@media only screen and (min-width: 576px) {
    /*section#inspiration h1 {
        font-size: 26px;
    }*/

    section#inspiration p {
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) {
    /*section#inspiration h1 {
        font-size: 28px;
    }*/

    section#inspiration h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 992px) {
    /*section#inspiration h1 {
        font-size: 30px;
    }*/

    section#inspiration h3 {
        font-size: 24px;
    }

    section#inspiration p {
        font-size: 18px;
        margin-bottom: .8rem;
    }
}

@media only screen and (min-width: 1200px) {
    /*section#inspiration h1 {
        font-size: 32px;
    }*/

    section#inspiration p {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1400px) {
    /*section#inspiration h1 {
        font-size: 36px;
    }*/

    section#inspiration h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    section#inspiration p {
        font-size: 18px;
        margin-bottom: 1rem;
    }
}

section#become-our-partner:before {
    background-image: url('../../asset/images/bg/bg-kktail-min.svg');
    /*background-color: var(--color-blue);*/
    background-color: rgba(1, 1, 52, .5);
    background-blend-mode: hue;
}

section#become-our-partner h1 {
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

section#become-our-partner h1 strong {
    display: block;
    font-size: 120%;
    font-weight: 700;
    text-align: right;
    color: var(--color-lightblue);
}

section#become-our-partner p {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

section#become-our-partner a.link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 2.5rem .5rem;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.3;
    transition: all 0.25s ease;
}

section#become-our-partner a.link.orange_spritz {
    background-color: var(--color-orange-spritz);
    /*background-color: #c44718;*/
}

section#become-our-partner a.link.gin_tonic {
    background-color: var(--color-gin-tonic);
}

section#become-our-partner a.link.mojito {
    background-color: var(--color-mojito);
}

section#become-our-partner a.link img {
    max-height: 300px;
    margin: 0 auto 10px auto;
}
section#become-our-partner a.link:hover {
    color: #fff;
}
section#become-our-partner a.link:hover img {
    transform: scale(1.1);
    transition: all 0.25s ease;
}

section#become-our-partner a.link .flavour {
    font-weight: 700;
}

section#become-our-partner a.link.orange .flavour {
    color: var(--color-orange);
}

section#become-our-partner a.link.lemon .flavour {
    color: var(--color-lemon);
}

section#become-our-partner a.link.strawberry .flavour {
    color: var(--color-strawberry);
}
/*
section#become-our-partner a.link.orange_spritz .flavour {
    color: var(--color-orange-spritz);
}

section#become-our-partner a.link.gin_tonic .flavour {
    color: var(--color-gin-tonic);
}

section#become-our-partner a.link.mojito .flavour {
    color: var(--color-mojito);
}
*/
section#become-our-partner a.link .bottle {
    font-size: 75%;
}

section#become-our-partner a.link button,
.btn-outline-blue {
    background-color: var(--color-lightblue);
    border: 1px solid var(--color-lightblue);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    padding: 3px 9px;
    border-radius: 0px;
    display: block;
    margin: 6px auto;
    transition: all 0.25s ease;
}

section#become-our-partner a.link:hover button,
.btn-outline-blue:hover {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    color: #fff;
}
/*.btn-outline-blue {
    border: 0;
    background-color: #052936;
    color: #fff;
}*/

section#become-our-partner a.link.gin_tonic button {
    background-color: #fff;
    color: var(--color-gin-tonic);
    border: 0;
}
section#become-our-partner a.link.mojito button {
    background-color: #fff;
    color: var(--color-mojito);
    border: 0;
}
section#become-our-partner a.link.orange_spritz button {
    background-color: #fff;
    color: var(--color-orange-spritz);
    border: 0;
}

section#become-our-partner a.link.gin_tonic:hover button,
section#become-our-partner a.link.mojito:hover button,
section#become-our-partner a.link.orange_spritz:hover button {
    background-color: #052936;
    color: #fff;
}

@media only screen and (min-width: 576px) {
    section#become-our-partner h1 {
        font-size: 24px;
    }

    section#become-our-partner p {
        font-size: 16px;
    }

    section#become-our-partner a.link {
        font-size: 18px;
    }
}

@media only screen and (min-width: 768px) {
    section#become-our-partner h1 {
        font-size: 30px;
    }

    section#become-our-partner p {
        font-size: 17px;
    }

    section#become-our-partner a.link {
        font-size: 20px;
    }
}

@media only screen and (min-width: 992px) {
    section#become-our-partner a.link button,
    .btn-outline-blue {
        font-size: 14px;
        padding: 6px 12px;
    }

    section#become-our-partner p {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1200px) {
    section#become-our-partner h1 {
        font-size: 34px;
    }

    section#become-our-partner p {
        font-size: 20px;
    }

    section#become-our-partner a.link img {
        max-height: 350px;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 1400px) {
    section#become-our-partner h1 {
        font-size: 38px;
    }

    section#become-our-partner p {
        font-size: 21px;
    }
}

/* product */

.product {

}
.product::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../asset/images/bg/bg-kktail-min.svg');
    background-color: rgba(1, 1, 52, .5);
    background-blend-mode: hue;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.product .low-calories {
    width: 80px;
    opacity: .5;
}
/*
.product.gin_tonic .low-calories {
    filter: brightness(0) saturate(100%) invert(17%) sepia(95%) saturate(1041%) hue-rotate(181deg) brightness(93%) contrast(92%);
    -webkit-filter: brightness(0) saturate(100%) invert(17%) sepia(95%) saturate(1041%) hue-rotate(181deg) brightness(93%) contrast(92%);
}
.product.mojito .low-calories {
    filter: brightness(0) saturate(100%) invert(38%) sepia(10%) saturate(2967%) hue-rotate(77deg) brightness(89%) contrast(87%);
    -webkit-filter: brightness(0) saturate(100%) invert(38%) sepia(10%) saturate(2967%) hue-rotate(77deg) brightness(89%) contrast(87%);
}
.product.orange_spritz .low-calories {
    filter: brightness(0) saturate(100%) invert(13%) sepia(75%) saturate(3174%) hue-rotate(219deg) brightness(87%) contrast(94%);
    -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(75%) saturate(3174%) hue-rotate(219deg) brightness(87%) contrast(94%);
}
*/
.product h1 {
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 0;
}

.product h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 20px;
    text-transform: uppercase;
    margin: 0;
}
@media only screen and (min-width: 992px) {
    .product h1 {
        font-size: 26px;
    }

    .product h2 {
        font-size: 38px;
    }
}

.product h2 small {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2rem;
    margin-right: -1.2em;
}

.product .soooda {
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
}

.product .can {
    position: relative;
}

.product .soooda {
    position: relative;
}

.product .soooda:before {
    content: '';
    position: absolute;
    display: block;
    top: -75px;
    width: 100%;
    height: 90%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right -35px;
    -webkit-filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.5));
}

.product.orange .soooda:before {
    background-image: url('../../asset/images/can-orange-tilt.opt.webp');
}

.product.lemon .soooda:before {
    background-image: url('../../asset/images/can-lemon-tilt.opt.webp');
}

.product.mojito .soooda:before {
    background-image: url('../../asset/images/can-mojito-tilt-2.webp');
}

.product.gin_tonic .soooda:before {
    background-image: url('../../asset/images/can-gin_tonic-tilt-2.webp');
}

.product.orange_spritz .soooda:before {
    background-image: url('../../asset/images/can-orange_spritz-tilt-2.webp');
}

.product .soooda {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center, left center;
    margin: 60px 0 0 0;
}

.product.orange .soooda {
    background-color: var(--color-orange);
    background-image: linear-gradient(to top, var(--color-orange) 50%, rgba(255, 120, 0, .2) 100%), url('../../asset/images/bg/bg-sm-orange.opt.jpg');
    background-image: -moz-linear-gradient(to top, var(--color-orange) 50%, rgba(255, 120, 0, .2) 100%), url('../../asset/images/bg/bg-sm-orange.opt.jpg');
    /*background-image: -webkit-linear-gradient(270deg, var(--color-orange) 60%, rgba(255,150,0,0) 100%), url('../../asset/images/bg/bg-sm-orange.opt.jpg');
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9600', endColorstr='#FF9600', GradientType=0);*/
}

.product.lemon .soooda {
    background-color: var(--color-lemon);
    background-image: linear-gradient(to left, var(--color-lemon) 50%, rgba(218, 224, 20, .2) 75%), url('../../asset/images/bg/bg-sm-lemon.opt.jpg');
    background-image: -moz-linear-gradient(to left, var(--color-lemon) 50%, rgba(218, 224, 20, .2) 75%), url('../../asset/images/bg/bg-sm-lemon.opt.jpg');
    /*background-image: -webkit-linear-gradient(270deg, var(--color-lemon) 50%, rgba(255,150,0,0) 65%), url('../../asset/images/bg/bg-sm-lemon.opt.jpg');
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEED07', endColorstr='#FEED07', GradientType=0);*/
}

.product.strawberry .soooda {
    background-color: var(--color-strawberry);
    background-image: linear-gradient(to top, var(--color-strawberry) 50%, rgba(255, 0, 0, .2) 100%), url('../../asset/images/bg/bg-sm-strawberry.opt.png');
    background-image: -moz-linear-gradient(to top, var(--color-strawberry) 50%, rgba(255, 0, 0, .2) 100%), url('../../asset/images/bg/bg-sm-strawberry.opt.png');
    /*background-image: -webkit-linear-gradient(0deg, var(--color-strawberry) 60%, rgba(255,150,0,0) 100%), url('../../asset/images/bg/bg-sm-strawberry.opt.png');
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FF0000', GradientType=0);*/
}

.product.mojito .soooda {
    background-color: rgba(140, 171, 76,.8);
    /*background-image: url('../../asset/images/servirovanie-mojito.webp');*/
    background-image: linear-gradient(to left, var(--color-mojito) 50%, rgba(42, 114, 52, .2) 100%), url('../../asset/images/servirovanie-mojito.webp');
    background-image: -moz-linear-gradient(to left, var(--color-mojito) 50%, rgba(42, 114, 52, .2) 100%), url('../../asset/images/servirovanie-mojito.webp');
    /*background-image: -webkit-linear-gradient(to left, var(--color-mojito) 50%, rgba(42, 114, 52, .2) 100%), url('../../asset/images/servirovanie-mojito.webp');
    /*background-image: -o-linear-gradient(to left, var(--color-mojito) 50%, rgba(42, 114, 52, .2) 100%), url('../../asset/images/servirovanie-mojito.webp');
    background-image: -ms-linear-gradient(to left, var(--color-mojito) 50%, rgba(42, 114, 52, .2) 100%), url('../../asset/images/servirovanie-mojito.webp');*/
}

.product.gin_tonic .soooda {
    background-color: rgba(66, 113, 150,.8);
    background-image: linear-gradient(to left, var(--color-gin-tonic) 50%, rgba(14, 62, 107, .2) 100%), url('../../asset/images/servirovanie-gin_tonic.webp');
    background-image: -moz-linear-gradient(to left, var(--color-gin-tonic) 50%, rgba(14, 62, 107, .2) 100%), url('../../asset/images/servirovanie-gin_tonic.webp');
}

.product.orange_spritz .soooda {
    background-color: rgba(211, 84, 52,.8);
    background-image: linear-gradient(to left, var(--color-orange-spritz) 50%, rgba(17, 53, 128, .2) 100%), url('../../asset/images/servirovanie-orange_spritz.webp');
    background-image: -moz-linear-gradient(to left, var(--color-orange-spritz) 50%, rgba(17, 53, 128, .2) 100%), url('../../asset/images/servirovanie-orange_spritz.webp');
}

.product {
    position: relative;
}

.product .bg-fruit {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 25%;
    height: 25%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right -20px bottom;
    z-index: 1;
}

.product.orange .bg-fruit {
    background-image: url('../../asset/images/bg/corner-orange-2.opt.png');
}

.product.lemon .bg-fruit {
    background-image: url('../../asset/images/bg/corner-lemon-2.opt.png');
}

/*.product.strawberry .bg-fruit {
    background-image: url('../../asset/images/bg/corner-strawberry-2.opt.png');
}*/

.product .soooda h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.product .soooda p {
    font-size: 14px;
    margin-bottom: .6rem;
    color: #fff;
}

.product .soooda h3 + p {
    margin-bottom: 15px;
}

.product .soooda .info {
    height: auto;
}

.product.orange .soooda .info {
    background-color: rgba(255, 120, 0, .6);
}

.product.lemon .soooda .info {
    background-color: rgba(218, 224, 20, .6);
}

.product.strawberry .soooda .info {
    background-color: rgba(255, 0, 0, .6);
}

.product.mojito .soooda .info {
    background-color: rgba(115, 141, 63, .6);
}

.product.gin_tonic .soooda .info {
    background-color: rgba(54, 94, 124, .6);
}

.product.orange_spritz .soooda .info {
    background-color: rgba(188, 71, 41, .6);
}

.product .slogan {
    font-size: 15px;
    line-height: 17px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.product .slogan strong {
    font-weight: 600;
}

.low-calories {
    width: 200px;
}

.product .carbonated-soooda {
    text-align: left;
    padding-top: 15px;
    padding-bottom: 15px;
}

.product .carbonated-soooda img {
    width: 70%;
}

table.details {
    width: 100%;
    font-size: 13px;
    margin-bottom: 15px;
    margin-left: auto
}

table.details caption {
    caption-side: top;
}

table.details th {
    font-weight: bold;
}

table.details tbody:not(:first-child) tr:first-child th {
    padding-top: 10px;
}

table.details tbody tr:not(:first-child):hover {
    opacity: .75;
}

table.details tr th[colspan="2"] {
    font-size: 120%;
}

table.details td {
    text-align: right;
    padding: 2px 5px;
}

table.details td small {
    font-size: 50%;
}

@media only screen and (min-width: 576px) {
    .product .carbonated-soooda {
        padding-top: 80px;
        padding-bottom: 20px;
    }

    table.details {
        width: auto;
        font-size: 15px;
    }

    table.details td small {
        font-size: 60%;
    }
}

@media only screen and (min-width: 768px) {
    .product {
        background-size: auto;
        background-position: right bottom -40px;
    }

    .product .soooda:before {
        background-position: center left 50%;
        height: 90%;
    }

    .product .soooda {
        background-position: center, left 6% top;
    }

    .product.orange .soooda {
        background-color: var(--color-orange);
        background-image: linear-gradient(to left, var(--color-orange) 60%, transparent 75%), url('../../asset/images/bg/bg-sm-orange.opt.jpg');
        background-image: -moz-linear-gradient(to left, var(--color-orange) 60%, transparent 75%), url('../../asset/images/bg/bg-sm-orange.opt.jpg');
        /*background-image: -webkit-linear-gradient(270deg, var(--color-orange) 50%, rgba(255,150,0,0) 65%), url('../../asset/images/bg/bg-sm-orange.opt.jpg');
        /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9600', endColorstr='#FF9600', GradientType=0);*/
    }

    .product.lemon .soooda {
        background-color: var(--color-lemon);
        background-image: linear-gradient(to left, var(--color-lemon) 60%, transparent 75%), url('../../asset/images/bg/bg-sm-lemon.opt.jpg');
        background-image: -moz-linear-gradient(to left, var(--color-lemon) 60%, transparent 75%), url('../../asset/images/bg/bg-sm-lemon.opt.jpg');
        /*background-image: -webkit-linear-gradient(270deg, var(--color-lemon) 50%, rgba(255,150,0,0) 65%), url('../../asset/images/bg/bg-sm-lemon.opt.jpg');
        /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEED07', endColorstr='#FEED07', GradientType=0);*/
    }

    .product.strawberry .soooda {
        background-color: var(--color-strawberry);
        background-image: linear-gradient(to left, var(--color-strawberry) 60%, transparent 75%), url('../../asset/images/bg/bg-sm-strawberry.opt.png');
        background-image: -moz-linear-gradient(to left, var(--color-strawberry) 60%, transparent 75%), url('../../asset/images/bg/bg-sm-strawberry.opt.png');
        /*background-image: -webkit-linear-gradient(270deg, var(--color-strawberry) 50%, rgba(255,150,0,0) 65%), url('../../asset/images/bg/bg-sm-strawberry.opt.png');
        /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FF0000', GradientType=0);*/
    }
}

@media only screen and (min-width: 992px) {
    .product .soooda {
        background-size: contain, auto;
    }

    .product .soooda:before {
        background-position: center left 30%;
        height: 100%;
        z-index: 2;
    }
}

@media only screen and (min-width: 1200px) {
    .product .soooda:before {
        background-position: center left 35%;
    }
}

@media only screen and (min-width: 1400px) {
    .product .soooda:before {
        background-position: center left 40%;
    }

    .product .low-calories {
        width: 150px;
    }

    .product h1 {
        font-size: 40px;
        font-weight: normal;
        text-transform: uppercase;
    }

    .product h2 {
        font-size: 90px;
        line-height: 30px;
    }

    .product h2 small {
        font-size: 19px;
        letter-spacing: 1.2rem;
        margin-right: -1.2em;
    }

    .product .soooda h3 {
        font-size: 30px;
        font-weight: 600;
    }

    .product .soooda h3 + p {
        margin-bottom: 35px;
    }

    .product .carbonated-soooda {
        padding-top: 0;
        padding-bottom: 0;
    }

    .product .carbonated-soooda img {
        width: 50%;
    }

    /*.product .soooda .info {
        height: 50vh;
    }*/
    .product .slogan {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0.25em;
    }
}

/* caste */

section#caste:before {
    background-color: #0f0a35;
    background-image: url('../../asset/images/bg/bg-coloured-drink-3.webp');
}

section#caste h1 {
    font-size: 24px;
    font-weight: 600;
}

section#caste h1 strong {
    font-weight: 700;
}

section#caste p {
    color: #fff;
    text-align: justify;
    font-size: 13px;
    margin-bottom: .6rem;
}

section#caste .logo {
    max-width: 120px;
    height: 30px;
    margin: 10px;
}

section#caste .logo.maxx {
    height: 50px;
}

section#caste .logo.caste {
    height: 15px;
}

@media only screen and (min-width: 576px) {
    section#caste h1 {
        font-size: 28px;
    }

    section#caste p {
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) {
    section#caste h1 {
        font-size: 32px;
    }

    section#caste .logo {
        max-width: 200px;
        height: 50px;
        margin: 15px;
    }

    section#caste .logo.maxx {
        height: 80px;
    }

    section#caste .logo.caste {
        height: 40px;
    }
}

@media only screen and (min-width: 992px) {
    section#caste h1 {
        font-size: 38px;
    }

    section#caste p {
        font-size: 18px;
        margin-bottom: .8rem;
    }
}

@media only screen and (min-width: 1200px) {
    section#caste h1 {
        font-size: 42px;
    }

    section#caste p {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1400px) {
    section#caste h1 {
        font-size: 48px;
    }

    section#caste p {
        font-size: 21px;
        margin-bottom: 1rem;
    }
}

/* contact */

section#contact {
    background-image: url('../../asset/images/bg/bg-wave-bubbles-2.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*background-color: rgba(7, 64, 29, .65);
    background-blend-mode: screen;*/
    color: #fff;
}

section#contact a:hover {
    color: var(--color-lightblue);
}

section#contact .low-calories {
    width: 80px;
}

/*section#contact .cans3 {
    margin-right: -8.333333%;
}
section#contact .cans3 + div {
    margin-left: -8.333333%;
}*/

section#contact h1 {
    font-size: 30px;
    color: var(--color-lightblue);
    font-weight: 600;
}

section#contact p {
    font-size: 14px;
}

section#contact h1 + p:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 576px) {
    section#contact .low-calories {
        margin-top: -20px;
    }

    section#contact h1 {
        font-size: 32px;
    }

    section#contact p {
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) {
    section#contact .low-calories {
        width: 100px;
        margin-top: -30px;
    }

    section#contact h1 {
        font-size: 36px;
    }

    section#contact p {
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) {
    section#contact .low-calories {
        width: 120px;
        margin-top: 0;
    }
}

@media only screen and (min-width: 1200px) {
}

@media only screen and (min-width: 1400px) {
}


/* form */

.form-label {
    margin: .5rem 20px 0.1rem 20px;
    font-size: 15px;
}

@media only screen and (min-width: 576px) {
    .form-label {
        margin: .5rem 20px 0.15rem 20px;
        font-size: 16px;
    }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1200px) {
}

@media only screen and (min-width: 1400px) {
    .form-label {
        margin: .5rem 30px 0.2rem 30px;
        font-size: 18px;
    }
}

input#agreement {
    margin: 4px 10px 0 15px;
}

input[type="checkbox"] + label {
    font-size: 15px;
    line-height: 1.2;
}

.form-control {
    border-radius: 30px;
    border: 0;
    height: 60px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
    background: var(--color-lightblue);
    color: #fff;
}

.form-control:focus {
    box-shadow: 0 0 0 .15rem var(--color-lightblue);
    color: var(--color-lightblue);
}

textarea.form-control {
    height: 120px;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    justify-content: center;
    align-items: center;
    width: fit-content;
    display: inline-flex;
    position: relative;
    z-index: 99;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
}

.btn-secondary:hover,
.btn.btn-secondary:first-child:active,
.btn.btn-secondary:focus-visible {
    color: #fff;
    background-color: var(--color-lightblue);
    border-color: var(--color-lightblue);
}

.btn.btn-secondary:focus-visible {
    box-shadow: var(--color-lightblue);
}

.btn-dark {
    background-color: #fff;
    height: 60px;
    border-radius: 999px;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    font-size: 20px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    width: fit-content;
    display: inline-flex;
    padding: 20px;
    margin-top: 15px;
    min-width: 33%;
}

.btn-dark:hover,
.btn.btn-dark:first-child:active,
.btn.btn-dark:focus-visible {
    color: #fff;
    background-color: var(--color-lightblue);
    border-color: var(--color-lightblue);
}

.btn.btn-dark:focus-visible {
    box-shadow: var(--color-lightblue);
}

.btn-cta {
    background-color: var(--color-blue);
    border-radius: 0;
    border: 1px solid var(--color-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    width: fit-content;
    display: inline-flex;
    padding: 10px 20px;
    margin-top: 15px;
    min-width: 33%;
}

.btn-cta:hover,
.btn.btn-cta:first-child:active,
.btn.btn-cta:focus-visible,
.btn.btn-cta:active {
    color: #fff;
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

@media only screen and (min-width: 576px) {
    .btn-cta {
        font-size: 14px;
        padding: 12px 20px;
    }
}

@media only screen and (min-width: 768px) {
    .btn-cta {
        height: 40px;
        font-size: 15px;
        padding: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .btn-cta {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1200px) {
    .btn-cta {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1400px) {
    .btn-cta {
        font-size: 20px;
    }
}

.error-message {
    color: var(--color-strawberry);
    font-size: 11px;
    white-space: pre;
}

#success-message {
    color: green;
    font-size: 13px;
}


footer {
    font-size: 13px;
    margin-top: 45px;
    margin-bottom: 30px;
}

footer p {
    margin: 0;
}

footer strong {
    color: rgb(52, 186, 0, 1);
}

footer .sixnet-logo {
    height: 20px;
}

.content-web {
    color: #fff;
}

.content-web p {
    font-weight: normal;
}

.modal {
    --bs-modal-bg: var(--color-blue);
}

.modal-header {
    border-bottom-color: var(--color-lightblue);
    color: var(--color-lightblue);
    padding-left: 0;
    padding-right: 0;
}

.btn-close {
    opacity: 0.75;
    /*width: 1.5em;
    height: 1.5em;*/
}

.btn-close:hover {
    opacity: 1;
}

.modal .modal-header .btn-close {
    position: absolute;
    right: 15px;
    margin: 0;
    background-image: none;
    /*background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");*/

}

.close:hover {
    opacity: 1;
}

.close:before, .close:after {
    position: absolute;
    top: 0;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

.modal .modal-header .btn-close > span {
    position: absolute;
    left: 0;
    font-size: 10px;
    bottom: -12px;
    right: 0;
    text-transform: uppercase;
}

.modal-backdrop {
    /*--bs-backdrop-bg: var(--color-blue);*/
}

.modal-backdrop.show {
    opacity: 0.6;
}

@media (min-width: 992px) {
    .modal-xl {
        --bs-modal-width: 992px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px;
    }
}

.left-menu {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    z-index: 9999;
    width: 20px;
    list-style: none;
    display: none;
}

@media only screen and (min-width: 768px) {
    .left-menu {
        display: block;
    }
}

.left-menu li {
    white-space: nowrap;
}

.left-menu a {
    display: block;
    height: 20px;
    margin-bottom: 5px;
    color: var(--color-lightblue);
    position: relative;
    padding: 4px;
}

.left-menu a.active:after {
    box-shadow: inset 0 0 0 5px;
}

.left-menu a .hover-text {
    position: absolute;
    right: 15px;
    top: 2px;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    padding-right: 15px;
    font-size: 15px;
    line-height: 15px;
    font-weight: 600;
    /*text-shadow: 0px 0px 2px #000;*/
    background-color: var(--color-blue);
    padding: 3px;
}

.left-menu a:hover .hover-text {
    opacity: 1;
}

.left-menu a:after {
    -webkit-transition: box-shadow 0.5s ease;
    transition: box-shadow 0.5s ease;
    width: 10px;
    height: 10px;
    display: block;
    border: 1px solid;
    border-radius: 50%;
    content: '';
    position: absolute;
    margin: auto;
    top: 0;
    right: 4px;
    bottom: 0;
}

.slick-track {
    display: flex;
    align-items: start;
}

.slick-prev,
.slick-next {
    width: 30px;
    height: 30px;
    z-index: 9999;
}

.slick-prev {
    left: 5px;
}

.slick-next {
    right: 5px;
}

.slick-next::before,
.slick-prev::before {
    font-size: 30px;
}

@media only screen and (min-width: 576px) {
    .slick-prev {
        left: 15px;
    }

    .slick-next {
        right: 15px;
    }
}

@media only screen and (min-width: 768px) {
    .slick-prev,
    .slick-next {
        width: 40px;
        height: 40px;
    }

    .slick-next::before,
    .slick-prev::before {
        font-size: 40px;
    }

    .slick-prev {
        left: 20px;
    }

    .slick-next {
        right: 20px;
    }
}

.grecaptcha-badge {
    visibility: hidden;
}

.breakpoint-viewer {
    position: fixed;
    right: 0;
    bottom: 20px;
    left: 20px;
    z-index: 99999;
    width: 70px;
    height: 70px;
    padding: 8px;
    line-height: 54px;
    color: #fff;
    background-color: red;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    opacity: .6;
    box-shadow: 10px 10px 6px -4px rgba(0, 0, 0, .5);
    /*display: none !important;*/
}

.no-bullets {
    list-style: none;
    padding-left: 0;
}

.backdrop-circle {
    backdrop-filter: blur(10px);
    overflow: hidden;
    border-radius: 999px;
}

img.kktail {
    display: inline-block;
    margin: 0 !important;
    height: 35px;
    width: 35px !important;
    vertical-align: middle;
}
img.kktail.big {
    display: inline-block;
    margin: 0 !important;
    height: 55px;
    width: 55px !important;
    vertical-align: middle;
}

.icon-link {
    display: inline-flex;
    gap: 1.5rem;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    align-items: start;
}
.icon-link > img {
    flex-shrink: 0;
    width: 2.2em;
    height: auto;
    aspect-ratio: 1 / 1;
}

#ageModal .modal-content {
    background-color: red;
}