@font-face {
	font-family: Kalameh;
	font-style: normal;
	font-weight: 900;
	src: url('/static/fonts/kalameh/WebFonts/_eot/KalamehWeb(FaNum)-Black.eot');
	src: url('/static/fonts/kalameh/WebFonts/_eot/KalamehWeb(FaNum)-Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('/static/fonts/kalameh/WebFonts/_Woff2/KalamehWeb(FaNum)-Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('/static/fonts/kalameh/WebFonts/_Woff/KalamehWeb(FaNum)-Black.woff') format('woff');
}



body{
    font-family: 'Kalameh' !important;
 
}



.login-page {
    width: 360px;

    margin: auto;
    
  }
  .form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    border-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    top: -10vh;
    
  }
  @media screen and (max-width: 980px) {
    
    .form{
      top: -30vh;
    }
    .myheader{
      display: none !important;
    }

  }
  .form input {

    outline: 0;
   
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: larger;
    letter-spacing: 10px;
    border-color: #8a8a8a;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    display: flex;
    justify-content: center;
  }



  .form button {
 
    text-transform: uppercase;
    outline: 0;
    background: #4CAF50;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
    border-radius: 10px;
  }
  .form button:hover,.form button:active,.form button:focus {
    background: #43A047;
  }
  .form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
  }
  .form .message a {
    color: #4CAF50;
    text-decoration: none;
  }
  .form .register-form {
    display: none;
  }
  .container {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0 auto;
  }
  .container:before, .container:after {
    content: "";
    display: block;
    clear: both;
  }
  .container .info {
    margin: 50px auto;
    text-align: center;
  }
  .container .info h1 {
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    
    color: #1a1a1a;
  }
  .container .info span {
    color: #4d4d4d;
    font-size: 12px;
  }
  .container .info span a {
    color: #000000;
    text-decoration: none;
  }
  .container .info span .fa {
    color: #EF3B3A;
  }
  body {
   


    -moz-osx-font-smoothing: grayscale;      
  }


  input[type="number"]::-moz-number-spinners {
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-moz-number-spinners {
  -webkit-appearance: none;
  appearance: textfield;
  margin: 0;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* Optional: remove any default spacing */
}



.success{
    border-color: #00aeff !important;
    border-width: 1px;
    border-style: solid;
    color: #006cd1;
}
























.context {
  width: 100%;
  position: absolute;
  top:50vh;
  
}

.context h1{
  text-align: center;
  color: #fff;
  font-size: 50px;
}


.area{
  background: #4e54c8;  
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
  width: 100%;
  height:100vh;
  
 
}

.circles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
  
}

.circles li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}


.circles li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7){
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10){
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}



@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }


  100%{

      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
  }

}