/* image slider css */

/* Authored by Boaz James Otieno */

.load-images{top:10px;position: relative;}

#slider-main {

    width: 100%;

    overflow: hidden;top:0;

}



.img-slide {

    width: 100%;



    /* padding:0% 18%; */



    z-index: 1000;

    overflow-y: hidden;

}



#prev,

#next {

    z-index: 99;

    color: #fff;

    position: absolute;

    background: transparent;

    border: none;

    font-size: 40px !important;

    cursor: pointer;

    bottom: 46%;

}



#prev {

    left: 13%;

}



#next {

    right: 13%;

}



.circle {

    border: rgb(249 249 249) 3px solid;

    width: 20px;

    height: 6px;

    /* border-radius: 20px; */

    background: transparent;

    display: inline-block;

    cursor: pointer;

    margin: 0 1px;

}



#circles {

    /* margin-top: -15vh; */

    /* margin-left: 48.6%; */

    position: absolute;

    z-index: 99;

    left: 0;

    right: 0;

    text-align: center;

    bottom: -25%;

}



.image-animated {

    animation: fadeIn 5s ease-in-out;

    /* change time according to interval set */

}

.fade-in {

    animation: fadeIn ease 10s;

    -webkit-animation: fadeIn ease 10s;

    -moz-animation: fadeIn ease 10s;

    -o-animation: fadeIn ease 10s;

    -ms-animation: fadeIn ease 10s;

  }

  @keyframes fadeIn {

    0% {

      opacity:0;

    }

    100% {

      opacity:1;

    }

  }

  

  @-moz-keyframes fadeIn {

    0% {

      opacity:0;

    }

    100% {

      opacity:1;

    }

  }

  

  @-webkit-keyframes fadeIn {

    0% {

      opacity:0;

    }

    100% {

      opacity:1;

    }

  }

  

  @-o-keyframes fadeIn {

    0% {

      opacity:0;

    }

    100% {

      opacity:1;

    }

  }

  

  @-ms-keyframes fadeIn {

    0% {

      opacity:0;

    }

    100% {

      opacity:1;

  }

}



.fade-out {

    animation: fadeOut ease 8s;

    -webkit-animation: fadeOut ease 8s;

    -moz-animation: fadeOut ease 8s;

    -o-animation: fadeOut ease 8s;

    -ms-animation: fadeOut ease 8s;

  }

  @keyframes fadeOut {

    0% {

      opacity:1;

    }

    100% {

      opacity:0;

    }

  }

  

  @-moz-keyframes fadeOut {

    0% {

      opacity:1;

    }

    100% {

      opacity:0;

    }

  }

  

  @-webkit-keyframes fadeOut {

    0% {

      opacity:1;

    }

    100% {

      opacity:0;

    }

  }

  

  @-o-keyframes fadeOut {

    0% {

      opacity:1;

    }

    100% {

      opacity:0;

    }

  }

  

  @-ms-keyframes fadeOut {

    0% {

      opacity:1;

    }

    100% {

      opacity:0;

  }

}

@-webkit-keyframes fadeIn {

    0% {opacity: 0;}

    100% {opacity: 1;}

 }

 

 @keyframes fadeIn {

    0% {opacity: 0;}

    100% {opacity: 1;}

 }



@keyframes animateImage {

    0% {

        opacity: .2;

        transform: scale(1.2, 1.2);

    }



    20% {

        opacity: 1;

        transform: scale(1, 1);

    }



    80% {

        opacity: 1;

        transform: scale(1, 1);

    }



    95% {

        opacity: .8;

        transform: scale(1.2, 1.2);

    }



    100% {

        opacity: .8;

        transform: scale(1.2, 1.2);

    }

}



@media (max-width: 767px) {

    .circle {

        width: 15px;

        height: 15px;

    }

}



/* responsive */

@media(max-width: 1680px) {}



@media(max-width: 1600px) {}



@media(max-width: 1440px) {}



@media(max-width: 1366px) {}



@media(max-width: 1280px) {}



@media(max-width: 1080px) {}



@media(max-width: 1050px) {}



@media(max-width: 1024px) {}



@media(max-width: 991px) {

    .img-slide {

        min-height: 56vw;

    }

}



@media(max-width: 900px) {

    .img-slide {

        min-height: 62vw;

    }

}



@media(max-width: 800px) {}



@media(max-width: 768px) {

    .img-slide {

        min-height: 67vw;

    }

}



@media(max-width: 736px) {



    #prev,

    #next {

        font-size: 32px !important;

    }



    #circles {

        bottom: 6%;

    }

}



@media(max-width: 667px) {}



@media(max-width: 640px) {  .img-slide {

  min-height: 40rem;

}}



@media(max-width: 600px) {}



@media(max-width: 568px) {

    #prev {

        left: 1%;

    }



    #next {

        right: 1%;

    }

}



@media(max-width: 480px) {

    .img-slide {

        min-height: 35rem;

    }

}



@media(max-width: 440px) {}



@media(max-width: 414px) {}



@media(max-width: 384px) {

    #prev {

        left: 0%;

    }



    #prev,

    #next {

        font-size: 22px !important;

    }



    #next {

        right: 0%;

    }

}



@media(max-width: 375px) {}



@media(max-width: 320px) {

    .img-slide {

        min-height: 350px;

    }



    .circle {

        width: 13px;

        height: 13px;

    }



    #circles {

        bottom: 5%;

    }

}



/* //responsive */