body {
	margin: 0;
	padding: 0;

	/*background: -webkit-linear-gradient(top, rgba(102,30,94,0.9) 0%,rgba(175,64,115,0.9) 100%) no-repeat;*/
	background: -webkit-linear-gradient(top, rgba(102,30,94,0.9) 0%,rgba(83,52,109,1) 100%) no-repeat;

	overflow-y: scroll;
	overflow-x: hidden;
}


/*----------Same fonts, different weights.*/

@font-face {
    font-family: Helvetica-bolcon;
    src: url("../media/font/Helvetica/HelveticaNeueLTCom-BdCn.ttf");
}

@font-face {
	font-family: Helvetica-ltcon;
	src: url("../media/font/Helvetica/HelveticaNeueLTCom-Lt.ttf");
}

@font-face {
	font-family: Notera;
	src: url("../media/font/Notera.ttf");
}

@font-face {
	font-family: Roboto-regular;
	src: url("../media/font/Roboto/Roboto-regular.ttf");
}

/*----------CONTENT----------*/

#page {
	height: 100vh;
	width: 100vw;
}
	
	/*----------MENU----------*/

	#page-button {
		height: 7vw;
		left: 6.4vw;
		top: 5vh;
		width: 7vw;

		background: url('../media/menu.png') center top;
		background-size: cover;

		position: fixed;
		
		transition: transform 250ms ease-in;
		
		z-index: 20;
	}

		#page-button:hover {
			cursor: pointer;

			-webkit-transform: rotate(45deg);
			transition: transform 250ms ease-in;
		}

		#page-button:hover + #page-menu {
			margin-left: 0;

			transition: margin 250ms ease-in;
		}

		#page-button:hover ~ #page-content {
			margin-left: 10vw;

			transition: margin 250ms ease-in;
		}

		#page-menu:hover ~ #page-content {
			margin-left: 10vw;

			transition: margin 250ms ease-in;
		}

		#page-menu:hover {
			margin-left: 0;

			transition: margin 250ms ease-in;
		}

	#page-menu {
		background: -webkit-linear-gradient(left, rgba(102,30,94,.8) 0%,rgba(175,64,115,.7) 100%) no-repeat;
		float: left;
		height: 100vh;
		margin-left: -20vw;
		opacity: 1;
		padding-top: 20vh; 
		position: fixed;
		transition: margin 250ms ease-in;
		width: 20vw;
		z-index: 1;

		transition-delay: 250ms;
	}

		#page-menu-list {
			margin: 0;
			padding: 0;

			width: 100%;
		}

			#page-menu-head {
				width: 8vw;
				height: 8vw;	
			}

			.page-menu-item {
				border: 2px white solid;
				color: white;
				font-family: Helvetica-ltcon;
				font-size: 2vw;
				list-style: none;

				margin: 0;
				margin-bottom: 10px;
				margin-left: 5vw;
				margin-right: 5vw;

				padding: 5px;
				text-align: center;
				width: 9vw;
			}

				#page-menu-item-current {
					box-shadow: -10px 0px 0px #FFF, 10px 0px 0px #FFF ;
				}

				.page-menu-item > a {
					text-decoration: none;

					display:block;
					width: 100%;
					height: 100%;
				}

				.page-menu-item > a:link {
				    color: rgba(255,255,255,0.9);
				}

				.page-menu-item > a:visited {
				    color: rgba(213,182,203,0.5);
				}

				.page-menu-item > a:hover {
				    background-color: rgba(213,182,203,0.5);
				}



	/*----------MENU end----------*/


	#page-content {
		width: 100vw;

		margin-left: 0vw;
		margin-bottom: 10vh;
		opacity: 0.5;
		opacity: 1;
		
		float: left;

		color: white;
		
		/*padding-bottom: 300vh; */

		transition: margin 250ms ease-in;
	}

	/*----------LANDING----------*/
	
	#landing {
		background: url('../media/chancechance.jpg') left top;
		
		background-size: cover;

				background-attachment: fixed;
		margin-top: 00px;
		padding-top: 80px;
		height: 93vh;
		
		margin:0px;
	}

		#title-container {
			width: 720px;
			margin-left: 100px;
			margin-top:0px;
			margin-right: auto;

			background: -webkit-linear-gradient(top, rgba(102,30,94,0.64) 0%,rgba(175,64,115,0.64) 100%);
		}

			#title-head {
				color: white;
				padding-left: 20px;
				padding-right: 20px;
				margin: 0;

				font-size: 210px;

				font-family: Helvetica-bolcon;
				font-weight: 700;
			}
			#title-sub {
				color: white;
				padding: 0;
				margin: 0;

				padding-left: 20px;
				padding-right: 20px;

				margin-top: -60px;
				padding-bottom: 10px;

				text-align: right;

				font-size: 80px;	

				font-family: Helvetica-bolcon;
				font-weight: 700;
			}
	
	/*----------LANDING end----------*/
	
	/*----------NEWS----------*/

		#news-head {
			font-size: 70px;
			margin-bottom: 20px;
			padding-bottom: 0;
			margin-left: 20vw;

			font-family: Helvetica-bolcon;
		}

		.news-cont {
			width: 60vw;
			margin-left: 20vw;
			margin-bottom: 50px;

			background-color: rgba(0,0,0,0.2);

			padding: 1px;

			font-family: Helvetica-ltcon;
		}	
			.news-cont-image-wrap {
				width: 60vw;
				height: 10vh;

				overflow: hidden;
			}

				.news-cont-image {

					margin-top: -50vh;

					width: 60vw;
					height: auto;
				}

			.news-cont-head {
				margin: 0;
				margin-top: 2vh;
				margin-left: 1vw;
			}

			.news-cont-body {
				
				margin-left: 2vw;
				padding: 0;

			}

			.news-cont-link {
				float: right;
				display: block;

				text-decoration: none;

				color: white;

				padding: 5px;
				margin-top: 5px;
				margin-left: 5px;

				

				background-color: rgba(0,0,0,0.2);
			}

			.news-cont-link:hover {
				background-color: rgba(0,0,0,0.4);
			}

			#news-cont-featured .news-cont-image-wrap {
				width: 60vw;
				height: 40vw;
			}

				#news-cont-featured .news-cont-image {

					margin-top: -30vh;

					width: 60vw;
					height: auto;
				}

			#news-cont-featured .news-cont-head {
				font-size: 2em;
			}

			#news-cont-featured .news-cont-link {
				float: left;

				margin-left: 0;
			}

	/*----------NEWS end----------*/
	

	/*----------ABOUT----------*/

	.content-header {
		font-size: 10vw;
		margin-bottom: 20px;
		padding-bottom: 0;
		margin-left: 20vw;

		font-family: Helvetica-bolcon;
	}

	.about-header {
		margin: 0;
		padding: 0;
		margin-left: 21vw;

		width: 59vw;
		font-size: 6vw;
		font-family: Helvetica-bolcon;
	}

	.about-paragraph {
		margin-left: 22vw;
		width: 58vw;

		font-family: Roboto-regular;
	}

	/*----------ABOUT end----------*/
	

	/*----------ALBUM----------*/
	
		.album-cont {
			width: 60vw;
			height: 20vw;
			
			margin-left: 20vw;
			margin-bottom: 50px;

			background-color: rgba(0,0,0,0.2);
			background: -webkit-linear-gradient(left, rgba(102,30,94,0.9) 0%,rgba(83,52,109,0) 100%) no-repeat;
			
			padding: 0px;

			font-family: Helvetica-ltcon;
			
			overflow: hidden;
		}
			
			.album-cover {
				width: 20vw;
				height: 20vw;
				
				display:block;
				
				float:left;
			}

				.album-cover:hover + .album-download {
					display:block;
				}

				.album-download:hover {
					display:block;
				}

			.album-download {
				width: 5vw;
				height: 5vw;

				padding: 7.5vw;
				line-height: 5vw;

				text-align: center;
				vertical-align: bottom;

				background-color: rgba(0,0,0,0.5);
				position: absolute;
				
				float:left;

				display: none;

				text-decoration: none;
				color: white;
			}
			
				.album-head {
					margin: 0;
					padding: 0;
					
					color: white;
					
					font-size: 4vw;
					
					width: 40vw;
					height: 5vw;
					
					display:block;
					
					text-align: center;
				
					font-family: Notera;

					float: right;
				}
			
				.album-items {
					width: 40vw;
					height:15vw;
					
					margin:0;
					padding:0;

					margin-right:0vw;
					height: 14vw;
					
					display:block;
					float: right;
					
					 -webkit-columns: 2;
				}
				
				
					.album-items > li {			
						margin:0;
						padding:0;
						
						font-family: Roboto-regular;
						
						margin-left:40px;
						
						padding-left:2vw;
						
						height:0.5vw;
						padding:0.5vw;
						
					}
			
			#album-tenday {
				background: -webkit-linear-gradient(left, rgba(83,128,165,0.9) 0%,rgba(0,0,0,0) 100%) no-repeat;
			}
			
			#album-acidrap {
				background: -webkit-linear-gradient(left, rgba(147,74,129,0.9) 0%,rgba(0,0,0,0) 100%) no-repeat;
			}

			#album-coloringbook {
				background: -webkit-linear-gradient(left, rgba(248,87,115,0.9) 0%,rgba(0,0,0,0) 100%) no-repeat;
			}
			
			#album-backtoschool{
				background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0) 100%) no-repeat;
			}
			
			#album-goodenough{
				background: -webkit-linear-gradient(left, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%) no-repeat;
			}
			
			#album-surf {
				background: -webkit-linear-gradient(left, rgba(244,208,146,0.9) 0%,rgba(0,0,0,0) 100%) no-repeat;
			}
	
/*----------ALBUM end----------*/

/*----------LIVE----------*/

		.live-cont {
			width: 50vw;
			height: 20vw;
			margin-left: 20vw;

			background-color: rgba(0,0,0,0.2);

			margin-bottom: 40px;

			list-style: none;

			overflow: hidden;

			transition: width 250ms ease-in;
		}

			.live-cont:hover {
				width: 58vw;

				transition: width 250ms ease-in;
			}

			.live-cont:hover .live-cont-buy{
				margin-left: 0;

				transition: margin-left 250ms ease-in;
			}

			.live-cont-buy {
				margin-left: -8vw;

				width: 8vw;
				height: 20vw;
				line-height: 20vw;
				float: left;

				background: rgba(255,255,255,0.8);
				color: rgba(0,0,0,0.8);
				text-decoration: none;
				font-family: Helvetica-ltcon;
				font-size: 2vw;
				text-align: center;


				transition: margin-left 250ms ease-in;
			}

				.live-cont-buy:link {
					color: rgba(0,0,0,0.8);
				}

				.live-cont-buy:visited {
					color: rgba(0,0,0,0.8);
				}

			.live-cont-date {
				width: 8vw;
				height: 8vw;
				line-height: 8vw;
				text-align: center;
				margin-left: 1vw;
				margin-top: 1vw;

				float: left;

				background-color: rgba(0,0,0,0.2);

				font-size: 2.5vw;
				font-family: Helvetica-ltcon;
			}

			.live-cont-details {
				width: 39vw;
				height: 8vw;
				line-height: 8vw;
				text-align: center;
				margin-left: 1vw;
				margin-top: 1vw;

				float: left;

				background-color: rgba(0,0,0,0.2);

				font-size: 2vw;
				font-family: Helvetica-ltcon;
			}

			.live-cont-child {
				width: 50vw;
				height: 10vw;
				line-height: 10vw;
				margin-top: 1vw;
				text-align: center;

				float: left;

				font-size: 2.5vw;
				font-family: Helvetica-ltcon;
			}

				.live-cont-map {
					width: 50vw;
					height: 10vw;
					
					float: left;

					border:0;
				}

/*----------LIVE end----------*/

/*----------MERCH----------*/
	#merch-cont {
		width: 60vw;
		margin-left: 20vw;
	}

		.merch-header {
			font-size: 5vw;
			margin-bottom: 20px;
			padding-bottom: 0;
			margin-left: 5vw;

			font-family: Helvetica-bolcon;
		}	
			.merch-checkbox + label:hover {
				cursor: pointer;
			}


			.merch-checkbox {
				display: none;

				height: 0vw;
			}

				.merch-checkbox:checked ~ .merch-cont-feedback {
					background-color: rgba(0,255,0,0.4);
					height: 1vw;

					transition: 100ms height ease-out;
				}

			.merch-cont-cont {
				width: 20vw;
				height: 30vw;	
				float: left;

			}

				.merch-image {
					width: 16vw;
					height: 16vw;
					float: left;
					margin: 2vw;
					margin-bottom: 0;

					background-color: rgba(0,0,0,0.2);
				}

				.merch-text {
					width: 16vw;
					height: 3vw;
					line-height: 3vw;

					float: left;
					margin: 0;
					margin-left: 2vw;

					padding: 0;
					font-family: Helvetica-ltcon;
					font-size: 1.5vw;
					text-align: center;
					background-color: rgba(0,0,0,0.1);
				}

				.merch-cont-feedback {
					width: 16vw;
					margin-left: 2vw;
					height: 0vw;

					float: left;

					transition: 100ms all ease-out;
				}

/*----------MERCH end----------*/

/*----------GALLERY----------*/

	#image-grid {
    	width: 67vw;

    	background-color: rgba(1,1,1,0.5);

    	margin-left: 16vw;
    	margin-top: 1vw;

    	padding-left: 1vw;
	}

		.image-item {
	    	background-color: #17819c;

	    	position: relative;
			float: left;
			overflow: hidden;
			margin: 1vw;
			
			background: #3085a3;
			text-align: center;
			cursor: pointer;

			width: 20vw;
	    	height: 20vw;
			
			color: #FFF;

	    	z-index:0;
		}

			.image-item:hover {
		    	cursor: pointer;
		    }

		.image-item img {
			width: 20vw;
		    height: 20vw;

			opacity: 0.7;

			object-fit: cover;

			transition: opacity 0.35s, transform 0.35s;
			transform: scale(1.15);

			animation-delay: 0s, 0.35s;
    		animation-duration: 0.35s, 10s;
    		animation-name: image-item-animation-hover-out, image-item-animation;
    		animation-iteration-count: 1, infinite;
		}

			.image-item:hover img {
				opacity: 0.5;
				animation-name: none;
				
				animation: image-item-animation-hover 0.35s;
				transform: scale(1);
			}

			/* GALLERY ANIMATION */
				@keyframes image-item-animation {
				    0%		{
				   		transform: scale(1.15);
				   	}
				    50%	{ 
				   		transform: scale(1.22);
				   	}
				   	100%	{ 
				   		transform: scale(1.15);
				   	}
				}

				@keyframes image-item-animation-hover {
				    0%		{
				   		transform: scale(1.15);
				   	}
				   	100%	{ 
				   		transform: scale(1);
				   	}
				}

				@keyframes image-item-animation-hover-out {
				    0%		{
				   		transform: scale(1);
				   	}
				   	100%	{ 
				   		transform: scale(1.15);
				   	}
				}
			/* ANIMATION END */

		.image-item figcaption
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 20vw;
	    	height: 20vw;

			z-index:1;
		}

			.image-item h2 {
				font-family: Helvetica-ltcon;
				text-align: center;

				font-size: 2.2vw;

				transition: transform 0.35s;
				transform: translate3d(0,20px,0);
			}

				.image-item:hover h2 {
					transform: translate3d(0,0,0);
				}

			.image-item span {
				font-family: Roboto-regular;
			}

			.image-item a {
				font-family: Roboto-regular;
				
				text-align: center;
				background-color: transparent;
				outline: white solid 2px;

				font-size: 1.1vw;

				padding: .5em 1em .5em 1em;

				text-decoration: none;

				color: rgba(255,255,255,0.9);

				width: 5vw;
				height: 5vw;
				line-height: 5vw; 
  				vertical-align: middle;

				margin-left: auto;
				margin-right: auto;

				display: block;
				overflow: hidden;

				opacity: 0;

				transition: opacity 0.35s, transform 0.35s;
				transform: translate3d(0,20px,0) scale(1.1);
			} 

				.image-item:hover a {
					opacity: 1;
					transform: translate3d(0,0,0) scale(1);
				}

				.image-item a:hover {
					background-color: rgba(255,255,255,0.1);
				} 

/*----------GALLERY end----------*/