#contact2 {
    font: 1.3em/1 Roboto,Verdana;
    width: 50%;
    min-width: 500px;
    background: #ebf6f9;
    padding: 10px;
    border: 1px solid #777;
    margin: 20px 0 30px;
}

.message_form{
    font: 1.3em/2 Roboto;
	color: #fff;
    text-align: center;
    background: #69F;
    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;'
}

.message_form i{
	font-style: italic;
	color: #252525;
}

#contact2 .reg_title {
    display: inline-block;
    width: 100%;
    font: 1.5em/1.7 "Modern Antiqua";
    text-align: center;
    color: #fff;
    background: #69F;
    margin-bottom: 15px;
    box-shadow: 0 2px 2px #777;
}

#contact2 .req_mes {
    margin-bottom: 10px;
    font: italic .7em/1 Verdana;
    color: #666;
    text-align: center;
}

#contact2 .req_mes span {
    color: #ff6347;
}

#contact2 p {
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#contact2 label,.gender {
    -ms-flex-preferred-size: 36%;
    flex-basis: 36%;
    color: #555;
    text-align: right;
    padding: 6px;
    background: #fff;
    border-bottom: 1px solid #69f;
    border-left: 1px solid #69f;
}

#contact2 label[for="confirm_password"] {
    font-size: .85em;
    padding-top: 8px;
}

#contact2 label:not([for="agree"]):not([for="newsletter"]):not([for="gender"]):not([for="male"]):not([for="female"]):before {
    content: "*";
    color: #ff6347;
    margin-right: 3px;
}

#contact2 label[for="agree"]:after {
    content: "*";
    color: #ff6347;
    margin-left: 3px;
}

#contact2 label:hover {
    color: #111;
    cursor: pointer;
}

#contact2 .fa {
    display: inline-block;
    width: 50px;
    text-align: center;
    color: #69f;
    background: #f2f2f2;
    padding: 6px 0;
    border: 1px solid #888;
}

#contact2 input {
    font-size: 1em;
    width: 255px;
    padding-left: 10px;
    padding-right: 25px;
    border: none;
    border-bottom: 1px solid #69f;
    border-right: 1px solid #69f;
}

#contact2 input:focus {
    border: none;
    outline: 2px solid #69f;
}

/* not "display:none" because jquery validation can't validate hidden elements */
#contact2 input[type="checkbox"] {
    position: absolute;
    z-index: -1;
}

#contact2 input[type="checkbox"] ~ label {
    position: relative;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    color: #222;
    text-align: left;
    padding-left: 40px;
    background: none;
    border: none;
}

#contact2 input[type="checkbox"] ~ label:before {
    display: block;
    position: absolute;
    content: "\f096";
    font: 1.3em/1 fontAwesome;
    top: 3px;
    left: 10px;
    color: #69f;
}

#contact2 input[type="checkbox"]:checked ~ label:before {
    content: "\f046";
    -webkit-animation: popout 150ms ease-in-out;
    animation: popout 150ms ease-in-out;
}

@-webkit-keyframes popout {
    0,100%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    90% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

@keyframes popout {
    0,100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    90% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

#contact2 input[type="radio"] {
    display: none;
}

#contact2 input[type="radio"] + label {
    position: relative;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    text-align: center;
    background: none;
    padding-left: 40px;
    border: none;
}

#contact2 input[type="radio"] + label:before {
    display: block;
    position: absolute;
    content: "\f10c";
    top: 3px;
    left: 15px;
    font: 1.3em/1 fontAwesome;
    color: #b3b3b3;
}

#contact2 input[type="radio"]:checked + label:before {
    content: "\f222";
    color: #04c;
    -webkit-animation: popout 150ms ease-in-out;
    animation: popout 150ms ease-in-out;
}

#contact2 input[type="radio"][id="female"]:checked + label:before {
    content: "\f221";
    color: #ff4d6a;
}

#contact2 input[type="submit"] {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font: 1.2em/1 Georgia;
    text-align: center;
    color: #fff;
    background: #69F;
    border: none;
    padding: 5px;
    box-shadow: 0 2px 2px #777;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

#contact2 input[type="submit"]:hover {
    font-weight: 700;
    cursor: pointer;
    color: #69F;
    background: #f2f2f2;
}

/* errors */
#contact2 input.valid {
    background: #fff url(../images/thumbs_up.png) no-repeat 98% center;
}

#contact2 input.error {
    background: #fff url(../images/thumbs_down.png) no-repeat 98% center;
    border: 1px solid red;
}

#contact2 label.error {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: .75em;
    color: red;
    text-align: center;
    background: transparent;
    border: none;
}

#contact2 label.error:before {
    content: "" !important;
}

#contact2 #agree-error {
    display: block;
    color: red;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
/* it is placed after the html label */
}

#contact2 #agree-error:before,#contact2 #agree-error:after {
    content: "";
}