/* INDEX */

@media only screen and (min-width: 480px) and (max-width: 959px) {
	
	#portfolio {
		height: 2160px;
	}

	#portfolio .portfolio-container {
		width: 480px;
	}

	#portfolio-list .portfolio {
		width: 46%;
		margin: 1.950%;
	}

	#artwork {
		height: 1680px;
	}

	#artwork .artwork-container {
		width: 480px;
	}

	#artwork-list .artwork {
		width: 46%;
		margin: 1.950%;
	}

	#footer .footer-container {
		width: 480px;
	}

}

@media only screen and (max-width: 479px) {
	
	#portfolio {
		height: 4040px;
	}

	#portfolio .portfolio-container {
		width: 360px;
	}

	#portfolio-list {
		width: 240px;
		margin: 0px auto;
	}

	#portfolio-list .portfolio {
		width: 92%;
		margin: 3.900%;
	}

	#artwork {
		height: 3240px;
	}

	#artwork .artwork-container {
		width: 360px;
	}

	#artwork-list {
		width: 240px;
		margin: 0px auto;
	}

	#artwork-list .artwork {
		width: 92%;
		margin: 3.900%;
	}

	#footer .footer-container {
		width: 240px;
	}
}

@media only screen and (max-height: 249px) {

	#header .down {
		display: none;
	}

	#about .down {
		display: none;
	}

}

/* ABOUT */

@media only screen and (min-width: 480px) and (max-width: 959px) {

	#header {
		text-align: center;
	}

	#header .header-container {
		width: 480px;
	}

	#header .header-container .logo {
		float: none;
		margin: 40px 0px;
	}

	#header .header-container .nav-bar {
		float: none;
	}

	#header .header-container .nav-bar .nav-menu {
		padding: 0;
	}

	#header .header-container .nav-bar .nav-menu li {
		float: none;
		display: inline;
	}

	#about {
		height: 1200px;
	}

	#about .about-container {
		width: 480px;
	}

	#about .about-container .profile-picture {
		width: 96%;
		float: none;
		margin: 0% 2%;
	}

	#about .about-container .about-text {
		margin: 0% 2%;
	}

	#about .down {
		position: relative;
		top: 40px;
		bottom: 0px;
	}

	#coursework .coursework-container {
		width: 480px;
		padding-top: 0px;
	}

	#coursework .coursework-container .under {
		width: 96%;
		height: 100%;
		margin: 0% 2%;
	}

	#coursework .coursework-container .under .freshman {
		width: 100%;
		float: none;
	}

	#coursework .coursework-container .under .sophomore {
		width: 100%;
		float: none;
	}

	#coursework .coursework-container .upper {
		width: 96%;
		height: 100%;
		margin: 0% 2%;
	}

	#coursework .coursework-container .junior {
		display: none;
	}

	#coursework .coursework-container .junior-media {
		display: block;
	}

	#coursework .coursework-container .senior {
		display: none;
	}

	#coursework .coursework-container .senior-media {
		display: block;
	}

}

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

	#header {
		text-align: center;
	}

	#header .header-container {
		width: 100%;
	}

	#header .header-container .logo {
		float: none;
		margin: 40px 0px;
	}

	#header .header-container .nav-bar {
		float: none;
	}

	#header .header-container .nav-bar .nav-menu {
		padding: 0;
	}

	#header .header-container .nav-bar .nav-menu li {
		float: none;
		display: inline;
	}

	#about {
		height: 1200px;
	}

	#about .about-container {
		width: 360px;
	}

	#about .about-container .profile-picture {
		width: 96%;
		float: none;
		margin: 0% 2%;
	}

	#about .about-container .about-text {
		margin: 0% 2%;
	}

	#about .down {
		position: relative;
		top: 180px;
		bottom: 0px;
	}

	#coursework .coursework-container {
		width: 360px;
		padding-top: 0px;
	}

	#coursework .coursework-container .under {
		width: 96%;
		height: 100%;
		margin: 0% 2%;
	}

	#coursework .coursework-container .under .freshman {
		width: 100%;
		float: none;
	}

	#coursework .coursework-container .under .sophomore {
		width: 100%;
		float: none;
	}

	#coursework .coursework-container .upper {
		width: 96%;
		height: 100%;
		margin: 0% 2%;
	}

	#coursework .coursework-container .junior {
		display: none;
	}

	#coursework .coursework-container .junior-media {
		display: block;
	}

	#coursework .coursework-container .senior {
		display: none;
	}

	#coursework .coursework-container .senior-media {
		display: block;
	}

	#coursework .coursework-container ul {
		padding-left: 0px;
	}

}

/* ITEM */

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

	#item .container {
		width: 100%;
	}

	#item .container .media-hide {
		display: none !important;
	}

	#item .container .hide {
		display: block;
	}

	#item .container .media-w-1 {
		width: 100% !important;
		margin: 2% 0 !important;
		display: block;
	}

	#item .container .media-w-2-1 {
		width: 49% !important;
		margin: 0 1% 2% 0 !important;
		float: left !important;
		display: block;
	}

	#item .container .media-w-2-2 {
		width: 49% !important;
		margin: 0 0 2% 1% !important;
		float: left !important;
		display: block;
	}

	#item .container .media-w-3-1 {
		width: 32% !important;
		margin: 0 2% 2% 0 !important;
		float: left !important;
		display: block;
	}

	#item .container .media-w-3-2 {
		width: 32% !important;
		margin: 0 0 2% 0 !important;
		float: left !important;
		display: block;
	}

	#item .container .media-w-3-3 {
		width: 32% !important;
		margin: 0 0 2% 2% !important;
		float: left !important;
		display: block;
	}

}