﻿@-webkit-keyframes typing {
    from { width: 0 }
    to { width:200vh }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:200vh }
}

@-webkit-keyframes slidedown {
    from { top:-10vh }
    to { top:0 }
}

@-moz-keyframes slidedown {
     from { top:-10vh }
    to { top:0 }
}

@-webkit-keyframes arrow {
    from { bottom:1vh }
    to { bottom:0vh }
}

@-moz-keyframes arrow {
    from { bottom:1vh }
    to { bottom:0vh }
}


body{
	margin:0;
	padding:0;
	background:#e8ddc0;
	font-size:1em;
}
a{
	text-decoration:none;
	transition: 0.2s ease-out;
}
#bgs{
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:-1;
}
#bgs img{
	width:100%;
	height:auto;
}
h1{
	font-size:50vh;
	line-height:45vh;
	margin:0;
	padding:5vh;
	letter-spacing:5vh;
	position:absolute;
	top:0;
	left:0;
	right:0;
	-webkit-mix-blend-mode: overlay;
	-moz-mix-blend-mode: overlay;
	-o-mix-blend-mode: overlay;
	-ms-mix-blend-mode: overlay;
	mix-blend-mode: overlay;
	color:#e8ddc0;
	overflow:hidden;
  	white-space:nowrap;
    -webkit-animation: typing 1s steps(10, end);
    -moz-animation: typing 1s steps(10, end);
}    
h1 span{
	display:inline-block;
	float:right;
}
#topnav{
	background:#1c1c1a;
	padding:1vw;
	width:98vw;
	position:fixed;
	top:-10vh;
	left:0;
	z-index:100;
	-webkit-animation: slidedown 1.5s 1;
    -moz-animation: slidedown 1.5s 1;
}
#topnav{
	top:0;
}
#topnav a{
	color:#e8ddc0;
	text-decoration:none;
	padding:0 1.5vw;
}
#topnav a:hover, #topnav .active{
	color:#fff;
	font-size:1.2em;
}	
#topnav a:nth-child(odd) {
	xpadding-top:1.5vh;
}
x#plus{
	background:#1c1c1a;
	padding:10px;
	position:fixed;
	top:0vh;
	right:0;
	z-index:160;
	color:#e8ddc0;
	font-size:1.5em;
	line-height:0.8em;
}
#sidenav{
	position:fixed;
	top:50vh;
	right:-38vh;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
    z-index:101;
    display:none;
}
#sidenav a{
	display:inline-block;
	width:20vh;
	text-align:center;
	color:white;
	text-decoration:none;
	background:#1c1c1a;
	padding:1vh;
	vertical-align:top;
}
#sidenav a:hover, #sidenav .active{
	background:transparent;
	-webkit-mix-blend-mode: overlay;
	-moz-mix-blend-mode: overlay;
	-o-mix-blend-mode: overlay;
	-ms-mix-blend-mode: overlay;
	mix-blend-mode: overlay;
}
#downarrow{
	-webkit-mix-blend-mode: overlay;
	-moz-mix-blend-mode: overlay;
	-o-mix-blend-mode: overlay;
	-ms-mix-blend-mode: overlay;
	mix-blend-mode: overlay;
	position:fixed;
	left:48vw;
	z-index:50;
	-webkit-animation: arrow .5s infinite;
    -moz-animation: arrow .5s infinite;
}
#downarrow{
	bottom:1vh;
}
#downarrow img{
	width:30px;
	height:auto;
}
#socials{
	position:fixed;
	left:2vh;
	bottom:2vh;
	font-size:1.5em;
	z-index:102;
}
#socials ul{
	list-style:none;
	margin:0;
	padding:0;
}
#socials ul li a{
	color:#1c1c1a;
}
#socials ul li a:hover{
	-webkit-mix-blend-mode: overlay;
	-moz-mix-blend-mode: overlay;
	-o-mix-blend-mode: overlay;
	-ms-mix-blend-mode: overlay;
	mix-blend-mode: overlay;
	color:#fff;
}
#section0, #section8{
	background-image: url('../images/bg.jpg');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
#section1{
	background-image: url('../images/bg9.jpg');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
#section3{
	background-image: url('../images/bg3_2.gif');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: right bottom;
	overflow-x:hidden;
}
#section4{
	background-image: url('../images/bg4.jpg');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	overflow-x:hidden;
}
#section5{
	background-image: url('../images/bg5.jpg');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
#section6{
	background-image: url('../images/bg6.jpg');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
#section7{
	background-image: url('../images/bg7.jpg');
	background-size: cover;
	background-width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}
#section9{

}
#albumtop{
	max-height:50vh;
}
#albumdeets{
	width:80vw;
	max-width:1200px;
	margin:10vh auto;
}
#packshot{
	width:48%;
	height:auto;
	float:left;
}
#albumlinks{
	width:48%;
	float:right;
}
#albumlinks img{
	width:100%;
	height:auto;
}
#smlvid img{
	width:70%;
}
#albumlinks p a{
	color:white;
	background:#1c1c1a;
	padding:3px 5px;
	font-size:1.1em;
}
#albumlinks p a:hover{
	color:#e8ddc0;
}
#smlvid{
	padding:0 !important;
	background:none !important;
}
#smlvid img{
	border:#1c1c1a 20px solid; 
	transition: 0.2s ease-out;
}
#smlvid:hover img{
	border:#fff 20px solid; 
}
#section2 iframe{
	width:100vw;
	height:100vh;
}
#livedates{
	width:90vw;
	max-width:1000px; 
	margin:10vh auto;
}
.bit-nav-bar{
	display:none !important;
}
.scrollable-element{
	xmax-height: 65vh;
	xoverflow-y: scroll;
	margin: 0 auto;
}
#contactdeets{
	background:#e8ddc0;
	color:#1c1c1a;
	width:50vw;
	max-width:400px;
	position:absolute;
	right:0vw;
	bottom:-2vw;
	padding:2vw 7vw 2vw 2vw;
	-ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Safari */
    transform: rotate(-2deg);
}
#contactdeets p{
	border-bottom:1px #1c1c1a solid;
	padding-bottom:2vh;
	margin-bottom:2vh;
}
.lastone{
	border-bottom:none !important;
}
#contactdeets a{
	color:white;
}
#contactdeets a:hover{
	color:#1c1c1a;
}
#formholder{
	background:url(../images/formbg.jpg);
	padding:20px;
	width:80vw;
	max-width:400px;
	margin:10vh auto;
	border:#1c1c1a 2px solid;
}
#section5 form, #section5 #form{
	color:#1c1c1a;
	xborder:#e8ddc0 20px solid;
	xbackground:url(../images/formbg.jpg);
	background:#e8ddc0;
	border:#1c1c1a 2px solid;
	padding:5vh;
	text-align:center;
}
#section5 form h3{
	border-bottom:#1c1c1a 2px solid;
	padding-bottom:2vh;
}
#email{
	-webkit-appearence:none;
	border-radius:0;
	color:#1c1c1a;
	border:#1c1c1a 2px solid;
	background:#e8ddc0;
	padding:1vh;
}
#submit{
	-webkit-appearence:none;
	border-radius:0;
	color:#e8ddc0;
	border:#1c1c1a 2px solid;
	background:#1c1c1a;
	padding:1vh;
	cursor:pointer;
	transition: 0.2s ease-out;
}
#submit:hover{
	border:#e8ddc0 2px solid;
}
.foundationetc{
	color:#1c1c1a;
	background:#e8ddc0;
	width:80vw;
	max-width:1000px;
	margin:10vh auto;
	padding:5vw;
}
.foundationetc a{
	color:white;
	background:#1c1c1a;
	padding:1px 5px;
}
.foundationetc a:hover{
	color:#e8ddc0;
}
.creditssec{
	width:90%;
	max-width:1200px;
	margin:auto;
	color:#e8ddc0;
	padding:2vw;
	background:black;
	background:rgba(0,0,0,0.7);
}
#section9 .creditssec{
	margin:2vh auto;
}
@media screen and (max-width: 1000px) {
	#topnav a, #topnav a:hover, #topnav .active{
		font-size:0.8em;
	}

}
@media screen and (max-width: 500px) {
	h1{
		font-size:20vw;
		line-height:30vw;
		top:20vh;
	}

}