@import "../helpers/colors.scss";

footer {
    background: #fff;
    margin: 38px 0 0 -1%;
    padding: 30px;
    height: 92px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 500;
    border-top: 1px solid $lightGray;

    .copyrights {
        position: relative;
        top: 0;
        right: 0;

        &::after {
            content: " ";
            position: absolute;
            top: 0;
            right: 0;
            background: #676767;
            height: 40px;
            width: 1px;
        }

        p {
            width: 80%;
            margin: 0 auto;
            font-size: 1.4rem;
            color: #2b2b2b;
            line-height: 1.3;
        }
    }

    .footer-menu {
        .footer-menu-item {
            display: inline;
            position: relative;
            top: 0;
            left: 0;
            margin-right: 12px;

            a {
                font-size: 2rem;
                color: #2b2b2b;
                font-weight: bold;
            }

            &::after {
                content: "|";
                position: absolute;
                top: -10px;
                right: -10px;
                font-size: 20px;
            }

            &:last-child::after {
                display: none;
            }
        }
    }

    .logo-wrapper {
        // height: 30px;
        // width: 90px;
        // float: right;
        position: absolute;
        @include ver-center();

        img {
            height: 70px;
            max-height: 70px;
            width: auto;
        }
    }
}

@media (max-width: 1120px) {
    footer {
        .logo-wrapper {
            float: left;
            margin-left: -20%;
        }
    }
}
@media (max-width: 1024px) {
    footer .logo-wrapper img {
        height: 60px;
    }
}

@media (max-width: 768px) {
    footer {
        margin-top: 20px;

        .copyrights {
            flex: 0 0 40%;
            max-width: 40%;

            p {
                font-size: 1rem;
            }
        }
    }
}