.modal{will-change: visibility, opacity;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow-y: auto;overflow-x: hidden;z-index: 999999;visibility: hidden;opacity: 0;-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);-webkit-transition-delay: $modal-delay;transition-delay: $modal-delay;}
.modal--active{visibility: visible;opacity: 1;}
.modal--align-top{-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.modal__bg{background: transparent;}
.modal__dialog{width: 1200px;padding: 1.2rem;}
.modal__content{will-change: transform, opacity;position: relative;background-clip: padding-box;box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);opacity: 0;-webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);}
.modal__content--active{opacity: 1;}
.modal__close{z-index: 1100;cursor: pointer;}
.modal__trigger{position: relative;padding: 5px 10px;color: rgba(0,0,0,0.7);line-height: 1;cursor: pointer; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);}
.modal__trigger--active{z-index: 10;}
.modal__trigger:hover{background: #e5d3d6;}
#modal__temp{will-change: transform, opacity;position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-transform: none;transform: none;opacity: 1;-webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);}

img{max-width: 100%;}
.demo-btns header{padding: 7vh 10vw;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.demo-btns header h1{margin: 0;color: rgba(0,0,0,0.54);font-weight: 300;}
.demo-btns .info{background: #f44336;padding: 3vh 10vw;height: 70vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-ms-flex-flow: column wrap;flex-flow: column wrap;}
.demo-btns p{text-align: center;color: #fff;}
.demo-btns .link{font-size: 20px;}
.demo-btns .modal__trigger{margin-right: 3px;}
@media (max-width: 640px){
    .demo-btns .modal__trigger{margin-bottom: 0.8rem;}
    .modal__dialog{width: 100%;}
}
.demo-close{position: absolute;top: 0;right: 0;height: 48px;width: 48px;line-height: 58px;text-align: center;background: rgba(0,0,0,0.3);-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);}
.demo-close svg{width: 30px;fill: #fff;pointer-events: none;vertical-align: center;margin-top: 8px}
.demo-close:hover{background: rgba(0,0,0,0.6);}