* {
margin : 0;
padding : 0;
box-sizing : border-box;
}
html, body {
width : 100%;
height : 100%;
}
body {
padding : 1.5rem;
font-family : 'Open Sans', sans-serif;
font-size : 100%;
font-weight : normal;
line-height : 1.4;
}
.accordion {
margin : 0;
margin-bottom : 1.5rem;
padding : 0;
list-style : none;
}
.accordion_item {
border-bottom : 1px solid #cceafc;
}
.accordion_item:last-of-type {
border-bottom : none;
}
.accordion_trigger {
display : block;
background-color : #50b1de;
color : #ddd;
font-weight : normal;
cursor : pointer;
padding : 1.2em;
}
.accordion_toggle:checked ~ .accordion_trigger {
background-color : #00aff5;
}
.accordion_toggle {
position : absolute;
display : none;
}
.accordion_target {
border : 0;
clip : rect(0 0 0 0);
height : 1px;
margin : -1px;
overflow : hidden;
padding : 0;
position : absolute;
width : 1px;
background-color : #cceafc;
}
.accordion_toggle:checked ~ .accordion_target {
position : static;
overflow : visible;
width : auto;
height : auto;
margin : auto;
clip : auto;
padding : 1.5rem;
animation : fadeIn 0.5s ease-in;
}
to {
opacity : 1;
}
to {
opacity : 1;
}
@keyframes fadeIn {
from {
opacity : 0;
}
}
to {
opacity : 1;
}

.accordion_new {
	margin:20px 10px 10px 10px;
}

.accordion_new .accordion_trigger {
	padding: 0.6em !important;
	color: #fff !important;
	background-color: #888;
}

.accordion_new .accordion_target {
  background-color: transparent !important;
}