/* @import url(index.css); */

.shelf {
    position: relative;
    padding-bottom: .5rem;
    margin-top: 1rem;
}
#feature-box{
    padding-bottom: 1rem;
}
#engineering-shelf{
    margin-bottom: 5rem;
}
.feature {
    font-family: 'Titillium Web', sans-serif;
    border-bottom: .2rem solid grey;
    border-radius: 5px 1px 1px 1px;
    margin-top: 1rem;
    /* overflow:hidden; */
    /* position:absolute; */
    transition: all 1s ease-out;
    /* transition: border-radius 0s ease-in-out; */
}

@keyframes expandfeature {
    0% {
        transform:translateX(0%);
    }
    50% {
        transform:translateX(105%);
        max-height:0;
    }
    100% {
        transform:translateX(105%);
        max-height: 600%;
    }
}

/* .feature:hover .hccard-content {
    animation: expandfeature 1000ms;
    
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.feature:hover {
    background: rgba(var(--primary-accent-rgb),.2);
}
.feature:hover .feature-icon {
    transform: rotateZ(-180deg);
} */
.feature-icon {
    transition: transform .5s;
}
.feature .hccard-content {
    max-height: 0px;
    border-top: .08rem solid grey;
    border-bottom: .08rem solid grey;
    overflow: hidden;
    
    background-color: white;
    /* transition: transform .25s;*/
    /* transition: max-height 1s ease-in;  */

}
.feature .hccard-content p {
    padding: .5rem;
}

.feature.hccard {
    border: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    /* overflow:hidden; */
}

/* .feature::before {
    transition: transform .2s ease-out;
} */

.feature>div>span {
    text-align: center;
    font-size: 1rem;
    position: relative;
    display: table-cell;
    vertical-align:middle;
    
    width: 100%;
}

.feature>.hccard-title {
    
    z-index: 5;
    padding-bottom: 0;
    /* grid-template-columns: 1fr 1fr ; */
}
/* Mobile */
@media screen
and (min-width : 320px)
and (max-width : 480px){
    @keyframes feature-open-comp {
        from {
            max-height: 0;
        }
        to {
            max-height: 400%;
        }
    }
    .open .hccard-content {
        animation: feature-open-comp ease-in 500ms;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    .hccard-content p {
        /* overflow: hidden; */
    }
    .open .feature-icon{
        transform: rotateZ(-90deg);
    }
    @keyframes feature-open {
        from {
            height: 0;
        }
        to {
            height: 400%;
        }
    }
    .feature {
        /* transition: all 1s ease;  */
        height: 100%;
    }
    /* .feature {
        max-height:100%;
        
        transition: all 1s ease; 
    }
    #feature-box {
        height:100%
    } */
}

/* Small Tablets */
@media screen
and (min-width : 481px)
and (max-width : 768px){
    @keyframes feature-open {
        from {
            max-height: 0;
        }
        to {
            max-height: 400%;
        }
    }
    .open .hccard-content {
        animation: exandfeature ease-out 5000ms;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    .hccard-content p {
        overflow: hidden;
    }
    .open .feature-icon{
        transform: rotateZ(-90deg);
    }
    .feature {
        height:fit-content;
    }
}

/* Large Tablets/Laptops */
@media screen
and (min-width : 761px)
and (max-width : 1024px){
    .feature .hccard-title span{
        font-size: 1rem !important;
    }
    @keyframes expandfeature {
        0% {
            transform:translateX(0%);
        }
        50% {
            transform:translateX(110%);
            max-height: 0;
        }
        100% {
            transform:translateX(110%);
            max-height: fit-content;
            /* width: 200%; */
        }
    }
    .open .hccard-content {
        animation: expandfeature 1000ms;
    
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    .hccard-content p {
        overflow: hidden;
        max-width: fit-content;
    }
    .open .feature-icon{
        transform: rotateZ(-90deg);
    }
    .feature {
        height:3rem;
    }
    
}

/* Desktops */
@media screen 
and (min-width : 1025px)
and (max-width : 1200px) {
    .feature {
        height:3rem;
    }
        
    .feature:hover .hccard-content {
        animation: expandfeature 1000ms;
        
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    .feature:hover {
        /* border-radius: 20px 1px 5px 5px; */
        background: rgba(var(--primary-accent-rgb),.2);
        /* linear-gradient(90deg, var(--parchment) 0%,rgba(var(--parchment-rgb), .75) 50%, var(--parchment) 100%); */
    }
    .feature:hover .feature-icon {
        transform: rotateZ(-180deg);
    }
}

/* Large screens */
@media screen 
and (min-width : 1201px) {
    .feature {
        height:3rem;
    }
        
    .feature:hover .hccard-content {
        animation: expandfeature 1000ms;
        
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    .feature:hover {
        /* border-radius: 20px 1px 5px 5px; */
        background: rgba(var(--primary-accent-rgb),.2);
        /* linear-gradient(90deg, var(--parchment) 0%,rgba(var(--parchment-rgb), .75) 50%, var(--parchment) 100%); */
    }
    .feature:hover .feature-icon {
        transform: rotateZ(-180deg);
    }
}