/*Variables
******************************/
/*Color Classes
******************************/
.clr1 {
  color: #babec1; }

.clr2 {
  color: #abafb2; }

.clr3 {
  color: #71797c; }

.clr4 {
  color: #4c5759; }

.clr5 {
  color: #334144; }

.clr6 {
  color: #091b1d; }

.clr7 {
  color: #e3ca8a; }

.white {
  color: #ffffff; }

.black {
  color: #000000; }

body {
  background-color: #ffffff;
  font-family: "Roboto", sans-serif;
  margin-top: 30px; }

ul {
  list-style: none;
  margin: 0;
  padding: 0; }

h1 {
  font-size: 1.5em;
  font-weight: 700; }

.fab {
  color: #000000; }
  .fab:hover {
    color: #e3ca8a; }

.grid {
  cursor: pointer; }
  .grid a, .grid a:link, .grid a:visited, .grid a:active {
    font-family: "Roboto", sans-serif;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer; }
  .grid img {
    width: 100%;
    height: auto; }

.invisible {
  display: none; }

.container {
  width: 100%;
  padding-left: 0; }

.navbar-brand {
  padding-bottom: 100px; }
  .navbar-brand img {
    width: 70%; }

.navbar-default {
  background-color: #ffffff;
  border: none;
  color: #000000; }

.navbar-right {
  margin-top: 50px;
  padding-bottom: 23px;
  border-bottom: 1px solid #000000;
  font-size: 0.9em;
  min-width: 40%; }

.navbar-collapse {
  padding-right: 0; }

.navbar li a {
  padding: 0 4px 0 0;
  font-family: "Roboto", sans-serif; }

.navbar-toggle {
  margin-right: 20px;
  background-color: #e3ca8a;
  color: #ffffff;
  border: none; }

.responsive-content {
  display: none; }

.grid, .wrapper, header, footer {
  max-width: 1004px;
  margin: 0 auto; }

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both; }

/* ---- grid-item ---- */
.grid-item {
  width: 250px;
  height: 250px;
  float: left;
  background: #ffffff;
  margin: 0 1px 1px 0; }
  .grid-item p {
    font-size: 0.9em;
    letter-spacing: 0.08em;
    font-weight: 300;
    line-height: 1.4em;
    color: #ffffff;
    position: absolute;
    left: 10%;
    top: 35%;
    right: 10%; }

.grid-item--width2 {
  width: 250px; }

.grid-item--width3 {
  width: 501px; }

.grid-item--width4 {
  width: 752px; }

.grid-item--width5 {
  width: 1000px; }

.grid-item--height2 {
  height: 501px; }

.grid-item--height3 {
  height: 250px; }

.grid-item--height4 {
  height: 500px; }

.grid-item--height5 {
  height: 750px; }

.box-clr1 {
  background-color: #babec1; }

.box-clr2 {
  background-color: #abafb2; }

.box-clr3 {
  background-color: #71797c; }

.box-clr4 {
  background-color: #4c5759; }

.box-clr5 {
  background-color: #334144; }

.box-clr6 {
  background-color: #091b1d; }

.box-clr7 {
  background-color: #e3ca8a; }

.secondary-content {
  position: absolute;
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }
  .secondary-content:hover {
    opacity: 1;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    -webkit-transition: opacity 500ms ease-in-out; }

.primary-content:hover {
  opacity: 1; }

.content {
  width: 100%;
  clear: both;
  height: 250px; }
  .content p, .content ul {
    font-size: 0.89em;
    line-height: 1.25em;
    margin-bottom: 30px; }
  .content ul {
    list-style: none;
    margin: 0 0 30px 0;
    padding: 0 0 0 0.8em;
    text-indent: -0.8em; }
  .content li:before {
    content: "> "; }

.content-block {
  margin-top: 60px;
  margin-bottom: -100px; }

.img-top {
  min-width: 100%;
  min-height: auto;
  margin-bottom: 50px; }

.text {
  width: 50%;
  float: left; }

.text-full-width {
  width: 100%; }

.font-weight-normal {
  font-weight: normal; }

.clear {
  clear: both; }

.pic img {
  max-width: 100%;
  float: right;
  margin-bottom: 5px; }

.italic {
  font-style: italic; }

.uppercase {
  text-transform: uppercase !important; }

.align-right {
  text-align: right; }

.bold {
  font-weight: 700; }

.orange {
  color: #e3ca8a; }

.space-top {
  margin-top: 100px; }

.small {
  font-size: 0.8em; }

.map {
  height: 300px;
  margin-top: 45px;
  padding-bottom: 5px; }

.active {
  color: #e3ca8a !important; }

iframe {
  width: 100%;
  height: 100%;
  border: none; }

footer {
  width: 100%;
  height: 50px;
  margin-top: 10px; }
  footer a {
    color: #000000;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    font-size: 0.9em; }
    footer a:hover {
      text-decoration: none;
      color: #e3ca8a; }

.footer-pages {
  border-top: 1px solid #000000;
  padding-top: 10px; }

/*************************************
Media Queries
**************************************/
@media screen and (max-width: 1024px) {
  .grid {
    display: none; }
  .grid {
    width: 70%;
    margin: 180px auto 0 auto; }
  .navbar-brand img {
    width: 90%; }
  .responsive-content {
    display: block; }
    .responsive-content img {
      width: 100%;
      height: auto; }
  .wrapper {
    padding: 10px; }
  .container > .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0;
    margin-right: 0; }
    .container > .container-fluid > .navbar-header ul li, .container > .navbar-collapse ul li, .container-fluid > .navbar-collapse ul li {
      padding-bottom: 20px; }
  h1 {
    font-size: 1.8em; }
  .text {
    width: 100%; }
    .text p, .text ul {
      font-size: 1.2em;
      line-height: 1.4em; }
    .text li {
      margin-bottom: 5px; }
  .pic img {
    width: 100%;
    height: auto;
    margin-bottom: 20px; }
  .map {
    padding: 0;
    margin-bottom: 30px; }
  .img-top {
    width: 100%;
    height: auto; }
  .space-top {
    margin-top: 0; }
  header {
    position: fixed;
    width: 100%;
    top: 0; }
  .content, .responsive-content {
    margin-top: 130px; }
  .links {
    float: left;
    width: 50%; } }