:root {
    --main-color: #000000;
    --secondary-color: #2B6286;
    --tertiary-color: #48A2C7;
    --fouth-color: #787878;
    --main-background-color: #FFFFFF;
  }

body {
  padding-top: 80px;
  font-family: "Raleway";
}


/* Navbar */

.navbar-brand img {
    height:80px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-brand {
  padding: 10px;
}

.navbar {
  background-color: white;
  z-index:98;
}

.navbar {
  min-height: 80px;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

.nav_icon {
  display: inline-block !important;
  padding-left:0 !important;
  font-size: 1.2em !important;
  color: var(--secondary-color) !important;
}

.last {
  padding-right:40px !important;
}

/* Jumbotron */

.jumbotron img {
  width: 100%;
}

.jumbotron {
  padding-top:10%;
  padding-bottom:10%;
  background-image: linear-gradient(to left, var(--tertiary-color) , var(--secondary-color));
  color: white;
  text-align: center;
}

.jumbotron button {
  border-radius: 20px;
  border-color: white;
  border-width:2px;
  background-color:transparent;
  color:white;
  font-size: 1.4em;
  margin-left:5px;
  margin-right:5px;
}

.jumbotron button:hover, button:active {
  color:var(--secondary-color);
  background-color: white;
  border-color: var(--secondary-color);
}


.jumbotron h2 {
  font-weight: 100;
}

.jumbotron h1 {
  font-weight: 400;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .jumbotron h1 {
    font-size: 10vw;
  }
}

.jumbo_minor h1 {
  text-align: center;
  text-transform: none;
}

.jumbo_minor p {
  max-width: 500px;
  text-align:center;
  margin:auto;
}
.jumbo_minor a {
  color:white;
  text-decoration: underline;
}


iframe {
  width: 100%;
  height: 20em;
}

.vertical-align {
  display: flex;
  align-items: center;
}

@media (max-width: 992px) {
.vertical-align {
      display: block; /* Turn off the flexible box layout */
      text-align: center;
  }
}

/* Media/Info Pairs */

.info-center {
  padding:10%;
}

.w100 {
  width:100%;
}

.info h1 {
  color: var(--secondary-color)

}

.info {
  text-align: center;

}

.info i {
  font-size: 3em;
  color: var(--secondary-color);
}

/* Info Tiles */

.tiles {
  text-align: center;
}

.tiles i {
  font-size: 3em;
  color: var(--secondary-color);
  padding-top:15%;
  padding-bottom:15%;
}

@media (max-width: 992px) {
  .tiles i {
    padding-bottom:5%;
  }
  }

.tiles h2 {
  color: var(--secondary-color)
}

/* Pre-Load Spinner */
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid var(--secondary-color);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
  position: fixed;
  left: 50%;
  top:50%;
  margin-left:-60px;
  z-index:99;
}

.loader_parent {
  position:fixed;
  top:0;
  width:100%;
  height:100%;
  background:white;
  z-index:99;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader_parent.hidden_custom {
  animation: fadeOut 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  100% {
      opacity: 0;
      visibility: hidden;
  }
}

/* Gallery */
.nav-tabs a {
  color:var(--secondary-color);
  font-weight: bold;
}

@media (min-width: 0px) {

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

}

#photos img {
  width:100%;
  margin-bottom:5%;
}

.faqs h2 {
  color:var(--secondary-color);
}

.faqs {
  max-width: 800px;
  text-align: center;
}

.faqs p {
  font-size: 1.2em;
}

/* Contact */
.contact {
  max-width: 800px;
}

.required label::after {
  content: " *";
  color: red;
  font-size: 1.5em;
}

.contact .btn {
  border-radius: 20px;
  border-color: var(--secondary-color);
  border-width:2px;
  background-color:transparent;
  color:var(--secondary-color);
  font-size: 1.2em;
  margin-left:5px;
  margin-right:5px;
}

.contact .btn:hover {
  color:white;
  background-color: var(--secondary-color);
}

.form-control {
  border-color: var(--secondary-color);
  border-width:2px;
}

/* Footer */

.footer {
  text-align:center;
  background-image: linear-gradient(to left, var(--tertiary-color) , var(--secondary-color));
  color:var(--main-background-color);
  padding-top:5%;
  padding-bottom:5%;
  margin-top:5%;
}

.footer a {
  color:var(--main-background-color);
  font-size: 1.6em;
  margin:0.5%;
}

.matterport {
  color: white;
}