@charset "UTF-8";
/**
    A partial file defining mixins (CSS functions)
    for styles that are reused with different values

    to use: 
        At top od file:
        // Utilities
        @import "mixin"; // <-- this is relative to where the file is ON THE DRIVE. Does not matter once uploaded

        #main-wrapper{
            @include transparentColor(255, 123, 32, .8);
        }
 */
/**
 *  SHADOWS
 *  
 *  $h                  : horizontal offset; positive will be on the right of the box, negative = left of the box
 *  $v                  : vertical offset; negative = above, positive = below
 *  $blur [optional]    : blur;  0 = sharp, higher = more blurred
 *  $spread [optional]  : spread; positive increase size, negative decrease size, default is 0. Use negative spread when trying for shadow on only one side
 *  $color              : color of the shadow
 *  $inset [keyword]    : if set ot "inset" shadow is inside box instead
 *  
 */
/**
 * ANIMATIONS
 *
 * Each @keyframes at-rule defines what should happen at specific moments during the animation. 
 * For example, 0% is the beginning of the animation and 100% is the end. 
 * These keyframes can then be controlled either by the shorthand animation property, 
 * or its eight sub-properties, to give more control over how those keyframes should be manipulated
 *
 *  SUB-PROPERTIES
 *  
 *      animation-name:             declares the name of the @keyframes at-rule to manipulate.
        animation-duration:         the length of time it takes for an animation to complete one cycle.
        animation-timing-function:  establishes preset acceleration curves such as ease or linear.
        animation-delay:            the time between the element being loaded and the start of the animation sequence.
        animation-direction:        sets the direction of the animation after the cycle. Its default resets on each cycle.
        animation-iteration-count:  the number of times the animation should be performed.
        animation-fill-mode:        sets which values are applied before/after the animation.
                                    For example, you can set the last state of the animation to remain on screen, 
                                    or you can set it to switch back to before when the animation began.
        animation-play-state:       pause/play the animation.

 */
/**
 *  TRANSITIONS
 * $property            : a particular property (e.g., background-color), or all
 * $duration            : how long the transition will take, in seconds
 * $timing [optional]   : timing-function; describes how a transition will proceed over its duration, 
 *                  e.g., 'ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end'
 *                  [default: linear]
 * $delay [optional]    : time to delay starting transition
 * 
 */
/**
 *  BORDER RADIUS
 *
 * $radius : size of radius
 * 
 */
/**
*   @param {string} name of the breakpoint to use
*   It checks whether the asked breakpoint exist in the breakpoints map
*   If it exists, it prints a media query based on the value of the asked breakpoint
*   If it doesn’t, it warns the user to check their code

EX) $breakpoints: (
  'small'  : ( min-width:  767px ),
  'medium' : ( min-width:  992px ),
  'large'  : ( min-width: 1200px )
);

*   Author: Hugo Giraudel
*   source: https://www.sitepoint.com/managing-responsive-breakpoints-sass/

*/
.vid-cap .slide-post-link {
  background-color: #405175;
  border: 1px solid #555555;
  color: #FFFFFF;
  display: inline-block;
  font-weight: bold;
  margin-bottom: sizing();
  padding: sizing();
  text-align: center;
  text-decoration: none;
  width: 100%;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .vid-cap .active.slide-post-link {
    color: #192847;
    background-color: #9BC9FF; }
  .vid-cap .slide-post-link:hover, .vid-cap .slide-post-link:focus {
    color: #192847;
    background-color: #9BC9FF; }
  @media (max-width: 960px) {
    .vid-cap .slide-post-link {
      width: 50%; } }
  @media (max-width: 750px) {
    .vid-cap .slide-post-link {
      margin: sizing() auto;
      padding: sizing(0.5);
      width: 90%; } }

/*
    print out property value to be used as spacing/sizing units
    @param $type [string] - global or relative, let's us know whetehr to use rem or em
    @param $amount [int] - amount to multiply by
  */
/**
    A partial file defining mixins (CSS functions)
    for styles that are reused with different values

    to use: 
        At top od file:
        // Utilities
        @import "mixin"; // <-- this is relative to where the file is ON THE DRIVE. Does not matter once uploaded

        #main-wrapper{
            @include transparentColor(255, 123, 32, .8);
        }
 */
/**
 *  SHADOWS
 *  
 *  $h                  : horizontal offset; positive will be on the right of the box, negative = left of the box
 *  $v                  : vertical offset; negative = above, positive = below
 *  $blur [optional]    : blur;  0 = sharp, higher = more blurred
 *  $spread [optional]  : spread; positive increase size, negative decrease size, default is 0. Use negative spread when trying for shadow on only one side
 *  $color              : color of the shadow
 *  $inset [keyword]    : if set ot "inset" shadow is inside box instead
 *  
 */
/**
 * ANIMATIONS
 *
 * Each @keyframes at-rule defines what should happen at specific moments during the animation. 
 * For example, 0% is the beginning of the animation and 100% is the end. 
 * These keyframes can then be controlled either by the shorthand animation property, 
 * or its eight sub-properties, to give more control over how those keyframes should be manipulated
 *
 *  SUB-PROPERTIES
 *  
 *      animation-name:             declares the name of the @keyframes at-rule to manipulate.
        animation-duration:         the length of time it takes for an animation to complete one cycle.
        animation-timing-function:  establishes preset acceleration curves such as ease or linear.
        animation-delay:            the time between the element being loaded and the start of the animation sequence.
        animation-direction:        sets the direction of the animation after the cycle. Its default resets on each cycle.
        animation-iteration-count:  the number of times the animation should be performed.
        animation-fill-mode:        sets which values are applied before/after the animation.
                                    For example, you can set the last state of the animation to remain on screen, 
                                    or you can set it to switch back to before when the animation began.
        animation-play-state:       pause/play the animation.

 */
/**
 *  TRANSITIONS
 * $property            : a particular property (e.g., background-color), or all
 * $duration            : how long the transition will take, in seconds
 * $timing [optional]   : timing-function; describes how a transition will proceed over its duration, 
 *                  e.g., 'ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end'
 *                  [default: linear]
 * $delay [optional]    : time to delay starting transition
 * 
 */
/**
 *  BORDER RADIUS
 *
 * $radius : size of radius
 * 
 */
/**
*   @param {string} name of the breakpoint to use
*   It checks whether the asked breakpoint exist in the breakpoints map
*   If it exists, it prints a media query based on the value of the asked breakpoint
*   If it doesn’t, it warns the user to check their code

EX) $breakpoints: (
  'small'  : ( min-width:  767px ),
  'medium' : ( min-width:  992px ),
  'large'  : ( min-width: 1200px )
);

*   Author: Hugo Giraudel
*   source: https://www.sitepoint.com/managing-responsive-breakpoints-sass/

*/
.vid-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px 0px;
  width: 100%; }
  @media (max-width: 1050px) {
    .vid-wrapper {
      border-left: 1px solid #DDDDDD;
      border-right: 1px solid #DDDDDD;
      display: flex;
      height: auto;
      flex-direction: column;
      justify-content: center; } }
  .vid-wrapper.player-left {
    float: left;
    margin-right: 1.5rem;
    width: 50%; }
  .vid-wrapper.player-right {
    float: right;
    margin-left: 1.5rem;
    width: 50%; }
  .vid-wrapper .vid-playlist {
    border-bottom: 1px solid #CCCCCC;
    height: 100%;
    max-height: 310px;
    overflow: hidden;
    position: relative;
    margin-left: 10px;
    width: calc(100% - 560px); }
    @media (max-width: 1050px) {
      .vid-wrapper .vid-playlist {
        border-top: 1px solid #CCCCCC;
        order: 4;
        padding-top: 20px;
        width: 100%; } }
    .vid-wrapper .vid-playlist .vid-item {
      border: 1px solid transparent;
      clear: both;
      color: #192847;
      display: flex;
      margin: 0.375rem 0;
      overflow: auto;
      padding: 0.375rem;
      position: relative;
      text-decoration: none; }
      .vid-wrapper .vid-playlist .vid-item:hover, .vid-wrapper .vid-playlist .vid-item:focus {
        color: #9BC9FF; }
      @media (max-width: 1050px) {
        .vid-wrapper .vid-playlist .vid-item {
          padding: 15px 10px; } }
      .vid-wrapper .vid-playlist .vid-item .vid-thumb {
        display: inline-block;
        height: 100%;
        margin-right: 0.375rem;
        width: calc(35% - 5px); }
        @media (max-width: 1050px) {
          .vid-wrapper .vid-playlist .vid-item .vid-thumb {
            margin-right: 15px;
            width: calc(35% - 15px); } }
        .vid-wrapper .vid-playlist .vid-item .vid-thumb img {
          height: auto;
          width: 100%; }
      .vid-wrapper .vid-playlist .vid-item .vid-text {
        display: inline-block;
        font-size: .9em;
        font-style: italic;
        height: 100%;
        padding: 0;
        position: relative;
        width: 65%; }
        @media (max-width: 1050px) {
          .vid-wrapper .vid-playlist .vid-item .vid-text {
            font-size: 1em; } }
        @media (max-width: 650px) {
          .vid-wrapper .vid-playlist .vid-item .vid-text {
            font-size: .8em; } }
      .vid-wrapper .vid-playlist .vid-item.vid-active {
        background-color: #DDDDDD;
        border: 1px solid #405175; }
      .vid-wrapper .vid-playlist .vid-item:hover, .vid-wrapper .vid-playlist .vid-item:focus {
        background-color: #DDDDDD;
        border: 1px solid #405175;
        color: #192847;
        text-decoration: none; }
        .vid-wrapper .vid-playlist .vid-item:hover .vid-thumb img, .vid-wrapper .vid-playlist .vid-item:focus .vid-thumb img {
          opacity: .8; }
    .vid-wrapper .vid-playlist .clearboth {
      margin: 10px 0px; }
    .vid-wrapper .vid-playlist.no-thumbs .vid-item {
      border-bottom: 1px solid #DDDDDD; }
      .vid-wrapper .vid-playlist.no-thumbs .vid-item:last-of-type {
        border-bottom: none; }
        .vid-wrapper .vid-playlist.no-thumbs .vid-item:last-of-type:hover, .vid-wrapper .vid-playlist.no-thumbs .vid-item:last-of-type:focus {
          border: 1px solid #405175; }
      .vid-wrapper .vid-playlist.no-thumbs .vid-item:hover, .vid-wrapper .vid-playlist.no-thumbs .vid-item:focus {
        border: 1px solid #405175; }
      .vid-wrapper .vid-playlist.no-thumbs .vid-item.vid-active, .vid-wrapper .vid-playlist.no-thumbs .vid-item:last-of-type.vid-active {
        border-bottom: 1px solid #405175; }
      .vid-wrapper .vid-playlist.no-thumbs .vid-item .vid-text {
        width: 100%; }
  .vid-wrapper .plyr {
    margin: 0;
    max-width: 600px;
    width: 100%; }
    .vid-wrapper .plyr video {
      height: 100%;
      width: 100%; }
    @media (max-width: 1050px) {
      .vid-wrapper .plyr {
        order: 1;
        width: 100%; } }
    .vid-wrapper .plyr iframe {
      height: 100%;
      width: 100%; }
    .vid-wrapper .plyr .plyr__video-embed {
      max-height: 240px; }
  .vid-wrapper.player-single .plyr {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; }
  .vid-wrapper.player-single.hide-caption .vid-cap {
    display: none; }
  .vid-wrapper .vid-playlist ~ .plyr {
    margin-right: 10px;
    width: calc(65% - 10px); }
    @media (max-width: 960px) {
      .vid-wrapper .vid-playlist ~ .plyr {
        margin: 0px auto;
        width: 100%; } }
  .vid-wrapper .skip-to {
    width: 100%; }
  @media (max-width: 960px) {
    .vid-wrapper .skip-link {
      order: 3; }
    .vid-wrapper .skip-to {
      order: 5; } }

.vid-cap {
  border-bottom: 1px solid #BBBBBB;
  color: #333333;
  font-size: .9em;
  font-style: italic;
  max-height: 150px;
  margin-bottom: 20px;
  margin-top: 10px;
  overflow: auto;
  padding-bottom: 15px;
  position: relative;
  width: 100%;
  /* &.pre-vid-cap{
      display:none;
      
      @include responsive('tablet'){
          border:none;
          display:block;
          padding:10px;
      }
     
  } */
  /* &.post-vid-cap{
      margin-bottom: 20px; 
  
     @include responsive('tablet'){
         display:none;
     }
  } */ }
  @media (max-width: 1050px) {
    .vid-cap {
      border: none;
      display: block;
      order: 2;
      padding: 10px; } }
  .vid-cap .slide-post-link {
    cursor: pointer;
    display: block;
    font-weight: normal;
    margin-bottom: 0.375rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    padding: 0.75rem;
    text-decoration: none;
    /* &:hover,
    &:focus {
        background-color: $lg01;
    } */ }

.plyr__video-embed {
  height: 100%; }

/*# sourceMappingURL=vidplyr_styles.css.map */