/* Style Sheet für smrhome -->
   Letzte Änderung: 26.08.2020 */

body {font-family: Verdana,Arial,Helvetica, sans-serif; 
       font-size:100.1%;
       font-weight:400, normal; 
       font-style:normal; 
       color:#000000;
       margin: 10px;}
     
      	    	 
/**** What is Research ****/

section {
   background-color: beige;
   margin: 15px;
   position: relative;
   border: 1px solid #ccc;
   width: 600px;
}

aside {
   width: 105px;
   border-right: 1px solid #ccc;
}

ul {
   list-style-type: none;
   padding-left: 15px;
}

ul li {
   margin-top: 10px;
   cursor: pointer;
}

ul li:first-child {
   margin-top: 0;
}

.thumb {
   height: 65px;
   width: 75px;
}

.full {
   position: absolute;
   display: none;
   height: 300px;
   right: 20px;
   top: 20px;
}

.thumb:hover + .full {
   display: block;
}

/*  Rotate Animation on Click 
 */
.img-container{
   display: block;
   margin: 15px;
   text-align: center;
   position: relative;
   box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   background: lightgray;
   box-sizing: border-box;
}
/* Making Container image responsive */
.img-container img{
    width: 50%;
    height: auto;
   transition: 2.5s;
   -webkit-transition: 2.5s;
-moz-transition: 2.5s;
}

/* Container for Rotation buttons */
.btn-board{
   background: rgba(0, 0, 0, 0.3);
   width: 100%;
   height: 30px;
   line-height: 30px;
   position: absolute;
   bottom: 0;
   display: block;
   box-sizing: border-box;
   padding: 0;
   text-align: left;
   z-index: 11;
}
/* Looking of rotate button*/
.rt-btn{
   padding: 3px 5px 3px 5px;
   background: rgba(0, 0, 0, 0.4);
   font-size: 14px;
   border: 0;
   outline: 0;
   color: #fff;
   width: 32px;
   height: 32px;
   border-radius: 4px;
   margin: 0 3px;
   user-select: none;
}
/* button hover looking */
.rt-btn:hover{
   background: silver; 
}
/* Hiding radio inputs */
input[name="rotate"]{
   display: none;
   opacity: 0;
}
/* 90 degree rotate image when rt90 radio checked */
#rt90:checked ~ div + img {
     transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
/* 180 degree rotate image when rt90 radio checked */
#rt180:checked ~ div + img {
    transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
/* 270 degree rotate image when rt90 radio checked */
#rt270:checked ~ div + img {
    transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/***************************************/

	a.hover_img {			
		position:relative;	
	}

	a.hover_img span {
		position:absolute;
		overflow: hidden;
		padding:0;		
		margin-left: -10em; 
		margin-top: 1.5em; 	
		height: 0;		
	}
	
	a.hover_img span img {
		padding:2px;
		margin-left:4px;
		border:1px solid #BCBDC0;
		background-color:#BCBDC0;
		-webkit-border-radius: 5px;
	   	   -moz-border-radius: 5px;
		    	border-radius: 5px;
		
		-webkit-box-sizing:border-box; 
		   -moz-box-sizing:border-box; 
			box-sizing:border-box;
	}
	a.hover_img:hover span {
		opacity:1;
		height: 500px;
		padding: 4px; 
		z-index:1;
	}