/* Set a background image by replacing the URL below */

.hero-image {
  background-image: url('../images/bg-top.jpg');
  height: 200px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  background-attachment: fixed;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  top: 100px;
  transform: translate(-50%, -35%);
  color: text-primary;
}

.hero-pic {
  text-align: left;
  position: absolute;
  top: 70px;
  left: 200px;
  transform: translate(-50%, -50%);
  color: text-primary;
}

.navbar-default .navbar-nav>li.dropdown:hover>a,
.navbar-default .navbar-nav>li.dropdown:hover>a:hover,
.navbar-default .navbar-nav>li.dropdown:hover>a:focus {
  background-color: rgb(231, 231, 231);
  color: rgb(85, 85, 85);
}

.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Solid class attached on scroll past number lines in custom.js */

.navbar.solid {
  background-color: rgb(52, 58, 64);
  transition: background-color .5s ease 0s;
}

/* END Solid class attached on scroll past first section */

#return-to-top {
  position: fixed;
  bottom: 30px;
  Left: 30px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
  color: #fff;
  top: 5px;
}

/*
Credits for mag:
https://github.com/marcaube/bootstrap-magnify
*/

.mag {
  width: 400px;
  margin: 0 auto;
  float: none;
}

.mag img {
  max-width: 100%;
}



.magnify {
  position: relative;
  cursor: none
}

.magnify-large {
  position: absolute;
  display: none;
  width: 175px;
  height: 175px;

  -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%
}

/* MAKING HEADINGS RESPONSIVE 1rem = 16px */

/* H1 Settings  */

/* Extra small devices (portrait phones, less than 544px) No media query since Bootstrap default is "mobile first" */
h1 {
  font-size: 1.5rem;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
  h1 {
    font-size: 1.5rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  h1 {
    font-size: 2rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

/* H2 Settings  */

/* Extra small devices (portrait phones, less than 544px) No media query since Bootstrap default is "mobile first" */
h2 {
  font-size: 1.25rem;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
  h2 {
    font-size: 1.5rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  h2 {
    font-size: 1.75rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h2 {
    font-size: 2rem;
  }
}

/* Display-3 Settings  */

/* Extra small devices (portrait phones, less than 544px) No media query since Bootstrap default is "mobile first" */
.display-3 {
  font-size: 2.5rem;
  font-family: "Times New Roman", Times, serif;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
  .display-3 {
    font-size: 3rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .display-3 {
    font-size: 3.5rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

/* END MAKING HEADINGS RESPONSIVE */


/* Darkening background images */
.half-black {
  background: rgba(0, 0, 0, 0.5);
}

/* Buttons for GS items on index and pick pages */
.btn-gsblue {
  color: #fff;
  background-color: #336799;
  border-color: #01264d;
}

.btn-gsblue:hover {
  color: #fff;
  background-color: #3a74ab;
  border-color: #01264d;
}


/* When scrolled to top, nav background is transparent. This makes the hamburger items have dark background. */

@media (max-width:991.98px) {
  .navbar-nav {
    background-color: rgb(52, 58, 64);
  }
}

.text-white-75 {
  color: rgba(255, 255, 255, 0.75);
}

.logo {
  width: 50%;
  height: auto;
}

/* LOGO SIZE ADJUSTMENT BASED ON SCROLL STYLE BEGINS */

.logo-img-resize {
  -webkit-transition: height 50ms;
  /* For Safari 3.1 to 6.0 */
  transition: height 50ms;
}

.logo-img-scroll {
  -webkit-transition: height 1s;
  /* For Safari 3.1 to 6.0 */
  transition: height 1s;
}

@media (min-width: 1200px) {
  #logo img {
    height: 70px;
  }
}

@media (max-width: 1199px) {
  #logo img {
    height: 55px;
  }
}

@media (max-width: 991px) {
  #logo img {
    height: 70px;
  }
}

@media (max-width: 767px) {
  #logo img {
    height: 58px;
  }
}

@media (max-width: 540px) {
  #logo img {
    height: 52px;
  }
}

@media (max-width: 400px) {
  #logo img {
    height: 46px;
  }
}

@media (max-width: 359px) {
  #logo img {
    height: 38px;
  }
}

@media (max-width: 314px) {
  #logo img {
    height: 34px;
  }
}

/* LOGO SIZE ADJUSTMENT BASED ON SCROLL STYLE ENDS */

/* Dim image standard, full strength on hover */

.dimage {
  opacity: 0.7;
}

.dimage:hover {
  opacity: 1;
}

/* End Dim image standard, full strength on hover */

.mobileShow {
  display: none;
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .mobileShow {
    display: inline;
  }
}