/*
            _.--""-.                      
        .--"        `.                    
       /              \                   
      :            .   ;                  
      ;            :   |                  
     ::    .       ::  :                  
     ::. .:'       ':.  ;                 
     ;::::' __.._   ::. :                 
    /  __.g$$$$$$""gp.._'-._              
  .'.g$$$$$$$$$P   T$-.:""-/              
  '-.T$$P`T$$P'     ");|.-'               
      "T         .-  ,-'                  
   bug l _,     /    ;\.-"\               
       d$$bp.       /  ;   `-.            
       T"--"T     .'   : \_, :            
        Y""-  _.-"  '  ;  )' ;"-._        
       .:b..gdP    /  / .'  /     "-.     
      / 'T$$P"   .' .'    .'         `.   
   _.-`.  \  \    .'   .-"             \  
 .'     "-.)_ `.-"  .-"                 ; 
/            "-._.-"                    : 


Site designed and built in a few days on a whim by Chris Cubellis (HUGE BROOKLYN) & Jose Gasparian (HUGE RIO).
Copywriting by Stephanie Mitesser.
Try not to look through this code and the insane amount of !important tags.
Sorry to any clients who lost some billable hours from this side project.
Cheers to the Huge Mixtape group.
Enjoy!

*/

html,
body,
#fullpage,
.section{
    height: 100%;
}

@font-face {
    font-family: 'HUGE-AvantGarde-Bold';
    src: url('fonts/huge_agb_v5-webfont.ttf') format('ttf'),
    	 url('fonts/huge_agb_v5-webfont.eot') format('eot'),
    	 url('fonts/huge_agb_v5-webfont.woff') format('woff'),
         url('fonts/huge_agb_v5-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CopernicusBook';
    src: url('fonts/GalaxieCopernicus-Book.ttf') format('ttf'),
    	 url('fonts/GalaxieCopernicus-Book.eot') format('eot'),
    	 url('fonts/GalaxieCopernicus-Book.woff') format('woff'),
         url('fonts/GalaxieCopernicus-Book.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CopernicusBookItalic';
    src: url('fonts/GalaxieCopernicus-BookItalic.ttf') format('ttf'),
    	 url('fonts/GalaxieCopernicus-BookItalic.eot') format('eot'),
    	 url('fonts/GalaxieCopernicus-BookItalic.woff') format('woff'),
         url('fonts/GalaxieCopernicus-BookItalic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BentonSansBold';
    src: url('fonts/BentonSans-Bold.ttf') format('ttf'),
    	 url('fonts/BentonSans-Bold.eot') format('eot'),
    	 url('fonts/BentonSans-Bold.woff') format('woff'),
         url('fonts/BentonSans-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'HUGE-AvantGarde-Bold', sans-serif;
	-webkit-font-smoothing: antialiased;
	background: black;
}

/* TYPOGRAPHY */

p {
	font-family: 'CopernicusBook', serif;
	font-size: 18px;
	line-height: 36px;
	color: white!important;
}

#six p, #one p {
	color: black!important;
}

h1 {
	font-size: 20vw;
	position: relative;
}

h2 {
	font-size: 22px;
	margin-bottom: 10px;
	letter-spacing: .25px;
}

h3  {
	font-size: 80px;
	margin-bottom: 0px;
	letter-spacing: -1.5px;
	line-height: 90px;
	z-index: 999;
	position: relative;
	transition: .2s all;
	display: inline-block;
}

.section .block h2, .section .block p {
	opacity: .9;
}

.right h1, .left h1 {
	text-shadow: 0px 0px 40px rgba(0, 0, 0, .2)
}

.right h2, .left h2, .right p, .left p {
	padding-left: 3px;
}

h3:hover {
	color: white;
}

a {
	text-decoration: none;
	cursor: pointer;
}

p a {
	color: white;
}

#eight p a {
	color: black;
	font-family: 'CopernicusBookItalic'!important;
	cursor: pointer;
	transition: .3s all ease-in-out;
	font-style: italic;
}

#eight p a:hover {
	color: white!important;
}

span.italic {
	font-family: 'CopernicusBookItalic'!important;
}

#footer-bar ul li a {
	opacity: 0.5;
	font-family: BentonSansBold;
	font-size: 10px;
	color: #fff!important;
	letter-spacing: 1.63px;
	line-height: 24px;
	text-transform: uppercase;
	transition: all .3s ease-in-out ;
}

#footer-bar ul li a:hover {
	color: #ec008c!important;
}

/* LAYOUT */

.section {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.up {
	width: 100vw;
	height: 50vh;
	position: absolute;
	top: 0;
	background: none;
	content: '';
	z-index: 0;
	cursor: url('img/cursor-up.png') 23 0, default;
}

#hero .up {
	display: none;
}

.down {
	width: 100vw;
	height: 50vh;
	position: absolute;
	bottom: 0;
	background: none;
	content: '';
	z-index: 100;
	cursor: url('img/cursor-down.png') 23 101, default;
}

#hero .down {
	height: 90vh;
}

#rank .down {display: none;}
#rank .up {height: 100%; bottom: 0;}

.fullpage-wrapper {
	width: 100%!important;
	transform: none!important;
}

.fp-section {
	width: 100%!important;
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	transition: all .7s ease-in-out;
}

.fp-section.active {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}


.section .album {
	width: 75vh;
	height: 75vh;
	position: absolute;
	top: 55%;
	margin-top: -37.5vh;
	box-shadow: 0px 00px 100px 0px rgba(0,0,0,0.2);
	opacity: 0;
	transition: all .5s ease-in-out;
}

.section.moveUp .album {
	top: 45%;
	opacity: 0;
}

.section.moveDown .album {
	top: 55%;
	opacity: 0;
}

.section.active .album {
	top: 50%;
	opacity: 1;
}

.left .album {
	right: 12.35vw;
}

.left .block {
	position: absolute;
	left: 6vw;
	top: 50%;
	height: 300px;
	width: 36vw;
	margin-top: -100px;
	z-index: 999;
}

.left h1, .right h1 {
	bottom: -250px;
	opacity: 0;
	transition: all .5s ease-in-out;
}

.left.moveUp h1, .right.moveUp h1 {
	bottom: 50px;
	opacity: 0;
}

.left.moveDown h1, .right.moveDown h1 {
	bottom: -250px;
	opacity: 0;
}

.left.active h1, .right.active h1 {
	bottom: -30px;
	opacity: 1;
}

.left h1 {
	position: absolute;
	right: 30px;
}

.right .album {
	left: 12.35vw;
}

.right .block {
	position: absolute;
	right: 6.5vw;
	top: 50%;
	height: 300px;
	width: 36vw;
	margin-top: -100px;
	z-index: 999;
}

#seven .block {
    margin-top: -200px;
}

#ten .block, #nine .block, #three .block {
	margin-top: -130px;
}

.right h1 {
	position: absolute;
	left: 30px;
}

#footer-bar {
	width: 100%;
	height: 84px;
	background-color: #262729;
	position: absolute;
	bottom: 0;
	margin-top: -4px;
		animation-name: onLoad;
	    animation-iteration-count: 1;
	    animation-timing-function: ease-out;
	    animation-duration: 0.5s;
}

.bestof {
	position: relative!important;
	display: inline-block;
	bottom: -4px!important;
}

.footerSpacer {
	height: 20vh;
	width: 100%;
	display: inline-block;
}

#footerLogo {
	position: absolute;
	left: 30px;
	top: 32px;
	margin-left: -8px;
	width: 15px;
	height: 20px;
	background: url('img/h.png');
	background-size: contain;
	background-repeat: no-repeat;
	content: '';
}

#footer-bar ul {
	display: inline;
	position: absolute;
	bottom: 30px;
}

#footer-bar li {
	display: inline;
}

#footer-bar .left {
	left: 26px;
}

#footer-bar .right {
	right: 26px;
	text-align: right;
}

#footer-bar .right li {
	margin-left: 24px;
}

.spacer {
	height: 75px;
	width: 100%;
}

iframe {
	opacity: 0!important;
	width: 1px; height: 1px;
}

#mute {
	width: 30px;
	height: 30px;
	position: fixed;
	top: 25px;
	right: 30px;
	z-index: 9999;
	transition: all .3s ease-in-out;
	cursor: pointer;
}

#unMute {
	width: 30px;
	height: 30px;
	position: fixed;
	top: 25px;
	right: 30px;
	z-index: 9998;
	display: none;
	transition: all .3s ease-in-out;
	cursor: pointer;
}

#rank {
	background: #D64D7E;
	color: #6542CC;
}

#rank .rankingsBlock {
    width: 90vw;
    margin-left: 10vw;
}

.rankItem {
	width: 29vw;
	height: 75px;
	margin-bottom: 20px;
	display: inline-block;
}

#rank h2 {
	font-size: 26px;
	margin-bottom: 0px;
	color: #6542CC;
	display: inline-block;
	position: relative;
	z-index: 9999;
	letter-spacing: 0;
}

#rank p {
	font-size: 16px;
	color: white;
	font-family: 'CopernicusBook';

}

#rank h1 {
	font-size: 74px;
	width: 420px;
	padding: 120px 10vw 50px;
}


/* LOGO COLORS */

.logo {
	background: none!important;
	width: 46px;
	height: 18px;
	position: absolute;
	left: 30px;
	top: 27px;
	z-index: 999;
	fill: #fff;
	transition: .3s all ease-in-out;
}

body.fp-viewing-about .logo, body.fp-viewing-heroMixtapes {
	fill: #fff;
}

body.fp-viewing-mixtapes .logo {
	display: none;
}

/* SECTIONS */

#hero {
	background: #d64d7e;
	animation-name: backgroundIntroHero;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 2s;
}

.heroMixtapes {
		background: #7877b1!important;
		animation-name: backgroundIntroHeroMixtape!important;
	    animation-iteration-count: 1;
	    animation-timing-function: ease-out;
	    animation-duration: 2s;
}

.muteany {
	opacity: 0;
}

.fp-viewing-tenth .muteany, .fp-viewing-ninth .muteany, .fp-viewing-eighth .muteany, .fp-viewing-seventh .muteany, .fp-viewing-sixth .muteany, .fp-viewing-fifth .muteany, .fp-viewing-fourth .muteany, .fp-viewing-third .muteany, .fp-viewing-second .muteany, .fp-viewing-first .muteany  {
	opacity: 1;
}

@keyframes backgroundIntroHero {
    0% {
       background: #7036C5;
    }
    100% {
        background: #d64d73;
    }
}

@keyframes backgroundIntroHeroMixtape {
    0% {
       background: #7036C5;
    }
    100% {
        background: #7877b1;
    }
}

#mixtape {
	background: #7877b1;
}

#hero .block {
	width: 45vw;
	position: absolute;
	left: 50%;
	top: 55vh;
	margin: -150px 0 0;
	transition: all .5s ease-in-out;
	opacity: 1;
}

.heroMixtapes .block {
	top: 50vh!important;
}

#hero.moveUp .block {
	top: 50vh;
	opacity: 0;
}

.heroMixtapes .block {
	top: 45vh!important;
}

#hero.active .block {
	top: 50vh;
	opacity: 1;
}

.heroMixtapes .block {
	top: 45vh!important;
}

#hero h1 {
	font-size: 6vw;
	color: white;
	margin-bottom: 5px;
	line-height: 7vw;
}

#hero p {
	color: white;
}

#hero img {
	width: auto;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

nav {
	position: absolute;
	top: 32px;
	right: 30px;
}

nav ul {
	display: inline;
	font-size: 16px;
}

nav ul li {
	display: inline;
	margin-left: 30px;
}

nav ul li a {
	color: #653ccf;
	text-decoration: none;
	transition: all .2s ease-in-out;
}

.button	{
	background: #FFFFFF;
	box-shadow: 0 2px 12px 0 rgba(158,158,158,0.50), 0 1px 4px 0 rgba(223,223,223,0.50);
	border-radius: 2px;
	font-family: BentonSansBold;
	font-size: 10px;
	color: #6542CC;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	padding: 23px 26px;
	position: absolute;
	z-index: 9999;
	left: 50%;
	margin-left: -115px;
	bottom: 20vh;
	transition: .3s all ease-in-out;
}

.mixtapeButton {
	bottom: 17.5vh;
	color: #71DBBA;
}

.button:hover {
	background:#6542CC;
	color: #fff;
	box-shadow: 0 2px 12px 0 rgba(104,59,202,0.50);
}

.mixtapeButton:hover {
	background: #71DBBA;
}

.heroMixtapes nav ul li a {
	color: #71DBBA!important;
}

nav ul:hover li a {
	color: #653ccf!important;
}

.heroMixtapes nav ul:hover li a {
	color: #71DBBA!important;
}


nav ul li a.active, .heroMixtapes nav ul li a.active {
	color: white!important;
}

nav ul li a:hover, .heroMixtapes nav ul li a:hover {
	color: white!important;
}

#hero, body {
	background: #d64d7e;
}

#hero.mixtapePage {
	background: #7877b1!important;
}

.muteIcon {
	transition: all .3s ease-in-out;
}

#ten, #ten .mouseRight, body, .fp-viewing-tenth .muteIcon, .fp-viewing-tenth .logo  {
	background: #2e3000;
	fill: #f8f8d0;
	color: #f8f8d0!important;
}

#nine, #nine .mouseRight, body, .fp-viewing-ninth .muteIcon, .fp-viewing-ninth .logo {
	background: #6b7372;
	fill: #acbd97;
	color: #acbd97!important;
}

#eight, #eight .mouseRight, body, .fp-viewing-eighth .muteIcon, .fp-viewing-eighth .logo {
	background: #5c2b82;
	fill: #fdb300;
	color: #fdb300!important;
}

#seven, #seven .mouseRight, body, .fp-viewing-seventh .muteIcon, .fp-viewing-seventh .logo {
	background: #1c110d;
	fill: #e92c2f;
	color: #e92c2f!important;
}

#six, #six .mouseRight, body, .fp-viewing-sixth .muteIcon, .fp-viewing-sixth .logo {
	background: #dadcdb;
	fill: #679458;
	color: #679458!important;
}

#five, #five .mouseRight, body, .fp-viewing-fifth .muteIcon, .fp-viewing-fifth .logo {
	background: #1B4141;
	fill: #A79E6B;
	color: #A79E6B!important;
}

#four, #four .mouseRight, body, .fp-viewing-fourth .muteIcon, .fp-viewing-fourth .logo {
	background: #69a583;
	fill: #e8a842;
	color: #e8a842!important;
}

#three, #three .mouseRight, body, .fp-viewing-third .muteIcon, .fp-viewing-third .logo {
	background: #073475;
	fill: #fe6963;
	color: #fe6963!important;
}

#two, #two .mouseRight, body, .fp-viewing-second .muteIcon, .fp-viewing-second .logo {
	background: #fe5e00;
	fill: #fff;
	color: #fff!important;
}

#one, #one .mouseRight, body, .fp-viewing-first .muteIcon, .fp-viewing-first .logo {
	background: #f58c57;
	fill: #000;
	color: #000!important;
}

.block h3, .block a {
	background: none!important;
}

.logo:hover {
	fill: #fff;
}

#mute:hover .muteIcon, #unMute:hover .muteIcon {
	fill: #fff!important;
}

/* MIXTAPES */

#footer {
	background: black;
	width: 100%;
}

.mixtape {
	width: 33.333333vw;
	height: 33.333333vw;
	display: inline-block;
	margin: -4px;
	transition: all .3s ease-in-out;
	overflow: hidden;
	position: relative;
	background-size: contain!important;
	background-repeat: no-repeat;
}

#hero .spacer {
	height: 84px;
}

.mixtapeContainer, #hero .block {
	animation-name: onLoad;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
}

@keyframes onLoad {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mixtapeContainer:hover .mixtape {
	-webkit-filter: grayscale(.4);
	filter: grayscale(.4);
}

.mixtapeContainer:hover .mixtape:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.mixtape h1 {
	font-size: 5vw;
	position: absolute;
	bottom: 6.5vw;
	left: 3vw;
	transition: all .25s ease-in-out;
}

.mixtape h2 {
	font-family: 'CopernicusBook';
	font-size: 17px;
	position: absolute;
	left: 3vw;
	bottom: 2vw;
	line-height: 24px;
	width: 75%;
	transition: all .25s ease-in-out;
}

.mixtape:hover h1{
	bottom: 7.5vw;
}

.mixtape:hover h2 {
	bottom: 2.5vw;
}

#march {
	background: url('img/03.png');
	color: #dd7b50!important;
}

#april {
	background: url('img/04.png');
	color: #4886cc!important;
}

#may {
	background: url('img/05.png');
	color: #c48637!important;
}

#june {
	background: url('img/06.png');
	color: #406aa2!important;
}

#july {
	background: url('img/07.png');
	color: #42399a!important;
}

#august {
	background: url('img/08.png');
	color: #a32b77!important;
}

#september {
	background: url('img/09.png');
	color: #5b357f!important;
}

#october {
	background: url('img/10.png');
	color: #c48637!important;
}

#november {
	background: url('img/11.png');
	color: #4f9970!important;
}


/* QUERYING */

@media screen and ( min-width: 1000px ) and ( min-height: 1000px ){
   .left .block, .right .block {
   		width: 30vw!important;
   		right: 2vw!important;
   }

   .section .album {
       width: 70vh;
       height: 70vh;
    }

    .right .album {
        left: 10vw;
    }

    .left .album {
       right: 10vw;
    }
}

@media screen and ( min-width: 1200px ) and ( min-height: 1000px ){
    .left .block, .right .block {
    		width: 25vw!important;
    		right: 2vw!important;
    }

    .section .album {
        width: 75vh;
        height: 75vh;
     }

     .right .album {
         left: 16.7vw;
     }

     .left .album {
        right: 16.7vw;
     }
}

@media screen and ( min-width: 1500px ) and ( min-height: 1000px ){
     .left .block, .right .block {
     		width: 30vw!important;
     		right: 2vw!important;
     }
}

@media screen and ( max-width: 1281px ){

    .mixtape h1 {
    	bottom: 7.5vw;
    }

    .mixtape h1 {
    	font-size: 60px;
    }

    .right .block {
    	right: 4.5vw;
    	width: 32vw;
    }

    .left .block {
    	left: 4.5vw;
    	width: 32vw;
    }

    .left.active h1, .right.active h1 {
    	bottom: -10px;
    }

    #seven .block {
    	margin-top: -220px;
    }

    .right h3, .left h3 {
    	font-size: 60px;
    	line-height: 65px;
    }
}

@media screen and ( max-width: 1100px ){
     .mixtape {
     	width: 50vw;
     	height: 50vw;
     }

    .mixtape h1 {
    	bottom: 8vw;
    }

    .rankItem {
    	width: 44vw;
    }
}

@media screen and ( min-width: 1000px ) and ( min-height: 1100px ){
      .left .block, .right .block {
      		width: 30vw!important;
      		right: 2vw!important;
      }

      .section .album {
          width: 70vh;
          height: 70vh;
       }

       .right .album {
           left: 10vw;
       }

       .left .album {
          right: 10vw;
       }
}



/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 0px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
	#hero img {
		display: none;
	}

	#hero {
		background: url('img/mobileHero.png');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.heroMixtapes {
		background: url('img/mobileHeroMixtape.png')!important;
		background-size: cover!important;
		background-repeat: no-repeat!important;
	}

	nav ul li {
		display: list-item;
		text-align: right;
		margin-bottom: 10px
	}

	#hero .block, .left .block, .right .block {
		width: 80vw;
		left: 10vw;
	}

	#hero h1 {
		font-size: 45px;
		line-height: 55px;
		margin-bottom: 5px;
	}

	.logo {
		display: none;
	}

	#hero .logo, #mixtape .logo {
		display: inline;
	}

	p {
		font-size: 16px;
	}

	.down {
		height: 10vh!important;
		background: url(img/arrow-down.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 35px;
		display: none;
	}

	.up {
		height: 10vh!important;
		background: url(img/arrow-up.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 35px;
		display: none;
	}

	#hero .down {
		display: inline;
	}

	.section .album {
		width: 85vw;
		height: 85vw;
		left: 7.5vw;
		top: 50vh;
		margin-top: -36vw;
	}

	.left .block, .right .block {
		top: 4vh;
		margin-top: 0;
	}

	#seven .block {
		margin-top: 0;
	}



	.right .block {
		right: 10vw;
		text-align: right
	}

	.left p, .right p {
		display: none;
	}

	.left h1, .right h1 {
		bottom: -5vh;
	}

	.left.active h1, .right.active h1 {
		font-size: 45vw;
		right: 0px!important;
		bottom: 0vh;
	}

	.left h2, .right h2 {
		font-size: 18px;
		letter-spacing: .3px;
	}

	.left h3, .right h3 {
		font-size: 40px;
		line-height:44px
	}

	.mixtapeContainer {
		margin-top: 0px;
	}

	.mixtape {
		width: 100vw;
		height: 100vw;
	}
	
	.footerSpacer {
		height: 16vh;
	}

	#footer-bar {
		height: 225px!important;
	}

	#footerLogo {
		left: 50%;
		top: 50px;
	}

	#footer-bar .right {
		width: 100%;
		left: 0;
		text-align: center;
		display: list-item;
	}

	#footer-bar .right li {
		display: list-item;
		margin-bottom: 20px;
		margin-left: 0px;
	}

	.mixtape h1, .mixtape:hover h1 {
		bottom: 27vw;
		left: 7vw;
	}

	#october h1, #november h1 {
		bottom: 20vw;
	}

	.mixtape h2, .mixtape:hover h2 {
		left: 7vw;
		bottom: 4vw;
	}

	#september h1, #november h1  {
		font-size: 55px!important;
	}

	#october h1 {
		font-size: 75px!important;
	}

	.spacer {
		height: 0vh;
	}

	#mixtape #footer-bar {
		margin-top: -5px;
	}

	.muteany {
		opacity: 0!important;
	}

	#rank h1 {
		font-size: 45px;
		padding: 60px 10vw 50px;
	}

	.rankItem {
		width: 90vw;
		height: 75px;
		margin-bottom: 20px;
		display: inline-block;
	}

	.button {
		bottom: 44vh;
	}

	.mixtapeButton {
		bottom: 40vh;
	}

	#two .block, #three .block, #four .block, #five .block, #six .block, #eight .block {
		top: 9vh;
	}

	#ten .block, #nine .block {
		margin-top: -5px;
	}

	#eight .block, #six .block, #five .block, #four .block, #two .block, #three .block {
		margin-top:-15px;
	}
	.mixtape h1 {
		bottom: 20vw;
	}
	.mixtape h2 {
		width: 92%;
	}

	#hero.active .block {
		top: 40vh;
	}

	#hero.moveUp .block {
		top: 35vh;
	}
}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (device-aspect-ratio: 40/71) {
	.section .album {
		top: 55vh;
	}
	.section.active .album {
		top: 47.5vh;
	}

	#hero.active .block {
		top: 45vh;
	}

	#hero h1 {
		line-height: 45px;
	}

	#hero .block p {
		line-height:30px;
	}

	#ten .block, #nine .block, #one .block {
		margin-top: -5px;
	}

	#eight .block, #six .block, #five .block, #four .block {
		margin-top: -10px;
	}

	#three .block {
		margin-top: -30px;
	}

	.button {
		bottom: 50vh;
	}

	#mixtape .button {
		bottom: 45.5vh;
	}

	.mixtape h1, .mixtape:hover h1 {
		bottom: 30vw;
		left: 6vw;
	}

	#august h1 {
		bottom: 22vw;
	}

	#september h1 {
		font-size: 50px !important;
	}

	#october h1 {
		font-size: 60px !important;
	}


}