/* No CSS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@font-face {
  font-family: "bebasneue";
  src: url(/ressources/fonts/BEBASNEUE/BebasNeueRegular.otf) format("opentype");
  font-weight: normal;
}

html {
  scroll-behavior: smooth;
}

html body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --customwhite: #FCFEF6;
  --customblack: #1c1f19;
  --customblacklilbrighter: #2d3129;
  --socialred: #F197A9;
  --liberalyellow: #FCF75F;
  --stickerneon: #CAE959;
  --stickerneonbright: #e1e8c7;
  --c_de_display: none;
  --c_en_display: none;
  --c_hi_display: none;
  --c_fr_display: none;
  --c_eur_display: none;
  --c_usd_display: none;
  --c_inr_display: none;
  --c_gbp_display: none;
  --scrollPosition:1;
  --viewporth:10000;
  --viewportw:0;
  /* fade in elements on scroll */
  --SCROLLANIMATION_longfadein:0;
  --SCROLLANIMATION_quickfadein:0;
  --SCROLLANIMATION_nofadein:1;
}

.hoverscale {
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

.hoverscale:hover {
  scale: 103%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  --nav-height: 55px;
  padding-top: var(--nav-height);
  font: 75% poppins, sans-serif;
  min-height: 100%;
  line-height: 1.9;
  color: var(--customblack);
  background: var(--customblack) no-repeat bottom right;
  margin: 0;
  /* STYLE HYPERLINK */
  /* unvisited link */
  /* visited link */
  /* mouse over link */
  /* selected link */
}

body .mainbgintrocontainer {
  width: 100vw;
  height: calc(100vh + 150px);
  /* a little bigger than screen should be so that there is no grey border during transtion time transition  */
  top: 0;
  left: 0;
  position: fixed;
  -webkit-transition: 999s;
  transition: 999s;
}

body .mainbgintrocontainer .mainbgintro {
  opacity: calc( 1 - var(--SCROLLANIMATION_quickfadein));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  -webkit-transition: ease-out 4s;
  transition: ease-out 4s;
}

body .mainvideobackbround {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

body h4 {
  font-size: calc(1rem + 0.5vw);
}

body .c_de {
  display: var(--c_de_display);
}

body .c_en {
  display: var(--c_en_display);
}

body .c_hi {
  display: var(--c_hi_display);
}

body .c_fr {
  display: var(--c_fr_display);
}

body .c_eur {
  display: var(--c_eur_display);
}

body .c_usd {
  display: var(--c_usd_display);
}

body .c_inr {
  display: var(--c_inr_display);
}

body .c_gbp {
  display: var(--c_gbp_display);
}

body a:link {
  color: hotpink;
  text-decoration: none !important;
  cursor: pointer;
}

body a:visited {
  color: hotpink;
}

body a:hover {
  color: hotpink;
}

body a:active {
  color: hotpink;
}

div.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

hr {
  float: center;
  width: 50px;
  border-top: 3px solid orangered;
  opacity: 1;
  margin-top: 1.3rem;
}

p {
  text-align: center;
  font-size: 20px;
  margin: 0;
}

@media (max-width: 8.3in) {
  p {
    font-size: 15px;
  }
}

.minitext {
  font-size: 100%;
}

.bigtitle {
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 250%;
  width: 50%;
  background-color: red;
  top: 20%;
}

.bigtitle p {
  color: black;
}

#only-few-more-stickers-bar {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 3rem;
  width: calc(100% - 8rem);
  height: 2rem;
  background-color: var(--customblack);
  border-radius: 1rem;
  color: var(--customblack);
  -webkit-transition: 5s;
  transition: 5s;
}

#only-few-more-stickers-bar::before {
  content: " ";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;
  width: calc(var(--onlyfewmorestickerbarpercent)*100%);
  min-width: 5%;
  max-width: calc(100% - 1em);
  background-color: orangered;
  border-radius: 1em;
  padding-left: 1em;
  padding-right: 1em;
  -webkit-transition: ease-out 1s;
  transition: ease-out 1s;
}

.bar-discount-bubble {
  height: calc(4rem + 3vw);
  width: calc(4rem + 3vw);
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  background-color: orangered;
  color: var(--customwhite);
  border: 0px solid var(--customblack);
  border-radius: 50%;
  font-family: abduction;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: ease-out 1s;
  transition: ease-out 1s;
  font-size: calc(1.5rem + 1.8vw);
}

.bar-discount-bubble span {
  font-size: 1.5rem;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 25px;
  /* Specified height */
  background: var(--stickerneon);
  /* Grey background */
  border-radius: 12.5px;
  outline: none;
  /* Remove outline */
  opacity: 1;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-box-shadow: 0 0px 150px rgba(170, 255, 0, 0.2);
          box-shadow: 0 0px 150px rgba(170, 255, 0, 0.2);
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 3rem;
  /* Set a specific slider handle width */
  height: 3rem;
  /* Slider handle height */
  background: orangered;
  /* Green background */
  border-radius: 50%;
  border-width: 0;
  cursor: pointer;
  /* Cursor on hover */
  -webkit-box-shadow: 1px 1px 20px orangered;
          box-shadow: 1px 1px 20px orangered;
}

.slider::-moz-range-thumb {
  width: 3rem;
  /* Set a specific slider handle width */
  height: 3rem;
  /* Slider handle height */
  background: orangered;
  /* Green background */
  border-radius: 50%;
  border-width: 0;
  -webkit-transition: 2s;
  transition: 2s;
  cursor: pointer;
  /* Cursor on hover */
  box-shadow: 1px 1px 20px rgba(255, 69, 0, 0.4);
}

.btn_addtocart {
  position: relative;
  font-family: abductionitalic;
  font-size: calc(1.2rem + 1.5vw);
  border-radius: 3px;
  border: none;
  color: var(--customblack);
  background-color: var(--stickerneon);
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: visible;
  padding: 0.65ch 2ch;
  margin: 0 auto;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  -webkit-animation: getstickerbreath 12s infinite 5s;
          animation: getstickerbreath 12s infinite 5s;
}

.btn_addtocart:active {
  background-color: orangered;
  scale: 1.1;
}

.btn_addtocart:active span {
  color: var(--customblack);
}

.btn_addtocart span {
  position: relative;
  z-index: 0;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.btn_addtocart:hover {
  -webkit-animation: getstickerbreath 12s infinite 5s, shake 200ms 1 linear;
          animation: getstickerbreath 12s infinite 5s, shake 200ms 1 linear;
}

/* FEATURED PRODUCT FEATURED PRODUCT FEATURED PRODUCT FEATURED PRODUCT FEATURED PRODUCT FEATURED PRODUCT FEATURED PRODUCT */
.featuredproduct {
  cursor: pointer;
  -webkit-transition: ease-out 0.3s all;
  transition: ease-out 0.3s all;
  color: var(--stickerneon);
}

.featuredproduct img {
  -webkit-transition: ease-out 0.3s all;
  transition: ease-out 0.3s all;
}

.featuredproduct button {
  opacity: 1;
  -webkit-transition: ease-out 0.3s all;
  transition: ease-out 0.3s all;
}

.featuredproduct:hover {
  scale: 1.01;
}

.featuredproduct:hover img {
  opacity: 0.9;
  scale: 1.01;
}
/*# sourceMappingURL=main.css.map */