/*========>>> Reset <<<========*/
/*====>>> Normalize.css v2.1.0 by Nicolas Gallagher - 
http://necolas.github.com/normalize.css/ <<<==== */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-family: Helvetica, Arial, Tahoma, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin: 0 auto;}
*html{font-size: 100%;}
body{margin:0;padding:0;}
a {background:transparent; color: inherit; font-size:100%; margin:0; padding:0; text-decoration: none; vertical-align:baseline;}
a:focus{outline: 0; -moz-outline:none;}
a:active,a:hover{outline:0;}
li{list-style: none;}
ul, ol {margin-left: 0; padding: 0; list-style: none;} 
h1{font-size:2em;margin:0em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
object,embed  {display:block;height:auto; max-width:100%; margin-left:auto; margin-right:auto;}

/*====>>> Clearfix by Nicolas Gallagher <<<==== */
.clearfix:before,.clearfix:after{content:'';display:table}
.clearfix:after{clear:both}
.clearfix{zoom:1;*zoom: 1;}

*,
*:before,
*:after {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -ms-box-sizing:border-box;
 box-sizing:border-box;}  
 
.left {
 float: left !important;}
.right {
 float: right !important;}
.hide {display: none; } 
.center {margin: 0 auto;}  
 
/*===========================================
  ===============>>> IMAGES <<<============== 
  ===========================================*/
/*
The declaration below is to make sure images 
don't exceed the width of columns they're in 
on resized windows. 
However, this breaks certain plugins,so it  
it is best to specify where you want it to
apply. 
*/
img.artist-portrait, .artist-list img { 
display:block;
height: auto; max-width: 100%;}
 

/*========================================
  ===========>>> TYPOGRAPHY <<<===========
  ========================================*/
   
@font-face{
  font-family:'Social-Icons';
  src: url('../css/fonts/Social-Icons.eot');
  src: url('../css/fonts/Social-Icons.eot?#iefix') format('embedded-opentype'), 
  		url('../css/fonts/Social-icons.svg') format('svg'), 
		url('../css/fonts/Social-Icons.woff') format('woff'), 
		url('../css/fonts/Social-Icons.ttf') format('truetype');
  font-weight:normal;
  font-style:normal}
  
 @font-face {
 font-family: 'icomoon';
 src:url('../css/fonts/icomoon/icomoon.eot');
 src:url('../css/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
	url('../css/fonts/icomoon/icomoon.woff') format('woff'),
	url('../css/fonts/icomoon/icomoon.ttf') format('truetype'),
	url('../css/fonts/icomoon/icomoon.svg#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;} 
  
.iconset [data-icon]:before {
 content:attr(data-icon);
 font-family:'Social-Icons';
 font-style:normal;
 font-weight:400;
 line-height:1;
 speak:none} 


h2.page-title {
 font-size: 1em;
 margin: 1em 1em 1em 0; 
 text-transform: uppercase;}
 
cite.source,
p.artist-contact { font-size: .75em; margin: 0;}

cite.source a,
p.artist-contact a {color: #3e3e40; border-bottom: 1px solid black;} 
 
/*========================================
  =============>>> BORDERS <<<============ 
  ========================================*/ 
ul.features-list li {border-left:1px dotted black;}  
  
   
/*========================================
  ==============>>> LINKS <<<============= 
  ========================================*/  
li.selected {font-weight: bold;}  


/*========================================
  ==============>>> LISTS <<<============= 
  ========================================*/ 
  
ul.artist-list li h2,
ul.features-list li h2{ margin: 0; }
ul.artist-list li p,
ul.features-list li p { margin: 0 auto 2em; }
  
ul.artist-list {}
ul.features-list {}
ul.features-list li {margin-bottom: 2em; padding-left: .5em;} 

ul.artist-list li {
 background-color: #f2f2f2;
 display: block;} 

ul.artist-list li:nth-of-type(2n) {
 background-color: #d3d9d6;}

ul.artist-list li img {
 float: left; margin-right: 1em;}
 
p.artist-list-exerpt {display: none;} 

ul.artist-list li h2 {padding-top: 1em;}


																/*========================================
=============================================================================>>> GEN. LAYOUT <<<==========
==========================================================================================================*/
.page {
 margin:0 auto;padding: 2em 2em 0;} 

section.additional {
 border-bottom: 1px solid black;
 display: block;}

ul.listed-artists {
border-left: 1px dotted black; margin-right: 1em; padding-left: 1em; column-count: auto; } 
 
ul.listed-artists li{
 font-size: .75em;
 padding:.15em;}      
 
section.additional ul li a {text-decoration: none; list-style: none;}
 
/*========================================
  =============>>> HEADER <<<============= 
  ========================================*/ 

header.masthead {
 border-bottom: 1px solid black; 
 color: #333;
 position: relative;
 text-align: center;} 
  
header.masthead .container {
 margin: 0 auto; 
 position: relative; 
 width: 100%;}  
  
header.masthead h1 {
 background: url(../img/nealogo.png) no-repeat 0 0;
 border: 0;	
 height: 150px; width: 150px;
 margin: 0 auto;
 padding: 0 0 2em;
 text-decoration: none;}					
 
header.masthead h1 a {
 display: block;
 height: 128px; width: 192px;
 text-indent: -9999px;}

/*=====>>> Header Navigation <<<===== */

header nav {
 margin: 0 auto;
 text-align: center; }

header nav ul{
 list-style: none; ;
 margin: 1em auto 2em;
 zoom: 1} 

nav li{
 font-family:;
 font-size: .85em;
 font-weight: normal;
 letter-spacing: .15em;
 text-transform: uppercase;
 vertical-align: top;
 zoom: 1;} 
 
header nav ul li,
header nav ul li a {display: block;}

header nav ul li a:hover { 
 color: black;} 
 
header nav li a{
 color: #3e3e40;
 text-decoration: none;}

.social-media {padding:0 1.313em;position:relative;text-align:center}
.social-media div {margin:0 auto;max-width:36.25em}
.social-media ul {font-size:1em;line-height:1.5;list-style:none;margin:0 auto 1.5em;padding-left:0}
.social-media li {display:inline-block;margin:0 0.1875em}
.social-media li a {border-bottom:none;display:block;padding:0.5em}
.social-media li span {left:-9999em;position:absolute;top:-9999em}
.social-media p {margin-bottom:0} 


/*>>> Navigation Arrows <<< */

.icon-arrow-left:before {content: "\e003";}
.icon-arrow-right:before {content: "\e00d";}
  
.btn {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: inherit;
letter-spacing: 1px;
outline: none;
padding: 0em;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}

.btn:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased;}


.btn-3:active,
.btn-3:active:before,
.btn-4:active,
.btn-4:active:before {color: red;}

.btn-4:before {
 color: #3e3e40;
 height: 100%;
 font-size: 125%;
 line-height: .75; 
 opacity: 0; 
 position: absolute;top: 0;left: 90%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}

.btn-4:hover:before {
 left: 100%;
 opacity: 1;}

.btn-3 {color: black;}

.btn-3:before {display: none;
 position: absolute; top: 0;  left: auto; right: 21%;
 font-size: 125%;
 height: 100%;
 line-height: .75;
 width: 60px;
 z-index: 2;}
 
/*haven't had time to code btn-2 and .more well at all I quickly tried to copy btn-3
both in the html and css so don't assume anything. The arrow is to be at the bottom right corner
of the text area of the artist list */ 
 
.btn-2 {background-color: black; color: white;}

.btn-2:before {
 font-size: 125%;
 height: 100%;
 width: 60px;}
 
.more {position:relative; bottom: 0; right:0;}
/*========================================
  ==========>>> MAIN CONTENT <<<========== 
  ========================================*/
  
.artist-contact {margin-bottom:5em;}
  
.main {
 margin: 0 auto;
 width: 100%}
 
/*========================================
  ==============>>> ABOUT <<<============ 
  ========================================*/ 
  
.page-text {
 line-height: 1.5;
 text-align: left;}   

/*========================================
  ==============>>> FOOTER <<<============ 
  ========================================*/ 
 
footer {padding:2em 0;}
footer p {margin-bottom: 1em;} 

/*FOOTER*/
footer#big-black{
 background-color: black;
 color: white;
 font-size: .5em;
 margin-top: 5em;
 text-align: center;}

footer#big-black li {display:inline-block;margin:0 0.1875em} 
 
footer#big-black li a {
 color: white;} 

/*========================================
  ==============>>> PLUGINS <<<=========== 
  ========================================*/
  
/*
 * jQuery Nivo Slider v3.2   
 * http://nivo.dev7studios.com 
 */   
   
.slider-wrapper {
padding-top: .5em;
padding-bottom: .5em;}   

.nivoSlider {
 background:#fff url(img/loading.gif) no-repeat 50% 50%;
 height:auto; width:100%;
 margin-bottom:0px;
 overflow: hidden;
 position:relative;}

.nivoSlider img {
 display:none;
 max-width: none;
 position:absolute; top:0px;left:0px;}

.nivoSlider a {
 border:0;
 display:block;}

.nivo-main-image {
 display: block !important;
 position: relative !important; 
 width: 100% !important;}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 background:white; 
 border:0;
 display:none;
 height:100%; width:100%;
 margin:0; padding:0; 
 filter:alpha(opacity=0); 
 opacity:0; 
 position:absolute; top:0px; left:0px; 
 z-index:6;}
 
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 height:100%;
 position:absolute; top:0;
 z-index:5;}
	
.nivo-box {
 display:block;
 overflow:hidden;
 position:absolute;
 z-index:5;}

.nivo-box img {display:block;}

/* Caption styles */

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 cursor:pointer;
 position:absolute; top:45%;
 z-index:9;}
 
.nivo-prevNav {left:0px;}

.nivo-nextNav {right:0px;}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {display: none;}
 
.theme-default .nivo-directionNav a {
 background:url(../img/arrows.png) no-repeat;
 border:0;
 display:block;
 height:30px; width:30px;
 opacity: 0;
 text-indent:-9999px;
 -webkit-transition: all 200ms ease-in-out;
 -moz-transition: all 200ms ease-in-out;
 -o-transition: all 200ms ease-in-out;
 transition: all 200ms ease-in-out;}

.theme-default:hover .nivo-directionNav a { opacity: 1; }

.theme-default a.nivo-nextNav {
 background-position:-30px 0;
 right:15px;}

 a.nivo-prevNav {left:15px;}
 
 
 
/*========================================
  =========>>> TEST AREA <<<==========
  ========================================*/