@charset "UTF-8";
/* CSS Document */







#desktopComingSoon{
	display: none;
}

header{
	font-size: 10vw;
	margin-top: 8vw;
	margin-bottom: 8vw;
	line-height: 10vw;
}
header a{
	color: white;
	text-decoration: none;
}
h1 a{
	color: white;
	text-decoration: none;
}
.songTitle a{
	color: white;
	text-decoration: none;
}
.copy{
	font-size: 4vw;
	line-height: 6.5vw;
	color: rgb(220,220,220)
}
.copy a {
	cursor: pointer;
	color: white;
	font-style: normal;
	text-decoration: none;
}
.heightVideo{
	height: 51.75vw;
}
.w1-3{
	width: 28vw;
}
.w2-3{
	width: 60vw;
}
.w3-3{
	width: 92vw;
}
.w1-4{
	width: 20vw;
}
.w2-4{
	width: 44vw;
}
.w3-4{
	width: 68vw;
}
.w1-6{
	width: 12vw;
}
.w1-9{
	width: 6.666vw;
}
.w2-9{
	width: 17.333vw;
}
.w1-12{
	width: 5.5vw;
}

.w2-4x3{
	width: 140vw;
}
.w3-4x3{
	width: 208vw;
}

.h1-3{
	height: 28vw;
}
.h2-3{
	height: 60vw;
}
.h3-3{
	height: 92vw;
}
.h1-4{
	height: 20vw;
}
.h2-4{
	height: 44vw;
}
.h3-4{
	height: 68vw;
}
.h1-6{
	height: 12vw;
}
.h1-9{
	height: 6.666vw;
}
.h2-9{
	height: 17.333vw;
}
.h1-12{
	height: 5.5vw;
}

.h2vw{
	height: 2vw;
}
.h2-4_rootTwo{
	height: 61.6vw;
}
.h2-4_golden{
	height: 71.19vw;
}
.h2-3_rootTwo{
	height: 81.2vw;
}
.h1-6_rootTwo{
	height: 18.2vw;
}
.h1-3_rootTwo{
	height: 39.2vw;
}
.h3-3_rootTwo{
	height: 123.2vw;
}
.h1-6_golden{
	height: 21vw;
}
.h3-3_golden{
	height: 142.387vw;
}
.h1-3_golden{
	height: 45.3vw;
}
.hBuffer{
	height: 6vw;
}
.hHalfBuffer{
	height: 3vw;
}
.sitePipe{
	width: 92vw;
	margin-left: 4vw;
	margin-right: 4vw;
	padding-top: 4vw;
	position: absolute;
	top: 0px;
}
.box{
	float: left;
	margin-right: 4vw;
	margin-bottom: 4vw;
	position: relative;
	border-radius: 1vw;
}
div img{
	object-fit: cover;
	width: 100%;
    height: 100%;
    overflow: hidden;
}

.pointerActive{
	cursor: pointer;
}

.insidePopUp{
	padding: 4vw;
}

.w3-3_popUp{
	width: 84vw;
}
.h3-3_rootTwo_popUp{
	height: 127.6vw;
	background-color: rgb(0,108,110);
	border-radius: 4vw;
}
.h3-3_shirt_popUp{
	height: 97.6vw;
	background-color: rgb(0,108,110);
}
.h3-3_shirt_popUp img{
	object-fit: cover;
	width: 90%;
    height: 90%;
    overflow: hidden;
	padding: 5%;
}

.w1-3_popUp{
	width: 25.333vw;
}

.rounded{
	border-radius: 5vw;
}


.addToCart{
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	background-color: transparent;
	border: transparent solid 0.5vw;
	border-radius: 3.5vw;
	color: white;
	text-align: center;
	width: 83vw;
	height: 8.5vw;
}


.payPalHolder{
	position: relative;
	background-color: rgb(0,108,110);
	border: rgb(0,108,110) solid 0.5vw;
	color: white;
	width: 83vw;
	height: 8.5vw;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-family: "Akkurat Pro";
	font-size: 4vw;
	letter-spacing: 0.35vw;
	font-weight: 700;
	line-height: 8vw;
	margin: 0;
	padding: 0;
	margin-bottom: 3vw;
	overflow: hidden;
	border-radius: 4vw;
}
.payPalHolder:hover{
	background-color: black;
	border: black solid 0.5vw;
	color: white;
}
.payPalHolder:active{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid 0.5vw;
	color: white;
}
.soldOut{
	background-color: rgb(200,200,200);
	border: rgb(200,200,200) solid 0.5vw;
	color: white;
}
.soldOut:active{
	background-color: darkred;
	border: darkred solid 0.5vw;
	color: white;
}

.backButton{
	background-color: white;
	border: white solid 0.5vw;
	border-radius: 8vw;
	text-align: center;
	width: 8vw;
	height: 8vw;
	color: darkgray;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-family: "Akkurat Pro";
	font-size: 8vw;
	letter-spacing: 0.3vw;
	font-weight: 700;
	line-height: 8vw;
	bottom: 3vw;
	left: 3vw;
	position: absolute;
	pointer-events: visible;
	cursor: pointer;
}
.backButton:hover{
	background-color: white;
	border: white solid 0.5vw;
	color: rgb(247,167,29);
}
.backButton:active{
	background-color: white;
	border: white solid 0.5vw;
	color: rgb(247,167,29);
}

.button2-4{
	background-color: transparent;
	border: rgb(247,167,29) solid 0.5vw;
	border-radius: 3.5vw;
	color: rgb(247,167,29);
	text-align: center;
	width: 39.5vw;
	height: 8.5vw;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-family: "Akkurat Pro";
	font-size: 4vw;
	letter-spacing: 0.35vw;
	font-weight: 700;
	line-height: 8.5vw;
	margin-right: 3vw;
	margin-bottom: 3vw;
}
.button2-4:hover{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid 0.5vw;
	color: white;
}
.button2-4_Selected{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid 0.5vw;
	border-radius: 3.5vw;
	color: white;
	text-align: center;
	width: 39.5vw;
	height: 8.5vw;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-family: "Akkurat Pro";
	font-size: 4vw;
	letter-spacing: 0.35vw;
	font-weight: 700;
	line-height: 8.5vw;
	margin-right: 3vw;
	margin-bottom: 3vw;
}
.button1-3{
	background-color: transparent;
	border: rgb(247,167,29) solid 0.5vw;
	border-radius: 3.5vw;
	color: rgb(247,167,29);
	text-align: center;
	width: 25vw;
	height: 8.5vw;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-family: "Akkurat Pro";
	font-size: 4vw;
	letter-spacing: 0.35vw;
	font-weight: 700;
	line-height: 8.5vw;
	margin-right: 3vw;
	margin-bottom: 3vw;
}
.button1-3:hover{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid 0.5vw;
	color: white;
}
.button1-3_Selected{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid 0.5vw;
	border-radius: 3.5vw;
	color: white;
	text-align: center;
	width: 25vw;
	height: 8.5vw;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-family: "Akkurat Pro";
	font-size: 4vw;
	letter-spacing: 0.35vw;
	font-weight: 700;
	line-height: 8.5vw;
	margin-right: 3vw;
	margin-bottom: 3vw;
}
.alignRight{
	text-align: right;
}
.green{
	background-color: green;
	opacity: 0.5;
}
.displayNone{
	display: none;
}
.blackText{
	color: black;
}
.yellowText{
	color: rgb(247,167,29);
}
.greyText{
	color: rgb(200,200,200);
}
.turquoiseText{
	color: rgb(0,108,110);
}
.turquoiseText2{
	color: rgb(32,148,168);
}



.navTopper1 > div {
	position: fixed;
	border-bottom-left-radius: 5vw;
	border-bottom-right-radius: 5vw;
	bottom: -3.5vw;
	transition: bottom 0.6s ease-in-out;
	left: -1vw;
	right: 0;
	height: 6vw;
	width: 100vw;
	background-color: transparent;
	pointer-events: none;
	border: black solid 1vw;
	border-top: transparent 0vw;
	z-index: 50;
}
.topperOneSlide > div {
	bottom: 18.5vw;
	transition: bottom 0.6s ease-in-out;
}
.navTopper2 > div {
	position: fixed;
	border-bottom-left-radius: 6vw;
	border-bottom-right-radius: 6vw;
	bottom: -4.5vw;
	transition: bottom 0.6s ease-in-out;
	left: -2.3vw;
	right: 0;
	height: 6vw;
	width: 102vw;
	background-color: transparent;
	pointer-events: none;
	border: black solid 1.3vw;
	border-top: transparent 0vw;
	z-index: 50;
}
.topperTwoSlide > div {
	bottom: 17.5vw;
	transition: bottom 0.6s ease-in-out;
}
.nav > div{
	position: fixed;
	bottom: -22vw;
	transition: bottom 0.6s ease-in-out;
	left: 0 ;
	right: 0;
	padding: 4vw;
	padding-top: 1.5vw;
	background-color: black;
	height: 14vw;
	font-size: 5vw;
	line-height: 8vw;
	z-index: 10;
}
.nav a{
	cursor: pointer;
	color: white;
	font-style: normal;
	text-decoration: none;
}

.navSlide > div {
	bottom: -0vw;
	transition: bottom 0.6s ease-in-out;
}

.positionAbsolute{
	position: absolute;
}
.buttonOverTop{
	top:0;
	right:0;
	width: 100%;
	height:100%;
	z-index: 1001;
	position: absolute;
	pointer-events: none;
}
.price{
	position: absolute;
	top: 113.5vw;
	left: 8vw;
	font-size: 4vw;
	line-height: 14.5vw;
	margin-bottom: 1vw;
	background-color: white;
	height: 14vw;
	width: 14vw;
	border-radius: 11vw;
	text-align: center;
}
.shirtPrice{
	position: absolute;
	top: 83.5vw;
	left: 8vw;
	font-size: 4vw;
	line-height: 14.5vw;
	margin-bottom: 1vw;
	background-color: white;
	height: 14vw;
	width: 14vw;
	border-radius: 11vw;
	text-align: center;
}

.pageHolder-up > div {
 	top: 100vh;
	transition: top 0.4s ease-in-out;
	position: fixed;
	left: 0vw;
	right: 0vw;
	bottom: 19.5vw;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: darkgray;
}
.pageHolder-down > div {            
  	top: 0vh;
	transition: top 0.4s ease-in-out;
	position: fixed;
	left: 0vw;
	right: 0vw;
	bottom: 19.5vw;
	overflow-y: scroll;
	overflow-x: hidden;
} 
.pageTopper{
	position: absolute;
	margin-top: -5vw;
	background-color: grey;
	border-top-left-radius: 5vw;
	border-top-right-radius: 5vw;
	height: 5vw;
	width: 100vw;
}
#theMusicHolder #theDesignHolder #theVideoHolder #theShopHolder #theContactHolder{
	position: relative;
}


/* new src for shop thumbnails*/

.bagOne{
		background-image:url(../assets/shop/bags/thumnails/blueBagThumb.jpg);
		background-size: cover;
	}
.bagTwo{
		background-image:url(../assets/shop/bags/thumnails/greenBagThumb.jpg);
		background-size: cover;
	}
.bagThree{
		background-image:url(../assets/shop/bags/thumnails/orangeBagThumb.jpg);
		background-size: cover;
	}
.bagFour{
		background-image:url(../assets/shop/bags/thumnails/everyDayBagThumb.jpg);
		background-size: cover;
	}
.bagFive{
		background-image:url(../assets/shop/bags/thumnails/penguinBagThumb.jpg);
		background-size: cover;
	}
	.shirtOne{
		background-image:url(../assets/shop/shirts/thumbnails/rainingShirtThumb.jpg);
		background-size:cover;
	}
	.shirtTwo{
		background-image:url(../assets/shop/shirts/thumbnails/penguinShirtThumb.jpg);
		background-size:cover;
	}
.shirtThree{
		background-image:url(../assets/shop/shirts/thumbnails/fmlbtwShirtThumb.jpg);
		background-size:cover;
	}

/* end of new thumbnails for shop */

.slide-up > div {
 	margin-top: -120vh;
	opacity: 0.0;
  	transition: margin-top 0.4s ease-in-out, opacity 0.4s ease-in-out;
	position: fixed;
	top: 4vw;
	left: 4vw;
	right: 4vw;
	z-index: 1000;
	border-radius: 5vw;
	background-color: white;
}
.slide-down > div {            
  	margin-top: 0;
	opacity: 1.0;
	transition: margin-top 0.4s ease-in-out, opacity 0.4s ease-in-out;
	position: fixed;
	top: 4vw;
	left: 4vw;
	right: 4vw;
	z-index: 1000;
	border-radius: 5vw;
	background-color: white;
} 

.popUpBlocker-up > div {
	opacity: 0.0;
	transition: opacity 0.4s ease-in-out;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(100,208,210);
	pointer-events: none;
	z-index: 200;
}
.popUpBlocker-down > div {
	opacity: 0.4;
	transition: opacity 0.4s ease-in-out;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(100,208,210);
	pointer-events: visible;
	z-index: 200;
}
.printersRule{
	background-color: white;
	height: 2vw;
}
.cursorPointer{
	cursor: pointer;
}




.audioBox{
		width: 100%;
		height: 100%;
		align-content: center;
		padding: 0vw;
		padding-bottom: 0vw;
		padding-top: 0vw;
		bottom: 0vw;
}
.audioBoxHolder{
	position: absolute;
	bottom: 0vw;
}
.player {
 	height: 100%;
}
.playerColour1{
	background-color: rgb(0,27,86);
}
.playerColour2{
	background-color: rgb(0,61,93);
}
.playerColour3{
	background-color: rgb(0,95,101);
}
.playerColour4{
	background-color: rgb(1,130,108);
}
.playerColour5{
	background-color: rgb(0,164,116);
}
.playerColour5Text{
	color: rgb(0,164,116);
}
.playerColour6{
	background-color: rgb(1,154,120);
}
.playerColour7{
	background-color: rgb(0,144,125);
}
.playerColour8{
	background-color: rgb(0,135,129);
}
.playerColour9{
	background-color: rgb(0,125,134);
}
.playerColour10{
	background-color: rgb(0,128,151);
}
.playerColour11{
	background-color: rgb(0,131,168);
}
.playerColour12{
	background-color: rgb(0,134,185);
}
.playerColour12Text{
	color: rgb(0,134,185);
}
.playerColour13{
	background-color: rgb(0,137,201);
}
.playerColour14{
	background-color: rgb(55,126,202);
}
.playerColour15{
	background-color: rgb(112,116,202);
}
.playerColour16{
	background-color: rgb(168,104,202);
}
.playerColour17{
	background-color: rgb(224,95,202);
}
.playerColour18{
	background-color: rgb(224,129,150);
}
.playerColour19{
	background-color: rgb(224,163,101);
}
.playerColour20{
	background-color: rgb(224,198,50);
}
.playerColour21{
	background-color: rgb(224,232,0);
}
.playerColour22{
	background-color:rgb(219,123,0);
}

.heightMini{
	height: 24.5vw;
}
.heightHalfMini{
	height: 14vw;
}
.songTitle{
	padding-left: 4vw;
	padding-right: 4vw;
	padding-top: 3vw;
	line-height: 5vw;
}
.bandTitles{
	padding-left: 3vw;
 	padding-right: 3vw;
	width: 38vw;
	top: 10vw;
	height: 24.5vw;
}
.ttngColour{
	background-color: rgb(0,104,155);
}
.penninesColour{
	background-color: rgb(82,86,172);
}
.saleOnTomorrowColour{
	background-color:rgb(189,93,0);
}
.alignRight{
	text-align: right;
}
.overflowHidden{
	overflow: hidden;
}

.divZoomOut > div {
	height: 44vw;
	width: 44vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: height 0.4s ease-in-out, width 0.4s ease-in-out, margin-left 0.4s ease-in-out, margin-top 0.4s ease-in-out;
}

.divZoom > div {
	width: 92vw;
	height: 92vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: height 0.4s ease-in-out, width 0.4s ease-in-out, margin-left 0.4s ease-in-out, margin-top 0.4s ease-in-out;
}
.sleeveZoomOut > div {
	height: 44vw;
	width: 44vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s;
}

.sleeveZoom > div {
	width: 92vw;
	height: 92vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.6s ease-in-out 0.1s, margin-left 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s;
}

.textZoomOut > div {
	width: 0vw;
	height: 0vw;
	overflow: hidden;
	opacity: 0;
	transition: height 0.4s ease-in-out, width 0.0s ease-in-out 0.4s;
}


.textOddZoomIn > div {
	padding-top: 4vw;
	width: 92vw;
	height: 32vw;
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
}

.textWebZoomIn > div {
	padding-top: 4vw;
	width: 92vw;
	height: 32vw;
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
}

.textOddZoomInBig > div {
	padding-top: 4vw;
	width: 92vw;
	height: 62vw;
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
}

.textEvenZoomIn > div {
	margin-left: -48vw;
	padding-top: 4vw;
	width: 92vw;
	height: 32vw;
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
}


.clearLeft{
	clear: left;
}
.floatRight{
	float: right;
}
.floatLeft{
	float: left;
}

.secondPannelInside-small > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 92vw;
	height: 44vw;
	left: -0vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out, left 0.6s ease-in-out;
}
.secondPannelInside-big > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 185vw;
	height: 92vw;
	left: -3vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s, margin-left 0.5s ease-in-out, left 0.5s ease-in-out;
}
.thirdPannelInside-small > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 92vw;
	height: 44vw;
	left: -46vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out, left 0.6s ease-in-out;
}
.thirdPannelInside-big > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 185vw;
	height: 92vw;
	left: -92vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s, margin-left 0.5s ease-in-out, left 0.5s ease-in-out;
}

.firstPannelInside-small > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 92vw;
	height: 44vw;
	left: -0vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out, left 0.6s ease-in-out;
}
.firstPannelInside-big > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 185vw;
	height: 92vw;
	left: -1.5vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s, margin-left 0.5s ease-in-out, left 0.5s ease-in-out;
}
.fourthPannelInside-small > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 92vw;
	height: 44vw;
	left: -46vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out, left 0.6s ease-in-out;
}
.fourthPannelInside-big > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: 185vw;
	height: 92vw;
	left: -92.5vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s, margin-left 0.5s ease-in-out, left 0.5s ease-in-out;
}

.secondPannelOutside-small > div {
	margin-top: 0vw;
	margin-left: 0vw;
	height: 44vw;
	width: 46vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out;
}
.thirdPannelOutside-small > div {
	margin-top: 0vw;
	height: 44vw;
	width: 46vw;
	margin-left: -2vw;
	transition: height 0.6s ease-in-out 0.2s, width 0.6s ease-in-out 0.2s, margin-top 0.6s ease-in-out 0.2s, margin-left 0.6s ease-in-out;
}

.secondPannelOutside-big > div {
	margin-top: 0vw;
	margin-left: 0vw;
	height: 92vw;
	width: 92vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s, margin-left 0.5s ease-in-out;	
}
.thirdPannelOutside-big > div {
	margin-top: 0vw;
	height: 92vw;
	width: 92vw;
	margin-left: -48vw;
	transition: height 0.5s ease-in-out 0.1s, width 0.5s ease-in-out 0.1s, margin-top 0.5s ease-in-out 0.1s, margin-left 0.5s ease-in-out;
}

.borderRadiusZero{
	border-radius: 0vw;
}

.logoPool{
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	padding-right: 4vw;
}
.logoEight, .logoSeven, #fourthOuter, #firstOuter{
	margin-bottom: 4vw;
}
.zoomTooMap{
 	position: absolute;
	top: 34vw;
	left: 0;
	width: 92vw;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	padding-right: 4vw;
	pointer-events: none;
}
.zoomTooMap div{
	opacity: 0.0;
	height: 44vw;
	pointer-events: none;
}

.sleeveSmallLookMap{
 	position: absolute;
	top: -4vw;
	left: 0;
	width: 92vw;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	padding-right: 4vw;
	pointer-events: none;
}
.sleeveSmallLookMap div{
	opacity: 0.0;
/*background-color: aqua;*/
	height: 44vw;
	pointer-events: none;
}

.sleeveBigLookMap{
 	position: absolute;
	top: -4vw;
	left: 0;
	width: 92vw;
	display: grid;
	grid-template-columns: [col1-start] 92vw [col1-end];
	grid-gap: 4vw;
	padding-right: 4vw;
	pointer-events: none;
}
.sleeveBigLookMap div{
	opacity: 0.0;
/*background-color: aqua;*/
	height: 92vw;
	pointer-events: none;
}

.logoNorm > div {
	margin-top: 0vw;
	transition: margin-top 0.4s ease-in-out;
}
.logoOutTheWay > div {
	margin-top: 128vw;
	transition: margin-top 0.4s ease-in-out;
}
#logoOne{order: 1}
#logoTwo{order: 2}
#logoThree{order: 3}
#logoFour{order: 4}
#logoFive{order: 5}
#logoSix{order: 6}
#logoSeven{order: 7}
#logoEight{order: 8}

#backCover{order: 2}
#coverArt{order: 1}
#thirdOuter{order: 4}
#secondOuter{order: 3}
#fourthOuter{order: 6}
#firstOuter{order: 5}

.cdSleevePool{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	padding-right: 4vw;
}

.pushSleeveOne > div {
	margin-top: 96vw;
}
.pushSleeveTwo > div {
	margin-left: -48vw;
}

.posterPool{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
}

.posterRootSmall > div {
	margin-left: 0;
	height: 61.6vw;
	width: 44vw;
	transition: all 0.4s ease-in-out;
}
.posterRootBig > div {
	margin-left: 0;
	height: 128.8vw;
	width: 92vw;
	transition: all 0.4s ease-in-out;
}
.posterRootBigOdd > div {
	margin-left: -48vw;
	height: 128.8vw;
	width: 92vw;
	transition: all 0.4s ease-in-out;
}

.posterGoldenSmall > div {
	margin-left: 0;
	height: 71.19vw;
	width: 44vw;
	transition: all 0.4s ease-in-out;
}
.posterGoldenBig > div {
	margin-left: 0;
	height: 148.86vw;
	width: 92vw;
	transition: all 0.4s ease-in-out;
}
.posterGoldenBigOdd > div {
	margin-left: -48vw;
	height: 148.86vw;
	width: 92vw;
	transition: all 0.4s ease-in-out;
}

.posterRootNorm > div {
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}
.posterRootPush > .posterRootSmall {
	margin-top: 172.8vw;
	transition: all 0.4s ease-in-out;

}

.posterGoldenNorm > div {
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;

}
.posterGoldenPush > .posterGoldenSmall {
	margin-top: 192.86vw;
	transition: all 0.4s ease-in-out;


}

.posterTextSmall > div {
	padding-top: 0vw;
	width: 92vw;
	height: 0vw;
	transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
	overflow: hidden;
	opacity: 0.0;
}
.posterTextBig > div {
	padding-top: 4vw;
	width: 92vw;
	height: 40vw;
	transition: width 0.4s ease-in-out 0.5s, height 0.4s ease-in-out 0.5s;
	overflow: hidden;
	opacity: 1.0;
}
.posterTextBigOdd > div {
	margin-left: -48vw;
	padding-top: 4vw;
	width: 92vw;
	height: 40vw;
	transition: width 0.4s ease-in-out 0.5s, height 0.4s ease-in-out 0.5s;
	overflow: hidden;
	opacity: 1.0;
}
.paddingTop4vw{
	padding-top: 4vw;
}

.posterSmallLookMap{
 	position: absolute;
	top: -4vw;
	left: 0;
	width: 92vw;
	display: grid;
	grid-template-columns: [col1-start] 92vw [col1-end];
	grid-template-rows: [row1-start] 61.6vw [row1-end row2-start] 61.6vw [row2-end row3-start] 61.6vw [row3-end row4-start] 61.6vw [row4-end];
	grid-gap: 4vw;
	padding-right: 4vw;
	pointer-events: none;
	height: 600vw;
	opacity: 0;
}

#theWebSite > .youAbsoluteBasket-out {
	position: fixed;
	top: 0;
	right: 0;
	margin-top: -25vw;
	transition: margin-top 0.4s ease-in-out 0.0s;
}

#theWebSite > .youAbsoluteBasket-in {
	position: fixed;
	top: 0;
	right: 0;
	margin-top: -0vw;
	transition: margin-top 0.4s ease-in-out 0.4s;
}

.basketButton{
	position: absolute;
	top: 0;
	right: 0;
	background-image: url("../assets/shop/basket/basketArtboard_1.svg");
	background-size: 10vw;
	background-position: center;
	background-repeat: no-repeat;
	height: 10vw;
	width: 10vw;
	background-color: black;
	padding: 3vw;
	border-bottom-left-radius: 6vw;
	cursor: pointer;
}
.basketButton:active, .basketButton:hover {
	background-image: url("../assets/shop/basket/basketArtboard_1-copy.svg");
}

#basketCornerOne{
	position: absolute;
	top: 0;
	margin-top: -1vw;
	right: 15vw;
	height:8vw;
	width: 8vw;
	border-right: black solid 1vw;
	border-top: black solid 1vw;
	border-top-right-radius: 3vw;
}

#basketCornerTwo{
	position: absolute;
	top: 15vw;
	margin-right: -1vw;
	right: 0vw;
	height:8vw;
	width: 8vw;
	border-right: black solid 1vw;
	border-top: black solid 1vw;
	border-top-right-radius: 3vw;
}

.landing{
	position: fixed;
	top:0;
	left: 0;
	right: 0;
}

#theWebSite > .landing { 
	bottom: 0vh;
	transition: all 0.4s ease-in-out 0.2s;
}

#theWebSite > .landingOut {
	bottom: 19vw;
	transition: all 0.4s ease-in-out 0.2s;
}

.siteTitle{
	position: absolute;
	width: 50vw;
	height: 40vw;
	color: white;
	top: 65vh;
	left: 25vw;
	font-size: 5vw;
	line-height: 7vw;
}


.landingVideo{
  margin: 0;
  padding:0;
	height: 140%;
    width: 160vh; /* 100 * 40 / 35 */
    min-width: 140%;
    min-height: 122.5vw; /* 100 * 40 / 35 */
	position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
    }
	

#dripGrid{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	margin-bottom: 4vw;
}
.dripLogoVideoSmall > div {
	width: 44vw;
	height: 44vw;
	transition: all 0.4s ease-in-out;
}

.dripLogoVideoBig > div {
	width: 92vw;
	height: 92vw;
	transition: all 0.4s ease-in-out;
}

#dripLogoVideo {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.dripShirtSmall > div {
	height: 44vw;
	width: 44vw;
	margin-left: 0vw;
	transition: all 0.4s ease-in-out;
}
.dripShirtBig > div {
	height: 92vw;
	width: 92vw;
	margin-left: -48vw;
	transition: all 0.4s ease-in-out;
}

#dripWebVideo{
	object-fit:cover;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: 1vw;
}
.dripWeb > div {
	position: relative;
	width: 92vw;
	height: 60.4vw;
	cursor: pointer;
}


#dripGrid2{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	margin-bottom: 4vw;
	margin-top: 0;
}
#dripGrid2 > div{
	height: 44vw;
	width: 44vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}

#dripGrid2 > .dripImageOddBig {
	height: 92vw;
	width: 92vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}
#dripGrid2 > .dripImageEvenBig {
	height: 92vw;
	width: 92vw;
	margin-left: -48vw;
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}
#dripGrid2 > .dripImageOutTheWay {
	margin-top: 129vw;
	transition: all 0.4s ease-in-out;
}
#dripGrid2 > .dripImageOutTheWayBig {
	margin-top: 141vw;
	transition: all 0.4s ease-in-out;
}

.dripLookOne{
	position: absolute;
	margin-top: -4vw;
	width: 92vw;
	height: 44vw;
	pointer-events: none;
}
.dripLookTwo{
	position: absolute;
	top:-4vw;
	width: 92vw;
	height: 64.4vw;
	pointer-events: none;
}

.dripLookTwo div {
	position: absolute;
	top: 4vw;
	height: 60.4vw;
	width: 92vw;
}
.dripLookThree{
	position: absolute;
	top:-4vw;
	width: 92vw;
	height: 44vw;
	pointer-events: none;
}
.dripLookFour{
	position: absolute;
	top:44vw;
	width: 92vw;
	height: 44vw;
	pointer-events: none;
}




.designGrid{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] 44vw [col1-end col2-start] 44vw [col2-end];
	grid-gap: 4vw;
	margin-bottom: 4vw;
}

.designGrid > div {
	height: 44vw;
	width: 44vw;
	margin-top: 0vw;
	margin-left: 0vw;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}

.designGrid > .designImageOddBig {
	height: 92vw;
	width: 92vw;
	margin-left: 0vw;
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}
.designGrid > .designImageEvenBig {
	height: 92vw;
	width: 92vw;
	margin-left: -48vw;
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}

.designGrid > .designImageOutTheWay {
	margin-top: 141vw;
	transition: all 0.4s ease-in-out;
}

.paddingtonLook{
	position: absolute;
	top: -4vw;
	width: 92vw;
	height: 10vw;
	pointer-events: none;
}

.marginBottom4vw{
	margin-bottom: 4vw;
}

#malkoVideo{
	width: 92vw;
	height: 92vw;
	margin: 0;
	padding: 0;
}
.malkoLookOne{
	position: absolute;
	width: 92vw;
	height: 10vw;
	margin-top: -4vw;
	pointer-events: none;
}
.malkoLookTwo{
	position: absolute;
	width: 92vw;
	height: 10vw;
	margin-top: 92vw;
	pointer-events: none;
}

/* loading page guff */


#loader {
  position: fixed;
  left: 50vw;
  top: 30vh;
  margin-left: -7vh;
	margin-top: -7vh;	
  border: 2vh solid #E6E6E6;
  border-radius: 10vh;
  border-top: 2vh solid #00A99D;
  width: 10vh;
  height: 10vh;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
	.noMargin{
		margin-right: 0vw;
	}
	.noUnderMargin{
		margin-bottom: 0vw;
	}


.justPlay{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2000;
	background-color: white;
	text-align: center;
	color: rgb(32,148,168);
	font-size: 8vw;
	font-weight: 600;
	padding-top: 40vh;
	opacity: 0;
}




/* leave at the end - classes that need to overwrite other styles */


.noMargin{
	margin-right: 0;
}
.noUnderMargin{
	margin-bottom: 0;
}
.positionRelative{
	position: relative;
}
	


.pageTopperTurnOn{
	display: block;
}


.displayNoneOnMobile{
	display: none;
}

/*closing of the mobile only styles 	
}
*/





/* mobile phone view from here on */
@media only screen 
	and (max-device-width: 768px) 
  	and (-webkit-min-device-pixel-ratio: 3)
  	and (orientation: portrait)

{
	#desktopComingSoon{
		display: none;
	}
}