﻿html {
    position: relative;
    min-height: 100%;
    /*background: #f5f5f5;*/
}

body {
    background: #f5f5f5;
    font-family: 'Arimo', sans-serif;
    margin: 0;
    padding-bottom: 60px;
    overflow-x: hidden;
    color: #797979;
}

.separator {
    width: 100%;
    margin: 20px auto 15px;
    position: relative;
    height: 1px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0)scale(1,1);
}

    .separator:after {
        height: 1px;
        background: #e8e8e8;
        background: -moz-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.09) 35%,rgba(0,0,0,.09) 70%,rgba(0,0,0,0) 100%);
        background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(0,0,0,0)),color-stop(35%,rgba(0,0,0,.09)),color-stop(70%,rgba(0,0,0,.09)),color-stop(100%,rgba(0,0,0,0)));
        background: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.09) 35%,rgba(0,0,0,.09) 70%,rgba(0,0,0,0) 100%);
        background: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.09) 35%,rgba(0,0,0,.09) 70%,rgba(0,0,0,0) 100%);
        background: -ms-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,.09) 35%,rgba(0,0,0,.09) 70%,rgba(0,0,0,0) 100%);
        background: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.09) 35%,rgba(0,0,0,.09) 70%,rgba(0,0,0,0) 100%);
        position: absolute;
        bottom: -1px;
        content: "";
        width: 100%;
        left: 0;
    }

.separator-2, .separator-3 {
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    height: 1px;
}

    .separator-2:after, .separator-3:after {
        content: "";
        height: 1px;
        bottom: -1px;
        left: 0;
        width: 100%;
        position: absolute;
    }

    .separator-2:after {
        background: #d1d1d1;
        background: -moz-linear-gradient(left,rgba(0,0,0,.18) 0,rgba(0,0,0,.12) 35%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 100%);
        background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(0,0,0,.18)),color-stop(35%,rgba(0,0,0,.12)),color-stop(70%,rgba(0,0,0,.05)),color-stop(100%,rgba(0,0,0,0)));
        background: -webkit-linear-gradient(left,rgba(0,0,0,.18) 0,rgba(0,0,0,.12) 35%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 100%);
        background: -o-linear-gradient(left,rgba(0,0,0,.18) 0,rgba(0,0,0,.12) 35%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 100%);
        background: -ms-linear-gradient(left,rgba(0,0,0,.18) 0,rgba(0,0,0,.12) 35%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 100%);
        background: linear-gradient(to right,rgba(0,0,0,.18) 0,rgba(0,0,0,.12) 35%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 100%);
    }


@media (max-width: 991px) and (min-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 767px) {
    .logo span {
        display: none !important;
    }
}

.logo-box {
    margin-top: 30px;
}

    .logo-box img {
        display: block;
        margin: 0 auto;
    }

    .logo-box .logo {
        float: none;
        color: #435966 !important;
        font-size: 30px;
        letter-spacing: .06em;
        line-height: 46px;
        min-height: 0px;
        min-width: 0px;
        line-height: 65px;
        font-weight: 700;
        font-family: 'Roboto', sans-serif;
        width: 128px;
        display: block;
        margin: 0 auto;
    }

        .logo-box .logo span {
            color: #2196f3;
        }

            .logo-box .logo span span {
                color: #797979;
            }

.login-box {
    padding: 20px;
    background-color: #ffffff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin-bottom: 20px;
    border: 1px solid #e8e8e8;
}

.wrapper-page .login-box {
    margin: 30px auto;
    position: relative;
    max-width: 420px;
}

@media (min-width: 767px) {
    .wrapper-page .login-box {
        margin: 30px auto;
        position: relative;
        max-width: 480px;
    }

        .page-login .wrapper-page .login-box {
            max-width: 320px;
        }
}

@media (max-width: 479px) {
    .wrapper-page {
        padding-left: 15px;
    }
}
