@font-face {
    font-family: 'BLotus';
    src: url('../fonts/BLotus.eot?#') format('eot'),  /* IE6–8 */
        url('../fonts/BLotus.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BLotus.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
    font-family: 'BRoya';
    src: url('../fonts/BRoya.eot?#') format('eot'),  /* IE6–8 */
        url('../fonts/BRoya.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BRoya.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@keyframes example {
    0%   {margin-top: 0px;}
    50%  {margin-top: 20px;}
    100% {margin-top: 0px;}
}

*,html,body{padding: 0;margin: 0px;direction: rtl;font-family: 'BRoya';}



#header{
    
    width: 100%;
    z-index: 1;
}

.background{
    position: absolute;
    top:0px;left: 0px;right: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#login{
    position: absolute;
    top: 0px;
    height: 100%;
    background-color: #000;
    width: 400px;
    overflow: hidden;
    display: none;
    z-index: 5
    
}

.overlay{
    position: absolute;
    top:0px;left: 0px;
    height: 100%;
     -webkit-filter: blur(6px); /* Safari */
    filter: blur(6px);
    opacity: 0.4;
    z-index: 0;
       
}
.login-show{
    background: #000;
    color: #fff;
    position: absolute;
    right:0px;top:400px;
    padding: 20px;
    z-index: 1000;
    text-decoration: none;
    outline: none;
    font-size: 18px;
    font-weight: 100;
    opacity: 0.8;
    display: none;
}
.login-close{
   z-index: 6;
   font-size: 48px;
   font-weight: lighter;
   position: absolute;
   top:0px;right:50px;
   text-decoration: none;
   color: #fff;
   opacity: 0.6;
}

.login-logo{
    width: 130px;
    margin-top: 80px;
    margin-right: 130px;
}

.field-container{
    position: relative;
    width: 90%;
    height: auto;
    text-align: center;
    margin-top: 0px;
    padding: 20px;
    z-index: 10;
    color: #fff;
}

.field-container input{
    text-align: center;
    display: block;
    width: 100%;
    height: 45px;
    z-index: 12;
    margin-top: 15px;
    font-size: 22px;
    border:none;
    border-bottom: 0.5px solid #fff;
    background-color: transparent;
    color: #fff;
    outline: none;
    opacity: 0.7;
}

.field-container button{
    position: absolute;
    font-size: 22px;
    background-color: #009cfc;
    border: none;
    width: 90%;
    display: block;
    margin-top: 70px;
    padding: 10px;
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
}

#CaptchaImage {
    position:absolute;
    width:100px;
    bottom:20px;
    left:20px;
    opacity:0.5;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

@media(max-height:520px) {
    .login-logo
    {
        display:none;
    }
}

@media(max-width:700px)
{
    #header
    {
        background:url(../images/m1.jpg) no-repeat;
        background-position:center;
        background-size:cover;
        height:1200px;
    }
    #login{
        opacity: 0.6;
        overflow:visible;
        height:600px;
        width:100%;
        position:fixed;
        
    }
    .background{
        display: none;
    }
    
    .overlay{
        display: none;
    }
}