#banner_carousel .carousel-indicators{

    top: calc(100% + 1rem);

}

#banner_carousel .carousel-indicators li{

    border: 1px solid rgb(0,0,0);

    border-radius: .25rem;

}

#banner_carousel .carousel-indicators li.active{

    background-color: rgb(0,122,192);

    border-color: rgb(0,122,192);

}

.carousel_content{

    position: absolute;

    z-index: 1;

    top: 20%;

    left: 5%;

}

.arrow{

    background: #000;

    height: 1px;

    width: 45px;

    margin: 0 auto;

    position: relative;

}

.arrow:after {

    right: -3px;

    top: -5px;

    transform: rotate(45deg);

}

.arrow:after {

    content: "";

    background: #000;

    position: absolute;

    height: 1px;

    width: 15px;

}

.btn_text .arrow,.btn_text .arrow:after{

    transition: .2s ease-in;

}

.btn_text:hover .arrow{

    background-color: rgb(255,255,255);

    transition: .2s ease-in;

    width: 55px;

}

.btn_text:hover .arrow, .btn_text:hover .arrow:after{

    background-color: rgb(255,255,255);

    transition: .2s ease-in;

}

.area_3{

    background-color: rgb(230,230,230);

}

.area_1, .area_2, .area_3{

    padding-top: 15%;

    padding-bottom:15%;

}

.area_1, .area_2, .area_3{

    margin-top: auto;

    margin-bottom: auto;

}

@media(min-width:576px){

    .area_1, .area_2, .area_3{

        padding-top: 10%;

        padding-bottom:10%;

    }

}

@media(min-width:992px){

    .area_1, .area_2, .area_3{

        min-height: 50vh;

    }

    .area_1, .area_2, .area_3{

        padding-top: 5%;

        padding-bottom:5%;

    }

    #banner_carousel .carousel-indicators li{

        width: 70px;

    }

}

@media(min-width:1200px){

    .area_1, .area_2{

        min-height: 75vh;

    }

}

@media(min-width:1400px){

    .area_1, .area_2{

        min-height: 95vh;

    }

    .area_3{

        min-height: 110vh;

    }

    .area_3 img{

        transform: translateX(-10%) scale(1.25);

    }

}