/*   SMALL SCREEN  */
*{
	margin:0;
	padding:0;
}
html, body {
    height: 100%;
}


h1 {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	position: fixed;
	background: white;
	width: 100%;
	z-index: 2;
	color: #333;
	font-family: Lobster, LowCasatLight_PERSONAL_USE, Rainbow , Futura;
	text-align: center;
	font-weight: normal;
	font-size: 2em;
	border-bottom-style: solid;
	border-width: 1px;
	border-bottom-color: red;

}


.nav{
    list-style-type: none;
    position: relative;
    width: 100%;
    top: 11%;
}

.nav li {
    display: block;
    background: white;


}
.nav li a {
    display: block;
    color: #333;
    font-size: 13px;
    font-family: Oswald, Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: none;
}
.nav li a:hover {
	color: white;
	background: #333;
}
.nav .current_page{
    display: block;
    font-family: Oswald, Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #333;;
}
#home {
	display: block;
	width: 150%;
	top: 20%;
	right: 50%;
	position: relative;

}
.text {
	position: absolute;
	top: 52%;
	left: 10%;
	color: red;
	font-family:  "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, Futura-Medium, "Futura Medium",sans-serif;
	font-size: .8em;
	width: 25%;
	text-align: left;
	text-decoration: none;
	word-spacing: 10px;
	line-height: 1.2;
}

.bottom{
	background: black;
	color: white;
	font-family: Oswald, Futura, Futura-Medium,  CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
	position: fixed;
	font-size: 12px;
	padding-top: 20px;
	text-align: center;
	position: relative;
	height: 10%;
	width: 100%;
	top: 45%;
	opacity: .55;
}	
footer {
	color: white;
	background: #333;
	font-family: Oswald, Futura, Futura-Medium,  CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
	position: fixed;
	padding: 6px;
	padding-left: 20px;
	word-spacing: 60px;
	font-size: 11px;
	width: 100%;
	bottom: 0%;
	text-align: left;
	opacity: .85;
}
.footer_image{
	position: relative;
	width: 25px;
	top: 2px;
	left: 10%;
}

/*---------------------ZINE-----------------------------*/
.description{
	font-family: Oswald, Futura;
	position: relative;
	top:18%;
	width: 90%;
	left:6%;
	color: #333;
	text-align: left;
	font-size: 1.4em;
}
.zine{
	position: relative;
	top: 25%;
	margin-bottom: 35%;
	text-align: center;
}

/*----------------------PHOTOGRAPHS-------------------------*/
.gallery{
	width: 100%;
	position: relative;
	text-align: center;
	top: 20%;
	}
.album{
	width: 100%;
	position: relative;	
}

.album:hover {
  	-webkit-filter: grayscale(95%);
}
.photo{
	width: 100%;
	position: relative;

}

/*----------------------Accordion Menu-------------------*/
.accordion{
	position: relative;
	top: 20%;
	left: 16%;
	text-align: center;
	width: 70%;
}

.category {
	padding: 10px 5px 10px 5px;
	background: #e2e2e2;
	margin-bottom: 10px;
	font-family: Lobster, LowCasatLight_PERSONAL_USE, Futura;
	color: #333;
	font-size: 1.4em;
	text-align: center;
}
.category:hover{
	background: green;
	color: white;
}

.content{
	position: relative;
	width: 142%;
	right: 22.5%;
	display: none;
}	
.container{
	width: 18%;
	position: relative;	
	display: inline-block;
	margin: 3%;
}
.container img{
	width: 100%;
}
.caption{
	width: 80%;
	position: absolute;
	font-family: Oswald, Futura, CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
	font-weight: 100;
	text-align: center;
	top: 10%;
	left: 10%;
	color: white;
	display:none;
}

.container_stuff{
	width: 100%;
	position: relative;
	margin-top: 5%;
	margin-bottom: 5%;
	display: none;
	font-size: 1em;
	font-family:  "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, Futura-Medium, "Futura Medium",sans-serif;
}

.gutter{
	font-family: Lobster, LowCasatLight_PERSONAL_USE, Futura;
	position: relative;
	display: inline-block;
	margin: 5% 0 5% 0;
	width: 40%;
	font-size: 1.9em;
}
.gutter img{
	width: 100%;
}	
.gutter p {
	font-size: .7em;
	position: relative;
	width: 150%;
	right: 25%;
	font-family: Oswald, Futura, CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
}
.document{
	font-family: Lobster, LowCasatLight_PERSONAL_USE, Futura;
	font-weight: 100;
	font-size: 1.5em;
	display: inline-block;
	position: relative;
	width: 30%;
	margin: 3%;
}
.document img{
	width: 100%;
}
.document a:hover{
	-webkit-filter: brightness(80%);
}
.poster{
	font-family: Oswald, Futura, CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
	font-size: 1.6em;
	position: relative;
	display: inline-block;
	margin-top: 5%;
	margin-bottom: 5%;
	width: 100%;
}
.poster p{
	font-family: "Avenir", "Avant Garde", Futura, Futura-Medium, "Futura Medium",sans-serif;
	font-size: .6em;
	text-align: left;
	position: relative;
	margin: 0 2% 0 2%;
}
.poster img{
	width: 100%;
}
.poster a:hover{
	-webkit-filter: brightness(80%);
}

/*-------------------------------------------------*/