/* Misc setup - please remove, only for demonstration*/

.mt-20 {
	margin-top: 20px;
}
.mt-40 {
	margin-top: 40px;
}
.mt-60 {
	margin-top: 60px;
}
.mt-100 {
	margin-top: 100px;
}
.mb-100 {
	margin-bottom: 100px;
}
.p-20 {
	padding: 20px 0;
}
.p-60 {
	padding: 60px 0;
}
.p-150 {
	padding: 150px 0;
}
/** HOMEPAGE VIDEO CONTAINER ***/

/* General styles for video container section */
#homepage-video-container #video-row-decorator {
	background-color: #007fa3;
	max-width: 830px;
	margin: 0 auto;
	height: 8px;
	width: 100%;
}
#homepage-video-container .bcgov-video-div {
	 min-height: unset;
}
#homepage-video-container .bcgov-video-div {
	 background-size: cover;
	 background-position: center;
	 background-repeat: no-repeat;
	 position: relative;
	 min-height: 300px;
	 overflow: visible;
		max-width: 768px;
		margin: 0 auto;
}
@media all and (min-width: 1280px) {
	#homepage-video-container .bcgov-video-div {
		/* max-width: 80%; */
	}
}
@media all and (max-width: 768px) {
	#homepage-video-container .bcgov-video-div {
		max-width: 100%;
	}
}
#homepage-video-container .bcgov-video-title,
#homepage-video-container .bcgov-video-button {
	text-align: center;
	text-shadow: 0 0 3px #888;
}
#homepage-video-container .bcgov-video-title {
	font-size: 3.5vw;
}
#homepage-video-container .bcgov-video-title {
	color: white;
	font-size: 36px;
	text-transform: uppercase;
	margin-bottom: 30px;
}
#bcgov-button-container {
	position: absolute;
	width: auto;
	height: 100px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	margin-top: -90px;
	z-index: 900;
}
#homepage-video-container .bcgov-video-container {
	 position: relative;
	 line-height: 0;
}
#homepage-video-container .bcgov-video-container {
	 max-height: 100vh;
}
#homepage-video-container #bcgov-youtube-player {
	 position: absolute;
	 z-index: 1000;
	 display: none;
	 height: 100%;
	 width: 100%;
}
#homepage-video-container .bcgov-button-container-mobile {
	 margin-bottom: 20px;
}
#homepage-video-container .bcgov-button-container-mobile .bcgov-video-title-mobile {
	color: #00558C;
	margin: 20px 0;
}
#homepage-video-container .bcgov-button-container-mobile .btn {
	 background: none;
	 border-radius: 0;
	 border: 1px solid #00558C;
	 cursor: pointer;
	 padding: 0;
}
#homepage-video-container .bcgov-button-container-mobile a.bcgov-button-watch {
	color: #00558C;
	text-shadow: none;
	padding: 12px 15px;
	margin: 0;
	display: block;
}
#homepage-video-container .bcgov-button-container-mobile .btn:hover {
	background-color: #00558C;
}
#homepage-video-container .bcgov-button-container-mobile a.bcgov-button-watch:hover {
	color: #fff;
	text-decoration: none;
}
#homepage-video-container .bcgov-video-title,
#homepage-video-container .bcgov-video-button {
	 text-align: center;
	 text-shadow: 0 0 3px #888;
}
#homepage-video-container .btn-lg {
	 padding: 10px 16px;
	 font-size: 18px;
	 line-height: 1.3333333;
	 border-radius: 6px;
}
#homepage-video-container #bcgov-button-container .btn {
 background: none;
 border-radius: 0;
 border: 3px solid white;
}
#homepage-video-container .bcgov-video-button {
 text-align: center;
 text-shadow: 0 0 3px #888;
}



/** HOMEPAGE IMAGE CAROUSEL ***/
#image-carousel-section {
	padding-top: 10vh;
	box-sizing: border-box;
}
@media all and (max-width: 768px) {
	#image-carousel-section {
		padding-top: 50px;
	}
}
#image-carousel-section #image-row-decorator {
	background-color: #74d2e7;
	max-width: 400px;
	margin: 0 auto;
	height: 8px;
	width: 66%;
}
#image-carousel-section .image-carousel-row {
	position: relative;
	background-color: #ffffff;
}
#image-carousel-section .image-description-area {
	background-color: #e6f3f6;
	min-height: 320px;
	margin: 0 auto -10px;
	padding: 0 60px;
	box-sizing: content-box;
	max-width: 768px !important;
	text-align: left;
	box-sizing: content-box;
}
#image-carousel-section .image-description-area .flex-aligned-center {
	height: 310px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#image-carousel-section .image-description-headline,
#image-carousel-section .image-description-body {
	margin: 60px 0 0;
	text-align: left;
}
#image-carousel-section .image-description-headline {
	color: #74d2e7;
	font-size: 36px;
	font-weight: bold;
	padding: 0;
}
#image-carousel-section .image-description-headline span {
	color: #00558C;
	display: block;
}
#image-carousel-section .image-description-headline span.inline {
	display: inline;
}
#image-carousel-section .image-description-body {
	font-size: 20px;
	/* max-height: 120px;
	height: 120px; */
	overflow: visible;
}
#image-carousel-section #image-footer-area {
	background-color: #e6f3f6;
	min-height: 60px;
	margin: -2px auto 0;
	padding: 0 60px;
	box-sizing: content-box;
	max-width: 768px;
}
#image-carousel-section .image-description {
	display: none;
}
#image-carousel-section .slick-list{
	/* background-color: #e6f3f6; */
	overflow: hidden;
}
#image-carousel-section .slick-current{
	background-color: #e6f3f6;
	margin: 0;
	padding: 0 60px;
	position: relative;
}
#image-carousel-section .slick-slide:not(.slick-current) {
	background-color: #fff !important;
}
#image-carousel-section .slick-dots li button::before,
#image-carousel-section .slick-next::before,
#image-carousel-section .slick-prev::before {
	font-family: "FontAwesome";
	font-size: 100px;
	color: #fff;
	text-shadow: 0 0 4px rgba(0,0,0,0.3);
	z-index: 9;
	position: relative;
 }
 #image-carousel-section .slick-next,
 #image-carousel-section .slick-prev {
	top: calc(50% + 60px);
	width: 80px;
	height: 80px;
	z-index: 99;
 }
#image-carousel-section .slick-prev {
	left: 25vw;
}
#image-carousel-section .slick-next {
	right: 25vw;
}
#image-carousel-section .slick-prev::before {
	content: '\f104';
}
#image-carousel-section .slick-next::before {
	content: '\f105';
}
@media all and (max-width: 1600px) {
	#image-carousel-section .slick-prev {
		left: 2vw;
	}
	#image-carousel-section .slick-next {
		right: 2vw;
	}
}
@media all and (max-width: 768px) {
	#image-carousel-section .slick-slide img {
		width: 100vw;
	}
	#image-carousel-section .slick-current{
		padding: 0;
	}
	#image-carousel-section .slick-next,
	#image-carousel-section .slick-prev {
		top: 275px;
		bottom: auto;
		width: 20px;
	}
	#image-carousel-section .slick-next::before,
	#image-carousel-section .slick-prev::before {
		font-size: 70px;
	}
	#image-carousel-section .slick-prev {
		left: 0vw;
	}
	#image-carousel-section .slick-next {
		right: 0vw;
	}
	#image-carousel-section .image-description-area {
		background-color: #e6f3f6;
		min-height: 335px;
		margin: 0;
		padding: 0 15px;
		box-sizing: border-box;
		max-width: 100vw;
		text-align: left;
	}
	body.portrait #image-carousel-section .image-description-area {
		min-height: unset;
		max-width: 100vw !important;
		overflow: auto;
	}
	#image-carousel-section .image-description-headline {
		margin: 0;
		text-align: center;
		padding: 30px 15px 20px;
		font-size: 220%;
		width: 90vw;
		max-width: 90vw;
	}
	#image-carousel-section .image-description-body {
		margin: 0;
		text-align: left;
		padding: 0 15px;
		font-size: 150%;
		width: 100%;
		max-width: 100%;
	}
}
@media all and (max-width: 600px) {
	#image-carousel-section .slick-next,
	#image-carousel-section .slick-prev {
		top: 145px;
		bottom: auto;
		width: 20px;
	}
}

/** YOUTUBE CAROUSEL ***/

/* General styles for Youtube carousel section */
#youtube-carousel-section #youtube-row-decorator {
	background-color: #fcd60b;
	max-width: 400px;
	margin: 0 auto;
	height: 8px;
	width: 66%;
}
#youtube-carousel-section #bcgov-youtube-player {
	position: absolute;
	z-index: 1000;
	display: none;
	height: 100%;
	width: 100%;
}
#youtube-carousel-section #description-area {
	background-color: #00558C;
	max-width: 60%;
	margin: 0 auto;
	padding: 60px;
	transition: all 0.1s ease-in-out;
}
#youtube-carousel-section #description-area * {
	color: #fff;
}
#youtube-carousel-section #description-area h2 {
	font-size: 42px;
}
#youtube-carousel-section #description-area p {
	font-size: 22px;
}
@media all and (max-width: 768px) {
	#youtube-carousel-section #description-area {
		margin: 0 auto;
	}
	#youtube-carousel-section #description-area h2 {
		margin: 8vh 0 0;
	}
	#youtube-carousel-section #description-area #description-area-body {
		margin: 1em 0 0 0!important;
	}
}
/* Video carousel specifics */
#youtube-carousel-section .video-background {
	background: #000;
	z-index: -99;
	pointer-events: none;
}
/* Set default video dimensions for 16:9 resolution */
#youtube-carousel-section .video-background {
	max-height: 450px;
}
#youtube-carousel-section .video-foreground,
#youtube-carousel-section .video-background iframe {
	width: 100%;
	height: 450px;
}
#youtube-carousel-section .slider-youtube iframe {
	min-width: 800px;
	height: 450px;
}
#youtube-carousel-section #description-area {
	max-width: 800px;
}
/* Set alternate video size dimensions */
/* Keep 16:9 ratio (width:height)– https://www.size43.com/16by9-aspect-ratio-calculator */
@media all and (max-width: 800px) { /* iPhone Plus landscape & iPad portrait & popular android */
	#youtube-carousel-section .video-background { max-height: 400px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 400px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 700px; height: 400px; }
	#youtube-carousel-section #description-area { max-width: 700px; }
}
@media all and (max-width: 694px) { /* iPad landscape split screen option */
	#youtube-carousel-section .video-background { max-height: 383px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 383px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 680px; height: 383px; }
	#youtube-carousel-section #description-area { max-width: 680px; }
}
@media all and (max-width: 678px) { /* iphone landscape & iPad Pro half page landscape split screen */
	#youtube-carousel-section .video-background { max-height: 366px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 366px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 650px; height: 366px; }
	#youtube-carousel-section #description-area { max-width: 650px; }
}
@media all and (max-width: 640px) { /* iPad Pro portrait split screen option & 640 android*/
	#youtube-carousel-section .video-background { max-height: 352px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 352px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 626px; height: 352px; }
	#youtube-carousel-section #description-area { max-width: 626px; }
}
@media all and (max-width: 600px) { /* 600 android */
	#youtube-carousel-section .video-background { max-height: 326px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 326px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 580px; height: 326px; }
	#youtube-carousel-section #description-area { max-width: 580px; }
}
@media all and (max-width: 568px) { /* iphone SE landscape */
	#youtube-carousel-section .video-background { max-height: 312px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 312px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 554px; height: 312px; }
	#youtube-carousel-section #description-area { max-width: 554px; }
}
@media all and (max-width: 551px) { /* iPad Pro landscape half page split screen option & 533/540 android */
	#youtube-carousel-section .video-background { max-height: 300px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 300px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 534px; height: 300px; }
	#youtube-carousel-section #description-area { max-width: 534px; }
}
@media all and (max-width: 507px) { /* iPad & Pro portrait split screen option & 480 android */
	#youtube-carousel-section .video-background { max-height: 276px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 276px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 490px; height: 276px; }
	#youtube-carousel-section #description-area { max-width: 490px; }
}
@media all and (max-width: 438px) { /* iPad split screen option */
	#youtube-carousel-section .video-background { max-height: 236px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 236px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 420px; height: 236px; }
	#youtube-carousel-section #description-area { max-width: 420px; }
}
@media all and (max-width: 414px) { /* iphone plus portrait & 405/384 android */
	#youtube-carousel-section .video-background { max-height: 225px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 225px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 400px; height: 225px; }
	#youtube-carousel-section #description-area { max-width: 400px; }
}
@media all and (max-width: 375px) { /* iphone portrait & 360 android */
	#youtube-carousel-section .video-background { max-height: 203px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 203px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 360px; height: 203px; }
	#youtube-carousel-section #description-area { max-width: 360px; }
}
@media all and (max-width: 320px) { /* iphone SE portrait & low density android */
	#youtube-carousel-section .video-background { max-height: 169px; }
	#youtube-carousel-section .video-foreground, #youtube-carousel-section .video-background iframe { width: 100%; height: 169px; }
	#youtube-carousel-section .slider-youtube iframe { min-width: 300px; height: 169px; }
	#youtube-carousel-section #description-area { max-width: 300px; }
}
/* Slider post-initialization */
#youtube-carousel-section .slick-next,
#youtube-carousel-section .slick-prev {
	top: auto;
}
#youtube-carousel-section .slick-next::before,
#youtube-carousel-section .slick-prev::before {
	display: block;
	color: #fff;
	/* border: 1px dashed red; */
	position: absolute;
	z-index: 999999;
	box-sizing: border-box;
	overflow: hidden;
	top: -6vw;
	width: 24px;
	height: 24px;
	bottom: auto;
	min-height: 24px;
	padding: 2px 0px;
	font-family: "FontAwesome";
}
#youtube-carousel-section .slick-next::before {
	right: 12vw;
	content: '\f105';
}
#youtube-carousel-section .slick-prev::before {
	left: 12vw;
	content: '\f104';
}
#youtube-carousel-section .slick-list,
#youtube-carousel-section .slick-slider .slick-track {
	background-color: rgba(116,210,231,0.1);
}
#youtube-carousel-section .slider-youtube {
	position: relative;
}
#youtube-carousel-section .slider-youtube .youtube {
	opacity: 1;
	transition: opacity 1s;
}
#youtube-carousel-section .slider-youtube .youtube:not(.slick-current) {
	opacity: 0; /* hides other videos */
	transition: opacity 1s;
}
#youtube-carousel-section img.slick-slide {
	max-width: 100vw;
}
#youtube-carousel-section .slick-current .video-background {
	pointer-events: auto;
}
#youtube-carousel-section .slick-description {
	display: none;
}
/* Youtube carousel specific Slick dots restyling */
#youtube-carousel-section .youtube-row .slick-dots {
	bottom: -50px;
}
#youtube-carousel-section .youtube-row .slick-dots li button {
	/* border: 2px solid #fff; */
	border-radius: 50%;
	color: rgba(20,91,140,0.5);
	font-size: 20px;
	padding: 0;
	margin: 0;
}
#youtube-carousel-section .youtube-row .slick-dots li button:hover {
	color: rgba(20,91,140,0.8);
}
#youtube-carousel-section .youtube-row .slick-dots li.slick-active button::before {
	color: #70d0ea;
}
#youtube-carousel-section .youtube-row .slick-dots li button::before {
	font-size: 60px;
	padding-top: 5px;
}
@media all and (min-width: 640px) {
	#youtube-carousel-section .slick-next,
	#youtube-carousel-section .slick-prev {
		display: none;
	}
}



/** DOWNLOAD FORM ***/

/* General styles for video container section */
#download-form-container #download-row-decorator {
	background-color: #74d2e7;
	max-width: 430px;
	margin: 0 auto;
	height: 8px;
	width: 100%;
}
#download-form-container .download-row {
	background-color: rgba(116,210,231,0.15);
	min-height: 300px;
}
#download-form-container .download-row h2,
#download-form-container .download-row h3 {
	color: #00558C;
	text-align: center;
}
#download-form-container .select-icon-div {
	position: relative;
	min-height: 480px;
}
#download-form-container .select-icon-div h5 {
	color: #00558C;
}
#download-form-container .accessible-icon-div {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	right: auto;
}
#download-form-container .download-icon-container {
	text-align: center;
	margin-bottom: 20px;
}
#download-form-container .download-icon {
	max-width: 80px;
}
#download-form-container .accessible-icon {
	max-width: 60px;
}
#download-form-container .checkbox {
	min-height: 71px;
}
#download-form-container .checkbox input[type="checkbox"] {
	 opacity: 0;
}
#download-form-container .checkbox label {
	 position: relative;
	 display: inline-block;
	 line-height: 1.7em;
	 /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
	 padding-left: 60px;

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
										 supported by Chrome and Opera */
}
#download-form-container .checkbox label::before,
#download-form-container .checkbox label::after {
	 position: absolute;
	 content: "";

	 /*Needed for the line-height to take effect*/
	 display: inline-block;
}
/*Outer box of the fake checkbox*/
#download-form-container .checkbox label::before{
	height: 24px;
	width: 24px;
	background-color: #00558C;
	border: 1px solid;
	left: 0px;
	 /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
	  *to vertically center it.
	  */
	top: 3px;
}
/*Checkmark of the fake checkbox*/
#download-form-container .checkbox label::after {
	color: #fff;
	height: 9px;
	width: 16px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	transform: rotate(-45deg);
	left: 4px;
	top: 8px;
}
#download-form-container .checkbox label p{
	margin: 0;
}
/*Hide the checkmark by default*/
#download-form-container .checkbox input[type="checkbox"] + label::after {
	 content: none;
}
/*Unhide on the checked state*/
#download-form-container .checkbox input[type="checkbox"]:checked + label::after {
	 content: "";
}
/*Adding focus styles on the outer-box of the fake checkbox*/
#download-form-container .checkbox input[type="checkbox"]:focus + label::before {
	 outline: #00558C auto 5px;
}
#download-form-container .checkbox h4 {
	color: #00558C;
	margin-top: 4px;
	margin-bottom: 2px;
}
#download-form-container .checkbox .accessible a::after {
	content: url('./images/accessible-icon-small-01.png');
	/* float: right; */
	position: relative;
	right: -4px;
	top: 7px;
	min-height: 32px;
}
#download-form-container .checkbox .accessible a {
	margin-left: 60px;
}
#download-form-container .submit-btn,
#download-form-container .file-open-btn {
	border-radius: 0;
	margin: 30px 0 0;
}
#download-form-container .file-open-btn,
#download-form-container .file-open-btn:hover,
#download-form-container .file-open-btn:focus {
	border: 1px solid transparent !important;
	margin: 30px 0 0 20px;
}
#download-form-container .file-open-btn,
#download-form-container .file-open-btn a:hover,
#download-form-container .file-open-btn a:active,
#download-form-container .file-open-btn a:focus {
	text-decoration: none;
	color: #00558C !important;
}
#download-form-container .file-open-btn.disabled a {
	cursor: not-allowed;
	opacity: 0.65;
}
#download-form-container .progress {
	margin-bottom: 0px;
	background-color: transparent;
}
#download-form-container .alert-success {
	color: #00558C;
	background-color: rgba(116,210,231,0.1);
	margin-bottom: 6px;
}
#download-form-container .well {
	background-color: rgba(116,210,231,0.3);
}
#download-form-container .progress {
	margin-top: 6px;
}
#download-form-container .progress-bar {
	background-color: #5F9BC6;
}
#download-form-container #result {
	margin: 0;
}
#download-form-container .link-description {
	color: #888;
}
@media all and (max-width: 768px) {
	#download-form-container .select-icon-div {
		min-height: unset;
	}
	#download-form-container .bcgov-download-form-div {
		width: 100vw;
		margin: 0 auto;
	}
	#download-form-container .submit-btn {
		display: none;
	}
	#download-form-container .file-open-btn {
		width: 90%;
	}
	#download-form-container .file-open-btn a {
		color: #fff;
	}
	#download-form-container .file-open-btn.disabled a {
		color: inherit;
	}
	#download-form-container .accessible-icon-mobile-div {
		margin-top: 40px;
	}
	#download-form-container .accessible-icon {
		max-width: 50px;
	}
}