/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/
* { box-sizing: border-box; }
body {
	font-size: 14px;
	font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
	line-height: 1.5em;
	font-weight: 400;
	background-color: #191919;
	margin: 21px;
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
}

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #191919; }
a:visited { text-decoration: none; color: #191919; }
a:hover { text-decoration: none; color: #9B9B9B; }
a:active { text-decoration: none; color: blue; }
/* a img { border: none; } */

/* general styles */
small { font-size: 9px; }
code, pre { font-family: monospace; margin-bottom: 1em; }
blockquote { padding-left: 9px; margin-bottom: 1em; }
strong {  }
p { margin-bottom: 1em; }

/* headings */
h1 { font-weight: bold; }
h2 { font-size: 33px; margin-bottom: 0.5em; font-weight: normal; text-transform: uppercase; 
	font-family: 'Oswald', sans-serif; color: #D4AF37; line-height: 1.1em; }
h3 { font-size: 21px; margin-bottom: 0.75em; font-weight: 400; color: #191919; }
h4 { font-size: 13px; margin-bottom: 1em; font-weight: bold; }

/* paragraph width */
#index p { margin-bottom: 1em; }
#exhibit p, code, blockquote { width: auto; margin-bottom: 1em; /* line-height: 1.3em; */ }

/* highlighter style - maybe you want to change colors? */
.highlight { background: #ccff00; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
#index { background: white; }
#exhibit { background: white; margin: 0; padding: 0; }

/* styling the index */
#index nav { padding: 6px 0 0 12px; }

#index ul {
	width: auto;  /* the width of each column in the menu */
	list-style-type: none;
	overflow: visible;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px; 
	position: relative;
	z-index: 5;
}
#index ul.section { margin-bottom: 1em; }
#index ul.subsection {  }
#index ul.socicons { margin: 6px 0 0 6px; }
#index ul.socicons li a { padding-right: 39px; }

#index ul li { line-height: 1.3em; position: relative; }
#index ul li ul { list-style: none; position: absolute; }

/* added per tutorial */
#index a { 
	display: block;
    padding: 0;
    color: #191919;
    text-decoration: none;
}
#index ul li a { padding: 10px 20px 10px 0; }
#index ul li ul li { display: block; float: none; }
#index ul li ul li a { padding: 0 0 5px 10px; white-space: nowrap; background-color: #fff; display: block; }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* styles for the section titles */
#index ul.sections li, 
#index ul.sections li a 
{ color: black; font-size: 21px; text-decoration: none; text-transform: uppercase; font-family: 'Oswald', sans-serif; }
#index ul.sections li a:hover { color: #9B9B9B; }
/* active section title */
#index .sections .active_section_title,
#index .sections .active_section_title a { text-decoration: none; color: #D4AF37; }

/* active exhibit title parts */
/* color of active exhibit title link and font-weight */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ font-weight: 400; color: #D4AF37; }
#index ul.section li.exhibit_title a {  }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
#index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; }
/* end styling for index */

nav ul.sections 
{ 
	display: flex; 
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
}

nav ul.sections li { }
nav ul.sections li#menu { display: none; }

/* links styles only for the #index region */
#index a:link {  } 
#index a:visted {  }
#index a:hover {  } 
#index a:active {  } 

/* links styles only for the #exhibit region */
#exhibit a:link { text-decoration: none; }
#exhibit a:active {  } 
#exhibit a:hover { text-decoration: none; } 
#exhibit a:visted {  }

/* links styles just for h1 title of site (your name/logo) */
.logo { width: 200px; }
.logo p {  }

.circle { display: block; border: none; height: 90px; width: 90px; 
	background: transparent url(/ndxzsite/grr/imgs/grr-logo-gold.png) no-repeat center center;
	text-indent: -9999px; position: absolute; top: -39px; right: 9px; z-index: 9999;
}
.circle a { display: block; width: 90px; height: 90px; }
nav { position: absolute; top: 0px; left: 0; z-index: 2; }

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 0; }

/* this is where you pad them separately */
#index .container { padding: 54px 0 54px 0; position: relative; max-width: 1120px; margin: 0 auto; }
#exhibit .container, #artists_index .container { max-width: 1120px; margin: 0 auto; padding: 54px 0 72px 0; text-align: left; }
#artists_index { border-top: 1px solid #ebebeb; }
#artists_index h3 { margin-left: 12px; }
#artists_index .container .active { font-weight: bold; }

#artists_index .container .output-albums
{
	display: flex; 
	flex-wrap: nowrap; 
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	
	width: 100%; 
}

ul.artists 
{ 
	flex: 0 1 25%; 
	margin: 0 12px; 
	max-width: 256px; 
	
	-webkit-flex-grow: 0;
	-webkit-flex-shrink: 1;
	-webkit-flex-basis: 25%;
	
	-ms-flex: 0 1 25%;
}

ul.releases 
{ 
	flex: 0 1 25%; 
	margin: 0 12px; 
	max-width: 256px;
	
	-webkit-flex-grow: 0;
	-webkit-flex-shrink: 1;
	-webkit-flex-basis: 25%;
	
	-ms-flex: 0 1 25%;
}

#exhibit .flex 
{ 
	width: 100%; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: flex-start;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	
	-webkit-box-pack: start;
	-webkit-justify-content: start;
	-ms-flex-pack: start;
}

body.format-release #exhibit .flex, 
body.format-artists #exhibit .flex
{
	width: 100%; 
	display: flex;  
	flex-wrap: nowrap; 
	justify-content: flex-start;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	
	-webkit-box-pack: start;
	-webkit-justify-content: start;
	-ms-flex-pack: start;
}

#exhibit .flex .main-column 
{ 
	width: 57%;  
	padding-left: 0; 
	font-size: 14px; 
	line-height: 1.5em; 
	margin: 0 36px 54px 12px; 
	max-width: 633px;
	flex: 0 1 auto;
	
	-webkit-flex-grow: 0;
	-webkit-flex-shrink: 1;
	-webkit-flex-basis: auto;
	
	-ms-flex: 0 1 auto; 
}

#exhibit .flex .right-column 
{ 
	width: 40%; 
	margin: 0 12px 54px 24px; 
	max-width: 403px;
	flex: 0 1 auto;
	
	-webkit-flex-grow: 0;
	-webkit-flex-shrink: 1;
	-webkit-flex-basis: auto;

	-ms-flex: 0 1 auto; 
}

#exhibit .flex .right-column .right-col-flex
{
	margin-bottom: 2em;
	display: flex; 
	flex-wrap: wrap;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
}

#exhibit .flex .main-column p {  }
/* #exhibit .container .flex > div { margin: 12px 18px; } */

/* size and style of titles and captions (not mobile though) */
.captioning { margin-top: 2px; }
.title { font-size: 13px; line-height: 1.2em; }
.caption { font-size: 13px; line-height: 1.2em; }

.bot p { width: auto; }

/* paragraph handling for this theme */
#exhibit .cdeux-container { display: flex; flex-wrap: nowrap; }
#exhibit .cdeux-container .cdeux {  }
#exhibit .cdeux h1,
#exhibit .cdeux h2,
#exhibit .cdeux h3,
#exhibit .cdeux h4,
#exhibit .cdeux p,
#exhibit .cdeux code,
#exhibit .cdeux blockquote { width: auto; margin-right: 21px; }

/* partciular to over over format */
body.format-over_and_over #exhibit .container {  }
body.format-over_and_over #exhibit .container .textspace { width: 550px; }
body.format-over_and_over #exhibit .container .textspace p { width: auto; margin-right: 21px; }

.over .asset img { display: block; }

/* experimental for layout */
#exhibit .slides { overflow: hidden;  }
#exhibit .slides .slide { margin-bottom: 2em; overflow: hidden; }
#exhibit .slides .slide img { height: 400px; cursor: url(/ndxzsite/grr/imgs/cursor.png), auto; }
#exhibit .slides { margin-bottom: 1em; }
.slide .slide_credit { position: absolute; bottom: 0; left: 0; background-color: rgba(255,255,255,0.3); width: auto; display: inline; padding: 6px 9px 9px 9px; color: #191919; }

#index ul.socicons { width: 100%; }
#index ul.socicons li { display: inline-block; }
#index ul.socicons li a { height: 28px; width: 28px; zoom: 0.8; }
#index ul.socicons li a:hover { opacity: 0.5; }
#index ul.socicons li.soc-twtr a { background: transparent url(/ndxzsite/grr/imgs/twtr.svg) no-repeat center center; }
#index ul.socicons li.soc-tmblr a { background: transparent url(/ndxzsite/grr/imgs/tmblr.svg) no-repeat center center; }
#index ul.socicons li.soc-fbk a { background: transparent url(/ndxzsite/grr/imgs/fbk.svg) no-repeat center center; }
#index ul.socicons li.soc-sndcld a { background: transparent url(/ndxzsite/grr/imgs/sndcld.svg) no-repeat center center; }
#index ul.socicons li.soc-bndcmp a { background: transparent url(/ndxzsite/grr/imgs/bndcmp.svg) no-repeat center center; }
#index ul.socicons li.soc-vm a { background: transparent url(/ndxzsite/grr/imgs/vm.svg) no-repeat center center; }

.outline img { border: 1px solid #ebebeb; }

.borders { background: #191919; position: absolute; }
.border-top { top: 0; left: 0; height: 21px; z-index: 1000; width: 100%; }
.border-right { top: 0; right: 0; width: 21px; z-index: 1001; height: 100%; }
.border-bottom { bottom: 0; left: 0; height: 21px; z-index: 1002; width: 100%; }
.border-left { top: 0; left: 0; width: 21px; z-index: 1003; height: 100%; }

#exhibit .main-column a:link { text-decoration: underline; }
#exhibit .main-column a:visited {  }
#exhibit .main-column a:hover { text-decoration: none; }
#exhibit .main-column a:active {  }

#features .container h3 { line-height: 18px; }
#features .container p { font-size: 12px; line-height: 18px; }
#features .container p a { font-size: 12px; }

.footer { margin-bottom: 21px; text-align: center; background-color: #191919; color: white; }
.footer .container 
{ 
	display: flex; 
	max-width: 1120px; 
	padding: 54px 0px 99px 0px; 
	margin: 0 auto 0 auto; 
	text-align: left; 
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
}

.footer .container div 
{ 
	flex: 0 1 25%; 
	margin: 0 12px; 
	max-width: 256px; 
	
	-webkit-flex: 0 1 25%;          /* Chrome */
	-ms-flex: 0 1 25%;
}

.footer a:link { text-decoration: none; color: white; }
.footer a:visited { text-decoration: none; color: white; }
.footer a:hover { text-decoration: underline; color: white; }
.footer a:active { text-decoration: none; color: white; }
.footer .fcol { flex: 0 1 224px; }

.footer .newsletter-holder {  }
.footer .newsletter-holder p { box-sizing: border-box; line-height: 24px; margin-right: 0; }
.footer .newsletter_email { height: 36px; padding: 6px 10px; font-size: 14px; border: 1px solid #191919; width: 200px; display: inline;
	background: #fff; box-sizing: border-box; line-height: 24px; }
.footer .newsletter_button { cursor: pointer; font-size: 14px; border: 1px solid #191919; color: #191919; height: 36px; box-sizing: border-box;
	padding: 6px 12px; border-radius: 3px; background: #D4AF37; display: inline; line-height: 24px; }
.footer .newsletter_button:hover { background: gray; }

#introduce { height: 475px; text-align: center; }
#introduce .container { position: relative; margin: 0 auto; max-width: 1120px; height: 475px; }
#introduce .container .introduce-holder { position: absolute; bottom: 33px; left: 24px; z-index: 1; text-align: left; }
#introduce .container .introduce-holder h2 a .introduce-title { color: white; }

/* main page news */
#exhibit .news-left h3, #exhibit .news-right h3 { color: #D4AF37; text-transform: uppercase; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
#exhibit .news-left h3, #exhibit .news-right h3 a { color: #D4AF37; }
#exhibit .news-left h3 { color: #191919; }
#exhibit .news-articles .news-separator { padding: 33px 0 0 0; }

/* to make videos repsonsive */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 1em;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 98%;
	height: 98%;
}

/* menu overlay */
#menu_overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background: #D4AF37; opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0s 0.5s; }
#menu_overlay .the_closer { position: absolute; top: 25px; left: 25px; width: 100px; height: 30px; z-index: 1; text-transform: uppercase; font-family: 'Oswald', sans-serif; }
#menu_overlay .the_overlay { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
#menu_overlay ul.sections { }
#menu_overlay ul.sections li { font-size: 2em; margin-bottom: 0.5em; text-transform: uppercase; font-family: 'Oswald', sans-serif; }
#menu_overlay:target { opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;  }

/* visual index rules */
body.format-visual_index #exhibit .flex .main-column { flex: 0 0 75%; max-width: auto; max-width: 1120px; }
body.format-visual_index #exhibit h2 { margin-left: 12px; }
body.format-visual_index #exhibit .flex .right-column { display: none; }
body.format-visual_index #exhibit .container .flex > div {  }

.picture_holder { width: 17.7%; margin-bottom: 25%; margin: 1%; margin-bottom: 6%; }
.picture_holder .picture { width: 100%; height: auto; }
.picture_holder .picture .the-image {  }
.picture_holder .picture .the-image img { width: 100%; height: auto; }

.the_nodes 
{ 
	display: flex; 
	flex-wrap: wrap; 
	margin-bottom: 2em; 
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
}

.node_holder { width: 30%; line-height: 1.3em; margin: 0 3% 4% 0; }
.node_holder a {  }
.node_holder a img { width: 100%; height: auto; }

#exhibit .main-column h3, #exhibit .right-column h3, #artists_index h3 { color: #D4AF37; text-transform: uppercase; font-family: 'Oswald', sans-serif; }
 
#artists_index .output-albums
{
	display: flex; 
	flex-wrap: wrap;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	
	width: 100%;
}

#exhibit .artist_albums { padding-right: 12px; line-height: 1.2em; }
#exhibit .artist_albums h3.artist_name { color: #191919; font-size: 12px; margin-bottom: 0em; font-weight: 700; 
	font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif; text-transform: none; }
#exhibit .artist_albums h3.album_title {  color: #191919; font-size: 11px; font-weight: 400; margin-bottom: 0.1em; 
	font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif; text-transform: none; }
#exhibit .artist_albums p.album_code { font-size: 11px; color: #ababab; margin-right: 0px; }

#exhibit img.album_art { border: 1px solid #ebebeb; }

.picture img { border: 1px solid #ebebeb; /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */ }
.picture .captioning { line-height: 1em; }
.picture h3 { margin-bottom: 0.1em; }
h3.artist_name { font-size: 14px; margin-bottom: 0.3em; font-weight: bold; color: #191919; }
h3.album_title { font-size: 14px; font-weight: 400; margin-bottom: 0.4em;  color: #191919; }
.picture p.album_code { color: #ababab; margin-right: 0px; font-size: 12px; }
#exhibit .flex .main-column p { margin-right: 0px; }

@media screen and (max-width: 900px) 
{
	/* need to adjust margins too */
	body { background-color: white; margin: 0; padding: 12px; }
}

@media screen and (max-width: 750px) 
{
	/* need to adjust margins too */
	body { background-color: white; margin: 0; padding: 12px; }
	nav ul.sections li { display: none; }
	nav ul.sections li#menu { display: inline; }
	
	#exhibit .slides { overflow: hidden; width: 87vw; height: 250px; }
	#exhibit .slides li img { height: 250px; width: auto; }
	#exhibit .slides { overflow: hidden;  }
	#exhibit .slides .slide { margin-bottom: 2em; overflow: hidden; }
	#exhibit .slides .slide img { height: 250px; cursor: url(/ndxzsite/grr/imgs/cursor.png), auto; }
	#exhibit .slides { margin-bottom: 1em; }
	.slide .slide_credit { position: absolute; bottom: 0; left: 0; background-color: rgba(255,255,255,0.3); width: auto; display: inline; padding: 6px 9px 9px 9px; color: #191919; }


	#exhibit .flex {  }
	#exhibit .flex .main-column { display: block; max-width: none; width: auto; margin-right: 12px;  }
	#exhibit .flex .right-column { display: block; width: 100%; margin-left: 12px; max-width: none; width: 100%; }

	.the_nodes .node_holder {  }

	#artists_index .container .output-albums { display: block; }
	ul.artists { width: auto; max-width: none; flex: 1 1 100%; }
	ul.releases { width: auto; max-width: none; flex: 1 1 100%; }

	.footer .container { display: block; max-width: 1120px; padding: 21px 0px 36px 18px; margin: 0 auto 0 auto; text-align: left; }
	.footer .container div { flex: 1 1 100%; margin: 0 12px 12px 0; max-width: none; }

	.picture_holder { width: 48%; margin-bottom: 25%; margin: 1%; margin-bottom: 6%; }
	
	body.format-release #exhibit .flex, 
	body.format-artists #exhibit .flex
	{
		display: block;  
	}
}