/* ------------Main------------ */

main {
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.8s ease-in-out,
                filter 0.8s ease-in-out;
}

.show-main {
    opacity: 1;
    filter: none;
}


/* ------------Tab-Group------------ */

.show-tab {
    min-height: 49px;
    height: 49px;
    animation: tabIn 0.4s ease-in-out 0.4s forwards;
}

.hide-tab {
    min-height: 464px;
    height: calc(100vh - 284px);
    animation: tabOut 0.4s ease-in-out 0.4s forwards;
}

@keyframes tabIn {

    from {
        min-height: 49px;
        height: 49px;
    }

    to {
        min-height: 465px;
        height: calc(100vh - 284px);
    }

}

@keyframes tabOut {

    from {
        min-height: 465px;
        height: calc(100vh - 284px);
    }

    to {
        min-height: 49px;
        height: 49px;
    }

}

.plus path:last-child {
    transform-origin: center;
    transition: transform 0.4s ease-in-out;
}

.transform-icon path:last-child {
    transform: scaleY(0);
    transition: transform 0.4s ease-in-out 0.8s;
}

.tab-content {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.4s ease-in-out,
                filter 0.4s ease-in-out;
}

.show-content {
    opacity: 1;
    filter: none;
    transition: opacity 0.4s ease-in-out 0.8s,
                filter 0.4s ease-in-out 0.8s;
}


@media (hover) {

    .hide-tab:hover {
        background: var(--color-element-40);
        background-image: url(images/misc/pattern.svg);
        background-position: 0 0,0 0;
        background-size: auto,auto;
    }

    .no-hover:hover {
        background: none;
    }

    .button:hover {
        background: var(--color-element-20);
    }

}


@media screen and (min-width: 1040px) {
    
    .hide-tab {
        min-height: 600px;
        height: calc(100vh - 299px);
    }
    
    @keyframes tabIn {
    
        from {
            min-height: 49px;
            height: 49px;
        }
    
        to {
            min-height: 600px;
            height: calc(100vh - 299px);
        }
    
    }
    
    @keyframes tabOut {
    
        from {
            min-height: 600px;
            height: calc(100vh - 299px);
        }
    
        to {
            min-height: 49px;
            height: 49px;
        }
    
    }

}