#contact3 {
    font: 1.3em/1 Roboto,Verdana;
    width: 370px;
    background: #E7E4CE;
    padding: 10px;
    border: 1px solid #777;
    margin: 20px 0 30px;
    box-shadow: 0 0 2px 1px #999;
}


.message_form{
    font: 1.3em/2 Roboto;
	color: #FF6347;
    text-align: center;
    background: #282C2D;
    padding: 20px;
    border: 1px dashed #fff;
	box-shadow: 0 0 3px 3px #999;
}

.message_form span{
	font-size:0.9em; 
	color:#000; 
	background:#fff; 
	padding: 5px;;
}

#fail_message{  
	width: 50%;  
	font: 1.3em/2 Georgia;   
	color: red;
	text-align: center;
    background: #fff;
    border: 1px dashed black;
    margin-top: 10px;
    margin-bottom: 10px;
}

#contact3 .reg_title,#contact3 input[type="submit"] {
    display: inline-block;
    width: 100%;
    font: 1.1em/1 Georgia;
    text-align: center;
    color: #fff;
    background: #25201d;
    padding: 10px 0 8px;
    margin-bottom: 28px;
    box-shadow: 0 2px 2px #777;
}

#contact3 .reg_title span {
    font: .6em/1 Verdana;
    color: #ff6347;
}

#contact3 p {
    position: relative;
    margin-bottom: 25px;
}

#contact3 p:last-child,#contact3 input[type="submit"] {
    margin-bottom: 0;
}

#contact3 p.with_icon:before {
    display: block;
    position: absolute;
    content: "\f007";
    font: 1.2em/1 fontAwesome;
    width: 35px;
    text-align: center;
    color: #4B413A;
    padding: 6px 0;
}

#contact3 p.with_icon:nth-of-type(2):before {
    content: "\f095";
}

#contact3 p.with_icon:nth-of-type(3):before {
    content: "\f0e0";
}

#contact3 p.with_icon:nth-of-type(4):before {
    content: "\f040";
}

#contact3 p.with_icon:nth-of-type(2) {
    margin-bottom: 8px;
}

#contact3 p.with_icon:nth-of-type(4) {
    margin-bottom: 10px;
}

#contact3 label {
    display: block;
    position: absolute;
    top: 10px;
    left: 40px;
    color: #999;
    pointer-events: none;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

#contact3 input,#contact3 textarea {
    font: 1.1em/1.2 Verdana;
    width: 100%;
    color: #444;
    padding: 3px 25px 5px 40px;
    border: none;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

#contact3 textarea {
    padding-top: 8px;
    padding-right: 24px;
}

#contact3 input:focus,#contact3 textarea:focus {
    outline: none;
}

#contact3 input.valid,#contact3 textarea.valid,#contact3 input.error,#contact3 textarea.error {
    background: #fff url(../images/tick.png) no-repeat 98% center;
    border: 1px solid #006400;
    border-left: none;
    border-right: none;
}

#contact3 input.error,#contact3 textarea.error {
    background-image: url(../images/warning.png);
    border-color: #E04006;
}

/* the floating lebels - not the error messages */
#contact3 input:focus ~ label:not(.error),#contact3 input.has-value ~ label:not(.error),#contact3 textarea:focus ~ label:not(.error),#contact3 textarea.has-value ~ label:not(.error) {
    font-size: .8em;
    color: #333;
    top: -20px;
    left: 0;
}

#contact3 label.error {
    font-size: .7em;
    color: #E04006;
    top: -18px;
    left: 30%;
}

#contact3 input[type="submit"]:hover {
    background: #222;
    box-shadow: none;
    cursor: pointer;
    -webkit-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
}

/* the select menu styling */
#contact3 .bir {
    font-size: .8em;
    color: #333;
    margin-bottom: 4px;
}

#contact3 .birth_date {
    position: relative;
    width: 100%;
    font: 1em/1.2 Verdana;
    color: #999;
    background: #fff;
    padding: 8px 5px 5px 40px;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    margin-bottom: 25px;
}

#contact3 .birth_date:before {
    position: absolute;
    content: "\f073";
    font-family: fontAwesome;
    top: 9px;
    left: 10px;
    color: #4B413A;
}

#contact3 .birth_date .wr {
    display: inline-block;
    position: relative;
    background: #bbb;
    border-top: 3px solid #ff6347;
    margin-top: -3px;
    margin-right: 20px;
}

#contact3 .birth_date .wr:first-of-type {
    width: 65px;
}

#contact3 .birth_date .wr:nth-of-type(2) {
    width: 100px;
}

#contact3 .birth_date .wr:last-of-type {
    width: 60px;
}

#contact3 .birth_date .wr:after {
    position: absolute;
    content: "\f103";
    font-family: fontAwesome;
    top: 4px;
    right: 2px;
    color: #ff6347;
    pointer-events: none;
}

#contact3 .birth_date select {
    width: 100%;
    font-size: .72em;
    text-indent: 5px;
    color: #fff;
    background: #25201D;
    padding-bottom: 4px;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

#contact3 .birth_date select::-ms-expand {
/* for IE 11 */
    display: none;
}

#contact3 .birth_date select:focus {
    outline: none;
}

#contact3 .birth_date option:checked {
    box-shadow: 0 0 10px 100px #ff6347 inset;
}

#contact3 #year-error,#contact3 #month-error,#contact3 #day-error {
    width: 143px;
    top: -30px;
}

#contact3 #year-error {
    left: 40px;
}

#contact3 #month-error {
    left: 30px;
}

#contact3 #day-error {
    left: 0;
}

#contact3 .wr span {
    position: absolute;
    top: 8px;
    left: calc(100% + 3px);
}

#contact3 .wr select.error ~ span {
    display: block;
    width: 18px;
    height: 18px;
    background: #fff url(../images/warning.png) no-repeat center center;
}

#contact3 .wr select.valid ~ span {
    display: block;
    width: 18px;
    height: 18px;
    background: #fff url(../images/tick.png) no-repeat center center;
}