/*
#f5f5f5 = RGB(245,245,245)
*/

span.w {
 display:inline-block;
 width:150px;
}
#scr{
 margin: 0 auto;
 padding: 0 0 200px 0;
 max-width:800px;
 vertical-align:top;
}
#scr h4 {
 border-bottom:1px solid #0084B1;
}
div.spacer{
 margin-top:50px;
}

#naviRadio{
 text-align:center;
 width:100%;
	 /* margin:0 0 1% 0; */
	 /* display:flex; justify-content: space-around; */
}

#container{
	 /* display:inline-block;*/
 width:80%;
	 /* max-width:600px; */ /* 528px; 352px; */
 height:100%;
	 /* max-height:220px; */
 margin:10px 10% 10px 10%;
 vertical-align:middle;
 transition:1s;
	 /* position:relative; */
	 /* border:1px solid #0084B1; */
	 /* background: linear-gradient(to top,#ffffff,#f5f5f5); */
}

#container img{
 width:100%;		/* better to use 100%; adjust min-height for containerImage = image container */
	 /* min-width:180px; */
	 /* margin:1% 1% 1% 1%; */	/* use margin if width < 100% */
 margin:0 auto;
 height:auto;

	 /* overflow:hidden; */

 position:absolute;
	 /* transform: translate(100%,0); */
	 /* transform: translate(100%,0) rotate(90deg); */
	 /* margin:0 auto; */
	 /* clear:both; */
}

img.hide2{
	 /* width:100px; */
	 /* min-width:180px; */
 opacity: 0;
 transition: 2s;
 transform: translate(-100%,0);
	 /* transform: translate(-50%,0) rotate(-90deg); */
	 /* transform: rotate(5deg); */
 z-index:2;
 box-shadow: 0 20px 20px -20px #999;
 /* background:linear-gradient(to bottom,#ffffff,#f5f5f5); */
}

img.show{
 opacity: 1;
 transition: 2s;
 transform: translate(0%,0%);
	 /* transform: translate(0,0) rotate(0deg); */
	 /* transform: rotate(5deg); */
 z-index:3;
	 /* border-bottom:1px solid #8a8a8a; */
	 /* box-shadow: 0 0 10px #8a8a8a; */
	 /* box-shadow: 0 10px 6px -6px #777; */
	 /* border-radius:10px; */
 box-shadow: 0 5px 5px -5px #aaa;
 /* background:linear-gradient(to bottom,#ffffff,#f5f5f5); */
 	/* background: radial-gradient(white, yellow, green); */
}

img.hide{
	 /* width:35%; min-width:100px; */
 opacity: 0;
 transition: 2s;
 transform: translate(0%,-100%);
	 /* transform: translate(-50%,0) rotate(-90deg); */
	 /* transform: rotate(5deg); */
 z-index:1;
 box-shadow: 0 20px 20px -20px #999;
 /* background:linear-gradient(to bottom,#ffffff,#f5f5f5); */
}

#containerImage{
	 /* padding:0; */
	 /* border:1px solid #0084B1; */
 overflow:hidden;
 position:relative;
 height:auto;
 min-height:320px;
	 /* 300 - 320px; adjust the height value in dependence of width:height ration of the images */
}
#container span, #t{
 display:block;
 text-align:center;
}
#t{
 height:auto;
 min-height:150px;
 /* max-height:70px; */
 width:100%; 
 /* width: 90%; padding: 0px 5% 20px 5%; */

 overflow:hidden;
 vertical-align:bottom;

 position:absolute;
 bottom:0px;

 background-color: #f5f5f5;
 opacity:.9;
 	/*
	 position:relative;
	 bottom:10px;
	 white-space:nowrap;
	 text-overflow:ellipsis;
 	*/
 transition:2s;
 z-index:5;
}
#t.alt{
	/* color:#8a8a8a; */
	/* transform: rotate(5deg); */
	/* background-color: #ffffff; */
	/* opacity:0; */
 transform: translate(0,100%);
 	/*
	 font-size:120%;
	 overflow:hidden;
	 text-overflow:ellipsis;
	 text-shadow:1px 0 #ff0000; 
	 */
}
#t.alt2{
 transform: translate(100%,100%);
}
#t.alt3{
 transform: translate(100%,0);
}
#t.alt4{
 transform: translate(-100%,0);
}
#t.alt5{
 transform: translate(-100%,-100%);
}
#t.alt6{
 transform: translate(0,-100%);
}

#order{
 width:0;
 height:2px;

	 /*
	 position:relative; top:-10px;
	 */
 	/* background-color:#ff0000; */  
 /* remove it to become a slider counter */
 /* background:linear-gradient(to right,#f5f5f5,#ff0000); */
 transition: 2s; /* see also setInterval */
}

.arrow{
 display:inline-block;
 width:10%;
 margin:0 0 0 0;
 vertical-align:middle;
 text-align:center;
 font-size:250%;
}

.visHidden{
 visibility:hidden;
}
.arrowLeft{
 margin:0 0 0 14%;
}

.arrowRight{
 margin:0 10% 0 0;
}

#arrowLeft a, #arrowRight a{
 display:block;
}
#arrowLeft a:hover, #arrowRight a:hover,
#arrowLeft a:focus, #arrowRight a:focus,
#arrowLeft a:active, #arrowRight a:active
{
 color:#f5f5f5;
 background-color:#0084B1;
 text-decoration:none;
}
#sliderOptions{
 display:inline-block;
 width:50%;
 /* margin:0 auto; */ 
 text-align:center;
}

#naviRadio input[type="radio"]{
 display:none
}
#naviRadio input[type="radio"] + label{
 background-image:url(../img/unradio16.png);
 background-repeat:no-repeat;
 background-position:left;
 padding:0 0 0 20px;
 cursor:pointer;
 padding-top:4px;
 /* transition:.5s; */
}
#naviRadio input[type="radio"]:checked + label{
 background-image:url(../img/radio16.png);
 color:#ffffff;
}

span.lg{
 display:block;
 text-align:right;
 font-style:italic;
}