@charset "utf-8";
/* -- Contact ------ */
form { margin: 0px; }
/*.form.white select,.form.white input,.form.white option,.form.white textarea,.form.white input[type="radio"],.form.white input[type="checkbox"]{
color: #333; background:transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.50);}*/
.form input,.form option{color: #fff; background:transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.50);border-left:none;border-top:none; border-right:none;  }
.form select,.form textarea{color: #fff; background:transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.50);border-left:none;border-top:none; border-right:none;  }
.form select,.form input,.form option,.form textarea,.form input[type="radio"]+label, .form input[type="checkbox"]+label{ transition: background-color 0.5s; -moz-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -ms-transition: background-color 0.5s; -o-webkit-transition: background-color 0.5s; -webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;  outline: none;}
.form input:invalid {  background-color: #E00;}
/*------ form ------*/
.form {width:100%; margin:auto;  display: block;}
.form ul { display: block; margin:2% auto; padding: 0; width: 96%; list-style: none; }
.form ul li { display:block; width: 100%;  margin:2% auto; font-size: 1rem; }
.form li input { padding: 0 10px; width: 100%; height: 40px; line-height: 40px; }
.form li input::placeholder,.form ul li textarea::placeholder {  color: #fff;}
.form ul li select { padding: 0 0 0 5px; width: 100%; height: 40px; line-height: 40px;  }
.form ul li option { padding: 5px 10px;}
.form ul li textarea { padding: 5px 10px; width: 100%; height: 100px; line-height: 20px; }
.form li.comment { display:block; width: 100%; margin-left:0px !important;  }
.form ul li.code input { width:50%; margin-right: 10px; }
.form ul li.code img{ background-color:#fff;}
.form ul li select:focus { color: #fff; }
.form ul li select:focus option { color: #666; padding: 5px 0px; }
.form ul li textarea:focus, .form ul li input:focus { background: #eee; color: #000; }
.form ul.send { display: block; width: 100%;}
.form ul.send li{ display: inline-block; width:48%; }
.form ul.send li input{ max-width:80%; background-color: transparent; padding:.1em; height:auto !important; color:#fff; vertical-align: middle; text-align: center; font-size: 1.15em; border-radius:20px; border:solid 1px rgba(255, 255, 255, 0.50);  }
.form ul.send li input:hover { background:#7e90ae;}
.contact{ background:#222; }	
.contact h1{ color:#fff !important; text-align: center;}
.contact h3{ margin-bottom: 2%; font-size:2rem;  font-weight: 700; border-bottom: solid 2px rgba(99,99,99,1.00);}
.contact-wrap{width:100%;  margin:0 auto; display:flex;   flex-wrap: wrap-reverse;  }
.contact-data{ width: 100%;  vertical-align: top;position: relative; z-index:1;   background: #fff; }
.contact-info{width: 100%;  display: flex;  padding: 100px 40px 20px 10px;  position: relative; z-index:9; background: #222;}

.map{ width: 100%; height:520px; }
.contact-main{ width: 100%; padding:2em; display: block; margin: auto;  }
.contact-main ul{ width: 100%; display: block; margin: auto; }
.contact-main ul li{ padding:1em 0px; margin-right:1%;  display: block;} 
.contact-main ul li span{ padding:4px 0px; display:inline-block;} 
.contact-main font,.contact-main span:first-child{  display: block;  font-size: 20px;  font-weight:700;  padding-bottom: 20px; line-height: 100%;}
.contact-main i{  display: inline-block; vertical-align: middle; padding-right: 18px;font-size: 30px;}
/* -- 767px ----------------*/
@media screen and (min-width: 980px){
.form { max-width: 720px; width:98%; margin: 0 auto; display: block;}
.form ul li { display: inline-block; list-style: none; padding: 0; width:48%; margin: 0 8px 18px 0; overflow: hidden }
.form li input { max-width: 320px; }
.form ul li select { max-width: 320px; }
.form ul li.code { margin-left: 0; }
.form ul li.send { max-width: 320px; }
/*size*/
.form .col-full{display:block; width: 100%; margin-right:0px !important;  }
.form li.col-full input{ max-width: 100%;}
.form .col-2 {width: 20%!important; }
.form .col-3 {width: 33%;}
.form .col-4 {width: 26%;}

.contact-data{width: 40%; display: inline-block;  }
.contact-info{width:60%;  margin-left: -5px; display: inline-block; }
.contact-main{ width: 80%;   }

}