*
		{
			box-sizing : border-box;
    text-decoration: none;
    font-family: IRANSans;
    
		}
		
 
		.header{
			background-color : #9933CC;
			color : #ffffff;
			padding : 15px;
			line-height:50px;
			
		}
		
		
		
		[class*="col-"]
		{
			float : left;
			padding : 15px;
			
		}
		
		[class*="col-"]{
				width : 100%;
			}
			
		@media only screen and (min-width:600px){
			.col-m-1{width:8.33%;}
			.col-m-2{width:16.66%;}
			.col-m-3{width:25%;}
			.col-m-4{width:33.33%;}
			.col-m-5{width:41.66%;}
			.col-m-6{width:50%;}
			.col-m-7{width:58.33%;}
			.col-m-8{width:66.66%;}
			.col-m-9{width:75%;}
			.col-m-10{width:83.33%;}
			.col-m-11{width:91.66%;}
			.col-m-12{width:100%;}
		
		}
		@media only screen and (min-width:768px){
			.col-1{width:8.33%;}
			.col-2{width:16.66%;}
			.col-3{width:25%;}
			.col-4{width:33.33%;}
			.col-5{width:41.66%;}
			.col-6{width:50%;}
			.col-7{width:58.33%;}
			.col-8{width:66.66%;}
			.col-9{width:75%;}
			.col-10{width:83.33%;}
			.col-11{width:91.66%;}
			.col-12{width:100%;}
		
		}
		
		.row:after
		{
			content : "";
			clear : both;
			display : block;
		}
		
		.menu ul{
			list-style-type : none;
			margin : 0;
			padding : 0;
		}
		
		.menu li{
			padding : 8px;
			margin-bottom : 7px;
			background-color : #33b5e5;
			color : #ffffff;
			box-shadow : 0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24);
		}
		
		.menu li:hover
		{
			background-color : #0099cc;
		}
		
		.aside{
			background-color : #33b5e5;
			padding : 15px;
			color : #ffffff;
			text-align : center;
			font-size : 14px;
			box-shadow : 0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24);
		}
		
		.footer{
			background-color :   lightgray;
			color : blue;
			text-align : center;
			font-size : 12px;
			padding : 15px;
		}
		






.headpost {
    text-align: center;
    font-family: 'IRANSans';
    direction: rtl;
    margin: 0 0 15px 0;
    background-color: #cccccc;
    padding: 5px;
    font-size: 18px;
}
.post
{
max-width: 500px;
box-shadow: 0 0 35px #ccc;
 
margin: 5px auto 10px auto;
 
 
padding: 0 0 3px 0;

 
}
 .bodypost
{
text-align: right;
font-family: IRANSans;
font-size: 15px;
padding: 0 10px 0 0;
line-height: 37px;

}
.newline {
    clear: both;
    height: 4px;
}
 		
.btn_open_post
 {
 color:#ffff;
 background-color:#009900;
 font-size:16px;
 margin:20px;
 
   border: none;
  color: white;
  padding: 10px  ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  box-shadow: 35px #ccc;
  cursor: pointer;
   border-radius: 5px;
 
 
 }
 @font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/eot/IRANSansWeb_Black.eot');
    src: url('fonts/eot/IRANSansWeb_Black.eot%3F') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('fonts/eot/IRANSansWeb_Bold.eot');
    src: url('fonts/eot/IRANSansWeb_Bold.eot%3F') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('fonts/eot/IRANSansWeb_Medium.eot');
    src: url('fonts/eot/IRANSansWeb_Medium.eot%3F') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('fonts/eot/IRANSansWeb_Light.eot');
    src: url('fonts/eot/IRANSansWeb_Light.eot%3F') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('fonts/eot/IRANSansWeb_UltraLight.eot');
    src: url('fonts/eot/IRANSansWeb_UltraLight.eot%3F') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/eot/IRANSansWeb.eot');
    src: url('fonts/eot/IRANSansWeb.eot%3F') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb.ttf') format('truetype');
}


 a.button_blue {
 display: inline-block;
 padding: 0.5em 2em;
 background-color: #007bff;
 color: #fff;
 text-decoration: none;
 border-radius: 0.2em;
 border-bottom: 2px solid #044;
 
 font-size:14px;
width: 250px;
box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
 
 }
 
 a.button_blue:hover {
 background-color: #0060b9;
 border-bottom-color: #088;
 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }


 
 
   #banner a {
    position: fixed;
    display: block;
    right: 3px;
    top: 69%;
    width: 99%;
    height: 29%;
    background: url('h570_mmm.png.html') transparent no-repeat scroll center center;
}




.btn_red
{

 
   
    background-color: #FF0000;
      width: 280px;
    color: #ffff;
  
    font-size: 16px;
    margin: 10px;
    border: none;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 35px #ccc;
    cursor: pointer;
    border-radius: 5px;

}




.btn_green
{
 
background-color:#01AB01;
      width: 280px;
    color: #ffff;
  
    font-size: 16px;
    margin: 10px;
    border: none;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 35px #ccc;
    cursor: pointer;
    border-radius: 5px;

}


.btn_blue
{
 
background-color:#015AFF;
      width: 280px;
    color: #ffff;
  
    font-size: 16px;
    margin: 10px;
    border: none;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 35px #ccc;
    cursor: pointer;
    border-radius: 5px;
  

}

 .My-Container {
display: grid;
list-style: none;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
 
justify-content: center;
}

.item {
  background-color: #f2f2f2;
  border: 1px solid #000;
  padding: 0px;
  font-size: 30px;
  text-align: center;
  line-height:1px;
}

.img-thumbnail-Container {
display: grid;
list-style: none;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
 
 
justify-content: center;
}

.img-thumbnail-item {
  background-color: #f2f2f2;
  
 
}