@import "../../css/colors.css";

#footer-mobile-container {
	margin:0;
    padding:0;
    position: relative;
    bottom: 0;
    height: 80px;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
}

#mobile-footer {
    height: 16vmin;
    background-color: white;
    position: fixed;
    width: 100%;
    bottom: 0;
    box-shadow: 0px 1px 3px 2px var(--LogoLightBlue);
    display: -webkit-flex;
    -webkit-justify-content: center;
    display: flex;
    justify-content: center;
    display: table;
    text-align: center;
}


.col-footer-4{
    width: 25%;
    display: table-cell;
    vertical-align: middle;
}

.col-footer-3 {
    width: 33%;
    display: table-cell;
    vertical-align: middle;
}

.ic-mobile-footer {
    cursor:pointer;
}


.actionName{
	font-family:'Open Sans'; font-weight:400
}

#mobile-footer .fa{
    font-size:40px;
}

@media screen and (min-width: 1001px) {
    #footer-mobile-container {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    #mobile-footer {
        height: 16vmin;
        background-color: white;
        position: fixed;
        width: 100%;
        bottom: 0;
        box-shadow: 0px 1px 3px 2px var(--DarkGrey);
        display: -webkit-flex;
        -webkit-justify-content: center;
        display: flex;
        justify-content: center;
        display: table;
        text-align: center;
    }

    .col-footer {
        width: 25%;
        display: table-cell;
        vertical-align: middle;
    }

    .ic-mobile-footer {
        width: 30%;
        height: auto;
		margin-bottom: -10px;
		margin-top:6px;
    }
}

@media screen and (max-width: 490px) {
    #mobile-footer {
        line-height: 22px;
    }

        #mobile-footer .fa {
            font-size: 36px;
            margin-top: 4px;
        }
}

@media screen and (max-width: 400px) {
    #mobile-footer {
        line-height: 22px;
    }

        #mobile-footer .fa {
            font-size: 30px;
            margin-top:4px;
        }
}