@charset "utf-8";
@import url("Other CSS.css");
/* CSS Document */

zeroing line so your styling will be zeroed for every browser Everything under this HTML tag will apply to the entire page

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Century Gothic', Arial, 'sans-serif';
	
	
}

header {
	padding: 32px
}

.style-logo {

	margin-left: auto;
	margin-right: auto;
	display: block;
	width:25%;
	max-width: 150px;
}

/*Hamburger Menu CSS*/



*, *:before, *:after 
{ box-sizing: border-box; }

html { font-size: 18px; }

/*

body {
  color: #e0e4cc;
  font-size: 1.2em;
  line-height: 1.6;
  background: #fa6900;
  overflow-x: hidden;
}

*/

label .menu { 
  position: fixed;
  left: 10px;
  top: 53px;
  z-index: 100;
  width: 100%;
  height: 40px;
  background: #F3F3F3;
  /*border-radius: 50% 50% 50% 50%;*/
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
  
} 
/*Center hamburger line*/
label .hamburger {
  position: fixed;
  top: 70px;
  left: 20px;
  width: 30px;
  height: 2px;
  background: #000000;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
} 
/* creates instances of center hamburger line before and after*/
label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #000000;
}

/* Sets distances of before and after hamburger line from center label .hamburger*/
label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

/*menu appearance when hamburger is clicked*/
label input:checked + .menu {
  /*box-shadow: 0 0 0 150px #F3F3F3 , 0 0 0 5px #F3F3F3;*/
  border-radius: 0px;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; }

label ul {
  z-index: 200;
  position: fixed;
  top: 150px;
  left: 55px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
  background: #f3f3f3;
  list-style: none; /*removes bullets on list item*/
  
}

label li {
	
}

label a   {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  display: block;
  color: #000000;
  text-decoration: none;
  
}

label a:hover  {
 background: #ddd;
 /*padding: 0px 10px 0px 10px ; */
 -webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
display:block;

}



h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}


/*end of hamburger menu*/

.style-nav ul {
	list-style-type: none; 
}

.style-nav ul li a {
	text-decoration: none;
	color: #9D8FFF;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 8px;
	}

 /* The navigation bar */
.navbar {
  overflow: hidden;
  background-color: #F3F3F3;;
  position: fixed; /* Set the navbar to fixed position */
  top: 40px;
  left:10px;
  right:10px;/* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  display:flex; /*allows flexible positioning of elements in this class*/
  justify-content: center; /*justifies all content to the center*/ 
  z-index:3; /*somehow allows header to remain on top of jscript slideshow */
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

/*wdb header*/
.wdbheaderbar {
  overflow: hidden;
  background-color: #F3F3F3;
  position: fixed; /* Set the navbar to fixed position */
  top: 0px;
  left:10px;
  right:10px;/* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  font-size: 24px;
 text-align: center;
  padding: 10px 0px 10px 10px;
  border-bottom: solid;
	border-color: #ffffff;
	
  z-index:4; /*somehow allows header to remain on top of jscript slideshow */
}
/*footer banner*/
.footerbanner {
	background-color: #f3f3f3; 
	margin-left: 10px ;
	padding: 10px 20px 10px 0px;
	position: relative;
	bottom: 5px;
  
}

.footer{
	position: relative;
}
/* Main content */
.main {
  margin-top: 27px; /* Add a top margin to avoid content overlay */
} 

/* Slideshow CSS */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  /*max-width: 2000px;*/
  
  position: relative;
  margin: 0px;
  
}

.makeimagefit {
	width: 100vw;
	height: calc(100vh - 100px);
	object-fit: cover;
	object-position: center;*/
} 
/* Hide the images by default */
.mySlides {
  display: none;
} 

/* Next & previous buttons */


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  visibility: hidden;
}


/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #000000;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  visibility: hidden;
}

/* Number text (1/3 etc) */

.numbertext {
  color: #000000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  visibility: hidden;
}



/* The dots/bullets/indicators */

/*
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  -webkit-transition: background-color 0.6s ease;
  transition: background-color 0.6s ease;
}
*/
.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}





/*Tablet view

Break point media query, the following parameters apply once the minimum width exceeds minimum width defined below. these parameters apply in addition to the previous parameters. New parameters input for those defined previously will be overridden once the media query  conditions are met

*/

@media (min-width : 0px ){
	
	.wdbheaderbar
	{font-size: 16px}
	.navbar {
		display: none;
	}
	.makeimagefit {
		object-fit: cover;
		height: 100%;
	}
	
}
@media (min-width: 450px){
	.wdbheaderbar {
		font-size: 24px
	}
	
}
@media (min-width: 768px){
	
	.style-nav ul li 
		{display: inline-block;
	}
	
	.style-nav ul {
		text-align: center;
	}
	.hamvis {
		display: none;
 }
	.navbar {
		display: flex;
	}
}


/*desktop view*/

@media (min-width: 1024px){
	
	.style-logo {
 		float: center;
		max-width: 600px ;
	} 
	.style-nav {
	 	float: right;
	} 
	
	.makeimagefit {
		object-fit: cover;
		height: calc(100vh - 100px);
		
	}
	
	
}