/* Screens no smaller than a tablet */

/****************************************
* Typography
****************************************/

h1 {
  font-size: 50px;
}

.resource-article h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.anchor:before {
  display: block;
  content: '';
  background-color: transparent;
  height: 80px;
  margin: -80px 0 0;
  visibility: hidden;
}

/****************************************
* Header
****************************************/

header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, .5);
  width: 100%;
  padding: 1rem 0;
}

header .logo {
  padding: 0 0 0 2rem;
}

/****************************************
* Top Bar
****************************************/

.top-bar a {
	padding: .5rem .75rem;
	font-size: 16px;
}

.top-bar a:last-of-type {
	border-right: none;
}

/****************************************
* Billboard
****************************************/

.billboard p {
	font-size: 20px;
}

@media(min-width: 1000px) {

  .billboard,
  .billboard .slip-n-slide {
    height: calc(555px + (430 - 555) * (100vw - 1000px) / (1139 - 1000));
  }

  .billboard .slide {
    display: grid;
    grid-template-columns: 45% 1fr;
  }

  .billboard .slide .photo {
    order: 2;
    height: auto;
    padding: 0;
    overflow: hidden;
  }

  .billboard .slide img {
    position: unset;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .billboard .slide .content {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .billboard .slip-n-slide .controls {
    margin: 0;
    width: 45%;
    padding: 0 2rem;
    text-align: left;
  }

  .billboard .slip-n-slide.pagination .control {
    margin: 8px 8px 8px 0;
  }
}

/****************************************
* Cross grid
****************************************/

.cross.grid a,
.cross.grid a + a {
  margin: 1rem;
}

.cross.grid a:nth-of-type(2) {
  border-top: none;
}

.cross.grid a:nth-of-type(2),
.cross.grid a:nth-of-type(4) {
  border-left: 1px solid #efefef;
}

/****************************************
* Image block
****************************************/

.image-block + div:not(.image-block) {
  /*grid-column: span 2;*/
  padding: 3rem;
}

.span-2 {
  grid-column: span 2;
}

/****************************************
* Team
****************************************/

.team .staff {
  flex: 0 0 calc((100% / 3) - 2rem);
  margin: 1rem;
}

/****************************************
* Testimonials
****************************************/

.testimonial {
  position: relative;
  overflow: hidden;
}

.testimonial .image {
  padding-top: 50%;
}

.testimonial .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  height: 100%;
}

.testimonial .box {
  margin-top: 2rem;
  padding: 2rem;
}

.testimonial .box:before {
  top: 3px;
  left: -15px;
  font-size: 120px;
}

/****************************************
* Overlays
****************************************/

#home-buying-overlay .wrapper,
#agency-buying-overlay .wrapper {
  padding: 3rem;
}

#agency-buying-overlay .wrapper {
  max-width: 700px;
}

/****************************************
* Footer
****************************************/

footer > .grid {
  grid-template-columns: 4.5fr 3.5fr 4fr;
}