/* Guardian Sans Regular */
@font-face {
    font-family: 'Guardian Sans';
    src: url('../fonts/GuardianSansRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Guardian Sans Bold */
@font-face {
    font-family: 'Guardian Sans';
    src: url('../fonts/GuardianSansBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bebas */
@font-face {
    font-family: 'Bebas';
    src: url('../fonts/Bebas-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
    --default-font-family: "Guardian Sans", sans-serif;
    --title-font: "Bebas Neue", sans-serif;

    --neutral-100:#fff;
    --neutral-200:#F4F4F4;
    --neutral-900:#000;

    --clr-edn-yellow:#EDE839; 
    --clr-edn-red:#E7503E; 
    --clr-edn-blue:#342A7C;
    --clr-edn-teal:#6ABB93;
    --clr-edn-orange:#F7931C;
    --clr-edn-orange-300:#F6E7D0;

    --transition-default:all 0.3s ease-out;

    /* Font Weights */
    --fw-regular:400;
    --fw-bold:700;

    /* Font Sizes */
    --fs-base:1rem;
  
    --fs-title-large: 2.375rem;
    --fs-title-regular: 1.875rem;
    --fs-title-small: 1.375rem;

    --fs-body-regular : 1.125rem;
    --fs-body-small : 1rem;

    /* Line Heights */
    --lh-regular: 1.25; /*1.2*/

    /* Header */
    --header-height: 90px;

     /* Layout */
    --container-padding:1.5rem;
}


/* Layout */
body {padding-top:var(--header-height);}
.container {width:min(100%, 1440px); margin:0 auto; padding:0 var(--container-padding); transition:padding 0.3s ease-out;}
section {padding:60px 0;}

@media (min-width:650px) {
  :root {
    --container-padding:72px;
  }
  .container:not(header .container) {padding:0 var(--container-padding);}
}

@media (min-width:660px) {
  header .container {padding:0 var(--container-padding);}
}

.visually-hidden {position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.text-center {text-align:center;}
.text-right {text-align:right;}

/* Fonts * Headings */
.level-1-display {font-size:var(--fs-title-large); letter-spacing:-1px; font-family:var(--title-font); font-weight:var(--fw-regular); background:var(--neutral-900); color:var(--neutral-100); display:inline-block; padding:13px 22px 8px 22px; line-height:0.7; rotate:-4deg; text-transform:uppercase;} 
h2.level-1-display {font-size:var(--fs-title-regular); rotate:-1.9deg;}
.level-1-display[data-rotate="right"] {rotate:1.9deg;}
.level-2-title {font-size:var(--fs-title-regular); font-family:var(--title-font); font-weight:var(--fw-regular); line-height:1; text-transform:uppercase;} 
.level-3-title {font-size:var(--fs-title-small); font-family:var(--title-font); font-weight:var(--fw-regular); line-height:1; text-transform:uppercase;} 

ul[role='list'] {list-style:none; margin:0;}

.section-label {font-family:var(--title-font); font-size:1.25rem; background-color:var(--clr-edn-yellow); padding:4px 7px 0 7px; line-height:1; display:inline-block; white-space:nowrap;}
.section-label[data-background-clr="red"] {color:var(--neutral-100);}
.rotate-90 {rotate:-90deg; transform-origin:top left; transform:translateX(-100%);}

@media (min-width:599px) {
  :root{
    --fs-base:1.125rem; 
    --lh-regular:1.75;
    --fs-title-large: 3rem;
    --fs-title-regular: 2.5rem;
    --fs-title-small: 1.875rem;
  }
  h2.level-1-display {font-size:2.125rem;}
  .section-label {font-size:1.438rem;}
}

@media (min-width:992px) {
  :root{
    --fs-base:18px; 
    --lh-regular:28px;
    --fs-title-large: 4.375rem;
    --fs-title-regular: 3.125rem;
  }
  h2.level-1-display {font-size:2.5rem;} 
  .section-label {font-size:1.5rem;}
}


/****** Block Text ******/
.block-text {display:flex; gap:20px; position:relative; padding-left:3rem;}
.block-text>div:first-child {width:0; position:absolute; top:0; left:0;}
.block-text-img {margin-left:48px;}

@media (min-width:768px) {
    .block-text .section-label {margin-left:-60px;}
    .block-text {gap:36px;}
    .block-text-img {margin-left:0;}
    .block-text {padding-left:0;}
}


/****** Padding & Margins ******/
.pt-0 {padding-top:0 !important;}
.pt-1 {padding-top:1rem !important;}
.pt-2 {padding-top:2rem !important;}
.pt-3 {padding-top:3rem !important;}
.pt-4 {padding-top:4rem !important;}
.pt-5 {padding-top:5rem !important;}

.pb-0 {padding-bottom:0 !important;}
.pb-1 {padding-bottom:1rem !important;}
.pb-2 {padding-bottom:2rem !important;}
.pb-3 {padding-bottom:3rem !important;}
.pb-4 {padding-bottom:4rem !important;}
.pb-5 {padding-bottom:5rem !important;}

.mt-0 {margin-top:0 !important;}
.mt-1 {margin-top:1rem !important;}
.mt-2 {margin-top:2rem !important;}
.mt-3 {margin-top:3rem !important;}
.mt-4 {margin-top:4rem !important;}
.mt-5 {margin-top:5rem !important;}

.mb-0 {margin-bottom:0 !important;}
.mb-1 {margin-bottom:1rem !important;}
.mb-2 {margin-bottom:2rem !important;}
.mb-3 {margin-bottom:3rem !important;}
.mb-4 {margin-bottom:4rem !important;}
.mb-5 {margin-bottom:5rem !important;}

/* Mobile row spacer */
@media (max-width:768px) {
  .vs-t-mobile-2 {margin-top:2rem;}
  .vs-b-mobile-2 {margin-bottom:2rem;}
}



/* OVERLAY BASE */
.grid-overlay {position:fixed; inset:0; z-index:9999; pointer-events:none; display:none;}
.grid-overlay .row {height:100vh;}
.grid-overlay .col-12, 
.grid-overlay .col-md-1 {position:relative; height:100%;}
.grid-overlay .col-12::before,
.grid-overlay .col-md-1::before {content:""; position:absolute; top:0; bottom:0; left:0; right:0; margin-left:calc(2.25rem * 0.5); margin-right:calc(2.25rem * 0.5); background-color:rgba(255,255,255,0.25); border:1px dashed rgba(255,0,0,0.5); pointer-events:none;}





/****** Backgrounds & Borders ******/
[data-background-clr="teal"] {background:var(--clr-edn-teal);}
[data-background-clr="yellow"] {background:var(--clr-edn-yellow);}
[data-background-clr="red"] {background:var(--clr-edn-red);}
[data-background-clr="orange-300"] {background:var(--clr-edn-orange-300);}
[data-background-clr="orange"] {background:var(--clr-edn-orange);}

.border-graphic {height:90px; background-size:auto 100%; background-repeat:repeat-x; background-position:50% 50%;}
.border-graphic[data-clr="teal"] {background-image:url(../images/border-teal.svg);}
.border-graphic[data-clr="yellow"] {background-image:url(../images/border-yellow.svg);}
.border-graphic[data-pull="up"] {position:relative; top: -116px;}
.border-graphic[data-pull="up-small"] {position:relative; top:-18px;}
.border-graphic[data-pull="down"] {margin-bottom:-100px;}
.container[data-pull="up"] {margin-top:-116px;}

@media (min-width:768px) {
  .border-graphic {height:136px; background-size:auto 100%;}
}


/****** Animated GIF Icons ******/
.icon-animated {width:80px;}

@media (min-width:690px) {
  .icon-animated {width:100px;}
}

@media (min-width:992px) {
  .icon-animated {width:145px;}
}


/****** Images ******/
.img-fit {object-fit:cover; width:100%; height:auto; object-position:50% 50%;}
.img-focus-top {object-position:50% 0;}
.img-focus-bottom {object-position:50% 100%;}
.img-hover-scale {overflow:hidden; display:inline-block;}
.img-hover-scale span {transform:scale(1); display: block; transition:transform 1s ease-out;}
.img-hover-scale:hover span {transform:scale(1.02) !important;}
.glide__slide img {width:100%; height:auto; display:block;}

.mobile-display {display:block;}
.desktop-display {display:none;}

@media (min-width:768px) {
  .mobile-display {display:none;}
  .desktop-display {display:block;}
}


/* Image Aspect change */
@media (max-width:767px) {
  .crop-mobile-aspect-3-2 {aspect-ratio:3/2;}
}

/****** Buttons New ******/
.btn-anim {position:relative; font-family:var(--title-font); text-decoration:none; border:0; color:var(--neutral-100); background-color:var(--neutral-900); line-height:0.8; display:inline-block; text-transform:uppercase; overflow:hidden; display:inline-flex; column-gap:15px; height:42px; padding:14px 14px 9px 14px; font-size:20px;}
.btn-anim:focus-visible,
.btn-anim:hover {background:var(--clr-edn-red); color:var(--neutral-100);}
.btn-anim span.icon {display:inline-flex; width:16px; height:16px; position:relative; align-items:center; margin-top:-2px; }
.btn-anim span.icon span.line {content:""; width:16px; height:2px; border-radius:1px; transition:all 0.35s ease; background-color:var(--neutral-100);}
.btn-anim span.icon::before,
.btn-anim span.icon::after {content:""; position:absolute; top:0; left:calc(50% - 1px); width:2px; height:10px; border-radius:1px; transition:all 0.35s ease; background-color: var(--neutral-100);}
.btn-anim span.icon span.line {position:relative;}
.btn-anim span.icon::after {top:auto; bottom:0;}
.btn-anim:hover span.icon::before {transform:rotate(-45deg) translateX(3px) translateY(3px);}
.btn-anim:hover span.icon::after {transform:rotate(45deg) translateX(3px) translateY(-3px);}

.btn-anim.btn-close {gap:10px;}
.btn-anim.btn-close span.icon {rotate:45deg; transition:rotate 0.3s ease-out; transition-delay:1s;}
.btn-anim.btn-close:hover span.icon {rotate:0deg; transition-delay:0s;}

.btn-anim.btn-close span.icon::before,
.btn-anim.btn-close span.icon::after {transition-delay:0.4s;}

/* Styling variants */
.btn-anim[data-mode="light"] {color:var(--neutral-900); background-color:var(--neutral-100);}
.btn-anim[data-mode="light"] span.icon span.line {background-color:var(--neutral-900);}
.btn-anim[data-mode="light"] span.icon::before,
.btn-anim[data-mode="light"] span.icon::after {background-color: var(--neutral-900);}
.btn-anim[data-mode="light"]:focus-visible,
.btn-anim[data-mode="light"]:hover {background-color: var(--clr-edn-yellow); color:var(--neutral-900);}

@media (min-width:690px) {
  .btn-anim span.icon {margin-top:0; }
  .btn-anim {height:50px; padding:16px 18px 13px 18px; font-size:24px;}
}



/****** Button Back ******/
.btn-back {font-size:20px; font-family:var(--title-font);}
.btn-back::before {content:''; width:14px; height:14px; position:relative; margin-right:.5rem; display:inline-block; rotate:180deg; bottom:0; transition:var(--transition-default); background:url(../images/icon-double-chevron.svg) no-repeat center center; background-size:contain;}
.btn-back:hover::before {transform:translateX(.5rem);}

@media (min-width:690px) {
  .btn-back {font-size:24px;}
  .btn-back::before {width:17px; height:17px;}
}

@media (min-width:992px) {
  .btn-back {font-size:30px;}
  .btn-back::before {width:22px; height:22px;}
}



/****** Error 404 ******/
.section-error {display:flex; height:calc(100dvh - var(--header-height)); min-height:660px;}
.section-error .container {align-self:center;}
.section-error .icon-face {max-width:180px; margin:1rem 0;}
.section-error p {max-width:320px; justify-self:center;}
.section-error-container {display:flex; justify-content:center; gap:1.25rem; align-items:center; flex-wrap:wrap; flex-direction:column;}
@media (min-width:576px) {
  .section-error-container {flex-direction:row;}
  .section-error .icon-face {max-width:200px;}
}