@charset "UTF-8";
/* CSS Document */
 
@import url(font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Qwigley&family=Raleway:wght@300;600&display=swap');

 * {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
}	 
	 
	 

body, html {
    /* display: flex; */
	background-color: #fff;  /* was black */
    min-height: 100vh;
    /* flex-direction: column; */
    margin: 0;
	padding: 0;
	font-family: "Raleway",Helvetica, Arial, "sans-serif";
	font-size: 16px;	/* base */ 
}

  #main {
    display: flex;
	flex-direction: column;  
	height: 82vh;  
    flex: 1;
	  
  }

.transparent10 {
	background: rgba(255, 255, 255, 0.10);
	width: 100%;
	height: 100%;
	
}

  article {
    flex: 1;
    order: 1;
	width: 100%;
	height: 100%;  
	opacity: 1.0;
	/*background-image: url("../images/hat.png");
	background-repeat: no-repeat;
	background-position: 90% 0%;*/
  }

  header {
    height: 10vh;
	display: flex;  
	align-items: center;
	background-color: #043c8c;  
  }

header h1 {
	color: white;
	font-family: "Raleway",Helvetica, Arial, "sans-serif";
	font-weight: 300;
	text-transform: uppercase;
	align-self: center;
}


/* global menu styles */

#nav ul.menu {
	list-style: none;	
}

.menu li {
	list-style: none;
	font-family: 'Qwigley', "script";
	color: #B0C1D9;
	line-height: normal;
	width: 100%;
}

.menu li a {
	text-decoration: none;
	color: inherit;
	width: 100%;
}

.menu li a:hover {
	color: white;
	cursor: pointer;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	font-weight: 100;
	text-underline-position: below;
}

/*
.menu li a:active {
	color: red;
	cursor: pointer;
}  */


.menu.active {
    left: 0; 
	top: 0;
}


/* text */
article > h2.white {
	font-size: 1.3em;
	color: white;
	font-weight: 200;
	padding: 2em 0 0 1em;
}






	

/* footer styles */	
footer {
    background: lightgray;
    height: 8vh;
	display: flex;
	font-size: .9em;
	}


#footerContent{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8vh;
	flex-basis: 90%;
}

ul.footerList {
	display: flex;
	height: 8vh;
	flex-direction:row;
}

ul.footerList li{
	line-height: normal;
	padding: 0 0 0 2em;
	list-style: none;
	align-self: center;
}

ul.footerList li a {

	align-self: center;
}



  


/* device breakpoint styles */


/* mobile devices */
 
@media only screen and (max-width: 600px) {
	
header {
	display: flex;
    height: 10vh;
	align-items: center;
  }
	
	header h1 {
	font-size: 1.5em;
	padding-left: 3.5em;
	}	
	
#main {
	background-image:url("../images/backgrounds/ruins_500.jpg");
	background-repeat: no-repeat;	
	}
	

#main > article {
	opacity: 1.0;
	/*background-image: url("../images/hat_small.png");
	background-repeat: no-repeat;
	background-position: 90% 0%;*/
	display: flex;
	align-content: center;
  }	
	
	article h2.white {
		padding: 2em 0 0 1em;
	}	
		
	
/* menu styles*/
.menu {
    width: 250px;
    left: -250px;
    padding: 50px; } 
	
.menu li {
	list-style: none;
	border-top: solid 1px rgba(144, 144, 144, .75);
    font-size: 2.5em;
	line-height: 2em;  
}	
		
	
.menu__toggler {
 position: absolute;
  left: 20px;
  z-index: 999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor:pointer;
  display: flex;
  align-items: center; }

  .menu__toggler span,
  .menu__toggler span::before,
  .menu__toggler span::after {
    position: absolute;
    content: '';
    width: 28px;
    height: 2.5px;
    background: #fafafa;
    border-radius: 20px; }
  .menu__toggler span::before {
    top: -8px; }
  .menu__toggler span::after {
    top: 8px; }
  .menu__toggler.active > span {
    background: transparent; }
  .menu__toggler.active > span::before, .menu__toggler.active > span::after {
    /*background: #005c9c;*/
	background-color: red;  
    top: 0px; }
  .menu__toggler.active > span::before {
    transform: rotate(-225deg); }
  .menu__toggler.active > span::after {
    transform: rotate(225deg); }


/*SLIDING MENU PANEL*/
.menu {
 position: absolute;
  left: -40%;
  z-index: 998;
  color: #B0C1D9;
  background-color: #0D0D0D;	
  width: 40%;
  height: 100%;
  padding: 4em 1em 0 2em;
  display: flex;
  flex-direction: column;
  transition: 300ms; }

} /* end mobile devices */


/* tablets  */
@media only screen and (min-width: 601px) {
header {
    display:flex;
    height: 10vh;
	align-items: center;
  }	
	
header h1 {
	font-size: 1.6em;
	padding-left: 2em;
	align-self: center;
	flex-wrap: nowrap;
	}	
		
	
	.menu__toggler {
		display:none;
	}
	
	
	#nav ul.menu {
		display: flex;
		height: 10vh;
		background-color: transparent;
		padding: 0 0 0 4em;
		left: 0;
		flex-direction: row;
		justify-content: space-between;
		align-self: center;
	}
	
	
	#nav ul.menu li {
		border-top: none;
		margin-left: 1.25em;
		display: flex;	
		align-self: center;
		font-size: 2em;
	}	

a:hover {
		cursor: pointer;
		font-color: red;
	}	


#main {	
	background-image:url("../images/backgrounds/ruins.jpg");
	background-repeat: no-repeat;		
	}
	
 #main > article {
	display: flex;
	flex: 1;
    order: 1;
	opacity: 1.0;
	/*background-image: url("../images/hat.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 90% 12%;*/
  }

article h2.white {
	display: flex;
	font-size: 1.2em;
	padding: 2em 0 0 2em;
	}
	
}	/* end tablet */

/* computers */
@media only screen and (min-width: 1024px) {
	
header {
    display:flex;
    height: 10vh;
	align-items: center;
  }	
	
header h1 {
	font-size: 1.8em;
	padding-left: 3em;
	align-self:center;
	}
	
	
	#nav {
	margin: 0;
	padding: 0;
	display: flex;	
	height: 10vh;
	}	
	

	
	.menu__toggler {
		display:none;
	}
	
	
	#nav ul.menu {
		display: flex;
		height: 10vh;
		padding: 0 0 0 6em;
		left: 0;
		flex-direction: row;
		justify-content: space-between;
		align-self: center;
	}
	
	
/*	#nav ul.menu li {
		border-top: none;
		margin-left: 2em;
		line-height: 0;
		display: flex;
		align-self: center;
		font-size: 1.25em;
	}  Raleway styles */ 
	
	#nav ul.menu li {
		border-top: none;
		margin-left: 2em;
		line-height: 0;
		display: flex;
		align-self: center;
		font-size: 2.5em;
		font-weight: 100;
	}
	
	
	
			
#main > article {
	font-size: 1.2em; 
	opacity: 1.0;
	/*background-image: url("../images/hat.png");
	background-repeat: no-repeat;
	background-position: 90% 15%;*/
  }	
	
	
article h2.white {
	display: flex;
	font-size: 1.2em;
	}	

	
} /* end 1140 */