html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:after,
*:before {
  margin: 0;
	padding: 0;
	box-sizing: inherit;
	
}
html {
	font-size: 62.5%; 
}
body{
    font-family:  lato, Arial, Verdana, sans-serif;
	font-size: 1.6rem;
	line-height: 1.75;
    background-color: #fff;
    color: #414142;
}

li{
    margin-left: 30px;
    line-height: 25px;
}
p{
    font-size: 14pt;
    line-height: 18pt;
    margin-bottom: 10px;
}

h2{
    font-family: Basic Sans SemiBold, Calibri, arial, sans-serif;
    font-size: 20pt;
    color: #17252E;
}
h3{
    font-family: Basic Sans SemiBold, Calibri, arial, sans-serif;
    font-size: 16pt;
    color: #17252E;
 
}

.button--grey {
    color: #35495e;
    text-decoration: none;
    margin: 15px 0px;
    width: auto;
    border-radius: 2px;
    border: 1px solid #35495e;
    /* padding: 15px 30px; */
    padding: 8px 15px;
    font-size: 13px;
    background-color: #F0F0F0;
  }



 /* ---------------- Screen Reader Links ------------------------- */
 .skipnav { 
	text-align: center; 
}

.skipnav a { 
	position: absolute; 
	left: -10000px; 
	width: 1px;             
	height: 1px; 
	overflow: hidden; 
	
}

.skipnav a:focus, .skipnav a:active { 
	position: absolute; 
	left: 0; 
	width: auto; 
	height: auto; 
	overflow: visible; 
	text-decoration: underline; 
	background-color:#ffffff;
	color:#000000;
	font-weight:bold;
	padding:10px;
	font-size:18px;
	z-index: 4000;
}
  
/* ------------------- Header Include ---------------------------- */
header{
    background-color:#1D2F38;
    height: 130px;
    color: #fff;

}
.headerContainer{
    width: 95%;
    height: 80px;
    margin:auto;
    padding-top: 30px;
}
.logo{
    width: 30%;
    float:left;
}
.logo a{
    color: #fff;
}
nav{
    float:right;
    padding-top:10px;

}
nav li{
    display: inline-block;
    font-size: 16pt;
    padding: 10px 20px;
    margin-top: 15px;
}
nav a{
    color: #fff;
    text-decoration:none;
}
#nav{
    color: #fff;
}


.subNav{
    display:none;
}

#wrapper{
    display: table;
}



/* Content Section */

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

/* ------------------- Left Hand Nav Include ---------------------------- */
/*.colLeft{
    width: 15%;
    background-color: #223B47;
}*/
.colLeft{
    width: 2%;
    background-color: #223B47;
}
.colLeft nav{
    width: 250px;
    margin-left: -20px;

}
  .menu-icon{
      margin-left: 20px;
      margin-top: 10px;
      width: 60px;
      padding: 0 10px;
  }
 input.menu-icon{
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-right: 15px;
    color: #fff;
 }

/* ------------------- Content Section ---------------------------- */
.content{
    width: 60%;
    height: 800px;
    overflow:hidden;
    padding: 40px 30px 30px 30px;
    vertical-align: top;
}

.clear{
    clear:both;
}

/* ------------------- Footer Include ---------------------------- */
footer{
    background-color: #17252E;
    color: #fff;
    height: 125px;
    border-top: 20px solid #9daeb3;
    margin-bottom:-10px;
}
.footerContainer{
    width: 90%;
    margin:50px auto 0 auto;
}
.accessibility{
    float:right;
    display: block;
    overflow:hidden;
    margin-top:-40px;
}
.accessibility a{
    color: #fff;
    text-decoration: underline;
    position: relative;
    top: -7px;
}


/* --------------- Back to Top ----------------------- */
/*Back to top button */
#back-top {
	position: fixed;
	bottom: 20px;
	right: 50px;
	color: #ccc;
}
#back-top a {
	width: 75px;
	display: block;
	text-align: center;
	font-size: .65em;
	text-transform: uppercase;
	text-decoration: none;
	color: #ccc;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #ccc;
}
/* arrow icon (span tag) */
#back-top span {
	width: 60px;
	height: 50px;
	display: block;
	margin-bottom: 5px;
	background: #422c59 url(../images/up-arrow.png) no-repeat center center;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	color:#e4e4e4;
}
#back-top a:hover span {
	background-color: #777;
}
.mobileNav{
    display:none;
}
.accessibility #__ba_panel .customText{
    display: inline-block;
    color: #fff;
    margin-right: 50px;
}



/*FOR SCREENS LESS THAN 1410px WIDE*/
@media screen and (max-width: 1410px) {
    input.menu-icon{
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 10px;
        margin-right: 10px;
    }
}

/*FOR SCREENS LESS THAN 1024px WIDE*/
@media screen and (max-width: 1026px) {
    .logo{
        clear: both;
        margin: auto;
    }
    nav{
        margin-left:0px;
        float: left;
    }
    nav ul li{
        margin-left:0;
    }
    .colLeft nav{
        width: 100%;
    }

    .button--grey {
        padding: 5px 15px;
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 30px;
      }
}



/*FOR SCREENS LESS THAN 1024px WIDE*/
@media screen and (max-width: 1024px) {
    .leftNav{
        max-height: 500px;
    }
    .menu *{
        margin-left: 20px;
    }
    .content img{
        width: 30%;
    }

}
/*FOR SCREENS LESS THAN 891px WIDE*/
@media screen and (max-width: 891px) {
    header{
        height: 200px;
        text-align: center;
    }
    .logo{
        margin-left: 20px;
    }
}

/*FOR SCREENS LESS THAN 768px WIDE*/
@media screen and (max-width: 768px) {
    header{
        min-height: 200px;
    }
    .leftNav{
        width: 250px;
    }
    .menu * {
        margin-left: 20px;
    }
    .application-overview a{
        min-width: 35%;
        height: 180px;
    }
    .application-overview{
        margin-bottom: 0px;
    }
}


/*FOR SCREENS LESS THAN 667px WIDE*/
@media screen and (max-width: 667px) {
    .content img{
        width: 80%;
    }
}
/*FOR SCREENS LESS THAN 612px WIDE*/
@media screen and (max-width: 629px) {
    nav{
        margin-left: 20px;
    }
    nav li{
        display: inline-block;
        font-size: 16pt;
        padding: 10px 10px;
        margin-top: 10px;
    }
    .accessibility{
        display: none;
    }
    
}

/*FOR SCREENS LESS THAN 586px WIDE*/
@media screen and (max-width: 586px) {
    header{
        height: 350px;
    }
    .logo{
        width: 96%;
    }
    nav{
        width: 100%;
        margin-left: 0;
    }
    nav li{
        display: block;
    }
    .subNav{
        display: block;
        background-color: #22404C;
    }
    .container{
        width: 100%;
        overflow-x:hidden;
    }
    .colLeft{
        display: inline-block;
        position: relative;
        left: -20px;
        max-width: 1px;
        margin-right: 0;
    }
    .menu-icon{
        display:none;
    }

    .content{
        margin-left: 0;
        width: 100%;
    }
    .menu * {
        display:none;
    }
    .menu2 * {
        margin-left: 0px;
        border: solid 1px transparent;
      }
    #back-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index:100;
        color: #ccc;
        display: none;
    }
      
    .mobileNav{
        display: inline-block;
        min-height: 250px;
        background: #26495b;
    }

    
}

/*FOR SCREENS LESS THAN 516px WIDE*/
@media screen and (max-width: 480px) {
    /* Application Overview Page */
    .application-overview__category{
        width: 140px;
        overflow:hidden;
        margin-right: 120px;
        border:solid 0px transparent;
    }
    .application-overview__category object{
        margin-left: -40px;
        width: 100px;
    }
}



  /*Print Css*/
  @media print {
    nav, #rotatingBanner, #back-top, footer, #video{
        display: none;

    }

    .colLeft{
        position: relative;
        left: -400px;
    }
    .content{
        position: relative;
        top: -40px;
        left: -100px;
    }


    /* Open Data */
    #app{
        width: 500px;
    }

    /* Corporate Scorecard */
    #legend{
        width: 600px;
    }
    .box{
        width: 280px;

    }
    #chart, #chart-area2, #chart-area3, #chart-area4, #chart-area5, #chart-area6, #chart-area7, #chart-area8, #chart-area9, #chart-area10, #chart-area11, #chart-area12,
    #chart-area13, #chart-area14, #chart-area15, #chart-area16{
        margin-left: 20px;
        max-width: 200px;
        max-height: 100px;
    }
    .percent{
        position: relative;
        top:0px;
    }
    #myChart{
        display:block;
        position: relative;
        top: -275px;
        right: 130px;
    }    
}