/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999999999999999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 50%;
transform: translateX(-50%);
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
padding-top:20px;
width: 80%;
max-width:600px;
border-radius:8px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}


/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
.close {
color:#374149;
position:absolute;
right:4px;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 2px 16px;
background-color: #ccc;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
padding: 25px 0px;
border-top:1px solid #ccc;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
text-align:center;
}

/* END MODAL */

/* FORM */

.inputField {
position: relative;
margin-top:30px;
margin-left:10%;
font-size:12pt;
}

.inputField input {
padding: 8px 20px;
padding-top: 18px;
border:none;
border-bottom: 1.8px solid rgba(107, 107, 107, 0.4);
width: 90%;
color: black;
}

.inputField textarea {
padding: 8px 20px;
padding-top: 18px;
overflow:auto;
border:none;
border-bottom: 1.8px solid rgba(107, 107, 107, 0.4);
width: 90%;
color: black;
}

.inputField input:focus {
border-bottom:2px solid #5A85F2;
outline: none;
}

.inputField textarea:focus {
border-bottom:2px solid #5A85F2;
outline: none;
}

.inputField span {
pointer-events: none;
opacity: 0.5;
position: absolute;
padding-left: 20px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: text;
}

.inputField input:focus+span,
.inputField input:not(:placeholder-shown)+span {
top: 7px;
-webkit-transform: scale(0.8) translateY(-70%) translateX(-8.5px);
transform: scale(0.8) translateY(-70%) translateX(-8.5px);
color:#5A85F2;
font-weight:500;
}

.inputField textarea:focus+span,
.inputField textarea:not(:placeholder-shown)+span {
top: 7px;
-webkit-transform: scale(0.8) translateY(-120%) translateX(-8.5px);
transform: scale(0.8) translateY(-120%) translateX(-8.5px);
color:#5A85F2;
font-weight:600;
}

.inputField input,
.inputField span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.inputField textarea,
.inputField span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}


input:not(:placeholder-shown):not(:focus):invalid {
border-bottom: 2px solid #D4563C;
}

input:not(:placeholder-shown):not(:focus):valid {
border-bottom: 2px solid #73C353;
}

textarea:not(:placeholder-shown):not(:focus):invalid {
border-bottom: 2px solid #D4563C;
}

textarea:not(:placeholder-shown):not(:focus):valid {
border-bottom: 2px solid #73C353;
}

.form_fas {
font-size:30px;
color:#ccc;
position:absolute;
margin-top:20px;
margin-left:-40px;
}

input[type=submit] {
background-color: #0693cd;
border: 0 !important;
border-radius: 5px;
cursor: pointer;
color: #fff;
font-size:16px;
line-height: 1.4;
padding: 10px;
width: 180px;
-webkit-transition: background 0.5s; /* For Safari 3.0 to 6.0 */
transition: background 0.5s;
}

input[type=submit]:hover {
background-color: #ccc;
-webkit-transition: background 0.5s; /* For Safari 3.0 to 6.0 */
transition: background 0.5s;
}

/* END FORM */

.thank-you {
position:absolute;
background:url(../img/thankyou.png)center top no-repeat;
width:90%;
margin: 0 auto; 
display:none;
padding-top:353px;
    left: 50%;
    transform: translate(-50%, 0);
}

.thank-you-text {
font-size:16pt;
padding:10px;
border:1px solid #000;
border-radius:20px;
text-align:left;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.form_top_tel {
text-align:center;
width:100%;
background:#ccc;
padding-top:4px;
color:#374149;
}

.dial {
background:#ccc;
color:#374149;
padding:2px;
}

.big_numbers {
font-family:Anton;
font-size:40px;
line-height:1;
margin:0;
}

@media screen and (max-width: 600px) {
.big_numbers {
font-size:30px;
}
}

.tel_mail {
text-decoration:none;
}