/* custom ======================================
=================== 16. #Contact Section  */

#contactus.section-bg {
  background-image: url('../images/backgrounds/background4.jpg');
}

#contactus.section {
  padding-bottom:115px;
}

#map-container {
  position: relative;
  overflow: hidden;
}

#map {
  height:500px;
}

.section-content #map {
  box-shadow:0 3px 16px rgba(0,0,0, 0.4);
  -webkit-box-shadow:0 3px 16px rgba(0,0,0, 0.4);
}

#map img {
  max-width:none;
}

#map .contact-info-list li > span {
  font-size:22px;
  margin-right:4px;
  position: relative;
  color:#f8d61b;
}

.contact-info-box  {
  padding:0 20px;
  
}

.contact-info-box h3 {
  font-size:1.7em;
  margin-bottom:30px;
    color:#000;

}

.contact-info-box .contact-info-list li {
  margin-bottom:10px;
}

.contact-info-icon {
  display:inline-block;
  margin-bottom:20px;
  border-radius:50%;
  width:60px;
  height:60px;
  line-height:60px;
  text-align: center;
  font-size:28px;
  color:#ffff;
}

.contact-info-box.box {
  min-height:245px;
}

.contact-info-box.box h3 {
  font-size:1.6em;
  margin-bottom:17px;
}

.contact-info-box.box .contact-info-icon {
  margin-bottom:17px;
}

/* contact form */
/* Added transparent background and z-index value to fix animated label's positioning */
/* Now it is clickable overthe labels*/
#contact-form .form-control {
  background-color: transparent;
  z-index:1;
  position: relative;
}

.form-group {
  position: relative;
  margin-bottom: 50px;
}

.animated-label {
  position:absolute;
  top:50%;
  left:20px;
  z-index:0;
  font-size:16px;
  line-height:1;
  margin-top:-8px;
  color:#aeaeae;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.form-group input:focus + .animated-label,
.form-group input:focus + label + .animated-label,
.form-group textarea:focus + .animated-label.textarea-label,
.form-group textarea:focus + label + .animated-label.textarea-label {
  left:0;
  color:#5a5a5a;
}

.form-group input:focus + .animated-label,
.form-group input:focus + label + .animated-label {
   top:-18px;
}

.form-group textarea:focus + .animated-label.textarea-label,
.form-group textarea:focus + label + .animated-label.textarea-label {
  top:-26px;
}

.section-bg .animated-label,
.section-bg .form-group input:focus + .animated-label,
.section-bg .form-group input:focus + label + .animated-label,
.section-bg .form-group textarea:focus + .animated-label.textarea-label,
.section-bg .form-group textarea:focus + label + .animated-label.textarea-label {
  color:#fff;
}

/* these not-empty class added via js to check empty or not 
if it is empty do not move back label*/
.animated-label.not-empty {
  top:-18px !important;
  left:0 !important;
}

.animated-label.textarea-label.not-empty{
  top:-26px !important;
  left:0 !important;
}

.animated-label.textarea-label {
  top:20px;
  margin-top:0;
}

label.error {
  position: absolute;
  bottom:100%;
  right:0;
  margin-bottom:4px;
  font-size:15px;
  color:#c90e31;
  font-weight: normal
}

.section-bg .form-control  {
  color:#fff;
}

textarea.fix-height {
  height:250px !important;
}