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

@media only screen 
	and (min-width: 768px) 

{
#desktopComingSoon{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 3000;
	display: block;
	background-color: darkgray;
	color: white;
	padding: 40vw;
	padding-top: 10vh;
	font-family: "Akkurat Pro";
	font-size: 2vw;
	line-height: 3vw;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	display: none;
}

#desktopComingSoon img{
	height: 20vw;
}

.landingVideo{
  margin: 0;
  padding:0;
	height: 100%;
    width: 114.286vh; /* 100 * 40 / 35 */
    min-width: 100%;
    min-height: 87.5vw; /* 100 * 40 / 35 */
	position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}
#theWebSite > .landingOut{
		bottom: 0;
		transform: translate(90px, 0%); 
	transition: all 0.4s ease-in-out 0.2s;
}

	#topperOne, #topperTwo {
		display: none;
	}
	
	.nav > div {
		left: -180px;
		top: 0;
		right: calc(100vw + 180px);
		bottom: 0;
		height: 100vh;
		width: 50px;
		transition: all 0.2s ease-in-out;
		position: fixed;
	/*	z-index: 4000; */
		display: grid;
		padding: 40px;
		grid-template-columns: 100%;
		grid-template-rows: 40px 40px 40px 80px 40px 40px;
		grid-gap: 0vw;
		padding-top: 30px;
	}
	
	.navSlide > div {
		left: 0;
		top: 0;
		right: calc(100vw - 100px);
		width: 100px;
		bottom: 0;
		height: 100vh;
		transition: all 0.2s ease-in-out 0.2s;
	}
	.nav div div{
		font-size: 20px;
		line-height: 30px;
		z-index: 3000;
	}
	.nav div{

	}
	
	#musicNavReady, #musicNavOn{
		order: 1;
	}
	#videoNavReady, #videoNavOn{
		order: 3;
	}
	#shopNavReady, #shopNavOn{
		order: 5;
	}
	#designNavReady, #designNavOn{
		order: 2;
	}
	#contactNavReady, #contactNavOn{
		order: 6;
	}
#musicNavOn{
		order: 1;
	display: none;
	}
#videoNavOn{
		order: 3;
		display: none;
	}
#shopNavOn{
		order: 5;
		display: none;
	}
#designNavOn{
		order: 2;
		display: none;
	}
#contactNavOn{
		order: 6;
		display: none;
	}
	#blankNav{
		order:4;
	}
	
	
	
.pageHolder-up > div {
 	top: 110vh;
	transition: top 0.4s ease-in-out;
	position: fixed;
	left: calc(180px + 40px);
	right: 40px;
	bottom: 40px;
	overflow-y: scroll;
	overflow-x: hidden;	
	border-radius: 2vw;
	background-color: darkgray;
}
.pageHolder-down > div {            
  	top: 40px;
	transition: top 0.4s ease-in-out;
	position: fixed;
	left: calc(180px + 40px);
	right: 40px;
	bottom: 40px;
	overflow-y: scroll;
	overflow-x: hidden;
	border-radius: 2vw;
} 
.pageTopper{
	display: none;
}
	
	
	.displayNone{
		display: none;
	}
	
	
	
.w1-3{
	width: calc(((100vw - 340px) - 40px) / 3);
	max-width: calc((1000px - 40px) / 3);
}
.w2-3{
	width: calc(((((100vw - 340px) - 40px) / 3) * 2) + 20px);
	max-width: calc((((1000px - 40px) / 3) * 2) + 20px);
}
.w3-3{
	width: calc(100vw - 340px);
	max-width: 1000px;
}
.w1-4{
	width: calc(((100vw - 340px) - 60px) / 4);
	max-width: calc((1000px - 60px) / 4);
}
.w2-4{
	width: calc(((100vw - 340px) - 20px) / 2);
	max-width: calc((1000px - 20px) / 2);
}
.w3-4{
	width: calc(((((100vw - 340px) - 60px) / 4) * 3) + 40px);
	max-width: calc((((1000px - 60px) / 4) * 3) + 40px);
}
.w1-6{
	width: calc(((100vw - 340px) - 100px) / 6);
	max-width: calc((1000px - 100px) / 6);
}
.w1-9{
	width: calc(((100vw - 340px) - 160px) / 9);
	max-width: calc((1000px - 160px) / 9);
}
.w2-9{
	width: calc(((((100vw - 340px) - 160px) / 9) * 2) + 40px);
	max-width: calc((((1000px - 160px) / 9) * 2) + 40px);
}
.w1-12{
	width: calc(((100vw - 340px) - 220px) / 12);
	max-width: calc((1000px - 220px) / 12);
}

.h1-3{
	height: calc(((100vw - 340px) - 40px) / 3);
	max-height: calc((1000px - 40px) / 3);
}
.h2-3{
	height: calc(((((100vw - 340px) - 40px) / 3) * 2) + 20px);
	max-height: calc(((((1000px) - 40px) / 3) * 2) + 20px);
}
.h3-3{
	height: calc(100vw - 340px);
	max-height: 1000px;
}
.h1-4{
	height: calc(((100vw - 340px) - 60px) / 4);
	max-height: calc((1000px - 60px) / 4);
}
.h2-4{
	height: calc(((100vw - 340px) - 20px) / 2);
	max-height: calc((1000px - 20px) / 2);
}
.h3-4{
	height: calc(((((100vw - 340px) - 60px) / 4) * 3) + 40px);
	max-height: calc((((1000px - 60px) / 4) * 3) + 40px);
}


.h2vw{
	height: 2vw;
}
.h2-4_rootTwo{
	height: calc((((100vw - 340px) - 20px) / 2) * 1.4);
	max-height: calc(((1000px - 20px) / 2) * 1.4);
}
.h2-4_golden{
	height: calc((((100vw - 340px) - 20px) / 2) * 1.61803398875);
	max-height: calc(((1000px - 20px) / 2) * 1.61803398875);
}
.h2-3_rootTwo{
	height: calc((((((100vw - 340px) - 40px) / 3) * 2) + 4vw) * 1.4);
	max-height: calc(((((1000px - 40px) / 3) * 2) + 4vw) * 1.4);
}

.h1-3_rootTwo{
	height: calc((((100vw - 340px) - 40px) / 3) * 1.4);
	max-height: calc(((1000px - 40px) / 3) * 1.4);
}
.h3-3_rootTwo{
	height: calc((100vw - 340px) * 1.4);
	max-height: calc(1000px * 1.4);
}
.h3-3_golden{
	height: calc((100vw - 340px) * 1.61803398875);
	max-height: calc(1000px * 1.61803398875);
}
.h1-3_golden{
	height: calc((((100vw - 340px) - 40px) / 3) * 1.61803398875);
	max-height: calc(((1000px - 40px) / 3) * 1.61803398875);
}
.hBuffer{
	height: 40px;
}
.hHalfBuffer{
	height: 20px;
}
.sitePipe{
	width: calc(100vw - 340px);
	max-width: 1000px;
	margin-left: 50%;
	transform:translateX(-50%);
	padding-top: 20px;
	overflow-x: hidden;
}
	
header{
	font-size: 2vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
	line-height: 2.5vw;
}
header a{
	color: white;
	text-decoration: none;
}
	
.copy{
	font-size: 1vw;
	line-height: 1.9vw;
	word-spacing: 0.1em;
	}
.heightVideo {
		height: calc((100vw - 340px) * 0.5625);
	}

/* items pertaining to the music page */
#musicGrid{
		display: grid;
		grid-template: 
			[buffer-start] "firstBuffer . . ." 50px [buffer-end]
			[printRule-start] "printRule . . ." 20px [printRule-end]
			[bufferTwo-start] "secondBuffer . . ." 50px [bufferTwo-end]
			[punchCutter-start] "punchCutterVideoHolder punchCutterVideoHolder punchCutterVideoHolder punchCutterVideoHolder" [punchCutter-end]
			[bufferThree-start] "thirdBuffer . . ." 50px [bufferThree-end]
			[printRuleTwo-start] "printRuleTwo . . ." 20px [printRuleTwo-end]
			[bufferFour-start] "fourthBuffer . . ." 50px [bufferFour-end]
			[columns-start] "titleOne musicOne titleTwo musicTwo" 1fr [columns-end]
			[bufferFive-start] "fifthBuffer . . ." 50px [bufferFive-end]
			[printRuleThree-start] "printRuleThree . . ." 20px [printRuleThree-end]
			[bufferSix-start] "sixthBuffer . . ." 50px [bufferSix-end]
			/ minmax(calc((((100vw - 340px) / 8) * 1) - 15px), calc(((1000px / 8) * 1) - 15px))  minmax(calc((((100vw - 340px) / 8) * 3) - 15px), calc(((1000px / 8) * 3) - 15px)) minmax(calc((((100vw - 340px) / 8) * 1) - 15px), calc(((1000px / 8) * 1) - 15px)) minmax(calc((((100vw - 340px) / 8) * 3) - 15px), calc(((1000px / 8) * 3) - 15px));
		gap: 20px;
		width: calc(100vw - 340px);
		max-width: 1000px;
	}
	
	.firstBuffer{
		grid-area: firstBuffer;
	}
	.printRule{
		grid-area: printRule;
	}
	.secondBuffer{
		grid-area: secondBuffer;
	}
	
	#punchCutterVideoHolder{
		grid-area: punchCutterVideoHolder;
		width: var(--sitePipeWidth);
		display: grid;
		grid-template: 
			[title-start] "pCTitle ." [title-end]
			[content-start] "pCTextLeft pCVideoRight" [content-end]
			/ var(--columnThirdOfPipe) var(--columnTwoThirdsOfPipe);
		gap: 20px;
		width: calc(100vw - 340px);
		max-width: 1000px;
	}
	
	.pCTitle{
		grid-area: pCTitle;
		width: var(--columnThirdOfPipe);
	}
	.pCTextLeft{
		grid-area: pCTextLeft;
		width: var(--columnThirdOfPipe);
	}
	#pCVideo{
		grid-area: pCVideoRight;
		width: var(--columnTwoThirdsOfPipe);
	}
	#pCVideo{
		width: var(--columnTwoThirdsOfPipe);
		height: calc((var(--columnTwoThirdsOfPipe) / 16) * 9)
	}
	
	.thirdBuffer{
		grid-area: thirdBuffer;
	}
	.printRuleTwo{
		grid-area: printRuleTwo;
	}
	.fourthBuffer{
		grid-area: fourthBuffer;
	}
	
	.titleOne{
		grid-area: titleOne;
		width: calc((((100vw - 340px) / 8) * 1) - 15px);
		max-width: calc(((1000px / 8) * 1) - 15px);
		text-align: right;
	}
	.titleTwo{
		grid-area: titleTwo;
		width: calc((((100vw - 340px) / 8) * 1) - 15px);
		max-width: calc(((1000px / 8) * 1) - 15px);
		text-align: right;
	}
	.musicOne{
		grid-area: musicOne;
		position: relative;
	}
	
	
	.musicOne div div, .musicTwo div div {
		width: 97%;
	} 
	/*
	.musicOne div, .musicTwo div {
		width: calc((((100vw - 340px) / 8) * 3) - px);
		max-width: calc(((1000px / 8) * 3) - 15px);
	} */
	.musicTwo{
		grid-area: musicTwo;
	}
	.fifthBuffer{
		grid-area: fifthBuffer;
	}
	.printRuleThree{
		grid-area: printRuleThree;
	}
	.sixthBuffer{
		grid-area: sixthBuffer;
	}
	
	
	.box{
		margin-bottom: 20px;
		margin-right: 20px;
	}
	
	
.heightMini{
	height: calc((((100vw - 340px) / 8) * 1.25) - 0vw);
	max-height: calc(((1000px / 8) * 1.25) - 0vw);
}
.heightHalfMini{
	height: calc((((100vw - 340px) / 8) * 0.5) - 0vw);
	max-height: calc(((1000px / 8) * 0.5) - 0vw);
}
.songTitle{
	padding: 0;
	padding-top: 1.4vw;
	padding-right: 3vw;
	padding-left: 1.4vw;
	line-height: calc(((100vw - 340px) / 8) * 0.28);
	font-size: calc(((100vw - 340px) / 8) * 0.14);
	width: calc(((((100vw - 340px) / 8) * 3) - 2.6vw) - 15px);
	max-width: calc((((1000px / 8) * 3) - 2.6vw) - 15px);
	
}
.bandTitles{
	padding-left: 1.4vw;
 	padding-right: 1.4vw;
	top: 0vw;
	height: calc((((100vw - 340px) / 8) * 1.25) - 0vw);
	max-height: calc(((1000px / 8) * 1.25) - 0vw);
}
	
.playerWidth{
	width: calc(((((100vw - 340px) / 8) * 3) - 0vw) - 15px);
	max-width: calc((((1000px / 8) * 3) - 0vw) - 15px);
	padding: 0;
}
.playerTitleWidth{
	width: calc(((((100vw - 340px) / 8) * 3) - 2.8vw) - 15px);
	max-width: calc((((1000px / 8) * 3) - 2.8vw) - 15px);
}


.ttngColour::after, .penninesColour::after, .saleOnTomorrowColour::after {
	position: absolute;
	content:"";
	background-color: inherit;
	top: calc((((100vw - 340px) / 8) * 1.25) - 1vw);
	width: calc((((100vw - 340px) / 8) * 3) - 15px);
	max-width: calc(((1000px / 8) * 3) - 15px);
	height: calc((((100vw - 340px) / 8) * 1.25) - 0vw);
	max-height: calc(((1000px / 8) * 1.25) - 0vw);
	margin-left: -1.4vw;
}

.bandTitles h1{
	font-size: 2.5vw;
	line-height: 2.5vw;
}
	
.printersRule{
	height: 15px;
}
/* trying to grid the design page */

/* a list of variables */
:root {
	--sitePipeWidth: calc(100vw - 340px);
  	--cutOfMarginThird: calc((20px * 2) / 3);
	--thirdOfSitePipe: calc(var(--sitePipeWidth) / 3);
	--columnThirdOfPipe: calc(var(--thirdOfSitePipe) - var(--cutOfMarginThird));
	--columnTwoThirdsOfPipe: calc(( var(--columnThirdOfPipe) * 2) + 20px);
	--halfOfSitePipe: calc(var(--sitePipeWidth) / 2);
	--columnHalfOfPipe: calc(var(--halfOfSitePipe) - 10px);
	
	/* logo colours*/
	--backlashColour: #D87B11;
	--malkoColour: #162040;
	--myletsColour: #36859C;
	--eyeletColour: #60BFA4;
	--glassLibraryColour: #0C0731;
	--oddPocketsColour: #F36F61;
	--tooCoolColour: #11454D;
	--dripColour: #737373;
	
}
/* a list of variables */
	
	.theLogoGrid{
		display: grid;
		grid-template:
	[row1-start] "sidebar ." [row1-end];
		grid-gap:20px;
	}
	.logoPool{
		order:2;
		display: grid;
		grid-template:
	[row1-start] ". ." [row1-end]
    [row2-start] ". ." [row2-end]
    [row3-start] ". ." [row3-end]
    [row4-start] ". ." [row4-end]
	[row5-start] ". ." [row4-end] / var(--columnThirdOfPipe) var(--columnThirdOfPipe);
		grid-gap:20px;
		position: relative;
	}
	
	#logoBlurb{
	order: -1;
	grid-area: sidebar;	
	width: var(--columnThirdOfPipe);
	}
	#logoOne{
		order: 1;
	}
	#logoTwo{
		order: 2;
	}
	#logoThree{
		order: 3;
	}
	#logoFour{
		order: 4;
	}
	#logoFive{
		order: 5;
	}
	#logoSix{
		order: 6;
	}
	#logoSeven{
		order: 7;
	}
	#logoEight{
		order: 8;
	}
	.divZoomOut > div {
		width: var(--columnThirdOfPipe);
		height: var(--columnThirdOfPipe);
		margin:0;
	}
	.divZoom > div {
		width: calc(( var(--columnThirdOfPipe) * 2) + 20px);
		height: calc(( var(--columnThirdOfPipe) * 2) + 20px);
		margin:0;
	}
	.logoOutTheWay > div {
	margin-top: calc(( var(--columnThirdOfPipe) * 2) + 40px);
	transition: margin-top 0.4s ease-in-out;
}
	
	
	

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

	#dripImageOneText, #dripImageTwoText, #dripImageThreeText, #dripImageFourText{
		margin-top: -20px;
	}
	
.textOddZoomIn > div {
	padding-top: 20px;
	padding-left: 20px;
	padding-right:20px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: calc(var(--columnThirdOfPipe) - 20px);
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
	margin-left: calc((0px - var(--columnThirdOfPipe)) - 20px);
	transform:translateY(calc((0px - var(--columnThirdOfPipe)) - 0px));
}
	
.textWebZoomIn > div {
	padding-top: 20px;
	padding-left: 20px;
	padding-right:20px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: calc(var(--columnThirdOfPipe) - 20px);
	overflow: hidden;
	opacity: 1;
	transition-delay: 0.4s;
	margin-left: 0;
	margin-bottom: calc(0px - var(--columnThirdOfPipe));
	transition: margin-bottom 0.4s ease-in-out, height 0.4s ease-in-out;
	transform:translateY(calc((0px - var(--columnThirdOfPipe)) - 0px));
}

.textOddZoomInBig > div {
	padding-top: 20px;
	padding-left: 20px;
	padding-right:20px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: calc(var(--columnTwoThirdsOfPipe) - 20px);
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
	margin-left: calc((0px - var(--columnThirdOfPipe)) - 20px);
	transform:translateY(calc((0px - var(--columnTwoThirdsOfPipe)) - 0px));
}

.textEvenZoomIn > div {
	padding-top: 20px;
	padding-left: 20px;
	padding-right:20px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: calc(var(--columnThirdOfPipe) - 20px);
	overflow: hidden;
	opacity: 1;
	transition: height 0.4s ease-in-out;
	transition-delay: 0.4s;
	margin-left: calc((0px - (var(--columnThirdOfPipe) * 2)) - 40px);
	transform:translateY(calc((0px - var(--columnThirdOfPipe)) - 0px));
}
	
	#backlashText .copy{
		color: white;
		background-color: var(--backlashColour);
	}
	#malkoText .copy{
		color: white;
		background-color: var(--malkoColour);
	}
	#myletsText .copy{
		color: white;
		background-color: var(--myletsColour);
	}
	#eyeletText .copy{
		color: white;
		background-color: var(--eyeletColour);
	}
	#eyeletText .copy a{
		color: #177359;
	}
	#glassLibraryText .copy{
		color: white;
		background-color: var(--glassLibraryColour);
	}
	#oddPocketsText .copy{
		color: white;
		background-color: var(--oddPocketsColour);
	}
	#tooCoolText .copy{
		color: white;
		background-color: var(--tooCoolColour);
	}
	#dripText .copy{
		color: white;
		background-color: var(--dripColour);
	}
	#dripText .copy a{
		color: #303030;
	}

/* grid for scroll into view */
	
.zoomTooMap{
 	position: absolute;
	top: -20px;
	left: 0;
	width: var(--columnTwoThirdsOfPipe);
	display: grid;
	grid-template-columns: [col1-start] var(--columnThirdOfPipe) [col1-end col2-start] var(--columnThirdOfPipe) [col2-end];
	grid-gap: 20px;
	padding-right: 20px;
	pointer-events: none;
}
.zoomTooMap div{
	opacity: 0.0;
	height: var(--columnThirdOfPipe);
	pointer-events: none;
}
	
	#scrollMe{
	}
	
/* end of logostuff */
	/* start of ttng cd stuff */

	#mainCDSleeveGrid{
		position: relative;
		display: grid;
		grid-template:
			[row1-start] "blurb sleeve1 sleeve2" [row1-end]
			[row1-start] "sleeve3 sleeve3 sleeve3" [row1-end]
			[row1-start] "sleeve4 sleeve4 blurb2" [row1-end]
			/ var(--columnThirdOfPipe) var(--columnThirdOfPipe) var(--columnThirdOfPipe);
		gap: 20px;
		padding: 0;
		}
	
	#CDSleeveOne{
		grid-area: sleeve1;
		height: var(--columnThirdOfPipe);
		width: var(--columnThirdOfPipe);
	}
	#CDSleeveTwo{
		grid-area: sleeve2;
		height: var(--columnThirdOfPipe);
		width: var(--columnThirdOfPipe);
	}
	#CDSleeveThree{
		grid-area: sleeve3;
		height: var(--columnThirdOfPipe);
		width: var(--sitePipeWidth);
	}
	#CDSleeveFour{
		grid-area: sleeve4;
		height: var(--columnThirdOfPipe);
		width: var(--columnTwoThirdsOfPipe);
	}
	#sleeveblurb2{
		grid-area: blurb2;
		height: var(--columnThirdOfPipe);
		width: var(--columnThirdOfPipe);
	}
	
	#sleeveBlurb{
		grid-area: blurb;
		width: var(--columnThirdOfPipe);
		padding-top: 0;
		margin-top: 0;
	}
	
.cdSleevePool{
	position: relative;
	grid-area: sleeve;
	display: grid;
	grid-template-columns: [col1-start] var(--columnThirdOfPipe) [col1-end col2-start] var(--columnThirdOfPipe) [col2-end];
	grid-gap: 20px;
}
	
.sleeveZoomOut > div {
	height: var(--columnThirdOfPipe);
	width: var(--columnThirdOfPipe);
	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: var(--columnTwoThirdsOfPipe);
	height: var(--columnTwoThirdsOfPipe);
	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;
}
	
.pushSleeveOne > div {
	margin-top: calc(var(--columnTwoThirdsOfPipe) + 20px);
}
.pushSleeveTwo > div {
	margin-left: calc((0px - var(--columnThirdOfPipe)) - 20px);
}
	
.secondPannelInside-small > div{
	margin-top: 0vw;
	margin-left: 0vw;
	width: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	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: calc( var(columnTwoThirdsOfPipe) * 2);
	height: var(--columnTwoThirdsOfPipe);
	left: 0px;
	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: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	left: calc(0px - var(--columnThirdOfPipe) - 10px);
	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: calc( var(columnTwoThirdsOfPipe) * 2);
	height: var(--columnTwoThirdsOfPipe);
	left: calc(0px - var(--columnTwoThirdsOfPipe));
	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: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	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: calc( var(columnTwoThirdsOfPipe) * 2);
	height: var(--columnTwoThirdsOfPipe);
	left: calc(0px - var(--columnTwothirdsOfPipe));
	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: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	left: calc(0px - var(--columnThirdOfPipe) - 10px);
	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: calc( var(columnTwoThirdsOfPipe) * 2);
	height: var(--columnTwoThirdsOfPipe);
	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: var(--columnThirdOfPipe);
	width: var(--thirdOfSitePipe);
	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: var(--columnThirdOfPipe);
	width: calc( var(--thirdOfSitePipe) - calc(40px / 3) + 10px);
	margin-left: -10px;
	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: var(--columnTwoThirdsOfPipe);
	width:  var(--columnTwoThirdsOfPipe);
	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: var(--columnTwoThirdsOfPipe);
	width:  var(--columnTwoThirdsOfPipe);
	margin-left: calc(0px - var(--columnThirdOfPipe));
	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;
}
	
	
	
	
	
	
	
/* start of poster stuff */
	#posterDesignGrid{
	position: relative;
	display: grid;
	grid-template:[row1-start] "blurb posters" [row1-end] / var(--columnThirdOfPipe) var(--columnTwoThirdsOfPipe);
	gap: 20px;
	padding: 0;
	}
	
	#posterDesignBlurb{
		grid-area: blurb;
		width: var(--columnThirdOfPipe);
		padding-top: 0;
		margin-top: 0;
	}
	
.posterPool{
	position: relative;
	grid-area: posters;
	display: grid;
	grid-template-columns: [col1-start] var(--columnThirdOfPipe) [col1-end col2-start] var(--columnThirdOfPipe) [col2-end];
	grid-gap: 20px;
}

.posterRootSmall > div {
	margin-left: 0;
	height: calc(var(--columnThirdOfPipe) * 1.4);
	width: var(--columnThirdOfPipe);
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}
.posterRootBig > div {
	margin-left: 0;
	height: calc(var(--columnTwoThirdsOfPipe) * 1.4);
	width: var(--columnTwoThirdsOfPipe);
	transition: all 0.4s ease-in-out;
	z-index: 70000;
}
.posterRootBigOdd > div {
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	height: calc(var(--columnTwoThirdsOfPipe) * 1.4);
	width: var(--columnTwoThirdsOfPipe);
	transition: all 0.4s ease-in-out;
	z-index: 70000;
}

.posterGoldenSmall > div {
	margin-left: 0;
	height: calc(var(--columnThirdOfPipe) * 1.618);
	width: var(--columnThirdOfPipe);
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}
.posterGoldenBig > div {
	margin-left: 0;
	height: calc(var(--columnTwoThirdsOfPipe) * 1.618);
	width: var(--columnTwoThirdsOfPipe);
	transition: all 0.4s ease-in-out;
}
.posterGoldenBigOdd > div {
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	height: calc(var(--columnTwoThirdsOfPipe) * 1.618);
	width: var(--columnTwoThirdsOfPipe);
	transition: all 0.4s ease-in-out;
}

.posterRootNorm > div {
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}
.posterRootPush > .posterRootSmall {
	margin-top: calc((var(--columnTwoThirdsOfPipe) * 1.4) + 20px);
	transition: all 0.4s ease-in-out;

}

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

}
.posterGoldenPush > .posterGoldenSmall {
	margin-top: calc((var(--columnTwoThirdsOfPipe) * 1.618) + 20px);
	transition: all 0.4s ease-in-out;


}

.posterTextSmall > div {
	padding: 0px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: 0vw;
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	transition: padding 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
	overflow: hidden;
	opacity: 0.0;
}
.posterTextBig > div {
	padding: 20px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: calc(var(--columnThirdOfPipe) - 40px);
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	transition: padding 0.4s ease-in-out 0.5s, width 0.4s ease-in-out 0.5s, height 0.4s ease-in-out 0.5s;
	overflow: hidden;
	opacity: 1.0;
}
	
.posterTextBigOdd > div {
	padding: 20px;
	width: calc(var(--columnThirdOfPipe) - 40px);
	height: calc(var(--columnThirdOfPipe) - 40px);
	margin-left: calc(0px - var(--columnTwoThirdsOfPipe) - 20px);
	transition: padding 0.4s ease-in-out 0.5s, width 0.4s ease-in-out 0.5s, height 0.4s ease-in-out 0.5s;
	overflow: hidden;
	opacity: 1.0;
}
	
#posterOneText div {
		background-color: #AD0021;
		color: #520010;
	}
#posterTwoText div {
		background-color: white;
		color: #D52D6A;
	}
#posterThreeText div {
		background-color: #015900;
		color: #2A922B;
		margin-top: calc((var(--columnThirdOfPipe) * 1.4) + 20px);
	}
#posterFourText div {
		background-color: #FFD100;
		color: #7c6600;
		margin-top: calc((var(--columnThirdOfPipe) * 1.4) + 20px);
	}
#posterFiveText div {
		background-color: #85CFC4;
		color: white;
		margin-top: calc(((var(--columnThirdOfPipe) * 1.4) * 2) + 40px);
	}
#posterSixText div {
		background-color: #F27321;
		color: white;
		margin-top: calc(((var(--columnThirdOfPipe) * 1.4) * 2) + 40px);
	}
#posterSevenText div {
		background-color: white;
		color: dimgrey;
		margin-top: calc(((var(--columnThirdOfPipe) * 1.4) * 3) + 60px);
	}
#posterEightText div {
		background-color: #137DBB;
		color: white;
		margin-top: calc(((var(--columnThirdOfPipe) * 1.4) * 3) + 60px);
	}
	
	#posterOneText, #posterTwoText, #posterThreeText, #posterFourText, #posterFiveText, #posterSixText, #posterSevenText, #posterEightText {
		position: absolute;
		top: 0;
	}
	
.paddingTop4vw{
	padding-top: 20px;
}

.posterSmallLookMap{
 	position: absolute;
	top: -20px;
	left: 0;
	width: var(--columnTwoThirdsOfPipe);
	display: grid;
	grid-template-columns: [col1-start] var(--columnTwoThirdsOfPipe) [col1-end];
	grid-template-rows: [row1-start] calc((var(--columnThirdOfPipe) * 1.4) + 0px) [row1-end row2-start] calc((var(--columnThirdOfPipe) * 1.4) + 0px)[row2-end row3-start] calc((var(--columnThirdOfPipe) * 1.4) + 0px) [row3-end row4-start] calc((var(--columnThirdOfPipe) * 1.4) + 0px) [row4-end];
	grid-gap: 20px;
	padding-right: 0;
	pointer-events: none;
	height: 250vw;
	opacity: 0;
	
}
	.posterSmallLookMap div {
		background-color: aqua;
		opacity: 0.4;
	}
	
	
/* drip clothing*/
	
	
#dripGrid{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] var(--columnThirdOfPipe) [col1-end col2-start] var(--columnThirdOfPipe) [col2-end];
	grid-gap: 20px;
	margin-bottom: 20px;
	margin-left: calc(var(--columnThirdOfPipe) + 20px);
}
	
.marginBottom4vw{
	margin-bottom: 20px;
}
	
.dripWeb{
	margin-left: calc(var(--columnThirdOfPipe) + 20px);
}
	
.dripLogoVideoSmall > div {
	width: var(--columnThirdOfPipe);
	height: var(--columnThirdOfPipe);
	transition: all 0.4s ease-in-out;
}

.dripLogoVideoBig > div {
	width: var(--columnTwoThirdsOfPipe);
	height: var(--columnTwoThirdsOfPipe);
	transition: all 0.4s ease-in-out;
}

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

.dripShirtSmall > div {
	height: var(--columnThirdOfPipe);
	width: var(--columnThirdOfPipe);
	margin-left: 0vw;
	transition: all 0.4s ease-in-out;
}
.dripShirtBig > div {
	height: var(--columnTwoThirdsOfPipe);
	width: var(--columnTwoThirdsOfPipe);
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	transition: all 0.4s ease-in-out;
}

#dripWebVideo{
	object-fit:cover;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0.4vw;
}
.dripWeb > div {
	position: relative;
	width: var(--columnTwoThirdsOfPipe);
	height: calc(var(--columnTwoThirdsOfPipe) * 0.656);
	cursor: pointer;
}


#dripGrid2{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] var(--columnThirdOfPipe) [col1-end col2-start] var(--columnThirdOfPipe) [col2-end];
	grid-gap: 20px;
	margin-bottom: 0;
	margin-top: 0;
	margin-left: calc(var(--columnThirdOfPipe) + 20px);
}
#dripGrid2 > div{
	height: var(--columnThirdOfPipe);
	width: var(--columnThirdOfPipe);
	margin-left: 0;
	margin-top: 0;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
	padding: 0;
}

#dripGrid2 > .dripImageOddBig {
	height: var(--columnTwoThirdsOfPipe);
	width: var(--columnTwoThirdsOfPipe);
	margin-left: 0;
	margin-top: 0;
	transition: all 0.4s ease-in-out;
}
#dripGrid2 > .dripImageEvenBig {
	height: var(--columnTwoThirdsOfPipe);
	width: var(--columnTwoThirdsOfPipe);
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	margin-top: 0;
	transition: all 0.4s ease-in-out;
}
#dripGrid2 > .dripImageOutTheWay {
	margin-top: calc(var(--columnTwoThirdsOfPipe) + 20px);
	transition: all 0.4s ease-in-out;
}
#dripGrid2 > .dripImageOutTheWayBig {
	margin-top: calc(var(--columnTwoThirdsOfPipe) + 20px);
	transition: all 0.4s ease-in-out;
}

.dripLookOne{
	position: absolute;
	margin-top: -20px;
	width: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	pointer-events: none;
}
.dripLookTwo{
	position: absolute;
	top:-20px;
	width: var(--columnTwoThirdsOfPipe);
	height: calc((var(--columnTwoThirdsOfPipe) * 0.656) + 20px);
	pointer-events: none;
}

.dripLookTwo div {
	position: absolute;
	top: 20px;
	height: calc(var(--columnTwoThirdsOfPipe) * 0.656);
	width: var(--columnTwoThirdsOfPipe);
}
.dripLookThree{
	position: absolute;
	top:-20px;
	width: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	pointer-events: none;
}
.dripLookFour{
	position: absolute;
	top:var(--columnThirdOfPipe);
	width: var(--columnTwoThirdsOfPipe);
	height: var(--columnThirdOfPipe);
	pointer-events: none;
}
	
	#dripDesignBlurb{
		width: var(--columnThirdOfPipe);
		position: absolute;
		top: 0;
		padding-top: 0;
	}
	
	#mainDripDiv{
		position: relative;
		
	}
	
	#dripLogoVideoText div, #dripShirtText div, #dripWebText div, #dripImageOneText div, #dripImageTwoText div, #dripImageThreeText div, #dripImageFourText div {
		background-color: #5F6465;
	}
	

/* typeface stuff */
	

.designGrid{
	position: relative;
	display: grid;
	grid-template-columns: [col1-start] var(--columnThirdOfPipe) [col1-end col2-start] var(--columnThirdOfPipe) [col2-end];
	grid-gap: 20px;
	margin-bottom: 20px;
	margin-left: calc(var(--columnThirdOfPipe) + 20px);
}

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

.designGrid > .designImageOddBig {
	height: var(--columnTwoThirdsOfPipe);
	width: var(--columnTwoThirdsOfPipe);
	margin-left: 0vw;
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}
.designGrid > .designImageEvenBig {
	height: var(--columnTwoThirdsOfPipe);
	width: var(--columnTwoThirdsOfPipe);
	margin-left: calc(0px - var(--columnThirdOfPipe) - 20px);
	margin-top: 0vw;
	transition: all 0.4s ease-in-out;
}

.designGrid > .designImageOutTheWay {
	margin-top: calc(var(--columnTwoThirdsOfPipe) + 20px);
	transition: all 0.4s ease-in-out;
}

.paddingtonLook{
	position: absolute;
	top: -20px;
	width: var(--columnTwoThirdsOfPipe);
	height: 10vw;
	pointer-events: none;
}

.marginBottom4vw{
	margin-bottom: 20px;
}

	#paddingtonOneText div, #paddingtonTwoText div {
		background-color: #5F6465;
	}
	
	#paddingtonOneText, #paddingtonTwoText{
		margin-top: -20px;
	}
	
	
	#paddingtonBlurb{
		width: var(--columnThirdOfPipe);
		height: calc(var(--columnThirdOfPipe) + 20px);
		margin-top: calc(0px - var(--columnThirdOfPipe) - 40px);
	}
	
	
/* malko  */	
	
	
#malkoVideo{
	width: var(--columnTwoThirdsOfPipe);
	height: var(--columnTwoThirdsOfPipe);
	margin: 0;
	padding: 0;
	margin-left: calc(20px + var(--columnThirdOfPipe));
}

	#malkoImageOne, #malkoImageTwo {
		width: var(--columnThirdOfPipe);
		height: var(--columnThirdOfPipe);
		margin: 0;
		padding: 0;
	}
	
	#malkoImageOne{
		margin-left: calc(var(--columnThirdOfPipe) + 20px)
	}
	
	#malkoVideoHolder{
		height: var(--columnTwoThirdsOfPipe);
	}
	
	#malkoBlurb{
		width: var(--columnThirdOfPipe);
		transform: translateY(calc(0px - var(--columnTwoThirdsOfPipe) - 20px - var(--columnThirdOfPipe))); 
		margin-bottom: -230px;
	}
	
.malkoLookOne{
	position: absolute;
	width: var(--columnTwoThirdsOfPipe);
	height: 10vw;
	margin-top: -20px;
	pointer-events: none;
}
.malkoLookTwo{
	position: absolute;
	width: var(--columnTwoThirdsOfPipe);
	height: 10vw;
	margin-top: var(--columnTwoThirdsOfPipe);
	pointer-events: none;
}
	

/* video page stuff */
	.video_grid{
		display: grid;
		grid-template: 
			[buffer-start] "buffer1 buffer1" 50px [buffer-end]
			[printRule-start] "printersRule1 printersRule1" 20px [printRule-end]
			[bufferTwo-start] "buffer2 buffer2" 50px [bufferTwo-end]
			[columns-start] "rangaTitle rangaVideo" 10vw [columns-end]
			[column2-start] "rangaCopy rangaVideo" [column2-end]
			[column22-start] "rangaCopy rangaVideo" [column22-end]
			[bufferThree-start] "buffer3 buffer3" 50px [bufferThree-end]
			[printRuleTwo-start] "printersRule2 printersRule2" 20px [printRuleTwo-end]
			[bufferFour-start] "buffer4 buffer4" 50px [bufferFour-end]
			[column3-start] "ttngTitle ttngVideo" 7.5vw [column3-end]
			[column4-start] "ttngCopy ttngVideo" [column4-end]
			[bufferFive-start] "buffer5 buffer5" 50px [bufferFive-end]
			[printRuleThree-start] "printersRule3 printersRule3" 20px [printRuleThree-end]
			[bufferSix-start] "buffer6 buffer6" 50px [bufferSix-end]
			[column5-start] "krakenTitle krakenVideo" 7.5vw [column5-end]
			[column6-start] "krakenCopy krakenVideo" [column6-end]
			[bufferSeven-start] "buffer7 buffer7" 50px [bufferSeven-end]
			[printRuleFour-start] "printersRule4 printersRule4" 20px [printRuleFour-end]
			[bufferEight-start] "buffer8 buffer8" 50px [bufferEight-end] / minmax(calc(50% - 30px), 650px)  minmax(calc(50% - 30px), 650px);
		gap: 20px;
	}
	
	.video_grid .buff1 {
		grid-area: buffer1;
	}
	.video_grid .buff2 {
		grid-area: buffer2;
	}
	.video_grid .buff3 {
		grid-area: buffer1;
	}
	.video_grid .buff4 {
		grid-area: buffer2;
	}
	.video_grid .buff5 {
		grid-area: buffer5;
	}
	.video_grid .buff6 {
		grid-area: buffer6;
	}
	.video_grid .buff7 {
		grid-area: buffer7;
	}
	.video_grid .buff8 {
		grid-area: buffer8;
	}
	.video_grid .rule1 {
		grid-area: printersRule1;
	}
	.video_grid .rule2 {
		grid-area: printersRule2;
	}
	.video_grid .rule3 {
		grid-area: printersRule3;
	}
	.video_grid .rule4 {
		grid-area: printersRule4;
	}
	.rangaTitle{
		grid-area: rangaTitle;
		height: 15vw;
	}
	.rangaCopy{
		grid-area: rangaCopy;
	}
	.rangaVideo{
		grid-area: rangaVideo;
		width: calc(((100vw - 340px) / 2) - 10px);
		max-width: calc((1000px / 2) - 10px);
		height: calc(((((((100vw - 340px) / 2) - 10px) / 16) * 9) * 3) + 40px);
		max-height: calc((((((1000px / 2) - 10px) / 16) * 9) * 3) + 40px);
	}
	#video_1, #video_2, #video_3, #video_4, #video_5, #video_6, #video_7 {
		width: calc(((100vw - 340px) / 2) - 10px);
		max-width: calc((1000px / 2) - 10px);
		height: calc(((((100vw - 340px) / 2) - 10px) / 16) * 9);
		max-height: calc((((1000px / 2) - 10px) / 16) * 9);
	}
	.ttngTitle {
		grid-area: ttngTitle;
	}
	.ttngCopy{
		grid-area: ttngCopy;
	}
	.ttngVideo{
		grid-area: ttngVideo;
		width: calc(((100vw - 340px) / 2) - 10px);
		max-width: calc((1000px / 2) - 10px);
	}
	.krakenTitle {
		grid-area: krakenTitle;
	}
	.krakenCopy{
		grid-area: krakenCopy;
	}
	.krakenVideo{
		grid-area: krakenVideo;
	}
	.video_grid .copy {
		width: calc(((100vw - 340px) / 2) - 40px);
		max-width: calc((1000px / 2) - 40px);
	}
	
	
	
	/* shop page */
	
	
#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: 50px;
	background-position: center;
	background-repeat: no-repeat;
	height: 60px;
	width: 60px;
	background-color: black;
	padding: 20px;
	border-bottom-left-radius: 40px;
	cursor: pointer;
	overflow: hidden;
}
	/*
	 .basketButton form, .basketButton input, .basketButton img {
		position: absolute;
		right: 0;
		top: 0;
		width: 100px;
		height: 100px;
	} */
	

#basketCornerOne{
	position: absolute;
	top: 0;
	margin-top: -10px;
	right: 90px;
	height:30px;
	width: 30px;
	border-right: black solid 10px;
	border-top: black solid 10px;
	border-top-right-radius: 30px;
}

#basketCornerTwo{
	position: absolute;
	top: 90px;
	margin-right: -10px;
	right: -0px;
	height:30px;
	width: 30px;
	border-right: black solid 10px;
	border-top: black solid 10px;
	border-top-right-radius: 30px;
}

/* contact page stuff */
	.contact_grid {
		display: grid;
		grid-template: 
			[buffer-start] "contact_1 contact_1" 50px [buffer-end]
			[printRule-start] "contact_3 contact_3" 20px [printRule-end]
			[bufferTwo-start] "contact_4 contact_4" 50px [bufferTwo-end]
			[columns-start] "contact_2 contact_5" [columns-end]
			[column2-start] "contact_2 contact_6" [column2-end]
			[bufferThree-start] "contact_7 contact_7" 50px [bufferThree-end]
			[printRuleTwo-start] "contact_8 contact_8" 20px [printRuleTwo-end]
			[bufferFour-start] "contact_9 contact_9" 50px [bufferFour-end]
			/ minmax(calc(50% - 30px), 650px)  minmax(calc(50% - 30px), 650px);
		gap: 20px;
	}
	.contact_1{
		grid-area: contact_1;
	}
		.contact_2{
		grid-area: contact_2;
		width: calc(((100vw - 340px) / 2) - 20px);
		max-width: calc((1000px / 2) - 20px);
		height: calc(((100vw - 340px) / 2) - 20px);
		max-height: calc((1000px / 2) - 20px);
	}
		.contact_3{
		grid-area: contact_3;
	}
		.contact_4{
		grid-area: contact_4;
	}
		.contact_5{
		grid-area: contact_5;
		height: calc(((100vw - 340px) / 4) - 20px);
		max-height: calc((1000px / 4) - 20px);
	}
	.contact_5 div {
		position: relative;
		margin-top: calc((((100vw - 340px) / 4) - 20px) - 5vw);
		bottom: 0;
	}
		.contact_5 p{
		margin-top: calc((((100vw - 340px) / 4) - 20px) + 2.5vw);
	}
	.contact_7{
		grid-area: contact_7;
	}
		.contact_8{
		grid-area: contact_8;
	}
		.contact_9{
		grid-area: contact_9;
	}

	/* shop popUp */
	
.slide-up > div {
	top: 40px;
	left: auto;
	right: calc( calc((100vw - 140px) / 2) - calc((110vh - 0px) / 2) / 2);
	/*bottom: auto;*/
	height: calc(100vh - 120px);
	width: calc(((110vh - 160px) / 4) * 2);
	border-radius: 20px;
	pointer-events: none;
}
.slide-down > div {            
	top: 40px;
	left: auto;
	right: calc( calc((100vw - 140px) / 2) - calc((110vh - 0px) / 2) / 2);
	/*bottom: auto;*/
	height: calc(100vh - 120px);
	width: calc(((110vh - 160px) / 4) * 2);
	border-radius: 20px;
	pointer-events:all;
} 

.insidePopUp{
	padding: 20px;
}


.w3-3_popUp{
	width: calc(((110vh - 160px) / 4) * 2);
}
.h3-3_rootTwo_popUp{
	height: calc((((110vh - 160px) / 4) * 2) * 1.4);
	border-radius: 10px;
}
.h3-3_shirt_popUp{
	height: calc((((110vh - 160px) / 4) * 2) * 1.2);
}
.h3-3_shirt_popUp img{
	object-fit: cover;
	width: 90%;
    height: 90%;
    overflow: hidden;
	padding: 5%;
}

.w1-3_popUp{
	width: calc(((110vh - 160px) / 6) - 13.333px);
	height: 110vh;
	margin-right: 20px;
	font-size: calc((110vh - 160px) * 0.015);
	line-height: calc((110vh - 160px) * 0.02);
}

.rounded{
	border-radius: 10px;
}


.addToCart{
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	background-color: transparent;
	border: transparent solid 1px;
	border-radius: 10px;
	color: white;
	text-align: center;
	width: calc(((110vh - 160px) / 4) * 2);
	height: calc((((110vh - 160px) / 4) * 2) / 10);
}


.payPalHolder{
	border: rgb(0,108,110) solid 1px;
	color: white;
	width: calc(((110vh - 160px) / 4) * 2);
	height: calc((((110vh - 160px) / 4) * 2) / 10);
	font-size: calc(((110vh - 160px) / 4) * 0.08);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.02);
	font-weight: 700;
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: calc(((110vh - 160px) / 4) * 0.075);
}
.payPalHolder:hover{
	border: black solid 1px;
}
.payPalHolder:active{
	border: rgb(247,167,29) solid 1px;
}
.soldOut{
	border: rgb(200,200,200) solid 1px;
}
.soldOut:active{
	border: darkred solid 1px;
}

.backButton{
	border: white solid 1px;
	border-radius: calc(((110vh - 160px) / 4) * 0.20);
	width: calc(((110vh - 160px) / 4) * 0.15);
	height: calc(((110vh - 160px) / 4) * 0.15);
	font-size: calc(((110vh - 160px) / 4) * 0.15);
	font-weight: 700;
	line-height: calc(((110vh - 160px) / 4) * 0.15);
	bottom: calc(((110vh - 160px) / 4) * 0.05);
	left: calc(((110vh - 160px) / 4) * 0.05);
}
.backButton:hover{
	background-color: white;
	border: white solid 1px;
	color: rgb(247,167,29);
}
.backButton:active{
	background-color: white;
	border: white solid 1px;
	color: rgb(247,167,29);
}

.button2-4{
	border: rgb(247,167,29) solid calc(((110vh - 160px) / 4) * 0.01);
	border-radius: calc(((110vh - 160px) / 4) * 0.075);
	color: rgb(247,167,29);
	text-align: center;
	width: calc( calc(((110vh - 160px) / 4) - 10px) - calc(((110vh - 160px) / 4) * 0.02));
	height: calc((((110vh - 160px) / 4) * 2) / 10);
	font-size: calc(((110vh - 160px) / 4) * 0.08);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.02);
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin-right: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}
.button2-4:hover{
	border: rgb(247,167,29) solid calc(((110vh - 160px) / 4) * 0.01);
}
.button2-4_Selected{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid calc(((110vh - 160px) / 4) * 0.01);
	border-radius: calc(((110vh - 160px) / 4) * 0.075);
	width: calc( calc(((110vh - 160px) / 4) - 10px) - calc(((110vh - 160px) / 4) * 0.02));
	height: calc((((110vh - 160px) / 4) * 2) / 10);
	font-size: calc(((110vh - 160px) / 4) * 0.08);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.02);
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin-right: 20px;
	margin-bottom: 20px;
}
.button1-3{
	background-color: transparent;
	border: rgb(247,167,29) solid calc(((110vh - 160px) / 4) * 0.01);
	border-radius: calc(((110vh - 160px) / 4) * 0.075);
	width: calc( calc(((110vh - 160px) / 6) - 13.3333px) - calc(((110vh - 160px) / 4) * 0.02));
	height: calc((((110vh - 160px) / 4) * 2) / 10);
	font-size: calc(((110vh - 160px) / 4) * 0.08);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.02);
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin-right: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}
.button1-3:hover{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid calc(((110vh - 160px) / 4) * 0.01);
	color: white;
}
.button1-3_Selected{
	background-color: rgb(247,167,29);
	border: rgb(247,167,29) solid calc(((110vh - 160px) / 4) * 0.01);
	border-radius: calc(((110vh - 160px) / 4) * 0.075);
	width: calc( calc(((110vh - 160px) / 6) - 13.3333px) - calc(((110vh - 160px) / 4) * 0.02));
	height: calc((((110vh - 160px) / 4) * 2) / 10);
	font-size: calc(((110vh - 160px) / 4) * 0.08);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.02);
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin-right: 20px;
	margin-bottom: 20px;
}
	
.price{
	top: calc( calc((((((110vh - 160px) / 4) * 2) * 1.4) - 1.5vh) + 20px) - calc(((110vh - 160px) / 4) * 0.2));
	left: calc(1.5vh + 20px);
	font-size: calc(((110vh - 160px) / 4) * 0.06);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.006);
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin-bottom: 1vh;
	height: calc(((110vh - 160px) / 4) * 0.2);
	width: calc(((110vh - 160px) / 4) * 0.2);
	border-radius: calc(((110vh - 160px) / 4) * 0.2);
}
.shirtPrice{
	top: calc( calc((((((110vh - 160px) / 4) * 2) * 1.2) - 1.5vh) + 20px) - calc(((110vh - 160px) / 4) * 0.2));
	left: calc(1.5vh + 20px);
	font-size: calc(((110vh - 160px) / 4) * 0.06);
	letter-spacing: calc(((110vh - 160px) / 4) * 0.006);
	line-height: calc(((110vh - 160px) / 4) * 0.20);
	margin-bottom: 1vh;
	height: calc(((110vh - 160px) / 4) * 0.2);
	width: calc(((110vh - 160px) / 4) * 0.2);
	border-radius: calc(((110vh - 160px) / 4) * 0.2);
}
	
/* changing still images of bags and shirts */
.bagOne{
		background-image:url(../assets/shop/bags/8110_blue.png);
		background-size: cover;
		background-position: center;
		background-color: #5c778a;
	}
	.bagOne:hover{
		background-image:url(../assets/shop/bags/thumnails/blueBagThumb.jpg);
	}
.bagTwo{
		background-image:url(../assets/shop/bags/8110_green.png);
		background-size: cover;
		background-position: center;
		background-color: #5c8b5c;
	}
	.bagTwo:hover{
		background-image:url(../assets/shop/bags/thumnails/greenBagThumb.jpg);
	}
.bagThree{
		background-image:url(../assets/shop/bags/8110_orange.png);
		background-size: cover;
		background-position: center;
		background-color: #916048;
	}
	.bagThree:hover{
		background-image:url(../assets/shop/bags/thumnails/orangeBagThumb.jpg);
	}
.bagFour{
		background-image:url(../assets/shop/bags/everyDayBag.png);
		background-size: cover;
		background-position: center;
		background-color:#705978;
	}
	.bagFour:hover{
		background-image:url(../assets/shop/bags/thumnails/everyDayBagThumb.jpg);
	}
.bagFive{
		background-image:url(../assets/shop/bags/penguinBag-02.png);
		background-size: cover;
		background-position: center;
		background-color:#ab9742;
	}
	.bagFive:hover{
		background-image:url(../assets/shop/bags/thumnails/penguinBagThumb.jpg);
	}
	
.shirtOne{
		background-image:url(../assets/shop/shirts/rainingMansShirt.png);
		background-size: 110%;
		background-repeat: no-repeat;
		background-position: center;
		background-color:rgb(32,148,168);
	}
	.shirtOne:hover{
		background-image:url(../assets/shop/shirts/thumbnails/rainingShirtThumb.jpg);
		background-size:cover;
	}
.shirtTwo{
		background-image:url(../assets/shop/shirts/penguinMensShirt.png);
		background-size: 110%;
		background-repeat: no-repeat;
		background-position: center;
		background-color:rgb(32,158,158);
	}
	.shirtTwo:hover{
		background-image:url(../assets/shop/shirts/thumbnails/penguinShirtThumb.jpg);
		background-size:cover;
	}
.shirtThree{
		background-image:url(../assets/shop/shirts/fmlbtwMansShirt.png);
		background-size: 110%;
		background-repeat: no-repeat;
		background-position: center;
		background-color:rgb(32,168,148);
	}
	.shirtThree:hover{
		background-image:url(../assets/shop/shirts/thumbnails/fmlbtwShirtThumb.jpg);
		background-size:cover;
	}
	
	
	.posterHeader{
		margin-bottom: 40px;
	}
	
	.h1-3_rootTwo, .h1-3_rootTwo img {
		border: 0vw solid transparent;
		padding: 0;
	}

	
	.fadeOver{
		overflow: hidden;
		border-radius: 0;
	}
	.fadeOver2{
		overflow: hidden;
		border-radius: 0;
	}
	.fadeOver img:hover{
		width: 110%;
		margin-left: -5%;
	}
	.fadeOver2 img:hover{
		width: 125%;
		margin-left: -12.5%;
		
	}
	
	
	
	
	
	/*master page stuff */
	/* stuff to overright  */
	
	.noMargin{
		margin-right: 0px;
	}
	.noUnderMargin{
		margin-bottom: 0px;
	}
	
	.desktopDisplayNone{
		display: none;
	}

	
	
	/* loader */
	
	

	#scrollInfo{
		position: absolute;
		background-image:url(../assets/loading/scroll.svg);
		background-repeat: no-repeat;
		width: 40vh;
		margin: -20vh 0 0 -20vh;
		left: 50%;
		top: 70vh;
		height: calc(60vh * 0.5);
	}

	.displayNoneOnDesktop{
		display:none;
	}
	
	.displayNoneOnMobile{
		display: block;
	}
	
	

/* end of desktop css */	
}
/* end of desktop css */


/* breakpoint to limit font-size when sitePipe reaches it's max-width of 1000px */

@media only screen 
	and (min-width: 1340px) 

{

	
:root {
	--sitePipeWidth: 1000px;
	}
	
	/* music page stuff */

.copy{
	font-size: 13.4px;
	line-height: 25.46px;
	}
	
.songTitle{
	padding-top: 23.852px;
	line-height: calc((1000px / 8) * 0.28);
	font-size: calc((1000px / 8) * 0.14);
}
	
#musicGrid{
		display: grid;
		grid-template: 
			[buffer-start] "firstBuffer . . ." 50px [buffer-end]
			[printRule-start] "printRule . . ." 20px [printRule-end]
			[bufferTwo-start] "secondBuffer . . ." 50px [bufferTwo-end]
			[punchCutter-start] "punchCutterVideoHolder punchCutterVideoHolder punchCutterVideoHolder punchCutterVideoHolder" [punchCutter-end]
			[bufferThree-start] "thirdBuffer . . ." 50px [bufferThree-end]
			[printRuleTwo-start] "printRuleTwo . . ." 20px [printRuleTwo-end]
			[bufferFour-start] "fourthBuffer . . ." 50px [bufferFour-end]
			[columns-start] "titleOne musicOne titleTwo musicTwo" 1fr [columns-end]
			[bufferFive-start] "fifthBuffer . . ." 50px [bufferFive-end]
			[printRuleThree-start] "printRuleThree . . ." 20px [printRuleThree-end]
			[bufferSix-start] "sixthBuffer . . ." 50px [bufferSix-end]
			/ calc(((1000px / 8) * 1) - 15px) calc(((1000px / 8) * 3) - 15px) calc(((1000px / 8) * 1) - 15px) calc(((1000px / 8) * 3) - 15px);
		gap: 20px;
		width: 1000px;
	}
	
	.ttngColour::after, .penninesColour::after, .saleOnTomorrowColour::after {
		top: calc(((1000px / 8) * 1.25) - 1vw);}
	
	.bandTitles h1{
	font-size: 33.5px;
	line-height: 33.5px;
}
	header{
	font-size: 26.8px;
	margin-top: 13.4px;
	margin-bottom: 13.4px;
	line-height: 33.5px;
}
	
	/* video page */
	.video_grid{
		display: grid;
		grid-template: 
			[buffer-start] "buffer1 buffer1" 50px [buffer-end]
			[printRule-start] "printersRule1 printersRule1" 20px [printRule-end]
			[bufferTwo-start] "buffer2 buffer2" 50px [bufferTwo-end]
			[columns-start] "rangaTitle rangaVideo" 134px [columns-end]
			[column2-start] "rangaCopy rangaVideo" [column2-end]
			[column22-start] "rangaCopy rangaVideo" [column22-end]
			[bufferThree-start] "buffer3 buffer3" 50px [bufferThree-end]
			[printRuleTwo-start] "printersRule2 printersRule2" 20px [printRuleTwo-end]
			[bufferFour-start] "buffer4 buffer4" 50px [bufferFour-end]
			[column3-start] "ttngTitle ttngVideo" 100.5px [column3-end]
			[column4-start] "ttngCopy ttngVideo" [column4-end]
			[bufferFive-start] "buffer5 buffer5" 50px [bufferFive-end]
			[printRuleThree-start] "printersRule3 printersRule3" 20px [printRuleThree-end]
			[bufferSix-start] "buffer6 buffer6" 50px [bufferSix-end]
			[column5-start] "krakenTitle krakenVideo" 100.5px [column5-end]
			[column6-start] "krakenCopy krakenVideo" [column6-end]
			[bufferSeven-start] "buffer7 buffer7" 50px [bufferSeven-end]
			[printRuleFour-start] "printersRule4 printersRule4" 20px [printRuleFour-end]
			[bufferEight-start] "buffer8 buffer8" 50px [bufferEight-end] / minmax(calc(50% - 30px), 650px)  minmax(calc(50% - 30px), 650px);
		gap: 20px;
	}
	
	
	/* contact page */
	
	.contact_5 div {
		position: relative;
		margin-top: calc(((1000px / 4) - 20px) - 67px);
		bottom: 0;
	}
		.contact_5 p{
		margin-top: calc(((1000px / 4) - 20px) + 33.5px);
	}
	
	
	
/* end of max breakpoint	*/
}
/* end of max breakpoint	*/