﻿.print-responsiveHeight{
	height: 700px; /*360 368px;*/
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
	
}

.responsiveHeight {
	height: 450px; /*360 368px;*/
	padding-bottom: 0;
	position: relative;
	overflow: visible;
	/*min-width: 320px;*/
}

.print-responsiveHeight > .print-inner{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	
}

.responsiveHeight > .inner {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/*min-height: 151px;*/
	min-height: 288px;
}


.iosSlider {
	position: relative;
	top: 0;
	left: 0;
	overflow: visible;
	width: 100%;
	height: 100%;
}


.iosSlider .slider {
	width: 100%;
	height: 100%;
	
}


.iosSlider .slider .item {
	float: left;
	width: 1140px; /*800 1170px;*/
	height: 100%;
	text-align: center;
	opacity:0;
    -moz-transition: opacity 0.2s ease 0s;
	-webkit-transition: opacity 0.2s ease 0s;
	-o-transition: opacity 0.2s ease 0s;
	transition: opacity 0.2s ease 0s;
}
.iosSlider .slider .item.leftSlide,
.iosSlider .slider .item.centerSlide,
.iosSlider .slider .item.rightSlide{
	opacity:1;
}

.iosSlider .slider .item > a {
	width: 100%; /*1170px;*/
	height: 100%;
	display:block;
}

.iosSlider .slider .item > a:focus::after {
    content: "";
    height: 100%;
	outline-style: auto;
	outline-width: 5px;
    outline-offset: -3px;
    position: absolute;
    top: 0;
	left: 0;
    width: 100%;
    z-index: 99999;
}


.iosSlider .slider .item .dimmer {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background-color: rgba(255,255,255,0.7);
}


.iosSlider .slider .item .border {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	border: none; /*1px solid #fff;*/
	opacity: 0;
}

.iosSlider .slider .item img {
	width: 100%;
}

.indicators {
	display: inline-block;
	margin: 5px auto;
	color: #468214;
}

.indicators .item, .indicators .prevSlide, .indicators .nextSlide, .indicators .toggleAutoSlide{
	float: left;
	/*display: inline-block;*/
	width: 10px;
	height: 12px;
	margin: 0 5px 0 0;
	padding: 0;
	border: none;
	background: none;
	/*border: 1px solid #000;*/
	
}

/*.indicators .toggleAutoSlide {
	display: none;
}*/

.indicators .item:before { content: "\f111"; } /* fa-circle */
.indicators .item.selected:before{ content: "\f10c"; } /* fa-circle-o */
.indicators .prevSlide:before { content: "\f053"; } /* fa-chevron-left */
.indicators .nextSlide:before { content: "\f054"; } /* fa-chevron-right */
.indicators .toggleAutoSlide:before { content: "\f04c"; } /* fa-pause */
.indicators .toggleAutoSlide[data-command="autoSlidePlay"]:before { content: "\f04b"; } /* fa-play */




.iosSlider div.scale-box {
	position: relative;
	width: 70.175438596491228070175438596491%; /*100%; 800/1140*/
	max-width: 800px; /*1170px;*/
	overflow: hidden;
	min-height: 288px; /*189 151px; /* 368/1170*480 */
	/*background-color: #fff;*/
	/*right:0;*/
    -moz-transition: margin 0.2s ease 0s;
	-webkit-transition: margin 0.2s ease 0s;
	-o-transition: margin 0.2s ease 0s;
	transition: margin 0.2s ease 0s;
}
.iosSlider .item.leftSlide div.scale-box {
	margin-left:29.824561403508771929824561403509%;
}

 
.iosSlider div.scale-box:before {
	content: '';
	display: block;
	padding-top: 56.25% !important; /*45 31.452991452991452991452991452991% !important;*/
}


.iosSlider div.scale-box div.center-box {
	width: auto;
	height: 100%;
	text-align: center;
	position:  absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	/*top: 1px;
	left: 1px;
	bottom: 1px;
	right: 1px;*/
	overflow:hidden;
}

/*.hku-slides div.scale-box > div, .hku-slides div.scale-box > img {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}*/

/*.hku-slides div.scale-box .fit-height {
	width: auto;
	height: 100%;
}

.hku-slides div.scale-box .fit-width {
	width: 100%;
	height: auto;
}*/

.iframe-container {
    position:relative;
	width: 100%;
    /*height:0;*/
    overflow:hidden;
}
.iframe-container:before {
	content: '';
	display: block;
}

.iframe-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


.iosSlider div.scale-box div.center-box > img {
	max-width: none;
	margin:0 -100%;
    vertical-align: middle;
	position: relative;
	display: inline;
	width: 100%;
	height: 100%;
	
}


.iosSlider div.caption-box {
	position: absolute; /*absolute;*/
	width: 29.824561403508771929824561403509%; /*340/1140*/
	max-width: 340px;
	/*min-width: 200px;*/
	min-height: 288px;
	/*overflow: hidden;*/
	background-color: #468214;
	/*height: 52.352941176470588235294117647059%;*/
	/*bottom: -40%;*/
	/*top: 47.647058823529411764705882352941%;*/
	/*bottom: 0;*/
	/*width: 90%;
	max-width: 500px; /*541px;*/
	right: 0;
	top: 0;
	/*left: 3.796296296296296296296296296296%;*/
	text-align: left;
	/*background-image: url(../img/robot_bg.png);*/
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: right bottom;
    -moz-transition: all 0.2s ease 0s;
	-webkit-transition: all 0.2s ease 0s;
	-o-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	margin-right:-29.824561403508771929824561403509%;
	opacity:0;
}

.iosSlider div.caption-box:before {
	content: '';
	display: block;
	padding-top: 132.35294117647058823529411764706%; /*450/340*/
}
.iosSlider div.caption-box:after {
	position:absolute;
	width: 13px;
	height: 21px;
	top:10%;
	left: -11px;
	content: '';
	display: block;
	background-image: url(../img/caption-box-green-arrow-left.png);
	background-size: 100% 100%;
	padding:0;
}
.iosSlider .item.centerSlide div.caption-box {
	margin-right:0;
	opacity:1;
}

/*	
.iosSlider .slider > div.item:nth-child(5n+1) div.caption-box {background-image: url(../img/caption-box/lineart1.png);}
.iosSlider .slider > div.item:nth-child(5n+2) div.caption-box {background-image: url(../img/caption-box/lineart2.png);}
.iosSlider .slider > div.item:nth-child(5n+3) div.caption-box {background-image: url(../img/caption-box/lineart3.png);}
.iosSlider .slider > div.item:nth-child(5n+4) div.caption-box {background-image: url(../img/caption-box/lineart4.png);}
.iosSlider .slider > div.item:nth-child(5n) div.caption-box {background-image: url(../img/caption-box/lineart5.png);}*/
	
.iosSlider div.caption-box div.caption-box-padding {
	width: auto;
	height: auto;
	/*text-align: center;*/
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow:hidden;
	border-left: 1px solid #fff;
	padding: 0 15px;
}

.iosSlider div.caption-box div.caption-box-padding:after {
	content: '';
	display: block;
	width: 110%;
	height: 110%;
	position: absolute;
	bottom:0;
	left:-5%;
	-moz-box-shadow:    inset 0 0 10px 4px #468214;
	-webkit-box-shadow: inset 0 0 10px 4px #468214;
	box-shadow:         inset 0 0 10px 4px #468214;
}


.iosSlider div.caption-box .caption-box-title {
	/*text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);*/
	/*position: absolute;*/
	/*font-size: 32px;*/
	margin-top:10%;
	/*bottom: 30%;
	vertical-align: bottom;*/
	color: #fff;
	line-height: 1.25;
	/*letter-spacing: 0.5px;*/
	-moz-transition: all 0.7s ease 0s;
	-webkit-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
}

.iosSlider div.caption-box hr {
	margin: 5% 0;
}
/*.iosSlider div.caption-box-desc:before {
	position:absolute;
	width: 18px;
	height: 11px;
	top:-11px;
	right: 20px;
	content: '';
	display: block;
	background-image: url(../img/caption-box-desc-arrow.png);
	background-size: 100% 100%;
}*/

.iosSlider .caption-box-desc {
	/*position:absolute;*/
	/*background-color: #fff;
	padding: 3px;*/
	/*font-size: 16px;*/
	color: #fff; /*#468214;*/
	/*font-size: 16px;*/
	line-height: 1.25;
	font-family: Lato, sans-serif;
	font-weight: normal;
	/*letter-spacing: 0.5px;*/
	/*margin-top:10%;*/
	/*box-shadow: 2px 2px 4px rgba(0, 0, 0, 1);*/
	/*width:100%;*/
	/*top: 70%;*/
	-moz-transition: all 0.7s ease 0s;
	-webkit-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;}
.print-caption-box-desc {
	line-height: 1.25;
	font-family: Lato, sans-serif;
	font-weight: normal;
}
	
.iosSlider div.caption-box * {
}

.responsiveHeight > .inner > .prevSlideDimmer {
	background-color: #808080; /* rgba(0,0,0,0.5); /* green: rgba(70,130,20,0.5) */
	width: 100%;
	height: 450px; /*368px;*/
	position: absolute;
	margin-right: 585px; /*585px; /* = 1170/2 */
	top:0;
	right: 50%;
	/*z-index:2;*/
}
.responsiveHeight > .inner > .nextSlideDimmer {
	background-color: #808080; /*rgba(0,0,0,0.5);*/
	width: 100%;
	height: 450px; /*368px;*/
	position: absolute;
	margin-left: 585px; /*585px;*/
	top:0;
	left: 50%;
	/*z-index: 2;*/
}

/*
.iosSlider .bx-wrapper {
	margin-bottom: 30px;
}

.iosSlider .bx-wrapper .bx-viewport {
	left: 0;
	border: 0;
}

.hku-slides .bx-wrapper .bx-controls-direction a.bx-prev {
	background: url('../img/arrow-prev.png') no-repeat;
	width: 32px;
	height: 62px;
	left: 0;
	margin-top: -31px;
	z-index: 2;
}

.hku-slides .bx-wrapper .bx-controls-direction a.bx-next {
	background: url('../img/arrow-next.png') no-repeat;
	width: 32px;
	height: 62px;
	right: 0;
	margin-top: -31px;
	z-index: 2;
}

.hku-slides .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: auto;
}

.hku-slides .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	right: 0;
	text-align: right;
	padding: 0;
	width: 87%;
}

.hku-slides .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager .bx-pager-item {
	text-align: left;
}
*/
/*
@media (max-width: 767px) {
	.hku-slides div.caption-box{
		position: static;
		background: none;
	}

	.hku-slides div.caption-box * {
		color: #555;
	}

	.hku-slides .bx-wrapper .bx-controls-direction a.bx-prev {
		background: none;
	}
	.hku-slides .bx-wrapper .bx-controls-direction a.bx-prev:hover {
		background: url('../img/arrow-prev.png') no-repeat;
	}

	.hku-slides .bx-wrapper .bx-controls-direction a.bx-next{
		background: none;
	}
	.hku-slides .bx-wrapper .bx-controls-direction a.bx-next:hover {
		background: url('../img/arrow-next.png') no-repeat;
	}
	
}
*/

@media screen and (max-width: 1170px) { /*(max-width: 1170px) {*/
	
	.responsiveHeight {
		height: 0;
		padding: 0 0 39.473684210526315789473684210526% 0; /*450/1140 31.452991452991452991452991452991% 0; /* responsive slider height = 40% of the browser width */ /* 368/1170 = 0.31 */
	}
	
	.indicators {
		/*width: 100%;*/
	}
	
}


@media screen and (max-width: 768px) { /*480px) { /* height fixed */
	.responsiveHeight {
		padding: 0 0 288px 0; /*251px 0; /* 151 + 100 */
	}

	.iosSlider div.scale-box div.center-box > img {
		max-width: none;
		margin:0 -100%;
		vertical-align: middle;
		position: relative;
		display: inline;
		width: auto;
		height: 100%;
		object-fit: contain ;
	
	}
}

@media screen and (max-width: 584px) { /*512px 480px) { /* show caption below image */
	
	.responsiveHeight {
		padding: 0 0 81.25% 0; /*416/512 251px 0; /* 151 + 100 */
	}
	
	.responsiveHeight > .inner {
		/*position:relative;*/
		min-height: 325px; /*251px;*/
	}

	.iosSlider .slider .item {
		/*height: auto;*/
	}

	.iosSlider div.scale-box {
		/*position:relative;*/
		width: 100%;
		min-height: 225px;
		
	}
	
	.iosSlider div.caption-box {
		/*position: inherit;*/
		background-color: #468214;
		height: 30.769230769230769230769230769231%; /*128/416*/
		min-height: 100px;
		/*bottom: -40%;*/
		top: auto;
		/*bottom: 0;*/
		width: 100%;
		max-width: none;
		left: auto;
		/*text-align: left;*/
		border-top: 1px solid #fff;
		/*border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;*/
		/*max-height: 100px;*/
		/*overflow:none;*/
		/*background-size: auto 120%;*/
		background-position: right 60%;
		margin-right:0;
		margin-top: 30.769230769230769230769230769231%;
	}

	.iosSlider .item.leftSlide div.scale-box {
		margin-left:0;
	}
	.iosSlider .item.centerSlide div.caption-box {
		margin-top:0;
	}


	.iosSlider div.caption-box div.caption-box-padding {
		padding: 5px 14px;
		height: 100%;
		width: 100%;
		border-left: none;
	}

	.iosSlider div.caption-box .caption-box-title {
		/*text-shadow: none;*/
		/*position:static;*/
		margin-top:0;
	}
	.iosSlider div.caption-box hr {
		display: none;
	}

	.iosSlider div.caption-box:before {
		position:absolute;
		width: 21px;
		height: 13px;
		top:-12px;
		left: 18px;
		content: '';
		display: block;
		background-image: url(../img/caption-box-green-arrow-up.png);
		background-size: 100% 100%;
		padding:0;
	}
	.iosSlider div.caption-box:after{
		display:none;
	}

/*	.iosSlider div.caption-box:after {
		position:absolute;
		width: 0; 
		height: 0; 
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #468214;

	content: '';
	display: block;
		top:180px; /*-10px;
		left: 20px;
	}

	.iosSlider div.caption-box:before {
		position:absolute;
		width: 0; 
		height: 0; 
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-bottom: 12px solid #fff;

	content: '';
	display: block;
		top:178px; /*-12px;
		left: 18px;
	}*/
	
	
	.iosSlider div.caption-box-desc {
		position:static;
		background: none;
		padding: 0;
		color: #fff;
		box-shadow: none;
		margin-top:0;
		/*width:100%;*/
	}

	.iosSlider div.caption-box-desc:before {
		display: none;
	}

	/*.iosSlider .slider .item .dimmer {
		background-color: rgba(0,0,0,0);
	}*/
	
	.indicators {
		/*display: none;*/
		margin: 10px auto;
	}

	.indicators .prevSlide, .indicators .nextSlide, .indicators .toggleAutoSlide{
		width: 20px;
		height: 24px;
		margin: 0 10px 0 0;
		/*border: 1px solid #000;*/
		font-size: 24px;
		line-height: 24px;
		
	}
	
	.indicators .item {
		display: none;
	}

	
}

@media screen and (max-width: 400px) { /* fix height, show caption below image */
	
	.responsiveHeight {
		padding: 0 0 325px 0; /*416/512 251px 0; /* 151 + 100 */
	}
	.iosSlider div.scale-box div.center-box > img {
		max-width: none;
		margin:0 -100%;
		vertical-align: middle;
		position: relative;
		display: inline;
		width: auto;
		height: 100%;
		object-fit: contain ;
	
	}
}
