/*
* Custom Style for the site
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Base Styles
- Header
- Navigation
- Social Icons
- Sections
- Footer
- Media Queries
*/

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.overflow {
    overflow: hidden;
}
.pull-right {
    float: right;
}
.single-service {
    overflow: hidden;
    display: block;
	padding-top: 30px;
}
*::before, *::after {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
.clearfix::before, .clearfix::after, .dl-horizontal dd::before, .dl-horizontal dd::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-footer::before, .modal-footer::after {
    content: " ";
    display: table;
}
/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#header {
    margin-bottom: 0;
    padding: 10px 0;
	background-color:#ffffff;
}
.ha-header {
    left: 0;
    position: fixed;
    top: 0;
    transform: translateY(0%);
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 10000;
}
.navbar-header {
    float: left;
	padding:20px 0 12px;
}
.logo
{
	width:255px;
	height:92px;
}


/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*Main*/
.nav {
    list-style: outside none none;
    margin-bottom: 0;
    padding-left: 0;
}
.navbar-right {
    float: right;
}
.navbar-nav > li {
    float: left;
}
.nav > li {
    display: block;
    position: relative;
}
.nav > li > a {
    display: block;
    padding: 10px 0px 10px 15px;
    position: relative;
}
.nav-pills > li > a {
    border-radius: 4px;
}
.nav-pills > li {
    float: left;
}

#header .navbar-nav.navbar-right > li a {
    font-size: 16px;
    color: rgb(22, 85, 112);
	line-height: 3.125;
	text-align: right;
    text-decoration:none;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: #428bca;
    color: #fff;
}
#header .navbar-inverse .navbar-nav li a:hover {
    color: #00aeef;
}
.navbar-brand h1
{
	margin:0;
}
/*Mobile*/
.navbar-mobile {
	display:none;
}

/*mobile nav*/
#menu-icon {
	height: 18px;
	background: transparent url(../images/menu-icon.png) no-repeat right;
}
#nav, #nav ul { /* all lists */
	float: right;
	margin: 0;	
	z-index:1;
}
#nav a {
	width: 100%;
	font-size: 30px;
    color: rgb(19, 85, 113);
	line-height: 1.5;
	text-align: left;
	text-decoration:none;
	padding:0px 15px;
 }
#nav li { /* all list items */
	float: right;
	width: 100%; /* width needed or else Opera goes nuts */
	display: inline-block;
	margin-bottom:0;
}

#nav li ul { /* second-level lists */
	background-color: #6bc171;
	margin: 60px 0 0px;
	position: absolute;
	width: 100%;
	left: -999em;
	right: 0;
	}

#nav li > ul {
    position: absolute;
    left: 0;
    top: auto;
    width: 100%;
    display: none;
    white-space: nowrap;
	padding: 45px 0;
}


#nav li > a:only-child:after { margin-left: 0; content: ''; }

#nav li > ul > li { 
    display: block; 
}
#nav li ul li:hover a{ color:#ffffff; padding:25px 15px;}
#nav li ul li:hover { background-color: #135571; color:#ffffff;}
/*#nav li:hover > ul {display: block; }*/
#nav li > ul > li { 
    
	display: block;
	margin-bottom:0;
}
/* Social Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.social-icons
{
	padding-top:2px;
}
.social-icons ul 
{
	height: 19px;
}
.social-icons ul li {
    padding: 0 0 0 10px;
}
.social-icons ul li:first-child {
    padding: 0;
}
.social-icons ul li a {
    color: #ffffff;
    font-size: 18px;
    padding: 0 2px;
	background-color: rgb(102, 194, 117);
	border-radius: 2px;
	line-height:1.25;
}

.social-icons ul li .green {
  color: rgb(102, 194, 117);
  background-color:#ffffff;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.anchor{
  display: block;
  height: 151px; /*same height as header*/
  margin-top: -151px; /*same height as header*/
  visibility: hidden;
}
#body-content
{
	margin-top:147px;
}

#our-concept, #investment-verticals, #rationale, #stakeholders, #leadership {
    position: relative;
	color: rgb(255, 255, 255);
	text-align: center;
	padding:75px 0;
	}
#our-concept, #rationale, #leadership{
	background:url(../images/bridge.jpg) no-repeat fixed center top;
}
#our-concept
{
	padding:154px 0;
}

#investment-verticals{
	background-color: rgb(22, 85, 112);
}

#stakeholders 
{
	background-color: #328f41;
}
.text-holder {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
	margin-top: 25%;
    transform: translate(-50%, -50%) 
}


#our-concept h1 {
  font-size: 60px;
  line-height: 0.6;
  font-weight:bold;
}
#our-concept h2 {
  font-size: 30px;
  line-height: 1.6;
  font-weight: 500;
}
#our-concept p {
	font-size: 19px;
	line-height: 1.8;
	font-weight: 300;
	padding: 0px 20px;
}
#investment-verticals h1{
	padding-top: 50px;
}
#investment-verticals h1, #rationale h1, #stakeholders h1, #leadership h1{
	font-size:3.6rem;
}
#investment-verticals h2{
  font-size: 30px;
  line-height: 1.167;
  padding:0 20px;
}
#investment-verticals p{
  font-size: 14px;
  line-height: 1.714;
}
.single-service img
{
	height:128px;
	margin-bottom:35px;
}
.single-service h2 {
    margin-top: 0px;
    margin-bottom: 15px;
}
#investment-verticals h1, #rationale  h2, #stakeholders h2{
	font-size:36;
	line-height: 0.972;
}
#rationale  p, #stakeholders p, #leadership p{
	font-weight: 300;
	line-height: 32px;
	font-size:16px;
}
.green-line, .light-green-line {
	clear:both;
	width:29%;
	height:3px;
	margin: 50px auto 0;
}
.green-line
{
	background-color: rgb(102, 194, 117);
}
.light-green-line {
	background-color: rgb(176, 218, 169);
}
#leadership h1{
	padding-bottom:10px;
}
#leadership h2{
	font-size:24px;
	font-weight:300;
}
#leadership .social-icon{
	font-size: 20px;
	color: #1d363e;
	line-height: 1;
	background-color:rgb(59, 177, 230);
	padding: 0 4px;
	border-radius:2px;
}
.readmore{
color:#ffffff;text-decoration:none;
cursor: pointer;
}
.hide {
  display: none;
}
.show {
  display: inline-block;
}
/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{
	background-color:#165570;
	color: rgb(255, 255, 255);
	padding:15px 0;
}
footer li{
	border-right: 1px solid white;
    float: left;
    font-size: 12px;
    padding: 0 10px;
	margin: 0 0 0.2rem;
}
footer li:last-child{
	border-right: 0px solid white;
}
footer ul{
	margin:0;
	padding:0;
	list-style:none;
}

footer .footer-upper{
	margin: 0 auto;
	display:table;
	}
footer .social-icons ul li{
    border: 0;
}
footer .social-icons ul li a {
    background-color: #ffffff;
    color: #165570;
	font-size:12px;
	padding-left:5px;
}
footer .footer-lower{
	font-size: 9px;
	margin: 0px auto;
	font-weight: 300;
	text-align: center;
}
.white{
	color:#ffffff;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
@media only screen and (max-width: 1200px) {
.container {
    width: 95%;
}

}
@media only screen and (max-width: 950px) {

.nav > li > a {
    padding: 10px 0px 10px 8px;
}
}
@media only screen and (max-width: 900px) {

.navbar-right {
    margin-left:0;
}
.nav > li > a {
    padding: 10px 0px 10px 6px;
}
.container
{
	width:97%;
}
}
@media only screen and (max-width: 850px) {
	.container {
		width: 100%;
		padding: 0 10px;
	}

	.logo {
		width: 230px;
		height: auto;
	}
	.single-service {
		padding-top: 5px;
	}
	.anchor {
		height: 108px;
		margin-top: -108px;
	}
	#our-concept, #rationale, #leadership{
		background:url(../images/bridge-mobile.png) no-repeat fixed center top/100% 100%;
	}
	#header {
		padding-top: 15px;
		padding-bottom: 30px;
	}

	#our-concept h1 {
		line-height:1.2;
	}
	#investment-verticals  h1 {
		padding-top: 0px;
	}
	#our-concept h2,  #investment-verticals h2, #rationale h2, #stakeholders h2, #leadership h2 {
	  font-size: 18px;
	}
	#our-concept p,  #investment-verticals p, #rationale p, #stakeholders p, #leadership p {
	  font-size: 12px;
	  line-height:24px;
	}
	#investment-verticals p {
    	padding: 0 0 20px;
	}
	.green-line, .light-green-line {
		width: 50%;
	}
	.one-third.column {
		width: 100%;
	}
	#our-concept, #rationale, #stakeholders , #leadership{
		padding: 50px 10px 40px;
	}
	#our-concept h1 , #investment-verticals h1, #rationale h1, #stakeholders h1, #leadership h1 {
		font-size: 28px;
	}
	.navbar-mobile {
		display: inline-block;
		float: right;
		margin: 0 0 30px;
		padding-right:15px;
	}
	.navbar-main {
		display: none; 
	}
	.navbar-header {
		float: none;
		position: absolute;
		top: 0px;
		padding:0 15px;
	}
	#body-content {
		margin-top: 110px;
	}
	a#menu-icon
	{
		padding-bottom: 40px;
		position: fixed;
		right: 30px;
		width:42px;
		cursor:pointer;
	}
	.social-icons
	{
		padding:0 15px;
	}
	footer .column{
		margin-left: 0% !important;
	}

}
/* Larger than mobile */
@media only screen and (max-width: 550px) {

	.container
	{
		padding:0 5px;
	}
	a#menu-icon
	{
		right: 8px;
	}
}
/* Larger than mobile */
@media only screen and (max-width: 400px) {

.container
{
	padding:0;
}

.navbar-header {
  padding: 0px;
}
.social-icons {
  padding: 0;
}
footer li, footer li a {
   font-size: 10px;
}
footer li {
  font-size: 10px;
  padding: 0 5px;
}
.social-icons ul li {
  padding: 0 0 0 5px;
}
.logo {
    width: 200px;
}
#nav a {
    font-size: 24px;
	}
}
  /* Larger than phablet (also point when grid becomes active) */
@media only screen and (max-width: 300px) {
footer li {
    font-size: 8px;	

}
.logo {
    width: 150px;
}
#nav a {
    font-size: 20px;
	}
}

@media only screen and (max-width: 210px) {
.logo {
    width: 100px;
}
#nav a {
    font-size: 18px;
	}
}