/* Title */

.accordion h2
{
    font-family: "PatrickHand", sans-serif;

    margin: 0;
    cursor: pointer;

	padding-top: 0;
}

.accordion ul
{
    padding: 0em 1em 0.5em;
    border-radius: 0.4em;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 
    0 2px 2px 0 rgba(255, 255, 255, 0.19);

    list-style: none;
}

.accordion li
{
	padding-top: 1em;
    border-top: 2px dashed rgb(75, 44, 142);

    list-style-type: none;
    
	animation: flipdown 0.5s ease both;
}

.accordion li:nth-child(1){ border:none; }
.accordion li:last-of-type { padding-bottom: 0; }


@keyframes flipdown 
{
	0% {
		opacity: 0;
		transform-origin: top center;
		transform: rotateX(-90deg);
	}

	5% { opacity: 1; }

	80% { transform: rotateX(8deg); }

	83% { transform: rotateX(6deg); }

	92% { transform: rotateX(-3deg); }

	100% {
		transform-origin: top center;
		transform: rotateX(0deg);
	}
}

/* Arrow */

.accordion .arrow 
{
    float: right;
    padding-top: 0.5em;
    padding-right: 0.5em;
}

.accordion .arrow:before, 
.accordion .arrow:after 
{
	content: "";
	position: absolute;
	background-color: rgb(75, 44, 142);
	width: 3px;
	height: 9px;

	transition: all 0.25s ease-in-out;
}

.accordion .arrow:before 
{
	transform: translate(-2px, 0) rotate(45deg);
}

.accordion .arrow:after 
{
	transform: translate(2px, 0) rotate(-45deg);
}


.accordion input[type=checkbox]:checked ~ .arrow:before 
{
	transform: translate(2px, 0) rotate(45deg);
}

.accordion input[type=checkbox]:checked ~ .arrow:after 
{
	transform: translate(-2px, 0) rotate(-45deg);
}



/* Content + expand */

.accordion p
{
	/* max-height: 800px; */

    overflow: hidden;
	opacity: 1;

    transform: translate(0, 0);
	transition: all 0.25s ease-in-out;
}

.accordion img
{
    max-width: 650px;
}

.accordion input[type=checkbox]
{
    position: absolute;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;
}

.accordion input[type=checkbox]:checked ~ p
{
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translate(0, 50%);
}