@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; }

/*adjusts position of hamburger menu*/
label ul {
  z-index: 200;
  position: fixed;
  top: 272px;
  left: 105px;
  -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);
	/*height: 100vh;*/
	object-fit: cover;
	object-position: center;
} 

/*dropdown menu click*/

/*this css creates a dropdown menu that you click on and will hold open until you move your mouse off to the side. A list of links is set to not display by default but will appear when you click a button. The :active pseudo class triggers an event when you click on an item with the :active pseudo class. The display is set to block when you are hovering over the list box. The list box to hover over must be positioned under where it will appear when clicked in order to trigger the hover state which will allow the box to show */

.dropdown ul{
    display: none;
    position: relative;
    top: -55px;
    padding: 55px 0 0 0;
    margin: 0;
}
.dropdown ul:hover{
    display: block; 
}
  .dropdown li{
    background: #f3f3f3;
    padding: 10px;
    list-style: none;
}
  .dropdown li:hover{ 
    /*background: red;*/
    cursor: pointer;
}
  .dropdown a {
	text-align: left;
}
#button #buttonham{
    display: inline-block;
    padding: 10px;
    background: #f3f3f3;
    color: black;
}
#button:hover #buttonham:hover{
	background: #ddd;
}
#dd #ddham{
    display: inline-block;
}
#dd:active ul{
    display: block;
} 
#ddham:active ul{
    display: block;
} 
#dd:active ul:hover{
    display: block;
}
#ddham:active ul:hover{
    display: block;
}
#dd:active #button{
    display: inline-block;
    padding: 16px;
    background: #ddd;
    color: white;
}

#ddham:active #buttonham{
    display: inline-block;
    padding: 10px;
    background: #f3f3f3;
    color: #f3f3f3;
}

.dropdown {  
        display: inline-block;  
        position: relative;
		
    }  

 		
	
/*dropdown menu hover*/
 /* .dropbtn {  
        background-color: #f3f3f3;  
        color: black;  
        
	    padding: 10px 10px 0 10px;  
        font-size: 20px;
	  	border: none;
    } 
*/

.dropdown-content {  
        position: absolute;  
		top: 50px;
        background-color: #f3f3f3;  
        min-width: 200px;  
        display: none;  
        z-index: 1;  
    }  
    
       .dropdown-content a {  
        color: black;  
        padding: 12px 16px;
        text-decoration: none;  
        display: block;  
		
    }  
    
     .dropdown-content a:hover {  
        background-color: #ddd;  
    }  
    .dropdown:hover .dropdown-content {  
        display: block;  
    }  
    .dropdown:hover .dropbtn {  
        background-color: #ddd;  /*dropdown menu button hover color*/
    }  
    
/* 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: #F22327;
  font-size: 17px;
  padding: 3px 5px 14px 5px;
 
  width: 100%;
  text-align: center;
  visibility: visible;
  background-color: #ECE2E2
	  
}

/* 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);
		
	}
	
	
}