@import url('https://www.fontbros.com/library/styles/webfont-20770.css');
@import url('https://www.fontbros.com/library/styles/webfont-20768.css');

:root {
  --primary-color:#000000;
  --primary-color-rgb:0, 0, 0;
  --secondary-color:#8a3b3c;
  --secondary-color-rgb:175, 69, 0;
  --tertiary-color:#bb9357;
  --white:#FFFFFF;
  --black:#000000;
}

body,
html {
  background:var(--white);
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

div.logo svg {
  width:200px;
}

header {
  padding:10px 0 10px 0;
  background:var(--primary-color);
}

header nav {
  padding:10px 10px 10px 10px;
  margin-top:25px;
}

main {
  padding:45px 0 45px 0;
}

section.intro {
  background:var(--secondary-color);
}

footer {
  background:var(--secondary-color);
  padding:15px 0 15px 0;
}

img.img-fluid {
  margin-bottom:20px;
}

/********************
  Text Styles
********************/

p,
li {
  font:18px/1.5em Arial, Helvetica, sans-serif;
  color:var(--black);
  margin:0 0 1em 0;
}

li {
  margin:0 0 0.33em 0;
}

header > table p + p {
  margin-top:48px;
}

h1,
h2 {
  font:50px/1.1em 'webfont-20768', Arial, Helvetica, sans-serif;
  color:var(--tertiary-color);
  margin:0 0 0.5em 0;
}

section.intro h1 {
  color:var(--white);
}

section.intro h1.sm {
  font-size:50px;
}

h3 {
  font:36px/1.3em 'webfont-20768', Arial, Helvetica, sans-serif;
  color:var(--secondary-color);
  margin:0 0 0.5em 0;
}

h4 {
  font:26px/1.3em 'webfont-20770', Arial, Helvetica, sans-serif;
  color:var(--secondary-color);
  margin:0 0 0.5em 0;
}

/********************
  Link Styles
********************/

a,
a:hover {
  color:var(--secondary-color);
  text-decoration:none !important;
  transition:all 0.5s;
}

a:hover {
  color:var(--tertiary-color);
}

footer p,
footer p a {
  color:var(--white);
  transition:all 0.5s;
}

nav a {
  display:inline;
  font:bold 24px/1em 'webfont-20770', Arial, Helvetica, sans-serif;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:1px;
}

nav a:hover {
  color:var(--secondary-color);
}

nav a.on {
  color:var(--tertiary-color);
}

nav a + a {
  margin-left:40px;
}

a.btn {
  font-size:20px;
  font-family:'webfont-20770', Arial, Helvetica, sans-serif;
  background-color:var(--tertiary-color);
  color:var(--white) !important;
  letter-spacing:1px;
}

a.btn.lg {
  padding:15px 30px;
}

a.btn:hover {
  background-color:var(--secondary-color);
}

a.btn + a.btn {
  margin-left:20px;
}

a.btn.lg + a.btn {
  background-color:var(--secondary-color);
}

/********************
  Bootstrap Override Styles
********************/

.row {
  margin-left:-30px;
  margin-right:-30px;
}

.container, .col, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
  padding-left:30px;
  padding-right:30px;
}

.row.thin-padding {
  margin-left:-15px;
  margin-right:-15px;
}

.row.thin-padding .col, .row.thin-padding .col-lg-1, .row.thin-padding .col-lg-10, .row.thin-padding .col-lg-11, .row.thin-padding .col-lg-12, .row.thin-padding .col-lg-2, .row.thin-padding .col-lg-3, .row.thin-padding .col-lg-4, .row.thin-padding .col-lg-5, .row.thin-padding .col-lg-6, .row.thin-padding .col-lg-7, .row.thin-padding .col-lg-8, .row.thin-padding .col-lg-9, .row.thin-padding .col-md-1, .row.thin-padding .col-md-10, .row.thin-padding .col-md-11, .row.thin-padding .col-md-12, .row.thin-padding .col-md-2, .row.thin-padding .col-md-3, .row.thin-padding .col-md-4, .row.thin-padding .col-md-5, .row.thin-padding .col-md-6, .row.thin-padding .col-md-7, .row.thin-padding .col-md-8, .row.thin-padding .col-md-9, .row.thin-padding .col-sm-1, .row.thin-padding .col-sm-10, .row.thin-padding .col-sm-11, .row.thin-padding .col-sm-12, .row.thin-padding .col-sm-2, .row.thin-padding .col-sm-3, .row.thin-padding .col-sm-4, .row.thin-padding .col-sm-5, .row.thin-padding .col-sm-6, .row.thin-padding .col-sm-7, .row.thin-padding .col-sm-8, .row.thin-padding .col-sm-9, .row.thin-padding .col-1, .row.thin-padding .col-10, .row.thin-padding .col-11, .row.thin-padding .col-12, .row.thin-padding .col-2, .row.thin-padding .col-3, .row.thin-padding .col-4, .row.thin-padding .col-5, .row.thin-padding .col-6, .row.thin-padding .col-7, .row.thin-padding .col-8, .row.thin-padding .col-9 {
  padding-left:15px;
  padding-right:15px;
}

.row.g-0,
.row.g-0 > div {
  margin:0;
  padding:0;
}

/********************
  Responsive Styles
********************/

@media (max-width:576px) {
  div.logo {
    padding-top:15px;
  }

  div.logo a {
    font-size:50px;
  }

  img.img-fluid {
    margin-bottom:0;
  }

  section.intro h1 {
    font-size:40px;
  }

  header nav {
    padding:12px 0 10px 0;
  }

  header nav a {
    font-size:26px;
  }

  header nav a + a {
    margin-left:24px;
  }

  main {
    padding:30px 0 30px 0;
  }

  h1 {
    font-size:52px;
  }

  h2 {
    font-size:48px;
  }

  h3 {
    font-size:32px;
  }

  div.character-map span {
    font-size:40px !important;
    min-height:60px !important;
    min-width:60px !important;
  }
}

@media (max-width:768px) {}

@media (max-width:992px) {}

@media (min-width:1200px) {
  div.container {
    max-width:1400px;
  }
}
