/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
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}

/*  stylesheet: foliostylesv2.css - W3C CSS Validator results - No error found -  CSS level 3 */

/* general and body background #1E4C63 overflow-y: scroll; */
html{font-family:"Times New Roman", Times, serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{font-weight:400;color:#333;background:#ffffff;width:100%;*zoom:1}
body:after{clear:both}
html, body {height:102%;min-height:102%;}
body {margin:0}
img {height: auto;max-width: 100%;}

/* default links */
a:link{color:#333333; text-decoration:underline;}
a:focus{color:#666666; text-decoration:none;}
a:active,a:hover{color:#cccccc; text-decoration:underline;}
a:visited {color:#333333; text-decoration:underline;}

/* MAIN page wrapper - everything */
.mainwrapper {max-width:1024px;min-height:100%;height:auto !important;margin:0 auto;margin-top:0;padding:0;background:#ffffff;border:1px solid #ffffff;}

/* header */
header{width:100%;margin:3% 0% 1% 0%;padding:0;float:left;text-align:center;border:0px solid #000;}
.container {width:100%;margin:0;padding:0;border:0px solid #F3F;} /* logo */
img.logo{left:0px;border:0px solid #ff6600;margin:0;padding:0;}
.semantic{display:none;}

/* navigation sections */
.sections{width:100%;text-align:center;margin:2% 0 0.5% 0;border:0px solid #efefef;padding:0 0 0em 0;}
.sections ul{margin:0;padding:0;list-style:none}
.sections ul li{display:inline;font-weight:normal;text-transform:uppercase;font-style:normal;font-size:1.2em;line-height: 1.3em;letter-spacing:0.05em;color:#333;margin:0 0.3% 0 0.3%;padding:0;border:0px solid #ccc;}
.sections ul li a {color:#333;text-decoration:none;}
.sections ul li a:hover {color:#6dc6a2;text-decoration:none;border-bottom:0px dotted #6dc6a2;padding-bottom:0em;}
.sections ul li a.current {color:#6dc6a2;text-decoration:none;text-transform:uppercase;border-bottom:1px dotted #6dc6a2;padding:0;}
.sections .blueDot {color:#57bfc7;}

/* navigation categories */
.categories {width:100%;text-align:center;margin:2% 0 1.5% 0;border:0px solid #efefef;padding:0.8em 0 0.8em 0;background:#fbfbfb;}
.categories ul{margin:0;padding:0;list-style:none}
.categories ul li{display:inline;font-weight:normal;font-style:italic;font-size:1.2em;line-height: 1.4em;letter-spacing:0.05em;color:#333;margin:0 0.2em 0 0.2em;padding:0;border:0px solid #ccc;}
.categories ul li a {color:#333;text-decoration:none;}
.categories ul li a:hover {color:#333333;text-decoration:none;border-bottom:1px dotted #333333;padding-bottom:0em;}
.categories ul li a.current {color:#333333;text-decoration:none;text-transform:none;border-bottom:1px solid #333333;padding-bottom:0;}
.blueDot {color:#666666;padding:0;margin:0;}

/* back next */
.abovebelow {width:100%;clear:both;margin-top:3em;padding:0;border:0px solid #cccccc;}
.backnext{width:100%;text-align:center;clear:both;margin:3em 0 0 0;padding:1em 0 1em 0;background:#efefef;border:0px solid #000000;}
.backnext ul{list-style:none;margin:0;padding:0;}
.backnext ul li{display:inline;font-weight:normal;font-size:1.2em;letter-spacing:0.05em;color:#333;padding:0;margin:0 0.2em 0 0.3em;}
.backnext ul li a {color:#333;text-decoration:none}
.backnext ul li a:hover {color:#333333;text-decoration:none;border-bottom:1px dotted #333333;padding-bottom:0;}
.backnext ul li a.current {color:#333333;text-decoration:none;text-transform:none;border:0px dotted #6dc6a2;padding-bottom:0;}

/* article */
article {width:100%;margin:0 auto;background:#ffffff;border:0px solid #006600;}
article .item a {opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:block;}
article .item a:hover{opacity:.5} 

/* content - purple */
.contentwrapper {width:100%;text-align:center;margin:0 auto 1% auto;padding:0;border:0px solid #9933ff;}
.contact p {text-align:center;font-size:1.3em;color:#333;font-weight:normal;font-style:italic;padding:0 0 0 0; margin:3% 0 3% 0;letter-spacing:0.04em;border:0px solid #cccccc;}

/* headings */
h1,h2,h3,h4,h5 {font-family:"Times New Roman", Times, serif;}
h1{font-size:50px}
h2{text-align:center;width:100%;font-size:1.7em;color:#333;font-weight:normal;font-style:italic;padding:0 0 0 0; margin:1% 0 2% 0;letter-spacing:0.03em;border:0px solid #cccccc;}
h3{text-align:center;width:100%;font-size:1.7em;color:#333;font-weight:normal;font-style:italic;padding:0 0 0 0; margin:0 0 1.5% 0;letter-spacing:0.03em;border: 0px solid #cccccc;}
h4{text-align:center;font-size:1.4em;color:#333;font-style:italic;font-weight:normal;margin-bottom:1%;;letter-spacing:0.05em;}
h6{font-size:14px;font-weight:600}

/* One project image per row - PROJECT BANNER */
.projectwrapBanner {width:100%;margin:0em auto 0 auto;padding:0 0 0 0;border:0px solid #000000;}
.projectwrapBanner img {width:100%;margin:0em auto 0 auto;padding:0 0 0 0;vertical-align:top;border:0px solid #000000;}
.projectwrapBanner h2{text-align:center;font-size:2em;color:#333;font-weight:normal;font-style:italic;padding:0 0 0 0; margin:2% 0 1.5% 0;letter-spacing:0.03em;border:0px solid #cccccc;}
.projectitemBanner {float:left; width:100%;margin:0 auto 0 auto;background:#ffffff;border:0px solid #99ff66;}
.projectitemBanner p {clear:both;text-align:center;font-size:1.1em;font-style:italic; padding:0.6em 0 1em 0;margin:0 10% 0 10%;color:#333;letter-spacing:0.04em;} 

/* Individual project page and project description */
.projectBanner {width:100%;margin:0em auto 0 auto;padding:0 0 0 0;border:0px solid #000000;}
.projectBanner img {width:100%;margin:0em auto 0em auto;padding:0 0 0 0;vertical-align:top;border:0px solid #efefef;}

.projectBanner h2{text-align:center;font-size:2em;color:#333;font-weight:normal;font-style:italic;padding:0 0 0 0; margin:3% 0 0.8% 0;letter-spacing:0.03em;border:0px solid #cccccc;}
.projectBanner p {width:75%;clear:both;text-align:center;font-size:1.1em;line-height: 1.4em;font-style:italic; padding:0 0 2em 0;margin:0 auto;color:#333;letter-spacing:0.04em;border:0px solid #cccccc;}

.projectBannerOne {width:100%;display:flex;margin:0 auto 0 auto;padding:0 0 0 0;border:0px solid #000000;}
.projectOne {width:100%;display:flex;margin:0.3em auto 1em auto;padding:0;border:0px solid #000000;}
.projectOne p {width:75%;clear:both;text-align:center;font-size:1.1em;line-height: 1.4em;font-style:italic; padding:0;margin:0 auto;color:#333;letter-spacing:0.04em;} 

/* THREE THUMBNAILS PER ROW - was margin:0 auto 2% auto - was ddisplay flex */
.projectwrapThree {width:100%;margin:0 auto 0 auto;padding:0;background:#ffffff;border:0px solid #666666;}
.projectitemThree {float:left; width:33%;height:auto;margin:0 auto 0 auto;background:#ffffff;border:1px solid #ffffff;}
.projectitemThree img {padding:0;margin:0;}
.projectitemThree p {clear:both;text-align:center;font-size:1.1em;color:#333;font-style:italic;letter-spacing:0.04em;padding:0.8em 0 0.8em 0;margin:0;} 
.projectitemThree a {opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:block;}
.projectitemThree a:hover{opacity:.5}



/* Three project images per row - THUMBNAILS - NO GAPS*/
.projectThree {float:left; width:33%;margin:0 auto 0% auto;background:#ffffff;border:0px solid #99ff66;}
.projectThree p {clear:both;text-align:center;font-size:1.1em;font-style:italic; padding:0.8em 0 0em 0;margin:0;color:#333;letter-spacing:0.04em;} 
.projectThree a {opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:block;}
.projectThree a:hover{opacity:.5}

/* Two project images per row - PROJECT IMAGES */
.projectwrapTwo {width:100%;margin:0 auto 0 auto;padding:0;border:0px solid #000000;}
.projectitemTwo {float:left; width:48%;margin:0 auto 2% auto;background:#ffffff;border:0px solid #99ff66;}
.projectitemTwo p {clear:both;text-align:center;font-size:1.1em;font-style:italic; padding:0.8em 0 0em 0;margin:0;color:#333;letter-spacing:0.04em;} 

/* One project image per row - PROJECT IMAGE */
.projectwrapOne {width:100%;margin:0 auto 0 auto;padding:0;border:0px solid #000000;}
.projectitemOne {float:left; width:100%;margin:0 auto 2% auto;background:#ffffff;border:0px solid #99ff66;}
.projectitemOne p {clear:both;text-align:center;font-size:1.1em;line-height: 1.4em;font-style:italic; padding:0.8em 0 0em 0;margin:0;color:#333;letter-spacing:0.04em;} 
.onebigpicture {width:100%;margin:4% auto 0 auto;padding:0;}

/* One project image per row - COLOURS */
.greengrey {background:#e6fce7;}
.projectitemOneGreengrey {float:left; width:95%;padding: 1.5em 0 1.5em 0; margin:0 auto 4% auto;background:#e6fce7;}
.projectitemOneGreenblue {float:left; width:95%;padding: 1.5em 0 1.5em 0; margin:0 auto 4% auto;background:#e6f6f3;}
.projectitemOneblue {float:left; width:100%;padding: 1.5em 0 1.5em 0; margin:0 auto 0 auto;background:#5482b0;}
.projectitemOnegrey {float:left; width:100%;padding: 1.5em 0 1.5em 0; margin:0 auto 0 auto;background:#efefef;}





/**********************************************************************************************************************************************/

/* General */
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
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:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}
table{border-collapse:collapse;border-spacing:0}
p{font-size:16px;line-height:22px;font-weight:400}
img{max-width:100%;height:auto}
aside{display:inline;float:left;width:22.916666666666664%;margin:0 1.0416666666666665%}

/* spacers */
.spacerOne {float:left;width:97%;padding-top: 5%;}
.spacerTwo {float:left;width:97%;padding-top: 3em;}
.spacercategory {margin-bottom:1em;}

/* colours */
.orangered{color:#C39}
.turquoise{color:#399}

/* jump to top */
.topwrap{float:left;text-align:center;width:97%;margin:3em 0 0px 0;padding:0 0em 0 0em;border:0px solid #960;background:#fff}
.top {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:1em;font-weight:bold;text-transform:uppercase;}
.top a:link {color:#666;text-decoration:none;margin:0;padding:0.8em;background:#efefef;border-radius:0.8em;-webkit-border-radius:0.8em;}
.top a:visited {color:#666;margin:0;padding:0.8em;background:#ccc;border-radius:0.8em;-webkit-border-radius:0.8em;}
.top a:active{color:#fff;margin:0;padding:0.8em;background:#ccc;border-radius:0.8em;-webkit-border-radius:0.8em;}
.top a:hover {color:#fff;margin:0;padding:0.8em;background:#ccc;border-radius:0.8em;-webkit-border-radius:0.8em;opacity: 0.6;}
.top a:focus {color:#333;} 

/* index page ****/
.welcomecaption p {width:97%;text-align:center;letter-spacing: 0.5px;font-size:1.3em;line-height:1.4em;font-style:italic;padding:0 0 0 0;margin:0; color:#333}
.welcomecaption h3{padding:0 0 0 0;margin:1% 0 0 0}
.welcomecaption p {width:97%;text-align:center;letter-spacing: 0.5px;font-size:1.3em;line-height:1.4em;font-style:italic;padding:0 0 0 0;margin:0; color:#333}
.welcomecaption a {color:#333; text-decoration:underline;}
.welcomecaption a:hover {color:#666; text-decoration:none;}

/* Contact page ****/
.space {width:97%;padding-bottom: 4%;}

/* Footer **/
footer{width:100%;margin:0 auto 4em auto;background:#ffffff;text-align:center;color:#383838;padding:1em 0 1em 0;border:0px solid #ccc;}
.push {height:2em;clear: both;}
.copyright{width:100%;margin:0 0 0 0;font-size:1em;text-align:center;letter-spacing: 0.04em;padding:0 0 0 0;text-transform:none;color:#333;border:0px solid #ccc;}

/* error and reply page styles **/
.error, .reply{float:left;width:70%;margin:2% 0 5em 5%;border:0px solid #996}

/**********************************************************************************************************************************************/
















/* ONE - MEDIA QUERIES - 1024px ******************************************************************************************************************************/
@media screen and (max-width: 1024px){
.contentwrapper {width:97%;margin:0 auto 0 auto;}
}




/* ONE - MEDIA QUERIES - 940px ******************************************************************************************************************************/
@media screen and (max-width: 940px){

}




/* ONE - MEDIA QUERIES - 800px ******************************************************************************************************************************/
@media screen and (max-width: 800px){	
header{width:100%;margin:0 auto;border:0px solid #ff6600;}
.container {width:97%;margin:2em auto 1em auto;border:0px solid #ff6600;} /* logo */
.projectwrapBanner {width:97%;margin:0em auto 1em auto;padding:0 0 0 0;border:0px solid #de38d4;}
.projectwrapBanner h2 {font-size: 1.9em;margin:0.5em 0 0.8em 0;}
.contentwrapper {width:97%;margin:0 auto 0 auto;}
/* navigation categories */
.categories {width:100%;text-align:center;margin:2% 0 5% 0;border:0px solid #efefef;padding:0.8em 0 0.8em 0;background:#fbfbfb;}
.categories ul{width:80%;margin:0 auto;padding:0 1.5em 0 1.5em;}
.categories ul li{display:inline;font-weight:normal;font-style:italic;font-size:1.2em;line-height: 1.8em;letter-spacing:0.05em;color:#333;margin:0 0.3% 0 0.3%;padding:0;border:0px solid #ccc;}
.projectitemThree p {font-size:1.1em;letter-spacing:0.04em;} 
.projectitemTwo {width:48%;}
.projectitemTwo p {font-size:1.1em;letter-spacing:0.04em;} 
}




/* TWO - MEDIA QUERIES - 768px ***************************************************************************************************************/
@media screen and (max-width: 768px){





/* navigation categories */
.categories {width:100%;text-align:center;margin:2% 0 5% 0;border:0px solid #efefef;padding:0.8em 0 0.8em 0;background:#fbfbfb;}
.categories ul{width:85%;margin:0 auto;padding:0 1.5em 0 1.5em;}
.categories ul li{display:inline;font-weight:normal;font-style:italic;font-size:1.2em;line-height: 1.8em;letter-spacing:0.05em;color:#333;margin:0 0.3% 0 0.3%;padding:0;border:0px solid #ccc;}
/* Two project images per row - PROJECT IMAGES */
.projectwrapTwo {width:100%;margin:0 auto 0 auto;padding:0;border:0px solid #000000;}
.projectitemTwo {float:left; width:45%;margin:0 auto 0 auto;background:#ffffff;border:0px solid #99ff66;}
.projectitemTwo p {clear:both;text-align:center;font-size:1.1em;font-style:italic; padding:0.8em 0 0em 0;margin:0;color:#333;letter-spacing:0.04em;} 
}





/* TWO - MEDIA QUERIES - 600px ***************************************************************************************************************/
@media screen and (max-width: 600px){
header{width:100%;margin:0 auto;border:0px solid #ff6600;}
.container {width:97%;margin:1.5em auto 1em auto;border:0px solid #ff6600;} /* logo */
.projectwrapBanner {width:97%;margin:0em auto 0 auto;padding:0 0 0 0;border:0px solid #de38d4;}
.projectwrapBanner img {width:97%;margin:1em auto 0em auto;}
.contentwrapper {width:97%;margin:0 auto 0 auto;}
.projectBanner {margin:0 auto 1em auto;border: 0px solid #333;}
.projectBanner h2{text-align:center;font-size:1.8em;margin:0% 0 0% 0;padding:0;}
.projectBanner img {margin:1em auto 0 auto;border:0px solid #ffcc33;}
.projectOne {margin:0em auto 1em auto;}
.projectOne p {width:90%;clear:both;text-align:center;font-size:1.1em;line-height: 1.4em;margin:0 auto;} 
/* navigation categories */
.categories {width:100%;text-align:center;margin:2% 0 5% 0;border:0px solid #efefef;padding:0.8em 0 0.8em 0;background:#fbfbfb;}
/* Two project images per row - PROJECT IMAGES */

.categories ul{width:85%;margin:0 auto;padding:0 1.5em 0 1.5em;}
.categories ul li{display:inline;font-weight:normal;font-style:italic;font-size:1.2em;line-height: 1.8em;letter-spacing:0.05em;color:#333;margin:0 0.3% 0 0.3%;padding:0;border:0px solid #ccc;}


.projectThree {width:47%;}
.projectitemThree {width:47%;}

}


/* THREE - MEDIA QUERIES - 480px - smart phone landscape ********************************************************************************************/
@media screen and (max-width: 480px){
header{width:100%;margin:0 auto;border:0px solid #ff6600;}
.container {width:97%;margin:1.5em auto 1em auto;border:0px solid #ff6600;} /* logo */
.projectwrapBanner {width:97%;margin:0em auto 0 auto;padding:0 0 0 0;border:0px solid #de38d4;}
.projectwrapBanner img {width:97%;margin:1em auto 1em auto;}
.projectwrapBanner h2 {width:97%;text-align:center;font-size:1.7em;margin:0em 0 0.8em 0;}
.contentwrapper {width:97%;margin:0 auto 0 auto;}

.projectitemThree {float:left; width:33%;}

.projectwrapThree {width:97%;display:block;}
.projectitemThree {float:left;width:46%;margin:0 1% 0 1%;background:#ffffff;border:0px solid #99ff66;}
.projectitemThree p {font-size:1.1em;margin-bottom:0.5em;}	

.projectitemTwo {width:46%;margin:0 1% 0 1%;}	

.categories {width:100%;text-align:center;margin:2% 0 5% 0;border:0px solid #efefef;padding:0.8em 0 0.8em 0;background:#fbfbfb;}
.categories ul{margin:0;padding:0 1.5em 0 1.5em;}
.categories ul li{display:inline;font-weight:normal;font-style:italic;font-size:1.2em;line-height: 1.7em;letter-spacing:0.05em;color:#333;margin:0 0.3% 0 0.3%;padding:0;border:0px solid #ccc;}


.backnext{width:100%;text-align:center;margin:3em 0 0 0;padding:1em 0 1em 0;background:#efefef;border:0px solid #ff6600;clear:both;}
.backnext ul{padding:0;list-style:none;margin:0 0 0 0;}
.backnext ul li{display:inline;font-weight:normal;font-size:1.1em;letter-spacing:0.05em;color:#333;padding:0;margin:0 0.5em 0 0.5em;}

.copyright{font-size:1em;}
}

















/* MEDIA QUERIES - 320px - smart phone portrait *********************************************************************************************************/
@media screen and (max-width: 320px){
header{width:100%;margin:0 auto;border:0px solid #ff6600;}
.container {width:97%;margin:1.5em auto 1em auto;border:0px solid #ff6600;} /* logo */
.projectwrapBanner {width:97%;margin:0em auto 0 auto;padding:0 0 0 0;border:0px solid #de38d4;}
.projectwrapBanner img {width:97%;margin:1em auto 1em auto;}
.projectwrapBanner h2 {width:97%;font-size: 1.6em;text-align:center;margin:0em 0 0.8em 0;}
.contentwrapper {width:97%;margin:0 auto 0 auto;}
.projectwrapThree {width:97%;display:block;}
.projectitemThree {float:left;width:97%;}
.projectitemThree p {font-size:1.1em;margin-bottom:0.5em;}
.projectBanner {margin:0 auto 1em auto;border: 0px solid #333;}
.projectBanner h2{width:97%;font-size: 1.5em;text-align:center;margin:0em 0 0.5em 0;}
.projectBanner img {margin:1em auto 0 auto;border:0px solid #ffcc33;}
.projectOne {margin:0.3em auto 1em auto;}
.projectOne p {width:90%;clear:both;text-align:center;font-size:1.05em;line-height: 1.4em;margin:0 auto;} 
/* navigation categories */
.categories {width:100%;text-align:center;margin:2% 0 5% 0;border:0px solid #efefef;padding:0.8em 0 0.8em 0;background:#fbfbfb;}
.categories ul{margin:0;padding:0 1.5em 0 1.5em;}
.categories ul li{display:inline;font-weight:normal;font-style:italic;font-size:1.2em;line-height: 1.7em;letter-spacing:0.05em;color:#333;margin:0 0.3% 0 0.3%;padding:0;border:0px solid #ccc;}
/* back next */
.backnext{width:100%;text-align:center;margin:3em 0 0 0;padding:1em 0 1em 0;background:#efefef;border:0px solid #ff6600;clear:both;}
.backnext ul{padding:0;list-style:none;margin:0 0 0 0;}
.backnext ul li{font-weight:normal;font-size:1.1em;line-height: 2em;}


.projectThree {width:97%;margin:0 auto 0% auto;}
.copyright{width:85%;text-align:center;margin:0 auto;padding:0;line-height: 1.5em;}
}

/* end 320 */