@charset "utf-8";

/****************************************
*  Imports
****************************************/

@import url('/clibs/fonts/font-awesome/font.css');
@import url('/clibs/fonts/secret/font.css');

@import url('/clibs/fonts/krub/font.css');
@import url('/clibs/fonts/montserrat/font.css');



/****************************************
* Body
****************************************/

body {
  background: #FFFFFF ;
}

hr {
  border: none;
  border-top: 1px solid #D6D5DD;
}


/****************************************
* Typography
****************************************/

h1 {
  color: #123466;
  font: normal bold 44px/1em 'Montserrat';
  text-transform: uppercase;
  text-shadow: none;
  letter-spacing: 1px;
}

h2 {
  color: #3D71AD;
  font: normal normal 21px/1.5em 'Krub';
  text-transform: none;
  letter-spacing: 0px;
}

h3 {
  color: #3D71AD;
  font: normal bold 22px/1em 'Montserrat';
  text-transform: uppercase;
  letter-spacing: 0px;
}

h4 {
  color: #123466;
  font: normal bold 17px/1.2em 'Krub';
  text-transform: none;
  letter-spacing: 0px;
}

h5 {
  color: #123466;
  font: normal normal 22px/1.2em 'Krub';
  text-transform: none;
  letter-spacing: 0px;
}

p,
label,
li {
  color: #000000;
  font: normal normal 14px/1.5em 'Krub';
  text-transform: none;
  letter-spacing: 0px;
}

a {
  color: #009355;
}

p > a {
  font-weight: 700;
}

a:hover {
  color: #00663b;
}

/****************************************
* Billboard
****************************************/

.billboard content {
  display: inline-block;
  padding: 2rem;
  background: rgba(255, 255, 255, .8);
}

.billboard {
  height: 500px;
  background: #FFFFFF #BILLBOARD_BACKGROUND_IMAGE#;
}

.billboard .row {
  margin: auto;
}

.billboard h1 {
  color: #123466;
  font: normal bold 54px/1em 'Montserrat';
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: none;
}

.billboard p {
  color: #000000;
  font-size: 20px;
}

.billboard a {
  color: #009355;
}

.billboard .button {
  padding: 10px 20px;
  border-radius: 0px;
  border: none;
  background: #009355;
  color: #FFFFFF;
  font: normal normal 20px/1.5em 'Krub';
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: ;
}

.billboard .button:hover {
  border: none;
  background: #00663b;
  color: #FFFFFF;
}

/****************************************
* Ribbon
****************************************/

.ribbon {
  background: #3d71ad url('/clibs/textures/absurdity.png');
  text-align: left;
}

.ribbon h1,
.ribbon h2,
.ribbon h3,
.ribbon h4,
.ribbon h5,
.ribbon h6 {
  color: #FFFFFF;
  font: normal normal 28px/1.5em 'Krub';
  text-transform: none;
  letter-spacing: 0px;
  text-shadow: ;
}

.ribbon h1:hover,
.ribbon h2:hover,
.ribbon h3:hover,
.ribbon h4:hover,
.ribbon h5:hover,
.ribbon h6:hover {
  color: #FFFFFF;
}

.ribbon p {
  color: #FFFFFF;
}

/****************************************
* Footer
****************************************/

footer {
  background: #e5e5e5 url('/clibs/textures/absurdity.png');
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #123466;
  font: normal bold 18px/1em 'Montserrat';
  text-transform: uppercase;
  letter-spacing: 0px;
  text-shadow: none;
}

footer p,
footer li {
  color: #000000;
  font-size: 14px;
}

footer a {
  color: #009355;
  font-size: 14px;
}

footer a:hover,
footer a:active {
  color: #00663b;
}

footer hr {
  border: none;
  border-top: 1px solid #555555;
}

footer .button {
  background: #009355;
  color: #FFFFFF;
}

footer .button:hover {
  background: #00663b;
  color: #FFFFFF;
}

/* compact footer */

footer.compact .button {
  margin-bottom: 1rem;
}

/****************************************
* Attribution
****************************************/

.attribution {
  background: #303030;
}

.attribution p {
  color: #FFFFFF;
  font-size: 11px;
}

/****************************************
* Buttons
****************************************/

.button,
input[type='submit'] {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background: #009355;
  color: #FFFFFF;
  font: normal normal 16px/1em 'Krub';
  text-transform: uppercase;
  text-shadow: ;
  letter-spacing: 1px;
}

.button:hover,
input[type='submit']:hover {
  border: none;
  background: #00663b;
  color: #FFFFFF;
}

.button.alt,
input[type='submit'].alt {
  padding: 10px 20px;
  background: #009355;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font: normal normal 20px/1.5em 'Krub';
  text-transform: uppercase;
  letter-spacing: 0px;
  text-shadow: none;
}

.button.alt:hover,
input[type='submit'].alt:hover {
  border: none;
  background: #00663b;
  color: #FFFFFF;
}

/****************************************
* Form
****************************************/

input,
select,
textarea {
  border: 1px solid #CCCCCC;
  border-radius: 0px;
  color: #000000;
  background-color: #FFFFFF;
  font: normal normal 14px/1.5em 'Krub';
  text-transform: none;
  letter-spacing: 0px;
}

input:focus,
select:focus,
textarea:focus {
  border: 1px solid #cfcfcf;
  background-color: #FFFFFF;
}

/****************************************
* Mobile
****************************************/

@media (max-width: 1008px) {
  /****************************************
  * Typography
  ****************************************/

  h1 {
    font-size: 25px;
  }

  h2 {
    font-size: 17px;
  }

  h3 {
    font-size: 18px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 22px;
  }

  h6 {
    font-size: #H6_MOBILE_FONT_SIZE#;
  }

  /****************************************
  * Billboard
  ****************************************/

  .billboard {
    height: calc(300px + (600 - 300) * (100vw - 500px) / (1007 - 320));
  }

  .billboard h1,
  .billboard h2,
  .billboard h3,
  .billboard h4,
  .billboard h5,
  .billboard h6 {
    font-size: 30px;
  }

  .billboard p {
    font-size: 17px;
  }

  .billboard .button,
  .billboard input[type='submit'] {
    font-size: 16px;
  }

  /****************************************
  * Ribbon
  ****************************************/

  .ribbon {
    text-align: left;
  }

  .ribbon h1,
  .ribbon h2,
  .ribbon h3,
  .ribbon h4,
  .ribbon h5,
  .ribbon h6 {
    font-size: 22px;
  }
  /****************************************
  * Footer
  ****************************************/

  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6 {
    font-size: 18px;
  }

  /****************************************
  * Buttons
  ****************************************/

  .button,
  input[type='submit'] {
    font-size: 16px;
  }

  .button.alt,
  input[type='submit'].alt {
    font-size: 16px;
  }
}