[data-accordion-element-content] {
    height: auto;
    overflow: hidden;
    transition: height 0.5s;
}

* {
    box-sizing: border-box;
}

body {
    background: #eee;
    overflow: scroll;
}

.card {
    /*width: 400px;
  margin: 50px auto;*/
    border-radius: 2px;
    background: white;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

article {
    position: relative;
    font-family: "Roboto", sans-serif;
    transition: all 0.3s;
    background: #E8EAF6;
}

    article.selected {
        transform: scale(1.1);
        box-shadow: 0 0 5px rgba(2, 2, 2, 0.4);
        z-index: 2;
    }

h1 {
    position: relative;
    background: #3F51B5;
    padding: 20px 75px 20px 30px;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    overflow: hidden;
    transition: background 0.3s;
}

    h1:hover, .selected h1 {
        cursor: pointer;
        background: #3949AB;
    }

    h1:before, h1:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -1px;
        margin-right: 30px;
        width: 20px;
        height: 2px;
        background: #fff;
        transition: transform 0.3s;
    }

    h1:before {
        transform: rotate(0deg);
        animation: close-line-one-in 0.8s forwards;
    }

.selected h1:before {
    animation: close-line-one-out 0.8s forwards;
}

h1:after {
    transform: rotate(90deg);
    animation: close-line-two-in 0.8s forwards;
}

.selected h1:after {
    animation: close-line-two-out 0.8s forwards;
}

.content2 {
    opacity: 0;
    transform: translateY(20px);
    transition: all ease-out 0.4s 0.1s;
}

.selected .content2 {
    transform: translateY(0);
    opacity: 1;
}

.collapsed .content2 {
    display: none;
}

/*p {
    padding: 0 30px 0;
    background: #E8EAF6;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}*/

.pCustom {
    padding: 0 30px 0;
    background: #E8EAF6;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

@keyframes close-line-one-out {
    0%, 50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(50px);
    }

    76% {
        transform: translateX(50px) translateY(50px);
    }

    100% {
        transform: rotate(45deg);
    }
}

@keyframes close-line-one-in {
    0%, 20% {
        transform: rotate(45deg);
    }

    60% {
        transform: translateX(50px) translateY(50px) rotate(45deg);
    }

    61% {
        transform: translateX(50px);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes close-line-two-out {
    0%, 50% {
        transform: rotate(90deg);
    }

    75% {
        transform: translateY(-50px) rotate(90deg);
    }

    76% {
        transform: translateY(-50px) translateX(50px) rotate(90deg);
    }

    100% {
        transform: rotate(135deg);
    }
}

@keyframes close-line-two-in {
    0% {
        transform: rotate(135deg);
    }

    50% {
        transform: translateY(-50px) translateX(50px) rotate(135deg);
    }

    51% {
        transform: translateY(-50px) rotate(90deg);
    }

    100% {
        transform: rotate(90deg);
    }
}
/*# sourceMappingURL=accordion-in-vanilla-js-with-css-transition.css.map */