/* ==========================================================================
   Sass imports
   ========================================================================== */
/* ==========================================================================
   Helpers
   ========================================================================== */
/*
 * Variables
 */
/*
 * DropKick styling
 */
/*
 * Plyr styling
 */
/*
 * Font Weights
 */
/*
 * Functions
 */
/*
 * Mixins
 */
/* ==========================================================================
   Box Model
   ========================================================================== */
/*
 * Modern clearfix
 */
/*
 * Older pie clearfix, useful when overflow needs to be visible
 */
/*
 * Undo float styles, useful for responsive styles
 */
/*
 * Eliminate unwated element styling
 */
/*
 * Vertical align an element
 */
/*
 * Ensures correct alignemnt for inline block elements
 */
/* ==========================================================================
   Lists
   ========================================================================== */
/*
 * Remove bullets from list container element and list elements
 */
/*
 * Remove bullets from list elements
 */
/*
 * Style list container element
 */
/*
 * Style list elements
 */
/*
 * Shorthand for the above 2 mixins, useful if you aren't adding any other styles
 */
/*
 * Style list container element
 */
/*
 * Style list elements
 */
/*
 * Shorthand for the above 2 mixins, useful if you aren't adding any other styles
 */
/* --------------------------------
   Media Queries 
   -------------------------------- */
/*
 * Map of breakpoints
 *
 * @include mq(md);
 * @include mq-down(md);
 */
/*
 * Media Query - Larger than 
 *  
 * @include mq(md) {
 *   content
 * }    
 */
/*
 * Media Query - Smaller than 
 *  
 * @include mq(md) {
 *   content
 * }    
 */
/* ==========================================================================
   Shapes
   ========================================================================== */
/*
 * Triangle
 *
 * @include triangle(12px, gray, down);
 * @include triangle(12px 6px, gray lavender, up-left);
 */
/*
 * Angled edges
 *
 * @include angle(after);
 * @include angle(both 6px, true, 3deg);
 */
/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Font size in rems
 */
/*
 * Hide the text of an element e.g. for image replacement
 */
/*
 * Sets word wrapping properties
 */
/*
 * Sets hyphenation styles
 */
/*
 * Set an element to hyphenate content
 */
/*
 * Set single line ellipsis
 */
/* --------------------------------
   Media Queries 
   -------------------------------- */
/*
 * Map of breakpoints
 *
 * @include mq(md);
 * @include mq-down(md);
 */
/*
 * Media Query - Larger than 
 *  
 * @include mq(md) {
 *   content
 * }    
 */
/*
 * Media Query - Smaller than 
 *  
 * @include mq(md) {
 *   content
 * }    
 */
@import url("https://use.typekit.net/kqs6vvr.css");
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-button > .vjs-icon-placeholder:before {
  text-align: center;
}

@font-face {
  font-family: VideoJS;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABBIAAsAAAAAGoQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3RY21hcAAAAYQAAADQAAADIjn098ZnbHlmAAACVAAACv4AABEIAwnSw2hlYWQAAA1UAAAAKwAAADYV1OgpaGhlYQAADYAAAAAbAAAAJA4DByFobXR4AAANnAAAAA8AAACE4AAAAGxvY2EAAA2sAAAARAAAAEQ9NEHGbWF4cAAADfAAAAAfAAAAIAEyAIFuYW1lAAAOEAAAASUAAAIK1cf1oHBvc3QAAA84AAABDwAAAZ5AAl/0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQ7xTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGBHcRdyA4RZgQRAC4HCwEAAHic7dFprsIgAEXhg8U61XmeWcBb1FuQP4w7ZQXK5boMm3yclFDSANAHmuKviBBeBPQ8ymyo8w3jOh/5r2ui5nN6v8sYNJb3WMdeWRvLji0DhozKdxM6psyYs2DJijUbtuzYc+DIiTMXrty4k8oGLb+n0xCe37ekM7Z66j1DbUy3l6PpHnLfdLO5NdSBoQ4NdWSoY9ON54mhdqa/y1NDnRnq3FAXhro01JWhrg11Y6hbQ90Z6t5QD4Z6NNSToZ4N9WKoV0O9GerdUJORPqkhTd54nJ1YDXBU1RV+576/JBs2bPYPkrDZt5vsJrv53V/I5mclhGDCTwgGBQQSTEji4hCkYIAGd4TGIWFAhV0RQTpWmQp1xv6hA4OTOlNr2zFANbHUYbq2OtNCpViRqsk+e+7bTQAhzti8vPfuPffcc88959zznbcMMPjHD/KDDGEY0ABpYX384NhlomIYlo4JISGEY9mMh2FSidYiqkEUphtNYDSY/dXg9023l4DdxlqUl0chuZRhncJKrsCQHIwcGuwfnhMIzBnuH4Sym+1D2zaGjheXlhYfD238z80mKYMmvJ5XeOTzd8z9eujbMxJNhu4C9xPE/bCMiDuSNIWgkTQwBE55hLSAE7ZwhrHLnAHZOGV/kmBGTiNjZxzI77Hb7Hqjz68TjT6vh+5JT/cCIkqS0D6CqPf5jX4Qjdx5j6vlDfZM4aZFdbVXIxtOlJaP/WottMnH6CJQ3bTiue3PrY23HjnChtuamxwvvzFjxkPrNj3z0tG9T561HDYf6OgmRWvlY3JQHoQb8ltV2Yet7YfWctEjR1AtxS/cSX6U4alf6NJEBQ7YKg9wrXQKd0IeZCb2ux75Uhh1Un+Nz+9LTOE7PK777nN5xqdTneTBhCbx446mZrhnUkrCz2YhA9dSMxaG0SYmT8hi9ZPu1E94PJYQSH6LRmhxec7Q7ZeXntgQuVpbh+a4qWNsckVyTdn0P7o7DpgPW84+uRcq0BITflBikGdUjAZ9wYBVI3mtrNvr9kpg1UsaK6t3690aoorC1lg0GpMH2HAMtkZjsSi5Ig9ESVosOh7GQfLjKNLvKpMKkLSKNFAka710GdgSi8oDMSoNhqjkKBXTgn3swtaxyzGkUzIzae9RtLdWkSlZ1KDX6EzgllzV4NV4SoDFSOGD4+HCeQUF8wrZ5Hs8zIb5EaVxy8DYFTbMCJPnLIWZxugZE2NlivC0gc1qEQUR8jEKgZcAXeH18BiCgl5nlHh0CrjB4Hb5fX4gb0J7c9PuHVsfgkx2n/vTY/JV8kn8PGxf7faOZ8qX8JVByuIf4whk9sqXli2hvPJV9hrp0hY7l8r2x37ydaVsb4xvXv/47v2NjfCl8m5oRDJclFMoE1yk0Uh1Te4/m8lFXe9qBZD0EkheicebXvzI2PLCuoKCukLuhPIeKwaHPEouxw3kMqaIUXDQ1p0mip+MyCORSCQaoUsnY1VZ38nUTrG21WvVo4f1OsEJFhvSfAFwGfT8VHRMeAVUpwLOoLzjT/REIj3O3FhuURE+nERF+0pTId5Fyxv5sfwGyg4O+my4vZv0sZm7oeQlFZORiB+tG0MweVNraeitl7yxiPIHTk4/diVxs94o5lEYishB2iAtkchEnsActoEpx44Fo8XnsQMaA22BlqC20RmhBKzYojZyYaxg+JggMc4HHY2m+L9EkWSYljirOisrO7d3VorxzyZ6Vc4lJqITAu1b2wOBdrLElAP+bFc2eGaZFVbkmJktv5uT6Jlz5D/MnBFor6ig/JPnRViBsV3LNKGGqB1ChJ0tgQywlVLFJIuQgTFttwkiKxhyQdAZMdMYtSaoAewqfvXVYPAbDT6/1mez85YS8FSDywQ6NfAnef6FNEGMilnppyvn5rB6tTyq1pOceRWnp2WJEZFXHeX5oyoem1nTTgdqc4heDY7bOeKz63vnz+/dRx+s31Ht2JGanQ5seirfWJL9tjozU/12TnEjn5oux9OzU3ckGbBzBwNOyk69JykKH0n/0LM9A72tuwM3zQpIRu4AxiToseEpgPOmbROyFe9/X2yeUvoUsCyEvjcgs7fpWP3/aKlFN0+6HFUe6D9HFz/XPwBlN9tTqNyZjFJ8UO2RUT5/h4CptCctEyeisnOyXjALEp7dXKaQKf6O7IMnGjNNACRMLxqdYJX8eMLvmmd68D+ayBLyKKYZwYxDt/GNhzETDJ05Qxlyi3pi3/Z93ndYVSumgj0V/KkIFlO6+1K3fF2+3g0q+YtuSIf0bvmLqV09nnobI6hwcjIP8aPCKayjsF5JBY3LaKAeRLSyYB1h81oTwe9SlPMkXB7G0mfL9q71gaqqwPqu67QRKS1+ObTx+sbQy9QV2OQHEScGkdFBeT7v7qisqqrs6N52i78/R+6S0qQONVj26agOVoswCyQWIV5D86vH53bxNUeXV0K+XZaHv/nm/KsHhOvylwsWnJX/HE8l/4WCv5x+l5n08z6UU8bUMa3MBpSmM7F63AxntdC9eBCKEZW9Hr+ABNqtxgAQrSbMtmrW7lKQuoSgBhSrTazWVU2QAKWY8wiiuhqFmQgWJBgoXiuWIm42N7hqZbBsgXz52O5P5uSvaNgFGnOuvsRw8I8Laha91wMvDuxqWFheN7/8GVtTltdS83DQsXRmqc5ZtcJXEVrlV2doTWk5+Yunm71dG5f55m/qY0MjI93vv9/NfpxXV9sUXrxy2fbNy1or65cOlDRnOoKFeeXcbw42H/bNDT5Qs3flgs31gWC1lD1nfUV/X7NdCnSUdHY2e8afzfKsqZ5ZljfDqjLOmk3UebNXB+aHArPYDRs+/HDDxeT5DiP+sFg7OpRaVQMGBV89PpeBdj22hCE0Uub0UqwLrNWsG0cuyadgLXTeR5rbO4+3c/vl15cur2nRq+TXCQDcS3SO+s6ak+e5/eMS+1dw3btu3YG2tvFL8XdIZvdjdW6TO/4B7IdrZWVPmctm5/59AgsPItTSbCiIBr2OqIGzmu20SMKAS7yqwGBUfGfgjDYlLLDeF0SfcLB2LSx8flT+08/kzz6yOj96rft4rpTjdPQcmLd47uKibbDq7ZSz/XtbH2nN717Nd62rU+c8Icevvv7I09wA6WvjVcafb+FsbNG+ZQ80Rn6ZZsvrP7teP2dzTdoETvNhjCmsr8FID2sJ69VYvdUcxk4AzYRlKcaE38eXNRlfW9H1as9i6acLHp1XpuNB5K7DIvkX08y1ZYvh3KfWaiCzH+ztrSDmD7LuX73x/mJelB8Yj39t8nhNQJJ2CAthpoFGLsGgtSOCJooCGoaJAMTjSWHVZ08YAa1Fg9lPI5U6DOsGVjDasJeZZ+YyhfCwfOzCxlBA69M9XLXtza7H/rav+9Tjq5xNi0wpKQIRNO4Lrzz7yp5QVYM6Jd/oc1Uvn/mQhhuWh6ENXoS2YTZ8QT42bF5d/559zp5r0Uff2VnR2tdf2/WCOd2cO0Mw6qpWPnvxpV0nrt5fZd2yItc199GWe8vlNfNDq+CH/7yAAnB9hn7T4QO4c1g9ScxsZgmzntnE/IDGndtHMw69lFwoCnYsMGx+rBp8JSBqdLzBr9QRPq/PbhWMWFtQZp1xguy/haw3TEHm3TWAnxFWQQWgt7M5OV0lCz1VRYucpWliy7z6Zd4urwPIyeZQqli2Lgg7szJV09PysATbOQtYIrB2YzbkJYkGgJ0m4AjPUap1pvYu1K9qr97z0Yl3p332b2LYB78ncYIlRkau/8GObSsOlZancACE5d5ily+c2+7h5Yj4lqhVmXXB+iXLfvdqSgqfKtQvfHDV0OnvQR1qhw42XS/vkvsh/hXcrDFP0a+SJNIomEfD1nsrYGO+1bgTOJhM8Hv6ek+7vVglxuSRwoKn17S937bm6YJCeSSG0Op1n+7tE37tcZ/p7dsTv4EUrGpDbWueKigsLHhqTVsoEj+JU0kaSjnj9tz8/gryQWwJ9BcJXBC/7smO+I/IFURJetFPrdt5WcoL6DbEJaygI8CTHfQTjf40ofD+DwalTqIAAHicY2BkYGAA4gDud4bx/DZfGbjZGUDg+q1z05BpdkawOAcDE4gCAB45CXEAeJxjYGRgYGcAARD5/z87IwMjAypQBAAtgwI4AHicY2BgYGAfYAwAOkQA4QAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhHicY2BkYGBQZChlYGcAASYg5gJCBob/YD4DABfTAbQAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2PyXLCMBBE3YCNDWEL2ffk7o8S8oCnkCVHC5C/jzBQlUP6IHVPzYyekl5y0iL5X5/ooY8BUmQYIkeBEca4wgRTzDDHAtdY4ga3uMM9HvCIJzzjBa94wzs+8ImvZNAq8TM+HqVkKxWlrQiOxjujQkNlEzyNzl6Z/cU2XF06at7U83VQyklLpEvSnuzsb+HAPnPfQVgaupa1Jlu4sPLsFblcitaz0dHU0ZF1qatjZ1+aTXYCmp6u0gSvWNPyHLtFZ+ZeXWVSaEkqs3T8S74WklbGbNNNq4LL4+CWKtZDv2cfX8l8aFbKFhEnJnJ+IULFpqwoQnNHlHaVQtPBl+ypmbSWdmyC61KS/AKZC3Y+AA==) format("woff");
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder, .vjs-icon-play {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before {
  content: "\f101";
}

.vjs-icon-play-circle {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-play-circle:before {
  content: "\f102";
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder, .vjs-icon-pause {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before {
  content: "\f103";
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder, .vjs-icon-volume-mute {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before, .vjs-icon-volume-mute:before {
  content: "\f104";
}

.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder, .vjs-icon-volume-low {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before, .vjs-icon-volume-low:before {
  content: "\f105";
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder, .vjs-icon-volume-mid {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before, .vjs-icon-volume-mid:before {
  content: "\f106";
}

.video-js .vjs-mute-control .vjs-icon-placeholder, .vjs-icon-volume-high {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control .vjs-icon-placeholder:before, .vjs-icon-volume-high:before {
  content: "\f107";
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscreen-enter {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-enter:before {
  content: "\f108";
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscreen-exit {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-exit:before {
  content: "\f109";
}

.vjs-icon-square {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-square:before {
  content: "\f10a";
}

.vjs-icon-spinner {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-spinner:before {
  content: "\f10b";
}

.video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .vjs-icon-subtitles {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .vjs-icon-subtitles:before {
  content: "\f10c";
}

.video-js .vjs-captions-button .vjs-icon-placeholder, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .vjs-icon-captions {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-captions-button .vjs-icon-placeholder:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .vjs-icon-captions:before {
  content: "\f10d";
}

.video-js .vjs-chapters-button .vjs-icon-placeholder, .vjs-icon-chapters {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-chapters-button .vjs-icon-placeholder:before, .vjs-icon-chapters:before {
  content: "\f10e";
}

.vjs-icon-share {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-share:before {
  content: "\f10f";
}

.vjs-icon-cog {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-cog:before {
  content: "\f110";
}

.video-js .vjs-play-progress, .video-js .vjs-volume-level, .vjs-icon-circle {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before, .vjs-icon-circle:before {
  content: "\f111";
}

.vjs-icon-circle-outline {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-circle-outline:before {
  content: "\f112";
}

.vjs-icon-circle-inner-circle {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-circle-inner-circle:before {
  content: "\f113";
}

.vjs-icon-hd {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-hd:before {
  content: "\f114";
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder, .vjs-icon-cancel {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before, .vjs-icon-cancel:before {
  content: "\f115";
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder, .vjs-icon-replay {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before, .vjs-icon-replay:before {
  content: "\f116";
}

.vjs-icon-facebook {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-facebook:before {
  content: "\f117";
}

.vjs-icon-gplus {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-gplus:before {
  content: "\f118";
}

.vjs-icon-linkedin {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-linkedin:before {
  content: "\f119";
}

.vjs-icon-twitter {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-twitter:before {
  content: "\f11a";
}

.vjs-icon-tumblr {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-tumblr:before {
  content: "\f11b";
}

.vjs-icon-pinterest {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-pinterest:before {
  content: "\f11c";
}

.video-js .vjs-descriptions-button .vjs-icon-placeholder, .vjs-icon-audio-description {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-descriptions-button .vjs-icon-placeholder:before, .vjs-icon-audio-description:before {
  content: "\f11d";
}

.video-js .vjs-audio-button .vjs-icon-placeholder, .vjs-icon-audio {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-audio-button .vjs-icon-placeholder:before, .vjs-icon-audio:before {
  content: "\f11e";
}

.vjs-icon-next-item {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-next-item:before {
  content: "\f11f";
}

.vjs-icon-previous-item {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-previous-item:before {
  content: "\f120";
}

.video-js {
  display: block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  font-family: Arial,Helvetica,sans-serif;
  word-break: initial;
}

.video-js:-moz-full-screen {
  position: absolute;
}

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js[tabindex="-1"] {
  outline: 0;
}

.video-js *, .video-js :after, .video-js :before {
  box-sizing: inherit;
}

.video-js ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.video-js.vjs-16-9, .video-js.vjs-4-3, .video-js.vjs-fluid {
  width: 100%;
  max-width: 100%;
  height: 0;
}

.video-js.vjs-16-9 {
  padding-top: 56.25%;
}

.video-js.vjs-4-3 {
  padding-top: 75%;
}

.video-js.vjs-fill {
  width: 100%;
  height: 100%;
}

.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
}

.vjs-full-window .video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-js.vjs-fullscreen {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

.vjs-hidden {
  display: none !important;
}

.vjs-disabled {
  opacity: .5;
  cursor: default;
}

.video-js .vjs-offscreen {
  height: 1px;
  left: -9999px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.vjs-no-js {
  padding: 20px;
  color: #fff;
  background-color: #000;
  font-size: 18px;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0 auto;
}

.vjs-no-js a, .vjs-no-js a:visited {
  color: #66a8cc;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: .06666em solid #fff;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: .3em;
  transition: all .4s;
}

.vjs-big-play-centered .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-top: -.75em;
  margin-left: -1.5em;
}

.video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button {
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  transition: all 0s;
}

.vjs-controls-disabled .vjs-big-play-button, .vjs-error .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button {
  display: none;
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
  display: block;
}

.video-js button {
  background: 0 0;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -moz-appearance: none;
  appearance: none;
}

.vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

.video-js .vjs-control.vjs-close-button {
  cursor: pointer;
  height: 3em;
  position: absolute;
  right: 0;
  top: .5em;
  z-index: 2;
}

.video-js .vjs-modal-dialog {
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
  overflow: auto;
}

.video-js .vjs-modal-dialog > * {
  box-sizing: border-box;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px 24px;
  z-index: 1;
}

.vjs-menu-button {
  cursor: pointer;
}

.vjs-menu-button.vjs-disabled {
  cursor: default;
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
  display: none;
}

.vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
  overflow: auto;
}

.vjs-menu .vjs-menu-content > * {
  box-sizing: border-box;
}

.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
  display: none;
}

.vjs-menu li {
  list-style: none;
  margin: 0;
  padding: .2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

.vjs-menu li.vjs-menu-item:focus, .vjs-menu li.vjs-menu-item:hover {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover {
  background-color: #fff;
  color: #2b333f;
}

.vjs-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 .3em 0;
  font-weight: 700;
  cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.vjs-menu-button-popup .vjs-menu.vjs-lock-showing, .vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu {
  display: block;
}

.video-js .vjs-menu-button-inline {
  transition: all .4s;
  overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
  width: 2.222222222em;
}

.video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
  width: 12em;
}

.vjs-menu-button-inline .vjs-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  transition: all .4s;
}

.vjs-menu-button-inline.vjs-slider-active .vjs-menu, .vjs-menu-button-inline:focus .vjs-menu, .vjs-menu-button-inline:hover .vjs-menu {
  display: block;
  opacity: 1;
}

.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
  display: block;
  opacity: 1;
  position: relative;
  width: auto;
}

.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu, .vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu, .vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu {
  width: auto;
}

.vjs-menu-button-inline .vjs-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-js .vjs-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.vjs-has-started .vjs-control-bar {
  display: -ms-flexbox;
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility .1s,opacity .1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  transition: visibility 1s,opacity 1s;
}

.vjs-controls-disabled .vjs-control-bar, .vjs-error .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar {
  display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
}

.vjs-has-started.vjs-no-flex .vjs-control-bar {
  display: table;
}

.video-js .vjs-control {
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  -ms-flex: none;
      flex: none;
}

.vjs-button > .vjs-icon-placeholder:before {
  font-size: 1.8em;
  line-height: 1.67;
}

.video-js .vjs-control:focus, .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
  text-shadow: 0 0 1em #fff;
}

.video-js .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.vjs-no-flex .vjs-control {
  display: table-cell;
  vertical-align: middle;
}

.video-js .vjs-custom-control-spacer {
  display: none;
}

.video-js .vjs-progress-control {
  cursor: pointer;
  -ms-flex: auto;
      flex: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  min-width: 4em;
  -ms-touch-action: none;
      touch-action: none;
}

.video-js .vjs-progress-control.disabled {
  cursor: default;
}

.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-no-flex .vjs-progress-control {
  width: auto;
}

.video-js .vjs-progress-holder {
  -ms-flex: auto;
      flex: auto;
  transition: all .2s;
  height: .3em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0 10px;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.666666666666666666em;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
  font-size: 1em;
}

.video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-progress-holder .vjs-play-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 0;
}

.video-js .vjs-play-progress {
  background-color: #fff;
}

.video-js .vjs-play-progress:before {
  font-size: .9em;
  position: absolute;
  right: -.5em;
  top: -.333333333333333em;
  z-index: 1;
}

.video-js .vjs-load-progress {
  background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
  background: rgba(115, 133, 159, 0.75);
}

.video-js .vjs-time-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: .3em;
  color: #000;
  float: right;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
  display: none;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip, .video-js .vjs-progress-control:hover .vjs-time-tooltip {
  display: block;
  font-size: .6em;
  visibility: visible;
}

.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
  font-size: 1em;
}

.video-js .vjs-progress-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
  z-index: 0;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s,opacity 1s;
}

.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
  display: none;
}

.vjs-mouse-display .vjs-time-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-js .vjs-slider {
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 .45em 0 .45em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-slider.disabled {
  cursor: default;
}

.video-js .vjs-slider:focus {
  text-shadow: 0 0 1em #fff;
  box-shadow: 0 0 1em #fff;
}

.video-js .vjs-mute-control {
  cursor: pointer;
  -ms-flex: none;
      flex: none;
}

.video-js .vjs-volume-control {
  cursor: pointer;
  margin-right: 1em;
  display: -ms-flexbox;
  display: flex;
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.video-js .vjs-volume-panel .vjs-volume-control {
  visibility: visible;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin-left: -1px;
}

.video-js .vjs-volume-panel {
  transition: width 1s;
}

.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel .vjs-volume-control:hover, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel:hover .vjs-volume-control {
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s;
}

.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
}

.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical {
  left: -3.5em;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
  width: 9em;
  transition: width .1s;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
  width: 4em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  height: 8em;
  width: 3em;
  left: -3000em;
  transition: visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s;
}

.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: none;
}

.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical, .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  position: absolute;
  bottom: 3em;
  left: .5em;
}

.video-js .vjs-volume-panel {
  display: -ms-flexbox;
  display: flex;
}

.video-js .vjs-volume-bar {
  margin: 1.35em .45em;
}

.vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: .3em;
}

.vjs-volume-bar.vjs-slider-vertical {
  width: .3em;
  height: 5em;
  margin: 1.35em auto;
}

.video-js .vjs-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.video-js .vjs-volume-level:before {
  position: absolute;
  font-size: .9em;
}

.vjs-slider-vertical .vjs-volume-level {
  width: .3em;
}

.vjs-slider-vertical .vjs-volume-level:before {
  top: -.5em;
  left: -.3em;
}

.vjs-slider-horizontal .vjs-volume-level {
  height: .3em;
}

.vjs-slider-horizontal .vjs-volume-level:before {
  top: -.3em;
  right: -.5em;
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  width: 4em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
}

.video-js .vjs-volume-vertical {
  width: 3em;
  height: 8em;
  bottom: 8em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-volume-horizontal .vjs-menu {
  left: -2em;
}

.vjs-poster {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: #000;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.vjs-has-started .vjs-poster {
  display: none;
}

.vjs-audio.vjs-has-started .vjs-poster {
  display: block;
}

.vjs-using-native-controls .vjs-poster {
  display: none;
}

.video-js .vjs-live-control {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex: auto;
      flex: auto;
  font-size: 1em;
  line-height: 3em;
}

.vjs-no-flex .vjs-live-control {
  display: table-cell;
  width: auto;
  text-align: left;
}

.video-js .vjs-time-control {
  -ms-flex: none;
      flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-live .vjs-time-control {
  display: none;
}

.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  display: none;
}

.video-js .vjs-duration, .vjs-no-flex .vjs-duration {
  display: none;
}

.vjs-time-divider {
  display: none;
  line-height: 3em;
}

.vjs-live .vjs-time-divider {
  display: none;
}

.video-js .vjs-play-control {
  cursor: pointer;
}

.video-js .vjs-play-control .vjs-icon-placeholder {
  -ms-flex: none;
      flex: none;
}

.vjs-text-track-display {
  position: absolute;
  bottom: 3em;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

.video-js .vjs-text-track {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: .1em;
}

.vjs-subtitles {
  color: #fff;
}

.vjs-captions {
  color: #fc6;
}

.vjs-tt-cue {
  display: block;
}

video::-webkit-media-text-track-display {
  transform: translateY(-3em);
}

.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
  transform: translateY(-1.5em);
}

.video-js .vjs-fullscreen-control {
  cursor: pointer;
  -ms-flex: none;
      flex: none;
}

.vjs-playback-rate .vjs-playback-rate-value, .vjs-playback-rate > .vjs-menu-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
  pointer-events: none;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}

.vjs-playback-rate .vjs-menu {
  width: 4em;
  left: 0;
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
  font-size: 1.4em;
  text-align: center;
}

.vjs-error .vjs-error-display:before {
  color: #fff;
  content: 'X';
  font-family: Arial,Helvetica,sans-serif;
  font-size: 4em;
  left: 0;
  line-height: 1;
  margin-top: -.5em;
  position: absolute;
  text-shadow: .05em .05em .1em #000;
  text-align: center;
  top: 50%;
  vertical-align: middle;
  width: 100%;
}

.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: .85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner {
  display: block;
  animation: 0s linear .3s forwards vjs-spinner-show;
}

.vjs-loading-spinner:after, .vjs-loading-spinner:before {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: #fff;
}

.vjs-seeking .vjs-loading-spinner:after, .vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:before {
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before {
  border-top-color: #fff;
}

.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after {
  border-top-color: #fff;
  animation-delay: .44s;
}

@keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}

@keyframes vjs-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes vjs-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: #fff;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}

.vjs-chapters-button .vjs-menu ul {
  width: 24em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -.1em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: "\f10d";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -.1em;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: " \f11d";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer {
  -ms-flex: auto;
      flex: auto;
  display: block;
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen).vjs-no-flex .vjs-custom-control-spacer {
  width: auto;
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subs-caps-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-panel {
  display: none;
}

.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subs-caps-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-panel {
  display: none;
}

.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-audio-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control, .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-panel {
  display: none;
}

.vjs-modal-dialog.vjs-text-track-settings {
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.75);
  color: #fff;
  height: 70%;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
  display: table;
}

.vjs-text-track-settings .vjs-track-settings-colors, .vjs-text-track-settings .vjs-track-settings-controls, .vjs-text-track-settings .vjs-track-settings-font {
  display: table-cell;
}

.vjs-text-track-settings .vjs-track-settings-controls {
  text-align: right;
  vertical-align: bottom;
}

@supports (display: grid) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    padding: 20px 24px 0 24px;
  }
  .vjs-track-settings-controls .vjs-default-button {
    margin-bottom: 20px;
  }
  .vjs-text-track-settings .vjs-track-settings-controls {
    grid-column: 1/-1;
  }
  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

.vjs-track-setting > select {
  margin-right: 1em;
  margin-bottom: .5em;
}

.vjs-text-track-settings fieldset {
  margin: 5px;
  padding: 3px;
  border: none;
}

.vjs-text-track-settings fieldset span {
  display: inline-block;
}

.vjs-text-track-settings fieldset span > select {
  max-width: 7.3em;
}

.vjs-text-track-settings legend {
  color: #fff;
  margin: 0 0 5px 0;
}

.vjs-text-track-settings .vjs-label {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.vjs-track-settings-controls button:active, .vjs-track-settings-controls button:focus {
  outline-style: solid;
  outline-width: medium;
  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
}

.vjs-track-settings-controls button:hover {
  color: rgba(43, 51, 63, 0.75);
}

.vjs-track-settings-controls button {
  background-color: #fff;
  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
  color: #2b333f;
  cursor: pointer;
  border-radius: 2px;
}

.vjs-track-settings-controls .vjs-default-button {
  margin-right: 1em;
}

@media print {
  .video-js > :not(.vjs-tech):not(.vjs-poster) {
    visibility: hidden;
  }
}

.vjs-resize-manager {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1000;
}

.js-focus-visible .video-js :focus:not(.focus-visible) {
  outline: 0;
}

.video-js :focus:not(:focus-visible) {
  outline: 0;
}

.dk-select,
.dk-select *,
.dk-select *:before,
.dk-select *:after,
.dk-select-multi,
.dk-select-multi *,
.dk-select-multi *:before,
.dk-select-multi *:after {
  box-sizing: border-box;
}

.dk-select,
.dk-select-multi {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5em;
  width: 200px;
  cursor: pointer;
}

.dk-selected {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  background-color: white;
  border: 1px solid #CCCCCC;
  border-radius: 0.4em;
  padding: 0 1.5em 0 0.5em;
  text-overflow: ellipsis;
}

.dk-selected:before, .dk-selected:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
}

.dk-selected:before {
  top: 50%;
  border: solid transparent;
  border-width: 0.25em 0.25em 0;
  border-top-color: #CCCCCC;
  margin: -0.125em 0.5em 0 0;
}

.dk-selected:after {
  top: 0;
  height: 100%;
  border-left: 1px solid #CCCCCC;
  margin: 0 1.5em 0 0;
}

.dk-selected-disabled {
  color: #BBBBBB;
}

.dk-select .dk-select-options {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
}

.dk-select-open-up .dk-select-options {
  border-radius: 0.4em 0.4em 0 0;
  margin-bottom: -1px;
  bottom: 100%;
}

.dk-select-open-down .dk-select-options {
  border-radius: 0 0 0.4em 0.4em;
  margin-top: -1px;
  top: 100%;
}

.dk-select-multi .dk-select-options {
  max-height: 10em;
}

.dk-select-options {
  background-color: white;
  border: 1px solid #CCCCCC;
  border-radius: 0.4em;
  list-style: none;
  margin: 0;
  max-height: 10.5em;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.25em 0;
  width: auto;
  z-index: 100;
}

.dk-option-selected {
  background-color: #000000;
  color: #fff;
}

.dk-select-options-highlight .dk-option-selected {
  background-color: transparent;
  color: inherit;
}

.dk-option {
  padding: 0 0.5em;
}

.dk-select-options .dk-option-highlight {
  background-color: #000000;
  color: #fff;
}

.dk-select-options .dk-option-disabled {
  color: #BBBBBB;
  background-color: transparent;
}

.dk-select-options .dk-option-hidden {
  display: none;
}

.dk-optgroup {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 0.25em 0;
  margin-top: 0.25em;
}

.dk-optgroup + .dk-option {
  margin-top: 0.25em;
}

.dk-optgroup + .dk-optgroup {
  border-top-width: 0;
  margin-top: 0;
}

.dk-optgroup:nth-child(2) {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

.dk-optgroup:last-child {
  border-bottom-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.dk-optgroup-disabled {
  opacity: 0.6;
  color: #BBBBBB;
  cursor: not-allowed;
}

.dk-optgroup-label {
  padding: 0 0.5em 0.25em;
  font-weight: bold;
  width: 100%;
}

.dk-optgroup-options {
  list-style: none;
  padding-left: 0;
}

.dk-optgroup-options li {
  padding-left: 1.2em;
}

.dk-select-open-up .dk-selected {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-color: #000000;
}

.dk-select-open-down .dk-selected {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #000000;
}

.dk-select-open-up .dk-selected:before,
.dk-select-open-down .dk-selected:before {
  border-width: 0 0.25em 0.25em;
  border-bottom-color: #000000;
}

.dk-select-open-up .dk-selected:after,
.dk-select-open-down .dk-selected:after {
  border-left-color: #000000;
}

.dk-select-open-up .dk-select-options,
.dk-select-open-down .dk-select-options,
.dk-select-multi:focus .dk-select-options {
  display: block;
  border-color: #000000;
}

.dk-select-multi:hover,
.dk-select-multi:focus {
  outline: none;
}

.dk-selected:hover,
.dk-selected:focus {
  outline: none;
  border-color: #000000;
}

.dk-selected:hover:before,
.dk-selected:focus:before {
  border-top-color: #000000;
}

.dk-selected:hover:after,
.dk-selected:focus:after {
  border-left-color: #000000;
}

.dk-select-disabled {
  opacity: 0.6;
  color: #BBBBBB;
  cursor: not-allowed;
}

.dk-select-disabled .dk-selected:hover, .dk-select-disabled .dk-selected:focus {
  border-color: inherit;
}

.dk-select-disabled .dk-selected:hover:before, .dk-select-disabled .dk-selected:focus:before {
  border-top-color: inherit;
}

.dk-select-disabled .dk-selected:hover:after, .dk-select-disabled .dk-selected:focus:after {
  border-left-color: inherit;
}

select[data-dkcacheid] {
  display: none;
}

/* -------------------------
Fonts
----------------------------*/
@font-face {
  font-family: 'bodoni';
  src: url("../fonts/bodoni/Bodoni-72.woff");
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   Grid
   ========================================================================== */
* {
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
  padding: 0 40px;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `$fontWeightBolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: 700;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: 700;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* ==========================================================================
   Animations
   ========================================================================== */
/* ==========================================================================
   Typography
   ========================================================================== */
html,
body {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'ff-meta-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
}

/*==========================================
=            css for title tags            =
==========================================*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
  margin: 0;
  color: #000000;
}

h1.white,
.h1.white,
h2.white,
.h2.white,
h3.white,
.h3.white,
h4.white,
.h4.white,
h5.white,
.h5.white,
h6.white,
.h6.white {
  color: #fff;
}

h1.regular,
.h1.regular,
h2.regular,
.h2.regular,
h3.regular,
.h3.regular,
h4.regular,
.h4.regular,
h5.regular,
.h5.regular,
h6.regular,
.h6.regular {
  font-weight: 400;
}

h1.bar,
.h1.bar,
h2.bar,
.h2.bar,
h3.bar,
.h3.bar,
h4.bar,
.h4.bar,
h5.bar,
.h5.bar,
h6.bar,
.h6.bar {
  position: relative;
  padding-top: 30px;
}

h1.bar:before,
.h1.bar:before,
h2.bar:before,
.h2.bar:before,
h3.bar:before,
.h3.bar:before,
h4.bar:before,
.h4.bar:before,
h5.bar:before,
.h5.bar:before,
h6.bar:before,
.h6.bar:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 5px;
  content: '';
  background: #ffffff;
}

h1,
.h1 {
  font-size: 28px;
  font-size: 1.75rem;
}

h2,
.h2 {
  font-size: 24px;
  font-size: 1.5rem;
}

h3,
.h3 {
  font-size: 21px;
  font-size: 1.3125rem;
}

h4,
.h4 {
  font-size: 18px;
  font-size: 1.125rem;
}

h5,
.h5 {
  font-size: 16px;
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 15px;
  font-size: 0.9375rem;
}

@media (min-width: 480px) {
  h1,
  .h1 {
    font-size: 40px;
    font-size: 2.5rem;
  }
  h2,
  .h2 {
    font-size: 34px;
    font-size: 2.125rem;
  }
  h3,
  .h3 {
    font-size: 28px;
    font-size: 1.75rem;
  }
  h4,
  .h4 {
    font-size: 21px;
    font-size: 1.3125rem;
  }
  h5,
  .h5 {
    font-size: 18px;
    font-size: 1.125rem;
  }
  h6,
  .h6 {
    font-size: 16px;
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 60px;
    font-size: 3.75rem;
  }
  h2,
  .h2 {
    font-size: 46px;
    font-size: 2.875rem;
  }
  h3,
  .h3 {
    font-size: 34px;
    font-size: 2.125rem;
  }
  h4,
  .h4 {
    font-size: 26px;
    font-size: 1.625rem;
  }
  h5,
  .h5 {
    font-size: 22px;
    font-size: 1.375rem;
  }
  h6,
  .h6 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

@media (min-width: 1580px) {
  h1,
  .h1 {
    font-size: 90px;
    font-size: 5.625rem;
  }
  h2,
  .h2 {
    font-size: 46px;
    font-size: 2.875rem;
  }
  h3,
  .h3 {
    font-size: 34px;
    font-size: 2.125rem;
  }
  h4,
  .h4 {
    font-size: 26px;
    font-size: 1.625rem;
  }
  h5 {
    font-size: 22px;
    font-size: 1.375rem;
  }
  h6,
  .h6 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

/*=====  End of css for title tags  ======*/
.wysiwyg {
  color: #ffffff;
}

.wysiwyg a {
  text-decoration: underline;
  color: inherit;
}

.wysiwyg a:hover {
  text-decoration: underline;
  color: inherit;
}

.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  color: inherit;
}

.wysiwyg h1,
.wysiwyg .h1 {
  font-size: 50px;
  font-size: 3.125rem;
}

.wysiwyg h2,
.wysiwyg .h2 {
  font-size: 36px;
  font-size: 2.25rem;
}

.wysiwyg h3,
.wysiwyg .h3 {
  font-size: 28px;
  font-size: 1.75rem;
}

/* ==========================================================================
   Misc
   ========================================================================== */
.transition-overlay {
  overflow: hidden;
  position: fixed;
  z-index: 1000000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0vh;
  opacity: 1;
  background: #000000;
}

/*========================================
=            css for the logo            =
========================================*/
.logo {
  font-size: 34px;
  font-size: 2.125rem;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  position: fixed;
  z-index: 999999999;
  top: 20px;
  top: 37px;
  left: 20px;
  box-sizing: border-box;
  text-align: center;
  letter-spacing: -0.85px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .logo {
    top: 65px;
    left: 40px;
  }
}

.logo .studio {
  overflow: hidden;
  width: 84px;
  height: 26px;
}

.logo .studio span {
  display: block;
  width: 84px;
  height: 26px;
  background-image: url("../images/site/logo/logo_studio.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.logo .mb {
  overflow: hidden;
  width: 47px;
  height: 26px;
}

.logo .mb span {
  display: block;
  width: 47px;
  height: 26px;
  background-image: url("../images/site/logo/logo_mb.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.logo--footer {
  display: none;
  top: initial;
  bottom: 72px;
}

@media (min-width: 992px) {
  .logo--footer {
    display: block;
    visibility: visible;
  }
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  font: inherit;
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  overflow: visible;
  -ms-flex-align: center;
      align-items: center;
  position: fixed;
  z-index: 99999;
  top: 20px;
  right: 5px;
  height: 50px;
  margin: 0;
  padding: 15px 15px;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out, z-index 0.15s step-start;
  text-transform: none;
  color: inherit;
  border: 0;
  outline: none;
  background-color: transparent;
}

@media (min-width: 576px) {
  .hamburger {
    display: none;
  }
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger:hover:hover .hamburger-inner::before {
  transform: translateY(-3px);
}

.hamburger:hover:hover .hamburger-inner::after {
  transform: translateY(3px);
}

.hamburger.hidden {
  z-index: -1;
  transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out, z-index 0.15s step-end;
  opacity: 0;
}

.hamburger-box {
  display: inline-block;
  position: relative;
  width: 33px;
  height: 23px;
}

.hamburger-inner {
  display: block;
  top: -10px;
  margin-top: -1.5px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  position: absolute;
  width: 33px;
  height: 3px;
  transition-timing-function: ease;
  transition-duration: 0.15s;
  transition-property: transform;
  border-radius: 0;
  background-color: #000000;
}

.hamburger-inner::before, .hamburger-inner::after {
  display: block;
  content: '';
}

.hamburger-inner::before {
  top: 50%;
}

.hamburger-inner::after {
  bottom: -10px;
}

.hamburger--spring .hamburger-inner {
  top: 0;
  bottom: 0;
  margin: auto;
  transition: background-color 0s 0.13s linear;
}

.hamburger--spring .hamburger-inner::before {
  top: -10px;
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.2s ease-in-out, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring .hamburger-inner::after {
  top: 10px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.2s ease-in-out, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring.is-active .hamburger-inner {
  top: 0;
  background-color: transparent;
}

.hamburger--spring.is-active .hamburger-inner::before {
  top: 0 !important;
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 0, 0) rotate(45deg) !important;
}

.hamburger--spring.is-active .hamburger-inner::after {
  top: 0 !important;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 0, 0) rotate(-45deg) !important;
}

.hamburger.sticky-down {
  animation: hamburgerStickydown 0.4s ease-in-out forwards;
  height: 50px;
}

.hamburger.sticky-up {
  animation: hamburgerStickyup 0.4s ease-in-out forwards;
}

@keyframes hamburgerStickydown {
  0% {
    position: fixed;
    transform: translateY(-190px);
    height: _(150, 94);
  }
  100% {
    position: fixed;
    transform: translateY(0);
    height: _(110, 94);
  }
}

@keyframes hamburgerStickyup {
  0% {
    position: fixed;
    transform: translateY(0);
    height: _(110, 94);
  }
  100% {
    position: fixed;
    transform: translateY(-190px);
    height: _(150, 94);
  }
}

.page-1-3 .logo:not(.logo--init) {
  transition: opacity 0.3s 1s ease-in-out, z-index 1.3s step-end;
}

@media (min-width: 992px) {
  .page-1-3 .logo:not(.logo--init) {
    z-index: 2;
    opacity: 0;
  }
}

.page-1-3 .logo:not(.logo--init).top {
  transition: display 1.3s step-end;
}

@media (min-width: 992px) {
  .page-1-3 .logo:not(.logo--init).top {
    display: none;
  }
}

@media (min-width: 992px) {
  .page-1-3 .hamburger-inner, .page-1-3 .hamburger-inner::before, .page-1-3 .hamburger-inner::after {
    background-color: #000000;
  }
}

.page-1-3 .open-menu .hamburger-inner::before, .page-1-3 .open-menu .hamburger-inner::after {
  background-color: #ffffff;
}

.preloader {
  overflow: hidden;
  position: fixed;
  z-index: 1000001;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  background: #000000;
}

.preloader .preloader__text {
  line-height: 0.92;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  bottom: 35px;
  left: 0;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0 20px;
  letter-spacing: -1px;
  color: #fff;
}

@media (min-width: 736px) and (orientation: landscape) {
  .preloader .preloader__text {
    max-width: 90%;
  }
}

@media (min-width: 768px) {
  .preloader .preloader__text {
    line-height: 1;
    bottom: 77px;
    max-width: 80%;
    padding: 0 40px;
    letter-spacing: initial;
  }
}

@media (min-width: 768px) {
  .preloader .preloader__text {
    bottom: 123px;
  }
}

@media (min-width: 1280px) {
  .preloader .preloader__text {
    bottom: 88px;
  }
}

@media (min-width: 1580px) {
  .preloader .preloader__text {
    bottom: 77px;
    max-width: 1400px;
  }
}

.preloader .preloader__text .preloader__text-title {
  font-size: 28px;
  font-size: 1.75rem;
  color: inherit;
}

@media (min-width: 414px) and (orientation: portrait) {
  .preloader .preloader__text .preloader__text-title {
    font-size: 38px;
    font-size: 2.375rem;
  }
}

@media (min-width: 568px) and (orientation: landscape) {
  .preloader .preloader__text .preloader__text-title {
    font-size: 32px;
    font-size: 2rem;
  }
}

@media (min-width: 736px) and (orientation: landscape) {
  .preloader .preloader__text .preloader__text-title {
    font-size: 38px;
    font-size: 2.375rem;
  }
}

@media (min-width: 768px) {
  .preloader .preloader__text .preloader__text-title {
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {
  .preloader .preloader__text .preloader__text-title {
    font-size: 60px;
    font-size: 3.75rem;
    line-height: 1.3;
    letter-spacing: -1.2px;
  }
}

@media (min-width: 1580px) {
  .preloader .preloader__text .preloader__text-title {
    font-size: 80px;
    font-size: 5rem;
    letter-spacing: -0.7px;
  }
}

@media (min-width: 992px) {
  html,
  body,
  .js-scroll {
    width: 100%;
    height: auto;
    min-height: 100%;
  }
}

@media (min-width: 992px) {
  .is-virtual-scroll {
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  .is-native-scroll.y-scroll {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

@media (min-width: 992px) {
  .is-native-scroll.x-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
  }
}

@media (min-width: 992px) {
  .vs-section {
    overflow: hidden;
    position: static;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: auto;
    will-change: transform;
  }
}

@media (min-width: 992px) {
  .vs-scrollbar {
    display: block;
    position: absolute;
    transition: transform 0.6s;
  }
}

@media (min-width: 992px) {
  .vs-scrollbar.vs-vertical {
    top: 0;
    right: -5px;
    bottom: 0;
    width: 15px;
    height: 100%;
    transform: translate3d(5px, 0, 0);
  }
}

@media (min-width: 992px) {
  .vs-scrollbar.vs-horizontal {
    right: 0;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 15px;
    transform: translate3d(0, 5px, 0);
  }
}

@media (min-width: 992px) {
  .is-dragging .vs-scrollbar.vs-horizontal,
  .is-dragging .vs-scrollbar.vs-vertical,
  .vs-scrollbar.vs-horizontal:hover,
  .vs-scrollbar.vs-vertical:hover {
    transform: none;
  }
}

@media (min-width: 992px) {
  .vs-scrollbar .vs-scrolldrag {
    width: 100%;
    height: auto;
    cursor: pointer;
    background: #cccccc;
  }
}

@media (min-width: 992px) {
  .vs-scroll-view {
    position: relative;
    width: 1px;
  }
}

/*
* @Author: Gaetan Lefebvre
* @Date:   2018-11-14 16:55:54
* @Last Modified by:   Gaetan Lefebvre
* @Last Modified time: 2018-11-15 10:58:10
*/
.page-layout {
  position: relative;
  z-index: 2;
}

.layout-default {
  height: 100%;
}

.layout-default .layout-default__content {
  height: 100%;
}

.layout-fixed-footer {
  position: relative;
  z-index: 2;
  margin-bottom: 100vh;
}

@media (min-width: 992px) {
  .layout-fixed-footer--show-controls {
    margin-bottom: calc(100vh - 70px);
  }
}

main {
  -ms-flex: 1;
      flex: 1;
}

.page-content {
  min-height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.page-header {
  position: fixed;
  z-index: 10;
}

.component-id {
  opacity: 0;
  height: 0;
}

/*  ==========================================================================
    Main
    ========================================================================== */
html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/*==================================================
=            css for section in website            =
==================================================*/
section.content {
  padding: 50px 0 70px;
}

@media (min-width: 768px) {
  section.content {
    padding: 60px 0 90px;
  }
}

@media (min-width: 1500px) {
  section.content {
    padding: 75px 0 115px;
  }
}

/*=====  End of css for section in website  ======*/
/*===============================================
=            css for the page header            =
===============================================*/
.pageHeader {
  position: relative;
  height: 100vh;
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.pageHeader .contentPageHeader {
  line-height: 1;
  position: absolute;
  z-index: 2;
  bottom: 40px;
  left: 0;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0 20px;
  color: #fff;
}

.pageHeader .contentPageHeader .title {
  font-size: 28px;
  font-size: 1.75rem;
}

.pageHeader .contentPageHeader .title .subtitle {
  font-size: 14px;
  font-size: 0.875rem;
  display: block;
  padding-bottom: 20px;
}

.pageHeader .homepage-link {
  line-height: 1;
  display: none;
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 120px;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0 20px;
  color: #fff;
}

.pageHeader .homepage-link:before {
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transition: transform 0.3s ease-in-out;
  transform: translateX(0px) rotate(45deg);
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

@media (min-width: 414px) and (orientation: portrait) {
  .pageHeader .contentPageHeader .title {
    font-size: 38px;
    font-size: 2.375rem;
  }
}

@media (min-width: 568px) and (orientation: landscape) {
  .pageHeader .contentPageHeader .title {
    font-size: 32px;
    font-size: 2rem;
  }
}

@media (min-width: 736px) and (orientation: landscape) {
  .pageHeader .contentPageHeader {
    max-width: 90%;
  }
  .pageHeader .contentPageHeader .title {
    font-size: 38px;
    font-size: 2.375rem;
  }
}

@media (min-width: 768px) {
  .pageHeader .contentPageHeader {
    bottom: 125px;
    max-width: 80%;
    padding: 0 40px;
  }
  .pageHeader .contentPageHeader .title {
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 1.3;
  }
  .pageHeader .contentPageHeader .title .subtitle {
    font-size: 16px;
    font-size: 1rem;
    padding-bottom: 40px;
  }
  .pageHeader .homepage-link {
    display: block;
    bottom: 125px;
  }
}

@media (min-width: 1024px) {
  .pageHeader .contentPageHeader {
    bottom: 120px;
  }
  .pageHeader .homepage-link {
    display: block;
    bottom: 120px;
  }
}

@media (min-width: 1280px) {
  .pageHeader .contentPageHeader .title {
    font-size: 60px;
    font-size: 3.75rem;
  }
  .pageHeader .contentPageHeader .title .subtitle {
    padding-bottom: 60px;
  }
}

@media (min-width: 1580px) {
  .pageHeader .contentPageHeader {
    max-width: 1400px;
  }
  .pageHeader .contentPageHeader .title {
    font-size: 80px;
    font-size: 5rem;
  }
}

/*=====  End of css for the page header  ======*/
/*===================================================================
=            pageFooter compoents on layout fixed footer            =
===================================================================*/
/*=====  End of pageFooter compoents on layout fixed footer  ======*/
/*=====================================================
=            css for a video VIMEO content            =
=====================================================*/
.videoContent {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.videoContent .wrapperVideo {
  position: absolute;
  z-index: 1;
}

.videoContent .wrapperVideo .wrapperInnerVideo {
  position: relative;
  padding-bottom: 200%;
  transform: translateY(-35.95%);
}

.videoContent .wrapperVideo .wrapperInnerVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoContent .overlayVideo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*=====  End of css for a video VIMEO content  ======*/
/*==================================================
=            css for the wyswyg content            =
==================================================*/
.wyswyg p {
  font-weight: 400;
  margin: 0 0 22px;
}

/*=====  End of css for the wyswyg content  ======*/
/* ==========================================================================
   Forms
   ========================================================================== */
fieldset {
  margin: 0;
  border: none;
}

input,
textarea {
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  padding: 8px 10px;
  transition: all 0.3s ease;
  color: #000000;
  border: none;
  outline: 0;
  background: none;
  background-color: #ffffff;
}

:-ms-input-placeholder {
  color: #000000;
}

::placeholder {
  color: #000000;
}

/* style the chrome auto filled in boxes (feel free to delete)  */
textarea {
  height: 112px;
  resize: none;
}

label {
  font-size: 16px;
  margin-bottom: 3px;
  text-transform: capitalize;
}

/**
*
* css for the input group
*
*/
.input-group {
  margin-bottom: 16px;
  /**
  *
  * componentof input group
  *
  */
  /**
  *
  * states of input group
  *
  */
}

.input-group label {
  display: block;
  width: 100%;
}

.input-group input,
.input-group textarea {
  display: block;
  width: 100%;
}

.input-group .errorMessage {
  font-size: 13px;
  font-weight: 700;
  display: block;
  width: 100%;
  max-height: 0;
  margin-top: 10px;
  transition: all 400ms linear;
  letter-spacing: 1px;
  pointer-events: none;
  opacity: 0;
  color: #000000;
}

.input-group .error {
  font-size: 12px;
  line-height: 26px;
  display: block;
  overflow: hidden;
  max-height: 0;
  transition: max-height 500ms ease;
}

.input-group.error input,
.input-group.error textarea {
  box-shadow: inset 0 0 0 1px #595959;
}

.input-group.error .errorMessage {
  max-height: 100px;
  pointer-events: auto;
  opacity: 1;
}

.input-group.error .dk-selected {
  box-shadow: inset 0 0 0 1px #595959;
}

.input-group.error .error {
  max-height: 32px;
}

/*
 *  Contact form
 */
.form {
  position: relative;
  color: #000000;
  background-color: inherit;
}

.form:after {
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: z-index 0.3s step-end, opacity 0.3s ease-in-out;
  opacity: 0;
}

.form.is-submitting .form__group,
.form.is-submitting .form__submit {
  z-index: -100;
  transition: z-index 0.3s step-end, opacity 0.3s ease-in-out;
  opacity: 0;
  -ms-touch-action: none;
      touch-action: none;
}

.form.is-successful .form__group,
.form.is-successful .form__submit {
  z-index: -100;
  transition: z-index 0.3s step-end, opacity 0.3s ease-in-out;
  opacity: 0;
  -ms-touch-action: none;
      touch-action: none;
}

.form.is-successful .form__messages {
  z-index: 2;
  transition: z-index 0.3s step-start, opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
  transition-delay: 0.3s;
  transform: translateY(0px);
  opacity: 1;
}

.form__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  position: relative;
}

.form__messages {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  position: absolute;
  z-index: -100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: z-index 0.3s step-end, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(20px);
  opacity: 0;
}

.form__messages.error {
  position: relative;
  z-index: 1;
  transition: z-index 0.3s step-start, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(0px);
  opacity: 1;
}

.form__messages .form__message.success {
  font-size: 16px;
  color: #000000;
}

.form__messages .form__message.error {
  font-size: 16px;
  color: #000000;
}

.form__fieldset {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.form__group {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  z-index: 2;
  margin-bottom: 10px;
  transition: z-index 0.3s step-start, opacity 0.3s ease-in-out;
}

@media (min-width: 992px) {
  .form__group {
    margin-bottom: 0;
  }
}

.form__group--hidden {
  display: none;
}

@media (min-width: 992px) {
  .form__group--half {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    width: calc(50% - 50px);
    max-width: calc(50% - 50px);
  }
}

.form__group.has-error .form__label {
  color: #cb0a0a;
}

.form__group.has-error .form__input,
.form__group.has-error .form__textarea,
.form__group.has-error .form__select {
  border-color: #cb0a0a;
}

.form__field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.form__field--message {
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  margin-bottom: 20px;
  color: #000000;
}

.form__field--message p {
  font-size: inherit;
  font-weight: inherit;
  margin-top: 0;
  color: inherit;
}

.form__field--message p:last-child {
  margin-bottom: 0;
}

.form__field-messages .help-block {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  display: inline;
}

.form__label {
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  z-index: 2;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
  transform: translateY(0px) scale(1);
  transform-origin: left;
  color: #000000;
}

@media (min-width: 992px) {
  .form__label {
    font-size: 16px;
    font-size: 1rem;
  }
}

.form__label--checkbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  top: initial;
  left: initial;
  color: #000000;
}

@media (min-width: 992px) {
  .form__label--checkbox {
    top: initial;
    left: initial;
  }
}

.form__label--check {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  cursor: pointer;
  background-color: #ffffff;
}

.form__label--check i {
  transition: color 0.3s ease;
  color: rgba(0, 0, 0, 0.1);
}

.form__label--message {
  line-height: 1.2;
  max-width: calc(100% - 60px);
}

.form__label .error {
  display: inline;
}

.form__input {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  height: 40px;
  transition: border-color 0.3s ease-in-out;
  border: 0;
  border-radius: 0;
  background-color: #ffffff;
}

.form__input--checkbox {
  display: none;
  width: 50px;
}

.form__input--checkbox:checked + .form__label--checkbox .form__label--check i {
  color: #000000;
}

.form__textarea {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  height: 150px;
  resize: vertical;
  transition: border-color 0.3s ease-in-out;
  border: 0;
  border-radius: 0;
  background-color: #ffffff;
}

.form__select {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 400;
  width: 100%;
  height: 40px;
  padding: 9px 16px 0 16px;
  transition: border-color 0.3s ease-in-out;
  border: 0;
  border-radius: 0;
  outline: none;
  background-color: #ffffff;
  background-image: url("../images/site/form-select-arrow.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 25px) 24px;
  -moz-appearance: none;
  appearance: none;
}

@media (min-width: 992px) {
  .form__select {
    padding: 9px 20px 0 20px;
  }
}

.form__select:focus + .form__label {
  transform: translateY(-13px) scale(0.8);
}

.form__submit {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  z-index: 2;
  margin-left: auto;
  padding: 0;
  transition: z-index 0.3s step-start, opacity 0.3s ease-in-out;
  text-transform: capitalize;
  border: 0;
  background: transparent;
}

.form__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center;
}

@media (min-width: 992px) {
  .form__footer {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

.form__footer--align-top {
  -ms-flex-align: start;
      align-items: flex-start;
}

.form__footer-message {
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  -ms-flex-positive: 1;
      flex-grow: 1;
  margin-bottom: 15px;
  color: #000000;
}

@media (min-width: 992px) {
  .form__footer-message {
    margin-bottom: 0;
    padding-right: 15px;
  }
}

.form__footer-message p {
  font-weight: inherit;
  margin-top: 0;
  color: inherit;
}

.form__footer-message p:last-child {
  margin-bottom: 0;
}

.form__footer-message a {
  font-weight: inherit;
  text-decoration: underline;
  color: inherit;
}

/*
 *	Autoprefixer
 */
.form__group--invert input:-webkit-autofill,
.form__group--invert input:-webkit-autofill:hover,
.form__group--invert input:-webkit-autofill:focus
textarea:-webkit-autofill,
.form__group--invert textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
.form__group--invert select:-webkit-autofill,
.form__group--invert select:-webkit-autofill:hover,
.form__group--invert select:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0 1000px #fafafa inset;
  -webkit-text-fill-color: #ffffff;
}

/*
 *	Form Loading
 */
.form__loader,
.form__loader:after {
  width: 10em;
  height: 10em;
  border-radius: 50%;
}

.form__loader {
  font-size: 10px;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  margin: auto;
  transition: opacity 0.3s ease-in-out, z-index 0.3s step-end;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
  text-indent: -9999em;
  opacity: 0;
  border-top: 0.8em solid rgba(0, 0, 0, 0.2);
  border-right: 0.8em solid rgba(0, 0, 0, 0.2);
  border-bottom: 0.8em solid rgba(0, 0, 0, 0.2);
  border-left: 0.8em solid #000000;
}

.form__loader.active {
  z-index: 100;
  transition: opacity 0.3s ease-in-out, z-index 0.3s step-start;
  opacity: 1;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Plugins css
   ========================================================================== */
/* ==========================================================================
   Tables
   ========================================================================== */
table th,
table td {
  vertical-align: top;
}

/*  ==========================================================================
    Blog
    ========================================================================== */
.updates-articles-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.updates-article {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  height: 530px;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (min-width: 992px) {
  .updates-article {
    padding: 40px;
  }
}

.updates-article--1 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
}

.updates-article--2, .updates-article--3 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
}

@media (min-width: 992px) {
  .updates-article--2, .updates-article--3 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    width: 50%;
  }
}

.updates-article--4, .updates-article--5, .updates-article--6, .updates-article--7 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
}

@media (min-width: 992px) {
  .updates-article--4, .updates-article--5, .updates-article--6, .updates-article--7 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    width: 25%;
  }
}

.updates-article:hover .updates-article__type {
  max-height: 25px;
  transition: opacity 0.3s 0.1s ease-in-out, max-height 0.4s ease-in-out;
  opacity: 1;
}

.updates-article__inner {
  position: relative;
  padding-top: 10px;
}

.updates-article__inner:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 3px;
  content: '';
  background: #ffffff;
}

.updates-article__title {
  font-size: 30px;
  font-size: 1.875rem;
  color: #ffffff;
}

@media (min-width: 992px) {
  .updates-article__title {
    font-size: 46px;
    font-size: 2.875rem;
  }
}

.updates-article__type {
  font-size: 1rem;
  overflow: hidden;
  max-height: 0;
  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
  opacity: 0;
  color: #ffffff;
}

.updates-article__date {
  font-size: 1rem;
  color: #ffffff;
}

.updates-error {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  height: 400px;
}

.updates-error__description a {
  text-decoration: underline;
  color: #000000;
}

.blog-filter {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  z-index: 10;
  background: #ffffff;
  padding: 160px 40px 80px 40px;
}

@media (min-width: 768px) {
  .blog-filter {
    padding: 160px 40px 80px 40px;
  }
}

.blog-filter__label {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  padding-right: 30px;
  color: #cac9c9;
}

.blog-filter__select {
  top: -1px;
  width: auto;
}

.blog-filter__select .dk-select-options {
  width: 100px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.22);
}

.blog-filter__select .dk-option {
  padding: 0 0.5em 4px 0.5em;
}

.blog-filter__select .dk-selected {
  overflow: visible;
  padding-right: 10px;
  border: none;
}

.blog-filter__select .dk-selected:after {
  border-left: 0;
}

.blog-filter__select .dk-selected:before, .blog-filter__select .dk-selected:after {
  right: initial;
  left: 100%;
}

.blog-filter__select .dk-selected:focus:before, .blog-filter__select .dk-selected:focus:after, .blog-filter__select .dk-selected:hover:before, .blog-filter__select .dk-selected:hover:after {
  border-top-color: #000000;
}

.blog-filter__submit {
  display: none;
}

.updates-pagination-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 2rem 0;
}

.updates-pagination {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.updates-pagination__item {
  position: relative;
  width: 14px;
  margin-right: 13px;
  margin-left: 13px;
  padding-bottom: 10px;
  transition: opacity 0.3s ease-in-out;
  text-align: center;
  opacity: 0.2;
  color: #000000;
}

.updates-pagination__item:hover {
  opacity: 0.6;
}

.updates-pagination__item--active {
  pointer-events: none;
  opacity: 1;
}

.updates-pagination__item--active:after {
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  opacity: 1;
  background-color: #000000;
}

.updates-pagination__item--active:hover {
  opacity: 1;
}

.updates-pagination__item a {
  display: block;
  color: #000000;
}

.blog-post {
  position: relative;
  z-index: 9999;
  background: #ffffff;
}

.blog-post .blog-post-title {
  float: left;
  position: relative;
  width: 100%;
  height: 600px;
  height: 100vh;
  min-height: 600px;
  margin-bottom: 100px;
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.blog-post .blog-post-title div {
  position: absolute;
  bottom: 15%;
  left: 0;
  max-width: 1400px;
}

.blog-post .blog-post-title h1,
.blog-post .blog-post-title h4 {
  color: #ffffff;
}

.blog-post .blog-post-title h1:before,
.blog-post .blog-post-title h4:before {
  display: none;
}

.blog-post .blog-post-title h1 {
  line-height: 1;
  margin: 0;
}

.blog-post .blog-post-title h4 {
  font-weight: 400;
  margin-bottom: 30px;
}

.blog-post .blog-post-body {
  clear: both;
  padding-bottom: 150px;
}

.blog-post .blog-post-body::after {
  content: "";
  display: block;
  clear: both;
}

.blog-post .blog-post-body .content {
  float: left;
  width: 50%;
}

@media (max-width: 768px) {
  .blog-post .blog-post-body .content {
    width: 100%;
    margin-bottom: 50px;
  }
}

.blog-post .blog-post-body .images {
  float: right;
  width: 50%;
}

@media (max-width: 768px) {
  .blog-post .blog-post-body .images {
    width: 100%;
  }
}

.blog-post .blog-post-body .images figure {
  float: left;
  width: 100%;
  margin: 0 0 40px 0;
}

.blog-post .blog-post-body .images figure img {
  display: block;
  width: 100%;
}

.blog-post .blog-post-body p {
  line-height: 1.6;
  margin-top: 0;
}

.blog-post .blog-post-body a {
  text-decoration: underline;
  color: #000000;
}

.blog-post .blog-post-body a:hover, .blog-post .blog-post-body a:focus {
  color: #000000;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header-bar {
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  transition: transform 0.2s ease;
  background: rgba(0, 0, 0, 0.8);
}

@media (min-width: 992px) {
  .header-bar {
    height: 160px;
    background: transparent;
  }
}

.header-bar--up {
  transform: translateY(-100%);
}

@media (min-width: 992px) {
  .header-bar--up {
    transform: initial;
  }
}

.open-menu .header-bar--up {
  transform: translateY(0%);
}

@media (min-width: 992px) {
  .open-menu .header-bar--up {
    transform: initial;
  }
}

.header {
  display: none;
}

@media (max-width: 575px) {
  .header {
    pointer-events: none;
    display: block;
    overflow: auto;
    position: fixed;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: opacity 0.5s cubic-bezier(0.59, 0.28, 0.22, 1);
    opacity: 0;
    color: #000000;
    background-color: #ffffff;
    -webkit-overflow-scrolling: touch;
  }
}

.header__inner {
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: end;
      align-items: flex-end;
  position: relative;
  min-height: 100vh;
  padding: 100px 1.25rem 1.25rem 1.25rem;
}

@media (min-width: 992px) {
  .header__inner {
    padding: 5rem 2.5rem 2.5rem 2.5rem;
  }
}

.header__nav {
  display: none;
}

@media (max-width: 575px) {
  .header__nav {
    font-size: 60px;
    font-size: 3.75rem;
    font-weight: 600;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-align: start;
        align-items: flex-start;
    margin-bottom: 50px;
    text-align: right;
    padding-top: 20vw;
  }
  .header__nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    transition: padding-bottom 0.5s ease-in-out;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 40px;
  }
  .header__nav ul.newsletter-is-active {
    padding-bottom: 65px;
  }
  .header__nav ul li {
    line-height: 1.4;
    padding: 0;
    transition: opacity 0.3s cubic-bezier(0.59, 0.28, 0.22, 1), transform 0.3s cubic-bezier(0.59, 0.28, 0.22, 1);
    transform: translateY(10px);
    opacity: 0;
  }
  .header__nav ul a {
    color: #000000;
  }
}

.men__footer {
  display: none;
}

@media (max-width: 575px) {
  .men__footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    transition: opacity 0.3s cubic-bezier(0.59, 0.28, 0.22, 1), transform 0.3s cubic-bezier(0.59, 0.28, 0.22, 1);
    opacity: 0;
    width: 100%;
    padding-bottom: 7px;
  }
}

.men__ft-right {
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.men__ft-link {
  font-size: 10px;
  color: black;
  display: inline-block;
}

.men__ft-left {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

/**
*
* menu state
*
*/
.open-menu {
  overflow: hidden !important;
}

.open-menu .hamburger {
  z-index: 9999999;
}

.open-menu header {
  z-index: 999999;
  opacity: 1;
  background: white;
  pointer-events: auto;
}

.open-menu .header__nav ul li {
  transform: translateY(0);
  opacity: 1;
}

.open-menu .header__nav ul li:nth-of-type(1) {
  transition-delay: 500ms;
}

.open-menu .header__nav ul li:nth-of-type(2) {
  transition-delay: 600ms;
}

.open-menu .header__nav ul li:nth-of-type(3) {
  transition-delay: 700ms;
}

.open-menu .header__nav ul li:nth-of-type(4) {
  transition-delay: 800ms;
}

.open-menu .header__nav ul li:nth-of-type(5) {
  transition-delay: 900ms;
}

.open-menu .header__nav ul li:nth-of-type(6) {
  transition-delay: 1000ms;
}

.open-menu .header__nav ul li:nth-of-type(7) {
  transition-delay: 1100ms;
}

.open-menu .header__nav ul li:nth-of-type(8) {
  transition-delay: 1200ms;
}

.open-menu .header__nav ul li:nth-of-type(9) {
  transition-delay: 1300ms;
}

.open-menu .header__nav ul li:nth-of-type(10) {
  transition-delay: 1400ms;
}

.open-menu .men__footer {
  transition-delay: 1000ms;
  opacity: 1;
}

/* ==========================================================================
	Footer
   ========================================================================== */
.fixed-footer-container {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  color: #ffffff;
  background-color: #000000;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.footer__inner {
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: end;
      align-items: flex-end;
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 100vh;
  padding: 2.5rem 1.25rem 1.25rem 1.25rem;
}

@media (min-width: 992px) {
  .footer__inner {
    padding: 5rem 2.5rem 2.5rem 2.5rem;
  }
}

.footer__nav {
  font-size: 34px;
  font-size: 2.125rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-align: center;
      align-items: center;
  text-align: right;
}

@media (min-width: 768px) {
  .footer__nav {
    font-size: 46px;
    font-size: 2.875rem;
  }
}

.footer__nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.footer__nav ul li {
  line-height: 1.4;
  padding: 0;
}

.footer__nav ul a {
  color: #ffffff;
}

.footer__social-link {
  font-size: 14px;
  font-size: 0.875rem;
  margin-left: 20px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .footer__social-link {
    font-size: 16px;
    font-size: 1rem;
    margin-left: 50px;
  }
}

.footer__meta {
  font-size: 14px;
  font-size: 0.875rem;
  bottom: 1.25rem;
  left: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .footer__meta {
    font-size: 16px;
    font-size: 1rem;
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
  }
}

.footer__meta-link {
  margin-left: 20px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .footer__meta-link {
    margin-left: 50px;
  }
}

[data-footer-fade] {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

[data-footer-fade].visible {
  transition: opacity 0.3s 0.5s ease-in-out;
  opacity: 1;
}

.footer-video {
  z-index: 0;
  opacity: 0.8;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*  ==========================================================================
	Contact
    ========================================================================== */
/**
*
* structure for the contact page
*
*/
.contact-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100vh;
  background: #e8e8e8;
}

.contact-details-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-align: end;
      align-items: flex-end;
  max-width: 100%;
  padding-top: 200px;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .contact-details-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
    padding-top: 0;
  }
}

.contact-content-inner {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 992px) {
  .contact-content-inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 75%;
    padding: 0 40px;
    margin-top: 35%;
  }
}

.contact-details-title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .contact-details-title {
    margin-bottom: 90px;
  }
}

.contact-detail {
  font-size: 20px;
  font-size: 1.25rem;
  margin-bottom: 30px;
}

.contact-detail a {
  line-height: 1.3;
  text-decoration: none;
  color: #ffffff;
}

.contact-detail a:hover {
  text-decoration: none;
}

.contact-detail a.small {
  font-size: 16px;
  font-size: 1rem;
}

.contact-detail address {
  font-style: normal;
  line-height: 1.3;
}

.contact-detail p {
  margin-top: 0;
}

.contact-detail--company-info {
  font-size: 14px;
  font-size: 0.875rem;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #a2a2a2;
}

@media (min-width: 992px) {
  .contact-detail--company-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-align: end;
        align-items: flex-end;
    margin-top: 90px;
    margin-bottom: 70px;
  }
}

.contact-detail__title {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 5px;
  color: #ffffff;
}

.contact-enquiry-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-align: end;
      align-items: flex-end;
  max-width: 100%;
  padding: 30px 0;
}

@media (min-width: 992px) {
  .contact-enquiry-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
    padding: 0;
  }
}

.contact-enquiry-title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
  color: #000000;
}

.contact-enquiry-text {
  margin-top: 0;
  margin-bottom: 30px;
}

.submit-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.privacy-policy-link {
  font-size: 12px;
  font-size: 0.75rem;
}

.privacy-policy-link a {
  text-decoration: underline;
  color: #000000;
}

.privacy-policy-link a:hover {
  color: #000000;
}

.submit-btn {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  padding: 0;
  text-transform: capitalize;
  border: 0;
  background: transparent;
}

.contact-map-section {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
}

@media (min-width: 992px) {
  .contact-map-section {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    width: 50%;
  }
}

.contact-map {
  width: 100%;
  height: 100%;
  min-height: 100vw;
}

@media (min-width: 992px) {
  .contact-map {
    min-height: auto;
  }
}

.project-panels {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.project-panels .panel {
  float: left;
  width: 100%;
  background: #ffffff;
}

.project-panels .content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  height: 100%;
}

.project-panels .content::after {
  content: "";
  display: block;
  clear: both;
}

.project-panels .content p {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .project-panels .content p {
    font-size: 16px;
    font-size: 1rem;
  }
}

.project-panels .content h3 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .project-panels .content h3 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

.project-panels .content blockquote {
  margin: 0;
}

.project-panels .content blockquote p {
  font-size: 30px;
  font-size: 1.875rem;
  margin: 0;
}

@media (max-width: 1400px) {
  .project-panels .content blockquote p {
    font-size: 24px;
    font-size: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .project-panels .content blockquote p {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

@media (max-width: 850px) {
  .project-panels .content blockquote p {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

.project-panels .content blockquote p::before, .project-panels .content blockquote p::after {
  display: inline-block;
}

.project-panels .content blockquote p::before {
  content: '\201C';
}

.project-panels .content blockquote p::after {
  content: '\201D';
}

.project-panels .content .project-info {
  width: 100%;
}

.project-panels .content .left,
.project-panels .content .right {
  width: 50%;
}

@media (max-width: 850px) {
  .project-panels .content .left,
  .project-panels .content .right {
    width: 100%;
  }
}

.project-panels .content .full,
.project-panels .content .video {
  float: left;
  width: 100%;
  height: 100%;
}

.project-panels .content .left {
  float: left;
}

@media (max-width: 850px) {
  .project-panels .content .left .inner {
    width: 100%;
  }
}

.project-panels .content .right {
  float: right;
}

.project-panels .content .inner {
  padding: 40px;
}

@media (max-width: 850px) {
  .project-panels .content .inner {
    position: static;
    padding: 20px;
  }
}

.project-panels .content img {
  display: block;
  width: 100%;
}

.project-panels .content .video {
  padding: 40px;
}

@media (max-width: 850px) {
  .project-panels .content .video {
    padding: 20px;
  }
}

.project-panels .content .video .embed-container {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.project-panels .content .video iframe,
.project-panels .content .video object,
.project-panels .content .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.project-panels .text-position-top .content .inner {
  top: 0;
}

.project-panels .text-position-bottom .content .inner {
  position: absolute;
  bottom: 0;
}

@media (max-width: 850px) {
  .project-panels .text-position-bottom .content .inner {
    position: static;
  }
}

.project-panels .text-position-middle .content .inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
}

@media (max-width: 850px) {
  .project-panels .text-position-middle .content .inner {
    position: static;
    top: 0;
    transform: none;
  }
}

.project-panels .text-colour-white p,
.project-panels .text-colour-white h3,
.project-panels .text-colour-white ul {
  color: #ffffff;
}

.project-panels .text-colour-black p,
.project-panels .text-colour-black h3,
.project-panels .text-colour-black ul {
  color: #000000;
}

.project-panels .panel-type-2 .inner {
  position: absolute;
  left: 0;
  width: 100%;
}

@media (max-width: 850px) {
  .project-panels .panel-type-2 .inner {
    position: static;
  }
}

.project-panels .panel-type-2.text-position-middle .content .inner {
  position: absolute;
}

@media (max-width: 850px) {
  .project-panels .panel-type-2.text-position-middle .content .inner {
    position: static;
  }
}

@media (max-width: 768px) {
  .project-panels .panel-type-5 .left,
  .project-panels .panel-type-5 .right {
    height: auto !important;
  }
}

.project-panels .panel-type-5 p:first-of-type:before {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 20px;
  height: 3px;
  content: '';
  background: #ffffff;
}

@media (max-width: 850px) {
  .project-panels .panel-type-5 p:first-of-type:before {
    top: 10px;
    left: 20px;
  }
}

.project-panels .panel-type-6 ul {
  font-size: 16px;
  font-size: 1rem;
  margin: 0;
  padding: 40px;
  list-style-type: none;
}

.project-panels .panel-type-6 ul::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 850px) {
  .project-panels .panel-type-6 ul {
    padding: 20px;
  }
}

.project-panels .panel-type-6 ul li {
  float: left;
  width: 13%;
  margin-right: 5%;
}

@media (max-width: 1200px) {
  .project-panels .panel-type-6 ul li {
    width: 25%;
  }
}

@media (max-width: 768px) {
  .project-panels .panel-type-6 ul li {
    width: 100%;
    margin-bottom: 20px;
  }
  .project-panels .panel-type-6 ul li:last-child {
    margin-bottom: 0;
  }
}

.project-panels .panel-type-7 .left {
  width: 80%;
}

@media (max-width: 850px) {
  .project-panels .panel-type-7 .left {
    width: 100%;
    padding-bottom: 0;
  }
}

.project-panels .panel-type-7 .right {
  width: 20%;
}

@media (max-width: 850px) {
  .project-panels .panel-type-7 .right {
    width: 100%;
    padding: 0 20px;
  }
}

.project-panels .panel-type-7 .right p {
  margin: 0;
}

@media (max-width: 1200px) {
  .project-panels .panel-type-7 .right p {
    font-size: 16px;
    font-size: 1rem;
  }
}

.project-panels .panel-type-7 .right .inner {
  padding-left: 0;
}

.project-panels .panel-type-8 .left,
.project-panels .panel-type-10 .left,
.project-panels .panel-type-11 .left,
.project-panels .panel-type-13 .left {
  width: 80%;
}

@media (max-width: 850px) {
  .project-panels .panel-type-8 .left,
  .project-panels .panel-type-10 .left,
  .project-panels .panel-type-11 .left,
  .project-panels .panel-type-13 .left {
    width: 100%;
  }
}

.project-panels .panel-type-8 .right,
.project-panels .panel-type-10 .right,
.project-panels .panel-type-11 .right,
.project-panels .panel-type-13 .right {
  width: 20%;
}

@media (max-width: 850px) {
  .project-panels .panel-type-8 .right,
  .project-panels .panel-type-10 .right,
  .project-panels .panel-type-11 .right,
  .project-panels .panel-type-13 .right {
    width: 100%;
    padding: 0 20px;
  }
}

.project-panels .panel-type-8 .right p,
.project-panels .panel-type-10 .right p,
.project-panels .panel-type-11 .right p,
.project-panels .panel-type-13 .right p {
  margin: 0;
}

@media (max-width: 1200px) {
  .project-panels .panel-type-8 .right p,
  .project-panels .panel-type-10 .right p,
  .project-panels .panel-type-11 .right p,
  .project-panels .panel-type-13 .right p {
    font-size: 16px;
    font-size: 1rem;
  }
}

@media (min-width: 850px) {
  .project-panels .panel-type-8 .right .inner,
  .project-panels .panel-type-10 .right .inner,
  .project-panels .panel-type-11 .right .inner,
  .project-panels .panel-type-13 .right .inner {
    padding-left: 0;
  }
}

.project-panels .panel-type-8 .left p {
  font-size: 26px;
  font-size: 1.625rem;
}

@media (max-width: 1200px) {
  .project-panels .panel-type-8 .left p {
    font-size: 20px;
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .project-panels .panel-type-8 .left p {
    font-size: 16px;
    font-size: 1rem;
  }
}

.project-panels .panel-type-8 .left .wrap {
  padding: 100px 40px 50px 40px;
  text-align: center;
}

.project-panels .panel-type-8 .left .wrap img {
  max-width: 40%;
  margin: 0 auto 50px auto;
}

@media (max-width: 1200px) {
  .project-panels .panel-type-8 .left .wrap img {
    max-width: 80%;
  }
}

.project-panels .panel-type-8 .left .wrap p {
  max-width: 70%;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .project-panels .panel-type-8 .left .wrap p {
    max-width: 90%;
  }
}

.project-panels .panel-type-8 .right.inner {
  padding-bottom: 50px;
}

.project-panels .panel-type-9 figure {
  margin: 0;
}

.project-panels .panel-type-9 figure img {
  display: block;
  width: 100%;
}

.project-panels .panel-type-9 .left {
  padding: 40px 0 0 0;
}

@media (max-width: 850px) {
  .project-panels .panel-type-9 .left {
    padding: 20px 0 0 0;
  }
}

.project-panels .panel-type-9 .left figure {
  overflow: hidden;
  max-height: calc( 100% - 40px);
  padding: 0 0 0 40px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-9 .left figure {
    max-height: 100%;
    padding: 0 20px;
  }
}

.project-panels .panel-type-9 .right {
  padding: 20px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-9 .right {
    padding: 10px;
  }
}

.project-panels .panel-type-9 .right figure {
  display: inline-block;
  width: calc(50% - 2px);
  padding: 20px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-9 .right figure {
    padding: 10px;
  }
}

.project-panels .panel-type-9 .right.total-images-1 figure, .project-panels .panel-type-9 .right.total-images-2 figure {
  width: 100%;
}

.project-panels .panel-type-9 .right.total-images-3 figure:last-child {
  width: 100%;
}

.project-panels .panel-type-10 .left .wrap {
  padding: 40px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-10 .left .wrap {
    padding: 20px;
    padding-bottom: 0;
  }
}

.project-panels .panel-type-11 .carousel,
.project-panels .panel-type-12 .carousel,
.project-panels .panel-type-13 .carousel {
  overflow: hidden;
  position: relative;
  max-width: 100vw;
}

.project-panels .panel-type-11 .carousel .slick-arrow,
.project-panels .panel-type-12 .carousel .slick-arrow,
.project-panels .panel-type-13 .carousel .slick-arrow {
  position: absolute;
  z-index: 99;
  top: 50%;
  width: 20px;
  height: 33px;
  margin-top: -16px;
  text-indent: -10000px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.project-panels .panel-type-11 .carousel .slick-arrow:after,
.project-panels .panel-type-12 .carousel .slick-arrow:after,
.project-panels .panel-type-13 .carousel .slick-arrow:after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  margin: auto;
  content: '';
  transform: rotate(45deg);
}

.project-panels .panel-type-11 .carousel .slick-arrow.slick-prev,
.project-panels .panel-type-12 .carousel .slick-arrow.slick-prev,
.project-panels .panel-type-13 .carousel .slick-arrow.slick-prev {
  left: 20px;
  background: none;
}

.project-panels .panel-type-11 .carousel .slick-arrow.slick-prev:after,
.project-panels .panel-type-12 .carousel .slick-arrow.slick-prev:after,
.project-panels .panel-type-13 .carousel .slick-arrow.slick-prev:after {
  left: 0;
  border-bottom: 2px solid #000000;
  border-left: 2px solid #000000;
}

.project-panels .panel-type-11 .carousel .slick-arrow.slick-next,
.project-panels .panel-type-12 .carousel .slick-arrow.slick-next,
.project-panels .panel-type-13 .carousel .slick-arrow.slick-next {
  right: 20px;
  background: none;
}

.project-panels .panel-type-11 .carousel .slick-arrow.slick-next:after,
.project-panels .panel-type-12 .carousel .slick-arrow.slick-next:after,
.project-panels .panel-type-13 .carousel .slick-arrow.slick-next:after {
  right: 0;
  border-top: 2px solid #000000;
  border-right: 2px solid #000000;
}

.project-panels .panel-type-11 figure,
.project-panels .panel-type-12 figure,
.project-panels .panel-type-13 figure {
  width: 100%;
  max-width: 100vw;
  margin: 0;
}

.project-panels .panel-type-11 .wrap {
  padding: 40px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-11 .wrap {
    padding: 20px;
    padding-bottom: 0;
  }
}

.project-panels .panel-type-11 .carousel {
  padding: 0 10%;
}

@media (max-width: 850px) {
  .project-panels .panel-type-11 .carousel {
    padding: 0;
  }
}

.project-panels .panel-type-12 .carousel .slick-arrow.slick-prev {
  left: 40px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-12 .carousel .slick-arrow.slick-prev {
    left: 20px;
  }
}

.project-panels .panel-type-12 .carousel .slick-arrow.slick-next {
  right: 40px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-12 .carousel .slick-arrow.slick-next {
    right: 20px;
  }
}

.project-panels .panel-type-13 .wrap {
  padding: 40px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-13 .wrap {
    padding: 20px;
    padding-bottom: 0;
  }
}

.project-panels .panel-type-14 .images {
  padding: 0 20px 40px;
}

.project-panels .panel-type-14 .images::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 850px) {
  .project-panels .panel-type-14 .images {
    padding: 0 10px 20px;
  }
}

@media (max-width: 768px) {
  .project-panels .panel-type-14 .images {
    padding-bottom: 0;
  }
}

.project-panels .panel-type-14 .images figure {
  float: left;
  width: 25%;
  margin: 0;
  padding: 0 20px;
}

@media (max-width: 850px) {
  .project-panels .panel-type-14 .images figure {
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .project-panels .panel-type-14 .images figure {
    width: 50%;
    padding-bottom: 20px;
  }
}

.project-panels .related-projects {
  background: #f7f7f7;
}

.project-panels .related-projects h4 {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0 0 40px 0;
  color: #000000;
}

.project-panels .related-projects h4:before {
  display: none;
}

@media (max-width: 850px) {
  .project-panels .related-projects h4 {
    padding: 0 0 20px 0;
  }
}

.project-panels .related-projects h3 {
  font-weight: 700;
  color: #000000;
}

.project-panels .related-projects p {
  line-height: 1.4;
}

.project-panels .related-projects .related-projects-list {
  float: left;
  width: 80%;
  padding: 40px;
}

@media (max-width: 1400px) {
  .project-panels .related-projects .related-projects-list {
    width: 70%;
  }
}

@media (max-width: 850px) {
  .project-panels .related-projects .related-projects-list {
    width: 100%;
    padding: 20px;
  }
}

.project-panels .related-projects .related-info {
  float: right;
  width: 20%;
  padding: 40px;
  background: #e8e8e8;
}

@media (max-width: 1400px) {
  .project-panels .related-projects .related-info {
    width: 30%;
  }
}

@media (max-width: 850px) {
  .project-panels .related-projects .related-info {
    width: 100%;
    padding: 20px;
  }
}

.project-panels .related-projects .related-project {
  margin-bottom: 40px;
}

.project-panels .related-projects .related-project::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 850px) {
  .project-panels .related-projects .related-project {
    margin-bottom: 20px;
  }
}

.project-panels .related-projects .related-project figure {
  float: left;
  box-sizing: border-box;
  width: 20%;
  margin: 0;
  padding: 0 40px 0 0;
}

.project-panels .related-projects .related-project figure img {
  display: block;
  width: 100%;
}

@media (max-width: 1400px) {
  .project-panels .related-projects .related-project figure {
    width: 40%;
  }
}

@media (max-width: 850px) {
  .project-panels .related-projects .related-project figure {
    padding: 0 20px 0 0;
  }
}

@media (max-width: 480px) {
  .project-panels .related-projects .related-project figure {
    width: 100%;
    padding: 0 0 40px 0;
  }
}

.project-panels .related-projects .related-project h3 {
  float: left;
  position: relative;
  width: 80%;
  padding-top: 20px;
}

@media (max-width: 1400px) {
  .project-panels .related-projects .related-project h3 {
    width: 60%;
  }
}

@media (max-width: 480px) {
  .project-panels .related-projects .related-project h3 {
    width: 100%;
  }
}

.project-panels .related-projects .related-project h3:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 3px;
  content: '';
  background: #000000;
}

.project-panels .related-projects .related-project p {
  float: left;
  width: 70%;
}

@media (max-width: 1400px) {
  .project-panels .related-projects .related-project p {
    width: 55%;
  }
}

@media (max-width: 480px) {
  .project-panels .related-projects .related-project p {
    width: 100%;
  }
}

.project-panels .related-projects .related-project a {
  transition: opacity 0.3s ease-in-out;
  text-decoration: underline;
  color: inherit;
}

.project-panels .related-projects .related-project a:hover {
  opacity: 0.7;
  color: inherit;
}

.project-panels .related-projects .related-project .related-project-link {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
  float: left;
  width: 70%;
  transition: opacity 0.3s ease-in-out;
  text-decoration: underline;
  color: inherit;
}

@media (max-width: 1400px) {
  .project-panels .related-projects .related-project .related-project-link {
    width: 55%;
  }
}

@media (max-width: 480px) {
  .project-panels .related-projects .related-project .related-project-link {
    width: 100%;
  }
}

.project-panels .related-projects .related-project .related-project-link:hover {
  opacity: 0.7;
  color: inherit;
}

.project-details {
  float: left;
  width: 100%;
  margin-top: 100vh;
}

.project-header {
  position: relative;
  height: 100vh;
  background-color: #000000;
}

@media (min-width: 992px) {
  .project-header {
    height: 100vh;
  }
}

.project-header__background {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s ease;
  opacity: 1;
  background-position: top center;
  background-size: cover;
}

.project-header__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 1.25rem 1.25rem 2.5rem 1.25rem;
}

@media (min-width: 992px) {
  .project-header__inner {
    padding: 2.5rem 2.5rem 10vh 2.5rem;
  }
}

.project-header__content {
  position: relative;
  padding-top: 25px;
}

@media (min-width: 992px) {
  .project-header__content {
    padding-top: 35px;
  }
}

.project-header__content:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 3px;
  content: '';
  background: #ffffff;
}

.project-header__client {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.project-header__project {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
  color: #ffffff;
}

@media (min-width: 992px) {
  .project-header__project {
    margin-bottom: 40px;
  }
}

.project-header__strapline {
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 20px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .project-header__strapline {
    font-size: 80px;
    font-size: 5rem;
    margin-bottom: 30px;
  }
}

.project-header__location {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 30px;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.project-header__scroll {
  display: none;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  position: absolute;
  z-index: 99;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 50px;
  margin: auto;
  padding: 0 20px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .project-header__scroll {
    display: -ms-flexbox;
    display: flex;
    bottom: 3vh;
    height: 70px;
    padding: 0 40px;
  }
}

.project-header__scroll:before {
  position: absolute;
  right: 0;
  bottom: 15px;
  left: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: translateY(0px) rotate(-45deg);
  opacity: 0;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.project-header__scroll:hover {
  color: #ffffff;
}

.project-header__scroll:hover:before {
  transform: translateY(5px) rotate(-45deg);
  opacity: 1;
}

.project-page-controls-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  transition: opacity 0.3s ease-in-out, z-index 0.3 step-start;
  background: rgba(0, 0, 0, 0.8);
}

@media (min-width: 992px) {
  .project-page-controls-container {
    bottom: 3vh;
    height: 70px;
    padding: 0 40px;
    background: transparent;
  }
}

.project-page-controls-container.static {
  bottom: initial;
  background-color: #000000;
}

.project-page-controls-container.hidden {
  z-index: -100;
  transition: opacity 0.3s ease-in-out, z-index 0.3 step-end;
  opacity: 0;
}

.project-page-controls-container.project-page-controls-container--prev {
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.project-page-controls-container.project-page-controls-container--next {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.project-page-controls-container--fixed-hack {
  width: 0;
  height: 0;
}

.project-page-fixed-controls-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  height: 70px;
  padding: 0 20px;
  transition: opacity 0.3s ease-in-out, z-index 0.3 step-start;
  background: #000000;
}

@media (min-width: 992px) {
  .project-page-fixed-controls-container {
    padding: 0 40px;
  }
}

.project-page-fixed-controls-container.static {
  bottom: initial;
  background-color: #000000;
}

.project-page-fixed-controls-container.project-page-controls-container--prev {
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.project-page-fixed-controls-container.project-page-controls-container--next {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.project-page-control__left {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  padding: 0 20px;
}

@media (min-width: 992px) {
  .project-page-control__left {
    bottom: 3vh;
    height: 70px;
    padding: 0 40px;
  }
}

.project-page-control__right {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: fixed;
  right: 0;
  bottom: 0;
  height: 50px;
  padding: 0 20px;
}

@media (min-width: 992px) {
  .project-page-control__right {
    bottom: 3vh;
    height: 70px;
    padding: 0 40px;
  }
}

.project-page-control-spacer {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.project-page-control {
  position: relative;
  z-index: 10;
  transition: opacity 0.3s ease-in-out, z-index 0.3s step-start;
  color: #ffffff;
}

.project-page-control--grid:hover .project-page-control-inner:before {
  transform: translateX(-5px) rotate(45deg);
}

.project-page-control--prev:hover .project-page-control-inner:before {
  transform: translateX(-5px) rotate(45deg);
}

.project-page-control--prev:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 16px;
  margin: auto;
  content: '';
  background: white;
}

.project-page-control--next:hover .project-page-control-inner:before {
  transform: translateX(5px) rotate(45deg);
}

.project-page-control.hidden {
  z-index: -10;
  transition: opacity 0.3s ease-in-out, z-index 0.3s step-end;
  opacity: 0;
}

.project-page-control .project-page-control-inner {
  font-size: 14px;
  font-size: 0.875rem;
  position: relative;
  padding: 0 14px;
}

.project-page-control .project-page-control-inner:before {
  position: absolute;
  top: 2px;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transition: transform 0.3s ease-in-out;
}

.project-page-control .project-page-control-inner--prev:before {
  left: 0;
  transform: translateX(0px) rotate(45deg);
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.project-page-control .project-page-control-inner--next:before {
  right: 0;
  transform: translateX(0px) rotate(45deg);
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.project-item-list {
  display: -ms-flexbox;
  display: flex;
  overflow: scroll;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
  .project-item-list {
    overflow: initial;
    max-height: initial;
  }
}

.project-item {
  display: inline-block;
  overflow: hidden;
  -ms-flex-preferred-size: 100vw;
      flex-basis: 100vw;
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  background-color: #000000;
}

@media (min-width: 992px) {
  .project-item {
    display: inline-block;
    -ms-flex-preferred-size: 50vw;
        flex-basis: 50vw;
    max-width: 50vw;
    height: 100vh;
    height: 100vh;
  }
}

@media (min-width: 1200px) {
  .project-item {
    -ms-flex-preferred-size: 33.33333vw;
        flex-basis: 33.33333vw;
    max-width: 33.33333vw;
  }
}

.project-item:hover .project-item__background {
  opacity: 1;
}

.project-item:hover .project-item__client {
  max-height: 25px;
  transition: opacity 0.3s 0.1s ease-in-out, max-height 0.4s ease-in-out;
  opacity: 1;
}

.project-item:hover .project-item__project {
  max-height: 25px;
  transition: opacity 0.3s 0.2s ease-in-out, max-height 0.5s ease-in-out;
  opacity: 1;
}

.project-item__background {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
  opacity: 0.65;
  background-position: top center;
  background-size: cover;
}

.project-item__background--loaded {
  opacity: 0.8;
}

.project-item__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 1.25rem 1.25rem 2.5rem 1.25rem;
}

@media (min-width: 992px) {
  .project-item__inner {
    padding: 2.5rem 2.5rem 10vh 2.5rem;
  }
}

.project-item__content {
  position: relative;
  padding-top: 25px;
}

@media (min-width: 992px) {
  .project-item__content {
    padding-top: 35px;
  }
}

.project-item__content:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 3px;
  content: '';
  background: #ffffff;
}

.project-item__client {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
  letter-spacing: 0.03em;
  opacity: 0;
  color: #ffffff;
}

.project-item__project {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
  letter-spacing: 0.03em;
  opacity: 0;
  color: #ffffff;
}

@media (min-width: 992px) {
  .project-item__project {
    margin-bottom: 40px;
  }
}

.project-item__strapline {
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .project-item__strapline {
    font-size: 46px;
    font-size: 2.875rem;
    margin-bottom: 40px;
  }
}

.project-item__location {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.project-list-controls {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background: rebeccapurple;
}

.project-list-control {
  display: none;
  position: fixed;
  z-index: 10;
  bottom: 0;
  height: 50px;
  transition: opacity 0.3s ease-in-out, z-index 0.3s step-start;
  -ms-flex-align: center;
      align-items: center;
  color: #ffffff;
}

@media (min-width: 992px) {
  .project-list-control {
    display: -ms-flexbox;
    display: flex;
    bottom: 3vh;
    height: 70px;
  }
}

.project-list-control--prev {
  left: 40px;
}

.project-list-control--prev:hover .project-list-control-inner:before {
  transform: translateX(-5px) rotate(45deg);
}

.project-list-control--next {
  right: 40px;
}

.project-list-control--next:hover .project-list-control-inner:before {
  transform: translateX(5px) rotate(45deg);
}

.project-list-control.hidden {
  z-index: -10;
  transition: opacity 0.3s ease-in-out, z-index 0.3s step-end;
  opacity: 0;
}

.project-list-control .project-list-control-inner {
  font-size: 14px;
  font-size: 0.875rem;
  position: relative;
  padding: 0 14px;
}

.project-list-control .project-list-control-inner:before {
  position: absolute;
  top: 2px;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transition: transform 0.3s ease-in-out;
}

.project-list-control .project-list-control-inner--prev:before {
  left: 0;
  transform: translateX(0px) rotate(45deg);
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.project-list-control .project-list-control-inner--next:before {
  right: 0;
  transform: translateX(0px) rotate(45deg);
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.page-1-2 {
  background: #ffffff;
}

.page-1-2 main {
  padding-top: clamp(110px, calc(6.875rem + (60) * ((100vw - 375px) / (1920 - 375))), 170px);
}

.studio-page {
  overflow-x: hidden;
  position: relative;
  height: 100%;
}

.studio-page::after {
  content: "";
  display: block;
  clear: both;
}

.studio-page .wrap {
  width: 100%;
  height: 100%;
}

.studio-page .bg {
  width: 100%;
  height: 100%;
}

.studio-page svg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.studio-page svg line {
  animation: offset 1s linear forwards;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}

.studio-page .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.studio-page .particle,
.studio-page .hotspot {
  font-size: 18px;
  font-size: 1.125rem;
  position: absolute;
  z-index: 2;
  transition: all 0.5s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  text-align: center;
  opacity: 1;
  border-radius: 50%;
}

@media (max-width: 1024px) {
  .studio-page .particle,
  .studio-page .hotspot {
    font-size: 16px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .studio-page .particle,
  .studio-page .hotspot {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

.studio-page .particle .title,
.studio-page .hotspot .title {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  padding: 0 10px;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  color: #ffffff;
}

.studio-page .particle.is-active,
.studio-page .hotspot.is-active {
  width: 160px;
  height: 160px;
  margin: -30px 0 0 -30px;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.studio-page .particle.is-active .title,
.studio-page .hotspot.is-active .title {
  transition: opacity 0.3s 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 1;
}

@media (max-width: 1024px) {
  .studio-page .particle.is-active,
  .studio-page .hotspot.is-active {
    width: 120px;
    height: 120px;
    margin: -10px 0 0 -10px;
  }
}

@media (max-width: 768px) {
  .studio-page .particle.is-active,
  .studio-page .hotspot.is-active {
    width: 100px;
    height: 100px;
    margin: 0;
  }
}

.studio-page .hotspot {
  width: 120px;
  height: 120px;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .studio-page .hotspot {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .studio-page .hotspot {
    width: 80px;
    height: 80px;
  }
}

.studio-page .hotspot.hotspot-1 {
  animation: particle-animation-80 90s infinite;
  animation-delay: 0;
  background: #26d95f;
}

.studio-page .hotspot.is-active {
  width: 200px;
  height: 200px;
  margin-top: -50px;
  margin-left: -50px;
}

@media (max-width: 1024px) {
  .studio-page .hotspot.is-active {
    width: 160px;
    height: 160px;
    margin: -30px 0 0 -30px;
  }
}

@media (max-width: 768px) {
  .studio-page .hotspot.is-active {
    width: 120px;
    height: 120px;
    margin: -10px 0 0 -10px;
  }
}

.studio-page.is-static .hotspot,
.studio-page.is-static .key-particle.is-active {
  animation-play-state: paused;
}

.particle-0 {
  width: 39px;
  height: 39px;
  animation: particle-animation-0 90s infinite;
  animation-delay: 0s;
  background: #9d26d9;
}

.particle-1 {
  width: 36px;
  height: 36px;
  animation: particle-animation-1 90s infinite;
  animation-delay: -0.2s;
  background: #d92650;
}

.particle-2 {
  width: 17px;
  height: 17px;
  animation: particle-animation-2 90s infinite;
  animation-delay: -0.4s;
  background: #a9d926;
}

.particle-3 {
  width: 31px;
  height: 31px;
  animation: particle-animation-3 90s infinite;
  animation-delay: -0.6s;
  background: #26d9be;
}

.particle-4 {
  width: 19px;
  height: 19px;
  animation: particle-animation-4 90s infinite;
  animation-delay: -0.8s;
  background: #d926c1;
}

.particle-5 {
  width: 32px;
  height: 32px;
  animation: particle-animation-5 90s infinite;
  animation-delay: -1s;
  background: #2671d9;
}

.particle-6 {
  width: 50px;
  height: 50px;
  animation: particle-animation-6 90s infinite;
  animation-delay: -1.2s;
  background: #d96b26;
}

.particle-7 {
  width: 44px;
  height: 44px;
  animation: particle-animation-7 90s infinite;
  animation-delay: -1.4s;
  background: #d95326;
}

.particle-8 {
  width: 39px;
  height: 39px;
  animation: particle-animation-8 90s infinite;
  animation-delay: -1.6s;
  background: #9726d9;
}

.particle-9 {
  width: 31px;
  height: 31px;
  animation: particle-animation-9 90s infinite;
  animation-delay: -1.8s;
  background: #2674d9;
}

.particle-10 {
  width: 37px;
  height: 37px;
  animation: particle-animation-10 90s infinite;
  animation-delay: -2s;
  background: #8bd926;
}

.particle-11 {
  width: 38px;
  height: 38px;
  animation: particle-animation-11 90s infinite;
  animation-delay: -2.2s;
  background: #77d926;
}

.particle-12 {
  width: 23px;
  height: 23px;
  animation: particle-animation-12 90s infinite;
  animation-delay: -2.4s;
  background: #269dd9;
}

.particle-13 {
  width: 18px;
  height: 18px;
  animation: particle-animation-13 90s infinite;
  animation-delay: -2.6s;
  background: #26d9d0;
}

.particle-14 {
  width: 29px;
  height: 29px;
  animation: particle-animation-14 90s infinite;
  animation-delay: -2.8s;
  background: #d92f26;
}

.particle-15 {
  width: 30px;
  height: 30px;
  animation: particle-animation-15 90s infinite;
  animation-delay: -3s;
  background: #7126d9;
}

.particle-16 {
  width: 43px;
  height: 43px;
  animation: particle-animation-16 90s infinite;
  animation-delay: -3.2s;
  background: #5026d9;
}

.particle-17 {
  width: 31px;
  height: 31px;
  animation: particle-animation-17 90s infinite;
  animation-delay: -3.4s;
  background: #8826d9;
}

.particle-18 {
  width: 33px;
  height: 33px;
  animation: particle-animation-18 90s infinite;
  animation-delay: -3.6s;
  background: #26d956;
}

.particle-19 {
  width: 27px;
  height: 27px;
  animation: particle-animation-19 90s infinite;
  animation-delay: -3.8s;
  background: #82d926;
}

.particle-20 {
  width: 13px;
  height: 13px;
  animation: particle-animation-20 90s infinite;
  animation-delay: -4s;
  background: #d9cd26;
}

.particle-21 {
  width: 38px;
  height: 38px;
  animation: particle-animation-21 90s infinite;
  animation-delay: -4.2s;
  background: #85d926;
}

.particle-22 {
  width: 44px;
  height: 44px;
  animation: particle-animation-22 90s infinite;
  animation-delay: -4.4s;
  background: #a026d9;
}

.particle-23 {
  width: 21px;
  height: 21px;
  animation: particle-animation-23 90s infinite;
  animation-delay: -4.6s;
  background: #68d926;
}

.particle-24 {
  width: 48px;
  height: 48px;
  animation: particle-animation-24 90s infinite;
  animation-delay: -4.8s;
  background: #d9265c;
}

.particle-25 {
  width: 50px;
  height: 50px;
  animation: particle-animation-25 90s infinite;
  animation-delay: -5s;
  background: #26d95c;
}

.particle-26 {
  width: 45px;
  height: 45px;
  animation: particle-animation-26 90s infinite;
  animation-delay: -5.2s;
  background: #26d944;
}

.particle-27 {
  width: 41px;
  height: 41px;
  animation: particle-animation-27 90s infinite;
  animation-delay: -5.4s;
  background: #d99126;
}

.particle-28 {
  width: 28px;
  height: 28px;
  animation: particle-animation-28 90s infinite;
  animation-delay: -5.6s;
  background: #97d926;
}

.particle-29 {
  width: 16px;
  height: 16px;
  animation: particle-animation-29 90s infinite;
  animation-delay: -5.8s;
  background: #d0d926;
}

.particle-30 {
  width: 23px;
  height: 23px;
  animation: particle-animation-30 90s infinite;
  animation-delay: -6s;
  background: #2635d9;
}

.particle-31 {
  width: 33px;
  height: 33px;
  animation: particle-animation-31 90s infinite;
  animation-delay: -6.2s;
  background: #c7d926;
}

.particle-32 {
  width: 31px;
  height: 31px;
  animation: particle-animation-32 90s infinite;
  animation-delay: -6.4s;
  background: #268ed9;
}

.particle-33 {
  width: 16px;
  height: 16px;
  animation: particle-animation-33 90s infinite;
  animation-delay: -6.6s;
  background: #d926b8;
}

.particle-34 {
  width: 46px;
  height: 46px;
  animation: particle-animation-34 90s infinite;
  animation-delay: -6.8s;
  background: #d96e26;
}

.particle-35 {
  width: 21px;
  height: 21px;
  animation: particle-animation-35 90s infinite;
  animation-delay: -7s;
  background: #26d9d3;
}

.particle-36 {
  width: 38px;
  height: 38px;
  animation: particle-animation-36 90s infinite;
  animation-delay: -7.2s;
  background: #d9a926;
}

.particle-37 {
  width: 34px;
  height: 34px;
  animation: particle-animation-37 90s infinite;
  animation-delay: -7.4s;
  background: #262cd9;
}

.particle-38 {
  width: 42px;
  height: 42px;
  animation: particle-animation-38 90s infinite;
  animation-delay: -7.6s;
  background: #d99126;
}

.particle-39 {
  width: 20px;
  height: 20px;
  animation: particle-animation-39 90s infinite;
  animation-delay: -7.8s;
  background: #26d988;
}

.particle-40 {
  width: 17px;
  height: 17px;
  animation: particle-animation-40 90s infinite;
  animation-delay: -8s;
  background: #d9d626;
}

.particle-41 {
  width: 26px;
  height: 26px;
  animation: particle-animation-41 90s infinite;
  animation-delay: -8.2s;
  background: #26d9d3;
}

.particle-42 {
  width: 24px;
  height: 24px;
  animation: particle-animation-42 90s infinite;
  animation-delay: -8.4s;
  background: #a3d926;
}

.particle-43 {
  width: 35px;
  height: 35px;
  animation: particle-animation-43 90s infinite;
  animation-delay: -8.6s;
  background: #d9bb26;
}

.particle-44 {
  width: 35px;
  height: 35px;
  animation: particle-animation-44 90s infinite;
  animation-delay: -8.8s;
  background: #91d926;
}

.particle-45 {
  width: 16px;
  height: 16px;
  animation: particle-animation-45 90s infinite;
  animation-delay: -9s;
  background: #d9265f;
}

.particle-46 {
  width: 35px;
  height: 35px;
  animation: particle-animation-46 90s infinite;
  animation-delay: -9.2s;
  background: #9ad926;
}

.particle-47 {
  width: 35px;
  height: 35px;
  animation: particle-animation-47 90s infinite;
  animation-delay: -9.4s;
  background: #d92626;
}

.particle-48 {
  width: 16px;
  height: 16px;
  animation: particle-animation-48 90s infinite;
  animation-delay: -9.6s;
  background: #d9d026;
}

.particle-49 {
  width: 36px;
  height: 36px;
  animation: particle-animation-49 90s infinite;
  animation-delay: -9.8s;
  background: #d926c4;
}

.particle-50 {
  width: 15px;
  height: 15px;
  animation: particle-animation-50 90s infinite;
  animation-delay: -10s;
  background: #26d9d6;
}

.particle-51 {
  width: 47px;
  height: 47px;
  animation: particle-animation-51 90s infinite;
  animation-delay: -10.2s;
  background: #2688d9;
}

.particle-52 {
  width: 32px;
  height: 32px;
  animation: particle-animation-52 90s infinite;
  animation-delay: -10.4s;
  background: #5fd926;
}

.particle-53 {
  width: 42px;
  height: 42px;
  animation: particle-animation-53 90s infinite;
  animation-delay: -10.6s;
  background: #2644d9;
}

.particle-54 {
  width: 17px;
  height: 17px;
  animation: particle-animation-54 90s infinite;
  animation-delay: -10.8s;
  background: #26d944;
}

.particle-55 {
  width: 30px;
  height: 30px;
  animation: particle-animation-55 90s infinite;
  animation-delay: -11s;
  background: #d9267a;
}

.particle-56 {
  width: 47px;
  height: 47px;
  animation: particle-animation-56 90s infinite;
  animation-delay: -11.2s;
  background: #d94126;
}

.particle-57 {
  width: 20px;
  height: 20px;
  animation: particle-animation-57 90s infinite;
  animation-delay: -11.4s;
  background: #26d929;
}

.particle-58 {
  width: 43px;
  height: 43px;
  animation: particle-animation-58 90s infinite;
  animation-delay: -11.6s;
  background: #d92f26;
}

.particle-59 {
  width: 39px;
  height: 39px;
  animation: particle-animation-59 90s infinite;
  animation-delay: -11.8s;
  background: #d94126;
}

@media (max-width: 1024px) {
  .particle-0 {
    display: none;
  }
  .particle-1 {
    display: none;
  }
  .particle-2 {
    display: none;
  }
  .particle-3 {
    display: none;
  }
  .particle-4 {
    display: none;
  }
  .particle-5 {
    display: none;
  }
  .particle-6 {
    display: none;
  }
  .particle-7 {
    display: none;
  }
  .particle-8 {
    display: none;
  }
  .particle-9 {
    display: none;
  }
  .particle-10 {
    display: none;
  }
}

@media (max-width: 768px) {
  .particle-0 {
    display: none;
  }
  .particle-1 {
    display: none;
  }
  .particle-2 {
    display: none;
  }
  .particle-3 {
    display: none;
  }
  .particle-4 {
    display: none;
  }
  .particle-5 {
    display: none;
  }
  .particle-6 {
    display: none;
  }
  .particle-7 {
    display: none;
  }
  .particle-8 {
    display: none;
  }
  .particle-9 {
    display: none;
  }
  .particle-10 {
    display: none;
  }
  .particle-11 {
    display: none;
  }
  .particle-12 {
    display: none;
  }
  .particle-13 {
    display: none;
  }
  .particle-14 {
    display: none;
  }
  .particle-15 {
    display: none;
  }
  .particle-16 {
    display: none;
  }
  .particle-17 {
    display: none;
  }
  .particle-18 {
    display: none;
  }
  .particle-19 {
    display: none;
  }
  .particle-20 {
    display: none;
  }
}

@keyframes offset {
  to {
    stroke-dashoffset: 0;
  }
}

/*
* @Author: Gaetan Lefebvre
* @Date:   2018-10-23 12:09:21
* @Last Modified by:   Gaetan Lefebvre
* @Last Modified time: 2018-11-22 17:16:15
*/
#studioServices {
  position: relative;
  box-sizing: border-box;
  padding: 100px 20px 100px 20px;
  background-color: #000000;
}

@media (min-width: 1024px) {
  #studioServices {
    min-height: 100vh;
    padding: 100px 32px 0;
  }
}

#studioServices .services {
  font-size: 20px;
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

#studioServices .services .service {
  font-size: 1em;
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  transition: width 500ms ease-in 0ms,height 500ms ease-in 0ms,top 500ms ease-in 0ms,left 500ms ease-in 0ms,margin-top 600ms ease-in 400ms;
}

@media (min-width: 1024px) {
  #studioServices .services .service {
    display: block;
    max-width: 360px;
    margin-top: -80px;
  }
}

#studioServices .services .service:first-child {
  margin-top: 0;
}

#studioServices .services .service .serviceShape {
  position: relative;
}

#studioServices .services .service .serviceShape svg {
  display: none;
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceShape svg {
    display: block;
  }
}

#studioServices .services .service .serviceShape svg path {
  fill: none;
}

#studioServices .services .service .serviceShape .openService {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3em;
  display: block;
  margin-bottom: 1rem;
  transition: all 500ms ease-in 0ms;
  pointer-events: auto;
  color: #ffffff;
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceShape .openService {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36%;
    margin-bottom: 0;
    transform: translate(-50%, -49%);
  }
}

#studioServices .services .service .serviceShape .openService .learmore {
  font-size: 0.8em;
  display: block;
  transition: opacity 200ms ease-in;
  opacity: 0;
}

#studioServices .services .service .serviceShape .openService:hover .learnmore {
  opacity: 1;
}

#studioServices .services .service .serviceInfosMobile .tabs {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  max-height: 0;
  transition: all 1000ms ease-in 0ms;
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceInfosMobile .tabs {
    padding: 0 18px;
  }
}

#studioServices .services .service .serviceInfosMobile .tabs .tab .title {
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.1em;
  display: inline-block;
  margin-bottom: 12px;
  text-decoration: none;
  color: #fff;
}

#studioServices .services .service .serviceInfosMobile .tabs .tab .title:after {
  display: block;
  position: relative;
  bottom: -3px;
  height: 1px;
  content: '';
  transition: transform 200ms linear;
  transform: scale(0, 1);
  background-color: #fff;
}

#studioServices .services .service .serviceInfosMobile .tabs .tab .title:hover:after {
  transform: scale(1, 1);
}

#studioServices .services .service .serviceInfosMobile .tabs .tab .content {
  font-size: 0.8em;
  display: none;
  margin: 0 0 20px;
  color: #fff;
}

#studioServices .services .service .serviceInfosMobile .tabs .tab .content p {
  margin: 0 0 20px;
  color: #fff;
}

#studioServices .services .service .serviceInfosMobile .tabs .tab.active .title:after {
  transform: scale(1, 1);
}

#studioServices .services .service .serviceInfosMobile .tabs .tab.active .content {
  display: block;
}

#studioServices .services .service .serviceInfosMobile .closeTab {
  font: inherit;
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  overflow: visible;
  -ms-flex-align: center;
      align-items: center;
  z-index: 99999;
  height: 50px;
  margin: 0;
  padding: 15px 15px;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out, z-index 0.15s step-start;
  text-transform: none;
  color: inherit;
  border: 0;
  outline: none;
  background-color: transparent;
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceInfosMobile .closeTab {
    padding: 0;
  }
}

#studioServices .services .service .serviceInfosMobile .closeTab:hover {
  opacity: 0.7;
}

#studioServices .services .service .serviceInfosMobile .closeTab-box {
  display: inline-block;
  position: relative;
  width: 33px;
  height: 23px;
}

#studioServices .services .service .serviceInfosMobile .closeTab-inner {
  display: block;
  top: 0;
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceInfosMobile .closeTab-inner {
    top: 50%;
    margin-top: -1.5px;
  }
}

#studioServices .services .service .serviceInfosMobile .closeTab-inner, #studioServices .services .service .serviceInfosMobile .closeTab-inner::before, #studioServices .services .service .serviceInfosMobile .closeTab-inner::after {
  position: absolute;
  width: 33px;
  height: 3px;
  transition-timing-function: ease;
  transition-duration: 0.15s;
  transition-property: transform;
  border-radius: 0;
}

#studioServices .services .service .serviceInfosMobile .closeTab-inner::before, #studioServices .services .service .serviceInfosMobile .closeTab-inner::after {
  display: block;
  content: '';
}

#studioServices .services .service .serviceInfosMobile .closeTab-inner::before {
  top: 0;
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 10px, 0) rotate(45deg);
  background-color: #000000;
}

#studioServices .services .service .serviceInfosMobile .closeTab-inner::after {
  top: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 10px, 0) rotate(-45deg);
  background-color: #000000;
}

#studioServices .services .service .serviceInfosDesktop {
  display: none;
}

#studioServices .services.open .service .openService:hover .learmore {
  opacity: 0;
}

#studioServices .services.openArtDirectionGraphicDesign #artDirectionGraphicDesign .serviceInfosMobile .tabs {
  max-height: 1100px;
  pointer-events: auto;
  opacity: 1;
}

#studioServices .services.openArtDirectionGraphicDesign #interpretiveDesign {
  margin-top: 0;
}

#studioServices .services.openInterpretiveDesign #interpretiveDesign .serviceInfosMobile .tabs {
  max-height: 1100px;
  pointer-events: auto;
  opacity: 1;
}

#studioServices .services.openInterpretiveDesign #contentManagement {
  margin-top: 0;
}

#studioServices .services.openContentManagement #contentManagement .serviceInfosMobile .tabs {
  max-height: 1100px;
  pointer-events: auto;
  opacity: 1;
}

#studioServices .services.openContentManagement #projectManagement {
  margin-top: 0;
}

#studioServices .services.openProjectManagement #projectManagement .serviceInfosMobile .tabs {
  max-height: 1100px;
  pointer-events: auto;
  opacity: 1;
}

@media (min-width: 1024px) {
  #studioServices {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 100px 32px 0;
  }
  #studioServices .services:after {
    display: block;
    padding-bottom: 60.47%;
    content: '';
  }
  #studioServices .services .contentServices {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #studioServices .services .service {
    font-size: 1em;
    position: absolute;
    max-width: none;
    margin: 0;
    transition: width 500ms ease-in 0ms,height 500ms ease-in 0ms,top 500ms ease-in 0ms,left 500ms ease-in 0ms;
    pointer-events: none;
  }
  #studioServices .services .service .serviceShape .openService {
    font-size: 21px;
    font-size: 1.3125rem;
    top: 50%;
    left: 50%;
    width: 36%;
    transition: all 500ms ease-in 0ms;
    transform: translate(0, 0);
  }
}

@media (min-width: 1024px) and (min-width: 1024px) {
  #studioServices .services .service .serviceShape .openService {
    font-size: 23px;
    font-size: 1.4375rem;
  }
}

@media (min-width: 1024px) and (min-width: 1580px) {
  #studioServices .services .service .serviceShape .openService {
    font-size: 26px;
    font-size: 1.625rem;
  }
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceShape .openService .learmore {
    font-size: 0.8em;
    transition: opacity 200ms ease-in;
  }
  #studioServices .services .service .serviceShape .openService:hover .learmore {
    opacity: 1;
  }
  #studioServices .services .service .serviceInfosMobile {
    display: none;
  }
  #studioServices .services .service .serviceInfosDesktop {
    display: block;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    position: absolute;
    top: 31.9%;
    left: calc(100% + 40px);
    transition: all 500ms ease-in 500ms;
    transform: scale(0.9);
    pointer-events: none;
    opacity: 0;
  }
  #studioServices .services .service .serviceInfosDesktop .linksTab {
    float: left;
    margin: 0;
    padding: 0;
  }
  #studioServices .services .service .serviceInfosDesktop .linksTab li {
    margin-bottom: 22px;
  }
  #studioServices .services .service .serviceInfosDesktop .linksTab li a {
    font-size: 0.8em;
    font-weight: 700;
    line-height: 0.9em;
    display: inline-block;
    text-decoration: none;
    color: #fff;
  }
  #studioServices .services .service .serviceInfosDesktop .linksTab li a:after {
    display: block;
    position: relative;
    bottom: -3px;
    height: 1px;
    content: '';
    transition: transform 200ms linear;
    transform: scale(0, 1);
    background-color: #fff;
  }
  #studioServices .services .service .serviceInfosDesktop .linksTab li a:hover:after {
    transform: scale(1, 1);
  }
  #studioServices .services .service .serviceInfosDesktop .linksTab li.active a:after {
    transform: scale(1, 1);
  }
  #studioServices .services .service .serviceInfosDesktop .tabs {
    float: left;
    width: 100%;
    margin: 0;
    color: #fff;
  }
  #studioServices .services .service .serviceInfosDesktop .tabs p {
    font-size: 0.8em;
    line-height: 1.1em;
    margin: 0;
    color: #fff;
  }
  #studioServices .services .service .serviceInfosDesktop .tabs .tab {
    font-size: 21px;
    font-size: 1.3125rem;
    display: none;
    transition: opacity 300ms linear;
    opacity: 0;
  }
}

@media (min-width: 1024px) and (min-width: 1024px) {
  #studioServices .services .service .serviceInfosDesktop .tabs .tab {
    font-size: 23px;
    font-size: 1.4375rem;
  }
}

@media (min-width: 1024px) and (min-width: 1580px) {
  #studioServices .services .service .serviceInfosDesktop .tabs .tab {
    font-size: 26px;
    font-size: 1.625rem;
  }
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceInfosDesktop .tabs .tab.active {
    display: block;
    opacity: 1;
  }
  #studioServices .services .service .serviceInfosDesktop .tabs:after {
    display: block;
    clear: both;
    content: '';
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab {
    font: inherit;
    display: inline-block;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
    -ms-flex-align: center;
        align-items: center;
    z-index: 99999;
    height: 50px;
    margin: 0;
    padding: 15px 15px;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out, z-index 0.15s step-start;
    text-transform: none;
    color: inherit;
    border: 0;
    outline: none;
    background-color: transparent;
  }
}

@media (min-width: 1024px) and (min-width: 992px) {
  #studioServices .services .service .serviceInfosDesktop .closeTab {
    padding: 0;
  }
}

@media (min-width: 1024px) {
  #studioServices .services .service .serviceInfosDesktop .closeTab:hover {
    opacity: 0.7;
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab-box {
    display: inline-block;
    position: relative;
    width: 33px;
    height: 23px;
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab-inner {
    display: block;
    top: 50%;
    margin-top: -1.5px;
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab-inner, #studioServices .services .service .serviceInfosDesktop .closeTab-inner::before, #studioServices .services .service .serviceInfosDesktop .closeTab-inner::after {
    position: absolute;
    width: 33px;
    height: 3px;
    transition-timing-function: ease;
    transition-duration: 0.15s;
    transition-property: transform;
    border-radius: 0;
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab-inner::before, #studioServices .services .service .serviceInfosDesktop .closeTab-inner::after {
    display: block;
    content: '';
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg);
    background-color: #000000;
  }
  #studioServices .services .service .serviceInfosDesktop .closeTab-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg);
    background-color: #000000;
  }
  #studioServices .services .service#artDirectionGraphicDesign {
    top: 16.286644951140065%;
    left: 15.955351280367697%;
    width: 24.688115561391992%;
    height: 43.53963083604778%;
  }
  #studioServices .services .service#artDirectionGraphicDesign .openService {
    top: 33%;
    left: 13%;
    width: 50%;
  }
  #studioServices .services .service#artDirectionGraphicDesign .serviceInfosDesktop {
    width: 181.386868%;
  }
  #studioServices .services .service#interpretiveDesign {
    top: 10.966340933767643%;
    left: 55.679579776756405%;
    width: 24.95075508864084%;
    height: 38.65363735070576%;
  }
  #studioServices .services .service#interpretiveDesign .openService {
    top: 38%;
    left: 32%;
    width: 53%;
  }
  #studioServices .services .service#interpretiveDesign .serviceInfosDesktop {
    width: 179.473%;
  }
  #studioServices .services .service#contentManagement {
    top: 18.349619978284473%;
    left: 31.582403151674328%;
    width: 43.40118187787262%;
    height: 69.81541802388708%;
  }
  #studioServices .services .service#contentManagement .openService {
    top: 38%;
    left: 25%;
    width: 78%;
  }
}

@media (min-width: 1024px) and (min-width: 992px) {
  #studioServices .services .service#contentManagement .openService {
    width: 35%;
  }
}

@media (min-width: 1024px) {
  #studioServices .services .service#contentManagement .serviceInfosDesktop {
    width: 176.2911%;
  }
  #studioServices .services .service#projectManagement {
    top: 59.60912052117264%;
    left: 48.325673013788574%;
    width: 22.06172028890348%;
    height: 33.00760043431053%;
  }
  #studioServices .services .service#projectManagement .openService {
    top: 34%;
    left: 20%;
    width: 50%;
  }
  #studioServices .services .service#projectManagement .serviceInfosDesktop {
    width: 202.927624%;
  }
  #studioServices .services.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 64px);
    transform: translate(-50%, -50%);
  }
  #studioServices .services.open .service .openService:hover .learmore {
    opacity: 0;
  }
  #studioServices .services.openArtDirectionGraphicDesign #artDirectionGraphicDesign {
    top: 17.046688382193268%;
    left: 0;
  }
  #studioServices .services.openArtDirectionGraphicDesign #artDirectionGraphicDesign .serviceInfosDesktop {
    transform: scale(1);
    pointer-events: auto;
    opacity: 1;
  }
  #studioServices .services.openArtDirectionGraphicDesign #interpretiveDesign {
    top: 12.920738327904452%;
    left: 80.170715692711753%;
    width: 18.0564%;
    height: 27.9044%;
  }
  #studioServices .services.openArtDirectionGraphicDesign #interpretiveDesign .openService {
    top: 38%;
    left: 34%;
  }
  #studioServices .services.openArtDirectionGraphicDesign #contentManagement {
    top: 36.590662%;
    left: 81.812213%;
    width: 18.1221%;
    height: 26.8186%;
  }
  #studioServices .services.openArtDirectionGraphicDesign #contentManagement .openService {
    top: 29%;
    left: 27%;
  }
  #studioServices .services.openArtDirectionGraphicDesign #projectManagement {
    top: 56.6091%;
    left: 80.5948%;
    width: 18.1221%;
    height: 26.8186%;
  }
  #studioServices .services.openArtDirectionGraphicDesign #projectManagement .openService {
    top: 32%;
    left: 35%;
  }
  #studioServices .services.openInterpretiveDesign #interpretiveDesign {
    top: 17.046688382193268%;
    left: 0;
  }
  #studioServices .services.openInterpretiveDesign #interpretiveDesign .serviceInfosDesktop {
    transform: scale(1);
    pointer-events: auto;
    opacity: 1;
  }
  #studioServices .services.openInterpretiveDesign #artDirectionGraphicDesign {
    top: 12.920738327904452%;
    left: 78.170716%;
    width: 21.0564%;
    height: 29.9044%;
  }
  #studioServices .services.openInterpretiveDesign #artDirectionGraphicDesign .openService {
    top: 31%;
    left: 34%;
    width: 54%;
  }
  #studioServices .services.openInterpretiveDesign #contentManagement {
    top: 36.590662%;
    left: 81.812213%;
    width: 18.1221%;
    height: 26.8186%;
  }
  #studioServices .services.openInterpretiveDesign #contentManagement .openService {
    top: 29%;
    left: 27%;
  }
  #studioServices .services.openInterpretiveDesign #projectManagement {
    top: 56.6091%;
    left: 80.5948%;
    width: 18.1221%;
    height: 26.8186%;
  }
  #studioServices .services.openInterpretiveDesign #projectManagement .openService {
    top: 32%;
    left: 35%;
  }
  #studioServices .services.openContentManagement #contentManagement {
    top: 17.046688382193268%;
    left: 0;
    width: 25.401182%;
    height: 41.815418%;
  }
  #studioServices .services.openContentManagement #contentManagement .serviceInfosDesktop {
    transform: scale(1);
    pointer-events: auto;
    opacity: 1;
  }
  #studioServices .services.openContentManagement #interpretiveDesign {
    top: 12.920738327904452%;
    left: 80.170715692711753%;
    width: 18.0564%;
    height: 27.9044%;
  }
  #studioServices .services.openContentManagement #interpretiveDesign .openService {
    top: 38%;
    left: 34%;
  }
  #studioServices .services.openContentManagement #artDirectionGraphicDesign {
    top: 36.590662%;
    left: 79.812213%;
    width: 17.1221%;
    height: 29.8186%;
  }
  #studioServices .services.openContentManagement #artDirectionGraphicDesign .openService {
    top: 29%;
    left: 38%;
  }
  #studioServices .services.openContentManagement #projectManagement {
    top: 56.6091%;
    left: 80.5948%;
    width: 18.1221%;
    height: 26.8186%;
  }
  #studioServices .services.openContentManagement #projectManagement .openService {
    top: 32%;
    left: 35%;
  }
  #studioServices .services.openContentManagement #projectManagement {
    margin-top: 0;
  }
  #studioServices .services.openProjectManagement #projectManagement {
    top: 17.046688382193268%;
    left: 0;
  }
  #studioServices .services.openProjectManagement #projectManagement .serviceInfosDesktop {
    transform: scale(1);
    pointer-events: auto;
    opacity: 1;
  }
  #studioServices .services.openProjectManagement #interpretiveDesign {
    top: 12.920738327904452%;
    left: 80.170715692711753%;
    width: 18.0564%;
    height: 27.9044%;
  }
  #studioServices .services.openProjectManagement #interpretiveDesign .openService {
    top: 38%;
    left: 34%;
  }
  #studioServices .services.openProjectManagement #contentManagement {
    top: 36.590662%;
    left: 81.812213%;
    width: 18.1221%;
    height: 26.8186%;
  }
  #studioServices .services.openProjectManagement #contentManagement .openService {
    top: 29%;
    left: 27%;
  }
  #studioServices .services.openProjectManagement #artDirectionGraphicDesign {
    top: 55.6091%;
    left: 79.5948%;
    width: 20.1221%;
    height: 32.8186%;
  }
  #studioServices .services.openProjectManagement #artDirectionGraphicDesign .openService {
    top: 32%;
    left: 35%;
  }
  #studioServices .services.transitionOpen .service {
    transition: width 500ms ease-out 500ms,height 500ms ease-out 500ms,top 500ms ease-out 500ms,left 500ms ease-out 500ms;
  }
  #studioServices .services.transitionOpen .service .openService {
    transition: all 500ms ease-out 500ms;
  }
  #studioServices .services.transitionOpen .service .serviceInfosDesktop {
    transition: all 500ms ease-in 0ms;
  }
}

/*===================================================
=            css for explanation service            =
===================================================*/
.explanationService {
  padding: 80px 0 50px;
  background-color: #000000;
}

.explanationService.content {
  padding-bottom: 0;
}

.explanationService .introduction {
  margin-bottom: 40px;
}

.explanationService .introduction .wyswyg * {
  color: #ffffff;
}

.explanationService .text .wyswyg * {
  color: #ffffff;
}

.explanationService .text .wyswyg p {
  font-size: 18px;
  font-size: 1.125rem;
}

.explanationService .text .wyswyg p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 736px) {
  .explanationService {
    padding: 80px 0 50px;
  }
  .explanationService.content {
    padding-bottom: 0;
  }
  .explanationService:after {
    display: block;
    clear: both;
    content: '';
  }
  .explanationService .introduction {
    float: left;
    width: 50%;
    margin-bottom: 0;
    padding-right: 45px;
  }
  .explanationService .text {
    float: left;
    width: 50%;
  }
}

@media (min-width: 768px) {
  .explanationService {
    padding: 80px 0 90px;
  }
  .explanationService.content {
    padding-bottom: 0;
  }
  .explanationService .introduction {
    padding-right: 75px;
  }
  .explanationService .introduction .wyswyg h4 {
    font-size: 21px;
    font-size: 1.3125rem;
  }
  .explanationService .text .wyswyg p {
    font-size: 21px;
    font-size: 1.3125rem;
  }
}

@media (min-width: 1024px) {
  .explanationService {
    padding-top: 0;
  }
  .explanationService.content {
    padding-bottom: 0;
  }
  .explanationService .introduction {
    padding-right: 95px;
  }
  .explanationService .introduction .wyswyg h4 {
    font-size: 23px;
    font-size: 1.4375rem;
  }
  .explanationService .text .wyswyg p {
    font-size: 23px;
    font-size: 1.4375rem;
  }
}

@media (min-width: 1580px) {
  .explanationService.content {
    padding-bottom: 0;
  }
  .explanationService .introduction {
    padding-right: 115px;
  }
  .explanationService .introduction .wyswyg h4 {
    font-size: 26px;
    font-size: 1.625rem;
  }
  .explanationService .text .wyswyg p {
    font-size: 26px;
    font-size: 1.625rem;
  }
}

.services.open.openArtDirectionGraphicDesign #artDirectionGraphicDesign .openService {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .services.open.openArtDirectionGraphicDesign #artDirectionGraphicDesign .openService {
    text-decoration: none;
  }
}

.services.open.openContentManagement #contentManagement .openService {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .services.open.openContentManagement #contentManagement .openService {
    text-decoration: none;
  }
}

.services.open.openInterpretiveDesign #interpretiveDesign .openService {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .services.open.openInterpretiveDesign #interpretiveDesign .openService {
    text-decoration: none;
  }
}

.services.open.openProjectManagement #projectManagement .openService {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .services.open.openProjectManagement #projectManagement .openService {
    text-decoration: none;
  }
}

/*=====  End of css for explanation service  ======*/
.social-updates {
  clear: both;
  position: relative;
  z-index: 100;
  padding: 90px 0 120px 0;
  background: #ffffff;
}

.social-updates::after {
  content: "";
  display: block;
  clear: both;
}

.social-updates__header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 50px;
}

.social-updates__title {
  font-size: 20px;
  font-size: 1.25rem;
  color: #000000;
}

.social-updates__profile-link {
  font-size: 20px;
  font-size: 1.25rem;
  color: #000000;
}

.social-filter {
  font-size: 20px;
  font-size: 1.25rem;
  width: 100%;
  padding-top: 35px;
  text-align: center;
}

.social-filter a {
  margin: 0 20px;
  color: #cac9c9;
}

.social-filter a.is-active {
  color: #000000;
}

.social-updates__list {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.social-updates__list-inner {
  display: -ms-flexbox;
  display: flex;
  width: 200%;
}

.social-updates__wrap {
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 50%;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.social-updates__wrap--instagram {
  transform: translateX(-100%);
  opacity: 0;
}

.social-updates__wrap--instagram.is-active {
  transform: translateX(0);
  opacity: 1;
}

.social-updates__wrap--twitter {
  -ms-flex-align: center;
      align-items: center;
  transform: translateX(0);
  opacity: 0;
}

.social-updates__wrap--twitter.is-active {
  transform: translateX(-100%);
  opacity: 1;
}

.social-updates__update {
  font-size: 14px;
  font-size: 0.875rem;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  border-right: 1px solid #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.social-updates__update.no-image .social-update__inner, .social-updates__update:hover .social-update__inner {
  opacity: 1;
}

.social-updates__update:last-child {
  border-right: none;
}

.social-updates__update.social-updates__update--twitter {
  width: 100%;
  background-color: #ffffff;
}

.social-updates__update.social-updates__update--instagram {
  width: 16.6666667%;
  padding-bottom: 16.6666667%;
  background-color: #000000;
}

@media (max-width: 1280px) {
  .social-updates__update.social-updates__update--instagram {
    width: 20%;
    padding-bottom: 20%;
  }
  .social-updates__update.social-updates__update--instagram-5 {
    display: none;
  }
}

@media (max-width: 1100px) {
  .social-updates__update.social-updates__update--instagram {
    width: 25%;
    padding-bottom: 25%;
  }
  .social-updates__update.social-updates__update--instagram-4 {
    display: none;
  }
}

@media (max-width: 900px) {
  .social-updates__update.social-updates__update--instagram {
    width: 33.3333333%;
    padding-bottom: 33.3333333%;
  }
  .social-updates__update.social-updates__update--instagram-3 {
    display: none;
  }
}

@media (max-width: 768px) {
  .social-updates__update.social-updates__update--instagram {
    width: 50%;
    padding-bottom: 50%;
  }
  .social-updates__update.social-updates__update--instagram-2 {
    display: none;
  }
}

@media (max-width: 480px) {
  .social-updates__update.social-updates__update--instagram {
    width: 100%;
    padding-bottom: 100%;
  }
  .social-updates__update.social-updates__update--instagram-1 {
    display: none;
  }
}

.social-updates__update .social-update__inner {
  line-height: 1.4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.social-updates__update .social-update__inner--instagram {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.social-updates__update .social-update__inner--instagram .social-update__icon {
  width: 40px;
  height: 40px;
  margin: 10px;
}

.social-updates__update .social-update__inner--instagram p.social-update__date {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
}

.social-updates__update .social-update__inner--twitter {
  position: relative;
  height: auto;
  padding: 0;
  color: #000000;
  background: #ffffff;
}

.social-updates__update .social-update__inner--twitter p {
  font-size: 30px;
  font-size: 1.875rem;
}

.social-updates__update .social-update__inner--twitter p.social-update__date {
  font-size: 22px;
  font-size: 1.375rem;
}

.social-updates__update .social-update__inner p {
  margin-top: 0;
}

/*
* @Author: Gaetan Lefebvre
* @Date:   2018-11-14 17:44:50
* @Last Modified by:   Gaetan Lefebvre
* @Last Modified time: 2018-11-22 16:55:54
*/
.section-awards {
  background-color: #e8e8e8;
}

.awards__title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  text-transform: capitalize;
  color: #000000;
}

.awards__wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 75px 0 0;
  margin-left: -20px;
  margin-right: -20px;
}

@media (min-width: 768px) {
  .awards__wrapper {
    padding: 90px 0 0;
  }
}

@media (min-width: 992px) {
  .awards__wrapper {
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media (min-width: 1500px) {
  .awards__wrapper {
    padding: 110px 0 0;
  }
}

.award__item {
  margin-bottom: 30px;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  padding-right: 20px;
  padding-left: 20px;
}

@media (min-width: 992px) {
  .award__item {
    padding-right: 40px;
    padding-left: 40px;
    -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
  }
}

.award__item-reward {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  display: block;
}

.award__item-title {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  display: block;
}

.award__item-address {
  font-size: 16px;
  font-size: 1rem;
  font-style: normal;
  line-height: 22px;
  display: block;
}

/*
* @Author: Gaetan Lefebvre
* @Date:   2018-11-22 16:54:47
* @Last Modified by:   Gaetan Lefebvre
* @Last Modified time: 2018-11-22 17:33:36
*/
.careers-section {
  padding: 75px 0 80px;
  background-color: #000000;
}

@media (min-width: 768px) {
  .careers-section {
    padding: 100px 0 105px;
  }
}

@media (min-width: 992px) {
  .careers-section {
    padding: 115px 0 120px;
  }
}

@media (min-width: 1500px) {
  .careers-section {
    padding: 130px 0 135px;
  }
}

.careers-section__title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
}

.careers-section__title h1,
.careers-section__title h2,
.careers-section__title h3,
.careers-section__title h4,
.careers-section__title h5,
.careers-section__title h6,
.careers-section__title p {
  font-size: inherit;
  font-weight: inherit;
  margin-top: 0;
  color: inherit;
}

.careers-content-wrapper {
  padding: 30px 0 0;
}

@media (min-width: 768px) {
  .careers-content-wrapper {
    padding: 40px 0 0;
  }
}

.careers-content-wrapper .job-list ul {
  margin: 0;
  padding: 40px 0 0;
  list-style-type: none;
}

.careers-content-wrapper--empty {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.careers-content-wrapper--empty .careers-content {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .careers-content-wrapper--empty .careers-content {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }
}

.careers-content-wrapper--empty .careers__list-empty {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .careers-content-wrapper--empty .careers__list-empty {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }
}

.careers-content {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  float: left;
  width: 100%;
  margin-bottom: 30px;
  padding-right: 45px;
  color: #fff;
}

@media (min-width: 1024px) {
  .careers-content {
    width: 60%;
    padding-right: 80px;
    margin-bottom: 0;
  }
}

@media (min-width: 1500px) {
  .careers-content {
    width: 50%;
    padding-right: 132px;
  }
}

.careers-content h1,
.careers-content h2,
.careers-content h3,
.careers-content h4,
.careers-content h5,
.careers-content h6,
.careers-content p {
  font-size: inherit;
  font-weight: inherit;
  margin-top: 0;
  color: inherit;
}

.careers__list {
  float: left;
  width: 100%;
  margin: auto;
  padding: 0;
  list-style-type: none;
}

@media (min-width: 1024px) {
  .careers__list {
    width: 40%;
  }
}

@media (min-width: 1500px) {
  .careers__list {
    width: 50%;
  }
}

.careers__item {
  margin-bottom: 30px;
}

.careers__item h3,
.careers__item p,
.careers__item a {
  font-size: 18px;
  font-size: 1.125rem;
  color: #fff;
}

@media (min-width: 768px) {
  .careers__item h3,
  .careers__item p,
  .careers__item a {
    font-size: 21px;
    font-size: 1.3125rem;
  }
}

@media (min-width: 1024px) {
  .careers__item h3,
  .careers__item p,
  .careers__item a {
    font-size: 26px;
    font-size: 1.625rem;
  }
}

.careers__item h3 {
  font-weight: 700;
}

.careers__item a {
  text-decoration: underline;
  font-weight: 700;
}

.careers__list-empty {
  font-size: 26px;
  font-size: 1.625rem;
  color: #fff;
}

.careers__list-empty h1,
.careers__list-empty h2,
.careers__list-empty h3,
.careers__list-empty h4,
.careers__list-empty h5,
.careers__list-empty h6,
.careers__list-empty p {
  font-size: inherit;
  font-weight: inherit;
  margin-top: 0;
  color: inherit;
}

.careers__list-empty a {
  font-size: inherit;
  font-weight: inherit;
  margin-top: 0;
  text-decoration: underline;
  color: inherit;
}

/**
*
* Newsletter
*
*/
.subscribe-newsletter-wrapper {
  position: relative;
}

.subscribe-newsletter-wrapper .newsletter {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 400;
  overflow: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  max-height: 0;
  margin-top: 10px;
  transition: max-height 0.5s ease-in-out;
  text-align: left;
  color: #000000;
}

@media (min-width: 768px) {
  .subscribe-newsletter-wrapper .newsletter {
    width: 360px;
  }
}

@media (min-width: 992px) {
  .subscribe-newsletter-wrapper .newsletter {
    width: 400px;
  }
}

.subscribe-newsletter-wrapper .newsletter.is-active {
  max-height: 120px;
  transition: max-height 0.5s 0.5s ease-in-out;
}

.subscribe-newsletter-wrapper .newsletter a {
  text-decoration: underline;
  color: #fff;
}

.subscribe-newsletter-wrapper .newsletter a.close-button {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 30px;
  text-decoration: none;
}

.subscribe-newsletter-wrapper .newsletter h4 {
  color: #ffffff;
}

.subscribe-newsletter-wrapper .newsletter p {
  font-size: 11px;
  font-size: 0.6875rem;
  margin: 5px 0 0 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 576px) {
  .subscribe-newsletter-wrapper .newsletter p {
    font-size: 13px;
    font-size: 0.8125rem;
  }
}

.subscribe-newsletter-wrapper .newsletter a {
  font-size: 11px;
  font-size: 0.6875rem;
  margin: 5px 0 0 0;
  text-align: left;
}

@media (min-width: 576px) {
  .subscribe-newsletter-wrapper .newsletter a {
    font-size: 13px;
    font-size: 0.8125rem;
  }
}

.subscribe-newsletter-wrapper .newsletter .subscribe-message p:last-of-type {
  display: inline-block;
}

.subscribe-newsletter-wrapper .newsletter .thankyou,
.subscribe-newsletter-wrapper .newsletter .error {
  text-align: right;
}

.subscribe-newsletter-wrapper .newsletter .thankyou p,
.subscribe-newsletter-wrapper .newsletter .error p {
  text-align: right;
}

.subscribe-newsletter-wrapper .newsletter .error {
  line-height: 24px;
  color: #ffffff;
}

.subscribe-newsletter-wrapper .newsletter fieldset {
  padding: 0;
  border: 1px solid #ffffff;
}

.subscribe-newsletter-wrapper .newsletter label {
  line-height: 40px;
  display: none;
  float: left;
  width: 100px;
}

.subscribe-newsletter-wrapper .newsletter input,
.subscribe-newsletter-wrapper .newsletter button {
  float: left;
  border: none;
}

.subscribe-newsletter-wrapper .newsletter input#subscribe_name {
  display: none;
}

.subscribe-newsletter-wrapper .newsletter input[type='email'] {
  line-height: 40px;
  width: 70%;
  padding: 0 10px;
  color: #000000;
}

@media (min-width: 576px) {
  .subscribe-newsletter-wrapper .newsletter input[type='email'] {
    width: 80%;
  }
}

.subscribe-newsletter-wrapper .newsletter input[type='email']::-webkit-input-placeholder {
  color: #666666;
}

.subscribe-newsletter-wrapper .newsletter input[type='email']::-moz-placeholder {
  color: #666666;
}

.subscribe-newsletter-wrapper .newsletter input[type='email']:-ms-input-placeholder {
  color: #666666;
}

.subscribe-newsletter-wrapper .newsletter input[type='email']:-moz-placeholder {
  color: #666666;
}

.subscribe-newsletter-wrapper .newsletter button {
  font-weight: 700;
  line-height: 40px;
  width: 30%;
  padding: 0 20px;
  transition: background-color 0.3s ease-in-out;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 576px) {
  .subscribe-newsletter-wrapper .newsletter button {
    width: 20%;
  }
}

.subscribe-newsletter-wrapper .newsletter button:hover {
  background-color: #1a1a1a;
}

.login-form,
.password-form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.login-form .login_option,
.login-form .userAccount,
.password-form .login_option,
.password-form .userAccount {
  width: 400px;
}

.login-form h1,
.login-form h2,
.password-form h1,
.password-form h2 {
  font-size: 32px;
  font-size: 2rem;
  color: #ffffff;
}

.login-form p,
.password-form p {
  color: #ffffff;
}

.login-form fieldset,
.password-form fieldset {
  padding-right: 0;
  padding-left: 0;
}

.login-form fieldset label,
.password-form fieldset label {
  font-size: 14px;
  font-size: 0.875rem;
  display: block;
  color: #ffffff;
}

.login-form fieldset input,
.password-form fieldset input {
  display: block;
  width: 100%;
}

.login-form .button,
.password-form .button {
  line-height: initial;
  width: 100%;
  margin-top: 20px;
}

/*  ==========================================================================
	Privacy Policy
    ========================================================================== */
/**
*
* structure for the privacy policy page
*
*/
.privacy-policy-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100vh;
  background: #000000;
}

.privacy-policy-title-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .privacy-policy-title-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }
}

.privacy-policy-content-inner {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 992px) {
  .privacy-policy-content-inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 75%;
    padding: 0 40px;
  }
}

.privacy-policy-spacer {
  height: 15vh;
  min-height: 100px;
}

@media (min-width: 992px) {
  .privacy-policy-spacer {
    height: 25vh;
    min-height: 200px;
  }
}

.privacy-policy-spacer--content {
  height: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .privacy-policy-spacer--content {
    height: 25vh;
    min-height: 200px;
  }
}

.privacy-policy-spacer--return-top {
  height: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .privacy-policy-spacer--return-top {
    -ms-flex-positive: 1;
        flex-grow: 1;
  }
}

.privacy-policy-title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .privacy-policy-title {
    margin-bottom: 90px;
  }
}

.privacy-policy-content-section {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
  padding-bottom: 100px;
}

@media (min-width: 992px) {
  .privacy-policy-content-section {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    width: 75%;
    padding-bottom: 100px;
  }
}

@media (min-width: 1200px) {
  .privacy-policy-content-section {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    width: 50%;
    padding-bottom: 200px;
  }
}

.privacy-policy-text {
  max-width: 1200px;
}

.privacy-policy-return-top-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  padding-bottom: 70px;
  text-align: right;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .privacy-policy-return-top-section {
    padding-bottom: 70px;
  }
}

@media (min-width: 1200px) {
  .privacy-policy-return-top-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
    padding-bottom: 200px;
  }
}

.privacy-policy-return-top {
  color: #ffffff;
}

.privacy-policy-return-top:after {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px 5px -2px 6px;
  content: '';
  transform: rotate(45deg);
  transform-origin: bottom;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

/*  ==========================================================================
	Cookie Policy
    ========================================================================== */
/**
*
* structure for the cookie policy page
*
*/
.cookie-policy-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100vh;
  background: #000000;
}

.cookie-policy-title-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .cookie-policy-title-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }
}

.cookie-policy-content-inner {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 992px) {
  .cookie-policy-content-inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 75%;
    padding: 0 40px;
  }
}

.cookie-policy-spacer {
  height: 15vh;
  min-height: 100px;
}

@media (min-width: 992px) {
  .cookie-policy-spacer {
    height: 25vh;
    min-height: 200px;
  }
}

.cookie-policy-spacer--content {
  height: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .cookie-policy-spacer--content {
    height: 25vh;
    min-height: 200px;
  }
}

.cookie-policy-spacer--return-top {
  height: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .cookie-policy-spacer--return-top {
    -ms-flex-positive: 1;
        flex-grow: 1;
  }
}

.cookie-policy-title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .cookie-policy-title {
    margin-bottom: 90px;
  }
}

.cookie-policy-content-section {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
  padding-bottom: 100px;
}

@media (min-width: 992px) {
  .cookie-policy-content-section {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    width: 75%;
    padding-bottom: 100px;
  }
}

@media (min-width: 1200px) {
  .cookie-policy-content-section {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    width: 50%;
    padding-bottom: 200px;
  }
}

.cookie-policy-text {
  max-width: 1200px;
}

.cookie-policy-return-top-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  padding-bottom: 70px;
  text-align: right;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .cookie-policy-return-top-section {
    padding-bottom: 70px;
  }
}

@media (min-width: 1200px) {
  .cookie-policy-return-top-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
    padding-bottom: 200px;
  }
}

.cookie-policy-return-top {
  color: #ffffff;
}

.cookie-policy-return-top:after {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px 5px -2px 6px;
  content: '';
  transform: rotate(45deg);
  transform-origin: bottom;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.project-title {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.2s ease;
  transform: translateY(-100%);
  background: rgba(0, 0, 0, 0.8);
}

@media (min-width: 992px) {
  .project-title {
    display: block;
  }
}

.project-title--up {
  transform: translateY(0);
}

.project-title__inner {
  padding: 1.25rem 1.25rem 1.25rem;
}

@media (min-width: 992px) {
  .project-title__inner {
    padding: 2.5rem 2.5rem 2.5rem;
  }
}

.project-title__client {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.project-title__project {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.03em;
  color: #ffffff;
}

/*  ==========================================================================
	Page Not Found
    ========================================================================== */
/**
*
* structure for the privacy policy page
*
*/
.page-not-found-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100vh;
  background: #000000;
}

.page-not-found-title-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .page-not-found-title-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }
}

.page-not-found-content-inner {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 992px) {
  .page-not-found-content-inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 75%;
    padding: 0 40px;
  }
}

.page-not-found-spacer {
  height: 15vh;
  min-height: 100px;
}

@media (min-width: 992px) {
  .page-not-found-spacer {
    height: 25vh;
    min-height: 200px;
  }
}

.page-not-found-spacer--content {
  height: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .page-not-found-spacer--content {
    height: 25vh;
    min-height: 200px;
  }
}

.page-not-found-spacer--return-top {
  height: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .page-not-found-spacer--return-top {
    -ms-flex-positive: 1;
        flex-grow: 1;
  }
}

.page-not-found-title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
  color: #ffffff;
}

@media (min-width: 992px) {
  .page-not-found-title {
    margin-bottom: 90px;
  }
}

.page-not-found-content-section {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%;
  padding-bottom: 100px;
}

@media (min-width: 992px) {
  .page-not-found-content-section {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    width: 75%;
    padding-bottom: 100px;
  }
}

@media (min-width: 1200px) {
  .page-not-found-content-section {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    width: 50%;
    padding-bottom: 200px;
  }
}

.page-not-found-text {
  max-width: 1200px;
}

.page-not-found-return-top-section {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
  padding-bottom: 70px;
  text-align: right;
  color: #fff;
  background-color: #000000;
}

@media (min-width: 992px) {
  .page-not-found-return-top-section {
    padding-bottom: 70px;
  }
}

@media (min-width: 1200px) {
  .page-not-found-return-top-section {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
    padding-bottom: 200px;
  }
}

.page-not-found-return-top {
  color: #ffffff;
}

.page-not-found-return-top:after {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px 5px -2px 6px;
  content: '';
  transform: rotate(45deg);
  transform-origin: bottom;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

/* ==========================================================================
    Cookie Banner
   ========================================================================== */
body .ez-consent .notification-main .notification-text-large {
  font-size: clamp(14px, calc(0.875rem + (2) * ((100vw - 375px) / (1920 - 375))), 16px);
  font-family: "ff-meta-web-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body .ez-consent .notification-main .notification-desc > span > p {
  margin: 0 !important;
}

body .ez-consent .notification-main.default-large {
  padding-left: clamp(15px, calc(0.9375rem + (15) * ((100vw - 375px) / (1920 - 375))), 30px);
  padding-right: clamp(15px, calc(0.9375rem + (5) * ((100vw - 375px) / (1920 - 375))), 20px);
  padding-top: clamp(15px, calc(0.9375rem + (8) * ((100vw - 375px) / (1920 - 375))), 23px);
  padding-bottom: clamp(15px, calc(0.9375rem + (8) * ((100vw - 375px) / (1920 - 375))), 23px);
}

body .ez-consent .button-decline:hover {
  background-color: white !important;
  color: black !important;
}

body .ez-consent .button-accept:hover {
  background-color: white !important;
  color: black !important;
}

body .ez-consent .notification-main .buttons-large button {
  font-size: clamp(14px, calc(0.875rem + (2) * ((100vw - 375px) / (1920 - 375))), 16px);
  font-weight: 700;
  padding-bottom: clamp(8px, calc(0.5rem + (4) * ((100vw - 375px) / (1920 - 375))), 12px);
  padding-top: clamp(7px, calc(0.4375rem + (3) * ((100vw - 375px) / (1920 - 375))), 10px);
}

/* -------------------------
Top Navigation
----------------------------*/
.splash {
  position: fixed;
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  height: 100vh;
  opacity: 1;
  transition: 0.5s all ease-in-out;
  pointer-events: auto;
  cursor: pointer;
}

.splash.finished {
  opacity: 0;
  pointer-events: none;
}

.splash.slide-out {
  transform: translateY(-100%);
  pointer-events: unset;
  transition: 0.3s all ease-in-out;
}

.splash__video {
  width: 100%;
  height: 100%;
  width: 0;
}

.splash .plyr__video-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background: #FBFBF9;
}

@media (max-width: 575px) {
  .splash .plyr__video-wrapper {
    width: 130%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
  }
}

.ton {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  height: clamp(94px, calc(5.875rem + (56) * ((100vw - 375px) / (1920 - 375))), 150px);
  z-index: 1;
  background: white;
}

.ton__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
}

.ton__links {
  display: -ms-flexbox;
  display: flex;
  gap: 70px;
  font-size: 21px;
}

@media (max-width: 575px) {
  .ton__links {
    display: none;
  }
}

.ton__link {
  color: black;
  font-weight: 600;
  transition: 0.3s all ease;
}

.ton__link:hover {
  color: #777776;
}

.ton__link.is-active {
  color: #777776;
}

.ton__logo {
  max-height: clamp(30px, calc(1.875rem + (15) * ((100vw - 375px) / (1920 - 375))), 45px);
}

.ton.sticky-down {
  animation: stickydown 0.4s ease-in-out forwards;
  height: 50px;
}

.ton.sticky-up {
  animation: stickyup 0.4s ease-in-out forwards;
}

@keyframes stickydown {
  0% {
    position: fixed;
    transform: translateY(-190px);
    height: clamp(94px, calc(5.875rem + (56) * ((100vw - 375px) / (1920 - 375))), 150px);
  }
  100% {
    position: fixed;
    transform: translateY(0);
    height: clamp(94px, calc(5.875rem + (16) * ((100vw - 375px) / (1920 - 375))), 110px);
  }
}

@keyframes stickyup {
  0% {
    position: fixed;
    transform: translateY(0);
    height: clamp(94px, calc(5.875rem + (16) * ((100vw - 375px) / (1920 - 375))), 110px);
  }
  100% {
    position: fixed;
    transform: translateY(-190px);
    height: clamp(94px, calc(5.875rem + (56) * ((100vw - 375px) / (1920 - 375))), 150px);
  }
}

/* -------------------------
Footer
----------------------------*/
.foo {
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  height: clamp(80px, calc(5rem + (37) * ((100vw - 375px) / (1920 - 375))), 117px);
  background: white;
}

.foo__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  font-size: clamp(10px, calc(0.625rem + (8) * ((100vw - 375px) / (1920 - 375))), 18px);
  gap: clamp(10px, calc(0.625rem + (65) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.foo__link {
  color: black;
  transition: 0.2s all ease;
}

.foo__link:hover {
  opacity: 0.7;
}

.foo__copyright {
  color: black;
  transition: 0.2s all ease;
}

.foo__copyright:hover {
  opacity: 0.7;
}

.foo__links {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex: 1;
      flex: 1;
  gap: clamp(10px, calc(0.625rem + (65) * ((100vw - 375px) / (1920 - 375))), 75px);
}

@media (max-width: 575px) {
  .foo__links {
    -ms-flex-pack: unset;
        justify-content: unset;
    -ms-flex: 0;
        flex: 0;
    white-space: nowrap;
  }
}

.foo__left {
  display: -ms-flexbox;
  display: flex;
  gap: clamp(10px, calc(0.625rem + (65) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.foo__right {
  display: -ms-flexbox;
  display: flex;
  gap: clamp(10px, calc(0.625rem + (65) * ((100vw - 375px) / (1920 - 375))), 75px);
}

/* -------------------------
Page Header
----------------------------*/
.pah {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(110px, calc(6.875rem + (60) * ((100vw - 375px) / (1920 - 375))), 170px);
  padding-bottom: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.pah__inner {
  width: 100%;
  max-width: 1420px;
}

@media (max-width: 575px) {
  .pah {
    padding-left: 0;
    padding-right: 0;
    padding-top: 94px;
    height: 100vh;
  }
}

.pah__inner .swiper {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  height: calc(100vh - 300px);
  overflow: hidden;
}

@media (max-width: 575px) {
  .pah__inner .swiper {
    height: 65vh;
    max-width: 100vw;
  }
}

.pah__slide {
  aspect-ratio: 1420 / 765;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 575px) {
  .pah__slide {
    aspect-ratio: unset;
  }
}

.pah__controls {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-top: 30px;
}

@media (max-width: 575px) {
  .pah__controls {
    display: none;
  }
}

.pah__back {
  cursor: pointer;
  gap: 5px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.pah__next {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 5px;
}

.pah__arrow-text {
  text-transform: uppercase;
  font-size: 14px;
  display: inline-block;
}

.pah__title {
  display: none;
}

@media (max-width: 575px) {
  .pah__title {
    display: block;
    font-size: 42px;
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
    padding-left: 20px;
    padding-top: 30px;
  }
}

/* -------------------------
Body Copy
----------------------------*/
.boc {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
  padding-bottom: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.boc__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

@media (max-width: 575px) {
  .boc__inner {
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 25px;
  }
}

.boc__title {
  font-size: clamp(20px, calc(1.25rem + (40) * ((100vw - 375px) / (1920 - 375))), 60px);
  font-weight: 700;
  margin: 0;
  line-height: 1;
  width: 47%;
}

@media (max-width: 575px) {
  .boc__title {
    width: 100%;
  }
  .boc__title.hide {
    display: none;
  }
}

.boc__right {
  width: 47%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: clamp(15px, calc(0.9375rem + (35) * ((100vw - 375px) / (1920 - 375))), 50px);
}

@media (max-width: 575px) {
  .boc__right {
    width: 100%;
  }
}

.boc__content p {
  font-size: clamp(15px, calc(0.9375rem + (9) * ((100vw - 375px) / (1920 - 375))), 24px);
  line-height: 1.2;
  font-weight: 400px;
  margin-top: 0;
}

.boc__link {
  font-size: clamp(15px, calc(0.9375rem + (9) * ((100vw - 375px) / (1920 - 375))), 24px);
  font-weight: bold;
  color: black;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  gap: clamp(10px, calc(0.625rem + (5) * ((100vw - 375px) / (1920 - 375))), 15px);
  line-height: 1;
}

@media (max-width: 575px) {
  .boc__link {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}

.boc__arrow {
  margin-bottom: 0.1em;
  height: clamp(10px, calc(0.625rem + (3) * ((100vw - 375px) / (1920 - 375))), 13px);
}

.boc__inner-dual {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 40px;
}

.boc__inner-dual .boc__content {
  -ms-flex: 1;
      flex: 1;
}

@media (max-width: 575px) {
  .boc__inner-dual {
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 25px;
  }
}

/* -------------------------
Project Header
----------------------------*/
.prh {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-top: clamp(94px, calc(5.875rem + (86) * ((100vw - 375px) / (1920 - 375))), 180px);
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-bottom: clamp(35px, calc(2.1875rem + (45) * ((100vw - 375px) / (1920 - 375))), 80px);
}

@media (max-width: 575px) {
  .prh {
    padding-left: 0;
    padding-right: 0;
  }
}

.prh__inner {
  width: 100%;
  max-width: 1420px;
}

.prh__inner .swiper {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
}

.prh__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: black;
  height: calc(100vh - 300px);
  max-height: 700px;
  pointer-events: auto;
}

@media (max-width: 575px) {
  .prh__image {
    height: 60vh;
  }
}

.prh__slide {
  color: black;
  pointer-events: none;
}

.prh__controls-outer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

@media (max-width: 575px) {
  .prh__controls-outer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.prh__controls {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-top: clamp(25px, calc(1.5625rem + (5) * ((100vw - 375px) / (1920 - 375))), 30px);
  max-width: 1420px;
  width: 100%;
}

.prh__back {
  cursor: pointer;
  gap: 5px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  color: black;
}

.prh__back:hover .prh__arrow {
  transform: translateX(-7px);
}

.prh__next {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 5px;
  color: black;
}

.prh__next:hover .prh__arrow {
  transform: translateX(7px);
}

.prh__arrow-text {
  text-transform: uppercase;
  font-size: clamp(12px, calc(0.75rem + (6) * ((100vw - 375px) / (1920 - 375))), 18px);
  display: inline-block;
  pointer-events: none;
}

.prh__arrow {
  height: clamp(8px, calc(0.5rem + (3) * ((100vw - 375px) / (1920 - 375))), 11px);
  pointer-events: none;
  transition: transform 0.3s ease-in-out;
}

.prh__title {
  font-size: clamp(16px, calc(1rem + (8) * ((100vw - 375px) / (1920 - 375))), 24px);
  margin: 0;
  font-weight: 400;
}

.prh__content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding-top: 25px;
}

@media (max-width: 575px) {
  .prh__content {
    padding-top: 30px;
    -ms-flex-direction: column;
        flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    gap: 10px;
  }
}

.prh__strapline {
  font-size: clamp(24px, calc(1.5rem + (12) * ((100vw - 375px) / (1920 - 375))), 36px);
  margin: 0;
  line-height: 1;
}

.prh__year {
  display: inline-block;
  font-size: clamp(22px, calc(1.375rem + (14) * ((100vw - 375px) / (1920 - 375))), 36px);
  font-weight: bold;
}

.prh__scroll {
  font-size: clamp(12px, calc(0.75rem + (6) * ((100vw - 375px) / (1920 - 375))), 18px);
  text-transform: uppercase;
  cursor: pointer;
  color: black;
  position: relative;
}

.prh__scroll:hover:before {
  transform: translateY(5px) rotate(-45deg);
  opacity: 1;
}

.prh__scroll:before {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: translateY(0px) rotate(-45deg);
  opacity: 0;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}

html.is-changing .transition-slide {
  transition: transform 2s ease, opacity 2s ease;
}

.transition-slide.is-next-container {
  transform: translateX(100%);
}

.transition-slide.is-previous-container {
  transform: translateX(-100%);
}

html.to-left .transition-slide.is-next-container {
  transform: translateX(-100%);
}

html.to-left .transition-slide.is-previous-container {
  transform: translateX(100%);
}

.page-content {
  display: -ms-grid;
  display: grid;
  overflow: hidden;
  grid-template-areas: "main";
}

.page-content > .page {
  grid-area: main;
}

/* -------------------------
Body Copy Two Column
----------------------------*/
.bot {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-bottom: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
}

.bot__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

@media (max-width: 575px) {
  .bot__inner {
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 25px;
  }
}

.bot__content {
  gap: clamp(15px, calc(0.9375rem + (75) * ((100vw - 375px) / (1920 - 375))), 90px);
  column-count: 2;
}

@media (max-width: 575px) {
  .bot__content {
    column-count: unset;
  }
}

.bot__content p {
  font-size: clamp(15px, calc(0.9375rem + (9) * ((100vw - 375px) / (1920 - 375))), 24px);
  line-height: 1.2;
  font-weight: 400px;
  margin-top: 0;
}

/* -------------------------
Body Copy Subheading Above
----------------------------*/
.boa {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
  padding-bottom: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.boa__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: clamp(25px, calc(1.5625rem + (45) * ((100vw - 375px) / (1920 - 375))), 70px);
}

.boa__title {
  font-size: clamp(20px, calc(1.25rem + (40) * ((100vw - 375px) / (1920 - 375))), 60px);
  font-weight: 700;
  margin: 0;
  line-height: 1;
  width: 47%;
}

@media (max-width: 575px) {
  .boa__title {
    width: 100%;
  }
}

.boa__content {
  column-count: 2;
  gap: clamp(15px, calc(0.9375rem + (75) * ((100vw - 375px) / (1920 - 375))), 90px);
}

@media (max-width: 575px) {
  .boa__content {
    column-count: unset;
  }
}

.boa__content p {
  font-size: clamp(15px, calc(0.9375rem + (9) * ((100vw - 375px) / (1920 - 375))), 24px);
  line-height: 1.2;
  font-weight: 400px;
  margin-top: 0;
}

/* -------------------------
Quote
----------------------------*/
.quo {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-bottom: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
}

.quo__inner {
  max-width: 1420px;
  width: 100%;
}

.quo__content {
  font-family: bodoni;
  font-size: clamp(30px, calc(1.875rem + (50) * ((100vw - 375px) / (1920 - 375))), 80px);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: clamp(10px, calc(0.625rem + (10) * ((100vw - 375px) / (1920 - 375))), 20px);
  max-width: 74%;
  position: relative;
}

@media (max-width: 575px) {
  .quo__content {
    max-width: 100%;
  }
}

.quo__attribution {
  font-weight: 700;
  font-size: clamp(12px, calc(0.75rem + (4) * ((100vw - 375px) / (1920 - 375))), 16px);
  line-height: 1;
  margin-bottom: 4px;
}

@media (max-width: 575px) {
  .quo__attribution {
    margin-bottom: 2px;
  }
}

.quo__attribution2 {
  font-size: clamp(12px, calc(0.75rem + (4) * ((100vw - 375px) / (1920 - 375))), 16px);
  line-height: 1;
}

.quo__character {
  font-size: clamp(30px, calc(1.875rem + (50) * ((100vw - 375px) / (1920 - 375))), 80px);
  position: absolute;
  left: -0.5em;
  top: 0;
}

/* -------------------------
Single Image
----------------------------*/
.sim {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
  padding-bottom: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.sim__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.sim__image {
  width: 100%;
  aspect-ratio: 1420 / 890;
  object-fit: cover;
}

@media (max-width: 575px) {
  .sim__image {
    aspect-ratio: unset;
  }
}

/* -------------------------
Contact
----------------------------*/
.con {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(150px, calc(9.375rem + (80) * ((100vw - 375px) / (1920 - 375))), 230px);
  padding-bottom: clamp(50px, calc(3.125rem + (25) * ((100vw - 375px) / (1920 - 375))), 75px);
  -ms-flex-pack: center;
      justify-content: center;
}

.con__inner {
  width: 100%;
  max-width: 1420px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: clamp(50px, calc(3.125rem + (80) * ((100vw - 375px) / (1920 - 375))), 130px);
}

@media (max-width: 991px) {
  .con__inner {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

.con__text {
  font-size: clamp(15px, calc(0.9375rem + (5) * ((100vw - 375px) / (1920 - 375))), 20px);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.con__text a {
  color: black;
}

.con__text.listing {
  height: 2.5em;
  overflow: hidden;
  margin-bottom: 15px;
}

.con__text p {
  margin-top: 0;
}

.con__text p:last-child {
  margin-bottom: 0;
}

.con__address {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: clamp(15px, calc(0.9375rem + (5) * ((100vw - 375px) / (1920 - 375))), 20px);
  line-height: 1.2;
  margin-bottom: clamp(5px, calc(0.3125rem + (13) * ((100vw - 375px) / (1920 - 375))), 18px);
}

.con__address p {
  margin: 0;
}

.con__col1 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: clamp(35px, calc(2.1875rem + (10) * ((100vw - 375px) / (1920 - 375))), 45px);
}

@media (max-width: 991px) {
  .con__col2 {
    -ms-flex-order: 2;
        order: 2;
  }
}

.con__col3 {
  max-width: 32%;
  min-width: 32%;
}

@media (max-width: 991px) {
  .con__col3 {
    max-width: unset;
  }
}

.con__title {
  font-size: clamp(18px, calc(1.125rem + (2) * ((100vw - 375px) / (1920 - 375))), 20px);
  line-height: 1.2;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: clamp(5px, calc(0.3125rem + (10) * ((100vw - 375px) / (1920 - 375))), 15px);
}

.con__title.listing {
  font-size: clamp(15px, calc(0.9375rem + (5) * ((100vw - 375px) / (1920 - 375))), 20px);
  margin-bottom: clamp(10px, calc(0.625rem + (5) * ((100vw - 375px) / (1920 - 375))), 15px);
}

.con__job-block {
  border-top: 1px solid black;
  padding-top: 17px;
  padding-bottom: clamp(30px, calc(1.875rem + (5) * ((100vw - 375px) / (1920 - 375))), 35px);
}

.con__link {
  font-weight: 700;
  color: black;
  text-decoration: none;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-size: clamp(15px, calc(0.9375rem + (3) * ((100vw - 375px) / (1920 - 375))), 18px);
  -ms-flex-align: center;
      align-items: center;
}

.con__link.directions {
  font-size: clamp(14px, calc(0.875rem + (4) * ((100vw - 375px) / (1920 - 375))), 18px);
}

@media (max-width: 991px) {
  .con__link {
    gap: 20px;
  }
}

.con__telephone {
  color: black;
}

.con__email {
  color: black;
}

.con__arrow {
  height: clamp(9px, calc(0.5625rem + (2) * ((100vw - 375px) / (1920 - 375))), 11px);
}

@media (max-width: 991px) {
  .con__arrow.directions {
    display: none;
  }
}

.con__listings {
  padding-top: 30px;
}

@media (max-width: 991px) {
  .con__listings {
    padding-top: 45px;
  }
}

.con__disclosure {
  margin-top: 0;
  font-size: clamp(12px, calc(0.75rem + (2) * ((100vw - 375px) / (1920 - 375))), 14px);
  line-height: 1.25;
  color: #4D4D4D;
}

@media (max-width: 991px) {
  .con__disclosure {
    max-width: 65%;
  }
}

.con__image {
  aspect-ratio: 450 / 575;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 991px) {
  .con__image {
    aspect-ratio: 1.77 / 1;
  }
}

.meetTheTeam {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-bottom: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.meetTheTeam__inner {
  max-width: 1420px;
  width: 100%;
  margin: auto;
}

.meetTheTeam__title {
  margin-bottom: 50px;
  font-size: clamp(20px, calc(1.25rem + (40) * ((100vw - 375px) / (1920 - 375))), 60px);
}

.meetTheTeam__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
      grid-template-columns: repeat(6, 1fr);
  row-gap: clamp(35px, calc(2.1875rem + (10) * ((100vw - 375px) / (1920 - 375))), 45px);
  column-gap: clamp(15px, calc(0.9375rem + (10) * ((100vw - 375px) / (1920 - 375))), 25px);
}

.meetTheTeam__wrapper .staff__item-image {
  height: 150px;
  width: auto;
  background-position: center;
  background-size: cover;
}

.meetTheTeam__wrapper .staff__item-name {
  font-size: clamp(16px, calc(1rem + (2) * ((100vw - 375px) / (1920 - 375))), 18px);
  margin-top: clamp(15px, calc(0.9375rem + (5) * ((100vw - 375px) / (1920 - 375))), 20px);
  line-height: 1.2;
}

@media (max-width: 575px) {
  .meetTheTeam__wrapper .staff__item-name {
    line-height: 1;
  }
}

.meetTheTeam__wrapper .staff__item-position {
  font-size: clamp(14px, calc(0.875rem + (2) * ((100vw - 375px) / (1920 - 375))), 16px);
}

@media (max-width: 575px) {
  .meetTheTeam__wrapper {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}

.testimonials {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-bottom: clamp(35px, calc(2.1875rem + (40) * ((100vw - 375px) / (1920 - 375))), 75px);
}

.testimonials__inner {
  max-width: 1420px;
  width: 100%;
  margin: auto;
}

.testimonials__title {
  margin-bottom: 50px;
}

@media (max-width: 575px) {
  .testimonials__title {
    margin-bottom: 20px;
  }
}

.testimonials__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 60px;
}

@media (max-width: 575px) {
  .testimonials__wrapper {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
  }
}

.testimonials__wrapper .testimonial {
  margin: 10px 0;
}

.testimonials__wrapper .testimonial-author p {
  font-weight: bold;
  margin-top: 0;
}

.testimonials__wrapper .testimonial-content p {
  font-size: clamp(18px, calc(1.125rem + (4) * ((100vw - 375px) / (1920 - 375))), 22px);
  line-height: 1.4;
}

/* -------------------------
Projects
----------------------------*/
.prl {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding-top: clamp(110px, calc(6.875rem + (60) * ((100vw - 375px) / (1920 - 375))), 170px);
  padding-bottom: clamp(40px, calc(2.5rem + (80) * ((100vw - 375px) / (1920 - 375))), 120px);
}

@media (max-width: 575px) {
  .prl {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.prl__inner {
  width: 100%;
  max-width: unset;
  overflow-y: hidden;
}

@media (max-width: 575px) {
  .prl__inner {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    overflow-y: unset;
  }
}

.prl__link {
  color: black;
}

.prl__link:hover .prl__overlay {
  opacity: 0;
}

.prl__link:hover .prl__title {
  color: #777776;
}

.prl__link:hover .prl__strapline {
  color: #777776;
}

.prl__link:hover .prl__location {
  color: #777776;
}

.prl__link:hover .prl__year {
  color: #777776;
}

.prl__link:hover .prl__pagination {
  color: #777776;
}

.prl__link:hover .prl__date {
  border-bottom: 1px solid #777776;
}

.prl__inner .swiper {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  height: calc(100vh - (_(400, 200)));
  overflow: hidden;
}

@media (max-width: 575px) {
  .prl__inner .swiper {
    height: auto;
  }
}

.prl__overlay {
  background: black;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  opacity: 0.35;
  transition: 0.4s all ease-in-out;
}

@media (max-width: 575px) {
  .prl__overlay {
    display: none;
  }
}

.prl__slide-cont {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 360 / 510;
  overflow: hidden;
}

@media (max-width: 575px) {
  .prl__slide-cont {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

.prl__slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: black;
  transform: scaleY(1.03);
}

.prl__controls-outer {
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.prl__controls {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-top: 30px;
  max-width: 1420px;
  width: 100%;
}

@media (max-width: 575px) {
  .prl__controls {
    display: none;
  }
}

.prl__back {
  cursor: pointer;
  gap: 5px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.prl__next {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 5px;
}

.prl__arrow-text {
  text-transform: uppercase;
  font-size: clamp(14px, calc(0.875rem + (4) * ((100vw - 375px) / (1920 - 375))), 18px);
  display: inline-block;
}

.prl__date {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  border-bottom: 1px solid #020204;
  padding-bottom: clamp(5px, calc(0.3125rem + (10) * ((100vw - 375px) / (1920 - 375))), 15px);
}

.prl__year {
  font-weight: 700;
  font-size: 18px;
  transition: 0.4s all ease-in-out;
}

.prl__pagination {
  font-size: 18px;
  transition: 0.4s all ease-in-out;
}

.prl__strapline {
  font-weight: 700;
  font-size: clamp(20px, calc(1.25rem + (16) * ((100vw - 375px) / (1920 - 375))), 36px);
  line-height: 1.2;
  padding-bottom: clamp(0px, calc(0rem + (20) * ((100vw - 375px) / (1920 - 375))), 20px);
  padding-top: 10px;
  height: 3.5em;
  transition: 0.4s all ease-in-out;
}

@media (max-width: 575px) {
  .prl__strapline {
    height: auto;
    padding-top: 15px;
    padding-bottom: 20px;
    font-size: 30px;
  }
}

.prl__arrow {
  height: 11px;
}

.prl__title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 15px;
  transition: 0.4s all ease-in-out;
}

.prl__location {
  font-size: 14px;
  transition: 0.4s all ease-in-out;
}

@media (max-width: 575px) {
  .prl__slides {
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 50px;
  }
}

/* -------------------------
Video
----------------------------*/
.vid {
  padding-top: clamp(40px, calc(2.5rem + (110) * ((100vw - 375px) / (1920 - 375))), 150px);
  padding-bottom: clamp(40px, calc(2.5rem + (110) * ((100vw - 375px) / (1920 - 375))), 150px);
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.vid__inner {
  position: relative;
  cursor: pointer;
  z-index: 1;
  width: 100%;
  max-width: 1420px;
}

.vid__control-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: 0.8s all ease;
  opacity: 1;
  width: clamp(25px, calc(1.5625rem + (47) * ((100vw - 375px) / (1920 - 375))), 72px);
}

.vid__control-play.is-paused {
  opacity: 0;
}

.vid__embed {
  pointer-events: none;
}

.vid .plyr--video {
  pointer-events: none;
}

/* Basic grid container */
.gallery-container {
  width: 100%;
  margin: 0 auto;
  max-width: 1420px;
  padding: 200px 0;
}

@media (max-width: 768px) {
  .gallery-container {
    padding: 100px 0;
  }
}

.gallery-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 100px;
}

@media (max-width: 768px) {
  .gallery-grid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    gap: 20px;
  }
}

.gallery-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3/2;
}

/* -------------------------
Text Block Quote
----------------------------*/
.tbq {
  color: #2A3C4F;
  background: #E5EEF6;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(25px, calc(1.5625rem + (125) * ((100vw - 375px) / (1920 - 375))), 150px);
  padding-bottom: clamp(40px, calc(2.5rem + (110) * ((100vw - 375px) / (1920 - 375))), 150px);
}

.tbq__inner {
  max-width: 1420px;
  width: 100%;
}

.tbq__title {
  font-weight: bold;
  font-size: clamp(14px, calc(0.875rem + (10) * ((100vw - 375px) / (1920 - 375))), 24px);
  margin: 0;
  border-bottom: 1px solid #2A3C4F;
  padding-bottom: clamp(0px, calc(0rem + (22) * ((100vw - 375px) / (1920 - 375))), 22px);
}

@media (max-width: 575px) {
  .tbq__title {
    border-bottom: none;
  }
}

.tbq__content {
  font-size: clamp(20px, calc(1.25rem + (60) * ((100vw - 375px) / (1920 - 375))), 80px);
  display: -ms-flexbox;
  display: flex;
  line-height: 1.2;
  font-family: bodoni;
  margin-bottom: clamp(18px, calc(1.125rem + (22) * ((100vw - 375px) / (1920 - 375))), 40px);
  position: relative;
  margin-top: clamp(20px, calc(1.25rem + (40) * ((100vw - 375px) / (1920 - 375))), 60px);
}

.tbq__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  max-width: 400px;
}

.tbq__attribution1 {
  font-size: clamp(12px, calc(0.75rem + (4) * ((100vw - 375px) / (1920 - 375))), 16px);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 4px;
}

@media (max-width: 575px) {
  .tbq__attribution1 {
    margin-bottom: 2px;
  }
}

.tbq__attribution2 {
  font-size: clamp(12px, calc(0.75rem + (4) * ((100vw - 375px) / (1920 - 375))), 16px);
  line-height: 1;
  font-weight: 400;
}

.tbq__character {
  font-size: clamp(20px, calc(1.25rem + (60) * ((100vw - 375px) / (1920 - 375))), 80px);
  position: absolute;
  left: -0.5em;
  top: 0;
}

/* -------------------------
Text Block Secondary Quote
----------------------------*/
.tbs {
  color: #2A3C4F;
  background: #E5EEF6;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(40px, calc(2.5rem + (110) * ((100vw - 375px) / (1920 - 375))), 150px);
  padding-bottom: clamp(40px, calc(2.5rem + (110) * ((100vw - 375px) / (1920 - 375))), 150px);
}

.tbs__inner {
  max-width: 1420px;
  width: 100%;
}

.tbs__title {
  font-weight: bold;
  color: #2A3C4F;
  font-size: clamp(14px, calc(0.875rem + (10) * ((100vw - 375px) / (1920 - 375))), 24px);
  margin: 0;
  border-bottom: 1px solid #2A3C4F;
  padding-bottom: clamp(0px, calc(0rem + (22) * ((100vw - 375px) / (1920 - 375))), 22px);
}

@media (max-width: 575px) {
  .tbs__title {
    border-bottom: none;
  }
}

.tbs__content {
  font-size: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  display: -ms-flexbox;
  display: flex;
  line-height: 1.3;
  font-family: bodoni;
  margin-bottom: clamp(18px, calc(1.125rem + (22) * ((100vw - 375px) / (1920 - 375))), 40px);
  margin-top: clamp(15px, calc(0.9375rem + (35) * ((100vw - 375px) / (1920 - 375))), 50px);
  position: relative;
}

.tbs__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  max-width: clamp(180px, calc(11.25rem + (220) * ((100vw - 375px) / (1920 - 375))), 400px);
}

.tbs__attribution1 {
  font-size: clamp(12px, calc(0.75rem + (4) * ((100vw - 375px) / (1920 - 375))), 16px);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 4px;
}

@media (max-width: 575px) {
  .tbs__attribution1 {
    margin-bottom: 2px;
  }
}

.tbs__attribution2 {
  font-size: clamp(12px, calc(0.75rem + (4) * ((100vw - 375px) / (1920 - 375))), 16px);
  font-weight: 400;
  line-height: 1;
}

.tbs__character {
  font-size: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  position: absolute;
  left: -0.5em;
  top: 0;
}

/* -------------------------
Related Projects
----------------------------*/
.rep {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100vw;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(50px, calc(3.125rem + (50) * ((100vw - 375px) / (1920 - 375))), 100px);
  padding-bottom: clamp(50px, calc(3.125rem + (50) * ((100vw - 375px) / (1920 - 375))), 100px);
}

.rep__inner {
  max-width: 1420px;
  width: 100%;
}

.rep__header {
  font-size: clamp(18px, calc(1.125rem + (30) * ((100vw - 375px) / (1920 - 375))), 48px);
  font-weight: bold;
  margin-bottom: clamp(40px, calc(2.5rem + (50) * ((100vw - 375px) / (1920 - 375))), 90px);
  margin-top: 0;
}

@media (max-width: 575px) {
  .rep__header {
    padding-bottom: 10px;
    border-bottom: 1px solid black;
  }
}

.rep__projects {
  display: -ms-flexbox;
  display: flex;
  gap: clamp(25px, calc(1.5625rem + (9) * ((100vw - 375px) / (1920 - 375))), 34px);
}

@media (max-width: 575px) {
  .rep__projects {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

.rep__project {
  -ms-flex: 1;
      flex: 1;
}

@media (max-width: 575px) {
  .rep__project {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    gap: 15px;
  }
}

.rep__img-container {
  aspect-ratio: 450 / 330;
  margin-bottom: clamp(10px, calc(0.625rem + (10) * ((100vw - 375px) / (1920 - 375))), 20px);
}

@media (max-width: 575px) {
  .rep__img-container {
    margin-bottom: 0;
    aspect-ratio: 4 / 2.7;
  }
}

.rep__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rep__title {
  font-size: clamp(14px, calc(0.875rem + (4) * ((100vw - 375px) / (1920 - 375))), 18px);
  line-height: 1.2;
  font-weight: bold;
  margin: 0;
}

.rep__link {
  font-size: clamp(11px, calc(0.6875rem + (3) * ((100vw - 375px) / (1920 - 375))), 14px);
  color: black;
}

@media (max-width: 575px) {
  .rep__right {
    min-width: 55%;
    max-width: 55%;
  }
}

/* -------------------------
Four Image Gallery
----------------------------*/
.gal {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(35px, calc(2.1875rem + (155) * ((100vw - 375px) / (1920 - 375))), 190px);
  padding-bottom: clamp(35px, calc(2.1875rem + (155) * ((100vw - 375px) / (1920 - 375))), 190px);
}

.gal__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, calc(1.25rem + (80) * ((100vw - 375px) / (1920 - 375))), 100px);
  row-gap: clamp(20px, calc(1.25rem + (60) * ((100vw - 375px) / (1920 - 375))), 80px);
}

@media (max-width: 575px) {
  .gal__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

.gal__link {
  aspect-ratio: 655 / 410;
}

.gal__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* -------------------------
Single Image Full Bleed
----------------------------*/
.sib {
  width: 100vw;
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

@media (max-width: 1199px) {
  .sib {
    height: auto;
  }
}

.sib__link {
  width: 100%;
  height: 100%;
}

.sib__image {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

@media (max-width: 1199px) {
  .sib__image {
    height: auto;
  }
}

/* -------------------------
Two Image Gallery
----------------------------*/
.gat {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-top: clamp(35px, calc(2.1875rem + (115) * ((100vw - 375px) / (1920 - 375))), 150px);
  padding-bottom: clamp(35px, calc(2.1875rem + (115) * ((100vw - 375px) / (1920 - 375))), 150px);
}

.gat__inner {
  max-width: 1420px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, calc(1.25rem + (80) * ((100vw - 375px) / (1920 - 375))), 100px);
  row-gap: clamp(20px, calc(1.25rem + (60) * ((100vw - 375px) / (1920 - 375))), 80px);
}

@media (max-width: 575px) {
  .gat__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

.gat__link {
  aspect-ratio: 1 / 1.1;
}

@media (max-width: 575px) {
  .gat__link {
    aspect-ratio: 655 / 410;
  }
}

.gat__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* -------------------------
Careers
----------------------------*/
.car {
  width: 100vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-top: clamp(120px, calc(7.5rem + (110) * ((100vw - 375px) / (1920 - 375))), 230px);
  padding-left: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-right: clamp(20px, calc(1.25rem + (30) * ((100vw - 375px) / (1920 - 375))), 50px);
  padding-bottom: clamp(60px, calc(3.75rem + (120) * ((100vw - 375px) / (1920 - 375))), 180px);
}

.car__inner {
  max-width: 1420px;
  width: 100%;
}

.car__title {
  font-size: clamp(24px, calc(1.5rem + (6) * ((100vw - 375px) / (1920 - 375))), 30px);
  margin-bottom: clamp(25px, calc(1.5625rem + (25) * ((100vw - 375px) / (1920 - 375))), 50px);
}

.car__content {
  max-width: 1200px;
}

.car__description {
  font-size: clamp(14px, calc(0.875rem + (7) * ((100vw - 375px) / (1920 - 375))), 21px);
}

.car__description p {
  margin-top: 0;
}

.car__description li {
  margin-bottom: 0.5em;
  padding-left: 0.4em;
}

@media (max-width: 575px) {
  .car__description li {
    padding-lef: 0.2em;
  }
}

.car__description ul {
  padding-left: 0.7em;
}

/* ==========================================================================
   Be ashamed
   ========================================================================== */
/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 1100px) {
  .eskimo-accordion fieldset > a {
    margin-left: 0;
  }
  .eskimo-accordion label {
    width: 41.17647%;
    float: left;
    margin-right: 2.94118%;
  }
  .eskimo-accordion input, .eskimo-accordion textarea {
    width: 55.88235%;
    float: right;
    margin-right: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 920px) {
  .eskimo-accordion label {
    width: 26.47059%;
    float: left;
    margin-right: 2.94118%;
  }
  .eskimo-accordion input, .eskimo-accordion textarea {
    width: 70.58824%;
    float: right;
    margin-right: 0;
    box-sizing: border-box;
  }
  .eskimo-checkout .checkout-steps, .eskimo-checkout aside {
    float: none;
    width: auto;
    margin: 0;
    overflow: hidden;
  }
  .eskimo-checkout aside {
    margin-top: 60px;
  }
}

@media (max-width: 600px) {
  .eskimo-accordion label, .eskimo-accordion input, .eskimo-accordion textarea {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 460px) {
  .eskimo-accordion .step button {
    width: 100%;
  }
}

@media screen and (min-width: 480px) {
  #mini_cart_outer {
    width: 90%;
  }
}

@media screen and (min-width: 640px) {
  .order_status .customer_order_details {
    overflow: hidden;
  }
  .order_status .customer_order_details .inner {
    width: 74.57627%;
    float: left;
    margin-left: 16.94915%;
    margin-right: -100%;
  }
  .order_status .customer_order_details .block {
    width: 126.31579%;
    float: left;
    box-sizing: border-box;
    padding: 0 10px 0 0;
  }
  .order_status .customer_order_details .block.delivery {
    width: 126.31579%;
    float: right;
    margin-right: 0;
  }
  .order_status .customer_order_details .block.giftwrap {
    width: 100%;
  }
  .my_orders .customer_order_details {
    overflow: hidden;
  }
  .my_orders .customer_order_details .inner {
    width: 74.57627%;
    float: left;
    margin-left: 16.94915%;
    margin-right: -100%;
  }
  .my_orders .customer_order_details .block {
    width: 126.31579%;
    float: left;
    box-sizing: border-box;
    padding: 0 10px 0 0;
  }
  .my_orders .customer_order_details .block:last-of-type {
    width: 126.31579%;
    float: right;
    margin-right: 0;
  }
}

@media screen and (min-width: 768px) {
  #mini_cart_outer {
    padding: 10px 0 0 0;
    position: absolute;
    top: -16px;
    right: 24px;
    left: initial;
    width: 240px;
    margin: 0;
  }
}