
table {width:100%; height:100%; position:relative; }
.team{width:300px;height: 300px; position: relative; margin:10px auto auto 250px;}
.team input {position:absolute; display:none;}
.team .segment {width:100px; height:100px; position:absolute;  z-index:10; left:0;top:0;
transform-origin:50px 50px;transition:0.5s;}

.team .segment1 {width:100px; height:100px; position:absolute;  z-index:10; left:0;top:0;
transform-origin:50px 50px;transition:0.5s;}

.team .information {position:absolute; left:-9999px; width:100%; top:230px; text-align:center; opacity:0;
transition: opacity 0.5s 0.6s;}

.team .segment label {display:block; width:100px; height:100px; background-size:contain; background-position:center center; 
	 cursor:pointer; border-radius:7px; transition:0.5s;}

.team .segment1 label {display:block; width:100px; height:100px; background-size:contain; background-position:center center; 
	 cursor:pointer; border-radius:7px; transition:0.5s;
}

.team .segment:nth-of-type(1) label {background-image:url('photos/rohit.jpg');}
.team .segment:nth-of-type(2) label {background-image:url('photos/ashish.jpg');}
.team .segment:nth-of-type(3) label {background-image:url('photos/tanya.jpg');}
.team .segment:nth-of-type(4) label {background-image:url('photos/deepanshu.jpg');}
.team .segment:nth-of-type(5) label {background-image:url('photos/deeksha.jpg');}
.team .segment:nth-of-type(6) label {background-image:url('photos/vandana.jpg');}
.team .segment:nth-of-type(7) label {background-image:url('photos/shruti.jpg');}
.team .segment:nth-of-type(8) label {background-image:url('photos/vishesh.jpg');}

.team .segment1:nth-of-type(1) label {background-image:url('photos/low.jpg');}
.team .segment1:nth-of-type(2) label {background-image:url('photos/edmond.jpg');}
.team .segment1:nth-of-type(3) label {background-image:url('photos/malcolm.jpg');}
.team .segment1:nth-of-type(4) label {background-image:url('photos/teh.jpg');}
.team .segment1:nth-of-type(5) label {background-image:url('photos/veronica.jpg');}


.team label.center {display:block; width:100px; height:100px; padding-top:20px; background:#f0f0f0 ; position:relative; z-index:20; 
	cursor:pointer; text-align:center; font:normal 16px/25px 'texgyreadventorregular', arial, sans-serif; color:#000; border-radius:5px;}

.team #toggle:checked ~ .segment:nth-of-type(1) {left:180px;top:-60px;}
.team #toggle:checked ~ .segment:nth-of-type(2) {left:65px;top:-170px;}
.team #toggle:checked ~ .segment:nth-of-type(3) {left:-65px;top:-170px;}
.team #toggle:checked ~ .segment:nth-of-type(4) {left:-170px;top:-60px;}
.team #toggle:checked ~ .segment:nth-of-type(5) {left:-170px;top:60px;}
.team #toggle:checked ~ .segment:nth-of-type(6) {left:-65px;top:170px;}
.team #toggle:checked ~ .segment:nth-of-type(7) {left:65px;top:170px;}
.team #toggle:checked ~ .segment:nth-of-type(8) {left:180px;top:60px;}



.team #toggle1:checked ~ .segment1:nth-of-type(1) {left:150px;top:40px;}
.team #toggle1:checked ~ .segment1:nth-of-type(2) {left:75px;top:-120px;}
.team #toggle1:checked ~ .segment1:nth-of-type(3) {left:-65px;top:-120px;}
.team #toggle1:checked ~ .segment1:nth-of-type(4) {left:-150px;top:40px;}
.team #toggle1:checked ~ .segment1:nth-of-type(5) {left:5px;top:150px;}




.team #toggle:checked ~ input:checked + .segment {width:340px; height:340px; left:-120px; top:-120px; 
	background:#f8f8f8; border:1px solid #ddd; border-radius:8px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6); z-index:100;}

.team #toggle1:checked ~ input:checked + .segment1 {width:340px; height:340px; left:-120px; top:-120px; 
	background:#f8f8f8; border:1px solid #ddd; border-radius:8px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6); z-index:100;}

.team input:checked + .segment1 label {width:200px; height:200px; margin-left:70px; margin-top:10px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.team input:checked + .segment1 .information {left:0; opacity:1;}

.team input:checked + .segment label {width:200px; height:200px; margin-left:70px; margin-top:10px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.team input:checked + .segment .information {left:0; opacity:1;}

.team h6 {font:normal 18px/25px 'texgyreadventorbold', arial, sans-serif; color:#000; padding:0; margin:0;}
.team p {font:normal 15px/25px 'texgyreadventorregular', arial, sans-serif; color:#333; padding:0; margin:0;}
