/******************************************************************
Stylesheet: CRSTe Stylesheet
******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
/******************************************************************
Stylesheet: Variables
******************************************************************/
/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/******************************************************************
Stylesheet: Base Mobile Stylesheet
******************************************************************/
.content .eyetube-wrapper {
  margin-bottom: 0px;
  margin-top: 54px; }

.view-full-btn {
  margin: 28px 0px; }

.view-full-btn a {
  font-family: "Industry", sans-serif;
  color: #fb8253 !important;
  border: 1px solid #fb8253;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 222px;
  max-width: 100%;
  background: transparent;
  box-shadow: none;
  padding: 12px 0px;
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  -moz-transition: all .25s ease; }

.view-full-btn a:hover {
  background: rgba(251, 130, 83, 0.25);
  text-decoration: none !important; }

.crst-photo-contest {
  margin-top: 28px !important; }
  .crst-photo-contest img {
    opacity: 1;
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    -moz-transition: all .25s ease; }

.crst-photo-contest a:hover img {
  opacity: .8; }

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (min-width: 481px) {
  /******************************************************************
Stylesheet: 481px and Up Stylesheet
******************************************************************/ }

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {
  /******************************************************************
Stylesheet: Tablet & Small Desktop Stylesheet
******************************************************************/
  .container.online-exclusive-wrap.crst-photo-contest {
    padding: 0px 30px !important; }
  .crst-photo-contest {
    margin-top: 60px !important; } }

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 992px) {
  /******************************************************************
Stylesheet: Desktop Stylsheet
******************************************************************/ }

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1200px) {
  /******************************************************************
Stylesheet: Super Large Monitor Stylesheet
******************************************************************/
  .container.online-exclusive-wrap.crst-photo-contest {
    padding: 0px !important; } }

/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /******************************************************************
Stylesheet: Retina Screens & Devices Stylesheet
******************************************************************/ }

/*********************
NEW FEATURES/UPDATE STYLES
This is basically a working file. When building features or updating quickly use this file and then distribute the scss properly before deploying to production.
*********************/
#contact .static-container .static-content ul {
  margin-bottom: 0px;
  padding-bottom: 0px; }

#contact .static-container .static-content h3 {
  text-align: center;
  margin-top: 40px; }

#contact .static-container li {
  margin-bottom: 40px; }

#contact .static-container .name {
  margin-bottom: 8px !important; }

#contact .static-container .phone {
  margin: 3px 0px; }

#contact .static-container .submission {
  text-align: left; }

@media only screen and (max-width: 992px) {
  #contact .static-container .static-content ul li {
    text-align: center; }
  #contact .static-container .static-content .submission {
    text-align: center; } }

@media only screen and (min-width: 992px) {
  #contact .static-container .static-content h3 {
    text-align: left; } }

.main.single-case-study {
  padding-top: 48px; }
  .main.single-case-study .content .insert-cover {
    margin-top: 0px; }

.single-case-study .custom-share-links li svg {
  width: 27px;
  height: 27px; }

.single-case-study .custom-share-links #facebook-logo {
  fill: #3b5998; }

.single-case-study .custom-share-links #twitter-logo {
  fill: #55acee; }

.single-case-study .custom-share-links #linkedin-logo {
  fill: #0077b5; }

.single-case-study .custom-share-links #email-logo {
  fill: #cfcdcd; }

.single-case-study .custom-share-links #link-logo,
.single-case-study .custom-share-links #dl-logo path {
  fill: #cfcdcd; }

.main.cs-archive {
  width: 1180px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 0px; }
  .main.cs-archive .hero {
    margin: 0px 0px 22px; }
  .main.cs-archive .intro {
    padding: 0px 15px; }
    .main.cs-archive .intro h1 {
      font-size: 24px;
      margin-bottom: 17px; }
    .main.cs-archive .intro p {
      font-size: 15px;
      margin-bottom: 22px; }
  .main.cs-archive .archive {
    padding: 0px 15px; }
    .main.cs-archive .archive .year-heading {
      padding-bottom: 20px;
      margin-bottom: 40px;
      border-bottom: 1px solid #d7d7d7; }

.cs-card {
  margin-bottom: 30px;
  transition: all .15s ease;
  -webkit-transition: all .15s ease;
  -o-transition: all .15s ease;
  -moz-transition: all .15s ease; }
  .cs-card .calendar {
    position: relative;
    width: 135px;
    margin-bottom: 21px; }
    .cs-card .calendar svg {
      width: 100%;
      max-width: 100%; }
    .cs-card .calendar .txt {
      position: absolute;
      top: 57%;
      transform: translateY(-50%);
      width: 100%;
      transition: all .15s ease;
      -webkit-transition: all .15s ease;
      -o-transition: all .15s ease;
      -moz-transition: all .15s ease; }
  .cs-card h2 {
    font-size: 28px;
    margin-bottom: 9px; }
  .cs-card h3 {
    margin-bottom: 12px; }
  .cs-card h4 {
    margin-bottom: 9px; }
  .cs-card:hover {
    opacity: .85; }
    .cs-card:hover .calendar .txt {
      opacity: .75; }

.recent-cases {
  width: 565px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center; }
  .recent-cases .cs-card {
    text-align: center; }
    .recent-cases .cs-card .calendar {
      margin: 0px auto 21px; }

.row.gutters-25 {
  margin-left: -25px;
  margin-right: -25px; }
  .row.gutters-25 > div[class*="col-"] {
    padding: 0px 25px; }

article.case-study {
  margin: 0 auto; }

.cs-single-wrap .recent-cases {
  padding: 0px 15px; }

.cs-single-wrap .end-of-featured {
  padding: 28px 0px;
  margin: 55px 0px 12px 0px;
  border-top: 1px solid #d7d7d7; }

.cs-single-wrap .recent-cases {
  margin-bottom: 30px; }

@media only screen and (max-width: 767px) {
  .cs-single-wrap .end-of-featured {
    padding: 28px 15px 0px;
    margin-bottom: 28px;
    border-top: 1px solid #d7d7d7; }
    .cs-single-wrap .end-of-featured h6 {
      font-size: 18px;
      margin-top: 0px; } }

@media only screen and (min-width: 768px) {
  .main.cs-archive {
    margin-bottom: 75px !important; }
    .main.cs-archive .hero {
      margin-bottom: 42px; }
    .main.cs-archive .intro {
      padding: 0px 15px; }
      .main.cs-archive .intro h1 {
        font-size: 50px;
        margin-bottom: 42px; }
      .main.cs-archive .intro p {
        font-size: 19px;
        line-height: 23px;
        margin-bottom: 42px; }
    .main.cs-archive .archive {
      padding: 0px 15px; }
      .main.cs-archive .archive .year-heading {
        padding-bottom: 20px;
        margin-bottom: 40px;
        border-bottom: 1px solid #d7d7d7; }
  .cs-card {
    height: 267px;
    margin-bottom: 35px; }
    .cs-card .calendar {
      position: relative;
      width: 135px;
      margin-bottom: 21px; }
      .cs-card .calendar svg {
        width: 100%;
        max-width: 100%; }
      .cs-card .calendar .txt {
        position: absolute;
        top: 57%;
        transform: translateY(-50%);
        width: 100%; }
    .cs-card h3 {
      margin-bottom: 13px; }
    .cs-card h4 {
      margin-bottom: 9px; }
  .cs-single-wrap .recent-cases {
    padding: 0px; } }

@media only screen and (min-width: 992px) {
  .main.cs-archive,
  .main.single-case-study {
    padding-top: 88px; } }

@media only screen and (min-width: 1210px) {
  .main.cs-archive .intro {
    padding: 0px; }
  .main.cs-archive .archive {
    padding: 0px; } }

.async-ruby {
  border-top: 1px solid #d7d7d7;
  padding: 50px 0px 0px; }
  .async-ruby .ad-wrap {
    width: 692px;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;
    display: block !important; }

.infinite-more-wrap:not(.single-divider)::before {
  content: "";
  display: block !important;
  width: 100%;
  background-color: #fff;
  height: 38px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 3; }

.infinite-more-wrap.eoi::before,
.infinite-more-wrap.eoi::after {
  display: none !important; }

.recent-issues-wrap {
  position: relative;
  width: 100%;
  background-color: #fff; }

.end-of-featured {
  margin: 47px 0px 0px 0px;
  padding: 47px 0px 55px 0px;
  border-top: 1px solid #e7e7e7;
  background: #fff;
  position: relative; }