@font-face{
  font-family:"Stylex Avant Garde Gothic Pro";
  font-weight:bold;
  src:url("../fonts/Stylex-AvantGardePro-Bold.woff2") format("woff2"),
    url("../fonts/Stylex-AvantGardePro-Bold.woff") format("woff"),
    url("../fonts/Stylex-AvantGardePro-Bold.ttf") format("truetype");
}

/* Utils */
.sr-only{ position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }



html {}

body {
  font-family:"Helvetica Neue", helvetica, arial, sans-serif;
  padding:0 auto;
	margin:0 auto;
}
.container {
  padding-left:20px;
  padding-right:20px;
  margin:0 auto;
  max-width:1540px;
}
@media screen and ( min-width:960px ) {
  .container {
    padding-left:50px;
    padding-right:50px;
  }
}

a { color:#000; }


/* Header */
header { 
  display:flex;
  justify-content:space-between;
  padding-top:26px;
  margin-bottom:25px; 
}

  /* Header - Home Link */
  .home { 
    background-image:url('../imgs/home.svg');
    background-repeat:no-repeat;
    background-size:100%;
    height:22px;
    width:22px;
  }

  /* Header - Logo */
  .logo { 
    background-image:url('../imgs/stylex-logo.svg');
    background-repeat:no-repeat;
    background-size:100%;
    height:35px;
    width:110px;
  }

  /* Header - Nav */
  .nav-trigger {
    display: flex;
    flex-flow: column;
    gap: 8px;
  }
  .nav-trigger .nav-title {
    position:absolute;
    right:50px;
    text-decoration:none;
  }
  .nav-trigger .top, .nav-trigger .middle, .nav-trigger .bottom {
    background:#000;
    height:2px;
    width:25px;
  }

  .mainnav-holder {
    background:#fff;
    box-shadow:0 3px 10px rgb(0 0 0 / 0.2);
    opacity:0;
    pointer-events:none;
    transition:opacity 250ms;
    padding:60px 32px 30px 30px;
    position:absolute;
    right:-36px;
    top:-30px;
    z-index:6;
  }
  .nav-active .mainnav-holder { 
    opacity:1; 
    pointer-events:auto;
  }
  
  
  .nav-close {
    position:absolute;
    right:30px;
    top:40px;
    width:35px;
    height:35px;
  }
  .nav-close::before, .nav-close::after {
    background:#000;
    content:'';
    display:block;
    height:2px;
    position:absolute;
    transform:rotate(45deg);
    width:35px;
  }
  .nav-close::after { transform:rotate(-45deg); }
  nav { position:relative; }
  nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
  }
  nav ul li { white-space:nowrap; }
  nav ul a { text-decoration:none; }
  nav ul a:hover { color:#808080; }
  nav ul li.active a { color:#808080; }

  nav ul {
    font-size:15px;
    line-height:1.4em;
  }
  @media screen and (min-width:768px) {
    nav ul {
      font-size:30px;
    }
  }




/* Title */
#title {
  margin-bottom:20px;
  text-transform:uppercase;
}


/* Hero */
#hero { 
  margin-bottom:50px; 
  position:relative;
}
@media screen and (min-width:768px ) { #hero {  margin-bottom:100px; } }
#hero img { max-width:100%; }
#hero .previous, #hero .next { 
  background-repeat:no-repeat;
  background-size:100%;
  height:55px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:25px;
  z-index:1;
}
#hero .previous { 
  background-image:url(../imgs/left-white.svg);
  left:30px;
}
#hero .next { 
  background-image:url(../imgs/right-white.svg);
  right:30px;
}
#hero .download {
  position:absolute;
  right:10px;
  bottom:12px;
  width:20px;
  height:21px;
  background-image:url("../imgs/download@2x.png");
  background-repeat:no-repeat;
  background-size:100%;
}
.responsive-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.map { position:relative;}
.map .product { 
  overflow:hidden;
  position:absolute; 
  z-index:1;
}

.map .trigger { 
  background-image:url('../imgs/marker.svg');
  background-size:100%;
  background-repeat:no-repeat;
  border-radius:50%;
  display:block;
  height:20px;
  width:20px;
}
@media screen and (min-width:768px) {
  .map .trigger { 
    height:40px;
    width:40px;
  }
}
.map .product-info { 
  background: #fff;
  box-shadow:0 3px 10px rgb(0 0 0 / 0.2);
  font-size:14px;
  opacity:0;
  pointer-events:none;
  padding: 20px 20px 20px;
  position: absolute;
  width: 200px;
  transition:opacity 250ms;
}
.product-info .title {
  font-family:"Stylex Avant Garde Gothic Pro";
}
.map .product.active { 
  overflow:visible; 
  z-index:2;
}
.map .product.active .product-info {
  opacity:1;
  pointer-events:auto;
}

/* Positioning */
.map .on-left .product-info { right:0; }
.map .in-middle .product-info { left:10px;transform:translateX(-50%); } /* <= 20px is half of circle width */
.map .on-right .product-info { left:0; }
.map .on-top .product-info { bottom:30px; }
.map .on-bottom .product-info { top:30px; }

@media screen and (min-width:768px) {
  .map .on-left .product-info { right:0; }
  .map .in-middle .product-info { left:20px;transform:translateX(-50%); } /* <= 20px is half of circle width */
  .map .on-right .product-info { left:0; }
  .map .on-top .product-info { bottom:50px; }
  .map .on-bottom .product-info { top:50px; }
}




/* Main */
#main { 
  display:grid;
  grid-template-columns: 1fr 70% 1fr;
  margin-bottom:50px;
}
@media screen and (min-width:768px ) {
  #main { 
    grid-template-columns: 1fr 500px 1fr; 
    margin-bottom:100px;
  }
}
@media screen and (min-width:920px ) {
  #main { grid-template-columns: 1fr 768px 1fr; }
}
/* #main .previous, #main .next { 
  /* align-self:center; 
  margin-top:110px;
  background-repeat:no-repeat;
  background-size:100%;
  height:55px;
  width:25px;
}
#main .previous { background-image:url(../imgs/left.svg);}
#main .next { background-image:url(../imgs/right.svg);justify-self:end; }


.previous { background-image:url(../imgs/left.svg);}
#hero .map .next { background-image:url(../imgs/right.svg);justify-self:end; } */

#main .content { text-align:center;}
h1 { 
  font-size:50px;
  line-height:1em;
  letter-spacing: -3px; 
  margin:0;
}
@media screen and (min-width:768px) {
  h1 { font-size:75px }
}
h2 {
  font-weight:normal;
}
p {
  font-size:20px;
  line-height:24px;
}



/* Thumbnails */
#thumbnails { 
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:20px;
  margin-bottom:30px;
}
#thumbnails img { max-width:100%;}
.modal {
  align-items:center;
  background:rgba(0,0,0,0.8);
  opacity:0;
  pointer-events:none;
  display:grid;
  inset:0;
  justify-items:center;
  position:fixed;
  z-index:9;
  transition:opacity 500ms;
  overflow:scroll;
}
.modal.active { 
  opacity:1;
  pointer-events:auto;
}
.modal .stage {
  inset:100px 100px auto;
  position:absolute;
  width:calc( 100% - 200px );
}
.modal img {
  display:block;
  width:100%;
}
.modal .close {
  background:#fff;
  height:50px;
  width:50px;
  position:absolute;
  right:0;
  top:0;
}
.modal .close::before, .modal .close::after {
  background:#000;
  content:'';
  display:block;
  height:2px;
  position:absolute;
  transform:rotate(45deg);
  width:35px;
  left:8px;
  top:24px;
}
.modal .close::after { transform:rotate(-45deg); }
.modal .download {
  background-image:url("../imgs/download@2x.png");
  background-repeat:no-repeat;
  background-size:100%;
  bottom:10px;
  height:21px;
  position:absolute;
  right:10px;
  width:20px;
}
.modal .download.hidden { display:none; }


/* Footer */
footer { 
  color:#808080;
  font-size:14px;
  line-height:17px;
  letter-spacing: 0.7px;
  margin-bottom:30px;
  text-align:center;
  text-transform: uppercase;
}