@font-face {
            font-family: 'FranklinGothicM';
            src: url('./fonts/ITCFranklinGothicStd-MdCd.otf')
         }
         @font-face {
            font-family: 'FranklinGothicB';
            src: url('./fonts/ITCFranklinGothicStd-BkCd.otf')
         }
        
           
         

        #newvideo-window {
            display: block;
            position: fixed;
            z-index: 100;
            background-color: rgba(255,255,255,0.9);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #newvideo-window .video-container {
            display: flex;
            align-items: stretch;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            height: 100%;
            width: 100%;

        }
        .video-container > div {
            iborder: 1px solid #000;
            text-align: center;
        }
        .video-container-top {
            height: 100%;
            padding: 50px 50px 28px 50px;
            position: relative;
        }
        .video-container-bottom {
           padding-bottom: 50px;
           font-family: 'FranklinGothicM';
        }
       
        #newvideo-window .video-container iframe {
            display: block;
           --h: calc(100vh - 200px);
           --ratio: calc(16 / 9);
            width: calc(var(--h)*var(--ratio));
            height: 100%;
            border-width: 0;
            outline-width: 0;
            margin: auto;
           max-width: 100%;
        }
       
        .close {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 20px;
            height: 20px;
            opacity: 1;
            background: url('./imgs/X_close.svg');
            }
           
        .error {
            color: red;
        }
        input {
            border: 1px solid #0053b0;
            color: #0053b0;
            font-size: 15px;
            line-height: 16px;
            padding:  8px 5px;
            width: 158px;
            outline: none;
        }
        ::placeholder {
            color: #0053b0;
           
        }
        .form button {
            background-color: #0053b0;
            color: #fff;
            font-size: 18px;
            line-height: 18px;
            border: none;
            padding: 9px 6px;
            cursor: pointer;
            }
        .form {
            display: flex;
            justify-content: space-between;
        }
        .form_btn {
            display: flex;
        }
        .form_btn > div {
           margin: auto;
           padding-top: 13px;
        }
        .form_title {
            font-family: 'FranklinGothicM';
            padding-bottom: 9px;
            color: #0053b0;
            font-size: 24px;
            line-height: 24px;
        }
        .form_holder {
            display: table;
            margin: auto;
           
        }
        .thanks {
            position: absolute;
            color: #0053b0;
            font-size: 24px;
            line-height: 30px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            display: none;
            margin-top: 40px;
        }
        .form_preloader {
           display: none;
           height: 57px;
        }
        #submit {
           background: url('imgs/Desktop_button.svg');
           height: 36px;
           width: 200px;
        }
        @media screen and (max-device-width: 720px){
            #newvideo-window .video-container {
                display: block;
            }
            #submit {
              background: url('imgs/Mobile_button.svg');
               height: 36px;
             width: 180px;
           }

            input {
                margin-bottom: 8px;
                margin-right: 0;
                width: 180px;
                font-size: 14px;
                font-family: 'FranklinGothicB';
            }
            .form_title {
                font-size: 18px;
                line-height: 24px;
                padding: 0 50px 26px 50px;
            }
            .video-container-top {
                height: auto;
                padding: 80px 0px 34px 0;
            }
            .form {
                display: block;
            }
            .form_btn > div {
               margin: auto;
               padding-top: 0;
            }

            #newvideo-window .video-container iframe { 
                width: 100%;
                --w: 100vw;
                --ratio: calc(16 / 9);
                height: calc(var(--w)/var(--ratio));
            }
        }