.hero-section, .hero-section.internal {
  background: url("../images/bfa-hero-1.jpg") 50% no-repeat;
  background-size: cover;
  height: 33vh;
  max-height:280px;
  min-height:200px;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
		   flex-direction: column;
}

	.logo {margin-top:30px; max-width:140px; transition: max-width .5s;}
	.logo:hover {max-width:160px;}

.smartanimation {height:20vh;  display: flex; align-items: center;}

.center 
{text-align: center; margin: 0px auto;}

.colour1 {background-color:#cde6f4} /* lightest to darkest */
.colour2 {background-color:#adcbe1}
.colour3 {background-color:#7a99b3}
.colour4 {background-color:#4c7c9e}
.colour5 {background-color:#2b536b}
.colourwhite {color:#ffffff}

.colour2 a, .colour3 a, .colour4 a, .colour5 a {color:#ffffff}
.colour1 a {color:#4c7c9e;}

.segment {padding: 40px 0px;}

.scale-with-grid {width:100%;}

/** our team **/

.teammembers {display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-flex-direction: row; /* Safari */
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: row;
    flex-direction: row;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;}
    
.teammember {flex: 0 1 auto;}
.teammember {padding:15px; border-top-right-radius:50px; margin-bottom:20px;}
.teammember:nth-child(1n)  {background-color: #cde6f4;}
.teammember:nth-child(2n)  {background-color: #adcbe1;}
.teammember:nth-child(3n+1){
    clear:left
}

.teammembers .four.columns:nth-child(3n+3) {clear:right;}

.teammembers .four.columns:nth-child(3n+1) {margin-left:0px;}

.news_row_container {padding:20px 0px;}
.news_row_container:nth-child(1n)  {background-color: #cde6f4;}
.news_row_container:nth-child(2n)  {background-color: #adcbe1;}

.initialfoot h1 {text-transform: uppercase; font-size:1.6rem; padding:20px 0px 0px 0px; letter-spacing:2px;font-family: 'Alegreya Sans', sans-serif;}

h1 a, h2 a, h3 a, h4 a, h5 a {text-decoration:none;}

.logoflex {  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-flex-direction: row; /* Safari */
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: row;
    flex-direction: row;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.logoflex  {max-width:80%;text-align:center;margin:40px auto 0px auto;
-webkit-box-align: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;}

.clientlogos {padding-top:30px; padding-bottom:40px;}
.clientlogo {text-align:center; margin:0px auto; max-width:200px; padding:20px;}
.clientlogo img {width:100%;}

.imagelayer {
    position: relative;
    width: 100%;
}

.textoverlay {
    color: #fff;
    position: absolute;
    font-weight: normal;
    bottom: 0px;
    left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 65%;
    padding:10px;
	margin-bottom:7px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
	 transition: height .5s;
}

.imagelayer:hover .textoverlay {
    height: 85%;
}

.imagelayer:hover .hiddentext {
    opacity: 1.0;
}

.newsitemlink h5 {font-family: 'Alegreya Sans', sans-serif; text-transform: uppercase;}

.newsitemlink
{background-color:#cde6f4;   
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
		   flex-direction: row;}

.newsitemlink .text
{padding:10px;}

.newsitemimage {
background: url("../images/keysdoor-500.jpg") 50% no-repeat;
  background-size: cover;
  opacity: .8; transition: opacity .5s;
  }

  .newsitemimage:hover {
  opacity: 1; 
  }

.crosslink {position: absolute; bottom:150px; right: 5px; max-width: 70px; opacity: .7; transition: opacity .5s;}
.newsitemimage:hover .crosslink {opacity:1;}

.circular {border-radius: 50%;}

.padding15 {padding:15px;}

blockquote{
  display:block;
  padding: 15px 20px 15px 55px;
  margin: 0 0 20px;
  position: relative;


}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/

  /*Font*/
  font-family: Georgia, serif;
  font-size: 80px;
  font-weight: bold;
  color: #7a99b3;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:-25px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "\201D";
    /*Font*/
  font-family: Georgia, serif;
  font-size: 80px;
  font-weight: bold;
  color: #7a99b3;
  
  /*Positioning*/
  position: absolute;
  right: 10px;
  bottom:-15px;
}

/* Navigation */ 

.navbackground {width:100%; background-color:rgba(54,129,175,0.8);   position: -webkit-sticky;
          position: -moz-sticky;
          position: -ms-sticky;
          position: -o-sticky;
            position: sticky;
           top: 0;
		   z-index: 9999;
		   display:block;
		 }


#nav {position:fixed; top:0px; font-size:1.6rem; line-height:3.2rem; z-index:6666; text-transform: uppercase;
	color: #fff;
	text-align:left;
	width:100%; height:70px; 
letter-spacing: 1px;
	}

#nav ul {
	margin: 0px;
	padding:0px;}

	#nav ul li {
		display: inline-block;
		list-style-type: none;
		padding:0px; margin:0px;
	}

	#nav ul li:hover {
			background-color: #4c7c9e;
	}
	
		#nav ul li a {
			color: #fff;
			display: block;
			line-height: 12px;
padding:15px; 
			text-decoration: none;
		}
	        #nav ul li a:visited {
			border-bottom: 0px solid transparent; 
		}
		
#nav ul li a:hover {

			color: #fff;
		}


.selected {
background-color: #2975a9;
		}

	
.mobile-menu-link {display:block; text-decoration:none; color:#fff; background-color:#7a99b3; position:relative; z-index: 100; height:40px} 

        .mobile-menu-link:hover, .mobile-menu-link:visited {color:#fff;}   
        ul.menu-large {display:none;}

		.open ul {      
        color:#fff;
        font-size:1.5rem;
        display: block;
        z-index: 9000; 
        position:relative;  
        }
        
        .mobile-home {margin-bottom:16px; margin-top:20px;}

        #nav.open ul li { display: block; list-style: none; width:100%; padding: 14px;}
        #nav.open ul li a, .mobile-home { display: inline-block; padding: 4px; color:#fff!important; text-decoration: none;   }
    
        #nav.open ul li a:hover, #nav.open ul li a:active, .mobile-home:hover, .mobile-home:active  { color: #fff; border-bottom:2px solid #fff;}

 /* lines menu icon */

	.nav-opener {
		top: 12px;
		left: 25px;
		z-index: 101;
		display: inherit;
		position: absolute;
		text-indent: -9999px;
		width: 21px;
		height: 12px;
	}

	.nav-opener:before,
	.nav-opener:after,
	.nav-opener span {
		top: 5px;
		left: 0;
		right: 0;
		height: 2px;
		position: absolute;
		background: #fff;
		-webkit-transition: all .2s linear;
		transition: all .2s linear;
	}

	.nav-opener:before,
	.nav-opener:after {
		content: "";
		top: 0;
	}

	.nav-opener:after {
		top: 10px;
	}

	.nav-opener.overlay {
		opacity: 0;
		padding: 0;
		z-index: 8899;
		position: fixed;
		visibility: hidden;
		top: 40px;
		left: 0;
		right: 0;
		bottom: 0;
		bottom: auto;
		width: auto !important;
		height: 9999px !important;
		-webkit-transition: all .25s linear;
		transition: all .25s linear;
	}
	

	.nav-opener.overlay:hover {
		opacity: 1;
		background: rgba(122, 153, 179, .9);
	}

	.nav-opener.overlay:after,
	.nav-opener.overlay:before {
		display: none;
	}


	/* close button transition */

	.open .nav-opener {
		height: 16px;
	}

	.open .nav-opener span {
		opacity: 0;
	}

	.open .nav-opener:hover {
		opacity: .9;
	}

	.open .nav-opener:after,
	.open .nav-opener:before {
		top: 7px;
		background: #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.open .nav-opener:after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
    
    .open .overlay {
		opacity: 1;
		visibility: visible;
		background: rgba(122, 153, 179, .9);
	}		






.stick {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}



        /*Second level rollover */
	
#nav li ul {
display: inline-block;
	position: absolute;
	left: -999em;
	z-index: 100; width:16em;
	background-color: #2975a9;}

#nav li:hover ul {
	left: auto;

	}


#nav li ul li {
border-bottom:2px solid #fff;
line-height:18px; text-align: left;
width:100%;

	}

	#nav li ul li  a{
line-height:18px; 


	}

#nav li ul li:hover {
background-color: #4c7c9e;
}

#nav li ul {

    visibility:hidden;
    opacity:0;
    filter:alpha(opacity=0);
    -webkit-transition:1s ease;
    -moz-transition:1s ease;
    -o-transition:1s ease;
    transition:1s ease;
}
#nav ul > li:hover ul {
    visibility:visible;
    opacity:1;
    filter:alpha(opacity=100);
}

#subnav {position:relative; top:0px; font-size:1.6rem; line-height:3.2rem; z-index:6666; 
	color: #fff;
	text-align:center;
	width:100%; height:70px; 
letter-spacing: 1px;
	}

#subnav ul {
	margin: 0px;
	padding:0px;}

	#subnav ul li {
		display: inline-block;
		list-style-type: none;
		padding:10px; margin:0px;
	}

	#subnav ul li:hover {
			color: #4c7c9e;
	}

.flexrow  {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-direction: column; /* Safari */
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-orient:         vertical;
  -webkit-box-direction:         normal;  
  flex-direction:         column;

 }

.half {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 100%;               /* For old syntax, otherwise collapses. */
  min-height:100%;
}

.centerit
{display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */*
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.vertcenter
{ text-align:center;
  max-width:80%;
  margin:0px auto;
  padding:30px 0px 30px 0px;
}

.vcenter
{ text-align:center;
  margin:0px auto;
  padding:30px 0px 0px 0px;
}

footer h4{font-size: 2.9rem;}
footer h5{font-size: 2.2rem; margin-bottom:5px;}

.smarts {margin-top:26px;}
.copyright {margin-top:20px;}

footer .colour3 a {color:#d0e6f9;}


.textoverlay h5 {font-size: 3rem; padding-bottom:5px; margin-bottom:0px;}


/* Larger than mobile */
@media (min-width: 400px) {
    
 .homecol {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 100%;               /* For old syntax, otherwise collapses. */
  min-height:100%;
}   
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

    .three.columns.homeblocks      { width: 48%;  }
    .three.columns.homeblocks:nth-child(3)    {margin-left: 0; }
.textoverlay h5 {font-size: 2.6rem; line-height:2.4rem; padding-bottom:6px; margin-bottom:0px;}



}

/* Larger than tablet */
@media (min-width: 750px) {
    
    	.logo {margin-bottom:10px; max-width:170px; transition: max-width .5s;}
	.logo:hover {max-width:190px;}
	
	.hero-section, .hero-section.internal {

  max-height:280px;
  min-height:230px;
}

	
    
    footer h4 {font-size:2.5rem; line-height:1.1; }
	#nav {text-align:center; line-height:2.2rem; }
	#nav ul li {text-align:left;}

    /* Navigation changes from line menu to on page */
    .mobile-menu-link {display:none;}
    .nav-opener {display:none;}
    .nav-search {display:none;}
    #nav {position: relative; font-size:1.2rem; line-height:1.5; height:auto; display:block;
      }  
     ul.menu-large {display:inline-block;}
  	     .three.columns.homeblocks      { width: 22%;  }
  	     .three.columns.homeblocks:nth-child(3)    {   margin-left: 4%; }

.hiddentext {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
     font-size: 0.7em;
}

.subhomeblock .hiddentext {
    opacity: 0.0!important;}
    
.subhomeblock .imagelayer:hover .textoverlay {
    height: 60%!important;}
    

.textoverlay {
    height: 50%;
}

.textoverlay h5 {font-size: 1.4rem; }
  
      
.flexrow  {
 -webkit-flex-direction: row; /* Safari */
      -moz-flex-direction: row;
    -ms-flex-direction: row;
  -webkit-box-orient:         horizontal;
  -webkit-box-direction:         normal;
         flex-direction:         row;
         -moz-align-items:stretch;
-ms-align-items:stretch;
-webkit-align-items:stretch;
-webkit-box-align:stretch;
    -ms-flex-align:stretch;
        align-items:stretch;
}

.wraprow {
     -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
}

.half {min-height:100px;}
.vertcenter p {padding-bottom:0px; margin-bottom:0px;}
.vertcenter h5 {padding-bottom:0px; margin-bottom:0px;}
    
      .homecol {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- */
  -ms-flex: 1;              /* IE 10 */
  -webkit-flex: 0 1 50%;
          flex: 0 1 50%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
width:50%;  box-sizing: border-box;
}



}

/* Larger than desktop */
@media (min-width: 1000px) { 
.hiddentext {font-size: 0.8em;}
.textoverlay h5 {font-size: 2.1rem;}
.imagelayer:hover .textoverlay {
    height: 80%;}
    #nav {font-size: 1.5rem;}


}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
.hiddentext {font-size: 0.95em;}
    	.logo {margin-bottom:10px; max-width:200px; transition: max-width .5s;}
	.logo:hover {max-width:220px;}

}

/* Larger than 1500*/
@media (min-width: 1500px) {
    	.logo {margin-bottom:10px; max-width:230px; transition: max-width .5s;}
	.logo:hover {max-width:250px;}
	
}

.pagination {text-align:center;}
.pagination, .pagination ul {
    padding: 0;
    margin: 0 auto;
    text-align: center;
    width: auto;
    display: inline-block;
    list-style-type: none;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    list-style: none outside;
}

.pagination li
{
    float: left;
    width: auto;
    margin: 2px;