.container {
	width: 100vw; /* makes sure that the "container" div is stretched to the left and right edges of our web browser */
	height: 2800px;
	background-color: #4C0059;
	
}

.concrete {
	width: 100vw;
	height: 2700px;
	position: absolute;
	mix-blend-mode: multiply;
	opacity: 25%;
	background-size: cover;
}

.icon {
	width: 100px;
	height: 100px;
	background: url(../images/wwwystacked.png);
	background-size: cover;
	position: absolute;
	left: 20px;
	top: -15px;
	z-index: 2;
}

section {
	position: relative; /* This is needed so that all of our CSS positionings will work within all of our sections */
}

/* Typography */

@font-face {
	font-family: "White on Black";
	src: url("../fonts/White on Black.ttf") format("truetype");
}

@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/Bebas Neue.ttf") format("truetype");
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/SourceSans3-Regular.ttf") format("truetype");
}


/* For Headers/Titles */
h1 {
	font-size: 4em;
	font-family: "White on Black";
	color: black;
	background-color: white;
	position: absolute;
	left: 50%;
	top: 25%;
	transform: translate(-50%,-65%);
}

h5 {
	font-family: "Bebas Neue";
	font-size: 2em;
	color: white;
	background-color: black;
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%,-65%);
	}



.link {
	font-family: "Bebas Neue";
	font-size: 25px;
	color: white;
	letter-spacing: 0.1px;
	position: absolute;
	display: block;
	margin: auto;
	border: solid 2px black;
	background-color: black;
	border-radius: 10px;
	left: 38%;
	top: 50%;
	width: 320px;
	padding: 10px;
	text-align: center;
	margin-top: 60px;
	text-decoration: none;
	transition: 0.4s;	This is the transition out btw
}



/* For Subheaders */

h6 {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	background: black;
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* translateX only moves the object horizontally */
	top: 33%;
}


/* For Captions */
h4 {
	font-family: "Bebas Neue";
	font-size: 1.5em;
	color: black;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 40px;
}

/* Navigation Bar */
.navigation {
	width: 100vw;
	height: 70px;
	background: black;
	position: fixed; /* Here, we use fixed positioning so that our nav bar always stays on top of the page */
	z-index: 10; /* having a z-index larger than 0 ensures that our nav bar is on top of other content on the page */
}

ul {
	list-style: none; /* this removes bullet points on our "list" */
	margin-top: 25px;
	margin-left: 20px;
	margin-right: 40px;
	font-size: 1.6em;
	font-family: "Bebas Neue";
}

li {
	float: right; /* makes all of our links on the right side of the nav bar */
	margin-left: 30px; /* gives 20px of spacing between each text link */
}

a {
	color: white;
	text-decoration: none; /* removes the underline and blue color of our text links */
}

a:hover {
	color: #FFF200;
	transition: .5s;
}

li:last-child { /* last-child only targets the last item on our list, which is our home page link */
	float: left; /* make sure that the home page link is on the left of the page, not the right */
	margin-left: 0px;
}


/* Home Page CSS */

.home { /* this is the hero image area */
	width: 100vw; /* makes sure that this section stretches to the entire width of the web browser */
	height: 100vh; /* same idea but for the vertical height of the web browser */
	background: url("../images/green concert.jpg") center fixed no-repeat;
	background-color: #4C0059;
}


.one {
	width: 1000px; /* this section has a fixed width. I recommend doing this for everything outside of the hero image section */
	height: 2000px;
	margin: auto; /* makes sure that the section is centered on the page */
}



/*Featured Performances / Chapter One */


.featured {
	font-family: "Bebas Neue";
	font-size: 5em;
	position: absolute;
	top: 70px;
	left: 200px;
	transform: translate(-5%, 0%);
	color: white;
	text-align: center;
	z-index: 1;
}


.blink {
	width: 300px;
	height: 500px;
	transform: translate(-10%, 0%);
	position: absolute;
	left:-75px;
	top: 275px;
	background: white;
	overflow: hidden;
}

.blinkimg {
	background: url("../images/blink.jpg");
	width: 300px;
	height: 400px;
	left: 0px;
	top: 0px;
	background-size: cover;
	position: absolute;
}


.blinktxt {
	font-family: "Bebas Neue";
	font-size: 40px;
	bottom: 50px;
	left: 15px;
	color: black;
	position: absolute;
	transition: 0.4s;
}


.blinkalbum {
	font-family: "Bebas Neue";
	font-size: 16px;
	bottom: 10px;
	left: 15px;
	color: black;
	position: absolute;
}

.blinktxt:hover {
	color: #F363A8;
	transition: .5s;
}


.panic {
	width: 300px;
	height: 500px;
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -225%);
	background: white;
	overflow: hidden;
}


.panicimg {
	background: url("../images/disco.jpg");
	width: 475px;
	height: 400px;
	left: -80px;
	top: 0px;
	background-size: cover;
	position: absolute;
	z-index: 3;
}


.panictxt {
	font-family: "Bebas Neue";
	font-size: 40px;
	bottom: 50px;
	left: 15px;
	color: black;
	position: absolute;
	z-index: 4;
}


.panicalbum {
	font-family: "Bebas Neue";
	font-size: 16px;
	bottom: 10px;
	left: 15px;
	color: black;
	position: absolute;
}

.panictxt:hover {
	color: #F363A8;
	transition: .5s;
}


.weezer {
	width: 300px;
	height: 500px;
	position: absolute;
	left: 775px;
	top: 275px;
	transform: translate(10%, 0%);
	background: white;
	overflow: hidden;
}


.weezerimg {
	background: url("../images/vanweez.jpg");
	width: 700px;
	height: 400px;
	left: -190px;
	top: 0px;
	background-size: cover;
	position: absolute;
}


.weezertxt {
	font-family: "Bebas Neue";
	font-size: 40px;
	bottom: 50px;
	left: 15px;
	color: black;
	position: absolute;
}


.weezeralbum {
	font-family: "Bebas Neue";
	font-size: 16px;
	bottom: 10px;
	left: 15px;
	color: black;
	position: absolute;
}


.weezertxt:hover {
	color: #F363A8;
	transition: .5s;
}


.lavigne {
	width: 300px;
	height: 500px;
	position: absolute;
	left: 565px;
	top: 920px;
	background: white;
	overflow: hidden;
}

.lavigneimg {
	background: url("../images/lavigne.jpg");
	width: 600px;
	height: 400px;
	left: -150px;
	top: 0px;
	background-size: cover;
	position: absolute;
	z-index: 2;
}


.lavignetxt {
	font-family: "Bebas Neue";
	font-size: 40px;
	bottom: 50px;
	left: 15px;
	color: black;
	position: absolute;
	z-index: 5;
}


.lavignealbum {
	font-family: "Bebas Neue";
	font-size: 16px;
	bottom: 10px;
	left: 15px;
	color: black;
	position: absolute;
}


.lavignetxt:hover {
	color: #F363A8;
	transition: .5s;
}


.offspring {
	width: 300px;
	height: 500px;
	position: absolute;
	left: 100px;
	top: 920px;
	background: white;
	overflow: hidden;
}

.offspringimg {
	background: url("../images/offspring.jpg");
	width: 600px;
	height: 400px;
	left: -210px;
	top: 0px;
	background-size: cover;
	position: absolute;
}


.offspringtxt {
	font-family: "Bebas Neue";
	font-size: 40px;
	bottom: 50px;
	left: 15px;
	color: black;
	position: absolute;
	z-index: 6;
}


.offspringalbum {
	font-family: "Bebas Neue";
	font-size: 16px;
	bottom: 10px;
	left: 15px;
	color: black;
	position: absolute;
}


.offspringtxt:hover {
	color: #F363A8;
	transition: .5s;
}


.lineup {
	font-family: "Bebas Neue";
	font-size: 40px;
	color: white;
	letter-spacing: 0.1px;
	margin: center;
	position: absolute;
	display: block;
	border: solid 2px black;
	background-color: black;
	border-radius: 10px;
	left: 305px;
	top: 1500px;
	width: 450px;
	padding: 15px;
	text-align: center;
	margin-top: 60px;
	text-decoration: none;
	transform: translate(-50px, -20px);
	transition: 0.4s;	This is the transition out btw
}


/* Footer */

.footer {
	width: 100vw;
	height: 1700px;
	position: absolute;
	left: 0px;
	top: -140px;
	background: black;
	margin: auto;
	z-index: 7;
}


.thanks {
	font-family: "Bebas Neue";
	font-size: 4.8em;
	color: #F363A8;
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%,-30%);
	text-align: center;
	z-index: 8;
}


.american {
	background: url("../images/apparel.png");
	width: 320px;
	height: 130px;
	left: 40px;
	bottom: -330px;
	position: absolute;
	background-size: cover;
	z-index: 9;
  	transform: scale(0.7);
}


.allainz {
	background: url("../images/allainz.png");
	width: 500px;
	height: 124px;
	left: 310px;
	bottom: -330px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.55);
}


.beatbox {
	background: url("../images/beatbox.png");
	width: 500px;
	height: 181px;
	left: 680px;
	bottom: -350px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.55);
}


.wyndham {
	background: url("../images/wyndham.png");
	width: 1000px;
	height: 290px;
	left: 810px;
	bottom: -400px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.3);
}


.verizon {
	background: url("../images/verizon.png");
	width: 500px;
	height: 132px;
	left: 1060px;
	bottom: -565px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.6);
}


.titos {
	background: url("../images/titos.png");
	width: 491px;
	height: 626px;
	left: 680px;
	bottom: -810px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.3);
}


.eargasm {
	background: url("../images/eargasm.png");
	width: 1000px;
	height: 406px;
	left: 65px;
	bottom: -690px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.3);
}


.ghost {
	background: url("../images/ghost.png");
	width: 500px;
	height: 225px;
	left: -50px;
	bottom: -620px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.45);
}


.whiteclaw {
	background: url("../images/whiteclaw.png");
	width: 540px;
	height: 540px;
	left: -80px;
	bottom: -1020px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.3);
}


.idobi {
	background: url("../images/idobii.png");
	width: 515px;
	height: 424px;
	left: 300px;
	bottom: -960px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.4);
}


.mixtape {
	background: url("../images/mixtape.png");
	width: 793px;
	height: 389px;
	left: 530px;
	bottom: -955px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.3);
}


.veeps {
	background: url("../images/veeps.png");
	width: 1000px;
	height: 289px;
	left: 810px;
	bottom: -915px;
	position: absolute;
	background-size: cover;
	z-index: 9;
	transform: scale(0.3);
}


.fest {
	font-family: "Bebas Neue";
	font-size: 1.9em;
	color: #F363A8;
	position: absolute;
	left: 170px;
	bottom: -1080px;
	text-align: center;
	z-index: 9;
}


.halp {
	font-family: "Bebas Neue";
	font-size: 1.9em;
	color: #F363A8;
	position: absolute;
	left: 435px;
	bottom: -1080px;
	text-align: center;
	z-index: 9;
}


.socz {
	font-family: "Bebas Neue";
	font-size: 1.9em;
	color: #F363A8;
	position: absolute;
	left: 690px;
	bottom: -1080px;
	text-align: center;
	z-index: 9;
}


.subs {
	font-family: "Bebas Neue";
	font-size: 1.9em;
	color: #F363A8;
	position: absolute;
	left: 1070px;
	bottom: -1080px;
	text-align: center;
	z-index: 9;
}


.hom {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 170px;
	bottom: -1140px;
	text-align: center;
	z-index: 9;
}


.tix {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 170px;
	bottom: -1190px;
	text-align: center;
	z-index: 9;
}


.contax {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 435px;
	bottom: -1140px;
	text-align: center;
	z-index: 9;
}


.center {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 435px;
	bottom: -1190px;
	text-align: center;
	z-index: 9;
}


.safe {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 435px;
	bottom: -1240px;
	text-align: center;
	z-index: 9;
}


.access {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 435px;
	bottom: -1290px;
	text-align: center;
	z-index: 9;
}


.insta {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 690px;
	bottom: -1140px;
	text-align: center;
	z-index: 9;
}


.fb {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 690px;
	bottom: -1190px;
	text-align: center;
	z-index: 9;
}


.tt {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 690px;
	bottom: -1240px;
	text-align: center;
	z-index: 9;
}


.twitter {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 690px;
	bottom: -1290px;
	text-align: center;
	z-index: 9;
}


.threads {
	font-family: "Source Sans 3";
	font-size: 1.4em;
	color: white;
	position: absolute;
	left: 690px;
	bottom: -1340px;
	text-align: center;
	z-index: 9;
}


.email {
	font-family: "Source Sans 3";
	font-size: 20px;
	color: gray;
	letter-spacing: 0.1px;
	position: absolute;
	display: block;
	margin: auto;
	border: solid 2px white;
	background-color: white;
	border-radius: 10px;
	left: 1070px;
	bottom: -1150px;
	width: 320px;
	padding: 10px;
	text-align: left;
	margin-top: 60px;
	text-decoration: none;
	transition: 0.4s;
	z-index: 10;
}


.signup {
	font-family: "Bebas Neue";
	font-size: 30px;
	color: black;
	letter-spacing: 0.1px;
	position: absolute;
	display: block;
	margin: auto;
	border: solid 2px #F363A8;
	background-color: #F363A8;
	border-radius: 10px;
	left: 1070px;
	bottom: -1240px;
	width: 200px;
	padding: 14px;
	text-align: center;
	margin-top: 60px;
	text-decoration: none;
	z-index: 10;
}

.signup:hover {
	color: white;
	transition: .5s;
}


.line {
  width: 100vw;
  height: 60px;
  border-top: .5px solid white;
  position: absolute;
  z-index: 11;
  left: 0px;
  bottom: -1520px;
}


.wwwyfooter {
	font-family: "Source Sans 3";
	font-size: 1.1em;
	color: white;
	position: absolute;
	left: 140px;
	bottom: -1510px;
	text-align: center;
	z-index: 9;
}


.privacy {
	font-family: "Source Sans 3";
	font-size: 1.1em;
	color: white;
	position: absolute;
	left: 480px;
	bottom: -1510px;
	text-align: center;
	z-index: 9;
}


.terms {
	font-family: "Source Sans 3";
	font-size: 1.1em;
	color: white;
	position: absolute;
	left: 750px;
	bottom: -1510px;
	text-align: center;
	z-index: 9;
}


.noshare {
	font-family: "Source Sans 3";
	font-size: 1.1em;
	color: white;
	position: absolute;
	left: 1080px;
	bottom: -1510px;
	text-align: center;
	z-index: 9;
}