﻿html {
	width: 100%;
      	scroll-behavior: smooth;  
	background-color: #17151d !important;
	7878background: radial-gradient(#480d35 ,#17151d) !IMPORTANT;
	}

html,body {   
	color: #000000;
        font-family: effra, sans-serif;  
	font-size: 14pt;
	font-weight: 400; 
	line-height: 1.7; 
	margin: 0;
        padding: 0;
        border: 0;   
        outline: 0;
	box-sizing: border-box;
	clear: both;  
        }



body {
	width: 100%;
	height: auto;
	top: 0;
	margin-top: 0px;
	left: 0;
	margin-left: 0px;
	box-sizing: border-box;
	clear: both;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E") !important;
	}





/* NUMBER OF SLIDE CONFIGURATION */
.wrapper {
  	WIDTH: 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; 
	}





/***************************************************************/







#the_Header {  
	z-index: 1 !important;
	position: absolute;
	width: 200px;
	height: 27px;
	top: 0;
	margin-top: 0px;
  	text-align: center;
	border: 0px;     
	box-sizing: border-box;  
	clear: both;   
	/**CENTER HORIZONTALLY**/
  		text-align: center;
  		margin: auto;  
  		position: absolute;
  		left:0;
  		right: 0;
  		top: 0;
	/**END OF CENTER HORIZONTALLY**/


	}

.first-of-all {
  	display: inline-block;
	height: 27px;
	border: 0px;
	}