@font-face {
  font-family : yekan ;
  src: url(Yekan.ttf);
}
@font-face {
  font-family: Byek;
  src: url('YekanBakh.ttf'); 
}
h1{
   font-family: Byek !important;
}
*{
  margin: 0px;
  padding: 0px;
}
body{
  direction: rtl;
  font-family: yekan;
}
label{
  display: block;
  margin-top: 10px;
}
input{
  width: 385px;
  height: 40px;
  border: 1px solid #000;
  padding-right: 15px;
  font-family: yekan;
}
input[type=radio]{
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  display: inline;
}
button{
  width: 400px;
  height: 40px;
  background-color: #000;
  color: #fff;
  border: 0px;
  margin-top: 20px;
  cursor: pointer;
  font-family: yekan;
  text-align: center;
}
h1{
  color:#00ff00 ;
  position: relative;
  right:30px;
}
.main{
  width: 400px;
  min-height: 500px;
  margin: auto;
  margin-top: 10px;
}
.red{
  background-color: #f00;
}
.green{
  background-color: #00ff00;
  font-weight: bold;
}
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  width: 100% !important; /* Set a default minimum width */
  height: 30px;;
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #f00; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  right:0px;/* Center the snackbar */
  top: 0px; /* 30px from the bottom */
   font-family: yekan !important;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 0px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 0px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 0px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 0px; opacity: 1;}
  to {top: 0; opacity: 0;}
}
.second{
  width: 400px;
  height: 500px;
  position: fixed;
  top: 30px;
  right: 36%;
  display: none;
}
.third{
  width: 400px;
  height: 500px;
  position: fixed;
  top: 30px;
  right: 36%;
  display: none;
}
@media screen and (max-width: 600px) {
	button{
  width: 95%;
  height: 40px;
  background-color: #000;
  color: #fff;
  border: 0px;
  margin-top: 20px;
  cursor: pointer;
  font-family: yekan;
  text-align: center;
	margin-right: 10px;
}
input{
  width: 90%;
  border: #000 solid 1%;
  position: relative;
  right: 10px;
}
label{
	margin-right: 10px;;
}
#snackbar {
    visibility: hidden;
    width: 100%;
    background-color: #f00;
    color: #fff;
    text-align: center;
    position: fixed;
	top: 0px;
	right:-30px;
    z-index: 1;
    font-family: yekan !important;
	line-height: 30px;
}
.second{
  width: 400px;
  height: 400px;
  position: fixed;
  top: 30px;
  right: 10%;
  }
  .third{
  width: 400px;
  height: 400px;
  position: fixed;
  top: 30px;
  right: 10%;
    }
.main{
		width:95% !important;
		margin-top: 10px;
	}
h1{
  font-family: yekan;
  color:#00ff00 ;
  margin-right: 85px;
  margin-top:20px;
  position: static;
	}
 }