/*
@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }
 */

/* ################     BASE SETTINGS     ################ */

html {
  background: whitesmoke;
  margin: 0 auto;
  width: 95%;
}
.html-base-font body { font-family: 'Roboto', sans-serif; color: #5A361D; }
h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif !important;
  font-weight: 400 !important;
  color: #1D5A45;
}
h1 {
  font-family: 'Merriweather', serif !important;
  color: #1D325A !important;
  font-size: 1.5rem;
  text-align: center;
}
h2 { font-size: 1.3rem;}
section h2 .h2-page-link { color: #1D5A45; }
p { margin: 0; padding: 3px; }
a:link, a:visited { color: #8C2F1F}

/* ################     NAVIGATION BAR     ################ */
.navbar-brand1 img { width: 175px; vertical-align: middle !important; }
.navbar-brand1 { background-color: #8C2F1F; color: #f5f5f5; }
.navbar-brand1 a.current { background-color: #5A361D; color: #f5f5f5; font-weight: bold; }
.navbar-brand1 div ul li a { font-family: 'Roboto', sans-serif; color: #f5f5f5; }
.navbar-brand1 ul li a:hover, .navbar-brand1 ul li a:focus { background-color: #f5f5f5; color: #8C2F1F; font-weight: bold; }
.navbar .dropdown-menu { background-color: #8C2F1F; color: white; }
.navLogoBackground {
  background-color: white;
  padding: 5px 5px;
  margin: 0px -5px;
}


/* ################     CAROUSEL     ################ */
.carousel-item img {
  width: 45%;
  margin: 0 auto;
}
.carousel-indicators .active { background-color: #8C2F1F; }
.carousel-indicators li  { background-color: #8A9CBF; }
.carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238C2F1F' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); }
.carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238C2F1F' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); }

/* ################     BODY     ################ */
body {
  border: #1D5A45 2px solid;
  margin: 10px 0 10px 0;
  padding: 0;
  font-size: 16px;
  background: white;
}
.large-hidden {  display: none; }

/* ################     JUMBOTRON     ################ */
.jumbotron {
  background-color: #C4CDDF;
  padding: 32px 16px;
}

/* ################     RESUME CARDS     ################ */
.card { background-color: #f5f5f5; }
.card-title { padding-left: 10px; }


/* ################     FOOTER     ################ */
footer a, footer p { font-size: .7rem; }
footer a:link, footer a:visited { color: white; }
footer {
  background-color: #8C2F1F;
  color: white;
}

input[type=text], input[type=email] { line-height: 1.5%; }

/* ################     Media Query Changes     ################ */
@media (min-width: 576px) {
  /* ################     TEXT     ################ */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.45rem; }
  p { font-size: 1.05rem; }

  /* ################     NAVBAR     ################ */
  nav a span { display: none; }


  /* ################     CAROUSEL     ################ */
  .carousel-item img { width: 40%; }

  /* ################     BODY     ################ */

  /* ################     FOOTER     ################ */
  footer a, footer p { font-size: 1rem; }
}


@media (min-width: 768px) {
  /* ################     TEXT     ################ */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }
  p { font-size: 1.1rem; }
  .small-text { font-size: 1rem;}

  /* ################     CAROUSEL     ################ */
  .carousel-item img { width: 35%; }

  /* ################     BODY     ################ */

}


@media (min-width: 992px) {
  /* ################     TEXT     ################ */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.85rem; }
  p { font-size: 1.15rem; }

  /* ################     CAROUSEL     ################ */
  .carousel-item img { width: 28%; }
}

@media (min-width: 1200px) {
  /* ################     TEXT     ################ */
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  p { font-size: 1.2rem; }

  /* ################     CAROUSEL     ################ */
  .carousel-item img { width: 20%; }

  /* ################     BODY     ################ */
  .large-hidden { display: block; }
}

@media (min-width: 2400px) {
  /* ################     HTML     ################ */
  html { width: 75%; }
}