#header-section{
	margin-left: 30px;
	margin-top: 20px;
	width: 90%;
}
#header-section h1{
	font-size: 220%;
	text-transform: uppercase;
	color: rgb(6, 136, 13);
	font-family: Quicksand;
	margin-bottom: 40px;
	 
}
#header-section img{
	width: 50px;
	height: 50px;
	float: right;
	margin-top: 30px;
	margin-right: 40px;
}
#header-section p{
	color: rgba(158, 187, 159, 0.91);
}
.t-all-head{
	text-transform: uppercase; 
	color: rgb(6, 136, 13); 
	font-size: 100%;
	font-family: Adobe Ming Std L;
    margin-bottom: 5px;
    margin-left: 7px;
    margin-top: 5px;
    font-weight: 600;
    display: inline-block;
    max-width: 100%; 
    height: 1rem;
    content: attr(data-tag);
 	white-space: nowrap;
 	letter-spacing: 0.05rem;
 	border: 1px solid transparent;
}
#topics-table{
	margin-left: 20px;
	border: 1px solid transparent;
}
#topics-table li{ 
	display: inline-block;
	list-style-type: none;
	width: 27%;
	margin-top: 30px;
	margin-left: 40px;
	border: 1px solid transparent;
	height: 400px;
}
 #topics-table li img{
 	height: 200px;
 	width: 100%;
 	border: 1px solid transparent;
 }
#topics-table li h6 { border: 1px solid transparent; font-size: 170%; font-family: Quicksand;}
#topics-table li h6 a { text-decoration: none; color: black; }
#topics-table li h6 a:hover {cursor: pointer; color: rgb(6, 136, 13);}


@media only screen and (max-width: 1300px){
	 #topics-table li img{
	 	height: 150px;
	 }
	 #topics-table li{ height: 300px; }
}

@media only screen and (max-width: 1100px){
	#topics-table li h6{ font-size: 140%; }
	.t-all-head{ font-size: 80%; }
	#topics-table li{ height: 250px; }
}
@media only screen and (max-width: 960px){
	#topics-table li{  width: 40%; height: 150px;}
	#topics-table li img{ height: 180px; }*/
}
@media only screen and (max-width: 700px){
	#topics-table li img{ height: 150px; }
}
@media only screen and (max-width: 500px){
	#topics-table li{ margin-left: 20px; }
	#topics-table li img{ height: 120px; }
}
@media only screen and (max-width: 400px){
	#topics-table li{ width: 80%; height: 200px; }
	#topics-table li img{ height: 180px; }
	#header-section h1{ font-size: 170%; }
	#header-section p{ font-size: 80%; }
}
@media only screen and (max-width: 350px){
	.t-all-head{ font-size: 70%; margin-bottom: 0px; }
	#topics-table li h6{ font-size: 120%; }
	#topics-table li img{ height: 150px; }
	#topics-table li{}
}
@media only screen and (max-width: 300px){
	#topics-table li img{ height: 130px; }
	#header-section h1{ font-size: 160%; }
	#header-section p{ font-size: 70%; }
}