/* @group Utilities */

	/* @group Links */


		.logo,
		.icon {
			
			position: relative;
		}


		div > a {
		
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
	
			-webkit-box-align: center;
			   -ms-flex-align: center;
			      align-items: center;
			
			position: absolute; 
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}


	/* @end */

	
	/* @group z-index */
	
		header,
		footer {
			
			z-index: 1000;
		}
	
	/* @end */
	
	/* @group rotatebanner */
	
		.rotatebanner {
			
			display: none;
			justify-content: center;
			align-items: center;
			
			position: fixed;
			width: 100vw;
			height: 100%;
			
			background: white;
			z-index: 2000;
		}


		@media screen and (max-width: 768px) and (orientation: landscape) {
		
			.rotatebanner {
				
				display: flex;
			}	
		}
	
	
	/* @end */
	
	
	/* @group Animations */
	
		@-webkit-keyframes adown {
			
			0%, 100% {
				
				-webkit-transform: translateY(0px);				
				    -ms-transform: translateY(0px);
				        transform: translateY(0px);
			}
			
			50% {
	
				-webkit-transform: translateY(8px);				
				    -ms-transform: translateY(8px);
				        transform: translateY(8px);	
			}
		}				
		
		@keyframes adown {
			
			0%, 100% {
				
				-webkit-transform: translateY(0px);				
				    -ms-transform: translateY(0px);
				        transform: translateY(0px);
			}
			
			50% {
	
				-webkit-transform: translateY(8px);				
				    -ms-transform: translateY(8px);
				        transform: translateY(8px);	
			}
		}			
				
				
		@-webkit-keyframes apulse {
			
			0%, 100% {
				
				-webkit-transform: scale(1.00);				
				    -ms-transform: scale(1.00);
				        transform: scale(1.00);
			}
			
			50% {
	
				-webkit-transform: scale(1.30);				
				    -ms-transform: scale(1.30);
				        transform: scale(1.30);	
			}
		}	
	
		@keyframes apulse {
			
			0%, 100% {
				
				-webkit-transform: scale(1.00);				
				    -ms-transform: scale(1.00);
				        transform: scale(1.00);
			}
			
			50% {
	
				-webkit-transform: scale(1.30);				
				    -ms-transform: scale(1.30);
				        transform: scale(1.30);	
			}
		}			
				
				
		@-webkit-keyframes aquake {
			
			0%, 100% {
				
				-webkit-transform: translateX(0px);				
				    -ms-transform: translateX(0px);
				        transform: translateX(0px);
			}
			
			20%, 60% {
				
				-webkit-transform: translateX(-8px);				
				    -ms-transform: translateX(-8px);
				        transform: translateX(-8px);
			}
			
			40%, 80% {
				
				-webkit-transform: translateX(8px);				
				    -ms-transform: translateX(8px);
				        transform: translateX(8px);
			}
		}	
				
		@keyframes aquake {
			
			0%, 100% {
				
				-webkit-transform: translateX(0px);				
				    -ms-transform: translateX(0px);
				        transform: translateX(0px);
			}
			
			20%, 60% {
				
				-webkit-transform: translateX(-8px);				
				    -ms-transform: translateX(-8px);
				        transform: translateX(-8px);
			}
			
			40%, 80% {
				
				-webkit-transform: translateX(8px);				
				    -ms-transform: translateX(8px);
				        transform: translateX(8px);
			}
		}	
		
		
		@-webkit-keyframes arotate {
			
			0% {
				
				-webkit-transform: rotate(0deg);				
				    -ms-transform: rotate(0deg);
				        transform: rotate(0deg);
			}
			
			100% {
				
				-webkit-transform: rotate(359deg);				
				    -ms-transform: rotate(359deg);
				        transform: rotate(359deg);
			}
		}		
				
		@keyframes arotate {
			
			0% {
				
				-webkit-transform: rotate(0deg);				
				    -ms-transform: rotate(0deg);
				        transform: rotate(0deg);
			}
			
			100% {
				
				-webkit-transform: rotate(359deg);				
				    -ms-transform: rotate(359deg);
				        transform: rotate(359deg);
			}
		}	
	
	/* @end */	
	
	
	/* @group hover */
			
		.icon {
			
			transition: 0.3s ease;
		}	
		
		.icon:hover {
			
			transform: scale(1.15);
			
/* 			background-color: #93E5F9; */
		}
		
		.logo:hover {
			
		-webkit-animation: arotate 1s linear both infinite;
		        animation: arotate 1s linear both infinite;
		}
		
	/* @end */
	
			
/* @end */


/* @group Header */
		
		
	header {
		
		position: fixed;
		top: 0;
		left: 0;
		right: 0;

		height: 112px;
		padding: 24px;
	}
	
	
	.logo {

		width: 64px;
		height: 64px;
		border-radius: 32px;
		
		background-color: white;
	
		background-image: url(assets/brand/logo.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 64px 64px;			
	}
				
			
/* @end */
		

/* @group Footer */	
	
	
	footer {
		
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		height: 94px;
		padding: 24px;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
	.icons {
		
		width: calc(144+16)px;
		height: 48px;
		
		display: flex;
		justify-content: space-between;
		align-items: center;				
	}
	
	
	.icon {
		
		width: 48px;
		height: 48px;
		border-radius: 24px;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: 48px 48px;	
	}

	.insta {background-image: url(assets/brand/icons/insta.svg);}		
	.email {background-image: url(assets/brand/icons/email.svg);}
	.shop {background-image: url(assets/brand/icons/shop.svg);}


/* @end */