html{
    height: 100% !important;
}

.overlay{
    opacity:0;
    -webkit-transition: all 0.2s;
    backdrop-filter:blur(0px);
    transition: all 0.2s;
    background: -webkit-linear-gradient(#0575E6, #734b6d); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0575E6, #734b6d); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0575E6, #734b6d); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0575E6, #734b6d);
    max-height: 100%;
}
    
.project:hover .overlay {
    opacity: 0.95;
    backdrop-filter:blur(5px);
    -webkit-transition: all 0.4s;    
    transition: all 0.4s;
    background: -webkit-linear-gradient(#0575E6,#021B79); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0575E6,#021B79); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0575E6,#021B79); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0575E6,#021B79);
    transform:translateY(0px);
}

.project-container > p {
    -webkit-transition: all 0.25s;    
    transition: all 0.25s;
    transform:translateY(10px);
}

.project:hover .project-container > p{
    -webkit-transition: all 0.4s;    
    transition: all 0.25s ease-out;
    transform:translateY(0px);
}

.project:active .project-container > p{
    -webkit-transition: all 0.4s;    
    transition: all 0.4s;
    opacity:1;
}


.roboto {
    font-family: 'Roboto Mono', monospace;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

.sr .fooReveal { 
    visibility: hidden;
    transform: perspective( 600px ) rotateY( 45deg );
}


.fade-out { animation: .7s fade-out ease forwards; }
.fade-in { animation: .7s fade-in ease forwards; }

@keyframes fade-out {
    from { opacity: 1; },
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; },
    to { opacity: 1; }
}