@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  a.logo img{
    width: 100%;
  }
}

    .agent-logo{
        display: block;
        margin: 30px auto;
    }

    #login-form{
        width: 550px;
        max-width: 90%;
        overflow: hidden;
        margin: 20px auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 3px;
    }
    #login-form input[type="email"],
    #login-form input[type="password"]{
        border: 1px solid #efefef;
        margin-top: 5px;
        color: #686868;
    }

    a.agent-forgot,
    a.agent-forgot:visited{
        text-align: left;
        color: #b1d83a;
        line-height: 3;
    }

    #login-form h1 {
        color: #fff;
        font-size: 2.2em;
        margin-bottom: 10px;
        text-align: center;
    }
    #login-form > p {
        color: #fff;
        text-align: center;
        margin-bottom: 25px;
        font-size: 1.3em;
    }

    body {
        background-color: #253d55;
        /* background-image: url(https://www.textplode.com/assets/img/hero-city.png); */
        background-position: bottom center;
        background-repeat: repeat-x;
        background-size: initial;
        padding: 0 0 20px 0;
    }

    header {
        display: none;
    }

    .logo {
        display: block;
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 10;
        max-width: 300px;
    }

    a.cornerbtn.btn {
        position: absolute;
        top: 30px;
        background: #fff;
        right: 30px;
        color: #253e55;
        z-index: 10;
        height: 40px;
        line-height: 40px;
    }

    #bg {
        display: none;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        background-image: url(https://www.textplode.com/assets/img/pricing-hero2.jpg);
        background-size: cover;
        background-position: center;
        -moz-filter: contrast(1.1) grayscale(100%) brightness(1.2);
        -webkit-filter: contrast(1.1) grayscale(100%) brightness(1.2);
        filter: contrast(1.1) grayscale(100%) brightness(1.2);
    }
    #bg:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,0);
        background-image: url(https://www.textplode.com/assets/img/pattern.png);
        opacity: 0.5;
    }
    #form {
        /*position: absolute;
        top: 45%;
        left: 50%;*/
        width: 700px;
        max-width: 90%;
        margin: 0 auto;
        padding: 100px 0 50px 0;
        /*-webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        overflow: hidden;*/
        overflow: hidden;
    }
    #form h1 {
        color: #fff;
        font-size: 2.2em;
        margin-bottom: 10px;
        text-align: center;
    }
    #form > p {
        color: #fff;
        text-align: center;
        margin-bottom: 25px;
        font-size: 1.3em;
    }
    #form .man {
        display: block;
        margin: 0 auto -26px auto;
        width: 100%;
        display: none !important;
    }
    #form .man.success {
        display: none;
    }
    #form.manthumbsup .man { display: none; }
    #form.manthumbsup .man.success { display: block; }

    #form form {
        background: #fff;
        padding: 34px 30px 30px 30px;
        margin: 0 auto;
        max-width: 450px;
    }
    #form form label {
        margin-bottom: 6px;
        display: block;
        display: none;
    }
    #form form input[type="text"],
    #form form input[type="email"],
    #form form input[type="password"],
    #form form select {
        background-color: #eee;
    }
    #form form select {
       color: #a9a9a9;
    }
    #form form input[type="text"].error,
    #form form input[type="email"].error,
    #form form input[type="password"].error,
    #form form select.error {
        border: 1px solid #ca1515;
    }
    #form form input[type="submit"] {
        width: 100%;
        margin-bottom: 25px;
        -webkit-appearance: none;
        color: #fff;
    }
    #form form input+.error,
    #form form select+.error {
        display: block;
        margin-top: 4px;
        font-size: .8em;
        color: #ca1515;
        margin-bottom: -3px;
        font-weight: 400;
        display: none !important;
    }
    #form .btn {
        width: 100%;
        margin-top: 25px;
        -webkit-appearance: none;
        color: #fff;
    }
    #form form a {
        color: #B1B1B1;
    }
    #form form a+a {
        text-align: right;
    }
    #form form a.forgot {
        white-space: nowrap;
    }
    #form form a.login {
        display: block;
        text-align: center;
    }
    #form form .namefield .unit-50:first-child {
        padding-right: 6px;
    }
    #form form .namefield .unit-50:last-child {
        padding-left: 6px;
    }

    #form .message {
        padding: 18px;
        background: #F9F9F9;
        text-align: center;
        /* position: absolute; */
        top: 196px;
        /* width: 75%; */
        border-radius: 3px;
        /* left: 56.25px; */
        border: none;
        cursor: pointer;
        margin-bottom: 10px;
        display: block;
        text-align: center;
    }
    #form .message:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 12.5px 20px 12.5px;
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF rgba(0, 0, 0, 0);
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -12.5px;
        margin-bottom: -1px;
    }
    #form .message p {
        margin-top: 8px;
    }
    #form .message p:first-child {
        margin-top: 0;
    }


    /*#form .message+form {
        margin-top: -1px;
    }*/


    .clouds {
        /* bottom: 200px; */
        left: 0;
        /*padding-top: 50px;*/
        position: absolute;
        /* right: 0; */
        top: 0;
        opacity: .12;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        max-width: 100%;
        overflow: hidden;
    }

    /* KEYFRAMES */

    @-webkit-keyframes animateCloud {
        0% {
            margin-left: -1000px;
        }
        100% {
            margin-left: 100%;
        }
    }

    @-moz-keyframes animateCloud {
        0% {
            margin-left: -1000px;
        }
        100% {
            margin-left: 100%;
        }
    }

    @keyframes animateCloud {
        0% {
            margin-left: -1000px;
        }
        100% {
            margin-left: 100%;
        }
    }

    /* ANIMATIONS */

    .x1 {
        top: 10%;
        left: 70%;
        position: absolute;
        -webkit-animation: animateCloud 85s linear infinite;
        -moz-animation: animateCloud 85s linear infinite;
        animation: animateCloud 85s linear infinite;

        -webkit-transform: scale(0.65);
        -moz-transform: scale(0.65);
        transform: scale(0.65);
    }

    .x2 {
        top: 30%;
        left: 120%;
        position: absolute;
        -webkit-animation: animateCloud 70s linear infinite;
        -moz-animation: animateCloud 70s linear infinite;
        animation: animateCloud 70s linear infinite;

        -webkit-transform: scale(0.3);
        -moz-transform: scale(0.3);
        transform: scale(0.3);
    }

    .x3 {
        top: 50%;
        left: 100%;
        position: absolute;
        -webkit-animation: animateCloud 80s linear infinite;
        -moz-animation: animateCloud 80s linear infinite;
        animation: animateCloud 80s linear infinite;

        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        transform: scale(0.5);
    }

    .x4 {
        top: 80%;
        left: 70%;
        position: absolute;
        -webkit-animation: animateCloud 68s linear infinite;
        -moz-animation: animateCloud 68s linear infinite;
        animation: animateCloud 68s linear infinite;

        -webkit-transform: scale(0.4);
        -moz-transform: scale(0.4);
        transform: scale(0.4);
    }

    .x5 {
        top: 90%;
        left: 140%;
        position: absolute;
        -webkit-animation: animateCloud 65s linear infinite;
        -moz-animation: animateCloud 65s linear infinite;
        animation: animateCloud 65s linear infinite;

        -webkit-transform: scale(0.55);
        -moz-transform: scale(0.55);
        transform: scale(0.55);
    }

    .clouds_two .x1 {
        left: 20%;
    }
    .clouds_two .x2 {
        left: 70%;
    }
    .clouds_two .x3 {
        left: 50%;
    }
    .clouds_two .x4 {
        left: 20%;
    }
    .clouds_two .x5 {
        left: 90%;
    }

    /* OBJECTS */

    .cloud {
        background: #fff;
        background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
        background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
        background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
        background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
        background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );

        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;

    /*    -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    */
        height: 120px;
        position: relative;
        width: 350px;
        opacity: .4;
    }

    .cloud:after, .cloud:before {
        background: #fff;
        content: '';
        position: absolute;
        z-indeX: -1;
    }

    .cloud:after {
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;

        height: 100px;
        left: 50px;
        top: -50px;
        width: 100px;
    }

    .cloud:before {
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        border-radius: 200px;

        width: 180px;
        height: 180px;
        right: 50px;
        top: -90px;
    }

    #form.fourofour {
        text-align: center;
    }
    #form.fourofour .man {
        margin-bottom: 0;
    }
    #form.fourofour h1 {
        font-size: 11em;
        color: #F3764A;
    }
    #form.fourofour .btn {
        width: 40%;
    }

.affiliate-logo {
    // position: absolute;
    // bottom: 40px;
    // left: 50%;
    // transform: translate(-50%);
    text-align: center;
}

.affiliate-logo img{
    max-width: 250px;
}

.affiliate-logo p {
    margin: 20px 0 10px 0;
    color: #fff;
}

@media only screen and (max-width: 768px) {

    #form {
        top: 43%;
    }
    #form .man {
        width: 80%;
        margin-bottom: -16px;
    }

}

@media only screen and (max-width: 767px) {

    body {
        padding-bottom: 40px;
    }

    #form form .namefield .unit-50:first-child,
    #form form .namefield .unit-50:last-child {
        padding: 0;
    }

    #form .message {
        right: 30px;
        left: 30px;
        width: auto;
        top: 156px;
    }

}

@media only screen and (max-width: 500px) {

    .logo {
        max-width: 230px;
    }
    #form {
        position: static;
        transform: none;
        -webkit-transform: none;
        margin: 0px auto 0 auto;
        padding-top: 105px;
    }
    #form h1 {
        font-size: 1.4em;
    }
    #form p {
        font-size: 1em;
    }
    #form form {
        padding: 29px 25px 25px 25px;
    }

    #form form .namefield .unit-50:first-child,
    #form form .units-row {
        margin-bottom: 19px;
    }
    #form .man {
        margin-bottom: -13px;
    }
}
@media only screen and (max-width: 425px) {

    body {
        background-position: center bottom -37px;
    }
    .logo {
        width: 100%;
        text-align: center;
        position: absolute;
        display: block;
        left: 0;
        max-width: 100%;
        top: 19px;
    }
    .logo img {
        display: inline-block;
        max-width: 90%;
    }
    a.cornerbtn.btn {
        display: none;
    }

}