/* 
    Document   : login
    Created on : 25.12.2013, 15:20:48
    Author     : mind
    Description:
        Purpose of the stylesheet follows.
*/

root {
    display: block;
}

body, h1, h2, h3, h4, p, ul, li, td {
    margin: 0px;
    padding: 0px;
}

@font-face {
    font-family: Micra_Normal_Astro;
    src: url('/css/fonts/Micra_Normal.eot'); /* IE9 */
    src: url('/css/fonts/Micra_Normal.eot?') format('eot'),  /* IE6-IE8 */
    url('/css/fonts/Micra_Normal.woff') format('woff'), /* Современные браузеры */
    url('/css/fonts/Micra_Normal.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/Micra_Normal.svg#svgGraublauweb') format('svg'); /* iOS */
}

body {
    font-family: Micra_Normal_Astro, Arial, Verdana, sans-serif;
    overflow: auto;
    background: url('/img/login/bck.jpg')  no-repeat; 
    background-size: cover;
    background-color: #000000;
    background-position: top 65px center;
}

.parallax-viewport {
    /* Тут не указана ширина, так как все слои в моём примере имеют одинаковую width и height*/
    position: relative;
    margin: 0px auto;
}
.parallax-layer {
    /* Обязательное позиционирование для каждой картинки */
    position: absolute;
}

.site_wrap {
    /*   max-width:48rem;
       min-width:292px;
       width:100%;
       position: absolute;
       left: 0px;
       top: 0px;*/

    width: 100%;
    position: relative;
    margin: 0px auto;
}

/*Лендинг страница*/
.lback {
    width: 100%;
    height: 100%;
    /*margin-top: 10px;*/
    /*margin-left: 10px;*/
    background: url("/img/login/bck.jpg") no-repeat transparent;
    background-size: 100% 100%;
}

.content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 1000;
    color: #fff;
    padding:0px 0px 0px 0px;
    /*background-color: #00d000;*/
}

.login {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    position: relative;
    z-index: 200;
}

.login div, .lform div {
    position: absolute;
}

.login .llogo {
    width: 800px;
    height: 221px;
    background: url("/img/login/logo.png") no-repeat transparent;
    top: 80px;
    left: 155px;
    z-index: 100;
}

.login .llogo2 {
    width: 406px;
    height: 155px;
    background: url("/img/login/LOGOsm.png") no-repeat transparent;
    top: 100px;
    left: -173px;
    z-index: 100;
    margin-left: 50%;
}

div a {
    display: block;
    width: 100%;
    height: 100%;
}

.login .chars {
    width: 320px;
    height: 634px;
    top: 140px;
    left: -30px;
    z-index: 90;
}

.login .some {
    width: 419px;
    height: 500px;
    background: url("/img/login/astik_ship.png") no-repeat transparent;
    top: 210px;
    right: -30px;
    z-index: 80;
}

.login .fbody {
    width: 565px;
    height: 351px;
    background: url("/img/login/login_slot.png") no-repeat transparent;
    top: 280px;
    left: 270px;
    z-index: 100;
}

.login .aratog {
    width: 182px;
    height: 20px;
    bottom: 35px;
    left: 480px;
    background: url("/img/login/Aratog_logo.png") no-repeat transparent;
}

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

input[type="text"], input[type="password"] {
    width: 225px;
    height: 40px;
    background: url("/img/login/input1.png") no-repeat transparent;
    border: 0px transparent none;
    padding-left: 20px;
    padding-right: 20px;
    font-family: Arial;
    font-size: 24px;
    color: #fff;
    outline: none;
}

.b1, .b2 {
    display: block;
    /* position: absolute; */
    left: 227px;
}

.b1.error, .b2.error {
    background: url("/img/login/input2.png") no-repeat transparent;
}

.b1 {
    top: 110px;
}

.b2 {
    top: 165px;
}

.fbody .title {
    font-size: 22px;
    /*    position: absolute;
        top:40px;
        left: 80px;*/
    width: 90%;
    text-align: center;
    position: relative;
    margin: 40px auto 0px auto;
    color: white;
}

.fbody .label {
    font-family: Arial;
    font-size: 14px;
    /* position: absolute; */
    color: white;
}

.fbody .label.l1 {
    right: 350px;
    top: 125px;
}

.fbody .label.l2 {
    right: 350px;
    top:180px;
}

.fbody .label.l3 {
    right: 240px;
    top:220px;
    color: #00CCFF;
}

.fbody .label.l4 {
    right: 80px;
    top:220px;
}

.rm {
    color: #00CCFF;
}

.rm:hover {
    color: white;
    text-decoration: none;
}


.play {
    display: block;
    /* position: absolute; */
    border: 0px transparent none;
    height: 58px;
    background: url("/img/login/btn1.png") no-repeat transparent;
    bottom: 40px;
    cursor: pointer;
    background-position: left 0px bottom 0px;
    z-index: 10;
    color: white;
    font-size: 18px;
    text-align: right;
    line-height: 58px;
}

.play:hover{
    background-position: left 0px top 0px;
}

.play a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.play.en, .play.reg {
    width: 161px;
    padding: 0px 30px 0px 10px;
    left: 55px;
}

.play.reg {
    width: 171px;
    text-align: center;
    font-size: 15px;
    /*font-weight: bold;*/
    padding-right: 15px;
    padding-left: 15px;
    background: url("/img/login/btn1_grn.png") no-repeat transparent;
    background-position: left 0px bottom 0px;
}

.play.reg:hover {
    background-position: left 0px top 0px;
}

.play.ru {
    width: 161px;
    padding: 0px 30px 0px 10px;
    left: 305px;
    font-size: 15px;
}

.play div.icon {
    width: 30px;
    height: 30px;
    background-color: #00FF00;
    /* position: absolute; */
    left: 25px;
    top: 15px;
}

.play div.icon.ru {
    background: url("/img/login/russia.png") no-repeat transparent;
}

.play div.icon.en {
    background: url("/img/login/usa.png") no-repeat transparent;
}

.play div.icon.de {
    background: url("/img/login/de.png") no-repeat transparent;
}

.play div.icon.tr {
    background: url("/img/login/tr.png") no-repeat transparent;
}

.play.hidden {
    /*display: none;*/
    color: grey;
    cursor: none;
}

.play.hidden:hover {
    background-position: left 0px top 0px;
}






.login-box {
    width: 565px;
    top: 280px;
    left: 270px;
    z-index: 100;
    margin-left: 50%;
    left: -252px;
}

.login-box .header {
    height: 81px;
    background: url('/img/login/form/header.png') center top no-repeat;
    width: 100%;
    font-size: 22px;
    text-align: center;
    position: relative;
    color: white;
    box-sizing: border-box;
    line-height: 100px;
}

.login-box .content {
    background: url('/img/login/form/bg.png') center top repeat-y !important;
    position: relative;
    padding-top: 30px;
}

.login-box  .quarantine{
    padding:10px;
    height:100%;
    width:90%;
    text-align: center;
    position:relative;
    padding-left:30px
}

.login-box .footer {
    height: 118px;
    background: url('/img/login/form/footer.png') center bottom no-repeat;
    width: 100%;
    font-size: 22px;
    text-align: center;
    position: relative;
    line-height: 100px;
    color: white;
    box-sizing: border-box;
}

.login-box .line.line-small {
    height: 22px;
}

.login-box .line.line-small .left {
    line-height: 22px;
}

.login-box .line.line-hugh {
    height: 49px;
}

.login-box .line.line-hugh .left {
    line-height: 49px;
}

.login-box .line.line-last {
    margin-bottom: 0px;
}

.login-box .line {
    display: block;
    position: relative;
    width: 100%;
    height: 42px;
    margin-bottom: 14px;
}

.login-box .line .left {
    float: left;
    position: relative;
    font-family: Arial;
    font-size: 14px;
    color: white;
    text-align: right;
    width: 210px;
    padding-right: 14px;
    box-sizing: border-box;
    line-height: 42px;
}

.login-box .line .right {
    float: right;
    position: relative;
    text-align: left;
    width: 337px;
}

.login-box .line .clear {
    clear: both;
    float: none;
}

.login-box .checkbox {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('/img/login/box.png') no-repeat transparent;
    cursor: pointer;
    float: left;
}

.login-box .checkbox div.checked {
    display: block;
    width: 20px;
    height: 18px;
    background: url("/img/login/box_OK.png") no-repeat transparent;
    position: absolute;
    top: 1px;
    left: 4px;
}

.login-box .checkbox div.checked.hidden {
    display: none;
}

.login-box a {
    width: auto;
    display: inline-block;
}

.rm {
    font-family: Arial;
    font-size: 14px;
    color: #00CCFF;
    line-height: 22px;
    display: inline-block;
    float: left;
    width: 145px;
    position: relative !important;
}

div.rm {
    color: #00CCFF !important;
}

a.rm:hover {
    color: white;
    text-decoration: none;
}

@media screen and (max-height: 1000px) {
    .login .llogo2 {
        top: 100px;
    }
    .login-box {
        top: 260px;
    }
}