/*-------------------------------------------------------------------
		
		Made by Jamie
		22/03/2016
		
		For find and replace purposes here are the colours:
			Main:                #080    --2199e8
			Hover Main:          #080    --1585cf
			Secondary:           #008080
			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. CodyHouse Scrolling 			
			8. Responsive Medis Queries
			
		Full width banner image template
		
-------------------------------------------------------------------*/


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

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: #080; }
a:hover{ color: #000; }

.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
-------------------------------------------------------------------*/
#head #HeaderImage {
    max-height: 80px;
    margin: 10px;
}
#head #logo span {
	font-size: 2.3rem;
	vertical-align: middle;
}

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

.top-contact .fa.fa-twitter {
    color: #1da1f2;
    padding: 5px;
}
.fa.fa-envelope {
    color: #3B5998;
    padding: 5px;
}
.fa.fa-phone {
    color: #ff6347;
    padding: 5px;
}

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

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

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

.nav-toggle {display:none;}

.main-nav ul {list-style: outside none;}

.main-nav {
	padding:1em;
	border-top: 1px solid #ddd;
	border-bottom:1px solid #ddd;
	font-size:16px;
    background-color:#080;
}

#Header_Menu, .main-nav ul ,.main-nav ul  li {display: inline;}

/*#Header_Menu li, #Header_Menu li a, #Header_Menu ul, .go, .main-nav{font-size:16px;}*/
	
#Spacer {display:none;}

#Header_Menu ul li a{
	padding: 1.2em 1.5em;
	/*border-right:1px solid #ddd;*/
	transition: color 300ms ease;
	font-size:16px;
    color:#fff;
    

}
#Header_Menu ul li a:hover{
	color: #080;
    background-color: #fff;
}

input[type="text"]{
	margin-bottom:0;
	padding: 0 0 0 1em;
	height:1.75rem;
	border:none;
	border:1px solid #fff;
	color:#fff;
	background-color: #080;
	transition: background-color 300ms ease-out;
}

input[type="text"]:focus{
	border:none;
	background-color:#fff;
	color:#333;
}

.go{
	width:100%;
	line-height:1.5rem;
	background-color:#080;
	transition: background-color 300ms ease-out;
	border:1px solid #fff;
	color:#fff;
}

.go:hover {
	background-color:#006d00;
	
}

/*-------------------------------------------------------------------
		3. Nav toggle icon
-------------------------------------------------------------------*/
.animated-menu {
    display: inline-block;
    cursor: pointer;
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 { opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

i.fa.fa-chevron-right{color: #fff;}
/*-------------------------------------------------------------------
		3. Top Menu Dropdowns
-------------------------------------------------------------------*/
.main-nav ul li ul li a{
	display:block;
	width:240px;
	background-color: #080;
	padding:1em;
	margin-left: -0.3em;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	transition: background-color 300ms ease-out;
	transition: color 300ms ease-out;
}


#Header_Menu ul li ul {
	position: absolute;
	width: 220px;
	display:none;
	left: 0;
	top:2.45em;
	margin-left:0;
	z-index: 100;
	transition: 0.4s;
}


#Header_Menu ul li ul li:hover, #Header_Menu ul li ul li:hover > a{
	background-color:#fff;
	color:#080;
}
#Header_Menu ul li i{
	transition: 0.4s;
}
.clicked i {
    transition: 0.4s;
    transform: rotate(180deg);
}

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

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


.bx-viewport,.bx-wrapper{max-height: 500px;}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
	left: 10px;
	background: url(img/controls.png) no-repeat 0 0px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
	background-position: -32px 0px;
}
.bx-wrapper .bx-next {
	right: 10px;
	background: url(img/controls.png) no-repeat -64px 0px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
	background-position: -96px 0;
}
.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 30%;
	outline: 0;
	margin-top: 6em;
	width: 32px;
	height: 64px;
	text-indent: -9999px;
	z-index: 9999;
	background-color: rgba(221, 221, 221, 0.05);
	border-radius: 32px;
}


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

#Heading h1 {text-align:center;}

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

.block-heading{
	border: 1px solid #fff;
	border-radius: 3px;
	color: #080;
	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;
	padding-bottom: 1rem;
}

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

div.article-details{padding-bottom:10px;}
#footer-top span.article-date {display:none;}

div.footer-block.latest-news h4 {
	font-size: 1rem;

}

div.Quick-links {border-bottom: 1px solid #ddd; margin-bottom: 1rem;}

 

div.latest p {
	font-size: 14px;
	margin-bottom: 0;		
}
div.latest {border-bottom: 1px solid #ddd; margin-bottom: 1rem;}

.label {background-color: #fff;
color: #0A0A0A;
font-size: inherit;}

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



div.Related {margin-top: 2rem;}
#Taxonomy h2 {font-size: 1.5rem;}
.Related h2 {font-size:1.5rem;}

div#Taxonomy {display:none;}
.Related {display: none;}
/*-------------------------------------------------------------------
		6. Footer Area
-------------------------------------------------------------------*/


#footer-top span{display:block;}

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

#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: #080;
	color: #fff;
    /*background: linear-gradient(to bottom, #39a361 0%, #00800 100%);*/
}


/*-------------------------------------------------------------------
		7. CodyHouse Scrolling 
-------------------------------------------------------------------*/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  white-space: nowrap;
/*  background-color: rgba(154,154,154,0.8);*/
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}

.cd-top i{
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 30px;
}


/*-------------------------------------------------------------------
		8. Responsive Medis Queries
-------------------------------------------------------------------*/
@media only screen and (min-width: 1080px) {
	#Header_Menu ul li:hover > ul{display:block;}
	.main-nav  ul li:hover {position: relative;}
	#Header_Menu ul li > a > i{display:none;}
	
	.font-size-buttons, .top-contact {margin-top: 0.5em;}
}

@media only screen and (max-width: 1240px){
	#Header_Menu ul li a {padding: 1.2em 0.8em; width:100%; border: 0;}
}

@media only screen and (max-width: 1200px) {
    .header_menu li{padding:0;}
	
	#Header_Menu ul li a {padding: 1.2em 0.4em;}
		
    #Header_Menu ul li ul {width: 100%; margin-top: 0.5em;}
	
    .top-bar #Header_DropDownMenu .header_menu .moved ul{ visibility: hidden;}
	
    #Header_Menu .header_menu .moved ul{ visibility: visible;}
}

/*This is where the mobile responsive menu starts */
@media only screen and (max-width: 1080px) {
	.nav-toggle {
		display:block; 
		text-align: center;
		padding-bottom: 1em;
        color:#fff;
	}
	#Header_Menu, #Header_Menu.top-bar  {display:none;}
	#Header_Menu.top-bar-extended {display:block;}
	#Header_Menu ul li {
		width: 100%;
		display: inline-block;
		padding:0.75em;
		border-top: 1px solid #ddd;
	}
	#Header_Menu ul li.clicked {
		padding-bottom: 0;
	}
	#Header_Menu ul li a {
		padding:0;
		border-right: none;
	}
	#Header_Menu ul li > a > i{
		display:inline-block; 
		float:right;
		font-size: 140%;
	}
	#Header_Menu ul li.clicked > ul {
		display:block;
		position: relative;
		top:0;
	}
	
	#Header_Menu ul li ul  li a{
		padding:0;
		display: block;
	}
	
	.bx-controls-direction{display:none}
}

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

@media only screen and (max-width: 610px) {
	#head #logo img {display:inline; text-align:center; height: 40px;}
	#head #logo span{font-size: 1.5em;}
	.font-size-buttons{text-align:center;}
	
	.block-heading{
		color: #fff;
		background-color: #080;
	}
}

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

@media only screen and (max-width: 370px){
	#head #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;
}