7878:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary1: hsl(var(--hue),90%,55%);
	--primary2: hsl(var(--hue),90%,40%);
	--primary3: hsl(var(--hue),90%,65%);
	font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); 
	}html {
	width: 100%;
      	scroll-behavior: smooth;  
	background-color: #17151d !important;
	7878background: radial-gradient(#480d35 ,#17151d) !IMPORTANT;






/* NUMBER OF SLIDE CONFIGURATION */
7878.wrapper {
  	7878WIDTH: 100%;  
	height: 100vh;
  	margin: 0 auto;
 	position: relative;  
	box-sizing: border-box;
	clear: both; 
	}

input {
  	display: none;
	}

.inner {
  	width: 500%;  
  	line-height: 0;  
	}

article {
  	width: 20%; 
	height: 100vh; 
  	float: left;
  	position: relative;
	box-sizing: border-box; 
	}

article img {
  	width: 100%; 
	height: 100% !important; 
	box-sizing: border-box; 
	clear: both; 
	}

/*- SET UP CONTROL -*/
.slider-prev-next-control {/**LEFT AND RIGHT CONTROL BUTTONS**/
	/**
  	   height: 50px;
	**/
	HEIGHT: 0PX;
  	position: absolute;
  	top: 50%;
  	width: 100%;
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	transform: translateY(-50%);
	box-sizing: border-box;
	clear: both;  
	}

.slider-prev-next-control label {
  	display: none;
  	width: 40px;
  	height: 40px;
  	border-radius: 50%;
  	background: #fff;
  	111opacity: 0.7;   222OPACITY: 0.2; opacity: 0.5; 
	}

.slider-prev-next-control label:hover {
  	opacity: 1;
	}

.slider-dot-control {
 	position: absolute; POSITION: FIXED; 
  	width: 100%;
  	bottom: 0;
	margin-bottom: 75px;
  	text-align: center; 
	box-sizing: border-box;
	clear: both;
	}

:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary1: hsl(var(--hue),90%,55%);
	--primary2: hsl(var(--hue),90%,40%);
	--primary3: hsl(var(--hue),90%,65%);
	font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); 
	}

.slider-dot-control label {
  	cursor: pointer;
  	border-radius:50%;
  	display: inline-block;
  	width: 10px; width: 20px;
  	height: 10px; height: 20px;
  	background: #bbb;  background:#fff;
  	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	transition: all 0.3s;  
  	border: 2px solid #33cc33;
  	margin:0.5% 0 0 0.3%; margin:0.5% 17px 0 0.3%;
	transition-delay: 0.3s;
	background-image: linear-gradient(hsl(var(--hue),10%,80%),hsl(var(--hue),10%,65%));
	box-shadow: 0.1em 0.2em 0 hsl(var(--hue),10%,15%) inset,
		    0.2em 0.4em 0 hsl(var(--hue),10%,35%) inset;   
	}

.slider-dot-control label:hover {
  	background: #ccc;
  	border-color: #777; 
	box-shadow: 0 0 0.1em hsla(var(--hue),10%,10%,0.1) inset,
		    -0.3em -0.3em 0.5em var(--primary2) inset;  
	border: 3px solid #FFFF33;
	}




/* Info Box */
.info {
  	position: absolute;
  	font-style: italic;
  	line-height: 20px;
  	opacity: 0;
  	color: #000;
  	text-align: left;
  	-webkit-transition: all 1000ms ease-out 600ms;
  	-moz-transition: all 1000ms ease-out 600ms;
  	transition: all 1000ms ease-out 600ms;   
	}

.info h3 {
  color: #fcfff4;
  margin: 0 0 5px;
  font-weight: normal;
  font-size: 1.5em;
  font-style: normal; 
}

.info.top-left { /** LOGO? **/
  	top: 10px;
  	left: 10px;
	}

.info.top-right { /** HAMBURGER NAV? **/
  top: 30px;
  right: 30px; 
}
.info.bottom-left { /** COPYRIGHT INFO **/
  bottom: 30px;
  left: 30px;  
}
.info.bottom-right { /** WHERE TO WRITE "CHRITIAN FAMILY ENRISHMENT CENTER **/
  bottom: 30px;
  right: 30px; 
}

/* Slider Styling */
.slider-wrapper {
  	width: 100%;
  	overflow: hidden;
  	border-radius: 5px;
  	box-shadow: 1px 1px 4px #666;
  	background: #000000;
  	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
  	-ms-transform: translateZ(0);
  	-o-transform: translateZ(0);
  	transform: translateZ(0);
  	-webkit-transition: all 500ms ease-out;
  	-moz-transition: all 500ms ease-out;
  	transition: all 500ms ease-out;
	box-sizing: border-box;
	clear: both;    
	}

.slider-wrapper .inner {
  	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
  	-ms-transform: translateZ(0);
  	-o-transform: translateZ(0);
  	transform: translateZ(0);
  	-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  	-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  	transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);  
	box-sizing: border-box;
	clear: both;  
	}

/*- SET POSITION FOR SLIDE -*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after {
  	font-family: FontAwesome;
  	font-style: normal;
  	font-weight: normal;
  	text-decoration: inherit;
  	margin: 0;
  	line-height: 38px;
  	font-size: 3em;
  	display: block;
  	color: #777;  
	border-radius: 50%;
	cursor: pointer;
	}

#slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after {
  	content: "";
  	padding-left: 15px;  
	}

#slide5:checked ~ .slider-prev-next-control label:nth-child(1), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide1:checked ~ .slider-prev-next-control label:nth-child(2) {
  	display: block;
  	float: right;
  	margin-right: 5px;  
	}

#slide1:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(1) {
  	display: block;
  	float: left;
  	margin-left: 5px;  
	}

#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after {
  	content: "";
  	padding-left: 8px; 
	}

#slide5:checked ~ .slider-dot-control label:nth-child(5), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide1:checked ~ .slider-dot-control label:nth-child(1) {
  	background: linear-gradient(120deg,hsl(var(--hue),10%,40%) 35%,hsl(var(--hue),10%,0%));	
	transition-delay: 0.3s; 
  	background: #80d5a6;
  	border: 1px dashed mediumseagreen;
  	box-shadow: 0 0 0 2.5px #226741, 0 0 0 3.5px #fff, inset 0 0 0 2.5px #226741, 0 2px 5px 7px rgba(0, 0, 0, 0.5), inset 0 0 0 6px #fff, inset 0 0 100vw 100vw beige;  
	}

#slide5:checked ~ .slider-wrapper article:nth-child(5) .info, #slide4:checked ~ .slider-wrapper article:nth-child(4) .info, #slide3:checked ~ .slider-wrapper article:nth-child(3) .info, #slide2:checked ~ .slider-wrapper article:nth-child(2) .info, #slide1:checked ~ .slider-wrapper article:nth-child(1) .info {
  	opacity: 1;  
	}

#slide1:checked ~ .slider-wrapper .inner {
  	margin-left: 0%;   
	}

#slide2:checked ~ .slider-wrapper .inner {  
  	margin-left: -100%;
	}

#slide3:checked ~ .slider-wrapper .inner {
  	margin-left: -200%;  
	}

#slide4:checked ~ .slider-wrapper .inner {
  	margin-left: -300%;  
	}

#slide5:checked ~ .slider-wrapper .inner {
  	margin-left: -400%; 
	}
/*- TABLET -*/
@media only screen and (max-width: 850px) and (min-width: 450px) {
  .slider-wrapper {
    border-radius: 0;  
  }
}
/*- MOBILE-*/
@media only screen and (max-width: 450px) {
  .slider-wrapper {
    border-radius: 0;
  }

  .slider-wrapper .info {
    opacity: 0;
  }
}
@media only screen and (min-width: 850px) {
  body {
    padding: 0 80px;
  }
}







img {
    object-fit: contain; 
	}





/***************************************************************/