@charset "UTF-8";
/*
 Buttons – @include button();
========================================================================== */
/*
 Rem to Pix Calculate for fonts
========================================================================== */
/* Fluid Type - Responsive fonts sizing
https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/
usage: @include font-size(min viewport size, max viewport, min font size, max font size);
========================================================================== */
/* Function to calculate clamp
https://dev.to/christianmay21/easy-css-clamp-scss-mixin-1225
usage: padding-top: clamp-calc(size at min, size at max, min viewport size, max viewport);
========================================================================== */
/*
 Tint (adds white) – @include tint(red, 10%);
========================================================================== */
/*
 Shade (adds black) – @include shade(red, 10%);
========================================================================== */
/*
 Hex to RGB – hextorgb(#000); //returns 0, 0, 0,
========================================================================== */
/*
 Object Fit – @include object-fit(cover);
========================================================================== */
/*
 Rows – @include rows(4,10px); px or % support
========================================================================== */
/*
 Aspect Ratio – @include aspect-ratio(9,16) 0r @include aspect-ratio(70%,30%)
========================================================================== */
/*
 Align Full – @include alignfull;
========================================================================== */
/*
 Min Width Query – @include media($desktop);
========================================================================== */
/*
 Max Width Query – @include media-height($tablet);
========================================================================== */
/*
 Min Width and Max Width Query – @include media-between($tablet, $desktop);
========================================================================== */
/*
 Min Height Query – @include media-height($tablet);
========================================================================== */
/*
 Truncate – @include truncate-text(ellipsis);
========================================================================== */
/*
 Rem Calculate – @include rem(padding, 30px);
========================================================================== */
/*
 Column width with margin
========================================================================== */
/*
 SCSS variable in background image with SVG image data URI
 usage – style="fill: friendly-color(#131313);"
========================================================================== */
/*
 Generates classes and css variables for custom color scale from of a specific Hexcode or HSLA
 @include generate-color-palette(#6a778c, 'slate', 'variables');
 @include generate-color-palette(hsla(217, 90%, 57%, 1.00), 'cobalt', 'classes');
========================================================================== */
/*
 Generates classes for custom color scale from (tint to shade) of a specific Hexcode or HSLA
 $color-input: #6a778c;
 $primary: generate-color-palette($color-input);
 .example { background: map-get($primary, "600"); }
========================================================================== */
/*
 Generates sass variable map for custom color paletter from a range of colors
 Inspired by: https://feldsdev.medium.com/creating-a-palette-generator-in-sass-5451c6d56a1f
========================================================================== */
/* Function to create a custom list of weights */
/*
 As a function (color name optional)
 $color: as-function('gold',(#FDFEE8, #FBFFC2, #FCFF89, #FFFD51, #FDF112, #ECD606, #CCA902, #A37905, #865F0D, #724D11, #432905));
 .example { background: map-get($color, gold-800);}
========================================================================== */
/*
 Theme Path
========================================================================== */
/*
 Font Family
========================================================================== */
/*
 Font Size
========================================================================== */
/*
 Colors
========================================================================== */
/*
 Button Styles
========================================================================== */
/*
 Helpers
========================================================================== */
/*
 Sizes
========================================================================== */
/*
 Columns
========================================================================== */
/*
 Buttons – @include button();
========================================================================== */
/*
 Rem to Pix Calculate for fonts
========================================================================== */
/* Fluid Type - Responsive fonts sizing
https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/
usage: @include font-size(min viewport size, max viewport, min font size, max font size);
========================================================================== */
/* Function to calculate clamp
https://dev.to/christianmay21/easy-css-clamp-scss-mixin-1225
usage: padding-top: clamp-calc(size at min, size at max, min viewport size, max viewport);
========================================================================== */
/*
 Tint (adds white) – @include tint(red, 10%);
========================================================================== */
/*
 Shade (adds black) – @include shade(red, 10%);
========================================================================== */
/*
 Hex to RGB – hextorgb(#000); //returns 0, 0, 0,
========================================================================== */
/*
 Object Fit – @include object-fit(cover);
========================================================================== */
/*
 Rows – @include rows(4,10px); px or % support
========================================================================== */
/*
 Aspect Ratio – @include aspect-ratio(9,16) 0r @include aspect-ratio(70%,30%)
========================================================================== */
/*
 Align Full – @include alignfull;
========================================================================== */
/*
 Min Width Query – @include media($desktop);
========================================================================== */
/*
 Max Width Query – @include media-height($tablet);
========================================================================== */
/*
 Min Width and Max Width Query – @include media-between($tablet, $desktop);
========================================================================== */
/*
 Min Height Query – @include media-height($tablet);
========================================================================== */
/*
 Truncate – @include truncate-text(ellipsis);
========================================================================== */
/*
 Rem Calculate – @include rem(padding, 30px);
========================================================================== */
/*
 Column width with margin
========================================================================== */
/*
 SCSS variable in background image with SVG image data URI
 usage – style="fill: friendly-color(#131313);"
========================================================================== */
/*
 Generates classes and css variables for custom color scale from of a specific Hexcode or HSLA
 @include generate-color-palette(#6a778c, 'slate', 'variables');
 @include generate-color-palette(hsla(217, 90%, 57%, 1.00), 'cobalt', 'classes');
========================================================================== */
/*
 Generates classes for custom color scale from (tint to shade) of a specific Hexcode or HSLA
 $color-input: #6a778c;
 $primary: generate-color-palette($color-input);
 .example { background: map-get($primary, "600"); }
========================================================================== */
/*
 Generates sass variable map for custom color paletter from a range of colors
 Inspired by: https://feldsdev.medium.com/creating-a-palette-generator-in-sass-5451c6d56a1f
========================================================================== */
/* Function to create a custom list of weights */
/*
 As a function (color name optional)
 $color: as-function('gold',(#FDFEE8, #FBFFC2, #FCFF89, #FFFD51, #FDF112, #ECD606, #CCA902, #A37905, #865F0D, #724D11, #432905));
 .example { background: map-get($color, gold-800);}
========================================================================== */
/*
 Video Player
========================================================================== */
.block-video-player .plyr {
  border-radius: 10px;
}
.block-video-player .plyr * {
  outline: none !important;
}
.block-video-player .plyr .plyr__video-wrapper {
  padding-bottom: 0 !important;
}
.block-video-player .plyr .plyr__poster {
  transform: scale(1.005);
}
.block-video-player .video-js {
  width: 100%;
  height: auto;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.block-video-player .video-js:before {
  content: "";
  float: left;
  padding-bottom: 56.25%;
}
.block-video-player .video-js:after {
  content: "";
  display: table;
  clear: both;
}
.block-video-player .video-js video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.block-video-player.alignfull .plyr {
  border-radius: 0 !important;
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true],
.plyr__control--overlaid {
  background: #2b505f;
}

.plyr--full-ui input[type=range] {
  color: #2b505f;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  outline: none;
  outline: none;
  outline-offset: none;
}