@media screen and (min-width: 769px) and (max-width: 1504px) {
    /* layout */
    .wrapper {
        width: calc(100% - 6.4rem);
        padding: 0;
    }


}

@media screen and (min-width: 1204px) and (max-width: 1439px) {


    .heroCarousel .slick-dots{
        top:180px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1203px) {


    .heroCarousel .slick-dots{
        top:120px;
    }
    .carouselContent{
        bottom: 28%;
    }
}

@media screen and (min-width: 767px) and (max-width: 991px) {

    .carouselContent{
        bottom: 28%;
    }
    .heroCarousel .slick-dots{
        top:55px;
    }
}