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

span.w {
 display:inline-block;
 width:150px;
}
#scr{
 margin: 0 auto;
 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%;
 min-width:360px;
 margin:10px 10% 10px 10%;
 vertical-align:middle;
 transition:1s;
 /* position:relative; */
 height:310px;
 border:1px solid #0084B1;
 /* background: linear-gradient(to top,#ffffff,#f5f5f5); */
}

#container img{
 width:60%;		/* 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; */
 border:2px solid #ffffff;
 /*
 box-shadow: 0 0 10px #8a8a8a;
 */
}

img.hide2{
 width:35%; min-width:100px;
 opacity: .1;
 transition: 2s;
 transform: translate(-5%,-25%) rotateY(90deg);
 -webkit-transform: translate(-5%,-25%) rotateY(90deg);
 /* 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(36%,4%);
 /* 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: .1;
 transition: 2s;
 transform: translate(80%,-25%) rotateY(-90deg);
 -webkit-transform: translate(80%,-25%) rotateY(-90deg);
 /* 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:260px;
 /* 300 - 320px; adjust the height value in dependence of width:height ration of the images */
}
#container span, #t{
 display:block;
 text-align:center;
}
#t{
 max-height:50px;
 overflow:hidden;
 vertical-align:bottom;
 position:relative;
 bottom:10px;
 /*
 white-space:nowrap;
 text-overflow:ellipsis;
 */
 padding: 0 5% 0 5%;
 transition:2s;
}
#t.alt{
 /* color:#8a8a8a; */
 /* transform: rotate(5deg); */
 transform: translate(0,10px);
 /*
 font-size:120%;
 overflow:hidden;
 text-overflow:ellipsis;
 text-shadow:1px 0 #ff0000; 
 */
}
#order{
 width:0;
 height:1px;
 /*
 position:relative; top:-10px;
 */
 /* background-color:#ff0000; */ 
 background:linear-gradient(to right,#f5f5f5,#ff0000); /* remove it to become a slider counter */
 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;
}