/*-------------------------------------------------------------------
		
		Made by Rachel
		December 2020
		
		For find and replace purposes here are the colours:
			Main:                #080    --2199e8
			Hover Main:          #080    --1585cf
			Secondary:           #0001166
			Darker Secondary:
			Borders:             #ddd
		
		
		Contents
			0. Debug Code
			1. Header Area
			2. Top Menu
			3. Top Menu Dropdowns
			4. Top Banners
			5. Content Area
			6. Footer Area
			7. Search and Taxonomy results
			8. Responsive Medis Queries
			
		Full width banner image template
		
-------------------------------------------------------------------*/


/*-------------------------------------------------------------------
		0. Debug Code / global
---------------------------------------------------------------------*/


.title-section, .menu-section, #Heading, #Content, #footer-top, #main-nav .top-bar-left{
	margin-left: auto;
	margin-right: auto;
	max-width: 72rem;
}

	
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td  {
	font-family:  'Montserrat', 'Lato', sans-serif;
}
p, blockquote, th, td {
    font-family: 'Montserrat', 'Lato', sans-serif;
}
a { color: #00817C; }
a :hover{ color: #00817C; }

* { box-sizing: border-box; }

.block-content span, .block-content li {
    font-family: 'Montserrat', 'Lato', sans-serif;
}
div[id$='_Menu'] ul{
	margin-left:0;
}

ul {list-style-type: square;}

h1{
	font-size:2rem;
	margin-bottom:0;
}

.row .row{
	margin-left:auto;
	margin-right:auto;
}	
.left{float:left;}
.right{float:right;}


/*-------------------------------------------------------------------
		1. Header Area
-------------------------------------------------------------------*/
img#HeaderImage {
    max-height: 100px;
    margin: 10px;
}
#logo span {
	font-size: 2.3rem;
	vertical-align: middle;
	font-weight: bold;
}

.top-contact p{
	margin-bottom: 0;
	font-size: 1.6em;
	font-family: 'Montserrat';
}

.fi-social-twitter {
    /*color: #1da1f2;*/
	padding: 5px;
	font-size: 24px;
}

.fi-mail {
    color: #3B5998;
	padding: 5px;
	font-size: 22px;
}
.fi-telephone {
    color: #ff6347;
	padding: 5px;
	font-size: 20px;
}

.fi-print {
    	padding: 5px;
	font-size: 20px;
}

.fi-social-facebook {
	font-size: 24px;
}

.fi-megaphone {
	font-size: 24px;
}

#jfontsize-minus {
    font-size: 70%;
}
#jfontsize-plus{font-size:140%;}

.font-size-buttons, .top-contact{ text-align: right;}

.search input {display: inline;}

.search .button, input#ctl00_btnSearch.search {
	background-color: #00817C; 
	color:#fff; 
	border:1px solid transparent; 
	margin: 0 0 1rem 0; 
	padding: 0.72em 1em;
	font-size: 0.9rem;
 }

.search .button:hover, input#ctl00_btnSearch.search:hover {
	color:#00817C; 
	background-color: #fff; 
	border: 1px solid #00817C;}

/*-------------------------------------------------------------------
		2. Top Menu
-------------------------------------------------------------------*/


div#main-nav.top-bar, #main-nav ul.dropdown{
	background-color: #00817C;
	color: #fff;
}

div#main-nav.top-bar {
	padding:0;
	
}

div#main-nav.top-bar a {
	color: #fff;
	padding: 1.2em 1.9em; 
	background-color:#00817C;
	font-size: 17px;
}

div#main-nav.top-bar a:hover {
	color: #00817C;
	background-color: #fff;
}


.title-bar {background-color: #00817C;}

.no-js .top-bar {
	display: none;
  }
  
  @media screen and (min-width: 40em) {
	.no-js .top-bar {
	  display: block;
	}
  
	.no-js .title-bar {
	  display: none;
	}
  }


  .dropdown .is-dropdown-submenu a {background-color:#00817C; color:#fff;}

  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
	  border-color:#fff transparent transparent;
  }

  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a:hover:after  {
	border-color:#00817C transparent transparent;
}

.drilldown .is-drilldown-submenu-parent > a::after {
	border-color:transparent transparent transparent #fff;
}

.drilldown .js-drilldown-back > a::before {
	border-color: transparent #fff transparent transparent;
}

/*-------------------------------------------------------------------
		4. Top Banners
-------------------------------------------------------------------*/

.banner{ 
	border-bottom:1px solid #ddd;
}
.banner {width:100%;}

.carousel {
	background: #fff;
  }
  
  .carousel-cell {
	width: 100%;
	
	background: #fff;
	border-radius: 5px;
	counter-increment: gallery-cell;
	max-height: 500px;
  }
  
  #banner .flickity-page-dots {display: none;}
  


/*-------------------------------------------------------------------
		5. Content Area
-------------------------------------------------------------------*/



#Heading{
	border-bottom: 1px solid #ddd;
	padding: 0.5em 0;
	margin-bottom: 1em;
}

div.heading h1 {text-align:center;}

.block-heading{
	border: 1px solid #fff;
	border-radius: 3px;
	color: #00817C;
	background-color: #fff;
	font-size: 1.3rem;
	text-align:center;
	margin: 0 0 1em;
}
.block-content{
	min-height:110px;
	text-align:center;
}
.block-heading i, .block-content {
	margin: 0 1rem;
}
.block-content i{
	margin: 0 1em 0 0;
}

.cf{margin:0;}

#Content {margin-bottom: 1em;}

#Content img{
	border:1px solid #fff;
	border-radius: 3px;
}

#Body_content {
	border-bottom: 1px solid #ddd;
}

#Quick_Link h2{display: none;}
#Quick_Link li{list-style-type: none; margin-bottom: 10px;}


a.article-title{display: block;}
div.article-details{margin-bottom:20px;}
div.article-synopsis {font-size: 14px;}
.latest-news .article-date {display:none;}
.latest-news {
    border-bottom: 1px solid #ddd;
    margin-bottom: 1em;
}

.latest h4 {font-size: 16px;}

.map .fi-marker {font-size: 24px;}

/*-------------------------------------------------------------------
		5.5 Page Meta
-------------------------------------------------------------------*/
.page-meta .related-item img, .page-meta .related-info a, .page-meta .related-info {
    display: inline;
}

.page-meta .related-info span{display:block;}

.page-meta .related-item img{margin:0.25em;}

.related-item{ 
	padding:1em;
	border-bottom: 1px solid#ddd;
}
.related-item:last-of-type{ border-bottom:none;}

.related {display: none;}
/*-------------------------------------------------------------------
		6. Footer Area
-------------------------------------------------------------------*/
footer {
	background-color: #00817C;
	padding-top: 10px;
}

div#footer-top.grid-x.grid-padding-x {background-color: #fff;}

#footer-top span{display:block;}

#footer-top {margin: 1em auto;}

footer div.block-heading{margin:1em;}

#map-canvas{
	width: 100%;
	height: 200px;
	margin-bottom: 10px;
}

#footer-bottom{
	border-top:1px solid #ddd;
}

#Footer_Menu ul{
	list-style: outside none
}

#footer-top > div {
    border-right: 1px solid #ddd;
	/*height: 260px;*/
}

#footer-top > div:last-of-type{
	border: none;
}

#footer-bottom, #footer-bottom a{
	background-color: #00817C;
	color: #fff;
    /*background: linear-gradient(to bottom, #39a361 0%, #00800 100%);*/
}

.quick-links i.fi-marker {font-size: 22px;}

.useful-links ul li {list-style: none;}

/*-------------------------------------------------------------------
		7. Search and Taxonomy Results
-------------------------------------------------------------------*/

div.List h2 {font-size: 1.6em;}
div.List h2.article {margin-top: 15px;}
span.rss {display:none;}
div.result-list-item img.searchimg{display:none;}
div.result-list-item {
    border-bottom: 1px solid #00817C;
    padding-top: 15px;}

div.result-list-item a {display:block;}
div.result-list-item span.synopsis {font-size: 14px;}
div.result-list-item span.articledate1 {display:none;}
div.result-list-item span.articledate2 {display:block; font-size: 14px;}
/*-------------------------------------------------------------------
		8. Responsive Media Queries
-------------------------------------------------------------------*/
@media only screen and (min-width: 1080px) {

	
	.font-size-buttons, .top-contact {margin-top: 0.5em;}
}
 
}

/*This is where the mobile responsive menu starts */

@media only screen and (max-width: 1080px) {
		
	.bx-controls-direction{display:none;}
}

@media only screen and (max-width:810px) {
	.title-section #logo img {display:inline; text-align:center; height: 55px;}
	.title-section #logo span{font-size: 1.8em;}
	.top-contact p {font-size: 1.2em;}
}

@media only screen and (max-width: 610px) {
	.title-section #logo img {display:inline; text-align:center; height: 40px;}
	.title-section #logo span{font-size: 1.5em;}
	.font-size-buttons{text-align:center;}
	footer {background:none;}
	footer div.block-heading {margin: 0 0 1em;}
	.block-heading{
		color: #fff;
		background-color: #00817C;
	}
}

@media only screen and (max-width: 480px) {
	.title-section #logo span{font-size: 1.4em;}	
}

@media only screen and (max-width: 370px){
	.title-section #logo span{font-size: 1em;}	
}

/*-------------------------------------------------------------------
		9. Expanding tables
-------------------------------------------------------------------*/
.expand-heading {
    margin: 15px 0 0 0;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    padding: 8px 10px;
}

    .expand-heading.clicked {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
    }

    .expand-heading:hover {
        cursor: pointer;
    }

    .expand-heading:hover,
    .expand-heading.clicked {
        background-color: #f5f5f5;
    }

    .expand-heading:after {
        
        content: "+";
        float: right;
    }

    .expand-heading.clicked:after {
        content: "-";
    }

.expand {
    display: none;
    border: 1px solid #dbdbdb;
    border-top: none;
    border-radius: 5px;
    /*padding: 8px 0;*/
}


/*-------------------------------------------------------------------
		10. Map
-------------------------------------------------------------------*/

#map {width: 600px;
      height: 400px;
      margin-left:auto;
      margin-right:auto;
}