/* Tourism Winnipeg - version 8 - virtual tours - Module and Typography Styles */
header h1 a { background-image: url("../../../img/v9/logo-wpg-no-tagline.svg"); }



h2 {
	margin-bottom: 25px;
	font-weight: 100;
	color: #000;
}
h2 strong {
	font-weight: 600;
	color: #c01327;
}




/* !banner area styles */
div.banner-area {
	clear: both;
	z-index: 0;
	min-height: 400px;
	margin: 0;
	background: none;
}
	div.banner-area.home {
		display: block;
		position: relative;
		width: 100%;
		min-height: 250px;
		padding: 0;
		margin: 0;
		background: #333;
	}
		div.banner-area.home img#banner-cover {
			display: block;
			position: relative;
			z-index: 0;
			width: 100%;
			height: auto;
			padding: 0;
			margin: 0;
			opacity: 0;
			animation: coverfade 2.5s 1;
		}
		@keyframes coverfade {
			0% {opacity: 1;}
			80% {opacity: 1;}
			100% {opacity: 0; display: none;}
		}
		div.banner-area.home iframe#videoloop {
			display: block;
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			max-width: none;
			height: 100%;
			max-height: none;
		}
		div.banner-area.home > .site-title {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			max-width: 100%;
			padding: 0 2rem;
			margin: 0;
			background: rgba(255,255,255,0.7);
			background:
				linear-gradient(to right, rgba(255,255,255,0.7) 35%, rgba(255,255,255,0) 50%);
			;
		}
			header .site-title a {
				display: block;
				position: relative;
				width: 30%;
				padding: 1rem 2rem;
			}
				header .site-title a img {
					display: block;
					width: 100%;
				}
		header h1.tourpage-title {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			width: 100%;
			padding: 0.8rem 1rem 1.2rem 1rem;
			margin: 0;
			text-align: center;
			line-height: 1;
			background: rgba(0,0,0,0.6);
			color: #fff;
		}

div#audience .container {
	padding: 30px 0;
	text-align: left;
}
	div#audience h3 {
		margin: 0 0 2rem 0;
	}
	ul.audience {
		display: flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 2%;
		row-gap: 1rem;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
	}
		ul.audience li {
			display: block;
			position: relative;
			flex: 0 0 18.4%;
			max-width: 18.4%;
		}

div.tourpages-list {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}
div#tour-presenters,
div.tour-presenters {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #c01327;
	color: #fff;
}
#content div.tour-presenters { margin: 0 0 15px 0; }
	div#tour-presenters .container,
	#content div.tour-presenters .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		column-gap: 2%;
		row-gap: 1.25rem;
		padding: 30px 0;
	}
		div#tour-presenters .container div.presenter,
		div.tour-presenters .container div.presenter {
			display: block;
			position: relative;
			flex: 0 0 32%;
			max-width: 32%;
			padding: 0;
			margin: 0;
		}
			div#tour-presenters .container div.presenter > img,
			div.tour-presenters .container div.presenter > img {
				display: block;
				position: relative;
				width: 100%;
				max-width: 100%;
				margin: 0 0 1rem 0;
			}
			div#tour-presenters .container div.presenter a,
			div.tour-presenters .container div.presenter a {
				font-weight: 500;
				color: #fff;
			}
		div#tour-presenters .container.presenter-count-1 {
			display: block;
			max-width:
		}
		div#tour-presenters .container.presenter-count-1 div.presenter {
			display: flex;
			position: relative;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			column-gap: 2%;
			row-gap: 1.25rem;
			flex: 0 0 100%;
			max-width: 100%;
			padding: 0;
			margin: 0;
		}
			div#tour-presenters .container.presenter-count-1 div.presenter > img {
				display: block;
				position: relative;
				flex: 0 0 30%;
				max-width: 30%;
			}
			div#tour-presenters .container.presenter-count-1 div.presenter > p {
				display: block;
				position: relative;
				flex: 0 0 68%;
				max-width: 68%;
			}
div#tour-intro {

}
	div#tour-intro .container {
		display: block;
		position: relative;
		width: 100%;
		max-width: 1000px;
		padding: 2rem 0;
		margin: 0 auto;
	}

div#tour-videos,
div#tour-resources {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}
	div#tour-videos .container,
	div#tour-resources .container {
		display: block;
		position: relative;
		padding: 30px 0;
	}
		div#tour-videos div.tour-video,
		div#tour-resources div.tour-resource {
			display: flex;
			position: relative;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			padding: 0;
			margin: 0 0 1rem 0;
		}
			div#tour-videos div.tour-video a,
			div#tour-videos div.tour-video iframe,
			div#tour-videos div.tour-video > img,
			div#tour-resources div.tour-resource a,
			div#tour-resources div.tour-resource iframe,
			div#tour-resources div.tour-resource > img {
				display: block;
				position: relative;
				flex-grow: 1;
				flex-basis: 50%;
				max-width: 50%;
				max-height: 285px;
			}
			div#tour-resources div.tour-resource > a span {
				display: flex;
				position: absolute;
				justify-content: center;
				align-items: center;
				top: 0;
				left: 0;
				right: 100%;
				bottom: 0;
				z-index: 1;
				padding: 0.5rem;
				font-size: 1.25rem;
				text-align: center;
				background: linear-gradient(rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.2));
				color: #fff;
				visibility: hidden;
				transition: all 0.2s ease;
			}
			div#tour-resources div.tour-resource > a:hover span {
				visibility: visible;
				right: 0;
			}
			div#tour-videos div.tour-video div.video-desc,
			div#tour-resources div.tour-resource div.resource-desc {
				display: block;
				position: relative;
				align-self: stretch;
				flex-grow: 1;
				flex-basis: 50%;
				max-width: 50%;
				padding: 15px 15px 15px 30px;
				background: #f3f4f4;
			}
				div#tour-videos div.tour-video div.video-desc p,
				div#tour-resources div.tour-resource div.resource-desc p {
					font-size: 16px;
					line-height: 1.5;
				}

div#tour-pitch {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}
	div#tour-pitch .container {
		display: block;
		position: relative;
		padding: 30px;
		margin: 0 auto;
		border-top: 1px solid #000;
	}
		div#tour-pitch .container p {
			font-size: 20px;
			line-height: 1.25;
		}

div#related-links {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}
	div#related-links .container {
		display: block;
		position: relative;
		padding: 30px 0;
		border-top: 1px solid #000;
	}
		div#related-links ul {
			display: flex;
			position: relative;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
		}
			div#related-links ul li {
				display: block;
				position: relative;
				flex-grow: 1;
				flex-basis: 32%;
				max-width: 32%;
				padding: 10px 0;
				margin: 0 0 15px 0;
				font-size: 22px;
				font-weight: 600;
			}

div#jumpto-links {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}
	div#jumpto-links .container {
		display: block;
		position: relative;
		padding: 30px 0;
		border-top: 1px solid #000;
	}
		div#jumpto-links ul {
			display: flex;
			position: relative;
			justify-content: space-between;
			flex-wrap: nowrap;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
		}
			div#jumpto-links ul li {
				display: block;
				position: relative;
				flex-grow: 1;
				flex-basis: 32%;
				max-width: 32%;
				height: 300px;
				padding: 0;
				margin: 0;
				font-size: 26px;
				font-weight: 600;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			div#jumpto-links ul li:nth-child(3n+1) { background-image: url("../../../img/fdi/jumplink-vtour-invest.jpg"); }
			div#jumpto-links ul li:nth-child(3n+2) { background-image: url("../../../img/fdi/jumplink-vtour-live.jpg"); }
			div#jumpto-links ul li:nth-child(3n+3) { background-image: url("../../../img/fdi/jumplink-vtour-sectors.jpg"); }
				div#jumpto-links ul li a {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					z-index: 1;
				}
				div#jumpto-links ul li span {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					padding: 34% 15px 0 15px;
					text-align: center;
					text-shadow: 1px 1px 1px #000;
					line-height: 1.25;
					background: rgba(0,0,0,0.6);
					color: #fff;
					transition: all 0.2s ease;
				}
				div#jumpto-links ul li:hover span {
					background: rgba(0,0,0,0.1);
				}

div#explore {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}
	div#explore .container {
		display: block;
		position: relative;
		padding: 30px 0 60px 0;
		text-align: center;
	}
		div#explore .container h2 {
			margin-bottom: 0;
			font-size: 40px;
		}



/* !responsive styles */
/* Smaller than 1200 (devices and browsers) */
@media only screen and (max-width: 1200px) {

}

/* Smaller than 1024 (devices and browsers) */
@media only screen and (max-width: 1024px) {
	header .container { border: none; }
	#content div.tour-message .container,
	div#tour-message .container,
	div#tour-videos .container,
	div#related-links .container,
	div#jumpto-links .container { padding: 30px 15px; }
	div#tour-message .container div.message { padding: 0 30px; }
	div#tour-pitch .container div.message { padding: 0 15px; }
}

/* Smaller than 768 (devices and browsers) */
@media only screen and (max-width: 768px) {
	img { width: auto; max-width: 100%; }
	div.banner-area.home iframe#videoloop { max-height: none; }

	div#tour-videos div.tour-video { display: block; }
	div#tour-videos div.tour-video iframe { max-width: 100%; width: 100%; min-height: 420px; max-height: none; }
	div#tour-videos div.tour-video div.video-desc { max-width: 100%; width: 100%; }
	div#jumpto-links ul li { height: 240px; }
}

/* Smaller than 670 (devices and browsers) */
@media only screen and (max-width: 670px) {
	div#jumpto-links ul li { height: 220px; }
}

/* Smaller than 450 (devices and browsers) */
@media only screen and (max-width: 450px) {
	div.banner-area.home { min-height: 50px; }
	div#audience img { max-width: 50%; }
	#content div.tour-message .container,
	div#tour-message .container { flex-wrap: wrap; }
	div#tour-message .container div.presenter,
	div.tour-message .container div.presenter { order: 2; max-width: 50% }
	div#tour-message .container div.message,
	div.tour-message .container div.message { order: 1; max-width: 100%; padding: 0; }
	div#tour-videos div.tour-video iframe { min-height: 200px; max-height: 220px; }
	div#related-links ul { display: block; }
	div#related-links ul li { max-width: 100%; text-align: center; }
	div#jumpto-links ul { display: block; }
	div#jumpto-links ul li { max-width: 100%; height: 300px; margin: 0 0 15px 0; }
	div#explore .container h2 { font-size: 30px; }
}

/* Smaller than 400 (devices and browsers) */
@media only screen and (max-width: 450px) {
	div#tour-videos div.tour-video iframe { max-height: 200px; }
}