@font-face {
    font-family: 'ALTRONED';
    src: url('../ALTRONED.eot'); /* IE9 Compat Modes */
    src: url('../ALTRONED.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../ALTRONED.woff') format('woff'), /* Modern Browsers */
         url('../ALTRONED.woff2') format('woff2'), /* Modern Browsers */
         url('../ALTRONED.ttf') format('truetype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

.inter{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

* {
  font-family: "Inter", sans-serif;
}

article > *:not(.entry-content),
.entry-content > * {
    @apply mx-auto max-w-content;
}

.entry-content, .block-editor-block-list__layout {
    h1 {
        @apply text-2xl;
    }

    h2 {
        @apply text-xl;
    }

    h3 {
        @apply text-lg;
    }

    p, ul, ol {
        a {
            @apply text-blue-500 underline;

            &:hover {
                @apply no-underline;
            }
        }

        @apply mb-8;
    }

    ul:not(.block-editor-block-variation-picker__variations) {
        li {
            @apply list-disc list-inside;
        }
    }

    ol {
        li {
            @apply list-decimal list-inside;
        }
    }
}

.container { padding-inline: 20px }

@media(min-width:768px) {
    .small-container {
        max-width:1180px !important;
    }
}

h1,h2,h3,h4,h5,h6,h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {
    font-family: 'ALTRONED';
    text-transform:uppercase;
}

h1 {font-size:40px !important;}
h2 {font-size:36px !important;}
h3 {font-size:30px !important;}
h4 {font-size:24px !important;}
h5 {font-size:20px !important;}

.slant-hero-carousel .item-container:before {
    width:100%;
    height:50%;
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));
    position:absolute;
    bottom:0px;
    left:0px;
    content:'';
}
.slant-hero-carousel .owl-item .item-container > * {
    opacity:0;
    transform:translateY(-20px);
    transition:all 1s;
    transition-delay: 0.5s;
}
.slant-hero-carousel .owl-item.active .item-container > * {
    opacity:1;
    transform:translateY(0px);
}
.slant-hero-carousel .item-container {
  --padding: 20px;
  --slant: 130px;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
    clip-path: polygon(calc(var(--slant) - var(--padding)) 0, 100% 0, calc(100% - var(--slant) + var(--padding)) 100%, 0 100%);
}
.slant-hero-carousel .owl-dots { position:absolute; bottom:6px; width:100%; }
.slant-hero-carousel .owl-dots button.owl-dot span { background-color:white; opacity:0.4 }
.slant-hero-carousel .owl-dots button.owl-dot.active span { background-color:white; opacity:1 }
.slant-hero-carousel .item-container h2 { font-size:50px; color:white; line-height:1.1; text-transform:uppercase; z-index:2; position:relative; }
.slant-hero-carousel .item-container h2 span { display:block; color:#53A4AD; }

.button-default:hover:after {
    width:100%;
}

.button-default:after {
    width:0px;
    left:0px;
    top:0px;
    height:100%;
    background-color:#B7A16B;
    transition:1s all;
    content:'';
    position:Absolute;
    mix-blend-mode: multiply;
    pointer-events: none;
}


.button-default.button-filled:after {
    width:100%;
}

.button-default {
  color: #000;
  position:relative;
  overflow:hidden;
  background-color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 9px 30px;
  margin: 10px;
  display: inline-block;
  font-weight:bold;
  text-transform:uppercase;
}

.button-slanted {
  --slant: 10px;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

.image-slanted {
  --slant: 15px;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

.button-slanted-content {
  display: inline-block;
}

.boxes h3 {
    font-size:30px;
    color:white;
    text-transform:uppercase;
    text-shadow:0px 0px 50px rgba(0, 0, 0, 0.3);
}

.boxes a {
    box-shadow:10px 10px 0 0 rgba(0,0,0,0.1);
    transition:all 0.3s;
}

.boxes a:hover {
    box-shadow:14px 14px 0 0 rgba(0,0,0,0.1);
}

/* NAvigation */

#primary-menu .menu-item a { text-transform: uppercase; font-weight:bold; font-size:14px; position:relative; }
#primary-menu .menu-item.menu-item-has-children:hover > .sub-menu { display:block; }
#primary-menu .menu-item.menu-item-has-children > .sub-menu { display:none; position:absolute; z-index:10; background-color:white; padding:10px; }
#primary-menu .menu-item.menu-item-has-children { position:relative; }
#primary-menu .menu-item.menu-item-has-children > .sub-menu li a { padding:10px 0px; display:block; }
#primary-menu .menu-item.menu-item-has-children:after { 
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: inline-block;
    border-top: 8px solid black;
    margin-left: 4px;
    margin-bottom: 1px;
 }
 #primary-menu #menu-main-menu > .menu-item:not(.button-default):not(.menu-item-has-children):hover > a:after { width :calc(100% + 4px); }
 #primary-menu #menu-main-menu > .menu-item:not(.button-default):not(.menu-item-has-children) > a:after { width:0px; transition:all 0.3s ease-in-out; height:2px; background-color:#999; 
  --slant: 2px;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); position:absolute; top:calc(100% + 2px); left:-2px; content:''; }

.experiences .navigator div.title {
    position:relative;
}
.experiences .navigator div.title:after {
    width:0px;
    content:''; 
    height:2px;
      --slant: 2px;
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
    top:0px; 
    position:absolute;
    background-color:white;
    left:0px;
    transition:0.3s all ease-in-out;
}
.experiences .navigator.active div.title:after {
    width:40%;
}

.wti-carousel .owl-nav {
    position: absolute;
    top: calc(50% - 20px);
    width: calc(100% + 40px);
    left:-20px;
    display: flex;
    place-content: space-between;
}

.wti-carousel .owl-nav button span {
    font-size:46px;
}

.wti-carousel .owl-nav button.owl-next:hover, .wti-carousel .owl-nav button.owl-prev:hover {
    background-color:transparent;
}