.accordion {
	width: 90%;
	overflow: hidden;
	margin: 1em auto;
	border: solid 1px #d7dcde;
	padding: 0;
	height:100% !important;
}

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target {
	background: #fFF;
	padding: 10px;
	height: 350px;
	width: 97%;
	overflow: auto;
}

.accordion section:target:hover {
	background: #FFF;
}

.accordion section:target h3 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	color: #9be100;
	font-size: 1.5em;
	font-weight: 300;
}

.accordion section:target h2 {
	display: none;
}

.accordion section:target .sectionContent {
	display: block;
}

.accordion section h2 a {
	/*padding: 0.4em 0.7em;*/
	display: block;
	font-size: 37px;
	font-weight: 700;
	color: #000000;
	text-decoration: none;
	text-transform:uppercase;
	font-family: "Barlow Condensed";
	transform: rotate(180deg) translateX(-100px);
}

/*set style of closed slide*/
.accordion section {
	float: left;
	overflow: hidden;
	color: #333;
	cursor: pointer;
	margin-bottom: 1px;
	width: 100%;
	height: 40px;
	-webkit-transition: height 0.2s ease-out;
	-moz-transition: height 0.2s ease-out;
	-o-transition: height 0.2s ease-out;
	-ms-transition: height 0.2s ease-out;
	transition: height 0.2s ease-out;
	margin-right: 0px;
	background-color:#ffd735;

}

.accordion section h3, .accordion section .sectionContent {
	display: none;
}

.accordion section:after {
	position: relative;
	font-size: 24px;
	color: #000;
	font-weight: bold;
}
/*
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
*/
/*End General Accordion****************************************************************************/


/* VERTICAL ACCORDION */
.accordion section {
	
}
/*Set height of the slide*/
.accordion :target {
	background-color:rgb(255, 245, 204);
}

.accordion section h2 {
	position: relative;
	left: 0;
	top: -15px;
}

/*Set position of the number on the slide*/
.accordion section:after {
	top: -60px;
	left: 810px;
}

.accordion section:target:after {
	left: -9999px;
}

div.sectionContent {
	padding: 10px;
	overflow: auto;
}




/*Up To Ipad portrait width (768px) */
@media only screen 
and (min-width : 768px) {
 /* STYLES GO HERE */
/* Horizontal Accordion */
	.accordion section {
		width: 5%;
		height: 320px;
		-moz-transition: width 0.2s ease-out;
		-webkit-transition: width 0.2s ease-out;
		-o-transition: width 0.2s ease-out;
		-ms-transition: width 0.2s ease-out;
		transition: width 0.2s ease-out;
		margin-right: 1px;
		margin-bottom: 0;
		width: 40px;
	}
  
/*Position the number of the slide*/
  /*
.accordion section:after{top:140px;left:15px;}
*/
  
/*Header of closed slide*/
	.accordion section h2 {
		-webkit-transform: translateX(-100%) rotate(-90deg);
		-moz-transform: translateX(-100%) rotate(-90deg);
		-o-transform: translateX(-100%) rotate(-90deg);
		-ms-transform: translateX(-100%) rotate(-90deg);
		transform: translateX(-100%) rotate(-90deg);
		-webkit-transform-origin: right top;
		-moz-transform-origin: right top;
		-o-transform-origin: right top;
		-ms-transform-origin: right top;
		transform-origin: right top;
     -webkit-backface-visibility: hidden;
		text-align: right;
  /* position: absolute; */
		margin: 0;
		top: 0;
		left: 0;
		width: 350px;
	} 

/*On mouse over open slide*/
	.accordion section:target {
		width: calc(100% - 165px);
		height: 320px;
		overflow: hidden;
	}
  
  
/*End Horizontal Accordion *********************************************************************/;
}

/*Up To Ipad portrait width (768px) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
 /* STYLES GO HERE */;
}

/*Bigger width (>768px) */
@media only screen 
and (min-width : 1024px) {
 /* STYLES GO HERE */;
}