/*-------------------- slide stuff --------------------------------- */

 .gradient {
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 100%);
    padding: 7px 10px;
    border-radius: 6px;
}


.carousel-indicators { bottom: -40px; }

.carousel-control-prev {    left: -5%;}
.carousel-control-next {    right: -5%;}

.carousel-item .slide { width: 100%;
		  margin: 0px 0px 10px 0px;
		  position: relative;
		   padding-top: 80%;   
		   		  background-size: 100% 100%;
		 		  }
		 		  
		 		  
.carousel-item .slide1 { background-image: url(../images/blankslide.jpg);	}

.carousel-item .slide2 {  background-image: url(../images/blankslide2.jpg);	}


.carousel-item .slide .slidecaption { width: 100%;
				text-align: left;
				margin: 0 auto;
				height: 100%;
				/* border: 1px solid; */
				position: absolute;
				top: 0;	
				left: 0;
				padding: 5px 3px;	
				font-family: "PT Sans", Arial, sans-serif; }		
				


		 		  
.carousel-item .slide .slidecaption img.slidelogo { max-height: 70px; margin: 0px;	}	



.carousel-item .slide .slide-bottom { position: absolute; 
										bottom: 10px;
										left: 10px;
										right: 10px; }

.carousel-item .slide .joinbutton { margin: 0px ;
					font-size: 1.0em;
					padding: 4px 15px;
			
					
						 }

/*
.carousel-item .slide1 .joinbutton {
					 position: absolute;
					bottom: 10px;
					left: 50%;
					transform: translateX(-50%); }
*/

.carousel-item .slide2 .joinbutton { margin: 0; }



.carousel-item .slide .browse-button {padding: 2px 6px; font-size:0.9rem; }

				 
.carousel-item .slide h2 { font-size: 1em;
				margin: 10px auto 0px auto;
				color: #fff;
				line-height: 1.4em;
				text-transform: capitalize; 
				text-align: center;
			 
			 }				 
				 


.carousel-item .slide .listwrap { text-align: left;
					/* border: 1px solid #c9c9c9; */
					margin: 20px 0px 20px 10px;
					
					clear: both;
					 }



.carousel-item .slide .listwrap p { font-size: 1em;
					  line-height: 1.3em;
					  margin: 1em 0; }



.carousel-item .slide .listwrap p .icon { color: #0cff00;
							
							margin-right: 0.5em; }




.carousel-item .slide2 .slidecaption { left: unset;
						right: 0; }
		 		  













				 
				 
		


@media only screen and (min-width: 450px) {

		.carousel-item .slide .slidecaption   { font-size: 1.2em; }
		




		}


		 
				 
@media only screen and (min-width: 576px) {

	.carousel-item .slide .slidecaption { padding: 10px 5px;  font-size: 1.2em; }
	.carousel-item .slide h1 {	font-size: 15.5px; letter-spacing: 0.4px; padding: 10px;}
	.carousel-item .slide1 h2 { font-size: 22px; margin: 0.6em auto; }
	.carousel-item .slide .listwrap  { font-size: 20px; margin: 25px 0px 20px 30px; }
	
		.carousel-item .slide .slidecaption img.slidelogo { max-width: 80%; max-height: 110px;	}
		.carousel-item .slide .joinbutton { font-size: 1.2em; margin:0px auto; }
	.carousel-item .slide .browse-button {padding: 4px 8px; font-size:1.0rem; }
	.carousel-item .slide .slide-bottom {left: 20px; right: 20px; }
}



		 
				 
@media only screen and (min-width: 768px) {

		.carousel-item .slide {  padding-top: 44%;	
		   		  background-size: 100% auto;
		 		  }  
		 		  
		.carousel-item .slide h1 {	font-size: 16px; letter-spacing: unset; } 		  
		 		  
		.carousel-item .slide1 { background-image: url("../images/slides/slide1-wide.webp"); background-size: 100% 100%; }		
		.sfw .carousel-item .slide1 { background-image: url("../images/slides/slide1-wide-sfw.webp"); background-size: 100% 100%; }		
	
	
		
		.carousel-item .slide1 .slidecaption { width: 80%; padding: 10px;}
		.carousel-item .slide1 .listwrap  { font-size: 15px; margin: 15px 0px 20px 30px; position: absolute; left: 20px; top: 95px;letter-spacing: 2px; }
		.carousel-item .slide .slidecaption img.slidelogo { max-width: 80%; max-height: 70px;	}
		.carousel-item .slide1 h2 { font-size: 18px; margin: 0.25em auto 0.5em 20px; text-align: left; }
	
		
		/*------------- slide 2----------------- */
		.carousel-item .slide2 .listwrap { text-align: right;	position: absolute; top: 80px; right: 50px; font-size: 15px; margin:0; letter-spacing: 2px; }
		.carousel-item .slide2 { background-image: url("../images/slides/slide2-wide.webp"); background-size: 100% 100%; }
		.sfw .carousel-item .slide2 { background-image: url("../images/slides/slide2-wide-sfw.webp"); background-size: 100% 100%; }
	
		.carousel-item .slide2 .slidecaption { width: 70%; padding: 10px;}
		.carousel-item .slide2 .slidecaption img.slidelogo { float: right; margin: 0px 30px 10px 0px; max-height: 70px; }
	 	.carousel-item .slide .joinbutton { font-size: 1.1em; }

	}				 
				 
				 
				 
				 
				 
@media only screen and (min-width: 992px) {				 
				 
				 .carousel-item .slide h1 {	font-size: 19px; letter-spacing: 0.03em; }
				 .carousel-item .slide1 .listwrap  { font-size: 20px; margin: 0;  left: 40px; top: 150px;}
				 .carousel-item .slide1 h2 { font-size: 23px; margin: 0.4em auto 0.6em 30px;}

				 .carousel-item .slide1 .slidecaption img.slidelogo { max-width: 70%; max-height: 100px;	}
				 .carousel-item .slide .joinbutton { font-size: 1.3em; }
				 
				 /*------------- slide 2 ---------------- */
				 .carousel-item .slide2 .slidecaption img.slidelogo { max-width: 70%; max-height: 90px;	}	
				 
				 .carousel-item .slide2 .listwrap { font-size: 22px; margin: 0;  top: 90px; right: 60px; }
				 .carousel-item .slide .slide-bottom {left: 30px; right: 30px; }
				 }
				 
				 
@media only screen and (min-width: 1200px) {

					.carousel-item .slide h1 {	font-size: 23px; letter-spacing: 0.1em; }
					.carousel-item .slide1 h2 { font-size: 32px;  margin: 0.3em auto 1em 30px;	}

					.carousel-item .slide1 .listwrap {	font-size: 26px; margin: 0;	 top: 175px; left: 40px;		}
					.carousel-item .slide1 .slidecaption img.slidelogo { max-width: 70%; max-height: 120px;	}
				 .carousel-item .slide .joinbutton { font-size: 1.3em; padding: 6px 20px; }
				 
				 /*------------- slide 2 ---------------- */
					.carousel-item .slide2 .slidecaption img.slidelogo { max-width: 70%; max-height: 110px;	}
				 .carousel-item .slide2 .listwrap { font-size: 27px; margin: 0; top: 105px;   right: 60px; }				 
				 
				 	 .carousel-item .slide .slide-bottom {left: 50px; right: 50px; }
				 
					}				 
				 
				 
@media (min-width: 1420px) {	
	
					.carousel-item .slide1 h2 { font-size: 32px;  margin: 0.3em auto 1em 30px;	}

					.carousel-item .slide1 .listwrap {	font-size: 33px;  top: 210px; left: 60px;		}
					.carousel-item .slide1 .slidecaption img.slidelogo { max-height: 150px;	}
					.carousel-item  .slide .joinbutton { font-size: 1.5em; }
					 /*------------- slide 2 ---------------- */
					.carousel-item .slide2 .slidecaption img.slidelogo {  max-height: 150px;	}
				 .carousel-item .slide2 .listwrap { font-size: 33px; top: 145px;   right:80px; }				 
				 
	
	
	
	
	
	
}
