/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} /* HTML5 display reset for older browsers */
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/*/
html { font-size: 100% } /* to aid rem fontsize */
* { margin: 0; padding: 0;}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
img { max-width:100%; } /* to aid responsive images */


.gp:after { /* for browers that support :after */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
		}	
									
*html .gp { height: 1% } /* hack for ie6 */
*:first-child+html .gp { min-height: 1px } /* hack for ie7 */

/* RESET END */


/* NOTE: Use em (not rems) for top-bottom margin, percentage for left-right margin or padding */
html { font-size: 100% }   

/* FONTS - Logo */
@font-face {
    font-family: 'josefin_sanssemibold';
    src: url('fonts/josefinsans-semibolditalic-webfont.eot');
    src: url('fonts/josefinsans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/josefinsans-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/josefinsans-semibolditalic-webfont.woff') format('woff'),
         url('fonts/josefinsans-semibolditalic-webfont.ttf') format('truetype'),
         url('fonts/josefinsans-semibolditalic-webfont.svg#josefin_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaybold';
    src: url('fonts/raleway-bold-webfont.eot');
    src: url('fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('fonts/raleway-bold-webfont.woff') format('woff'),
         url('fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewayextrabold';
    src: url('fonts/raleway-extrabold-webfont.eot');
    src: url('fonts/raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extrabold-webfont.woff2') format('woff2'),
         url('fonts/raleway-extrabold-webfont.woff') format('woff'),
         url('fonts/raleway-extrabold-webfont.ttf') format('truetype'),
         url('fonts/raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewayextralight';
    src: url('fonts/raleway-extralight-webfont.eot');
    src: url('fonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extralight-webfont.woff2') format('woff2'),
         url('fonts/raleway-extralight-webfont.woff') format('woff'),
         url('fonts/raleway-extralight-webfont.ttf') format('truetype'),
         url('fonts/raleway-extralight-webfont.svg#ralewayextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaymedium';
    src: url('fonts/raleway-medium-webfont.eot');
    src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('fonts/raleway-medium-webfont.woff') format('woff'),
         url('fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'droid_serifitalic';
    src: url('fonts/droidserif-italic-webfont.eot');
    src: url('fonts/droidserif-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/droidserif-italic-webfont.woff2') format('woff2'),
         url('fonts/droidserif-italic-webfont.woff') format('woff'),
         url('fonts/droidserif-italic-webfont.ttf') format('truetype'),
         url('fonts/droidserif-italic-webfont.svg#droid_serifitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

.strong { font-weight: bold;}
.italic { font-style: italic;}

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

body {
	  font-family: 'ralewaymedium', sans-serif;
	  color: #565656;
	  font-size: 16px; 1rem; /* px for older browsers, rem based on root element, not parent element  */
	  word-wrap: break-word;  /* break up long lines or urls */
	  overflow-wrap: breakword; 
	   -webkit-text-size-adjust: none; /* avoid iphone auto font adjustment */
	  /* background-color: #333333; */
	  }	

h2 {
	font-family: 'ralewaybold', serif;
	font-size: 24px; 1.5rem;
	line-height: 30px; 1.875rem;
	padding: 1.5em 0 0.5em 0;
}

h3 {
	font-family: 'ralewaybold', serif;
	font-size: 18px; 1.125rem;
	line-height: 24px; 1.5rem;
	padding: 1.5em 0 0.5em 0;
}

p {
	font-family: 'ralewaymedium', sans-serif;
	color: #565656;
	font-size: 15px; 0.9375rem;
	line-height: 24px; 1.5rem;
	padding-bottom: 1em;
	  }	

p strong {
	font-family: 'ralewaybold', serif;
}

p a, p a:visited  {
	color: #cc6600;
	text-decoration: none;
}

p a:hover, p a:active { text-decoration: underline; }




main {
	/*width: 1260px;*/
	width: 100%;
	margin: 0 auto;	
}


section ul {	
    list-style-type: disc;
    margin: 0;
	padding: 0 5%;
}

section li { 
	padding: 0.3em 0; 
	font-size: 15px; 0.9375rem;
	line-height: 24px; 1.5rem;}

picture {
	display: block; 
	width: 100%; 
}

img {
	display: block; 
	width: 100%; 
}
		
#container {
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	background-color: #ffffff;
	}	





/*** COMMON ELEMENTS ***/


.fixedwidth {
	width: 1260px;
	margin: 0 auto;
	padding: 0 30px;
}


.org-image {
	width: 100%;
	background-color:#cc6600;
	margin-bottom: 2em;
}

.org-image p {
	font-family: 'droid_serifitalic', serif;
	font-size: 18px; 1.125rem;
	line-height: 24px; 1.5rem;
	color: #ffffff;
	padding: 1.5em 1em 1.5em 1em;
	text-align:center;
	/*line-height: 28px; 1.75rem;*/
}


.intro-blue {
	width: 1260px;
	margin: 0 auto;
}

.intro-blue p {
	font-family: 'droid_serifitalic', serif;
	font-size: 18px; 1.125rem;
	line-height: 26px; 1.625rem;
	/*text-align:center;*/
	color: #ffffff;
	padding: 35px; /* padding: 10%;*/
}



.aside-blue {
	width: 100%;
	/*background-color:#24abb5; */
	background-color:#1298a2;
}

.aside-blue p {
	font-family: 'droid_serifitalic', serif;
	font-size: 18px; 1.125rem;
	line-height: 26px; 1.625rem;
	color: #ffffff;
	padding: 35px; /* padding: 10%;*/
}

.aside-grey {
	width: 100%;
	background-color:#dfdfdf;
}

.aside-grey p {
	font-family: 'ralewaymedium', serif;
	font-size: 15px; 0.9375rem;
	line-height: 22px; 1.375rem;
	color: #666666;
	padding: 10%;
}


.aside-grey p a:link, .aside-grey p a:visited  {
    text-decoration: none;
	color: #1298a2;
}

.aside-grey p a:hover, .aside-grey p a:active  {
    text-decoration: underline;
	color: #1298a2;

}


.aside-darkgrey {
	width: 100%;
	background-color:#333333;
}

.aside-darkgrey p {
	font-family: 'ralewaybold', serif;
	font-size: 15px; 0.9375rem;
	line-height: 22px; 1.375rem;
	color: #ffffff;
	padding: 10%;
}

a.blink:link, a.blink:visited  {
    text-decoration: none;
	color: #00cccc;
}

a.blink:hover, a.blink:active  {
    text-decoration: underline;
	color: #00cccc;

}

/* Breadcrumbs */

.breadcrumbs {
	margin: 1.25em 0;
}

.breadcrumbs p {
	font-family: 'ralewaymedium', serif;
	font-size: 15px; 0.9375rem;
	color: #1298a2;
	display: inline;
}

.breadcrumbs a.bc:link, a.bc:visited  {
    text-decoration: none;
	color: #1298a2;
}

.breadcrumbs a.bc:hover, a.bc:active  {
    text-decoration: underline;
	color: #1298a2;

}

/* Toggle- Extend content */
a.extendbtn, a.extendbtn:visited  {
	font-family: 'ralewaybold', sans-serif;
	font-size: 15px; 0.9375rem;
	background-color: #ffffff;
	color: #cc6600;
	border: none;
	text-align: left; 
	padding-left: 25px;
	display: block;
    text-decoration: none;
	background:url(images/toggle-extend-more.gif) no-repeat center left; 
}

a.extendbtn:hover, a.extendbtn:active { text-decoration: underline; }

a.extendbtnless  { background:url(images/toggle-extend-less.gif) no-repeat center left; } /* Style used in script */



/* Tabs */

div.tab {
    overflow: hidden;
	margin-bottom: 1em;
}

div.tab button {
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.8em 4em;
    transition: 0.3s;
    font-family: 'ralewaybold', sans-serif;
	font-size: 15px; 0.9375rem;
	background-color: #dfdfdf;
	color: #565656;
	margin-right: 1em;
}


div.tab button:hover {
    background-color: #cc6600;
	color: #ffffff;
}


div.tab button.active {
    background-color: #cc6600;
	color: #ffffff;
}

div.tab button.active:after {
	content:'';
	display:block;
	position:absolute;
	width:0;
	height:0;
	border-color: #cc6600 transparent transparent transparent; 
	border-style: solid;
	border-width: 1em;
	margin: 0 1em;
	margin-top: 0.8em;
}


.tabcontent {
    display: none;
	margin-bottom: 3em;
}


/***** HOME SlideShow *****/

#slideshow {width:100%; position:relative;}
#slideshow .hmSlides {display:none;}

#slideshow .slide03 { 
	background:url(images/hm-slide-03.jpg) no-repeat, #000000; 
	height: 750px; 
	background-position: 70% top; 
	background-size: cover;
}

#slideshow .slide04 { 
	background:url(images/hm-slide-04.jpg) no-repeat, #000000; 
	height: 750px; 
	background-position: 20% top; 
	background-size: cover; 
}

#slideshow .slide02 { 
	background:url(images/hm-slide-02.jpg) no-repeat, #000000; 
	height: 750px; 
	background-position: 70% top; 
	background-size: cover; 
}

#slideshow .slide01 { 
	background:url(images/hm-slide-01.jpg) no-repeat, #000000; 
	height: 750px; 
	background-position: 35% top; 
	background-size: cover; 
}

#slideshow .arrow-left {position:absolute; left:0; top:45%;}
#slideshow .arrow-right {position:absolute; right:0; top:45%;}
#slideshow .arrow {font-size: 48px; 3rem; color: #ffffff; background: rgba(23,23,23,.8); padding: 0.3em 0.5em; margin:0; cursor:pointer; transition: ease 250ms;}
#slideshow .arrow:hover {opacity: 1; background: rgba(125,125,125,.8);}

#slideshow .navbar { background-color: #1298a2; width: 100%; position:absolute; bottom:0; height: 90px;}
#slideshow .navbar-icon {text-align:center; padding-top: 2.3em; }
#slideshow .nav-icon {color:#ffffff; background-color:#094c51; height:0.8em; width:0.8em; padding:0; cursor:pointer; display:inline-block; text-align:center; border-radius:50%; transition: ease 250ms; }
#slideshow .nav-icon:hover{color:#000000; background-color:#ffffff; }
#slideshow .nav-icon-on{color:#000000; background-color:#ffffff;}
#slideshow .nav-icon-space { margin-right: 0.5em;}


#slideshow .tag{position:absolute; top:35%; left: 15%; width: 400px;}
#slideshow .tag h1{font-family: 'ralewayextralight', sans-serif; color: #ffffff; font-size: 52px; 3.25rem; line-height: 56px; 3.5rem; padding-bottom: 0.5em; text-shadow:2px 2px 3px #333333;}
#slideshow .tag p {font-family: 'ralewaymedium', sans-serif; color: #ffffff; font-size: 15px; 0.9375rem; line-height: 22px; 1.375rem; padding-bottom: 0.5em; text-shadow:2px 2px 3px #333333;}
/*#slideshow .tag p.highlight {font-family: 'ralewayextrabold', sans-serif; } */



/* Fading animation */

@keyframes fade {
  from {transform: none;}
  to {transform: translateX(-50%);}
}

#slideshow .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}




/***** HOME BANNERS *****/

#hm01 {
	width: 1240px;
	margin: 50px auto;
}

#hm01 .row-01 {	
	display: block;
}

#hm01 .row-02 {
	display: block;
}

.hm-banner-a {	
	width: 49.1935%;
	margin-bottom: 1em;
}

.hm-banner-b {	
	width: 20.9677%;
	margin-bottom: 1em;
}

.hm-banner-c  {	
	width: 54.8387%;
	margin-bottom: 1em;
}

.home-banner {	
	position: relative;
	display: inline-block;
	background-color: #333333; /* rollover colour */
	opacity: 1;
}

.home-banner p {	
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 1;
	color: #ffffff;
	font-size: 23px; 1.45rem;
	text-align:center;
	text-shadow:2px 2px 3px #333333;
}

.home-banner a img { 
	max-width: 100%;
	display: block; /* rollover */
}

.home-banner:hover img { opacity: 0.5; transition: opacity ease 250ms;} /* rollover */


.home-banner.float {
	float: right;	
}

.home-banner.home-banner-margin {	
	margin-right: 1.2096%;
}



/*** Template 01 - ABOUT ***/

#tm01 {
	width: 1260px;
	margin: 0 auto;
	overflow: hidden;
}

#tm01 section {
	float: left;
	width: 70%;
	padding-left: 3%;
	padding-right: 5%;
}

#tm01 aside {
	float: right;
	width: 30%;
}

#tm01 ul {	
    list-style-type: disc;
    margin: 0;
	padding: 0 5%;
}


#tm01 li { padding: 0.3em 0;}


/*** Template 02 - CONTACT ***/

#tm02 {
	width: 1260px;
	margin: 0 auto;
	padding: 0 3%;
	overflow: hidden;
}

#tm02 section {
	width: 100%;	
	display: block;
}

#tm02 section h2 {
	padding: 1.25em 0 0.5em 0;
}

#tm02 section.copy {
	width: 100%;
	display: block;
}


/*** Template 05 - FOUNDER/TEAM ***/

#tm05 {
	width: 1260px;
	margin: 0 auto;
	padding: 0 1% 0 3%;
	overflow: hidden;
	
}


#tm05 article {
  display: inline-block;
  vertical-align:top;
  width: 30%;
  margin-bottom: 30px;
  margin-right: 3%;
  
}



#tm05 article .photo {
	width: 100%;
	background-color:#1298a2;
	margin-bottom: 1.5em;
	display: block;
}

#tm05 article .photo h3 {
	color: #ffffff;
	padding: 1em;
	text-align:center;
}

#tm05 article.copy {
	width: 100%;
	display: block;
}

/******/

#tm05 aside {
	float: left;
	width: 30%;		
	display: block;
}

#tm05 section {
	float: left;
	width: 65%;	
	display: block;
	margin-right: 5%;
}

#tm05 section h2 {
	padding: 0 0 1em 0;
}

#tm05 section h3 {
	padding: 1em 0;
}

#tm05 aside .photo {
	width: 100%;
	background-color:#1298a2;
	margin-bottom: 1.5em;
	display: block;
}

#tm05 aside .photo h3 {
	color: #ffffff;
	padding: 1em;
	text-align:center;
}

#tm05 section.copy {
	width: 100%;
	display: block;
}



/*** DYNAMIC ***/

#hm02 {
	/*width: 1260px;*/
	width: 100%;
	margin: 0 auto;
	padding: 0 ;
	overflow: hidden; 
}

#hm02 section {
	width: 100%;
	margin: 0 auto;
}

#hm02 section:first-child {
	background-color:#1298a2;
	margin-bottom: 20px;
}

#hm02 aside {	
	width: 1260px;
	margin: 0 auto;
	padding-left: 20px;
	/*text-align:center;*/
}

#hm02 aside .margin {
	margin: 10px;
}

#hm02 aside .width {
	width: 22.65%;	
}

#hm02 .banner {	
	position: relative;
	display: inline-block;
	background-color: #333333; /* rollover colour */
	/* margin-bottom: 5%; */
	margin-bottom: 2%;
	opacity: 1; 	
}

#hm02 .banner p {	
	position: absolute;
	color: #ffffff;
	font-size: 23px; 1.45rem;
	text-shadow:2px 2px 2px #333333;
	text-align:center;
	width: 100%;
	bottom: 0;
	z-index: 1;
}

#hm02 .banner a img { 
	max-width: 100%;
	display: block; /* rollover */
}

#hm02 .banner:hover img { opacity: 0.5; transition: opacity ease 250ms; } /* rollover */


/*** FOOTER ***/

footer {
	/*position: relative;
	z-index: -20; */	
	clear: both;
	margin-top: 3em;
	
	}

footer .ft {
	padding: 2em 0 2em 0;
	background-color: #333333;
	text-align: center;	
}	

footer p {
	font-family: 'ralewaymedium', sans-serif;
	color: #ffffff;
	display: inline;
	padding: 0;
	margin-left: 0.3em;
}	

footer .ft img {
	width: auto;
	height: 25px;
	display: inline;
	margin: 0.5em 0.3em 0 0.3em;
}