/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-rotating-panels.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#draaiend {width:340px; height:180px; position:relative; right:120px; margin:-40px auto;}
#draaiend input {display:none;}
#draaiend div {width:220px; height:390px; padding:20px; position:absolute; top:60px; left:150px; background:#fff; border-radius:5px; z-index:80; box-shadow:0 5px 10px rgba(0,0,0,0.5);
-webkit-transform: translate3d(0.5, 0.5, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
transform: translate3d(0.5, 0.5, 0);

transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
transition:0.75s;
-o-transition:0.75s;
-moz-transition:0.75s;
-webkit-transition:0.75s;

}
#draaiend label {display:block; width:100%; height:100%; z-index:100; cursor:pointer; position:absolute; left:0; top:0; background:url(trans.gif);
-webkit-tap-highlight-color:rgba(0,0,0,0);
tap-highlight-color:rgba(0,0,0,0);
}

.textPanel img.draaiend,
.textPanel {margin:auto; position:relative; top:0; left:0; bottom:0; right:0; border:0px solid #aaa; border-radius:10px; width:100%;}
.textPanel {background:transparent; border-radius:10px; border:0px solid #aaa; margin:auto; width:400px; display:inline-block; margin:0 3px 2px 0; vertical-align:top;}



#draaiend h2.draaiend {padding:4px 0; margin:0; font:600 16px/30px 'Open Sans', arial, sans-serif; color:#496624; font-style:italic; font-weight:bold; text-align:left;}
#draaiend p.draaiend {padding:0; margin:0 0 8px 0; font:400 13px/18px 'Noto Sans', 'verdana', sans-serif; color:#444; text-align:justify;}
#draaiend p a {color:#666;}
#draaiend p a:hover {text-decoration:none;}

#panel1l:checked ~ div.p1,
#panel2l:checked ~ div.p2,
#panel3l:checked ~ div.p3,
#panel4l:checked ~ div.p4,
#panel5l:checked ~ div.p5,
#panel6l:checked ~ div.p6,
#panel1r:checked ~ div.p1,
#panel2r:checked ~ div.p2,
#panel3r:checked ~ div.p3,
#panel4r:checked ~ div.p4,
#panel5r:checked ~ div.p5,
#panel6r:checked ~ div.p6
{left:150px; z-index:100; box-shadow:0 5px 20px; color:#9cb71a;
transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
#panel1l:checked ~ div.p2,
#panel2l:checked ~ div.p3,
#panel3l:checked ~ div.p4,
#panel4l:checked ~ div.p5,
#panel5l:checked ~ div.p6,
#panel6l:checked ~ div.p1,
#panel1r:checked ~ div.p2,
#panel2r:checked ~ div.p3,
#panel3r:checked ~ div.p4,
#panel4r:checked ~ div.p5,
#panel5r:checked ~ div.p6,
#panel6r:checked ~ div.p1
{left:300px; z-index:90; box-shadow:0 5px 20px; color:#496624;
transform: scale(0.75, 0.75);
-o-transform: scale(0.75, 0.75);
-ms-transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
#panel1l:checked ~ div.p6,
#panel2l:checked ~ div.p1,
#panel3l:checked ~ div.p2,
#panel4l:checked ~ div.p3,
#panel5l:checked ~ div.p4,
#panel6l:checked ~ div.p5,
#panel1r:checked ~ div.p6,
#panel2r:checked ~ div.p1,
#panel3r:checked ~ div.p2,
#panel4r:checked ~ div.p3,
#panel5r:checked ~ div.p4,
#panel6r:checked ~ div.p5
{left:0; z-index:90; box-shadow:0 5px 20px; color:#496624;
transform: scale(0.75, 0.75);
-o-transform: scale(0.75, 0.75);
-ms-transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
#panel1l:checked ~ div.p2 label.left {display:none;}
#panel1l:checked ~ div.p1 label {display:none;}
#panel1l:checked ~ div.p6 label.right {display:none;}

#panel6l:checked ~ div.p1 label.left {display:none;}
#panel6l:checked ~ div.p6 label {display:none;}
#panel6l:checked ~ div.p5 label.right {display:none;}

#panel5l:checked ~ div.p6 label.left {display:none;}
#panel5l:checked ~ div.p5 label {display:none;}
#panel5l:checked ~ div.p4 label.right {display:none;}

#panel4l:checked ~ div.p5 label.left {display:none;}
#panel4l:checked ~ div.p4 label {display:none;}
#panel4l:checked ~ div.p3 label.right {display:none;}

#panel3l:checked ~ div.p4 label.left {display:none;}
#panel3l:checked ~ div.p3 label {display:none;}
#panel3l:checked ~ div.p2 label.right {display:none;}

#panel2l:checked ~ div.p3 label.left {display:none;}
#panel2l:checked ~ div.p2 label {display:none;}
#panel2l:checked ~ div.p1 label.right {display:none;}

#panel1r:checked ~ div.p2 label.right {display:none;}
#panel1r:checked ~ div.p1 label {display:none;}
#panel1r:checked ~ div.p6 label.left {display:none;}

#panel6r:checked ~ div.p1 label.right {display:none;}
#panel6r:checked ~ div.p6 label {display:none;}
#panel6r:checked ~ div.p5 label.left {display:none;}

#panel5r:checked ~ div.p6 label.right {display:none;}
#panel5r:checked ~ div.p5 label {display:none;}
#panel5r:checked ~ div.p4 label.left {display:none;}

#panel4r:checked ~ div.p5 label.right {display:none;}
#panel4r:checked ~ div.p4 label {display:none;}
#panel4r:checked ~ div.p3 label.left {display:none;}

#panel3r:checked ~ div.p4 label.right {display:none;}
#panel3r:checked ~ div.p3 label {display:none;}
#panel3r:checked ~ div.p2 label.left {display:none;}

#panel2r:checked ~ div.p3 label.right {display:none;}
#panel2r:checked ~ div.p2 label {display:none;}
#panel2r:checked ~ div.p1 label.left {display:none;}