/* fonts ***********************/
/* SIL Open Font License v1.10 */

@font-face {
    font-family: 'fslato-thin';
    src: url('../fonts/fslato-thin.woff2') format('woff2'),
         url('../fonts/fslato-thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fslato-light';
    src: url('../fonts/fslato-light.woff2') format('woff2'),
         url('../fonts/fslato-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fslato-regular';
    src: url('../fonts/fslato-regular.woff2') format('woff2'),
         url('../fonts/fslato-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fslato-lightitalic';
    src: url('../fonts/fslato-lightitalic.woff2') format('woff2'),
         url('../fonts/fslato-lightitalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fslato-semibold';
    src: url('../fonts/fslato-semibold.woff2') format('woff2'),
         url('../fonts/fslato-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fslato-semibolditalic';
    src: url('../fonts/fslato-semibolditalic.woff2') format('woff2'),
         url('../fonts/fslato-semibolditalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*
Blue   #65A1B9
DBlue  #688EAB
Khaki  #C9B873
Green  #94AB7D
Red    #D98457

/* structure *******************/
html {
	margin: 0;
	border: 0;
	padding:0;
	height:100%;
}
body {
	margin: 0;
	border: 0;
	padding:0;
	height:100%;
	font-family: 'fslato-light', Verdana, sans-serif;
	background-color:#E5E2E1;
	color:#646779;
}

#pagefade{background: url(../gfx/bg_base.png) left bottom repeat-x;}


#pagewrap{
	max-width:1800px;
	min-height:90vh;
	position:relative;
	overflow:hidden;/*clearing*/
	margin:0 auto;
	padding:1vw 8vw 6vw;
}

.inner{margin:0 1vw 2vw;position:relative;}
.inner.header{margin-bottom:0;}
#item #colMain>.inner, #gallery #colMain>.inner{margin:0 0 2vw;}

#music .inner {margin-bottom:2vw;}

.quarter{width:25%;}
.half{width:50%;}
.threequarter{width:75%;}
.third{width:33.3%;}
.twothirds{width:66.6%;}

.left{float:left;}
.right{float:right;}

/* header **************/
#header {overflow:visible;min-height:100px;position:relative;}
#header p.strapline{font-family: 'fslato-semibold', Verdana , sans-serif;font-size:95%;padding:.2em 0 1em;}
#logo{width:250px; height:auto;}

#contentwrap{clear:both;}
#home #contentwrap{overflow:hidden;}

/* nav ***************************************/
#navBtn{
	width:auto;
	min-height:28px;
	background:url(../gfx/navBtn.svg) right top no-repeat;
	background-size:26px 70px; /* w h */
	position:absolute;
	top:67px; 
	right:0;
	padding-right:35px;
	cursor:pointer;
	z-index:150;
}
#navBtn span{display:inline-block;padding-top:2px;}

#navBtn.open{
	color:#23272D;
	background-position:right bottom;
}



#navWrapper ul{
	background:url(../gfx/itemBG.jpg) center no-repeat #ECEAEB;
	background-size:100% 100%;
	box-shadow:-3px 3px 10px #8E806B; /*#A89C8B */
	width:auto;
	min-width:220px;
	position:absolute;
	padding:35px 0 0 0;
	top:57px; right:0;
	cursor:pointer;
	z-index:100;
	text-align:left;
	margin:0;
	list-style:none;
	display:none;
}

#navWrapper ul ul.sub{ 
	display:block;
	position:relative;
	box-shadow: none;
	padding:0;
	min-width:auto;
	background:none;
	top:auto;
}



#navWrapper li{
	padding:.5em 0 .5em 1em;
	margin:0;
}

#navWrapper a, #navWrapper .down a:hover{
	display:block;
	text-decoration:none;
}

#navWrapper a:hover, #navWrapper .down a{
	background-position:left bottom;
	color:#000;
}

ul.subnav{
	list-style:none;
	padding:0;
	margin:0;
	border-top:1px solid #a7b0ab /*#8E806B*/;
}
.subnav li {
	padding:0;
	margin:0;
}
.subnav li a {
	padding:.3em .5em;
	display:block;
	text-decoration:none;
	border-bottom:1px solid #a7b0ab;
}

/* landing page *********/
#home #colMain{padding:18vh 0; overflow:hidden;}
#home #strip1 .ce-text {font-size:200%;padding:0 15% 15vh;font-family: 'fslato-thin';}

.block .inner{height:25vh;margin:5px;overflow:hidden;}
#c1138 .block{float:right;}/* logo block */
#c1138 .block .inner{margin-left:0;}
#c720 .block .inner{background:#94AB7D} /* art */
#c735 .block .inner{background:#65A1B9} /* design */
#c1137 .block .inner{background:#D98457} /* music */

.block h2{color:#FFF;font-size:280%;position:absolute;bottom:10px;left:10px;margin:0;padding:0 0 0 5px;z-index:10;}
.block a{display:block;height:25vh;width:auto;position:relative;z-index:15;}
#c1138 .block .ce-textpic{position:absolute;bottom:0;left:10px;margin:0;padding:0}
#c1138 .block .ce-row{width:350px;}/*logo*/
#c1138 .block p{margin:0;padding:0;font-size:115%;}/*strapline*/
#c1138 .block .ce-column{position:relative;height:auto;opacity:1;}

/* block image BGs */
.block .ce-gallery{margin:0;}
.block .ce-column{position:absolute;width:100%;height:25vh;left:0;right:0;background-position:center; background-repeat:no-repeat;background-size: cover;opacity:0;}

/*art home ****************/
.grid-sizer, #colMain .grid-item {width: 25%;position:relative;}
/* 2 columns */
 #colMain .grid-item--width2,  #colMain .grid-item--fourthree {width: 50%;}
 #colMain .grid-item--width4{width:100%;} /*fullwidth*/
 #colMain .grid-item--width3{width:75%;}
 #colMain .grid-item--width1third{width:33.3%}
 #colMain .grid-item--width2third{width:66.6%}


.grid-item .ce-text{padding:1vw 2vw 2vw;}/* in-grid page text */

.tooltip {
	display:none;/*reveal in jQ*/
	position:absolute;
	border:1px solid #FFF;
	background: #637957;
	padding:10px;
	color:#FFF;
	left:0;
	top:0;
	font-size:90%;
	z-index:500;
}
.inner.header{margin:0;/*content text element*/}

#art .inner.header{display:none;/*content text element*/}

/* music **********************************/
#music .ce-textmedia .grid-item .inner {padding:1.5vw 2vw;} /*grid-item text*/
#music #strip1 .grid-item, #music #striphalf .grid-item, #music #columns .grid-item, #music #footer .grid-item{width:auto;}

/* gallery ********************************/

#colMain .grid-item .inner, #colMain .gallery .item .inner, #topimage .inner, .panel, #design #colMain .gallery>.inner{background:url(../gfx/itemBG.jpg) center no-repeat #ECEAEB;background-size:100% 100%;box-shadow:-3px 3px 10px #A89C8B;padding:6px 6px 3px}
/* reset for #design */
#design #colMain .grid-item .inner{background:none;padding:0;box-shadow:none;margin:1px 2px 0;}

.panel{padding:1.5vw 2vw;}

#topimage .inner{padding:20px 20px 30px}
/* #A89C8B*/

#topimage, #topimage .inner{min-height:70vh;}

.slide{min-height:72vh;background-size:contain;background-repeat:no-repeat;background-position:center;position:absolute;left:0;right:0;top:2vh;}

.tall #topimage, .tall #topimage .inner{min-height:90vh;}
.tall .slide{min-height:92vh} 

/*.project-single .article{position:relative;min-height:100vw!important;border:solid 1px #ade;}

.project-single .itemdetail.inner{position:relative;min-height:100vw!important;border:dotted 1px #eee;}

.gallery-text-wrapper{z-index:50;position:relative;min-height:50vh}*/

.gallery .item h2{
	font-size:100%;
	margin:0 0 3px;
	padding:4px 5px;
	background-color:#8FA29A/*#96a29e/*#637957*/;
	color:#FFF;
}
.gallery .item h2 a{
	text-decoration:none;
}
.categories{font-size:90%;}
/*#gallery .item .inner{min-height:20.5vw;}
.category-menu .inner{min-height:21.4vw;}*/
/* cat menu layering */
/*#c968{
	position:absolute;
	z-index:100;
}*/
/*.list-wrapper{
	position:relative;
	z-index:1;
}*/
/*.gallery.item{min-height:23.8vw;}*/
.category-menu{min-height:23vw;}
.category-menu h3{padding:0 0 .5em; margin:0;}
.category-menu .inner{margin-bottom:0;}



/*.page-navigation, .f3-widget-paginator{
	clear:both;
	overflow:hidden;
}*/



.related ul{
	padding:0;
	margin:0 0 2vw;
	list-style:none;
}

.related li{
	padding:0;
	margin:0;
}

.related a, .backlink a {
	display:inline-block;
	padding: 5px 0 5px 25px;
	background:url(../gfx/arrowGreyR.svg) center left no-repeat;
	background-size:16px
}

.backlink{
	margin-top:4vw;
	border-top:1px solid #a7b0ab;
	padding-top:5px;
}
.backlink a {
	background-image:url(../gfx/arrowGreyL.svg);
}

.f3-widget-paginator{padding:1vw 0 2vw;}
.f3-widget-paginator ul{
	padding:0;
	margin:0 1vw;
	list-style:none;
}
.f3-widget-paginator li{
	display:inline-block;
	padding:0 1em 0 0;
	margin:0;
}
.f3-widget-paginator li.current{
	font-family: 'fslato-semibold', Verdana , sans-serif;font-weight:bold;
}

#strip1, #strip2{clear:both;}
#columns{clear:both;}

#footer{clear:both;font-size:85%;margin:10vh 0;}
/*#item #footer{margin:170vh 0 10vh;}/* emergency - WHY is it not clearing??*/
#footer .inner{padding-bottom:4vw;}
/* SoMe icons */
#footer .ce-gallery.cols_2 {width:80px;float:right;}
#design #footer .grid-item{width:auto;}
#music #footer .grid-item.ce-gallery.cols_2, #design #footer .grid-item .ce-gallery.cols_2 {width:110px;} /* grid-item glitch */ 

#footer .ce-gallery.cols_2 .ce-column {width:50%;float:left;}
#footer .ce-gallery.cols_2 a {display:block; margin-left:15px!important;}




/* responsive images ***********************/
.item img, .ce-textpic img, .video, video, .video-embed-item{
	width:100%!important;
	height:auto!important;
}
#art .video-embed{padding:0 4vw;}
#art .video-embed-item{max-width:924px;margin:0 auto;display:inline-block;}


figure.image, figure.video{
	padding:0;
	margin:0;
	display:block;
	text-align: center;
}

.ce-gallery{
	margin-bottom:1em;
}

#music .ce-gallery, #design .ce-gallery{margin-bottom:0;}

/* intext images - half width */
#contentwrap .ce-textpic.ce-intext{
	overflow:hidden;
}
/*#contentwrap .ce-textpic.ce-intext .ce-bodytext, #contentwrap .ce-textpic.ce-intext .ce-gallery{
	width:48%;
}*/
#contentwrap .ce-textpic.ce-intext.ce-left .ce-gallery{
	/*margin-right:.3vw;*/
	width:50%;
	float:left;
}
#contentwrap .ce-textpic.ce-intext.ce-left .ce-gallery .ce-row{
	margin-right:0.7vw;
}

#contentwrap .ce-textpic.ce-intext.ce-right .ce-gallery{
	width:50%;
	float:right;
}
#contentwrap .ce-textpic.ce-intext.ce-right .ce-gallery .ce-row{
	margin-left:0.7vw;
}

#contentwrap .ce-textpic.ce-intext.ce-right .ce-bodytext{
	float:left;
	width:50%;
}
#contentwrap .ce-textpic.ce-intext.ce-right .ce-bodytext *{
	margin-right:0.7vw;
}
#contentwrap .ce-textpic.ce-intext.ce-left .ce-bodytext{
	float:right;
	width:50%;
}
#contentwrap .ce-textpic.ce-intext.ce-left .ce-bodytext *{
	margin-left:0.7vw;
}

#contentwrap .ce-textpic .ce-gallery.cols_3 .ce-column{width:33.3%;float:left;}
#contentwrap .ce-textpic .ce-gallery.cols_3{overflow:hidden;}
/*#contentwrap .ce-textpic .ce-gallery.cols_3 .image-item {border:1px solid #FFF}*/



/* basic text formatting *******************/
img{border:0;display:inline-block;margin:0;padding:0;}
figure{border:0;display:block;margin:0!important;padding:0!important;}
a:focus, a:active {border: 0;outline: 0;}
a:link,a:visited{color:inherit;text-decoration:underline;}
a:hover,a:visited:hover{color:inherit;text-decoration:none;}

h1,h2,h3,h4,h5,h6{color:#6B8274;/*#637957*/}
h1{margin:0;padding:0 0 .5em;font-weight:normal;font-size:140%;color:#577074;}
h2{margin:0;padding:0.2em 0 .7em;font-weight:normal;font-size:130%;color:#577074;}
h3{margin:0;padding:0.7em 0 .2em;font-weight:normal;font-size:100%;font-family: 'fslato-semibold', Verdana , sans-serif;font-weight:bold;}
h4,h5,h6{margin:0;padding:.7em 0 0;font-size:100%}
h5,h6{font-weight:normal;font-style:italic;}
p{margin:0;padding:.2em 0 .7em;}

ul, ol{margin:0; padding:0 2em;}
li{margin:0; padding-bottom:0.5em;}

b, strong{font-family: 'fslato-semibold', Verdana , sans-serif;font-weight:bold;}
i, em {font-family: 'fslato-lightitalic', Verdana, sans-serif;font-style:italic;}
b i, i b, strong i, i strong, b em, em b, strong em, em strong {font-family: 'fslato-semibolditalic', Verdana, sans-serif;font-weight:bold;font-style:italic;}

.indent{margin-left:15px}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-justify{text-align:justify;}

.smaller{font-size:85%;}

a.button {
	border:1px solid #FFF;
	background:url(../gfx/arrowWhiteR.svg) center left no-repeat #96a29e;
	background-size:23px 20px;
	color:#FFF;
	display:inline-block;
	padding: 5px 8px 5px 30px;
	text-decoration:none;
}

a.smFB {
	background:url(../gfx/FB.svg) center left no-repeat;
	background-size:20px 20px;
	display:inline-block;
	padding: 1px 0 1px 30px;
}
a.smInsta {
	background:url(../gfx/Insta.svg) center left no-repeat;
	background-size:20px 20px;
	display:inline-block;
	padding: 1px 0 1px 30px;
}



/* responsive breakpoints **************************/
html {-webkit-text-size-adjust: none;}/*set globally for iOS */

@media screen and (min-width: 1200px){ 
/* limits for wider screens */


}

/* gallery glitch */
@media screen and (max-width: 1750px){ 
.category-menu{min-height:23.5vw;}
.inner {margin:0 0.7vw 1.4vw;}
}

/* reduce margins */
@media screen and (max-width: 1160px){ 
#pagewrap{padding:2vw 3vw 6vw;}
/* gallery 3 col */
.category-menu{min-height:34vw;}
.quarter{width:33.3%}
.grid-sizer, .grid-item {width:33.3%;}
}

/* 3col */
@media screen and (max-width: 935px){ 
#pagewrap{padding:3vw 3vw 6vw;}
.category-menu{min-height:36vw;}
.quarter{width:33.3%}
.grid-sizer,
.grid-item {width:33.3%;}
/* 2 columns */
.grid-item--width2, .grid-item--fourthree {width:66.6%;}
}

/* header tweaks */
@media screen and (max-width: 815px){ 
#pagewrap{padding:2vw 3vw 6vw;}
#header {min-height:80px;}
#header p.brand{font-size:180%;}
/*#header p.strapline{font-family: 'fslato-semibold', Verdana , sans-serif;font-size:90%;padding:0;}*/
/*#logo{width:200px; height:auto;}*/
#navWrapper ul{min-width:33.3%;}
#branding.twothirds{width:90%}
#navWrapper.third{width:10%}
#navBtn span{display:none;}

}

/* iPad and Tablet */
@media screen and (max-width: 768px){ 
body{font-size:105%;font-family: 'fslato-regular', Verdana, sans-serif;}
#home .video-embed{padding:0;}
.category-menu{min-height:36vw;}

#topimage, #topimage .inner{min-height:60vh;}
.slide{min-height:62vh;}

.tall #topimage, .tall #topimage .inner{min-height:80vh;}
.tall .slide{min-height:82vh}
}

/*2 col*/
/* header tweak */
@media screen and (max-width: 730px){ 
body{font-size:110%;}
.quarter, .grid-sizer, .grid-item {width:50%;}
.half{width:auto}
.grid-item--width2, .grid-item--fourthree, .grid-item--width4 {width: 100%;}
.category-menu{min-height:56vw;}
.strapline{clear:both;}
#logo{width:200px}
#navBtn{top:50px;}
#navWrapper ul{min-width:60%; top:40px}

#topimage, #topimage .inner{min-height:35vh;}
.slide{min-height:37vh;}

.tall #topimage, .tall #topimage .inner{min-height:70vh;}
.tall .slide{min-height:72vh}
.half.left.tall, .half.right{float:none;width:auto;}
.gallery .item h2{font-size:90%;line-height:1.1;min-height:2.5em;}


}

/*1 col*/
@media screen and (max-width: 480px){
body{font-size:120%;font-family: 'fslato-regular', Verdana, sans-serif;}
#header p.brand{font-size:170%;font-family: 'fslato-light';}
 #pagewrap{padding:15px 10px 30px;}
.inner{margin:5px 5px 10px;}
/*.quarter{width:100%}
.grid-sizer,
.grid-item {width:100%;}
/* 2 columns */
/*.grid-item--width2, .grid-item--fourthree {width:100%;}
.left,.right{float:none;}*/
#header {min-height:110px;}
#contentwrap .third{width:100%;}
.category-menu{display:none;}
#branding.twothirds{width:auto}
.strapline{font-size:80%; width:auto;}
#navWrapper ul{min-width:70%;}


}