@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/Vazir-Thin-FD-WOL.eot");
  src: url("../fonts/Vazir-Thin-FD-WOL.woff") format("woff"),
    url("../fonts/Vazir-Thin-FD-WOL.ttf") format("ttf"),
    url("../fonts/Vazir-Thin-FD-WOL.woff2") format("woff2");
}

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Vazir-Light-FD-WOL.eot");
  src: url("../fonts/VVazir-Light-FD-WOL.woff") format("woff"),
    url("../fonts/Vazir-Light-FD-WOL.ttf") format("ttf"),
    url("../fonts/Vazir-Light-FD-WOL.woff2") format("woff2");
}

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Vazir-Medium-FD-WOL.eot");
  src: url("../fonts/Vazir-Medium-FD-WOLwoff") format("woff"),
    url("../fonts/Vazir-Medium-FD-WOL.ttf") format("ttf"),
    url("../fonts/Vazir-Medium-FD-WOL.woff2") format("woff2");
}

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 950;
  src: url("../fonts/Vazir-Bold-FD-WOL.eot");
  src: url("../fonts/Vazir-Bold-FD-WOL.woff") format("woff"),
    url("../fonts/Vazir-Bold-FD-WOL.ttf") format("ttf"),
    url("../fonts/Vazir-Bold-FD-WOL.woff2") format("woff2");
}

.MathJax_Display {
    text-align: left !important;
}

#map {
	height: 760px;
	width: 100%;
}

body {
	padding: 5px; 
	margin: 5px; 
    background: lavender;
	font-family: vazir;
}

pre {
	overflow-x: auto;
}

.bttn {
	background: RGB(212, 255, 158);
	font-family: vazir;
	font-size: 18px;
	box-shadow: 2px 5px #888888;
	border-radius: 4px 4px 4px 4px;
}

.code {
	font-family: Courier, Roboto, Times New Roman, Georgia;
	direction: ltr;
	text-align: center;
}

input {
	font-family: vazir;
	font-size: 18px;
}

a:hover {
  filter: brightness(150%);
}

.banner {
	background:rgb(180, 200, 250);
	padding-top: 15px;
	padding-bottom: 10px;
	padding-right: 15%;
	padding-left: 15%;
    	border-radius: 10px 10px 0 0;
	text-align: center;
	display: flex;
}

.bannerleft {
	width: 25%;
	display: inline-block;
}

.bannermiddle {
	width: 50%;
	display: inline-block;
}

.bannerright {
	width: 25%;
	display: inline-block;
}

.bannerleftcell {
	color:salmon;
	padding-top: 10px;
	text-align: center;
	font-size: 54px;
	text-shadow: 4px 4px #888888;
}

.bannermiddlecell {
	color:White;
	padding-top: 10px;
	text-align: center;
	font-size: 42px;
	text-shadow: 4px 4px #888888;
}

.bannerrightcell {
	color:salmon;
	text-align: center;
	font-size: 64px;
	text-shadow: 4px 4px #888888;
}

.panel {
	background: salmon;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	display: flex;
	border-radius: 10px 10px 10px 10px;
	font-size: 24px;
	box-shadow: 5px 10px #888888;
}

.panelitem {
	width: 10%;
	display: inline-block;
	text-align: center;
}

.lan {
	background:salmon;
	padding-top: 10px;
	padding-bottom: 10px;
    padding-right: 15%;
	padding-left: 15%;
	text-align: center;
	display: flex;
	border-radius: 10px 10px 10px 10px;
	font-size: 24px;
	box-shadow: 5px 10px #888888;
}

.lanitem {
	width: 20%;
	display: inline-block;
	text-align: center;
}

.contentpanel {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	padding-right: 15%;
	padding-left: 15%;
	background: rgb(180, 200, 250);
	display: block;
}

.contentlan {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	padding-right: 15%;
	padding-left: 15%;
	background: rgb(180, 200, 250);
	display: none;
}

.content {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	padding-right: 15%;
	padding-left: 15%;
	background: rgb(180, 200, 250);
}

.content2 {
	padding-right: 15%;
	padding-left: 15%;
	background: rgb(180, 200, 250);
	border-radius: 0 0 10px 10px;
}

.title {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: green;
}

.container {
	padding: 20px;
	border-radius: 20px 20px 20px 20px;
	background: #EAEEE9;
	box-shadow: 5px 10px #888888;
	font-size: 16px;
}

.container2 {
	padding: 20px;
	border-radius: 20px 20px 20px 20px;
	background: #EAEEE9;
	box-shadow: 5px 10px #888888;
	font-size: 20px;
}

.multiple {
	display: flex;
}

.option {
	display: inline-block; 
	width: 25%; 
	overflow: auto;
}

.poemcontainer {
	display: flex;
}

.poemfa1 {
	display: inline-block; 
	width: 50%;
	font-size: 20px;
}

.poemen1 {
	display: inline-block; 
	width: 50%;
	font-family: Verdana, Arial, Times New Roman;
	font-size: 18px;
	line-height:215%;
}

.linkshead {
	font-size: 24px;
    padding-right: 15%;
	padding-left: 15%;
	display: block;
}

.links {
	font-size: 20px;
    padding-right: 15%;
	padding-left: 15%;
	display: flex;
}

.linksdiv {
	width: 50%;
	display: inline-block;
}

.linkscontent {
	display: flex;
}

.linkscell {
	width: 50%;
	display: inline-block;
}

.footer {
	background:salmon;
	color:white;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 15%;
	padding-left: 15%;
    text-align:center;
    border-radius: 10px 10px 10px 10px;
	display: block;
	box-shadow: 5px 10px #888888;
}

.footercontainer {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 2px;
	display: block;
	text-align:center;
	font-size: 22px;
}

.picture1 {
	width: 450px;
	height: auto;
}

.picture2 {
	width: 200px;
	height: auto;
}

.picture3 {
	width: 200px;
	height: auto;
	box-shadow: 5px 10px #888888;
	border-radius: 10px 10px 10px 10px;
}

.audio {
	width: 90%; 
	max-width:100%; 
	border:5px; 
	box-shadow: 2.5px 5px #888888; 
	border-radius: 10px 10px 10px 10px;
}

#C2 {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	-column-count: 2;
}

#C3 {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	-column-count: 3;
}

#C4 {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	-column-count: 4;
}

.mtable{
	background-color:#e5e5e5;
	border-spacing:2px 2px;
	width:98%;
	font-weight: bold;
	border-radius: 20px 20px 20px 20px;
	box-shadow: 5px 10px #888888;
}

/* Style the image container */
.image-container {
  position: relative;
  max-width: 100%;
  width: 500px;
  direction: ltr;
}

/* Hide the images by default */
.myImages {
  display: none;
}

/* Add a button to slide images */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Position the "next button" to the left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.animated-div {
      position: absolute;
      animation: move-left-to-right 7s linear infinite;
}

@keyframes move-left-to-right {
      0% {
        transform: translateX(-280%);
      }
      100% {
        transform: translateX(40%);
      }
}

.div0 {
	display: flex; 
	font-size: 120%; 
	font-weight: bold; 
	color: Green; 
	min-height: 20px;"
}

.div1 {
      animation-delay: 0s;
}

.div2 {
      animation-delay: 1s;
}

.div3 {
      animation-delay: 2s;
	color: white;
}

.div4 {
      animation-delay: 3s;
}

.div5 {
      animation-delay: 4s;
}

.divs {
	width: 20%; 
	display: inline-block; 
	text-align: center;
}

.divTime0 {
	width: 100%; 
	display: flex; 
	font-size: 120%; 
	font-weight: bold; 
	color: White;
}

.divTime1 {
	width: 33%; 
	display: inline-block; 
	text-align: center;
}

.divTime2 {
	width: 34%; 
	display: inline-block; 
	text-align: center;
}

.divTime3 {
	width: 33%; 
	display: inline-block; 
	text-align: center;
}

.thumbnail {
	word-wrap: break-word; 
	white-space: nowrap; 
	overflow: auto; 
	text-overflow: ellipsis;
}	

@media only screen and (max-width: 480px) {
	#map {
		height: 416px;
		width: 260px;
	}

	@keyframes move-left-to-right {
      		0% {
        		transform: translateX(-150%);
     		}
      		100% {
        	transform: translateX(220%);
		}
	}

	.div0 {
		font-size: 80%;
	}
	
	.bttn {
		font-size: 16px;
	}
	
	.banner {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 0%;
		padding-left: 0%;
		display: block;
	}

	.bannerleft {
		width: 100%;
		display: block;
	}

	.bannermiddle {
		width: 100%;
		display: block;
	}

	.bannerright {
		width: 100%;
		display: block;
	}

	.bannerleftcell {
        display: none;
	}

	.bannermiddlecell {
		font-size: 18px;
	}

	.bannerrightcell {
		font-size: 40px;
	}
	
	.lan{
		padding-right: 0%;
		padding-left: 0%;
		font-size: 16px;
		display: flex;
	}
	
	.contentpanel {
		display: none;
	}
	
	.contentlan {
		font-size: 16px;
		padding-right: 4%;
		padding-left: 4%;
		display: block;
	}

	.content {
		font-size: 16px;
		padding-right: 4%;
		padding-left: 4%;
	}
	
	.content2 {
		padding-right: 4%;
		padding-left: 4%;
	}
	
    .title {
        font-size: 18px;
    }
	
	.container {
		padding: 5px;
		font-size: 14px;
	}
	
	.container2 {
		font-size: 16px;
	}
	
	.poemcontainer {
		display: block;
	}

	.poemfa1 {
		display: block; 
		width: 100%;
		font-size: 16px;
	}

	.poemen1 {
		display: block; 
		width: 100%;
		font-size: 14px;
		line-height:120%;
	}

    .linkshead {
		font-size: 16px;
        padding-right: 4%;
		padding-left: 4%;
	}

	.links {
		font-size: 16px;
        padding-right: 4%;
		padding-left: 4%;
		display: block;
	}

	.linksdiv {
		width: 100%;
		display: block;
	}

	.linkscontent {
		display: block;
	}

	.linkscell {
		width: 100%;
		display: block;
	}

	.footer {
		padding-right: 4%;
		padding-left: 4%;
		display: block;
	}

	.footercontainer {
		font-size: 12px;
	}

	.picture1 {
		width: 200px;
	}

	.picture2 {
		width: 120px;
	}
	
	.picture3 {
		width: 250px;
	}
    
    #C2 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		-column-count: 1;
	}

	#C3 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		-column-count: 1;
	}
	
	#C4 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		-column-count: 1;
	}
	
	.image-container {
		width: 100%;
	}
}

@media only screen and (min-width:481px) and (max-width: 767px) {
	#map {
		height: 640px;
		width: 400px;
	}

	@keyframes move-left-to-right {
      		0% {
        		transform: translateX(-150%);
     		}
      		100% {
        	transform: translateX(220%);
		}
	}

	.div0 {
		font-size: 100%;
	}
	
	.banner {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 2%;
		padding-left: 2%;
		display: block;
	}
	
	.bannerleft {
		width: 100%;
		display: block;
	}

	.bannermiddle {
		width: 100%;
		display: block;
	}

	.bannerright {
		width: 100%;
		display: block;
	}

	.bannerleftcell {
        display: none;
	}

	.bannermiddlecell {
		font-size: 22px;
	}

	.bannerrightcell{
		font-size: 42px;
	}

    .lan{
		padding-right: 2%;
		padding-left: 2%;
		font-size: 16px;
		display: flex;
	}
	
	.contentpanel {
		display: none;
	}
	
	.contentlan {
		font-size: 16px;
		padding-right: 7%;
		padding-left: 7%;
		display: block;
	}

	.content {
		font-size: 16px;
		padding-right: 7%;
		padding-left: 7%;
	}
	
	.content2 {
		padding-right: 7%;
		padding-left: 7%;
	}
	
    .title {
        font-size: 18px;
    }
	
	.container {
		font-size: 12px;
	}
	
	.container2 {
		font-size: 16px;
	}
	
	.poemcontainer {
		display: block;
	}

	.poemfa1 {
		display: block; 
		width: 100%;
		font-size: 18px;
	}

	.poemen1 {
		display: block; 
		width: 100%;
		font-size: 16px;
		line-height:120%;
	}

    .linkshead {
		font-size: 18px;
        padding-right: 7%;
		padding-left: 7%;
	}

	.links {
		font-size: 18px;
        padding-right: 7%;
		padding-left: 7%;
		display: block;
	}

	.linksdiv {
		width: 100%;
		display: block;
	}

	.linkscontent {
		width: 100%;
	}

	.linkscell {
		width: 100%;
	}

	.footer {
		padding-right: 7%;
		padding-left: 7%;
		display: block;
	}

	.footercontainer {
		font-size: 14px;
	}
	
	.picture1 {
		width: 250px;
	}

	.picture2 {
		width: 140px;
	}
	
	.picture3 {
		width: 180px;
	}

	#C3 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		-column-count: 1;
	}
	
	#C4 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-column-count: 2;
	}
	
	.image-container {
		width: 100%;
	}

}

@media only screen and (min-width:768px) and (max-width: 991px) {
	#map {
		height: 400px;
		width: 640px;
	}

	@keyframes move-left-to-right {
      		0% {
        		transform: translateX(-200%);
     		}
      		100% {
        	transform: translateX(40%);
		}
	}
	
	.banner {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 5%;
		padding-left: 5%;
	}

	.bannerleftcell {
		font-size: 32px;
	}

	.bannermiddlecell {
		font-size: 28px;
	}

	.bannerrightcell{
		font-size: 44px;
	}
	
	.panel {
		padding-right: 4%;
		padding-left: 4%;
		font-size: 16px;
	}

    .lan{
		padding-right: 5%;
		padding-left: 5%;
		font-size: 18px;
	}

	.contentpanel {
		font-size: 16px;
		padding-right: 4%;
		padding-left: 4%;
		display: block;
	}
	
	.contentlan {
		font-size: 16px;
		padding-right: 4%;
		padding-left: 4%;
		display: none;
	}
	
	.content {
		font-size: 16px;
		padding-right: 4%;
		padding-left: 4%;
	}
	
	.content2 {
		padding-right: 4%;
		padding-left: 4%;
	}
	
    .title {
        font-size: 20px;
    }
	
	.container {
		font-size: 14px;
	}
	
	.container2 {
		font-size: 16px;
	}

	.poemfa1 {
		font-size: 16px;
	}

	.poemen1 {
		font-size: 14px;
		line-height:220%;
	}

    .linkshead {
		font-size: 18px;
        padding-right: 4%;
		padding-left: 4%;
	}

	.links {
		font-size: 18px;
        padding-right: 4%;
		padding-left: 4%;
		display: block;
	}

	.linksdiv {
		width: 100%;
		display: block;
	}

	.linkscontent {
		width: 100%;
	}

	.linkscell {
		width: 100%;
	}
	
	.lan {
		padding-top: 5px;
	}

	.footer {
		padding-right: 10%;
		padding-left: 10%;
	}

	.footercontainer {
		font-size: 18px;
	}
	
	.picture1 {
		width: 300px;
	}

	.picture2 {
		width: 160px;
	}
	
	.picture3 {
		width: 180px;
	}
	
	#C4 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-column-count: 2;
	}
	
	.image-container {
		width: 80%;
	}

}

@media only screen and (min-width:992px) and (max-width: 1600px) {
	#map {
		height: 540px;
		width: 864px;
	}
	
	@keyframes move-left-to-right {
      		0% {
        		transform: translateX(-250%);
     		}
      		100% {
        	transform: translateX(40%);
		}
	}
	
	.banner {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 10%;
		padding-left: 10%;
	}

	.bannerleftcell {
		font-size: 38px;
	}

	.bannermiddlecell {
		font-size: 32px;
	}

	.bannerrightcell{
		font-size: 48px;
	}
	
	.panel {
		padding-right: 4%;
		padding-left: 4%;
		font-size: 20px;
	}

    .lan{
		padding-right: 10%;
		padding-left: 10%;
		font-size: 18px;
	}
	
	.contentpanel {
		padding-right: 4%;
		padding-left: 4%;
        font-size: 18px;
		display: block;
	}
	
	.contentlan {
		padding-right: 4%;
		padding-left: 4%;
        font-size: 18px;
		display: none;
	}

	.content {
		padding-right: 4%;
		padding-left: 4%;
        font-size: 18px;
	}
	
	.content2 {
		padding-right: 4%;
		padding-left: 4%;
	}
	
    .title {
        font-size: 22px;
    }
	
	.container {
		font-size: 14px;
	}
	
	.container2 {
		font-size: 18px;
	}

    .linkshead {
		font-size: 18px;
        padding-right: 4%;
		padding-left: 4%;
	}

	.links {
        padding-right: 4%;
		padding-left: 4%;
		font-size: 18px;
	}

	.lan {
		padding-top: 5px;
	}

	.footercontainer {
		font-size: 18px;
	}

	.picture1 {
		width: 400px;
	}

	.picture2 {
		width: 180px;
	}
	
	.picture3 {
		width: 180px;
	}
}