#contact{
  background-color: white;
  padding-left: 0px;
  padding-right: 0px;
}

#contact > div.contact > div > form{
  width: 100%;
  padding-top: 5%
}

.contact-capsule{
  float: left;
  display: block;
  width: 50%
}


@media screen and (max-width: 767px) {
	    .contact-capsule{
        width: 100%;
      }
    }

.contact .info {width:50%;margin-right:5%}

.contact h2 {color:black;margin-left:40px}

.contact p {color:black;margin-left:40px}

.contact p strong {color:black;}

.contact .form {width:45%}

.contact .form label {display:block;color:black;margin:10px 0}

.contact .form input[type="text"] {
    background-color:#131339;
    color:#FFF;
    padding:10px;
    border:0;
    width:80%;
    margin-bottom:10px;
    border-radius: 5px ;
}

.contact .form textarea {
    background-color:#131339;
    color:#FFF;
    padding:10px;
    border:0;
    width:80%;
    margin-bottom:10px;
    height:30vh;
    border-radius: 5px;
}

#contact-button {
    background-color:#131339;
    color:#FFF;
    padding:10px 20px;
    border:0;
    margin-top:10px;
    border-radius: 5px;
    margin-bottom: 2%;
    float: left;
}

#contact-error{
    display: none;
    float: left;
    margin-top: 17px;
    color : white;
    text-shadow: 1px 1px 4px black;
    border: solid;
    border-width: 2px;
    border-color: red;
    border-radius: 15px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: red;
}

.fl-left {float:left} /* Floating Element Left */


#contact-image{
  display: block;
  margin: auto;
  margin-top: 15%;
}


@media screen and (max-width: 767px) {
	    .fl-left {float:none}
      .contact .form {width:100%; text-align: center}
      .contact .info {width:100%;margin-right:5%}
      #contact-imgae{display: none}
      #contact-button{float: none; margin: 0;}
      #contact-error{float: none}
    }