.modal_cn { display: none; position: fixed; z-index: 19999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); overflow: auto; padding-top: 10% } .modal_cn-content { margin: auto; display: block; max-width: 80%; max-height: 80% } .close-modal_cn { position: absolute; top: 15px; right: 35px; color: #fff; font-size: 40px; font-weight: 700; cursor: pointer } .close-modal_cn:hover,.close-modal_cn:focus { color: #bbb; text-decoration: none; cursor: pointer } .modal-video-ytb { display: none; position: fixed; z-index: 19999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,.8) } .modal-content-video-ytb { position: relative; margin: 15%auto; padding: 5px; width: 80%; max-width: 600px; border-radius: 10px } .close-video-ytb { color: #aaa; position: absolute; right: 2%; font-size: 28px; font-weight: 700 } .close-video-ytb:hover,.close-video-ytb:focus { color: var(--white-color-text); text-decoration: none; cursor: pointer } .modal-content-video-ytb iframe { width: 590px; height: 335px } .modal-window-container { display: flex; align-items: center; justify-content: center } .modal-window-img img { width: 100% } .modal-window-container>.modal-window-img:first-child { flex: 5 } .modal-window-container>.modal-window-form:last-child { flex: 5 } .modal-window-form { width: 50% } .modal-window-form-title { text-align: center } .modal-window-form-title h3 { font-size: 1.6rem } .main-container,.modal-window,.modal-container { transition: .5s } .modal-window { position: fixed; top: 50%; right: -300px; translate: 50% -50%; background: #fff; color: #000; padding: 10px 10px 0 0; width: 600px; height: auto; border-radius: 12px; z-index: 2100 } .modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center; opacity: 0; visibility: hidden; background: rgba(0,0,0,.5); z-index: 2000; cursor: pointer } .open-modal-main .modal-container { visibility: visible; opacity: 1 } .open-modal-main .card-container { animation: card-container-in .6s both } .open-modal-main>.main-container { scale: .75 } .open-modal-main .modal-window { animation: modal-window-in .5s both } @keyframes modal-window-in { 0%,50% { width: 118px; border-radius: 50% } 55%,to { right: 50% } 60% { width: 300px; border-radius: 12px } 75% { translate: 50% -50% } } @keyframes card-container-in { 0%,75% { opacity: 0 } 85%,to { opacity: 1 } } .modal-window-close { position: absolute; top: -20px; right: -15px; background: var(--wp--preset--color--main); padding: 8px 10px 6px; border-radius: 50px; color: var(--wp--preset--color--white); font-size: 20px; cursor: pointer; transition: transform .6s ease } .modal-window-close:hover { transform: translateY(-2px); background: var(--wp--preset--color--red) }