@charset "UTF-8";
 
-------------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
/*--------------------------------------------------------------
2.0 Google Fonts
--------------------------------------------------------------*/
/*To change the fonts, get the font link from (https://www.google.com/fonts) and replace with this line, then update the font-family section below.*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
/*--------------------------------------------------------------
3.0 Set Font-families
--------------------------------------------------------------*/
 
/*--------------------------------------------------------------
4.0 Custom Cursor Styles
--------------------------------------------------------------*/
.custom-cursor {
  cursor: none;
  --top: 0;
  --left: 0;
  --cursor-width: 30px;
  --color: #000000;
  --blending-mode: normal; }
  .custom-cursor .cursor > div {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .custom-cursor .cursor div, .custom-cursor .cursor img, .custom-cursor .cursor svg {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: var(--blending-mode); }

/*Cursor 1*/
.cursor-1 .cursor .cursor-el1 {
  width: var(--cursor-width);
  height: var(--cursor-width);
  border: calc(var(--cursor-width)/25) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-2);
  left: calc(var(--cursor-width)/-2);
  -webkit-transition: all 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: all 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.cursor-1 .cursor .cursor-el2 {
  width: calc(var(--cursor-width)/5);
  height: calc(var(--cursor-width)/5);
  border-radius: 50%;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-10);
  left: calc(var(--cursor-width)/-10); }
.cursor-1.onlink .cursor .cursor-el1 {
  opacity: 0; }
.cursor-1.onlink .cursor .cursor-el2 {
  opacity: 0; }

/*--------------------------------------------------------------
5.0 General Styles
--------------------------------------------------------------*/
.btn-link {
  position: relative;
  color: #f9a806; }
  .btn-link:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: #00e6bf;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease; }
  .btn-link:hover, .btn-link:focus {
    text-decoration: none;
    color: #00e6bf; }
    .btn-link:hover:before, .btn-link:focus:before {
      width: 100%; }

.color-primary {
  color: #f9a806; }

.btn-round {
  border-radius: 150px; }

.menu-header .btn {
  font-size: 0.9em;
  font-weight: 300; }

/*--------------------------------------------------------------
6.0 Page Styles
--------------------------------------------------------------*/
/*Intro Section*/
.intro .product-wrapper {
  position: relative;
  display: inline-block; }
  .intro .product-wrapper img {
    width: 300px; }
  .intro .product-wrapper .scroll-stable {
    position: relative;
    z-index: 99;
    width: 350px; }
.intro .scroll-move {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -150px; }

/*Info Section*/
.info .img-wrapper {
  position: relative; }
  .info .img-wrapper .absolute {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
.info .max-vh-80 {
  max-height: 80vh; }

/*Specs Section*/
.specs .img-wrapper {
  position: relative; }
  .specs .img-wrapper .absolute {
    position: absolute;
    left: 0;
    top: 30px;
    z-index: -1; }


/*--------------------------------------------------------------
11.0 Media Queries
--------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .intro .display-1 {
    font-size: 3rem; }
  .intro .product-wrapper img {
    width: 160px; }
  .intro .product-wrapper .scroll-stable {
    width: 220px; }
  .intro .scroll-move {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -80px; }

 

  .cursor {
    display: none; } }
/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/

/*# sourceMappingURL=styles.css.map */

.auto-lightbox{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  font-size: 0;
}
.auto-lightbox .easing{
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.auto-lightbox .list{

  list-style: none;
  display: block;
  text-align: center;
  padding: 10px 0;
  /* background: #f0f0f0; */
}

 


.auto-lightbox .list .item{
  /* float: left; */
  display: inline-block;
}

.auto-lightbox .thumbnail{
  width: 120px;
  height: 120px;
  display: table;
  float: left;
  position: relative;
  color: inherit;
  border: none !important;
  padding: 0 !important;
  overflow: hidden;
  margin: 8px;
  vertical-align: middle;
  text-decoration: none;
  background-size: cover;
  background-color: #DDD;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;

box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;



}
.auto-lightbox .thumbnail:hover > span{
  opacity: 1;
}
.auto-lightbox .thumbnail > span{
  width: 50%;
  height: 50%;
  display: table-cell;
  position: relative;
  z-index: 1;
  padding: 15px;
  text-align: center;
  background-color: rgba(0,0,0,0.5);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #FFF;
  opacity: 0;
  vertical-align: middle;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.auto-lightbox .large{
  position: fixed;
  width: 100%;
  height: 0;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 0;
  float: left;
  opacity: 1;
}
.auto-lightbox .large > .overlay{
  background-color: rgba(0,0,0,0.75);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.auto-lightbox .img-area{
  position: relative;
  font-size: 0;
  width: 450px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}
.auto-lightbox .img-box{
  position: relative;
  width: 100%;
  height: 100%;
}
.auto-lightbox .img-box > img{
  position: relative;
  width: 100%;
  height: auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.auto-lightbox .img-area > h3{
  margin: 10px 0 0px 0;
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
  color: #EEE;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.auto-lightbox .img-area > p{
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 25.6px;
  font-weight: 400;
  color: #BBB;
}
.auto-lightbox .img-area > h3:empty,
.auto-lightbox .img-area > p:empty{
  display:none;
}
.auto-lightbox .img-box > .arrow{
  position: absolute;
  display: block;
  line-height: 0;
  text-align: center;
  width: 25%;
  height: 100%;
  margin-top: 0;
  top: 0;
  font-size: 0;
  text-decoration: none;
  opacity: 0;
}
.auto-lightbox .img-box > .arrow.left{
  right: 100%;
  margin-right: -25%;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAdBAMAAAHJhqokAAAAKlBMVEX///////////////////////////////////////////////////////9q+00tAAAADXRSTlMAEB8wYGqgstDc7fD2vWP3WQAAAGFJREFUGNNjYBBg4GVAAhdAXAgCcSCAjYEhkYFNgKGQgUGEgYHRAUKBZHIFUAjdALB6WQdMigNE3ABi3gasjLNgRWAbe3EzmWEuupsAYzQSz+CEMRiY1l6B+ZixlzxmtwEAEtoiRddNcp8AAAAASUVORK5CYII=), auto;
}
.auto-lightbox .img-box > .arrow.right{
  left: 100%;
  margin-left: -25%;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAdBAMAAAHJhqokAAAALVBMVEX///////////////////////////////////////////////////////////+g0jAFAAAADnRSTlMAEDBASldgnKDQ2fDx/pJ1BNAAAABnSURBVBjTY2BgYOBmQAJ8DA8gAiDiAURsA4QHpHgYGMQYGBOABIMBUHADWBqVkisAEQkoBEMSiNBTABJMj7Ayn4CY64CYE2TnPKwMCJB+rQBjapPH1HkbAGEwznsOYzwjnsHAAWMAAM+1JERQZw1AAAAAAElFTkSuQmCC), auto;
  /*cursor: url("next.png"), auto;*/
}
.auto-lightbox .large:target {
  display: block;
  padding: 110px 40px 120px 40px;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
}
.auto-lightbox .large:target > .overlay {
  opacity: 1;
  position: fixed;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAXBAMAAAGKwZI7AAAAJ1BMVEX///////////////////////////////////////////////////9Ruv0SAAAADHRSTlMAECAwQFBgcICg0PDDwQf4AAAAoklEQVQY00VNuRHCMBBc4cxyQOxRQB9SQAEElCCGlApogcQlmNwBBRA4cqSivKsHNHO3z+2dAGBgrcARFvhIsn1FNQBmDvuaGXrBjIXSUi+5E3O3699v78Q6ABshXOEiOlKzIUQ67i4fJkmgKxBuMhljWDGG87o752MGeMR63L8xliV4YRG+WBKVSrwaBS5patSnZ/OVrdfKWhbtgsTv33HaAbKUNeliBt8DAAAAAElFTkSuQmC), auto;
}
.auto-lightbox .large:target > .img-area{
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.auto-lightbox .img-box > .arrow::before,
.auto-lightbox .img-box > .arrow::after{
  content: "";
  width: 4px;
  height: 20px;
  background: #FFF;
  display: block;
  position: absolute;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -2px;
  opacity: 1;
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
  transition: all 0.75s ease-in-out;
/*  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg); */
}
.auto-lightbox .img-box > .arrow::before,
.auto-lightbox .img-box > .arrow::after{
  top: 0;
  margin: 60px 0 0 -2px;
}

.auto-lightbox .img-box > .arrow.left::before,
.auto-lightbox .img-box > .arrow.right::after{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.auto-lightbox .img-box > .arrow.left::after,
.auto-lightbox .img-box > .arrow.right::before{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.auto-lightbox .img-box > .arrow.left::before{
  margin-top: 72px;
}
.auto-lightbox .img-box > .arrow.right::before{
  margin-top: 72px;
}