/*--------------------------- 
Add Plugin Front-End CSS here 
---------------------------*/
/*---------------------------
CSS Filters
---------------------------*/
.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}
/*---------------------------
Animation Classes 
---------------------------*/
/*--------------------------- 
Responsive CSS here 
*
*   Remember these queries are a good start
*   but media queries go much deeper than this.
*
---------------------------*/
/*
Medium/Large Screens 
*/
@media only screen and (max-width: 1430px) {
    
}
/*
Medium Screens 
*/
@media only screen and (max-width: 1280px) {
    
}
/*
Large Tablet Screens 
*/
@media only screen and (max-width: 980px) {
    
}
/*
Medium Tablet Screens 
*/
@media only screen and (max-width: 768px) {

}
/*
Small Tablet/Largest Phone Screens 
*/
@media only screen and (max-width: 600px) {
    
}
/*
Large Phone Screens 
*/
@media only screen and (max-width: 420px) {
    
}
/*
Medium Phone Screens 
*/
@media only screen and (max-width: 380px) {
    
}
/*
Small Phone / Apple Watch Screens 
*/
@media only screen and (max-width: 320px) {
    
}