@import '../_vars';
@import '../bs/variables';
@import '../bs/mixins';

.mainPage {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;

    #mapContainer {
        position: relative;
    }

    .mainL {
        position: relative;
        width: 83%;
        flex: 1;
    }

    .mainR {
        position: relative;
        top: 0;
        right: 0;
        width: 17%;
        box-shadow: -1px -5px 7px #333;
    }
}

@media (max-width: 1520px) {
    .mainPage {
        .mainL {
            width: 79%;
        }

        .mainR {
            width: 21%;
        }
    }
}

@media (max-width: 1200px) {
    .mainPage {
        .mainL {
            width: 75%;
        }

        .mainR {
            width: 25%;
        }
    }
}

@media (max-width: 950px) {
    .mainPage {
        .mainL {
            width: 73%;
        }

        .mainR {
            width: 27%;
        }
    }
}

@media (max-width: 767px) {
    .mainPage {
        .mainL {
            width: 100%;
        }

        .mainR {
            position: relative;
            width: 100%;
            height: 800px;
            box-shadow: none;
        }
    }
}
