body  {
  background: #f5f5f5;
  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;}

button, .button {
  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;}

.top-bar {
  height: 3.3rem;
  background: #ffffff;}

/*Drawing for menu icon*/
.top-bar .toggle-topbar.menu-icon a span::after {
          box-shadow: 0 0 0 1px #000000, 0 7px 0 1px #000000, 0 14px 0 1px #000000;
          width: 16px; } 

.logo {
    width: 140px;
  margin: 5px; }


/* Default Link Styles */
a {
  color: #000000;
  line-height: inherit;
  text-decoration: none; }
a:hover, a:focus {
    color: #007700; }

/* Tab text colour*/
 .top-bar-section ul li > a {
    color: #000000; 
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;}
    
/*tab background color, hover*/
.top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #B1D0B1;
        color: #000000;}

/*tab background color*/
.top-bar-section li:not(.has-form) a:not(.button) {
    background: #ffffff;}

/*Active page tab colour*/
.top-bar-section li.active:not(.has-form) a:not(.button) {
      background: #e6e6e6; 
      color: #000000;}

/*Active page hover colour*/
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
    background: #B1D0B1;
    color: #000000}

/*Dropdown non-active page colour*/
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
    background: #ffffff;
    color: #000000; }
    
/*Dropdown non-active page colour hover*/
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
    background: #B1D0B1;
    color: #000000; }
    
/*Dropdown menu triangle icon*/
.top-bar-section .has-dropdown > a:after {
        border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent;
}
    
/*Dropdown menu parent colour*/
.top-bar-section ul li:hover:not(.has-form) > a {
      background: #f0f0f0;
      color: #000000;}

/*mobile dropdown menu background colour*/
.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button)  { background: #ffffff }

/*The mobile 'back' option*/
.top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
        margin-bottom: 0;
        margin-top: 0;
        font-size: 1rem; }
        .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
          color: #000000;
          display: block; }
          .top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
            background: #B1D0B1; }

/*For wide screens*/
@media only screen and (min-width: 43em) {
  .top-bar {
    height: 3.3rem;
    padding-top: 0.3rem;
    position: relative; }

/* Tab text colour*/
 .top-bar-section ul li > a {
    color: #000000; 
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;}
    
/*tab background color, hover*/
.top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #B1D0B1;
        color: #000000;}

/*tab background color*/
.top-bar-section li:not(.has-form) a:not(.button) {
    background: #ffffff;}

/*Active page tab colour*/
.top-bar-section li.active:not(.has-form) a:not(.button) {
      background: #e6e6e6; 
      color: #000000;}

/*Active page hover colour*/
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
    background: #B1D0B1;
    color: #000000}

/*Dropdown non-active page colour*/
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
    background: #ffffff;
    color: #000000; }
    
/*Dropdown non-active page colour hover*/
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
    background: #B1D0B1;
    color: #000000; }
    
/*Dropdown menu triangle icon*/
.top-bar-section .has-dropdown > a:after {
        border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent;
}
    
/*Dropdown menu parent colour*/
.top-bar-section ul li:hover:not(.has-form) > a {
      background: #f0f0f0;
      color: #000000;}
    
  .logo {
    width: 140px;
    margin-top: 0px; } 

  .logo-wrapper {
    position: relative; }

  .logo-wrapper .logo {
    width: 92px;
    height: 92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -2px;
    margin-left: -46px; }
  }

/*text on pictures*/
.overlay-container {
  position: relative;
}

.overlay-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem;
  background-color: rgba(0, 0, 0, 0.15);
  text-align: right;
  font: 0/0 a;
}

.overlay-container .overlay:before {
  content: ' ';
  display: inline-block;
  vertical-align: bottom;
  height: 100%;
}

.overlay-container .overlay span {
  font-family: ;
    font: 2rem 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    color: #ffffff;
  display: inline-block;
  vertical-align: middle;
}

/*footer logo size format*/
.logofooter {
    width: 80%;
}