/* Fonts ********************************/

/*SIL Open Font License v1.10
This license can also be found at this permalink:  https://www.fontsquirrel.com/license/raleway */

@font-face {
    font-family: 'raleway_light';
    src: url('../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../fonts/raleway-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'raleway_lightitalic';
    src: url('../fonts/raleway-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway_semibold';
    src: url('../fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'raleway_semibolditalic';
    src: url('../fonts/raleway-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



html{
	margin:0;
	padding:0;
	border:0;
}
body{
	font-family:'raleway_light', Verdana, sans-serif;
	color:#555;
	font-size:125%;
	margin:0;
	padding:0;
	border:0;
	background-color: #FFF;
	position:relative;
	overflow-y: scroll;/*masonry gaps?*/
}

/* basic layout ************************************/
.pagewidth{
	max-width:1920px;
	margin:0 auto;
	padding:0 2vw;
	overflow:hidden;
	position:relative;
}

.inner{
	position:relative;
	margin:2vw 4vw 2vw;
	overflow:hidden/*clearing*/;
}

#internal #content .pagewidth>.inner{
	margin:2vw 8vw 2vw;/*wider margin on text pages*/
}



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

.left{float:left;}
.right{float:right;}
.center{margin:0 auto;text-align:center;}

/* header ************************************/
#header{
	position:fixed;
	z-index:50;
	width:100%;
	left:0;
	right:0;
	margin:0;
	height:75px;
	background-color: #FFF;
	box-shadow:1px 1px 8px #ccc;
}
#header .inner{margin:20px 2vw 0;overflow:visible;}

#header h1{text-align: right;margin:0; padding:0.2em 0;font-size:130%;}
#header h1 span {display:inline-block;padding-right:0.4em;margin-right:0.1em;border-right:1px solid #000}
#header h2{text-align: right;margin:0; padding:0.2em 0;} /* home and T&C */
#home #header h1{font-size:160%;}/* now smaller web addr */


#content{
	background-color:#E0E0E0;
	padding-top:100px; /* header = 75px */
	padding-bottom:2vw;
}


/* nav ***************************************/
#navBtn{
	width:50px;
	height:50px;
	background:url(../gfx/navBtn.svg) center top no-repeat;
	/*background-size:40px 110px;*/ /* w h */
	position:absolute;
	top:0; left:0;
	z-index:100;
	cursor:pointer;
}

#navBtn.open{
	background-position:center bottom;
}



#mainnavpanel{
	padding:0;
	margin:0;
	position:fixed;
	height:100%;
	width: 33%;
	left:0;
	top:75px;
	z-index:100;
	background:url(../gfx/menuBG.png);
	font-size:125%;
	overflow:hidden;
	/*display:none; injQ*/
}

ul#mainnav {
	padding:20px 0 0 0;
	margin:0 0 0 4vw;
	list-style:none;
	text-align:left;
}

#mainnav ul{
	padding:0 0 0 1.4em;
	font-size:90%;
}

#mainnav li{
	padding:0;
	margin:0;
}

#mainnav a{
	display:block;
	padding:4px 0;
	overflow:hidden;
	text-decoration:none;
}

#mainnav a:hover{
	color:#222;
	font-family:'raleway_semibold', Verdana, sans-serif;
}

#mainnav .down a{
	background-position:center left;
	color:#222;
}
#mainnav .down a:hover{
	color:#777;
}

/* home ******************************/
#home #content h1 {
	margin:0;
	padding:0;
}

#home #content h2{font-size:120%;margin:0}/* #content H1 intro*/

.panel{
	width:40%;
	padding: .5em 0 ;
	margin: 1em auto 2em;
	border-top:1px solid #555;
	border-bottom:1px solid #555;
}

#content h1 span.smaller{font-size:0.7em;}



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

.gallerywrap{margin: 0 2vw;}

figure{
	display:block;
	padding:0;
	margin:0;
	box-sizing: border-box;
}

.gallery .inner{
	margin:0;
	border:4px solid #E0E0E0;
}

/*.gallery .ce-image{padding:0!important;margin:0!important;position:relative;}*/

.gallery .grid-item{position:relative;}/* a z-indexes */

.gallery .grid-item a{
	position:relative;
	display:block;
}


.gallery .lightbox-fade{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#444;
	opacity:0.0;
	z-index:5;

}
.gallery figcaption.image-caption {
	display:block;
	position:absolute;
	top:45%;
	width:100%;
	color:#FFF;
	text-align: center;
	opacity:0.0;
	z-index:10;
	font-size:85%;
}

.gallery .grid-sizer{width:8.333%;}
.gallery .grid-item{width:16.666%;}

.gallery .grid-item--width3, .grid-item--width3{width:24.999%;}
.gallery .grid-item--width6, .grid-item--width6{width:49.998%;}
.gallery .grid-item--width4, .grid-item--width4{width:33.333%;}
.gallery .grid-item--width8, .grid-item--width8{width:66.666%;}
.gallery .grid-item--width9, .grid-item--width9{width:74.997%;}
.gallery .grid-item--width2, .grid-item--width2{width:16.666%;}
.gallery .grid-item--width12, .grid-item--width12{width:100%;}
/* asymmetric layouts */
.gallery .grid-item--width5, .grid-item--width5{width:41.665%;} /* narrowhalf */
.gallery .grid-item--width7, .grid-item--width7{width:58.331%;} /* widehalf */


.gallery hr{height:0; clear: both; border: 1px solid transparent;padding:0;margin:-1px 0 0}

/*.fancybox-content{width:auto!important;}*/


#footer{
	font-size:85%;
	position:relative;
	z-index:60;
	color:#555;
	margin:0 0 6vw;
	background-color: #FFF;
}
#footer p{
	margin:0;
	padding:0;
}
#footer .inner{margin:2vw;}
#footer .right{text-align:right;}

.footer1{width:45%;padding-top:5px;}
.footer2{width:55%}

/* SoMe icons */
#footer .ce-bodytext {font-size:115%;padding:.1em 0;}
#footer .ce-right .ce-gallery{display:inline-block; float:right;}
#footer .ce-right .inner{margin:0;}
#footer .cols_3 .ce-column{width:33.3%; float:left;}
#footer img.image-embed-item {width:32px!important;}
#footer .ce-bodytext a, #footer .ce-column img{padding-left:7px;}



/* basic typography *********************************/

img{border:0;display:block;}
a:focus, a:active {border: 0;outline: 0;}
a{color:inherit;text-decoration:underline;}
a:hover{color:inherit;text-decoration:none;}

h1{margin:0;padding:0 0 .3em;font-weight:normal;font-size:160%;color:#000;}
h2{margin:0;padding:0 0 0.3em;font-weight:normal;font-size:130%;color:#000;}
h3{font-family:'raleway_semibold'; margin:0;padding:0.7em 0 .2em;font-weight:normal;font-size:120%;color:#000;}
h4,h5,h6{font-family:'raleway_italic';margin:0;padding:.7em 0 0;font-size:110%; color:#888;}
p{margin:0;padding:.2em 0 1em;}

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

b, strong{font-family:'raleway_semibold', Verdana, sans-serif;font-weight:bold;}
i, em {font-family: 'raleway_italic', Verdana, sans-serif;font-style:normal;}
b i, i b, strong i, i strong, b em, em b, strong em, em strong {font-family: 'raleway_semibolditalic', Verdana, sans-serif;font-weight:bold;font-style:normal;}

.smaller{font-size:90%;}

.indent{margin-left:1em}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center, .ce-headline-center{text-align:center;}
.text-justify{text-align:justify;}

/* responsive images ***********************/
.ce-textpic img, #content img{
	width:100%!important;
	height:auto!important;
}

#content .cols_1 .ce-column figure{
	padding:0;
	margin:0;
}

/* centred above or below */
#content .ce-textpic .ce-gallery{display:inline-block;}
#content .ce-textpic.ce-center {text-align: center;}

/* intext images - half width */
#content .ce-textpic.ce-intext{
	overflow:hidden;
}

#content .ce-textpic.ce-intext.ce-left .ce-gallery{
	width:50%;
	float:left;
	position:relative;
}
#content .ce-textpic.ce-intext.ce-left .ce-gallery .ce-row{
	margin-right:2vw;
}

#content .ce-textpic.ce-intext.ce-right .ce-gallery{
	width:50%;
	float:right;
	position:relative;
}
#content .ce-textpic.ce-intext.ce-right .ce-gallery .ce-row{
	padding-left:2vw;
}

#content .ce-textmedia{/* inner wrap */margin:0 0 2vw;}

#content .ce-textpic.ce-intext.ce-right .ce-bodytext{
	float:left;
	width:50%;
}
#content .ce-textpic.ce-intext.ce-left .ce-bodytext{
	float:right;
	width:50%;
}

#content .cols_2 .ce-column{
	width:50%;
	float:left;
}
#content .cols_3 .ce-column{
	width:33.3%;
	float:left;
}

#content .cols_4 .ce-column{
	width:25%;
	float:left;
}

#content .cols_5 .ce-column{width:20%;float:left;}

#content .cols_2 figure.image, #content .cols_3 figure.image{/* inner wrap */margin:0 1.5vw 2vw;}
#content .cols_2 .ce-row, #content .cols_3 .figure.image{
	margin:0 -1.5vw;
}


/* responsive/mobile/tablet ************************/

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

@media screen and (min-width: 1921px){ 
	/* larger monitors */
	#header{height:125px;}
	#header .inner{margin-top:40px;}
	#content{padding-top:140px; /* header + 15px */}
}


@media screen and (max-width: 1310px){ 

	.panel{width:45%;} /* heading rules */

.pagewidth{max-width:1200px;}



}

@media screen and (max-width: 1090px){
	.panel{width:40%;} /* heading rules */
	#footer .ce-bodytext {font-size:105%;}
	
/*#mainnav{margin-top:20px;}*/
}


@media screen and (max-width: 990px){

#footer{font-size:75%;}
#footer img.image-embed-item {width:25px!important;}

/* galleries as 2 col ?? */
/*.quarter, .grid-sizer, .gallery-item{width:50%;}
.half, .gallery-item.width_1{width:100%;}*/


}

@media screen and (max-width: 940px){

#header .inner, #header .pagewidth{overflow:visible;}
#header .twothirds{width:90%}

#mainnavpanel{width:41.665%;}



.panel{width:55%;} /* heading rules */

#footer .pagewidth>.inner>div{
	float:none;
	text-align:left!important;
	width:auto;
}
#footer .ce-bodytext a{display: inline-block;padding-left:0px;margin-right:10px}
#footer .ce-column img{padding-left:10px;}
}



/* tablets ipads etc */
@media screen and (max-width: 768px){ 

	#header h1{font-size:120%;}

	#mainnavpanel{width:66%;}


}

/* ipad portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

	/*galleries as 2 col only */
	.gallery hr{display:none;}
	.gallery .grid-sizer, .gallery .grid-item{width:49.998%;}
	.gallery .grid-item--width3, .grid-item--width3,
	.gallery .grid-item--width6, .grid-item--width6,
	.gallery .grid-item--width4, .grid-item--width4,
	.gallery .grid-item--width8, .grid-item--width8,
	.gallery .grid-item--width9, .grid-item--width9,
	.gallery .grid-item--width2, .grid-item--width2,
	.gallery .grid-item--width12, .grid-item--width12, 
	.gallery .grid-item--width5, .grid-item--width5, 
	.gallery .grid-item--width7, .grid-item--width7{width:49.998%;}

}

/* bigger smartphones was 580px */
@media screen and (max-width: 630px){ 
.panel{width:65%;} /* heading rules */
#header h2{font-size:110%;padding-top:3px;}
#home #content h1{font-size:150%;}
#home #content h2{font-size:100%;}
#mainnavpanel{width:50%;}
#navBtn{
	width:35px;
	height:35px;
	background:url(../gfx/navBtn.svg) center 1px no-repeat;
	background-size:35px auto; /* w h */
	top:2px; left:0;
}
#navBtn.open{background-position:center -50px;}
/*galleries as 2 col only */
.gallery hr{display:none;}
.gallery .grid-sizer, .gallery .grid-item{width:50%;}
.gallery .grid-item--width3, .grid-item--width3,
.gallery .grid-item--width6, .grid-item--width6,
.gallery .grid-item--width4, .grid-item--width4,
.gallery .grid-item--width8, .grid-item--width8,
.gallery .grid-item--width9, .grid-item--width9,
.gallery .grid-item--width2, .grid-item--width2,
.gallery .grid-item--width12, .grid-item--width12, 
.gallery .grid-item--width5, .grid-item--width5, 
.gallery .grid-item--width7, .grid-item--width7{width:50%;}
}

/* smartphones */
@media screen and (max-width: 480px){ 
	body{color:#333;}

	#header h1 span {display:block;padding:0;margin:0;border:none;text-align: right;}
	
	#header h1{font-size:100%; padding:0}
	#header h2{font-size:90%;}
	.panel{width:85%;margin: .5em auto 1em;} /* heading rules */
	#home #content h1{font-size:120%;}
	#home #content h2{font-size:90%;}
	#mainnavpanel{width:75%;}


#content{font-size:115%}

#footer{font-size:90%;color:#000;}
#footer .inner {margin:4vw 2vw}

/*galleries as 1 col only */
.gallery .grid-sizer, .gallery .grid-item{width:100%;}
.gallery .grid-item--width3, .grid-item--width3,
.gallery .grid-item--width6, .grid-item--width6,
.gallery .grid-item--width4, .grid-item--width4,
.gallery .grid-item--width8, .grid-item--width8,
.gallery .grid-item--width9, .grid-item--width9,
.gallery .grid-item--width2, .grid-item--width2,
.gallery .grid-item--width12, .grid-item--width12, 
.gallery .grid-item--width5, .grid-item--width5, 
.gallery .grid-item--width7, .grid-item--width7{width:100%;}
}



}