.contact{
}

.contact-header{
 display: block;
 height: 500px;
 background: url(/statics/img/cnt-bg.jpg);
 background-size: cover;
}

.contact-header #contact-title{
 background: rgba(0, 0, 0, 0.2);
 height: 500px;
}

.contact-header #contact-title > h1{
 margin: 0;
 padding: 40px;
 font: 25pt 'Nassim';
 color: #fff;
 direction: rtl;
}
.contact-header #contact-map{
 height: 500px;
}

.contact-info{
 padding: 20px;
 font-size: 0;
 text-align: center;
}
.contact-info > div{
 display: inline-block;
 width: 33.33%;
 max-width: 600px;
 vertical-align: top;
}
.contact-info > div > div{
 padding: 20px;
}

.contact-info > div > div > h2{
 display: block;
 height: 48px;
 margin: 0 0 20px 0;
 padding: 0;
 background: #fc0;
 border: 1px #fc0 solid;
 border-radius: 3px;
 font: 20pt 'Nassim';
 line-height: 48px;
 text-align: center;
 color: #000;
 cursor: pointer;
}
.contact-info .contact-detail, .contact-info .contact-form{
 display: table;
}
.contact-info .contact-detail > span, .contact-info .contact-form > span{
 display: table-row;
}
.contact-info .contact-detail > span > *, .contact-info .contact-form > span > *{
 display: table-cell;
 font: 15pt 'Nassim';
 vertical-align: top;
}


.contact-form{
 margin-left: auto;
}
.contact-info .contact-form > span > *{
 padding-top: 10px;
}
.contact-form{
 width: 100%;
}
.contact-form .inp{
 width: 100%;
}
.contact-form > span > i{
 line-height: 30px;
}
.contact-form textarea{
 height: 100px;
 resize: none;
}

/*
  languages compatibility
  right to left
*/

.content-rtl .contact-info{
 direction: rtl;
}

.content-rtl .contact-info .contact-detail{
 margin-left: auto;
 direction: rtl;
}
.content-rtl .contact-info .contact-detail > span > *{
 text-align: right;
}
.content-rtl .contact-info .contact-detail > span > b{
 padding-right: 10px;
}

.content-rtl .contact-form{
 direction: rtl;
 text-align: right;
}
.content-rtl .contact-info .contact-form > span > *{
 padding-left: 12px;
}

/*
  languages compatibility
  left to right
*/
.content-ltr .contact-info{
 direction: ltr;
}

.content-ltr .contact-info .contact-detail{
 direction: ltr;
}
.content-ltr .contact-info .contact-detail > span > *{
 text-align: left;
}
.content-ltr .contact-info .contact-detail > span > b{
 padding-left: 10px;
}

.content-ltr .contact-form{
 direction: ltr;
 text-align: left;
}
.content-ltr .contact-info .contact-form > span > *{
 padding-right: 12px;
}