/*

© 2021 

-------------------------
media queries
-------------------------

@media (max-width: 1280px)
@media (max-width: 997px)
@media (max-width: 767px)

-------------------------
colours
-------------------------

yellow: #fff000

===========================
===========================
===========================
=========================== 
*/


	/*

	framework
	==========================
	========================== 
	*/

		/*

		main
		========================== 
		*/

			html {
			  box-sizing: border-box;
			  -webkit-box-sizing: border-box;
			  -moz-box-sizing: border-box;
			  -ms-box-sizing: border-box;
			  -o-box-sizing: border-box;
			  scroll-behavior: smooth;
			}
			*, *:before, *:after {
			  box-sizing: inherit;
			}
			body {
				background-color: #F9F9F9;
				color: #000000;
				font-family: Menlo, Courier;
				font-size: 13px;
				letter-spacing: .5px;
/*				cursor: crosshair;*/
			}
			.white {
				color: #FFFFFF;
			}
			.img-responsive {
				display: inline-block;
				width: 100%;
			}
			a {
				color: #AAAAAA;
				text-decoration: none;
				transition: .3s color;
				-webkit-transition: .3s color;
				-moz-transition: .3s color;
				-ms-transition: .3s color;
				-o-transition: .3s color;
				outline: none;
				border: none;
				cursor: crosshair;		
			}
			a:hover {
				color: #000000;
				text-decoration: none;
				cursor: crosshair;	
			}
			a:active {
				cursor: crosshair;	
			}
			a:focus {
				cursor: crosshair;	
			}
			a:target {
				cursor: crosshair;	
			}
			.container {
				/*background-color: orange;*/
				max-width: 1280px;
				display: block;
				margin: 0 auto;
				padding: 55px 34px 55px 34px;
			}		
			@media (max-width: 997px) {
				.container {
					padding: 55px 8px;
				}	
			}	
			.grid-container {
				max-width: 1280px;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 13px;
				margin: 0 auto;
				padding: 55px 34px 55px 34px;				
			}
			@media (max-width: 997px) {
				.grid-container {
					grid-template-columns: 1fr;
				}	
			}		
			img {
				/*background-color: orange;*/
				padding: 13px;
				width: 100%;
			}	
			p {
				/*background-color: pink;*/
				margin: 0;
				padding: 21px;
				text-align: justify;
			}	
			h1	{
				/*background-color: white;*/
				font-family: 'Airborne Pilot', Menlo, Arial;
				font-size: 55px;
				font-weight: 300;
				line-height: 55px;
				margin: 0px 0 0 0;
				padding: 21px 21px 21px 21px;
			}
			h2 {
				/*background-color: white;*/
				display:block;
				font-family: 'Airborne Pilot', Menlo, Arial;
				background-color: black;
				color: white;
				font-size: 13px;
				line-height: 21px;
				margin: 0px 13px;
				padding: 0px 8px;
			}
			h3 {
				/*background-color: white;*/
				display:block;
				font-family: Menlo, Arial;
				font-size: 13px;
				font-weight: 200;
				line-height: 34px;
				text-transform: uppercase;
				color: #000000;
				/*text-align: center;*/
				border-bottom: 2px solid #000000;
				margin: 0px 21px;
				padding: 0px 8px;		
			}
			h4 {
				display:block;
				width: max-content;
				background-color: black;
				color: white;
				font-family: 'Embossing Tape 1 (BRK)', Menlo, Arial;
				font-size: 13px;
			  box-shadow: 
			    inset 0 2px 3px rgba(255,255,255,0.3),
			    inset 0 -2px 3px rgba(0,0,0,0.3),
			    0 1px 1px rgba(255,255,255,0.9);
				line-height: 34px;
				margin: 3px 21px;
				padding: 0 21px;
			}
			h5 {
				font-size: 13px;
				margin: 0;
				padding: 0 21px;		
			}			
			button {
				outline: none;
				border-radius: 0;
			}
			.sub-header {
				display: inline-block;
				font-size: 21px;
				font-weight: 400;
			}
			.fade-in {
			  opacity: 1;
			  transition: 1s opacity;		
			}
			.fade-out {
				opacity: 0;
			  transition: none;
			}
			@media (max-width: 767px) {
			  .hidden-xs {
			    display: none !important;
			  }
			}
			@media (min-width: 768px) and (max-width: 997px) {
			  .hidden-sm {
			    display: none !important;
			  }
			}
			@media (min-width: 998px) and (max-width: 1199px) {
			  .hidden-md {
			    display: none !important;
			  }
			}
			@media (min-width: 1200px) {
			  .hidden-lg {
			    display: none !important;
			  }
			}
			.col-100 {
				/*background-color: orange;*/
				display: inline-block;
				width: 100%;
				vertical-align: top;
			}		
			.col-75 {
				/*background-color: orange;*/
				display: inline-block;
				width: 75%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-75 {
					width: 100%;
				}	
			}		
			.col-66 {
				/*background-color: orange;*/
				display: inline-block;
				width: 66.33%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-66 {
					width: 100%;
				}	
			}			
			.col-50 {
				/*background-color: orange;*/
				display: inline-block;
				width: 50%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-50 {
					width: 100%;
				}	
			}		
			.col-40 {
				/*background-color: orange;*/
				display: inline-block;
				width: 40%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-40 {
					width: 100%;
				}	
			}		
			.col-33 {
				/*background-color: orange;*/
				display: inline-block;
				width: 33.33%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-33 {
					width: 100%;
				}	
			}	
			.col-30 {
				/*background-color: orange;*/
				display: inline-block;
				width: 30%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-30 {
					width: 100%;
				}	
			}		
			.col-25 {
				/*background-color: orange;*/
				display: inline-block;
				width: 25%;
				vertical-align: top;
			}		
			@media (max-width: 997px) {
				.col-25 {
					width: 100%;
				}	
			}		
			.col-20 {
				/*background-color: orange;*/
				display: inline-block;
				width: 20%;
				vertical-align: top;
			}	

		/*

		header
		========================== 
		*/

			header {
				position: fixed;
				background-color: black;
				font-size: 13px;
				width: 100%;
				top: 0;
				z-index: 98;
			}
			.header {
				padding-top: 125px;
			}
			@media (max-width: 998px) {
				.header {
					padding-top: 72px;
				}
			}	
			:target:before {
			    content: "";
			    display: block;
			    height: 125px;
			    margin: -100px 0 0;
			}
			@media (max-width: 997px) {
				:target:before {
					height: 72px;
					margin: -72px 0 0;
				}	
			}							
			.nav-container {
				position: relative;
				/*background-color: black;*/
				max-width: 1280px;
				display: block;
				margin: 0 auto;
				padding: 34px 34px 34px 34px;
			}
			@media (max-width: 997px) {
				.nav-container {
					padding: 13px 8px;
				}	
			}					
			.header-nav {
				/*background-color: pink;*/
				position: relative;
				/*top: 55px;*/
				left: 0;			
			}
			.nav-link {
				font-family: 'Airborne Pilot', Menlo, Arial;
				padding-right: 21px;
			}
			.nav-link:hover {
				color: #FFFFFF;
			}
			.header-logo {
				/*background-color: pink;*/
				display: block;
				position: absolute;
				width: 233px;
				top: 13px;
				left: 50%;
				padding: 5px;
				transform: translate(-50%,0);
				-webkit-transform: translate(-50%,0);
				-moz-transform: translate(-50%,0);
				-ms-transform: translate(-50%,0);		
				-o-transform: translate(-50%,0);			
			}
			@media (max-width: 997px) {
				.header-logo {
					top: 13px;
					width: 89px;
					padding: 13px;
				}	
			}
		  .cls-1 {
		    fill: #fff;
		  }
		  .cls-2 {
		    fill: #AAAAAA;
		    font-size: 8px;
		    font-family: Airborne-Pilot, Airborne Pilot;
		    letter-spacing: 0.5em;
				transition: .3s fill;
				-webkit-transition: .3s fill;
				-moz-transition: .3s fill;
				-ms-transition: .3s fill;
				-o-transition: .3s fill;      
		  }
		  .cls-3 {
		    letter-spacing: 0.25em;
		  }

		  .cls-4 {
		    letter-spacing: 0.38em;
		  }		
			.header-logo:hover > .cls-2 {
				fill: #FFFFFF;
			}	
			.menu-icon-box {
				/*background-color: pink;*/
				position: relative;
				float: left;
				top: 8px;
				width: 28px;
				/*height: 28px;*/
				background: rgba(255,255,255,0.0);
				border-radius: 5px;
				z-index: 99;
				cursor: pointer;
				margin: 0px 21px;
				transition: background .3s ease-in-out;	
			}
			.menu-icon-box .menu-icon {
				fill: #AAAAAA;
				-webkit-transition: .3s fill;
			}
			.menu-icon-box:hover .menu-icon {
				fill: #FFFFFF;
			}
			.menu-icon-box:focus .menu-icon {
				fill: #FFFFFF;
			}
			.menu-icon-box:active .menu-icon {
				fill: #FFFFFF;
			}	
			label {
			  cursor: pointer;
			}	
			#menu-toggle {
			  display: none; /* hide the checkbox */
			  z-index: 98;
			}
			#menu {
			  display: none;
			}
			#menu-toggle:checked + #menu {
				background-color: #000000;
				pointer-events: all;
			  display: block;
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  
			  /*padding: 21px 34px;*/
			  /*border-top: 2px solid black;*/
			  border-bottom: 2px solid black;
			  z-index: 90;	
			}			
			@media (max-width: 997px) {
				#menu-toggle:checked + #menu {
					padding: 21px 8px;
					margin-top: 72px;
				}	
			}		
			.mobile-nav-link {
				font-family: 'Airborne Pilot', sans-serif;
				display: block;
				padding: 21px 0;
			}
			.mobile-nav-link:hover {
				color: #FFFFFF;
			}

		/*

		footer
		========================== 
		*/

			footer {
					position: relative;
					background-color: black;
					font-size: 13px;
					width: 100%;	
			}
			.footer-container {
					position: relative;
					/*background-color: black;*/
					max-width: 1280px;
					font-size: 8px;
					display: block;
					margin: 0 auto;
					padding: 13px 34px 13px 34px;
			}
			@media (max-width: 997px) {
				.footer-container {
					padding: 13px 8px;
				}	
			}					
			.footer-link {
					/*font-family: 'Airborne Pilot', sans-serif;*/
					padding-right: 21px;
				}
			.footer-link:hover {
				color: #FFFFFF;
			}			
		
		/*

		snipcart
		========================== 
		*/

			.snipcart-modal {
				background-color: #F9F9F9;
				z-index: 99;
			}
			.snipcart-modal__container {
				background-color: #F9F9F9;
				z-index: 99;
			}
			.snipcart-cart-header {
				background-color: #F9F9F9;
				z-index: 99;	
			}	
			.snipcart-checkout,
			.snipcart-button-secondary {		
				color: #AAAAAA;
				text-decoration: none;
				transition: .3s color;
				-webkit-transition: .3s color;
				-moz-transition: .3s color;
				-ms-transition: .3s color;
				-o-transition: .3s color;
				outline: none;
				border: none;
				cursor: crosshair;	

			}
			.snipcart-checkout:hover {
				color: #FFFFFF;
				text-decoration: none;
			}
			.snipcart-items-count {
				text-decoration: none;
			}						
			.snipcart-items-count:hover {
				color: #FFFFFF;
			}			
			.snipcart-cart-header__options {
				display: none;
			}
			.snipcart__icon--blue-light path {
				fill: #000000;
			}
			.snipcart__font--std {
				font-family: Menlo, helvetica;
				color: #AAAAAA;
				transition: .3s color;
			}
			.snipcart__font--std:hover {
				font-family: Menlo, helvetica;
				color: #000000;
			}	
			.snipcart__font--secondary {
				font-family: Menlo, helvetica;
				color: #000000; 
			}
			.snipcart-cart-button,
			.snipcart-button-secondary {
				border-radius: 4px;
			}
			.snipcart-modal__close:focus {
				outline: none;
			}
			.snipcart-item-line {
				background-color: #F9F9F9;
				box-shadow: none;
				border-bottom: 1px solid #AAAAAA;
				border-radius: 0px;
			}
			.snipcart-cart__content {
				background-color: #F9F9F9;
			}
			.snipcart-featured-payment-methods__title {
				background-color: #F9F9F9;
			}
			.snipcart-discount-box {
				background-color: #F9F9F9;
				border-radius: 4px;
				display: none;	
			}
			.snipcart__font--subtitle {
				font-family: Menlo, helvetica;
			}
			.snipcart-cart-summary-item__name,
			.snipcart-cart-summary-item__quantity,
			.snipcart-cart-summary-item__price {
				font-family: Menlo, helvetica;
			}
			.snipcart-cart-summary-fees__title {
				font-family: Menlo, helvetica;
			}
			.snipcart-cart-summary-fees__amount {
				font-family: Menlo, helvetica;
			}
			.snipcart__box--gray {
				background-color: #F9F9F9;
			}
			.snipcart-cart-header 
			.snipcart-modal__close-icon,
			.snipcart-cart-header__icon {
				color: #000000;
				cursor: crosshair; 
			}
			.snipcart-modal__close-title {
				cursor: crosshair; 
			}
			.snipcart-button-primary,
			.snipcart-button-secondary {
				display: inline-block;
				width: 100%;
				text-align: center;
				color: #000000;
				background-color: transparent;
				border: 2px solid #AAAAAA;
				border-radius: 0;
				font-weight: 100;
				padding: 21px;
				outline: 0;
				margin-top: 3px;
				vertical-align: bottom;
				transition: .3s border, .3s color;
				text-transform: uppercase;
				cursor: crosshair;
			}
			.snipcart-button-primary:hover,
			.snipcart-button-secondary:hover {
				background-color: transparent;
				color: #000000;
				border: 2px solid #000000;
				box-shadow: none;
				cursor: crosshair;
			}
			.snipcart-button-primary.is-loading,.snipcart-button-primary[disabled] {
				display: inline-block;
				width: 100%;
				text-align: center;
				color: #000000;
				background-color: transparent;
				border: 2px solid #AAAAAA;
				border-radius: 0;
				font-weight: 100;
				padding: 21px;
				outline: 0;
				margin-top: 3px;
				vertical-align: bottom;
				transition: .3s border, .3s color;
				text-transform: uppercase;
				cursor: crosshair;
			}
			.snipcart-button-primary.is-loading,.snipcart-button-primary[disabled]:hover {
				background-color: transparent;
				color: #000000;
				border: 2px solid #000000;
				box-shadow: none;
				cursor: crosshair;				
			}			
			.snipcart__box--badge-highlight {
				background-color: #F9F9F9;
				border: 2px solid #000000;
			}
			.snipcart-base-button__label {
				font-family: Menlo, helvetica;;
			}
			.checkout-tab {
				position: fixed;
				background-color: pink;
				color: #FFFFFF;
				width: 144px;
				
				bottom:0px;
				z-index: 98;
			}

	/*

	home
	==========================
	==========================
	==========================
	*/

		/*

		sliders
		==========================
		========================== 
		*/

			.slider {
				background-color: #FFFFFF;
				width: 100%;	
				/*margin-top: 125px;*/ 			
			}
			.slider-img {
				display: inline-block;
				width: 100%;				
				padding: 0;
			}

			/*

			header-slider
			========================== 
			*/

				.header-slider, 
				.mobile-header-slider,
				.lookbook-slider,
				.mobile-lookbook-slider {
					display: inline-block;
					width: 100%;
					position: relative;
					overflow: hidden;	
					vertical-align: top;				
				}
				.content {
				  margin: 0;
				  padding: 0;
				}
				.content li {
				  	/*font-size: 100px;*/
					margin: 0;
				  	padding: 0;
				  	width: 100%;
				  	height: 100%;
				  	list-style: none;
				  	text-align: center;
				}
				.active {
				  	padding-bottom: 46%;
				}
				@media (max-width: 998px) {
					.active {
						padding-bottom: 125%;
					}
				}	
				.active li {
				  position: absolute;
				  top: 0; 
				  bottom: 0; 
				  left: 0; 
				  right: 0;
				  top: 0;
				  pointer-events: none;
				  opacity: 0;
				  -webkit-transition: opacity 1.2s ease-out;
				  -moz-transition: opacity 1.2s ease-out;
				  -ms-transition: opacity 1.2s ease-out;
				  -o-transition: opacity 1.2s ease-out;
				}
				.active li.current {
				  top: 0; 
				  bottom: 0; 
				  left: 0; 
				  right: 0;
				  pointer-events: auto;
				  opacity: 1;
				}
				.prev {
					display: block;
					position: absolute;
					background-color: transparent;
					top: 50%;
					-webkit-transform: translate(0,-50%);
					-mos-transform: translate(0,-50%);
					-ms-transform: translate(0,-50%);
					-o-transform: translate(0,-50%);
					left: 64px;
					height: 144px;
					width: 144px;
					/*background-color: rgba(255,255,255,.4);*/
					padding: 0;
					border: 0 !important;
					border-radius: 100%;
					z-index: 10;
					-webkit-transition: .3s background-color;
					-mos-transition: .3s background-color;
					-ms-transition: .3s background-color;
					-o-transition: .3s background-color;
					cursor: crosshair;
				}
				@media (max-width: 998px) {
					.prev {
						left: 21px;
						height: 89px;
						width: 55px;						
					}
				}
				.left-arrow {
					height: 40%;
					padding: 4px 4px 0 0;
				}				
				.slider-arrow-left {
					fill: #AAAAAA;
					z-index: 90;
					transition: .3s fill;
					-webkit-transition: .3s fill;
					-moz-transition: .3s fill;
					-ms-transition: .3s fill;
					-o-transition: .3s fill;	
				}					
				.prev:hover .slider-arrow-left {
					fill: #FFFFFF;
					text-decoration: none;					
				}								
				.next {
					display: block;
					position: absolute;
					background-color: transparent;
					top: 50%;
					-webkit-transform: translate(0,-50%);
					-mos-transform: translate(0,-50%);
					-ms-transform: translate(0,-50%);
					-o-transform: translate(0,-50%);
					right: 64px;
					height: 144px;
					width: 144px;
					/*background-color: rgba(255,255,255,.4);*/
					padding: 0;
					border: 0 !important;
					border-radius: 100%;
					z-index: 10;
					-webkit-transition: .3s background-color;
					-moz-transition: .3s background-color;
					-ms-transition: .3s background-color;
					-o-transition: .3s background-color;
					cursor: crosshair;
				}
				@media (max-width: 998px) {
					.next {
						right: 21px;
						height: 89px;
						width: 55px;						
					}
				}			
				.right-arrow {
					height: 40%;
					padding: 4px 0 0 4px;
				}	
				.slider-arrow-right {
					fill: #AAAAAA;
					z-index: 90;
					transition: .3s fill;
					-webkit-transition: .3s fill;
					-moz-transition: .3s fill;
					-ms-transition: .3s fill;
					-o-transition: .3s fill;	
				}
				.next:hover .slider-arrow-right {
					fill: #FFFFFF;
					text-decoration: none;					
				}

		/*

		shop window
		========================== 
		*/		

			.window-display {
				/*padding: 13px;*/
				border: 2px solid #AAAAAA;
				margin: 8px 0;
				width: 100%;
				padding: 8px;
				transition: .3s border;
				-webkit-transition: .3s border;
				-moz-transition: .3s border;
				-ms-transition: .3s border;
				-o-transition: .3s border;				
			}
			@media (max-width: 997px) {
				.window-display {
					width: 100%;
				}	
			}				
			.window-display:hover {
				border: 2px solid #000000;
			}
			.window-text {
				color: #000000;			
			}
			.product-count {
				text-align: center;
				-webkit-transition: .3s color;
				-moz-transition: .3s color;
				-ms-transition: .3s color;
				-o-transition: .3s color;				
			}
			.window-display:hover > .product-count {
				color: #000000;
			}

		/*

		about
		========================== 
		*/

			.about {
				background-color: #FFF000;
				width: 100%;
			}
			.about-banner {
				/*background-color: #000000;*/
				font-family: 'Airborne Pilot', sans-serif;
				width: 100%;
				font-size: 0;
			}
			.about-banner-img {
				display: inline-block;
				width: 100%;				
				padding: 0;
			}

		/*

		connect
		========================== 
		*/
			.connect {
				background-color: #000000;
				width: 100%;
				text-align: center;
			}
			.social-icon-box {
				display: block;
				width: 89px;
				padding: 55px 21px 55px 21px;
				margin: 0 auto;
			}
			.social-icon {
				transition: .3s fill;
			}
			.social-icon-box:hover .social-icon {
				fill: #FFFFFF;
			}


	/*

	product
	========================== 
	*/

		.product {
			display: block;
			width: 100%;
			padding: 89px 0;
		}
		@media (max-width: 998px) {
			.product {
				padding: 34px 0;
			}
		}			
		.big-image {
			display: inline-block;
			width: 100%;
			vertical-align: top;
			margin-bottom: 8px;
			cursor: pointer;
		}
		#big-image {
			display: inline-block;
			width: 100%;
			vertical-align: top;
		}	
		.thumbnails {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 5px;

			/*width: 100%;*/
			padding: 13px;
			text-align: center;
		}		
		.thumbnail-img {
			/*display: inline-block;*/
			/*height: 100px;*/
			width: 100%;
			font-size: 0;
			vertical-align: top;
			margin-bottom: 13px;
			padding: 0 0;
			cursor: pointer;
		}	
		.price {
			color: #19D467;
			font-size: 21px;
		}
		.converted-price {
			font-size: 8px;
			white-space: pre;
		}
		.button {
			display: inline-block;
			width: 100%;
			text-align: center;
			color: #000000;
			background-color: transparent;
			border: 2px solid #AAAAAA;
			border-radius: 0;
			font-weight: 100;
			padding: 21px;
			outline: 0;
			margin-top: 3px;
			vertical-align: bottom;
			transition: .3s border, .3s color;
			text-transform: uppercase;
			cursor: crosshair;
		}
		.button:hover {
			border: 2px solid  #000000;
		}
		.price-container {
			padding: 21px;
		}
	
	/*

	terms
	========================== 
	*/

		.terms {
			display: block;
			width: 50%;
			padding: 89px 0;
		}
		@media (max-width: 998px) {
			.terms {
				width: 100%;
				padding: 34px 0;
			}
		}	



