@font-face{font-family: 'ly';font-style: normal;src: url("fonts/IRANYekanXVF.woff2") format("woff2");}


body {margin: 0;
     background-image: url("images/pttrn.jpg");
     background-attachment: fixed;
  background-repeat: repeat-xy;
direction:rtl;
}
	p, form, ul, li,h1,h2,h3 {margin: 0;padding: 0;}

	a {color:#555;text-decoration:none;cursor: pointer;}



ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	opacity: 0.7;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
font-family: ly;
		font-size:13px;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #5C393B;}
ul.topnav li a.active2 {background-color: #222;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}


.fch img{
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
    border-radius: 50%;
}


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
	z-index:10;
	display:none; 
	padding:8px 5px;
	width:250px; 
	line-height:16px;
	margin-top:125px;
	margin-right:-192px;
	position:absolute; 
	border-radius:4px;
}

a.tooltip:hover span{
	display:inline;
	color:#fff;
	font-family: ly;
	font-size:13px;
	background:#000;
    border: 1px solid #000;
	opacity: 0.8;
}
    a.tooltip span:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}


    a.tooltip img{
	width:110px;
	height:110px;
	margin-left: 7px;
	margin-left: 7px;
    border-radius: 50%;
}
    a.tooltip img:hover{
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}


.box {height:auto; width:fit-content; background:#111;margin-top:15px;border-bottom:3px solid #C8C8C8;border-radius:10px;color:#fff;padding:10px 30px 10px 30px ;line-height:16px;	opacity: 0.8;	font-family: ly;	line-height:40px; font-size:13px;}

.box a{
	color:#fff;
	text-align: center;    
	text-decoration: none;
	font-family: ly;
	font-size:12px;
	line-height:40px;
}

.box img{
max-width:90%;}


.text1 {
	color:#fff;
	text-align: center;    
	text-decoration: none;
	font-size:11px;
	font-family: tahoma;
	letter-spacing: 10px;
}

.text2 {
	color:#E1E1E1;
	text-align: center;    
	text-decoration: none;
	font-family: ly;
	font-size:13px;
}

.cover {
	color:#fff;
}

.cover img {
	width:270px; 
	height:270px;
    border-radius:100%;
    -webkit-animation:spin 80s linear infinite;
    -moz-animation:spin 80s linear infinite;
    animation:spin 80s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}



.frm{
    margin-top:10px;
    right:0;
    left:0;
}
.frm a{
    
      font-family:ly;  

    font-size:13px;

color:fff;

}

input[type=text] {
  width: 50%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #a7a7a7;
  border-radius: 4px;
  font-family:ly;  
    font-size:13px;
    text-align:center;
    background:#111;
color:fff;
	    outline: none;

}

input[type=submit] {
  background-color: #914768;
  border: none;
  color: white;
  padding: 9px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
      font-family:ly;

}
datalist {
  position: absolute;
  background-color: white;
  border: 1px solid blue;
  border-radius: 0 0 5px 5px;
  border-top: none;
  font-family: sans-serif;
  width: 350px;
  padding: 5px;
  max-height: 10rem;
  overflow-y: auto
  
}

option {
  background-color: white;
  padding: 4px;
  color: blue;
  margin-bottom: 1px;
   font-size: 18px;
  cursor: pointer;
}

option:hover,  .active{
  background-color: lightblue;
}

.org img{
	
	width:90%;
	height:90%;
	    border-radius: 7%;

}
.top img{
  max-width: 75%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
    border-radius: 7%;
	
}
.top img:hover{
			  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}
.org img:hover{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}


.boxy {height:auto;  background:#111;margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:100%;}


.boxy a{
	color:#fff;
padding-right:12px;
	text-decoration: none;
	font-family: ly;
	font-size:20px;
	line-height:28px;
	margin-bottom:10px;
}


.boxt {height:auto;  background:#111;margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;	opacity: 0.6;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:100%;}


.boxt a{
	color:#fff;
padding-right:12px;
	text-decoration: none;
	font-family: ly;
	font-size:20px;
	line-height:28px;
}



@media (min-width: 600px) {
.boxy img{
width: 500px;
	height : 500px;
	opacity: 1;
}}


@media (max-width: 550px) {
.boxy img{
width: 90%;
	height : 90%;
	opacity: 1;
}}


.boxt span a{
float:left;
	font-family: ly;
	font-size:13px;
	padding-left:12px;
	background:#fff;
	border-radius:6px;
	margin-left:20px;
	color:#0F0F0F;
}
	.dlbt8{background:#212121;color:#3E6B28;font-size:13px;margin-bottom:3px;
margin-top:10px;	display:block;	transition:.1s;opacity:1;	border-radius:5px;	padding-top:6px;min-height:30px;	font-family:ly;	width:50px;	height:24px;	text-align:center;margin:auto;
}


	.dlbt7{background:#212121;color:#E1E1E1;font-size:13px;
margin-top:10px;	margin-bottom:15px;display:block;	transition:.1s;opacity:1;	border-radius:5px;	padding-top:5px; min-height:40px;	font-family:ly;	width:400px;	max-width:60%;	text-align:center;margin:auto;
}


.boxa {height:auto;  background:#111;margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;	opacity: 0.7;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:95%; margin-right:10px;margin-left:10px;}
.boxbb {height:auto;  background:#ffffff;margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;	opacity: 0.7;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:95%; margin-right:10px;margin-left:10px;}

.adsresp{
font-family:ly;
color:#ffffff;}

.adsresp img{
	width: 90%;
	margin-top: 10px;
	max-width:1196px;
}



div.postads {
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  padding-top: 10px 25px 10px 25px;
  width:95%;
	border-radius: 7px;
	color:#fff;
opacity: 0.7;
}

.postads a{
  text-align: center;
    font-family:ly ;
	color:#fff;
}



.pgrid {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;

}

.pgrids {
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
 margin-bottom: 36px;
 margin-top: 10px;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 350px) {
  .pgrids { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 600px? 2 column */
@media (min-width: 700px) {
  .pgrids { grid-template-columns: repeat(3, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 1200px) {
  .pgrids { grid-template-columns: repeat(6, 1fr); }
}


.pgridss {
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
	  margin-bottom: 36px;
	 margin-top: 10px;

}

/* Screen larger than 600px? 2 column */
@media (min-width: 350px) {
  .pgridss { grid-template-columns: repeat(1, 1fr); }
}



/* Screen larger than 600px? 2 column */
@media (min-width: 700px) {
  .pgridss { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 1200px) {
  .pgridss { grid-template-columns: repeat(3, 1fr); }
}


.pgridsmall {
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
	  margin-bottom: 36px;

}

/* Screen larger than 600px? 2 column */
@media (min-width: 350px) {
  .pgridsmall { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 600px? 2 column */
@media (min-width: 500px) {
  .pgridsmall { grid-template-columns: repeat(4, 1fr); }
}


/* Screen larger than 600px? 2 column */
@media (min-width: 700px) {
  .pgridsmall { grid-template-columns: repeat(4, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .pgridsmall { grid-template-columns: repeat(8, 1fr); }
}



div.polaroid {
  background-color: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	  padding-top: 10px;
		height:100%;
		border-radius:10px;

}

div.container {
  text-align: center;
  padding: 10px 20px;
	font-family:ly;
	font-size:13px;
}



div.container span{
	color: #DE377A;
}
div.container h2{
		font-family:ly;
	font-size:14px;
	text-decoration:none;
	font-weight: normal;
}
div.container h3{
		font-family:ly;
	font-size:12px;
	color:#816094;
	text-decoration:none;
		font-weight: normal;

}

div.polaroidvip {
  background-color: #171717;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding-top: 10px;
	height: 100%;
		border-radius:10px;

}


div.containervip {
  text-align: center;
  padding: 10px 20px;
	font-family:ly;
	font-size:13px;
	color: #fff;
}
div.containervip h3{
		font-family:ly;
	font-size:13px;
	color:#816094;
	text-decoration:none;
		font-weight: normal;

}

div.containervip a{
	color: #dcdcdc;

}
div.containervip audio{
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  display: box;
  position: relative;
  width: 60px;
  height: 60px;
 background: rgb(64,64,64);
background: linear-gradient(110deg, rgba(64,64,64,1) 0%, rgba(27,27,27,1) 100%);   box-shadow: 0 4px 4px rgba(0, 0, 0, .3);
  border-radius: 50%;
  line-height: 80px;
  text-align: center;
  text-decoration: none;
  color: white;
		font-family:ly;
  cursor: pointer;
margin-bottom:24px;
	font-size: 22px;
}




.catgbox a{
display: inline-block; 	
	align-content;
	font-family: ly;
  font-size: 20px;
	border: 0px solid #555555;
	border-radius:5px;
        vertical-align: middle;	
	color:#ffffff;
	padding: 50px 10px 0px 10px;
	margin: 10px 10px 10px 10px;
	width: 120px;
	height: 80px;
 background: rgb(0,83,140);
background: linear-gradient(135deg, rgba(0,83,140,1) 0%, rgba(0,83,140,1) 35%, rgba(20,40,102,1) 100%); 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	opacity:0.8;
  transition: transform .2s; /* Animation */

}

.catgbox.a:col {
	 background: rgb(131,58,180);
background: linear-gradient(111deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
	  transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

	
.catgbox a:hover {
	 background: rgb(131,58,180);
background: linear-gradient(111deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
	  transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}



.boxb {height:auto;  
		
background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);	
	
	margin-top:15px;border-radius:10px;color:#fff;padding:10px 10px 10px 10px;line-height:16px;	opacity: 0.8;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:fit-content; margin-right:10px;margin-left:10px;}

.boxc {height:auto;  background:#4B9CD3;margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;	opacity: 0.7;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:95%; margin-right:10px;margin-left:10px;}


.boxtitle {height:auto;  background:#222;margin-top:15px;border-radius:10px;color:#fff;padding:10px 15px 10px 15px;line-height:16px;	opacity: 0.9;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:fit-content; margin:auto;}


.boxb p{
	color:#222;
	text-decoration: none;
	font-family: ly;
	font-size:22px;
	line-height:28px;
}

.boxtitle a{
	color:#fff;
	text-decoration: none;
	font-family: ly;
	font-size:20px;
	line-height:28px;
}

.boxtitle h1{
	color:#fff;
	text-decoration: none;
	font-family: ly;
	font-size:20px;
			font-weight: normal;

}
.boxtitle span a{
float:left;
	font-family: ly;
	font-size:13px;
	padding-left:12px;
	background:#fff;
	border-radius:6px;
	margin-left:20px;
	color:#0F0F0F;
			font-weight: normal;
}

.boxbs {height:auto;  background:#fff;margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;	opacity: 0.9;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:95%; margin-right:10px;margin-left:10px;}



@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}


audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: #000;
     color: #000;
     }

	.dlbt9{background:#212121;color:#3E6B28;font-size:13px; overflow: hidden;
	transition:.1s;opacity:1;	border-radius:5px;	padding-top:6px;min-height:30px;	font-family:ly;	width:90%;	height:24px;	text-align:center;
}

.boxsr {height:auto;  
	
 background:#AFDBF5;
	margin-top:15px;border-radius:10px;color:#fff;padding-top:10px;padding-bottom:10px;line-height:16px;font-family: ly;	line-height:28px; font-size:10px;margin-bottom:25px; width:95%; margin-right:10px;margin-left:10px; 	font-weight: normal; opacity:.7;
}


.boxd {height:auto;  
		
background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);	
	
	margin-top:15px;border-radius:10px;color:#fff;padding:10px 10px 10px 10px;line-height:16px;	opacity: 0.8;	font-family: ly;	line-height:28px; font-size:13px;margin-bottom:25px; width:fit-content; margin-right:10px;margin-left:10px;}



.boxn {
  width: 100%;

  display: grid;
  grid:
    "covern detailsn" 240px
    "buttonn listn" 1fr
    "barn ." 1fr
    / 300px auto;
  gap: 8px;
	
	background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);	
	margin-top:15px;
	border-radius:10px;
	color:#fff;
	padding:10px 10px 10px 10px;
	line-height:16px;
	opacity: 0.8;
	font-family: ly;
	line-height:28px;
	font-size:13px;
	margin-bottom:25px;
	margin-right:10px;
	margin-left:10px;
	
	
	
}

.covernn { grid-area: covern;	color:#fff;
 }

.covern img {
	width:270px; 
	height:Auto;
    border-radius:100%;
    -webkit-animation:spin 80s linear infinite;
    -moz-animation:spin 80s linear infinite;
    animation:spin 80s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}

.details { grid-area: detailsn; }
.button { grid-area: buttonn;float:left; }
.list { grid-area: listn; }
.barn { grid-area: barn; }



.boxtitle {
	height:auto;
	background:#222;
	margin-top:15px;
	border-radius:10px;
	color:#fff;
	padding:10px 15px 10px 15px;
	line-height:16px;
	opacity: 0.9;
	font-family: ly;
	line-height:28px;
	font-size:13px;
	margin-bottom:25px;
	width:fit-content; 
	float:left;
	margin-left:15px;

}


/**
 * CSS from the Layout Generator/Tool
 */
.container {
	width: 90%;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  gap: 1em 1em;
  grid-auto-flow: row;
  grid-template-areas:
    "headerx headerx"
    "sidebarx contentx"
    "footerx footerx";
}

.headerx { grid-area: headerx; }

.footerx { grid-area: footerx; }

.sidebarx { grid-area: sidebarx;
}

.contentx { grid-area: contentx;
width:300px;
	float:left;

}

/**
 * Custom CSS added here 
 */
body {

  padding: 1rem;
}
.container {
  max-width: 90%;
  height: calc(100vh - 3rem);
  margin: 0 auto;  
}
.container > * {
  display: grid;
  place-content: center;
  border-radius: 5px;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  box-shadow: 0 1px 6px 0 hsl(0, 0%, 0%, 20%);
}
.headerx, .footerx {
  color: hsl(22, 78%, 26%);
  background-color: hsl(48, 96%, 89%);
}
.contentx {
  color: hsl(177, 51%, 23%);
  background-color: hsl(177, 51%, 93%);
}
.sidebarx {
  color: hsl(177, 51%, 23%);
  background-color: hsl(177,51%, 82%);
	width: 100%;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto auto 60px;
    grid-template-areas:
      "headerx"
      "sidebarx"
      "contentx"
      "footerx";
  }
}



.pgrid {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;

}

.pgrids {
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
 margin-bottom: 36px;
 margin-top: 10px;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 350px) {
  .pgrids { grid-template-columns: repeat(2, 1fr); }
}



/* Screen larger than 600px? 2 column */
@media (min-width: 700px) {
  .pgrids { grid-template-columns: repeat(3, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 1200px) {
  .pgrids { grid-template-columns: repeat(6, 1fr); }
}


div.polaroidvip {
  background-color: #292929;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	height: 100%;
	border-radius:10px;
	color:#e8e8e8;

}


div.polaroidvip h2{
		background:#3c3c3c;
		color:#cccccc;
		font-size:16px;
		margin: 15px auto 0; 
		display:block;
		transition:.1s;
		border-radius:5px;
		padding-top:5px;
		padding-bottom:5px;
		font-family:ly;	
		width:auto;
		max-width:90%;	
		text-align:center;
		font-weight: normal;

}

div.polaroidvip span{color: #DE377A;}

div.polaroidvip figcaption{
	font-family:ly;
	color:#d2d2d2;
	font-size: 16px;
	font-weight: normal;
}


div.polaroidvip img{

border-top-left-radius:10px;
	border-top-right-radius:10px;
	  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}