html {
overflow-x: unset;
background-color: #000;
}
body{
overflow-x: hidden;
}
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
.inputfieldset {
display:block;
border: none;
border-top: none;
border-bottom: 1px solid #00ffaa;
background-color: transparent;
border-radius: 1px;
margin: 3px;
width: 200%;
height: 63px;
padding: 5px;
padding-top: 27px;
font-size: 16px;
}
input:focus { outline:none;
color: #E5E5E5!important;}
/* LABEL ======================================= */
label {
color:#00FFAA!important;
font-size:15px;
font-weight:normal;
position:absolute;
pointer-events:none;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input, input[type="password"], input[type="text"], input[type="email"] {
background-color: transparent!important;
}
input {
background-color: transparent!important;
}
::placeholder {
color: #fff!important;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}
/* active state */
input:focus ~ label, inpyut:valid ~ label {
top:-20px;
font-size:14px;
color:#00ffaa;
}
/* BOTTOM BARS ================================= */
.bar {
position:relative;
display:block;
width: 545px;
}
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#00ffaa;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
color: #00ffaa!important;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
color: #00ffaa!important;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
.stay-touch.section form textarea.small-textarea{
min-height: 180px;
margin-bottom: 30px;
}
/* line 1079, ../sass/_main.scss */
.stay-touch.section {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 1) 90%), url(../img/Bg_Desktop_Contact.png) no-repeat center!important;
background-size: cover!important;
filter: contrast(100%);
/* Extra Small Devices */
}
/* line 1087, ../sass/_main.scss */
.stay-touch.section h1 {
margin-bottom: 14px;
margin-top: -5px;
color: white;
font-size: 35px;
text-align: left!important;
/* Extra Small Devices */
}
/* line 1099, ../sass/_main.scss */
.stay-touch.section p {
font-size: 17px;
text-align: left;
color: white;
/* Extra Small Devices */
}
/* line 1108, ../sass/_main.scss */
.stay-touch.section p.error-message {
margin-top: 20px;
transition-duration: 0.3s;
color: #F00;
font-style: italic;
display:none;
/* Extra Small Devices */
}
/* line 1124, ../sass/_main.scss */
.stay-touch.section p.error-message.visible {
display:block;
}
/* line 1130, ../sass/_main.scss */
.stay-touch.section form {
margin-top: 45px;
/* Small Devices */
}
}
/* line 1145, ../sass/_main.scss */
.stay-touch.section form .row > div:last-child {
margin-bottom: 0px;
/* Extra Small Devices */
}
/* line 1227, ../sass/_main.scss */
.stay-touch.section form textarea {
min-height: 195px;
min-width: 540px;
background-color: transparent;
border: 2px solid #00ffaa;
margin-top: 23px;
color: white;
resize: none!important;
}
/* line 1236, ../sass/_main.scss */
.stay-touch.section form .btns {
display: flex;
justify-content: center;
align-items: center;
/* Small Devices */
/* Extra Small Devices */
}
#contact-vertical{
margin-top: 30px;
appearance: auto;
transition-delay: 0.3s;
width: 535px!important;
border:0px;
outline:0px;
color: white;
background-color: transparent;
border: none;
border-bottom: 2px solid #00ffaa;
}
/* line 1250, ../sass/_main.scss */
.stay-touch.section form #alert-box {
width: 50%;
margin: 40px auto;
text-align: center;
opacity: 0;
height: 0;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
/* Extra Small Devices */
}
@media only screen and (max-width: 767px) {
/* line 1250, ../sass/_main.scss */
.stay-touch.section form #alert-box {
margin-bottom: 0;
}
.info-password {
position: relative !important;
top: -55px !important;
right: -303px !important;
color: #00FFAA;
font-size: 15px;
cursor: pointer;
}
.introduce.mobile {
padding-left: 25px;
}
.talk.mobile {
padding-left: 25px;
}
}
/* line 1266, ../sass/_main.scss */
.stay-touch.section form #alert-box.visible {
opacity: 1;
}
/* line 1270, ../sass/_main.scss */
.stay-touch.section form #alert-box.alert-success, .stay-touch.section form #alert-box.alert-error {
height: auto;
padding: 0;
background: transparent;
border-color: transparent;
color: #000;
}
/* line 1279, ../sass/_main.scss */
.stay-touch.section form #alert-box.alert-success span, .stay-touch.section form #alert-box.alert-error span {
padding: 15px 15px;
background: #00ffaa;
color: #000;
border-radius: 20px;
}
/* line 1290, ../sass/_main.scss */
.stay-touch.section form #alert-box.alert-error span {
background: #ff0000;
color: #FFF;
}
.radio-div label.btn.white {
background-color: rgba(255, 255, 255, 0.5);
display: flex!important;
align-items: center;
justify-content: center;
}
.radio-div li:last-of-type {
margin-bottom: 10px;
}
.radio-div.vertical.mobile{
display: none;
}
.radio-div {
display:grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
list-style-type:none;
padding:0;
font-size: 16px;
font-style: inherit;
font-family: "Gotham";
grid-column-gap: 25px!important;
}
.vertical{
grid-template-columns: 1fr 1fr 1fr;
}
.radio-div li {
float:left;
text-align: center;
width:250px;
height:63px;
position:relative;
}
.radio-div li .btn{
height: 63px;
}
.form-grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 25px;
grid-row-gap: 25px;
width: 240px;
}
.radio-div label, .radio-div input {
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
font-size: 16px;
font-weight: 400;
text-transform: initial;
max-width: 300px;
width:262px;
max-height: 50px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.grid-left{
justify-self: start;
margin-left:15px;
}
.grid-right{
justify-self: end;
margin-right:15px;
}
fieldset > p{
font-weight: bold;
}
.radio-div input[type="radio"] {
opacity:0.01;
}
.radio-div input[type="radio"]:checked + label,
.Checked + label {
color: black;
background:#00ffaa;
padding-left: 50px;
/* border: solid 2px black; */
}
.form-grid input,textarea,select {
font-style: normal!important;
color: white!important;
}
.form-grid > div {
width: 100%;
max-width: 80vw;
}
.form-grid ::placeholder, .form-grid select:invalid{
color:white!important;
}
.radio-div label.btn.white:hover{
background-color: #00ffaa;
color: black;
}
.stay-touch.section .btn{
background-color: #00ffaa;
color: black;
border-radius: 100px;
height: 66px;
}
.radio-div label {
z-index:2;
}
.radio-div > div {
display: grid;
grid-gap: 7px;
}
.tickbox{
display:none;
}
.radio-div input[type="radio"]:checked + label .tickbox,
.Checked + label .tickbox{
filter: brightness(0%);
position: absolute;
left: 10px;
display: block;
width:20px;
}
.stay-touch.section .next-btn, .stay-touch.section .prev-btn{
display: none;
margin: 10px 10px 10px 10px;
min-width:150px;
}
.stay-touch.section button[type="submit"].next-btn{
display: block;
}
.stay-touch.section .prev-btn{
background-color: rgba(255, 255, 255, 0.5);
width: 100px;
min-width: 100px;
height: 50px;
}
select::-ms-expand {
display: none;
}
.btn:active{
transform: scale(1.1);
}
select:hover{
cursor:pointer;
}
select:hover + img, select:active + img, select:focus + img{
transform: scale(1.2) rotate(90deg);
}
.ui-select > img{
height: 20px;
position: absolute;
top: 35%;
right: 3%;
transform: rotate(90deg);
pointer-events: none;
}
option{
color: #B2B2B2;
background-color: #fff!important;
font-family: "Gotham";
font-weight: bold;
}
.stay-touch.section .btns.desktop{
display: inherit;
margin-top:50px;
}
.stay-touch.section .btns.mobile{
display:none;
}
.next-btn img {
margin-bottom: 0px;
height:15px;
margin-right: 15px;
float: right;
}
.prev-btn img {
margin-bottom: 0px;
height:15px;
transform: rotate(180deg);
margin-left: 15px;
float: left;
}
.choices-vertical .choices .choices__inner {
border: none !important;
height: 63px;
padding-top: 25px;
}
.choices-vertical .choices .choices__inner .choices__input {
font-size: 15px;
min-width: 200px;
}
.choices-vertical .choices .choices__inner .choices__list .choices__list {
font-size: 15px;
}
.choices-vertical .choices .choices__inner .choices__list .choices__item {
font-size: 15px;
}
.info-password {
position: absolute;
top: 0;
right: -260px;
color: #00FFAA;
font-size: 15px;
cursor: pointer;
}
.password-span {
text-decoration:underline;
}
.align-left {
text-align: left;
}
.square-format {
color:#08fca4;
}
.format-span-tooltip {
padding-left:5px;
}
.passwordError {
font-size: 14px;
position: fixed;
}