.wrapper{   min-height:100% ;display: flex;  align-items: center; justify-content: center;}
.contact{  max-width: 1600px; position: relative;   display: flex;  align-items: center; justify-content: center;}
 
.contact-left{ flex: 3; }

.contact-type-area{  max-width: 1200px; margin: 0 auto;;}

.contact-form{padding:5%;background: #FFFFFF;}
.contact-form > h3{ font-size: 16pt;font-weight: bold; padding: 0px 0px;  margin-bottom: 10px; }

.contact-info{padding:5%;flex: 1; max-width: 450px;margin-left: 10px;  background: #BA9E78AA; color: #FFFFFF;}
.contact-info > h3{ font-size: 16pt;font-weight: bold; padding: 0px 0px;  margin-bottom: 10px; }

.contact-data{    }
.contact-data li{ margin: 15px 0px; }
.contact-data li a{ display: flex;align-items: center; color: #FFFFFF;}
.contact-data li a i{ font-size: 20pt; color: #FFFFFF; opacity: 0.5; }
.contact-data li a span{  margin-left: 10px; }
.contact-data-phone{ font-size: 16pt!important;;}

.contact-social{ display: flex; align-items: center;  ;}
.contact-social li{ margin: 10px 20px 10px 0px;}
.contact-social li a{ display:flex; align-items: center;justify-content: center;; width: 50px; height: 50px; background: #000000; border-radius: 50px; margin: 0 auto; color: #FFFFFF; opacity: 0.25;}
.contact-social li a:hover{opacity: 0.5;}
.contact-social li a img{ height: 30px;  }
.contact-social li span{ font-size: 10pt; white-space: nowrap;}


@media screen and (max-width:768px) {  
    .wrapper{  padding-top: 50px; ;}
    .contact{  display: block } 
    .contact-form{ flex: 2; }
    .contact-info{flex: 1; max-width: none; margin: 10px 0px 0px 0px; }

    .contact-data{  display: flex;  flex-wrap: wrap;  }
.contact-data li{ margin: 10px 0px; margin-right: 20px;}
    
}
 
@media screen and (max-width:468px) {  
 
}


.contact-content{ border: 1px solid #CCCCCC; padding: 20px; margin: 10px 0px; }

.contact-content-time{font-size: 10pt; color: #BA9E78;}
.contact-content-text{ line-height: 150%; margin: 5px 0px 0px 0px;;}
.contact-content-response{ margin-left: 0px;margin-top: 10px; color:#000000AA ;  line-height: 150%; background: #BA9E7822;; padding: 10px 10px;}
.contact-content-response-tag{ display:  block; background: #BA9E7866;; font-size:10pt; font-weight: bold; padding:2px 10px; color: #FFFFFF  ; margin: -10px -10px 10px -10px;}

.contact-add-content{ background: #f1f1f1; padding: 10px; text-align: center;}
.contact-add-content form{ display: flex; align-items: center;}
.contact-add-content textarea{border: 1px solid #dddddd; padding:5px 10px; width: 100%; height: 80px ; margin-right: 5px;}
.contact-add-content .update-form-send{ width: 100px; font-size: 12pt; padding:10px 0px; color: #FFFFFF; }



/*contact-type*/
.ct{display: none}

.ct-top{ margin-bottom: 0px; padding: 5% 6%; background: #f1f1f1; color: #FFFFFF;}
.ct-top h3{ font-size: 24pt;}
.ct-top h5{}

.ct-content{display: flex; align-items: center; flex-wrap: wrap}
.ct-content select{ padding:6px 10px}
.ct-content label{margin-right: 10px; cursor: pointer}
.ct-content label input{margin-right: 5px;}
.ct-note{ font-size: 9pt; display: block; padding: 5px; color: #999999; margin-left: 10px}

.ct-title-content{     font-weight: bold!important;    margin-top: 10px; }
.ct-title-content .form-title{ font-size: 12pt!important; border-bottom: 3px solid #009966!important;color: #009966}
.ct-title-content p{ padding: 10px; font-size: 10pt; color: #009966}

.ct-textmore-sub{border-top: 2px dashed #f1f1f1!important; padding: 10px 10px!important}
.ct-content .ct-textmore-sub:first-child{ border:0px!important}
.ct-type-textmore{ padding: 5px 0px!important}
.ct-type-textarea textarea{height: 100px!important}