/*COLORS*/

.red nav ul, .blue nav ul {
	background: #8e949e;
	color: #152034;
}	

.gray nav ul	{
	background: #152034;
}

/*HEADER*/

#logo	{
	top: calc(50vh - 8vw);
	left: 2vw;
	width: 16vw;
}

#logo a	{
	height: 16vw;
}

#big_logo	{
	width: 60vh;
	margin-top: 20vh;
	margin-left: calc(50vw - 30vh);
}	

/*NAVIGATION*/

nav	{
	padding: 0;
	width: 100%;
	height: auto;
	top: 0;
	bottom: calc(100vh - 4em);
	z-index: 200;
}	

nav ul	{
	margin-top: 0;
	padding-top: .5rem;
	padding-bottom: .5rem;
}	

nav a.current:before	{
	content: "";
}

/*NO FLEX SUPPORT*/

nav ul	{
	text-align: center;
}	
	
nav li	{
	display: inline-block;
	margin: 0 .7rem;
}	

/*FLEX SUPPORT*/

@supports(display: flex) {
	nav ul	{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
	}	
}
	
/*CONTENT*/

#content	{
	margin-left: 20vw;
	min-height: calc(100vh - 5rem);
}	

article {
	margin-top: 2rem;
	padding: 2rem 2rem;
}

h2	{
	font-size: 400%;
}	

h3	{
	font-size: 150%;
}	

main	{
	padding-bottom: 4rem;
}
	


.single	{
	width: 45%;
	margin: 0 2rem 2rem;
	float: left;
}	

.quote, .answer	{
	margin-left: 2rem;
	margin-right: 2rem;
}

main .quote p:first-child	{
	margin-top: 0;
}
	
.shelf	{
	border-bottom: 3px solid #808080;
	position: relative;
	text-align: center;
}

.shelf:first-child	{
	margin-top: -4rem;
}

.shelf:nth-child(even)	{
	margin-left: 25%;
	margin-right: 2rem;
}	

.shelf:nth-child(odd)	{
	margin-left: 2rem;
	margin-right: 25%;
}

.shelf:after	{
	position: absolute;
	content: "";
	bottom: -18px;
	left: 0;
	right: 0;
	border-bottom: 15px solid rgba(51, 51, 51, .7);
}

.gray .shelf:after	{
	border-bottom: 15px solid rgba(21, 31, 52, .7);
}

.shelf figure	{
	padding: 6rem 0 0;
	border: none;
	display: inline-block;
	vertical-align: bottom;
	margin: 0 .5%;
}

figure.w12	{
	width: 8%;
}

figure.w15	{
	width: 10%;
}

figure.w18	{
	width: 15%;
}

figure.w24	{
	width: 18%;
}

figure.w20	{
	width: 20%;
}

figure.w22	{
	width: 22%;
}

figure.w28	{
	width: 24%;
}

figure.w32	{
	width: 30%;
}

figure.w36	{
	width: 42%;
}	
	
/*ZOOM*/

.zoom_new	{
	min-height: calc(100vh - 8rem);
	margin: 0 2rem;
	padding-top: 6rem;
}

.zoom_new .landscape	{
	width: 60%;
	margin: 2rem auto 0;
}	

.zoom_new .portrait	{
	width: 40%;
	margin: 2rem auto 0;
}	

.constellations .zoom_new .landscape, .constellations .zoom_new .portrait	{
	width: calc(100% - 4rem);
}	

.close	{
	top: -3rem;
	right: -2rem;
}

.previous, .next	{
	display: block;
	top: calc(50vh - 9rem);
}

.previous	{
	left: -2rem;
}

.next 	{
	right: -2rem;
}

/*VIDEO*/

/*ABOUT*/

.video	{
	width: 45%; 
	float: left;
}	

#video1	{
	margin-right: 10%;
}