/*workshop wrapper*/
.workshop {
	background-image: url('/cisiweb2/image/ethics/qwizdom.jpg');
	background-attachment: fixed;
	background-position: right 80%;
	color: #ffffff;
	margin-top: 80px !important;
	margin-bottom: 80px !important;
}

.workshop h2 {
	padding-top: 45px;
	padding-bottom: 20px;
	font-weight: 400;
	color: white !important;
}

.header {
	background-image: url('https://www.cisi.org/cisiweb2/image/ethics/improducts.gif');
	background-size: cover;
	background-position: center 20%;
	height: 600px;
	text-align: center;
}

.headerText {
	height: 600px;
}

.benefits {
	background-image: url("/cisiweb2/image/caixa/benefits.jpg");
	margin-bottom: 80px !important;
	/* ?? look into having contianer inside container fluid */
}

.benefits .sfContentBlock {
	padding: 5% 5% 0% 5%;
}

.greyWrapper {
	background: #f3f3f3;
	padding-top: 70px !important;
	margin-bottom: 80px !important;
}

.videoLeft {
	float: left;
	margin-right: 60px;
	margin-bottom: 30px;
}

.quote {
	background-image: url("/cisiweb2/image/ethics/charnock.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	text-align: center;
	padding: 0 5%;
	margin-top: 30px;
}

.quote h2 {
	color: #ffffff !important;
	font-size: 28px !important;
	margin-top: 70px;
}

.quote strong {
	color: #ffffff;
}

.videoWrapper {
	position: relative;
	height: calc(100vh - 100px);
	background: #ffffff;
	overflow: hidden;
	margin-bottom: 20px;
}

.greenEye #cyberVideo {
	width: 100%;
	position: absolute;
}

.intro {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 20px 20px 20px 20px;
	position: absolute;
	z-index: 1;
	color: #fff;
	text-align: center;
}

.intro h1 {
	color: #ffffff;
	font-size: 70px;
	margin-top: 50px;
	font-weight: 400;
	text-shadow: 0px 0px 60px #000, 0px 0px 60px #000;
}

.intro h2 {
	color: #ffffff;
	font-size: 30px;
	font-weight: 400;
	text-shadow: 0px 0px 5px #000, 0px 0px 30px #000, 0px 0px 60px #000;
}

@media (max-width: 991px) {
	.videoLeft {
		float: none;
		margin: 0px 0px 20px 0px;
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
	}

	.videoLeft iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.quote h2 {
		font-size: 28px;
	}

	.greenEye #cyberVideo {
		width: 100%;
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	.quote {
		/*  ?? OMG BODGE - has to be a better way of sizing the BG image when not using the parralax effect */
		background: #f3f3f3;
	}

	.quote h2 {
		font-size: 30px !important;
	}
}



@media (max-width: 767px) {
	.greyWrapper {
		background: #f3f3f3;
		padding-top: 50px !important;
		padding-bottom: 20px !important;
		margin-bottom: 50px !important;
	}

	.quote {
		background: #f3f3f3;
	}

	.quote h2 {
		font-size: 22px !important;
	}

	.integrityReduceImage {
		display: block !important;
		float: none !important;
		margin: 20px auto 20px !important;
		max-width: 50% !important;
	}
	.intro h1 {
		font-size: 30px;
	}

	.intro h2 {
		font-size: 20px;
	}
	.videoWrapper{
		background-color: #122934;
		height: calc(80vh - 110px);
	}
		


}

@media (min-width: 768px) {
	.videoWrapper {
		height: calc(57vh - 150px);
		margin-bottom: 80px;
		
	}

	.intro {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 30px 50px;
	}

	
}

@media (min-width: 1200px) {
	.videoWrapper {
		height: calc(100vh - 110px);
	}
}

@media (min-width: 1300px) {
	.videoWrapper {
		height: calc(85vh - 110px);
	}
}