@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; src: url("../g_font/Roboto-Regular.woff2") format("woff2"), url("../g_font/Roboto-Regular.woff") format("woff"), url("../g_font/Roboto-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; src: url("../g_font/Roboto-Bold.woff2") format("woff2"), url("../g_font/Roboto-Bold.woff") format("woff"), url("../g_font/Roboto-Bold.ttf") format("truetype"); font-display: swap; } body { background: #000000; font-family: "Roboto", Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%; margin: 0 auto; font-weight: 400; font-size: 14px; -webkit-tap-highlight-color: transparent; overflow: hidden; } ::-webkit-selection { color: var(--wh-color); background: var(--prpl-color); } ::-moz-selection { color: var(--wh-color); background: var(--prpl-color); } ::selection { color: var(--wh-color); background: var(--prpl-color); } :root { --wh-color: #f5f5f5; --prpl-color: #3305D9; --grey-color: #18202f; --fs-3: 1.629em; --fs-6: 1.4em; --ttl-padding: 60px; --main-border-radius: 22px; --line-border-radius: 21px; } .typography_2 { font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: var(--fs-3); color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } .typography_5 { font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: var(--fs-6); color: var(--wh-pp-color); font-weight: 400; letter-spacing: 0.015em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } #preloader { position: fixed; width: 100%; height: 100vh; background: #000000; /*background: rgb(8, 12, 19);*/ /*background-image: linear-gradient(to bottom right, rgba(8, 12, 19, 1), rgba(0, 102, 102, 1));*/ z-index: 99999999999; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; /* Semi-transparent black background */ /* z-index: 999; */ /* Ensure it's above other content */ display: none; /* Initially hidden */ } /* === Border Animation */ .button-wrapper { overflow: hidden; -webkit-border-radius: var(--main-border-radius); -moz-border-radius: var(--main-border-radius); -ms-border-radius: var(--main-border-radius); -o-border-radius: var(--main-border-radius); border-radius: var(--main-border-radius); position: relative; /*width: 48.75%;*/ width: 100%; display: inline-block; height: 100%; margin: 0 0 3.5%; } .nme, .eml{ position: relative; width: 100%; display: grid; height: 100%; } .msg { position: relative; width: 100%; min-height: 150px; display: grid; height: 100%; margin: 0 0 3%; } /* .button-wrapper:focus{ border: 3px solid red; }*/ .button-wrapper{ overflow: hidden; -webkit-border-radius: var(--line-border-radius); -moz-border-radius: var(--line-border-radius); -ms-border-radius: var(--line-border-radius); -o-border-radius: var(--line-border-radius); border-radius: var(--line-border-radius); } .button-wrapper .button, .button-wrapper .button2, .button-wrapper .button3, .button-wrapper .button4 { position: relative; border: 2px solid transparent; z-index: 1; -webkit-border-radius: var(--main-border-radius); -moz-border-radius: var(--main-border-radius); -ms-border-radius: var(--main-border-radius); -o-border-radius: var(--main-border-radius); border-radius: var(--main-border-radius); } .button-wrapper .button { background: linear-gradient(to right, black, black), linear-gradient(135deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .button-wrapper .button2 { background: linear-gradient(to right, black, black), linear-gradient(-135deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .button-wrapper .button3 { background: linear-gradient(to right, black, black), linear-gradient(45deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .button-wrapper .button4 { background: linear-gradient(to right, black, black), linear-gradient(-45deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .button-wrapper .button::before, .button-wrapper .button2::before { position: absolute; content: ""; min-height: 0px; min-width: 0px; z-index: 200; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 60%; opacity: 1; transition-duration: 0.5s; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .button-wrapper .button::after { pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: black; top: -170%; left: -60%; z-index: -10; } .button-wrapper .button:hover::after { top: -200%; left: -200%; } .button-wrapper .button:focus-within::after { top: -200%; left: -200%; } .button-wrapper .button:hover::before, .button-wrapper .button2:hover::before { opacity: 0; } /* Border Anim 2 */ .button-wrapper .button2::after { pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: black; top: -160%; right: -65%; z-index: -10; } .button-wrapper .button2:hover::after { top: -200%; right: -200%; } .button-wrapper .button2:focus-within::after { top: -200%; right: -200%; } /* Border Anim 3 */ .button-wrapper .button3::before, .button-wrapper .button4::before { position: absolute; /*border-bottom: solid 3px;*/ content: ""; min-height: 10px; min-width: 100px; z-index: 200; right: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 60%; opacity: 1; transition-duration: 0.5s; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .button-wrapper .button3::after { pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: black; bottom: -170%; left: -60%; z-index: -10; } .button-wrapper .button3:hover::after { bottom: -200%; left: -200%; } .button-wrapper .button3:focus-within::after { bottom: -200%; left: -200%; } .button-wrapper .button3:hover::before, .button-wrapper .button4:hover::before { opacity: 0; } /* Border Anim 4 */ .button-wrapper .button4::after { pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: black; bottom: -170%; right: -60%; z-index: -10; } .button-wrapper .button4:hover::after { bottom: -200%; right: -200%; } .button-wrapper .button4:focus-within::after { bottom: -200%; right: -200%; } .button-wrapper .button::before, .button-wrapper .button2::before, .button-wrapper .button3::before, .button-wrapper .button4::before, .button-wrapper .button::after, .button-wrapper .button2::after, .button-wrapper .button3::after, .button-wrapper .button4::after, .button-wrapper .button:hover::after, .button-wrapper .button2:hover::after, .button-wrapper .button3:hover::after, .button-wrapper .button4:hover::after { -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; transition-property: all; transition-duration: 1s; transition-delay: 0s; } /* Works section */ /* ================================================================ */ button, input, optgroup, select, textarea { margin: 0 auto; } /* *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }*/ .c_form_title { width: 100%; max-width: 850px; padding: 0px; margin: 0 auto; text-align: center; color: var(--wh-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 2.8em; margin-bottom: 100px; } .contact-cont { width: 99.5%; margin: 0 auto; max-width: 1490px; } .ajax-form { width: 100%; margin: 0 auto; display: inline-block; overflow: hidden; } .ajax-form input, .ajax-form textarea { z-index: 2; width: 100%; position: relative; padding: 25px 40px; margin: 0 auto; resize: none; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; display: inline-block; vertical-align: middle; } .ajax-form input { height: 85px; } .ajax-form textarea{ width: 100%; min-height: 280px; } ::-webkit-input-placeholder { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1em; color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } ::-moz-placeholder { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1em; color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } ::-ms-input-placeholder { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1em; color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } ::-o-placeholder { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1em; color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } ::placeholder { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1em; color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } .form-btn { text-align: center; display: inline-block; overflow: hidden; position: relative; float: right; -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; clip-path: inset(0 round 999px); background-color: var(--prpl-color); } .ajax-form input[type="submit"] { position: relative; padding: 18px 45px; height: 100%; width: 100%; font-weight: 700; float: right; margin: 0px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 0px solid transparent; opacity: 1; background: transparent; } .ajax-form input[type="submit"]:hover { opacity: 0; } .ajax-form input[type="submit"], .ajax-form input[type="submit"]:hover { -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; /* -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; -ms-transition-timing-function: initial; -o-transition-timing-function: initial; transition-timing-function: initial; */ -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .send_ico { -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; background: url(../contact-form/images/send.png) no-repeat; background: url(../contact-form/images/send.svg) no-repeat, linear-gradient(transparent, transparent); background-position: 50% 50%; background-size: 23px auto; /*padding: 18px 50px;*/ height: 50px; width: 50px; float: right; margin: 0px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 0px solid transparent; position: absolute; top: 50%; left: 0%; right: 0%; opacity: 0; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; -webkit-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; /* -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; -ms-transition-timing-function: initial; -o-transition-timing-function: initial; transition-timing-function: initial; */ -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate3d(90%, -49%, 0); -moz-transform: translate3d(90%, -49%, 0); -ms-transform: translate3d(90%, -49%, 0); -o-transform: translate3d(90%, -49%, 0); transform: translate3d(90%, -49%, 0); } .form-btn:hover .send_ico { background-position: 50% 50%; background-size: 23px auto; border: 0px solid transparent; opacity: 1; -webkit-transition: opacity 0s; -moz-transition: opacity 0s; -ms-transition: opacity 0s; -o-transition: opacity 0s; transition: opacity 0s; -webkit-animation: fgsend .35s forwards; -moz-animation: fgsend .35s forwards; -ms-animation: fgsend .35s forwards; -o-animation: fgsend .35s forwards; animation: fgsend .35s forwards; } @-webkit-keyframes fgsend { from { -webkit-transform: translate3d(-60%, 20%, 0); } to { -webkit-transform: translate3d(90%, -49%, 0); } } @-moz-keyframes fgsend { from { -moz-transform: translate3d(-60%, 20%, 0); } to { -moz-transform: translate3d(90%, -49%, 0); } } @-ms-keyframes fgsend { from { -ms-transform: translate3d(-60%, 20%, 0); } to { -ms-transform: translate3d(90%, -49%, 0); } } @-o-keyframes fgsend { from { -o-transform: translate3d(-60%, 20%, 0); } to { -o-transform: translate3d(90%, -49%, 0); } } @keyframes fgsend { from { transform: translate3d(-60%, 20%, 0); } to { transform: translate3d(90%, -49%, 0); } } .fgsend { -webkit-animation-name: fgsend; -moz-animation-name: fgsend; -ms-animation-name: fgsend; -o-animation-name: fgsend; animation-name: fgsend; } .nameico { background: url(../contact-form/images/name-contactform.png) no-repeat; background: url(../contact-form/images/name-contactform.svg) no-repeat, linear-gradient(transparent, transparent); background-size: 35px; background-position: center center; } .emailico { background: url(../contact-form/images/email-contactform.png) no-repeat; background: url(../contact-form/images/email-contactform.svg) no-repeat, linear-gradient(transparent, transparent); background-size: 35px; background-position: center center; } .msgico { background: url(../contact-form/images/message-contactform.png) no-repeat; background: url(../contact-form/images/message-contactform.svg) no-repeat, linear-gradient(transparent, transparent); background-size: 35px; background-position: center center; } .nameico, .emailico, .msgico { width: 0px; height: 0px; position: absolute; top: 45px; left: 0px; z-index:6; opacity: 0; } .namefld:focus + .nameico, .namefld.valid + .nameico, .emailfld:focus + .emailico, .emailfld.valid + .emailico, .msgfld:focus + .msgico, .msgfld.valid + .msgico { width: 35px; height: 35px; top: 25px; left: 25px; opacity: 1; } .namefld, .emailfld, .msgfld { padding-left: 0px; background-color: var(--grey-color); -webkit-border-radius: var(--main-border-radius); -moz-border-radius: var(--main-border-radius); -ms-border-radius: var(--main-border-radius); -o-border-radius: var(--main-border-radius); border-radius: var(--main-border-radius); border: 0px solid transparent; } .namefld:focus, .namefld.valid, .emailfld:focus, .emailfld.valid, .msgfld:focus, .msgfld.valid { padding-left: 78px !important; } .namefld:focus::-webkit-input-placeholder, .emailfld:focus::-webkit-input-placeholder, .msgfld:focus::-webkit-input-placeholder { padding-left: 20px; opacity: 0; } .namefld:focus::-moz-placeholder, .emailfld:focus::-moz-placeholder, .msgfld:focus::-moz-placeholder { padding-left: 20px; opacity: 0; } .namefld:focus::-ms-input-placeholder, .emailfld:focus::-ms-input-placeholder, .msgfld:focus::-ms-input-placeholder { padding-left: 20px; opacity: 0; } .namefld:focus::-o-placeholder, .emailfld:focus::-o-placeholder, .msgfld:focus::-o-placeholder { padding-left: 20px; opacity: 0; } .namefld:focus::placeholder, .emailfld:focus::placeholder, .msgfld:focus::placeholder { padding-left: 20px; opacity:0; } .nameico, .nameico.valid, .nameico:focus, .namefld, .namefld:focus, .namefld.valid, ::-webkit-input-placeholder, .nameico:focus::-webkit-input-placeholder, .namefld:focus::-webkit-input-placeholder, .emailico, .emailico.valid, .emailico:focus, .emailfld, .emailfld:focus, .emailfld.valid, .emailico:focus::-webkit-input-placeholder, .emailfld:focus::-webkit-input-placeholder, .msgico, .msgico.valid, .msgico:focus, .msgfld, .msgfld:focus, .msgfld.valid, .msgico:focus::-webkit-input-placeholder, .msgfld:focus::-webkit-input-placeholder { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.35s; -moz-transition-duration: 0.35s; -ms-transition-duration: 0.35s; -o-transition-duration: 0.35s; transition-duration: 0.35s; /* -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; -ms-transition-timing-function: initial; -o-transition-timing-function: initial; transition-timing-function: initial; */ -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } ::-moz-placeholder, .nameico:focus::-moz-placeholder, .namefld:focus::-moz-placeholder, .emailico:focus::-moz-placeholder, .emailfld:focus::-moz-placeholder, .msgico:focus::-moz-placeholder, .msgfld:focus::-moz-placeholder { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } .nameico, .nameico.valid, .nameico:focus, .namefld, .namefld:focus, .namefld.valid, ::placeholder, .nameico:focus::-ms-input-placeholder, .namefld:focus::-ms-input-placeholder, .emailico, .emailico.valid, .emailico:focus, .emailfld, .emailfld:focus, .emailfld.valid, .emailico:focus::-ms-input-placeholder, .emailfld:focus::-ms-input-placeholder, .msgico, .msgico.valid, .msgico:focus, .msgfld, .msgfld:focus, .msgfld.valid, .msgico:focus::-ms-input-placeholder, .msgfld:focus::-ms-input-placeholder { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } .nameico, .nameico.valid, .nameico:focus, .namefld, .namefld:focus, .namefld.valid, ::placeholder, .nameico:focus::-o-placeholder, .namefld:focus::-o-placeholder, .emailico, .emailico.valid, .emailico:focus, .emailfld, .emailfld:focus, .emailfld.valid, .emailico:focus::-o-placeholder, .emailfld:focus::-o-placeholder, .msgico, .msgico.valid, .msgico:focus, .msgfld, .msgfld:focus, .msgfld.valid, .msgico:focus::-o-placeholder, .msgfld:focus::-o-placeholder { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } .nameico, .nameico.valid, .nameico:focus, .namefld, .namefld:focus, .namefld.valid, .namefld:hover.error, .namefld:focus.error, ::placeholder, .nameico:focus::placeholder, .namefld:focus::placeholder, .emailico, .emailico.valid, .emailico:focus, .emailfld, .emailfld:focus, .emailfld.valid, .emailfld:hover.error, .emailfld:focus.error, .emailico:focus::placeholder, .emailfld:focus::placeholder, .msgico, .msgico.valid, .msgico:focus, .msgfld, .msgfld:focus, .msgfld.valid, .msgfld:hover.error, .msgfld:focus.error, .msgico:focus::placeholder, .msgfld:focus::placeholder { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } .button-wrapper .error, .error { border: 1px solid #d40000; -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } .namefld:hover.error, .namefld:focus.error, .emailfld:hover.error, .emailfld:focus.error, .msgfld:hover.error, .msgfld:focus.error { border: 1px solid transparent; } .form-thank-you { display: none; width: 100%; text-align: center; } .form-thank-youh3, .form-error { padding-top: 15px; text-align: center; font-family: inherit; width: 60%; margin: 0 auto; color: var(--wh-color); position: absolute; top: 15%; left: 0px; right: 0px; /* opacity: 0; */ display: none; } .form-thank-youh3 p, .form-error p { display: inline-block; font-size: 2.4em; font-weight: 400; line-height: normal; margin: 0px; } .form-thank-youh3 h3, .form-error h3 { font-size: 3em; margin-bottom: 10px; margin-top: 15px; font-weight: 400; line-height: normal; } .ajax-form input[type="text"]:-webkit-autofill, .ajax-form input[type="text"]:-webkit-autofill:hover, .ajax-form input[type="text"]:-webkit-autofill:focus { -webkit-transition-delay: 99999s; -moz-transition-delay: 99999s; -ms-transition-delay: 99999s; -o-transition-delay: 99999s; transition-delay: 99999s; -webkit-transition: background-color 99999s ease-in-out 0s; -moz-transition: background-color 99999s ease-in-out 0s; -ms-transition: background-color 99999s ease-in-out 0s; -o-transition: background-color 99999s ease-in-out 0s; transition: background-color 99999s ease-in-out 0s; -webkit-text-fill-color: var(--wh-color); caret-color: var(--wh-color); } .ajax-form input[type="text"]:-webkit-autofill::selection { -webkit-text-fill-color: var(--wh-color); background: var(--prpl-color); } /* The switch - the box around the slider ======== captcha ========== */ .switch { position: relative; display: inline-block; width: 60px; height: 25px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; overflow: hidden; } .switch input { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .switch input { cursor: pointer; } .switch_error { background-color: #d40000; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--prpl-color); border-radius: 3px; } .slider:before { position: absolute; content: ""; height: 17px; width: 25px; left: 4px; bottom: 4px; background-color: rgb(253, 253, 253); -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } input.slider, input.slider:before .error { background-color: #d40000 !important; } input:checked+.slider { background-color: #7a7bbf !important; } input:focus+.slider { box-shadow: 0 0 1px transparent; } input:checked+.slider:before { -webkit-transform: translateX(26px); -moz-transform: translateX(26px); -ms-transform: translateX(26px); -o-transform: translateX(26px); transform: translateX(26px); } /*================== probabile errore =================*/ /* Rounded sliders */ .slider.round { border-radius: var(--main-border-radius); } .slider.round:before { border-radius: 50%; } .slider, .slider:before, .error, .switch_error, .gdpr_a a, .gdpr_a a:hover { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } .gdpr_send_cont, .gdpr_send_cont_1{ display: inline-block; height: 100%; vertical-align: middle; } .gdpr_send_cont{ width: 64.75%;} .gdpr_send_cont_1{ width: 34.75%;} .gdpr_a { display: inline-block; margin-left: 1em; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: var(--fs-6); font-weight: 400; letter-spacing: .004em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--wh-color); vertical-align: middle; opacity: 1; } .gdpr_a a { text-decoration: none; cursor: pointer; color: var(--wh-color); font-weight: 700; opacity: 1; } .gdpr_a a:hover { opacity: .75; font-weight: 700; } /*===== Scrollbars Style =======*/ textarea::-webkit-scrollbar, textarea::-webkit-scrollbar-track, textarea::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .0); width: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=1); -webkit-transition: linear 300ms opacity; -moz-transition: linear 300ms opacity; -ms-transition: linear 300ms opacity; -o-transition: linear 300ms opacity; transition: linear 300ms opacity; } textarea::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); } textarea::-webkit-scrollbar-track:hover { background-color: rgba(253, 253, 253, .5); } textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .5); cursor: auto !important; } @media only screen and (max-width: 1400px) { body { font-size: 14px; } .form-thank-youh3, .form-error { top: 10%; } } @media only screen and (max-width: 1100px) { .c_form_title { font-size: 2.5em; } .form-thank-youh3, .form-error { top: 10%; } /* .ajax-form input[type="submit"] { height: 56px; } .ajax-form input[type="submit"]:hover { height: 56px; }*/ } @media screen and (max-width:1080px) { #cboxWrapper, #colorbox { -webkit-border-radius: 21px; -moz-border-radius: 21px; -ms-border-radius: 21px; -o-border-radius: 21px; border-radius: 21px; } } @media only screen and (max-width: 800px) { body { font-size: 14px; } .contact-cont { width: 100%; margin: 0 auto; } /* button, input, optgroup, select, textarea { font-size: 1.81em; } */ /*.gdpr_a { font-size: 1.81em; }*/ .c_form_title { /*font-size: 2.3em;*/ margin-bottom: 50px; } .form-thank-youh3, .form-error { line-height: auto; top: 20%; } } @media only screen and (max-width: 750px) { :root { --main-border-radius: 20px; --line-border-radius: 19px; } } @media only screen and (max-width: 725px) { .ajax-form textarea { min-height: 280px; } } @media only screen and (max-width: 650px) { .gdpr_send_cont, .gdpr_send_cont_1 { margin-top: 10px; float: left; } } @media only screen and (max-width: 527px) { .ajax-form textarea { min-height: 264px; } .gdpr_send_cont, .gdpr_send_cont_1 { width: 100%; } .gdpr_send_cont_1 { margin-top: 25px; } /* .ajax-form textarea { min-height: 161px; max-height: 161px; } */ } /* @media only screen and (max-width: 524px) { .ajax-form textarea { min-height: 197px; max-height: 197px; } } */ @media only screen and (max-width: 495px) { .ajax-form textarea { min-height: 275px; } .gdpr_send_cont { margin-top: 20px; } .gdpr_send_cont_1 { margin-top: 40px; } } @media only screen and (max-width: 475px) { .ajax-form textarea { min-height: 290px; } } @media only screen and (max-width: 470px) { .ajax-form textarea { min-height: 295px; } } @media only screen and (max-width: 405px) { :root { --fs-3: 1.5em; } } @media only screen and (max-width: 408px) { .ajax-form textarea { min-height: 280px; } } @media only screen and (max-width: 355px) { .ajax-form textarea { min-height: 320px; } } @media only screen and (max-width: 330px) { .ajax-form textarea { min-height: 330px; } .gdpr_a { margin-top: 15px; width: 90%; } } @media only screen and (max-width: 325px) { .ajax-form textarea { min-height: 290px; } } @media only screen and (max-width: 213px) { body { font-size: 10px; } } @media only screen and (max-width: 150px) { html { font-size: 9px; } :root { --fs-3: 1.5em; } }