.active .slide {
	 display: block !important;
	 visibility: hidden;
	 transition: left .6s ease-out;
}
 .active .slide.current {
	 visibility: visible;
	 left: 0;
}
 .active .slide.next {
	 left: 100%;
}
 .active .slide.prev {
	 left: -100%;
}
 .active .slide.next.in-transition, .active .slide.prev.in-transition {
	 visibility:visible;
}
 .carousel {
	 position: relative;
}
 .carousel ul {
	 margin:0;
	 padding: 0;
}
 .slide h4 {
	 display:inline-block;
	 float:right;
	 font-size: 1.25em;
	 margin:0;
	 padding: .25em;
	 text-align: right;
	 background-color: rgba(255,255,255,.8);
	 float:right;
	 border-radius: 0 0 0 .5em;
}
 .slide p {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin:0;
	 clear:both;
	 padding: 5px;
	 background-color: rgba(255,255,255,.8);
}
 .slide a {
	 display:block;
	 text-align: right;
}
 .slide a:focus {
    border: 5px dashed #007bff;
}

 .slide a:hover {
     border: 5px dashed #fd7e14;
}

 .active .slide {
	 border: none;
	 display: none;
	 position:absolute;
	 top:0;
	 left:0;
	 z-index:200;
}
 .slide.current {
	 display:block;
	 z-index: 500;
}
 .btn-prev, .btn-next {
	 position:absolute;
	 z-index: 700;
	 top: 50%;
	 margin-top: -2.5em;
	 border:0;
	 background: rgba(255,255,255,.6);
	 line-height: 1;
	 padding:10px 5px;
	 transition: padding .4s ease-out;
}
 .btn-next:hover, .btn-next:focus, .btn-prev:hover, .btn-prev:focus {
	 padding-left: 15px;
	 padding-right:15px;
	 background: rgb(255, 246, 195);
}
 .btn-prev {
	 left:0;
	 border-radius: 0 .25em .25em 0;
}
 .btn-next {
	 right:0;
	 border-radius: .25em 0 0 .25em;
}
 .carousel.with-slidenav {
	 padding-bottom: 2em;
	 background-color: #fff;
}
 .carousel.with-slidenav .slide {
	 border-bottom: 1px solid #333;
}
 .slidenav {
	 position: absolute;
	 bottom:0;
	 left: 0;
	 right: 0;
	 text-align: center;
}
 .slidenav li {
	 display:inline-block;
	 margin: 0 .5em;
}
 .slidenav button {
	 border: 2px solid #01426a;
	 background-color: #01426a;
	 line-height: 1em;
	 height: 1.5em;
	 width:auto;
	 font-weight: bold;
	 color: #fff;
}
 .slidenav button.current {
	 border-radius: .5em;
	 background-color: #fff;
	 color: #333;
}
 .slidenav button:hover, .slidenav button:focus {
	 border: 2px dotted #fff;
}
 .slidenav button.current:hover, .slidenav button.current:focus {
	 border: 2px dotted #01426a;
}
 .visuallyhidden {
	 border: 0;
	 clip: rect(0 0 0 0);
	 height: 1px;
	 margin: -1px;
	 overflow: hidden;
	 padding: 0;
	 position: absolute;
	 width: 1px;
}
/* This makes the image respond to the changes in the screen sizes related to the media queries */
 div#c ul > li > a > img {
	 width: 100%;
	 height: auto;
}

/* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
	 .carousel, .slide {
		 width: 300px;
		 height: 130px;
		 padding:0;
		 margin: 0;
		 overflow: hidden;
	}
	 .slide {
		 height: 100px;
		 background-size: contain;
		 background-repeat: no-repeat;
		 position: relative;
		 margin-bottom:1em;
		 border:1px solid #333;
	}
}
/* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) and (max-width: 767.98px) {
	 .carousel, .slide {
		 width: 450px;
		 height: 180px;
		 padding:0;
		 margin: 0;
		 overflow: hidden;
	}
	 .slide {
		 height: 150px;
		 background-size: contain;
		 background-repeat: no-repeat;
		 position: relative;
		 margin-bottom:1em;
		 border:1px solid #333;
	}
}
/* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) and (max-width: 991.98px) {
	 .carousel, .slide {
		 width: 630px;
		 height: 240px;
		 padding:0;
		 margin: 0;
		 overflow: hidden;
	}
	 .slide {
		 height: 210px;
		 background-size: contain;
		 background-repeat: no-repeat;
		 position: relative;
		 margin-bottom:1em;
		 border:1px solid #333;
	}
}
/* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) and (max-width: 1199.98px) {
	 .carousel, .slide {
		 width: 870px;
		 height: 320px;
		 padding:0;
		 margin: 0;
		 overflow: hidden;
	}
	 .slide {
		 height: 290px;
		 background-size: contain;
		 background-repeat: no-repeat;
		 position: relative;
		 margin-bottom:1em;
		 border:1px solid #333;
	}
}
/* Extra large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
	 .carousel, .slide {
		 width: 1050px;
		 height: 380px;
		 padding:0;
		 margin: 0;
		 overflow: hidden;
	}
	 .slide {
		 height: 350px;
		 background-size: contain;
		 background-repeat: no-repeat;
		 position: relative;
		 margin-bottom:1em;
		 border:1px solid #333;
	}
}