/* Type */

/* Changa One only 400: font-family: 'Changa One', sans-serif;  font-weight: 400; */

/* Switching to Adobe for Lato for 500,600 weights */
/* font-family: 'lato', sans-serif;
font-weight: 400; font-style: normal;
font-weight: 400; font-style: italic;
font-weight: 500;
font-weight: 600;
font-weight: 700; font-style: normal;
font-weight: 700; font-style: italic;
font-weight: 800;
font-weight: 900;
*/

html {
  font-size: 20px; /* 16 is default for most browsers*/
  /*font-size: clamp(20px, 4vw, 22px); /* never go below 16px, never above 24px, and scale with the viewport width in between */
}

/*
@media screen and (min-width: 320px) {
  html { font-size: 110%; }
}
@media screen and (min-width: 992px) {
  html { font-size: 114%; }
}
@media screen and (min-width: 1200px) {
  html { font-size: 116%; }
}
@media screen and (min-width: 1400px) {
  html { font-size: 118%; }
}
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height:1.5;
  font-family: 'lato',sans-serif; 
}

h2.on-detail { color:inherit; }

.text-condensed { color:inherit; }

/* global typography */

.text-serif { font-family:serif; }

h1,h2,h3,h4,h5,h6 { text-wrap:balance; color:inherit; }

h1 { font-size: 2.66rem; line-height:1.1; font-family: 'Changa One', sans-serif; font-weight:400; margin-top:0px; margin-bottom: 1rem; }
h2 { font-size: 1.618rem; line-height:1.36; font-family: 'Changa One', sans-serif; font-weight:400; margin-top:1rem; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; line-height:1.5; font-weight:700; } 

h2.on-detail { font-size: 0.85rem; font-weight:400; margin-top:1.5rem; margin-bottom: 1rem; text-transform:uppercase; letter-spacing:0.050rem; }

p, li { font-size:1rem; }
li { margin-bottom:0.25rem; } /* I like to differentiate between line height and items */
p.intro,p.lead { font-weight:inherit; font-size:1.1rem; }

label { color:inherit; }

hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top-color: currentcolor; border-top-style: none; border-top-width: 0px; border-top: 1px solid rgba(0,0,0,.1); opacity:1; }

hr.clearing-spacer { clear:both; background-color:inherit; border:0px; opacity:1; }

a { color:inherit; text-decoration:underline; }
a:hover { color:inherit; text-decoration:underline; }


/* buttons */

.btn-brand { 
  background-color:var(--cty-brand-yellow); 
  border:1px solid var(--cty-brand-yellow); 
  color:var(--cty-brand-navy); 
  font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
  border-radius:20px;
}
.btn-brand:hover { 
  background-color:var(--cty-brand-yellow); 
  border-color:var(--cty-brand-yellow); 
  color:var(--cty-brand-navy);
  text-decoration:none; 
}

.btn-outline-brand { 
  background-color:transparent; 
  border:1px solid var(--cty-brand-navy); 
  color:var(--cty-brand-navy);  
  font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem;  
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
  border-radius:20px;
}
.btn-outline-brand:hover { 
 background-color:var(--cty-brand-yellow); 
  border-color:var(--cty-brand-yellow); 
  color:var(--cty-brand-navy); 
  text-decoration:none; 
}

.btn-brand-pill { 
  background-color:var(--cty-brand-yellow); 
  border:1px solid var(--cty-brand-yellow); 
  color:var(--cty-brand-navy); 
  font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .325rem .65rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
  border-radius:20px;
}
.btn-brand-pill:hover { 
  background-color:var(--cty-brand-yellow); 
  border-color:var(--cty-brand-yellow); 
  color:var(--cty-brand-navy);
  text-decoration:none; 
}

.btn-outline-brand-pill { 
  background-color:transparent; 
  border:1px solid var(--cty-brand-navy); 
  color:var(--cty-brand-navy);  
  font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem;  
  margin: 4px 2px 4px 0px; 
   padding: .325rem .65rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
  border-radius:20px;
}
.btn-outline-brand-pill:hover { 
 background-color:var(--cty-brand-yellow); 
  border-color:var(--cty-brand-yellow); 
  color:var(--cty-brand-navy); 
  text-decoration:none; 
}

.btn-naked { 
  color:var(--cty-alink); 
  text-transform:uppercase; 
  letter-spacing:0.050rem; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem 0rem; 
  transition:var(--cty-transition-hover);  
}
.btn-naked:hover { 
  color:var(--cty-ahover); 
}

.add-arrow::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f178";
  padding-left:8px;
}
.add-angle::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\203a";
  padding-left:8px;
}



/* link box */


.lk { display:table; width:100%; margin-bottom:0.75rem; background-color:var(--cty-brand-medium); padding:1rem 1rem 0.75rem 1rem; }
.lk a { text-decoration:none; color:inherit; }
.lk a:hover { text-decoration:none; color:inherit; }
.lk-arrow { display:table-cell; width:36px; vertical-align:top; font-size:1rem; line-height:1.5; color:var(--cty-brand-green); }
.lk-content { display:table-cell; width:auto; vertical-align:top; }
.lk-content-primary { font-size:1.3rem; line-height:1.1; margin-bottom:0.2rem; font-family: "Saira Extra Condensed", sans-serif;
  font-weight: 600; }
.lk-content-secondary { font-size:0.9rem; font-weight:700; }


/* button group */

.cafe-button-group { margin:1rem 0; }
.cafe-button-group button { 
  background-color:white; 
  border:1px solid var(--cty-alink); 
  color:var(--cty-alink);
  font-size:0.8rem; font-weight:700; 
  margin: 4px 2px 4px 0px; 
  padding: .375rem .75rem; 
  transition:var(--cty-transition-hover); 
  text-decoration:none; 
}
.cafe-button-group button:hover { 
  background-color:var(--cty-ahover); 
  border-color:var(--cty-ahover); 
  color:white; 
  text-decoration:none; 
}
.cafe-button-group button.button-selected { 
  background-color:var(--cty-alink); 
  border-color:var(--cty-alink); 
  color:white; 
  text-decoration:none; 
}


/* board cards etc */

.op-card {
  .op-headline { font-weight:400; font-family: 'Changa One', sans-serif; font-size:1.4rem; line-height:1.1; margin-bottom:0.5rem; }
}


/* landing pages */


.admo-domino {
  .op-domino-hold { width:100%; margin:0; }
  .op-domino-bg { display:block; }
  .op-domino-row { display:block; width:100%; margin:0 auto; 
    background-color:var(--cty-brand-pale); 
    color:var(--cty-brand-navy); 
    margin-bottom:2rem;
  } /* apply max-width here as needed */
  .op-domino-image { display:block; }
  .op-domino-image-img { display:block; width:100%; padding-bottom:80%; background-size:cover; background-position:center center; }
  .op-domino-content { display:block; padding:1.5rem; }

  .op-domino-flex {
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
  }
  .op-domino-flex > div { width:100%; }

  @media all and (min-width: 768px) {
    .op-domino-row { display:flex;  }
    .op-domino-row-reverse { flex-direction: row-reverse; }
    .op-domino-image  { width:55%; padding:0; }
    .op-domino-image-img { width:100%; height:100%; padding:0; }
    .op-domino-content { width:45%; padding:2rem; }
    .op-domino-flex { min-height: 400px; }
  }
  @media all and (min-width: 992px) {
    .op-domino-content { padding:2.5rem; }
  }
  @media all and (min-width: 1200px) {
    .op-domino-content { padding:3rem;; }
  }

  .op-domino-bg-odd { border-radius:20px 0 20px 0; overflow:hidden; }
  .op-domino-bg-even { border-radius:0 20px 0 20px; overflow:hidden; }
  @media all and (min-width: 768px) {
    .op-domino-bg-odd { border-radius:40px 0 40px 0; overflow:hidden; }
    .op-domino-bg-even { border-radius:0 40px 0 40px; overflow:hidden; }
  }

  .op-headline { font-weight:400; font-family: 'Changa One', sans-serif; font-size:1.6rem; line-height:1.1; margin-bottom:0.5rem; }

  .btn-brand-domino { 
  background-color:var(--cty-brand-navy); 
  border:1px solid var(--cty-brand-navy);  
  color:var(--cty-brand-pale);
  font-size:0.8rem; font-weight:400; text-transform:uppercase; letter-spacing:0.100rem; 
  border-radius:20px; 
  margin: 4px 2px 4px 0px; 
  padding: .275rem 1rem; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-brand-domino:hover {  
  background-color:var(--cty-brand-navy);
  border-color:var(--cty-brand-navy); 
  color:white; 
  text-decoration:none; 
}

}


.admo-domino-row-medium { 
  .op-domino-row { background-color:var(--cty-brand-medium);}
}



.admo-round .swiper-slide {
  border-radius: 2rem;
  overflow: hidden;
}
.oly-swiper-button-next,.oly-swiper-button-prev {
  background-color:var(--cty-brand-yellow);
  color:var(--cty-brand-navy);
}


/* home page */

.admo-box-cards {

  .box-card { 
    height:100%;
    background-color:#2f3130; color:white;
    border-radius:20px 0 20px 0; overflow:hidden;
  }

  .box-card a { display:block; height:100%; min-height: inherit; text-decoration:none; color:inherit; }

  .box-card:hover a { text-decoration:none; color:inherit; min-height: inherit; }

  .box-card-flex {
    position: relative;
    min-height: inherit;
    height:360px;
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    overflow: hidden;
    text-decoration:none;
  }

  .box-card-image { 
    position: absolute;
    width: 100%; 
    height:100%; 
    background-size: cover; 
    background-position: center center;
  }

  .box-card-cover {
    position: absolute;
    width: 100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.25);
  }

  .box-card-content {
    position: relative;
    text-align: center;
    padding: 1rem 2rem;
    max-width: 992px;
  }

  @media all and (min-width: 768px) {
    .box-card { 
      border-radius:40px 0 40px 0; overflow:hidden;
    }
  }

  .box-card a .box-card-image { transition: transform 0.5s ease; }
  .box-card a:hover .box-card-image {  transform: scale(1.05); }

  .box-card-content .op-headline { font-weight:400; font-family: 'Changa One', sans-serif; font-size:2.6rem; line-height:1.1; margin-bottom:0.5rem; text-wrap:balance; }
  
  .box-card-content .op-cta {
    display:inline-block;
    background-color:white; 
    border:1px solid white; 
    color:var(--cty-brand-navy); 
    font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.050rem; 
    margin: 4px 2px 4px 0px; 
    padding: .375rem .75rem; 
    transition:var(--cty-transition-hover); 
    text-decoration:none; 
    border-radius:20px;
  }
}




.normalize-links {
  .op-headline { font-weight:400; font-family: 'Changa One', sans-serif; font-size:1.6rem; line-height:1.1; margin-bottom:0.5rem; text-wrap:balance;}
  .op-card a { display:inline; text-decoration:underline; }
  .op-card a:hover { display:inline; text-decoration:underline; }
}