body{

		background-color: #F7F7F2;

			font-family: 'Roboto', sans-serif;
			font-size: 1em;
			font-weight: 300;

			color: #000000;
	}

	h1{
		font-family: 'Bodoni Moda', serif;

		font-size: 2.5em;
		font-weight: 600;

		text-transform: uppercase;

		border-bottom: 1px solid black;
		line-height: 1.5em;
		margin-bottom: 0px;
	}

	h2{
		font-style: italic;
		font-size: 0.9em;
		font-weight: 100;

		margin-top: 8px;
		margin-bottom: 30px;
	}

	.wrapper{
		max-width: 600px;
		margin: 0 auto;
		padding: 0 24px;
		position: relative;
	}

	.top-section{
		margin-top: 60px;
	}

	.gallery-section{
		margin-bottom: 40px;
	}

	.gallery-section > img{
		width: 100%;
		margin-bottom: 22px;
	}

	.sidebar > p{
		line-height: 1.5em;
	}

	.moma-logo{
		width: 120px;

	}

	.sidebar{
		margin-bottom: 70px;
	}

	.footer{
		background-color: black;
		color: #666;
		text-align: center;
		padding: 40px 30px;
		font-size: 0.8em;
	}

	.credit{
		font-style: italic;
		font-size: 0.9em;
		font-weight: 100;

		margin-top: 0px;
		margin-bottom: 30px;
	}


	.videoWrapper {
	  position: relative;
	  padding-bottom: 75%;
	  padding-top: 25px;
	  height: 0;
	}

	.videoWrapper iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	

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

		.wrapper{
			max-width: 1200px;
			padding: 0 40px;
		}

		.sidebar{
			position: absolute;
			top: 0px;
			left: 40px;
			width: 340px;
		}


		.top-section{
			margin-left: 420px;
			margin-bottom: 40px;
		}

		.gallery-section{
			margin-left: 420px;
		}

		h1{
			margin-top: 0;
			padding-top: 0;
		}

	}