
/* -------------------------------------------------------------------------- */

/*	1. FOOTER
migrated from Knack CSS
/* -------------------------------------------------------------------------- */
.vision-clouds {
    background: url(../svgs/footer-clouds-desktop.svg) no-repeat center bottom;
    background-size: contain;
    z-index: 0;
    width: 100%;
    height: fit-content;
}

.vision-landscape {
    z-index: 1;
    width: 100%;
    height:fit-content;
    margin-bottom: -10px;
    /*margin-top: -100px;*/
}

.row {
    display: flex;
    /*flex-wrap: wrap;*/
    box-sizing: border-box;
}


/* Main column */

@media screen and (min-width: 700px) {
    .virtue {
        flex: auto;
        padding: 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 700px) {
    .virtue {
        flex: 100%;
        box-sizing: border-box;
    }
}


#footer-full {
    width: 100%;
    /* margin-top:20px;*/
    z-index: -1;
}


#ocean-vision {
    width: 100%;
    position: relative;
    z-index: -1;
    margin-bottom: -6px;
}

.ocean-vison img {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 100%;
}

/* VISION STAETMENT IN FOOTER */

.footer-vision {
    font-family: 'Mulish', sans-serif;
    color: var(--footer-text);
    font-weight: 500;
    text-align: center;
    background-color: var(--footer-background);
    padding-top: 36px;
    /*padding-bottom: 50px;*/
}

@media screen and (max-width: 800px) {
    .footer-vision {

        font-size: 1.15em;
        line-height: 1.3;
        padding-right: 4%;
        padding-left: 4%;
    }
}

@media screen and (min-width: 770px) and (max-width: 2000px) {
    .footer-vision {
        font-size: 1.7em;
        line-height: 1.3;
        padding-right: 10%;
        padding-left:10%;
    }
}

/*INVITE TO CLICK ICONS*/

.footer-invite {

    font-family: 'Arvo', serif;
    color:  var(--footer-header);
    text-align: center;
    background-color: var(--footer-background);
}

.footer-invite a {
    color:  var(--footer-header);
    text-decoration: pointer;
}

.footer-invite a:hover {
    color:  var(--footer-header);
    text-decoration: none;
}

@media screen and (max-width: 800px) {
    .footer-invite {
        font-size: 0.9em;
        line-height: 1.3;
        padding-right: 5%;
        padding-left: 5%;
    }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
    .footer-invite {
        font-size: 1.3em;
        line-height: 1.3;
        padding-right: 10%;
        padding-left:10%;
    }
}


/*PLATFORM ICONS*/


.footer-icons-container {

    padding-bottom: 0px;
    background-color: var(--footer-background);
    display: flex;
    align-items: stretch;
    flex-direction: row;
    box-sizing: border-box;
    height: fit-content;
    width: 100%;
    box-sizing: border-box;
}

.footer-icons {
    flex: 50%;
    text-align: center;
    box-sizing: border-box;
}

.footer-icons img {
    max-width: 100px;
}

.footer-icons a img {
    opacity: 0.6;

}

.footer-icons a:hover img {
    opacity: 1;
}


/* Responsive layout for icons */
@media (max-width: 800px) {

    .footer-icons-container {
        padding: 16px 3% 0px 3%;
    }
    .footer-icons {
        padding: 0px 4px 0px 4px;
    }
}

@media (min-width: 800px) {

    .footer-icons-container {
        padding: 40px 6% 0px 6% ;
    }
    .footer-icons  {
        padding: 0px 10px 0px 10px ;
    }
}



/*NOT ACTIVE - PLatform reviews*/
.icon-name {
    font-family: 'Mulish', sans-serif;
    font-size: 0.9em;
    color:  var(--footer-header);
    line-height: 1.3;
    font-weight: 500;
    display: none;

}

.server-review {
    font-family: Mulish, sans;
    font-size: 0.8em;
    color:  var(--footer-header);
    line-height: 1.3;
    font-weight: 500;
    display: none;
}

@media (max-width: 800px) {
    .icon-name {
        display: none;
    }
    .server-review {
        display: none;
    }
}


/* FOUR FOOTER SECTIONS */

.footer-content {
    padding-top: 20px;
    padding-bottom: 40px;
    padding-right: 5%;
    padding-left: 5%;
    background-color: var(--footer-background);
    display: flex;
    align-items: stretch;
    flex-direction: row;
    box-sizing: border-box;
}



/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
    .footer-content {
        flex-direction: column;
    }
}

.footer-box {
    padding: 15px;
    flex: 50%;
}


.footer-header {
    font-family: 'Arvo', serif;
    color:  var(--footer-header);
    font-weight: 100;
    text-align: left;
    padding-bottom: 10px;
}


@media screen and (max-width: 770px) {
    .footer-header {
        font-size: 1.2em;
        line-height: 1.2;
    }
}

@media screen and (min-width: 770px) and (max-width: 2000px) {
    .footer-header {
        font-size: 1.5em;
        line-height: 1.3;
    }
}


.footer-subtext {
    font-family: 'Mulish', sans-serif;
    color:  var(--footer-text);
    font-weight: 300;
    text-align: left;
}

.footer-subtext a {
    color: var(--footer-text);
}

.footer-subtext a:hover {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width: 800px) {
    .footer-subtext {
        font-size: 0.9em;
        line-height: 1.2;
    }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
    .footer-subtext {
        font-size: 1.1em;
        line-height: 1.3;
    }
}


.footer-bottom {
    width: 100%;
    padding-bottom: 50px;
    background-color:var(--footer-background);
    margin-bottom: -20px;
}

.footer-conclusion {
    font-family: 'Mulish', sans-serif;
    color: var(--footer-text);
    line-height: 1.3;
    font-weight: 500;
    text-align: center;

    background-color: var(--footer-background);
    padding-top: 5px;
    padding-bottom: 20px;

}

.footer-conclusion a {
    color: var(--footer-text);
}

.footer-conclusion a:hover {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width: 800px) {
    .footer-conclusion {
        font-size: 0.96em;
        line-height: 1.2;
        padding-right: 6%;
        padding-left:6%;
    }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
    .footer-conclusion {
        font-size: 1.0em;
        line-height: 1.3;
        padding-right: 10%;
        padding-left:10%;
    }
}

/* -------------------------------------------------------------------------- */

/*	7. CARBON WIDGET FORMATTING

/* -------------------------------------------------------------------------- */
/*

/* -------------------------------------------------------------------------- */

/*	7. WIDGET FORMATTING

/* -------------------------------------------------------------------------- */

/*

#wcb.wcb-d #wcb_a {
    color: #252b4d !important;
    background: #8cbdda !important;
    border-color: #529bc2 !important;
  }

  #wcb #wcb_a, #wcb #wcb_g {
    border:.2em solid #8cbdda !important;
  }



  #view_6432  .kn-menu .kn-button {
       color: #fff !important;
      padding: 15px !important;
        font-size: 18px !important;
      }

  */



/* --------------------------

EARTHEN SUBSCRIPTION SYSTEM CSS

version 1.0

----------------------------*/
/*

#registration-footer {
  width: 100%;
  height: 77px;
  position: fixed;
  bottom: 0;
  color: var(--subdued-text);
  text-align: center;
  transition: margin-bottom 0.3s, height 0.3s;
  overflow: hidden;
  z-index: 25;
  margin-bottom: -66px;
  display: flex;
  flex-flow: column;
}

.registration-footer-holder {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  border-top: 1px var( --header-accent) solid;
  }


  @media (prefers-color-scheme: dark) {
    .registration-footer-holder {
      background: url(webp/earthen-subscription-background-dark.webp) top center, var(--side-overlays);
      background-repeat: no-repeat;
      background-size: cover;
    }
  }


  @media (prefers-color-scheme: light) {
    .registration-footer-holder {
      background: url(webp/earthen-subscription-background-light.webp) top center, var(--top-header);
      background-repeat: no-repeat;
      background-size: cover;
      }
    }


#progress-bar {
  height: 10px;
  background-color: var( --header-accent);
  width: 0%;
  z-index: 10;
}

#email-registration {
  display: none;
  color: black;
  text-align: left;
  padding: 10px;
  margin: auto;
}

.email-input {
  margin-left: 10px;
  font-size: 20px;
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
  width:100%;
  background: #00ffff17;
  color: var(--text-color);
  border-color: grey;
}

.name-input {
  display: none;
  margin-left: 10px;
  font-size: 20px;
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
  width: 0%;
  transition: width 0.5s;
  background: #00ffff17;
  color: var(--text-color);
}

.reg-complete-text {
  display: none;
  font-family: 'Mulish';
  color: rgb(128, 122, 0);
  margin-left: 10px;
  font-size: 18px;
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
  width: 70%;
  transition: width 0.5s;
  background: var(--background-color);
}

.register-button {
  cursor: pointer;
  font-size: 20px;
  padding: 10px;
  border-radius:  0px 10px 10px 0px;
  width: fit-content;
  background-color: #2db337;
  min-width: 100px;
  color: white;
}

.register-button:hover {

  background-color: none;
  background-image: url(svgs/cloud-button-back.svg);
  color: black;
}

.reg-top-section {
  display: flex;
  flex-flow: column;
  width:100%;
  height: fit-content;
}

#reg-up-button {
  border: none;
  cursor: pointer;
  z-index: 10;
  width: 100px;
  bottom: 0;

  position: fixed;
  right: 0;
  transition: 0.3s;
  }

#reg-down-button {
      border: none;
      background-color: transparent;
      cursor: pointer;
      padding: 0;
      display: none;
      z-index: 10;
  }

@media screen and (max-width: 699px) {

  #reg-up-button {
      margin:0px -20px -2px auto;
      height: 30px;
  }

  #reg-up-button:hover {
      margin:0px 0px -2px auto;
            opacity: 1 !important;
  }

  #reg-down-button {
      width:15%;
      margin: 10px auto 0px auto;
      height: 19px;
  }

  #reg-down-button img {
      height: 19px;
  }
}


@media screen and (min-width: 700px) {

  #reg-up-button {
      margin: 0px -100px 6px auto;
      width: 25%;
      height: 40px;
  }

  #reg-up-button:hover {
      margin: 0px -50px 5px auto;
      opacity: 1 !important;
  }

  #reg-down-button {
      width:20%;
      margin: 10px 0px 25px auto;
      height: 20px;
  }

  #reg-down-button img {
      height: 20px;
  }
}


.registration-box {
padding: 12px;
margin:auto;
margin-bottom: 100px;
display:flex;
flex-flow:row;
}


@media screen and (max-width: 699px) {

  .registration-box {
    width:82%;
  }
  .reg-img {
    display: none;
  }
}

@media screen and (min-width: 700px) {

.registration-box {
  width:75%;
}

.reg-img {
  padding-right: 10px;
  height:260px;
  width:260px;
  justify-content: center;
  display: flex;
  }
}


.reg-img img {
height:fit-content;
width:fit-content;
margin: 25px;
height:260px;
width:260px;
}

#reg-registration-texts {
display:flex;
flex-flow:column;
}

#reg-privacy-texts {
  display:none;
  flex-flow:column;
}

.reg-header {
  font-family: 'Arvo','CooperLT', serif;
  color:var(--h1);
}

.reg-subtitle {
font-family: 'Mulish', sans-serif;
color:var(--subdued-text);

}

.reg-privacy-subtitle {
  font-family: 'Mulish', sans-serif;
  color:var(--subdued-text);

  }

.reg-sub {
  font-family: 'Mulish';
  display:flex;
  color:var(--subdued-text);
}

.reg-sub a{
text-decoration: underline;
      color:var(--subdued-text);
  }

  .reg-sub a:hover{
    text-decoration: none;
          color:var(--text-color);
          font-weight: 500;
      }

#reg-sub-checker {
  font-size: small;
  padding: 7px;
  border-radius: 5px;
  margin-top: 8px;
  color: var(--text-color);
  display: none;
}

@media screen and (max-width: 699px) {

  .reg-header {
    font-size: 1.6em;
    padding:10px;
    margin-bottom: -15px;
    margin-top:-10px;
    }

    .reg-subtitle {
    font-size: 1.06em;
    padding:9px 0px 9px 9px;
    margin-bottom:4px;
    }

    .reg-privacy-subtitle {
      font-size: 0.95em;
      padding:9px 0px 9px 9px;
      margin-bottom:4px;
      }

    .reg-sub {
    font-size: 0.9em;
    padding:9px;
    }

  }


@media screen and (min-width: 700px) {

  .reg-header {
    font-size: 2em;
    padding:12px;
    margin-bottom: -15px;
    }

    .reg-subtitle {
    font-size: 1.4em;
    padding:12px 0px 12px 12px;
    margin-bottom:10px;
    }

    .reg-privacy-subtitle {
      font-size: 1.05em;
      padding:12px 0px 12px 12px;
      margin-bottom:10px;
      }

    .reg-sub {
    font-size: 1em;
    padding:10px;

    }

  }


  .earthen-icon {
    height:30px;
    width:30px;
    background: url(webp/earthen-logo-icon.webp) no-repeat;
    background-size: contain;
    padding: 10px;
  margin-right: 10px;
  margin-top: 5px;
  }

  .full-privacy-policy-link {
    font-family: 'Mulish', sans-serif;
    width:fit-content;
    font-size:0.8em;
    padding:10px 15px 10px 15px;
    text-decoration: underline;
    color: var(--text-color);
  }

  .full-privacy-policy-link:a {
    color: var(--h1);
    text-decoration: none;
  } */
