html {
  position: fixed;
  height: 100%;
  overflow: hidden;
  margin:0;
  padding:0;
}

body {
	width: 100%;
	height: 100vh;
	margin:0;
	padding:0;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	background:#666;
	font-family: 'Roboto',sans-serif;
}

svg.tgam-nameplate-2 {
    background-color: transparent;
    display: block;
    height: 57px;
    padding: 2px;
    width: 57px;
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999;
}


.redbox{
	display:block;
	position:fixed;
	border:none;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background:#da161f;
	z-index:99999999999;
}

.new-adv-banner {
	padding:5px 0;
}

.new-adv-sponsor-banner{
    display:block;
    position:fixed;
    top:0;
    left:0;
	z-index:9999999999;
    width:100%;
    height:10px;
    padding: .625rem 0;
    background:#e5eff1;
    color:#333;
    text-align:center;
    font-size: .6875rem;
	display: flex;
    align-items: center;
    justify-content: center;
}

.new-adv-banner{
    font-family: Helvetica,Arial,Verdana,sans-serif;
    font-size: .6875rem;
    line-height: .75rem;
    letter-spacing: .0625rem;
    text-transform: uppercase;
    background-color: #E3EFF1;
}




.yellowBg{
	background-color:#dfc601;
}
.yellowBg strong{
	color:#11296c;
}
.navyBg{
	background-color:#11296c;
	color:#fff;
}
.medblueBg{
	background-color:#204792;
	color:#fff;
}
.lightblueBg{
	background-color:#8ebee3;
}
.lightblueBg strong{
	color:#11296c;
}







#bodyWrapper{
	width:100vw;
	height:100vh !important;
	overflow: auto;
}
#bodyWrapper.desktop{
	scroll-snap-type: y proximity;
}


.articleSection{
	display:flex;
	align-items:center;
	/*justify-content:center;*/
	align-content:stretch;
	flex-wrap:wrap;
	position:relative;
	width:100vw;
	height:100vh;
	min-height: 56vw;
	margin:0px auto;
	padding:0px;
	overflow:hidden;
	/*box-shadow: 0px 10px 10px #333;
	flex-wrap:nowrap;*/
	
	
}
.articleSection.desktop{
	scroll-snap-align: start;
}

.stan-text-wrapper {
	max-width:1200px;
	margin:0px auto;
	display:Flex;
	align-items:flex-start;
	align-cotent:space-around;
}

.half{
	display:flex;
	align-items:center;
	justify-content:center;
	align-content:stretch;
	flex-wrap:wrap;
	width:100%;
	height:100%;
}

.onethird{
	position: relative;
	width:33%;
	height:100%;
	overflow-y:hidden;
}
.twothird{
	position: relative;
	width:66%;
	overflow-y:hidden;
}

.textWrapper{
	display:inline-block;
	margin:0 5%;
	max-width:500px;
	text-align:left;
	line-height:1.4;
	padding:3rem 0px;
	z-index: 99999999999;
}
.textWrapperWide{
	display:inline-block;
	margin:0 15%;
	max-width:500px;
	text-align:left;
	max-width:none;
	line-height:1.4;
}

.alignright{
	text-align:right;
}

strong{
	font-size:1.6em;
	font-weight:bolder;
}

.pullquote{
	font-size:2.2em;
	font-weight:bolder;
	color:#11296c;
}
.pullquote .icon{
	display:block;
	font-size:4em;
	color:#fff;
	height:.25em;
	margin-top: -0.5em;
	margin-bottom:1rem;
}

#slide1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/mountain.png);
	background-repeat:no-repeat;
	background-position: right bottom;
	background-size: 70%;
}
#slide2{
}


.infographic{
	position: relative;
	height: 56vw;
	width: 50vw;
	max-width:89vh;
	top:0px;
	display:inline-flex;
	align-items:center;
	align-content:center;
	overflow:hidden;
}

.stack{
	display:inline-flex;
	align-items:center;
	/*justify-content:center;*/
	align-content:stretch;
	flex-wrap:wrap;
	position:relative;
	width:100%;
	height:50%;
}

@media only screen and (min-width: 800px){
	
	.articleSection{
		scroll-snap-align: start !important;
	}

	.wrap{
		flex-wrap:wrap;
	}
	.half{
		width:50%;	
	}
}


@media only screen and (min-width: 1600px) and (min-height: 1000px){
	.textWrapper, .textWrapperWide{
		font-size:1.6em;
	}
	.textWrapper{
		max-width:730px
	}
}


@media (min-aspect-ratio: 17/10) {
	.articleSection{
		height:100vh;
		min-height:20vw;

		
		height:100vh;
	}
	
	.infographic{
		/*width: 50vw;
		height: 56vw;*/
		max-width:none;
	}
}

@media only screen and (max-width: 799px){
	.articleSection{
		height:auto;
		width:100%;
	}
	.infographic{
		height: 112vw;
		width: 100vw;
	}
	.textWrapper, .textWrapperWide{
		margin:0 1em;
		max-width:none;
		padding:0px;
	}
	.textWrapper p, .textWrapperWide p{
		margin: 0 0 2em 0;
	}
	.textWrapper .mTopMargin, .textWrapperWide .mTopMargin{
		margin-top:2em;
	}
	
	.mobile-padding {
		padding:6rem 1rem;
	}
	
	.stan-text-wrapper {
		flex-wrap:wrap;
		align-items:flex-start;
		align-content:space-around;
		padding:4rem 1rem;
		max-width:550px;
	}
	
	

	
	#titleText {

		overflow:hidden;
	}
	 #titleText h1{
		font-size: 9vw !important;
		margin-bottom: 1rem;
	}
	 #titleText h2{
	 	border-radius:0.5vw !important;
		font-size: 1em !important;
		border-top: 1px solid #fff !important;
		 border-bottom: 1px solid #fff !important;
		padding:1rem 2rem;
		box-sizing:border-box;
		 border-radius:0px !important;
	

	}

	.half{
		height:auto;
	}
	.twothird{
		width:90vw;
		margin-right:10vw;
	}
	
	.twothird p strong {
		font-size:1.25em;
	}
	.onethird{
		position:absolute;
		width:25vw;
		min-height: 112vw;
		height:100%;
		right:0;
		margin-right:-12vw;
	}
	
	strong {
		font-size:1.4em;
	}
	.mobiSwitch{
		flex-direction:column-reverse;
	}
	.BadRoad{
		height: 20vw !important;
	}
	.FinalCity{
		height: 21vw;
	}
	#slide1, #slide7{
		padding-bottom: 6vw;
	}
	#slide10{
		padding-bottom: 12vw;
	}
	.infographicElement.Bike0{
		height: 15vw;
		width: 15vw;
		animation-delay: 4s; /* it looked like he was getting hit with the car */
	}
	.pullquote .icon{
		margin-top: 0;
	}
	
	.infographicElement.Bike0{
		width: 15% !important;
	}
	.infographicElement.AutonomousBus0 {
		width: 36vw !important;
		height: 20vw !important;
    }
	
}

















#welcomeSlide {
	/*width:100%;*/
	background-color:#11296c;
	background-image:url(https://sec.theglobeandmail.com/adv/partners//TGAM_Advertising/2019/_specialreports/stantec/smartmobility17/m/story-1-hero-min.png);
	background-size:cover;
	background-position:bottom;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0px;
	padding:0px;
}

#titleText {
	max-width:800px;
	padding:2rem;
}

#titleText h1 {
	font-family:Century Gothic;
	color:#dfc601;
	line-height:1.4;
	font-size:4rem;
	

}

#titleText span {
	background-color:#204792;
}

#titleText h2 {
	color:#fff;
	max-width:600px;
	margin:0px auto;
	line-height:1.5;
	border-top: 0px solid #fff !important;
	border-bottom: 0px solid #fff !important;
	/*background-color:#204792;*/
	padding:1rem 2rem;
	box-sizing:border-box;
	border-radius:0px !important;
}

#titleText h3 {
	color:#fff;
	font-style:italic;
	font-size:1em;
	font-weight:normal;
		background-color:#11296c;
	margin-top:2rem;
	border-radius:10%;
	width:auto;
	display:inline-block;
	box-shadow:0px 0px 10px #11296c;
}

.scroll-icon {

    color: #fff;
    font-size: 0.55em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
	fill:#fff;
}



/*@media only screen and (max-width: 800px) {

    #titleText h1 {
        font-size:3em;
    }
    
    #titleText h2 {
        font-size:1.2em;
    }
    
    #titleText h3 {
        font-size:0.8em;
    }
}

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

    #titleText h1 {
        font-size:2em;
    }
    
    #titleText h2 {
        font-size:1.1em;
    }
    
    #titleText h3 {
        font-size:0.8em;
    }
}*/


.pull{
	color:#11296c;
	font-weight:bolder;
	background:#eeeeff;
}








#bodyWrapper{
	display:block;
	position: relative;
	width:100%;
	height:auto;
	background:fff;
	text-align:center;


	/*height: 100vh;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;*/
}

#infographic{
	display:inline-flex;
	align-items:flex-start;
	align-content:center;
	height:auto;
    width: 100vw;
}

/*#infographic .infoHalf{
	width:50%;
	height:100%;
	
}*/

#graphic{
	position: -webkit-sticky;
	position:sticky;
	height:100vh;
	width:50vw;
	max-width:89vh;
	top:0px;
	background: #204792;
	display:inline-flex;
	align-items:center;
	align-content:center;
}


#graphic #content{
	position:relative;
	display:block;
	height:56vw;
	width:50vw;
	top:0;
	overflow:hidden;
	background:#204792;
	/*background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/helper.png);
	background-size:cover;
	*/
}
#bodytext{
	width:50vw;
	width: inherit;
	height:auto;
	padding:3rem 0px 6rem 0px;
}

.slideTextWrapper{
	display: flex;
	justify-content:center;
	align-items:center;
	width:auto;
	/*min-height:110vh;*/
	text-align:left;
}

.slideText{
	display:block;
	background:#fff;
	padding:0 2rem;
	width:80%;
	max-width:500px;
	line-height:1.8;
	font-size:1.1em;
}

.slideText p{
	margin: 3em 0 0 0;
}

.first-para {
    font-size: 1.5em;
    font-weight: bolder;
    line-height: 1.25;
    color: #0034a1;
}

@media (min-aspect-ratio: 18/10) {
	#graphic, #graphic #content{
		height:100vh;
		width:89vh;
	}
}

@media (max-aspect-ratio: 1/1) {
	#infographic{
		display:block;
	}
	#graphic{
		display:block;
		width:100vw;
		height:70vh;
		overflow: hidden;
		background:none;
	} 
	
	#graphic #content{
		width: 100vw;
		height: 113vw;
		top: 0vw;
	}
	#bodytext{
		width:100vw;
	}
	.slideTextWrapper {
		align-items: flex-end;
		padding:2em 0;
	}
	.slideText{
		max-width:80%;
	}
}

@media (min-width:1800px) {
	/*#infographic {
		height:1011px;
		width:1800px;
	}
	#graphic{
		height:1011px;
		width:900px;
	}*/
}

.infographicElement{
	position:absolute;
	width:10%;
	height:10%;
	background-size:cover;
	background-repeat:no-repeat;
	animation-fill-mode: forwards;
	
	-webkit-transition: opacity 2s; /* Safari prior 6.1 */
	transition: opacity 2s;
}

.elem1, .elem2, .elem3, .elem4, .elem5, .elem6, .elem7, .elem8, .elem9, .elem10, .elem11{
	display:none;
	opacity:0;
}
.active .elem1{
	display:block;
	opacity:1;
}
.active .elem2{
	display:block;
	opacity:1;
}
.active .elem3{
	display:block;
	opacity:1;
}
.active .elem4{
	display:block;
	opacity:1;
}
.active .elem5{
	display:block;
	opacity:1;
}
.active .elem6{
	display:block;
	opacity:1;
}
.active .elem7{
	display:block;
	opacity:1;
}
.active .elem8{
	display:block;
	opacity:1;
}
.active .elem9{
	display:block;
	opacity:1;
}
.active .elem10{
	display:block;
	opacity:1;
}

.sectionWrapper{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:50%;
	-webkit-transition: opacity 2s; /* Safari prior 6.1 */
	transition: opacity 2s;
}



/*===== all bus animations =====*/
@keyframes autoBus0 {
  0%   {left:100%;}
  100% {left:-15%;}
}
@keyframes autoBus1 {
  0%   {left:127%;}
  100% {left:10%;}
}
@keyframes autoBus2 {
  0%   {top:61%;}
  50% {top:61.5%;}
  100%   {top:61%;}
}
@keyframes autoBus3 {
  0%   {left:10%;}
  100% {left:-50%;}
}

.infographicElement.AutonomousBus-side{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousBus-side@2x.png);
	width:18.1%;
	height:11.1%;
}
.infographicElement.AutonomousBus0{
	/*background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousBus@2x.png);*/
	width: 14vw;
	height: 8vw;
	bottom:-0.5%;
	left:10%;
	-webkit-animation-name: autoBus0;
	-webkit-animation-duration: 30.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: autoBus0;
	animation-duration: 30.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.infographicElement.AutonomousBus, .infographicElement.AutonomousBus4{
	/*background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousBus@2x.png);*/
	width:26.71%;
	height:13%;
	top:61%;
	left:10%;
}
#slide11 .infographicElement.AutonomousBus4{
	left:100%;
}
.infographicElement.BusFront{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousBus@2x.png);
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	background-size: contain;
}
.infographicElement.Window, .infographicElement.Window2{
	background:#B5D1EA;
	width: 80%;
	height: 70%;
	top: 9%;
	left: 13%;
}

#slide2.active .infographicElement.AutonomousBus{
	-webkit-animation-name: autoBus1;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	animation-name: autoBus1;
	animation-duration: 3.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
}
#slide3.active .infographicElement.AutonomousBus{
	-webkit-animation-name: autoBus2;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	animation-name: autoBus2;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
#UPDATE.active .infographicElement.AutonomousBus{
	-webkit-animation-name: autoBus3;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: autoBus3;
	animation-duration:3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	
}

#slide11.active .infographicElement.AutonomousBus4{
	-webkit-animation-name: autoBus1;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	animation-name: autoBus1;
	animation-duration: 3.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
}
#slide14.active .infographicElement.AutonomousBus4{
	-webkit-animation-name: autoBus3;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	animation-name: autoBus3;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
}



/*===== all sky animations =====*/
@keyframes cloud2 {
  0%   {background-position:-20% 0% ;}
  100% {background-position:110% 0% ;}
}
@keyframes clouds {
  0%   {background-position:-60% 0% ;}
  100% {background-position:160% 0% ;}
}
@keyframes cloud1b {
  0%   {top:80%; left:80%; opacity:0 ;}
  100%   {top:0%; left:0%; opacity:1 ;}
}
@keyframes cloud2b {
  0%   {top:80%; left:80%; opacity:0 ;}
  100%   {top:80%; left:80%; opacity:1 ;}
}
.infographicElement.Cloud1, .infographicElement.Cloud1b, .infographicElement.Cloud1c{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Cloud1@2x.png);
	background-size: contain;
	width:100%;
	height:18%;
	top:7%;
	left:0%;

	-webkit-animation-name: clouds;
	-webkit-animation-duration: 13s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: clouds;
	animation-duration: 13s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.infographicElement.Cloud2, .infographicElement.Cloud2a, .infographicElement.Cloud2b, .infographicElement.Cloud2c{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Cloud2@2x.png);
	background-size: contain;
	width:100%;
	height:14%;
	top:22%;
	left:0%;

	-webkit-animation-name: clouds;
	-webkit-animation-duration: 19s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: clouds;
	animation-duration: 19s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#scene1 .infographicElement.Cloud2{
	animation-name: cloud2;
	top:12%;
	animation-duration:40s;
}
.infographicElement.Sun{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Sun@2x.png);
	width:27%;
	height:20%;
	top:26%;
	left:10%;
}
.infographicElement.Sky{
	width:100%;
	height:62.5%;
	top:0;
	left:0;
	background:#70bceb;
}


/*===== all background animations =====*/

@keyframes mount1 {
  0%   {background-position:204% 0% ;}
  100% {background-position:-1229% 0% ;}
}
@keyframes mount2 {
  0%   {background-position:80% 0% ;}
  100% {background-position:-1069% 0% ;}
}
@keyframes mount3 {
  0%   {background-position:-25% 0% ;}
  100% {background-position:-1096% 0% ;}
}
@keyframes buildings {
  0%   {background-position:5% 0% ;}
  100% {background-position:-1001% 0% ;}
}
@keyframes building {
  0%   {top: 63%; height: 0%;}
  100% {top: 17%; height: 48%;}
}
@keyframes trees {
  0%   {background-position:80% 0% ;}
  100% {background-position:-1197% 0% ;}
}
@keyframes tree2 {
  0%   {transform: translateY(78%) ;}
  100% {transform: translateY(0%) ;}
}
@keyframes tree3 {
  0%   {top: 41.25%; height: 0%;}
  100% {top: 33.25%; height: 8%;}
}
@keyframes trees4 {
  0%   {transform: translateY(160%) ;}
  100% {transform: translateY(94%) ;}
}
@keyframes part1Out {
  0%   {opacity:1 ;}
  100% {opacity:0 ;}
}
@keyframes sign {
  0%   {left:72.5%;}
  100% {left:100%;}
}
@keyframes road {
  0%   {background-position:80% 0% ;}
  100% {background-position:0% 0% ;}
}
@keyframes road2 {
  0%   {left: 100% ;}
  100% {left: -22% ;}
}
@keyframes road3 {
  0%   {top: 65% ; height:23%;}
  100% {top: 55.2% ; height:42.6%;}
}
@keyframes dashedlane {
  0%   {top:-25% ; left: 25% ;}
  100% {top:0% ; left: 0% ;}
}

.infographicElement.Mountain1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Mountain1@2x.png);
	background-position:-1204% 0% ;
	background-position:234% 0% ;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:40.8%;
	top:30%;
	left:0;
}
#slide3 .infographicElement.Mountain1{
	-webkit-animation-name: mount1;
	-webkit-animation-duration: 1600s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: mount1;
	animation-duration:1600s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.active .infographicElement.Mountain1, .active .infographicElement.Mountain1{
	animation-play-state: running;
}
.infographicElement.Mountain2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Mountain2@2x.png);
	background-position:-1080% 0;
	background-position:80% 0;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:36%;
	top:35%;
	left:0;
}

#slide3 .infographicElement.Mountain2{
	-webkit-animation-name: mount2;
	-webkit-animation-duration: 800s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: mount2;
	animation-duration:800s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.active .infographicElement.Mountain2, .active .infographicElement.Mountain2{
	animation-play-state: running;
}
.infographicElement.Mountain3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Mountain3@2x.png);
	background-position:-1096% 0;
	background-position:-5% 0;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:30%;
	top:44%;
	left:0;
}
#slide3 .infographicElement.Mountain3{
	-webkit-animation-name: mount3;
	-webkit-animation-duration: 150s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: mount3;
	animation-duration:150s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.active .infographicElement.Mountain3, .active .infographicElement.Mountain3{
	animation-play-state: running;
}
.infographicElement.Buildings{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Buildings@2x.png);
	background-position:-1001% 0;
	background-position:95% 0;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:24%;
	top:39%;
	left:0;
}
#slide3 .infographicElement.Buildings{
	-webkit-animation-name: buildings;
	-webkit-animation-duration: 300s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: buildings;
	animation-duration:300s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.active .infographicElement.Buildings, .active .infographicElement.Buildings{
	animation-play-state: running;
}
.infographicElement.Building{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Building@2x.png);
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
	width: 64%;
	height: 49%;
	top: 17%;
	left: 18%;
	top:63%;
	height:0;
}
.active .infographicElement.Mountain1, .active .infographicElement.Mountain2, .active .infographicElement.Mountain3, .active .infographicElement.Buildings{
	animation-play-state: running;
}
#slide11.active .infographicElement.Building{
	animation-play-state: running;
	
	-webkit-animation-name: building;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-delay:2s;
	animation-name: building;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-delay:2s;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-play-state: running;
}
#slide14 .infographicElement.Building{
	top: 17%;
	height: 48%;
}
.infographicElement.Trees{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Trees1@2x.png);
	background-position:-1197% 0;
	background-position:80% 0;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:21%;
	top:54%;
	left:0;
}
#slide3 .infographicElement.Trees{	
	-webkit-animation-name: trees;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: trees;
	animation-duration:60s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.active .infographicElement.Trees, .active .infographicElement.Trees{
	animation-play-state: running;
}
.active .infographicElement.Trees{
	-webkit-animation-name: part1Out;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: part1Out;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	animation-fill-mode: forwards;
	
	animation-play-state: running;
}
.infographicElement.Tree2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Trees2@2x.png);
	background-position:-1197% 0;
	background-position:80% 0;
	background-position:left;
	background-size:cover;
	background-repeat:no-repeat;
	width: 160%;
	height: 21%;
	top: 38%;
	left: -37%;
}
.active .infographicElement.Tree2{
	animation-play-state: running;
}
.infographicElement.Tree3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Tree3@2x.png);
	background-position:top;
	background-size:cover;
	background-repeat:no-repeat;
	width: 4.25%;
	height: 8%;
	top: 33.25%;
	left: 76%;
	
	-webkit-animation-name: tree3;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-delay:0;
	animation-name: tree3;
	animation-duration:1.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-delay:0;
	animation-play-state: paused;
}
.active .infographicElement.Tree3{
	animation-play-state: running;
}
.infographicElement.Trees4{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Trees4@2x.png);
	background-position:-1197% 0;
	background-position:80% 0;
	background-position:left;
	background-size:cover;
	background-repeat:no-repeat;
	width: 120%;
	height: 18%;
	top: 38%;
	left: -11%;
}
#slide11 .infographicElement.Trees4{
	height:0;
}
#slide11.active .infographicElement.Trees4{
	height: 18%;
	
	-webkit-animation-name: trees4;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-delay:0;
	animation-name: trees4;
	animation-duration:1.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-delay:0;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
#slide14 .infographicElement.Trees4{
	top: 55%;
}
.infographicElement.Signs{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Signs@2x.png);
	width:16%;
	height:8%;
	top:59%;
	left:72.5%;
}
.active .infographicElement.Signs{
	left:72.5%;
}
.active .infographicElement.Signs{
	left:-72.5%;
	-webkit-animation-name: sign;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: sign;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-play-state: running;
}
.infographicElement.Road, .infographicElement.Road0{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Road@2x.png);
	background-position:0% 0;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:12%;
	top:70.5%;
	left:0;
	
	-webkit-animation-name: road;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: road;
	animation-duration:10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}
.infographicElement.Road, .infographicElement.Road0b{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Road@2x.png);
	background-position:0% 0;
	background-size:crop;
	background-repeat:repeat;
	width:100%;
	height:12%;
	top:70.5%;
	left:0;
	
	-webkit-animation-name: road;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: road;
	animation-duration:10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

.infographicElement.WhiteRoad{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/WhiteRoad@2x.png);
	background-position:center;
	background-size: contain;
	background-repeat:repeat-y;
	width:33%;
	height:100%;
	top:0%;
	left:0%;
}
.active #part1{
	-webkit-animation-name: part1Out;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: part1Out;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	animation-fill-mode: forwards;
	
	animation-play-state: running;
}
.active #part3{
	-webkit-animation-name: part1Out;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: part1Out;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	animation-fill-mode: forwards;
	animation-direction: reverse;
	animation-play-state: running;
}

.active #part3{
	-webkit-animation-name: part1Out;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: part1Out;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: paused;
	animation-fill-mode: forwards;
	
	animation-play-state: running;
}
.infographicElement.Road2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Road2@2x.png);
	background-position:0% 0;
	background-size:cover;
	background-repeat: repeat-x;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}
/*.active .infographicElement.Road2{
	left: 100%;
	-webkit-animation-name: road2;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	animation-name: road2;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-play-state: paused;
}*/
.active .infographicElement.Road, .active .infographicElement.Road{
	animation-play-state: running;
}


.BadRoad{
	display:block;
	position:relative;
	align-self: flex-end;
	overflow:hidden;
}
.GoodRoad{
	display:block;
	position:relative;
	align-self: flex-end;
	overflow:hidden;
}

.infographicElement.Road3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/RoadWide2@2x.png);
	background-position:0% 0;
	background-size:contain;
	background-repeat:repeat-x;
	width: 298%;
	height: 42.6%;
	top: auto;
	bottom: 0px;
	left: -7%;
}

.GoodRoad .infographicElement.Road3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/RoadHalf@2x.png);
	background-position:bottom;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: auto;
	bottom:0;
	left: 0;
}

.infographicElement.DahsedLaneWrapper{
	width: 23%;
	height: 17%;
	top: 41.25%;
	left: 13%;
	overflow:hidden;
}

.infographicElement.DahsedLane{
	background-image: url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/DahsedLane@2x.png);
	background-position: 0% 0%;
	background-size: 100%;
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	
	-webkit-animation-name: dashedlane;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: dashedlane;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: running;
}
.infographicElement.RoadForward{
	background-image: url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/RoadForward@2x.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 18%;
	top: 41%;
	left: 0;
}
.FinalCity{
	background-image: url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/FinalCity@2x.png);
	background-position: bottom;
	background-size: contain;
	background-repeat: no-repeat;
}
	
/*===== people and cars =====*/
@keyframes car1 {
  0%   {background-position:-40% 0% ;}
  100% {background-position:250% 0% ;}
}
@keyframes car2 {
  0%   {background-position:-100% 0% ;}
  100% {background-position:220% 0% ;}
}
@keyframes bike {
  0%   {background-position:-100% 0% ;}
  100% {background-position:220% 0% ;}
}
@keyframes bike0 {
  0%   {left: -10% ;}
  100% {left: 110% ;}
}
@keyframes bikes {
  0%   {background-position:200% 0% ;}
  100% {background-position:-100% 0% ;}
}

@keyframes cars1 {
  0%   {transform:translateX( 100vw );}
  100% {transform:translateX( -700vw) ;}
}
@keyframes cars2 {
  0%   {transform:translateX( 100vw) ;}
  100% {transform:translateX( -600vw) ;}
}
@keyframes cars3 {
  0%   {transform:translateX( -730vw) ;}
  100% {transform:translateX( 100vw) ;}
}
@keyframes cars4 {
  0%   {transform:translateX( -660vw) ;}
  100% {transform:translateX( 100vw) ;}
}

@keyframes cartop0 {
  0%   {top: 115% ;}
  100% {top: -50% ;}
}
@keyframes cartop1 {
  0%   {top: 101% ;}
  100% {top: -10% ;}
}
@keyframes cartop2 {
  0%   {top: 62%; left: 101%; transform: rotate(19deg); }
  20%   {top: 54%; transform: rotate(19deg); }
  31%   {top: 50%; }
  40%   {top: 48%; transform: rotate(0deg); }
  66%   {top: 48%; transform: rotate(0deg);}
  70%   {transform: rotate(-10deg);}
  78%   {top: 51%; transform: rotate(-10deg);}
  82%   {transform: rotate(19deg);}
  100%   {top: 45%; left: -12%; transform: rotate(19deg); }
}
@keyframes tower1 {
  0%   {opacity: 0 ;}
  25% {opacity: 1 ;}
  100% {opacity: 0 ;}
}
@keyframes tower2 {
  0%   {opacity: 0 ;}
  25%   {opacity: 0 ;}
  50% {opacity: 1 ;}
  100% {opacity: 0 ;}
}
@keyframes tower3 {
  0%   {opacity: 0 ;}
  50%   {opacity: 0 ;}
  75% {opacity: 1 ;}
  100% {opacity: 0 ;}
}

.infographicElement.Bike{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Bike@2x.png);
	background-size: contain;
	background-position:-50% 0% ;
	width:72%;
	height:9.4%;
	top:62%;
	left:35%;
}
#slide5.active .infographicElement.Bike{
	-webkit-animation-name: car1;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-delay: 6s;
	animation-name: car1;
	animation-duration: 10s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-delay: 1s;
}
.infographicElement.Bike0{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Bike@2x.png);
	background-size: contain;
	background-position:bottom;
	width:6%;
	height:9.4%;
	bottom:-0.1%;
	left:35%;
	-webkit-animation-name: bike0;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: bike0;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.infographicElement.Bikes{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Bikes@2x.png);
	background-size: contain;
	background-position:-50% 0% ;
	width: 100%;
	height: 7%;
	top: 59%;
	left: 0;
	-webkit-animation-name: bikes;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: bikes;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.GoodRoad .infographicElement.Bikes{
	width: 100%;
	height: 18%;
	top: 25%;
	left: 0;
}

.infographicElement.Car1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Car1@2x.png);
	background-size: contain;
	background-position:-50% 0% ;
	width:100%;
	height:9%;
	top:71%;
	left:0;
	-webkit-animation-name: car1;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-delay: 2s;
	animation-name: car1;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}
.infographicElement.Car2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Car2@2x.png);
	background-size: contain;
	background-position:-30% 0% ;
	width: 100%;
	height: 9%;
	top: 71%;
	left: 0;
	-webkit-animation-name: car2;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: car2;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.infographicElement.Cars1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Cars1@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 700vw;
	height: 22.5%;
	top:0%;
	left:0%;
	-webkit-animation-name: cars1;
	-webkit-animation-duration: 80s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars1;
	animation-duration: 80s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.infographicElement.Cars2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Cars2@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 580vw;
	height: 22.5%;
	top:24%;
	left:0%;
	-webkit-animation-name: cars2;
	-webkit-animation-duration: 55s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars2;
	animation-duration: 55s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.infographicElement.Cars3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Cars3@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 725vw;
	height: 22.5%;
	top:48%;
	left:0%;
	-webkit-animation-name: cars3;
	-webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars3;
	animation-duration: 50s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.infographicElement.Cars4{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Cars4@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 650vw;
	height: 22.5%;
	top:72%;
	left:0%;
	-webkit-animation-name: cars4;
	-webkit-animation-duration: 70s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars4;
	animation-duration: 70s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.infographicElement.CarTop0{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/CarTop0@2x.png);
	background-size: contain;
	background-position: 0% 0%;
	width: 15%;
	height: 15%;
	top: 0;
	left: 18%;
	-webkit-animation-name: cartop0;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cartop0;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}


.active #part2a{
	-webkit-animation-name: part1Out;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: part1Out;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.active #part2b{
	-webkit-animation-name: part1Out;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	animation-name: part1Out;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-direction: reverse;
	animation-fill-mode: forwards;
}


.infographicElement.AutonomousCars1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousCars1@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 700vw;
	height: 8.5%;
	top: 64%;
	left:0%;
	-webkit-animation-name: cars1;
	-webkit-animation-duration: 80s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars1;
	animation-duration: 80s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.GoodRoad .infographicElement.AutonomousCars1{
	width: 600vw;
	height: 28%;
	top: 40.5%;
	left: 0%;
}

.infographicElement.AutonomousCars2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousCars2@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 660vw;
	height: 5.5%;
	top: 84%;
	left:0%;
	-webkit-animation-name: cars4;
	-webkit-animation-duration: 80s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars4;
	animation-duration: 80s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.infographicElement.AutonomousBus2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousBus2@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 600vw;
	height: 8.5%;
	top: 69.5%;
	left:0%;
	-webkit-animation-name: cars2;
	-webkit-animation-duration: 70s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars2;
	animation-duration: 70s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.infographicElement.AutonomousBus3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/AutonomousBus3@2x.png);
	background-size: contain;
	background-repeat:space;
	background-position:0% 0% ;
	width: 720vw;
	height: 8.5%;
	top:75.5%;
	left:0%;
	-webkit-animation-name: cars3;
	-webkit-animation-duration: 70s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: cars3;
	animation-duration: 70s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.infographicElement.BusInner{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/BusInner@2x.png);
	background-size: contain;
	background-repeat:repeat;
	background-position:0% 0% ;
	width: 100%;
	height: 100%;
	top:0%;
	left:0%;
}
.active .infographicElement.BusInner{	
	-webkit-animation-name: BusInner;
	-webkit-animation-duration: 70s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: BusInner;
	animation-duration: 70s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

.GoodRoad .infographicElement.AutonomousBus2{
	width: 600vw;
	height: 28%;
	top: 68%;
	left: 0%;

}

.infographicElement.Map{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Map@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:0% 0% ;

	width: 49%;
	height: 32%;
	top: 56.5%;
	left: 25%;
	
	width: 156%;
	height: 104%;
	top: -1%;
	left: -32%;
}

.infographicElement.CellTower{
	width: 15%;
	height: 14%;
	top: 33%;
	left: 71%;
}
.infographicElement.CellTower2{
	width: 15vw;
	height: 14vw;
	bottom: 0%;
	left: 71%;
}


.infographicElement.Tower0{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/Tower1@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
.infographicElement.Tower1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/Tower2@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-animation-name: tower1;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	animation-name: tower1;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 0s;
}
.infographicElement.Tower2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/Tower3@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-animation-name: tower2;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	animation-name: tower2;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay:0s;
}
.infographicElement.Tower3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility7/m/Tower4@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-animation-name: tower3;
	-webkit-animation-duration: 3;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	animation-name: tower3;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay:0s;
}

.infographicElement.CarTop1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/CarTop1@2x.png);
	background-size: cover;
	background-position:0% 0% ;
	width:6%;
	height:9.4%;
	top: 101%;
	left: 37%;
	-webkit-animation-name: cartop1;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2s;
	animation-name: cartop1;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 2s;
}
.infographicElement.CarTop2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/CarTop2@2x.png);
	background-size: cover;
	background-position:0% 0% ;
	width: 11%;
	height: 5.7%;
	top: 62%;
	left: 101%;
	-webkit-animation-name: cartop2;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 6s;
	animation-name: cartop2;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 6s;
}




.infographicElement.Person1{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Person1@2x.png);
	width:3.5%;
	height:9%;
	top:61.5%;
	left:17.5%;
	background-size: contain;
}
.infographicElement.Person2{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Person2@2x.png);
	width:3.5%;
	height:9%;
	top:61.5%;
	left:22.5%;
	background-size: contain;
}
.infographicElement.Person3{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Person3@2x.png);
	width:3.5%;
	height:7.5%;
	top:63%;
	left:27%;
	background-size: contain;
}

@keyframes person1 {
  0%   {left:20%;}
  100% {left:40%;}
}
@keyframes person2 {
  0%   {left:20%;}
  100% {left:57%;}
}
@keyframes person3 {
  0%   {left:20%;}
  100% {left:73%;}
}

@keyframes person1B {
  0%   {left:40%;}
  100% {left:20%;}
}
@keyframes people {
  0%   {left: -40% ;}
  100% {left: 13% ;}
}
@keyframes arm {
  0%   {transform: rotate(0deg);}
  50%   {transform: rotate(-15deg);}
  100% {transform: rotate(0deg);}
}
.infographicElement.Person1Bus{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Person1@2x.png);
	width: 12%;
	height: 66%;
	top: 18%;
	left: 40%;
	background-size: contain;
}
#slide2.active .infographicElement.Person1Bus{
	left: 20%;
	-webkit-animation-name: person1;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 6s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	animation-name: person1;
	animation-duration:1s;
	animation-iteration-count: 1;
	animation-delay: 6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
#slide5.active .infographicElement.Person1Bus{
	-webkit-animation-name: person1B;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: ease-in;
	animation-name: person1B;
	animation-duration:1s;
	animation-iteration-count: 1;
	animation-delay: 0s;
	animation-timing-function: ease-in;
}
.infographicElement.Person2Bus, .infographicElement.Person2Busb{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Person2@2x.png);
	width: 12%;
	height: 66%;
	top: 19%;
	left: 57%;
	background-size: contain;
}
#slide2.active .infographicElement.Person2Bus{
	left: 20%;
	-webkit-animation-name: person2;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 5s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	animation-name: person2;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-delay: 5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
.infographicElement.Person3Bus, .infographicElement.Person3Busb{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Person3@2x.png);
	width: 13%;
	height: 58%;
	top: 25%;
	left: 73%;
	background-size: contain;
}
#slide2.active .infographicElement.Person3Bus{	
	left: 20%;
	-webkit-animation-name: person3;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 4s;
	-webkit-animation-timing-function: ease-out;
	animation-name: person3;
	animation-duration:3s;
	animation-iteration-count: 1;
	animation-delay: 4s;
	animation-timing-function: ease-out;
}

.infographicElement.People{	
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/People@2x.png);
	background-size:contain;
	width: 41%;
	height: 9%;
	top: 50%;
	left: 20%;
}

.GoodRoad .infographicElement.People{	
	width: 80%;
	height: 20%;
	top: 3%;
	left: 20%;
}

.active .infographicElement.Person2Busb{
	left: 57%;
	-webkit-animation-name: person2;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 3s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-fill-mode: forwards;
	animation-name: person2;
	animation-duration:2s;
	animation-iteration-count: 1;
	animation-delay: 3s;
	animation-direction: reverse;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}
.active .infographicElement.Person3Busb{
	left: 73%;
	-webkit-animation-name: person3;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 4s;
	-webkit-animation-timing-function: ease-in;
	animation-name: person3;
	animation-duration:3s;
	animation-iteration-count: 1;
	animation-delay: 4s;
	animation-direction: reverse;
	animation-timing-function: ease-in;
}

.infographicElement.Arm{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Arm@2x.png);
	width: 4%;
	height: 6%;
	top: 61.75%;
	left: 21.5%;
	background-size: contain;
	-webkit-animation-name: arm;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	animation-name: arm;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes ruler {
  0%   {background-position:40% 0% ;}
  100% {background-position:52% 0% ;}
}
@keyframes rulerB {
  0%   {transform:translateY(79%px);}
  100% {transform:translateY(82%);}
}
@keyframes rulerC {
  0%   {transform:translateY(82%);}
  100% {transform:translateY(79%);}
}
.infographicElement.Ruler{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Ruler@2x.png);
	width:100%;
	height:3%;
	top:82%;
	left:0;
	background-size: contain;
	background-repeat:repeat;
	background-position:40% 0% ;
	
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: ruler;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: running;
}
.active .infographicElement.Ruler{
	animation-play-state: running;
}






.paused{
	-webkit-animation-play-state: paused !important;
	animation-play-state: paused !important;
}



.adslot{
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: stretch;
	width:100vw;
	/*max-width: 178vh;*/
	margin:auto;
	text-align:center;
	padding:2em 0;
	background:#11296c;
	min-height:70px;
}

.c-ad__message {
    font-family: Helvetica,Arial,Verdana,sans-serif;
    font-size: .6875rem;
    line-height: .75rem;
    letter-spacing: .0625rem;
    text-transform: uppercase;
    margin: 0 0 .625rem 0;
    padding: 0 .625rem;
    text-align: center;
    color: #fff;
}



.jumplink{
	display:block;
	position:fixed;
	bottom:0px;
	right:50px;
	background-color:#11296c;
	color:#fff;
	border: 1px solid #204792;
	border-bottom: none;
	border-radius:1px;
	text-decoration:none;
	padding: 1em;
	font-size: .7em;
	transition: bottom 2s;
	z-index: 9999999999;
}
.jumplink.hidden{
	bottom:-100%;
}

#ending{
	height:auto;
	min-height:auto;
}
.jumplink:hover{
	color:#fff;
}




/*===== unused =====*/

.infographicElement.Moon{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Moon@2x.png);
}
.infographicElement.Stars{
	background-image:url(https://sec.theglobeandmail.com/adv/partners/TGAM_Advertising/2019/_specialreports/stantec/smartmobility/m/Stars@2x.png);
}

/*89/100*/







/*=====*/

/*-- footer --*/

#advertorialWrapper{
  /* width:100vw; */
    background-color: #fff;
    border-style: solid;
    border-color: #eeedea;
    border-width: 1px 0 0 0;
    font-family: 'GMsanC-Regular','GMSansC','Helvetica Neue',Helvetica,Arial,sans-serif;
}

#advertorialWrapper .credits {
    color: #636c72;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    padding: 2rem 0.25rem;
    margin-bottom: 0px;
}

#advertorialFooter{
  position:relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    justify-content: center;
    margin:auto;
    width:90vw;
    max-width:768px;
}

#advWrapper{
  position:relative;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: .625rem 0 .625rem 0;
  width:90vw;
  max-width:768px;
  text-align:left;
}

.advCard{
  display:flex;
  flex-wrap: nowrap;
  /*margin:.625rem;
  width:calc(50% - 1.25rem);*/
  width: 100%;
  text-decoration:none;
  color: #191919;
  margin-bottom: 1.25rem;
  align-items:flex-start;
}

.advCard:hover{
  text-decoration:underline;
}

.advCard img{
  width:50%;
  flex-basis: 50%;
  padding-right: 1.25rem;
}

.advCard .text{
  display:block;
  flex-basis: calc(50% - 2.5rem);
}

.advCard .headline{
  font-size:1.6em;;
}

.advCard .sponsor{
  color: #636c72;
  text-transform: uppercase;
  font-weight: 400;
  font-size:12px;
  text-align: left;
}

#editorialWrapper{
   /* width:100vw; */
    background-color: #eeedea;
    border-style: solid;
    border-color: #eeedea;
    border-width: 1px 0 1px 0;
}

#editorialFooter{
  position:relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width:90vw;
    max-width:1024px;
    margin:auto;
}

.contentFrom{
    display:block;
    position:relative;
    font-family: "GMsanC-Bold",Helvetica,Arial,Verdana,sans-serif;
    font-weight: normal;
    font-style: normal;
    margin-bottom: 0;
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    color: #191919;
    letter-spacing: .0625rem;
    padding: .625rem 0;
    font-size: .75rem;
    line-height: 1;
    color: #595959;
    width:100%;
    flex:100%;
}

#editWrapper{
  display:flex;
  width:90vw;
  max-width:1024px;
  padding-bottom: 1.25rem;
}

.editCard{
    width:25%;
    overflow:hidden;
    padding: .625rem;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: 1.25rem;
    font-family: "Pratt-Bold",Georgia,Palatino,"Book Antiqua","Times New Roman",serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.1875rem;
    line-height: 1.15789;
    color: #191919;
    text-decoration:none;
    background: #fff;
    border-width:0;
    border-style:solid;
}

.editCard:last-child{
  margin-right: 0rem;
}

.editCard:hover{
  text-decoration:underline;
}

.o-card__col{
  -webkit-box-flex: 100%;
  flex: 100%;
  -webkit-box-ordinal-group: 2;
  order: 1;
}

.o-card__col:last-of-type{
  -webkit-box-ordinal-group: 3;
  order: 2;
  -webkit-box-flex: 100%;
  flex: 100%;
  padding: .625rem 0;
  margin-right: 0;
}

.editCard img{
  width:100%;
  height:auto;
}

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

  #advWrapper{
    flex-wrap: wrap;
  }

  .advCard{
    flex-wrap: wrap;
    width:calc(50% - 2.5rem);
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .advCard img{
    width:100%;
    flex-basis:100%;
    padding-right:0;
    height:auto;
  }

  .advCard .text{
    flex-basis:100%;
  }

  #editWrapper {
    flex-wrap: wrap;
  }

  .editCard{
    width:calc(50% - 3.75rem);
    border:0;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-bottom: 1.25rem;
  }

}

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

	#advertorialWrapper .credits {
	max-width:220px;
	margin:0px auto;
	}
	
  .advCard{
    width:calc(100% - 2.5rem);
  }

  .editCard{
    width:100%;
  }
}

footer.gi-footer {
    background-color: #fafafa;
    text-align:center;
}

footer.gi-footer .gi-footer__legal {
    padding: 15px 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    border-top: 1px solid #eee
}

footer.gi-footer .gi-footer__legal a {
    color: #444;
    text-decoration: none
}

footer.gi-footer .gi-footer__legal a:hover {
    color: #CE2A23
}

footer.gi-footer .gi-footer__legal ul {
    margin: 0 auto;
    padding: 0
}

footer.gi-footer .gi-footer__legal li {
    font-family: PrattBold, Georgia, "Times New Roman", serif;
    display: inline-block;
    list-style: none;
    padding: 0 6px
}

.gi-podcast-info,
footer.gi-footer .gi-footer__copyright {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

footer.gi-footer .gi-footer__copyright {
    padding: 14px 0;
    color: #555;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    border-top: 1px solid #eee
}

footer.gi-footer .gi-footer__copyright address {
    margin: 0;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased
}

footer.gi-footer .gi-footer__copyright abbr {
    border: none
}
abbr{border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;}
/*=====*/
/*-- parallax styling --*/

.container-fluid.parallax {
 background-size: cover !important;
width: 100%;
  }

  @media (max-width: 650px) {
.parallax {
  min-height: 250px !important;
  width: 100% !important;}
}

.gmicon-maple_leaf {
    color: #191919;
    text-align: center;
    padding:.625em 0;
    border-style: solid;
    border-color: #eeedea;
    border-width: 0 0 1px 0;
}
.gmicon-maple_leaf::before {
    content: "\6c";
}


footer.gi-footer.dark {
    background-color:#333;
}

footer.dark .gmicon-maple_leaf, footer.dark .gi-footer__legal a, footer.dark .gi-footer__copyright{
    color: #fff;
}

footer.dark .gi-footer__legal, footer.dark .gi-footer__copyright{
  border-top: 1px solid #444;
}

footer.dark .gi-footer__legal a:hover{
  color:#fff;
  text-decoration:underline;
}


















#advWrapper{
	font-family: 'Roboto',sans-serif;
	font-weight:bold;
}
.advCard{
	color:#11296c;
}
.contentFrom{
	margin-top:2em;
}