.material-icons {
    transition: all 0.25s ease-in;
}

/* Rules for sizing the icon. */
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-15 { font-size: 15px; }
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-17 { font-size: 17px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-22 { font-size: 22px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-26 { font-size: 26px; }
.material-icons.md-28 { font-size: 28px; }
.material-icons.md-30 { font-size: 30px; }
.material-icons.md-32 { font-size: 32px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-auto { font-size: 28px; }

/* color things */
.material-icons.mi_btn_text {
    color: var(--color-text);
}
.material-icons.mi_btn_text:hover {
    color: var(--color-cta);
}


/* ===================================
        SECTIE: Mobiel 
=================================== */

/*
    1200px - large devices and wide screens
*/
@media screen and (max-width: 1200px) {
    
}


/*
    992px - smaller desktop viewpoints
*/
@media screen and (max-width: 992px) {
    
}


/*
    768px - most tablets
*/
@media screen and (max-width: 768px) {
    span.material-icons.md-auto { font-size: 26px; }
}


/*
    480px - small devices and most phones
*/
@media screen and (max-width: 480px) {
    span.material-icons.md-auto { font-size: 26px; }
}


/*
    320px - smaller phone viewpoints
*/
@media screen and (max-width: 320px) {
    span.material-icons.md-auto { font-size: 22px; }
}