/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-family: 'Open Sans';
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* start editing from here */
a {
    text-decoration: none;
}

.captcha {
  display:block;
  clear:both;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
.underline {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px 0;
}

/* Add 5px bottom padding and a underline */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/*end reset*/
body {
    font-size: 100%;
    background: url(../images/bg.png) no-repeat fixed center;
    background-size: cover;
}

.wrap {
    width: 50%;
    margin: 0 auto;
}

/*start-contact-form*/
.contact_form {
    width: 55%;
    float: left;
    position: relative;
}

.contact-form {
    background: #fff;
    padding: 5%;
    margin-top: 10%;
    position: relative;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
}

.contact-form h1 {
    font-size: 1.5em;
    color: #474646;
}

.contact_form ul {
    list-style: none outside;
    margin: 0;
    padding: 0;
}

.contact_form li {
    position: relative;
}

/* form element visual styles */
.contact_form li {
    float: left;
    outline: none;
    border: 1px solid #DDDDDD;
    font-size: 1.2em;
    color: #B6B6B6;
    width: 78.5%;
    font-weight: 600;
    margin-top: 8%;
    position: relative;
    height: 42px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.contact_form li:hover {
    border: 1px solid #3CB5EF;
    color: #3CB5EF;
}

.contact_form input {
    float: left;
    font-size: 0.9em;
    padding: 10px 14px;
    width: 75%;
    border: none;
    outline: none;
    color: #B6B6B6;
}

.contact_form p {
    float: right;
    padding: 8px 7px;
    width: 9.3%;
    cursor: pointer;
}

.contact_form input[type="submit"] {
    border: none;
    outline: none;
    cursor: pointer;
    color: #fff;
    background: #3CB5EF;
    width: 79%;
    padding: 12px;
    font-size: 1.3em;
    letter-spacing: 1px;
    margin: 28px 0 30px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}

.contact_form input[type="submit"]:hover {
    background: #67B6EF;
}

.contact_form input[type="checkbox"] {
    width: 21px;
    vertical-align: middle;
    padding: 5px;
    float: left;
}

.contact_form i {
    font-size: 1.2em;
    color: #B6B6B6;
    width: 40%;
    float: left;
}

.forgot {
    float: left;
    width: 40%;
    margin-top: 0;
}

.forgot a {
    color: #B6B6B6;
    font-size: 1.0em;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.forgot a:hover {
    color: #67B6EF;
}

/* === Form hints === */
.form_hint {
    color: #fff;
    text-align: center;
    background: #3CB5EF;
    border-radius: 3px 3px 3px 3px;
    font-size: 1.2em;
    margin-left: 8px;
    padding: 6px 23px;
    z-index: 999;
    position: absolute;
    right: -224px;
    bottom: 3px;
    font-weight: 100;
    display: none;
}

.form_hint::before {
    content: '';
    position: absolute;
    bottom: 9px;
    left: -9px;
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #3CB5EF;
    border-top: 10px solid transparent;
}

.contact_form input:focus + .form_hint {
    display: inline;
}

.contact_form input:required:valid + .form_hint {
    color: #000;
    background: #3CB5EF;
}

.contact_form input:required:valid + .form_hint::before {
    color: #3CB5EF;
}

/*end-contact-form*/
/*start-account*/
.account {
    float: right;
    width: 45%;
}

.account h2 a {
    color: #71B8E4;
    display: block;
    font-size: 1.3em;
    font-weight: 400;
    text-align: right;
    margin-top: 3px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.account h2 a:hover {
    color: #3CB5EF;
}

.span {
    height: 46px;
    margin-top: 8.5%;
    display: block;
    width: 100%;
    background: #3B5998;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.span img {
    background: #354F88;
    padding: 7px;
    float: left;
}

.span i {
    color: #fff;
    padding: 9px 14px;
    float: left;
  
    font-weight: 400;
}

.span:hover {
    background: #354F88;
}

.span1 {
        height: 46px;
    margin-top: 9%;
    width: 100%;
    background: #45B0E3;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.span1 img {
    background: #40A2D1;
    padding: 7px;
    float: left;
}

.span1 i {
    color: #fff;
    padding: 9px 20px;
    float: left;
  
    font-weight: 400;
}

.span1:hover {
    background: #40A2D1;
}

.span2 {
        height: 46px;
    margin-top: 9%;
    width: 100%;
    background: #DE4C34;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.span2 img {
    background: #CE3E26;
    padding: 7px;
    float: left;
}

.span2 i {
    color: #fff;
    padding: 9px 17px;
    float: left;
   
    font-weight: 400;
}

.span2:hover {
    background: #CE3E26;
}

/*end-account*/
/*start-footer*/
.footer p {
    color: #fff;
    display: block;
    font-size: 1.3em;
    font-weight: 400;
    text-align: center;
    padding: 2em 0 1em;
}

.footer p a {
    color: #3CB5EF;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.footer p a:hover {
    color: #fff;
}

/*end-footer*/
/*start-checkbox*/
.checkbox {
    margin-bottom: 4px;
    padding-left: 27px;
    font-size: 1.1em;
    line-height: 27px;
    color: #B6B6B6;
    cursor: pointer;
}

.checkbox:last-child {
    margin-bottom: 0;
}

.checkbox input {
    position: absolute;
    left: -9999px;
}

.checkbox i {
    position: absolute;
    bottom: 9px;
    left: 0;
    display: block;
    width: 13px;
    height: 13px;
    outline: none;
    border: 2px solid #DDDDDD;
    background: #DDDDDD;
}

.checkbox input + i:after {
    position: absolute;
    opacity: 0;
    transition: opacity 0.1s;
    -o-transition: opacity 0.1s;
    -ms-transition: opacity 0.1s;
    -moz-transition: opacity 0.1s;
    -webkit-transition: opacity 0.1s;
}

.checkbox input + i:after {
    content: '';
    background: url("../images/mark.png") no-repeat 3px 2px;
    top: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    font: normal 12px/16px FontAwesome;
    text-align: center;
}

.checkbox input:checked + i:after {
    opacity: 1;
}

.checkbox {
    float: left;
    margin-right: 30px;
}

.checkbox:last-child {
    margin-bottom: 4px;
}

.fade.in {
    opacity: 1;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.alert.alert-success.fade.in.flash_message {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.alert {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 0;
    margin-bottom: 20px;
}

.fade {
    opacity: 0;
    transition: opacity .15s linear;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
}

.close {
    float: right;
    font-size: 21px;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}

.alert .alert-link, .close {
    font-weight: 700;
}

.contact_form2 input {
    float: left;
    font-size: 0.9em;
    padding: 10px 14px;
    width: 92.1%;
    border: none;
    outline: none;
    color: #B6B6B6;
}

.contact_form2 li {
    float: left;
    outline: none;
    border: 1px solid #DDDDDD;
    font-size: 1.1em;
    color: #B6B6B6;
    width: 100%;
    font-weight: 600;
    margin-top: 4%;
    position: relative;
    height: 42px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.contact_form2 {
    width: 100%;
    float: left;
    position: relative;
}

.contact_form2 input[type="submit"] {
    border: none;
    outline: none;
    cursor: pointer;
    color: #fff;
    background: #3CB5EF;
    width: 100%;
    padding: 12px;
    font-size: 1.0em;
    letter-spacing: 1px;
    margin: 15px 0px 30px 0px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}

.contact_form2 input[type="submit"]:hover {
    background: #67B6EF;
}

#contactSignUp {
    overflow: hidden!important;
    min-height: 500px;
}

.already_member {
    float: right;
    width: 45%;
    text-align: right;
    font-size: 0.9em;
}

.already_member a {
    color: #3CB5EF;
}

.tos {
    float: left;
    width: 55%;
    font-size: 0.9em;
}

.tos a {
    color: #FF0000;
}

/*JUST CHANGE THIS PART TO SOME COLOR MORE VISIBLE. BUT CHECK THE LOGIN URL BECAUSE I HAVE UPDATE THE COLOR*/
#getSignUpDiv {
    font-family: 'Open Sans';
	font-size:22px;
    color: #474646;
}

/*end-checkbox*/
/*-----start-responsive-design------*/
@media only screen and (max-width: 1440px) {
    .wrap {
        width: 56%;
    }

    .span i {
    
    }

    .span1 i {
     
    }

    .span2 i {
    
    }

    .contact_form p {
        padding: 8px 7px;
    }
}

@media only screen and (max-width: 1366px) {
    .wrap {
        width: 59%;
    }

    .span i {
      
    }

    .span1 i {
     
    }

    .span2 i {
    
    }

    .contact_form p {
        padding: 8px 3px;
    }
}

@media only screen and (max-width: 1280px) {
    .wrap {
        width: 63%;
    }

    .span i {
       
    }

    .span1 i {
      
    }

    .span2 i {
      
    }
}

@media only screen and (max-width: 1024px) {
    .wrap {
        width: 79%;
    }

    .contact_form input {
        width: 70%;
        padding: 10px 14px;
    }

    .span i {
      
        padding: 13px 14px;
    }

    .span1 i {
     
        padding: 13px 14px;
    }

    .span2 i {
   
        padding: 13px 14px;
    }

    .checkbox {
        margin-right: 0px;
    }
}

@media only screen and (max-width: 800px) {
    .wrap {
        width: 95%;
    }

    .span i {
        padding: 14px 12px;
      
    }

    .span1 i {
     
        padding: 13px 20px;
    }

    .span2 i {
       
        padding: 13px 20px;
    }

    .contact_form {
       
    }

    .forgot {
        width: 40%;
        float: left;
        margin-top: 0;
    }

    .checkbox {
        margin-right: 0px;
    }
}

@media only screen and (max-width: 640px) {
    .wrap {
        width: 95%;
    }

    .contact-form h1 {
    font-family: 'Open Sans';
	font-size:22px;
    color: #474646;
    }

    .contact_form li {
        height: 37px;
        margin-top: 7.3%;
    }

    .contact_form input {
        font-size: 1em;
        padding: 10px 14px;
    }

    .contact_form input[type="submit"] {
        font-size: 1.2em;
        padding: 10px;
        margin: 22px 0 30px;
        background: #3CB5EF;
    }

    .forgot a {
        font-size: 1em;
    }

    .span i {
        padding: 11px 6px;
   
    }
	
	.span img, .span1 img, .span2 img  {
    display:none;
    }

    .span img {
        padding: 2px;
    }

    .span1 img {
        padding: 2px;
    }

    .span1 i {
        padding: 11px 6px;
  
    }

    .span2 img {
        padding: 2px;
    }

    .span2 i {
        padding: 11px 6px;
    
    }

    .contact_form {
       
    }

    .forgot {
        width: 39%;
        margin-top: 0;
        float: left;
    }

    .account h2 a {
        font-size: 0.9em;
    }

    .checkbox i {
        bottom: 10px;
    }

}

@media only screen and (max-width: 480px) {
    .wrap {
        width: 56%;
    }

    .contact_form {
        width: 100%;
        background: none;
    }

    .contact_form li {
        width: 99.5%;
    }

    .contact_form input[type="submit"] {
        width: 100%;
        margin: 22px 0 13px;
        background: #3CB5EF;
    }

    .forgot {
        width: 82%;
        margin-top: 0;
        float: left;
    }

    .account {
        width: 100%;
    }

    .account h2 a {
        text-align: left;
        margin-top: 15px;
    }

    .span {
        margin-top: 3.4%;
    }

    .form_hint {
        font-size: 0.8em;
        padding: 6px 5px;
        right: -128px;
        bottom: 6px;
    }

    .form_hint::before {
        bottom: 5px;
    }

    .checkbox i {
        bottom: 34px;
    }

    .footer p {
        font-size: 1.1em;
    }
}

@media only screen and (max-width: 320px) {
    .wrap {
        width: 85%;
    }

    .contact_form {
        width: 100%;
        background: none;
    }

    .contact_form li {
        width: 99.5%;
    }

    .contact_form input[type="submit"] {
        width: 100%;
        margin: 22px 0 13px;
        background: #3CB5EF;
    }

    .forgot {
        width: 82%;
        margin-top: 0;
        float: left;
    }

    .account {
        width: 100%;
    }

    .account h2 a {
        text-align: left;
        margin-top: 15px;
    }

    .span {
        margin-top: 3.4%;
    }

    .form_hint {
        font-size: 0.8em;
        padding: 6px 5px;
        right: -128px;
        bottom: 6px;
    }

    .form_hint::before {
        bottom: 5px;
    }

    .checkbox i {
        bottom: 34px;
    }

    .footer p {
        font-size: 1em;
    }
}