html *
{
   font-family: 'Lato', sans-serif !important;
   text-transform: none !important;
}
image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
/* COLORS */
  .white {
    color: white;
  }
  .salmon-bg{
    background-color: #af3a3a;
    color: white;
  }
  .blue-bg{
    background-color: #9bdaff;
    color: white;
  }
  .brown-bg{
    background-color: #f2c39d;
    color: white;
  }
  .white-bg{
    background-color: white;
    color: #af3a3a;
  }

  .headshot-div {
    display: block;
    margin: auto;
  }
  .headshot {
    width: 200px;
    height: 200px;
  }


    .salmon-bg a {
      color: white;
      text-decoration: underline;
    }
    .salmon-bg a:hover,
    .salmon-bg a:active {
      color: #CC0000;
    }


  .light-bg a {
    color: white;
    text-decoration: underline;
  }
  .light-bg a:visited,
  .light-bg a:link {
    color: white;
    text-decoration: underline;
  }
  .light-bg a:hover,
  .light-bg a:active {
    color: #CC0000 !important;
  }

  .white-bg {
    background-color: white;
    color: #CC0000;
  }

  .white-bg a:visited,
  .white-bg a:link {
    text-decoration: underline;
    color: inherit;
  }
  .white-bg a:hover,
  .white-bg a:active {
    color: #FF6A6A !important;
    text-decoration: none;
  }
  .light {
    color: #FF8c8c;
  }

  .dark{
    color: #CC0000;
  }

  /* http://stackoverflow.com/a/23935891 */
  .pickgradient{
    position:relative;
    display:inline-block;
  }
  .pickgradient:after {
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    display:inline-block;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a5000000',GradientType=0 ); /* IE6-9 */
  }

/* Buttons */
  .donationbutton {
    border: 1px solid #FFFFFF;
    color: #FFAAAA;
    background-color: transparent;
    text-decoration: none;
    border-radius: 0;
    font-size: 24px;
    padding-top: 40px;
    outline: none;
    max-width:50%;
    max-height:50%;
  }

  .button-spacer {
    margin-left: 70px;
  }


  a.btn.btn-default {
    background-color: transparent;
    text-decoration: none;
    border-radius: 0;
    font-size: 24px;
  }

  a.btn.btn-default:hover {
    border-radius: 25px;
  }

  a.btn.btn-default:active:hover {
    background-color: transparent;
    text-decoration: none;
    border-radius: 0;
    font-size: 24px;
    color: inherit;
    border-color: inherit;
  }

  a.btnonlight{
    border: 1px solid white !important;
    color: white !important;
  }

  a.btnonlight:hover{
    border: 1px solid #FFFFFF !important;
    color: #CC0000 !important;
    background-color: white;
  }
  a.btnondark{
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
  }
  .btnondark.selected{
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
  }
  a.btnondark:hover{
    border: 1px solid #FFFFFF;
    color: #CC0000;
    background-color: #FFFFFF;
  }

/* Logo */
  img.empa-logo-nav {
      height: 40px;
      margin-top: -7px;
  }

  img.empa-logo {
    padding-top: 95px;
    width: 480px;
    padding-bottom: 50px;
  }

  h2.landing-sub {
    font-size: 36px !important;
  }

/* Navbar */
  nav.navbar.navbar-custom.top-nav-collapse {
    background-color: #af3a3a;

  }

  nav.navbar.navbar-custom.top-nav-collapse a:hover,
  nav.navbar.navbar-custom.top-nav-collapse a:active {
    color: #CC0000 !important;
  }

  .navbar-nav>li>a {
    padding-top: 21px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 18px;
  }

  nav.navbar.navbar-custom {
    background-color: transparent;
  }

  nav.navbar-custom.top-nav-collapse  div.container,
  nav.navbar-custom.top-nav-collapse  div.container {
    background-color: transparent;
  }

  .navbar-icon{
    font-size: 24px;
  }
/* Sections */

  section.container {
    min-height: 100%;
    margin: 0;
    width: 100% !important;
    padding-top: 10%;
    padding-bottom: 16%;
    padding-left: 0px;  /*Overriding Bootstrap*/
    padding-right: 0px; /*Overriding Bootstrap*/

    display: flex;
    justify-content: center;
    flex-direction: column;
  }


  span.title-text {
    font-size: 55px;
    display: block;
    padding-bottom: 75px;
    margin-top: -35px;
    /*font-family: 'Bebas Neue' !important;*/
  }

/* Intro */

  header {
    text-align: center;
    min-height: 100%;
    margin: 0;
    width: 100% !important;
    padding-top: 10%;
    padding-bottom: 16%;

    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  p.mobile-p {
    font-size: 32px !important;
  }
  p.mobile-legal {
    font-size: 32px;
  }
  p.mobile-contact {
    font-size: 24px;
  }
  .visible-phone {
    display: none;
  }

  @media (max-width: 1199px) {

  }
  @media (max-width: 767px) {
    .hidden-phone {
      display: none;
    }
    .visible-phone {
      display: inline;
    }

    h2 {
      font-size: 28px;
    }
    img.empa-logo {
      width: 300px !important;
      margin-top: 150px;
      margin-bottom: 30px;
    }
    .navbar-nav>li>a {
      font-size: 23px;
    }
    img.empa-logo-nav {
        height: 40px;
        margin-top: -1px;
        padding-left: 20px;
    }
    .title-text {
      padding-top: 85px;
      padding-bottom: 45px !important;
    }
    .guide-description {
      font-size: 26px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 25px !important;
      overflow: scroll;
    }
    .mobile-p {
      font-size: 38px !important;
      padding-left: 18px !important;
    }
    .headshot-div {
      margin-top: -20px;
      padding-bottom: 30px;
    }
    .mobile-headshot {
      width: 200px !important;
      height: 200px !important;
    }
    p.mobile-legal {
      font-size: 34px !important;
    }
    p.mobile-contact {
      font-size: 24px !important;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 20px;
    }
  }

  .mobile-headshot {
    width:130px !important;
    height:130px !important;
    margin:auto;
    display:block;
  }

  .landing-phone{
    text-decoration: none !important;
  }

  .landing-phone:hover{
    text-decoration: underline !important;
    color: white !important;
  }

  .guide-description {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 80px;
    font-size: 18px;
  }

  .contact-text a {
    font-size: 28px;
    text-decoration: none;
  }

/* team Section*/
  .team {
      display: table;
      width: 100%;
      height: auto;
      padding: 100px 0;
      text-align: center;
      color: #000;
      /*background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;*/
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
  }

  .team .team-body {
      display: table-cell;
      vertical-align: middle;
      padding-right: 80px;
      padding-left: 80px;
  }

  .team .team-body .team-heading {
      font-size: 24px;
      color:white;
  }

  .team .team-body .team-text {
      font-size: 20px;
  }

  @media(min-width:768px) {
      .team {
          height: 100%;
          padding: 100px 0;
      }

      .team .team-body .team-text {
          font-size: 26px;
      }
  }

  div.team-member {
      padding-top: 50px;
  }

  img.team-pic {
      height: 180px;
  }

  .light-bg span.person-name,
  .light-bg a.person-name{
    color:white;
  }

  .white-bg span.person-name,
  .white-bg a.person-name{
    color: #CC0000;
  }

  .light-bg span.person-title,
  .light-bg a.person-title{
    color:white;
  }

  .white-bg span.person-title,
  .white-bg a.person-title{
    color: #FF6A6A;
  }

  span.person-name {
      font-size: 20px;
  }

  a.person-name {
      font-size: 20px;
  }

  span.person-name {
      font-size: 20px;
  }



  span.person-title {
      font-size: 14px;
      font-style: italic;
      color:white;
  }

  div.person-blurb {
      font-size: 14px;
      text-align: center;
      visibility: hidden;
      opacity: 0;
      top: 15px;
      bottom: -15px;
      left: 0px;
      right: 0px;
      padding: 30px 20px 0 20px;
      background-color: #CC0000;
      position: absolute;
      border-radius: 30px;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
  }

  div.team-member:hover div.person-blurb{
      visibility: visible;
      opacity: 0.9;
      color: white;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
  }

/* Chapters Section */

  .school-img:hover,
  .chapter-description:hover{
    cursor: pointer;
  }

  .chapter-description{
    position: absolute;
    pointer-events: none;
    top: 15px;
    font-size: 3em;
    font-weight: 500;
    text-align: center;
    width: 100%;
    /*font-family: 'Bebas Neue' !important;*/
    /*padding-left: 0.5em;
    padding-right: 0.5em;*/
    /*background-color: #FF6A6A;*/
    /*opacity: 0.9;*/
    border-radius: 5pt;
  }

  a.chapter-link {
    color: white !important;
  }
  a.chapter-link:hover {
    color: white !important;
  }
  .chapter{
    width: 300px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
  }

  .pickgradient:hover{
    outline:groove;
    color: #d10022;
  }

  .supporters-span-title{
    width: 100%;
    text-align: center;
  }

/* USER'S GUIDE & FAQ Sections */
  /*next few lines are from https://www.bootply.com/JAugustoGuimaraes/09AXghUDYG"*/
        /* CSS used here will be applied after bootstrap.css */
        .jumbotron{width:80%;margin-left:10%;max-width: 1200px;margin-left:auto; margin-right:auto;}
        .img-center {margin:0 auto;}
        .dl-horizontal dt{white-space: normal;}
        .omacenter{margin-left:auto; margin-right:auto;}
        .titre{color:#ff6a6a;}
        .entete{background-color: #FF6A6A;width:80%;margin-left:10%;}

  section span.guide-header-num {
      font-size: 24px;
      font-weight: bold;
      color:#ff6a6a
  }

  .white-bg .guide-header{
    color:#ff6a6a;
  }

  .light-bg .guide-header{
    color:white;
  }

  section span.guide-header {
        display: block !important;
    margin: auto !important;

    text-align: center !important;
      font-size: 18px;
      font-weight: bold;
      color:#ffffff;
  }
  section span.faq-question {
      font-size: 18px;
      font-weight: bold;
      color:#ff6a6a;
  }

  .guide-header {
    display: block;
  }

  .guide-header-pic{
    width: 300px;
    height: 100px;
  }

  .circled {
    display: block !important;
    margin: auto !important;

    text-align: center !important;
    display: inline-block;
    margin:0px;
    margin-right: 0px;
    font-size: 25px;
    display: block;
    height: 46px;
    width: 46px;
    line-height: 46px;

    -moz-border-radius: 50%; /* or 50% */
    border-radius: 50%; /* or 50% */

    background-color: white;
    color: white;
    text-align: center;
  }

  div.faq-item,
  div.guide-item {
    padding-top: 50px;
    text-align: left;
  }

/* Terms */
  .terms-body a {
    color: black;
  }

  .terms-body nav.navbar {
    background-color: #CC0000;
  }
  span.steptitle {
    color:#FFFFFF !important;
    font-size: 18px;
    font-weight: bold;
  }

  .extra-links {
    color: #b7b7b7 !important;
  }

  .extra-links a {
    color: #b7b7b7 !important;
  }

:root {
  --subscribe-border: #CC0000;
  --subscribe-highlight: white;
  --subscribe-dark: #CC0000;
}

#mc_embed_signup.validate {
  padding: 0 0 0 0;
}

#mc_embed_signup {
    background: white;
    clear: left;
    font-size: 14px;
    width: 100%;
}

#mc_embed_signup form {
    text-align: center;
    padding: 10px 0 10px 0;
}

div.mc-field-group {
  padding-bottom: 10px;
}

#mc_embed_signup input.email {
  font-size: 18px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #cc0000;
  background-color: white;
  box-sizing: border-box;
  height: 50px;
  padding: 0px 0.4em;
  display: inline-block;
  margin: 0;
  width: 80%;
  vertical-align: top;
  box-shadow: 0;
  outline: none;
  border: 2px solid var(--subscribe-border);
  transition: all 0.23s ease-in-out 0s;
}

#mc_embed_signup input.email:focus {
  border: 2px solid #cc0000;
  font-size: 24px;
}

#mc_embed_signup input.email::placeholder {
  color: var(--subscribe-dark);
}

#mc_embed_signup .button {
  font-size: 20px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
  letter-spacing: .03em;
  color: var(--subscribe-highlight);
  background-color: var(--subscribe-dark);
  box-sizing: border-box;
  height: 45px;
  line-height: 32px;
  padding: 0 18px;
  display: inline-block;
  margin: 0;
  transition: all 0.23s ease-in-out 0s;
  border: 0;
  outline: none;
}

#mc_embed_signup .button:hover {
  background-color: #ff6a6a;
  color: white;
  cursor: pointer;
  font-size: 24px;
  height: 50px;
}


.subscribe-thanks-wrapper {
  position:fixed;
  padding:0;
  margin:0 auto;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.subscribe-thanks-wrapper a {
  color: #cc0000;
}

.subscribe-thanks-big {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  padding-top: 200px;
  font-size: 36px;
}

.subscribe-thanks-med {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  font-size: 28px;
}

.subscribe-thanks-small {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  font-size: 22px;
}

.subscribe-thanks-tiny {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 150px;
  font-size: 16px;
}