@font-face {
  font-family: "UltraLight";
  src: url("siteElements/fonts/AvenirNext-UltraLight.woff2") format("woff2"),
       url("siteElements/fonts/AvenirNext-UltraLight.woff") format("woff");
}

@font-face {
  font-family: "Regular";
  src: url("siteElements/fonts/AvenirNext-Regular.woff2") format("woff2"),
       url("siteElements/fonts/AvenirNext-Regular.woff") format("woff");
}

@font-face {
  font-family: "Medium";
  src: url("siteElements/fonts/AvenirNext-Medium.woff2") format("woff2"),
       url("siteElements/fonts/AvenirNext-Medium.woff") format("woff");
}

@font-face {
  font-family: "DemiBold";
  src: url("siteElements/fonts/AvenirNext-DemiBold.woff2") format("woff2"),
       url("siteElements/fonts/AvenirNext-DemiBold.woff") format("woff");
}

@font-face {
  font-family: "Bold";
  src: url("siteElements/fonts/AvenirNext-Bold.woff2") format("woff2"),
       url("siteElements/fonts/AvenirNext-Bold.woff") format("woff");
}

@font-face {
  font-family: "Heavy";
  src: url("siteElements/fonts/AvenirNext-Heavy.woff2") format("woff2"),
       url("siteElements/fonts/AvenirNext-Heavy.woff") format("woff");
}

:root {

  --master-width: 800px;

  --col-light: #efefef;
  --col-mid: #878787;
  --col-dark: #252526;
  --col-green: #20dc86;
  --col-yellow: #dfd902;
  --col-orange: #ff4800;
  --col-purple: #da54d8;
  --col-blue: #0092f4;

  --xl-text: 64px;
  --l-text: 48px;
  --m-text: 32px;
  --s-text: 24px;
  --xs-text: 16px;
    
  --xl-padding: 90px;
  --l-padding: 72px;
  --m-padding: 48px;
  --s-padding: 16px;
  --xs-padding: 8px;
 
  --stroke: 2px;
  --stroke-big: 4px;

}

html, body{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;  
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hidden-assets{
    position: absolute;
    left:-100000px;
    top:-1000px;
    width: 1px;
    height: 1px;
    display: none;
}

.outline{
    border: var(--stroke) solid var(--col-dark);
}

.underlinelink{
    text-decoration: underline;
    text-underline-offset: 0.1em;
}

.xs-title{
    font-family: "DemiBold", avenir, sans-serif;
    font-size: var(--xs-text);
    padding-bottom: var(--xs-padding);
}

.bold{
    font-family: "DemiBold", avenir, sans-serif;
}

.s-title{
    font-family: "DemiBold", avenir, sans-serif;
    font-size: var(--s-text);
    padding-bottom: var(--xs-padding);
}

.m-title{
    font-family: "DemiBold", avenir, sans-serif;
    font-size: var(--m-text);
    line-height: 1;
}

.l-title{
    font-family: "DemiBold", avenir, sans-serif;
    font-size: var(--l-text);
    padding-bottom: var(--xs-padding);
    line-height: 1;
    font-family: "DemiBold";

}

.xs-p{
    font-family: "Regular", avenir, sans-serif;
    font-size: var(--xs-text);
}

.s-p{
    font-family: "Regular", avenir, sans-serif;
    font-size: var(--s-text);
    padding-bottom: var(--xs-padding);
}

.m-p{
    font-family: "Regular", avenir, sans-serif;
    font-size: var(--m-text);
    padding-bottom: var(--xs-padding);
    line-height: 1;
}

.s-para{
    padding-top: var(--s-padding);
    font-family: "Regular", avenir, sans-serif;
    font-size: var(--s-text);
}

.m-para{
    padding-top: var(--s-padding);
    font-family: "Regular", avenir, sans-serif;
    font-size: var(--m-text);
}

a{
   color: var(--col-dark);
   text-decoration: none;
}

i{
    font-size: var(--l-text);
    color: var(--col-dark);
}

.header{
    width: 100%;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: var(--col-dark);
}

.header-vid-wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-content: center;
    align-items: center;
    justify-content: center;
}

#headerVid {
  min-height: 100%; 
  min-width: 100%; 

  width: auto; 
  height: auto;

  object-fit: cover;
    
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("siteElements/header-bg-home.jpg");
}

.wrapper{
    width: var(--master-width);
    margin: var(--l-padding);
}

.header .wrapper span{
    font-family: "DemiBold", avenir, sans-serif;
    font-size: var(--s-text);
    background-color: white;
    border: var(--stroke) solid var(--col-dark);
    border-radius: var(--xl-text);
    margin-top: var(--s-padding);
    padding: var(--s-padding);
    display: inline-block;
    cursor: pointer;
    transition: background-color .4s, color .4s;
}

.header .wrapper span:hover{
    background-color: var(--col-dark);
    color: white;
}

.header .wrapper p{
    padding-top: var(--s-padding);
    font-family: "Regular";
    font-size: var(--m-text);
}

h1{
    font-family: "DemiBold", avenir, sans-serif;;
    font-size: var(--xl-text);
    letter-spacing: -.03em;
    line-height: 1;
}

h2{
    font-family: "DemiBold", avenir, sans-serif;;
    font-size: var(--l-text);
    letter-spacing: -.01em;
    line-height: 1; 
    padding-top: var(--xs-padding);

}

.page{
    position: absolute;
    top:100vh;
    left: 0;
    width: 100%;
    color: var(--col-dark);
}

.major-section{
    box-sizing: border-box;
    padding: var(--l-padding);
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section{
    width: var(--master-width);
    margin: var(--l-padding);
}

#nav-wrapper{
    justify-content: center;
    background-color: var(--col-dark);
    width: 100%;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    display:flex;
    transition: top 0.4s;
  z-index: 9;

}

.nav{
  margin: var(--s-padding)  var(--l-padding);
  width: var(--master-width);
  display:flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--xs-text);
  font-family: "DemiBold", avenir, sans-serif;;
  z-index: 9;
}

.nav img{
   width: var(--l-text); 
}

.nav a{
    color: white;
    text-align: center;
    min-width: var(--l-padding); 
    border-radius: var(--m-text);
    padding: var(--s-padding);
    display: inline-block;
    cursor: pointer;
    transition: background-color .4s;
}

.nav a:hover{
    background-color: #3c3c3d;
}

.anchor{
    display: block;
    position: relative;
    top: -40px;
    visibility: hidden; 
}

.underline{
    width:100%;
    border-bottom: var(--stroke) solid var(--col-dark);
    display: block;
}

.platform{
    box-sizing: border-box;
    display: block;
    width:100%;
    display: flex;
    justify-content: space-between;
    padding-top: var(--s-padding);
    flex-wrap: wrap;
    flex-direction: column;
    padding-top: var(--m-padding);
}

.platform-item{
    padding-bottom: var(--s-padding);
}



.bg-image{
    background-image: url("siteElements/header-bg-01.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.content-box{
    background-color: white;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: var(--l-padding);
}

.content-box img, .content-box video{
    max-width: 100%;
    max-height: 50vh;
}

.controls{
    align-items: center;
    display: flex;
    width: 100%;
    padding-top: var(--s-padding);
    padding-bottom: var(--s-padding);
    justify-content: space-between;
}

.button{
   text-align: center;
   border-radius: var(--m-text);
   padding: var(--s-padding);
   display: inline-block;
   cursor: pointer;
   transition: background-color .4s;
}

.button:hover{
    background-color: white;
}

.downloader{
    justify-content: flex-end;
}

.downloader{
    background-color: white;
    margin-right: var(--xs-padding);

}

.downloader:hover{
    color: white;
    background-color: var(--col-dark);
}

.swatch-button{
   z-index: 1;
   width:  22px;
   border-radius: var(--m-text);
   padding: var(--s-padding);
   display: inline-block;
   cursor: pointer;
   transition: opacity .4s;
   opacity: 0.5;
}

.swatch-button:hover{
    opacity: 1;
}

.active-swatch-button{
   z-index: 1;
   width:  22px;
   border-radius: var(--m-text);
   padding: var(--s-padding);
   display: inline-block;
   cursor: pointer;
   transition: opacity .4s;
   opacity: 1;
}

.active-button{
   text-align: center;
   min-width:  var(--s-padding);
   border-radius: var(--m-text);
   padding: var(--s-padding);
   display: inline-block;
   cursor: pointer;
   transition: background-color .4s;
   background-color: var(--col-dark);
   color: white;
}

.weight-dropdown{
    position: relative;
}

.weight-options{
   position: absolute;
   z-index: 1;
   text-align: center;
   border-radius: var(--m-text);
   display: none;
   cursor: pointer;
   background-color: white;
   width: 100%;
}

.weight-options span{
   display: block;
   padding: var(--s-padding);
   transition: color .4s, background-color .4s;
   border-radius: var(--m-text);
}

.weight-options span:hover{
    background-color: var(--col-dark);
    color: white;
}

.spectrum{
    width: 100%;
    height: var(--l-padding);
    background-image: linear-gradient(to right, #20dc86, #dfd902, #ff4800, #da54d8, #0092f4);
}


.color-swatches{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: var(--s-padding);
}

.color-swatches span{
   width: var(--s-padding);
   height: var(--s-padding);
   border-radius: var(--s-text);
   margin-left: var(--xs-padding);
   padding: var(--xs-padding);
   display: inline-block;
   cursor: pointer;
}


.green{
   background-color: var(--col-green);
}

.yellow{
   background-color: var(--col-yellow);
}

.orange{
   background-color: var(--col-orange);
}

.purple{
   background-color: var(--col-purple);
}

.blue{
   background-color: var(--col-blue);
}

.white{
   background-color: white;
}

.light{
/*   border: var(--stroke) solid var(--col-dark);*/
   background-color: var(--col-light);
}

.light-o{
   border: var(--stroke) solid var(--col-dark);
   background-color: var(--col-light);
}


.mid{
   background-color: var(--col-mid);
}

.dark{
   background-color: var(--col-dark);
}

.pad-top{
    padding-top: var(--m-padding);
}

.swatch-info {  
   display: none;
   position: fixed;
   left:0; 
   top:0;
/*   border: var(--stroke) solid var(--col-light);*/
   background-color: white;
   border-radius: var(--s-text);
   padding: var(--s-padding);
    
    font-family: "Regular", avenir, sans-serif;;
    font-size: var(--xs-text);
}

.swatch-copy{  
  text-align: center;
   display: none;
   position: fixed;
   top: var(--s-padding);
   left: 50%;
   transform: translate(-50%, 0);
   background-color: white;
   border-radius: var(--s-text);
   padding: var(--s-padding);
   font-family: "Regular", avenir, sans-serif;;
   font-size: var(--xs-text);
    z-index: 5;
}

.swatch-info span{
   display: block;
}

.gallery{
    position: relative;
}

.gallery img, .gallery video{
    width: 100%;
}

.gallery-images{
  display: flex;
  overflow-x: hidden;
  align-items: flex-start;

  scrollbar-width: none;
  -ms-overflow-style: none;

}

.gallery-images::-webkit-scrollbar {
    display: none;
}

.crops, #logo-animation-displayed video{
    display: none;
}

.active, #logo-animation-displayed video.active{
    display: block;
}

.dots{
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    padding-top: var(--s-padding);
    padding-bottom: var(--s-padding);
}

.dot {
  cursor: pointer;
  height: var(--s-padding);
  width: var(--s-padding);
  margin: 0 var(--xs-padding);
  background-color: var(--col-mid);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.4s;
}

.active, .dot:hover {
  background-color: var(--col-dark);
}


.slider {
    vertical-align:middle;

  -webkit-appearance: none;
  appearance: none;
  height: var(--stroke);
  background: var(--col-dark);
  outline: none; /* Remove outline */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  padding: var(--xs-padding);
  width: var(--s-padding);
  height: var(--s-padding);
  background: white;
  border: var(--stroke) solid var(--col-dark);  
  border-radius: var(--s-padding);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  padding: var(--xs-padding);
  width: var(--s-padding);
  height: var(--s-padding);
  background: white;
  border: var(--stroke) solid var(--col-dark);  
  border-radius: var(--s-padding);
  cursor: pointer;
}


.type-tester{
    background-color: white;
    padding: var(--m-padding);
    font-size: var(--m-text);
}

.UltraLight{font-family: "UltraLight";}
.Regular{font-family: "Regular";}
.Medium{font-family: "Medium";}
.DemiBold{font-family: "DemiBold";}
.Bold{font-family: "Bold";}
.Heavy{font-family: "Heavy";}

.type-tester:focus{
 border: none;
 outline: none;
}

.logo-animations{
    background-color: white;
}

.tile-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: var(--m-padding);
}

.tile{
    background-color: white;
    width:25%;
    flex: 1;
    margin-right: var(--m-padding);
}

.tile:last-of-type{
    margin-right: 0;
}

.tile img{
    background-color: var(--col-mid);
    width: 100%;
}

.tile-text{
    width: 100%;
    padding: var(--s-padding);
}

.hide{
    opacity: 0;
}

.footer{
    width: var(--master-width);
    padding-top: var(--m-padding);
    padding-bottom: var(--l-padding);
}

.footer span, .footer a{
    display: block;
    padding-bottom: var(--xs-padding);
    color: var(--col-light);
}

/*big screens*/

@media screen and (min-width: 1800px)
    
{
    
:root {

  --master-width: 1200px;

  --xl-text: 96px;
  --l-text: 72px;
  --m-text: 48px;
  --s-text: 32px;
  --xs-text: 24px;
 
  --stroke: 3px;
}
    
    
.active-swatch-button{
   width:  var(--s-text);
}
    
.swatch-button{
   width:  var(--s-text);
}
     
}



/*small screens*/


@media screen and (max-width: 980px) and (min-width: 650px)
    
{
    
:root {

  --master-width: 600px;

  --xl-text: 36px;
  --l-text: 36px;
  --m-text: 24px;
  --s-text: 18px;
  --xs-text: 18px;
    
  --xl-padding: 45px;
  --l-padding: 36px;
  --m-padding: 24px;
  --s-padding: 12px;
  --xs-padding: 8px;
 
  --stroke: 2px;
}
  


    
.active-swatch-button{
   width:  var(--m-text);
}
    
.swatch-button{
   width:  var(--m-text);
}
    
}


/*mobile*/


@media screen and (max-width: 690px),

    @media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3),
    
    @media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2),
    
    @media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3)
    
{
    
:root {

  --master-width: 100%;

  --xl-text: 9vw;
  --l-text: 9.5vw;
  --m-text: 6.5vw;
  --s-text: 5vw;
  --xs-text: 5vw;
    
  --xl-padding: 7vw;
  --l-padding: 5vw;
  --m-padding: 5vw;
  --s-padding: 3vw;
  --xs-padding: 2vw;
 
  --stroke: 2px;
}
    
.header .wrapper p{
    font-size: var(--s-text);
}
    


.header-vid-wrapper{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}
    
.header .wrapper p{
    padding-top: 0;
}

    
#headerVid {
  min-height: auto; 
  min-width: 100%; 
  width: auto; 
  height: 100%;
}
    
.controls{
    flex-direction: column-reverse;   
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}
    
.controls div{
    padding-bottom: var(--s-padding);
}

.nav{
  display: none;
}
    
.bg-image{
    background-attachment: scroll;
}
    
.platform-item{
    width: 100%;
    box-sizing: border-box;
    flex: none;
    padding-bottom: var(--s-padding);
}
    
.active-swatch-button{
   width:  var(--s-padding);
   height:  var(--s-padding);
}
    
.swatch-button{
   width:  var(--s-padding);
   height:  var(--s-padding);
}
    
.button, .active-button{
   padding: var(--xs-padding) var(--s-padding);
   display: inline-block;
}

.tile:nth-child(2){
    margin-right: 0;
}

.hide{
    display: none;
}

    
}