/*BASIC STYLES*/

html, body, 
h1, h2, h3, h4, h5, h6,
a, span, cite,

div, section, article,
main, aside, nav, header, footer,
img, figure, figcaption, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    line-height: 1.4;
	font-family: 'Merriweather', 'Radley', serif;
	background: #152034;/*navy*/
	color: #cccccc;
}

* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

a, a:visited {
    color: inherit;
}

article a:hover, article a:focus, article a:active	{
	color: #ffffff;
	text-decoration: none;
}	

article, aside, footer, header, nav, section, main, figure {
    display: block;
}

img {
    width: 100%;
	display: block;
	border: none;
}

.sr_only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    left: -9999px;
    top: -9999px;
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

.clearfix	{
	clear: both;
}

.important	{
	font-weight: bold;
	font-style: italic;
}	

/*COLORS*/

.red	{
	background: #870136;/*red*/
}	

.blue	{
	background: #152034;/*navy*/
}

.gray	{
	background: #8e949e;/*dark gray*/
	color: #152034;/*navy*/
}

.red header	{
	background: #152034;/*navy*/
}	

.blue header, .gray header	{
	background: #870136;/*red*/
}	

.red nav, .blue nav {
    background: #8e949e;/*dark gray*/
	color: #152034;/*navy*/
}

.gray nav	{
	background: #152034;/*navy*/
	color: #cccccc;
}	


/*LOGO*/

#logo	{
	position: relative;
}

#logo #animation, #logo #still	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#logo #animation	{
	z-index: 100;
}	

#big_logo #animation	{
	display: none;
}

#big_logo:hover	#still	{
	display: none;
}	

#big_logo:hover	#animation	{
	display: block;
}

#big_logo a, #logo a	{
	display: block;
}	

	
/*MENU*/

#menu {
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}	

#menu a:hover, #menu a:active, #menu a:focus	{
	text-decoration: none;
	color: #ffffff;
}	

/*NAVIGATION*/

nav	ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav li	{
	margin: 0;
	padding: 0;
}	

nav a	{
	display: block;
}	

nav a.current	{
	position: relative;
}	

nav a:hover, #copyright a:hover	{
	text-decoration: none;
}

/*CONTENT*/

h2	{
	font-weight: bold;
	font-family: 'Titular', 'Merriweather', 'Radley', serif;
}	


h3	{
	font-weight: bold;
}	

h4	{
	font-weight: bold;
	
}

.quote p, .answer	{
	font-style: italic;
	font-size: 90%;
	line-height: 1.5;
}

.signature	{
	text-align: right;
}	

.reference	{
	font-size: 90%;
}

.answer	{
	font-style: italic;
}

/*PHOTOS*/

.shelf img	{
	box-shadow: 4px -4px 16px rgba(0, 0, 0, 0.4);
	cursor: zoom-in;
}	

.shelf img:hover, .shelf img:active, .shelf img:focus	{
	opacity: .8;
}

/*ZOOM*/

.zoom_new	{
	display: none;
}

.zoom_new:target	{
	display: block;
}	

.zoom_new figure	{
	position: relative;
}

.zoom_new img {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	cursor: zoom-out;
}

.zoom_new figcaption	{
	text-align: center;
	margin-top: 1rem;
	line-height: 1.5;
}

.zoom_new figcaption span	{
	display: block;
	font-size: 90%;
}

.zoom_new figcaption .comment	{
	font-style: italic;
	margin-top: 1rem;
}	

.close, .previous, .next {
  color: #cccccc;
  position: absolute;
  font-weight: bold;
  text-decoration: none;
}

.close	{
	font-size: 2rem;
}

.previous, .next	{
	font-size: 1.4rem;
}	

.gray .close, .gray .previous, .gray .next	{
	color: #152034;/*navy*/
}	

.close:hover, .close:active, .close:focus,
.previous:hover, .previous:active, .previous:focus,
.next:hover, .next:active, .next:focus {
  color: #ffffff;
 
}



/*ABOUT*/

.list li	{
	padding-bottom: .5rem;
}	

.video	{
	width: 100%; 
	margin-top: 2rem;
	margin-bottom: 2rem;
}	

.video .caption	{
	text-align: center;
	margin-top: 1rem;
	line-height: 1.5;	
}	

.video_wrapper	{
	width: 100%; 
	position: relative;
	padding-bottom: 56.25%;
	height: auto;
	margin: 0;
}	

.video_wrapper iframe	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/*FOOTER*/
	
footer {
    padding: .3rem 1rem;
	text-align: center;
	font-size: 80%;
}	





	
	

	
