@font-face {
    font-family: 'Victor';
    src: url('fonts/VictorNarrow-Light.woff2') format('woff2'),
        url('fonts/VictorNarrow-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body,
.smooth-content {background: #f3f3f3;}

#hero {background: #000; position: relative; overflow: hidden; height: auto}
#hero video {height:100vh; width: 100%; object-fit: cover; position: relative;}
#hero h1 {color: #FFF; position: absolute; bottom: -0.2vw; width: 100%; font-size: 17vw; text-transform: uppercase; font-weight: 900; letter-spacing: 1vw; text-align: center; line-height: 0.4; color: #f0f0f0; z-index: 10; transform: scaleY(1.01)}

#intro {padding: 2.5vw 0vw; margin: 0 5vw; border-bottom: 1px solid #000; position: relative; z-index: 15; transform: scaleY(1)}
#intro .left,
#intro .right {font-family: 'Victor'; text-transform: uppercase; letter-spacing: 0.1vw}
#intro .square {width: 0.5vw; height: 0.5vw; background: #000; display: inline-block; top: -0.13vw; position: relative;}
#intro .left .square {margin-right: 1.3vw;}
#intro .right .square {margin-left: 1.3vw;}
#intro .save {border: 1px solid #000; border-radius: 1000px; display: inline-block; padding: 0.2vw 1vw; font-size: 0.9vw;}
#intro .save:hover {color: #FFF; background: #000;;}


#transformation {position: relative; overflow: hidden; z-index: 1; top:-1px}
#transformation iframe {display: block; width: 100%; margin: -15vw auto 0; aspect-ratio: 10 / 7}
#transformation .text {text-align: center; position: absolute; font-size: 10vw; text-align: center; width: 100%; line-height: 1; font-family: 'Victor'; top: 9vw; mix-blend-mode: difference; color: #FFF; pointer-events: none}


#copy {margin: 0vw 25vw; font-size: 0.8vw; text-align: justify; margin-top: -21vw; color: #FFF; mix-blend-mode: difference; pointer-events: none; position: relative; z-index: 2;}

.alchemy-logo {position: relative; z-index: 5; margin: 0 5vw 0; padding: 5vw 0; width: calc(100% - 10vw)}

#colophon,
footer {display: none}

#form {padding: 0 5vw 5vw; background: #000; position: relative; overflow: hidden}
#form .kit {position: absolute; right: 0; bottom:1vw; width: 35vw;}
#form h2 {font-family: 'Victor'; color:#FFF; margin: 4vw 0 4vw}

#form .form {width: 65%;}
#form .form input[type="text"] {background: transparent; border: none; outline: none; border-bottom: 1px solid #FFF; color: #757575; font-size: 1.1vw;}
#form .form .gform_wrapper.gravity-theme .gfield_label {color: #FFF; font-size: 1.1vw;}
#form .form  .btn-outline-color {all:unset; padding:0.5vw 3vw; border-radius: 1000px; border: 1px solid #FFF; margin-top: 2vw; background: #FFF; color: #000 !important; cursor: pointer;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   appearance: none;
}
#form .form  .btn-outline-color:hover {background: #000; color: #FFF !important;}

#gform_confirmation_message_2 {color: #FFF;}

#form .form .gform_wrapper.gravity-theme .ginput_complex label, 
#form .form .gform_wrapper.gravity-theme .ginput_complex legend {display: none}

#form .form .gform_wrapper.gravity-theme .gform_validation_errors,
#form .form .gform_wrapper.gravity-theme .gfield_required {display: none !important}
 

@media (max-width: 767px) {  

    #hero {height: 150vw; }
    #hero video { aspect-ratio: auto; transform: none !important}
    #hero h1 {margin: 0; font-size: 21vw; bottom: 1.2vw} 

    #intro {padding: 8vw 0}
    #intro .square {display: none}
    #intro .right,
    #intro .left {text-align: center; font-size: 7vw;}
    #intro .save {font-size: 4vw; padding: 1vw 6vw; margin-bottom: 7vw}

    #transformation .text {font-size: 14vw; top: 25vw}
    #transformation iframe {aspect-ratio: 1 / 1}
    
    #copy {font-size: 5vw; padding: 0; margin: 0 10vw; text-align: center; margin-top: -20vw}
    .alchemy-logo {width: 70%; margin: 15vw auto; display: block}

    #form .form {width: 100%; position: relative; z-index: 1;}
    #form h2 {margin-bottom: 10vw}
    #form .kit {position: relative; transform: none !important; width: 100%; margin-top: -30vw; right: -5vw; display: block}
    #form .form .gform_wrapper.gravity-theme .gfield_label {font-size: 5vw}
    #form .form input[type="text"] {font-size: 4vw;}
    #form .form .gform_wrapper.gravity-theme .ginput_complex label, #form .form 
    .gform_wrapper.gravity-theme .ginput_complex legend {display: none}
    #form .form .btn-outline-color {padding-left: 10vw; padding-right: 10vw}
}