.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");
}


h1 {
	font-size: 4em;
	font-family: "White on Black";
	color: black;
	background-color: white;
	position: absolute;
	left: 610px;
	top: 40%;
}

/*nav 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;
}


/*Hero Image*/

.home {
	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/vegas.jpg") center fixed no-repeat;
	background-color: #4C0059;
}


/*Section One*/

.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 */
}


.container1 {
	width: 1400px;
	height: 800px;
	transform: translate(20%, 0%);
	position: absolute;
	left: 4.5%;
	top: 70%;
	transform: translate(0%, 0%);
}

.emo {
	font-family: "Source Sans 3";
	font-size: 1.8em;
	color: white;
	position: absolute;
	left: 40px;	
	top: 60px;
	text-align: left;
	z-index: 1;
	line-height: 45px;
}

.dozens {
	font-family: "Bebas Neue";
	font-size: 5em;
	color: white;
	position: absolute;
	left: 100px;	
	top: 390px;
	margin-: center;
	z-index: 1;
}

.weekend {
	font-family: "Bebas Neue";
	font-size: 5em;
	color: white;
	position: absolute;
	left: 140px;	
	top: 480px;
	margin-: center;
	z-index: 1;
}


.inception {
	font-family: "Source Sans 3";
	font-size: 1.8em;
	color: white;
	position: absolute;
	left: 40px;	
	top: 680px;
	text-align: left;
	z-index: 1;
	line-height: 45px;
}

.mcr {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 930px;
	margin-: center;
	z-index: 1;
}

.green {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1000px;
	margin-: center;
	z-index: 1;
}

.lavigne {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1070px;
	margin-: center;
	z-index: 1;
}

.fob {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1140px;
	margin-: center;
	z-index: 1;
}

.patd {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1210px;
	margin-: center;
	z-index: 1;
}

.offspring {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1280px;
	margin-: center;
	z-index: 1;
}

.paramore {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1350px;
	margin-: center;
	z-index: 1;
}

.weezer {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1420px;
	margin-: center;
	z-index: 1;
}

.ptv {
	font-family: "Bebas Neue";
	font-size: 3.3em;
	color: white;
	position: absolute;
	left: -10px;	
	top: 1490px;
	margin-: center;
	z-index: 1;
}

.ptvphoto {
	background: url("../images/ptv.jpg") no-repeat;
	width: 500px;
	height: 800px;
	position: absolute;
	left: 510px;
	top: 920px;
	z-index: 2;
	background-size: 100%;
}

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


/*Footer*/


.footerwhole {
	width: 100vw;
	height: 1600px;
	position: absolute;
	left: 0px;
	bottom: -2300px;
	margin: auto;
	z-index: 8;
}


.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.4);
}


.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.3);
}


.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.3);
}


.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;
}