/** Shopify CDN: Minification failed

Line 1163:15 Expected identifier but found whitespace
Line 1163:16 Unexpected "1"

**/
nav.navbar.navbar-default.navbar- {
    background: transparent;
    border: transparent;
    z-index: 1000;
    position: relative;
    text-align: center;
    max-width: 21%;
    margin: auto;
}

.content {
      position: absolute;
    bottom: 0px;
    left: 15%;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateZ(-180deg);
            transform: rotateZ(-180deg);
  }
  to {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotateZ(-180deg);
            transform: rotateZ(-180deg);
  }
  to {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}
body {
  background: #98c9fd;
}

.rainbow {
  clip: rect(0 490px 245px 0);
  height: 100px;
  left: 50%;
  margin-top: 50%;
  width: 490px;
  position: center;
}

.arc {
  -webkit-animation: spin ease-in-out 0.5s normal both;
          animation: spin ease-in-out 0.5s normal both;
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
}

.arc-red {
  background: #1267FB;
  clip: rect(0 490px 245px 0);
  height: 490px;
  margin-left: -245px;
  margin-top: -245px;
  width: 490px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.arc-orange {
  background: #ED8C3D;
  clip: rect(0 420px 210px 0);
  height: 420px;
  margin-left: -210px;
  margin-top: -210px;
  width: 420px;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.arc-yellow {
  background: #1267FB;
  clip: rect(0 350px 175px 0);
  height: 350px;
  margin-left: -175px;
  margin-top: -175px;
  width: 350px;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  border: 3px solid black;
}

.arc-green {
  background: #FFFD38;
  clip: rect(0 280px 140px 0);
  height: 280px;
  margin-left: -140px;
  margin-top: -140px;
  width: 280px;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  border: 3px solid black;
}

.arc-blue {
  background: #FD9026;
  clip: rect(0 210px 105px 0);
  height: 210px;
  margin-left: -105px;
  margin-top: -105px;
  width: 210px;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  border: 3px solid black;
}

.arc-purple {
  background: #E31D28;
  clip: rect(0 140px 70px 0);
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  width: 140px;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  border: 3px solid black;
}

.arc-transparent {
  background: #98c9fd;
  clip: rect(0 70px 35px 0);
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  display: none;
}

.logo {
  width: 365px;
  margin: auto;
  top: 52%;
  position: absolute;
  left: 50%;
  margin-left: -173px;
}


.sticky {
  position: sticky;
  top: 0;
  padding: 11em 0;
  color: white;
  text-align: center;
}




/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}


body {
    background-color:#96c8fd;
    -webkit-transition: background-color 700ms linear;
    -moz-transition: background-color 700ms linear;
    -o-transition: background-color 700ms linear;
    -ms-transition: background-color 700ms linear;
    transition: background-color 700ms linear;
}
body.scrolled {
    background-color: white;
}


* {
	margin:0;
	padding:0;
}

.product-shots {
    width: 65%;
    margin: auto;
    margin-top: 10vh;
}

body{
	font: normal 16px Arial, Helvetica, sans-serif;
}

h1, h3{
	font: normal 24px 'Open Sans', Arial, Helvetica, sans-serif;
}

/*-----------------
	The Header
------------------*/

header {
	position: fixed;
	top: 0;
	left:0;
	right:0;

	height: 40px;
	z-index: 100;

	background-color: #282b2c;
	padding: 20px 40px;
	color: #fff;
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

header a {
	color: #ffffff;
	text-decoration: none;
}

header h2.tzine{
	float: right;
	opacity:0.9;
}

header h2.tzine:hover{
	opacity:1;
}

header h2.tzine a{
	font-size: 13px;
	text-transform: uppercase;
	display: inline-block;
	padding: 12px 18px;
	border-radius: 3px;
	background-color: #5895DB;
}


@media (max-width: 500px){

	header {
		padding: 20px 15px;
	}

	header h1{
		font-size: 24px;
		margin: 0;
	}

}

/*-----------------
	Main Content
------------------*/


.main-content{
	box-sizing: border-box;
	text-align: center;
	margin: 125px auto 60px;
	padding: 0 40px;
}

.main-content h3{
	font-size: 28px;
	color:  #5a96b9;
	padding-bottom: 20px;
}

@media (max-width: 600px){

	.main-content{
		margin: 35px auto;
		padding: 0 15px;
	}

}


/*-------------------
	All Products Page
--------------------*/

/*	Filter Form	*/

.filters{
	box-sizing: border-box;
	padding: 5px 30px 30px;
	width: 190px;
	background-color: #FFF;
	border: 1px solid #DBE3E7;
	border-radius: 3px;
	box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.08);
	position: fixed;
	text-align: left;
	color: #2B2E31;
	opacity: 0;
	pointer-events: none;
}

.filters .filter-criteria{
	display: block;
	margin: 10px 0 10px;
}

.filters span{
	font-size:14px;
	display: block;
	margin-bottom: 12px;
	font-weight: bold;
	margin-top: 20px;
}

.filters label{
	display: block;
	line-height: 1.4;
	font-size: 15px;
}

.filters label input{
	margin-right: 10px;
}

.filters button{
	border-radius: 2px;
	background-color:  #4BC34B;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
	border: 0;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;

	width: 95px;
	height: 32px;
	margin-top: 10px;
}


/*	Products List	*/

.all-products h3{
	opacity: 0;
}

.products-list{
	list-style:none;
	max-width: 1500px;
	text-align: center;
	padding: 0;
	opacity: 0;
	font-size: 0;
}

.all-products.visible .products-list,
.all-products.visible .filters,
.all-products.visible h3{
	opacity: 1;
	transition: 1s;
	pointer-events: auto;
}

.products-list > li{
	box-sizing:border-box;
	display: inline-block;
	cursor: pointer;
	position: relative;
	transition: 0.2s;

	text-align:left;
	font:normal 12px sans-serif;

	background-color:#ffffff;
	border:1px solid #dbe3e7;
	border-radius: 3px;
	box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.08);

	margin: 0 12px 14px 0;
	padding: 25px;
}

.products-list > li.hidden{
	opacity: 0.2;
	pointer-events: none;
}

/* The product image */

.products-list .product-photo{
	display: block;
	text-align: center;
	box-shadow : 0 0 20px 8px #f3f3f3 inset;

	width: 275px;
	margin-bottom: 25px;
	padding: 20px 0;
	box-sizing: border-box;
}

/* The product name */

.products-list h2{
	display: block;
	font-size: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
	max-width: 200px;
	margin:0;
}

.products-list h2 a{
	text-decoration: none;
	color: #2B2E31;
}

/* Product description */

.products-list .product-description{
	margin-top: 20px;

	color: #5d5d5d;
	font-size: 14px;
	line-height: 1.45;
	white-space: normal;

	max-width: 260px;
	margin-bottom: 20px;

	list-style: none;
}

.products-list .product-description li{
	display: inline-block;
	margin-right: 5px;
}

.products-list .product-description li:first-child{
	display: block;
}

.products-list .product-description li span{
	font-weight: bold;
}

/* Price and order button */

.products-list button{
	border-radius: 2px;
	background-color:  #87bae1;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
	border: 0;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;

	width: 95px;
	height: 32px;
}

.products-list .product-price{
	float: right;

	color:  #4e4e4e;
	font-weight: bold;
	font-size: 20px;

	padding-top: 6px;
	margin: 0;
}

.products-list .highlight{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.1);
	opacity: 0;
	transition: 0.4s;
}

.products-list > li:hover .highlight{
	opacity: 1;
}

/* Making the list responsive */

@media (max-width: 800px){

	.products-list .product-photo{
		width: 225px;
	}

	.products-list .product-description{
		max-width: 225px;
	}
}


/*---------------------------
	Single Product Page
----------------------------*/

.single-product{
	z-index: 100;
}

.overlay{
	height: 20px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	transition: 0.6s;
	z-index: 100;
}

.single-product.visible .overlay{
	height: 100%;
}

.preview-large{
	box-sizing: border-box;
	width: 760px;
	height: 550px;
	position: fixed;
	left: 50%;
	margin-left: -375px;
	top: 50%;
	margin-top: -275px;
	pointer-events: none;

	border-radius: 6px;
	background-color:  #ffffff;

	z-index: 102;
	opacity: 0;
	transition: 0.4s;

}



.single-product.visible .preview-large{
	opacity: 1;
	transition: 1.4s;
	pointer-events: auto;
}

.preview-large h3{
	margin-top: 20px;
}

.preview-large img{
	width: 100%;
	height: 280px;
	border-bottom: 3px solid #efefef;
	border-radius: 5px 5px 0 0;
}

.preview-large p{
	line-height: 23px;
	padding: 50px 45px;
}

.close{
	position: absolute;
	right: 25px;
	top: 15px;

	font-size: 28px;
	color: #555;
	cursor: pointer;
}

.container {
    position: relative;
    top: 160px;
    padding-top: 70vh;
    height: 100px;
    margin-bottom: 390px;
}

img {
    width: 100%;
    padding: .75%;
}
body {
  margin: 10px;
}

div#masonry {
  font-size: 0;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 100%;
  margin: auto;
}


div.item {background:#CCEEFF;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  padding: 10px;
  display: block;
  font-size: medium;
}

.item .inner {background:#FFEECC;
  border: 1px solid #CCC;
  min-height: 100px;
  border-radius: 5px;
  padding: 10px;
}

.item:nth-child(1) .inner {
  min-height: 350px;
}

.item:nth-child(2) .inner {
  min-height: 350px;
}

.item:nth-child(4n) .inner {
  min-height: 350px;
}

.logo.fade-in img {
    padding: 0;
}
ul {
    list-style: none;
}


.top {transition: 1s;}
.top.sticky.fixed {
    position: fixed;
    padding: 20px;
    top: 50px;
}
top.sticky.fixed .logo {
    width: 72px;
    margin-left: -34px;
    margin-top: -3px;
}

.top.sticky {
    position: sticky;
    top: 0%;
    left: 0px;
    right: 0;
    transition: 1s;
    height: 50px;
}

.top.sticky.fixed .logo {
    width: 73PX !Important;
    margin: auto;
    margin-top: -4px;
    margin-left: -35px;
}

    nav.navbar.navbar-default.navbar- {     background: transparent;
    border: transparent;
    z-index: 1000;
    position: relative;
    text-align: center;
    max-width: 21%;
    margin: auto; }  .content {
    position: absolute;
    bottom: 20px;
    left: 15%; }  @-webkit-keyframes spin {   from {
    -webkit-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg);   }   to {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);   } } @keyframes spin {   from {
    -webkit-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg);   }   to {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);   } }
    body {   background: #98c9fd; }  .rainbow {
    clip: rect(0 490px 245px 0);
    height: 100px;
    left: 50%;
    margin-top: 50%;
    width: 490px;
    position: relative; }  .arc {
    -webkit-animation: spin ease-in-out 0.5s normal both;
    animation: spin ease-in-out 0.5s normal both;
    border-radius: 50%;
    left: 50%;
    position: absolute;
    top: 50%; }  .arc-red {
    background: #1267FB;
    clip: rect(0 490px 245px 0);
    height: 490px;
    margin-left: -245px;
    margin-top: -245px;
    width: 490px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }  .arc-orange {
    background: #ED8C3D;
    clip: rect(0 420px 210px 0);
    height: 420px;
    margin-left: -210px;
    margin-top: -210px;
    width: 420px;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }  .arc-yellow {
    background: #1267FB;
    clip: rect(0 350px 175px 0);
    height: 350px;
    margin-left: -175px;
    margin-top: -175px;
    width: 350px;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    border: 3px solid black; }  .arc-green {
    background: #FFFD38;
    clip: rect(0 280px 140px 0);
    height: 280px;
    margin-left: -140px;
    margin-top: -140px;
    width: 280px;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    border: 3px solid black; }  .arc-blue {
    background: #FD9026;
    clip: rect(0 210px 105px 0);
    height: 210px;
    margin-left: -105px;
    margin-top: -105px;
    width: 210px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    border: 3px solid black; }  .arc-purple {
    background: #E31D28;
    clip: rect(0 140px 70px 0);
    height: 140px;
    margin-left: -70px;
    margin-top: -70px;
    width: 140px;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    border: 3px solid black; }  .arc-transparent {
    background: #98c9fd;
    clip: rect(0 70px 35px 0);
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    width: 70px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    display: none; }  .logo {
    width: 365px;
    margin: auto;
    top: 52%;
    position: absolute;
    left: 50%;
    margin-left: -173px;
    }  /* make keyframes that tell the start state and the end state of our object */ @-webkit-keyframes fadeIn {   from {
    opacity: 0;   }   to {
    opacity: 1;   } } @keyframes fadeIn {   from {
    opacity: 0;   }   to {
    opacity: 1;   } } .fade-in {
    opacity: 0;   /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1;   /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;   /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    /* animation-fill-mode: forwards; */
    /* -webkit-animation-duration: 1s; */
    /* animation-duration: 1s; */
    }
    body {     background-color:#96c8fd;
    -webkit-transition: background-color 700ms linear;
    -moz-transition: background-color 700ms linear;
    -o-transition: background-color 700ms linear;
    -ms-transition: background-color 700ms linear;
    transition: background-color 700ms linear; }
    body.scrolled {     background-color: white; }   * {
    margin:0;
    padding:0; }  .product-shots {
    width: 75%;
    margin: auto;
    margin-top: 10vh;
    }
    body{  font: normal 16px Arial, Helvetica, sans-serif; }
    h1, h3{  font: normal 24px 'Open Sans', Arial, Helvetica, sans-serif; }  /*-----------------  The Header ------------------*/
    header {  position: fixed;
    top: 0;
    left:0;
    right:0;
    height: 40px;
    z-index: 100;
    background-color: #282b2c;
    padding: 20px 40px;
    color: #fff;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1); }
    header a {  color: #ffffff;
    text-decoration: none; }
    header h2.tzine{  float: right;
    opacity:0.9; }
    header h2.tzine:hover{  opacity:1; }
    header h2.tzine a{  font-size: 13px;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 18px;
    border-radius: 3px;
    background-color: #5895DB; }   @media (
    max-width: 500px){   header {   padding: 20px 15px;  }   header h1{
    font-size: 24px;
    margin: 0;  }  }  /*-----------------  Main Content ------------------*/   .main-content{
    box-sizing: border-box;
    text-align: center;
    margin: 125px auto 60px;
    padding: 0 40px; }  .main-content
    h3{  font-size: 28px;
    color:  #5a96b9;
    padding-bottom: 20px; }  @media (
    max-width: 600px){   .main-content{   margin: 45px auto;
    padding: 0 25px;  }  }   /*-------------------  All Products Page --------------------*/  /* Filter Form */  .filters{
    box-sizing: border-box;
    padding: 5px 30px 30px;
    width: 190px;
    background-color: #FFF;
    border: 1px solid #DBE3E7;
    border-radius: 3px;
    box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.08);
    position: fixed;
    text-align: left;
    color: #2B2E31;
    opacity: 0;
    pointer-events: none; }  .filters .filter-criteria{
    display: block;
    margin: 10px 0 10px; }  .filters
    span{  font-size:14px;
    display: block;
    margin-bottom: 12px;
    font-weight: bold;
    margin-top: 20px; }  .filters
    label{  display: block;
    line-height: 1.4;
    font-size: 15px; }  .filters
    label input{  margin-right: 10px; }  .filters
    button{  border-radius: 2px;
    background-color:  #4BC34B;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    border: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    width: 95px;
    height: 32px;
    margin-top: 10px; }   /* Products List */  .all-products
    h3{  opacity: 0; }  .products-list{
    list-style:none;
    max-width: 1500px;
    text-align: center;
    padding: 0;
    opacity: 0;
    font-size: 0; }  .all-products.visible .products-list, .all-products.visible .filters, .all-products.visible
    h3{  opacity: 1;
    transition: 1s;
    pointer-events: auto; }  .products-list >
    li{  box-sizing:border-box;
    display: inline-block;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    text-align:left;
    font:normal 12px sans-serif;
    background-color:#ffffff;
    border:1px solid #dbe3e7;
    border-radius: 3px;
    box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.08);
    margin: 0 12px 14px 0;
    padding: 25px; }  .products-list >
    li.hidden{  opacity: 0.2;
    pointer-events: none; }  /* The product image */  .products-list .product-photo{
    display: block;
    text-align: center;
    box-shadow : 0 0 20px 8px #f3f3f3 inset;
    width: 275px;
    margin-bottom: 25px;
    padding: 20px 0;
    box-sizing: border-box; }  /* The product name */  .products-list
    h2{  display: block;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    max-width: 200px;
    margin:0; }  .products-list
    h2 a{  text-decoration: none;
    color: #2B2E31; }  /* Product description */  .products-list .product-description{
    margin-top: 20px;
    color: #5d5d5d;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    max-width: 260px;
    margin-bottom: 20px;
    list-style: none; }  .products-list .product-description
    li{  display: inline-block;
    margin-right: 5px; }  .products-list .product-description
    li:first-child{  display: block; }  .products-list .product-description
    li span{  font-weight: bold; }  /* Price and order button */  .products-list
    button{  border-radius: 2px;
    background-color:  #87bae1;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    border: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    width: 95px;
    height: 32px; }  .products-list .product-price{
    float: right;
    color:  #4e4e4e;
    font-weight: bold;
    font-size: 20px;
    padding-top: 6px;
    margin: 0; }  .products-list .highlight{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    transition: 0.4s; }  .products-list >
    li:hover .highlight{  opacity: 1; }  /* Making the list responsive */  @media (
    max-width: 800px){   .products-list .product-photo{   width: 225px;  }   .products-list .product-description{
    max-width: 225px;  } }   /*---------------------------  Single Product Page ----------------------------*/  .single-product{
    z-index: 100; }  .overlay{
    height: 20px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.6s;
    z-index: 100; }  .single-product.visible .overlay{
    height: 100%; }  .preview-large{
    box-sizing: border-box;
    width: 760px;
    height: 550px;
    position: fixed;
    left: 50%;
    margin-left: -375px;
    top: 50%;
    margin-top: -275px;
    pointer-events: none;
    border-radius: 6px;
    background-color:  #ffffff;
    z-index: 102;
    opacity: 0;
    transition: 0.4s;  }  .single-product.visible .preview-large{
    opacity: 1;
    transition: 1.4s;
    pointer-events: auto; }  .preview-large
    h3{  margin-top: 20px; }  .preview-large
    img{  width: 100%;
    height: 280px;
    border-bottom: 3px solid #efefef;
    border-radius: 5px 5px 0 0; }  .preview-large
    p{  line-height: 23px;
    padding: 50px 45px; }  .close{
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 28px;
    color: #555;
    cursor: pointer; }  .container {
    position: relative; }
    img {     width: 100%;
    padding: .75%; }
    body {   margin: 10px; }
    div#masonry {   font-size: 0;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    width: 100%;
    margin: auto; }
    div.item {background:#CCEEFF;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding: 10px;
    display: block;
    font-size: medium; }  .item .inner {
    background:#FFEECC;
    border: 1px solid #CCC;
    min-height: 100px;
    border-radius: 5px;
    padding: 10px; }  .item:nth-child(1) .inner {
    min-height: 350px; }  .item:nth-child(2) .inner {
    min-height: 350px; }  .item:nth-child(4n) .inner {
    min-height: 350px; }  .logo.fade-in
    img {     padding: 0; }
    ul {     list-style: none; }   .top {
    transition: 1s;
    top: 20%;
    }  .top.scrolled {
    position: fixed;
    top: -50vh;
    left: 0;
    right: 0;
    transition: 1s; }  .top.scrolled .logo {
    width: 5%;
    margin: auto;
    margin-top: -18px;
    margin-left: -32px; }  /*---------------------------  Error Page ----------------------------*/  .error{
    opacity: 0;
    transition: 0.6s;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%; }  .error.visible{
    opacity: 1; }  .error
    h3{  font-size: 40px; }  .image-container {
    border: 1px solid white;
    width: 300px;
    height: auto;
    margin: 20px;
    padding: 10px; } .image-container
    img {   width: 100%; } .lazy-hidden {
    opacity: 0; } .lazy-loaded {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1; }   .product-shots
    li.item {     width: 33%;
    float: left;
    list-style: none; }    .rainbow.scrolled{
    clip: rect(0 98px 49px 0);
    height: 98px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-25%);
    transform: translateX(-50%) translateY(-25%);
    width: 98px;
    transition: 1s; }  .arc {
    -webkit-animation: spin ease-in-out 0.5s normal both;
    animation: spin ease-in-out 0.5s normal both;
    border-radius: 50%;
    left: 50%;
    position: absolute;
    top: 50%; } 

.top.sticky.fixed .arc-red{
    clip: rect(0 98px 49px 0);
    height: 98px;
    margin-left: -49px;
    margin-top: -49px;
    width: 98px;
    border: 2px solid black;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    transition: 1s; } 


.top.sticky.fixed .arc-orange{
    clip: rect(0 84px 42px 0);
    height: 84px;
    margin-left: -42px;
    margin-top: -42px;
    width: 84px;
    border: 2px solid black;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    transition: 1s; } 


.top.sticky.fixed .arc-yellow{
    clip: rect(0 70px 35px 0);
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    width: 70px;
    border: 2px solid black;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    transition: 1s; } 


.top.sticky.fixed .arc-green{
    clip: rect(0 56px 28px 0);
    height: 56px;
    margin-left: -28px;
    margin-top: -28px;
    width: 56px;
    border: 2px solid black;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    transition: 1s; } 

.top.sticky.fixed  .arc-blue{
    clip: rect(0 42px 21px 0);
    height: 42px;
    margin-left: -21px;
    margin-top: -21px;
    width: 42px;
    border: 2px solid black;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    transition: 1s; } 

.top.sticky.fixed .arc-purple {
    clip: rect(0 28px 14px 0);
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    width: 28px;
    border: 2px solid black;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    transition: 1s; }
    transition: 1;
}

/*---------------------------
	Error Page
----------------------------*/

.error{
	opacity: 0;
	transition: 0.6s;
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 100px;
	width: 100%;
}

.error.visible{
	opacity: 1;
}

.error h3{
	font-size: 40px;
}

.image-container {
  border: 1px solid white;
  width: 300px;
  height: auto;
  margin: 20px;
  padding: 10px;
}
.image-container img {
  width: 100%;
}
.lazy-hidden {
  opacity: 0;
}
.lazy-loaded {
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}


.product-shots li.item {
    width: 37%;
    float: left;
    list-style: none;
    margin-left: 10%;
    padding: 20px;
}

li.item.hats {
    width: 23%;
}

.rainbow.scrolled{
  clip: rect(0 98px 49px 0);
  height: 98px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-25%);
          transform: translateX(-50%) translateY(-25%);
  width: 98px;
      transition: 1s;
}

.arc {
  -webkit-animation: spin ease-in-out 0.5s normal both;
          animation: spin ease-in-out 0.5s normal both;
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
}

.arc-red.scrolled{

  clip: rect(0 98px 49px 0);
  height: 98px;
  margin-left: -49px;
  margin-top: -49px;
  width: 98px;
      border: 2px solid black;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
              transition: 1s;
  border:2px solid black;
}

.arc-orange.scrolled{

  clip: rect(0 84px 42px 0);
  height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  width: 84px;
      border: 2px solid black;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
              transition: 1s;
  border:2px solid black;
}


.arc-yellow.scrolled{
  clip: rect(0 70px 35px 0);
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  border: 2px solid black;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  transition: 1s;
  border: 1px solid black;
}

.arc-green.scrolled{clip: rect(0 56px 28px 0);height: 56px;margin-left: -28px;margin-top: -28px;width: 56px;border: 2px solid black;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;transition: 1s;border: 1px solid black;}

.arc-blue.scrolled{clip: rect(0 42px 21px 0);height: 42px;margin-left: -21px;margin-top: -21px;width: 42px;border: 2px solid black;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;transition: 1s;border: 1px solid black;}

.arc-purple.scrolled {clip: rect(0 28px 14px 0);height: 28px;margin-left: -14px;margin-top: -14px;width: 28px;border: 2px solid black;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;transition: 1s;border: 1px solid black;}


@media only screen and (max-width:38.75em) { 


.product-shots li.item{width: 48%;padding: 0;margin: 0;}
  
 

.arc-red{

  clip: rect(0 98px 49px 0);
  height: 98px;
  margin-left: -49px;
  margin-top: -49px;
  width: 98px;
      border: 2px solid black;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
              transition: 1s;
  border:2px solid black;
}

.arc-orange{

  clip: rect(0 84px 42px 0);
  height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  width: 84px;
      border: 2px solid black;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
              transition: 1s;
  border:2px solid black;
}


.arc-yellow{
  clip: rect(0 70px 35px 0);
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  border: 2px solid black;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  transition: 1s;
  border: 1px solid black;
}

.arc-green{clip: rect(0 56px 28px 0);height: 56px;margin-left: -28px;margin-top: -28px;width: 56px;border: 2px solid black;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;transition: 1s;border: 1px solid black;}

.arc-blue{clip: rect(0 42px 21px 0);height: 42px;margin-left: -21px;margin-top: -21px;width: 42px;border: 2px solid black;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;transition: 1s;border: 1px solid black;}

.arc-purple {clip: rect(0 28px 14px 0);height: 28px;margin-left: -14px;margin-top: -14px;width: 28px;border: 2px solid black;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;transition: 1s;border: 1px solid black;}

  .top .logo {
    width: 73PX;
    margin: auto;
    margin-top: -4px;
    margin-left: -35px;
}
  
  .container {
    position: relative;
    top: 160px;
    padding-top: 50vh;
    height: 100px;
    margin-bottom: 390px;
}
  
}