body {margin:0; padding:0; background: #fff; color: #000;font-family: Verdana, Helvetica, sans-serif;}
    .list {padding:0em 1em 2em 2em}
     h1 {font-size:x-large; color:#333;margin-left:1em;}
	 h3 {padding-bottom:0;margin-bottom:0}
    .list ol {font-size:x-large; color:#747474; margin:0; vertical-align:text-top;}
    .list ol li {margin:1em 0; padding:.3em 1em; border-left: 1px solid #999; color:#747474;}
    .list ol li em {display:block; font-size:large; color:#333; position:relative;left:-0.5em;}
    .list ol li:hover {background-color:#eee; cursor: pointer;}
    .list ol a {text-decoration:none; color:#747474; font-size:medium; line-height:1.5em; display:inline-block; vertical-align:text-top;}
	.container {
		width: 95%;
		margin: 1em auto;
		overflow: hidden;
	}
	.imgItem, .videoItem {
		color: #555;
		font-size: small;
		float: left;    
		width: 21%;
		margin:  2% 2% 20px 2%; 
	}
	
	.videoItem{
		width:46%
	}
 
	.imgItem img {
		max-width: 100%;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.imgItem p, .videoItem p{
		margin-top:.2em;
	}
	


	@media only screen and (max-width : 940px),
	only screen and (max-device-width : 940px){
		.imgItem {width: 29.33333%;}
		.videoItem{width:100%}
	}
	 
	@media only screen and (max-width : 720px),
	only screen and (max-device-width : 720px){
		.imgItem {width: 46%;}
		.videoItem{width:100%}
	}
	 
	@media only screen and (max-width : 530px),
	only screen and (max-device-width : 530px){
		.imgItem {width: 96%;}
		.videoItem{width:100%}
	}
	 
	@media only screen and (max-width : 320px),
	only screen and (max-device-width : 320px){
		h1{font-size: medium;}
		h3{font-size: small;}
		.videoItem{width:100%}
		.imgItem {width: 96%;}
		.imgItem img {width: 96%;}
		.imgItem p, .videoItem p  {font-size: small;}
		.list ol {font-size:large;}
		.list ol li em { font-size:medium;}
	}