@font-face {
    font-family: 'SurogatCond Blk';
    src: url('../assets/SurogatCond-BlkIta.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    src: url('../assets/Open_Sans/OpenSans-VariableFont_wdth\,wght.woff2') format('woff2');
}

@font-face {
    font-family: 'MarleneDisplayPro';
    src: url('../assets/marlene/MarleneDisplayPro-DarkCond.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* VARIABLES */

:root {
    --black: #000000;
    --black-text: #1F1F1F;
    --gray: #707070;
    --grey: #707070;
    --red: #E30613;
    --green: #C3D746;
    --green-faded: #C3D7467E;
    --beige: #F5F2EF;
    --white: #FFFFFF;
    --transition-duration: 0.4s;
    --blue-pastel: #0061AF33;
    --green-pastel: #BFD72F4D;
    --green-strong: #9AC93C;
    --blue-strong: #0061AF;
}


html,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 20px;
    background-color: var(--beige);
}

:root {
    --grid-side-padding: 16.6vw;
    --grid-gap: 6.33vw;
    --default-column: 2 / span 12;
}

.wrapper {
    display: grid;
    grid-template-columns: calc(var(--grid-side-padding) - var(--grid-gap)) repeat(12, 1fr) calc(var(--grid-side-padding) - var(--grid-gap));
    gap: var(--grid-gap);
    grid-template-areas: '. content content content content content content content content content content content content .';
}

.wrapper>* {
    grid-column: var(--element-scoped-column, var(--default-column));
}

.open-sans {
    font-family: 'Open Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.surogat-cond-blk {
    font-family: 'SurogatCond Blk', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}


.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.flex {
    display: flex;
}

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

.inline-list {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 2.2rem;
    align-items: baseline;
}

.bg-blue-strong {
    background-color: var(--blue-strong);
}

.fs-22 {
    font-size: 1.1rem;
}

.bg-green {
    background: var(--green-pastel);
}

.bg-green-strong {
    background: var(--green);
}

.green-strong {
    color: var(--green-strong);
}

.blue-strong {
    color: var(--blue-strong);
}

.br-pill {
    border-radius: 1.7rem;
}

button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}


.p-button {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 4px;
    padding-bottom: 7px;
}

.bg-green:hover {
    background: var(--green-faded);
}

.link-reset a:link,
.link-reset a:visited {
    color: inherit;
    text-decoration: none;
}

.link {
    color: var(--black);
    border-bottom: 1px solid black;
}
.sizing-logo {
    height: 3.75rem;
}

.jumbotron {
    display: grid;
}

.jumbotron #jumbotron__hero--desktop {
    min-width: 100dvw;
    max-width: 100dvw;
    min-height: 90vh;
    object-fit: cover;
    object-position: center center;
}

.jumbotron #jumbotron__hero--mobile {
    display: none;
    min-width: 100dvw;
    min-height: 60vh;
    object-fit: cover;
}

.jumbotron #jumbotron__title {
    margin-top: -20%;
    height: 25rem;
    justify-self: center;
}

.m-6 {
    margin-top: 6rem;
}

.column-2-sp-6 {
    grid-column: 2 / span 6;
}

.column-8-sp-6 {
    grid-column: 8 / span 6;
}

.fs-56 {
    font-size: 2.8rem;
}

.m-0 {
    margin: 0;
}

.fs-73 {
    font-size: 3.3rem;
}


.bg-blue {
    background: var(--blue-pastel);
}

.blue-strong {
    color: var(--blue-strong);
}

.marlene {
    font-family: 'MarleneDisplayPro', 'Roboto Slab', serif;
}
.fs-44 {
    font-size: 2.2rem;
}

.accordion--left {
    display: grid;
    grid-template-rows: 1rem auto 1rem;
    /** padding slika padding content padding ikona padding **/
    grid-template-columns: 2.5rem 20rem 2.5rem auto 1rem 3rem 1rem;
}

.accordion--right {
    display: grid;
    grid-template-rows: 1rem auto 1rem;
    /** padding slika padding content padding ikona padding **/
    /** grid-template-columns: 2.5rem 20rem 2.5rem auto 1rem 3rem 1rem; **/
    /** padding ikona padding content padding slika padding **/
    grid-template-columns: 1rem 3rem 1rem auto 2.5rem 20rem 2.5rem;
}

.accordion-image {
    grid-column: 2;
}

.accordion--right.accordion-image {
    grid-column: 6;
}

.accordion .accordion-image {
    grid-row: 1/4;
    object-fit: cover;
    height: auto;
    justify-self: center;
    max-height: calc(100% + 1rem);
    width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
}

.accordion--right .accordion-image {
    grid-column: 6;
}

.accordion.opened .accordion-image {
    grid-row: 1/4;
    height: auto;
}

.accordion>* {
    z-index: 2;
}

.accordion .bg {
    grid-row: 2;
    grid-column: 1/span all;
    border-radius: 1.6rem;
    z-index: 1 !important;
}

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

.accordion-content {
    grid-column: 4;
    grid-row: 2;
}

.accordion.collapsed .accordion-inner-content {
    display: none;
}

.accordion .icon-plus {
    padding-top: 0.5rem;
    grid-column: 6;
    grid-row: 2;
    padding-top: 4.5rem;
}

.accordion--right .icon-plus {
    grid-column: 2;
}

.m-84 {
    margin-top: 4.2rem;
}

.accordion svg,
.accordion svg #cross {
    transition: all 0.3s ease-in-out;
}

.accordion.opened #cross {
    transform: rotate(90deg);
}

.br-1-6 {
    border-radius: 1.6rem;
}

.white {
    color: var(--white);
}

.box-spacing {
    padding-left: 3rem;
    padding-right: 2rem;
    padding-top: 2.2rem;
    padding-bottom: 2rem;
}

.fs-32 {
    font-size: 1.6rem;
}

.tt-upper {
    text-transform: uppercase;
}

.flex p {
    margin-top: 0;
}

.btn-black {
    background-color: var(--black-text);
    color: var(--green);
    border-radius: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 4.25rem;
    padding-right: 4.25rem;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    width: max-content;
    height: max-content;
    flex: 0 0 max-content;
}

.btn-black:visited,
.btn-black:focus,
.btn-black:hover {
    color: var(--green);
}

.btn-black:hover {
    background-color: var(--black);
}

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


.br-no-b {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.p-l-44 {
    padding-left: 2.2rem;
}

.menu-mobile {
    display: none;
}

.menu-trigger {
    display: none;
}

.block-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    gap: 2.2rem;
    align-items: baseline;
}

.gap-1 {
    gap: 1rem;
}

@media (max-width: 1300px) {
    :root {
        --grid-side-padding: 6vw;
    }

    .menu-trigger {
        display: block;
    }

    .menu-mobile.opened {
        display: block;
    }

    .hide-mobile {
        display: none;
    }

    .jumbotron #jumbotron__hero--desktop {
        display: block;
        object-position: 66% center;
        min-height: 60dvh;
    }

    .jumbotron #jumbotron__title {
        height: auto;
        width: 95dvw;
    }

    .tablet-down-fw {
        grid-column: 2/13;
    }

    .fs-56 {
        font-size: 1.65rem;
    }

    .block-mobile {
        display: block;
    }

    .fs-73 {
        font-size: 1.75rem;
    }

    .fs-44 {
        font-size: 1.2rem;
    }

    p {
        font-size: 0.7rem;
    }

    .accordion {
        /** padding content padding plus padding **/
        grid-template-columns: 1rem 1fr 1rem;
        /** slika-pola slika-pola content padding plus padding **/
        grid-template-rows: 8rem 8rem auto 0.5rem 2rem 1rem;
    }

    .accordion-image {
        grid-column: 2 !important;
        grid-row: 1/2 !important;
        max-height: 18rem !important;
        width: auto !important;
    }

    .accordion .bg {
        grid-column: 1/span all !important;
        grid-row: 2/span all !important;
    }

    .accordion-content {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .accordion .icon-plus {
        grid-row: 4 !important;
        grid-column: 2 !important;
        margin-bottom:-1rem;
        justify-self: right;
        padding-top: unset;
    }

    .mobile-m-4 {
        margin-top: 2rem;
    }

    .btn-black {
        padding-left: 2rem;
        padding-right: 2rem;
        margin-top: 4rem;
    }

}

@media (max-width: 600px) {
    .jumbotron #jumbotron__hero--desktop {
        min-height: 40dvh;
    }
}