/*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 */
}

blockquote {
  margin-left: 30%;
  font-family: "mrs-eaves-xl-serif", "Georgia", serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
  padding-top: .5rem;
}

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

h2 {
  font-family: "mr-eaves-xl-sans", "Helvetica", sans-serif;
  font-size: 2rem;
}

h3 {
  font-family: "mr-eaves-xl-sans", "Arial Black", sans-serif;
  font-weight: 700;
}

h4 {
  font-family: "mrs-eaves-xl-serif", "Georgia", serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0;
}

p {
  color: Black;
  font-family: "mrs-eaves-xl-serif", "Georgia", serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
}


/*MENUS AND LINKS ===================================*/

nav ul {
  clear: both;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

nav li {
  box-sizing: border-box;
  background: linear-gradient(white, #c0eaf9);
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
  border-top-style: solid;
  border-color: white;
  float: left;
  margin: 1%;
  width: 23%;
}

nav a {
  color: black;
  display: block;
  font-family: "mr-eaves-xl-sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

nav a:hover {
  background: linear-gradient(white, #ddd);
  border-radius: .5rem;
  border-color: #ddd;
}


.contact {
  background: papayawhip;
  border-left-style: solid;
  border-right-style: solid;
  border-top-style: solid;
  border-bottom: none;
  border-radius: .5rem;
  border-color: white;
}

.currentnav {
  border-left-style: solid;
  border-right-style: solid;
  border-top-style: solid;
  border-bottom: none;
  border-radius: .5rem;
  border-color: #c0eaf9;
}




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

body {
  margin: 0 2% 2%;
}

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

header img {
  float: left;
  margin: 0;
  min-width: 275px;
  padding-left: 1rem;
  padding-top: 1rem;
  width: 36%;
}

h1 {
  margin-bottom: 0;
  margin-left: 42%;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 9rem;
}

h2 {
  clear: none;
  font-weight: 400;
  margin-left: 26%;
  margin-top: 1%;
  width: 75%;
}

mark {
  background-color: white;
  color: #c0eaf9;
  font-family: "mr-eaves-xl-sans", "Helvetica", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  text-decoration-style: double;
  text-shadow: 1.5px 1.5px #2e4f5b;
}

.likeh2 {
  font-family: "mr-eaves-xl-sans", "Helvetica", sans-serif;
  font-size: 1.5rem;
}

.image-left {
  float: left;
  margin: 1%;
  margin-right: 2%;
  max-width: 300px;
  width: 23%;
}

.image-right {
  float: right;
  margin: 1%;
  margin-right: 0;
  max-width: 300px;
  width: 23%;
}

h3 {
  background: linear-gradient(white, #c0eaf9);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-sizing: border-box;
  clear: both;
  height: auto;
  line-height: .85;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  text-align: center;
  width: 75%;
}

section ul {
  list-style-type: none;
}

section li {
  font-family: "mrs-eaves-xl-serif", "Georgia", serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-transform: none;  
}

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.5%;
  min-width: 21px;
}

address {
  font-family: "mrs-eaves-xl-serif", "Georgia", serif;
}

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.5%;
  min-width: 21px;
}

.afooter {
  color: #fff;
}

/* MEDIA SETTINGS */

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

  article {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  article p {
    clear: none;
    margin-left: 1%;
    width: auto;
  }

  h1 {
    clear: both;
    font-size: 1.5rem;
    line-height: 1.25rem;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .image-left {
    display: block;
    width: 42%;
  }

  .image-right {
    width: 42%;
  }

  h2 {
    font-size: 2rem;
    margin-left: 5%;
    padding-top: .75rem;
    width: 46%;
  }

  .h2mobile {
    font-size: 1.9rem;
    margin-left: 45%;
    padding-top: 0;
    width: 54%;
  }

  address {
    clear: both;
    padding-top: 2%;
    text-align: center;
  }

  h3 {
    clear: both;
    font-size: 1rem;
    margin-bottom: 9%;
    margin-top: 3%;
    text-align: center;
    width: 98%;
  }

  nav li {
    float: none;
    width: 90%;
    margin-left: 5%;
    }

  p {
    font-size: 1rem;
  }

  section li {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .values p {
    clear: both;
    font-size: .75rem;
    font-style: italic;
    line-height: 2rem;
    margin-left: 2%;
    width: 100%;
  }

  .footerimgcb {
    margin-left: 2%;
  }

  small p {
    width: 35%;
  }

}

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

  .image-left {
    margin-left: 6%;
  }

  article {
    width: 90%;
  }

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

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    clear: both;
    font-size: 1rem;
    margin-top: 5%;
    width: 75%;
  }

  p {
    font-size: 1rem;
  }

  section li {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .one p {
    clear: none;
    margin-left: 30%;
    width: 70%;
  }

  .two {
    clear: none;
    margin-left: 30%;
    width: 70%;
  }

  .values p {
    clear: none;
    font-size: .75rem;
    font-style: italic;
    line-height: 2rem;
    margin-left: 26%;
    width: 48%;
  }

  nav li {
    float: none;
    width: 90%;
    margin-left: 5%;
    }

}
/* end MAX 600px */


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

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

  h2 {
    font-size: 1.5rem;
    width: 60%;
  }

  h3 {
      font-size: 1rem;
      text-transform: none;
  }

  p {
    font-size: 1rem;
  }

  section ul {
    margin-left: 32%;
  }

  section li {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  address {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }

  .one p {
    clear: none;
    margin-left: 26%;
    width: 53%;
  }

  .two {
    clear: none;
    margin-left: 26%;
    width: 50%;
  }

  .values p {
    clear: none;
    font-size: .75rem;
    font-style: italic;
    line-height: 2rem;
    margin-left: 26%;
    width: 48%;
  }


}
/* end min 601px */


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

  h1 {
    font-size: 2.25rem;
    line-height: 2rem;
    padding-top: 4rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  address {
    margin-left: 26%;
  }

  h3 {
      font-size: 1.25rem;
  }

}
/* end min 750px */


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

  h1 {
    font-size: 2.75rem;
    line-height: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    text-transform: uppercase;
  }

  p {
    font-size: 1.25rem;
  }

  section li {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

}
/* end min 900px */


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

  h3 {
    font-size: 1.25rem;
    padding-left: 5%;
    padding-right: 5%;
  }


}
/* end min 1200px */


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

.clearfix:after {
    clear: both;
}