/*=======================================
Template Design By MarkUps  
Author URI : http://www.markups.io/
========================================*/

.mu-primary-btn:hover,
.mu-primary-btn:focus,
.mu-filter-link:hover,
.mu-filter-imglink:hover,
.mu-filter-link:focus,
.mu-filter-imglink:focus,
.mu-simplefilter li:hover,
.mu-simplefilter li.active,
.mu-copy-right a:hover,
.mu-copy-right a:focus {
	color: #616161/*#1261A0*/;
}

.mu-send-msg-btn:hover,
.mu-send-msg-btn:focus,
.mu-social-media a:hover,
.mu-social-media a:focus {
	border: 1px solid #616161/*#1261A0*/;
	color: #616161/*#1261A0*/;
}

.mu-testimonial-slide .slick-dots li button:hover,
.mu-testimonial-slide .slick-dots li button:focus,
.mu-testimonial-slide .slick-dots li.slick-active button,
.mu-resume-btn:hover,
.mu-resume-btn:focus,
.mu-header-dot,
.mu-filter-item-content,
.mu-contact-top-single .mu-icon,
.mu-skill-progress-bar .mu-pro-bar,
/*Trying the featured slider without the background color
#mu-featured-slider,*/
#mu-header,
#mu-header.mu-fixed-nav {
    /*Rajiv>> The line below controls the color of the menu bar*/
	background-color: #616161/*#807A79*/ /*#1261A0*/;
}

/*the following line is the background for the slider area need to make it #f7f7f7*/
#mu-featured-slider {
background-color: transparent;
background-image:url("assets/images/background1.webp");
background-position: center;
background-size: cover;
min-height: 100%;
	/*background-color: #fff/*#f7f7f7*/;
}

.mu-contact-form .form-control:focus {
	border: 1px solid #616161/*#1261A0*/;
}

.mu-resume-btn,
.mu-service-icon-box {
	border: 2px solid #FF6600/*#616161*//*#1261A0*/;
	color: #616161/*#1261A0*/;
}


.mu-pro-bar .proggress {
	background-color: #616161/*#1261A0*/ !important;
}

.mu-skill-progress-bar h4 {
    color: #616161/*#1261A0*/;
}

.mu-service-content-single h4 {
    color: #616161/*#1261A0*/;
}

/*=======================================
The following has been added by Rajiv
Reverse raindrops animation on Home page
========================================*/
.rain-container {
    width: 600px;
    height: 850px;
    position: absolute;
    top: 1%;
    right: 3%;
  }
  .rain {
    width: 100%;
    height: 100%/*160px*/;
    position: absolute;
    top: 80px;
    left: calc(50% - 45%);
    background-color: transparent/*black*//*#bcb0af*/;
  }
  .rain__reverse-rain {
    width: 6px;
    height: 6px;
    position: absolute;
    border-radius: 4px;
    background-color: gray/*black*//*#b3aeae*/;
  }
  .rain__reverse-rain2 {
    width: 6px;
    height: 18px;
    position: absolute;
    border-radius: 4px;
    background-color: gray/*black*//*#b3aeae*/;
  }
  @keyframes reverse-rainOne {
    0% {
      bottom: 0%/*20px*/;
      opacity: 0;
    }
    40% {
      bottom: 40%/*50px*/;
      opacity: .5;
    }
    80% {
      bottom: 80%/*80px*/;
      opacity: .3;
    }
    100% {
      bottom: 100%/*80px*/;
      opacity: 0;
    }
  }
  @keyframes reverse-rainTwo {
    0% {
      bottom: 0%/*40px*/;
      opacity: 0;
    }
    40% {
      bottom: 40%/*70px*/;
      opacity: .5;
    }
    80% {
      bottom: 80%/*80px*/;
      opacity: .3;
    }
    100% {
      bottom: 100%/*80px*/;
      opacity: 0;
    }
  }
  .rain__reverse-rain-one {
    opacity: 0;
    bottom: 50px;
    left: 102px;
    animation: reverse-rainOne 7s 4s linear infinite;
  }
  .rain__reverse-rain-two {
    opacity: 0;
    bottom: 70px;
    left: 168px;
    animation: reverse-rainTwo 18s 5s linear infinite;
  }
  .rain__reverse-rain-three {
    opacity: 0;
    bottom: 65px;
    right: 138px;
    animation: reverse-rainTwo 8s 6s linear infinite;
  }
  .rain__reverse-rain-four {
    opacity: 0;
    bottom: 10px;
    right: 200px;
    animation: reverse-rainOne 17s 5s linear infinite;
  }

  .rain__reverse-rain-one2 {
    opacity: 0;
    bottom: 50px;
    left: 180px;
    animation: reverse-rainOne 7s 2s linear infinite;
  }
  .rain__reverse-rain-two2 {
    opacity: 0;
    bottom: 70px;
    left: 30px;
    animation: reverse-rainTwo 20s 1s linear infinite;
  }
  .rain__reverse-rain-three2 {
    opacity: 0;
    bottom: 65px;
    right: 110px;
    animation: reverse-rainTwo 12s 5s linear infinite;
  }
  .rain__reverse-rain-four2 {
    opacity: 0;
    bottom: 50px;
    right: 160px;
    animation: reverse-rainOne 18s 4s linear infinite;
  }

  .rain__reverse-rain-four3 {
    opacity: 0;
    bottom: 50px;
    right: 260px;
    animation: reverse-rainOne 6s 3s linear infinite;
  }

/*Added by Rajiv: This is to provide a boundary for the images to resize in.*/


  .carousel-inner img {
      width: 80vw;
      height: 80vw;
      object-fit: contain;
  }