#s4-workspace{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;}
	
#master{
	background-color:#3f3f3f;}
	
.content-placeholder{
	width:100%;
	padding:0px;
	margin:0px;}
	
#content-container{
	position:relative;
	top:50px;
	background:#ffffff;
	padding-bottom:50px;}
	
p, .ms-rtestate-field p, p.ms-rteElement-P{
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;
	font-size:1rem}
	
a{
	color:#1a75c1;}

a:visited{
	color:#1a75c1; }

a:hover{
	color:#444444; 
	text-decoration:none}

a:hover.no-underline{
	text-decoration:none !important;
	color:#1a75c1;}
	
a.ghost-button{
	padding:5px 8px;
	color: #555;	
	border: 2px solid rgba(20,20,20,.09);
	background-color:rgba(20,20,20,.09);
	text-align: center;
	outline: none;
	text-decoration: none;
	border-radius: 3px;
	opacity: 1;
	float:left;
	margin:5px;
	font-size:.7rem!important;
	text-transform:uppercase}
	
a.ghost-button:hover{
	border: 2px solid rgba(20,20,20,.2);	
	background-color:rgba(255,255,255,.8);
	color:#555;}
	
strong,b{
	font-weight:600}

img.mv-logo{
	width:100%;
}

text[style]  {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;}
	
label{
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;}
	
h1, h2, h3, h4, h5, h6 {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;
	line-height: 1.3;}

h1, .h1, .ms-rtestate-field h1, h1.ms-rteElement-H1 {
	font-size:1.7rem;
	font-family:'Roboto', verdana, sans-serif;
	font-weight:300}
	    	
h2, .h2, .ms-rtestate-field h2, h2.ms-rteElement-H2 {
	font-family:'Roboto', verdana, sans-serif;	
	font-size:1.7rem;
	color:#ffffff;
	font-weight:400}

h3, .h3, .ms-rtestate-field h3, h3.ms-rteElement-H3 {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;	
	font-size:1.1rem;
	color:rgba(121,156,146,1);
	font-weight:600;
	letter-spacing:0px;
	margin-top:10px;}

h4, .h4, .ms-rtestate-field h4, h4.ms-rteElement-H4 {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;	
	font-size:1.1rem;
	font-weight:300;
	}
		
h5, .h5, .ms-rtestate-field h5, h5.ms-rteElement-H5 {
	font-size:.9rem;}
	
a.dashboard-title{
	font-family: 'Roboto', verdana, sans-serif;
	text-transform:uppercase;
	font-weight:400;
	position:relative;
	top:8px;
	font-size:1.2rem;
	line-height:1.5;
	color:#555;	}
	
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a{
	color:#757572 !important;
	font-weight:400!important;
	font-size:1.4rem}
		
.text-small{
	font-size:.9rem !important}
	
.text-xsmall{
	font-size:.75rem !important}
	
.uppercase{
	text-transform:uppercase!important}
	
.bold{
	font-weight:800}
	
.white{
	color:#ffffff !important;}
	
.print-logo{
	display:none;}
	
.blue{
	color:rgba(45,147,187,1)}
	
.light-blue{
	color:#4ba4ad!important}
	
.dark-blue{
	color:rgba(32,107,173,1)!important}
	
.orange{
	color:rgba(247,148,30,1)}
	
.green{
	color:rgba(49,169,73,1)}
	
.dark-green{
	color:rgba(137,150,62,1)}
	
.teal{
	color:rgba(126,203,183,1)}

.yellow{
	color:rgba(221,214,10,1)}

.gray{
	color:rgba(168,169,173,1)}

.taupe{
	color:rgba(154,150,127,1)}
	
.red{
	color:rgba(192,85,50,1)}
		
.bg-blue{
	background-color:rgba(36,123,156,1)}
	
.bg-light-blue{
	background-color:rgba(142,187,208,1)/*rgba(166,219,244,1)*/}
		
.bg-dark-blue{
	background-color:rgba(32,107,173,1)}

.bg-teal{
	background-color:rgba(126,203,183,1)}

.bg-orange{
	background-color:rgba(203,122,22,1)}
	
.bg-green{
	background-color:rgba(63,152,58,1)}
	
.bg-dark-green{
	background-color:rgba(136,148,60,1)}

.bg-yellow{
	background-color:rgba(201,180,50,1)}

.bg-gray{
	background-color:rgba(168,169,173,1)}
	
.bg-light-gray{
	background-color:rgba(249,249,249,1)}

.bg-taupe{
	background-color:rgba(126,125,105,1)}
		
.bg-red{
	background-color:rgba(156,68,37,1)}
	
.bg-purple{
	background-color:rgba(90,80,114,1)}
	
.bg-beige{
	background-color:rgba(239,239,234,1)}
	
/*theme colors*/
	
.bg-lime{
	background-color:rgba(178,210,52,1)}
	

.bg-light-green{
	background-color: rgba(50,146,61,1);}
	
.bg-teal2{
	background-color:rgba(81,174,183,1)}

.bg-light-teal{
	background-color:rgba(169,220,209,1)}
	
.border-blue{
	border:1px solid rgba(45,147,187,1)}
	
.border-light-blue{
	border:1px solid rgba(166,219,244,1)}
		
.border-dark-blue{
	border:1px solid rgba(32,107,173,1)}

.border-teal{
	border:1px solid rgba(126,203,183,1)}

.border-orange{
	border:1px solid rgba(247,148,30,1)}
	
.border-green{
	border:1px solid rgba(49,169,73,1)}
	
.border-dark-green{
	border:1px solid rgba(137,150,62,1)}

.border-yellow{
	border:1px solid rgba(221,214,10,1)}

.border-gray{
	border:1px solid rgba(168,169,173,1)}
	
.border-light-gray{
	border:1px solid rgba(249,249,249,1)}

.border-taupe{
	border:1px solid rgba(154,150,127,1)}
		
.border-red{
	border:1px solid rgba(192,85,50,1)}
	
.callout{
	border:1px solid #eeeeee;
	padding:1.5rem;
	margin-top:20px}
	
.pad-20{
	padding:30px 30px 30px 20px}
	
.margin-bottom-20{
	margin-bottom:30px !important}
	
hr{
	border:0;
	border-bottom:1px solid rgba(154,150,127,1)!important}
	
.mv-logo{
	position:relative;
	top:0px;
	width:90%}
	
/*HP*/

.mvdashboard-banner{
	width:100%;
	height:500px;
	background:transparent url('http://www.metrovancouver.org/dashboards/BannerImages/HPBanner.jpg') no-repeat bottom center;
	background-size:cover;
	margin-bottom:50px;}	

.overlay{    
	height:inherit;
    position: relative; 
    width: 100%;
    z-index:30;
    background:rgba(0,0,0,.4)}
    
.position-center{
	width:100%;
    /*height:75vh;
    position:fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;*/
    position:absolute;
  	top:55%;
  	transform:translateY(-50%);
    margin: auto;
    z-index:30}
    
.mvdashboard-banner .position-center h1{
	color:#ffffff;
	font-size:2rem;
	margin-bottom:20px;
	font-weight:300}
	
.mvdashboard-banner .position-center p{
	font-size:1.1rem;
	color:#ffffff;
	text-align:center;}
	
	
/*LAYOUT*/


.menu-container {
	padding:5px 0px 15px 0px;
	background:#ffffff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
    filter: alpha(opacity=92);
    -moz-opacity: 0.92;
    -khtml-opacity: 0.92;
    opacity: 0.92;}
	
.info-above-menu #SearchBox input{
	width:85%;}
		
.banner-webpart{
	width:100%;
	position:relative;
	height:310px;}
	
.banner{
	width:100%;
	height:310px}
	
.banner-caption{
	width:100%;
	position: absolute;
	bottom:0px;
	padding:15px 0px 10px 0px;
	border:0px;
    margin:0px;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(68, 68, 68, 0); 
	box-shadow: 0px 0px 0px 0px rgba(68, 68, 68, 0); }
		
.banner-caption img.banner-icon{
	height:30px!important;
	margin: 0px 10px 0px 0px;
	/*-webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;*/}

	
#breadcrumb {
	margin:10px 0 0 0}
	
ul.s4-breadcrumb li.s4-breadcrumbRootNode a.s4-breadcrumbRootNode{
	display:none}
	
ul.s4-breadcrumb li.s4-breadcrumbRootNode span.s4-breadcrumb-arrowcont{
	display:none}
	
.banner-caption h1, .banner-caption h1 span{

	color:#ffffff!important;
	font-size:1.5rem;
	font-weight:300;
	letter-spacing:0px}
	
ul.s4-breadcrumb li.s4-breadcrumbNode,	ul.s4-breadcrumb li .s4-breadcrumbCurrentNode{
	font-size:.8rem}
	
ul.s4-breadcrumb li.s4-breadcrumbNode a{
	padding-right:10px}
	
ul.s4-breadcrumb li.s4-breadcrumbNode a:after{
	content:"/";
	font-size:.8rem;
	position:relative;
	right:-5px}
	
.card{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px;
	position:relative;
	text-align:center;
	min-height:250px;
	-webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    box-shadow:5px 5px 5px #f9f9f9;
    background-color:/*rgba(240,240,240,.2)*/#efefea}
    
.card-title{
	width:100%;
	margin-left:auto;
	margin-left:auto;
	padding:10px 20px;
	color:#FFFFFF;
	text-align:left;
	clear:both;}
	
.card-title .h4{
	font-weight:600;
	font-size:1.1rem;
	color:#ffffff}
	
.card-title img{
	height:40px!important;
	margin: 0px 10px 10px 0px;
	/*-webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;*/}

.card-content{
	width:100%;
  	text-align:center;
  	padding:10px;
  	color:#FFFFFF;
  	background-color:/*rgba(240,240,240,.2)*/}
  	
.card-content p{
	color:#444;}
  	
.card-content .number{
	font-size:3rem;
	font-weight:700;
	color:#444444;
	line-height:1.1;
	margin-top:10px}
	
.card-content .dashboard-unit{
	color:#757572;
	font-size:1.2rem;
	line-height:1;
	font-weight:600;
	text-transform:uppercase;}
	
.card-content img{
	height:20px!important;
	margin-bottom:10px;
	-webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;}
	
.card-content h3{
	color:#FFFFFF;}
	
.card:hover	{
	opacity:.9;}
	
.card:hover .card-title img{}

/*NAVIGATION*/
.ms-core-listMenu-horizontalBox{
	top:10px;}
	
.ms-core-listMenu-horizontalBox li.dynamic > a .menu-item-text{
	font-size:13px}
	
ul.dynamic li{
	text-align:left;}
	
/*Hide mobile Menu*/

.js #navigation {
    display:block;}
        
.js .slicknav_menu {
    display:none;}


/*INDICATORS*/
	
.dashboard-item{
	background:#efefea;
	border:1px solid #eee;
	box-shadow:5px 5px 5px #f9f9f9;
	clear:both}
	
.dashboard-item .box{
	padding:20px 5px;}
	
.dashboard-item h4{
	font-weight:600;
	text-transform:uppercase;
	font-size:.95rem;
	color:#444;
	padding:0px 10px;}
	
.dashboard-item h6{
	text-transform:uppercase;
	font-style:normal}
	
.dashboard-number{
	color:#444444;
	font-size:2.3rem;
	font-weight:700;
	line-height:1;
	margin-top:10px;
	padding:0px 10px;}
		
.dashboard-unit{
	text-transform:uppercase;
	color:#757572;
	font-size:.95rem;
	font-weight:600}
	
.dashboard-item p{
	font-size:.9rem;
	color:#444;}

.dashboard-link{
	width:100%;
	padding:5px;
	text-align:center;
	box-shadow:5px 5px 5px #f9f9f9}
	
.dashboard-link a:link, .dashboard-link a:visited{
	color:#ffffff;}

.dashboard-item i{
	margin-top:5px}
	
.dashboard-callout{
	background-color:rgba(239,239,234,1);
	padding:30px;
	margin-bottom:30px;
	position:relative}
	
.dashboard-callout .dashboard-icon{
	position:absolute;
	bottom:50px;}
	
.dashboard-callout img.dashboard-img{
	width:40%;}
	
/*FOOTER*/	
.footer {
	padding:50px 0px 100px 0px !important;
	color:#f3f3f3;
	background-color:#3f3f3f;
	position:relative;}

.footer p,.footer div, .footer dl, .footer dt,.footer ul,.footer blockquote, .footer th, .footer td, .footer a{
	line-height:1.5em;
	color:#e3e3e3;}

.footer-title {
	color:#e0e0e0;
	font-size:.9rem;
	margin:10px 0px;
	text-transform:uppercase}
	
.footer a {
	color:#e3e3e3 !important}

.footer i {
	font-size:1.1em;
	margin-right:5px}

.footer ul{
	margin-left:0px;
	color:#e3e3e3;}
	
.footer ul.fa-ul{
	margin-left:20px;}

.footer li, .footer li a{
	list-style:none;
	margin-left:0px; 
	color:#f3f3f3;
	font-size:.8rem;}
	
.footer li a {
font-size:.8rem;}
	
.footer .share i {
	font-size:2.5em ;
	margin-right:30px}


/*XXLARGE SCREEN*/
@media all and (min-width:1921px) {

}

/*XLARGE SCREEN*/
@media all and (min-width:1442px) and (max-width:1921px) {

}


/*MEDIUM SCREEN*/
@media all and (max-width:1025px) {

a.dashboard-title{
	font-size:1.2rem;}
	
.mvdashboard-banner{
	height:400px;}
	
.mvdashboard-banner .position-center h1{
	font-size:1.5rem}
	
.mvdashboard-banner .position-center p{
	font-size:1rem;
}


}	
	

	
/*SMALL SCREEN*/
@media all and (max-width: 640px) {

#navigation {
    display:none;}
            
.slicknav_menu {
    display:block;}

.slicknav_nav ul{
	margin:0px;}

ul.dynamic{
	position:relative;
	top:0px;
	left:0px;
	background-color:rgba(255,255,255,0.9);
	width:96%;
	margin-left:5px;
	border:0px;
	padding:0px;
	max-height:250px;
	overflow-y:scroll !important;}

ul.dynamic li.dynamic{
	display:block;
	width:100%;
	float:left;
	text-transform:none;
	padding:0px;
	border:0px}

li.dynamic > a.dynamic {
	font-size:14px;
	color:#333;
	line-height:1.2em}

li > a.ms-core-listMenu-item:hover{
	background-color:rgba(255,255,255,1);
	color:#333;}

.ms-core-listMenu-selected:link {
	background-color:transparent}

.dashboard-callout .dashboard-icon{
	position:relative;
	bottom:0px;}
	
.dashboard-callout img.dashboard-img{
	width:30%;}



}