/****
* 1. Default
* 2. Themes
* 2.1. t-bg
* 2.2. t-gridover
* 2.3. t-btnicon
* 2.4. t-color
* 3. Components
* 3.1. c-navgrid
* 3.2. c-advideo
* 3.3. c-header
* 3.4. c-headerv2
* 3.5. c-banner
* 4. Accessibility
* 4.1. ac-accessnav
* X. Others
****/

/** 1. Default **/

:root {

    --or-natura-color: #946C45;
    --or-obsidian-color: #3E392E;
    --or-spikes-color: #DFB780;
    --or-sand-color: #F5F1EC;
    --or-anthracite-color: #6B6B6F;
    --or-white-color: #fff;

    --or-main-color: var(--or-obsidian-color);
    --or-alt-color: var(--or-natura-color);
    --or-main-btncolor: var(--or-obsidian-color);
    --or-alt-btncolor: var(--or-sand-color);
    --or-rgpd-color: var(--or-spikes-color);

    --or-font-h1: 50px;
    --or-font-h1-small: 16px;
    --or-font-h2: 43px;
    --or-font-h2-small: 16px;
    --or-font-h3: 22px;
    --or-font-h3-small: 16px;
    --or-font-p: 18px;
    --or-font-p-big: 55px;
    --or-font-p-min: 16px;
    --or-main-font: "Crimson Pro", serif;
    --or-alt-font: "Jost", sans-serif;
    --or-alt-font-2: "Barlow Condensed", sans-serif;
    --or-width: 1569px;
    --or-width-be: 1569px;
    --or-fixed-margin: 140px;
    --or-be-bgcolor: rgba(0, 0, 0, .5);
    --or-be-hometop: 300px;
    --or-pad: 200px;
    --or-pad-2: 100px;
    --or-wlight: 300;
    --or-wregular: 400;
    --or-wmedium: 500;
    --or-wbold: 900;

    --nav-maxh: 90px;

    --txt-maxwidth: 378px;
    --txt-diffmargin: calc((100vw - var(--or-width)) / 2);
}

@media (min-width: 1280px) and (max-width:1679px) {
    :root {
        --or-width: 90vw;
        --or-pad: 110px;
    }
}

@media (min-width: 1025px) and (max-width:1279px) {
    :root {
        --or-width: 80vw;
        --or-pad: 125px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --or-width: 60vw;
        --or-pad: 100px;
    }
}

@media (max-width: 767px) {
    :root {
        --or-width: 90vw;
        --or-pad: 80px;
        --or-width-side: calc(100vw - ((100vw - var(--or-width)) / 2));
        --or-width-side-max: calc(((100vw - 500px) / 2) + 500px);
    }
}

header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body {
    color: var(--or-main-color)
}

main>section {
    padding: var(--or-pad) 0
}

main>section>* {
    max-width: var(--or-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}

main>section.is-100>* {
    max-width: 100%;
    width: 100%
}

main>section.is-overflowedright>*:not(.isnot-overflowed) {
    max-width: calc(100% - ((100% - var(--or-width)) / 2));
    margin-left: auto;
    margin-right: 0
}

@media (min-width: 1025px) and (max-width:1279px) {
    main>section.is-overflowedright>* {
        --or-width: 95vw
    }
}

@media (max-width: 767px) {

    main>section>*,
    main>section>*.t-btn {
        max-width: 500px;
        width: var(--or-width-def);
    }

    main>section.is-overflowedright>*:not(.isnot-overflowed) {
        max-width: var(--or-width-side-max);
        width: var(--or-width-side);
        margin-left: auto;
        margin-right: 0
    }
}

h1 {
    text-transform: uppercase;
    line-height: 105%;
    font-family: var(--or-alt-font);
    font-weight: 400;
    letter-spacing: 10%;
    font-size: var(--or-font-h1);
    margin: 0;
}

h2 {
    text-transform: uppercase;
    font-family: var(--or-alt-font);
    font-size: var(--or-font-h2);
    font-weight: 400;
    margin-bottom: 10px;
}

h1 small,
h2 small {
    font-family: var(--or-alt-font-2);
    display: block;
    color: var(--or-alt-color);
    line-height: 115%;
    letter-spacing: 5%;
    font-weight: 600;
    font-size: var(--or-font-h1-small);
    margin-bottom: 10px;
}

p {
    font-family: var(--or-main-font);
    font-size: var(--or-font-p);
    color: var(--or-main-color);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.7%;
}

strong {
    font-weight: 600;
}

footer a,
footer a:hover {
    text-decoration: none
}

a {
    font-family: inherit;
}

/** 2. Components **/
/** 2.1. t-bg **/

.t-bg,
.t-bg * {
    --bgcolor: var(--or-sand-color);
}

.t-bg {
    background-color: var(--bgcolor);
}

.t-bg.t--natura {
    --bgcolor: var(--or-natura-color)
}

.t-bg.t--obsidian {
    --bgcolor: var(--or-obsidian-color)
}

/** 2.2. t-gridover **/

.t-gridover {
    display: grid;
    grid-template: 1fr / 1fr;
    align-items: start
}

.t-gridover>*,
.t-gridover::before,
.t-gridover::after {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1
}

/** 2.3. t-btnicon **/

.t-btnicon {
    display: flex;
    background-color: unset;
    border: none;
    align-content: center;
    align-items: center;
    padding: 0;
    cursor: pointer;
}

.t-btnicon .t-btnicon__txt {
    margin-right: 5px;
    border-bottom: 1px solid transparent;
}

.t-btnicon .t-btnicon__icon {
    margin-left: 5px;
    height: 100%;
    display: flex;
}

.t-btnicon .t-btnicon__icon,
.t-btnicon .t-btnicon__txt::after {
    transition: all .4s ease-in-out;
}

.t-btnicon .t-btnicon__txt p {
    text-transform: uppercase;
}

.t-btnicon .t-btnicon__txt::after {
    content: "";
    display: block;
    width: 0;
    border-bottom: 1px solid var(--or-obsidian-color);
}

.t-btnicon:hover .t-btnicon__icon {
    margin-left: 0;
}

.t-btnicon:hover .t-btnicon__txt::after {
    width: 100%;
}

/** 2.4. t-color **/

.t-color,
.t-color * {
    --txtcolor: var(--or-white-color);
}

.t-color h2,
.t-color h2 small,
.t-color p {
    color: var(--txtcolor);
}

.t-color.t--sand,
.t-color.t--sand * {
    --txtcolor: var(--or-sand-color)
}

/** 3. Components **/
/** 3.1. c-navgrid **/

.c-navgrid,
.c-navgrid * {
    --nav-pad-h: 15px;
}

.c-navgrid {
    max-height: var(--nav-maxh);
}

/** 3.2. c-advideo **/
.c-advideo,
.c-advideo * {
    --advideo-bg: #fff;
    --advideo-fill: #6C695E;
    --advideo-width: 40px;
    --advideo-height: 26px;
    --advideo-right-bottom: 20px;
}

.c-advideo {
    display: grid;
    grid-template: 1fr / 1fr;
    align-items: end;
    justify-items: end;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.c-advideo>*,
.c-advideo::before,
.c-advideo::after {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

.c-advideo__btn {
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    right: var(--advideo-right-bottom);
    bottom: var(--advideo-right-bottom);
    width: var(--advideo-width);
    height: var(--advideo-height);
    background-color: var(--advideo-bg);
    fill: var(--advideo-fill);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
}


.c-advideo:hover .c-advideo__btn,
.c-advideo__btn:focus-visible {
    opacity: 1;
    visibility: visible;
    bottom: calc(var(--advideo-right-bottom) + 50px);
    transition: bottom 0.3s ease;
}

.c-advideo__btn path {
    fill: var(--advideo-fill);
}

.c-advideo__btn.c--black {
    --advideo-bg: #1C1C1A;
    --advideo-fill: #fff;
}

.c-advideo__btn.c--black path {
    --advideo-fill: #fff;
}

.c-advideo__btn {
    transition: bottom 0.3s ease;
}

audio.c-advideo__audio {
    display: none;
}

.c-advideo__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    position: relative;
    z-index: 1;
}

.c-advideo__loader {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    text-align: center;
    padding: 20px;
    transition: opacity .25s ease, visibility .25s ease;
    pointer-events: none;
}

.c-advideo.is-ready .c-advideo__loader {
    opacity: 0;
    visibility: hidden;
}

.c-advideo__spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: c-advideo-spin .8s linear infinite;
}

.c-advideo__loading-text {
    font-size: 13px;
    line-height: 1.3;
    opacity: .92;
}

@keyframes c-advideo-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==> 3.3. c-header <== */

.c-header,
.c-header * {
    --header-videomaxw: 957px;
    --header-imgmaxw: 378px;
}

.c-header {
    padding-top: var(--nav-maxh);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

.c-header .c-header__col {
    width: 100%;
}

.c-header .is-content {
    margin-left: calc((100vw - var(--or-width)) / 2);
    max-width: var(--header-imgmaxw);
}

.c-header .is-content> :not(:last-child):not(.c-header__btn) {
    margin-bottom: 50px;
}

.c-header .is-video,
.c-header .is-video>div,
.c-header .is-video>div>div {
    max-width: var(--header-videomaxw);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/** 3.4. c-headerv2 **/
.c-headerv2 {
    height: 100vh;
    height: 100dvh;
    width: 100%;

}

.c-headerv2 .is-video .is-videocontainer,
.c-headerv2 .is-video .is-videocontainer video {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: cover;
    object-position: right;
}

.c-headerv2 .is-content {
    background-color: rgba(62, 57, 46, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    z-index: 1;
}

.c-headerv2 .is-content .c-headerv2__txt p {
    font-size: 30px;
    font-family: var(--or-alt-font);
    text-transform: uppercase;
    line-height: 115%;
    letter-spacing: 10%;
    padding-bottom: 150px;
}

.c-headerv2 .is-content .c-headerv2__title,
.c-headerv2 .is-content .c-headerv2__title h1 {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.c-headerv2 .is-content .c-headerv2__title h1,
.c-headerv2 .is-content .c-headerv2__title h1 small {
    color: var(--txtcolor);
}

.c-headerv2 .is-content .c-headerv2__title h1 {
    padding-top: 30px;
    line-height: 105%;
    letter-spacing: 10%;
}

.c-headerv2 .is-content .c-headerv2__title h1 small {
    font-family: var(--or-alt-font-2);
    font-size: 33px;
    font-weight: 400;
    line-height: 115%;
    letter-spacing: 26%;
    padding-top: 10px;
}

@media (max-width: 767px) {

    .c-headerv2 .is-content .c-headerv2__txt p {
        font-size: 20px;
        padding-bottom: 80px;
    }

    .c-headerv2 .is-content .c-headerv2__title h1,
    .c-headerv2 .is-content .c-headerv2__title h1 small {
        font-size: 25px;
    }

    .c-headerv2 .is-video .is-videocontainer,
    .c-headerv2 .is-video .is-videocontainer video {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/** 3.5. c-banner **/

.c-banner,
.c-banner {
    --banner-pad: var(--or-pad-2);
    --banner-contentwidth: var(--txt-maxwidth);
    --banner-contentdiffmargin: var(--txt-diffmargin);
}

.c-banner .c-banner__txt {
    padding: var(--banner-pad) 0;
    max-width: var(--banner-contentwidth);
    margin-left: var(--banner-contentdiffmargin);
}

/** 4. Accessibility **/
/** 4.1. ac-accessnav **/
.ac-accessnav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -120%, 0);
    z-index: 110;
    list-style: none;
    background: rgba(51, 51, 51, 0.9);
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 100%;
}

.ac-accessnav.is-focused,
.ac-accessnav:focus-within {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

.ac-accessnav ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}

.ac-accessnav a {
    text-align: center;
    display: flex;
    margin: 0 10px;
    padding: 5px 10px;
    color: var(--or-white-color);
    text-decoration: none;
}

.ac-accessnav a:focus,
.ac-accessnav a:focus-visible {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .ac-accessnav {
        transition: none;
    }
}