/* ******************* Main CSS; *******************  */

* {box-sizing : border-box;}
		
@font-face {
  font-family: Vazir;
  src: url(fonts/Vazir.ttf) format('truetype');
 }
html
		{
	/*font-family : "Lucida Sans" , sans-serif;*/
	font-family: Vazir;
	  		}
		.header{
	background-color : #643a01;
			color : #ffffff;
			padding : 3px;
			font-size: 10pt;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			background-image:url('https://uploadkon.ir/uploads/398f14_24natural-history-header.jpg');
			 background-size: 240px 115px;
			 background-repeat: repeat; 		}
		[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 : #ffffff;
			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 : #ffffff;
		}
		
		.aside{
			background-color : #ffffff;
			padding : 15px;
			color : #ffffff;
			text-align : left;
			font-size : 14px;
			box-shadow : 0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24);
		}
		
		.footer{
 		    
		}
		img{
			max-width : 100%;
			height : auto;
			border-radius: 20px;
		}
						/* ******************* Footer Contents; *******************  */

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
 }

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
 }

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size : 14px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 5px;
  line-height: 0.5;
}

/* Centered text */
.centered {position: absolute; top: 80%;left: 50%; transform: translate(-50%, -50%);}