@media only screen and (max-width: 500px) {
	body {
		background: #2f4773 url(images/mobile/brg.jpg) repeat;
	}

	#mainDiv {
		width: 95%;
		height: auto;
		transition: margin-left .5s; /*push content away when side nav slides in*/
	}
	.backToTop {
		right: 5%;
	}

	.backToTop a {
		opacity: 0.6;
	}

	#mobileBackToTop {
		display: inline;
	}

	#desktopBTT {
		display: none;
	}
	#header {
		height: 80px;
		margin-top: 50px;
	}

	#logo {

		width: 80%;
	}
	#cornerDropDown {
		display: block;
	}

	#navBar {
		display: none;
	}
	#navBar {
		height: 20px;
		margin-top: 20px;
	}
	#navBar li {
		width: 25%;
	}
	#mainContent {
		margin-top: 50px;
	}
	.mainContent_home {
		display: none;
	}
	#mainContentMobile {
		display: block;
		position: relative;
		margin-top: 30px;
		padding: 0;
	}

	#mainContentLeftColumn {
		position: static;
		width: 100%;
	}

	#mainContentRightColumn {
		position: static;
		width: 100%;
	}
	#mainContentLeftColumn_sideBar {
		display: none;
	}
	#mainContentRightColumn_portfolio {
		width: 100%;
	}
	#portfolio {
		display: inline-block;
	}
	/*======about page=========*/

	#mainContent_about {
		margin-top: 25px;
	}
	#mainContent_about img {
		width: 44%;
	}

	.bottomcenter {

		font-size: 1em;
	}
	.topcenter {

		font-size: 1em;
	}
}

/*===== set max sidebar font size ====*/
/*@media only screen and (min-width: 900px) {
 #mainContentLeftColumn_sideBar li a {

 font-size: 1.1em;
 }*/
}