/*TYPOGRAPHY ===================================*/

@import url("https://use.typekit.net/axw8dph.css");

@font-face {
  font-family: 'Tolkien';
  src: url('cbbookkeepingfonts/tolkien.ttf') format('truetype');
}

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

h1 {
  font-family: "mr-eaves-xl-sans";
  font-weight: 100;
}


/*LAYOUT ===================================*/

body {
  margin: 0 0 2% 0;
}

.wrapper {
  margin: 0 auto;
  max-width: none;
}

header {
  background: url("images/homeland.jpeg") no-repeat;
  background-size: cover;
  color: white;
  display: block;
  margin-bottom: 2rem;
}

header img {
  display: block;
  padding-left: 1rem;
  padding-top: 1rem;
  width: 27%;
}

h1 {
  display: block;
  margin-left: 30%;
  padding-bottom: .5rem;
  padding-top: .5rem;
  text-align: center;
  text-shadow: 3px;
  width: 40%;
}

section {
  margin: auto;
  padding-bottom: 9%;
  width: 75%;
}

div {
  display: block;
}

.navimage:hover {
  -webkit-box-shadow:inset 0px 0px 0px 10px #c0eaf9;
  -moz-box-shadow:inset 0px 0px 0px 10px #c0eaf9;
  box-shadow:inset 0px 0px 0px 10px #c0eaf9;
}

.navimage {
  float: left;
  margin: 1%;
  padding: 6%;
  position: relative;
  width: 36%;
}

.center {
  color: white;
  position: absolute;
  top: 50%;
  font-family: "mrs-eaves-xl-serif", "Georgia", serif;
  font-weight: 800;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: black;
  clear: both;
  color: white;
  font-family: "Tolkien", georgia, serif;
  padding-bottom: 5.5rem;
  padding-top: .75rem;
}

.footerimgcb {
  float:left;
  height: auto;
  margin-bottom: 2px;
  margin-left: 26%;
  margin-top: 2px;
  padding-bottom: 1rem;
  width: 3%;
  min-width: 21px;
}

small p {
  color: white;
  float: left;
  font-family: "Tolkien", georgia, serif;
  font-size: smaller;
  line-height: 1rem;
  margin-left: 1%;
  padding-right: 1%;
  width: 20%;
}

.footerimgjc {
  float: left;
  margin-bottom: 2px;
  margin-left: 1%;
  margin-top: 2px;
  padding-bottom: 1rem;
  width: 2%;
  min-width: 21px;
}

.afooter {
  color: #fff;
}

/* MEDIA SETTINGS */

@media screen and (min-width: 320px) and (max-width: 465px) {

    h1 {
    font-size: 1.5rem;
    line-height: 1.25rem;
  }

  .center {
    font-size: 1rem;
    left: 2.5rem;
  }

  .footerimgcb {
    margin-left: 2%;
  }

  small p {
    width: 35%;
  }

}

@media screen and (min-width: 466px) and (max-width: 600px) {

    h1 {
    font-size: 1.75rem;
    line-height: 1.5rem;
  }

  .center {
    font-size: 1.5rem;
    left: 3rem;
  }

}
/* end MAX 600px */


@media screen and (min-width: 601px) and (max-width: 749px){

    h1 {
    font-size: 1.95rem;
    line-height: 1.7rem;
  }

  .center {
    font-size: 1.75rem;
    left: 3.5rem;
  }

  }
/* end min 601px */


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

  h1 {
    font-size: 2.25rem;
  }

  .center {
    font-size: 2rem;
    left: 4rem;
  }

  }
/* end min 750px */


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

  h1 {
    font-size: 2.75rem;
  }

  section {
    margin: auto;
    padding-bottom: 9%;
    width: 33%;
  }

  .navimage {
    float: left;
    margin: 1%;
    padding: 3%;
    position: relative;
    width: 42%;
  }

  .center {
    font-size: 1.5rem;
    left: 5.5rem;
  }

}
/* end min 1200px */


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

  h1 {
    font-size: 2.75rem;
  }

  section {
    margin: auto;
    padding-bottom: 9%;
    width: 33%;
  }

  .navimage {
    float: left;
    margin: 1%;
    padding: 3%;
    position: relative;
    width: 42%;
  }

  .center {
    font-size: 2rem;
    left: 5.5rem;
  }

}
/* end min 1400px */



.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}