@font-face {
    font-family:links;
    src:url(Arcon-Rounded-Regular.otf);
}

@font-face {
    font-family:content;
    src:url(Arcon-Regular.otf);
}

body {
    margin: 0px;
	display: none;
}

header {
    float:none;
    text-align:center;
	margin-bottom: 10px;
}

/* --------------------- Navigation -------------------------- */
nav {
    font-family:links;
    font-size:22px;
    text-align:center;
    word-spacing:80px;
    float:none;
    margin-bottom:5px;
}

.current a:link, .current a:active, .current a:visited {
    color: #c15666;
}

nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
   }
   
nav li {
    display:inline;
}
   
nav a {
    text-decoration: none;
    color: #585258;
}

nav a:hover {
    color: #c15666;
}



/* -------------------- Main Content / Galleries ----------------------- */

#content {
    width:800px;
    font-family: content;
    text-align: justify;
    font-size: 14px;
    border-top:2px solid #36363f;
    margin:auto;
    clear:both;
}

#pics img {
    padding-right: 10px;
    padding-top: 10px;
}

#pics {
  text-align: center;
  }
/* -------------------------- About Page --------------------- */

#aboutleft {
    width:600px;
    margin-right:25px;
    float:left;
    font-family: content;
    font-size: 15px;
    text-align:justify;
}

#aboutright {
    text-align:center;
    padding-top:25px;
}

/* ------------------------------- Author Page ---------------------- */

section {
    margin-top:27px;
    margin-right:10px;
    width:350px;
    height: 800px;
    float:left;
    font-family:content;
    font-size: 15px;
    text-align:justify;
    white-space: nowrap;
}

aside {
    text-align:justify;
    font-family:content;
	font-size: 15px;
}

#content-author {
    width:800px;
    border-top:2px solid #36363f;
    margin:auto;
    clear:both;
    font-family:content;
    font-size: 15px;
    text-align: justify;
}

aside h2 {
  font-size: 25px;
  text-align: left;
  font-family: content;
  color: #003591;
  margin-bottom: 10px;  
}	

aside h3 {
  color: #585258;
  font-size: 20px;
  text-align: left;
  font-family: content;
  margin-bottom: 5px;  
}
aside p {
	margin-top: 10px;
	color: #585258;
}
/* --------------------------- pop up box 1 ------------------------ */

/* --------------------------- Button on page -------------------- */
.box {
  width: 550px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
}
				
.button {
  font-size: 16px;
  padding: 8px;
  color: #003591;
  border-radius: 2px/5px;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #003591;
  color: white;
  text-decoration: none;
}
/* ---------------------------- Pop up text ----------------------- */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
 }
.overlay:target {
  visibility: visible;
  opacity: 1;
}
			
.popup {
  margin: 70px auto;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  width: 900px;
  position: relative;
  transition: all 5s ease-in-out;
}

.journeypics {
  text-align: center;
  }
.popup h2 {
  margin-top: 0;
  color: #003591;
  font-family: content;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 300ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: red;
}
.popup .content {
  max-height: 600px;
  overflow-y: scroll;
}
/* --------------------------- pop up box 2 ------------------------ */

/* --------------------------- Button on page -------------------- */
.box2 {
  width: 550px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
}
				
.button2 {
  font-size: 16px;
  padding: 8px;
  color: #003591;
  border-radius: 2px/5px;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button2:hover {
  background: #003591;
  color: white;
  text-decoration: none;
}
/* ---------------------------- Pop up text ----------------------- */
.overlay2 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
 }
 
.overlay2:target {
  visibility: visible;
  opacity: 1;
}
			
.popup2 {
  margin: 70px auto;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  width: 900px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup2 h2 {
  margin-top: 0;
  color: #003591;
  font-family: content;
}

.popup2 .close2 {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 300ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup2 .close2:hover {
  color: red;
}

.popup2 .content2 {
  max-height: 600px;
  overflow-y: scroll;
}

/* --------------------------- pop up box 3 ------------------------ */

/* --------------------------- Button on page -------------------- */
.box3 {
  width: 550px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
}
				
.button3 {
  font-size: 16px;
  padding: 8px;
  color: #003591;
  border-radius: 2px/5px;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button3:hover {
  background: #003591;
  color: white;
  text-decoration: none;
}
/* ---------------------------- Pop up text ----------------------- */
.overlay3 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
 }
 
.overlay3:target {
  visibility: visible;
  opacity: 1;
}
			
.popup3 {
  margin: 70px auto;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  width: 900px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup3 h2 {
  margin-top: 0;
  color: #003591;
  font-family: content;
}

.popup3 .close3 {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 300ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup3 .close3:hover {
  color: red;
}

.popup3 .content3 {
  max-height: 600px;
  overflow-y: scroll;
}

/* --------------------------- pop up box 4 ------------------------ */

/* --------------------------- Button on page -------------------- */
.box4 {
  width: 550px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
}
				
.button4 {
  font-size: 16px;
  padding: 8px;
  color: #003591;
  border-radius: 2px/5px;
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button4:hover {
  background: #003591;
  color: white;
  text-decoration: none;
}
/* ---------------------------- Pop up text ----------------------- */
.overlay4 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
 }
 
.overlay4:target {
  visibility: visible;
  opacity: 1;
}
			
.popup4 {
  margin: 70px auto;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  width: 900px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup4 h3 {
  margin-top: 0;
  color: #003591;
  font-family: content;
}

.popup4 .close4 {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 300ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup3 .close3:hover {
  color: red;
}

.popup4 .content4 {
  max-height: 600px;
  overflow-y: scroll;
}

/* ------------------------- Artist ------------------------- */
#content-artist {
    width:800px;
    font-family: content;
    text-align: justify;
    font-size: 14px;
    border-top:2px solid #36363f;
    margin:auto;
    clear:both; 
}

#art-left {
    width: 300px;
    float: left;
    white-space: nowrap;

}

#art-right {
    width: 496px;
    float:right;


}

/* -------------------------- Workshop -------------------------*/

#work-left {
    width: 200px;
    float: left;
    white-space: nowrap;
}

#work-right {
    width: 700px;
}

/* ------------------------- Musician ------------------------- */
#content-musician {
    width:800px;
    font-family: content;
    text-align: justify;
    font-size: 14px;
    border-top:2px solid #36363f;
    margin:auto;
    clear:both; 
}
#mus-left {
    width: 320px;
    float: left;
    white-space: nowrap;

}

#mus-right {
    width: 466px;
    float:right;
    margin-left: 5px;
}