/* I came across this, did not know it was possible. Can just attach a 
   drop shadow to an image and it will include the transparency. Nice! 
   
   read: https://css-tricks.com/almanac/properties/f/filter/ */
.DROP_SHADOW_IMG {
    -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
    filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));  
}
/* .................................................. CSS3 Filters */

.grayscale {-webkit-filter: grayscale(100%);}
.brightness {-webkit-filter: brightness(0.5);}
.blur {-webkit-filter: blur(2px);}
.saturate {-webkit-filter: saturate(4);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.contrast {-webkit-filter: contrast(150%);}
.opacity {-webkit-filter: opacity(50%);}
.sepia {-webkit-filter: sepia(100%);}
.invert {-webkit-filter: invert(100%);}


/* SO THE BLUR FILTER IS VERY SLOW :\ I have to remove it.. */
.defocus {
    /* -webkit-filter: blur(4px) brightness(0.5);
    filter: blur(4px) brightness(0.5); */


    /* -webkit-filter: brightness(0.3); */
    /* filter: brightness(0.3); */
}



section#MainMenuBG {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/assets/images/refs/main-menu/Desk_ZoomedIn.jpg);
    width: 1920px;
    height: 1080px;
    z-index: 1;
    
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    /* filter: none; 
    -webkit-filter: none; */
}


#jack_language_select.main-menu {
    background-image: url(/assets/images/ui/jack_ref.png);
    position: absolute;
    left: 1202px; 
    top: 260px;
    width: 228px;
    height: 340px;
    z-index: 13;
    background-size: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

#jack_speech_balloon.main-menu {
    background-image: url(/assets/images/ui/speech_balloon.png);
    position: absolute;
    left: 484px;
    top: 200px;
    width: 722px;
    height: 322px;
    z-index: 2;
    background-size: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}