#contact{
color: var(--tx-color);
}
#contact .content{
max-width: 600px;
}
#contact .contact-title{
width: 100%;
text-align: center;
font-weight: 500;
font-size: 2.5em;
}
#contact .contact-subtitle{
width: 100%;
text-align: center;
font-weight: 400;
font-size: 1.5em;
}
#contact .contact-form{
width: 100%;
margin-top: 5%;
}
#contact .contact-form .input{
width: 47.5%;
margin-bottom: 5%;
}
#contact .contact-form .surname, #contact .contact-form .phone{
margin-left: 5%;
}
#contact .contact-form .body{
width: 100%;
}
#contact .contact-form .input label{
width: 100%;
font-size: .8em;
}
#contact .contact-form .input input, #contact .contact-form .input textarea{
width: calc(100% - 20px);
padding: 5px;
border-bottom: 2px solid var(--tx-color);
font-size: 1em;
color: var(--tx-color);
transition: .3s;
resize: none;
}
#contact .contact-form .input input:invalid{
color: red;
border-bottom: 2px solid red;
}
#contact .contact-form .submit{
width: 100%;
}
#contact .contact-form .submit input{
background: var(--brand-color);
color: white;
padding: 15px 30px;
font-size: 1em;
font-weight: 500;
left: 50%;
transform: translateX(-50%);
opacity: 1;
transition: .3s;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
#contact .contact-form .submit input:hover{
box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
#contact .contact-form .submit input:disabled{
opacity: .5;
cursor: default;
}
@media (max-width: 768px) {
#contact .contact-title{
font-size: 1.5em;
}
#contact .contact-subtitle{
font-size: 1em;
}
#contact .contact-form .input.email, #contact .contact-form .input.phone{
width: 100%;
margin: 0;
margin-bottom: 5%;
}
}