.home .hero {
	 overflow: hidden;
	 max-height: 400px;
	 background-image: none;
}

.home .hero a,
.home .hero h1,
.home .hero h2 {
	color: #000;
	text-decoration: none;
}

.basic-slider:before, 
.basic-slider:after {
	 content: "";
	 display: table;
}

.basic-slider:after {
	clear: both;
}

.basic-slider .learnbtn {
	display: block;
	margin-top:1rem;
    font-size: 1rem;
}

.basic-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 300px;
    max-height: 400px;
}

.basic-slider .tagline {
	background: rgba(255,255,255,0.25);
    padding: 2rem;
    padding-right: 1rem;
	position: absolute;	    
}

.slide.hidden{
      -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 5;

}

.slide.active {
    visibility: visible;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9;

}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

 @media screen and (max-width:650px){
.basic-slider .tagline {
    padding: 2rem;
    top:10%;	
    background: rgba(255,255,255,0.75);
}
}

@media screen and (min-width:1600px){
	
.home .hero {
	 overflow: hidden;
	 max-height: 700px;
	 background-image: none;
}
	
.basic-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 300px;
    max-height: 900px;
}	
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}



@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}