@media only screen and (max-width: 768px) {

	header.top{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-content: space-between;
		align-items: center;
		padding: 8px ;
		padding-left: 12px;
		height: 52px;
	}

	main{
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;	
		
		padding: 20px 8px;
	}

	#primary{
		
		flex: 0 1 auto;
		margin-right: 2%;
		width: 100%;
	}

	#secondary{
		
		flex: 0 0 auto;
		width: 100%;
		max-width: 200px;
			
	}

	.wrapper.banner{
		display: flex;
		flex-flow: column;
		justify-content: center;
		
		position: static;
	}

	.wrapper.banner:last-child{
		margin-bottom: 0;
	}

	#hmbMn{
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		padding: 20px 4px 20px 36px;
		width: 20px;
		height: 20px;
		box-sizing: content-box;
	}

	#hmbMn:hover{
		cursor: pointer;
	}

	#hmbMn div{
		height: 2px;
		background: #afafaf;
	}


	header.top nav{
		position: absolute;
		z-index: 2;
		top: 52px;
		right: 0;
		width: 100%;
		height: 0;
		overflow: hidden;
		transition: all 1s cubic-bezier(0.42, 0, 0.52, 1) ;
	}

	header.top.on nav{
		position: absolute;
		z-index: 3;
		right: 0;
		height: 240px;
	}

	header.top nav ul{
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		
		padding: 0 16px;
		width: 100%;
		background: #fff;
		
		transition: all 1s cubic-bezier(0.42, 0, 0.52, 1) ;
		transform: translate(0, -240px);
		border: #dadada solid;
		border-width: 0 0 1px 0;
		box-shadow: 0 0px 4px rgba(26,26,26,0.2);
	}

	header.top.on nav ul{
		transform: translate(0, 0);
	}


	header.top nav ul li:last-child,
	header.top nav ul li:first-child,
	header.top nav ul li{
		padding: 8px;
		height: 46px;
		border: #e7e7e7 solid;
		border-width: 0 0 1px 0;
	}
	header.top nav ul li:last-child{
		border: none;
	}
	
		
	aside img{
		height: 60px;
		width: 60px;
	}



}