/*
Module Name= Accordion
Updated= 26.02.17 */

/*
=Project Description Container 
============================================= */
.proj-desc {
 position: relative;
}

/*
=Chevron Checkbox 
============================================= */
.proj-desc input#chevron {
 display: none;
}

/*
=Chevron Container
============================================= */
.chevron {
 position: absolute;
 top: 0; right: 0;
 width: 3.5rem; height: 3.5rem;
 padding: 0.5rem;
 transform: translate(.85rem, -0.7rem);
}

/*
=Chevron Label + Rotate Wrapper
============================================= */
.chevron label {
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 100%;
 opacity: 0;
 cursor: pointer;
}

.chevron .rotate-wrapper {
 display: flex;
 align-items: center;
 height: 100%;
 transition: transform 350ms ease;
}

input#chevron:checked + .chevron .rotate-wrapper {
 transform: rotate(180deg);
}

/*
=Chevron Lines
============================================= */
.chevron .rotate-wrapper::before,
.chevron .rotate-wrapper::after {
 content: "";
 background-color: rgb(255 45 0);
 width: 50%; height: 0.15rem;
}

.chevron .rotate-wrapper::before {
 transform: rotate(45deg) translate(0.17rem, -0.17rem);
}

.chevron .rotate-wrapper::after {
 transform: rotate(-45deg) translate(-0.17rem, -0.17rem);
}

/*
=Accordion 
============================================= */
.accordion {  
 /* background: linear-gradient(rgb(243 241 239), rgb(250 248 246)); */
 /* background-color: rgb(243 241 239); */
 color: transparent;

 display: grid;
 grid-template-rows: 0fr;

 margin-bottom: 0;
 padding-right: 1rem;
 transition: 
  background-color 350ms ease,
  color 350ms ease,
  grid-template-rows 350ms ease;
}

input#chevron:checked ~ .accordion {
 background-color: rgb(243 241 239);
 color: rgb(58 65 72);
 grid-template-rows: 1fr;
}

input#chevron:checked ~ .accordion span.red {
 color: rgb(255 45 0);
}

.accordion span.red {
 transition: color 350ms ease;
}

.accordion .panel {
 overflow: hidden;
}

.accordion p:nth-child(1) {
 /* margin-top: 0.5rem; */
}

/* ========================================== */