/* START: Global tags */
:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray: #efeeec;
    --color-gray-2: #747474;
    --color-gray-3: #C4C3C0;

    --swiper-navigation-color: #ffffff;
    --swiper-navigation-size: 2vw !important;
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: var(--color-white);
    color: var(--color-black);
}

* {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::selection {
    background: var(--color-black);
    color: var(--color-white);
}

::-moz-selection {
    background: var(--color-black);
    color: var(--color-white);
}

p {
    margin-bottom: 20px;
}

a,
a:hover,
a:link {
    text-decoration: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.uppercase {
    text-transform: uppercase;
}

.transition {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.slow-transition {
    transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.button,
button.button {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-gray);
    color: var(--color-black);
    height: 4.7vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-size: 1.2vw auto;
    background-position: 95% center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-width: 1px;
}

.button:hover,
button.button:hover {
    filter: invert(100%);
    border-color: transparent !important;
}

input[type="submit"].button,
.button.link,
button.button.link {
    background-image: url("../images/arrow.svg");
}

.button.back,
button.button.back {
    background-position: 5% center;
    text-align: right;
    background-image: url("../images/arrow-left.svg");
}

.button.tab,
button.button.tab {
    background-image: url("../images/arrow-down.svg");
}

body.page-template-modules main,
body.single-iria-product main,
body.page-template-configurator main {
    padding-top: 4.7vw;
}

/* LAZY LOAD */
.lazy-picture {
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    opacity: 0;
}

.lazy-picture.lazyloaded {
    opacity: 1;
}

.aspect-container {
    position: relative;
}

.aspect-container picture,
.aspect-container picture img,
.aspect-container video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

/*SWIPER */
body .swiper-pagination {
    height: 4.7vw;
}

body .swiper-pagination-bullet {
    opacity: 1;
    background-color: var(--color-black);
    margin: 0 0.5vw !important;
    width: 0.52vw;
    height: 0.52vw;
    cursor: pointer;
}

body .swiper-pagination-bullet-active {
    background: var(--color-white);
}

/* LEGAL */
.legal-page {
    width: 100%;
    max-width: 960px;
    margin: 100px auto;
}

.legal-page h1 {
    margin-bottom: 40px;
}

.legal-page ul {
    padding-left: 1rem;
}

.legal-page p a,
.legal-page ul a {
    color: var(--color-black);
    text-decoration: underline;
}

/* COOOKIES */
.cmplz-manage-consent.manage-consent-1.cmplz-show {
    display: none;
}

@media only screen and (max-width: 768px) {
    :root {
        --swiper-navigation-size: 6vw !important;
    }

    .button,
    button.button {
        height: 12.85vw;
        background-size: 3.33vw auto;
        background-position: calc(100% - 4.1vw) center;
        background-position: -webkit-calc(100% - 4.1vw) center;
        background-repeat: no-repeat;
    }

    body.page-template-modules main,
    body.single-iria-product main,
    body.page-template-configurator main {
        padding-top: 12.85vw;
    }

    body .swiper-pagination {
        height: 8vw;
    }

    body .swiper-pagination-bullet {
        margin: 0 1vw !important;
        width: 2vw;
        height: 2vw;
    }
}