@charset "UTF-8";/* -------------------------------- 

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */.modal{position:fixed;z-index:var(--z-index-overlay, 15);width:100%;height:100%;left:0;top:0;opacity:0;visibility:hidden}.modal:not(.modal--is-visible){pointer-events:none;background-color:transparent}.modal--is-visible{opacity:1;visibility:visible}/* close buttons */.modal__close-btn{display:flex;flex-shrink:0;border-radius:50%;transition:0.2s}.modal__close-btn .icon{display:block;margin:auto}.modal__close-btn--outer{/* close button - outside the modal__content */--size:48px;width:var(--size);height:var(--size);position:fixed;top:var(--space-sm);right:var(--space-sm);z-index:var(--z-index-fixed-element, 10);background-color:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);transition:0.2s}.modal__close-btn--outer .icon{color:var(--color-white);/* icon color */transition:transform 0.3s var(--ease-out-back)}.modal__close-btn--outer:hover{background-color:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1)}.modal__close-btn--outer:hover .icon{transform:scale(1.1)}.modal__close-btn--inner{/* close button - inside the modal__content */--size:32px;width:var(--size);height:var(--size);background-color:var(--color-bg-light);box-shadow:var(--inner-glow),var(--shadow-sm);transition:0.2s}.modal__close-btn--inner .icon{color:inherit/* icon color */}.modal__close-btn--inner:hover{background-color:var(--color-bg-lighter);box-shadow:var(--inner-glow),var(--shadow-md)}/* animations */:root{--modal-transition-duration:0.2s/* fallback (i.e., unless specified differently in the variations 👇) */}@media (prefers-reduced-motion: no-preference){.modal--animate-fade{--modal-transition-duration:0.2s;transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)}.modal--animate-fade.modal--is-visible{transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s}.modal--animate-scale,.modal--animate-translate-up,.modal--animate-translate-down,.modal--animate-translate-right,.modal--animate-translate-left{--modal-transition-duration:0.2s;transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)}.modal--animate-scale .modal__content,.modal--animate-translate-up .modal__content,.modal--animate-translate-down .modal__content,.modal--animate-translate-right .modal__content,.modal--animate-translate-left .modal__content{will-change:transform;transition:transform var(--modal-transition-duration) var(--ease-out)}.modal--animate-scale.modal--is-visible,.modal--animate-translate-up.modal--is-visible,.modal--animate-translate-down.modal--is-visible,.modal--animate-translate-right.modal--is-visible,.modal--animate-translate-left.modal--is-visible{transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s}.modal--animate-scale.modal--is-visible .modal__content,.modal--animate-translate-up.modal--is-visible .modal__content,.modal--animate-translate-down.modal--is-visible .modal__content,.modal--animate-translate-right.modal--is-visible .modal__content,.modal--animate-translate-left.modal--is-visible .modal__content{transform:scale(1)/* reset all transformations */}.modal--animate-slide-up,.modal--animate-slide-down,.modal--animate-slide-right,.modal--animate-slide-left{--modal-transition-duration:0.3s;transition:opacity 0s var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)}.modal--animate-slide-up .modal__content,.modal--animate-slide-down .modal__content,.modal--animate-slide-right .modal__content,.modal--animate-slide-left .modal__content{will-change:transform;transition:transform var(--modal-transition-duration) var(--ease-out)}.modal--animate-slide-up.modal--is-visible,.modal--animate-slide-down.modal--is-visible,.modal--animate-slide-right.modal--is-visible,.modal--animate-slide-left.modal--is-visible{transition:background-color var(--modal-transition-duration),visibility 0s}.modal--animate-slide-up.modal--is-visible .modal__content,.modal--animate-slide-down.modal--is-visible .modal__content,.modal--animate-slide-right.modal--is-visible .modal__content,.modal--animate-slide-left.modal--is-visible .modal__content{transform:scale(1)/* reset all transformations */}/* scale */.modal--animate-scale .modal__content{transform:scale(0.95)}/* translate */.modal--animate-translate-up .modal__content{transform:translateY(40px)}.modal--animate-translate-down .modal__content{transform:translateY(-40px)}.modal--animate-translate-right .modal__content{transform:translateX(-40px)}.modal--animate-translate-left .modal__content{transform:translateX(40px)}/* slide */.modal--animate-slide-up .modal__content{transform:translateY(100%)}.modal--animate-slide-down .modal__content{transform:translateY(-100%)}.modal--animate-slide-right .modal__content{transform:translateX(-100%)}.modal--animate-slide-left .modal__content{transform:translateX(100%)}}/* load content - optional */.modal--is-loading .modal__content{visibility:hidden}.modal--is-loading .modal__loader{display:flex}.modal__loader{/* loader icon */position:fixed;top:0;left:0;width:100%;height:100%;justify-content:center;align-items:center;display:none;pointer-events:none}/* --image */.modal-img-btn{position:relative;cursor:pointer}.modal-img-btn::after{content:"";position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);transition:background 0.2s}.modal-img-btn:hover::after{background-color:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7)}.modal-img-btn:hover .modal-img-btn__icon-wrapper{opacity:1}.modal-img-btn__icon-wrapper{position:absolute;z-index:2;top:calc(50% - 24px);left:calc(50% - 24px);width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);opacity:0;transition:opacity 0.2s}.modal-img-btn__icon-wrapper .icon{color:var(--color-white)}/* -------------------------------- 

File#: _2_modal-video
Title: Modal Video
Descr: A modal window used to display a responsive video
Usage: codyhouse.co/license

-------------------------------- *//* -------------------------------- 

File#: _3_video-gallery
Title: Video Gallery
Descr: A list of video previews opening a modal window
Usage: codyhouse.co/license

-------------------------------- */.video-card__modal-control{display:block;color:inherit;text-decoration:none;position:relative;margin-bottom:var(--space-sm)}.video-card__modal-control:hover .video-card__preview{filter:contrast(110%);box-shadow:var(--shadow-md)}.video-card__modal-control:hover .video-card__play-btn::before{transform:scale(1.2)}.video-card__preview{display:block;width:100%;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:filter 0.3s,box-shadow 0.3s}.video-card__play-btn{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--color-white)}.video-card__play-btn .icon{position:relative;z-index:1}.video-card__play-btn::before{content:"";position:absolute;width:60px;height:60px;top:calc(50% - 30px);left:calc(50% - 30px);background-color:hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.8);border-radius:50%;transition:transform 0.3s var(--ease-out-back)}