#homePageCarousel .carousel-inner {
    background-color: #212529;
}


#maincarousel_button{
    color: black; 
    text-align: center;
    background-color: white;
    border-color: white;
    width: 25%;
    height:100%;
}

.carousel-control-prev,
.carousel-control-next{
    bottom: 10%;
    top: 10%;
}

#deadline_btn {
    position: absolute;
    top: 52.5%;
    right: 64.5%;
    color: black;
}

#leader_btn{
    position:absolute;
    top: 47%;
    right: 65.3%;
    color:black;
}


#info_btn{
    position:absolute;
    top: 47%;
    right: 15%;
    color:black;
}

@media screen and (max-width: 768px ) and (min-width: 468px) {
    .carousel-control-prev,
    .carousel-control-next{
          bottom: 20%;
          top: 20%;
    } 
}

  @media screen and (max-width: 468px) {
      .carousel-control-prev,
      .carousel-control-next{
          bottom: 30%;
          top: 30%;   
    }
      
      #carousel_indicators {
          bottom: -4px;
      }
}

@media screen and (max-width: 767px) {
    #deadline_btn{
        display: none;
    }
      
    #info_btn{
        display: none;
    }
      
    #leader_btn {
        display: none;
    }
}
      
      
@media screen and (min-width: 768px) and (max-width: 1023px ) {
    
    #deadline_btn {
        position:absolute;
        top: 49.5%;
        right: 56.7%;
        width: 215.18px;
    }
    
    #leader_btn {
        position:absolute;
        top: 42%;
        right: 61.4%;
        width: 200px;
    }
    
    #info_btn {
        position:absolute;
        top: 45%;
        right: 20.9%;
        color:black;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1130px) {
    
    #deadline_btn {
        right: 59.5%
    }
    
    #leader_btn {
        right: 63%;
    }
    
    #info_btn {
        right: 22.9%;
    }
}

@media only screen and (min-width: 1131px) and (max-width: 1200px) {
    
    #deadline_btn {
        right: 60.5%
    }
    
    #leader_btn {
        right: 63%;
    }
    
    #info_btn {
        right: 23.3%;
    }
}
@media only screen and (min-width: 1201px) and (max-width: 1300px) {
    
    #deadline_btn {
        right: 78%
    }
    
    #leader_btn {
        right: 65.3%;
    }
    
    #info_btn {
        right: 21%;
    }
    #info2_btn {
        position:absolute;
        top: 55%;
        right: 22%;
    }
}

@media only screen and (min-width: 1301px) AND (max-width: 2100px) {
    
    #deadline_btn {
        right: 81.5%
    }
    
    #info_btn {
        right: 23%;
    }

    #info2_btn {
        position:absolute;
        top: 55%;
        right: 24%;
    }
}