/*
GENERAL STYLING
MOBILE FIRST
*/
@font-face {
    font-family: "Neuzeit Office Regular";
    src: url("https://db.onlinewebfonts.com/t/cff766a7063ba234b649a2e4b9560c9d.eot");
    src: url("https://db.onlinewebfonts.com/t/cff766a7063ba234b649a2e4b9560c9d.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/cff766a7063ba234b649a2e4b9560c9d.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/cff766a7063ba234b649a2e4b9560c9d.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/cff766a7063ba234b649a2e4b9560c9d.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/cff766a7063ba234b649a2e4b9560c9d.svg#Neuzeit Office Regular")format("svg");
}


:root {
  --background: #f3f3f3;
  --textcolor: #3a3a3a;
}

#privacy_page p, li {
color: var(--textcolor)
}

#privacy_page h1 {
color: #F6A612;
}

#privacy_page h3 {
color: #BD6968;
}

#tandc_page p li {
color: var(--textcolor)
list-style:none;
}

#tandc_page h1 {
color: #F6A612;
}

#tandc_page h3 {
color: #BD6968;
}

#fp_page p, li {
color: var(--textcolor);
}


*, *::before, *::after {
  box-sizing: border-box;
}

.h1Explainer {
 padding:0px;
 margin:0px;
 margin-top: -10px;
}

.text_color {
  color: var(--textcolor);
}

body {
  margin: 0;
  background: #fff;
  /*font-family: 'Work Sans', sans-serif;*/
  font-family: "Neuzeit Office Regular", sans-serif;
  font-weight: 400;
  min-height:100vh;
}

header {
  position: sticky;
  top:0;
  z-index: 999;
  width: 100%;
}

footer {
  position: sticky;
  top: 100%;
}

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover; /*cover or 'contain', 'fill', 'none', 'scale-down'*/
}

/* for displaying lists horizontally with bullet points*/
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  color: grey;
}

.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nound {
  text-decoration:none;
}

.drop {
white-space:nowrap;
display:block;
}


/*COREGALIGN*/
span.wrap {
white-space:nowrap;
display:block;
}

span.hideBullet {
display:none;
}

span.fphideBullet {
display:none;
}

.container {
  --max-width: 78%;
  --padding: 1rem;

  padding-top: 2rem;
  width: min(var(--max-width),100% - var(--padding));
  margin-inline:auto;
}

.footer-columns {
  display:grid;
  gap: 0rem;
}

.footer-padding {
  padding-left:20px;
}

.width100pc {
  width:100%;
}

.font30px {
  font-size:1.875em;
}

.pFont22px {
  font-size:1.375em;
}

.pFont20px {
  font-size:1.25em;
}

.pFont16px {
  font-size:1em;
}

.pMargin {
  margin:auto;
}

.hrTitle {
  border: 1px solid #F6A612;
  width:40%;
  min-width: 16em;
  margin:auto;
}

.hrExplainerBlue {
  width:150px;
  border: 3px solid #3BAEC3;
}

.hrExplainerOrange {
  width:150px;
  border: 3px solid #F6A612;
}

.hrExplainerRed {
  width:150px;
  border: 3px solid #BD6968;
}

.hrExplainerGreen {
  width:150px;
  border: 3px solid #38B0A8;
}

.buttonUnderhang {
  position:relative;
  bottom: 24%;
  transform: translateX(-50%);
  left: 50%;
  height:0px;
}

.contactButton {
  width:clamp(300px, 35vw, 35vw); 
  height:4em; 
  font-size:1.375em;
  white-space: normal; 
  word-wrap: break-word; 
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(1rem, 2vw, 2rem);
}

.returnButton {
  width:clamp(300px, 35vw, 35vw); 
  height:4em; 
  font-size:1.375em;
  white-space: normal; 
  word-wrap: break-word; 
  /*padding: clamp(0.5rem, 1vw, 1.5rem) clamp(1rem, 2vw, 2rem);*/
}

.pagetitle {
  width: clamp(10em, 50%, 16em);
  margin: 0 auto;
  background: #343F5E;
  font-size: 1.875em;
  color: white;
  padding: 10px;
  text-align: center;
  white-space: normal; 
  word-wrap: break-word;
  margin-bottom:1.5em;
}

.even-columns {
  display:grid;
  gap: 2rem;
}

.even-columns-center {
  display:grid;
  gap: 2rem;
  justify-items:center;
}

.fpgrid {
  display:grid;
  gap: 3rem;
  grid-template-columns:
    repeat(auto-fit, minmax(250px,1fr));
}

.fpwrapper {
  max-width:1100px;
  margin-inline: auto;
  margin: 0 10% 0 10%;
}

.fpimg {
  display:block;
  width:100%;
  max-width:100%;
}

.fpProp1 {
  width:100%;
}

.fpProp2 {
  padding:0px;
  position:relative;
}

.fpNoPointer {
pointer-events:none
}

.fpButPos {
position:absolute;
top: -8%;
transform: translateX(-50%);
left: 50%;
}

.mySlides {
  display:none;
  width=100%;
}

.tal {
  text-align:left;
}

.iplh {
  line-height:2.0;
}

.flthgt {
float:right;
height:20px;
}


/*was h4*/
.ipColPurple {
  color:#343F5E
}

.ippt {
padding-top:30px;
}

/* variable font sizing -> clamp(smallest,ideal,largest)*/
.ipp {
  /*font-size: clamp(0.8rem, 1.1vw, 1rem);*/
  font-size: 1.25em;
}

.iphr {
border: 1px solid silver;
}

/* for displaying lists horizontally with bullet points*/
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

#gi {
    margin:5px 8% 5px 8%;
}

.nomarpad {
margin:0;
padding:0;
}

/*IMAGE-EXPLAINER SPLIT MOBILE*/
#s1-mobile {  display:block;}
#s2-mobile {  display:block;}
#s3-mobile {  display:block;}
#s4-mobile {  display:block;}

#s1-desktop {  display:none;}
#s2-desktop {  display:none;}
#s3-desktop {  display:none;}
#s4-desktop {  display:none;}

/* 
NAVIGATION STYLES
START HERE
*/

.logo {
  background: white;
  text-align:center;
  padding-block: 20px;
}

.logo_style {
  min-width:15%;
  width:90px;
}

.navdiv {
  background: var(--background);
  text-align: center;
  padding-block:20px;
}

.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;

}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  position: relative;
  top: 0;
  right: 0;
  margin-left: 90%;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: #343F5E;
  height: 3px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: relative;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 5px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: #343F5E;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #BD6968;
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}


/*
DESKTOP STYLES
START HERE
WITH MEDIA QUERY
*/


@media screen and (min-width: 60em) {

.fpwrapper {
  max-width:1100px;
  margin-inline: auto;
}

.drop {
display:none;
}

/*COREGALIGN*/
span.wrap {
display:inline;
}

span.hideBullet {
display:inline;
}

span.fphideBullet {
display:inline;
color: #F6A612;
margin:0;
padding:0;
}

.no-bullets {
  margin:0;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

/*IMAGE-EXPLAINER SPLIT DESKTOP*/
#s1-mobile {  display:none;}
#s2-mobile {  display:none;}
#s3-mobile {  display:none;}
#s4-mobile {  display:none;}

#s1-desktop {  display:block;}
#s2-desktop {  display:block;}
#s3-desktop {  display:block;}
#s4-desktop {  display:block;}

  .even-columns {
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap: 8rem;
}

  .footer-columns {
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap: 4rem;
}

  .footer-padding {
    padding-left:60px; 
  }

  .nav-toggle-label {
    display: none;
  }

  navdiv {
    display: grid;
    grid-template-columns: 1fr minmax(600px, 3fr) 1fr;
  }
  
  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */
    
    /* the following lines are not from my video, but add Edge support */
    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */
    
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  nav ul {
    display: flex;
  }
  
  nav li {
    margin-left: 2em;
    margin-right:2em;
    margin-bottom: 0;
  }
  
  nav a {
    opacity: 1;
    position: relative;
  }

@media screen and (max-width: 1000px) {
.fpwrapper {
  max-width:1100px;
    margin:0px 6% 0px 6%;
}
}

@media screen and (max-width: 1000px) {
  #gi, #am, #ac, #ap, #ei {
    margin:0px 16px 0px 16px;
  }

}