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

    #menu-icon {

		display:inline-block;

	}
nav ul, nav:active ul {
    background: none repeat scroll 0 0 #272727;
    border: 5px solid #000;
    border-radius: 4px 0 4px 4px;
    display: none;
    left: 46px;
    padding: 20px;
    position: absolute;
    top: 177px;
    width: 50%;
}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}

@media screen and (orientation: portrait) {
  img.ri {
      max-width: 90%;
  }
}

@media screen and (orientation: landscape) {
  img.ri {
      max-height: 90%;
  }
}

@media screen and (max-width: 980px) {
	
	.main_content {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

}

/* for 700px or less */
@media screen and (max-width: 1000px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}