@font-face {
	font-family: "Cabin";
	src: url("../font/cabin.eot");											/* IE9 Compat Modes */
	src: url("../font/cabin.eot?#iefix") format("embedded-opentype"),		/* IE6-IE8 */
	     url("../font/cabin.woff2") format("woff2"),						/* Super Modern Browsers */
	     url("../font/cabin.woff") format("woff"),							/* Pretty Modern Browsers */
	     url("../font/cabin.ttf") format("truetype"),						/* Safari, Android, iOS */
	     url("../font/cabin.svg#svgFontName") format("svg");				/* Legacy iOS */
}

@font-face {
	font-family: "Dozer One";
	src: url("../font/dozerone.eot");										/* IE9 Compat Modes */
	src: url("../font/dozerone.eot?#iefix") format("embedded-opentype"),	/* IE6-IE8 */
	     url("../font/dozerone.woff2") format("woff2"),						/* Super Modern Browsers */
	     url("../font/dozerone.woff") format("woff"),						/* Pretty Modern Browsers */
	     url("../font/dozerone.ttf") format("truetype"),					/* Safari, Android, iOS */
	     url("../font/dozerone.svg#svgFontName") format("svg");				/* Legacy iOS */
}

@font-face {
	font-family: "Edo";
	src: url("../font/edo.eot");											/* IE9 Compat Modes */
	src: url("../font/edo.eot?#iefix") format("embedded-opentype"),			/* IE6-IE8 */
	     url("../font/edo.woff2") format("woff2"),							/* Super Modern Browsers */
	     url("../font/edo.woff") format("woff"),							/* Pretty Modern Browsers */
	     url("../font/edo.ttf") format("truetype"),							/* Safari, Android, iOS */
	     url("../font/edo.svg#svgFontName") format("svg");					/* Legacy iOS */
}

body {
	margin: 0;
	padding: 0;
	font-family: "Cabin", Century Gothic, Sans Serif, Arial;
   	font-size: 18pt;
	color: #0E2E47;
	overflow-x: hidden;
	cursor: url(../img/cursor.png), auto;
}

a {
	color: #0E2E47;
	cursor: url(../img/pointer.png), auto;
}

a:hover {
	color: #fd4dff;
	text-decoration-color: #fd4dff;
}

h2 {
	font-size: 40pt;
	line-height: 60pt;
}

h3 {
	font-size: 25pt;
	line-height: 25pt;	
}

i {
	font-weight: 300;
}

input {
	cursor: url(../img/pointer.png), auto;
}

select {
	padding: 3px;
	font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        font-size: 18pt;
	color: #0E2E47;
	background-color: #ffa55c;
	border: 0;
	line-break: normal;
	cursor: url(../img/pointer.png), auto;
}

@media screen and (orientation: landscape) {
	.mobile {
		display: none;
	}
}

@media screen and (orientation: portrait) {
	.desktop {
		display: none;
	}
}





/*----------------|
|-------IDs-------|
|----------------*/

#box {
	width: 100%;
	height: auto !important;
    	height: 80vh; /* for IE6 */
	min-height: 80vh;
	position: relative;
	padding: 10vh 0;
}

#cover-bar {
	width: 100vw;
	height: 10vh;
	margin: -10vh 0 0 0;
	position: relative;
	background: #40b86e;
	z-index: 1;
}

#overlay {
	width: 100%;
	margin: -1px 0 -1px 0;
	overflow: hidden;
}

#overlay1 {
	width: 10000px;
	height: 140px;
	background: url("../img/overlay1.jpg");
	background-size: contain;

	-webkit-animation: overlay1 15s linear infinite;
		animation: overlay1 15s linear infinite;
}

#overlay2 {
	width: 5070px;
	height: 140px;
	background: url("../img/overlay2.jpg");
	background-size: contain;

	-webkit-animation: overlay2 15s linear infinite;
		animation: overlay2 15s linear infinite;
}

#people {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;

	background-image: url("../img/people-with-confetti.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}

#people-mobile {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;

	background-image: url("../img/people-mobile.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 95% auto;
}

#spacer {
	height: 10vh;
}

#span {
	display: inline;
	font-size: 60pt;
	font-weight: bold;
	line-height: 60pt;
}

@media screen { @media (min-width: 0px) {	/* All browsers except IE (IE is defined above) */
	#people {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;

		background-image: url("../img/people.png");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#people-mobile {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;

		background-image: url("../img/people-mobile.png");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: 95% auto;
	}
}}

@media screen and (orientation: landscape) {
	#shop-box {
		width: 50vw;
	}
	
	#background {
		width: 100%;
		height: 100vh;
		top: 0;
		position: absolute;
		background-image: url("../img/background-with-confetti.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media screen { @media (min-width: 0px) {	/* All browsers except IE (IE is defined above) */
		#background {
			width: 100%;
			height: 100vh;
			top: 0;
			position: absolute;
				background-image: url("../img/background.jpg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}}

	#box-content {
		width: 70%;
		margin: 0 auto;
		text-align: center;
		line-height: 24pt;
	}

	#box1 {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	#box2 {
		width: 100%;
		height: auto !important;
	    	height: 80vh; /* for IE6 */
		min-height: 80vh;
		position: relative;
		padding: 10vh 0;
		background-color: #ffc519;
		background-image: url("../img/box2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	#box3 {   /* For charity page */
		width: 100%;
		position: relative;
		padding: 10vh 0;
	}

	#flag {
		width: 20vw;
		height: 20vw;
		background-size: cover;
		background-repeat: no-repeat;

		-webkit-animation: flag 2s infinite;
			animation: flag 2s infinite;
	}

	#footer {
		width: 100%;
		padding: 3vh 0 15vh 0;
		position: relative;		
		font-size: 14pt;
		line-height: 14pt;
		float: left;
		background-color: #0096db;
	}

	#footer-content {
		width: 70%;
		margin: 5vh auto;
	}

	#footer-left {
		width: 40%;
		float: left;
	}

	#footer-left .instagram {
		height: 4vh;
		margin: 2vh 0 0 0;
	}

	#footer-left .facebook {
		height: 4vh;
		margin: 2vh 1vw 0 1vw;
	}

	#footer-left .email {
		height: 4vh;
		margin: 2vh 0 0 0;
	}

	#footer-left a {
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		color: #ffffff;
	}

	#footer-right {
		width: 40%;
		float: right;
		text-align: right;
	}

	#shop-banner-outer {
		width: 100%;
		top: 3vh;
		position: absolute;
		z-index: 2;
	}

	#shop-banner-inner {
		width: 35vw;
		margin: 0 auto;
		padding: 2vh 0 2vh 0;
		font-weight: bold;
		position: relative;
		background-color: rgba(255, 0, 255, 0.75);
	}

	#shop-banner-inner a {
		color: #ffffff;
	}

	#header {
		margin: 5vh 0 15vh 0;
		font-family: "Edo", century Gothic, Sans Serif, Arial;
		font-size: 100pt;
		text-shadow: 5px 5px #ffffff;

		-webkit-animation: bop 2s infinite;
			animation: bop 2s infinite;
	}

	#index1 {
		margin: 25vh 0 0 0;
		position: relative;
		z-index: 2;

		-webkit-animation: pulse2 5s infinite linear;
			animation: pulse2 5s infinite linear;
	}

	#index2 {
		margin: 0 auto 0 auto;
		position: relative;
		font-family: "Dozer One";
		font-size: 8vw;
		color: red;
		text-align: center;
  		text-shadow: 6px 6px #ffffff;
		z-index: 2;

		-webkit-animation: rainbow 5s infinite linear, fadein 1.6s ease 0s normal forwards 1, pulse2 5s 0.3s infinite linear;
			animation: rainbow 5s infinite linear, fadein 1.6s ease 0s normal forwards 1, pulse2 5s 0.3s infinite linear;
	}

	#index3 {
		position: relative;
		z-index: 2;

		-webkit-animation: pulse2 5s 0.6s infinite linear;
			animation: pulse2 5s 0.6s infinite linear;
	}

	#thirsty-landscape {
		width: 15vw;
		height: 15vw;
		top: 3vh;
		right: 10vw;
		display: inline-block;
		background-image: url("../img/mouth1.png");
		background-size: 15vw 15vw;
		background-repeat: no-repeat;
		position: absolute;

		-webkit-animation: mouth 2s infinite;
			animation: mouth 2s infinite;
	}
}

@media screen and (orientation: portrait) {
	#shop-box {
		width: 90%;
	}

	#background {
		width: 100%;
		height: 95vh;
		top: 0;
		position: absolute;
		background-image: url("../img/background-mobile-with-confetti.jpg");
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media screen { @media (min-width: 0px) {
		#background {
			width: 100%;
			height: 95vh;
			top: 0;
			position: absolute;
			background-image: url("../img/background-mobile.jpg");
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}}

	#box-content {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		line-height: 24pt;
	}

	#box1 {
		width: 100%;
		height: 95vh;
		position: relative;
		overflow: hidden;
	}

	#box2 {
		width: 100%;
		height: auto !important;
	    	height: 80vh; /* for IE6 */
		min-height: 80vh;
		position: relative;
		padding: 10vh 0;
		background-color: #ffc519;
	}
	
	#box3 {   /* For charity page */
		width: 100%;
		height: auto !important;
	    	height: 80vh; /* for IE6 */
		min-height: 80vh;
		position: relative;
		padding: 10vh 0;
	}

	#flag {
		width: 60vw;
		height: 60vw;
		background-size: cover;
		background-repeat: no-repeat;

		-webkit-animation: flag 2s infinite;
			animation: flag 2s infinite;
	}

	#footer {
		width: 100%;
		padding: 3vh 0 10vh 0;
		position: relative;		
		font-size: 16pt;
		line-height: 16pt;
		float: left;
		background-color: #0096db;
	}

	#footer-content {
		width: 90%;
		margin: 5vh auto;
		text-align: center;
	}

	#footer-left .instagram {
		height: 4vh;
		margin: 2vh 0 0 0;
	}

	#footer-left .facebook {
		height: 4vh;
		margin: 2vh 7vw 0 7vw;
	}

	#footer-left .email {
		height: 4vh;
		margin: 2vh 0 0 0;
	}

	#footer-left a {
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		color: #ffffff;
	}

	#footer-right {
		margin: 10vh 0 0 0;
	}

	#header {
		margin: 10vh 0 15vh 0;
		font-family: "Edo", century Gothic, Sans Serif, Arial;
		font-size: 15vw;
		text-shadow: 5px 5px #ffffff;

		-webkit-animation: bop-mobile 2s infinite;
			animation: bop-mobile 2s infinite;
	}

	#index1 {
		margin: 20vh 0 0 0;
		position: relative;
		z-index: 2;

		-webkit-animation: pulse2 5s infinite linear;
			animation: pulse2 5s infinite linear;
	}

	#index2 {
		margin: 0 auto 0 auto;
		position: relative;
		font-family: "Dozer One";
		font-size: 18vw;
		color: red;
		text-align: center;
  		text-shadow: 3px 3px #ffffff;
		z-index: 2;

		-webkit-animation: rainbow 5s infinite linear, fadein 1.6s ease 0s normal forwards 1, pulse2 5s 0.3s infinite linear;
			animation: rainbow 5s infinite linear, fadein 1.6s ease 0s normal forwards 1, pulse2 5s 0.3s infinite linear;
	}

	#index3 {
		position: relative;
		z-index: 2;

		-webkit-animation: pulse2 5s 0.6s infinite linear;
			animation: pulse2 5s 0.6s infinite linear;
	}

	#thirsty-portrait {
		width: 45vw;
		height: 45vw;
		margin: 7vh 0;
		display: inline-block;
		background-image: url("../img/mouth1.png");
		background-size: 45vw 45vw;
		background-repeat: no-repeat;

		-webkit-animation: mouth 2s infinite;
			animation: mouth 2s infinite;
	}
}





/*----------------|
|-----CLASSES-----|
|----------------*/

.bounce-in {
	-webkit-animation: bounce-in 0.75s 0.75s both;
		animation: bounce-in 0.75s 0.75s both;
}

.bounce-in-2 {
	-webkit-animation: bounce-in 0.75s 1.65s both;
		animation: bounce-in 0.75s 1.65s both;
}

.button {
	padding: 10px 7vw 10px 7vw;
	font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        font-size: 18pt;
	font-weight: bold;
	color: #ffffff;
	background-color: #fd4dff;
	border: 0;
	cursor: pointer;
	transition: background 0.3s;
	cursor: url(../img/pointer.png), auto;
}

.button:hover {
	background-color: #974e9e;
	cursor: pointer;
}

a.buy-button {
	padding: 10px 70px;
	font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        font-size: 18pt;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	background-color: #fd4dff;
	border: 0;
	/*border-radius: 5px;*/
	cursor: pointer;
	transition: background 0.3s;
	cursor: url(../img/pointer.png), auto;
}

a.buy-button:hover {
	background-color: #974e9e;
	cursor: url(../img/pointer.png), auto;
}

.can {
	width: 95vw;
}

.colour1 {
	background-color: #40b86e;   /* green */
}

.colour2 {
	background-color: #fd8524;   /* orange */
}

.colour3 {
	background-color: #fd4dff;   /* pink */
}

.colour4 {
	background-color: #ffc519;   /* yellow */
}

.colour5 {
	background-color: #974e9e;   /* purple */
}

.colour6 {
	background-color: #ef4f2b;   /* red */
}

.colour7 {
	background-color: #0096db;   /* blue */
}

.donation-amount {
	-webkit-animation: jello2 3.5s 1s infinite;
		animation: jello2 3.5s 1s infinite;

	-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
}

.header1 {
	color: #ffc519;
}

.header2 {
	color: #00c870;
}

.header3 {
	color: #0096db;
}

.header4 {
	color: #9e48ad;
}

.header5 {
	color: #fe4dff;
}

.party {
	-webkit-animation: party 1.8s infinite ease-in-out;
		animation: party 1.8s infinite ease-in-out;
}

.party-mobile {
	-webkit-animation: party-mobile 1.8s infinite ease-in-out;
		animation: party-mobile 1.8s infinite ease-in-out;
}

.pulse {
	-webkit-animation: pulse 1.4s infinite;
		animation: pulse 1.4s infinite;
}

.pulse-icon {
	-webkit-animation: pulse-icon 1.4s infinite;
		animation: pulse-icon 1.4s infinite;
}

.rotate {
	-webkit-animation: rotate 4s infinite linear;
		animation: rotate 4s infinite linear;
}

.rotate2 {
	-webkit-animation: rotate2 4s infinite linear;
		animation: rotate2 4s infinite linear;
}

.shake:hover {
	-webkit-animation-name: shake;
		animation-name: shake;
	-webkit-animation-duration: 0.8s;
		animation-duration: 0.8s;
	-webkit-transform-origin: 20% 80%;
		transform-origin: 20% 80%;
	-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
}

.shake-can {
	-webkit-animation-name: shake;
		animation-name: shake;
	-webkit-animation-duration: 0.8s;
		animation-duration: 0.8s;
	-webkit-transform-origin: 20% 80%;
		transform-origin: 20% 80%;
	-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
}

.shake-nav:hover {
	-webkit-animation-name: shake;
		animation-name: shake;
	-webkit-animation-duration: 1.5s;
		animation-duration: 1.5s;
	-webkit-transform-origin: 20% 80%;
		transform-origin: 20% 80%;
	-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
}

.subscribe-button {
	padding: 10px 7vw 10px 7vw;
	font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        font-size: 18pt;
	font-weight: bold;
	color: #ffffff;
	background-color: #974e9e;
	border: 0;
	cursor: pointer;
	transition: background 0.3s;
	cursor: url(../img/pointer.png), auto;
}

.subscribe-button:hover {
	background-color: #773e7d;
}

.tilt {
	-webkit-animation: tilt 1.2s infinite;
		animation: tilt 1.2s infinite;
}

@media screen and (orientation: landscape) {
	.account-icon {
		width: 34px;
		height: 34px;
		top: 25px;
		right: 80px;
		position: fixed;
		z-index: 3;
	}	
	
	.drm {
		width: 30vw;
	}

	.for-good {
		width: 26vw;
		margin: 0 0 0 37vw;
		position: relative;
	}

	.get-your-hands-on-me {
		width: 50vw;
		margin: 15vh 0;
	}

	.gif {
		width: 35vw;
	}

	.heart {
		width: 15vw;
		margin: 0 0 10vh 0;
	}

	.icon {
		width: 5vw;
	}

	.index-box-landscape {
		max-width: 40vw;
		margin: 0 auto;
	}

	.lgbt-foundation {
		width: 25vw;
	}

	.logo {
		height: 8vh;
		top: 2vh;
		left: 2vw;
		position: absolute;
		border: 3px solid white;
		z-index: 2;
	}

	.loyal-heart {
		height: 20vh;
		top: 3vh;
		right: 15vw;
		position: absolute;
	}

	.lukee {
		width: 6vw;
		bottom: 2vh;
		left: 7vw;
		position: absolute;
		z-index: 2;

		-webkit-animation: bounce-in-up 0.9s 0.5s 1, invisible 0.5s 1;
			animation: bounce-in-up 0.9s 0.5s 1, invisible 0.5s 1;
	}

	.lukee-mobile {
		display: none;
	}

	.portrait {
		display: none;
	}

	.recycling {
		width: 15vw;
		margin: 0 0 10vh 0;
	}
	
	.shopping-bag {		
		width: 6vw;
		height: 6vw;
		position: fixed;
		right: 2vw;
		bottom: 2vh;
		background-color: #fd4dff;
		border-radius: 4vw;
		-webkit-box-shadow: 2px 2px 5px 0px #595959; 
		box-shadow: 2px 2px 5px 0px #595959;
		
		z-index: 3;
	}
	
	.shopping-bag:hover {
		background-color: #974e9e;
	}
	
	.shopping-bag img {
		width: 3vw;
		height: 3vw;
		margin: 1.3vw 1.5vw 1.7vw 1.5vw;
	}

	.signature {
		width: 35vw;
	}

	.social {
		height: 15vh;
		margin: 0 2vw;
	}

	.social-enterprise {
		width: 120px;
	}

	.subscribe {
		width: 25vw;
		padding: 10px;
		font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        	font-size: 18pt;
	}

	.the-original {
		width: 34vw;
		margin: 0 0 0 33vw;
		position: relative;
	}

	.tht {
		width: 15vw;
	}
}

@media screen and (orientation: portrait) {
	.account-icon {
		width: 34px;
		height: 34px;
		top: 25px;
		right: 80px;
		position: absolute;
		z-index: 2;
	}
	
	.drm {
		width: 80%;
	}

	.for-good {
		width: 48%;
		margin: 1vh 0 0 26%;
		position: relative;
	}

	.get-your-hands-on-me {
		width: 80%;
		margin: 10vh 0;
	}

	.gif {
		width: 80vw;
	}

	.heart {
		width: 40%;
		margin: 0 0 10vh 0;
	}

	.icon {
		width: 15vw;
	}

	.landscape {
		display: none;
	}

	.logo {
		width: 48%;
		top: 2vh;
		left: 2vw;
		position: absolute;
		border: 3px solid white;
		z-index: 2;
	}

	.lgbt-foundation {
		width: 55%;
	}

	.loyal-heart {
		height: 20vw;
		margin: 0 0 5vh 0;
		top: 3vh;
		right: 15vw;
		position: absolute;
	}

	.lukee {
		display: none;
	}

	.lukee-mobile-outer {
		width: 100%;
		background-color: #40b86e;
	}

	.lukee-mobile {
		width: 15%;
		margin: 5px 0 0 5vw;
		-webkit-animation: bop2 2s infinite;
			animation: bop2 2s infinite;
	}

	.recycling {
		width: 50%;
		margin: 0 0 10vh 0;
	}

	.shop-now {
		width: 85vw;
		margin: 5vh 0 5vh 0;
	}

	.shop-now:hover {
		-webkit-animation: jello 1.5s infinite;
			animation: jello 1.5s infinite;

		-webkit-transform-origin: 50% 100%;
			transform-origin: 50% 100%;
	}
	
	.shopping-bag {		
		width: 15vw;
		height: 15vw;
		position: fixed;
		right: 3vw;
		bottom: 2vh;
		background-color: #fd4dff;
		border-radius: 7.5vw;
		-webkit-box-shadow: 2px 2px 5px 0px #595959; 
		box-shadow: 2px 2px 5px 0px #595959;
		
		z-index: 3;
	}
	
	.shopping-bag:hover {
		background-color: #974e9e;
	}
	
	.shopping-bag img {
		width: 8vw;
		height: 8vw;
		margin: 3.2vw 3.5vw 3.8vw 3.5vw;
	}

	.signature {
		width: 80%;
	}

	.social {
		height: 10vh;
		margin: 0 2vw;
	}

	.subscribe {
		width: 85%;
		padding: 10px;
		font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        	font-size: 18pt;
	}

	.social-enterprise {
		margin: 25px 0 0 0;
		width: 120px;
	}

	.the-original {
		width: 60%;
		margin: 0 0 0 20%;
		position: relative;
	}

	.tht {
		width: 35%;
	}
}



/* SHOP */

@media screen and (orientation: landscape) {
	#flexbox {
		width: 70%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	#purchase-box {
		width: 50%;
	}

	.purchase-box-left {
		 border-right: solid 1px;
	}

	#purchase-flexbox {
		display: flex;
	}

	#shop-box-text {
		width: 60%;
		margin: 0 auto;
		text-align: center;
		line-height: 24pt;
	}

	#shop-box-image {
		width: 40%;
		margin: 0 auto;
	}

	.buy-now {
		padding: 10px 50px 10px 50px;
		font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        	font-size: 18pt;
		font-weight: bold;
		color: #ffffff;
		background-color: #fd4dff;
		border: 0;
		cursor: pointer;
		transition: background 0.3s;
	}

	.buy-now:hover {
		background-color: #974e9e;
	}

	.club-details-landscape {
		margin: 2vh 0 0 0;
		padding: 2vw;
		background-color: #fd8524;
	}

	.collapsible {
		cursor: pointer;
		text-decoration: underline;
	}

	.collapsible:after {
		content: '\25BE';
	}

	.active:after {   /* has to come after .collapsible:after */
		content: '\25B4';
	}

	.collapsible-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}

	.hide1, .hide2 {
		display: none;
	}

	.loyal-hunnies-gif {
		width: 20vw;
	}

	.shop-image {
		height: 23vw;
		padding: 5vw 0 0 0;
	}

	.show-club-details-portrait {
		display: none;
	}
}

@media screen and (orientation: portrait) {
	#flexbox {
	}

	#shop-divider {
		width: 100%;
		height: 2px;
		background-color: #0E2E47;
	}

	#purchase-box {
	}

	.purchase-box-left {
		 margin-bottom: 5vh;
	}

	#purchase-flexbox {
	}

	#shop-box-text {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		line-height: 24pt;
	}

	#shop-box-image {
	}

	.buy-now {
		padding: 10px 7vw 10px 7vw;
		font-family: "Cabin", Century Gothic, Sans Serif, Arial;
        	font-size: 18pt;
		font-weight: bold;
		color: #ffffff;
		background-color: #fd4dff;
		border: 0;
		cursor: pointer;
		transition: background 0.3s;
	}

	.buy-now:hover {
		background-color: #974e9e;
	}

	.club-details-portrait {
		margin: 2vh 0 0 0;
		padding: 2vw;
		background-color: #fd8524;
	}

	.collapsible {
		cursor: pointer;
		text-decoration: underline;
	}

	.collapsible:after {
		content: '\25BE';
	}

	.active:after {   /* has to come after .collapsible:after */
		content: '\25B4';
	}

	.collapsible-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}

	.hide1, .hide2 {
		display: none;
	}

	.loyal-hunnies-gif {
		width: 65vw;
	}

	.shop-image {
		height: 35vh;
	}

	.show-club-details-landscape {
		display: none;
	}
}





/*----------------|
|----NAVIGATION---|
|----------------*/

#burger {
	display: none;
}

input + label {
	width: 30px;
	height: 20px;
	top: 30px;
	right: 30px;
	position: fixed;

	z-index: 5;
}

input + label span {
	width: 100%;
	height: 3px;
	top: 50%;
	left: 0;
	margin: -1px 0 0 0;
	position: absolute;
	display: block;
	border: 1px solid #000000;
	background: white;
	transition: 0.5s;
	cursor: url(../img/pointer.png), auto;
}

input + label span:first-child {
	top: 1px;
}

input + label span:last-child {
	top: 19px;
}

label:hover {
	cursor: url(../img/pointer.png), auto;
}

input:checked + label span {
	top: 50%;
	background: #000000;
	opacity: 0;
}

input:checked + label span:first-child {
	opacity: 1;
	transform: rotate(405deg);
}

input:checked + label span:last-child {
	opacity: 1;
	transform: rotate(-405deg);
}

input ~ nav {
	width: 100%;
	height: 0px;
	top: 0;
	left: 0;
	position: fixed;
	background: #ffc0cb;
	z-index: 3;
	transition: 0.5s;
	transition-delay: 0.5s;
	overflow: hidden;
}

input:checked ~ nav {
	height: 100%;
	transition-delay: 0s;
}

input:checked ~ nav > ul > li {
	opacity: 1;
	transition-delay: 0.5s;
}

nav a {
	text-decoration: none;
}

@media screen and (orientation: landscape) {
	nav .instagram {
		height: 7vh;
		margin: 2vh 0 0 0;
	}

	nav .facebook {
		height: 7vh;
		margin: 2vh 2.5vw 0 2.5vw;
	}

	nav .email {
		height: 7vh;
		margin: 2vh 0 0 0;
	}

	#nav-item {
		margin: 3vh 0 3vh 0;
		font-family: "Edo", Century Gothic, Sans Serif, Arial;
		font-size: 7vh;
		text-shadow: 0.3vh 0.3vh #ffffff;
		text-decoration: none;
	}
}

@media screen and (orientation: portrait) {
	nav .instagram {
		height: 7vh;
	}

	nav .facebook {
		height: 7vh;
		margin: 2vh 7vw 0 7vw;
	}

	nav .email {
		height: 7vh;
	}

	#nav-item {
		margin: 4vh 0 4vh 0;
		font-family: "Edo", Century Gothic, Sans Serif, Arial;
		font-size: 10vw;
		text-shadow: 0.3vh 0.3vh #ffffff;
		text-decoration: none;
	}
}

#nav-spacer {
	height: 11vh;
}

.nav1 {
	color: #ef4f2b;
}

.nav2 {
	color: #fd8524;
}

.nav3 {
	color: #ffc519;
}

.nav4 {
	color: #00c870;
}

.nav5 {
	color: #00c9db;
}

.nav6 {
	color: #0096db;
}




/*----------------|
|-----COOKIES-----|
|----------------*/

button#gdpr-cookie-advanced {
	display: none;
}

@media screen and (orientation: landscape) {
	#gdpr-cookie-message {
			width: 30vw;
			padding: 2vw;
			bottom: 2vw;
			right: 2vw;
			position: fixed;
			background: #ffa55c;
			border-radius: 5px;
			overflow: hidden;

			z-index: 99;
	}
	
	#gdpr-cookie-message button,
	button#ihavecookiesBtn {
		margin: 0 2vw 0 0;
		padding: 10px 3vw 10px 3vw;
		font-family: "Cabin", Century Gothic, Sans Serif, Arial;
		font-size: 18pt;
		font-weight: bold;
		color: #ffffff;
		background-color: #fd4dff;
		border: 0;
		cursor: pointer;
		transition: background 0.3s;
		cursor: url(../img/pointer.png), auto;
	}
	
	#gdpr-cookie-message button:hover {
		background-color: #974e9e;
	}
}

@media screen and (orientation: portrait) {
	#gdpr-cookie-message {
			width: 92%;
			padding: 2% 4%;
			bottom: 0;
			right: 0;
			position: fixed;
			background: #ffa55c;
			border-radius: 5px;
			overflow: hidden;

			z-index: 99;
	}
	
	#gdpr-cookie-message button,
	button#ihavecookiesBtn {
		margin: 0 2vw 0 0;
		padding: 10px 3vw 10px 3vw;
		font-family: "Cabin", Century Gothic, Sans Serif, Arial;
		font-size: 18pt;
		font-weight: bold;
		color: #ffffff;
		background-color: #fd4dff;
		border: 0;
		cursor: pointer;
		transition: background 0.3s;
		cursor: url(../img/pointer.png), auto;
	}
	
	#gdpr-cookie-message button:hover {
		background-color: #974e9e;
	}
}




/*----------------|
|------ SHOP -----|
|----------------*/

#yellow-box {
	margin: 0 0 10vh 0;
	padding: 7vh 0;
	background-color: #ffc519;
	border-radius: 10px;
}

#yellow-box-inner {
	padding: 0 10vw;
}

@media screen and (orientation: landscape) {
	#shopbox-outer {
		width: 70vw;
		margin: 0 auto;
		display: flex;
		align-items: top; /* Vertical alignment */
	}
	
	#shopbox-inner-left {
		width: 30%;		
		margin: 0 2.5%;
        	text-align: left;
	}
	
	#shopbox-inner-right {
		width: 55%;
		margin: 0 5%;
        	text-align: left;
	}
	
	#header-hunny {
		margin: 10vh 0 15vh 0;
		font-family: "Edo", century Gothic, Sans Serif, Arial;
		font-size: 100pt;
		color: #ef4f2b;
		text-shadow: 5px 5px #ffffff;
			
		-webkit-animation: header-hunny 4.5s infinite;
			animation: header-hunny 4.5s infinite;
	}
	
	#shop-can-landscape {
		width: 25vw;
		height: 25vw;
		display: inline-block;
		background-image: url("../img/shop-can.png");
		background-size: 25vw 25vw;
		background-repeat: no-repeat;
	}

	#shop-card-landscape {
		width: 24vw;
		height: 18vw;
		display: inline-block;
		background-image: url("../img/gift-card.png");
		background-size: 24vw 18vw;
		background-repeat: no-repeat;
	}

	#shop-mouth-landscape {
		width: 24vw;
		height: 24vw;
		display: inline-block;
		background-image: url("../img/shop-loyal-hunny.png");
		background-size: 24vw 24vw;
		background-repeat: no-repeat;
	}
	
	#shop-can-portrait, #shop-card-portrait, #shop-mouth-portrait {
		display: none;
	}
}

@media screen and (orientation: portrait) {
	.case-box {
		padding: 7.5% 2.5% 0 2.5%;
		background-color: #fd8524;
		border-radius: 5px;
	}	
	#header-hunny {
		margin: 10vh 0 15vh 0;
		font-family: "Edo", century Gothic, Sans Serif, Arial;
		font-size: 22vw;
		color: #ef4f2b;
		text-shadow: 5px 5px #ffffff;
			
		-webkit-animation: header-hunny 4.5s infinite;
			animation: header-hunny 4.5s infinite;
	}
	
	#shop-can-landscape, #shop-card-landscape, #shop-mouth-landscape {
		display: none;
	}
	
	#shop-can-portrait {
		width: 70vw;
		height: 70vw;
		margin: 5% 0 0 0;
		display: inline-block;
		background-image: url("../img/shop-can.png");
		background-size: 70vw 70vw;
		background-repeat: no-repeat;
	}
	
	#shop-card-portrait {
		width: 70vw;
		height: 52.5vw;
		margin: 5% 0 0 0;
		display: inline-block;
		background-image: url("../img/gift-card.png");
		background-size: 70vw 52.5vw;
		background-repeat: no-repeat;
	}

	#shop-mouth-portrait {
		width: 70vw;
		height: 70vw;
		margin: 5% 0 0 0;
		display: inline-block;
		background-image: url("../img/shop-loyal-hunny.png");
		background-size: 70vw 70vw;
		background-repeat: no-repeat;
	}

	#shopbox-inner-right {
		width: 95%;
		margin: 0 2.5%;
	}
}





/*----------------|
|---LOYAL HUNNY---|
|----------------*/

#account-banner {
	padding: 2vh 0;
	background-color: #fd4dff;
}
	
#account-banner a {
	color: #ffffff;
}
	
#account-banner a:hover {
	text-decoration: underline;
	text-decoration-color: #000000;
}

#orange-box {
	margin: 0 0 10vh 0;
	padding: 7vh 0;
	background-color: #fd8524;
	border-radius: 5px;
}

#orange-box-inner {
	padding: 0 10vw;
}

.tilt2 {
	-webkit-animation: tilt2 3s infinite;
		animation: tilt2 3s infinite;
}

@media screen and (orientation: landscape) {
	#flexbox-outer {
		width: 70vw;
		margin: 0 auto;
		display: flex;
		align-items: center; /* Vertical alignment */
	}
	
	#flexbox-inner {
		width: 50%;
		margin: 0 auto;
	}
	
	#flexbox-inner-left {
		width: 45%;		
		margin: 0 2.5%;
        text-align: left;
	}
	
	#flexbox-inner-right {
		width: 45%;
		margin: 0 2.5%;
        text-align: right;
	}
	
	#header-hunny {
		margin: 10vh 0 15vh 0;
		font-family: "Edo", century Gothic, Sans Serif, Arial;
		font-size: 100pt;
		color: #ef4f2b;
		text-shadow: 5px 5px #ffffff;
			
		-webkit-animation: header-hunny 4.5s infinite;
			animation: header-hunny 4.5s infinite;
	}
	
	#loyal-hunny-image-landscape {
		width: 30vw;
		height: 30vw;
		display: inline-block;
		background-image: url("../img/shop-can.png");
		background-size: 30vw 30vw;
		background-repeat: no-repeat;

		-webkit-animation: loyal-hunny 4s infinite;
			animation: loyal-hunny 4s infinite;
	}
	
	#loyal-hunny-image-portrait {
		display: none;
	}
}

@media screen and (orientation: portrait) {	
	#header-hunny {
		margin: 10vh 0 15vh 0;
		font-family: "Edo", century Gothic, Sans Serif, Arial;
		font-size: 22vw;
		color: #ef4f2b;
		text-shadow: 5px 5px #ffffff;
			
		-webkit-animation: header-hunny 4.5s infinite;
			animation: header-hunny 4.5s infinite;
	}
	
	#loyal-hunny-image-landscape {
		display: none;
	}
	
	#loyal-hunny-image-portrait {
		width: 70vw;
		height: 70vw;
		display: inline-block;
		background-image: url("../img/shop-can.png");
		background-size: 70vw 70vw;
		background-repeat: no-repeat;

		-webkit-animation: loyal-hunny 4s infinite;
			animation: loyal-hunny 4s infinite;
	}
}




/*----------------|
|---AGE  VERIFY---|
|----------------*/


/* Source: https://codepen.io/designsmoke/pen/aVmxab */
#age-verification {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(40, 40, 40, 1.0);
		-webkit-transition: 500ms;
	transition: 500ms;
	z-index: 90000001;
	display: none;
}

.age-verification-main {
	background-color: #ffa55c;
	border-radius: 5px;
	overflow: hidden;
	text-align: center;
	padding: 25px;
  
	position: relative;
	top: 10px;
	width: 500px;
	max-width: 80%;
	margin: 0 auto;
		-webkit-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
		box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
}

@media only screen and (min-height: 400px) {
	.age-verification-main {
		top: 40%;
  	}
}

.age-title, .age-main-text {
	display: block;
	margin-bottom: 1em;
}
.age-title {
	font-size: 24pt;
	margin-bottom: 0.5em;
}

.age-button {
	background-color: #fd4dff;
	border: none;

	font-family: "Cabin", Century Gothic, Sans Serif, Arial;
	font-size: 18pt;
	font-weight: bold;
	color: #ffffff;
	background-color: #fd4dff;
	border: 0;
	cursor: pointer;
  
	display: inline-block;
	width: 150px;
	padding: 10px;
	margin: 5px 10px;
	cursor: url(../img/pointer.png), auto;
}

.age-button:hover {
	background-color: #974e9e;
}





/*----------------|
|---TRANSITIONS---|
|----------------*/


@keyframes arrow-down {
	 50% { transform: translate3d(0, 25px, 0); }
}

@-webkit-keyframes arrow-down {
	 50% { -webkit-transform: translate3d(0, 25px, 0); }
}

@keyframes arrow-up {
	 50% { transform: translate3d(0, -25px, 0); }
}

@-webkit-keyframes arrow-up {
	 50% { -webkit-transform: translate3d(0, -25px, 0); }
}

@keyframes bop {
	  0% { transform: scale(0.9); }
	 50% { transform: scale(1) rotateZ(-2deg); }
	100% { transform: scale(0.9); }
}

@-webkit-keyframes bop {
	  0% { -webkit-transform: scale(0.9); }
	 50% { -webkit-transform: scale(1) rotateZ(-2deg); }
	100% { -webkit-transform: scale(0.9); }
}

@keyframes bop2 {
	  0% { transform: scale(0.7); }
	 50% { transform: scale(1) rotateZ(-5deg); }
	100% { transform: scale(0.7); }
}

@-webkit-keyframes bop2 {
	  0% { -webkit-transform: scale(0.7); }
	 50% { -webkit-transform: scale(1) rotateZ(-5deg); }
	100% { -webkit-transform: scale(0.7); }
}

@keyframes bop-mobile {
	  0% { transform: scale(0.8); }
	 50% { transform: scale(1) rotateZ(-0.5deg); }
	100% { transform: scale(0.8); }
}

@-webkit-keyframes bop-mobile {
	  0% { -webkit-transform: scale(0.8); }
	 50% { -webkit-transform: scale(1) rotateZ(-0.5deg); }
	100% { -webkit-transform: scale(0.8); }
}

@keyframes bounce-in {
	0%, 20%, 40%, 60%, 80%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		transform: scale3d(.97, .97, .97);
	}

	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes bounce-in {
	0%, 20%, 40%, 60%, 80%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
	}
}

@keyframes bounce-in-2 {
	0%, 20%, 40%, 60%, 80%, 100% {
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}

	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@-webkit-keyframes bounce-in-2 {
	0%, 20%, 40%, 60%, 80%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
	}
}

@keyframes bounce-in-up {
	from, 60%, 75%, 90%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 3000px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, 10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -5px, 0);
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes bounce-in-up {
	from, 60%, 75%, 90%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 3000px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, 10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -5px, 0);
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@keyframes crossfade {
	0%   { opacity: 1; }
	44%  { opacity: 1; }
	50%  { opacity: 0; }
	94%  { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes crossfade {
	0%   { opacity: 1; }
	44%  { opacity: 1; }
	50%  { opacity: 0; }
	94%  { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadein {
	0%   { opacity:0 }
	80%  { opacity:0 }
	100% { opacity:1 }
}

@-webkit-keyframes fadein {
	0%   { opacity:0 }
	80%  { opacity:0 }
	100% { opacity:1 }
}

@keyframes flag {
	0% {
		transform: rotateZ(35deg);
		transform-origin: 50% 90%;
		background-image: url("../img/flag1.png");
	}

	10% {
		background-image: url("../img/flag1.png");
	}

	14% {
		background-image: url("../img/flag2.png");
	}

	50% {
		transform: rotateZ(-40deg);
		transform-origin: 50% 90%;
	}

	60% {
		background-image: url("../img/flag2.png");
	}

	64% {
		background-image: url("../img/flag1.png");
	}

	100% {
		transform: rotateZ(35deg);
		transform-origin: 50% 90%;
		background-image: url("../img/flag1.png");
	}
}

@-webkit-keyframes flag {
	0% {
		-webkit-transform: rotateZ(35deg);
		-webkit-transform-origin: 50% 90%;
		-webkit-background-image: url("../img/flag1.png");
	}

	10% {
		-webkit-background-image: url("../img/flag1.png");
	}

	14% {
		-webkit-background-image: url("../img/flag2.png");
	}

	50% {
		-webkit-transform: rotateZ(-35deg);
		-webkit-transform-origin: 50% 90%;
	}

	60% {
		-webkit-background-image: url("../img/flag2.png");
	}

	64% {
		-webkit-background-image: url("../img/flag1.png");
	}

	100% {
		-webkit-transform: rotateZ(35deg);
		-webkit-transform-origin: 50% 90%;
		-webkit-background-image: url("../img/flag1.png");
	}
}

@keyframes free-delivery {
	0%, 32% {
		background-image: url("../img/free-delivery1.png");
	}

	33%, 65% {
		background-image: url("../img/free-delivery2.png");
	}

	66%, 100% {
		background-image: url("../img/free-delivery3.png");
	}
}

@-webkit-keyframes free-delivery {
	0%, 32% {
		background-image: url("../img/free-delivery1.png");
	}

	33%, 65% {
		background-image: url("../img/free-delivery2.png");
	}

	66%, 100% {
		background-image: url("../img/free-delivery3.png");
	}
}

@keyframes free-delivery-mobile {
	0%, 24% {
		background-image: url("../img/free-delivery1.png");
		transform: rotateZ(7deg);
	}

	25%, 49% {
		background-image: url("../img/free-delivery2.png");
		transform: rotateZ(0deg);
	}

	50%, 74% {
		background-image: url("../img/free-delivery3.png");
		transform: rotateZ(-7deg);
	}

	75%, 100% {
		background-image: url("../img/free-delivery2.png");
		transform: rotateZ(0deg);
	}
}

@-webkit-keyframes free-delivery-mobile {
	0%, 24% {
		background-image: url("../img/free-delivery1.png");
		-webkit-transform: rotateZ(7deg);
	}

	25%, 49% {
		background-image: url("../img/free-delivery2.png");
		-webkit-transform: rotateZ(0deg);
	}

	50%, 74% {
		background-image: url("../img/free-delivery3.png");
		-webkit-transform: rotateZ(-7deg);
	}

	75%, 100% {
		background-image: url("../img/free-delivery2.png");
		-webkit-transform: rotateZ(0deg);
	}
}

@keyframes header-hunny {
	0% 		{ color: #ef4f2b;
			  transform: rotate(2deg); }
	24.9%	{ color: #ef4f2b; }
	25%		{ color: #40b86e; }
	49.9%	{ color: #40b86e; }
	50%		{ color: #0096db;
			  transform: rotate(-5deg) scale(0.85); }
	74.9%	{ color: #0096db; }
	75%		{ color: #fe4dff; }
	100%	{ color: #fe4dff;
			  transform: rotate(2deg); }
}

@-webkit-keyframes header-hunny {
	0% 		{ color: #ef4f2b;
			  -webkit-transform: rotate(2deg); }
	24.9%	{ color: #ef4f2b; }
	25%		{ color: #40b86e; }
	49.9%	{ color: #40b86e; }
	50%		{ color: #0096db;
			  -webkit-transform: rotate(-5deg) scale(0.85); }
	74.9%	{ color: #0096db; }
	75%		{ color: #fe4dff; }
	100%	{ color: #fe4dff;
			  -webkit-transform: rotate(2deg); }
	}
}

@keyframes jello {
	  0% { transform: none }
	 12% { transform: skewX( -6deg    ) skewY( -6deg    ); }
	 24% { transform: skewX(  3deg    ) skewY(  3deg    ); }
	 36% { transform: skewX( -1.5deg  ) skewY( -1.5deg  ); }
	 48% { transform: skewX(  0.75deg ) skewY(  0.75deg ); }
	 60% { transform: skewX( -0.35deg ) skewY( -0.35deg ); }
	 72% { transform: skewX(  0.2deg  ) skewY(  0.2deg  ); }
	 84% { transform: skewX( -0.1deg  ) skewY( -0.1deg  ); }
	100% { transform: none }
}

@-webkit-keyframes jello {
	  0% { -webkit-transform: none }
	 12% { -webkit-transform: skewX( -6deg   ) skewY( -6deg    ); }
	 24% { -webkit-transform: skewX(  3deg   ) skewY( 3deg     ); }
	 36% { -webkit-transform: skewX( -1.5deg ) skewY( -1.5deg  ); }
	 48% { -webkit-transform: skewX(  0.75deg) skewY( 0.75deg  ); }
	 60% { -webkit-transform: skewX( -0.35deg) skewY( -0.35deg ); }
	 72% { -webkit-transform: skewX(  0.2deg ) skewY( 0.2deg   ); }
	 84% { -webkit-transform: skewX( -0.1deg ) skewY( -0.1deg  ); }
	100% { -webkit-transform: none }
}

@keyframes jello2 {
	  0% { transform: none }
	  5% { transform: skewX( -6deg    ) skewY( -6deg    ); }
	 10% { transform: skewX(  3deg    ) skewY(  3deg    ); }
	 15% { transform: skewX( -1.5deg  ) skewY( -1.5deg  ); }
	 20% { transform: skewX(  0.75deg ) skewY(  0.75deg ); }
	 25% { transform: skewX( -0.35deg ) skewY( -0.35deg ); }
	 30% { transform: skewX(  0.2deg  ) skewY(  0.2deg  ); }
	 35% { transform: skewX( -0.1deg  ) skewY( -0.1deg  ); }
	100% { transform: none }
}

@-webkit-keyframes jello2 {
	  0% { -webkit-transform: none }
	  5% { -webkit-transform: skewX( -6deg   ) skewY( -6deg    ); }
	 10% { -webkit-transform: skewX(  3deg   ) skewY( 3deg     ); }
	 15% { -webkit-transform: skewX( -1.5deg ) skewY( -1.5deg  ); }
	 20% { -webkit-transform: skewX(  0.75deg) skewY( 0.75deg  ); }
	 25% { -webkit-transform: skewX( -0.35deg) skewY( -0.35deg ); }
	 30% { -webkit-transform: skewX(  0.2deg ) skewY( 0.2deg   ); }
	 35% { -webkit-transform: skewX( -0.1deg ) skewY( -0.1deg  ); }
	100% { -webkit-transform: none }
}

@keyframes loyal-hunny {
	0%    { background-image: url("../img/shop-can.png"); }
	49.9% { background-image: url("../img/shop-can.png"); }
	50%   { background-image: url("../img/mouth.png");    }
	100%  { background-image: url("../img/mouth.png");    }
}

@-webkit-keyframes loyal-hunny {
	0%    { background-image: url("../img/shop-can.png"); }
	49.9% { background-image: url("../img/shop-can.png"); }
	50%   { background-image: url("../img/mouth.png");    }
	100%  { background-image: url("../img/mouth.png");    }
}

@keyframes overlay1 {
	  0% { transform: translateX(-33.333%); }
	100% { transform: translateX(0%); }
}

@-webkit-keyframes overlay1 {
	  0% { -webkit-transform: translateX(-33.333%); }
	100% { -webkit-transform: translateX(0%); }
}

@keyframes overlay2 {
	100% { transform: translateX(-66.6666%); }
}

@-webkit-keyframes overlay2 {
	100% { -webkit-transform: translateX(-66.6666%); }
}

@keyframes mouth {
	0% {
		background-image: url("../img/mouth1.png");
		transform: rotateZ(0deg);
	}

	32% {
		background-image: url("../img/mouth1.png");
		transform: rotateZ(0deg);
	}

	33% {
		background-image: url("../img/mouth2.png");
		transform: rotateZ(5deg);
	}

	66% {
		background-image: url("../img/mouth2.png");
		transform: rotateZ(5deg);
	}

	67% {
		background-image: url("../img/mouth3.png");
		transform: rotateZ(10deg);
	}

	100% {
		background-image: url("../img/mouth3.png");
		transform: rotateZ(10deg);
	}
}

@-webkit-keyframes mouth {
	0% {
		background-image: url("../img/mouth1.png");
		-webkit-transform: rotateZ(0deg);
	}

	32% {
		background-image: url("../img/mouth1.png");
		-webkit-transform: rotateZ(0deg);
	}

	33% {
		background-image: url("../img/mouth2.png");
		-webkit-transform: rotateZ(5deg);
	}

	66% {
		background-image: url("../img/mouth2.png");
		-webkit-transform: rotateZ(5deg);
	}

	67% {
		background-image: url("../img/mouth3.png");
		-webkit-transform: rotateZ(10deg);
	}

	100% {
		background-image: url("../img/mouth3.png");
		-webkit-transform: rotateZ(10deg);
	}
}

@keyframes party {
	  0% { transform: rotate( 0   ) translate3d( 0, 30px, 0) }
	 25% { transform: rotate(-1deg) translate3d( 0, 10px, 0) }
	 50% { transform: rotate( 0   ) translate3d( 0, 30px, 0) }
	 75% { transform: rotate( 1deg) translate3d( 0, 10px, 0) }
	100% { transform: rotate( 0   ) translate3d( 0, 30px, 0) }
}

@-webkit-keyframes party {
	  0% { -webkit-transform: rotate( 0   ) translate3d( 0, 30px, 0) }
	 25% { -webkit-transform: rotate(-1deg) translate3d( 0, 10px, 0) }
	 50% { -webkit-transform: rotate( 0   ) translate3d( 0, 30px, 0) }
	 75% { -webkit-transform: rotate( 1deg) translate3d( 0, 10px, 0) }
	100% { -webkit-transform: rotate( 0   ) translate3d( 0, 30px, 0) }
}

@keyframes party-mobile {
	  0% { transform: rotate( 0   ) translate3d( 0, 20px, 0) }
	 25% { transform: rotate(-2deg) translate3d( 0, 10px, 0) }
	 50% { transform: rotate( 0   ) translate3d( 0, 20px, 0) }
	 75% { transform: rotate( 2deg) translate3d( 0, 10px, 0) }
	100% { transform: rotate( 0   ) translate3d( 0, 20px, 0) }
}

@-webkit-keyframes party-mobile {
	  0% { -webkit-transform: rotate( 0   ) translate3d( 0, 20px, 0) }
	 25% { -webkit-transform: rotate(-2deg) translate3d( 0, 10px, 0) }
	 50% { -webkit-transform: rotate( 0   ) translate3d( 0, 20px, 0) }
	 75% { -webkit-transform: rotate( 2deg) translate3d( 0, 10px, 0) }
	100% { -webkit-transform: rotate( 0   ) translate3d( 0, 20px, 0) }
}

@keyframes pulse {
	  0% { transform: scale(0.85); }
	 70% { transform: scale(1); }
	100% { transform: scale(0.85); }
}

@-webkit-keyframes pulse {
	  0% { -webkit-transform: scale(0.85); }
	 70% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(0.85); }
}

@keyframes pulse2 {
	 90% { transform: scale(1); }
	 95% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@-webkit-keyframes pulse2 {
	 90% { -webkit-transform: scale(1); }
	 95% { -webkit-transform: scale(1.05); }
	100% { -webkit-transform: scale(1); }
}

@keyframes pulse-icon {
	  0% { transform: scale(0.85); }
	 70% { transform: scale(1) rotate( 2deg); }
	100% { transform: scale(0.85); }
}

@-webkit-keyframes pulse-icon {
	  0% { -webkit-transform: scale(0.85); }
	 70% { -webkit-transform: scale(1) rotate( 2deg); }
	100% { -webkit-transform: scale(0.85); }
}

@keyframes rainbow {
	0%   { color: #f05029; }
	17%  { color: #f6852b; }
	34%  { color: #ffc61b; }
	51%  { color: #40b76d; }
	68%  { color: #1e94d2; }
	85%  { color: #974e9e; }
	100% { color: #f05029; }
}

@-webkit-keyframes rainbow {
	0%   { color: #f05029; }
	17%  { color: #f6852b; }
	34%  { color: #ffc61b; }
	51%  { color: #40b76d; }
	68%  { color: #1e94d2; }
	85%  { color: #974e9e; }
	100% { color: #f05029; }
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}

@-webkit-keyframes rotate {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); }
}

@keyframes rotate2 {
	from {
		transform: rotate(0deg);
		transform-origin: 50% 43%;
	}

	to {
		transform: rotate(-359deg);
		transform-origin: 50% 43%;
	}
}

@-webkit-keyframes rotate2 {
	from {
		transform: rotate(0deg);
		transform-origin: 50% 43%;
	}

	to {
		transform: rotate(-359deg);
		transform-origin: 50% 43%;
	}
}

@keyframes shake {
	0% { transform: translate(0, 0) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-2px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-2px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}

@-webkit-keyframes shake {
	0% { -webkit-transform: translate(0, 0) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-2px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-2px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(0, 0) rotate(0deg); }
}

@keyframes tilt {
	0%   { transform: rotate(0deg);   }
	25%  { transform: rotate(7.5deg); }
	50%  { transform: rotate(15deg);  }
	75%  { transform: rotate(7.5deg); }
	100% { transform: rotate(0deg);	  }
}

@-webkit-keyframes tilt {
	0%   { -webkit-transform: rotate(0deg);   }
	25%  { -webkit-transform: rotate(7.5deg); }
	50%  { -webkit-transform: rotate(15deg);  }
	75%  { -webkit-transform: rotate(7.5deg); }
	100% { -webkit-transform: rotate(0deg);	  }
}

@keyframes tilt2 {
	0%   { transform: rotate(0deg);   }
	25%  { transform: rotate(7.5deg); }
	50%  { transform: rotate(12deg);  }
	75%  { transform: rotate(7.5deg); }
	100% { transform: rotate(0deg);	  }
}




/*-----------------
|-----Cookies-----|
-----------------*/
/* 
  Silktide Consent Manager - https://silktide.com/consent-manager/  

  Styles are at risked of being overridden by styles coming from the site the consent manager is used on.
  To help prevent this, global wrapper elements are prefixed with "#silktide-"
*/

/* --------------------------------
  Global Styles - These elements exist in the main DOM and styling is limited to positioning and animation
-------------------------------- */
/* Wrapper (Global) */
#silktide-wrapper {
              --focus: 0 0 0 2px #ffffff, 0 0 0 4px #000000, 0 0 0 6px #ffffff;
              --boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
              --fontFamily: Helvetica Neue, Segoe UI, Arial, sans-serif;
              --primaryColor: #fd4dff;
              --backgroundColor: #FD8524;
              --textColor: #ffffff;
              --backdropBackgroundColor: #ffffff33;
              --backdropBackgroundBlur: 0px;
              --cookieIconColor: #fd4dff;
              --cookieIconBackgroundColor: #fd8524;
              position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  border: 0px;
  display: flex;
  justify-content: center;
  align-items: center
            }

/* Backdrop (Global) */
#silktide-backdrop-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  border: 0px;
  display: none;
}

/* --------------------------------
  Links
-------------------------------- */
#silktide-wrapper a {
  all: unset;
  display: inline-block;
  color: var(--primaryColor);
  text-decoration: underline;
}

#silktide-wrapper a:hover {
  cursor: pointer;
  color: var(--textColor);
}

/* --------------------------------
  Focus Styles
-------------------------------- */
#silktide-wrapper a:focus,
#silktide-wrapper #silktide-banner button:focus,
#silktide-wrapper #silktide-modal button:focus,
#silktide-wrapper #silktide-cookie-icon:focus {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 5px;
}

#silktide-wrapper #silktide-cookie-icon:focus {
  border-radius: 50%;
}

/* --------------------------------
  General Styles
-------------------------------- */

#silktide-wrapper .st-button {
  color: var(--backgroundColor);
  background-color: var(--primaryColor);
  border: 2px solid var(--primaryColor);
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  border-radius: 5px;
}

#silktide-wrapper .st-button--primary {
}

#silktide-wrapper .st-button--primary:hover {
  background-color: var(--backgroundColor);
  color: var(--primaryColor);
}

#silktide-wrapper .st-button--secondary {
  background-color: var(--backgroundColor);
  color: var(--primaryColor);
}

#silktide-wrapper .st-button--secondary:hover {
  background-color: var(--primaryColor);
  color: var(--backgroundColor);
}

/* --------------------------------
  Banner
-------------------------------- */
#silktide-banner {
  font-family: var(--fontFamily);
  color: var(--textColor);
  background-color: var(--backgroundColor);
  box-sizing: border-box;
  padding: 32px;
  border-radius: 5px;
  pointer-events: auto;
  border: 0px;
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 600px;
  max-width: calc(100% - 32px);
  transform: translate(0, -20px);
  opacity: 0;
  animation: silktide-slideInDown 350ms ease-out forwards;
  animation-delay: 0.3s;
  box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
}

#silktide-banner:focus {
  border-radius: 50%;
}

#silktide-banner.center {
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  position: fixed;
  transform: translate(-50%, calc(-50% - 20px));
  animation: silktide-slideInDown-center 350ms ease-out forwards;
}

#silktide-banner.bottomLeft {
  bottom: 16px;
  left: 16px;
  position: fixed;
}

#silktide-banner.bottomCenter {
  bottom: 16px;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -20px);
  animation: silktide-slideInDown-bottomCenter 350ms ease-out forwards;
}

#silktide-banner .preferences {
  display: flex;
  gap: 5px;
  border: none;
  padding: 0px;
  background-color: transparent;
  color: var(--primaryColor);
  cursor: pointer;
  font-size: 16px;
}

#silktide-banner .preferences span {
  display: block;
  white-space: nowrap;
  text-decoration: underline;
}

#silktide-banner .preferences span:hover {
  color: var(--textColor);
}

#silktide-banner .preferences:after {
  display: block;
  content: '>';
  text-decoration: none;
}

#silktide-banner p {
  font-size: 16px;
  line-height: 24px;
  margin: 0px 0px 15px;
}

#silktide-banner a {
  display: inline-block;
  color: var(--primaryColor);
  text-decoration: underline;
  background-color: var(--backgroundColor);
}

#silktide-banner a:hover {
  color: var(--textColor);
}

#silktide-banner a.silktide-logo {
  display: block;
  fill: var(--primaryColor); /* passed down to svg > path */
  margin-left: auto;
  width: 24px;
  height: 24px;
}


#silktide-banner .actions {
  display: flex;
  gap: 16px;
  flex-direction: column;
  margin-top: 24px;
}

@media (min-width: 600px) {
  #silktide-banner .actions {
    flex-direction: row;
    align-items: center;
  }
}

#silktide-banner .actions-row {
  display: flex;
  gap: 16px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

/* --------------------------------
  Modal
-------------------------------- */
#silktide-modal {
  display: none;
  pointer-events: auto;
  width: 800px;
  max-width: 100%;
  max-height: 100%;
  border: 0px;
  transform: translate(0px, -20px);
  opacity: 0;
  animation: silktide-slideInUp-center 350ms ease-out forwards;
  box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
  font-family: var(--fontFamily);
  color: var(--textColor);
  flex-direction: column;
  padding: 30px;
  background-color: var(--backgroundColor);
  border-radius: 5px;
  box-sizing: border-box;
}

/* --------------------------------
  Modal - Header
-------------------------------- */
#silktide-modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

#silktide-modal h1 {
  font-family: var(--fontFamily);
  color: var(--textColor);
  font-size: 24px;
  font-weight: 500;
  margin: 0px;
}

#silktide-modal .modal-close {
  display: inline-flex;
  border: none;
  padding: 10px;
  border: 0px;
  cursor: pointer;
  background: var(--backgroundColor);
  color: var(--primaryColor);
}

#silktide-modal .modal-close svg {
  fill: var(--primaryColor);
}

/* --------------------------------
  Modal - Content
-------------------------------- */

#silktide-modal section {
  flex: 1;
  overflow-y: auto;
  margin-top: 32px;
  padding-right: 7px; /* Prevents scrollbar from appearing over the switches */
}

#silktide-modal section::-webkit-scrollbar {
  display: block; /* Force scrollbars to show */
  width: 5px; /* Width of the scrollbar */
}

#silktide-modal section::-webkit-scrollbar-thumb {
  background-color: var(--textColor); /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
}

#silktide-modal p {
  font-size: 16px;
  line-height: 24px;
  color: var(--textColor);
  margin: 0px 0px 15px;
}

#silktide-modal p:last-of-type {
  margin: 0px;
}

#silktide-modal fieldset {
  padding: 0px;
  border: none;
  margin: 0px 0px 32px;
}

#silktide-modal fieldset:last-of-type {
  margin: 0px;
}

#silktide-modal legend {
  padding: 0px;
  margin: 0px 0px 10px;
  font-weight: 700;
  color: var(--textColor);
  font-size: 16px;
}

#silktide-modal .cookie-type-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;  
}

/* --------------------------------
  Modal - Switches
-------------------------------- */
#silktide-modal .switch {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  height: 34px;
  width: 74px;
  cursor: pointer;
}

#silktide-modal .switch:focus-within {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 25px;
}

#silktide-modal .switch input {
  opacity: 0;
  position: absolute;
}

/* Unchecked Switch Styles */
#silktide-modal .switch__pill {
  position: relative;
  display: block;
  height: 34px;
  width: 74px;
  background: var(--textColor);
  border-radius: 25px;
}

#silktide-modal .switch__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  height: 30px;
  width: 30px;
  background: var(--backgroundColor);
  border-radius: 50%;
  transition: left 150ms ease-out;
}

#silktide-modal .switch__off,
#silktide-modal .switch__on {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  color: var(--backgroundColor);
  position: absolute;
  top: 7px;
  right: 8px;
  transition: right 150ms ease-out, opacity 150ms ease-out;
}

#silktide-modal .switch__off {
  opacity: 1;
}

#silktide-modal .switch__on {
  opacity: 0;
}

/* Checked Switch Styles */
#silktide-modal .switch input:checked + .switch__pill {
  background: var(--primaryColor);
}

#silktide-modal .switch input:checked ~ .switch__dot {
  left: calc(100% - 32px);
}

#silktide-modal .switch input:checked ~ .switch__off {
  right: calc(100% - 32px);
  opacity: 0;
}

#silktide-modal .switch input:checked ~ .switch__on {
  right: calc(100% - 34px);
  opacity: 1;
}

/* Disabled Switch Styles */
#silktide-modal .switch input:disabled + .switch__pill {
  opacity: 0.65;
  cursor: not-allowed;
}

/* --------------------------------
  Modal - Footer
-------------------------------- */
#silktide-modal footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 600px) {
  #silktide-modal footer {
    flex-direction: row;
    align-items: center;
  }
}

#silktide-modal footer a {
  margin-left: auto;
}

/* Cookie Icon */
#silktide-cookie-icon {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 10px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 0px;
  border: none;
  background-color: var(--cookieIconColor);
  cursor: pointer;
  box-shadow: 0px 0px 6px 0px #0000001a;
  pointer-events: auto;
  animation: silktide-fadeIn 0.3s ease-in-out forwards;
}

#silktide-cookie-icon.bottomRight {
  left: auto;
  right: 10px;
}

#silktide-cookie-icon svg {
  fill: var(--cookieIconBackgroundColor);
}

/* --------------------------------
  Backdrop
-------------------------------- */
#silktide-backdrop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backdropBackgroundColor);
  backdrop-filter: blur(var(--backdropBackgroundBlur));
  pointer-events: all;
}

/* --------------------------------
  Animations
-------------------------------- */
@keyframes silktide-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes silktide-slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes silktide-slideInDown-center {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 20px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes silktide-slideInDown-bottomCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes silktide-slideInUp-center {
  from {
    opacity: 0;
    transform: translate(0px, 20px);
  }
  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}