/******************************************************************
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
*********************/
/*********************
Updates to css vars
*********************/
:root {
  --font-main: 'Raleway', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --white: #ffffff;
  --background-blue: #f4fdff;
  --fuchsia-aa: #c81330;
  --lime-200: #bec75b;
  --sky-200: #74c2df;
  --orange-200: #f3ad1c;
  --teal-100: #e9f6f5;
  --teal-200: #2fccbe;
  --teal-300: #26a499;
  --teal-400: #397069;
  --teal-aa: #397069;
  --light-teal: #e9f6f5;
  --bright-blue-aa: #1160ca;
  --lead-300: #4f4f4f;
  --navy-200: #1d4588;
  --navy-300: #0d316a;
  --navy-400: #051633;
  --medium-blue: #004586;
}

/******************************************************************
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
*********************/
/*
* In the News Articles
* use: In the News Articles
*/
.page-template-page-about--news-template h1 {
  color: #fff;
  text-transform: none;
}
.page-template-page-about--news-template .header-inner {
  padding: 1.5rem;
  color: #fff;
  margin: 0 auto 6rem;
  max-width: 1170px;
}
.page-template-page-about--news-template .header-inner .time {
  display: block;
  margin: 1rem 0;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 600;
}
.page-template-page-about--news-template .header-inner .author {
  display: block;
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 600;
}
.page-template-page-about--news-template .featured-image {
  position: relative;
  margin-top: -6rem;
  text-align: center;
}
.page-template-page-about--news-template .featured-image .image {
  max-width: 100%;
  height: auto;
}
.page-template-page-about--news-template .copy-column a {
  color: #26a499;
  font-weight: bold;
}
.page-template-page-about--news-template .copy-column h2 {
  color: var(--navy-200);
  text-transform: none;
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 800;
  margin: 3rem 0;
}
.page-template-page-about--news-template .copy-column p {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
.page-template-page-about--news-template .copy-column blockquote {
  color: #54a399;
  margin: 5rem 3rem;
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.4;
}
.page-template-page-about--news-template .copy-column blockquote p {
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.4;
}
.page-template-page-about--news-template .copy-column blockquote p:last-of-type {
  margin-bottom: 0;
}
.page-template-page-about--news-template .copy-column blockquote::before {
  display: block;
  content: "";
  width: 34px;
  height: 31px;
  margin: 1rem 0 2rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml;utf8, <svg width="34" height="31" viewBox="0 0 34 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.3738 15.7C24.3738 16.7667 25.0072 17.3333 26.2738 17.4L28.2738 17.5C29.6072 17.5667 30.7738 18.2 31.7738 19.4C32.8405 20.6 33.3738 21.9667 33.3738 23.5C33.3738 25.3667 32.7072 26.9333 31.3738 28.2C30.0405 29.4667 28.3738 30.1 26.3738 30.1C24.0405 30.1 22.1072 29.2 20.5738 27.4C19.1072 25.5333 18.3738 23.1667 18.3738 20.3C18.3738 14.9667 20.4738 9.5 24.6738 3.9C26.2072 1.83333 27.5405 0.799998 28.6738 0.799998C29.9405 0.799998 30.5738 1.46666 30.5738 2.8C30.5738 3.33333 30.2072 4.06666 29.4738 5C27.6738 7.26666 26.1738 9.96666 24.9738 13.1C24.5738 14.1667 24.3738 15.0333 24.3738 15.7ZM6.17383 15.7C6.17383 16.7667 6.80716 17.3333 8.07383 17.4L10.0738 17.5C11.4738 17.5667 12.6738 18.2 13.6738 19.4C14.7405 20.6 15.2738 21.9667 15.2738 23.5C15.2738 25.3667 14.6072 26.9333 13.2738 28.2C11.9405 29.4667 10.2738 30.1 8.27383 30.1C5.9405 30.1 4.00716 29.2 2.47383 27.4C1.00716 25.5333 0.273828 23.1667 0.273828 20.3C0.273828 14.9667 2.37383 9.5 6.57383 3.9C8.10716 1.83333 9.4405 0.799998 10.5738 0.799998C11.8405 0.799998 12.4738 1.46666 12.4738 2.8C12.4738 3.33333 12.1072 4.06666 11.3738 5C10.0405 6.66666 8.8405 8.59999 7.77383 10.8C6.70716 13 6.17383 14.6333 6.17383 15.7Z" fill="%2354A399"/></svg>');
}
.page-template-page-about--news-template .media-contact {
  padding-top: 4rem;
  margin-top: 4rem;
  border-top: 0.5px solid #0d316a;
}
.page-template-page-about--news-template .media-contact h3 {
  font-size: 1.2rem;
  line-height: 1.1;
  font-weight: bold;
}
.page-template-page-about--news-template .media-contact h4 {
  color: var(--navy-200);
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: bold;
  margin: 0;
}
.page-template-page-about--news-template .media-contact p {
  margin: 0.5rem 0;
  color: #4f4f4f;
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 500;
  font-style: normal;
}
.page-template-page-about--news-template .media-contact address {
  display: block;
  margin-bottom: 4rem;
}
.page-template-page-about--news-template .media-contact .phone::before {
  margin-right: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  content: "P ";
  display: inline-block;
  color: #54a399;
}
.page-template-page-about--news-template .media-contact .email::before {
  margin-right: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  content: "E ";
  display: inline-block;
  color: #54a399;
}
.page-template-page-about--news-template .about-vocovision {
  padding: 5rem 0 4rem;
  margin-top: 4rem;
  background-color: #f2f2f2;
  text-align: left;
}
.page-template-page-about--news-template .about-vocovision h3 {
  color: var(--navy-200);
  font-size: 2.4rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 2rem;
  text-transform: none;
}
.page-template-page-about--news-template .about-vocovision p {
  color: #4f4f4f;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  text-transform: none;
}
.page-template-page-about--news-template .about-vocovision a {
  color: #26a499;
  font-weight: bold;
  text-decoration: underline;
}
@media (min-width: 1024px) {
  .page-template-page-about--news-template .share-buttons.top {
    display: none;
  }
  .page-template-page-about--news-template .share-buttons.bottom {
    max-width: 925px;
    margin-bottom: 5rem;
  }
  .page-template-page-about--news-template .copy-column a {
    color: #26a499;
    font-weight: bold;
  }
  .page-template-page-about--news-template .copy-column blockquote {
    display: grid;
    grid-template-columns: 61px 1fr;
    max-width: 945px;
    margin-left: auto;
    margin-right: auto;
    column-gap: 1rem;
    justify-items: stretch;
    align-items: start;
  }
  .page-template-page-about--news-template .copy-column blockquote p {
    font-weight: 800;
    font-size: 2.4rem;
    margin-top: 0;
  }
  .page-template-page-about--news-template .copy-column blockquote::before {
    display: block;
    content: "";
    width: 61px;
    height: 55px;
    margin: 1rem 0 2rem;
    column-gap: 4rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('data:image/svg+xml;utf8, <svg width="50" height="45" viewBox="0 0 50 45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.3107 23.05C36.3107 24.65 37.2607 25.5 39.1607 25.6L42.1607 25.75C44.1607 25.85 45.9107 26.8 47.4107 28.6C49.0107 30.4 49.8107 32.45 49.8107 34.75C49.8107 37.55 48.8107 39.9 46.8107 41.8C44.8107 43.7 42.3107 44.65 39.3107 44.65C35.8107 44.65 32.9107 43.3 30.6107 40.6C28.4107 37.8 27.3107 34.25 27.3107 29.95C27.3107 21.95 30.4607 13.75 36.7607 5.35C39.0607 2.25 41.0607 0.699997 42.7607 0.699997C44.6607 0.699997 45.6107 1.7 45.6107 3.69999C45.6107 4.5 45.0607 5.6 43.9607 7C41.2607 10.4 39.0107 14.45 37.2107 19.15C36.6107 20.75 36.3107 22.05 36.3107 23.05ZM9.01074 23.05C9.01074 24.65 9.96074 25.5 11.8607 25.6L14.8607 25.75C16.9607 25.85 18.7607 26.8 20.2607 28.6C21.8607 30.4 22.6607 32.45 22.6607 34.75C22.6607 37.55 21.6607 39.9 19.6607 41.8C17.6607 43.7 15.1607 44.65 12.1607 44.65C8.66074 44.65 5.76074 43.3 3.46074 40.6C1.26074 37.8 0.160742 34.25 0.160742 29.95C0.160742 21.95 3.31074 13.75 9.61074 5.35C11.9107 2.25 13.9107 0.699997 15.6107 0.699997C17.5107 0.699997 18.4607 1.7 18.4607 3.69999C18.4607 4.5 17.9107 5.6 16.8107 7C14.8107 9.49999 13.0107 12.4 11.4107 15.7C9.81074 19 9.01074 21.45 9.01074 23.05Z" fill="%2354A399"/></svg>');
  }
}
@media (min-width: 1400px) {
  .page-template-page-about--news-template h1 {
    margin-bottom: 3rem;
  }
  .page-template-page-about--news-template .header-inner {
    margin: 0 auto 14rem;
  }
  .page-template-page-about--news-template .featured-image {
    position: relative;
    margin-top: -12rem;
  }
  .page-template-page-about--news-template .share-buttons.bottom {
    margin-bottom: 12rem;
  }
  .page-template-page-about--news-template .copy-column h2 {
    font-size: 3.6rem;
    margin: 6rem auto;
    max-width: 1166px;
  }
  .page-template-page-about--news-template .media-contact {
    max-width: 815px;
    margin: 6rem auto;
  }
  .page-template-page-about--news-template .about-vocovision {
    padding: 9rem 0;
  }
  .page-template-page-about--news-template .about-vocovision .container {
    max-width: 926px;
  }
}