/******************************************************************
Site Name: VocoVision
Author: Soliant MC

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
BREAKPOINTS
*********************/
/*********************
TRANSITIONS/ETC
*********************/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/*********************
ANGLES
*********************/
/*
* INTERNAL CAREERS
* use: Internal Careers
*/
.page-vocovision-careers p {
  -webkit-hyphens: none;
          hyphens: none;
}
.page-vocovision-careers .red-btn {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 14px 60px;
}

.section--account-executive {
  padding: 8rem 0 0;
}
.section--account-executive h2 {
  line-height: 1.2;
  margin: 0 0 5rem;
}
.section--account-executive h3 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 2rem;
}
.section--account-executive p {
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0 0 2rem;
}
.section--account-executive dl {
  margin-top: 4rem;
}
.section--account-executive dt {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  text-transform: uppercase;
  font-weight: bold;
}
.section--account-executive dd {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.section--account-executive dd a {
  font-size: 1.4rem;
  line-height: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  text-decoration: underline;
}
.section--account-executive dd a:hover {
  color: #fff;
  text-decoration: none;
}
.section--account-executive input[type=text],
.section--account-executive input[type=password],
.section--account-executive input[type=datetime],
.section--account-executive input[type=datetime-local],
.section--account-executive input[type=date],
.section--account-executive input[type=month],
.section--account-executive input[type=time],
.section--account-executive input[type=week],
.section--account-executive input[type=number],
.section--account-executive input[type=email],
.section--account-executive input[type=url],
.section--account-executive input[type=search],
.section--account-executive input[type=tel],
.section--account-executive input[type=color],
.section--account-executive select,
.section--account-executive textarea,
.section--account-executive .field,
.section--account-executive .custom-multichk,
.section--account-executive .file-upload,
.section--account-executive .bh-file-upload {
  padding: 1rem 2rem;
  font-size: 2.4rem;
  line-height: 3.2rem;
  min-height: 52px;
}
.section--account-executive .gfield_checkbox label {
  font-size: 1.6rem;
  line-height: 1.5;
}
.section--account-executive .gfield_checkbox label a {
  font-size: 1.6rem;
  line-height: 1.5;
}
.section--account-executive .gfield_checkbox label a:hover {
  color: #fff;
  text-decoration: none;
}
.section--account-executive .copy-column {
  position: relative;
}
.section--account-executive .copy-column .image-block {
  display: none;
  max-width: 80%;
}
.section--account-executive .copy-column .column-image {
  width: 400px;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  margin: 0 auto;
}
.section--account-executive .copy-block {
  margin: 0 auto 5rem;
  max-width: 472px;
}
.section--account-executive .sec-job-apply {
  margin: 3rem -1.5rem 0;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 598px;
  border: 1px solid white;
}
.section--account-executive .account-exec-carousel {
  position: relative;
  padding: 0 30px 0;
  max-height: 410px;
}
.section--account-executive .account-exec-carousel .owl-prev span,
.section--account-executive .account-exec-carousel .owl-next span {
  visibility: hidden;
  background-repeat: no-repeat;
  display: block;
  width: 8px;
  height: 13px;
}
.section--account-executive .account-exec-carousel .owl-prev {
  position: absolute;
  top: 50%;
  left: 0;
}
.section--account-executive .account-exec-carousel .owl-next {
  position: absolute;
  top: 50%;
  right: 0;
}
.section--account-executive .account-exec-carousel .owl-stage {
  list-style-type: none;
  margin-left: 0;
}
.section--account-executive .account-exec-carousel.owl-theme .owl-nav [class*=owl-]:hover {
  background: transparent;
}
.section--account-executive .account-exec-carousel.owl-theme .owl-nav {
  margin-top: 40px;
}

.section--benefits {
  background-color: #f2f2f2;
}

.benefit-boxes-wrap {
  margin: 0 auto;
}

.benefit-boxes {
  margin: 3rem auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  list-style: none;
  width: 100%;
}
.benefit-boxes li {
  display: flex;
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
  background-color: #da6c9e;
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1.3;
  max-width: 291px;
  margin: 0 auto;
  min-height: 217px;
  align-items: center;
}
.benefit-boxes li:nth-of-type(2) {
  background-color: #74c2df;
}
.benefit-boxes li:nth-of-type(3) {
  background-color: #54a399;
}
.benefit-boxes li:nth-of-type(4) {
  background-color: #ef4728;
}
.benefit-boxes li:nth-of-type(5) {
  background-color: #f3ad1c;
}
.benefit-boxes li:nth-of-type(6) {
  background-color: #bec853;
}

.section--account-executive-role {
  padding-bottom: 0;
  padding-top: 9rem;
}
.section--account-executive-role header p {
  max-width: 929px;
  margin: 0 auto;
}
.section--account-executive-role h3 {
  font-size: 2.4rem;
}
.section--account-executive-role ul {
  margin-block: 2rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}
.section--account-executive-role ul li {
  margin-bottom: 1rem;
  max-width: 441px;
}
.section--account-executive-role .copy {
  max-width: 572px;
}
.section--account-executive-role .image-wrap {
  margin: 4rem auto;
}
.section--account-executive-role .column-image {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.exec-role-boxes {
  display: flex;
  flex-direction: column;
  margin: 4rem 1rem;
}
.exec-role-boxes li {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  min-height: 85px;
  margin: 2rem 0;
  gap: 2rem;
}
.exec-role-boxes span {
  color: var(--navy-200);
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 600;
}

.section--love-working-here {
  padding: 8rem 0;
}
.section--love-working-here h3 {
  font-size: 2.4rem;
  line-height: 1.3;
}
.section--love-working-here .image-column {
  display: none;
}
.section--love-working-here .column-image {
  max-width: 100%;
}
.section--love-working-here .copy {
  max-width: 572px;
  margin-right: 0;
  margin-left: auto;
}

.section--office-perks {
  margin-top: 3rem;
}
.section--office-perks header .button-wrap {
  margin-top: 4rem;
}
.section--office-perks h3 {
  font-size: 2.4rem;
  line-height: 1.3;
}
.section--office-perks .icon-blocks {
  list-style-type: none;
  margin: 4rem auto;
}
.section--office-perks .icon-blocks li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 3rem 0;
}
.section--office-perks .icon-blocks span {
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--navy-200);
  font-weight: 600;
}
.section--office-perks .icon-blocks svg {
  margin: 4rem auto;
}

.section--vocovision-reviews {
  background-color: #f2f2f2;
  padding-top: 10rem;
}
.section--vocovision-reviews h3 {
  font-size: 2.4rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.section--vocovision-reviews .review-block {
  padding: 4rem 4rem 2rem;
}
.section--vocovision-reviews .review-title {
  margin-bottom: 1rem;
}
.section--vocovision-reviews .review-stars {
  margin-top: 3rem;
}
.section--vocovision-reviews .author {
  color: #c81330;
  margin: 2rem 0 0;
  font-size: 1.6rem;
  line-height: 1.3;
}
.section--vocovision-reviews .review-blocks-carousel {
  position: relative;
}
.section--vocovision-reviews .owl-prev span,
.section--vocovision-reviews .owl-next span {
  visibility: hidden;
  background-repeat: no-repeat;
  display: block;
  width: 8px;
  height: 13px;
}
.section--vocovision-reviews .owl-prev {
  position: absolute;
  top: 50%;
  left: 0;
}
.section--vocovision-reviews .owl-next {
  position: absolute;
  top: 50%;
  right: 0;
}
.section--vocovision-reviews .owl-stage {
  list-style-type: none;
  margin-left: 0;
}
.section--vocovision-reviews .owl-theme .owl-nav [class*=owl-]:hover {
  background: transparent;
}
.section--vocovision-reviews .owl-theme .owl-nav {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .section--vocovision-reviews .review-blocks {
    padding: 0 50px;
  }
}

.section--office-amenities {
  padding: 6rem 15px;
}
.section--office-amenities .office-amenities-carousel {
  position: relative;
  padding: 0 30px 0;
}
.section--office-amenities .column-image {
  max-width: 405px;
  margin: 0 auto;
}
.section--office-amenities .owl-prev span,
.section--office-amenities .owl-next span {
  visibility: hidden;
  background-repeat: no-repeat;
  display: block;
  width: 8px;
  height: 13px;
}
.section--office-amenities .owl-prev {
  position: absolute;
  top: 50%;
  left: 0;
}
.section--office-amenities .owl-next {
  position: absolute;
  top: 50%;
  right: 0;
}
.section--office-amenities .owl-stage {
  list-style-type: none;
  margin-left: 0;
}
.section--office-amenities .owl-theme .owl-nav [class*=owl-]:hover {
  background: transparent;
}
.section--office-amenities .owl-theme .owl-nav {
  margin-top: 40px;
}

.page-template-page-about--careers--ty .site-header {
  padding-bottom: 0;
}
.page-template-page-about--careers--ty .thank-you-ctas {
  background-color: #f2f2f2;
}
.page-template-page-about--careers--ty .cta-box {
  padding: 9rem 6rem;
}
.page-template-page-about--careers--ty .cta-box h3 {
  color: #fff;
}

@media (min-width: 768px) {
  .section--account-executive h2 {
    text-align: center;
    padding: 0 3rem;
  }
  .section--account-executive .sec-job-apply {
    margin: 3rem auto;
  }
}
@media (min-width: 1030px) {
  .section--account-executive {
    background-color: transparent;
    background-image: url('data:image/svg+xml,<svg preserveAspectRatio="none" viewBox="0 0 1600 1006" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H1600V1006L800 906L0 806V0Z" fill="%231D4588"/></svg>');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 60%;
  }
  .section--account-executive h2 {
    margin: 3rem 0 9rem;
  }
  .section--account-executive .copy-column .image-block {
    display: block;
    position: absolute;
    bottom: 0;
    margin-bottom: 10rem;
  }
  .section--account-executive .sec-job-apply {
    margin-top: 0;
  }
  .section--benefits {
    margin-top: 4rem;
    background-color: #fff;
  }
  .section--benefits h3 {
    font-size: 3.6rem;
  }
  .section--benefits header {
    margin: 4rem auto;
  }
  .section--benefits header p {
    font-size: 2.4rem;
    line-height: 1.3;
  }
  .benefit-boxes-wrap {
    margin: 0 auto;
  }
  .benefit-boxes {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .section--account-executive-role {
    padding-top: 12rem;
  }
  .section--account-executive-role h3 {
    font-size: 3.6rem;
    margin-bottom: 5rem;
  }
  .section--account-executive-role .exec-role-boxes {
    width: 100%;
    max-width: 1037px;
    margin: 3rem auto;
    flex-wrap: wrap;
    height: 300px;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
  .section--account-executive-role .exec-role-boxes span {
    font-size: 2.4rem;
    max-width: 333px;
  }
  .section--account-executive-role .copy {
    margin-top: 6rem;
  }
  .section--love-working-here h3 {
    font-size: 3.6rem;
    margin-bottom: 0;
  }
  .section--love-working-here .image-column {
    display: block;
  }
  .section--love-working-here .copy-column {
    margin-top: 12rem;
  }
  .section--office-perks h3 {
    font-size: 3.6rem;
    margin-bottom: 2rem;
  }
  .section--office-perks .icon-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }
  .section--office-perks .icon-blocks span {
    font-size: 2.4rem;
    max-width: 333px;
  }
  .section--vocovision-reviews {
    padding-top: 12rem;
  }
  .section--vocovision-reviews h3 {
    font-size: 3.6rem;
  }
  .section--vocovision-reviews .review-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .section--vocovision-reviews .review-block {
    max-width: 570px;
    margin: 0 auto;
  }
  .section--office-amenities {
    padding: 12rem 0 6rem;
  }
  .page-template-page-about--careers--ty .thank-you-ctas {
    padding: 12rem 0;
  }
}
/* 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */