:root {

    /* Fonts */
    --defaultFontFamily: "Comfortaa", sans-serif; ;
    --titleFontFamily: "Prata", serif;

    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 700;
 
    --neutral-100:#fff;
    --neutral-400:#707070;
    --neutral-900:#000;

    --primary-200:#afb6a2;
    --primary-300:#b7cc78;
    --primary-400:#88ab27;
    --primary-500:#61753e;

    --secondary-300:#f1efe4;
    --secondary-400:#c9b073;
    --secondary-500:#c7af73;

    /* Layout */
    --container-wide: 1440;
    /* --container-narrow: 1024; */

    /* Corner radius */
    --border-radius-lg: 80px;

    /* Default */
    --transition-default: all 0.3s ease-out;

    /* Fonts */
    --fs-base: 1rem;

    --fs-level1-title: 30px; 
    --fs-level2-title: 22px;

    --fs-level1-title-medium: 34px; 
    --fs-level2-title-medium: 26px; 

    --fs-level1-title-large: 38px; 
    --fs-level2-title-large: 30px;

    --fs-para-xlarge:1.75rem;
    --fs-para-large:1.5rem;
    --fs-para-medium:1.25rem;

}


/* -------------------------
   Titles and fonts sizes
------------------------- */
.level-1-title {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level1-title); line-height:1.1;}
.level-2-title {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level2-title); line-height:1.1;}
.level-3-title,
.level-3-title button {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level2-title); line-height:1.1; color:var(--primary-700);}

.para-xl {font-size:var(--fs-para-large);}
.para-lg {font-size:var(--fs-para-medium);}


@media (min-width:768px) {
  :root {
    --border-radius-lg:140px;
  }
  .level-1-title {font-size:var(--fs-level1-title-medium);}
  .level-2-title {font-size:var(--fs-level2-title-medium);}
  .level-3-title,
  .level-3-title button {font-size:var(--fs-level2-title-medium);}
  .para-xl {font-size:var(--fs-para-xlarge);}
  .para-lg {font-size:var(--fs-para-large);}
}

@media (min-width:1024px) {
  .level-1-title {font-size:var(--fs-level1-title-large);}
  .level-2-title {font-size:var(--fs-level2-title-large);}
  .level-3-title,
  .level-3-title button {font-size:var(--fs-level2-title-large);}
}


/* -------------------------
   Images
------------------------- */
.img-fit {object-fit:cover; width:100%; height:100%;}
.img-corners {border-radius:2rem; border-top-right-radius:0;}
.full-width {width:100%;}
.img-rounded {border-radius:50%;}


/* -------------------------
   Button & Links
------------------------- */
.btn {padding:1.2rem 2rem 1.2rem 2rem; border:2px solid var(--primary-400); font-weight:var( --fw-semi-bold); color:var(--neutral-100); border:none; border-radius:12px; font-size:1rem; background:var(--primary-400); text-decoration:none; display:inline-block; white-space:nowrap; text-decoration:none;}
.btn:hover {color:var(--neutral-100); background-color:var(--primary-700); border-color:var(--primary-700);}

.link-arrow {position:relative; padding-left:1.4rem; display:inline-block;}
.link-arrow::before {content:''; position:absolute; top:0.2rem; left:0; border-radius:50%; width:1rem; height:1rem; background-color: var(--primary-400); background-image: url(/images/icon-arrow.svg); background-repeat:no-repeat; background-position:64% 50%; background-size:0.6rem 0.6rem;}

.btn-hyperlink {font-size:1.2rem; cursor: pointer; font:inherit; border:0; background:transparent; text-decoration: underline; color:var(--primary-400)}
.btn-hyperlink:hover {text-decoration:none;}


@media (min-width:768px) {
    .btn {padding:1.2rem 3rem 1.2rem 3rem;}
}


/* -------------------------
   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;}


/* -------------------------
   Containers
------------------------- */
.container {width:min(100%, var(--container-wide)*1px); margin:0 auto; padding:0 1rem;}
section {overflow-x:clip;}

@media (min-width:768px) {
    .container {padding:0 2rem;}
}


/* -------------------------
   Corner Circle
------------------------- */
.corner-circle {aspect-ratio:1/1; border-radius:50%; position:relative; z-index:2; border-bottom-right-radius:0; background:var(--primary-500); max-width:220px; display:flex; margin-bottom:1.75rem; padding:2rem 1rem 1rem 2rem; transition:var(--transition-default);}
.corner-circle>* {align-self:flex-end; text-align:right; color:var(--primary-300); margin:0 0 0 auto; font-size:38px;}
.corner-circle span {display:block;}
.corner-circle.pull-right {margin-left:auto;}

@media (min-width:576px) {
  .corner-circle {max-width:320px; padding:2rem;}
  .corner-circle .level-1-title {font-size:48px;}
}


/* -------------------------
   Default Frame
------------------------- */
.frame {position:relative; margin-top:1rem;}
.frame::before,
.frame::after {content:''; width:1000%; border-top:1px solid var(--secondary-400); position:absolute; top:0; left:-500%; opacity:0.3;}
.frame::after {top:auto; bottom:0;}
.frame-inner {position:relative; padding:6rem 1rem 2rem 1rem;}
.frame-inner::before,
.frame-inner::after {content:''; height:calc(100% + 4rem); border-left:1px solid var(--secondary-400); position: absolute; top:-1rem; left:0; opacity:0.3;}
.frame-inner::after {left:auto; right:0;}
.frame-tl-corner {border-top-left-radius:var(--border-radius-lg);}
.frame.frame-neutral-100 {background:var(--neutral-100);}
.frame .paragon-p {position: absolute; top:0; left:-80px; width:100%; max-width:600px; opacity:0.2;}
.frame .paragon-p svg path {stroke:var(--secondary-400); stroke-width:1px;}
.frame.no-line-top::before {display:none}

@media (min-width:576px) {
  .frame-inner {position:relative; padding:6rem 1rem 2rem 1rem;}
}

@media (min-width:768px) {
  .frame {margin-top:2rem}
  .frame-inner::before,
  .frame-inner::after {top:-2rem;}
  .frame-inner {position:relative; padding:6rem 2rem 2rem 2rem;}
}


/* -------------------------
   Border Radius
------------------------- */
.corner-bl {border-bottom-left-radius:var(--border-radius-lg);}
.corner-br {border-bottom-right-radius:var(--border-radius-lg);}
.corner-tl {border-top-left-radius:var(--border-radius-lg);}
.corner-tr {border-top-right-radius:var(--border-radius-lg);}


/* -------------------------
   Modal & Video Iframe
------------------------- */
.modal {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); justify-content:center; align-items:center; z-index:1000;}
.modal.active {display:flex; opacity:1;}
.modal-content {position:relative; width:90%; max-width:1200px; padding:3rem 0;}
.modal-close {position:absolute; border-radius:50%; top:0; right:0; font-size:22px; display:flex; justify-content:center; align-items:center; color:var(--neutral-100); cursor:pointer; padding:0; width:40px; height:40px; transition:var(--transition-default);}
.modal-close:hover {background-color:var(--primary-500);}
.video-container {position:relative; width:100%; padding-bottom:56.25%; height:0;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ccc;}


/* -------------------------
   Error Page
------------------------- */
body.page-error {background:var(--secondary-300);}
.section-error .columns-2-offset {align-items:center;}