/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('../fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v25-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v25-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local(''),
       url('../fonts/montserrat-v25-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v25-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(''),
       url('../fonts/montserrat-v25-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/montserrat-v25-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  
}

body {
  font-family: sans-serif;
  background-color: white;
  transition: 200ms 0s linear;
  overflow-x: hidden;
  max-width: 45em;
  margin-inline: auto;
}


html {
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: black;
}

.navigation-header {
  min-height: 3em;
  
  width: 100%;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(1rem);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.5s 0s linear;
}
.navigation-header h3{
  width: 100%;
  font-size: 1.05em;
  font-weight: 500;
  text-align: center;
  padding-bottom: 0.75em;
  padding-top: 0.5em;
  color: white;
  background-color: #000;
}
.navigation-footer {
  height: 4em;
  width: 100%;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(2rem);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  transition: 200ms 0s linear;
  transform: translateY(4em);
}

.mobile-navigation-bar-toggle {
  display: none;
}

.navigation-bar-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 1.5em;

}

.navigation-bar-button {
  margin: 0 1em;
  font-size: 0.9em;
}

.navigation-bar-logo {

  width: 12em;
  height: 2.5em;
  background: url("assets/images/logo-mike.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  -webkit-filter: invert(0%);
}
.navigation-bar-logo.inverted {

  background: url("assets/images/lightnote-logo-light.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.navigation-bar-cta {
  margin: 00.5em;
  margin-right: 1.5em;
  margin-left: auto;
  font-weight: 400;
  font-size: 0.85em;
  padding: 0.9em;
  color: white;
  background-color: #0088FF;
  border-radius: 4px;
  text-align: center;
}


.navigation-footer>h2 {
  font-size: 1em;
  font-weight: 600;
  margin-left: 1.5em;
}

@media (max-width: 35em) {
  .mobile-navigation-bar-toggle {
    display: block;
    position: absolute;
    top: 1em;
    right: 1em;
    width: 3em;
    aspect-ratio: 1;
    z-index: 9999;
  }

  .navigation-bar-buttons {
    position: fixed;
    background: rgb(255, 255, 255);

    z-index: 1000;
    width: 70vw;
    height: 100vh;
    inset: 0 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    transition: 400ms;
  }

  .navigation-bar-buttons[data-visible="true"] {
    transform: translateX(0%);
  }

  .navigation-bar-button {
    margin: 2em 0;
  }

}

@supports (backdrop-filter: blur(2rem)) {

  .navigation-footer {
    background: hsl(0 0% 100% / 0.99);

  }

}

.top-margin {
  height: 4em;
  width: 1em;
}
.top-margin-checkout{
  height: 3em;
  width: 1em;
}
.splash-area{
  width: 100%;
  min-height: 105vh;
  overflow: hidden;
  position: relative;
  background-color: #000;
}
.splash-area h4{
  font-size: 0.8em;
  font-weight: 700;
  margin: 0.5em;
  color: white;
  margin-bottom: 1.5em;
}
.first-flash{
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.5s 1s linear;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.first-flash.active{
  opacity: 1;
}

.first-flash h1{
  font-size: 12em;
  font-weight: 900;
  line-height: 1em;
  background: linear-gradient( #000, #333333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.second-flash{
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: end;
  transition: all 1s 1.5s linear;
  opacity: 0;
  
}
.intro-image{
  min-height: 70vh;
  width: 100%;
  opacity: 1;
  
  background-image: url(assets/images/holdingkeys-min.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: auto;
}
.hero-spinner{
  min-height: 38vh;
  width: 100%;
  opacity: 1;
  position: absolute;
  top: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url(assets/images/gloves.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.second-flash.active{
  opacity: 1;
}

.second-flash h1{
  font-size: 12em;
  font-weight: 900;
  line-height: 1em;
  background: linear-gradient( #000, #333333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-image h5{
  font-size: 1.3em;
  font-weight: 500;
  padding-inline: 1em;
  margin-top: 10em;
  color: white;
  text-shadow: #000 3px 3px 5px;
}
.intro-image h6{
  font-size: 2em;
  font-weight: 800;


  color: white;
  margin-bottom: 1.5em;
}
.hero-spinner h5{
  font-size: 1.4em;
  font-weight: 700;
  padding: 1em;
  margin-top: 6em;
  color: white;
  margin-bottom: 1.5em;
}
.hero-spinner h4{
  font-size: 0.8em;
  font-weight: 700;
  margin: 0.5em;
  color: white;
  margin-bottom: 1.5em;
}
.floating-spinner{
  width: 40%;
  aspect-ratio: 0.7;
  background: url(assets/images/00.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;

}
#a{
  top: 10%;
  left: 10%;
  animation: float-a 1.5s ease-in-out infinite alternate;
  background: url(assets/images/00.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#b{
  top: 50%;
  left: 70%;
  animation: float-b 10s ease-in-out infinite alternate;
  background: url(assets/images/11.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#c{
  top: 80%;
  left: 5%;
  animation: float-c 5s ease-in-out infinite alternate;
  background: url(assets/images/22.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes float-a {
  from {
    transform: translate(0px, 20px) rotate(5deg);
  }

  to {
    transform: translate(0px,0px) rotate(0deg);
  }
}

@keyframes float-b {
  from {
    transform: translate(5px, 5px) rotate(359deg);
  }

  to {
    transform: translate(0px,0px) rotate(0deg);
  }
}
@keyframes float-c {
  from {
    transform: translate(20px, 20px) rotate(-40deg);
  }

  to {
    transform: translate(0px,0px) rotate(0deg);
  }
}
.vision-container{
  text-align: center;
  font-size: 1.1em;
  padding: 1em;
  padding-block: 4em;
  background-color: #eee;
}

.purchase-options{
  padding: 0.75em;
  padding-top: 0.75em;
  padding-bottom: 0em;
  width: 100%;
  min-height: 100px;
}
.purchase-option{
  
  background-color: #eeeeee;
  width: 100%;
  min-height: 150px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.75em;
}
.purchase-option-image{
  width: 35%;
  height: 175px;
  background-image: url(assets/images/2spinners.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#one-spinners{
  background-image: url(assets/images/00.png);
  padding: 2em;
}
#three-spinners{
  background-image: url(assets/images/3spinners.png);
  padding: 2em;
  height: 175px;
}
.purchase-description{
  width: 65%;
  padding-left: 1em;
}
.purchase-option h2{
  font-size: 1em;
  font-weight: 700;
  
}
.purchase-option h5{
  font-size: 0.7em;
  font-weight: 600;
  color: red;
  margin-bottom: 0.5em;
  
}
.purchase-option h3{
  font-size: 0.9em;
  font-weight: 500;
  margin-top: 0.2em;
  
}
span{
  color: rgb(233, 0, 0);
}
.purchase-option b{
  font-size: 0.8em;
  font-weight: 400;
  
}
.spacing-em{
  height: 0.65em;
  width: 1;
}
.customize-button{
  width: 100%;
  padding: 0.7em;
  color: black;
  background-color: #eeeeee;
  border: black solid 2px;
  border-radius: 3px;
  text-align: center;
  /* transition: all 0.05s; */
  cursor: pointer;
  font-size: 0.9em;
}
.customize-button:hover {
  color: white;
  background-color: black;
  /* border: black solid 2px; */
}
.customize-button:active {

	transition: all 0.001s;
  color: white;
  background-color: black;
}
.customization-container{
  width: 100%;
  padding-inline: 1em;
  max-height: 0px;
  overflow: hidden;
  transition: all 0.5s 0s linear;
}
.customization-container.active {
  max-height: 100vh;
  
}
.customization-container h2{
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 1em;
  margin-top: 1.5em;
}
.customization-container h3{
  font-weight: 600;
  font-size: 1.05em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.spinners-images-container{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  touch-action: none;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
.pinch-container{
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.pinch-container p{
  margin-left: 5px;
}
.pinch-image{
  height: 35px;
  width: 35px;
  background: url("assets/images/zoom-in.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spinners-image.active{
  width: 30%;
  min-height: 10em;
  background: url(assets/images/00.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  
}
.spinners-image{
  width: 30%;
  min-height: 10em;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.45), 
    rgba(255, 255, 255, 0.45)
  ), url(assets/images/00.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#hat-image0{
  width: 90%;
  height: 100%;
  background: url(assets/images/hat-image0.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hat-image1{
  width: 90%;
  height: 100%;
  background: url(assets/images/hat-image1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hat-image2{
  width: 90%;
  height: 100%;
  background: url(assets/images/hat-image2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hat-image3{
  width: 90%;
  height: 100%;
  background: url(assets/images/hat-image3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#hat-image4{
  width: 90%;
  height: 100%;
  background: url(assets/images/hat-image4.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hat-image5{
  width: 90%;
  height: 100%;
  background: url(assets/images/hat-image5.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#tee-image0{

  width: 90%;
  height: 100%;
  background: url(assets/images/tee-image0.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#tee-image1{
  width: 90%;
  height: 100%;
  background: url(assets/images/tee-image1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#tee-image2{
  width: 90%;
  height: 100%;
  background: url(assets/images/tee-image2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#tee-image3{
  width: 90%;
  height: 100%;
  background: url(assets/images/tee-image3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hoodie-image0{
  width: 90%;
  height: 100%;
  background: url(assets/images/hoodie-image0.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hoodie-image1{
  width: 90%;
  height: 100%;
  background: url(assets/images/hoodie-image1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hoodie-image2{
  width: 90%;
  height: 100%;
  background: url(assets/images/hoodie-image2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#hoodie-image3{
  width: 90%;
  height: 100%;
  background: url(assets/images/hoodie-image3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#bottle-image0{
  width: 100%;
  height: 100%;
  background: url(assets/images/bottle-image0.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#bottle-image1{
  width: 100%;
  height: 100%;
  background: url(assets/images/bottle-image1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#bottle-image2{
  width: 100%;
  height: 100%;
  background: url(assets/images/bottle-image2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}



.design-picker-container, .color-picker-container{
  display: flex;
  
}
.color-picker-container{
  margin-bottom: 2em;
  
}
.design-option{
  background-color: #eeeeee;
  width: 4.3em;
  height: 5.4em;
  margin: 0.35em;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.design-option.active{
  border: black solid 2px;
}
#karambit{
  background-image: url(assets/images/00.png);
  width: 3.1em;
  height: 3.9em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#jett{
  background-image: url(assets/images/20.png);
  width: 3.1em;
  height: 3.9em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#japanese{
  background-image: url(assets/images/10.png);
  width: 3.1em;
  height: 3.9em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.color-option{
  background-color: black;
  width: 2.8em;
  height: 2.8em;
  border-radius: 1.4em;
  margin: 0.35em;
  cursor: pointer;
  
}
.size-option-t{
  background-color: #EEEEEE;
  width: auto;
  padding-inline: 15px;
  height: 2.8em;
  border-radius: 3px;
  margin-right: 5px;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.size-option-t.active{
  border: solid 2px #000;
}
.size-option-h{
  background-color: #EEEEEE;
  width: auto;
  padding-inline: 15px;
  height: 2.8em;
  border-radius: 3px;
  margin-right: 5px;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.size-option-h.active{
  border: solid 2px #000;
}
.color-option#red{
  background-color: rgb(255, 49, 49);
}
.color-option#blue{
  background-color: rgb(58, 58, 255);
}
.color-option#green{
  background-color: rgb(4, 207, 4);
}
.color-option#white{
  background-color: white;
  border: black dashed 2px;
}
.color-option.active#white{
  border: black solid 2px;
}
.color-option.active{
  border: black solid 2px;
}
.finish-container{
  display: flex;

}
.first-button{
  background-color: black;
  /* margin-right: 0.5em; */
  border-radius: 7px;
  color: white;
  width: 0px;
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 1em;
  flex: none;
  overflow: hidden;
  transition: all 0.2s 0s linear;
}
.first-button.active{
  width: 3.5em;
  margin-right: 0.5em;
}
.second-button{
  background-color: black;
  /* margin-right: 0.5em; */
  border-radius: 7px;
  color: white;
  width: 0px;
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 1em;
  flex: none;
  overflow: hidden;
  transition: all 0.2s 0s linear;
}
.second-button.active{
  width: 3.5em;
  margin-right: 0.5em;
}
.finish-button{
  background-color: black;
  margin-inline: auto;
  border-radius: 7px;
  color: white;
  width: 100%;
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 1em;
}
.finish-container h4{
  font-size: 0.96em;
  font-weight: 600;
}





.community-posts{


}
.community-posts-text{
  padding: 1em 1em 1em 1em;
  width: 100%;
  text-align: center;
}
.community-post-row{
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  padding-left: 1em;
  align-items: center;
}
.community-posts h2{
  margin-inline: auto;
  text-align: center;
  font-size: 1.3em;
  margin-top: 1em;
}
.community-posts b{
 
  font-size: 0.9em;
  font-weight: 400;

  
}
.community-post{
  padding: 1em 1em 1em 0em;
}
.stay-tuned{
  min-width: 13em;
  
}
.stay-tuned h2{
  font-size: 2em;
  text-align: left;
  margin: 0em;
}
.post-image{
  width: 15em;
  height: 20em;
  border-radius: 3px;
  background: url(assets/images/post0.png);
  background-size: cover;
  background-position: center;
}
.post-image#post1{
  width: 15em;
  height: 20em;
  border-radius: 3px;
  background: url(assets/images/post1.png);
  background-size: cover;
  background-position: center;
}
.post-image#post2{
  width: 15em;
  height: 20em;
  border-radius: 3px;
  background: url(assets/images/post2.png);
  background-size: cover;
  background-position: center;
}


.promises-container{
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  margin-inline: auto;
}
.promises-container h2{
  font-size: 1.2em;
  font-weight: 800;
  margin-bottom: 0.75em;
  text-align: center;
}
.promises-container b{
  font-size: 1.02em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2em;

}
.live-purchase-notifier{
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.live-flasher-container{
  height: 3em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-block: 0.5em;
  border: black solid 1px;
  border-radius: 1.5em; */
}
.live-flasher-container h2{
  font-size: 1.3em;

}
.live-flasher{
  height: 1.5em;
  width: 1.5em;
  border-radius: 0.75em;
  background-color: red;
  margin: 0.25em;
  animation: flash 1.5s ease-in-out infinite;
}
@keyframes flash {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.live-flasher-container h2{
  margin: 0.25em;
}
.last-purchase{
  width:70%;
  height: 50vw;
  max-height: 15em;
  margin-bottom: 2em;
  background-image: url(assets/images/52611.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.purchase-counters-row{
  display: flex;
  width: 90%;
  justify-content: space-evenly;
  align-content: space-evenly;
  margin-block: 0.75em;
}
.purchase-counter{
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-content: center;
  
}

.purchase#two{
  color: rgb(109, 109, 109);
}
.purchase#three{
  color: rgb(196, 196, 196);
}
.purchase h3{
  font-size: 1.1em;
  text-align: center;
  
}
.purchase h4{
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1.4em;
  font-weight: 400;
  text-align: center;
}
.free-shipping{
  width:40%;
  height: 40vw;
  max-height: 15em;
  margin-bottom: 2em;
  margin-top: 2em;
  background-image: url(assets/images/3273391.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 2s 0s linear;
}
.free-shipping.active{
  opacity: 1;
}
.money-back{
  width: 40%;
  height: 40vw;
  max-height: 15em;
  margin-bottom: 2em;
  background-image: url(assets/images/145034.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 2s 0s linear;
}
.money-back.active{
  opacity: 1;
}


.fill-page{
  min-height: 90vh;
}
.drop-down-red{
width: 16px;
height: 16px;
background: url(assets/images/icons8-expand-arrow-30.png);
margin-inline: 0.2em;
background-position: center;
background-size: contain;
}
.checkout-navigation{
  font-size: 0.8em;
  font-weight: 500;
  padding: 1em;
  padding-bottom: 0em;
  color: gray;
}
.checkout-navigation span{
  font-weight: 600;
}
.cart-heading {
  margin-bottom: 1em;
  margin-top: 1em;
  font-size: 1.2em;
}

.cart-table {
  width: 95%;
  max-width: 80em;
  margin-inline: auto;
  display: none;
  flex-direction: column;
  
}

.cart-table-header {
  background-color: rgb(235, 235, 235);
  width: 100%;
  height: auto;
  padding: 1em;
  padding-right: 2em;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
}

.cart-table-header h2 {
  font-size: 1em;
  font-weight: 600;

}

.cart-table-entry {
  display: flex;
  padding: 1em;
  padding-left: 0;
  align-items: center;
  justify-content: left;
}

.item-image {
  width: 4em;
  height: 5.7em;

  background-size: cover;
}

.item-description {
  padding-left: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: pre-line;
}

.item-description h3 {
  font-size: 0.9em;
  font-weight: 400;
}

.item-description h4 {
  font-size: 1.05em;
  font-weight: 700;
  text-align: left;
  white-space: pre-line;
  margin-bottom: 0.5em;
}

.cart-table-entry h6 {
  margin-inline: 1em;
  font-size: 1em;
  font-weight: 400;
  margin-left: auto;
}
.cart-table-entry h7{
  font-size: 1.3em;
  font-weight: 600;
}
.cart-table-footer {
  margin-top: 1em;
  border: 1px solid rgb(235, 235, 235);
  padding: 1em;

  
}
.cart-table-footer-row {
  margin-bottom: 0.5em;
  display: flex;
  justify-content: right;
  align-items: center;
}
.cart-table-footer-main {
  margin-top: 1em;
  border: 1px solid rgb(235, 235, 235);
  padding: 1em;
  display: flex;
  justify-content: right;
  align-items: center;
}
.cart-table-footer-main b {
  margin-right: auto;
  font-weight: 300;
  font-size: 0.8em;
  text-align: left;
}
.cart-table-footer-main h3 {
  font-size: 1em;
  margin-right: 0.5em;
}
.cart-table-footer b {
  margin-right: auto;
  font-weight: 300;
  font-size: 0.8em;
  text-align: left;
}

.cart-table-footer h3 {
  font-size: 1em;
  margin-right: auto;
}

.cart-table-footer h4 {
  font-size: 1em;
  margin-right: 0.5em;
}
.cart-table-footer h5 {
  font-size: 0.8em;
  font-weight: 400;
  margin-right: 0.5em;
}
#order-summary{
  padding: 1em;
  padding-inline: 1.5em;
  width: 100%;
  background-color: #eee;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-bottom: 2em;
}
#order-summary h3{
  font-size: 0.9em;
  font-weight: 500;
}
#order-summary h4{
  font-size: 1.05em;
  font-weight: 600;
  margin-left: auto;
}

.proceed-to-checkout{
  margin-top: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 5px;
  color: white;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  padding: 1em;
}
#paypal-button-container {
  margin-top: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
#h22{
  text-align: center;
  width: 100%;
  margin-block: 0.5em;
  font-size: 1.1em;
}
.poweredby-container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3em;
}

.poweredby-container p{
  font-size: 0.7em;
  color: gray;
}
.meps-logo{
  background-image: url(/assets/images/logo-red.png); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 25px;
  width: 50px;
  margin-inline: 0.3em;
}
.or-seperator{
  margin-block: 1.2em;
  margin-inline: auto;
  font-size: 0.75em;
  font-weight: 600;
  color: gray;
  text-align: center;
  margin-top: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1em;
}
.seperator-line{
  height: 1px;
  width: 40%;
  flex: none;
  background-color: gray;
  margin-inline: 0.5em;
}
.relative-container{
  position: relative;
}
.shipping-container {
  max-width: 45em;
  padding: 1em;
  padding-top: 0em;
  margin-top: 1em;
  opacity: 1;
  transition: all 300ms 300ms linear;
  height: 100%;
}
.shipping-container#payment-container{
  transition: all 300ms 300ms linear;
  
}
.shipping-container.hidden {
  opacity: 0;
  height: 50vh;
}
.shipping-container h1{
  font-size: 1.1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.shipping-container h1 span
{
  color: grey;
  margin-right: 0.5rem;
}
.shipping-container p{
  font-size: 0.9em;
  color: rgb(53, 53, 53);
  
}
.form {
  display: grid;
  grid-gap: 1rem;
}
form{
  display: grid;
  grid-gap: 1rem;
}
.field {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  padding: .5rem;
  border-radius: .25rem;
}

.field__label {
  color: rgb(63, 63, 63);
  font-size: 0.6rem;
  font-weight: 300;
  
  margin-bottom: 0.25rem
}

.field__input {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-weight: bold;
  font-size: 0.85em;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
}
.field:focus-within {
  border: 2px solid black;
}

.fields {
  display: grid;
  grid-gap: 1rem;
}
.fields--2 {
  grid-template-columns: 1fr 1fr ;
}
.fields--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

#card-field{
  margin-top: 1em;
}

.button {
  background-color: rgb(34, 34, 34);
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
  color: #fff;
  width: 100%;
  padding: 0.5rem;
  height: 3.7em;
  border-radius: 0.25rem;
  border: 0;
  cursor: pointer;
  outline: 0;
  margin-top: 2em;
}
#payment-button{
  background-color: #000;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  color: #fff;
  width: 100%;
  padding: 1rem;
  height: 4em;
  border-radius: 0.25rem;
  border: 0;
  cursor: pointer;
  outline: 0;
  margin-top:0.5em;
}
#proceed-button{
  background-color: #000;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  color: #fff;
  width: 100%;
  padding: 1rem;
  height: 4em;
  border-radius: 0.25rem;
  border: 0;
  cursor: pointer;
  outline: 0;
  margin-top:0.5em;
  text-align: center;

}
#back-to-shipping{
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  margin-top: 1em;
  cursor: pointer;
}
.button:focus-visible {
  background-color: #333;
}
.footer {
  margin-top: 1em;
  background-color: #eee;
  padding: 1em 0.5em;
  display: flex;
  flex-direction: column;

  align-items: top;
}
.footer h2{
  margin: 1em;
  margin-block: 0.75em;
  font-size: 1.2em;
}
.footer h3{
  margin: 1em;
  margin-block: 0.2em;
  font-size: 1.05em;
  font-weight: 400;
}
.socials{
  display: flex;
  margin-left: 1em;
  margin-top: 1em;
}
.instagram-logo {
  width: 2.5em;
  height: 2.5em;
  background: url(assets/images/Instagram-Logo-300x300._5EJg6b8A0Fp8.thumb.png);
  background-size: contain;
  margin-inline: 0.5em;

  flex: none;
}

.facebook-logo {
  width: 2.5em;
  height: 2.5em;
  margin-inline: 0.5em;
  background: url(assets/images/Black-Facebook-Logo-Transparent-Background.png);
  background-size: contain;
  flex: none;
}
.visa-logo {
  width: 4em;
  height: 2.5em;
  margin-inline: 0.5em;
  background: url(assets/images/VISA-logo\(1\).png);
  background-size: contain;
  flex: none;
}
.paypal-logo{
  width:7em;
  height: 2.5em;
  margin-inline: 0.5em;
  background: url(assets/images/paypallogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  flex: none;
}
.mastercard-logo {
  width: 4em;
  height: 2.5em;
  margin-inline: 0.5em;
  background: url(assets/images/Mastercard-Logo.wine.png);
  background-size: contain;
  flex: none;
}

.footer-buttons-container {

  flex: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: left;
}

.margin-top-footer {
  height: 2.5em;
}

.footer-buttons {
  margin: 1.1em;
  flex: none;
  font-size: 0.9em;
}

.thank-you-container#page {
  
  top: 5em;
  padding: 1em;
  margin-inline: auto;
  width: 95%;
  background-color: white;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.thank-you-badge{
  width: 80%;
  height: 30vh;
  background: url(assets/images/thank-you.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-inline: auto;
}
.thank-you-container h1{
  font-weight: 900;
  font-size: 2em;
  text-align: center;
}
.thank-you-container b{
  font-weight: 400;
  font-size: 1.2em;
  text-align: center;

}
@media (min-width: 35em) {
  body {
    background-color: white;
  }

  .hero-shot-container {
    max-width: 40em;
    margin-inline: auto;
  }

  .specifications-shot-container {
    max-width: 40em;
    margin-inline: auto;
  }

  .problem-statement-container {
    max-width: 40em;
    margin-inline: auto;
    min-height: 80vh;
  }
  .stat-benefit-row-column{
    display: flex;
    flex-direction: row;
    justify-content: center;
    
  }
  .planner-option-container {
    max-width: 40em;
    margin-inline: auto;
  }

  

  .buy-now-container {
    max-width: 40em;
    margin-inline: auto;
  }
  .item-image{
    width: 6em;
  }
  .planner-specifications-text-container>b {
    font-size: 1.15em;
  }

  .buy-now-row-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .buy-now-description {
    width: 50%;
  }

}

@media (min-width: 55em) {
  body {
    background-color: white;
  }

  .intro-column-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .intro-text-container{
    max-width: 35em;
    margin-left: 5em;
  }

  .intro-video-section h1 {
    padding-inline: 1em;
    text-align: left;
  }

  .intro-video-section h2 {
    text-align: left;

  }

  .hero-shot-container {
    max-width: 90em;
    margin-inline: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .hero-shot-text-container{
    max-width: 30em;
  }

  .specifications-shot-container {
    max-width: 90em;
    margin-inline: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .specifications-shot-text-container {
    max-width: 35em;
    min-width: 25em;
    order: -1;
    margin-inline: 4em;
  }

  .problem-statement-container {
    max-width: 90em;
    margin-inline: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 75vh;
  }

  .problem-image0 {
    margin-inline: 4em;
  }

  .problem-image1 {
    order: 2;
    margin-inline: 4em;
  }

  .problem-image3 {
    order: 2;
    margin-inline: 4em;
  }

  .problem-statement-text-container {
    max-width: 30em;
  }

  .planner-option-container {
    max-width: 75em;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
  }

  .planner-specifications-container {
    border-radius: 0px 7px 7px 0px;
    justify-content: center;
    align-items: center;
    min-height: 30em;
  }

  .planner-image-container {
    margin-left: 1em;
    border-radius: 7px 0px 0px 7px;
    min-height: 30em;
  }

  .planner-specifications-container {
    margin-right: 1em;
  }

  .planner-specifications-text-container>b {
    font-size: 1.3em;
  }

  .buy-now-container {

    max-width: 40em;
    margin-inline: auto;
  }

  .buy-now-options-container {

    display: flex;

  }

}