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

*, 
*::after, 
*::before {
	box-sizing: border-box;
}



:root {
--fullWidth: 100vw;
--fullHeight: 100vh;
--unit: calc(var(--fullWidth)*0.02);
--Vunit: calc(var(--fullHeight)*0.02);
--bannerHeight: calc((var(--fullWidth)*0.4180756)*0.95);
--bannerHeightFromFullHeight: calc(var(--fullHeight) - var(--bannerHeight));
--bannerBufferTop: calc(var(--bannerHeightFromFullHeight)/2);
--buttonHeight: calc((var(--fullWidth)*0.4180756)*0.055);
/* menu vars */
--navMenuHeight: calc(var(--fullHeight)*0.25);
--navMenuWidth: calc(var(--Vunit) * 13);
--navItemHeight: calc(var(--Vunit)*2.5);
--navItemWidth: calc(var(--Vunit)*7);;

--navText: calc(var(--Vunit)*1);
--navKerning: calc(var(--Vunit)*0.1);

--navItemAmount: 5;
--navSpaceAmount: calc(var(--navItemAmount) - 1);

--navItemTotal: calc(var(--navItemHeight) * var(--navItemAmount));
--navFullSpace: calc(var(--navMenuHeight) - var(--navItemTotal));
--navItemSpace: calc(var(--navFullSpace) / var(--navSpaceAmount));
--navSpacerFull: calc(var(--fullHeight) - var(--navMenuHeight));
--navTopSpacer: calc(calc(var(--navSpacerFull) + var(--navMenuWidth) - calc(var(--navTopPushDown)*2)) / 2);
--navTopPushDown: calc(var(--navItemHeight) + var(--navItemSpace));
--navTopOne: var(--navTopSpacer);
--navTopTwo: calc(var(--navTopOne) + var(--navTopPushDown));
--navTopThree: calc(var(--navTopTwo) + var(--navTopPushDown));
--navTopFour: calc(var(--navTopThree) + var(--navTopPushDown));
--navTopFive: calc(var(--navTopFour) + var(--navTopPushDown));

--pagePositionWidth: calc(var(--fullWidth) - calc(var(--navMenuWidth) + var(--Vunit)));
--chunkMargin: calc(var(--pagePositionWidth) * 0.016);

--chunkNumber: 4;

--bodyType: calc(var(--chunkMargin) * 0.88);

--chunkWidth: calc(calc(var(--fullWidth) - calc(var(--navMenuWidth) + var(--Vunit) + var(--chunkMargin))) / var(--chunkNumber));
--chunkHeight: var(--chunkWidth);
--chunkTotal: calc(var(--chunkWidth) * var(--chunkNumber));
--chunkWidthWithoutMargin: calc(var(--chunkWidth) - var(--chunkMargin));
--doubleChunkWidthWithoutMargin: calc(var(--chunkWidthWithoutMargin) + var(--chunkWidthWithoutMargin) + var(--chunkMargin));

--borderRadius: 13px;
--backgroundColour: #8b8b8b;

}






@font-face {
    font-family: "Circular Std Black";
    src: url("../images/CircularStd-Black.woff")format("woff");
}

.newSmHolder{
	position: fixed;
	bottom: var(--Vunit);
	left: var(--Vunit);
	height: var(--Vunit);
	z-index: 60;
}
.iconClass{
	height: var(--Vunit);
	width: var(--Vunit);
	font-size: var(--Vunit);
	text-align: center;
	line-height: var(--Vunit);
	margin-right: calc(var(--Vunit)*0.8);
	color: #FFF;
	float: left;
}
.iconClass:hover{
	color: #000;
	cursor: pointer;
}

.banner{
	font-family: "Circular Std Black";
	width: calc(var(--fullWidth)*0.95);
	height: var(--bannerHeight);
	left:calc(var(--fullWidth)*0.025);
	top:var(--bannerBufferTop);
	margin: 0px;
	border: 50px;
	background-image:url(../images/preOrderBanner_3.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	position: fixed;
	z-index: 50;
	border-color: #000;
	border-top: 60px;
	border-radius: calc(var(--buttonHeight)*1.3);
}
.bannerBackground{
	height: var(--fullHeight);
	width: var(--fullWidth);
	background-color: black;
	opacity: 0.7;
	z-index: 40;
	position: fixed;
	top: 0px;
	left: 0px;
}
.killBanner{
	position: absolute;
	top: calc((var(--fullWidth)*0.4180756)*0.05);
	left: calc((var(--fullWidth)*0.4180756)*0.05);
	background-color: #FFF;
	height: var(--buttonHeight);
	width: var(--buttonHeight);
	line-height: var(--buttonHeight);
	border-radius: calc(var(--buttonHeight)/4);
	text-align: center;
	opacity: 0.4;
	font-size: var(--unit);
	font-family: "Circular Std Black";
	margin: 0px;
	padding: 0px;
}
.killBanner:hover{
	cursor: pointer;
	background-color: orange;
	color: #FFF;
	opacity: 1;
}
.killBanner{
	color: #000;
}
.pre-order{
	width: calc((var(--fullWidth)/4)*0.9);
	height: calc((var(--fullWidth)*0.4180756)*0.855);
	top: calc((var(--fullWidth)*0.4180756)*0.05);
	right: calc((var(--fullWidth)*0.4180756)*0.05);
	background-color: rgba(0, 0, 0, 0.3);
	position: absolute;
	border-radius: calc((var(--fullWidth)*0.4180756)*0.05);
}
.bannerHeader{
	font-family: "Circular Std Black";
	font-size: calc((var(--fullWidth)*0.4180756)*0.07);
	line-height: calc((var(--fullWidth)*0.4180756)*0.07);
	color: #fff;
	margin: calc((var(--fullWidth)*0.4180756)*0.05);
}
.bannerRule{
	height: 2px;
	background-color: #FFF;
	margin: calc((var(--fullWidth)*0.4180756)*0.05);
}
.bannerMerch{
	font-family: "Circular Std Black";
	font-size: calc((var(--fullWidth)*0.4180756)*0.04);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.002);
	line-height: calc((var(--fullWidth)*0.4180756)*0.045);
	color: #fff;
	margin: calc((var(--fullWidth)*0.4180756)*0.05);
}
.dropDown{
	height: calc((var(--fullWidth)*0.4180756)*0.09);
	margin-left: calc((var(--fullWidth)*0.4180756)*-0.005);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.005);
}
.selectDropDown{
	width: 60%;
	height: var(--buttonHeight);
	margin-top: calc((var(--fullWidth)*0.4180756)*0.01);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.005);
}
.optionDropDown{
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.005);
}
.addButton{
	background-color: orange;
	font-family: "Circular Std Black";
	font-size: calc((var(--fullWidth)*0.4180756)*0.03);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.002);
	line-height: calc((var(--fullWidth)*0.4180756)*0.055);
	height: var(--buttonHeight);
	text-align: center;
	width: 25%;
	border-radius: calc((var(--fullWidth)*0.4180756)*0.01);;
	right: calc((var(--fullWidth)*0.4180756)*0.045);
	margin-top: calc((var(--fullWidth)*0.4180756)*-0.08);
	position:absolute;
}
.addButton:hover{
	background-color: #a5a5a5;
	color: #FFF;
	cursor: pointer;
}

.helloLogo {
	background-image: url(../images/HelloMerchLOGO_white.png);
	background-size: contain;
	width: calc((var(--fullWidth)/4)*0.7);
	height: calc((var(--fullWidth)/4)*0.25);
	background-repeat: no-repeat;
}

.toteHitBox{
	background-color: red;
	opacity: 0;
	position: absolute;
	left: 3%;
	width: 21%;
	height: 75%;
	top: 10%;
	border-radius: 10%;
}
.shirtHitBox{
	background-color: green;
	opacity: 0;
	position: absolute;
	width: 18%;
	left: 27%;
	height: 75%;
	top: 10%;
	border-radius: 10%;
}
.hoodieHitBox{
	background-color: blue;
	opacity: 0;
	position: absolute;
	width: 22%;
	left: 50%;
	height: 78%;
	top: 10%;
	border-radius: 10%;
}
body{
	font-family:"Circular Std Black";
	font-style:normal;
	color: #FFF;
	font-size:12px;
	line-height:20px;
	margin: 0px;
	border: 0px;
	background-color: #8b8b8b;
	background-repeat: repeat;
}
a:link {
	text-decoration: none;
	color:#FFF;
}
a:visited {
	text-decoration: none;
	color:#FFF;
}
a:hover {
	text-decoration: none;
	color:#FFF;
}
a:active {
	text-decoration: none;
	color:#FFF;
}
.invis {
	display: none;
}
.invisToMobile {
	display: block;
}
.invisToDesktop {
	display: none;
}


.penninesLogo{
	font-family: "Circular Std Black";
	font-size: calc(var(--fullHeight)*0.06);
	letter-spacing: calc(var(--fullHeight)*0.005);
	color: #FFF;
	position: fixed;
	top: calc(var(--fullHeight)*0.02) ;
	left: calc(var(--fullHeight)*0.0) ;
	background-image: url(../images/PenNines_Logo.svg);
	height: var(--navMenuWidth);
	width: var(--navMenuWidth);
	z-index: 10;
}
.navRuleOne{
	width: var(--navMenuWidth);
	height: 2px;
	background-color: #FFF;
	top: calc(var(--navTopOne) - var(--navTopPushDown));
	position: fixed;
}
.navRuleTwo{
	width: var(--navMenuWidth);
	height: 2px;
	background-color: #FFF;
	top: calc(var(--navTopFive) + var(--navTopPushDown) + var(--navItemHeight));
	position: fixed;
}


.contentHolder{
	width:400px;
	margin:auto;
	position:relative;
	top:5px;
}
.navBar{
	position:absolute;
	top:0px;
	left:-3px;
	height: 20px;
	width:406px;
}
.shirtButtons{
	position:absolute;
	top:0px;
	left:-3px;
	height: 200px;
	width:406px;
}

.shirtButton{
	background-color: #999;
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 20px;
	width: 76px;
	text-align: center;
	color: #FFF;
	cursor: pointer;
	font-style:normal;
}
.shirtButton:hover{
	background-color:#09C;
}
.buyButton{
	position:absolute;
	left:0px;
	bottom:0px;
	background-color:#069;
	padding:10px;
	padding-top:5px;
	padding-bottom:5px;
	height:20px;
	width:76px;
	text-align:center;
	color:#FFF;
	cursor:pointer;
}
.buyButton:hover{
	background-color:#09C;
}

.pages{
	position:absolute;
	top:60px;
}


/* menu */
.navButton{
	/*background-color:#000;*/
	line-height: var(--navItemHeight);
	height:var(--navItemHeight);
	width:var(--navMenuWidth);
	text-align:left;
	padding-left: calc(var(--Vunit)* 1);
	color:#FFF;
	cursor:pointer;
	font-size: var(--navText);
	letter-spacing: var(--navKerning);
	position: fixed;
}
.navButton:hover{
	background-color:#aaaaaa;
}
.active{
	position: absolute;
	left:0px;
	top:0px;
	background-color:#FFF;
	color: #aaaaaa;
	line-height: var(--navItemHeight);
	height:var(--navItemHeight);
	width:var(--navMenuWidth);
	font-size: var(--navText);
	letter-spacing: var(--navKerning);
	text-align:left;
	padding-left: calc(var(--Vunit)* 1);
}

.col-1{
	left: 0px;
	top: var(--navTopOne);
	position: fixed;
}
.col-2{
	left: 0px;
	top: var(--navTopTwo);
	position: fixed;
}
.col-3{
	left: 0px;
	top: var(--navTopThree);
	position: fixed;
}
.col-4{
	left: 0px;
	top: var(--navTopFour);
	position: fixed;
}
.col-5{
	left: 0px;
	top: var(--navTopFive);
	position: fixed;
}

/* old menu layout

.colFix{
	position:absolute;
	left:-48px;
}

.navButton{
	background-color:#000;
	padding:10px;
	padding-top:5px;
	padding-bottom:5px;
	height:20px;
	width:76px;
	text-align:center;
	color:#FFF;
	cursor:pointer;
}
.navButton:hover{
	background-color:#09C;
}

.col-1{
	position:absolute;
	left:12.5%;
}
.col-2{
	position:absolute;
	left:37.5%;
}
.col-3{
	position:absolute;
	left:62.5%;
}
.col-4{
	position:absolute;
	left:87.5%;
}

*/


.pagePosition{
	position: absolute;
	top: calc(var(--navTopOne) - var(--navTopPushDown));;
	right: 0px;
	width: calc(calc(var(--chunkMargin) * var(--chunkNumber)) + calc(var(--chunkWidthWithoutMargin) * var(--chunkNumber)) + 1px);
	margin-bottom: var(--chunkMargin);
	padding-bottom: calc(var(--chunkMargin) * 3);
}
.lowercase{
	text-transform: lowercase
}

.chunk{
	margin-bottom: var(--chunkMargin);
	margin-right: var(--chunkMargin);
	width: var(--chunkWidthWithoutMargin);
	background-size: cover;
	float: left;
	font-size: var(--bodyType);
	line-height: calc(var(--chunkWidthWithoutMargin) / 10);
	color: #444444;
	z-index: -1;
	background-color: #aaaaaa;
	border-radius: var(--borderRadius);
}
.chunk a{
	color: #FFF;
}
.chunk a:hover{
	color: #000;
	cursor: pointer;
}
.chunk iframe{
	width: var(--chunkWidthWithoutMargin);
	height: calc(var(--chunkWidthWithoutMargin) * 1.5);
	border: 0px;
	margin: 0px;
	border-radius: var(--borderRadius);
}
.chunk img{
	width: var(--chunkWidthWithoutMargin);
	height: var(--chunkWidthWithoutMargin);
	border: 0px;
	margin: 0px;
	object-fit:contain;
	background-color: #FFF;
	border-radius: var(--borderRadius);
	left: calc(var(--chunkMargin) * -1);
}
.chunk img:hover{
	size-adjust: 2;
}

.toteImg{
	background-image: url(../images/tote_thumb_1.jpg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--borderRadius);
	width: var(--chunkWidthWithoutMargin);
	height: var(--chunkWidthWithoutMargin);
}
.toteImg:hover{
	background-size: 149%;
	background-position: right 90%;
}
.shirtImg{
	background-image: url(../images/shirt_thumb_1.jpg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--borderRadius);
	width: var(--chunkWidthWithoutMargin);
	height: var(--chunkWidthWithoutMargin);
}
.shirtImg:hover{
	background-size: 230%;
	background-position: 52% 36%;
}
.newShirtImg{
	background-image: url(../images/tapSkip-mockUp.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--borderRadius);
	width: var(--chunkWidthWithoutMargin);
	height: var(--chunkWidthWithoutMargin);
}
.newShirtImg:hover{
	background-size: 190%;
	background-position: 50% 44%;
}
.hoodieImg{
	background-image: url(../images/hoodie_thumb_2.jpg);
	background-size: 100%;
	background-position: center;
	border-radius: var(--borderRadius);
	width: var(--chunkWidthWithoutMargin);
	height: var(--chunkWidthWithoutMargin);
}
.hoodieImg:hover{
	background-size: 280%;
	background-position: 48.5% 30%;
}

.doubleChunk{
	margin-bottom: var(--chunkMargin);
	margin-right: var(--chunkMargin);
	width: var(--doubleChunkWidthWithoutMargin);
	background-size: cover;
	float: left;
	font-size: var(--bodyType);
	line-height: calc(var(--chunkWidthWithoutMargin) / 10);
	color: #444444;
	background-color: #aaaaaa;
	border-radius: var(--borderRadius);
}
.doubleChunk a{
	color: #FFF;
}
.doubleChunk a:hover{
	color: #000;
	cursor: pointer;
}
.doubleChunk img{
	width: var(--doubleChunkWidthWithoutMargin);
	height: var(--chunkWidthWithoutMargin);
	border: 0px;
	margin: 0px;
	object-fit: cover;
}
.doubleChunk iframe{
	width: var(--doubleChunkWidthWithoutMargin);
	height: calc(calc(var(--chunkWidthWithoutMargin) / 10) * 12);
	border: 0px;
	margin: 0px;
	object-fit: cover;
}

.chunkRule{
	height: 2px;
	//*margin-top: calc(calc(calc(var(--chunkWidthWithoutMargin) / 10) / 2) - 1px);
	margin-bottom: calc(calc(calc(var(--chunkWidthWithoutMargin) / 10) / 2) - 1px); *//
	width: var(--chunkWidthWithoutMargin);
	background-color: #FFF;
}
.chunkAddButton{ 
	background-color:#444444;
	color: #FFF;
	font-size: calc(calc(var(--chunkWidthWithoutMargin) / 10) * 0.6);
	font-family: "Circular Std Black";
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.002);
	height: calc(var(--chunkWidthWithoutMargin) / 10);
	line-height: calc(var(--chunkWidthWithoutMargin) / 10);;
	text-align: center;
	width: calc(calc(var(--chunkWidthWithoutMargin) * 0.3) - 1px);
	border-radius: calc((var(--fullWidth)*0.4180756)*0.01);
	right: 0px;
	float: left;
}
.chunkAddButton:hover{
	background-color: #a5a5a5;
	color: #FFF;
	cursor: pointer;
}
.chunkDropDown{
	height: calc(var(--chunkWidthWithoutMargin) / 10);
	line-height: calc(var(--chunkWidthWithoutMargin) / 10);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.005);
	float: left;
	width: calc(var(--chunkWidthWithoutMargin) * 0.6);
	margin-right: calc(var(--chunkWidthWithoutMargin) / 10);;
	margin-bottom: calc(var(--chunkWidthWithoutMargin) / 20);;
	font-size: calc(var(--chunkWidthWithoutMargin) / 22);
}
.chunkSelectDropDown{
	height: calc(var(--chunkWidthWithoutMargin) / 10);
	line-height: calc(var(--chunkWidthWithoutMargin) / 10);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.005);
	width: calc(var(--chunkWidthWithoutMargin) * 0.5);
	font-size: calc(var(--chunkWidthWithoutMargin) / 22);
}
.chunkOptionDropDown{
	height: calc(var(--chunkWidthWithoutMargin) / 10);
	line-height: calc(var(--chunkWidthWithoutMargin) / 10);
	letter-spacing: calc((var(--fullWidth)*0.4180756)*0.005);
	width: calc(var(--chunkWidthWithoutMargin) * 0.6);
	font-size: calc(var(--chunkWidthWithoutMargin) / 22);
}
.gc{
	display: inline-block;
	width: calc(var(--chunkWidthWithoutMargin) / 2);
}
.gcx2{
	display: inline-block;
	width: calc(var(--chunkWidthWithoutMargin) / 1.1);
}


.theFooter{
	position: absolute;
	padding: var(--Vunit);
	font-size: 20px;
	height: var(--Vunit);
	line-height: 20px;
	width: 100%;
	color: #FFF;
	background-color: #8b8b8b;
	text-align: right;
	z-index: 1;
}

.logo1{
	position:relative;
	left:0px;
	top:0px;
	height:160px;
	width:400px;
}
.logo{
	position:absolute;
	left:0px;
	top:0px;
	background-image:url(../images/pennines%20logo-01.png);
	background-size:contain;
	background-repeat:no-repeat;
	height:160px;
	width:400px;
}
.rule{
	position:relative;
	width:400px;
	height:20px;
	border-top:1px;
	border-top-style:solid;
	border-top-color:#000;
}
.shirtOne{
	position:relative;
}
.shirtTwo{
	position:relative;
}
.shirtOneImage{
	background-image:url(../images/penninesShirtOne.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	background-color:#FFF;
	width:400px;
	height:400px;
}
.shirtOneImage:hover{
	position:relative;
	background-image:url(../images/penninesShirtOne.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:400px;
	height:400px;
}
.shirtTwoImage{
	background-image:url(../images/penninesShirtTwo.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	background-color:#FFF;
	width:400px;
	height:400px;
}
.shirtTwoImage:hover{
	position:relative;
	background-image:url(../images/penninesShirtTwo.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:400px;
	height:400px;
}
.shirtInfo{
	position:absolute;
	padding:10px;
	width:76px;
	bottom:0px;
	left:0px;
	background-color:#09C;
	color:#FFF;
}
.photo-1{
	width:400px;
	height:400px;
	background-image:url(../images/photo.jpg);
	background-position:center;
	background-size:cover;
}
.smHolder{
	position:fixed;
	bottom:0px;
	left:50%;
}
.smHolder2{
	left:220px;
	position:relative;
}
.fbLogo{
	background-image:url(../images/media_logos-04.png);
	background-size:cover;
	background-position:center;
	height:40px;
	width:40px;
}
.fbLogo:hover{
	background-image:url(../images/media_logos-01.png);
}
.bcLogo{
	background-image:url(../images/media_logos-03.png);
	background-size:cover;
	background-position:center;
	height:40px;
	width:40px;
}
.bcLogo:hover{
	background-image:url(../images/media_logos-02.png);
}
.paypalSubmitImage{
	position:absolute;
	top:0px;
	left:0px;
	opacity:0;
}
.basket{
	position:fixed;
	left:calc(50% + 220px);
	top:100px;
	background-image:url(../images/basketLogo-05.png);
	background-size:cover;
	background-position:center;
	height:40px;
	width:40px;
}
.basket:hover{
	background-image:url(../images/basketLogo-06.png);
	cursor:pointer;
}
.mail{
	position:fixed;
	left:calc(50% + 220px);
	top:160px;
	background-image:url(../images/mailLogo-07.png);
	background-size:cover;
	background-position:center;
	height:40px;
	width:40px;
}
.mail:hover{
	background-image:url(../images/mailLogo-08.png);
	cursor:pointer;
}
.soldOut{
	position:absolute;
	background-image:url(../images/commingSoon-01.png);
	background-size:contain;
	background-color:#FFF;
	height:400px;
	width:400px;
	top:0px;
	left:0px;
	opacity:0;
}
.soldOut:hover{
	opacity:.75;
}

.floatNone{
	float: none;
}
p {
	padding: var(--chunkMargin);
	padding-top: 0;
	padding-bottom: 0;
}
h1 {
	font-size: calc(var(--bodyType) * 2);
	line-height: calc(var(--chunkWidthWithoutMargin) / 7.5);
	color: #444;
	font-weight: 100;
	margin: 0;
	padding: var(--chunkMargin);
}


@media screen and (max-width: 1800px) {
	:root {		
		--chunkNumber: 3;
		--chunkMargin: calc(var(--pagePositionWidth) * 0.02);

		--bodyType: calc(var(--chunkMargin) * 0.88);
		}
		.chunk{
			font-size: var(--bodyType);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
		.doubleChunk{
			font-size: var(--bodyType);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
	
}

@media screen and (max-width: 1200px) {
	:root {		
		--chunkNumber: 2;
		--chunkMargin: calc(var(--pagePositionWidth) * 0.03);

		--bodyType: calc(var(--chunkMargin) * 0.88);
		}

		.chunk{
			font-size: var(--bodyType);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
		.doubleChunk{
			font-size: var(--bodyType);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
}
@media screen and (max-width: 800px) {
	:root {		
		--chunkNumber: 1;
		--chunkMargin: calc(var(--pagePositionWidth) * 0.06);

		--bodyType: calc(var(--chunkMargin) * 0.88);
		}

		.chunk{
			width: var(--chunkWidthWithoutMargin);
			font-size: var(--bodyType);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
		.doubleChunk{
			width: var(--chunkWidthWithoutMargin);
			font-size: var(--bodyType);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
		.doubleChunk img{
			width: var(--chunkWidthWithoutMargin);
			height: var(--chunkWidthWithoutMargin);
		}
		.doubleChunk iframe{
			width: var(--chunkWidthWithoutMargin);
			height: var(--chunkWidthWithoutMargin);
		}
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 620px) {
	:root {		
        --phoneUnit: calc(var(--unit) * 2);

		--chunkNumber: 1;
		--chunkMargin: calc(var(--pagePositionWidth) * 0.05);

		--bodyType: calc(var(--chunkMargin) * 1.1);

		--pagePositionWidth: var(--fullWidth);

		--chunkWidth: calc(var(--fullWidth) - calc(var(--chunkMargin) * 1));
		--chunkHeight: var(--chunkWidth);
		--chunkTotal: calc(var(--chunkWidth) * var(--chunkNumber));
		--chunkWidthWithoutMargin: calc(var(--chunkWidth) - var(--chunkMargin));
		--doubleChunkWidthWithoutMargin: calc(var(--chunkWidthWithoutMargin) + var(--chunkWidthWithoutMargin) + var(--chunkMargin));
		
		--mobileSmSpacing: calc(calc(var(--fullWidth) - calc(var(--phoneUnit) * 7)) / 8);

		--bar-width: calc(calc(var(--bar-height) * 3) + calc(var(--hamburger-gap) * 2));
		--bar-height: calc(var(--phoneUnit) * 0.6);
		--hamburger-gap: calc(var(--phoneUnit) * 0.3);
		--forground: #fff;
		--background:#444444;
		--hamburger-margin: var(--chunkMargin);
		--animation-timing: 200ms ease-in-out;
		--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);

		--navTopOne: calc(var(--hamburger-height) + var(--hamburger-margin) + var(--phoneUnit));
		--navTopTwo: calc(var(--navTopOne) + var(--navTopPushDown));
		--navTopThree: calc(var(--navTopTwo) + var(--navTopPushDown));
		--navTopFour: calc(var(--navTopThree) + var(--navTopPushDown));
		}


		/* menu */
.navButton{
	/*background-color:#000;*/
	line-height: var(--navItemHeight);
	height:var(--navItemHeight);
	width:100%;
	text-align:left;
	padding-left: calc(var(--Vunit)* 1);
	color:#444444;
	cursor:pointer;
	font-size: var(--navText);
	letter-spacing: var(--navKerning);
	position: fixed;
}
.navButton:hover{
	background-color:#aaaaaa;
	color: #FFF;
}
.active{
	position: absolute;
	left:0px;
	top:0px;
	background-color:#444444;
	color: #fff;
	line-height: var(--navItemHeight);
	height:var(--navItemHeight);
	width: 100%;
	font-size: var(--navText);
	letter-spacing: var(--navKerning);
	text-align:left;
	padding-left: calc(var(--Vunit)* 1);
}

		.newSmHolder{
			position: fixed;
			bottom: 0;
			left: 0px;
			right: -10px;
			padding: var(--phoneUnit);
			padding-left: var(--mobileSmSpacing);
			height: var(--phoneUnit);
            width: 120vw;
			z-index: 60;
			background-color: #444444;
			overflow: hidden;
            padding-bottom: calc(var(--phoneUnit) * 2);
		}
		.iconClass{
			height: var(--phoneUnit);
			width: var(--phoneUnit);
			font-size: var(--phoneUnit);
			text-align: center;
			line-height: var(--phoneUnit);
			margin-right: var(--mobileSmSpacing);
			color: #FFF;
			float: left;
		}

		.pagePosition{
			position: absolute;
			top: var(--chunkMargin);
			right: 0px;
			left: 0px;
			width: var(--pagePositionWidth);
			margin: 0px;
			padding: 0px;
			padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + var(--Vunit));
			margin-bottom: calc(var(--chunkMargin) * 5);
			padding-bottom: calc(var(--chunkMargin) * 3);
		}
		.chunk{
			width: var(--chunkWidthWithoutMargin);
			font-size: var(--bodyType);
			margin-left: calc(calc(var(--fullWidth) - var(--chunkWidthWithoutMargin)) / 2);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
		.chunk iframe{
			width: var(--chunkWidthWithoutMargin);
			height: var(--chunkWidthWithoutMargin);
			border: 0px;
			margin: 0px;
		}
		.chunk img{
			width: var(--chunkWidthWithoutMargin);
			height: var(--chunkWidthWithoutMargin);
			border: 0px;
			margin: 0px;
			object-fit: cover;
		}
		.doubleChunk{
			width: var(--chunkWidthWithoutMargin);
			font-size: var(--bodyType);
			margin-left: calc(calc(var(--fullWidth) - var(--chunkWidthWithoutMargin)) / 2);
			line-height: calc(var(--chunkWidthWithoutMargin) / 10);
		}
		.doubleChunk img{
			width: var(--chunkWidthWithoutMargin);
			height: var(--chunkWidthWithoutMargin);
		}
		.doubleChunk iframe{
			width: var(--chunkWidthWithoutMargin);
			height: var(--chunkWidthWithoutMargin);
		}

		.invisToMobile {
			display: none;
		}
		.invisToDesktop {
			display: block;
		}

		
		.hamburger-menu {
			--x-width: calc(var(--hamburger-height) * 1.4141356237);
			display: flex;
			flex-direction: column;
			gap: var(--hamburger-gap);
			width: max-content;
			position: absolute;
			top: var(--hamburger-margin);
			left: var(--hamburger-margin);
			z-index: 63;
			cursor: pointer;
			pointer-events: all;
		}
		.clickOff {
			display: none;
			flex-direction: column;
			z-index: 70;
			cursor: pointer;
			pointer-events: all;
			background-color: #09C;
			opacity: 0.5;
			top: 0;
			right: 0;

		}
		.clickOff{
			content: "";
			width: 100vw;
			height: 100vh;
			appearance: none;
			padding: 0;
			margin: 0;
		/*	transition: translate var(--animation-timing);
			translate: -100%;
		*/	
		}
		
		.hamburger-menu:has(input:checked){
			--forground: #444444;
			--background: #fff;
		}
		
		.hamburger-menu:has(input:focus-visible)::before,
		.hamburger-menu:has(input:focus-visible)::before,
		.hamburger-menu input:focus-visible {
			border: 1px solid var(--background);
			box-shadow: 0 0 0 1px var(--forground);
		}
		
		.hamburger-menu::before,
		.hamburger-menu::after,
		.hamburger-menu input {
			content: "";
			width: var(--bar-width);
			height: var(--bar-height);
			background-color: var(--forground);
			border-radius: 9999px;
			transform-origin: left center;
			transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
		
		}
		
		.hamburger-menu input {
			appearance: none;
			padding: 0;
			margin: 0;
			outline: none;
			pointer-events: none;
		}
		
		.hamburger-menu:has(input:checked)::before {
			rotate: 45deg;
			width: var(--x-width);
			translate: 0 calc(var(--bar-height) / -2) ;
		}
		.hamburger-menu:has(input:checked)::after {
			rotate: -45deg;
			width: var(--x-width);
			translate: 0 calc(var(--bar-height) / 2) ;
		}
		.hamburger-menu input:checked {
			opacity: 0;
			width: 0;
		} 
		
		.sidebar {
			transition: translate var(--animation-timing);
			translate: -100%;
			padding: var(--Vunit);
			background-color: var(--forground);
			color: var(--background);
			min-height: 100vh;
			z-index: 600;
			pointer-events: none;
		}
		
		.sidebar nav{
			z-index: 60;
		}
		aside{
			z-index: 60;
		}

		.hamburger-menu:has(input:checked) + .sidebar {
			translate: 0;
			pointer-events: all;
		}

        .menuMask{
            position: fixed;
            top: 0;
            left: 0;
            padding: 0;
            margin: 0;
            
        }
        .mask1{
            width: calc(var(--bar-width) + calc(var(--hamburger-margin) * 2));
            height: calc(calc(var(--bar-height) * 3) + calc(var(--hamburger-gap) * 2) + calc(var(--hamburger-margin) * 2));
            background-color: var(--backgroundColour);
            left: 0;
            top: 0;
            border-bottom-right-radius: var(--borderRadius);
        }
        .mask2{
            width: 100vw;
            height: calc(calc(var(--bar-height) * 1.5) + calc(var(--hamburger-gap) * 1) + calc(var(--hamburger-margin) * 1));
            left: 0;
            top: var(--hamburger-margin);
            border-top-left-radius: var(--borderRadius);
            box-shadow: calc(var(--hamburger-margin) * -1) calc(var(--hamburger-margin) * -1) 0 var(--backgroundColour);
            float: right;
            position: absolute;
            left: calc(var(--bar-width) + calc(var(--hamburger-margin) * 2));
        }
        .mask3{
            width: calc(calc(var(--bar-width) + calc(var(--hamburger-margin) * 2)) / 2);
            height: calc(calc(var(--bar-height) * 3) + calc(var(--hamburger-gap) * 2) + calc(var(--hamburger-margin) * 2));
            left: 0;
            top: 0;
            border-top-left-radius: var(--borderRadius);
            box-shadow: calc(var(--hamburger-margin) * -1) calc(var(--hamburger-margin) * -1) 0 var(--backgroundColour);
            float: right;
            position: absolute;
            left: var(--hamburger-margin);
            top: calc(var(--bar-width) + calc(var(--hamburger-margin) * 2));
        }
		.posFixed{
			position: fixed;
			left: 0;
			top: 0;
			overflow:hidden;
			width: 40vw;
			z-index: 10;
			pointer-events: none;
		}

}