/*font for scraps */
@font-face {
  font-family: 'Stag Italic';
  src: url('http://www.metrovancouver.org/Includes/fonts/Stag-SemiboldItalic.woff') format('woff');}
  
@font-face {
  font-family: 'Bangers';
  src: url('http://www.metrovancouver.org/Includes/fonts/Bangers-Regular.woff') format('woff');}

@font-face {
  font-family: 'SairaCondensed';
  src: url('http://www.metrovancouver.org/Includes/fonts/SairaExtraCondensed-Regular.woff') format('woff');}

@font-face {
  font-family: 'SairaCondensedBold';
  src: url('http://www.metrovancouver.org/Includes/fonts/SairaExtraCondensed-Bold.woff') format('woff');}


@font-face {
  font-family: 'Rubik Mono One';
  src: url('http://www.metrovancouver.org/Includes/fonts/RubikMonoOne-Regular.woff') format('woff');}
  
@font-face {
  font-family: 'Rubik-VariableFont';
  src: url('http://www.metrovancouver.org/Includes/fonts/Rubik-VariableFont_wght.woff') format('woff');}
  
@font-face {
  font-family: 'Staatliches-Regular';
  src: url('http://www.metrovancouver.org/Includes/fonts/Staatliches-Regular.woff') format('woff');
  }
  
@font-face {
  font-family: 'Quicksand-Light';
  src: url('http://www.metrovancouver.org/Includes/fonts/Quicksand-Light.woff') format('woff');
  }
  
@font-face {
  font-family: 'Quicksand-Regular';
  src: url('http://www.metrovancouver.org/Includes/fonts/Quicksand-Regular.woff') format('woff');
  }
  


html{
	height:100%;
	width:100%;
	-webkit-font-smoothing: subpixel-antialiased;}

body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	background-color:#ffffff;
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;	
	font-weight:400;
	font-size:1rem}

#s4-bodyContainer {
	width: 100%;
	height:100%;
	margin: 0px;
	padding: 0px;}
	
#s4-workspace{
	width: 100%;
	height:100%;
	margin: 0px;
	padding: 0px;}

#master{
	width:100%;
	height:100%;	
	background-color:#3f3f3f;}

.content-placeholder{
	width:100%;
	position:relative;
	top:0px;
	padding:0px;	
	background:transparent;
	background:#ffffff;}
	
#content-container{
	padding-bottom:0px;
	margin-bottom:50px
}
	
/*#content-container{
	top:0px!important;
}	
TYPOGRAPHY*/

div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td, .ms-rtestate-field p, p.ms-rteElement-P, td, table, blockquote p {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;		
	font-size:1rem;
	color: #323232;
	line-height: 1.4em;
	font-weight: normal;}
	
section .ms-webpartzone-cell{
	padding:0px;
	margin:0px;
}
	
.ms-rtestate-field p, p.ms-rteElement-P{
	margin:0px 0px 12px 0px
}

a{
	color:#266cac;}

a:visited{
	color:#266cac; }

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

a:hover.no-underline{
	text-decoration:none !important;
	color:#1a75c1;}
	
a.pill{
	line-height: 1em;
	color: white;
	border: 2px solid transparent;
	padding: 3px 10px 5px 10px!important;
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	width: auto;
	white-space: nowrap;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-radius: 20px;
	background: /*#f79738*/#8dc641;
	font-size:.8rem;
	letter-spacing:.8px
}

ul{
   margin-left:2rem;
}

li{
	margin-bottom:7px
}

hr{
	border-bottom: 1px solid rgba(200,200,200,1) !important
}
	


text[style]  {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;}
	
label{
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;}
	
h1, .h1, .ms-rtestate-field h1, h1.ms-rteElement-H1, h2, .h2, .ms-rtestate-field h2, h4.ms-rteElement-H2, h3, .h3, .ms-rtestate-field h3, h3.ms-rteElement-H3, h4, .h4, .ms-rtestate-field h4, h4.ms-rteElement-H4, h5, .h5, .ms-rtestate-field h5, h5.ms-rteElement-H5, h6, .h6, .ms-rtestate-field h6, h6.ms-rteElement-H6, h7, .h7,.ms-rtestate-field h7, h7.ms-rteElement-H7{
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;
	line-height:1.3;
	font-weight:600	
} 

h1, .h1, .ms-rtestate-field h1, h1.ms-rteElement-H1 {
	font-size:2.8rem;
	font-weight:700	}
	
h2, .h2, .ms-rtestate-field h2, h2.ms-rteElement-H2 {
	font-size:1.4rem;
	color:#ffffff;}

h3, .h3, .ms-rtestate-field h3, h3.ms-rteElement-H3 {
	color:#333333;
	font-size:1.2rem;
	margin-top:30px;
	line-height:1.4;}

h4, .h4, .ms-rtestate-field h4, h4.ms-rteElement-H4 {	
	font-size:1.1rem;
	margin-top:15px;
	color:#80b639;
	line-height:1.3;
	text-transform:none}
		
h5, .h5, .ms-rtestate-field h5, h5.ms-rteElement-H5 {
	font-size:1.05rem;}
	
ul ul, ol ul, ul ol, ol ol{
	margin-bottom:15px;
}

.bold, .strong{
	font-weight:700 !important;}

		
.text-small{
	font-size:.9rem !important}
	
.text-xsmall{
	font-size:.75rem !important}
	
.uppercase{
	text-transform:uppercase!important}
	
.text-shadow{
	text-shadow: 1px 1px 0px rgba(0,0,0,.6) !important;
}
	
.gray {
	color:#222222 !important;
}
.white{
	color:#ffffff !important;}
	
.print-logo{
	display:none;}
	
	
.rubik-mono{
 	font-family: 'Rubik Mono One', sans-serif!important;}
	
.rubik{
 	font-family: 'Rubik', sans-serif!important;}
 	
.staatliches{
	font-family: 'Staatliches', cursive!important;}

.quicksand-light{
	font-family:'Quicksand-Light', verdana, sans-serif!important; 
	letter-spacing:2px
}

.quicksand{
	font-family:'Quicksand-Regular', verdana, sans-serif!important;
	letter-spacing:2px
}

.open-sans{
	font-family: 'Open Sans', verdana, sans-serif!important;
}
/*LAYOUT*/

.no-pad{
	padding:0px !important
}

.pad-1x-all{
	padding:10px!important
}

.pad-2x-all{
	padding:20px;}

.pad-2x{
	padding:20px 0px;}
	
.pad-2x-vertical{
	padding:0px 20px;}

	
.pad-2x-top{
	padding-top:20px}
	
.pad-2x-bottom{
	padding-bottom:20px;}
	
.pad-3x-all{
	padding:30px;}
	
.pad-3x-vertical{
	padding:0px 30px;}

.pad-3x{
	padding:30px 0px;}
	
.pad-3x-bottom{
	padding-bottom:30px}

.pad-4x-top{
	padding-top:40px;}

.pad-4x{
	padding:40px 0px!important}
	
.pad-4x-bottom{
	padding-bottom:40px;}

.pad-5x{
	padding:50px 0px!important
}

.pad-6x{
	padding:60px 0px!important
}
	
.pad-6x-bottom{
	padding-bottom:60px;
}
	
.pad-10x{
	padding:100px 0px!important
}
	

.width40{
	width:40%!important;}
	
.width50{
	width:50%!important;}
	
.width75{
	width:75%!important;
}
.margin-top0{margin-top:0px
}

.margin-top25{margin-top:25px
}
.margin-bottom10{
	margin-bottom:10px!important;}
	
	
.margin-2x-bottom{
	margin-bottom:20px!important;}
.margin-3x-bottom{
	margin-bottom:60px!important;}
	
.position-center{
	position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:100%;
}

.position-top-25{
	position:relative;
    top:100px;
    transform: translateY(-50%);
    width:100%;
}	
	

.circle {
	width:50%;
    padding-bottom:50%;
    padding-bottom:50%;
    background:gold;
    border-radius:50%;
    margin-left:auto;
    margin-right:auto;
  /*-webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    height: 155px;
    width: 100%;*/
}
/*COLORS*/

.mv-cyan-screen {color:#62b39c!important}

.mv-cyan-dark {color:#11648f!important}

.mv-cyan-mid {color:#2477a3!important}

.mv-cobal-core{color:#71bfe6!important}

.mv-corp-light{color:#2d81ce!important}

.mv-blue-corp{color:#266cac!important}

.mv-cyan-corp{color:#2a8dc0!important}

.mv-blue-dark{color:#0f477c!important}

.mv-sepia-mid{color:#7f7d6a!important}

.mv-slate-corp{color:#4b7984!important}

.bg-white{
	background-color:#ffffff !important;
}
.bg-teal-mid{
	background-color:#62b39c!important
}

.bg-teal-screen{
	background-color:#b5e8da!important
}

.bg-gray{
	background:#f4f4f4
}

.bg-colbalt-screen{
	background:#AEE6FF
}

.bg-colbalt-mid{
	background:#5EABD1
}

.bg-cobal-core{
	background-color:#71bfe6!important}

.bg-blue-corp{
	background-color:#266cac!important
}

.bg-orange{
	background-color:#fdbc2b/*#ff8530#fdbc2b#efaf45*/ !important}

.bg-blue{
 background-color:#3399cc}
 
.bg-slate-core {
    background-color: #4b7984;}
    
.bg-olive-core{
   background-color: #a4bd41;
}

.bg-sepia-core{
	background-color:#97957e!important
}

.bg-sepia-dark{
	background-color:#666455!important
}

.bg-light-blue-core{
	background-color:#69cdff!important;
}

.bg-red-core{
	background-color:#b05133!important;
}

.red{
	color:#c42020 !important;
}


/* LOGO */
.logo{
	position: relative;
	padding-left:0px;
	width:75%; 
	margin-top:5px;}
		
img.mv-logo{
	width:75%;
	top:5px
}

.logo h1 {
	position: relative;
	float: left;}

.logo a {
	position: relative;
	float: left;
	z-index: 999;
	-webkit-transition: linear .3s;
	-moz-transition: linear .3s;
	-ms-transition: linear .3s;
	-o-transition: linear .3s;
	transition: linear .3s;}
	
.logo img {
	min-height: 58px;
	position: relative;
	-webkit-transition: linear .3s;
	-moz-transition: linear .3s;
	-ms-transition: linear .3s;
	-o-transition: linear .3s;
	transition: linear .3s;}

/*BACK TO TOP*/

.backTop {
	display:none;
	background:/*#8dc641*/rgba(141, 198, 65, 0.8);
	padding:10px 15px 15px 15px;
	text-align:center;
	position:fixed;
	z-index:200;
	bottom:0px;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 2px 10px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 2px 10px 0px rgba(50, 50, 50, 0.5);}

.backTop i {
	font-size:2.3em;
	color:#ffffff}
	
/* TOP PANEL */
.top-panel{
	position: fixed;
	width: 100%;	
	z-index:100;
	background: /*#d5d5d5*/ transparent;
	max-height: 100%;
	height: auto;/* border-bottom: 1px solid #ededed; */
	border-top:0px;
	-webkit-transition: linear .3s;
	-moz-transition: linear .3s;
	-ms-transition: linear .3s;
	-o-transition: linear .3s;
	transition: linear .3s;
	-webkit-box-shadow: 0px 4px 6px 0px rgba(68, 68, 68, 0.1); 
	box-shadow: 0px 4px 6px 0px rgba(68, 68, 68, 0.1);}

.info-above-menu{
	color:#999;
	padding:8px 0px;
	background:#e8e8e8;
	border-bottom:1px solid #e0e0e0;}
	
.info-above-menu #SearchBox input{
	min-height:32px;}
	
.info-above-menu .ms-srch-sb > input{
	margin-bottom:0px;}
	
.info-above-menu .ms-srch-sbLarge > .ms-srch-sb-searchLink:after{
	content:'\f002';
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size:1.3rem;
    padding-right: 0.5em;
    position: absolute;
    top:2px;
    left:5px;}
    
.info-above-menu .info-div,.info-above-menu .info-div a {
	margin-top:5px;
	font-size:13px;}
	
.info-above-menu i{
	padding:0px 4px 3px 10px;
	font-size:16px;
	vertical-align:middle}

.info-above-menu i:first-child{
	padding:0px 7px 3px 0px;}

.menu-container {
	background:rgba(255,255,255,.95);
	margin-top:0px;
	padding:10px 0px 5px 0px;}
	
/*NAVIGATION*/
.ms-core-listMenu-horizontalBox ul.static{
	margin-bottom:0px;
}
.ms-core-listMenu-horizontalBox{
	top:5px;
	float:right}
	
.ms-core-listMenu-horizontalBox .menu-item-text{
	font-size:15px;
	font-weight:600
}
	
.left-nav {
	padding-right:0px;
	height:100%;}

ul.menu {
	margin-top:33px}

ul.menu li {
	margin: 0px 5px;
	list-style:none; 
	display:inline; }

ul.menu li a:link {
	color: #777777 !important;	
	padding:15px 15px 40px 15px;
	font-size:16px;
	background-image:}

ul.menu li a:hover {
	color:#525252;
	border-bottom:3px solid #90be38;}
	
.ms-core-listMenu-horizontalBox .additional-background.dynamic-children{
	background-image:none;}
	
.ms-core-listMenu-horizontalBox .additional-background.dynamic-children:after{
	content:"\f107";
	font-family: FontAwesome;
    font-style: normal;
    font-weight:normal;
    text-decoration: inherit;
    position:relative;
    left:10px}
	
/*Hide mobile Menu*/

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

	
/*PARALLAX*/

.parallax {
	width: 100%;
	height:450px;
    padding: 0;
    margin: 0;
    color: #fff;
    overflow: hidden;
    position: relative;
    background-attachment: fixed;
    -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover; }
    
	
.parallax-content{
	position: absolute;
	z-index: 2;
	width:100%;
	color:#ffffff;;}
	
/*.parallax .overlay h1, .parallax .overlay h2, .parallax .overlay p, .parallax .overlay li{
	text-shadow: 1px 1px 2px #333;
}*/

	
.parallax.testimonial-parallax{
	background: url('http://www.metrovancouver.org/about/careers/PublishingImages/CoquitlamFiltrationPlant.jpg') fixed no-repeat top center / cover; 
	min-height:300px
}
	
/*PAGE-TITLES*/

.page-title{
	padding:100px 0px 10px 0px; 
	margin-bottom:15px;
	width:100%;
	background:#f5f5f5;
	border-bottom:solid 1px #e0e0e0;
	position:relative;
	top:0px;
	-webkit-box-shadow: 0px 4px 6px 0px rgba(68, 68, 68, 0.1); 
	box-shadow: 0px 4px 6px 0px rgba(68, 68, 68, 0.1);
	margin-bottom:15px}
	
.title {
	/*font-family: 'Open Sans', verdana, sans-serif;*/
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;		
	font-size: 1.5rem;
	font-weight: 400;
	color:#0072c6;
	line-height:1.2em;
	padding-top:5px}	
.banner-webpart{
	height:inherit;
}

.overlay{
	background:rgba(0,0,0,.3);
	height:inherit;
	display:block;
	width:100%;
	position:relative
}

.overlay-white{
	background:rgba(255,255,255,.3);
	height:inherit;
	display:block;
	width:100%;
	position:relative
}
/*BANNERS*/

.main-page-banner{
	width:100%;
	min-height:275px;
	margin-bottom:8px;
	position:relative;
}

.main-page-banner .banner-title h2{
	font-size:1.8rem;
	position:absolute;
	bottom:25px;
	font-weight:800;
	text-shadow: 1px 2px 2px rgba(0,0,0,.9);
}
/*ANNACIS BANNERS*/

.annacis-banner{
	width:100%;
	min-height:310px;
}

.banner-title{
	bottom:15px;
}

.annacis-banner .banner-title h2{
	font-family:'Open Sans', verdana, sans-serif;	
	font-size:2.1rem;
	position:absolute;
	bottom:25px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.9);
}

/* Works */
.project__title {
    text-shadow: 0 0 10px #fff;
}
}

/*PARKSFEST BANNER*/
.parksfest{
	width:100%;
	background:transparent url("http://www.metrovancouver.org/events/parksfest/PublishingImages/ParksfestBG.jpg") no-repeat right / cover;
	min-height:300px;
	position:relative;
}

.parksfest .parksfest-title{
	position:absolute;
	bottom:40px
}

.parksfest .parksfest-title h2{
	font-size:2.3rem!important;
	font-weight:normal!important
}

.parksfest h1{
	font-size:3.5rem;
	letter-spacing:1px;
	margin:10px 0px 15px 0px;
}

h3.pf{	
	margin:20px 0px 5px 0px;
}

.parksfest h4{
	color:#222222;
	margin-bottom:5px;
}


.parksfest p{
	font-size:1.3rem!important;
	margin:0px;
	text-transform:uppercase
}

img.parksfest-speaker{
	width:200px;
	margin:0px 15px 0px 0px;
	float:left
}

.prosperity-banner  	{
	text-align:center;
 	width:100%;
 	margin:0px;
 	height:450px;
	position:relative;
}

/*BANNERS*/


.climate2050-banner, .nutrifor-banner {
	/*position:absolute;
    top:60%;
 	transform: translateY(-50%);*/
 	text-align:center;
 	width:100%;
 	margin:0px;
 	height:400px;
	position:relative;
}

.nutrifor-banner-main{
	height:300px
}

.climate2050-banner .position-center, .prosperity-banner .position-center,.nutrifor-banner .position-center, .nutrifor-banner-main .position-center{
	top:60%;	
}
	
.climate2050-banner h1,  .prosperity-banner h1, .main-page-banner h1{
	font-family: 'Open Sans', verdana, sans-serif;
	font-size:2.8rem;
	color:#ffffff;	
	width:100%;
}

.climate2050-banner h2,  .prosperity-banner h2{
	font-family: 'Open Sans', verdana, sans-serif;
	font-size:1.8rem
}

.climate2050-banner p,  .prosperity-banner p{
	color:#ffffff;
	line-height:1.1;
	font-size:1.2rem;
}

#video-container{
	width:100%;
	height:40vh
}

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

.careers-banner h1{
	color:#ffffff;
	position:absolute;
	bottom:15px;
}

.climate-tagline{
	background-color:rgba(17,100,143,.8);
	width:100%;
	display:block;
	padding:10px;
	position:absolute;
	bottom:0px	
}

.climate-tagline h3{
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;
	color:#ffffff;
	font-weight:normal;
	font-size:1.5rem
}

.parallax.careers-HP{
	height:48vh	!important;
}

.parallax.careers-HP .overlay{
	background:rgba(0,0,0,.3);
}

.parallax.careers-HP .video-border{
	border:2px solid rgba(255,255,255,.7)
}


.climate2050-banner .position-center, .prosperity-banner .position-center{
	top:60%;	
}
	
.climate2050-banner h1,  .prosperity-banner h1, .main-page-banner h1{
	font-family: 'Open Sans', verdana, sans-serif;
	font-size:2.8rem;
	color:#ffffff;	
	width:100%;
}

.climate2050-banner h2,  .prosperity-banner h2{
	font-family: 'Open Sans', verdana, sans-serif;
	font-size:1.8rem
}

.climate2050-banner p,  .prosperity-banner p{
	color:#ffffff;
	line-height:1.1;
	font-size:1.2rem;
}

.nutrifor-banner h1, .nutrifor-banner-main h1{
	font-size:3.2rem;
	color:#ffffff;	
	width:100%;
}

.nutrifor-banner h2, .nutrifor-banner-main h2{
	font-size:1.8rem
}

.nutrifor-banner p, .nutrifor-banner-main p{
	color:#ffffff;
	line-height:1.1;
	font-size:1.2rem;
}

/*BREADCRUMB*/
#breadcrumb{
	margin:20px 0 0 0;
}
	
.breadcrumb {
	width:100%; 
	margin-bottom:25px;
	border:0px;
  	background-color:transparent;
  	text-transform:none;
  	font-size:.8rem;
  	padding-left:10px}
  	
/* hide root breadcrumb*/
.breadcrumb-root{
	display: none}
	
ul.s4-breadcrumb li.s4-breadcrumbNode, ul.s4-breadcrumb li .s4-breadcrumbCurrentNode{
	margin-bottom:0px;
}
	
#ctl00_PlaceHolderMain_siteMapPath span:nth-child(2){
	display:none}
	
.bc-root {
	font-size:.7rem;
	color: #80b639;}
	
a.ms-sitemapdirectional {
	font-size:.7rem;
	color:#80b639;}

.breadcrumbCurrent{
	font-size:.7rem;}

.breadcrumb span a{
	font-size:.7rem;
	color: #80b639;}
	
.breadcrumb span {
	font-size:.7rem;
	color: #676767;}
	
.callout{
	padding:1rem;
	border:1px solid #e3e3e3;
	margin-top:0px;
}

.panel{
	width:100%; 
	padding:15px;
	margin-bottom:10px;
	border:1px solid #d8d8d8;
	background:#f9f9f9;}
	
.panel.border-top{
	border-top:9px solid #8dc641
}

.panel.border-top-blue{
	background-color:#fefefe;
	border-top:9px solid #5593c7;
}
	
.card-container{
	width:100%;
}
	
.card{
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 100%;
	float:left; 
	height:inherit;  
    min-height:150px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow:0 0 5px rgb(0 0 0 / 15%)
}

.card h2{
	font-size:1.3rem;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
} 

.card.card-testimonials{
	background: rgb(241,243,244);
	border:0px;
}	

.card .card-body {
	width:100%;
	padding: 16px;
	background-color:#fff;
	position:relative;
	top:5px;
	min-height:100px;
	text-align:left;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;}
	

.card-body.card-body-hover:hover{
	position:relative;
	top:10px;
	background:#f8f8f8
}


.card .card-body h5.card-title{
	color:#323232!important;
	font-weight:800;
	font-size:1.1rem;
	padding:10px 0px;
}

.card-body-bg{
	height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}



.testimonials{
	padding:5px 0px 5px 5px;
	text-align:left;
	clear:both;
	min-height:300px;
	background-size:cover!important;
	background-position:right bottom!important;
	background-repeat:no-repeat!important;
}

.testimonials .overlay-white{
	width:55%;
	background-color:rgba(255,255,255,.7);
	padding:5px 10px;
	min-height:300px;
}
.testimonials p{
	font-size:.95rem;
	quotes: "“" "”";
	width:100%;
	float:left;
	color:#000000;
}

.testimonials p:before{
	content:open-quote;	
    top:30px;
}

.testimonials p:before, .testimonials p:after{
	font-size:5rem;
	font-family:"Times New Roman", Times, serif;
	display:inline;
	position: relative;    
	color:#266cac;
}

.testimonials-names{
	float:left;
	font-size:.95rem;
	line-height:1.2;
	font-weight:600;
	clear:both
} 

.card-2{
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  	position: relative;
  	overflow: hidden;
  	margin-bottom:20px;
  	display:block
}

.card-2 .card-img-top{
	filter:contrast(.8) brightness(.8); 
	height:200px;
  	-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  	transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  	margin-bottom:5px;
}

.card-2:hover .card-img-top{
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.card-2 .card-title{
	margin-left:auto;
	margin-right:auto;
	padding:5px 10px 5px 10px
}

.card-2 .card-content{
	background-color:#ffffff;
}

.card-2 .card-title img.service-icon{
	height:30px!important
}

.card-2 .h3-title, .card-2 .h2-title{
	position: absolute;
	  /*top: 25px;
	  left: 25px;
	  right: 25px;*/
	  top:50%;
    transform: translateY(-50%);
    width:100%;
	  color: #fff;
	  margin: 0;
	  text-transform: uppercase;
	  font-weight: 400;
	text-align:center;
}

/*Y4A Banner*/
.y4a-banner {
 	width:100%;
 	margin:0px;
 	height:400px;
	position:relative;
	color:#ffffff;
	overflow:hidden}

.y4a-banner.main {
 	min-height:300px!important;
 	height:300px
}

.y4a-animate{
	height:350px;
	width:100%;
	animation: grow alternate ease-in 5s;	
}

@keyframes grow {
  0% {
     transform: scale(1.1);
  }
  100% {
     transform: scale(1);
 
  }
}

.y4a-banner .position-center{
	top:55%!important
}

.y4a-banner.main .position-center{
	top:60%!important
}


.y4a-banner overlay {
 	rgba(0,0,0,.4);
 	padding-top:75px
}

.y4a-banner h1{
	color:#ffffff;
	font-weight:900;
	font-size:2rem
}

.y4a-card{
	height:250px;
}

.y4a-card:hover .card-body-bg, .y4a-card:focus .card-body-bg {
    -ms-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
	/*-webkit-filter: grayscale(100%);
	filter: grayscale(100%);*/
}

.y4a-card.y4a-bg-teal:hover .card-body-bg .overlay, .y4a-card.y4a-bg-teal:focus .card-body-bg .overlay{
	background-color:rgba(58,211,189,.75)
}

.y4a-card.y4a-bg-light-blue:hover .card-body-bg .overlay, .y4a-card.y4a-bg-light-blue:focus .card-body-bg .overlay{
	background-color:rgba(47,161,221,.75)
}

.y4a-card.y4a-bg-blue:hover .card-body-bg .overlay, .y4a-card.y4a-bg-blue:focus .card-body-bg .overlay{
	background-color:rgba(0,63,114,.65)
}

.y4a-card h3.rubik{
	padding:0px 30px 
}

h2.rubik{
	font-weight:900!important;
	text-transform:none;
	font-size:1.4rem!important
}

.y4a-banner img{
	max-width:400px;
	margin-bottom:20px
}

.y4a-banner.main img{
	max-width:250px;
	margin-bottom:30px
}

.y4a-blue{
	color:#003f72!important
}

.y4a-teal{
	color:#3bd3bd!important
}


.y4a-light-blue{
	color:#6cb8de/*#77c8f0*/!important
}

.y4a-bg-blue{
	background-color:#003f72!important
}

.y4a-bg-teal{
	background-color:rgba(58,211,189,1)!important;
}

.y4a-bg-lighter-blue{
	background-color:#dceef7!important
}

.y4a-bg-light-blue{
	background-color:#77c8f0!important
}

.y4a-bg-teal{
	background-color:#3bd3bd
}

.y4a-bg-yellow{
	background-color:#fcd228
}

.y4a-overlay-blue{
	background-color:rgba(47,161,221,.75)!important;
	height:inherit
}
.y4a-overlay-dark-blue{
	background-color:rgba(0,63,114,.25)!important;
	height:inherit
}

.y4a-overlay-orange{
	background-color:rgba(246,105,56,.75)!important;
	height:inherit
}

.y4a-overlay-teal{
	background-color:rgba(58,211,189,.75)!important;
	height:inherit
}

.y4a-overlay-yellow{
	background-color:rgba(255,222,89,.8)!important;
	height:inherit
}


.y4a-overlay-blue,.y4a-overlay-orange,.y4a-overlay-teal{
	padding-top:75px
}

.y4a-bg-gradient{
	width: 100%; 
	display: table;
	background: linear-gradient(to right, rgb(58,211,189) 0%, rgb(58,211,189) 50%, rgb(250, 246, 244) 50%, rgb(250, 246, 244) 100%);
}
.y4a-bg-gradient-reverse{
	width: 100%; 
	display: table;
	background: linear-gradient(to right, rgb(250, 246, 244) 0%, rgb(250, 246, 244) 50%, rgb(119,200,240) 50%, rgb(119,200,240) 100%);
}

a.button.y4a-bg-yellow{
	color:#222222!important;
}

a.button.y4a-bg-yellow:hover{
	color:#ffffff!important;
	text-decoration:none
}
/*TABLE*/

table thead, table tbody, table tfoot{
	border:0px
}


.columns .ms-WPBody table.custom, table.custom{
	border:1px solid #f1f1f1;
	margin:30px 0px
}	

table.custom td, table.custom th{
    font-family:'Nunito Sans', Verdana, Arial, sans-serif;		
    padding:.75rem;
	font-size:inherit;
	background:#FDFDFD;
	border-bottom:1px solid #f1f1f1!important
}

table.custom th{
	background-color:#d9d9d9;
}

/* TABLE OVERRIDES */
.ms-rtestate-field table, .ms-rtestate-write table{
	width:100%;
	margin-top:25px
}

.ms-rtestate-field table th, .ms-rtestate-write table th {
	padding:10px 8px;
	font-size:16.5px;
	color: #222222;
	background-color:#e8e8e8; 
	border:1px solid #d0d0d0;
	line-height:1.4em;}

.ms-rtestate-field table td, .ms-rtestate-write table  td{
	padding:10px 8px;
	vertical-align:top;
	color: #222222; 
	border:1px solid #e0e0e0;
	line-height:1.4em;}
	
.columns .ms-WPBody table tbody tr td{
	padding:10px 8px
}

td.alternating {
	background:#f8f8f8;}

td.alternating2 {
	background:#fefefe;}

.ms-WPBody table {
	width:100%}

table.ms-rteTable-default{
	border:1px solid #e0e0e0 !important;}

table.ms-rteTable-default td{
	border:1px solid #e0e0e0 !important;}

table.ms-rteTable-default th, table th {
	color: #222222;
	background-color:#e8e8e8; 
	border:1px solid #d0d0d0;
	line-height:1.4em;}

td .ms-vb {
	padding:14px 12px;
	vertical-align:top;
	color: #222222;
	border:1px solid #e0e0e0;}

#table{ 
    display: table;
    width:100%; 
}
.tr{ 
    display: table-row; 
    width:100%
}

.th{
	display: table-row; 
	width:100%;
}
.td{ 
    display:table-cell;
    vertical-align: middle;
    padding:10px 20px }
    
table#table2 {
    width: 100%;
    text-align: left;
    table-layout: fixed;
}

table#table2 th, table#table2 td {
    word-wrap: break-word;
    width: 100%;
    padding:10px
}
    
/*FD FORMS*/

.fd_table{
	background:#fefefe;
	border:0px
}

.fd_table.panel{
	background:#f9f9f9;
	border:1px solid #d8d8d8;
	padding:15px;
	display:block;
}

.fd_table td{
	background:#fefefe;
}	
.fd_table.panel td{
	background:#f9f9f9;
}


[style].fd_title{
	font-weight:400
}

.fd_table td input[type='checkbox'],.fd_table td input[type='radio']{
	margin:.3rem 0 .5rem 0
}

.fd_table td label{
	font-size:.9rem
}	

.fd_table .ms-dtinput input[type="text"]{
	margin-top:0px;
	width:95%!important;
}

#fd_form span.ms-formvalidation span{
	color:#e85400!important
}


#fd_form span.h3{
	color:#333333;
	font-size:1.1rem;
	line-height:1.2;
	font-weight:600
}



/*ACCORDION*/
ul.accordion{
	margin-bottom:30px;
}

ul.accordion li.accordion-item{
	margin-bottom:0px;
}


.accordion .accordion-navigation > a, .accordion dd > a, .accordion li > a{
	margin-bottom:0px;
	font-size:1rem;
	color:#3e3e3e;
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;
	padding:1rem}	
	
.accordion .accordion-navigation > a::before, .accordion dd > a::before, .accordion li > a::before{
	font-size:18px;
	font-weight:600;	
	font-weight:normal;
	color:#3e3e3e
}

.accordion li .accordion-content li > a{
	color:#266cac;
	padding:0px;
}

.accordion li .accordion-content li > a::before{
	content:''
}

ul.accordion li.accordion-item.is-active a.accordion-title{
	background:#e6e6e6
}

/*BUTTON*/
a.button{
	font-size:1rem;
	color:#555555;
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;
	padding:12px 15px;
	border-radius:3px; 
	line-height:1.2}
	
a.ghost-button{
	font-size:1rem!important;
	color:#ffffff;
	border-radius:3px; 
	border:2px solid #ffffff;
	background-color:transparent;
	text-transform:none;
	padding:8px 15px
}

a.ghost-button:hover{
	background-color:#266cac;
	color:#ffffff!important;
	border:2px solid #266cac;
}

.parallax.careers-HP  a.ghost-button{
	 float:none;}

/*Display Slider*/

.lSSlideWrapper {
	border:2px solid #d8d8d8;
	background-color:#f9f9f9;
	/*max-height:800px;
	min-height:800px*/}
	
.lSSlideWrapper li.display-panels{
	text-align:left;
}

.lSSlideWrapper li.display-panels .project-name{
	background-color:#278dc1;
	padding:10px 15px;
	color:#ffffff;
	text-transform:uppercase;
	font-weight:normal
}

.lSSlideWrapper li.display-panels .display-title{
	padding:25px 15px 0px 10px	/*background-color:#278dc1*/
}

.lSSlideWrapper li.display-panels .display-title h2{
	font-weight:normal
}

.lSAction > a{
	background-image:none
}

.lSAction > .lSPrev:before{
	content: "\f137";
    font-family: 'FontAwesome';
    /* Put here the height of the image */
    font-size:30px;
    position: absolute;
    left:-10px;
    top:0;
    color:#888
}

.lSAction > .lSNext:before{
		content: "\f138";
    font-family: 'FontAwesome';
    /* Put here the height of the image */
    font-size: 30px;
    position: absolute;
    left: 15px;
    top:0;
   color:#888

}


/*Custom Lists Style*/


ol.steps{
  clear: both;
  list-style: none;
  margin-top:40px;
}

.count-list ol.steps > li {
  position: relative;
  margin-bottom:30px;
  padding-top:15px;
  counter-increment: inst;
  z-index:0}

.count-list ol.steps:first-child > li:before {
  	content: counter(inst);
	position: absolute;
	left:-20px;
	top:0px;
	font-family:"OpenSans","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
	font-weight:700;
	font-size:4.5rem;
	color:rgba(113,191,230,.4);
	z-index:-1
}

ol.steps li h3{
	margin-top:0px;
}

.cbs-List ul, .cbs-List, .cbs-diagnosticContainer ul, .cbs-diagnosticSlot ul, .cbs-diagnosticItemContainer ul{
	margin-left:0px;
}
  
/*Food scraps */
/*Font Stag */
.stag-font{
	font-family:"Stag Italic", Georgia, serif !important;
	letter-spacing:1px !important}
	
h4.stag-font{
	text-transform:none;
}

.avenir {
	font-family:"Nunito Sans",Tahoma,Helvetica,Arial,sans-serif!important;
}

.avenir-bold {
	font-family:"Nunito Sans",Tahoma,Helvetica,Arial,sans-serif!important;
	font-weight:800
}



/*Video*/

.responsive-embed.nopadding{
	padding-bottom:50%;
}


/*BIO/TEAM MEMBERS*/
/* TEAM */
/* TEAM */
.no-margin {
  margin: 0;}

.team-item {
  width: 25%;
  padding-bottom: 20%;
  float: left;
  display: block;
  position: relative;
  height:255px;
  border-left:2px solid #ffffff;
  border-right:2px solid #ffffff;}
  
.team-item a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;}
  
.team-item.active {
  background-color:rgba(51,153,204,.8)}

.team-item img{
	width:100%;
	max-width:100%
}

.team-bio-full {
  width: 100%;
  background-color:rgba(51,153,204,.8);
  display: block;
  float: left;}

.team-bio-text {
  display: none;
  width: 90%;
  margin: 0 auto;
  padding: 5% 0;}
  
.bio-text p {
	color:#ffffff !important;}
	
/*Google Map*/

button.gm-control-active {font-size:auto;min-width:auto}
	
/*Single Use Items*/

.sui-banner{
	padding-top:50px;
	border-bottom:3px solid #111111;	
	height:410px;
	background-image:url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/comicbg.png');
	background-repeat:no-repeat;
	background-position:right bottom;
	position: relative;
  	z-index: 1;
}

.sui-banner:after{
	background: inherit;
	bottom:0;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;	
	transform: skewY(-1.5deg);
	transform-origin: 100%;
	z-index: -1;
	-webkit-box-shadow: -2px 2px 0px 1px #000000; 
	box-shadow: -2px 2px 0px 1px #000000;	
	border-radius:3px}


.sui-main-page-banner{
	width:100%;
	border-bottom:3px solid #111111;
	min-height:200px;
	height:200px;
	position: relative;
  	z-index: 1;
	background:transparent url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/comicbg.png') no-repeat bottom right;
	text-align:center
}

.sui-main-page-banner:after{
	background: inherit;
	bottom:0;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;	
	transform: skewY(-.5deg);
	transform-origin: 100%;
	z-index: -1;
	-webkit-box-shadow: -2px 2px 0px 1px #000000; 
}

.bangers{
	font-family: 'Bangers', cursive!important;
	letter-spacing:4px;
	text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 2px 0 #000, 1px 2px 0 #000;
	text-transform:uppercase;
	font-weight:bold;
	line-height:1.2;
	color:#ffffff;
}

.bangers-black{
	font-family: 'Bangers', cursive!important;
	letter-spacing:2px!important;
	text-transform:uppercase!important;
	font-weight:bold!important;
	line-height:1.2!important;
	color:#111111!important;
	font-size:1.8rem!important
}

h1.bangers-black{
	font-size:2.5rem!important
}

.sui-main-page-banner h1.bangers{
	font-size:2.5rem!important;
	position: relative;
  	top:110px;
}

h2.bangers, .ms-rtestate-field h2.bangers{
	font-size:2rem!important
}

h3.bangers, .ms-rtestate-field h3.bangers, .h3.bangers{
	font-size:1.7rem!important;
	margin-top:0px;
	letter-spacing:5px;
}

.saira{
	font-family:'SairaCondensed', Arial, sans serif!important;
	letter-spacing:1px;
}

h3.saira {
	font-size:1.5rem;
	margin-top:25px
}

h4.saira {
	font-size:1.4rem;
	margin-top:25px;
	color:#333333;
}

.sui-banner .bangers{
	position:absolute;
	font-size:1.8rem;
	top:350px;
	line-height:1.2
}

.sui-hero{ 
	 height:425px
}

.sui-panel{
	margin-bottom:30px;
	border:2px solid #111111;
	border-right:3px solid #111111; 
	border-bottom:3px solid #111111; 
	border-radius:3px;
	text-align:center;
	position:relative;
	background:transparent url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/comicbg.png') no-repeat bottom right;
	background-size:75%
}

.sui-border{
	border:2px solid #111111;
	border-right:3px solid #111111; 
	border-bottom:3px solid #111111; 
	border-radius:3px
}

.sui-panel-angled{
  	position: relative;
  	z-index: 1;
	background:transparent url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/comicbg.png') no-repeat bottom right;
	border-right:3px solid #111111; 
	border-left:3px solid #111111;
	border-top:3px solid #111111;
}

.sui-panel-angled:after {
	background: inherit;
	bottom:0;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;	
	transform: skewY(-3deg);
	transform-origin: 100%;
	z-index: -1;
	-webkit-box-shadow: -2px 2px 0px 1px #000000; 
	box-shadow: -2px 2px 0px 1px #000000;	border-radius:3px
}

.sui-purple{
	color:#877ebb!important;
}

.sui-yellow{
	color:#e5cf62!important;
}
.sui-lime{
	color:#b9d56a!important;
}

.sui-green{
	color:#3eb76b!important;
}

.sui-pink{
	color:#f395a7!important;
}

.sui-teal{
	color:#4fc3c2!important;
}

.sui-bg-purple{
	background-color:#837dbb!important;
}

.sui-bg-yellow{
	background-color:#ead666!important;
}
.sui-bg-lime{
	background-color:#b7d768!important;
}

.sui-bg-green{
	background-color:#45b86d!important;
}

.sui-bg-pink{
	background-color:#f594a7!important; 
}

.sui-burst{
	background:transparent url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/burst.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size:contain;
	text-align:center;
	float:right;
	position:absolute;
	top:130px;
	right:-20px;
	display:none;
	-webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;}
    
.sui-burst-lg{
	background:transparent url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/burst.png') no-repeat center center;
	width:100%;
	height:200px;
	background-size:contain;
	text-align:center;
	float:right;
	position:relative;
}

.sui-burst h2, .sui-burst-lg h1{
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.sui-panel:hover .sui-burst{
	display:block;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;}
    
    
.sui-panel:hover .sui-burst h2.bangers{
	color:#4fc3c2!important;
}
  
.sui-button{
	background:transparent url('http://www.metrovancouver.org/services/solid-waste/reduction-reuse/single-use-items-reduction/PublishingImages/burst.png') no-repeat center center;
	background-size:contain;
	text-align:center;
	position:relative;
	width:110px;
	height:100px;
	margin:auto 10px;
	padding:0px 10px;
}  

.sui-button.disabled{
	opacity: 0.5;
    cursor: not-allowed;   
}

.sui-button h5.bangers{
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	margin-top:0px;
	font-size:1.7rem;
	letter-spacing:4px;
}

a.sui-button:hover{
	text-decoration:none;
	-ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

a.sui-button.disabled:hover{
	-ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform:none;

}
.sui-panel.sui-tips .saira p, .sui-panel.sui-tips .saira div{
	font-family:'SairaCondensed', Arial, sans serif!important;
	letter-spacing:1px;
	font-size:1.4rem;
	font-weight:600
}

.sui-panel.sui-tips img{
	width:80%;
	margin-left:auto;
	margin-right:auto
}

.sui-panel.sui-tips{
	background-image:none !important;

}

.grid-item { width:300px;}

/*Masonary Cards*/
.masonry-wrapper {
  columns: 3;
  column-gap: 10px;
}

.masonry-wrapperx4 {
  columns: 4;
  column-gap: 10px;
}

.masonry-item {
  display: inline-block;
  margin-bottom:5px;
  position: relative;
}

.masonry-item, .masonry-content {
  border-radius:2px;
  overflow: hidden;
  min-width:100%;
  -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 filter: contrast(1) brightness(1);

}

.masonry-content{
	margin-top:5px
}

.masonry-content:hover {
  filter: contrast(.95) brightness(.95);
}


.masonry-content h3  {
position: absolute;
  top: 25px;
  left: 10px;
  right: 0px;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;}
  
.masonry-content .image-container img{
	filter: contrast(.65) brightness(.65);
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    object-fit: cover;
    width: 100%;
}
  

.masonry-item .sui-panel{
	margin-bottom:0px;
}

.masonry-wrapper .masonry-item:nth-child(1n+5) .sui-panel, .masonry-wrapper .masonry-item:nth-child(1) .sui-panel {
	background-color:#877ebb!important;
}
.masonry-wrapper .masonry-item:nth-child(2n+5) .sui-panel, .masonry-wrapper .masonry-item:nth-child(2) .sui-panel{
	background-color:#e5cf62!important;
}
.masonry-wrapper .masonry-item:nth-child(3n+5) .sui-panel, .masonry-wrapper .masonry-item:nth-child(3) .sui-panel{
	background-color:#b9d56a!important;
}
.masonry-wrapper .masonry-item:nth-child(4n+5) .sui-panel, .masonry-wrapper .masonry-item:nth-child(4) .sui-panel{
	background-color:#3eb76b!important;
}

.masonry-wrapper .masonry-item:nth-child(5n+5) .sui-panel, .masonry-wrapper .masonry-item:nth-child(5) .sui-panel{
	background-color:#f395a7!important;
}

.masonry-item .sui-panel h3 {
	position:relative;
	top:auto;
	left:auto;
	right:auto;
}

/*Microfibres*/
.microfibre-panel{
	position:relative;
	text-align:center;
	padding:0px!important;
	overflow:hidden;
	height:200px;
}

/*.microfibre-content{
	min-height:250px;
	height:inherit;
	-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);}*/

/*.microfibre-content:hover{
	-webkit-transform: scale(1.08);
	transform: scale(1.08);
	opacity: 0.8;
	-webkit-filter: grayscale(10%);
	filter: grayscale(10%);
	background-size:105%
}*/

.mf-content{
	position:relative;
	padding:15px 0px 10px 0px!important;
	overflow:hidden;
	min-height:200px;
	text-align:center!important;
	background:transparent url('/services/liquid-waste/projects-initiatives/microfibres/PublishingImages/tipsbg.png') no-repeat center center;
	background-size:cover
}

.microfibre-panel h3{
	position:absolute;
    bottom:15%;
    margin:0px;
    width:100%;
    font-size:1.7rem;
    text-shadow:1px 1px 1px rgba(0,0,0,.4)
}

.microfibre-panel img.microfiber-image-hover{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}

.microfibre-panel:hover img.microfiber-image-hover{
  opacity: 1;
}

.fullsize-video-bg {
  position: relative;
  background-color: black;
  height: 45vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  /*background: url('http://www.zwc.ca/SiteAssets/video/ZWCbackground.jpg') center center / cover no-repeat;*/
}

.fullsize-video-bg video{
  position: absolute;
  top: 50%;
  left:20%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  max-width: none;
    position: absolute;
    left: 50%;
    top: 50%;
    --uk-position-translate-x: -50%;
    --uk-position-translate-y: -50%;
    transform: translate(var(--uk-position-translate-x),var(--uk-position-translate-y));
}

.fullsize-video-bg .hp-tagline {
  position: relative;
  z-index: 2;
  top:20vh
}


.fullsize-video-bg .hp-tagline h1{
	font-size:3.2rem;
	text-shadow:1px 2px 1px rgba(0,0,0,.4);
	font-family:'Open Sans', verdana, sans-serif;
	font-weight:900
}

.fullsize-video-bg .hp-tagline h2{
	font-size:2.5rem;
	text-shadow:1px 2px 1px rgba(0,0,0,.4);
	font-family:'Open Sans', verdana, sans-serif;
	font-weight:900;
	line-height:1.2!important;
}

.fullsize-video-bg  .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color:rgba(0,0,0,.3);
}

/*River Safety*/

.fullsize-video-bg .hp-tagline.river-safety{
	top:30%;
}

.hp-tagline.river-safety {
	margin-left:auto;
	margin-right:auto
}

.rs-title{
	font-weight:bold!important;
    font-family:'Open Sans', verdana, sans-serif!important;
}

h1.rs-title{
	color:#2a8dc0;
    font-size: 2rem;
    font-weight:bold;
    font-family:'Open Sans', verdana, sans-serif;
    margin-bottom:20px
}

h2.rs-title{
    color:#2a8dc0;
    font-size: 1.7rem;
    font-weight:bold;
    font-family:'Open Sans', verdana, sans-serif;
    margin-bottom:20px
}

.hp-tagline.river-safety h1{
	clip-path: polygon(3% 11%, 98% 0, 100% 95%, 0% 100%);
	background-color:rgba(15,71,124,.7);
	padding:30px 10px;
	line-height:1!important;
	margin:0px auto!important;
	color:#aee6ff!important;
	font-size:2.5rem;
	text-shadow:1px 2px 1px rgba(0,0,0,.4);
	font-family:'Open Sans', verdana, sans-serif;
	font-weight:900;
	line-height:1.2!important;

}
.hp-tagline.river-safety h1:nth-child(2){
	/*clip-path: polygon(2% 13%, 97% 4%, 95% 96%, 4% 100%);*/
	clip-path: polygon(2% 15%, 97% 1%, 98% 100%, 3% 100%);	
	position:relative;
	top:-20px
}

.rs-bg{
	background:transparent url('/river-safety/PublishingImages/river-safety-bg.jpg') repeat left top;
}

.rs-bg-map{
	background:#2a8dc0;
}

.rs-arrow-bg{
	clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 98%, 4% 100%);
	background-color:rgba(36,119,163,1);	
	float:right;
	padding:5px;
	min-width:85%;
	position: relative;
    top: -30px;
    right: -10px;
    transition:.5s
}

.rs-button-outer{
	position: relative;
	width:auto;
	min-height:50px;
	background: #ffffff;
	-webkit-clip-path:  polygon(2% 2%, 92% 6%, 100% 50%, 94% 97%, 4% 98%);
    clip-path:  polygon(2% 2%, 92% 6%, 100% 50%, 94% 97%, 4% 98%);
}

.rs-button-inner{
 	padding:12px 0px 15px 25px;
 	 position: absolute;
 	 width:auto;
     top: 2px;
     left: 2px;
     right: 2px;
     bottom: 2px;
     background:  rgba(36,119,163,1);
     -webkit-clip-path: polygon(2% 2%, 92% 6%, 100% 50%, 94% 97%, 4% 98%);     
     clip-path: polygon(2% 2%, 92% 6%, 100% 50%, 94% 97%, 4% 98%);
	 transition:.5s;
	 font-size:1.2rem
}

.rs-arrow-bg:hover{
	right:-15px
}

.rs-arrow-bg:hover .rs-button-inner{
	background:rgba(36,119,163,.8);
	left:5px
}

.rs-text-large{
	font-size:3rem
}

.rs-text-xlarge{
	font-size:3.5rem
}

.rs-text-thin{
	font-weight:normal
}

/*Microfibres*/
.mf-banner h1{
	text-shadow:1px 2px 1px rgba(0,0,0,.4)
}

.mf-banner .position-center{
	top:65%
}

.mf-content h3.mf-content-title{
	position:relative;
	bottom:auto;
	top:auto;
	padding:10px
}

.mf-blue1{
	color:#4476a6!important
}

.mf-blue2{
	color:#3270ab!important
}

.mf-blue3{
	color:#8ddef9!important
}

.mf-blue4{
	color:#419bfd!important
}


/*End Microfibres*/
.cfa-panel{
	width:100%;
	padding:0px;
	position:relative;
	margin-bottom:0px;
	background-color:#5eabd1;
	-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    filter: contrast(1) brightness(1);
}

.cfa-panel:hover {
	filter: contrast(.95) brightness(.95);
}

.cfa-panel .image-container{
	overflow:hidden
}

.cfa-panel .image-container img{
	filter: contrast(.9) brightness(.9);
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    object-fit: cover;
    width: 100%;
}

.cfa-panel:hover .image-container  img, .masonry-content:hover .image-container img{
 -webkit-transform: scale(1.08);
  transform: scale(1.08);
  opacity: 0.9;
}

.cfa-panel h4{
	width:100%;
	padding:15px 20px;
	text-transform:none;
	color:#ffffff!important;
	-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	font-weight:normal!important;
	margin-top:5px
}

.cfa-panel .image-container h4{
	position: absolute;
  	bottom:-10px;  	
  	background:rgba(94, 171, 209,.8)
}

.cfa-panel:hover .image-container h4{
  	background:rgba(94, 171, 209,1)
}

.cfa-banner {
	background:transparent url('http://www.metrovancouver.org/services/air-quality/about/caring-for-the-air/CFAPhotos/10years.png')no-repeat top right;
	background-size:25%;
	min-height: 275px;	
	width:100%;
}

.cfa-banner .position-center, .cfa-hp-banner .position-center{
	position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.cfa-banner h1, .cfa-hp-banner h1{
	font-family:'Open Sans', verdana, sans-serif;
	font-size:2.5rem;
	color:#ffffff;	
	text-shadow:1px 1px 1px #111
}

.cfa-banner h3, .cfa-hp-banner h3{
	line-height:1.1;
	font-size:1.5rem;
	font-family:'Open Sans', verdana, sans-serif;
	margin-bottom:20px;
	color:#ffffff;	
	text-shadow:1px 1px 1px #111
}


/*FOOTER*/

.footer {
	padding:50px 0px 200px 0px !important;
	color:#f3f3f3;
	background-color:#303030}

.footer p,.footer li, .footer a{
	color:#e3e3e3;
	font-size:.85rem}

.footer-title {
	color:#e0e0e0;
	font-size:.9rem;
	margin:10px 0px;
	text-transform:uppercase}
	
.footer li{
	list-style:none;
	margin-bottom:auto;
}

/*Cookies-Privacy Statement*/	
.columns.cookies-tabs{
	padding-right:0px
}

.columns.cookies-tabs-content{
	padding-left:0px
}

.cookies-tabs .tabs-title{
	margin-bottom:0px
}

.cookies-tabs .tabs-title > a{
	font-size:1rem;
	padding:1.5rem;
	background:#f9f9f9;
	color: #222222;
}

.cookies-tabs-content .switch.small{
	border-radius:50px
}

.cookies-tabs-content .switch.small .switch-paddle{
	border-radius:50px
}

.cookies-tabs-content .switch.small .switch-paddle:after{
	border-radius:50px
}

.tabs-title > a:hover {
	background:#e8e8e8;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
    background: #aed1e3;
    color: #222222;
}
    
.cookies-tabs-content .tabs-panel[aria-hidden="false"] {
	background:#aed1e3;
}   
    
.cookies-tabs-content hr{
	border-bottom: 1px solid rgba(255,255,255,1) !important;
}  

.cookies-tabs .tabs.vertical,.cookies-tabs-content .tabs-content.vertical{
	border:0px}
    
/*.footer {
	padding:50px 0px 100px 0px !important;
	color:#f3f3f3;
	background-color:#303030}

.footer p,.footer div, .footer dl, .footer dt,.footer ul,.footer blockquote, .footer th, .footer td, .footer a, .footer li{
	line-height:1.2;
	color:#e3e3e3;
	font-size:.85rem}

.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 li{
	list-style:none;
	margin-left:0px; 
	color:#f3f3f3;
	font-size:14px;}
.footer .share i {
	font-size:2.5em ;
	margin-right:30px}	*/

/*XXLARGE SCREEN*/
@media all and (min-width:1921px) {
.fullsize-video-bg  video {
  left:50%;
 }

}


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

}

@media all and (min-width:1200px) and (max-width:1420px){
	
}

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

.fullsize-video-bg video{
    top: 55%;
}

}	

@media all and (min-width:901px) and (max-width:1024px){
.fullsize-video-bg video{
    left:10%;
}

}

/*LAPTOP*/
@media screen and (min-width:900px) and (max-height:950px){
.fullsize-video-bg{
	height:55vh
}

.microfibre-thanks{
   top:-50px;
   right:50px
}


}
/*MED/SMAll SCREEN*/
@media all and (max-width:900px) {
.testimonials{
	background-size:cover!important;
	min-height:200px
}

.testimonials .overlay-white{
	min-height:200px;}


.testimonials p{
	font-size:.9rem;
}

/*Masonary Cards*/
.masonry-wrapper, .masonry-wrapperx4 {
  columns: 1!important;
  column-gap: 10px;
}
.masonry-item {
  display: inline-block;
  margin-bottom: 16px;
  position: relative;
}

h3.bangers, .ms-rtestate-field h3.bangers, .h3.bangers{
	font-size:1.5rem!important;}


}	
	

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

body{
	font-size:1rem;}

div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td {		
	font-size:1rem;
}

h2, .h2, .ms-rtestate-field h2, h2.ms-rteElement-H2{
	font-size:1.5rem
}

h3, .h3, .ms-rtestate-field h3, h3.ms-rteElement-H3{
	font-size:1.3rem
}

.pad-5x{
	padding: 25px 0px!important
}
.menu-container{
	display:none
}

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

.slicknav_nav ul{
	margin:0px;}

 .slicknav_menu{
	padding:0px;
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;	
}

 .slicknav_menu .chat-mobile{
	background-color:#1A75C1;
	padding:5px;
}

 .slicknav_menu .chat-mobile i {
	margin-left:5px;
	color:#ffffff;
}
	
 .slicknav_menu .chat-mobile a  {
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;	
	text-transform:none;
	font-size:.9rem;
	color:#ffffff;
}


.slicknav_menu .slicknav_menutxt{
	font-weight:600;	
	color:#3e3e3e;
	font-size:1rem;
}

.slicknav_menu .slicknav_icon{
	color:#3e3e3e;
}

.slicknav_nav {
	background-color:#f7f7f7
}

.slicknav_nav ul.dynamic{
	width:100%;
	background:#f7f7f7f;
	box-shadow:0px 0px 0px 0px rgba(255,255,255,0)
}

.slicknav_nav li a{
	font-family:'Nunito Sans', Verdana, Arial, sans-serif;	
	text-transform:none;
	font-size:.95rem;
	color:#3e3e3e;
	}

.slicknav_nav li.static.dynamic-children a{
	text-transform:none
}

.parallax.climate-2050-HP[style]{
	height:2450px!important;
	background-attachment:scroll!important;
	background-size:cover!important;
}

.climate2050-banner .position-center{
	top:50%;
}

.climate2050-banner[style]{
	height:250px;
	background-attachment:scroll!important;
	background-size:cover!important;
}


.climate2050-banner h1, .prosperity-banner h1{
	font-size:2.1rem;
	line-height:1.2
}

.climate2050-banner h2, .prosperity-banner h2{
	font-size:1.4rem;
	line-height:1.2
}

.parallax {
	background-attachment:scroll!important;
	background-size:cover!important; }


.parallax.careers-HP[style]{
	height:90vh!important
}

.parallax.careers-HP  a.ghost-button{
	 float:none;
	 display:block
}

.parallax.testimonial-parallax{
	height:1000px;
}

.testimonial-parallax .testimonials{
	min-height:260px;
	background-size:60%!important;
}

.team-list{
	clear:both!important
}
.team-item {
  width:50%!important;
  padding-bottom:0px;
  height:auto
}
  
.team-item a {
  position:relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;}

.team-item a > div[style] {
  position:relative!important}

/*Single Use Items*/
.sui-banner{
	padding-top:0px;
	height:300px;
	background-size:50%!important
}

.sui-banner .row{
	background-position:center top!important;
	background-size:90%!important}


.sui-banner .bangers{
	top:120px}
	
.sui-burst{
	top:100px;
}

.sui-main-page-banner{
	min-height:100px;
	height:100px
} 

.sui-main-page-banner h1.bangers{
	font-size:2rem!important;
	position: absolute;
  	top: 50%;
  	transform: translateY(-50%);
}

.sui-hero{
	position:relative;
	top:65px;
	height:275px}
	
h1.bangers-black{
	font-size:1.8rem!important}
	
h2.bangers-black, .ms-rtestate-field h2.bangers-black, .h2.bangers-black{
	font-size:1.5rem!important}
	
h3.bangers, .ms-rtestate-field h3.bangers, .h3.bangers{
	font-size:1.3rem!important}
	
.mf-banner{
	height:175px;
	min-height:175px;
}

.mf-banner h1{
	font-size:1.8rem
}

.mf-banner .position-center{
	top:60%
}

.fullsize-video-bg{
	height:40vh!important;
	min-height:15rem;
}
.fullsize-video-bg video {
    position: absolute;
    top: 50%;
    left: -10%;
}    
.fullsize-video-bg .hp-tagline {
	top:30%
}

.fullsize-video-bg .hp-tagline h1 {
	font-size:2rem
} 


.fullsize-video-bg .hp-tagline h2{
	font-size:1.7rem
} 
	
.microfibre-thanks{
    top: -150px;
    right:20px;
}


}
@media all and (max-width: 750px){
	
.fullsize-video-bg{
	height:50vh!important;
	min-height:15rem;
}

.fullsize-video-bg video {
    position: absolute;
    top: 40%;
    left: -120%;
}    
.fullsize-video-bg .hp-tagline {
	top:70%
}

.fullsize-video-bg .hp-tagline.river-safety{
	top:5%;
}

.fullsize-video-bg .hp-tagline h1 {
	margin-bottom:0px
}
.fullsize-video-bg .hp-tagline h2{
	font-size:1.5rem
}
.mf-banner .position-center{
	top:30%
}

.y4a-banner h1 {
	font-size:1.8rem
}

.y4a-overlay-blue, .y4a-overlay-orange, .y4a-overlay-teal {
padding-top:20px
}

.y4a-banner .position-center, .y4a-banner.main .position-center{
top:50%!important
}

}