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



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

div#audience .container {
	padding: 30px 0;
	text-align: center;
}

div.tourpages-list {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}
div#tour-message,
div.tour-message {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #c01327;
	color: #fff;
}
#content div.tour-message { margin: 0 0 15px 0; }
	div#tour-message .container,
	#content div.tour-message .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		column-gap: 2%;
		row-gap: 1.25rem;
		flex-wrap: wrap;
		padding: 30px 0;
	}
		div#tour-message .container div.presenter,
		div.tour-message .container div.presenter {
			display: block;
			position: relative;
			flex-grow: 1;
			max-width: 30%;
			padding: 0;
			margin: 0;
		}
			div#tour-message .container div.presenter img,
			div.tour-message .container div.presenter img {
				display: block;
				position: relative;
				width: 100%;
				max-width: 100%;
				margin: 0 0 1rem 0;
			}
			div#tour-message .container div.presenter a,
			div.tour-message .container div.presenter a {
				font-weight: 500;
				color: #fff;
			}
		div#tour-message .container div.message,
		div.tour-message .container div.message {
			display: block;
			position: relative;
			flex-grow: 2;
			max-width: 70%;
			padding: 0 30px;
			box-shadow: none;
			background: none;
			color: #fff;
		}
			div#tour-message .container div.message h2.intro-title,
			div.tour-message .container div.message h2.intro-title {
				margin: 0 0 1.25rem 0;
				font-weight: 400;
				line-height: 1.1;
				color: #fff;
			}
			div#tour-message .container div.message p,
			div.tour-message .container div.message p {
				font-size: 1.25rem;
				line-height: 1.5;
				margin: 0 0 1.25rem 0;
			}
			div.tour-message .container div.message > p {
				margin: 0;
			}

div#tour-videos {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}
	div#tour-videos .container {
		display: block;
		position: relative;
		padding: 30px 0;
	}
		div#tour-videos div.tour-video {
			display: flex;
			position: relative;
			flex-wrap: nowrap;
			width: 100%;
			padding: 0;
			margin: 0 0 15px 0;
		}
			div#tour-videos div.tour-video iframe {
				display: block;
				position: relative;
				flex-grow: 1;
				flex-basis: 50%;
				max-width: 50%;
				max-height: 285px;
			}
			div#tour-videos div.tour-video div.video-desc {
				display: block;
				position: relative;
				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 {
					font-size: 16px;
					line-height: 1.5;
				}

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

div#related-links {
	display: block;
	position: relative;
	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;
	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/v9/jumplink-vtour-uniquevenues.jpg"); }
			div#jumpto-links ul li:nth-child(3n+2) { background-image: url("../../../img/v9/jumplink-vtour-meetingsmagazine.jpg"); }
			div#jumpto-links ul li:nth-child(3n+3) { background-image: url("../../../img/v9/jumplink-vtour-meetingservice.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: flex;
					position: absolute;
					flex-direction: column;
					justify-content: center;
					align-content: center;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					padding: 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;
	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-width: 100%; max-height: none; }
	
	div#tour-message .container,
	#content div.tour-message .container { align-items: flex-start; }
	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 520 (devices and browsers) */
@media only screen and (max-width: 520px) {
	div.banner-area.home { min-height: 50px; }
	div#audience img { max-width: 80%; }
	#content div.tour-message .container,
	div#tour-message .container { flex-wrap: wrap; align-items: flex-start; }
	div#tour-message .container div.presenter,
	div.tour-message .container div.presenter { order: 2; flex-basis: 50%; max-width: 50%; }
	div#tour-message .container div.message,
	div.tour-message .container div.message { order: 1; flex-basis: 100%; max-width: 100%; padding: 0; }
	div#tour-message .container div.message p,
	div.tour-message .container div.message p { font-size: 1rem; }
	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; }
}