_footer.scss 10.2 KB
.new-footer-box {
    max-width: 95%;
    margin: auto;
    padding: 0;
    height: 40px;

    .menu-broker_footer-container {
        float: right;
        min-height: 40px;
        position: relative;
        top: 5px;

        text-align: right;
        max-width: 800px;

        #menu-broker_footer {
            margin: auto;
            padding: 0;
            display: inline-block;

            li {
                list-style-type: none;
                float: left;
                padding-right: 10px;

                a {
                    text-transform: uppercase;
                    text-decoration: underline;
                    color: #000;
                    font-family: "HelveticaNeue-Bold";

                }
            }


            li:last-child {
                padding-right: 0;
            }
        }
    }

 
}

.clear:before,
.clear:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clear:after {
    clear: both;
}

.mobile-only {
    display: none;

    @media (max-width: 786px) {
        display: block;
    }
}

#new-footer {
    background-color: #54565A;

    #footer-sidebar {

        height: auto;
        min-height: 200px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        max-width: 1366px;
        margin: auto;
        flex-direction: row;

        @media (max-width : 767px) {
            flex-direction: column;

        }

        #footer-sidebar1 {
            background-color: #54565A;
            order: 1;

            flex: 1;
            flex-basis: 300px;
            margin-left: 5px;
            margin-right: 5px;
            flex-wrap: wrap;

            @media (max-width : 767px) {
                order: 2;
                margin-top: -150px;

            }

            .widget_nav_menu {
                margin-top: 40px;

                @media (max-width : 767px) {
                    margin-top: 50px;
                    margin-left: 20px;
                }

                .menu {
                    list-style-position: inside;
                    padding-inline-start: 0px;

                    .menu-item {
                        list-style-type: none;

                        a {
                            color: #fff;

                            &:hover {
                                color: #999999;
                            }
                        }

                    }
                }

            }
        }

        #footer-sidebar2 {
            background-color: #54565A;

            order: 2;

            flex: 1;
            flex-basis: 300px;
            margin-right: 5px;

            @media (max-width : 767px) {
                order: 3;

            }

            .widget_custom_html {
                margin-top: 40px;
                margin-left: 50px;

                @media (max-width : 767px) {
                    margin-top: 0px;
                    margin-left: 25px;
                }

                .custom-html-widget {
                    .menu {
                        padding-inline-start: 0px;

                        @media (max-width : 767px) {
                            display: none;
                        }

                        .menu-item {

                            list-style-type: none;

                            a {
                                color: #fff;

                                &:hover {
                                    color: #999999;
                                }
                            }

                        }
                    }

                    .social {
                        list-style-position: inside;
                        padding-inline-start: 0px;

                        li {
                            display: inline-block;

                            a {
                                -webkit-transition: none !important;
                                transition: none !important;
                                display: inline-block !important;
                                width: 30px !important;
                                height: 30px !important;
                                text-indent: -999999px;
                                background-size: 400%;
                                box-shadow: none !important;
                                border: solid 1px #4A4E4F;
                                background-color: transparent !important;
                            }

                            a.instagram-icon {
                                background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.995" height="29.995" viewBox="0 0 29.995 29.995"><g id="Instagram" transform="translate(-393.483 -2539.291)"><rect id="Rectangle_71" data-name="Rectangle 71" width="29.995" height="29.995" transform="translate(393.483 2539.291)" fill="%23fff"/><g id="Group_111" data-name="Group 111"><rect id="Rectangle_72" data-name="Rectangle 72" width="13.149" height="13.149" rx="3.284" transform="translate(401.906 2547.714)" fill="none" stroke="%2354565a" stroke-width="1.689"/><circle id="Ellipse_19" data-name="Ellipse 19" cx="3.154" cy="3.154" r="3.154" transform="translate(405.327 2551.135)" fill="none" stroke="%2354565a" stroke-width="1.689"/><circle id="Ellipse_20" data-name="Ellipse 20" cx="0.713" cy="0.713" r="0.713" transform="translate(411.634 2549.709)" fill="%2354565a"/></g></g></svg>');
                                &:hover {
                                    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.995" height="29.995" viewBox="0 0 29.995 29.995"><g id="Instagram" transform="translate(-393.483 -2539.291)"><rect id="Rectangle_71" data-name="Rectangle 71" width="29.995" height="29.995" transform="translate(393.483 2539.291)" fill="%23999999"/><g id="Group_111" data-name="Group 111"><rect id="Rectangle_72" data-name="Rectangle 72" width="13.149" height="13.149" rx="3.284" transform="translate(401.906 2547.714)" fill="none" stroke="%2354565a" stroke-width="1.689"/><circle id="Ellipse_19" data-name="Ellipse 19" cx="3.154" cy="3.154" r="3.154" transform="translate(405.327 2551.135)" fill="none" stroke="%2354565a" stroke-width="1.689"/><circle id="Ellipse_20" data-name="Ellipse 20" cx="0.713" cy="0.713" r="0.713" transform="translate(411.634 2549.709)" fill="%2354565a"/></g></g></svg>');
                                }
                            }

                            a.facebook-icon {
                                background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.995" height="30" viewBox="0 0 29.995 30"><g id="Facebook" transform="translate(-312.767 -2539.291)"><rect id="Rectangle_69" data-name="Rectangle 69" width="29.995" height="30" transform="translate(312.767 2539.291)" fill="%23fff"/><path id="Path_778" data-name="Path 778" d="M324.15,2551.752h1.55v-1.507a4.031,4.031,0,0,1,.5-2.324,2.759,2.759,0,0,1,2.407-1.13,9.748,9.748,0,0,1,2.78.279l-.387,2.3a5.242,5.242,0,0,0-1.25-.187c-.6,0-1.143.217-1.143.819v1.753h2.473l-.173,2.244h-2.3v7.8H325.7V2554h-1.55Z" fill="%2354565a"/></g></svg>');
                                &:hover {
                                    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.995" height="30" viewBox="0 0 29.995 30"><g id="Facebook" transform="translate(-312.767 -2539.291)"><rect id="Rectangle_69" data-name="Rectangle 69" width="29.995" height="30" transform="translate(312.767 2539.291)" fill="%23999999"/><path id="Path_778" data-name="Path 778" d="M324.15,2551.752h1.55v-1.507a4.031,4.031,0,0,1,.5-2.324,2.759,2.759,0,0,1,2.407-1.13,9.748,9.748,0,0,1,2.78.279l-.387,2.3a5.242,5.242,0,0,0-1.25-.187c-.6,0-1.143.217-1.143.819v1.753h2.473l-.173,2.244h-2.3v7.8H325.7V2554h-1.55Z" fill="%2354565a"/></g></svg>');
                                }
                            }

                            a.linkedin-icon {
                                background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.995" height="29.995" viewBox="0 0 29.995 29.995"><g id="LinkedIn" transform="translate(-353.125 -2539.294)"><rect id="Rectangle_70" data-name="Rectangle 70" width="29.995" height="29.995" transform="translate(353.125 2539.294)" fill="%23fff"/><path id="Path_779" data-name="Path 779" d="M363.912,2560.562h-2.923v-9.357h2.923Zm-1.537-10.528h-.02a1.623,1.623,0,0,1-1.744-1.621,1.782,1.782,0,1,1,1.764,1.621Zm13.233,10.528h-3.315v-4.842c0-1.268-.518-2.132-1.659-2.132a1.67,1.67,0,0,0-1.581,1.146,2.134,2.134,0,0,0-.073.764v5.064H365.7s.042-8.578,0-9.357h3.283v1.468a3,3,0,0,1,2.919-1.559c2.077,0,3.709,1.346,3.709,4.245Z" fill="%2354565a"/></g></svg>');
                                &:hover {
                                    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.995" height="29.995" viewBox="0 0 29.995 29.995"><g id="LinkedIn" transform="translate(-353.125 -2539.294)"><rect id="Rectangle_70" data-name="Rectangle 70" width="29.995" height="29.995" transform="translate(353.125 2539.294)" fill="%23999999"/><path id="Path_779" data-name="Path 779" d="M363.912,2560.562h-2.923v-9.357h2.923Zm-1.537-10.528h-.02a1.623,1.623,0,0,1-1.744-1.621,1.782,1.782,0,1,1,1.764,1.621Zm13.233,10.528h-3.315v-4.842c0-1.268-.518-2.132-1.659-2.132a1.67,1.67,0,0,0-1.581,1.146,2.134,2.134,0,0,0-.073.764v5.064H365.7s.042-8.578,0-9.357h3.283v1.468a3,3,0,0,1,2.919-1.559c2.077,0,3.709,1.346,3.709,4.245Z" fill="%2354565a"/></g></svg>');
                                }

                            }

                        }
                    }
                }

            }
        }

        #footer-sidebar3 {
            background-color: #54565A;
            order: 3;
            flex: 1;
            flex-basis: 70%;
            align-self: flex-end;

            @media (max-width : 767px) {
                order: 1;

            }

            .widget_media_image {
                position: relative;
                float: right;
                margin-top: -170px;

                @media (max-width : 767px) {
                    margin-top: 40px;
                    margin-right: 10px
                }

            }
        }
    }
}