/* Project Specific CSS */
.projectList::-webkit-scrollbar, .folder::-webkit-scrollbar, .projectTitle::-webkit-scrollbar .projectList::-webkit-scrollbar{
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
}

.youtube {
    aspect-ratio: 560/315;
    width: 100%; 
    height: auto;

}

.vimeo {
    aspect-ratio: 640/360;
    width: 100%; 
    height: auto;

}


@media only screen and (max-width: 900px) {
    .projectList{
        height:calc(100% - 10px);
        width: 100%;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
    }

    .projectListItem{
        margin: .5em 0;
        display: flex;
        flex-flow: column;
    }

    .projectListItem::after{

        display: block;
        margin-top: 2px;
        content:"";
        width: 100%;
        background-color: #ffffff;
        height:2px;
        margin-bottom: 3px;
        transform: translateX(0px);
    }

    .projectTitle{
        transition: all .5s;
        display: inline-block;
        /*z-index: 99;*/
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
    }

    .projectTitle:hover{cursor: pointer;}

    .projectContent{
        display:none;
        width: 100%;
    }


    .projectContent img, .video{
        max-width:100%; 
        width: 100%;
        height: auto; 
        border-radius: 4px;
        margin: .2em 0;
    }

    .closeProject{
        text-align: center;
        text-align: -webkit-center;
        transition: transform .5s;
    }

    .imgGallery{
        width:calc(100% - 5px);
        display: grid;
        grid-gap: 5px;
        grid-template-columns: 50% 50%;
    }

    .imgGallery img { margin: 2.5px 0; }
}

@media only screen and (min-width: 900px) {
    .projectList{
        height:100%;
        overflow-y: scroll;
        border-radius: 4px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
    }
    
    .projectListItem{
        margin: .3em 0;
        display: flex;
        flex-flow: column;
    }
    
    .projectListItem::after{
    
        display: block;
        margin-top: 2px;
        content:"";
        width: 100%;
        background-color: #ffffff;
        height:2px;
        margin-bottom: 3px;
        transform: translateX(0px);
    }
    
    .projectTitle{
        transition: all .5s;
        display: inline-block;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
        font-size: calc(1.1rem + .7vw);
        flex: 1;
    }
    
    .projectContent{
        display:none; 
        flex-grow: 1;
    }
    
    .projectContent img, .video{
        max-width:100%; 
        width: 100%;
        height: auto; 
        border-radius: 4px;
        margin: .1em 0;
    }
    
    .closeProject{
        text-align: center;
        text-align: -webkit-center;
        transition: transform .5s;
    }

    .imgGallery{
        width:calc(100% - 5px);
        display: grid;
        grid-gap: 5px;
        grid-template-columns: 50% 50%;
    }
    
    .imgGallery img { margin: 2.5px 0; }
   
}    

@media (hover: hover) {
    .closeProject:hover{
        cursor: pointer;
        transform: scale(110%);
    }
}