/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
   
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display:block;}
audio, canvas, video {display:inline-block; width:100%;}
audio:not([controls]) {display:none; height:0;}
[hidden] {display: none;}

/* ==========================================================================
   Base
   ========================================================================== */
   
html {font-family:'Open Sans', sans-serif; -ms-text-size-adjust:100%; overflow-y:auto; margin:0; padding:0; height:100%;}
body {margin:0; padding:0; height:100%;}

/* ==========================================================================
   Links
   ========================================================================== */

a:focus {outline:0;}
a:active, a:hover {outline:0;}

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {font-size:2em;}
abbr[title] {border-bottom:1px dotted;}
b, strong {font-weight:bold;}
dfn {font-style:italic;}
mark {background:#ff0; color:#000;}
code, kbd, pre, samp {font-family:monospace, serif; font-size:1em;}
pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word;}
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: -0.5em;}
sub {bottom: -0.25em;}
dt {margin:0px 0px 10px 0px;}
dd {margin:10px 0px 10px 0px;}

/* ==========================================================================
   Embedded content
   ========================================================================== */
img {border:0; height:auto; vertical-align:middle; -ms-interpolation-mode:bicubic;}
svg:not(:root) {overflow:hidden;}
#map_canvas img, .google-maps img {max-width:none;}
#map_canvas {margin:0; padding:0; height:400px;}

/* ==========================================================================
   Figures
   ========================================================================== */

figure {margin:0;}

/* ==========================================================================
   Forms
   ========================================================================== */

fieldset {border:0 ;margin:0; padding:0;}
legend {border:0; padding:0;}
button, input, select, textarea {font-family:inherit; font-size:100%; margin:0; vertical-align:middle;}
button, input {line-height:normal; overflow:visible;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], input[disabled] {cursor:default;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
textarea {overflow:auto; vertical-align:top; resize:vertical;}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {cursor:pointer;}

/* ==========================================================================
   Tables
   ========================================================================== */

table {border-collapse:collapse; border-spacing:0;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.nocallout {-webkit-touch-callout:none;}
.pressed {background-color: rgba(0, 0, 0, 0.7);}
textarea[contenteditable] {-webkit-appearance:none;}
.hidden {display:none !important; visibility:hidden;}
.visuallyhidden {border:0; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}
.invisible {visibility:hidden;}
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, button, input, select, textarea {color:#999;}
body {font-size:1em; line-height:1.8; background-color:#fff;}

h1 {color:#2fb15f; font-size:1.4em; margin:0 0 20px 0; line-height:1.6em; font-family: 'Roboto', sans-serif; font-weight:300;}
h2 {color:#2fb15f; font-size:1.2em; margin:0 0 20px 0; line-height:1.6em; font-family: 'Roboto', sans-serif; font-weight:300;}
h3 {color:#2fb15f; font-size:1.2em; margin:0 0 20px 0; line-height:1.2em; font-family: 'Roboto', sans-serif; font-weight:300;}

a {color:#2fb15f; text-decoration:none;}
a:hover {color:#2fb15f; text-decoration:underline;}
a:hover, a:active {outline:0;}

#access {position:absolute; top:0px; left:0px; width:1px;}

.link {color:#2fb15f; padding:8px 30px; cursor:pointer; text-align:center; font-size:1em; display:inline-block; border:1px solid #2fb15f;}
a:hover.link {text-decoration:none; color:#fff; background-color:#2fb15f;}

.imglink {overflow:hidden; width:1px; height:1px;}

.rrClipRegion{border:none !important;}

label {color:#003e7e;}
input {color:#003e7e; border:#003e7e 1px solid; background-color:#fff; font-size:1.2em; padding:5px;}
select {color:#003e7e; border:#003e7e 1px solid; background-color:#fff; font-size:1.2em; padding:5px;}
textarea {color:#003e7e; border:#003e7e 1px solid; background-color:#fff; font-size:1.2em; padding:5px;}
input[type="checkbox"], input[type="radio"], input[type="image"] {border:none;}
input:focus {border:#ead59d 1px solid; background-color:#fdf7e7; color:#bd8301;} 
textarea:focus {border:#ead59d 1px solid; background-color:#fdf7e7; color:#bd8301;} 

input[type="text"], input[type="number"], select, textarea, input[type="password"] {width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
input[type="checkbox"] {margin-right:8px;}

button {width:100%;}
.formsbutton {color:#fff; background-color:#003e7e; font-size:1em; padding:8px 30px 8px 30px; cursor:pointer; text-align:center; border:none;}
.formsbutton:hover {text-decoration:none; background-color:#d35f20;}


.formelement {margin-bottom:15px;}
.formlabel {font-size:0.9em;}
.formelement {}

::placeholder {color:#ced4db; opacity:1;}
::-ms-input-placeholder {color:#ced4db;}

.cutoff {padding:20px 0px 10px 0px; border-bottom:1px dashed #cbdce6;}
.warning {background-color:#de1c1c; color:#ffffff; width:400px; font-size:1.2em; margin-bottom:10px; padding:15px 15px 15px 50px; background-image:url(https://www.frankfield.co.uk/cmsimages/warning_icon.gif); background-position:10px 10px; background-repeat:no-repeat;}

/* ==========================================================================
   Responsive Navigation
   ========================================================================== */

#toolbar {clear:both;}
.toggleMenu {display:inline-block;}
.toggleSearch {display:inline-block;}
nav, ul, li, a  {margin:0; padding:0;}

#nav{position:fixed; padding:0; margin:0; top:0; left:0; width:100%; height:100%; z-index:998; background-color:#2fb15f;}

#nav {display:none;}
.nav {list-style:none; z-index:99;}

.nav:before, .nav:after {content:" "; display:table;}
.nav:after {clear:both;}

.nav ul {padding:0; list-style-type:none; display:block; width:100%;}
.nav a {padding:10px; color:#fff; font-size:1.2em; font-family: 'Roboto', sans-serif; font-weight:300;}
.nav a:hover {color:#93eeb5; text-decoration:none;}
.nav li {position:relative;  margin:0; padding:0;}
.nav > li {float:none; text-align:center;}
.nav > li > a {display:block;}

/* selected toolbar */   
.nav > li .toolsel {color:#93eeb5;} 
.nav > li .toolsel:hover {text-decoration:none;}

#closebut {display:none;}
#CloseMenu {color:#fff; font-size:3.5em; line-height:0.4em; font-weight:600; padding:0; margin:0; cursor:pointer;}

.menuright {float:right;}
.setright {float:right; text-align:right; width:100%;}


/* ------------------------------------------------------- 
  Level 2 naviagtion
------------------------------------------------------- */

.menubox {width:100%; margin-top:20px;}
.menubox a {text-decoration:underline;}
#menutitle {color:#596774; font-size:1.2em; padding:10px 0 10px 5px;}

#level2 {padding:0;}
#level2 ul {list-style:none;}
#level2 li {display:block;}
#level2 a {color:#2fb15f; display:block; padding:15px 0 15px 5px; text-decoration:none; margin:0px; border-top:solid 1px #e6e3e3;}
#level2 a:hover {color:#2fb15f; text-decoration:underline;}
#level2 .noborder a {border-top:none;}

#menu2 a {color:#2fb15f; margin:0px; font-weight:600;}
#menu2 a:hover {color:#2fb15f; text-decoration:none;}

/* ------------------------------------------------------- 
  record paging
------------------------------------------------------- */

.directorypageof {margin-bottom:30px;}

.pagingnav {position:relative; font-size:1.1em;}
.pagingnav ul{margin:0; padding:0; list-style:none;}
.pagingnav li {display:inline; margin:0; padding:0;}
.pagingnav li a {color:#2fb15f; text-decoration:none; padding:5px 10px; margin-right:5px;}
.pagingnav li a:hover {text-decoration:underline;}
.pagingnav li.pagingon {background-color:#2fb15f; color:#fff; border-radius:2px; padding:3px 5px; margin-right:5px; font-weight:600;}

/* ------------------------------------------------------- 
  other   	                                    
------------------------------------------------------- */

iframe {border:0; width:100%; max-width:100%;}


/* ==========================================================================
   horizontal full screen backgrounds
   ========================================================================== */

.fullwidth {position:relative; width:100%;}
.white {background-color:#fff;}
.grey {background-color:#f7f7fa;}
.green {background-color:#2fb15f;}
.greenhome {background-color:rgba(47,177,95,0.7); z-index:11; position:absolute;}

/* ==========================================================================
   Grid
   ========================================================================== */

.container {max-width:1400px; width:100%; margin:0 auto; position:relative;}
.row {display:block; width:100%; min-height:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; float:left; clear:both;}
.row div[class*='col'], .row aside[class*='col'], .row article[class*='col'] {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:block;}

.setright {float:right; text-align:right; width:100%;}
.right {float:right;}
.pagecontainer ul {list-style: none;}

/* ==========================================================================
   Mobile First Default Layout (from 320px)
   ========================================================================== */
    
    .container {width:90%; padding:0 5% 0 5%;}
    .navcontainer {width:90%; padding:0 5% 0 5%; margin:0px auto; position:relative;}

    /* ------------------------------------------------------- 
      vectors                             
    ------------------------------------------------------- */

    .vectors {display:none;}
    .vector {position:relative; width:100%; height:100%;}

    .menuicon {width:40px; height:25px; cursor:pointer; fill:#fff;}
    .hbrlogo {width:50px; height:29px; fill:#d4d4d4;} 
    .twittericon {width:30px; height:30px;}
    .linkedinicon {width:30px; height:30px;}
    .twittericon a {fill:#2fb15f;}
    .portcullisicon {width:36px; height:40px; padding-right:10px; float:left;}
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
	.st1{fill:#FFFFFF;}

    /* ------------------------------------------------------- 
      header
    ------------------------------------------------------- */
    
    #access {width:1px; height:1px; overflow:hidden;}

    .logotitle a {color:#fff; font-size:1.8em; line-height:1em; font-family: 'Roboto', sans-serif; font-weight:300; float:left; padding-top:8px;}
    .logotitle a:hover {text-decoration:none;}

    .col_logo {position:relative; float:left; width:80%; padding:14px 0; z-index:99;}
    .col_menu {position:relative; float:left; width:20%; padding:26px 0 0 0; z-index:99;}
    .col_tool {width:0;}

    .homebanner {position:relative; top:0px; overflow:hidden; max-height:650px; z-index:10;}
    .homebanner img {width:100%;}

    .socialbox {padding-top:10px;}
    .social {float:left; width:30px; padding-right:20px;}

    /* ------------------------------------------------------- 
     footer
    ------------------------------------------------------- */

    .footbox {padding:0 0 50px 0; font-size:0.9em;}

    .terms {width:100%; padding:10px 0;}
    .terms h3 {color:#2fb15f; font-size:1.2em; font-weight:600; margin:0 0 5px 0;}
    .terms a {color:#999; text-decoration:none;}
    .terms a:hover {color:#2fb15f; text-decoration:underline;}
    .hbr {float:right; padding:25px 0;}

     /* ------------------------------------------------------- 
      Grids
    ------------------------------------------------------- */

    .pagegrid {display:grid; grid-template-columns:auto; grid-template-rows:auto; width:100%; height:100%; grid-gap:20px; margin:40px 0;}
    .homecontent img {width:100%;}
    .homeside {}

    .gridcenter {grid-column:1/2; grid-row:1/2; align-self:center; text-align:center;}

    .pagecontent {margin:40px 0;}

    /* ------------------------------------------------------- 
      Page
    ------------------------------------------------------- */

    .col50 {width:100%;}
    
    /* ------------------------------------------------------- 
      News
    ------------------------------------------------------- */
  
    .newsgrid {display:grid; grid-gap:30px; width:100%; height:100%; margin:30px auto; grid-template-columns: 1fr; grid-auto-rows:auto;}
    .newsitem {background-color:#fff;}
    .newsitem .content {height:100%;}

    .newsitem a, .newstxt a {color:#999;}
    .newsitem a:hover, .newstxt a:hover {text-decoration:none;}
    .newsitem a:hover .more {text-decoration:none; color:#fff; background-color:#2fb15f; box-shadow: 5px 5px 8px #bce8cc;}

    .newsitemgrid {display:grid; width:100%; height:100%; grid-template-columns:auto; grid-auto-rows:1fr 50px; overflow: auto;}
    .newsitem img {width:100%;}
    .newsitem h3 {color:#1ba14d;}
    .newscopy {padding:15px 0;}
    .newsdate {margin-bottom:10px; font-size:0.9em; color:#2fb15f;}
    .newstxt {padding:0 0 10px 0; font-size:0.9em;}

    .more {color:#2fb15f; padding:8px 30px; cursor:pointer; text-align:center; font-size:1em; display:inline-block; border:1px solid #2fb15f;}
    
    .newsitemgrid2 {display:grid; width:100%; height:100%; grid-template-columns:auto; grid-auto-rows:auto; grid-gap:30px; border-top:2px solid #eee; padding-top:30px;}
    .newsbutton {padding:8px 0 30px 0;}
    .newscopy2 h3 {margin:0 0 10px 0;}

    .newsjusttext {border-top:1px solid #ddd; padding-top:30px;}
    .newsimage img {width:100%;}
    .newsimage2 img {width:100%; padding-bottom:30px;}

    .latestbox {margin-top:75px;}
    .newslatest {padding:20px 0; border-top:2px solid #eee;}
    .newslatest h3 {color:#999; font-size:1em;}
    .newslatest a:hover {text-decoration:none;}
    .newslatest a:hover h3 {color:#2fb15f; text-decoration:none;}
    .latestnewsdate {font-size:0.9em; color:#2fb15f; padding-bottom:10px;}

    @supports not (display: grid) {
        .newsgrid:before, .newsgrid:after {content:""; display:table;}
        .newsgrid:after {clear:both;}
        .newsgrid {zoom:1;}
        .newsgrid {float:left; width:170px; margin:0 20px 20px 0;}
    }
    
    /* ------------------------------------------------------- 
      campaigns
    ------------------------------------------------------- */
    
    .campaigngrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto; width:100%; height:100%; grid-gap:30px; padding:40px 0; margin-bottom:40px;}
    .campaign {width:100%; background-color:#fff; border-radius:10px;}
    .campaignbox {padding:20px;}
    .campaign a:hover {color:#999; text-decoration:none;}
    .campaignimg {position:relative; text-align:center;}
    .campaigntxt {width:100%; padding:5px 0 30px 0; text-align:center; line-height:1.4em;}
    .campaigntxt h3 {font-size:0.9em;}
    .campnoimage {position:absolute; top:0; left:0; width:100%; height:100%; align-self:center; text-align:center; color:#65badc; font-weight:600; font-size:1.8em;}
    .mainimage {margin-bottom:10px; text-align:center;}
    
  
/* ==========================================================================
   Tablet Portrait
   ========================================================================== */

@media screen and (min-width:360px) {
    .container {width:320px; padding:0;}
    .navcontainer {width:320px; padding:0;}
    .logotitle a {font-size:2em; padding-top:5px;}
}


@media screen and (min-width:400px) {

    .container {width:360px; padding:0;}
    .navcontainer {width:360px; padding:0;}
    .logotitle a {font-size:2.2em;}
}

@media screen and (min-width:480px) {

    .container {width:440px;}
    .navcontainer {width:440px;}
}

@media screen and (min-width:640px) {

    .container {width:580px;}
    .navcontainer {width:580px;}  
   
    .terms {float:left; width:520px;}
    .hbr {float:left; width:60px; padding:90px 0 25px 0;}

    h1 {font-size:1.8em;}
    h2 {font-size:1.3em;}

    
}

@media screen and (min-width:760px) {

    .container {width:700px;}
    .navcontainer {width:700px;}
    .terms {width:640px;}
    .gridtable tr.head th {font-size:1.1em;} 
    .gridtable tr td {font-size:0.9em;}

    .portcullisicon {width:45px; height:50px; padding-right:15px;}
    .logotitle a {font-size:2.4em; padding-top:8px;}
    .col_menu {padding:32px 0 0 0;}

    .newsgrid {grid-template-columns:1fr 1fr;}
    .campaigngrid {grid-template-columns:1fr 1fr;}

    .newsitemgrid2 {grid-template-columns:1.5fr 1fr; grid-template-rows:1fr;}
    .newsimage {grid-column:2; grid-row: 1/2;}
    .newscopy2 {grid-column:1; grid-row: 1/2;}
 
}

/* ==========================================================================
   Desktop layout
   ========================================================================== */

@media screen and (min-width:900px) {

    .container {width:840px;} 
    .navcontainer {width:100%;}

    .col_logo {float:left; width:300px;}
    .col_menu {float:left; width:0px;}
    .col_tool {float:left; width:540px;}

    .hbrlogo {width:60px; height:35px;} 
    .col_copyright h3 {font-size:1.4em;}
    .terms {width:780px;}
    #access {width:2px;}
    .desktopbreak::before {content:"\A"; white-space: pre;} 

    /* ------------------------------------------------------- 
     navigation
    ------------------------------------------------------- */

    #navbox {position:relative; top:0; left:0; z-index:2;}
    #toolbar {display:block; padding-left:0px;}

    #OpenMenu {display:none;}

    #nav {position:relative; padding:0; margin:0; background:none; display:block;}
    #nav ul {float:right; padding-top:7px;}

    .nav {position:relative; padding:0; top:15px;}
    .nav li {margin:0;}
    .nav a {padding:10px; font-size:0.9em;}

    .nav a.navparent .menuright {padding-left:15px;}
    .nav > li {float:left; border-top:none; position:static;}
    .nav ul {list-style:none; z-index:999;}

    .pagesingle {width:600px;}

    .col50 {float:left; width:45%; margin-right:5%;}
    .pagegrid {grid-template-columns:1fr 300px; grid-gap:50px;}

    .newsgrid {grid-template-columns:1fr 1fr 1fr;}

    .campaigngrid {grid-template-columns:1fr 1fr 1fr; padding:60px 0;}
    .campaigntxt h3 {font-size:1em;}
    .camphome {grid-template-columns:1fr;}

    .newsitemgrid2 {grid-template-columns:auto; grid-auto-rows:auto;}
    .newsimage {grid-column:1; grid-row: 1/2;}
    .newscopy2 {grid-column:1; grid-row: 2/3;}
}

@media screen and (min-width:1080px) {
    
    .container {width:1000px;}
    .pagegrid {grid-gap:80px;}
    .col_tool {width:700px;}
    .terms {width:940px;}

    h1 {font-size:2em;}
    .nav a {padding:10px 15px; font-size:1em;}
    .newsitem h3 {line-height:1.3em;}
    .campaigntxt h3 {font-size:1em; line-height:1.4em;}

    .col_logo {padding:20px 0;}
    .nav {top:20px;}
  
    .newsitemgrid2 {grid-template-columns:1.5fr 1fr; grid-template-rows:1fr;}
    .newsimage {grid-column:2; grid-row: 1/2;}
    .newscopy2 {grid-column:1; grid-row: 1/2;}
}


@media screen and (min-width:1240px) {
 
    .container {width:1160px;}
    .pagegrid {grid-gap:100px;}
    .col_tool {width:860px;}
    .nav {padding:0; top:18px;}
    .nav a {font-size:1.2em;}
    .terms {width:1100px;}
    .newsgrid {grid-template-columns: repeat(auto-fill, minmax(350px,1fr));}
    .newsitemgrid2 {grid-gap:40px;}
}