@charset "UTF-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
}














header nav {
  text-align: center;
  margin-top: 94px;
  margin-bottom: 24px;
}

header nav ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  /* background-color: red; */
}

header nav li {
   float: left;
   /* background-color: lightgreen; */
}

header nav a {
   margin-left: 10px;
   margin-right: 10px;
   /* background-color: red; */
   text-decoration: none;
}

header nav a:visited {
	color : #000000;
	font-weight : bold;
}

header nav a:hover {
	color: #595959;
	text-decoration: underline;
	cursor: pointer;
}

header nav a:active {
	color: #909090;
	cursor: pointer;
}

#menu-icon {
	display: none;
	width: 40px;
	height: 40px;
	background-color: #d1b139;
	background-position: center;
	background-image: url("../images/menuIcon.png");
}

:hover#menu-icon {
	background-color: #34393D;
}


























































/* for 1500px or smaller */	
@media only screen and (max-width: 1500px) {





}


































/* for 900px or smaller */	
@media only screen and (max-width: 900px) {


footer article li {
    width: 41%;
}


header nav {
    /* background-color: lightgray; */
    float: right;
}

#menu-icon {
	display: inline-block;
	margin-top: 10px;
	background-image: url("../images/menuIcon.png");
}

header nav ul, nav:active ul {
	display: none;
	position: absolute;
	background-color: #ffffff;
	right: 20px;
	top: 50px;
	width: 34%;
	z-index: 250;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 17px;
	padding-left: 20px;
    border: 1px solid #e1e4e6;
}

header nav li {
	text-align: left;
	width: 100%;
	padding: 10px 0;
	margin: 0;
}

header nav:hover ul {
	display: block;
}
}






















/* for 700px or smaller */	
@media only screen and (max-width: 700px) {

header nav ul, nav:active ul {
	width: 45%;
    /* background-color:purple; */
}

#menu-icon {
	margin-right: 10px;
    float: right;
}

}






/* for 550px or smaller */	
@media only screen and (max-width: 550px) {

header nav ul, nav:active ul {
	width: 49%;
}

}






/* for 480px or smaller */	
@media only screen and (max-width: 480px) {

header nav ul, nav:active ul {
	width: 70%;
}


footer article li {
    width: 89%;
}



}
/* end 480px or smaller */











/* for 400px or smaller */
@media only screen and (max-width: 400px) {

header nav ul, nav:active ul {
	width: 80%;
    /* background-color: blue; */
}


}
/* end 400px or smaller */










/* for 320px or smaller */
@media only screen and (max-width: 320px) {



}
/* end 320px or smaller */