/************************ 
GENERAL 
************************/
body {
	font-family: 'Nunito', sans-serif;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
	box-shadow: 0 5px 5px 0px rgba(0, 0, 0, .8);
}
h3 {
	margin: 0 0 1em 0;
	text-align: center;
}

.pages ul li {
	list-style: none;
	display: inline;
	padding: 0 8% 0 5%;
	border-right: solid 1px;
	margin: auto;
}

.pages ul {
	text-align: center;
}


.wrap {
	max-width: 940px;
	margin: 0 auto;
	padding: 0 5%;
}

.mainContent {
	width: 100%;
	margin: auto;
}




/************************ 
HEADING
************************/
header {
	float: center;
	margin: auto;
	padding: 50px 0 50px 0;
	width: 100%;
	color: white;
	font-style: bold;
	font-size: 55px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0,0,0,10);
	background: linear-gradient(#5ED1F7,transparent 90%),
				linear-gradient(0deg, #fff, transparent),
				#5ED1F7 url(pictures/Karen_top.jpg) no-repeat;
	background-size: cover;
	background-position: 40% 45%;
}

header a.selected, header a:hover {
	color: #CFD3D4;
}


/************************ 
NAVIGATION
************************/
/* Nav link */
nav a, nav a:visited {
  color: #CFD3D4;
}

/* Selected Nav Link */
nav a.selected, nav a:hover {
  color: #aaa;
}

nav a {
	font-size: 20px;
}

nav {
  	text-align: center;
  	padding: 10px 0;
  	margin: 20px 0px 0;
}
nav li {
	float: left;
 	text-align: center;
  	padding: 10px 40px;
  	margin: 20px 0px 0;
  	border-right: 1px solid;
}

/*Ces brought this line of code in.*/
/*Description: When I was having trouble removing the bar from the right side
of the navigation links.*/
nav ul li:last-child {  
	border-right: 0;
}


nav ul {
	list-style: none;
 	margin: 0 10px;
  	padding: 0;
  	display: inline-block;
}

nav select {
	width: 90%;
}
/************************
BUTTON FOR SPOILER
************************/
button {
  background: #dae1e4;
  border: none;
  border-radius: 5px;
  color: #1d3c6a;
  font-size: 24px;
  width: 480px;
  padding: 40px 0;
  margin: -40px -20px;
  outline: none;
  cursor: pointer;
}
.spoiler {
	background: #1d3c6a;
  width: 440px;
  margin: 0 auto 20px;
  border-radius: 5px;
  padding: 40px 20px;
  text-align: center;
  font-size: 24px
}
.spoiler span {
  color: #dae1e4;
}
/************************ 
PICTURES
************************/
.pictures {
	margin: auto;
	padding: 0;
	list-style: none;
	border-radius: 25px;
}

.pictures {
	max-width: 85%;
	margin: center; /*This centers the margins*/
}

.pictures li {
	float: left;
	width: 40%;
	margin: 5%;
	display: block;
}

/*
.pictures li a p {
	margin: 0;
	padding: 5%;
	font-size: 0.75em;
}*/

/************************ 
Archive
************************/
.gallery h4 {
	font-size: 20px;
	margin: auto;
}

.gallery {
	margin: auto;
	padding: 10px 10px 10px;
	height: 103px;
	width: 103px;
	display: inline-block;
	list-style: none;
}
.gallery ol li {
	display: inline-block;
}

/************************ 
ABOUT
************************/
.profile-photo {
	display: block;
	max-width: 150px;
	border-radius: 100%;
	margin: auto;
}

/************************ 
FOOTER
************************/

footer {
	font-size: 0.75em;
	text-align: center;
	clear: both;
	padding-top: 100px;
	padding-bottom: 50px;
	color: white;
	background: linear-gradient(transparent 25%,#5ED1F7), 
				linear-gradient(0deg, transparent, #FFF), 
				#5ED1F7 url(pictures/ties.jpg) no-repeat;
	background-size: cover;
}


/***********************
OVERLAY
***********************/
.overlay {
  display: none;
  background:rgba(0,0,0,0.7);
  text-align:center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  position: fixed;/*Ces: Fixed the positioning of the image.*/
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; 
}

.overlay img {
 max-width: 60%; 
}

/************************
Media Query
************************/
@media (max-width: 568px) {
  nav ul {
    display:none;
  }
}

@media (min-width: 568px) {
  nav select, nav button {
    display:none;
  }
}