.accordion{
	max-width: 1024px;
	height: 295px;
	font-family:Tahoma, Geneva, sans-serif;
	overflow: hidden;
}

.accButton-caption dl { height:289px; overflow:hidden; }

.accButton-input:checked ~ .accButton-caption dl dt { padding:15px 15px 0 25px; margin:0; font-size:12pt; font-weight:bold; }
.accButton-input:checked ~ .accButton-caption dl dd { padding:15px 15px 0 25px; margin:0; font-size:10pt; display:block; }
.accButton-input:checked ~ .accButton-caption dl { padding:0; margin:0; }

.accButton-caption dl dt { padding:5px 10px; margin:0; font-size:10pt; font-weight:bold; }
.accButton-caption dl dd { padding:0; margin:0; font-size:10pt; display:none; }
.accButton-caption dl dd p a { color: #0000aa; }
.accButton-caption dl { padding:0; margin:0px 295px 0 -295px; }
.accButton-input:checked ~ .accButton-caption { right:0; }


.accordionITEM {
	position: absolute;
	z-index: 1;
	top: 0;
	box-shadow: 0 0 0 1px #fff;
	transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;   
}
.accordionITEM:first-child {
	position: relative;
	left: 0 !important;
	width: 76.7%;
	max-width:784px;
}
.accordionImg {
	width: 784px;
	height:295px;
	position: relative;
	display: block;
	opacity: 0.2;
	transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
}

.accButton-input {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	opacity: 0;
}
.accButton-input:checked { width: 0;  }
.accButton-input:hover ~ .accordionImg { opacity: 0.4; }
.accButton-input:checked ~ .accordionImg { opacity: 1; }
.accButton-input:checked ~ .accordionITEM { left: 100%; }
.accButton-input ~ .accordionITEM { /*left: 8%;*/ }


/* styles for different images number 
.accNumber2 .accordionITEM { left: 43%; }
.accNumber3 .accordionITEM { left: 22%; }
.accNumber4 .accordionITEM { left: 15%; }
.accNumber5 .accordionITEM { left: 6.7%; }
.accNumber6 .accordionITEM { left: 8.6%; }
.accNumber7 .accordionITEM { left: 7.2%; }
.accNumber8 .accordionITEM { left: 6.2%; }
.accNumber9 .accordionITEM { left: 5.4%; }    */



/* styles for different images number */
.accNumber2 .accordionITEM { left:8%; }
.accNumber3 .accordionITEM { left:8%; }
.accNumber4 .accordionITEM { left:8%; }
.accNumber5 .accordionITEM { left:7.65%; max-width:100%; }
.accNumber6 .accordionITEM { left:8%; }
.accNumber7 .accordionITEM { left:8%; }
.accNumber8 .accordionITEM { left:8%; }
.accNumber9 .accordionITEM { left:8%; }


/* Background Colors */
.color_Cyan { background-color:#0072d6; border-color:#0072d6; }
.color_Teal { background-color:#009ba9; border-color:#009ba9; }
.color_Blue { background-color:#004678; border-color: #004678; }
.color_Green { background-color:#419000; border-color:#419000; }
.color_Magenta { background-color:#ab2280; border-color:#ab2280; }



/* caption styles */
.accButton-caption {
	position: absolute;
	top: 0;
	width: 295px;
	height: 100% !important;
	text-align: left;
	text-shadow:0 0 5px #000;
	color: #fff;
}



.accButton-input ~ .accButton-caption  dl /*dt*/  {
	position: relative;

	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

    transform-origin: 100% 0 0;
	-webkit-transform-origin: 100% 0 0;
	-moz-transform-origin: 100% 0 0;
	-ms-transform-origin: 100% 0 0;
	-o-transform-origin: 100% 0 0;

	/* Maybe Enable this? 
	transition:margin 0.3s;	*/	
}

.accButton-input:checked ~ .accButton-caption dl /*dt*/ {
	position: relative;
	/*right: 0%;*/
	top: 0;
	margin-left:0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);

	/*transition:all 0.16s;*/
}


.accButton-input:checked ~ .accButton-caption  {
	background-image:url(../images/accordion/accordeon_background_selected.png);
	background-position:left;
	background-repeat:no-repeat;
	color: #000;
	text-shadow:0 0 5px #fff;
}


/* CAPTION with COLOR VARIATIONS - To be decided...
.color_Cyan .accButton-input:checked ~ .accButton-caption  { background-image:url(../images/accordion/accordeon_back_cyan.png);  }
.color_Blue .accButton-input:checked ~ .accButton-caption  { background-image:url(../images/accordion/accordeon_back_blue.png); }
.color_Green .accButton-input:checked ~ .accButton-caption  { background-image:url(../images/accordion/accordeon_back_green.png);  }
.color_Magenta .accButton-input:checked ~ .accButton-caption  { background-image:url(../images/accordion/accordeon_back_magenta.png); }
.color_Teal .accButton-input:checked ~ .accButton-caption  { background-image:url(../images/accordion/accordeon_back_teal.png);  }
*/


.accButton-input ~ .accButton-caption  {
	/*background-image:url(../images/accordion/accordeon_background_unselected.png);*/
	width:295px;
	height:295px;
	background-position:left;
	background-repeat:repeat-y;
}



/* MEDIA QUERIES */

@media screen and (min-width: 769px) {
}

@media screen and (min-width: 641px) and (max-width: 768px) {
	.accNumber5 .accordionITEM { left:10%; max-width:100%; }
	.accordionITEM:first-child { width: 71.7%; }
	.accButton-input:checked ~ .accButton-caption dl dt { padding:15px 15px 0 25px; }
	.accButton-input:checked ~ .accButton-caption dl dd { padding:15px 15px 0 25px; }
	.accButton-caption dl dt { padding:5px 10px; font-size:10pt; }
}

@media screen and (min-width: 480px) and (max-width: 640px) {
	.accNumber5 .accordionITEM { left:12%; max-width:100%; }
	.accordionITEM:first-child { width: 68%; }
	.accButton-input:checked ~ .accButton-caption dl dt { padding:15px 15px 0 25px; font-size:12pt;  }
	.accButton-input:checked ~ .accButton-caption dl dd { padding:15px 15px 0 25px; font-size:10pt; line-height:1.3em; }
	.accButton-caption dl dt { padding:5px 10px; font-size:10pt; line-height:1.2em; }
}


@media screen and (max-width: 479px) {
	.accButton-caption {	width:120px; }
	.accButton-input:checked ~ .accButton-caption { width:100%; }
	.accNumber5 .accordionITEM { left:20%; max-width:100%; }
	.accordionITEM:first-child { width: 56%; }
	.accButton-input:checked ~ .accordionImg { opacity: 0.25;  }
	.accButton-caption dl dt { padding:2px 10px; font-size:10pt; line-height:1.1em; }
	.accButton-input ~ .accButton-caption  dl /*dt*/  { transition:none; }

	 .accButton-caption dl dd p a { color: #fff; }

	/* DARK MINIMUM VERSION */
	.accButton-input:checked ~ .accordionImg { opacity: 0.25;  }
	.accButton-input:checked ~ .accButton-caption  { background-image:none; background-color:rgba(0,0,0,0.3); }
	.accButton-input:checked ~ .accButton-caption dl dt { padding:15px 15px 0 20px; font-size:11pt;    color:#fff; text-shadow: 0 0 4px #000;     }
	.accButton-input:checked ~ .accButton-caption dl dd { padding:15px 15px 0 20px; font-size:10pt;    color:#fff; text-shadow: 0 0 3px #000;     }
	

	/* WHITE MINIMUM VERSION 
	.accButton-input:checked ~ .accordionImg { opacity: 1;  }
	.accButton-input:checked ~ .accButton-caption  { background-image:none; background-color:rgba(255,255,255,0.8);  }
	.accButton-input:checked ~ .accButton-caption dl dt { padding:15px 15px 0 20px; font-size:11pt;      color:#000; text-shadow: 0 0 4px #fff;     }
	.accButton-input:checked ~ .accButton-caption dl dd { padding:15px 15px 0 20px; font-size:10pt;      color:#000; text-shadow: 0 0 4px #fff;     }
	*/

}



.accNumber1 .accordionITEM:first-child,
.accNumber1 .accordionImg
{
	width: 100%;
	max-width: 100%;
}

.accNumber2 .accordionITEM:first-child
{
	width: 92%;
	max-width: 100%;
}
.accNumber2 .accordionImg
{
	width: 940px;
}


.accNumber3 .accordionITEM:first-child
{
	width: 87%;
	max-width: 100%;
}
.accNumber3 .accordionImg
{
	width: 890px;
}

.accNumber4 .accordionITEM:first-child
{
	width: 80%;
	max-width: 100%;
}
.accNumber4 .accordionImg
{
	width: 820px;
}


/* END */