body {background-color: #ffffff;
	color: #ffffff;
	font-family:'Alegreya Sans SC', sans-serif;
}

#center { padding: 0px 0px 0px 0px;
	  margin: 0px 0px 0px 0px;
	  background-image: url("background.jpg");
	  background-size: 100%;
	  color: #000000;
	  text-align: center;

}

.container { position: relative;
	     text-align: center;
	     color: white;
}

.containerb { position: relative;
	     text-align: center;
	     color: black;
}

.centered { position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
}


h2 { background-color: none;
     color: #000000;
     font-size: 2.2em;
     padding: 0px 0px 0px 0px;
     margin-right: 0px;
     text-align: center;
}
@media only screen and (max-width: 708px) {
	#header {
		  height: 140px;
	}

	#text {  font-size: 1.1em;
	 padding: 0px 0px 30px 0px;
	  text-align: center;
	}

	#footer { background-color: #ffffff;
	  color: #000000;
	  font-size: .8em;
	  font-style: italic;
	  text-align: center;
		padding: 10px 0px 80px 0px;
		clear: both;
	}
	/* Dropdown Button */
	.dropbtn {
	    background-color: #C5B358;
	    color: #000000;
	    padding: 16px;
	    font-size: 16px;
	    border: none;
	    cursor: pointer;

	}

	/* Dropdown button on hover & focus */
	.dropbtn:hover, .dropbtn:focus {
	    background-color: #ffffff;
	}

	/* The container <div> - needed to position the dropdown content */
	.dropdown {
	    position: relative;
	    display: inline-block;
	}

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: #C5B358;
	    min-width: 200px;
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	    z-index: 1;
	    font-size: 20px;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
	    color: black;
	    padding: 12px 16px;
	    text-decoration: none;
	    display: block;
	}

	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {background-color: #f1f1f1}

	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
	.show {display:block;}
	
	.navbar { display: none;
	}

	.topbutton { display: none;
	}


}


/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: none;
    position: top; /* Set the navbar to fixed position */
    top: 0; 
    left: 0;
    width: 100%; 
    font-size: 20px;
}

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

.navbar a:hover, .dropbtn:focus {
	    background-color: #C5B358;
}



.logo { float: left;
	
}

.mtopbutton {

	    background-color: none;
	    color: #ffffff;
	    padding: 12px;
	    font-size: 12px;
	    border: none;
	    cursor: pointer;
	    position: fixed;
	    bottom: 10px;
	    right: 10px;
}

.topbutton {
	    
	    background-color: none;
	    color: #ffffff;
	    padding: 12px;
	    font-size: 12px;
	    border: none;
	    cursor: pointer;
	    position: fixed;
	    bottom: 10px;
	    right: 10px;

}

.main { padding: 0px 5% 0px 5%;
}



#stwo a:hover, .dropbtn:focus {
	    background-color: #C5B358;
}

#stwo a {
    background-color: #ffffff;
    float: center;
    display: block;
    color: #000000;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
}

#stwo a:hover, .dropbtn:focus {
	    background-color: #C5B358;
}

#sthree a {
    background-color: #ffffff;
    float: center;
    display: block;
    color: #000000;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
}


.button {
	    background-color: #ffffff;
	    color: #000000;
	    padding: 16px;
	    font-size: 16px;
	    border: none;
	    cursor: pointer;


	}

	.button:hover, .dropbtn:focus {
	    background-color: #ffffff;
	}


#footer { background-image: url("footerbackground.jpg");
	  background-size: 100%;
	  color: #ffffff;
	  font-size: .8em;
	  font-style: italic;
	  text-align: center;
		padding: 10px 0px 50px 0px;
		clear: both;
}
#footer a:link { color: #C5B358;
}
#footer a:visited { color: #ffffff;
}
#footer a:hover { color: #C5B358;
}

@media only screen and (min-width: 708px) {
	#header { height: 50px;
	}
	#text {  font-size: 1.3em;
	 padding: 0px 0px 30px 0px;
	  text-align: center;
	}
	.main { padding: 0px 10% 0px 10%;
	}
	.dropbtn { display: none;
	}
	.dropdown-content { display: none;
	}
	.mtopbutton { display: none;
	}
	.container { position: relative;
		     text-align: center;
	 	     color: white;
		     font-size: 1.4em;
	}

	.containerb { position: relative;
		      text-align: center;
		      color: black;
		      font-size: 1.4em;
	}
}