@import url(themes/roboto.css);

* {
    margin: 0;
    padding: 0
}

.Co_Name {
    display: block;
    position: relative;
    right: 15px;
    bottom: -7px
}

    .Co_Name img {
        height: 35px
    }

.pd07 {
    padding-top: 7px !important
}

.wrapdemo {
    height: 440px !important
}

.content-btn {
    padding: 0 !important
}

.dash-div h2 {
    margin: 23px 0 20px 0;
    color: #0a508c;
    font-size: 18px;
    text-transform: uppercase
}

.loginForm {
    border-bottom: 1px solid #ccc
}

    .loginForm:first-child {
        border-top: 1px solid #ccc
    }

.log-Form {
    padding: 5px 30px;
    width: 100%;
    background: #fff;
    border: 0
}

    .log-Form:focus {
        outline: 0
    }

    .log-Form .glyph-icon {
        float: left;
        position: relative;
        top: 4px
    }

        .log-Form .glyph-icon:before {
            font-size: 23px;
            color: red
        }

    .log-Form .flaticon-reading:before {
        color: red
    }

    .log-Form span {
        float: left;
        padding: 6px 10px;
        font-size: 16px
    }

html {
    box-sizing: border-box
}

*, :after, :before {
    margin: 0;
    padding: 0;
    box-sizing: inherit
}

a {
    color: #666;
    text-decoration: none
}

    a:hover {
        color: #4fda8c
    }

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #e2dcdc;
    opacity: 1
}


.login .alert-danger {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
}


body {
    position: relative;
    color: #666;
    font-size: 16px;
    text-align: center;
    height: 100%;
    overflow: auto;
    font-family: Raleway,sans-serif;
    background: url('../../Content/images/eduscolbg.png') no-repeat center;
    background-attachment: fixed;
    background-size: cover
}

.herobutton-back {
    background-color: #165b95 !important;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 7px 20px;
    transition: all .5s;
    cursor: pointer;
    margin: 5px 0 10px 0;
    display: inline-block;
    border-radius: 0;
    text-transform: uppercase;
    width: 100%;
    border: 1px solid #478cc6
}

    .herobutton-back:hover {
        color: #fff;
        background-color: #004884 !important
    }



.herobutton {
    background-color: #1c71b9;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding: 7px 20px;
    transition: all .5s;
    cursor: pointer;
    margin: 5px 0 10px 0;
    display: inline-block;
    border-radius: 20px;
    width: 100%;
    text-transform: uppercase
}

    .herobutton:focus {
        outline: 0
    }

    .herobutton:hover {
        color: #fff;
        background-color: #0159a5
    }

    .herobutton span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: .5s
    }

        .herobutton span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: -2px;
            right: -20px;
            transition: .5s
        }

    .herobutton:hover span {
        padding-right: 15px
    }

        .herobutton:hover span:after {
            opacity: 1;
            right: 0
        }

#loader {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: #f9f9f9
}

    #loader img {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 488px;
        height: 300px;
        margin: auto
    }

.m_powerd {
    display: none
}

.form-control:focus {
    border-color: #66afe900;
    border-bottom-color: rgba(102,175,233,0);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px transparent,0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px transparent,0 0 8px rgba(102,175,233,0);
    border-bottom: 2px solid #909090;
    border: 1px solid #ffffff6e;
    border-left: 2px solid #f89522;
    border-bottom: 0 solid #adbcc7;
    color: #000;
    box-shadow: 0 0 10px #adbcc7
}

.alert-error {
    color: red;
    border-color: #ebccd100;
    padding: 0 2px;
    font-size: 10px;
    margin: 0;
    float: left;
    line-height: normal
}

.alert-success {
    color: #060;
    background-color: #fff;
    border-color: #ebccd100;
    padding: 0 10px;
    font-size: 12px;
    margin: 0
}

#alert-close {
    top: 3px !important;
    right: 0 !important
}

::placeholder {
    color: #000
}

:-ms-input-placeholder {
    color: #000
}

::-ms-input-placeholder {
    color: #000
}

.form-control {
    margin-bottom: 16px;
    display: block;
    width: 100%;
    height: 38px;
    border: 1px solid rgba(142,181,140,0);
    padding: 9px 12px 9px 30px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-image: none;
    border-bottom: 1px solid rgba(60,95,122,.4196078431372549);
    border-radius: 0;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 1px transparent
}

a.button {
    position: absolute;
    left: 20px;
    top: 20px;
    height: auto;
    padding: .8rem 1rem;
    font-size: .8rem;
    line-height: normal;
    text-transform: uppercase;
    font-family: 'Proxima Nova',sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 0;
    border: 1px solid #2d515c;
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

    a.button:hover {
        border-color: #2d515c;
        color: #fff;
        padding: 1rem 3.2rem
    }

@media only screen and (min-width:22em) {
    a.button {
        padding: 1rem 2.8rem;
        font-size: 1rem
    }
}

.box-icon {
    display: inline-block;
    position: absolute;
    margin: 3px 0 0 23px;
    font-size: 18px
}

    .box-icon > i {
        color: #1c71b9 !important
    }

.login {
    margin: 0;
    width: 100%;
    height: 100%
}

.wrap {
    overflow: hidden;
    box-shadow: 7px 7px 6px rgba(111,111,111,.23);
    border: 2px solid #4c63776b;
    border-radius:20px;
    position: fixed;
    top: -90px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 324px;
    height: 390px;
    margin: auto;
    background:#fff;
}

    .wrap:after {
        content: "";
        display: table;
        clear: both
    }

.logo {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 50px;
    height: 40px;
    background: #d9edf7;
    margin: 0 auto
}

    .logo img {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 40px
    }

    .logo a {
        width: 100%;
        height: 100%;
        display: block
    }

.user {
    border: 0 solid #444;
    background: #fff
}

    .user .actions {
        margin: 1em 0 0;
        padding-right: 10px;
        width: 100%;
        display: block;
        text-align: center
    }

        .user .actions a {
            margin: 1em 0;
            width: 90px;
            display: inline-block;
            padding: .2em 0;
            background-color: #5c6576;
            border: none;
            color: #999;
            cursor: pointer;
            text-align: center;
            font-size: .8em;
            border-radius: 30px 0 0 30px;
            -webkit-box-shadow: 0 0 27px -9px rgba(0,0,0,.75);
            -moz-box-shadow: 0 0 27px -9px rgba(0,0,0,.75);
            box-shadow: 0 0 27px -9px rgba(0,0,0,.75)
        }

            .user .actions a:last-child {
                color: #fff;
                border-radius: 0 30px 30px 0;
                background-color: #28a55f;
                background: -moz-linear-gradient(270deg,#69ddc9 0,#4ec1b6 100%);
                background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#69ddc9),color-stop(100%,#4ec1b6));
                background: -webkit-linear-gradient(270deg,#69ddc9 0,#4ec1b6 100%);
                background: linear-gradient(180deg,#69ddc9 0,#4ec1b6 100%)
            }

@keyframes show_terms {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-110%);
        -moz-transform: translateY(-110%);
        -o-transform: translateY(-110%);
        transform: translateY(-110%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes hide_terms {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-110%);
        -moz-transform: translateY(-110%);
        -o-transform: translateY(-110%);
        transform: translateY(-110%);
        opacity: 0
    }
}

.recovery, .terms {
    position: absolute;
    z-index: 3;
    margin: 40px 0 0;
    padding: 30px 16px;
    height: calc(100% - 40px);
    border-radius: 0;
    background: #fff;
    text-align: left;
    overflow: auto;
    will-change: transform;
    -webkit-transform: translateY(-110%);
    -moz-transform: translateY(-110%);
    -o-transform: translateY(-110%);
    transform: translateY(-110%);
    opacity: 0;
    border-radius: 0
}

    .recovery h2, .terms {
        color: #000;
        font-size: 18px;
        margin: 0;
        font-weight: 300
    }

.Recovery_input {
    font-size: 13px;
    width: 100%;
    padding: 5px 10px;
    color: #333;
    border: 1px solid #cbc1c1;
    margin: 10px 0
}

.Recovery_button {
    background: #4caf50;
    padding: 4px 20px;
    border: 2px solid #fff;
    border-radius: 5px;
    margin-top: 7px;
    float: right
}

    .Recovery_button:hover {
        background: #378a3a
    }

#divFrm {
    color: #050404;
    font-size: 18px;
    font-weight: 400
}

#divBody {
    background: #fff;
    padding: 5px 10px;
    font-size: 15px;
    color: #000;
    margin-top: 20px
}

    #divBody .radio-button {
        position: relative;
        top: 2px;
        margin-left: 10px
    }

.recovery.open, .terms.open {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    animation: show_terms .5s .2s 1 ease normal forwards
}

.recovery.closed, .terms.closed {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    animation: hide_terms .6s .2s 1 ease normal forwards
}

.recovery p, .terms p {
    margin: 7px 0;
    font-size: 12px;
    color: #000
}

    .recovery p strong, .terms p {
        color: #000;
        font-weight: 500;
        background: rgba(255,255,255,.19);
        padding: 2px 8px;
        font-size: 12px;
        border-radius: 50px;
        line-height: 24px
    }

.recovery h3, .terms h3 {
    margin: 2em 0 .2em
}

.terms p.small {
    margin: 0 0 1.5em;
    font-size: .8em
}

.recovery form .input {
    margin: 0 0 .8em 0;
    padding: .8em 2em 10px 0;
    width: 100%;
    display: inline-block;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #5a6374;
    outline: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    color: #666
}

.recovery form .button {
    margin: 1em 0;
    padding: .2em 3em;
    width: auto;
    display: block;
    background-color: #28a55f;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: .8em;
    border-radius: 0;
    background: #3eb5a9 0
}

.form-wrap form .button:hover {
    background-color: #4fda8c
}

.recovery p.mssg {
    opacity: 0;
    -webkit-transition: opacity 1s .5s ease;
    -moz-transition: opacity 1s .5s ease;
    -o-transition: opacity 1s .5s ease;
    transition: opacity 1s .5s ease
}

    .recovery p.mssg.animate {
        opacity: 1
    }

.content {
    position: fixed;
    z-index: 1;
    float: none;
    margin: 0 auto;
    width: 100%;
    height: 40px;
    background: #86fbff;
    overflow: hidden;
    border-right: 1px solid #fff
}

#toggle-wrap {
    position: absolute;
    z-index: 4;
    top: 40px;
    right: 17px;
    width: 80px;
    height: 1px
}

#toggle-terms span {
    background: #fff;
    border-radius: 0
}

#toggle-terms {
    position: absolute;
    z-index: 4;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    margin: auto;
    display: block;
    cursor: pointer;
    background: rgb(231 9 60 / 55%);
    border-radius: 100%;
    opacity: 0;
    -webkit-transform: translate(-6px,20px);
    -moz-transform: translate(-6px,20px);
    -o-transform: translate(-6px,20px);
    transform: translate(-6px,20px)
}

    #toggle-terms:after {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        border-radius: 50%;
        content: '';
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box
    }

    #toggle-terms:before {
        speak: none;
        display: block;
        -webkit-font-smoothing: antialiased
    }

#toggle-terms {
    box-shadow: 0 0 0 0 rgba(0,0,0,.2);
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease
}

    #toggle-terms:after {
        top: 0;
        left: 0;
        padding: 0;
        z-index: -1;
        background: rgba(0,0,0,.2);
        -webkit-transition: -webkit-transform .2s,opacity .3s;
        -moz-transition: -moz-transform .2s,opacity .3s;
        -o-transition: -o-transform .2s,opacity .3s;
        transition: transform .2s,opacity .3s
    }

    #toggle-terms.closed {
        color: rgba(0,0,0,.2)
    }

        #toggle-terms.closed:after {
            -webkit-transform: scale(1.6);
            -moz-transform: scale(1.6);
            -ms-transform: scale(1.6);
            transform: scale(1.6);
            opacity: 0
        }

@keyframes show_close {
    0% {
        opacity: 0;
        -webkit-transform: translate(-6px,-100px);
        -moz-transform: translate(-6px,-100px);
        -o-transform: translate(-6px,-100px);
        transform: translate(-6px,-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(-6px,20px);
        -moz-transform: translate(-6px,20px);
        -o-transform: translate(-6px,20px);
        transform: translate(-6px,20px)
    }
}

@keyframes hide_close {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

#toggle-terms.open {
    animation: show_close .4s .5s 1 ease normal forwards
}

#toggle-terms.closed {
    animation: hide_close .2s 0s 1 ease normal forwards
}

#toggle-terms:hover {
    background: #1c71b9
}

#toggle-terms #cross {
    position: absolute;
    z-index: 4;
    height: 80%;
    width: 80%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0)
}

#toggle-terms.open #cross {
    -webkit-transition-delay: .9s;
    -moz-transition-delay: .9s;
    -o-transition-delay: .9s;
    transition-delay: .9s;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

    #toggle-terms.open #cross span {
        position: absolute;
        z-index: 4;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
        -o-transition-duration: 0s;
        transition-duration: 0s
    }

        #toggle-terms.open #cross span:nth-child(1) {
            top: 15%;
            left: 17px;
            height: 74%;
            width: 1px
        }

        #toggle-terms.open #cross span:nth-child(2) {
            left: 34%;
            top: 12px;
            width: 73%;
            height: 1px
        }

#toggle-terms #cross span:nth-child(1) {
    height: 0;
    -webkit-transition-delay: .625s;
    -moz-transition-delay: .625s;
    -o-transition-delay: .625s;
    transition-delay: .625s
}

#toggle-terms #cross span:nth-child(2) {
    width: 0;
    -webkit-transition-delay: .375s;
    -moz-transition-delay: .375s;
    -o-transition-delay: .375s;
    transition-delay: .375s
}

#slideshow {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 10px 0 0 10px
}

    #slideshow h2 {
        margin: 0 auto 0 auto;
        text-align: center;
        font-size: 16px;
        color: #000;
        line-height: .5em
    }

    #slideshow p {
        color: #000;
        display: none;
        font-size: 14px;
        font-weight: 700
    }

        #slideshow p img {
            width: 256px;
            margin-bottom: 36px;
            margin-top: 40px
        }

    #slideshow div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1em 1em;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover
    }

    #slideshow .one {
        background-image: url("../images/dots.png");
        background-repeat: no-repeat;
        background-position: 0 50%
    }

    #slideshow .two {
        background-image: url("../images/gears.png");
        background-repeat: no-repeat;
        background-position: 0 50%
    }

    #slideshow .three {
        background-image: url("../images/splat.png");
        background-repeat: no-repeat;
        background-position: 0 5%
    }

    #slideshow .four {
        background-image: url("../images/ray.png");
        background-repeat: no-repeat;
        background-position: 0 50%
    }

input {
    font: 16px/26px Raleway,sans-serif
}

.form-wrap {
    width: 100%;
    margin: 2em auto 0
}

    .form-wrap a {
        color: #1c71b9;
        margin: 0;
        font-size: 13px;
        text-decoration: none;
        display: block;
        float: right;
        cursor: pointer
    }

        .form-wrap a:hover {
            color: #07345a
        }

.pretty {
    margin-right: 0 !important
}

.term {
    padding: 10px 30px 0 0;
    text-align: right
}

    .term > a {
        color: #5b5b5d;
        font-size: 10px;
        text-align: center;
        text-decoration: none;
        border-right: 1px solid #ccc;
        padding: 0 4px
    }

        .term > a:last-child {
            border-right: none
        }

        .term > a:hover {
            color: #1c71b9;
            text-decoration: none
        }

        .term > a:visited {
            color: #1c71b9;
            text-decoration: none
        }

        .term > a:active {
            color: #07345a;
            text-decoration: none
        }

.form-wrap .tabs {
    overflow: hidden
}

    .form-wrap .tabs img {
        width: auto;
        height: 50px
    }

    .form-wrap .tabs * {
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out
    }

    .form-wrap .tabs h3 {
        color: #000;
        font-weight: 700;
        margin: 0 auto;
        text-shadow: 1px 1px 0 #fff;
        font-size: 14px;
        padding-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 190px
    }

        .form-wrap .tabs h3 a {
            padding: .5em 0;
            text-align: center;
            font-weight: 400;
            display: block;
            color: #999;
            border: 0
        }

            .form-wrap .tabs h3 a.active {
                color: #ccc
            }

                .form-wrap .tabs h3 a.active span {
                    padding-bottom: 4px;
                    border-bottom: 1px solid #5fd1c1
                }

.form-wrap .tabs-content {
    padding: 10px 20px;
    text-align: left;
    width: auto
}

.help-action {
    font-size: 13px;
    margin-bottom: 5px;
    color: #2879bd;
    text-align: right
}

    .help-action p {
        margin: 0
    }

.form-wrap .tabs-content div[id$=tab-content] {
    display: none
}

.form-wrap .tabs-content .active {
    display: block !important
}

.form-wrap form .input {
    margin: 0 0 10px 0;
    padding: 4px 35px;
    width: auto;
    border: 2px solid #fff;
    display: block;
    background-color: #e91e63;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    border-radius: 30px;
    border-radius: 5px;
    float: right
}

.modal-header {
    padding: 0;
    border-bottom: 0
}

.form-wrap form .button {
    margin: 0 0 10px 0;
    padding: 4px 35px;
    width: auto;
    border: 2px solid #fff;
    display: block;
    background-color: #e91e63;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    border-radius: 30px;
    border-radius: 5px;
    float: right
}

    .form-wrap form .button:hover {
        background-color: #b1003c
    }

.form-wrap form .checkbox {
    margin: 1em 0;
    padding: 20px;
    visibility: hidden;
    text-align: left
}

    .form-wrap form .checkbox:checked + label:after {
        opacity: 1
    }

.form-wrap form label[for] {
    position: relative;
    padding-left: 20px;
    cursor: pointer
}

    .form-wrap form label[for]:before {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 0;
        left: -14px;
        content: '';
        border: 1px solid #5a6374
    }

    .form-wrap form label[for]:after {
        position: absolute;
        top: 1px;
        left: -10px;
        width: 15px;
        height: 8px;
        opacity: 0;
        content: '';
        background-color: transparent;
        border: solid #67dac6;
        border-width: 0 0 3px 3px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

.form-wrap .help-text {
    margin-top: .6em
}

    .form-wrap .help-text p {
        text-align: left;
        font-size: 14px
    }

.fa {
    display: none
}

@media only screen and (min-width:768px) {
    .logo {
        top: 30px;
        left: 0;
        width: 90px;
        height: 40px;
        background: 0 0;
        margin: 0 auto;
        right: 0
    }


        .logo img {
            width: 100%
        }

    @keyframes show_close {
        0% {
            opacity: 0;
            -webkit-transform: translate(-6px,-100px);
            -moz-transform: translate(-6px,-100px);
            -o-transform: translate(-6px,-100px);
            transform: translate(-6px,-100px)
        }

        100% {
            opacity: 1;
            -webkit-transform: translate(-6px,18px);
            -moz-transform: translate(-6px,18px);
            -o-transform: translate(-6px,18px);
            transform: translate(-6px,18px)
        }
    }

    #toggle-wrap {
        top: 0;
        height: 80px;
        overflow: hidden
    }

        #toggle-wrap.closed {
            width: 50%
        }

    #toggle-terms {
        opacity: 1;
        -webkit-transform: translate(-6px,-100px);
        -moz-transform: translate(-6px,-100px);
        -o-transform: translate(-6px,-100px);
        transform: translate(-6px,-100px)
    }

        #toggle-terms.closed {
            opacity: 1;
            -webkit-transform: translate(-6px,18px);
            -moz-transform: translate(-6px,18px);
            -o-transform: translate(-6px,18px);
            transform: translate(-6px,18px)
        }

    #slideshow h2 {
        margin: 60px 0 10px;
        font-size: 2em
    }

        #slideshow h2 span {
            font-size: 20px;
            line-height: 32px
        }

    #slideshow p {
        display: block
    }

    #slideshow div {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto;
        background-size: auto
    }

    #slideshow .one {
        background-position: 50% 130%
    }

    #slideshow .two {
        background-position: 50% 200%
    }

        #slideshow .two a {
            color: #000;
            text-decoration: none
        }

            #slideshow .two a:hover {
                color: #e91e63
            }

    #slideshow .three {
        background-position: 50% 300%
    }

    #slideshow .four {
        background-position: -40% -80%
    }

    .content, .content.full {
        position: relative;
        float: left;
        width: 50%;
        height: 500px;
        -webkit-box-shadow: -3px 0 45px -6px rgba(56,75,99,.61);
        -moz-box-shadow: -3px 0 45px -6px rgba(56,75,99,.61);
        box-shadow: -3px 0 45px -6px rgba(56,75,99,.61);
        border-radius: 10px 0 0 10px
    }

    .recovery, .terms {
        position: absolute;
        right: 0;
        height: 420px;
        float: left;
        margin: 0 0 0;
        -webkit-box-shadow: -3px 0 45px -6px rgba(56,75,99,.61);
        -moz-box-shadow: -3px 0 45px -6px rgba(56,75,99,.61);
        box-shadow: -3px 0 45px -6px rgba(56,75,99,.61);
        border-radius: 0 0 0 0
    }

    .user {
        height: 380px;
        margin: 0 !important
    }

        .user .actions {
            margin: 0;
            text-align: right
        }
}

.form-wrap {
    width: 100%;
    margin: 0 auto 0;
    padding-top: 20px
}

@media only screen and (max-width:767px) {
    .form-wrap {
        padding-top: 0
    }

    body {
        background: url('../../Content/images/meduscolbg.png') no-repeat center;
        background-attachment:fixed;
        background-size:cover;
    }

}

.error {
    margin: 0;
    position: fixed;
    top: -394px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 324px;
    height: 20px;
    margin: auto;
    color: #e30a15;
    font-size: 12px
}

.error1 {
    margin: 0;
    position: fixed;
    top: -510px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 324px;
    height: 20px;
    margin: auto;
    color: #e30a15;
    font-size: 12px
}

.tabs-content p {
    position: relative
}

.tabs-content .fa {
    position: absolute;
    top: 8px;
    left: -16px;
    display: block;
    font-size: .8em;
    text-shadow: 1px 1px 0 #fff;
    color: #000;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition: transform .3s .3s ease,opacity .6s 0s ease;
    -moz-transition: transform .3s .3s ease,opacity .6s 0s ease;
    -o-transition: transform .3s .3s ease,opacity .6s 0s ease;
    transition: transform .3s .3s ease,opacity .6s 0s ease
}

    .tabs-content .fa.active {
        -webkit-transform: translate(-3px,0);
        -moz-transform: translate(-3px,0);
        -o-transform: translate(-3px,0);
        transform: translate(-3px,0);
        opacity: .8
    }

    .tabs-content .fa.inactive {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
        opacity: .3
    }

@media only screen and (min-device-width :768px) and (max-device-width :1024px) {
    .wrap {
        width: 100%;
        height: 360px
    }

    .content, .content.full {
        height: 430px
    }

    .recovery, .terms {
        height: 490px
    }

    #slideshow h2 {
        font-size: 24px;
        line-height: normal;
        font-weight: 600;
        margin: 60px 0 0 0;
        color: #022b28
    }

    #slideshow .four {
        background-position: -82% -330%
    }

    .user {
        height: 430px
    }

    .form-wrap {
        margin: 20px auto 0
    }

        .form-wrap .tabs-content {
            padding: 1.2em 4.9em
        }

    .error {
        top: -394px
    }

    .error1 {
        top: -440px
    }
}

.element {
    opacity: 0;
    transform: scale(.95) translate3d(0,100%,0);
    transition: transform .4s ease,opacity .4s ease
}

    .element.active {
        opacity: 1;
        transform: scale(1) translate3d(0,0,0)
    }

    .element.inactive {
        opacity: 0;
        transform: scale(1) translate3d(0,0,0)
    }

@media only screen and (min-device-width :768px) and (max-device-width :1024px) {
    .form-wrap a {
        font-size: 14px
    }

    .form-wrap .tabs-content {
        padding: 1.5em 1em
    }

    .m_powerd {
        display: block;
        font-size: 12px
    }

        .m_powerd a {
            font-size: 12px
        }

    .form-wrap .tabs img {
        width: auto;
        margin-top: 20px
    }

    .form-wrap .tabs h3 {
        font-size: 18px
    }

    .form-wrap form .button {
        float: none !important;
        margin: 0 auto !important;
        margin-bottom: 10px !important
    }

    .user {
        margin: 120px 10px
    }
}

.pretty input[disabled] ~ * {
    opacity: .7
}

.vison {
    font-size: 12px;
    margin-top: 15px;
    color: #1b32bb
}

@media only screen and (max-width :1024px) {
    .wrapdemo {
        height: 440px !important
    }

    .recovery, .terms {
        margin: 0 0 0;
        height: 440px
    }

    #toggle-wrap {
        top: 0
    }

    .wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 324px;
        height: 400px;
        margin: auto;
        box-shadow: 7px 7px 6px rgba(111,111,111,0);
        border: 2px solid #4c63776b;
        background-color: #fff;
    }

    #loader img {
        width: 218px;
        height: 140px
    }
}