/** {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
}

.background-fade-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
*/

/*
.bg-fading-image-settings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 25s infinite;
  animation-fill-mode: forwards;
}

.bg1 {animation-delay: 0s; z-index: 1}
.bg2 {animation-delay: 5s; z-index: 2}
.bg3 {animation-delay: 10s; z-index: 3}
.bg4 {animation-delay: 15s; z-index: 4}
.bg5 {animation-delay: 20s; z-index: 5}

.courses-fading-image-1 {background-image: url("../Images/Courses/BSL/Courses_BSL_1.jpeg")}
.courses-fading-image-2 {background-image: url("../Images/Courses/BSL/Courses_BSL_2.jpeg")}
.courses-fading-image-3 {background-image: url("../Images/Courses/BSL/Courses_BSL_3.jpeg")}
.courses-fading-image-4 {background-image: url("../Images/Courses/BSL/Courses_BSL_4.jpeg")}
.courses-fading-image-5 {background-image: url("../Images/Courses/BSL/Courses_BSL_5.jpeg")}

@keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   
  30%  { opacity: 1; }   
  50%  { opacity: 0; }   
  100% { opacity: 0; }   
}
/* Smooth fade keyframes */



.bg-fading-image-settings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 10s infinite;
  animation-fill-mode: forwards;
}

/* Backgrounds with better-timed delays and unique stacking */
.bg1 {animation-delay: 0s; z-index: 1}
.bg2 {animation-delay: 2s; z-index: 2}
.bg3 {animation-delay: 4s; z-index: 3}
.bg4 {animation-delay: 6s; z-index: 4}
.bg5 {animation-delay: 8s; z-index: 5}


/*"Our courses" page images*/
.courses-fading-image-1 {background-image: url("../Images/Courses/BSL/Courses_BSL_1.jpeg")}
.courses-fading-image-2 {background-image: url("../Images/Courses/BSL/Courses_BSL_2.jpeg")}
.courses-fading-image-3 {background-image: url("../Images/Courses/BSL/Courses_BSL_3.jpeg")}
.courses-fading-image-4 {background-image: url("../Images/Courses/BSL/Courses_BSL_4.jpeg")}
.courses-fading-image-5 {background-image: url("../Images/Courses/BSL/Courses_BSL_5.jpeg")}




/*The below controls the top banner on the "Our Courses" page

.our-courses-bg-fading-image-settings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 10s infinite;
  animation-fill-mode: forwards;
}
*/

/*Top page banners*/

.top-banners {width: 100%; height: 650px; background-size: 280%; background-size: 310%; background-repeat: no-repeat; background-position: -420px 0px; background-color: #1b365a}



.top-banners-courses-bsl {background-image: url("../Images/Photos/Course+photos/Course_photosBLS.jpg")}
.top-banners-courses-pediatrics{background-image: url("../Images/Photos/Course+photos/Course_photosPediatrics.jpg")}
.top-banners-courses-sports-clubs {background-image: url("../Images/Photos/Course+photos/Course_photosSports.jpg")}
.top-banners-courses-fire-safety {background-image: url("../Images/Photos/Course+photos/Course_photosFire_safety.jpg")}
.top-banners-courses-first-aid-work {background-image: url("../Images/Photos/Course+photos/Course_photosWork.jpg")}
.top-banners-courses-first-aid-schools {background-image: url("../Images/Photos/Course+photos/Course_photosSchools.jpg")}

.top-banners-our-courses {}
.top-banners-contact {height: auto; background-color: transparent}

.our-courses-top-banner-height {height: 715px}

/*"Our courses" Top Bannner Images*/
/*-For mobile screens-------- */
.our-courses-fading-image-1 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images1-Mobile.jpg")}
.our-courses-fading-image-2 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images2-Mobile.jpg")}
.our-courses-fading-image-3 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images3-Mobile.jpg")}
.our-courses-fading-image-4 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images4-Mobile.jpg")}
.our-courses-fading-image-5 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images5-Mobile.jpg")}

	/*-For screens between mobile and 768-------- */
	@media screen and (min-width: 500px) {
	.our-courses-fading-image-1 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images1-Square.jpg")}
	.our-courses-fading-image-2 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images2-Square.jpg")}
	.our-courses-fading-image-3 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images3-Square.jpg")}
	.our-courses-fading-image-4 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images4-Square.jpg")}
	.our-courses-fading-image-5 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images5-Square.jpg")}
	}

	/*-For screens larger than 768px-------- */
	@media screen and (min-width: 768px) {
	.our-courses-fading-image-1 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images1.jpg")}
	.our-courses-fading-image-2 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images2.jpg")}
	.our-courses-fading-image-3 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images3.jpg")}
	.our-courses-fading-image-4 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images4.jpg")}
	.our-courses-fading-image-5 {background-image: url("../Images/Courses/Our_courses_page/Our_Courses_top_banner_images5.jpg")}
	}

/*"About Us" Top Bannner Images*/
.about-us-fading-image-1 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images1-Mobile.jpg")}
.about-us-fading-image-2 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images2-Mobile.jpg")}
.about-us-fading-image-3 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images3-Mobile.jpg")}
.about-us-fading-image-4 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images4-Mobile.jpg")}
.about-us-fading-image-5 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images5-Mobile.jpg")}

	/*-For screens between mobile and 768-------- */
	@media screen and (min-width: 500px) {
	.about-us-fading-image-1 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images1-Square.jpg")}
	.about-us-fading-image-2 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images2-Square.jpg")}
	.about-us-fading-image-3 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images3-Square.jpg")}
	.about-us-fading-image-4 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images4-Square.jpg")}
	.about-us-fading-image-5 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images5-Square.jpg")}	
	}

	/*-For screens larger than 768px-------- */
	@media screen and (min-width: 768px) {
	.about-us-fading-image-1 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images1.jpg")}
	.about-us-fading-image-2 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images2.jpg")}
	.about-us-fading-image-3 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images3.jpg")}
	.about-us-fading-image-4 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images4.jpg")}
	.about-us-fading-image-5 {background-image: url("../Images/About_page/Top_banner/About_Us_top_banner_images5.jpg")}	
	}

/*"About us" top carousel images*/
.about-us-carousel-image-1 {background-image: url("../Images/About_page/Carousel/Carousel_images-About_us1.jpg")}
.about-us-carousel-image-2 {background-image: url("../Images/About_page/Carousel/Carousel_images-About_us2.jpg")}
.about-us-carousel-image-3 {background-image: url("../Images/About_page/Carousel/Carousel_images-About_us3.jpg")}
.about-us-carousel-image-4 {background-image: url("../Images/About_page/Carousel/Carousel_images-About_us4.jpg")}
.about-us-carousel-image-5 {background-image: url("../Images/About_page/Carousel/Carousel_images-About_us5.jpg")}

/*"Basic Life Support" page images*/
.bsl-fading-image-1 {background-image: url("../Images/Courses/Courses_images-BSL_carousel-1.jpg")}
.bsl-fading-image-2 {background-image: url("../Images/Courses/Courses_images-BSL_carousel-2.jpg")}
.bsl-fading-image-3 {background-image: url("../Images/Courses/Courses_images-BSL_carousel-3.jpg")}
.bsl-fading-image-4 {background-image: url("../Images/Courses/Courses_images-BSL_carousel-4.jpg")}
.bsl-fading-image-5 {background-image: url("../Images/Courses/Courses_images-BSL_carousel-5.jpg")}


/*"First Aid at Work" page images*/
.work-fading-image-1 {background-image: url("../Images/Courses/Courses_images-Work_carousel-1.jpg")}
.work-fading-image-2 {background-image: url("../Images/Courses/Courses_images-Work_carousel-2.jpg")}
.work-fading-image-3 {background-image: url("../Images/Courses/Courses_images-Work_carousel-3.jpg")}
.work-fading-image-4 {background-image: url("../Images/Courses/Courses_images-Work_carousel-4.jpg")}
.work-fading-image-5 {background-image: url("../Images/Courses/Courses_images-Work_carousel-5.jpg")}


/*"Fire Safety" page images*/
.firesafety-fading-image-1 {background-image: url("../Images/Courses/Course_images-Fire_SafetyCarousel-1.jpg")}
.firesafety-fading-image-2 {background-image: url("../Images/Courses/Course_images-Fire_SafetyCarousel-2.jpg")}
.firesafety-fading-image-3 {background-image: url("../Images/Courses/Course_images-Fire_SafetyCarousel-3.jpg")}
.firesafety-fading-image-4 {background-image: url("../Images/Courses/Course_images-Fire_SafetyCarousel-4.jpg")}
.firesafety-fading-image-5 {background-image: url("../Images/Courses/Course_images-Fire_SafetyCarousel-5.jpg")}


/*"Schools" page images*/
.schools-fading-image-1 {background-image: url("../Images/Courses/Courses_images-Schools_carousel-1.jpg")}
.schools-fading-image-2 {background-image: url("../Images/Courses/Courses_images-Schools_carousel-2.jpg")}
.schools-fading-image-3 {background-image: url("../Images/Courses/Courses_images-Schools_carousel-3.jpg")}
.schools-fading-image-4 {background-image: url("../Images/Courses/Courses_images-Schools_carousel-4.jpg")}
.schools-fading-image-5 {background-image: url("../Images/Courses/Courses_images-Schools_carousel-5.jpg")}


/*"Sports" page images*/
.sports-fading-image-1 {background-image: url("../Images/Courses/Courses_images-Sports_carousel-1.jpg")}
.sports-fading-image-2 {background-image: url("../Images/Courses/Courses_images-Sports_carousel-2.jpg")}
.sports-fading-image-3 {background-image: url("../Images/Courses/Courses_images-Sports_carousel-3.jpg")}
.sports-fading-image-4 {background-image: url("../Images/Courses/Courses_images-Sports_carousel-4.jpg")}
.sports-fading-image-5 {background-image: url("../Images/Courses/Courses_images-Sports_carousel-5.jpg")}


/*"Pediatrics" page images*/
.pediatrics-fading-image-1 {background-image: url("../Images/Courses/Courses_images-Pediatric_carousel-1.jpg")}
.pediatrics-fading-image-2 {background-image: url("../Images/Courses/Courses_images-Pediatric_carousel-2.jpg")}
.pediatrics-fading-image-3 {background-image: url("../Images/Courses/Courses_images-Pediatric_carousel-3.jpg")}
.pediatrics-fading-image-4 {background-image: url("../Images/Courses/Courses_images-Pediatric_carousel-4.jpg")}
.pediatrics-fading-image-5 {background-image: url("../Images/Courses/Courses_images-Pediatric_carousel-5.jpg")}





/*-For screens larger than 768px-------- */
@media screen and (min-width: 768px) {
	.our-courses-top-banner-height {height: 600px}
	.top-banners {height: 535px}
	.top-banners-contact {height: 400px}
}

/*-For screens larger than 600px-------- */
@media screen and (min-width: 600px) {
	.top-banners {background-size: cover; background-position: bottom left 50%}
}

/*-For iPad 900px and above-------- */
@media screen and (min-width: 900px) {
	.top-banners {background-size: 120%; background-position: bottom left 0%}
}

/*-For iPad 1500px and above-------- */
@media screen and (min-width: 1500px) {
	.top-banners {background-size: 105%; background-position: bottom left 0%}
}


/*-For iPad 1850px and above-------- */
@media screen and (min-width: 1850px) {

	.top-banners {background-position: 0% 80%}

}







/* Smooth fade keyframes */
@keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* Fade in */
  30%  { opacity: 1; }   /* Stay visible */
  50%  { opacity: 0; }   /* Fade out */
  100% { opacity: 0; }   /* Stay hidden */
}