/* Media Query
--------------------*/
@media screen {
    .iconNavi {}

    .iconNavi ul {
        margin: 0;
    }

    .iconNavi li {
        display: inline-block;
    }

    .iconNavi li a {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0rem;
        text-indent: -10000px;
        /* background-color: grey; */
        position: relative;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: contain;
        border: none;
    }

    .iconNavi li a.sanitar {
        background-image: url(../images/icons/sanitar.svg);
    }

    .iconNavi li a.heizung {
        background-image: url(../images/icons/heizung.svg);
        width: 4rem;
    }
    
    .iconNavi li a.photovoltaik {
        background-image: url(../images/icons/photovoltaik.svg);
        width: 4rem;
    }
    
    .iconNavi li a.home {
        background-image: url(../images/logo/theo-michel.svg);
        width: 10rem;
    }    

    .iconNavi li a:hover {
        transform: scale(1.125);
        transform-origin: bottom center;
        transition: var(--transition);
    }

/* 
    .iconNavi li a:after {
        display: inline-block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2rem;
        height: 2rem;
        text-indent: 1000px;
        background-color: red;
    } */
}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    .iconNavi li a {
        width: 4rem;
        height: 6rem;
        margin-right: 1.5rem;
    }

    .iconNavi li a.sanitar {
    }

    .iconNavi li a.heizung {
        width: 8rem;
    }
    
    .iconNavi li a.photovoltaik {
        width: 7.25rem;
    }
    
    .iconNavi li a.home {
        width: 23rem;
    }    

}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Media ends
--------------------*/



/* Footer Icon Navi
--------------------*/
@media screen {
    .mm-panel .iconNavi,
    #footer .iconNavi {
        transform: scale(0.95);
        transform-origin: center left;
        margin-bottom: 2rem;
    }

    .mm-panel .iconNavi .home,
    #footer .iconNavi .home {
        display: none;
    }

    .mm-panel .iconNavi {
        transform-origin: center;
        text-align: center;
        margin: 3rem auto 1rem ;
    }
}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    .mm-panel .iconNavi,
    #footer .iconNavi {
        transform: scale(0.65);
    }
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Footer Icon Navi ends
--------------------*/