@font-face {
    font-family: 'iranyekan';
    src: url('../fonts/iranyekanwebbold.ttf')format('truetype');
    src: url('../fonts/iranyekanweblight.ttf') format('truetype');
    src: url('../fonts/iranyekanwebregular.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
}
body {
background: #003145;
 margin: 0;
padding: 0;
}
      
      
img {
 display: block;
width: 100%;
}
      
.loginLogo{
  background-color: #003145;
  box-shadow: 0 8px 17px 18px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
  width: 80px;
  height: 80px;
  border: 8px solid #e4b044;
  padding: 40px;
  border-radius: 50%;
  z-index: 2;
  position: relative;
  top: -170px;
}

.mainboxinner{
  width: 520px;
    border-radius: 40px;
    border: 5px solid #e4b044;
    padding-top: 253px;
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 17px 18px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
}

h4{
  position: absolute;
  top: 90px;
  margin: auto;
  direction: rtl;
  color: #fff;
  font-family: iranyekan;
  width: 100%;
  display: block;
  text-align: center;
}

.BoxWindows{
    position: absolute;
    color: #fff;
    font-family: iranyekan;
    top: 47%;
    left: 65%;
    width: 130px;
    text-align: -webkit-center;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
  cursor: pointer;
}

.BoxWeb{
    position: absolute;
    color: #fff;
    font-family: iranyekan;
    top: 42%;
    left: 14%;
    transform: translate(-50%, -50%);
    width: 130px;
    text-align: -webkit-center;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
  cursor: pointer;
}

.ImgPic{
  width: 70%;
}

a{
  color: #fff;
    text-decoration: none;
    font-family: iranyekan;
}

.BoxWindows:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.BoxWeb:hover{
  -webkit-transform: scale(1.3);
	transform: scale(1.3);
}


/* effect-shine */
.effect-shine:hover a{
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}

/**/
@media (max-width: 580px) {
  .mainboxinner {
    width:355px;
  }
  h4{
    margin: 0 0 0 8%;
    font-size: 13px;
  }
  .BoxWindows {
    left: 58%;
  }
  .BoxWeb{
    left: 9%;
  }
}

.MainSection{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}