/* 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 1.3vw 2.6vw;position:relative;}
.inner.header{margin-bottom:0;}
#item #colMain>.inner, #gallery #colMain>.inner{margin:0 0 2.6vw;}

.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;}
#header p.brand{font-size:220%;color:#6B8274/*#637957*/;padding:0;font-family: 'fslato-light';}
#header p.strapline{font-family: 'fslato-semibold', Verdana , sans-serif;font-size:95%;padding:.5em 0;}
#logo{width:215px; height:auto;}

.contentwrap{overflow:hidden;clear:left;}

/* 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:4.2vw; 
	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:0; right:0;
	cursor:pointer;
	z-index:100;
	text-align:left;
	margin:0;
	list-style:none;
	display:none;
}



#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 .contentwrap{padding:20vh 0}
.block .inner{min-height:25vh;margin:5px;}
.block.right .inner{margin-left:0;}/* logo block */
.block.art .inner{background:#94AB7D}
.block.design .inner{background:#65A1B9}
.block.music .inner{background:#D98457}

.block h2{color:#FFF;font-size:280%;position:absolute;bottom:10px;left:10px;margin:0;padding:0 0 0 5px}
.block .inner>div{position:absolute;bottom:0;left:10px;margin:0;padding:0}
.block .strapline{padding-bottom:0; font-size:120%;}
.block #logo{width:320px;}

/*art home ****************/
.grid-sizer,
.grid-item {width: 25%;position:relative;}
/* 2 columns */
.grid-item--width2, .grid-item--fourthree {width: 50%;}
/*.grid-item .gallery-img{
	margin:6px;
}*/

.grid-item .ce-content{padding:1vw 2vw 2vw;}/* home 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{display:none;/*content text element*/}

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

.item .inner, #topimage .inner, .panel{/*min-height:17vw;*/background:url(../gfx/itemBG.jpg) center no-repeat #ECEAEB;background-size:100% 100%;box-shadow:-3px 3px 10px #A89C8B;padding:6px 6px 3px}

.panel{padding:1vw 2vw 2vw;}

#topimage .inner{padding:20px}
/* #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}


.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, .category-menu{min-height:23.8vw;}
.category-menu h3{padding:0 0 .5em; margin:0;}

.page-navigation{
	clear:both;
}

.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);
}

#strip{clear:both;}
#columns{clear:both;}

#footer{clear:both;font-size:85%;}
#footer .inner{padding-bottom:4vw;}




/* 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;}


figure.image, figure.video{
	padding:0;
	margin:0;
	display:block;
}

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

/* 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:.3vw;
}

#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:.3vw;
}

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

#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;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: 1120px){ 
.gallery.item, .category-menu{min-height:24vw;}
}

/* reduce margins */
@media screen and (max-width: 1045px){ 
#pagewrap{padding:3vw 4vw 6vw;}
.gallery.item, .category-menu{min-height:27vw;}
}

/* 3col */
@media screen and (max-width: 935px){ 
#pagewrap{padding:3vw 3vw 6vw;}
.gallery.item, .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:110%;font-family: 'fslato-regular', Verdana, sans-serif;}
#home .video-embed{padding:0;}
}

/*2 col*/
/* header tweak */
@media screen and (max-width: 705px){ 
.quarter{width:50%}
.half{width:auto}
.grid-sizer,
.grid-item {width:50%;}
/* 2 columns */
.grid-item--width2, .grid-item--fourthree {width:100%;}
.gallery.item, .category-menu{min-height:54vw;}
.strapline{clear:both;}
.brand{margin-top:4px;}
#logo{width:70px;}
#navBtn{top:12px;}
#navWrapper ul{min-width:60%;}


}

/*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:10px 15px 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;}
#logo{float:left;}
#branding.twothirds{width:auto}
.brand{margin-top:0;padding-top:5px;}
.strapline{font-size:80%; width:70%;}
#navBtn{top:10px;}
#navWrapper ul{min-width:70%;}

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

.slide{min-height:42vh;}

.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;}


}