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

/*Colour scheme for reference (note to self):
orange color front page, with transparency #deb792;
grey color: #e0dee0; (textblock paragraphs)
pinkish grey: #d2c1bf; (textblock headers) */

body {
	background-color: #fffffe;
	background-image: url(../media/css_img/photocopy-bg-colour-uncropped-wfade4.jpg);
	background-repeat: repeat-y;
	background-position: top left;
	font-family: 'Josefin Slab', serif;
	font-weight: 400;
}

p {
	font-weight: 400; 
	font-size:18px;
	line-height: 1.2;
	padding: 18px;
}

a {
	text-decoration: none;
	font-family: 'Josefin Slab', serif;
	font-weight: 700;
	color: black;
}

a:hover {
	text-decoration: underline;
}

h1 {
	font-weight: 400;
	font-size: 36px;
	font-family: 'Special Elite',serif;
	color: black;
}

.roundtop {
	border-radius: 5px 5px 0px 0px;
}

.roundbottom {
	border-radius: 0px 0px 5px 5px;
}

.text-container {
	background-color:rgb(255,255,254);
	background-color: rgba(255,255,254,0.33);
}


.text-container .h1 {
	font-family: 'Special Elite', serif;
	color: black;
	font-size: 24px; 
	padding: 18px;
}

.text-container .h2 {
	font-family: 'Special Elite',serif;
	color: black;
	font-size:18px;
	padding: 18px;
}
	
.text-container .p {
	font-weight: 400; 
	font-size:16px;
	line-height:1.2;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 18px;
	padding-top: 0;
}

.text-container .p-last {
	font-weight: 400; 
	font-size:16px;
	line-height: 1.2;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 18px;
	padding-top: 0;
}

.text-container .p-first {
	font-weight: 400; 
	font-size:16px;
	line-height: 1.2;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 18px;
	padding-top: 18px;
}

.img-container .caption {
	text-align: center;
	background-color: black; 
	color:#fffffe; 
	font-weight: 300;
}

.img-container .photocredit {
	text-align: left;
	padding: 0 0 0 5px;
	background-color: black; 
	color:#CCC;
	font-size: 12px; 
	font-weight: 300;
}

.img-container1 .caption {
	text-align: center;
	background-color: black; 
	color:#fffffe; 
	font-weight: 300;
}

.img-container2 .photocredit {
	text-align: left;
	padding: 0 0 0 5px;
	background-color: black; 
	color:#CCC;
	font-size: 12px; 
	font-weight: 300;
}
 .img-container2 .caption {
	text-align: center;
	background-color: black; 
	color:#fffffe; 
	font-weight: 300;
}

.img-container1 .photocredit {
	text-align: left;
	padding: 0 0 0 5px;
	background-color: black; 
	color:#CCC;
	font-size: 12px; 
	font-weight: 300;
}
#navbar {
	font-family: 'Special Elite', serif;
	font-weight: 100;
	font-size: 36px;
	margin: 0;
	position: fixed;
	top: 0;
	right: 0%;
	width: 100%;
	text-align: center;
	padding: 18px;
	z-index: 2;

}
#navbar a {
	font-family: 'Special Elite', serif;
	color: black;
	text-decoration: none;
	font-weight: 300;
}

.sticky{
	position: fixed;
	top: 0;
	right: 0%;
	width: 100%;
}
	
#top {	
	height: 2000px;
}

#top .title {
	font-family: 'Special Elite', serif; 
	font-weight: 700; 
	font-size: 108px; 
	font-style: normal;
	margin:0; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	text-align: center; 
	padding: 70px 0;
}

#about {
	height: 2000px;
}

#about .text-container {
	position: relative; 
	top: 108px; 
	margin: auto; 
	width: 820px;
}

#about .text-container .p-last {
	padding-top: 18px;
}

#about .collage-container {
	position: relative; 
	top: 108px; 
	margin: auto; 
	width: 820px;
	padding: 10px;
}

#about .img-container {
	width: 400px;
	float: left;
	padding: 5px; 
}

#museum {
	height: 2600px;
}

#museum .text-container {
	position: relative; 
	top: 108px; 
	left:10px; 
	width: 50%; 
	float: left;
}

#museum .gallery_container {
	position: relative;
	top: 108px;
	right: 5px;
	float: right;
	padding: 0px;
	width: 50%;
}

#museum .gallery{
	position: relative;
	float: right;
	padding: 5px;
	width: 200px;
	min-height: 200px;
}

#museum .gallery_vid {
	position: relative;
	float:right;
	padding: 5px;
	width: 200px;
	min-height: 200px;
}

#museum .gallery_vid:hover {
	opacity:0.7;
}
	
#museum .gallery .caption {
	text-align: center;
	background-color: black; 
	color:#fffffe; 
	font-weight: 300;
}

#museum .gallery_vid .caption {
	text-align: center;
	background-color: black; 
	color:#fffffe; 
	font-weight: 300;
}

#museum .gallery_vid .vid-still {
}

#museum .gallery_audio {
	position: relative;
	float: right;
	padding: 5px;
	width: 200px;
	min-height: 200px;
	border: none;
}

#museum .gallery_audio .caption {
	text-align: center;
	background-color: black; 
	color:#fffffe; 
	font-weight: 300;
}

#museum .img-container {
	position:relative;
	top: 200px;
	margin-right:5px;
	float: right;
	width: 800px;
}
	
#pubs {
	height: 2000px;
}

#pubs .text-container {
	position:relative; 
	top:108px; 
	width: 50%; 
	float:right;
}

#pubs .img-container {
	position:relative;
	top: 200px;
	margin-left:5px;
	float: left;
	width: 800px;
}

#performances {
	height: 2000px;
}

#performances .text-container {
	position: relative;
	top: 108px;
	margin-left: 10px; 
	width: 50%;
	float: left;
}
#performances .img-container {
	position:relative;
	top: 108px;
	margin-right:5px;
	float: right;
	width: 800px;
}

#contact {
	height: 1300px;
}

#contact .text-container {
	position:relative; 
	top:108px; 
	width: 500px; 
	margin:auto;
}

#contact .img-container1 {
	position:relative;
	top: 100px;
	margin-left:5px;
	float: left;
	width: 500px;
}
#contact .img-container2 {
	position:relative;
	top: 100px;
	margin-right:5px;
	float: right;
	width: 500px;
}



/*These classes are used by the gallery items, but more importantly, they allow the modal pop-up images to load*/
.myImg {
		width: 200px;
        }
.myImg:hover {
		opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 120px; /* Location of the box */
    left: 0;
    top: 0;
//   width: 100%; /* Full width */
//   height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #fffffe;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 85px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}