@font-face {
    font-family: 'Butler';
    src: url('fonts/Butler-Medium.woff2') format('woff2'),
        url('fonts/Butler-Medium.woff') format('woff');
    font-style: normal;
    font-display: swap;
}
*, *:before, *:after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    /* overflow-y:hidden; */
    /* scrollbar-track-color: #000; */
}
html, body {
    overflow-x: hidden;
    margin:0;
    padding:0;
}
body {
    /* background:#000000; */
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: normal;
}
.btn {
    font-size: 25px;
    line-height: normal;
    background: #151515;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    padding: 10px 25px;
    outline: none;
    border: none;
    text-align: center;
    cursor: pointer;
    min-width: 180px;
}
.back-drop {
    /* z-index: -2; */
    margin: auto;
    position: absolute;
    display: flex;
    width: 100%;
    height: 100svh;
    background-size: contain;
    background: url("images/cityscape.jpg") center / cover no-repeat;
    background-position: center;
    background-attachment: scroll;

    justify-items:center;
    justify-content: center;

    flex-direction: column;
    align-items: center;
    align-content: center;
    /* background-size: 160%; */
}
#logo {
    /* position: absolute; */
    
    z-index: 3;
    margin: 30px;
    margin-top: 170px;
    transition: opacity 1s, margin-top 1s ease 0s;
    position:sticky; 
    align-self: center;
    align-content: center;
    width: 500px;
}
#cineman-av {
    overflow-x: clip;
    anchor-name: --cine-anchor;
    position: absolute;
    z-index: 2;
    width: 700px;
    top:25svh;
    left: 0;
    transition: 
        opacity 0.1s,
        top 1s ease,
        left 1s ease,
        width 1s ease,
        transform 1s ease,
        display 0.1s;

    align-self: center;
    alignment-baseline: central;
}
#silohette {
    opacity: 0.9;
    overflow-x: clip;
    z-index: 1;
    transition: opacity 1s, right 0.5s ease, height 0.5s ease 0s;
    position : absolute;
    bottom: -150px;
    right: 0;
    height: 800px;
}

/* Video */
.video-container {
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    
    height: 100svh;
    height: 100svh;
    position: static;
    padding: 0px 0 100px 0;
}
.video-container .btn {
    /* opacity: 100%; */
    align-self: center;
    position:sticky;
    z-index: 10;

    /* top: 40%; */
    /* z-index: -1; */
    /* left: 50%; */
    /* transform: translate3d(-50%, 0, 0); */
}
.video-container .btn:hover {
    transform: scale(1.1);
}
.hidden {
    opacity: 0;
}
.video-container video {
    overflow-x: clip;
    z-index: 0;
    object-fit: contain;

    opacity: 0;
    position: fixed;

    height: 100svh;
    object-fit: contain;
    /* right: -50vw; */
    justify-self: center;

    align-self: center;
    align-content: center;
}
.play-btn {
    z-index: 4;
    position-anchor: --cine-anchor;
    transform-origin: center;
    width: 40px;
    height: 40px;
    position: fixed;
    /* top: calc(50% - 50px); */
    left: anchor(center);
    top: anchor(center);
    
    transform: translateY(122px);
    /* margin: -20px 0 0 -20px; */
    background: #E4D9CD;
    border-radius: 50%;
    cursor: pointer;
    transition: display 1s,width 0.5s ease,height 0.5s ease 0s;
}
.play-btn:after {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #000000;
    transform: rotate(0deg);
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate3d(-50%, -50%, 0);
}
/* Animation triggers */
.video-container.playing .play-btn,
.video-container.playing a,
.video-container.playing img,
.video-container.playing #silohette 
{ opacity: 0; }
.video-container.playing video { 
    transition: opacity 0.1s 1s; opacity: 100%; 
    z-index: 11;
}

#cineman-av.playing {
    width: 770px;
    top:42svh;
    left: 55svw;
    transform: translate(-50%, -50%);
}

/* end */
#mc_embed_shell {
    max-width: 790px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
#mc_embed_shell input[type="email"]::placeholder {
    color: #fff;
}
#mc_embed_shell input[type="email"],
#mc_embed_shell select {
    outline: none;
    appearance: none;
    width: 100%;
    font-size: 18px;
    line-height: normal;
    font-weight: bold;
    text-align: center;
    border: none;
    background: none;
    color: #fff;
    padding: 25px 10px;
    text-transform: uppercase;
}
#mc_embed_shell input[type="email"] {
    border-bottom: 2px solid #fff;
}
#mc_embed_shell fieldset {
    padding: 0;
    border: none;
    color: #fff;
    font-weight: 500;
    margin: 10px 0 40px 0;
}
#mc_embed_shell fieldset input {
    width: 14px;
    height: 14px;
    accent-color: #000;
    margin: 0 8px 0 0;
}
label.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}
.signup-container {
    z-index: 4;
    padding: 120px 20px;
    position: relative;
    background: #D96239;
    min-height: 100svh;
}

.signup-container:before {
    content: "";
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(images/signup-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.6;
}
#poster {
    z-index: 10;
    opacity: 100%;
    width: 100%;
    position: relative;
    top:0;
}
.signup-container h2 {
    font-family: 'Butler', serif;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 20px 0;
    color: #fff;
    font-size: 36px;
    font-weight: normal;
    position: relative;
    z-index: 2;
}
.signup-container .btn {
    background: #000;
}
.signup-container #mc_embed_signup div.mce_inline_error {
    background: none;
    margin: 0;
    padding: 15px 0 0 0;
}
.signup-container #mc_embed_signup input.mce_inline_error {
    border-color: #ffffff;
}
#mce-responses {
    font-weight: bold;
    color: #fff;
}
#mce-responses div {
    margin: 0 0 30px 0;
}
/* Default - Desktop */
/* Tablet */
@media (max-width: 1400px) {
    #silohette {
        height: 700px;
        right: 0;
    }
    #cineman-av { 
        left:-100px;
        top:30svh;
        width: 700px;
    }
}
/* Phone */
@media (max-width: 1000px) {
    #silohette {
        height: auto;
        width: 120svw;
        bottom: -80px;
    }
    #logo {
        margin-top: 350px;
        width: 100svw;
    }
    
    #cineman-av { 
        top: 0;
        left:-25svw;
        width: 125svw;
    }
    #cineman-av.playing {
        width: 120svw;
    }
    /* .video-container video {
        left: -120svw;
    } */

}
@keyframes MobileClickMe {
  from {background-color: rgb(255, 229, 134);}
  to {background-color: rgb(255, 255, 255);}

  0% {transform: translateY(122px) scale(1);}
  50% {transform: translateY(122px) scale(1.4);}
  0% {transform: translateY(122px) scale(1);}

  0% {box-shadow: 0px 0px 69px 17px rgba(255, 45, 45, 0.21);}
  50% {box-shadow: 0px 0px 57px 6px rgb(255, 199, 45);}
  0% {box-shadow: 0px 0px 69px 17px rgba(255, 45, 45, 0.21);}
}

@media (max-width: 992px) {
    .play-btn {
        animation-name: MobileClickMe;
        animation-duration: 3s;
        animation-iteration-count: 3;
    }
}

@media (min-width: 992px) {
    .btn {
    font-size: 24px;
    padding: 10px 30px;
    min-width: 250px;
    }
    #mc_embed_shell input[type="email"],
    #mc_embed_shell select {
    font-size: 24px;
    }
    .play-btn {
    width: 70px;
    height: 70px;
    margin: -15px 0 0 -15px;
    }
    .play-btn:after {
    border-width: 11px 0 11px 22px;
    }
    .play-btn:hover {
        transform: translateY(122px) scale(1.1);
    }
    .signup-container {
    padding: 200px 20px;
    }
    .signup-container h2 {
    margin: 0 0 60px 0;
    font-size: 60px;
    }
}