/* FONTS
======================================================= */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/Content/fonts/BarlowCondensed-Bold.eot");
  src: url("/Content/fonts/BarlowCondensed-Bold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/BarlowCondensed-Bold.woff") format("woff"), url("/Content/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Light.eot");
  src: url("/Content/fonts/Inter-Light.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-Light.woff") format("woff"), url("/Content/fonts/Inter-Light.woff2") format("woff2"), url("/Content/fonts/Inter-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-ExtraBold.eot");
  src: url("/Content/fonts/Inter-ExtraBold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-ExtraBold.woff") format("woff"), url("/Content/fonts/Inter-ExtraBold.woff2") format("woff2"), url("/Content/fonts/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Bold.eot");
  src: url("/Content/fonts/Inter-Bold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-Bold.woff") format("woff"), url("/Content/fonts/Inter-Bold.woff2") format("woff2"), url("/Content/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Medium.eot");
  src: url("/Content/fonts/Inter-Medium.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-Medium.woff2") format("woff2"), url("/Content/fonts/Inter-Medium.woff") format("woff"), url("/Content/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Regular.eot");
  src: url("/Content/fonts/Inter-Regular.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-Regular.woff") format("woff"), url("/Content/fonts/Inter-Regular.woff2") format("woff2"), url("/Content/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-SemiBold.eot");
  src: url("/Content/fonts/Inter-SemiBold.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-SemiBold.woff") format("woff"), url("/Content/fonts/Inter-SemiBold.woff2") format("woff2"), url("/Content/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Thin.eot");
  src: url("/Content/fonts/Inter-Thin.eot?#iefix") format("embedded-opentype"), url("/Content/fonts/Inter-Thin.woff") format("woff"), url("/Content/fonts/Inter-Thin.woff2") format("woff2"), url("/Content/fonts/Inter-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap; }

/* COLORS
======================================================= */
/* Blog */
.blogWrapper {
  padding: 4em 10%; }
  @media only screen and (max-width: 1700px) {
    .blogWrapper {
      padding: 4em 5%; } }
  @media only screen and (max-width: 1500px) {
    .blogWrapper {
      padding: 3.5em 50px; } }
  @media only screen and (max-width: 1200px) {
    .blogWrapper {
      padding: 3.5em 40px; } }
  @media only screen and (max-width: 1000px) {
    .blogWrapper {
      padding: 2.5em 40px; } }
  @media only screen and (max-width: 640px) {
    .blogWrapper {
      padding: 2em 5%; } }

.entryBlogWrapper {
  padding: 3em 10% 6em;
  text-align: left; }
  @media only screen and (max-width: 1700px) {
    .entryBlogWrapper {
      padding: 3em 5% 4.5em; } }
  @media only screen and (max-width: 1500px) {
    .entryBlogWrapper {
      padding: 3em 50px 3.5em; } }
  @media only screen and (max-width: 1200px) {
    .entryBlogWrapper {
      padding: 3em 40px 3.5em; } }
  @media only screen and (max-width: 1000px) {
    .entryBlogWrapper {
      padding: 2.5em 40px; } }
  @media only screen and (max-width: 640px) {
    .entryBlogWrapper {
      padding: 2em 5%; } }
  .entryBlogWrapper .breadcrumbs {
    margin-bottom: 2.5em;
    line-height: 1.5; }
    @media only screen and (max-width: 1000px) {
      .entryBlogWrapper .breadcrumbs {
        margin-bottom: 1.5em; } }
    @media only screen and (max-width: 640px) {
      .entryBlogWrapper .breadcrumbs {
        font-size: 15px; } }
  .entryBlogWrapper .blogEntryImg {
    width: 100%;
    height: auto; }
  .entryBlogWrapper .backBtn {
    margin-top: 2em; }
  .entryBlogWrapper .blogBody {
    margin-top: 1em; }
  .entryBlogWrapper .share {
    margin-top: 1.25em;
    padding-bottom: 1.25em;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.5em; }
    .entryBlogWrapper .share span {
      display: inline-block;
      font-weight: bold;
      margin-right: 10px;
      vertical-align: middle; }
    .entryBlogWrapper .share a {
      display: inline-block;
      vertical-align: middle;
      margin-right: 3px; }
      .entryBlogWrapper .share a svg {
        height: 30px;
        width: 30px;
        fill: #333;
        -webkit-transition: 0.25s var(--timing);
        -o-transition: 0.25s var(--timing);
        transition: 0.25s var(--timing); }
      .entryBlogWrapper .share a:hover svg {
        fill: #ef2d2d; }

.BlogListWrap {
  text-align: center;
  width: 100%; }

.BlogList__item {
  background: #eee;
  position: relative;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  width: 23%;
  height: auto;
  margin: 0.75em 0.8%;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  border-radius: 4px;
  overflow: hidden; }
  @media only screen and (max-width: 1500px) {
    .BlogList__item {
      width: 30.3%; } }
  @media only screen and (max-width: 850px) {
    .BlogList__item {
      width: 47%;
      margin: 0 1.2% 1.5em; } }
  @media only screen and (max-width: 520px) {
    .BlogList__item {
      width: 100%;
      margin: 0 0 1.5em; } }

.BlogList__item a {
  text-decoration: none;
  color: #000; }

.BlogList__Visual {
  position: relative; }

.BlogList__ImgThumb img {
  width: 100%;
  vertical-align: bottom; }

.YoutubeThumb {
  width: 100%;
  vertical-align: bottom;
  margin-bottom: -65px;
  display: block; }

.BlogList__VidPlayBtn {
  width: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.BlogList__date {
  background: #ddd;
  margin: 0;
  position: relative;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  padding: 8px 0; }

.BlogEntryDate__month {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  width: 100%;
  margin-top: 5px;
  letter-spacing: 0.5px;
  color: #333;
  margin: 5px 2px; }

.BlogEntryDate__year {
  color: #333;
  width: 100%;
  font-size: 18px;
  letter-spacing: 0.5px;
  font-weight: bold;
  margin: 5px 2px;
  text-align: center; }

h3.BlogList__heading {
  margin: 15px 0 10px 0;
  font-size: 16px;
  padding: 0 15px;
  line-height: 1.4; }

p.BlogList__body {
  font-size: 13px;
  padding: 0 20px; }

.btn--blogList {
  color: #ef2d2d !important;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px;
  margin-bottom: 0.8em;
  display: block; }
  .btn--blogList:hover {
    color: #00a4ab !important; }

img.blogEntryImg {
  width: auto;
  max-width: 100%; }

.videoWrapper,
.resourcesExtra {
  padding: 4em 10%;
  text-align: center; }
  @media only screen and (max-width: 1700px) {
    .videoWrapper,
    .resourcesExtra {
      padding: 4em 5%; } }
  @media only screen and (max-width: 1500px) {
    .videoWrapper,
    .resourcesExtra {
      padding: 3.5em 50px; } }
  @media only screen and (max-width: 1200px) {
    .videoWrapper,
    .resourcesExtra {
      padding: 3.5em 40px; } }
  @media only screen and (max-width: 1000px) {
    .videoWrapper,
    .resourcesExtra {
      padding: 2.5em 40px; } }
  @media only screen and (max-width: 640px) {
    .videoWrapper,
    .resourcesExtra {
      padding: 2em 5%; } }
  .videoWrapper .VideoList__item,
  .resourcesExtra .VideoList__item {
    position: relative;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: auto;
    margin: 0.75em 0.8%;
    overflow: hidden; }
    @media only screen and (max-width: 1500px) {
      .videoWrapper .VideoList__item,
      .resourcesExtra .VideoList__item {
        width: 30.3%; } }
    @media only screen and (max-width: 850px) {
      .videoWrapper .VideoList__item,
      .resourcesExtra .VideoList__item {
        width: 47%;
        margin: 0 1.2% 1.5em; } }
    @media only screen and (max-width: 520px) {
      .videoWrapper .VideoList__item,
      .resourcesExtra .VideoList__item {
        width: 100%;
        margin: 0 0 1.5em; } }
    .videoWrapper .VideoList__item .VideoList__ImgThumb img,
    .resourcesExtra .VideoList__item .VideoList__ImgThumb img {
      width: 100%;
      vertical-align: bottom; }
    .videoWrapper .VideoList__item .VideoHeading,
    .resourcesExtra .VideoList__item .VideoHeading {
      font-size: 20px;
      padding: 0.8em 6px;
      background-color: #eee;
      margin-bottom: 0;
      display: block;
      -webkit-transition: 0.25s var(--timing);
      -o-transition: 0.25s var(--timing);
      transition: 0.25s var(--timing); }
    .videoWrapper .VideoList__item:hover .VideoHeading,
    .resourcesExtra .VideoList__item:hover .VideoHeading {
      background-color: #dadada; }

.entryVideoWrapper {
  padding: 3em 10% 6em; }
  @media only screen and (max-width: 1700px) {
    .entryVideoWrapper {
      padding: 3em 5% 4.5em; } }
  @media only screen and (max-width: 1500px) {
    .entryVideoWrapper {
      padding: 3em 50px 3.5em; } }
  @media only screen and (max-width: 1200px) {
    .entryVideoWrapper {
      padding: 3em 40px 3.5em; } }
  @media only screen and (max-width: 1000px) {
    .entryVideoWrapper {
      padding: 2.5em 40px; } }
  @media only screen and (max-width: 640px) {
    .entryVideoWrapper {
      padding: 2em 5%; } }
  .entryVideoWrapper .videoTitle {
    text-align: center; }
    @media only screen and (max-width: 640px) {
      .entryVideoWrapper .videoTitle {
        text-align: left; } }
  .entryVideoWrapper .breadcrumbs {
    margin-bottom: 2.5em;
    line-height: 1.5; }
    @media only screen and (max-width: 1000px) {
      .entryVideoWrapper .breadcrumbs {
        margin-bottom: 1.5em; } }
    @media only screen and (max-width: 640px) {
      .entryVideoWrapper .breadcrumbs {
        font-size: 15px; } }
  .entryVideoWrapper .backBtn {
    margin-top: 2em; }
  .entryVideoWrapper .blogBody {
    margin-top: 1em; }
  .entryVideoWrapper .transcript {
    padding-top: 3em;
    border-top: 1px solid #ddd;
    margin-top: 2.25em; }
    @media only screen and (max-width: 640px) {
      .entryVideoWrapper .transcript {
        padding-top: 2em; } }
    .entryVideoWrapper .transcript .transcriptTitle {
      font-size: 23px;
      color: #333;
      font-family: "Inter", sans-serif;
      font-weight: 300; }
