.cp-masthead { position: relative; overflow: hidden; &--height { &-max-height { max-height: 100vh; img.cp-masthead__image { object-fit: contain; } } &-half-height { max-height: 50vh; img.cp-masthead__image { min-height: 490px; object-fit: cover; } } &-default { } &-video { aspect-ratio: 16/9; } &-video-half { aspect-ratio: 32/9; } } &--video-1 { > iframe { width: 100%; height: 100%; pointer-events: none; } } &__embed { z-index: 1; } .countdown & { } .countdown.online & { margin: 0!important; } img { width: 100%; height: auto; vertical-align: top; } // iframe { // height: calc(100vh); // pointer-events: none; // @include mq(tablet,max) { // height: auto; // } // } &__image { } &__wrapper { position: absolute; top:0; left:0; right:0; bottom:0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 0 0; @include mq(tablet,max) { padding:0; } .cp-masthead--countdown & { // @include mq(desktop,max) { // justify-content: flex-end; // } } } &__logo { position: relative; z-index: 100; max-width: 300px; width: 20vw; margin: 20px 0; img { width: 100%; height: auto; } @include mq(phone,max) { display: none; } &--border { border-style: solid; border-width: 3px; border-radius: 50%; overflow: hidden; } } &__cta { display: none; margin: 20px 0; @include mq(tablet,max) { position: absolute; bottom: 10px; right:10px; margin:0; } .online & { display: block; } &-title { @include font-quicksand($white, 24px, 1.15, 400); text-shadow: 0 0 5px black, 0 0 10px black, 0 0 15px black; text-align: center; margin: 0 0 10px; @include mq(tablet,max) { display: none; } } a { position: relative; z-index: 100; font-size: 14px; @include mq(phone,max) { font-size: 14px; } } } &__effects { position: absolute; z-index:10; top:0; left:0; right:0; bottom:0; pointer-events: none; &--vignette { background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0) 45%, #000 100%); } &--grid { background-image: url('../img/grid-bg.png'); opacity: .05; } &--pixelation { image-rendering: pixelated; } &--blood { background-image: url('../img/blood-bg.png'); opacity: .25; } canvas { width: 100%; height: 100%; } } }