@media screen and (max-width: 1100px) and (min-width: 768px){
	
	#blog-logo{
		height: 50px;
		width: auto;
	}
	
	header nav{
		margin-top: 25px;
	}
	
	.post-list ul li{
		display: block;
	}
	
	h3.line span{
		display: block;
	}
	
	
}

@media screen and (max-width: 900px) and (min-width: 768px){
	header nav{
		display: none;
	}
}

@media screen and (max-width: 787px) and (min-width: 200px){
	
	#blog-logo{
		height: 50px;
		width: auto;
	}
	
	header nav{
		display: none;
	}
	
	main section > div{
		padding: 20px;
	}
	
	#hero .story:nth-child(1){
		display: block;
		float: none;
		height: 60vw;
		width: 100%;
	}
	
	#hero .story:nth-child(2){
		margin-left: 0px;
		margin-top: 20px;
	}
	
	#hero .story:nth-child(3){
		margin-left: 20px;
		margin-top: 20px;
	}
	
	.post-list ul li, .two-columns, .recommended{
		display: block;
	}
	
	.post-list li > div{
		padding: 0px 20px 20px 20px;
	}
	
	.post-list img{
		width: 100%;
		margin-bottom: 10px;
	}
	
	.rail{
		width: 100%;
	}
	.rail-block{
		padding-bottom: 60px;
		width: 100%;
	}
	
	footer > div{
		display: block;
	}
	
	footer .col, .recommended-post{
		width: 100%;
		margin: 0px 0px 30px !important;
	}
	
	

	footer > div .col:nth-child(2n){
		margin: 60px 0px;
	}
	
	h3.line:before{
		display: none;
	}
	
	
	#hero .story span{
		font-size: 12px;
		padding: 15px;
	}

	header #blog-logo{
		width: 100%;
		max-width: 475px;
		height: auto;
	}

}