/* General */
html {
  scroll-behavior: smooth;
}

/* Colors */
.bg-off-black{
  background: #202020;
}
.bg-off-blue{
  background: #F6F6F6;
}
.bg-off-gray{
  background-color: #D8D8D8;
}
.text-off-gray{
  color: #D8D8D8;
}
.text-nav-blue{
  color: #03026A
}
.bg-nav-blue-back{
  background-color: rgb(3,2,106, .1);
}
.bg-banner-yellow,
.sell-btn{
  background-color: #FECC66;  
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.sell-btn:hover{
  background-color: #fcbf35;
}
.text-yellow-font{
  color: #F7E500;
}
.bg-off-yellow{
  background-color: #FECC66;  
}
.border-yellow-font {
  border-color: #F7E500;
}
.text-main-blue{
  color: #001FEB
}
.border-main-blue{
  border: 1px solid #03026A
}
.bg-main-blue{
  background-color: #03026A
}
.hover-app-btn:hover{
  background-color: rgb(5, 2, 184)
}
.bg-tan{
  background-color: #CC9966;
}
.bg-tan:hover{
  background-color: #8D704F;
}
.text-tan{
  color: #c49c70;
}
.default-width{
  max-width: 1140px;
}
@media(max-width: 1023px){
  .default-width{
    padding: 0 40px;
  }
}
@media(max-width: 600px){
  .default-width{
    padding: 0 20px;
  }
}

.w-halfish{
  width: 100%;
}
@media (min-width: 925px) { 
  .w-halfish{
    width:48%
  }
 }
 .fa-search,
 .fa-backspace{
   display: flex;
   align-items: center;
 }
 .fa-search::before,
  .fa-backspace::before{
   align-self: center;
 }
/* Fonts */
@font-face {
  font-family: 'Georgia';
  src: url('../fonts/georgia.woff') format('woff'),
       url('../fonts/Georgia.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
.font-proxima{
  font-family: proxima-nova, sans-serif;
}
.font-georgia{
  font-family: 'Georgia', 'serif';
}
.text-xxs{
  font-size: .5em;
}
/* Heights */
.h-72{height: 18rem;}
.h-80{height: 20rem;}
.h-88{height: 22rem;}
.h-104{height: 26rem;}
.h-120{height: 30rem;}
.list-item-height{
  height: 325px;
}
@media only screen and (max-width: 767px) {
  .list-item-height {
    height: 270px;
  }
}
/* Mobile Menu */
#mobile-nav{
  overflow: scroll!important;
  max-height: 83vh;
}
#mobile-container{
  height: 590px;
  max-height: 590px;
  overflow-y: scroll;
  overflow-x: hidden;
}
/* Hamburger Menu Styles */
.hamburger{
  border: 2px solid #03026A;
}
.hamburger:hover{
  color:white;
  background: #03026A;
}
.hide-nav{
  display:none;
}
#brand-nav{
  width: 450px;
  position: absolute;
  top: 30px;
  z-index: 5;
}
/* Brand Boxes */
.brand-box:hover{
  background: #03026A;
}
.text-brand-box{
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 1.28571px;
  text-transform: uppercase;
  color: #BEBEBE;
  border-color: #E9E9E9;
}
/* Home Header */
.home-title{
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 50px;
  /* or 139% */
  text-align: center;
}
.home-subtitle{
  font-style: normal;
  font-weight: bold;
  font-size: 21px;
  line-height: 50px;
  /* or 238% */
  text-align: center;
}

/* Landing Page Jumbo */
.jumbo-background{
  height: 310px;
  background-image: url('/images/carousel_one.png');
  background-repeat: none;
  background-size: cover;
  background-position: center;
}
/* Email Banner Background */
.email_background{
  height: 20rem;
  background:linear-gradient(rgba(46, 44, 44, 0.75), rgba(46, 44, 44, 0.75)),  url('/images/rolex_bg.png');
  background-repeat: none;
  background-size: cover;
  background-size: center;
}
/* App Banner Background */
.app_banner_background{
  background-image: url('/images/watch_icon_bg.png');
  background-repeat: none;
  background-size: cover;
  background-position: center;
}
.blog_banner_background{
  color:white;
   background: linear-gradient(rgba(46, 44, 44, 0.75), rgba(46, 44, 44, 0.75)),
    /* bottom, image */
    url('/images/bg-blog.jpg');
  background-repeat: none;
  background-size: cover;
  background-position: center;
}
/* Watch Carousel Animations */
/* Animation code from  Dylan Winn-Brown https://css-tricks.com/zooming-background-images/*/
.parent {
  width: 270px;
  margin-left: auto;
  height: 270px;
  overflow: hidden;
  display: inline-block;
}
@media only screen and (max-width: 675px) {
  .parent {
      width: 96%;
      height: 22rem;
      margin-top: 1rem;
  }
}

.nav-contact-btn:hover{
 background-color:#03026A;
}
.bob_images{
  margin: 5px 8px 0 0;
  height: 115px;
}
.about-border{
  border-bottom: 2px solid #C49C70;
  padding-bottom: 2em;
}

#testimonials
.glider-slider{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slick-slider{
  display: flex;
  align-items: center;
  justify-content: center;
}
.slick-list{
  height: auto !important;
}
@media only screen and (max-width: 600px) {
  .slick-slider{
    display: block;
  }
}
.testimony-paragraph{
  font-style: normal;
  font-weight: normal;
  font-size: 16px !important;
  line-height: 24px;
}
@media only screen and (max-width: 947) {
  .testimony-paragraph{
    width: auto;
  }
}
.slick-slide{
  height: auto;
}
.slick-dots{
  display: flex;
  flex-wrap: wrap;
  margin: 5px auto;
}
.slick-dots li button{
  background: #D8D8D8;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  color:#D8D8D8;
  margin: 1px;
}
.slick-dots li button[aria-selected]{
  background: #03026A;
  color: #03026A;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  margin: 1px;
}
.single-watch-sub-carousel{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1%;
  width: 100%;
}
@media (max-width: 750px) { 
  .single-watch-sub-carousel{
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 600px) { 
  .single-watch-sub-carousel{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 400px) { 
  .single-watch-sub-carousel{
    grid-template-columns: repeat(3, 1fr);
    overflow:auto;
  }
}

@media (min-width: 400px) {
  .single-watch-sub-carousel {
    margin-bottom: 5em;
  }
}

.watch-list-container{
  height: 381px;
}
@media (max-width: 767px) { 
  .watch-list-container{
   height: auto;
  }
}
.similar-watch-panel{
  height: auto;
  padding-right: 5%;
}
@media (max-width: 800px) { 
  .similar-watch-panel{
   height: auto;
  }
}
.single-watch-main-image{
  height: 450px;
}
@media (max-width: 767px) { 
  .single-watch-main-image{
   height: 300px;
  }
}

/* classes for the archive of sold watches */
ul.sold_gallery{
  overflow: hidden;
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}
.sold_gallery img{
  height: auto;
  width: auto;
}
@media(max-width: 900px){
  ul.sold_gallery{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media(max-width: 768px){
  ul.sold_gallery{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 550px) { 
  ul.sold_gallery{
    grid-template-columns: 1fr 1fr;
  }
  .sold_gallery img,
  .sold_gallery li{
   width: 100%;
  }
  .sold_gallery a{
    color: #03026A;
    text-decoration: underline;
  }
}
@media (max-width: 355px) { 
  ul.sold_gallery{
    grid-template-columns: 1fr;
  }
}

.bg-journe{
  background: linear-gradient(rgba(46, 44, 44, 0.6), rgba(46, 44, 44, 0.6)), url("../images/FP-Journe-Pro-Pic.jpg") no-repeat center;
  background-size: 100%;
  height: 350px;
}
.bg-light-tan{
  background-color: #f8f7f3;
}
.bg-brown-green{
  background-color: #e3e1da;
}
.text-tan-box{
  color:#fcdaa9;
}


/* CSS for email capture pages */
.mailchimp-new-arrivals-sub-form-component {
	background-color: #edd655;
	box-sizing: border-box;
  margin: 20px auto;
	min-height: 229px;
	opacity: 1;
	padding: 20px 20px 10px 20px;
	position: relative;
	text-align: center;
	transition: min-height 0.4s, height 0.4s, margin 0.4s, opacity 0.4s, padding 0.4s;
}

.mailchimp-new-arrivals-sub-form-component.fade-out {
	opacity: 0;
}

.mailchimp-new-arrivals-sub-form-component.reduce-height-to-zero {
	height: 0;
	margin: 0;
	min-height: 0;
	padding: 0;
}

.mailchimp-new-arrivals-sub-form-component .close {
	color: #000;
	cursor: pointer;
	font-size: 24px;
	position: absolute;
	right: 15px;
	text-decoration: none;
	top: 15px;
}

.mailchimp-new-arrivals-sub-form-component .close:hover {
	color: #23272b;
}

.mailchimp-new-arrivals-sub-form-component h1 {
	color: #000;
	font-size: 26px;
	font-weight: normal;
	line-height: 1em;
	margin: 5px 0 0 0;
}

.mailchimp-new-arrivals-sub-form-component h2 {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	margin: 10px 0 0 0;
}

.mailchimp-new-arrivals-sub-form-component .email {
	border: none;
	box-sizing: border-box;
	height: 50px;
	margin: 20px 0 10px 0;
	max-width: 390px;
	padding: 20px;
	width: 100%;
}

.mailchimp-new-arrivals-sub-form-component .btn {
	border-radius: 0;
	height: 50px;
	margin-bottom: 0;
	max-width: 390px;
	width: 100%;
}

.mailchimp-new-arrivals-sub-form-component .error-message {
	color: red;
	font-weight: bold;
	margin-top: 10px;
	opacity: 0;
	transition: opacity 0.4s;
}

.mailchimp-new-arrivals-sub-form-component .error-message.fade-in {
	opacity: 1;
}

.btn-dark {
	color: #fff;
	background-color: #000;
	border-color: #343a40;
  }
  
.btn-dark:hover {
	color: #fff;
	background-color: #23272b;
	border-color: #1d2124;
}

.btn-dark:focus, .btn-dark.focus {
	box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
	color: #fff;
	background-color: #343a40;
	border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
	color: #fff;
	background-color: #1d2124;
	border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.mailchimp-new-arrivals-sub-form-component .success-message-wrapper {
	margin-top: 35px;
}

@keyframes mailchimpNewArrivalsSubFormCheckmarkOutline {
	0% {
		opacity: 0;
		transform: scale(0.333);
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mailchimpNewArrivalsSubFormCheckmark {
	0% {
		border-width: 0;
		height: 0;
		opacity: 0;
		width: 0;
	}
	49.9% {
	  	border-width: 0;
	}
	50% {
		border-width: 3px;
		height: 0;
		opacity: 1;
		width: 0;
	}
	75% {
		border-width: 3px;
		height: 0;
		opacity: 1;
		width: 10px;
	}
	100% {
		border-width: 3px;
		height: 20px;
		opacity: 1;
		width: 10px;
	}
}

@keyframes mailchimpNewArrivalsSubFormSuccessMessage {
	0% {
		margin-top: 35px;
		opacity: 0;
	}
	40% {
		margin-top: 35px;
		opacity: 0;
	}
	100% {
		margin-top: 25px;
		opacity: 1;
	}
}
  
.mailchimp-new-arrivals-sub-form-component .checkmark-outline {
	animation: mailchimpNewArrivalsSubFormCheckmarkOutline 0.5s cubic-bezier(0.34, 0.02, 0.45, 1.47) forwards;
	border: 3px solid #000;
	border-radius: 50%;
	height: 60px;
	margin: auto;
	position: relative;
	width: 60px;
  }
  
.mailchimp-new-arrivals-sub-form-component .checkmark {
	animation: mailchimpNewArrivalsSubFormCheckmark 1s ease-in-out forwards;
	bottom: 50%;
	border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  border-top: 0;
	border-left: 0;
	height: 20px;
	left: 17px;
	position: absolute;
	transform: rotate(45deg);
	transform-origin: left bottom;
	width: 10px;
}

.mailchimp-new-arrivals-sub-form-component .success-message {
	animation: mailchimpNewArrivalsSubFormSuccessMessage 1.25s ease-in-out forwards;
	color: #000;
	font-size: 26px;
	font-weight: normal;
	line-height: 1em;
	margin-top: 25px;
}

/* End Email Capture */

.section-margin-top{
  margin-top:110px;
}
/* @media only screen and (max-width: 1023px) {
  .section-margin-top {
      margin-top: 0px;
  }
} */

/* Watch Grid Styles */
.watch-list-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  margin: 20px auto;
}

/* Overlay */
.card-container {
  position: relative;
  height: 285px;
  margin: 1%;
}
@media only screen and (max-width: 1200px) {
  .watch-list-grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 900px) {
  .watch-list-grid{
    grid-template-columns: 1fr 1fr;
  }
  .card-container{
    height: 400px;
  }
}
@media only screen and (max-width: 600px) {
  .watch-list-grid{
    grid-template-columns: 1fr;
  }
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.45);
}
.card-container:hover .overlay,
.carousel-card:hover .overlay {
  opacity: 1;
}
.text {
  color: white;
  height: 100%;
  width: 100%;
  font-size: 20px;
  justify-content: center;
  display: flex;
  padding: 30px;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.watch-list-item{
  display: grid;
  grid-template-columns: 400px auto;
  grid-gap: 30px;   
  margin: 10px auto;
  height: 340px;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .watch-list-item {
    grid-template-columns: 100%;
    grid-template-rows: auto 100%;
    width: 50%;
    padding: 15px;
    height: auto;
  }
}

@media only screen and (max-width: 500px) {
  .watch-list-item {
    padding: 0;
    width: 100%;
  }
}
.watch-list-badge{
  height: 24px;
  width: 86px;
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: center;
  border-radius: 4px;
  font-family: proxima-nova, sans-serif;
  font-weight: 600;
}

.team-member-listing{
  grid-template-columns: 263px auto;
  grid-gap: 2.5%;
  display: grid;
  grid-template-rows: auto;
  margin: 15px auto;
}
.team-member-listing img{
  max-width: 263px;
}
@media only screen and (max-width: 1024px) {
  .team-member-listing {
    grid-template-columns: 100%;
    grid-template-rows: 400px 100%;
    margin: 45px auto;
    height: auto;
  }
.team-member-listing img{
  max-width: 263px;
}
}
@media only screen and (max-width: 500px) {
  .team-member-listing div{
    /* max-width: 263px; */
    margin: 0 auto;
  }
  .team-member-listing img{
  max-width: 400px;
}
}
@media only screen and (max-width: 320px) {
.team-member-listing img{
  max-width: 100%;
}
}
.home-brand-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  background-color: #E9E9E9;
  grid-gap: 1px;
  height: auto;
  margin: 50px auto;
  max-width: 1140px;
}
@media only screen and (max-width: 768px) {
  .home-brand-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
.brand-grid-item{
  height: 16rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-grid-item:hover{
  background-color: #03026A;
  color:white;
}
.brand-grid-item-secondary{
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-height{
  height: 456px;
}
.watch-bio-short-section{
  height: 300px;
  overflow: auto;
  margin-bottom: 0px;
}

@media only screen and (max-width: 1023px) {
  .bio-height{
    height: auto;
  }
  .watch-bio-short-section{
    height: auto;
    overflow: visible;
    margin-bottom: 16px;
  }
}
@media (max-width: 1045px) and (min-width: 1024px) {
  .links-nav {
      margin-left: .5rem;
  }
}
.footer-grid{
  grid-template-columns: 1fr .75fr .55fr .5fr .75fr .75fr;
  margin: 1.5rem auto;
 }
 
 @media only screen and (max-width: 1024px) {
   .footer-grid{
     grid-template-columns: 1fr;
     margin: 1.5rem 0 0; 
   }
 }

 .carousel-popup-background{
  width: 100vw;
  height: 100vh;
  background-color: RGBA(0,0,0,0.9);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
  overflow: scroll;
}

@media only screen and (min-width: 750px) {
  .carousel-popup-background{
    justify-content: center;
  }
}
.pop-up-stage{
  width: 800px;
  height: auto;
}
@media only screen and (max-width: 900px) {
  .pop-up-stage{
    width: 650px;
  }
}

/* For hiding HubSpot text input forms */
.visually-hidden {
  visibility: hidden;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
  top:-9999px;
  left: -9999px;
  z-index: -1;
}

@media(max-width: 600px){
  .miniblog-section{
    padding: 0;
  }
}


.guide-collapsible {
  text-align: left;
  width: 100%;
  padding: 15 0;
}

@media(max-width: 600px) {
  .guide-collapsible {
    font-size: 18px;
  }
}

@supports (zoom: 3%) {
  .guide-collapsible:after {
    content: url('/images/thin-down.svg');
    float: right;
    zoom: 3%;
  }
}

@supports not (zoom: 3%) {
  .guide-collapsible:after {
    content: url('/images/thin-down.svg');
    float: right;
    transform: scale(.04);
    -moz-transform: scale(.04);
    margin: -480px;
  }
}


.guide-collapsible:after {
  content: url('/images/thin-down.svg');
  float: right;
}

.guide-active:after {
  content: url('/images/thin-up.svg');
}

.guide-questions {
  display: flex;
  flex-direction: column;
}

.guide-questions span {
  max-width: 85%;
  display: inline-grid;
}

.guide-questions-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.guide-questions-content p {
  font-size: 0.8em;
  margin-bottom: 2em;
}


@supports (zoom: 3%) {
    .product-lines-button:after {
      content: url('/images/thin-down.svg');
      float: right;
      zoom: 3%;
    }
  }

  @supports not (zoom: 3%) {
    .product-lines-button:after {
      content: url('/images/thin-down.svg');
      float: right;
      transform: scale(.04);
      -moz-transform: scale(.04);
      margin: -480px;
    }
  }

  .product-lines-button:after {
    content: url('/images/thin-down.svg');
    float: right;
  }

  @supports (zoom: 3%) {
    .product-lines-button-active:after {
      content: url('/images/thin-up.svg');
      float: right;
      zoom: 3%;
    }
  }

  @supports not (zoom: 3%) {
    .product-lines-button-active:after {
      content: url('/images/thin-up.svg');
      float: right;
      transform: scale(.04);
      -moz-transform: scale(.04);
      margin: -480px;
    }
  }

.product-lines-button-active:after {
    content: url('/images/thin-up.svg');
    float: right;
}

ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

ul.no-bullets li {
  margin: 15 0;
}

@media(min-width: 600px) {
  .watch-skeleton-div {
    display: none;
  }
}

@media(min-width: 600px) {
  .save-this-watch {
    display: none;
  }
}

@media(max-width: 600px) {
  .watch-skeleton-div {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr 10fr 1fr;
    justify-items: center;
    grid-template-areas: ". email . buy .";
  }
}


.buy-watch-popup {
  width: 100vw;
  height: 100vh;
  background-color: RGBA(160,174,192,0.8);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 20;
  overflow: scroll;
}

.buy-watch-popup-inner {
  position: fixed;
  top: 55%;
  left: 50%;
  z-index: 20;
  width: 85vw;
  max-height: 97vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  max-height: calc(var(--vh, 1vh) * 97);
  overflow: scroll;
  transform: translate(-50%, -50%);
}

@media(max-height: 800px) {
  .buy-watch-popup-inner {
    zoom: 80%;
    max-width: 70vw;
  }
}

.save-watch-popup {
  width: 100vw;
  height: 100vh;
  background-color: RGBA(160,174,192,0.8);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 20;
  overflow: scroll;
}

.save-watch-popup-inner {
  position: fixed;
  top: 55%;
  left: 50%;
  z-index: 20;
  width: 85vw;
  max-height: 97vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  max-height: calc(var(--vh, 1vh) * 97);
  overflow: scroll;
  transform: translate(-50%, -50%);
}

@media(max-height: 800px) {
  .save-watch-popup-inner {
    zoom: 80%;
    max-width: 70vw;
  }
}

.email-about-watch {
  color: black;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  grid-area: email;
}

.buy-now {
  grid-area: buy;
}

#sellortradebtntoggle {
  display: none;
}

@media(max-width: 600px) {
  .home-link {
    padding-top: 0.25rem;
  }
}

@media(max-width: 600px) {
  #watch-brand-name {
    width: 20%;
  }
}

@media(max-width: 600px) {
  #watch-model {
    width: 40%;;
  }
}

.stage-button {
  display: none;
}

@media only screen and (max-width: 750px) {
  #gallery-button-right {
    display: block;
    position: absolute;
    margin-right: auto;
    margin-left: 90%;
  }
}

@media only screen and (max-width: 750px) {
  #gallery-button-left {
    display: block;
    position: absolute;
    margin-right: 90%;
    margin-left: auto;
  }
}

@media only screen and (max-width: 850px)  and (min-width: 751px) {
  #gallery-button-right {
      display: block;
      position: absolute;
      margin-right: auto;
      margin-left: 105%;
  }
}

@media only screen and (max-width: 850px) and (min-width: 751px) {
  #gallery-button-left {
      display: block;
      position: absolute;
      margin-right: 105%;
      margin-left: auto;
  }
}

.gallery-button {
  background-color: rgba(0,0,0,0.4);
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  color: rgba(255,255,255, 0.8);
}

#overlay.active{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.65); /*dim the background*/
  transition: background-color 0.4s ease; 
}

.gold-numbers {
  color: #C39C73;
  font-weight: 700;
}

#about-nav {
  width: 8em;
  position: absolute;
  top: 30px;
  z-index: 5;
}

/* Careers Page */
.career-values-div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.career-images-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; 
  column-gap: 0.5rem;
}

.career-about-div {
  column-count: 2; 
  column-gap: 2em;
}

#career-page-jumbo {
  background-image: url(/images/career/officewide1.jpg);
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 40vh;
  color: white;
  display: flex;
  flex-direction: column;
  background-position-y: -15em;
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;
  justify-content: center;
} 


/* Careers Page mobile */
@media (max-width: 480px) {
  .career-values-div, .career-images-div, .career-about-div  {
    display: flex;
    flex-direction: column;
  }

  .career-values-div > div {
    margin: 1em 0;
  }

  .career-images-div > img {
    margin: 1em 0;
  }

  .career-about-div > p {
    margin: 1em 0;
    padding: 0;
  }

  .career-values-div > p {
    margin: 1em 0;
  }

  #career-page-jumbo {
    background-image: url(/images/career/officewide1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;
    color: white;
    display: flex;
    flex-direction: column;
    background-position-y: 0;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    justify-content: center;
  }
}


.bob-img-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
      "a a"
      "b c"
      "d e";
  max-width: 90%;
}

.bob_big_image {
  margin: -0.8em;
  transform: scale(0.8);
  grid-area: a;
}

@media (max-width: 480px) {
  .bob-img-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "a a"
        "b c"
        "d e";
    max-width: 60%;
  }
}

.favorite-button:disabled,
.favorite-button[disabled]{
  background-color: #cccccc;
  color: #666666;
}

@media (max-width: 480px) {
  #boston-globe-img {
    width: 70%;
    padding-top: 0.5em;
  }
}

@media (max-width: 480px) {
  #bloomberg-img {
    width: 50%;
    padding-top: 0.8em;
  }
}