/* Import Google Fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');



/* =========================

   Base Typography & Colors

   ========================= */

body {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-size: 16px;

  line-height: 1.6;

  color: #333;

  background-color: #f4efe6;

  margin: 0;

  padding: 0;

}



/* =========================

   Headings

   ========================= */

h1, h2, h3, h4, h5, h6 {

  font-family: Georgia, "Times New Roman", Times, serif;

  font-weight: normal;

  line-height: 1.3;

  color: #2c3e50;

  margin-top: 1.5em;

  margin-bottom: 0.5em;

}

h1 { font-size: 2.2rem; margin-top: 0; }

h2 { font-size: 1.8rem; }

h3 { font-size: 1.4rem; }



/* =========================

   Paragraphs & Links

   ========================= */

p { margin-bottom: 1em; }

a {

  color: #5a7d7c;

  text-decoration: none;

  transition: color 0.3s ease;

}

a:hover {

  color: #a65e68;

  text-decoration: underline;

}



/* =========================

   Buttons

   ========================= */

button, .btn {

  background-color: #5a7d7c;

  color: #fff;

  border: none;

  padding: 0.6em 1.2em;

  font-family: inherit;

  font-size: 1rem;

  border-radius: 4px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}

button:hover, .btn:hover {

  background-color: #2c3e50;

}



/* =========================

   Utility Classes

   ========================= */

.boldItalic { font-style: italic; font-weight: bold; }



.header { margin-top: 130px; }



/* =========================

   Navbar

   ========================= */

.navbar {

  background-color: #8F9779;

  padding: 20px 15px;

  transition: all 0.5s;

  text-decoration: none;

}

.contactLink {

  color: white;

  text-decoration: none;

}

a:hover.contactLink { color: black; text-decoration: none; }

.navbar-fixed-top { border-width: 0; }

.navbar-inverse .navbar-nav > .active > a,

.navbar-inverse .navbar-nav > .active > a:hover,

.navbar-inverse .navbar-nav > .active > a:focus {

  background-color: #8F9779;

}

.navbar-inverse .navbar-nav > li > a,

.navbar-inverse .navbar-nav > li > a:focus {

  color: black;

}

.navbar-inverse .navbar-brand {

  color: black;

  background-color: #8F9779;

}

.navbar-inverse .navbar-brand:focus { color: black; }

.cbp-af-header-shrink {

  padding-top: 5px;

  padding-bottom: 5px;

  opacity: 0.8;

}



/* =========================

   Text Banner

   ========================= */

.text-banner {

  font-family: DidotLTPro-Bold, Georgia, serif;

}

.text-banner h1 {

  font-size: 44px;

  text-align: center;

}

.text-banner h2 {

  font-size: 24px;

  text-align: center;

  font-weight: bolder;

}

.text-banner p {

  font-size: 18px;

  text-align: left;

}



/* =========================

   Buttons (Down/Up)

   ========================= */

.down-button .btn,

.up-button .btn {

  position: absolute;

  bottom: 50px;

  width: 100%;

  text-align: center;

  background-color: transparent;

  color: white;

  font-size: 3rem;

}



/* =========================

   Footer

   ========================= */

.footer {

  font-size: 20px;

  text-align: center;

}



/* =========================

   Fill Screen

   ========================= */

.fill-screen {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  margin-left: 40px;

}



/* =========================

   Linebreak

   ========================= */

.linebreak {

  padding: 10px;

  border-bottom: 1px solid grey;

}



/* =========================

   Info Button

   ========================= */

.btn-info,

.btn-info:visited,

.btn-info:active,

.btn-info.active,

.btn-info:focus,

.open > .dropdown-toggle.btn-info {

  color: #fff;

  background-color: #8F9779;

  border-color: black;

}

.btn-info:hover {

  color: #fff;

  background-color: #5e9661;

  border-color: black;

}



/* =========================

   Scroll to Top

   ========================= */

#scroll {

  position: fixed;

  right: 10px;

  bottom: 50%;

  cursor: pointer;

  width: 50px;

  height: 50px;

  background-color: #8F9779;

  text-indent: -9999px;

  display: none;

  border-radius: 60px;

  z-index: 1;

  opacity: 0.7;

}

#scroll span {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -8px;

  margin-top: -12px;

  height: 0;

  width: 0;

  border: 8px solid transparent;

  border-bottom-color: #ffffff;

}

#scroll:hover {

  background-color: #e74c3c;

  opacity: 1;

}



/* =========================

   Social Icons

   ========================= */

.fa {

  padding: 20px;

  font-size: 30px;

  width: 70px;

  text-align: center;

  text-decoration: none;

}

.fa:hover { opacity: 0.7; }



.social-icons i {

  font-size: 1.5rem;

  width: 3rem;

  height: 3rem;

  line-height: 3rem;

  text-align: center;

  border-radius: 50%;

  background-color: #5a7d7c;

  color: #fff;

  margin: 0 8px;

  transition: background 0.3s ease;

}

.social-icons i:hover {

  background-color: #a65e68;

}



/* =========================

   Lazy Loading Images

   ========================= */

.lazy { opacity: 0; transition: opacity 0.6s ease-in; }

.lazy.loaded { opacity: 1; }