/* Minification failed. Returning unminified contents.
(4663,28): run-time error CSS1030: Expected identifier, found '.'
(4663,68): run-time error CSS1031: Expected selector, found ')'
(4663,68): run-time error CSS1025: Expected comma or open brace, found ')'
 */
/*
   Animation example, for spinners
*/
.animate-spin {
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/**
---
Banners (Fullwidth & Halfwidth)
by Manuel & Phil
---
Version 1.0.0
Last modified: 08/02/2022
---
*/

.BB-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}

.BB-banner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 5px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f6f6f6;
  /* z-index: -1; */
}

.BB-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.BB-cta {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 1em;
  pointer-events: none;
}

/* -- modifiers -- */

.BB-banner.is-full-width {
  width: 100%;
}

.BB-banner.is-half-width {
  width: calc(50% - 10px);
}

.BB-banner.is-fixed a {
  display: block;
}

.BB-banner.is-fixed img {
  position: absolute;
}

.BB-banner.is-fixed.is-full-width a {
  padding-bottom: 11.5%;
}

.BB-banner.is-fixed.is-half-width a {
  padding-bottom: 22.5%;
}

.BB-banner.has-buttons-center .BB-cta {
  flex-direction: row;
  bottom: 1em;
  left: 0;
  right: 0;
}

.BB-banner.has-buttons-left .BB-cta,
.BB-banner.has-buttons-right .BB-cta {
  flex-direction: column;
  top: 0;
  bottom: 0;
}

.BB-banner.has-buttons-left .BB-cta {
  left: 2em;
}

.BB-banner.has-buttons-right .BB-cta {
  right: 2em;
}

/* -- responsive -- */

@media (max-width: 568px) {
  .BB-banner.is-full-width,
  .BB-banner.is-half-width {
    width: 100%;
    margin-bottom: 10px;
  }

  .BB-banner.is-fixed.is-full-width a,
  .BB-banner.is-fixed.is-half-width a {
    padding-bottom: 39%;
  }
}

/* tradeinBadges */

.BB-banner a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.BB-banner .BBT-text {
  width: 95%;
  position: absolute;
  margin: 0 auto;
  right: 2.5%;
  gap: 1.5em;
}

.BB-banner .BBT-text {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 16px;
  height: 100%;
}

.BB-banner .BBT-text img {
  width: auto;
  max-height: 135px;
  object-fit: cover;
  object-position: top;
  border-radius: 5px;
  mix-blend-mode: darken;
}

.BB-banner .BBT-text hr {
  background-color: #333;
  opacity: 0.4;
  margin: 0.2em auto;
}

.BB-banner .BBT-text > div {
  width: 100%;
}
.BB-banner .BBT-text div div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.5em;
}

.BB-banner .BBT-text h3,
.BB-banner .BBT-text h4,
.BB-banner .BBT-text p {
  text-decoration: none !important;
  color: #333 !important;
  font-family: "Poppins", sans-serif;
}

.BB-banner .BBT-text h3 {
  font-size: calc(25px + 0.390625vw);
}

.BB-banner .BBT-text h4 {
  font-size: calc(15px + 0.390625vw);
  /* margin-bottom: 0.2em; */
}

.BB-banner .BBT-text h3 span {
  font-size: calc(10px + 0.390625vw);
}

.BB-banner .BBT-text p {
  font-size: calc(8px + 0.390625vw);
  line-height: 1.3;
  width: 80%;
  margin-right: auto;
}

@media (max-width: 1280px) {
  .BB-banner .BBT-text {
    width: 93%;
  }
  .BB-banner .BBT-text img {
    max-height: 100px;
  }
  .BB-banner .BBT-text h3 {
    margin-bottom: 0;
    text-align: left;
  }
  .BB-banner .BBT-text h4 {
    font-size: calc(8px + 0.390625vw);
    margin: 0;
  }
}

@media (max-width: 600px) {
  .BB-banner .BBT-text img {
    display: none;
  }
  .BB-banner .BBT-text p {
    font-size: calc(10px + 0.390625vw);
    width: 78%;
    text-align: left;
    line-height: 1.2;
  }
  .BB-banner .BBT-text h3 {
    font-size: calc(25px + 0.390625vw);
    margin-left: 0.5em;
    margin-right: 0.3em;
  }
  .BB-banner .BBT-text h3 span {
    font-size: calc(15px + 0.390625vw);
  }
  .BB-banner .BBT-text h4 {
    font-size: calc(13px + 0.390625vw);
    margin: 0.2em auto;
    text-align: left;
  }
  .BB-banner .BBT-text hr {
    margin: .3em auto;
  }
}

/* variant */

.BB-banner .BBT-text .singleLine p {
  font-size: calc(11px + 0.390625vw);
  line-height: 1.3;
  width: fit-content;
  margin-right: 0.4em;
  margin-left: 0;
}

.BB-banner .BBT-text .singleLine h3 {
  font-size: calc(31px + 0.390625vw);
}

.BB-banner .BBT-text .presellPromo {
  flex-direction: column;
  align-items: start;
  gap: 0;
}

.BB-banner .BBT-text .presellPromo h3 {
  font-size: calc(15px + 0.390625vw);
  margin-bottom: 0.2em;
}

.BB-banner .BBT-text .presellPromo p {
  font-size: calc(11px + 0.390625vw);
  width: 95%;
}

@media (max-width: 600px) {
  .BB-banner .BBT-text .presellPromo h3 {
    margin-left: 0;
  }

  h4.singleLine {
    margin-bottom: .2em;
    text-align: left;
    font-size: calc(15px + 0.390625vw) !important;
  }
  .singleLine h3 {
    margin-bottom: 0 !important;
    width: auto;
    text-align: left;
    font-size: calc(30px + 0.390625vw) !important;
  }
  .singleLine p {
    font-size: calc(11px + 0.390625vw) !important;
    width: 80%;
    text-align: left;
  }
  
  .singleLine.premiumPass p{
    font-size: calc(10px + 0.390625vw) !important;
  }
}

/**
---
BrandLogos
by Manuel & Phil
---
Version 1.1.1
Last modified: 05/04/2022
---
CHANGELOG:
- added 'is-mobile-scollable' modifier
- fix logo area cut-off
- fix fallback for clamp (no supprot on idevice)
- made logos colored in mobile view ( removed hover effect in mobile view)

*/

.PP-logos {
  position: relative;
}

.PP-logos ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  max-width: 1240px;
  width: auto;
  margin: 0 auto;
}

.PP-logos ul li {
  display: inline-block;
  width: auto; 
  margin: 5px 20px;
}

.PP-logos a {
  display: block;
  overflow: hidden;
}

.PP-logos img {
  display: block;
  width: 140px; /* fallback */
  width: clamp(100px, 20vw, 140px);
  opacity: .5;
  filter: grayscale(100%);
  transition: .3s all linear;
}

.PP-logos li:hover img {
  filter: grayscale(0%);
  opacity: 1;
}


/* -- modifiers -- */

.PP-logos.is-dark img,
*.is-dark .PP-logos img {
  margin-bottom: 0;
  margin-top: -55%; /* below part of img */
}

.PP-logos.is-light img,
*.is-light .PP-logos img {
  margin-top: 0;
  margin-bottom: -55%; /* upper part of img */
}


/* -- scrollable mobile modifier -- */


@media (max-width: 568px) {
  .PP-logos.is-mobile-scrollable ul {
    flex-wrap: nowrap;
    justify-content: stretch;
    overflow-x: auto;
	}
  .PP-logos.is-mobile-scrollable button.scroll-arrow {
    content: '>';
    display: block;
    position: absolute;
    font-family: 'fontello';
    right: 0;
    top: 30%;
    background: white;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 1em;
    box-shadow: 0 0 1em grey;
  }

  /* mozilla */
  .PP-logos.is-mobile-scrollable ul {
		scrollbar-color: #ccc white;
		scrollbar-width: thin;
	}
  /* webkit */
	.PP-logos.is-mobile-scrollable ul::-webkit-scrollbar { 
		height: 3px;
	}
	.PP-logos.is-mobile-scrollable ul::-webkit-scrollbar-thumb { 
		background-color: #ccc;
		border-radius: 3px;
	}
	.PP-logos.is-mobile-scrollable ul::-webkit-scrollbar-track {
		background-color: white;
	}
}

/* -- responsive -- */

@media (max-width: 568px) {
  .PP-logos img {
    width: 120px;
    filter: grayscale(0%);
    opacity: 1;
  }
}

@media (max-width: 400px) {
  .PP-logos img {
    width: 90px;
  }
}

/**
---
CategoryCard
by Manuel & Phil
---
Version 1.2.4
Last modified: 08/11/2022
---
CHANGELOG
- code / responsiveness improvements
- added a new modifier (*.is-informative) that changes the behaviour of the category card and make it become an informative for product'specifications and technicalities
- create an environment ready to display an info popup after clicking on the relative button.
- added new modifier (*.info-centered) that place both button and text in the middle.
- removed background-color to Category card ( whitesmoke ) to avoid unwanted grey spaces while so much text in the card
- removed CC-container paddding since section already had it.
*/

.CC-container {
  margin: 0 auto;
  max-width: 1280px;
}

.CC-inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.CC-image {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 20px;
  width: 635px;
}

.CC-image img {
  display: block;
  width: 100%;
  height: auto;
}

.CC-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 600px;
}

.CC-text {
  position: relative;
  color: #333;
}

.CC-text p + p {
  padding-top: 1em;
}

.CC-cta {
  margin-top: 1em;
  text-align: right;
}

/* Info-button styling */

.CC-cta .ctaButton.info:hover span.icon-info::before{
  animation: reflect .5s;
}

.CC-cta .ctaButton.info span::after{
  content: '';
}

.CC-cta .ctaButton.info span{
  padding-right: 0;
}

.icon-cancel.CC-close{
  position: absolute;
  right: 0;
  font-size: 1.4em;
  cursor: pointer;
  opacity: 0.6;
}

.icon-cancel.CC-close:hover{
  opacity: 1;
}

.CC-container .icon-cancel:before {
  content: 'x';
  color: lightgray;
}

/* -- modifiers -- */

*.is-aligned-right .CC-inner {
  flex-direction: row-reverse;
}

*.is-aligned-right .CC-image {
  margin: 0 0 0 20px;
}

*.is-informative .CC-inner .CC-cta{
  display: none;
}

*.is-informative .CC-inner{
  align-items: center;
}

*.info-centered .CC-info{
  justify-content: center;
}

/* -- responsive -- */

@media (max-width: 1279px) {
  .CC-image,
  .CC-info {
    height: auto;
  }
}

@media (max-width: 750px) {
  .CC-inner {
    flex-direction: column!important;
  }
  .CC-image,
  .CC-info {
    width: 100%;
    height: auto;
    margin: auto!important;
  }
  .CC-text {
    margin-top: 1em;
  }
  .CC-cta {
    text-align: initial;
  }
}

@media (max-width: 568px) {
  .CC-text {
    font-size: 1em;
    text-align: left;
  }
  .CC-cta a {
    text-align: center;
    display: block;
  }
}

/**
---
NavLogos (with StickyNav)
by Manuel & Phil
---
Version 1.2.8
Last modified: 27/09/2022
---
CHANGELOG:
- redundant code lines removed
- paddings/margins improved
- make icons stack into two rows.
- code improved
- added modifier to differentiate between the section on Main Pages (i.e. Homepage) and the one in other pages.
- changed the image transition/hovering animation
- removed padding-bottom from sticky navbar
- improved spacing in Mobile screen 
- added sticky-header id that makes the header sticky and allow to add valuable informations such as info and buttons always on top
-added scroll horizontal behaviour on mobile view

*/

.NL-inner {
  position: relative;
}

.NL-buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 770px; /* fallbacks for old browsers */
  max-width: min(1000px, 90vw);
}

.NL-buttons li {
  min-width: 100px;
  margin: 0 1em;
  text-align: center;
}

.NL-buttons p {
  line-height: 1.2em;
}

.NL-buttons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: grey;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.NL-buttons img {
  width: auto;
  height: 75px;
  padding: 1em;
  transition: height 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.NL-buttons a:hover {
  color: #222;
}

.NL-buttons a:hover img {
  transform: scale(1.1);
}

/* -- modifiers -- */

*.is-main .NL-buttons a img {
  filter: brightness(0);
}

*.is-main .NL-buttons a:hover img {
  filter: brightness(1);
  transform: scale(1);
}

*.is-sticky {
  background: white;
  box-shadow: 0 5px 6px -4px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease;
}

*.is-sticky .NL-buttons img {
  height: 25px;
}

*.is-sticky .NL-buttons a {
  flex-direction: row;
  justify-content: space-around;
}

/* Nav sticky Variation - StickyBanner Module */

#nav-sticky.sticky-header > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

/* -- transitions -- */

.NL-inner.fade .NL-buttons p,
.NL-inner.fade .NL-arrow a {
  opacity: 0;
}
.NL-inner.fade.in .NL-buttons p,
.NL-inner.fade.in .NL-arrow a {
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* -- responsive -- */

@media (max-width: 568px) {
  .NL-buttons {
    justify-content: initial;
    flex-wrap: nowrap;
  }

  .NL-buttons li {
    margin: 0;
    flex-basis: 100%;
    min-width: 115px;
  }

  .NL-buttons {
    overflow-y: scroll;
  }

  .NL-buttons img {
    height: 60px;
  }

  .NL-buttons p {
    height: 3em;
  }
}

/**
---
CategorySection
by Manuel & Phil
---
Version 1.0.1
Last modified: 01/04/2022

Changelog:

- improved spacing in Mobile screen 
---
*/

.MA-container {
  max-width: 1280px;
  margin: 0 auto;
}

.MA-container a {
  text-decoration: none;
  display: block;
}

.MA-buttons-inner {
  margin: 0 auto;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.MA-img-container {
  height: 50px;
  width: auto;
}

.MA-container a p {
  text-align: center;
  opacity: 0.6;
  color: black;
  text-transform: uppercase;
  font-size: 1.2em;
  transition: all .2s linear;
}

/* modifiers */

.MA-container.is-category-page .MA-buttons-inner {
  max-width: 1240px;
  padding: 1em 0;
  display: flex;
  flex-grow: 1;
}

.MA-container.is-category-page .MA-buttons {
  flex: 1 0 16%;
}

.MA-container.is-category-page .MA-buttons-inner .MA-img-container {
  height: 100px;
  width: auto;
  margin: 1em 0;
}

.MA-container.is-category-page .MA-buttons-inner .MA-img-container img {
  filter: brightness(0);
  transform: scale(0.95);
  transition: all 0.1s linear;
  display: block;
  margin: 0 auto;
  height: 100px;
  opacity: .8;
}
.MA-container.is-category-page .MA-button:hover .MA-img-container img {
  cursor: pointer;
  transform: scale(1);
}

.MA-container.is-category-page .MA-button:hover p{
  opacity: 1;
}

.MA-container.is-category-page .MA-button {
  height: 120px;
}

/* media queries */

@media (max-width: 568px) {

  .MA-buttons-inner {
    margin: 0 auto;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
  }

  .MA-button + .MA-button {
    margin-left: 0em;
  }

  .MA-button a {
    width: 33.33%;
    margin-bottom: 1em;
  }

  .MA-button p {
    text-align: center;
    opacity: 0.6;
    text-transform: uppercase;
    font-size: 0.8em;
  }

  .MA-container.is-category-page .MA-buttons-inner .MA-img-container {
    margin: 1em 0 0 0;
  }

  .MA-container.is-category-page .MA-buttons-inner .MA-img-container img {
    height: 80px;
  }

  .MA-container a {
    text-decoration: none;
    display: block;
    flex-basis: 45%;
  }

  .MA-container.is-category-page .MA-button {
    /* height: 120px; */
    height: 100%;
  }
}

/**
---
Disposable Banner
by Manuel & Phil
---
Version 1.0.1-beta
Last modified: 03/03/2022
---
*/

.BB-container .col {
  margin: 0 5px;
  width: calc(50% - 10px);
}

.BB-container .semirow {
  display: flex;
  flex-direction: column;
}

.BB-container .semirow {
  display: flex;
  flex-direction: column;
}

.newBanner {
  margin-bottom: 10px;
}

.newBanner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}


/* -- responsive -- */

@media (min-width: 569px) and (max-width: 1279px) {
  
  .BB-container .col {
    margin: 0 .5%;
    width: 49%;
  }
  .newBanner {
    margin-bottom: 1.5%;
  }
  
}

@media (max-width: 568px) {
  
  .BB-container .col {
    width: 100%
  }
  
}
.ET-container{
    width: 90%;
    margin: 0 auto;
    position: relative;
    margin: 3em auto;
    overflow: hidden;
}

.ET-container .ET-inner::before{
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    border-radius: 30px;
    background-color: #d3d3d3;
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: 3%;
}

.ET-container .ET-inner .ET-list{
    display: flex;
    flex-direction: column;    
    padding: 0 .5em;
    margin-bottom: 4em;
}

.ET-container .ET-inner .ET-list .ET-event,.ET-container .ET-inner .ET-list .ET-event a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54.8%;
    margin: -3em 0 0 0;
}

.ET-container .ET-inner .ET-list .ET-event:nth-of-type(1) {
    margin: 0 0 0 0;
}

.ET-container .ET-inner .ET-list .ET-event .ET-circle{
   display: block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #333;
   border: 6px solid #fff;
   z-index: 1;
}

.ET-container .ET-inner .ET-list .ET-event .ET-circle-m{
   display: none;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: #333;
   border: 6px solid #fff;
}

.ET-container .ET-inner .ET-list .ET-event .ET-info{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 516px;
}

.ET-container .ET-inner .ET-list .ET-event .ET-info .ET-text{
    display: block;
    font-family: 'Poppins';
    padding: 0 1em 0 0;
    width: 33%;
    text-align: center;
}

.ET-container .ET-inner .ET-list .ET-event .ET-info .ET-date{
    display: block;
    color: #888;
    font-size: 1.2em;
}

.ET-container .ET-inner .ET-list .ET-event .ET-info .ET-text .ET-title{
    display: block;
    color: #333;
    font-size: 1.5em;
    line-height: 1.3;
}

.ET-container .ET-inner .ET-list .ET-event .ET-info .ET-img{
    /* overflow: hidden; */
    width: fit-content;
    position: relative;
}

.ET-container .ET-inner .ET-list .ET-event .ET-info .ET-img .ET-background {
    display: block;
    width: 115%;
    height: 115%;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
}
.ET-container .ET-inner .ET-list .ET-event .ET-info .ET-img img:nth-of-type(1){
    max-width: 200px;
    border-radius: 50%;
    object-fit: contain;
}

/* odd & even */

.ET-container .ET-inner .ET-list .ET-event:nth-of-type(even) .ET-info {
    flex-direction: row-reverse;
}

.ET-container .ET-inner .ET-list .ET-event:nth-of-type(odd){
    align-self: flex-start;
    flex-direction: row-reverse;
}

.ET-container .ET-inner .ET-list .ET-event:nth-of-type(even){
    flex-direction: row;
    align-self: flex-end;
}

/* Old events */

*.ET-ended .ET-img img:nth-of-type(1){
    filter: saturate(0);
    opacity: .6;
    transition: .4s all linear;
}

*.ET-ended .ET-img.ET-today img:nth-of-type(1){
    filter: saturate(1);
    opacity: 1;
    border: 6px solid rgb(214, 0, 0);
}

*.ET-ended:hover .ET-img img{
    filter: saturate(1);
    opacity: 1;
}

*.ET-ended .ET-circle{
    background-color: #d3d3d3 !important;
}

*.ET-ended .ET-circle.ET-today{
    background-color: rgb(214, 0, 0) !important;
}

*.ET-ended .ET-circle-m{
    background-color: #d3d3d3 !important;
}

*.ET-ended .ET-circle-m.ET-today{
    background-color: rgb(214, 0, 0) !important;
}

*.ET-ended .ET-img span{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25em .75em;
    background-color: rgb(214, 0, 0);
    color: #fff;
    width: 60px;
    height: 20px;
    line-height: 20px;
    border-radius: 50px;
    font-family: 'Poppins';
    font-weight: 600;
    text-align: center;
    z-index: 1;
}


@media (max-width:1279px){
    .ET-container .ET-inner .ET-list .ET-event:nth-of-type(even),.ET-container .ET-inner .ET-list .ET-event:nth-of-type(odd){
        align-self: flex-end;
    }
    .ET-container .ET-inner .ET-list .ET-event:nth-of-type(even) {
        flex-direction: row-reverse;
        width: 100%;
    }
    .ET-container .ET-inner .ET-list .ET-event {
        justify-content: space-evenly;
        width: 100%;
        margin: 3em 0;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-circle-m{
        display: block;
        position: absolute;
        left: 47.6%;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-circle{
        display: none;
        z-index: 1;
    }
}

@media (max-width:576px) {
    .ET-container .ET-inner .ET-list .ET-event .ET-info .ET-img img:nth-of-type(1) {
        max-width: 150px;
        border-radius: 50%;
        object-fit: contain;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-info{
        justify-content: space-between;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-info .ET-text{
        width: fit-content;
        max-width:36%;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-info .ET-text .ET-title{
        font-size: 1.1em;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-info .ET-text .ET-date{
        font-size: 1em;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-circle-m{
        left: 42vw;
        height: 21px;
        width: 21px;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-info .ET-img .ET-background {
        width: 100%;
        height: 100%;
    }
}

@media (max-width:380px) {
    .ET-container .ET-inner .ET-list .ET-event .ET-info .ET-img img:nth-of-type(1) {
        max-width: 120px;
    }
    .ET-container .ET-inner .ET-list .ET-event {
        margin: 2em 0;
    }
    .ET-container .ET-inner .ET-list .ET-event .ET-circle-m {
        left: 41vw;
    }
}

/* expand script */

.ET-hidden {
    display: none !important;
}

.ET-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ET-expand{
    width: fit-content;
    align-self: center;
    margin: 2em;
    z-index: 2;
    line-height: 0 !important;
}





/**
---
FeatureBlocks (with Accordion)
by Manuel & Phil
---
Version: 1.1.2
Last modified: 12/09/2022
---
CHANGELOG
- changed hover animation with shadow
- improved featureblock styling
*/


.FB-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.FB-block {
  position: relative;
  width: 140px;
  height: auto;
  margin: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  transition: .2s all linear;
  overflow: hidden;
  border-radius: 5px;
}

.FB-block a {
  display: block;
  position: relative;
  padding-bottom: 100%; /* fixed aspect ratio 1:1 */
  border-radius: 5px;
  overflow: hidden;
  transition: transform .2s ease;
}

.FB-block img {
  display: block;
  position: absolute;
  top: 12.5%;
  left: 12.5%;
  width: 80%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.FB-arrow {
  text-align: center;
}

/* -- hover -- */

.FB-block:hover {
  transform: translateY(-9px);  
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
}

/* -- shadow -- */

/* .FB-block::before {
  content: " ";
  display: block;
  height: 3px;
  background: #000;
  position: absolute;
  bottom: -6px;
  left: 20%;
  right: 20%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(3px);
  transition: .2s ease;
} */

/* .FB-block:hover::before {
  opacity: .2;
} */


/* -- modifier : artwork -- */

.FB-block.is-artwork img {
  height: 112%;
  width: auto;
  left: -16%;
}



/* -- transitions -- */

.accordion__content .FB-block {
  transition: opacity .2s ease-in;
}

.accordion__content.is-expanded .FB-block {
  opacity: 1;
  transition: transform .2s ease;
}

.accordion__content.is-collapsed .FB-block {
  opacity: 0;
}


/* -- responsive -- */

@media (max-width: 959px) {
  .FB-block {
    flex: 1 0 10%;
  }
}

@media (max-width: 568px) {
  .FB-block {
    flex: 1 0 30%;
  }
}
/**
---
Footer
by Manuel & Phil
---
V 1.4.0
Last modified: 17/03/2023
---
CHANGELOG
- overwrite stylings removed because not needed anymore after Athena update
- Breaking change: Stylings for footer form removed (-> now part of restyling.forms.css) You need to update your HTML as well
- font-size (collapsable) slightly increased for mobile
- removed double border-bottom in mobile view that created a repetition of separators between social section and payments section
- social icons added
- added overwrite styles
- rewritten some areas
*/


/* -- basics -- */

.mainFooter {
  display: block;
  font-size: 1rem;
  margin-top: 30px;
  border-top: 1px solid #d6d7d6;
  background-color: #fff;
}

.footerContainer {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.footerFooter {
  clear: both;
  padding: 0;
  margin: 20px 0 0 0;
  background: #212322;
  border: 0;
}

.mainFooter ul {
  display: block;
}

.mainFooter li {
  list-style: none;
  line-height: 1.75;
}

.mainFooter a,
.mainFooter li a {
  display: inline-block;
  color: #b4b4b4;
  text-decoration: none;
  transition: 0.1s ease;
}

.mainFooter a:hover,
.mainFooter li a:hover {
  color: #e81e25;
}
.mainFooter li a:hover {
  color: #e81e25;
  text-decoration: none;
}

.mainFooter h4 {
  margin: 0;
  padding: 0;
  text-shadow: none;
  background: none;
  cursor: default;
}
.mainFooter h4 {
  text-transform: uppercase;
  font-size: 1.2em;
  color: #212322;
  margin-bottom: .6em;
}

/* -- layout -- */

.F-main {
  padding: 1em 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.F-col {
  width: auto;
  padding: 1em;
  box-sizing: border-box;
  position: relative;
}

.F-col:not(.F-col:last-child){
  max-width: 150px;
  margin: 0 auto;
}

.F-social {
  margin-bottom: 2em;
}

.F-social li i{
  width: 100%;
  color: #212322;
  opacity: 0.5;
  transition: all 0.2s linear;
  font-size: 2em;
}

.F-social li i:hover {
  opacity: 1;
}

.F-bar {
  margin-bottom: 2em;
}

.F-logos {
  position: relative;
}

.F-logos ul {
  display: flex;
  margin: auto;
  max-width: 900px;
  padding: 0 2em;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.F-logos ul li {
  padding: 1em;
}

.F-logos img {
  width: 100%;
  min-width: 30px;
  max-width: 60px;
  filter: saturate(0);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.F-logos img:hover {
  filter: saturate(1);
  opacity: 1;
}

.F-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #212322;
  padding: 1em;
}

.F-text {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1em;
  text-align: center;
}

.F-legals {
  width: auto;
  font-size: 9px;
  color: #d6d7d6;
  text-align: left;
}

.F-legals p,
.F-text p,
.F-text ul {
  margin: .5em 0;
}

.F-text ul li {
  display: inline;
  padding-right: 1em;
  padding-left: 1em;
}

.F-text ul li:not(:first-child)::before {
  position: absolute;
  pointer-events: none;
  content: "|";
  margin-left: -1.2em;
}

.F-gslogo {
  width: auto;
}

.F-gslogo img {
  width: 100%;
}



/* -- media queries -- */

@media (max-width: 1279px) {
  .footerContainer {
    padding: 0 3em;
  }
}

@media (max-width: 959px) {
  .F-main,
  .F-bottom {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .F-col {
    width: 33.33%;
    padding-bottom: 2em;
  }
}

@media (max-width: 768px) {
  .F-col {
    width: 50%;
  }
  .F-social i {
    font-size: 2em;
    opacity: 1;
  }
}

@media (max-width: 576px) {

  .footerContainer {
    padding: 0 1em;
  }

  .F-main {
    flex-direction: column;
    align-items: center;
  }

  .F-col {
    margin: 0;
    padding: 1em 0.5em;
    width: 100%;
  }

  .F-col:not(.F-col:last-child) {
    max-width: 100%;
    margin: 0 auto;
    padding: 1em 0.5em;
    width: 100%;
    border-bottom: 1px #d6d7d6 solid;
}

  .F-col.is-collapsable h4 {
    cursor: pointer;
  }

  .F-col.is-collapsable ul {
    display: none;
    opacity: 0;
    transition: .2s ease;
    font-size: 1.2em;
  }

  .F-col.is-collapsable h4::before,
  .F-col.is-collapsable h4::after  {
    position: absolute;
    content: "";
    background-color: #212322;
    top: 1.5em;
    right: 1em;
    width: 1em;
    height: 2px;
  }

  .F-col.is-collapsable h4::before {
    transform: rotateZ(0);
  }

  .F-col.is-collapsable h4::after {
    transform: rotateZ(90deg);
  }

  .F-col.is-collapsable.is-active h4::before,
  .F-col.is-collapsable.is-active h4::after {
    transform: rotateZ(0);
  }

  .F-col.is-collapsable.is-active ul {
    display: block;
    opacity: 1;
  }
  
  .F-social i {
    opacity: 1;
  }

  .F-logos img {
    max-width: 50px;
  }

  .F-bar input {
    width: 100%;
    height: 42px;
  }
  
  .F-bar button {
    height: 42px;
  }

  .F-gslogo {
    padding-top: 2em;
    width: 120px;
  }

}

/* -- payment cards -- */

li.payment-card {
  width: 60px;
}
.payment-card img {
  display: block;
  border-radius: 5px;
}

/* -- social icons -- */

ul.social-icons {
  font-size: 0;
  line-height: 0;
}
ul.social-icons li:first-child {
  padding-left: 0;
}
ul.social-icons li:last-child {
  padding-right: 0;
}
ul.social-icons li {
  width: 34px;
  padding: 4px;
  display: inline-block;
}
ul.social-icons a {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 5px;
}
ul.social-icons svg {
  display: block;
}

ul.social-icons svg .a {
  fill: #b4b4b4;
  transition: fill 0.3s;
}
ul.social-icons svg .b,
ul.social-icons svg .x {
  fill: #fff;
  transition: fill 0.3s;
}
ul.social-icons svg .c,
ul.social-icons svg .d {
  fill: none;
  transition: fill 0.3s;
}

ul.social-icons a:hover > svg .b {
  fill: #fff;
}
ul.social-icons a:hover > svg.social-icon-facebook .a {
  fill: #3b5998;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-twitter .a {
  fill: #55acee;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-googleplus .a {
  fill: #dd4b39;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-youtube .a {
  fill: #e62d27;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-twitch .a {
  fill: #663a8f;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-instagram .a {
  fill: #d93577;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-tiktok .a {
  fill: #000000;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-tiktok .c {
  fill: #25f4ee;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-tiktok .d {
  fill: #fe2c55;
  transition: fill 0.5s;
}
ul.social-icons a:hover > svg.social-icon-tiktok .x {
  fill: none;
  transition: fill 0.5s;
}
/**
---
Notice Bar
by Manuel
---
Version 1.0.0-beta
Last modified: 22/08/2022
---
*/

@media (max-width:1279px) and (min-width:600px) {
    #full-grid .card:nth-of-type(9),#full-grid .card:nth-of-type(10){
        display: none;
    }
}

#full-grid .SC-content .card {
    display: flex;
    flex-direction: column-reverse;
    flex-basis: 20%;
}
/**
---
GSLoyalty modules
by Manuel
---
Version 1.1.2
Last modified: 17/11/2022
---
CHANGELOG
- add TLC benefit *is-scrollable modifier
- removed is-scrollable modofier and replaced with the new module SC-Carousel
- added Misc styles related to GSPro stuff

*/

/* HELPERS */

*.text-normal {
  text-transform: none !important;
}

*.center {
  text-align: center !important;
}

*.text-normal {
  text-transform: none;
}

span.gsPro {
  color: #5d53c4;
}

/* BENEFITS MODULES */

[data-scslider="slider"].TLC .SC-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3 !important;
  overflow: hidden;
  white-space: break-spaces;
  height: fit-content;
  text-align: center;
}

[data-scslider="slider"]::after {
  content: "";
  position: absolute;
  width: 5vw;
  height: 391px;
  background: #fff;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 100%
  );
  display: block;
  z-index: 2;
  top: 0;
  right: 0 !important;
}

.SC-image {
  transition: transform 0.2s ease;
}

.TLC a {
  transition: transform 0.2s ease;
  pointer-events: none;
}

.TLC .splide__track li {
  height: fit-content;
}

.BF-container,
.BF-container ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 2em -20px;
}

.BF-card {
  width: 20%;
  height: 380px;
  padding: 20px;
  box-sizing: border-box;
}

.BF-image {
  position: relative;
}

.BF-image a {
  display: block;
  height: 0;
  width: auto;
  padding-bottom: 100%; /* fixed aspect ratio 1:1 */
  pointer-events: none;
}

.BF-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  transition: transform 0.2s ease;
}

.BF-text {
  margin-top: 1em;
  position: relative;
  color: #333;
  text-align: center;
}

/* -- shadow -- */

.BF-card .BF-image a::before {
  content: " ";
  display: block;
  height: 3px;
  background: #000;
  position: absolute;
  bottom: -6px;
  left: 10%;
  right: 10%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(4px);
  transition: 0.2s ease;
}

.BF-card:hover .BF-image a::before {
  opacity: 0.2;
}

.BF-card h2 {
  margin-bottom: 1em;
}

.BF-card p.lead {
  font-size: 1.2em;
}

/* modifier */

*.is-odd {
  justify-content: space-evenly;
}

/* -- hover -- */

.BF-card:hover .BF-image img {
  transform: translateY(-12px);
}

/* -- responsive -- */

@media (max-width: 959px) {
  .BF-container {
    margin: 0 -10px;
  }
  .BF-card {
    padding: 10px;
  }
}

@media (max-width: 959px) {
  .BF-card {
    width: 20%;
  }

  .BF-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-align: center;
  }
}

@media (max-width: 568px) {
  .BF-card {
    width: 100%;
  }

  .BF-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-align: center;
  }

  .BF-card {
    height: fit-content;
  }

  .BF-image {
    max-width: 200px;
    display: block;
    margin: 0 auto;
  }

  .BF-text {
    font-size: 1em;
    text-align: center;
  }
}

/* SUMMARY MODULE */

@media (max-width: 576px) {
  .splide__slide.is-dark .HS-text,
  .splide__slide.is-red .HS-text {
    color: white;
    margin-bottom: 1em;
  }
}

/* ---------------------------------------------------------------------------- */

/* LOYALTY MISC */

.loyaltyUpgradePageContainer {
  background: url('/Views/Locale/Content/Images/GSPro/Background/Background.jpg?rel=1');
  background-position: right;
  width: 95%;
  border-radius: 5px;
  color: #fff;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 2.5em 0;
  margin: 1em;
}

.loyaltyUpgradePageContainer .loyaltyUpgradePageImg img {
  max-width: 100%;
}

.loyaltyUpgradePageText {
  padding: 0 0 100px 0;
}

.loyaltyUpgradePageText {
  color: #fff !important;
  font-family: "Poppins";
  text-transform: none;
}

.loyaltyUpgradePageText h1::after {
  content: "";
  width: 80%;
  margin-top: 0.5em;
  background-color: rgba(255, 255, 255, 0.3);
  display: block;
  position: relative;
  height: 1px;
}

.loyaltyUpgradeEligibleFor {
  color: #fff !important;
}

.loyaltyUpgradePageImg {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 400px;
}

.bigButton {
  height: 2.5em;
  padding: 0 1em;
  color: #fff !important;
  border: 2px solid #e81e25;
  background-color: #e81e25;
  border-radius: 2em !important;
  font-family: "Poppins", sans-serif;
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 600 !important;
  line-height: 2.5em;
  text-decoration: none;
  height: 2.5em;
  padding: 0 1em !important;
  transition: 0.1s ease;
  pointer-events: all;
  cursor: pointer;
  text-transform: capitalize !important;
}

.bigButton:focus,
.bigButton:hover {
  border-color: #bf1218 !important;
  background-color: #bf1218 !important;
}

.bigButton:focus span,
.bigButton:hover span {
  color: #fff !important;
}

#loyaltyUpgradeForm > div.validation-summary-errors{
  display: none;
}

@media (max-width: 576px) {
  .loyaltyUpgradePageContainer {
    /* background: #5d53c4; */
    width: 95%;
    border-radius: 5px;
    color: #fff;
    display: flex;
    position: relative;
    justify-content: start;
    align-items: center;
    padding: 2.5em 0;
    height: 550px;
    margin: 1em;
    flex-direction: column-reverse;
  }

  .loyaltyUpgradePageText {
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%;
  }
  .loyaltyUpgradePageText h1 {
    margin: 0;
  }
  .loyaltyUpgradePageText h1::after {
    content: "";
    width: 80%;
    margin-top: 0.5em;
    background-color: rgba(255, 255, 255, 0.3);
    display: block;
    position: relative;
    height: 1px;
    margin: 0 auto;
  }

  .loyaltyUpgradeDisclaimer {
    margin-left: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .loyaltyUpgradePageContainer .loyaltyUpgradePageImg {
    width: fit-content;
  }
  .loyaltyUpgradePageContainer .loyaltyUpgradePageImg img {
    max-width: 100%;
    height: 100px;
    object-fit: cover;
  }

  .loyaltyUpgradeDisclaimer {
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
  }

  .loyaltyUpgradePageInfos label {
    font-size: 0.5em;
  }
  .loyaltyUpgradePageInfos strong {
    font-size: 0.8em;
    display: block;
  }
}

.loyaltyUpgradePageAdd {
  font-size: 3em;
  display: flex;
  width: fit-content;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.loyaltyUpgradePageInfos {
  font-size: 16px;
  font-family: "Poppins";
  padding: 20px 0;
}

.loyaltyUpgradePageInfos p {
  font-size: 2em;
}

.loyaltyUpgradeDisclaimer {
  margin-left: 0;
}

.loyaltyUpgradePageAdd {
  font-size: 3em;
}

#AccountManagementMain .loy-left-menu:nth-child(5) {
display: none;
}

@media (max-width:576px) {
  .loyaltyUpgradeFooter {
    margin: 10px;
    border-top: solid 1px #e7e7e7;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
  }
  
  .loyaltyUpgradeFooterRight {
    float: right;
    text-align: center;
    width: 80%;
  }

}

/**
---
HeroSlider
by Phil & Manuel
---
V 1.4.1
Last modified: 17/03/2023
---
CHANGELOG
- .headline > span behaviour added (not anymore a global style)
- *is-single modifier removed because splide extension "SplideDestoryOnSingleSlide" can be used
- added headline behaviour for span/em as they got removed from restyling.shared.css
- color modifiers removed, because they are now defined in restyling.shared.css
- is-text-wide|is-text-narrow modifiers added
- added overflow auto in screenshot slider
---
*/

.HS-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.HS-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: #efefef;
  z-index: 0;
}

.HS-bg a {
  display: block;
  width: 100%;
  height: 100%;
}

.HS-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.HS-inner {
  margin: auto;
  padding: 2em 4em;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  align-items: center;  /* default, when no modifier defined */
  display: flex;
  pointer-events: none;
  z-index: 1;
}

.HS-text {
  height: auto;
  width: auto;
  flex: 0 1 auto;
  box-sizing: border-box;
}

.HS-cta {
  margin: 2em 0 0;
}


/* -- text size -- */

.HS-text h3.headline,
.HS-text h4.headline {
  font-size: 42px; /* fallback for clamp */
  font-size: clamp(24px, 3vw, 42px);
  padding: 0.5em 0;
}
.HS-text h5.headline,
.HS-text h5.subline,
.HS-text p.subline {
  font-size: 17px; /* fallback for clamp */
  font-size: clamp(14px, 1.5vw, 17px);
  padding: .2em 0;
}

.HS-text .headline > span {
  display: block;
}

.HS-text .headline > span.large {
  font-size: 1.6em;
}

.HS-text .headline > span.medium {
  font-size: 1.2em;
}

.HS-text .headline > span.small {
  font-size: 0.8em;
}

/* -- modifiers -- */

.splide__slide.is-dark .HS-text,
.splide__slide.is-red .HS-text {
  color: white;
}
.splide__slide.is-light .HS-text {
  color: black;
}
.splide__slide.is-loading .HS-bg {
  background: linear-gradient(
    120deg,
    #dbdbdb 25%,
    hsla(0, 0%, 86%, 0.5) 50%,
    #dbdbdb 75%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.5s infinite;
}


/* -- animations -- */

.splide__slide .headline,
.splide__slide .subline,
.splide__slide .logo,
.splide__slide a.ctaButton {
  opacity: 0;
}
.splide__slide.is-active .headline,
.splide__slide.is-active .subline,
.splide__slide.is-active .logo {
  transition: all 1s ease;
  opacity: 1;
}
.splide__slide.is-active a.ctaButton {
  transition: opacity .3s ease .1s, transform .3s ease .1s;
  animation: pulse .3s ease .1s;
  opacity: 1;
}

.splide__slide.is-next .headline,
.splide__slide.is-next .subline {
  transform: translateX(2em);
}
.splide__slide.is-prev .headline,
.splide__slide.is-prev .subline {
  transform: translateX(-2em);
}
.splide__slide.is-next .logo {
  transform: translateX(1.5em);
}
.splide__slide.is-prev .logo {
  transform: translateX(-1.5em);
}


/* -- responsive -- */

@media (min-width: 1440px) {
  .HS-inner {
    max-width: 1280px;
    padding: 2em 0;
  }
}

@media (min-width: 578px) and (max-width: 959px) {
  .HS-inner {
    padding: 2em 3em;
  }
}

@media (min-width: 577px) {
  .HS-text {
    width: 45%;
  }

  /* -- modifiers (desktop) -- */
  .splide__slide.is-desktop-aligned-left .HS-inner {
    text-align: left;
    flex-direction: row;
  }
  .splide__slide.is-desktop-aligned-right .HS-inner {
    text-align: right;
    flex-direction: row-reverse;
  }
  .splide__slide.is-text-wide .HS-text {
    width: 65%;
  }
  .splide__slide.is-text-narrow .HS-text {
    width: 35%
  }
}

@media (max-width: 576px) {

  .HS-inner {
    padding: 4em 2em 6.5em;
    align-items: baseline;
  }

  .HS-text {
    width: 100%;
  }

  .HS-text h4.headline {
    font-size: 21px;
    font-size: clamp(19px, 5.5vw, 24px);
    padding: .2em;
  }
  .HS-text h5.headline,
  .HS-text h5.subline,
  .HS-text p.subline {
    font-size: 12px;
    padding: .2em;
  }

  .HS-text .headline > span.large {
    font-size: 1.4em;
  }

  .HS-text .headline > span.medium {
    font-size: 1.15em;
  }

  .HS-text .headline > span.small {
    font-size: 0.85em;
  }

  .HS-text div.logo:first-child {
    margin-top: -1.5em;
  }

  .HS-cta {
    position: absolute;
    margin: 0;
    bottom: 2.5em;
    left: 3em;
    right: 3em;
    text-align: center;
  }

  .HS-cta a.ctaButton {
    font-size: 14px;
  }
  

  /* -- modifiers (mobile) -- */
  .splide__slide.is-mobile-aligned-top .HS-inner {
    flex-direction: column;
  }
  .splide__slide.is-mobile-aligned-bottom .HS-inner {
    flex-direction: column-reverse;
  }
  .splide__slide.is-mobile-aligned-middle .HS-inner {
    align-items: center;
  }
  
}


div.logo img + .splide__spinner {
  visibility: hidden!important;
}

/* Screenshot slider styling */

#slider-screenshots .splide__slide.is-active{
  opacity: 1;
  transition: .1s all linear;
}

#slider-screenshots .splide__slide{
  opacity: .9;
}
/* 
------------------------
Loyalty Sidebar Styles & popup Blockers Styles

v. 1.1.6

CHANGELOG:
- Added Safari device Fallback
- Added IOS full compatibility
- Added PDP environment badge feature
- Added GS Pro dedigated landing apge styling
- Changes typography size on mobile screen
- added margin-bottom to the container

by Manu
------------------------

*/

.loyalty-upper-badge {
  overflow: hidden;
  height: 30px;
  opacity: 0;
  /* max-width: 100%; */
  max-width: 1000px;
  background-color: #cfcbf3;
  margin: 2em auto .5em;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 1s all linear;
  animation: openUp 1s linear forwards;
  overflow: hidden;
  position: relative;
}
.loyalty-upper-badge::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("https://www.gamestop.it/views/locale/Content/Images/landing.GSProRevamp/Pattern_Banner_GSPRO.png");
  opacity: 0.15;
  position: absolute;
}

.loyalty-upper-badge i {
  color: #5d53c4;
  font-weight: 500;
  font-size: 1.3em;
  justify-self: flex-end;
  margin-right: 1em;
  z-index: 9;
}
.loyalty-upper-badge .upper-badge-inner {
  color: #5d53c4;
  margin: 0 auto;
  opacity: 0;
  width: 70%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  animation: showText 1s linear 1s forwards;
}
@media (max-width: 576px) {
  .loyalty-upper-badge .upper-badge-inner {
    width: 100%;
  }
}
.loyalty-upper-badge .upper-badge-inner img {
  max-height: 20px;
  max-width: fit-content;
}
.loyalty-upper-badge .upper-badge-inner .badge-text {
  font-size: 1em;
  font-family: "poppins";
  font-weight: 600;
}

@keyframes openUp {
  0% {
    width: 0;
  }
  100% {
    display: flex;
    width: 80%;
    opacity: 1;
  }
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*  PDP badge Styling */
.prodRightBlock .loyalty-upper-badge {
  margin: 1em 0px 2em;
}
@media (max-width: 576px) {
  .prodRightBlock .loyalty-upper-badge {
    margin: 3em auto 2em;
  }
}

/* ----------------------------- */
/* sidebar styling */
/* ----------------------------- */

#darkBG {
  z-index: 1000;
  transition: all 0.5s ease;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000000e6;
  top: 0;
  z-index: 1000;
  opacity: 0.35;
  display: none;
}
.loyalty-popup-container {
  max-width: 500px;
  height: 100%;
  background-color: #fff;
  display: block;
  position: fixed;
  z-index: 1001;
  font-family: "Poppins";
  transition: 0.5s all linear;
  box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.1);
  opacity: 0;
}
@media (max-width: 576px) {
  .loyalty-popup-container {
    max-height: 100%;
    max-width: 100%;
    height: max-content;
    min-height: 680px;
    position: fixed;
    transform: translate3d(0, 100%, 0);
  }
}
.loyalty-popup-container.open {
  right: 0 !important;
  opacity: 1;
}
.loyalty-popup-container.openMobile {
  bottom: 0 !important;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.loyalty-popup-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
}
.loyalty-popup-inner .icon-cancel {
  position: absolute;
  top: 1em;
  right: 1em;
  color: #fff;
}
.loyalty-popup-inner .loyalty-icon {
  filter: brightness(100);
  max-height: 40px;
  margin: 8em 0 0 0;
}
.loyalty-popup-inner .loyalty-icon img {
  max-height: 100%;
  height: 100%; /* safari fallback */
}
@media (max-width: 576px) {
  .loyalty-icon {
    max-height: 30px;
  }
  .loyalty-popup-inner .loyalty-icon {
    margin: 0;
  }
}
/* -- */

.loyalty-top {
  background: url("https://www.gamestop.it/views/locale/Content/Images/landing.GSProRevamp/HeaderProCourtain/HeaderProCourtain.jpg")
    center center no-repeat;
  background-size: cover;
  background-color: #5d53c4;
  color: #fff;
  height: fit-content;
  padding: 2em 4em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.loyalty-top h2 {
  margin-bottom: 1em;
  font-size: 1.8em;
}
.loyalty-top .lead {
  margin-bottom: 1em;
  font-size: 1.2em;
}
@media (max-width: 576px) {
  .loyalty-top {
    height: 22vh;
    background: url("https://www.gamestop.it/views/locale/Content/Images/landing.GSProRevamp/HeaderProCourtain/HeaderProCourtain@2x.jpg")
      center center no-repeat;
    background-size: cover;
  }
  .loyalty-top h2 {
    margin-bottom: 1em;
    font-size: 1.2em;
  }
  .loyalty-top .lead {
    margin-bottom: 0em;
    font-size: 1em;
  }
}

/* -- */
.loyalty-center {
  height: 60%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}
.loyalty-center .loyalty-benefit-list {
  padding: 2em;
  position: relative;
}
.loyalty-center .loyalty-benefit-list li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.5em;
}
.loyalty-center .loyalty-benefit-list li img {
  max-width: 90%;
}
.loyalty-center .loyalty-benefit-list li .loyalty-benefit-image {
  width: 100px;
}
.loyalty-center .loyalty-benefit-list li .lead {
  font-size: 1.2em;
  color: #333;
  width: 70%;
}
.loyalty-center .loyalty-benefit-list li .lead span {
  display: block;
  color: #a6a6a6;
  font-style: italic;
}
@media (max-width: 576px) {
  .loyalty-center {
    height: 45vh;
  }
  .loyalty-center .loyalty-benefit-list li {
    max-height: 80px;
  }
  .loyalty-center .loyalty-benefit-list li .lead {
    font-size: 1em;
  }
  .loyalty-center .loyalty-benefit-list li .lead span {
    font-size: 0.9em;
  }
}

/* -- */
.loyalty-bottom {
  height: fit-content;
  padding: 2em;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  position: relative;
}
.loyalty-bottom::after {
  content: "";
  width: 100%;
  height: 70px;
  position: absolute;
  bottom: 85%;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 1) 67%
  );
}
.loyalty-bottom div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 2em 0.5em 2em;
  border-top: solid 1px rgba(0, 0, 0, 0.1);
}
.loyalty-bottom .price {
  text-transform: none;
  width: fit-content;
  margin: 0;
}
.loyalty-bottom .price span {
  font-size: 0.7em;
}
.loyalty-bottom .subline {
  text-transform: none;
  display: block;
  text-align: end;
  margin-left: auto;
  color: gray;
  width: 90%;
  padding: 0.5em 2em;
}
@media (max-width: 576px) {
  .loyalty-bottom {
    height: fit-content;
  }
  .loyalty-bottom .subline {
    width: 92%;
  }
  .loyalty-bottom::after {
    bottom: 87%;
  }
}

/* scrollbar */

/* mozilla */
.loyalty-center {
  scrollbar-color: #212322;
  scrollbar-width: thin;
  margin: 0 10px 0 0;
}
/* webkit */
.loyalty-center::-webkit-scrollbar {
  height: 8px;
  width: 5px;
}
.loyalty-center:hover::-webkit-scrollbar-thumb {
  background-color: #404040;
  border-radius: 10px;
}
.loyalty-center::-webkit-scrollbar-track {
  background-color: transparent;
}

/* ----------------------------- */
/* blockerPopup styling */
/* ----------------------------- */

.blockerPopup {
  position: fixed;
  z-index: 1001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 40%;
  height: 300px;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: none;
}

.blockerPopup-inner {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 85%;
  position: relative;
  overflow: hidden;
}

#blockerClose {
  color: rgba(0, 0, 0, 0.15);
  transition: all linear 0.2s;
  position: absolute;
  top: 1.5em;
  right: 1.5em;
}
#blockerClose:hover {
  color: rgba(0, 0, 0, 0.5);
}

.blockerPopup-text {
  width: 80%;
  margin: 0 auto 0 2em;
  font-size: 1.2em;
  font-family: "Poppins";
  height: 100%;
}

.blockerPopup-text p {
  font-size: 1em !important;
}

.blockerPopup-cta {
  align-self: flex-end;
  position: absolute;
  bottom: 2.5em;
  right: 2.5em;
}

@media (max-width: 576px) {
  .blockerPopup {
    width: 90%;
    height: 45%;
  }
  .blockerPopup-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: auto;
    height: 85%;
    margin-bottom: 1em;
    margin: 0 auto;
  }
  .blockerPopup-text h4.headline{
    font-size: 1.4em;
  }
  .blockerPopup-text p{
    font-size: .8em !important;
  }
  .blockerPopup-cta {
    bottom: 1.5em;
    right: 1.5em;
  }
  .blockerPopup p {
    height: 75%;
    overflow-y: scroll;
  }
  #blockerClose {
    top: 1em;
    right: 1em;
  }
}

/* ----------------------------- */
/* Membership styling */
/* ----------------------------- */

/* Bonus Section */

.loyalty-bonus {
  background-color: #5d53c4;
  padding: 2em;
  border-radius: 10px;
  background: url('/Views/Locale/Content/Images/GSPro/Background/Background.jpg');
}

.loyalty-bonus .CC-text {
  color: #fff;
}

.loyalty-bonus .CC-text .headline {
  color: #fff;
}

.loyalty-bonus a.ctaButton,
.loyalty-bonus button.ctaButton {
  background-color: #fff;
  color: #5d53c4;
  border-color: #fff;
}

.loyalty-bonus a.ctaButton:hover,
.loyalty-bonus button.ctaButton:hover,
.loyalty-bonus a.ctaButton:focus,
.loyalty-bonus button.ctaButton:focus {
  background-color: #e9e9e9;
  border-color: #e9e9e9;
  color: #5d53c4;
}

* .gspro-lock {
  filter: saturate(0);
  position: relative;
  cursor: pointer;
}

.loyalty-padlock {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 30%;
  left: 40%;
  width: 15% !important;
  transition: all linear .3s;
  filter: drop-shadow(2px 2px 8px #463f92);
}




/**
---
Magic Banners 
by Manuel
---
Version 1.1.1
Last modified: 20/06/2023
---

changelog::after
  - added modifier black

*/

.MB-container {
    font-family: 'Poppins',sans-serif;
    border-radius: 5px;
    height: 150px;
    width: 100% !important;
    display: flex;
    position: relative;
    overflow: hidden;
    margin: auto;
    user-select: none;
    flex-direction: column;
    justify-content: center;
}

.MB-container *{
    transition: .2s all;
}

.MB-container.customBG *{
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.55);
}

.MB-container p{
    margin: 1em 0;
    text-transform: capitalize;
    padding: 0;
}

.MB-container a{
    color: black;
    text-decoration: none;
    margin: 0;
    padding: 0;
    z-index: 1;
    position: relative;
}

.MB-container .ctaButton{
    position: absolute;
    display: block;
    color: white;
    text-decoration: none;
    bottom: 15px;
    right: 90px;
    font-size: 1em;
    text-transform: capitalize;
    font-weight: 400;
}

.MB-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

#MB-icon-right,#MB-icon-left{
    font-size: 20em;
    font-weight: 700;
    opacity: .07;
    position: absolute;
    transition: .2s all;
    line-height: 150px;
}

#MB-icon-right{
    right: 20px;
}

#MB-icon-left{
    left: 20px;
}

.MB-text {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding: 1em 0;
    z-index: 2;
}

.MB-main {
    width: fit-content;
    font-size: 5em;
    max-width: 350px;
    font-weight: 700;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    text-align: center;
}

.MB-container.customBG .MB-main img{
    width: auto;
    max-width: 100%;
    max-height: 120px;
    -webkit-filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.3));
    filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.3));
}

.MB-secondary{
    width: 60%;
    flex-basis:60%;
}

.MB-secondary p{
    font-size: 1.5em;
    margin-left: 10%;
}

/* hover effect */

.MB-container:hover #MB-icon-right, .MB-container:hover #MB-icon-left{
    transform: scale(1.05);
}

.MB-main > p {
    font-size: .8em;
    margin: 0;
    text-transform: capitalize;
    padding: 0;
    width: 410px;
}

/* Modifier */

.countdown.MB-container.is-light .MB-secondary{
    color: #333;
    font-weight: 600;
}

.MB-container.is-light.customBG * {
    text-shadow: none;
}

/* countdown */

.countdown .MB-secondary {
    width: 80%;
    flex-basis: 80%;
    margin-top: 1em;
}

.countdown .MB-secondary .MB-timer{
    font-size: 3.5em;
    display: flex;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
}

.countdown .MB-timerText{
    margin: 0 auto;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Custom Background properties */

.MB-container.customBG{
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;    
}

@media(max-width:1280px){
    .countdown .MB-secondary .MB-timer{
        font-size: 2.5em;
        font-weight: 600;
    }
    .countdown .MB-secondary {
        width: 70%;
        flex-basis: 40%;
    }
}

@media(max-width:768px){
    .countdown .MB-secondary .MB-timer{
        font-size: 2em;
        font-weight: 600;
    }
    
}

@media(max-width:576px){
    .countdown .MB-secondary{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        flex-basis: 100%;
    }

    .countdown .MB-secondary .MB-timer{
        margin: 0 auto;
    }

    .countdown .MB-timerText{
        font-size: 1.1em;
    }
}

/* media queries */

@media (max-width:1279px) {

    .MB-main{
        width: fit-content;
        text-align: center;
    }

    .MB-main>p {
        font-size: .8em;
        margin: 0;
        text-transform: capitalize;
        padding: 0;
    }
}

@media (max-width:996px) {
    #MB-icon-right{
        display: none;
    }

    .MB-text{
        width: 95%;
        justify-content: space-evenly;
    }

    .MB-main{
        width: fit-content;
        text-align: center;
    }
    
    .MB-secondary{
        width: 40%;
        flex-basis:40%;
    }    

    .MB-secondary p{
        font-size: 1.1em;
    }

}

@media (max-width:576px) {

    .MB-main{
        width: fit-content;
        text-align: center;
        font-size: 2.5em;
        max-width: 200px;
    }

    .MB-text{
        flex-direction: column ;
    }
    
    .MB-secondary{
       font-size: .9em;
       font-weight: 500;
       text-align: center;
       width: 90%;
       margin: 0 auto;
    }  
    
    .MB-container .MB-cta{
        bottom: 0px;
        right: 20px;
    }

    .MB-secondary p{
        margin-left: 0;
        margin: 0 auto;
    }

    .MB-container .ctaButton {
        display: block;
        position: relative;
        width: fit-content;
        right: 0;
        margin: 1.2em auto 0 auto;
    }

    .MB-inner{
        height: auto;
    }

    .MB-container.customBG .MB-main img {
        max-height: 50px;
    }

}

@media (max-width:380px) {

    .MB-main{
        font-size: 1.8em;
    }

    .MB-text{
        flex-direction: column ;
    }
    
    .MB-secondary{
       text-align: center;
       width: 90%;
       margin: 0 auto;
    }  

    .MB-secondary p{
        margin-left: 0;
        margin: 0 auto;
    }
}
















/**
---
Notice Bar
by Phil & Manuel
---
Version 1.0.0-beta
Last modified: 14/02/2022
---
*/


.NB-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3em 1.5em 0em 1.5em;
  margin: auto;
  width: auto;
  max-width: 900px;
}

.NB-icon span.icon {
  display: block!important;
  color: #ee3124;
  font-size: 21px;
}

.NB-text {
  text-align: center;
  font-size: 16px;
  line-height: 1.5em;
}

.NB-icon,
.NB-text,
.NB-close {
  transition: opacity .3s ease, transform .3s ease;
}


/* modifiers */

*.is-active .NB-icon,
*.is-active .NB-text,
*.is-active .NB-close {
  opacity: 1;
}
*.is-closed .NB-icon,
*.is-closed .NB-text,
*.is-closed .NB-close {
  opacity: 0;
}
*.is-closed .NB-icon,
*.is-closed .NB-close {
  opacity: 1;
  transform: scale(0);
}

/* themes */

.NB-box.promo {
  background: none;
  background-color: #ee3124;
  max-width: 100%;
  margin: 0;
  color: white;
}

.NB-box.promo a {
  color: white;
  text-decoration: underline;
}

.NB-box.promo span.icon {
  color: white;
}
.NB-box.promo button.close {
  color: white;
}

.NB-box.info {
  border-radius: 2em;
  background-color: #eee;
  color: #333;
}

@media (max-width:576px) {
  .NB-box {
    padding: 7em 1.5em 0 1.5em;
  }
}
.TO-content,.TO-page,.TO-left,.TO-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.TO-container,.TO-left,.TO-right{
    flex-direction: column;
    color: #888;
}

.TO-container a{
    text-decoration: none;
    color: #fff;
}

.TO-left {
    width: 60%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    max-height: 550px;
    overflow: hidden;
    margin-right: 1.5em;
}

.TO-right{
    width: 35%;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 2rem;
    max-height: 550px;
    overflow: hidden;
}

.TO-container > hr{
    margin: 1.5em auto;
    height: 2px;
    width: 100%;
    border-radius: 3px;
}

.TO-tabs{
    display: flex;
    justify-content: flex-start;
    gap: 1em;
    font-family: 'Poppins';
    text-transform: capitalize;
    font-weight: 600;
}

.TO-tab{
    flex:1;
    padding: .75em .5em;
    background-color: #333;
    opacity: .4;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    font-size: 2em;
    transition: .2s all ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TO-tab .badge{
    width: auto;
    height: 25px;
    padding: .25em .5em;
    pointer-events: none;
}

.TO-tab:hover{
    opacity: .7;
}

.TO-tab.active{
    opacity: 1;
}

.TO-container h3{
    font-size: 2.5em;
    text-transform: capitalize;
}

.TO-page{
    display: none;
    transition: .2s all ease;
    opacity: 0;
}

.TO-page.active{
    display: flex;
    transition: all .2s ease;
    opacity: 1;
}

.benefits{
    margin-left: .5em;
    font-size: .9rem;
}

.benefits li{
    display: flex;
    align-items: center;
}

.benefits li .lead{
    width: 500px;
    margin-left: 1em;
}

.TO-container p a{
   color: #EE2A28;
}

.benefits .benefit-icon, .TO-left h3 img{
    color: #333;
    max-width: 40px;
}

.TO-right .logo-img{
    width: 200px;
    height: 100px;
}

.TO-left .prices {
    height: min-content;
    display: flex;
    gap: .8em;
    margin-top: 1.5em;
}

.TO-left .price-tab {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

.TO-left .prices strong{
    font-size: 3.2rem;
    font-family: 'Poppins';
    margin-right: 1rem;
    margin-top: .5em;
    color: #333;
}

.TO-left .prices strong span{
  font-size: 1.5rem;
}

.TO-left .old-price {
    position: absolute;
    left: 2px;
    top: -20px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    text-decoration: line-through;
}

.TO-left .info-price {
    position: absolute;
    left: 2px;
    bottom: -1px;
    font-family: 'Poppins',sans-serif;
    font-size: 1rem;
    width: max-content;
    line-height: 1.2;
}

.TO-left .info-price.above {
    position: relative;
    font-family: 'Poppins',sans-serif;
    font-size: 1rem;
    width: max-content;
    line-height: 1.2;
    margin-right: 10%;
}

.TO-img {
    height: 220px;
    margin: 0em auto 2em auto;
}

.TO-img img{
    width: 100%;
    transition: .2s all ease;
}

.TO-img:hover img{
    width: 100%;
    transform: scale(1.05);
}

.TO-left{
    transform: translateX(-20%);
    opacity: 0;
}

.TO-right{
    transform: translateX(20%);
    opacity: 0;
}

.TO-right p{
    margin: 1.5rem auto;
    width: 95%;
}

.TO-right.text{
    margin: 0 auto;
}

.TO-right.text .lead,.TO-right.text p{
    margin: 0;
    font-size: 1.1em;
    font-family: 'Poppins';
}

.TO-right .subline{
    color: gray;
    font-size: 1em !important;
}

.TO-page.active .TO-right{
    animation: fromLeft .5s forwards;
}

.TO-page.active .TO-left{
    animation: fromRight .5s forwards;
}

.TO-right.text .box-text {
    padding: .2em 1em;
    background-color: #333;
    color: #fff;
    font-family: 'Poppins';
    width: max-content;
    display: block;
    font-size: 1em;
    text-transform: uppercase;
    border-radius: 5px;
    margin-bottom: .3em;
    margin-top: 1em;
}

.TO-container span.yellow{
    background-color:#FFC21A !important;
}

.TO-container span.orange{
    background-color: #F3952E !important;
}

.TO-container span.red{
    background-color:#D0103A !important;
}

.TO-container span.font-purple{
   color:#5D53C5 !important;
}

.TO-right.text .price{
    width: fit-content;
    font-size: 1.5em;
    color: #333;
    text-align: end;
    align-self: flex-end;
}

.TO-right.text .price strong{
  font-weight: 600;
  font-size: 1.5em;
}

*.disabled{
    pointer-events: none;
    user-select: none;
}

@keyframes fromLeft {
    100%{
        transform: translateX(0);
        transform: translateY(0);
        opacity: 1;
    }
    
}
@keyframes fromRight {
    100%{
        transform: translateX(0);
        transform: translateY(0);
        opacity: 1;
    }
    
}

@media (max-width:600px) {
    .TO-content{
        flex-direction: column;
    }

    .TO-title{
        font-size: 2em;
    }

    .TO-tab{
        width: 95%;
        margin: 1em auto;
        font-family: 'Poppins';
        font-weight: 600;
        text-transform: capitalize;
    }

    .TO-page{
        flex-direction: column;
        display: flex;
        max-height: 80px;
        transition: .3s all linear;
        opacity: 1;
    }

    .TO-page.active{
        max-height: fit-content;
    }

    .TO-right, .TO-left{
        width: 85%;
        transform: translate(0);
        transform: translateY(-10%);
        height: 100%;
    }

    .TO-right{
        order: 2;
        max-height: max-content;
    }

    .TO-left{
        order: 1;
        max-height: max-content;
        margin-right: 0;
    }

    .TO-left p,.TO-right p{
        text-align: start;
    }

    .prices{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .benefits li .lead{
        width: 80%;
        margin-left: 1em;
    }

    .TO-left .prices {
        height: min-content;
        display: block;
        margin: 1.5em 0;
    }

    .TO-right.text .price{
        width: fit-content;
        font-size: 1.5em;
        color: #333;
        text-align: end;
        /* border-top: 1px solid #3333331a; */
        padding-top: .5em;
        margin-top: .5em;
    }
}

@media (max-width:576px) {
    .divider{
        display: block !important;
    }
}

/**
---
SEO Text
by Manuel & Phil
---
Version 1.2.2
Last modified: 20/09/2022
---
CHANGELOG:
- removing modifiers and overwriting styles, as everything can be done with the grid system
removed padding since section.section already give som space on sides
- Added new expand/reduce feature and the "seeMore" btn
*/


.SEO-block {
  padding: 0;
  text-align: left;
}

.SEO-block h2,
.SEO-block h3 {
  padding: 0!important;
}

.SEO-block p.lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* white-space: break-spaces; */
  height: fit-content;
  line-height: 1.3;
  transition: all .3s ease;
}

.SEO-block p.lead.opened {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10 !important;
  overflow: hidden;
  /* white-space: break-spaces; */
  height: fit-content;
}

.SEO-block .seeMore{
  background: transparent;
  border: none;
  color: #E81E25;
  font-family: 'Open Sans';
  display: block;
  text-align: right;
  text-decoration: underline;
  cursor: pointer;
  width: 100%;
  margin-top: .3em;
  font-size: 14px;
}



/**
---
Shop Card Module
by Manuel 
---
Version 1.0.1
Last modified: 12/05/2022
---
CHANGELOG

- Edited text-height so that any number of product description won't change cards height.

*/


.SC-container {
    margin: 0 auto;
  }
  
  .SC-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .SC-banner {
    width: 100%;
    max-width: 480px;
    background: whitesmoke;
    border-radius: 5px;
    overflow: hidden;
  }
  
  .SC-banner a {
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 162.5%;
  }
  
  .SC-banner img {
    display: block;
    width: 100%;
    height: auto;
  }


  .SC-content .card{
    display: flex;
    flex-direction: column-reverse;
  }
  
  
  .SC-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1280px;
    justify-content: space-between;
    align-content: center;
  }
  
  /* --- responsive -- */
  
  @media (min-width: 579px) and (max-width: 960px) {
    .SC-content > div {
       width: 25%;
    }
}
  
  @media (max-width: 578px) {
    .SC-content > div {
        width: 50%!important;
    }
  }
/**
---
Banner Showcase
by Manuel & Phil
---
Version 1.1.0-beta
Last modified: 03/03/2022
---
CHANGELOG
- Combining styles for merch
*/


.SB-container {
  margin: 0 auto;
}

.SB-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.SB-banner {
  width: 100%;
  max-width: 480px;
  background: whitesmoke;
  border-radius: 5px;
  overflow: hidden;
}

.SB-banner a {
  display: block;
  height: 0;
  width: 100%;
  padding-bottom: 162.5%;
}

.SB-banner img {
  display: block;
  width: 100%;
  height: auto;
}


.SB-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  justify-content: center;
  align-content: center;
}


.SB-icon {
  padding: 20px 40px;
  max-width: 340px;
  width: 100%;
  box-sizing: border-box;
}

.SB-icon a {
  display: block;
  color: grey;
  font-size: 1.2em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease;
}
.SB-icon img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .2s ease;
}

.SB-icon p {
  margin-top: 1em;
}

.SB-icon:hover a {
  color: black;
}
.SB-icon:hover img {
  transform: scale(1.02);
}



/* --- modifiers -- */

*.is-aligned-right .SB-inner {
  flex-direction: row-reverse;
}

.SB-content.products-showcase > div {
  width: 33.333%;
  flex: 1 1 auto;
}
.SB-content.category-icons > div {
  width: 50%;
  flex: 1 1 auto;
}


/* --- responsive -- */

@media (min-width: 751px) and (max-width: 1279px) {
  .SB-content > div {
    width: 33.333%;
  }
  .SB-banner {
    width: 35%;
  }
  .SB-content {
    width: 60%;
  }
}

@media (max-width: 750px) {
  .SB-content > div {
    width: 50%!important;
  }
  .SB-icon a {
    font-size: 1em;
  }
}

@media (min-width: 579px) and (max-width: 750px) {
  .SB-content > div:nth-child(n+5) {
    display: none;
  }
  .SB-banner {
    width: 42%;
  }
  .SB-content {
    width: 55%;
  }
}

@media (max-width: 578px) {
  .SB-inner {
    flex-direction: column!important; /* force this layout */
  }
  .SB-banner a {
    padding-bottom: 50%; /* new image size */
  }
  .SB-content {
    margin: 0 -5px; /* avoiding too much margin */
  }
  .SB-icon {
    padding: 30px 30px 0;
  }
}
/**
---
Single Banner
by Manuel 
---
Version 1.0.0
Last modified: 14/12/2022
---
*/

.MC-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.MC-banner{
  flex-basis: 32%;
  width: 32%;
  padding: .5%;
}

.MC-banner a{
 width: 100%;
}

.MC-banner img{
  overflow: hidden;
  border-radius: 5px;
  max-width: 100%;
  object-fit: cover;
}

@media (max-width:576px){
  .MC-banner{
    flex-basis: 100%;
    max-width: 100%;
  }
}
/**
---
SingleCard
by Manuel & Phil
---
Version 1.1.12
Last modified: 27/07/2023
---
CHANGELOG
- code / responsiveness improvements
- added is.odd modifier
- added no-cta modifier
- added is scrollable modifier
- added #slider modifier
- added [data-scslider="grid"] modifier
- added #row modifier
- temporary deleted hover effect on single card
- added justify content: center to #row modifier
- edited #slider.SC-card height to fit-content;
- changed flex property in SC-card;
- changed text height in sc card;
- set .SC-container[data-scslider="slider"]::after height to 100%
- add transitioon translate to mouse hover

*/

.SC-container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.SC-card {
  width: 25%;
  display: block;
  height: fit-content;
  padding: 10px;
  box-sizing: border-box;
}

*.is-scrollable .SC-card + *.is-scrollable .SC-card {
  margin-left: 1.5em;
}

.SC-container .SC-card .SC-image {
  position: relative;
  transition: 0.2s all linear;
}

.SC-container .SC-card .SC-image:hover {
  transform: translateY(-10px);
}

.SC-image a {
  display: block;
  height: 0;
  width: auto;
  padding-bottom: 100%; /* fixed aspect ratio 1:1 */
}

.SC-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  transition: transform 0.2s ease;
}

.SC-text {
  margin-top: 1em;
  position: relative;
  color: #333;
}

.SC-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: break-spaces;
  height: 3.6em;
}

.SC-cta {
  margin-top: 1em;
}

/* slider variation */

.SC-container[data-scslider="slider"] {
  display: block;
}

.SC-container[data-scslider="slider"] .SC-card {
  padding: 10px;
  box-sizing: border-box;
  height: fit-content;
}

.SC-container[data-scslider="slider"] .SC-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: break-spaces;
  height: fit-content;
}

/* -- white shade for slider -- */

.SC-container[data-scslider="slider"]::after {
  content: "";
  position: absolute;
  width: 5vw;
  height: 100%;
  background: #fff;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 100%
  );
  display: block;
  z-index: 1;
  top: 0;
  right: -30px;
}

/* grid variation */

[data-scslider="grid"] .SC-card {
  padding: 5px;
}

[data-scslider="grid"] .SC-card .SC-text {
  display: none;
}

/* hover */

.SC-container[data-scslider="grid"] .SC-card .SC-image:hover {
  transform: none;
  opacity: 1;
}

.SC-container[data-scslider="grid"] .splide__list{
  flex-wrap: wrap;
}

/* -- shadow -- */

.SC-card .SC-image a::before {
  content: " ";
  display: block;
  height: 3px;
  background: #000;
  position: absolute;
  bottom: -6px;
  left: 10%;
  right: 10%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(4px);
  transition: 0.2s ease;
}

.SC-card:hover .SC-image a::before {
  opacity: 0.2;
}

/* modifier */

*.is-odd {
  justify-content: space-evenly;
}

*.no-cta .SC-image a {
  pointer-events: none;
}

/* is-scrollable */

/* mozilla */
*.is-scrollable {
  scrollbar-color: #ccc white;
  scrollbar-width: thin;
}
/* webkit */
*.is-scrollable::-webkit-scrollbar {
  height: 8px;
}
*.is-scrollable::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
*.is-scrollable::-webkit-scrollbar-track {
  background-color: white;
}

*.is-scrollable {
  position: relative;
  width: 100%;
  height: fit-content;
  overflow-x: scroll;
  white-space: nowrap;
  transition: all 0.2s;
  will-change: transform;
  user-select: none;
  cursor: grab;
}

*.is-scrollable.active {
  background: rgba(255, 255, 255, 0.3);
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

*.is-scrollable {
  display: inline-block;
  min-height: 430px;
  min-width: 400px;
  margin: 2em 1em;
}

*.is-scrollable .SC-card {
  display: inline-block;
}

/* -- hover -- */

[data-scslider="grid"] .SC-card .SC-image:hover img {
  transform: translateY(0);
}

[data-scslider="row"] {
  justify-content: center;
}

[data-scslider="row"] .SC-card {
  margin-bottom: 0;
}

[data-scslider="row"] .SC-card .SC-image:hover img {
  transform: translateY(-12px);
}

[data-scslider="row"] .splide__slide .headline,
.splide__slide .subline,
.splide__slide .logo,
.splide__slide a.ctaButton {
  opacity: 1;
}

.SC-container[data-scslider="row"] .splide__list{
  flex-wrap: wrap;
}

/* -- responsive -- */

@media (max-width: 959px) {
  .SC-container {
    margin: 0 -10px;
    overflow: hidden;
  }
  .SC-card {
    padding: 10px;
    margin-bottom: 30px;
  }
}

@media (max-width: 750px) {
  .SC-card {
    width: 50%;
  }
  *.is-scrollable .SC-card {
    width: 70%;
  }
}

@media (max-width: 568px) {
  .SC-text {
    font-size: 1em;
    text-align: left;
  }

  *.is-scrollable .SC-card::after {
    content: "";
    display: block;
    position: relative;
    background-color: transparent;
    width: 85%;
    margin: 2em auto 0 auto;
  }

  .SC-image {
    padding: 2em;
  }

  .SC-container#slider::after {
    content: "";
    position: absolute;
    width: 5vw;
    height: 391px;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgb(255, 255, 255) 100%
    );
    display: block;
    z-index: 2;
    top: 0;
    right: 0;
  }

  .SC-container#slider::after {
    right: -2px;
    top: -5px;
    display: none;
  }
  .SC-container .splide__track {
    overflow: visible;
  }
}

/**
---
SingleCard
by Manuel & Phil
---
Version 1.0.2
Last modified: 25/11/2022
---
*/


.SK-image {
  position: fixed;
  pointer-events: none;
  z-index: 220;
}

.SK-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.2s linear;
  max-width: 170px;
  max-width: clamp(140px, 14vw, 250px);
}

.SK-image a {
  display: block;
  position: absolute;
  width: 75%;
  height: 45%;
  z-index: 1;
  pointer-events: all;
}

.SK-image.skin__left,
.SK-image.skin__left a {
  left: 0;
  bottom: 0;
}

.SK-image.skin__right,
.SK-image.skin__right a {
  right: 0;
  bottom: 0;
}

.SK-close {
  z-index: 999;
}

.SK-close button {
  position: fixed;
  right: 5px;
  bottom: 5px;
  background: white;
  opacity: 1;
  color: lightgrey;
}

.SK-image button {
  position: absolute;
  right: 5px;
  top: -30px;
  pointer-events: all;
}

/* -- modifiers -- **/

*.is-hidden .SK-image img {
  opacity: 0;
}
*.is-visible .SK-image img {
  opacity: 1;
}
*.is-hidden .SK-image a,
*.is-hidden .SK-image button,
*.is-hidden .SK-close button {
  display: none;
}
*.is-visible .SK-image a,
*.is-visible .SK-image button ,
*.is-visible .SK-close button  {
  display: block;
}


/* -- responsive -- **/

@media (max-width: 578px) {
  .SK-image img {
    display: none;
    opacity: 0;
  }
  .SK-image button,
  .SK-close button {
    display: none!important;
    opacity: 0!important;
  }
}

    .SP-image {
        margin: 0 auto;
        background-color: whitesmoke;
        border-radius: 5px;
        overflow: hidden;
        max-width: 635px;
    }

    .SP-image img {
        display: block;
        width: 100%;
        height: auto;
    }
/**
---
StickyCta
by Manuel 
---
Version 1.0.0
Last modified: 14/06/2022
---
CHANGELOG:

*/


.ctaButton:not(#nav-sticky .ctaButton, .blockerPopup-cta .ctaButton){
  margin-top: 2em;
}

.StickyCta-container{
  padding-bottom: 0;
}

.StickyCta-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.StickyCta-inner.is-sticky{
  padding: 1em 10em;
}

.StickyCta-inner h3{
  padding: 0 !important;
}

.StickyCta-cta{
  display: flex;
  align-items: center;
  gap: 1em;
}

.StickyCta-cta div div{
  display: flex;
  align-items: center;
  gap: .5em;
}

.StickyCta-cta  p:last-child{
  display: inline;
}

.headline .oldPrice{
  text-decoration:line-through;
  font-size:.6em;
  font-weight:400;
  display:block;
}

@media (max-width:576px){

  .StickyCta-inner{
    display: none
  }
}



/**
---
Strip Module
by Manuel 
---
Version 1.0.0 beta
Last modified: 09/11/2022
---
*/

/* mobile strip html fix */
html {
  overflow-x: visible;
}

.TS-container{
  position: relative;
  width: 100%;
  z-index: 9;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.TS-inner{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 90%;
}

.TS-content{
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.TS-text{
  margin-left: 1em;
  text-align: center;
}

.icon-cancel{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.TS-container a{
  text-decoration:underline;
  color: #fff;
}

@media (max-width:576px) {
  .TS-container {
    top: -4px;
  }
  
.TS-container a{
  text-decoration:none;
  color: #fff;
}

}


/**
---
vendorTiles (Fullwidth & Halfwidth)
by Manuel
---
Version 0.0.1
Last modified: 
---
*/

.VT-container {
  width: 100%;
  height: auto;
  overflow: auto;
}

.VT-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1em;
  width: 100%;
  padding: .5em 0;
}

.VT-tile {
  width: 23%;
  height: 100px;
  border-radius: 5px;
  border: 2px solid;
  border-color: #ececec;
  background-color: #fff;
  margin: .5em 0;
  transition: .1s all linear;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
  overflow: hidden;
}

.VT-tile:hover {
  /* border-color: #dadada; */
  transform: translateY(-10px);
  opacity: 1;
}

.VT-tile.is-double-logo img {
  margin-top: 0;
  margin-bottom: -30%;
}

.VT-tile img {
  width: 150px;
}

@media screen and (max-width: 768px) {

  .VT-inner {
    display: flex;
    flex-wrap: initial;
    justify-content: space-between;
    gap: 1em;
    width: fit-content;
    overflow-x: scroll;
    margin-bottom: .5em;
  }

  .VT-tile {
    width: 200px;
    height: 75px;
    opacity: 1;
  }

  .VT-tile.is-double-logo img {
    margin-top: 0;
    margin-bottom: -35%;
    width: 55%;
  }

  .VT-tile img {
    height: auto;
  }

}
/* Presell Page Styling
by Manuel */

/* 
Last edited: 10/08/2022
Version: 1.0.0 beta
*/


/* ---------------------------------------- */
/* GENERAL PAGE */
/* ---------------------------------------- */

/* SEO-text Buttons */

#presellCTA .SEO-block{
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    max-width: 340px;
}

/* Slider content in the middle */

.HS-canvas.is-single .splide__arrows {
display: none;
}

.HS-canvas.is-single{
pointer-events: none;
}

*.info-centered .HS-inner{
justify-content: space-around;
}

*.info-centered .HS-text{
text-align: center;
}


/* is-megaBanner HeroSlider modifier */

*.is-megaBanner li{
    height: 250px !important;
  }
  
  @media (max-width: 576px) {
    *.is-megaBanner .HS-inner {
      padding: 9em 2em;
    }
}

/* ---------------------------------------- */
/* CALENDAR SECTION */
/* ---------------------------------------- */

.preOrder-tile{
    flex-basis: 19%;
    text-decoration: none;
    color: black;
    position: relative;
}

.preOrder-container{
    justify-content: space-around;
    display: flex;
    flex-direction: column;
}

.month-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
}

.preOrder-box{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: .2s ease;
}

.preOrder-img{
    border-radius: 5px;
    width: 100%;
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

/* altered img styiling */

.preOrder-box .preOrder-img.altered-img img{
    width: 100%;
    transition: .2s all;
    position: relative;
    top: 0px;
    left: 0px;
    object-fit: center;
}

.preOrder-box .preOrder-img.altered-img img{
    width: 100%;
    transition: .2s all;
    position: relative;
    top: 0px;
    left: 0px;
    object-fit: center;
}


.preOrder-box .preOrder-img img{
    width: 120%;
    transition: .2s all;
    position: absolute;
    top: -24%;
    left: -10%;
    object-fit: center;
}

/* -- hover -- */

.preOrder-box:hover {
    transform: translateY(-10px);  
}

/* -- shadow -- */

.SC-image::before {
    content: " ";
    display: block;
    height: 3px;
    background: #000;
    position: absolute;
    bottom: -4px;
    left: 20%;
    right: 20%;
    border-radius: 50%;
    opacity: 0;
    filter: blur(4px);
    transition: .2s ease;
}

.preOrder-box:hover::before {
    opacity: .4;
}


a:hover .preOrder-text{
    color: black;
}

.preOrder-text {
    font-family: 'Poppins',sans-serif;
    display: block;
    z-index: 1;
    width: 160px;
    margin: 1em auto 0 auto;
    transition: .2s all;
    overflow: hidden;
}

.preOrder-text h3 {
    font-weight: 800;
    text-transform: capitalize;
    line-height: 1.2;
    font-size: 1.2em;
    margin: 0 0 .5em 0;
    text-align: center;
}

.preOrder-text p{
    font-size: 1.1em;
    font-weight: 400;
    text-align: center;
}

/* media queries */


@media (max-width:576px){
    a.ctaButton span, button.ctaButton span {
        font-size: 13px;
    }

    .preOrder-img{
        max-width:140px ;
        height: 140px;
    }
    
    .preOrder-tile {
        width: 140px;
        margin: 0 auto;
        display: inline-block;
    }
    
    .preOrder-text {
        flex-basis: 43%;
        width: 140px;
    }

    .divider{
        display: none;
    }
}

/* ---------------------------------------- */
/* PREORDER BONUS SECTION */
/* ---------------------------------------- */

.SCB-container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.SCB-card {
    flex: 0 1 auto;
    flex-basis: 50%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

.SCB-card .SC-image a {
    height: auto;
    width: auto;
    padding-bottom: 0;
}

.SCB-card .SC-image {
    height: fit-content;
    max-width: auto;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

#bonusSec p.lead{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    white-space: break-spaces;
    height: fit-content;
}

/* media queries */

@media (max-width:960px) {
    .SCB-card .SC-image a {
        overflow: hidden;
        max-height: 250px;
    }

    .SCB-card {
        flex: 0 1 auto;
        flex-basis: 100%;
        padding: 20px 0px;
        box-sizing: border-box;
    }   
}

@media (max-width:576px) {
    .SC-image {
       padding: 0;
       height: fit-content;
    }

    .SCB-card {
        flex: 0 1 auto;
        flex-basis: 100%;
        padding: 20px 0px;
        box-sizing: border-box;
    }   

    .month-container {
        justify-content: space-between;
    }
}

/* magnifier feature */

.SCB-card .SC-image a{
    overflow: hidden;
    max-height: 335px;
}

.SCB-card .SC-image a::before {
    font-family: 'fontello';
    content: '\53';
    color: white;
    font-size: 2.5em;
    text-align: center;
    line-height: 130px;
    margin-top: auto;
    position: absolute;
    bottom: 0;
    right: -109px;
    width: 300px;
    height: 100px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
    background: rgb(255,255,255);
    background: linear-gradient(135deg, rgba(255,255,255,0) 38%, rgba(0,0,0,1) 100%);
}

@media (max-width:576px) {
    .SC-image a::before {
        font-size: 2em;
    }
}

/* typo */

#bonusSec .headline, #calendarSec .headline {
    width: 100%;
    margin: auto;
    text-align: left;
}


/* Exclusivity Badge */

.GS-badge {
    background-color: #E72621;
    width: 79px;
    height: 79px;
    border-radius: 50%;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    justify-content: center;
    position: absolute;
    right: -5px;
    top: 0px;
    z-index: 1;
    align-items: center;
    box-sizing: border-box;
    transform: rotate(10deg);
    font-family: 'Bebas Neue', sans-serif;
}
  
.GS-badge-inner{
    width:75px;
    height:75px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    flex-direction: column;
    align-items:center;
    box-shadow: inset 0px 0px 0px 1px #fff;
}
  
.upperText,.lowerText{
    font-size:1.5rem;
    font-weight: lighter;
}

.GS-badge .line{
    height:1.5px;
    width:85%;
    background-color:#fff;
}

@media (max-width:576px) {
    .GS-badge{
        width: 69px;
        height: 69px;
    }    
    .GS-badge-inner{
        width: 65px;
        height: 65px;
    }
    .GS-badge .line{
        height: 1px;
    }
    .upperText,.lowerText{
        font-size:1.3rem;
    }
}

/* Calendar Badge */

.preOrder-tile .calendarBadge{
    position: absolute;
    background-color: #E72621;
    color: #fff;
    padding: .25em .5em;
    border-radius: 30px;
    top: -2%;
    right: -3%;
    z-index: 2;
    width: fit-content;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
}
  
  

/*
Accordion
Styles
*/

.accordion__content {
  display: none; /* default, hidden on page load */
}


.accordion__arrow svg {
  fill: #ef3124;
}

.accordion__arrow button {
  display: inline-block;
  cursor: pointer;
  background: none;
  height: 40px;
  width: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transition: transform .2s ease;
}

.accordion__arrow button:disabled {
  cursor: default;
}

.accordion__arrow button.active {
  transform: rotate(0.5turn);
}


/*
Youtube video embedding
*/


.youtube-embed {
  background-color: #000;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.youtube-embed img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.youtube-embed .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.youtube-embed .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
}
.youtube-embed img,
.youtube-embed .play-button {
  cursor: pointer;
}
.youtube-embed img,
.youtube-embed iframe,
.youtube-embed .play-button,
.youtube-embed .play-button:before {
  position: absolute;
}
.youtube-embed .play-button,
.youtube-embed .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.youtube-embed iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.youtube-embed .cookie-optin-overlay {
  position: absolute;
  top: 50%;
  left: 30%;
  right: 30%;
  color: white;
  font-size: 1.4em;
  text-align: center;
  text-shadow: 0px 6px 21px black;
  transform: translateY(-50%);
  z-index: 1;
}

.youtube-embed a {
  color: inherit;
}
@charset "utf-8";

.offerFeatureStyle::after {
    display: none !important;
}

@media (max-width: 900px) {
    .bannerCarouselWindow {
        padding-bottom: 2% !important;
    }
}

@media (min-width: 901px) {
    .bannerCarouselWindow {
        padding-bottom: 3% !important;
    }
}

/* Banner Carousel Window */

/* MEDIA QUERY MOBILE */
@media (max-width: 749px) {

    .bannerCarouselWindow {
        max-height: 100%;
        margin: 0 auto 10px;
        padding-bottom: 10px;
        height: auto;
        width: 77%;
        background: none;
        overflow: visible;
        z-index: 1;
        position: relative;
    }

        .bannerCarouselWindow > .inner {
            opacity: 0;
            max-height: 300px;
            overflow: hidden;
        }

            .bannerCarouselWindow > .inner > div {
                position: absolute;
            }

        .bannerCarouselWindow > div:first-child,
        .bannerCarouselWindow > div > div:first-child {
            margin-left: 0;
            height: auto;
        }

        .bannerCarouselWindow::after {
            content: "";
            display: block;
            clear: both;
        }

        .bannerCarouselWindow .bx-controls .bx-next,
        .bannerCarouselWindow .bx-controls .bx-next:hover,
        .bannerCarouselWindow .bx-controls .bx-next:active {
            top: 42% !important;
            top: calc(50% - 30px) !important;
            left: auto;
            right: -30px;
        }

        .bannerCarouselWindow .bx-controls .bx-prev,
        .bannerCarouselWindow .bx-controls .bx-prev:hover,
        .bannerCarouselWindow .bx-controls .bx-prev:active {
            top: 42% !important;
            top: calc(50% - 30px) !important;
            left: -30px;
            right: auto;
        }
}


/* MEDIA QUERY DESKTOP */
@media (min-width: 750px) and (max-width: 5000px) {
    .bannerCarouselWindow .offerFeatureStyle {
        width: 300px !important;
    }

    .bannerCarouselWindow .bx-controls .bx-next {
        top: 42%;
        top: calc(50% - 35px);
        left: auto;
        right: -29px;
    }

        .bannerCarouselWindow .bx-controls .bx-next:hover {
            top: 42%;
            top: calc(50% - 35px);
            left: auto;
            right: -29px;
        }

        .bannerCarouselWindow .bx-controls .bx-next:active {
            top: 42%;
            top: calc(50% - 35px);
            left: auto;
            right: -29px;
        }

    .bannerCarouselWindow .bx-controls .bx-prev {
        top: 42%;
        top: calc(50% - 35px);
        left: -29px;
        right: auto;
    }

        .bannerCarouselWindow .bx-controls .bx-prev:hover {
            top: 42%;
            top: calc(50% - 35px);
            left: -29px;
            right: auto;
        }

        .bannerCarouselWindow .bx-controls .bx-prev:active {
            top: 42%;
            top: calc(50% - 35px);
            left: -29px;
            right: auto;
        }

    .bannerCarouselWindow {
        margin: 0 auto 10px;
        padding-bottom: 10px;
        height: 300px !important;
        width: 90%;
        background: none;
        overflow: visible;
        z-index: 1;
        position: relative;
    }

        .bannerCarouselWindow > .inner {
            opacity: 0;
            max-height: 300px;
            overflow: hidden;
        }

            .bannerCarouselWindow > .inner > div {
                position: absolute;
            }

        .bannerCarouselWindow > div:first-child,
        .bannerCarouselWindow > div > div:first-child {
            margin-left: 0;
            height: auto !important;
        }

        .bannerCarouselWindow::after {
            content: "";
            display: block;
            clear: both;
        }

        /*------   .OfferFeatureStyle   -------*/

        .bannerCarouselWindow .offerFeatureStyle h3,
        .bannerCarouselWindow .offerFeatureStyle h4 {
            padding-bottom: 6px;
            font-size: 2em;
            font-family: solido_bold;
        }

        .bannerCarouselWindow .offerFeatureStyle p {
            padding: 0;
        }

            .bannerCarouselWindow .offerFeatureStyle p strong {
                font-weight: normal;
                color: #ef3124;
            }

        .bannerCarouselWindow .offerFeatureStyle {
            float: left;
            width: 180px;
            margin-right: 15px;
            background: #ededed;
            background: -moz-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
            background: -webkit-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
            background: -o-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
            background: -ms-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
            background: linear-gradient(to bottom, #ededed 0, #eeeeee 30%, #ffffff 70%);
        }

            .bannerCarouselWindow .offerFeatureStyle:nth-child(5n) {
                margin-right: 15px;
            }

            .bannerCarouselWindow .offerFeatureStyle .promoImg {
                position: relative;
                padding-bottom: 95%;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

                .bannerCarouselWindow .offerFeatureStyle .promoImg img {
                    position: absolute;
                    width: 100%;
                    transition: transform .1s ease;
                }

            /*.bannerCarouselWindow .offerFeatureStyle:hover .promoImg img {
	transform: translateY(-3px);
	transition: transform .2s ease-in;
}*/

            .bannerCarouselWindow .offerFeatureStyle div.promoTxt {
                padding: 0 10px;
                font-size: 16px;
                color: black;
                height: 90px;
                position: relative;
                overflow: hidden;
            }

                .bannerCarouselWindow .offerFeatureStyle div.promoTxt::after {
                    position: absolute;
                    content: '';
                    bottom: -4px;
                    left: 0;
                    width: 100%;
                    height: 5px;
                    background-color: #fff;
                    display: block;
                    box-shadow: 0 0 9px 6px white;
                }

            .bannerCarouselWindow .offerFeatureStyle a.moreButton {
                margin: 10px;
                z-index: 3;
            }

            /*------   .PromoImg   -------*/

            .bannerCarouselWindow .offerFeatureStyle .promoImg {
                position: relative;
                padding-bottom: 95%;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

                .bannerCarouselWindow .offerFeatureStyle .promoImg img {
                    position: absolute;
                    width: 100%;
                    transition: transform .1s ease;
                    display: block;
                }

            .bannerCarouselWindow .offerFeatureStyle:hover .promoImg img {
                transform: translateY(0);
                transition: transform .0s ease-in;
            }

        /* OFFER FEATURE STYLE */

        .bannerCarouselWindow .offerFeatureStyle {
            float: left;
            width: 180px;
            margin-right: 15px;
            background: white;
            /* background: -moz-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -webkit-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -o-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -ms-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: linear-gradient(to bottom, #ededed 0%, #eeeeee 30%, #ffffff 70%); */
        }

            .bannerCarouselWindow .offerFeatureStyle:nth-child(5n) {
                margin-right: 15px;
            }

            .bannerCarouselWindow .offerFeatureStyle .promoImg {
                position: relative;
                padding-bottom: 100%;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

                .bannerCarouselWindow .offerFeatureStyle .promoImg img {
                    position: absolute;
                    width: 100%;
                    transition: transform .1s ease;
                }

            .bannerCarouselWindow .offerFeatureStyle:hover .promoImg img {
                transform: translateY(-3px);
                transition: transform .2s ease-in;
            }

            .bannerCarouselWindow .offerFeatureStyle div.promoTxt {
                padding-top: 15px;
                font-size: 16px;
                color: black;
                height: 90px;
                position: relative;
                overflow: hidden;
            }

                .bannerCarouselWindow .offerFeatureStyle div.promoTxt::after {
                    position: absolute;
                    content: '';
                    bottom: -4px;
                    left: 0;
                    width: 100%;
                    height: 5px;
                    background-color: #fff;
                    display: block;
                    box-shadow: 0 0 9px 6px white;
                }

            .bannerCarouselWindow .offerFeatureStyle a.moreButton {
                margin: 0 10px 10px 10px;
                z-index: 3;
            }
}

/* MORE BUTTON */

@media (max-width: 749px) {

    .bannerCarouselWindow .offerFeatureStyle div.promoTxt {
        font-size: 14px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

    .bannerCarouselWindow .offerFeatureStyle a.moreButton span {
        font-size: small;
    }
}

.bannerCarouselWindow .offerFeatureStyle a.moreButton {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 3;
    display: inline-block;
    vertical-align: middle;
    color: white !important;
    font-size: 14px;
    height: 33px;
    line-height: 33px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    border: solid 2px #ef3124;
    transition: .2s;
    background-color: #ef3124;
}

    .bannerCarouselWindow .offerFeatureStyle a.moreButton span {
        display: table-row;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        padding-right: 1em;
    }

    .bannerCarouselWindow .offerFeatureStyle a.moreButton:hover {
        border: solid 2px #ef3124;
        color: #ef3124 !important;
        background: white;
    }
/*
a.moreButton span::after {
	font-family: "fontello";
	content: '>';
	padding-left: .5em;
	font-size: .7em;
	position: absolute;
}
a.moreButton:hover span::after {
	padding-left: .6em;
}
*/
*.dark a.moreButton {
    color: white !important;
    border: solid 2px #eeeeee;
}

    *.dark a.moreButton:hover {
        border: solid 2px #ef3124;
    }

.bannerCarouselWindow .bx-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.bannerCarouselWindow .bx-wrapper .bx-loading {
    min-height: 50px;
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.imgsliderWindow .bx-wrapper .bx-loading {
    min-height: 50px;
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.bannerCarouselWindow .bx-pager {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 2;
}

    .bannerCarouselWindow .bx-pager.bx-default-pager {
        height: 30px;
        line-height: 35px;
        bottom: -30px;
        display: block;
        position: static;
    }

    .bannerCarouselWindow .bx-pager .bx-pager-item {
        display: inline-block;
    }

        .bannerCarouselWindow .bx-pager .bx-pager-item a {
            display: block;
            width: 12px;
            height: 12px;
            margin: 0 2px;
            background: grey;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50%;
            overflow: hidden;
            text-indent: -9999px;
        }

            .bannerCarouselWindow .bx-pager .bx-pager-item a.active {
                background: #ef3124;
            }

    .bannerCarouselWindow .bx-pager.pager-text {
        top: 0;
        bottom: auto;
        position: absolute;
        font-size: 16px;
        height: 30px;
    }

        .bannerCarouselWindow .bx-pager.pager-text a {
            display: inline-block;
            padding: 0 15px 0 14px;
            border-left: 1px solid #9b9b9b;
            line-height: 32px;
            color: #9b9b9b;
            text-decoration: none;
        }

            .bannerCarouselWindow .bx-pager.pager-text a:first-child {
                border-left: none;
            }

            .bannerCarouselWindow .bx-pager.pager-text a:hover,
            .bannerCarouselWindow .bx-pager.pager-text a.active {
                text-decoration: underline;
                color: black;
            }

*.dark .bannerCarouselWindow .bx-pager.pager-text a:hover,
*.dark .bannerCarouselWindow .bx-pager.pager-text a.active {
    color: white;
}

    *.dark .bannerCarouselWindow .bx-pager.pager-text a.active.inverted ~ a:hover,
    *.dark .bannerCarouselWindow .bx-pager.pager-text a.active.inverted:hover,
    *.dark .bannerCarouselWindow .bx-pager.pager-text a.active.inverted {
        color: black;
    }

.bannerCarouselWindow .bx-controls .bx-prev,
.bannerCarouselWindow .bx-controls .bx-next {
    font-size: 0;
    text-decoration: none;
    height: auto;
    width: auto;
    margin: 0;
    background: none;
    position: absolute;
    z-index: 3;
}

    .bannerCarouselWindow .bx-controls .bx-next,
    .bannerCarouselWindow .bx-controls .bx-next:hover,
    .bannerCarouselWindow .bx-controls .bx-next:active {
        top: 42%;
        top: calc(25% - 30px);
        left: auto;
        right: -30px;
    }

    .bannerCarouselWindow .bx-controls .bx-prev,
    .bannerCarouselWindow .bx-controls .bx-prev:hover,
    .bannerCarouselWindow .bx-controls .bx-prev:active {
        top: 42%;
        top: calc(25% - 30px);
        left: -30px;
        right: auto;
    }

        .bannerCarouselWindow .bx-controls .bx-prev::before {
            font-family: "Fontello";
            font-size: 50px;
            content: '\31';
            color: #676060;
        }

    .bannerCarouselWindow .bx-controls .bx-next::before {
        font-size: 50px;
        font-family: "Fontello";
	    content: '\32';
        color: #676060;
    }

.newOfferSlider .bx-controls .bx-prev::before {
    font-family: "Fontello";
	content: '\31';
    content: '\f104';
    color: #676060;
}

.newOfferSlider .bx-controls .bx-next::before {
    font-family: "Fontello";
    content: '\32';
    font-size: 50px;
    color: #676060;
}

.bannerCarouselWindow .bx-controls .bx-prev:hover::before,
.bannerCarouselWindow .bx-controls .bx-prev:active::before,
.newOfferSlider .bx-controls .bx-prev:hover::before,
.bannerCarouselWindow .bx-controls .bx-next:hover::before,
.bannerCarouselWindow .bx-controls .bx-next:active::before,
.newOfferSlider .bx-controls .bx-next:hover::before {
    color: #ef3124;
}

.bannerCarouselWindow .bx-controls .bx-prev.disabled::before,
.bannerCarouselWindow .bx-controls .bx-next.disabled::before,
.bannerCarouselWindow .bx-controls .bx-prev.disabled:hover::before,
.bannerCarouselWindow .bx-controls .bx-next.disabled:active::before {
    color: #eeeeee;
    cursor: default;
}

.offerFeatureStyle::after {
    content: ' ';
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    bottom: 0;
    right: -8px;
    background: #d8d8d8;
}

/* .OfferFeatureStyle */

.offerFeatureStyle h3,
.offerFeatureStyle h4 {
    padding-bottom: 6px;
    font-size: 2em;
    font-family: solido_bold;
}

.offerFeatureStyle p {
    padding: 0;
}

    .offerFeatureStyle p strong {
        font-weight: normal;
        color: #ef3124;
    }

.offerFeatureStyle {
    float: left;
    width: 180px;
    margin-right: 15px;
    background: #ededed;
    background: -moz-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
    background: -webkit-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
    background: -o-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
    background: -ms-linear-gradient(top, #ededed 0, #eeeeee 30%, #ffffff 70%);
    background: linear-gradient(to bottom, #ededed 0, #eeeeee 30%, #ffffff 70%);
}

    .offerFeatureStyle:nth-child(5n) {
        margin-right: 15px;
    }

    .offerFeatureStyle .promoImg {
        position: relative;
        padding-bottom: 95%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .offerFeatureStyle .promoImg img {
            position: absolute;
            width: 100%;
            transition: transform .1s ease;
        }

    .offerFeatureStyle:hover .promoImg img {
        transform: translateY(-3px);
        transition: transform .2s ease-in;
    }

    .offerFeatureStyle div.promoTxt {
        padding: 0 10px;
        font-size: 16px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

        .offerFeatureStyle div.promoTxt::after {
            position: absolute;
            content: '';
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            display: block;
            box-shadow: 0 0 9px 6px white;
        }

    .offerFeatureStyle a.moreButton {
        margin: 10px;
        z-index: 3;
    }

    /*------   .PromoImg   -------*/

    .offerFeatureStyle .promoImg {
        position: relative;
        padding-bottom: 95%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .offerFeatureStyle .promoImg img {
            position: absolute;
            width: 100%;
            transition: transform .1s ease;
            display: block;
        }

    .offerFeatureStyle:hover .promoImg img {
        transform: translateY(-3px);
        transition: transform .2s ease-in;
    }


/* OFFER FEATURE STYLE */

.offerFeatureStyle {
    float: left;
    width: 180px;
    margin-right: 15px;
    background: white;
    /* background: -moz-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -webkit-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -o-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -ms-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: linear-gradient(to bottom, #ededed 0%, #eeeeee 30%, #ffffff 70%); */
}

    .offerFeatureStyle:nth-child(5n) {
        margin-right: 15px;
    }

    .offerFeatureStyle .promoImg {
        position: relative;
        padding-bottom: 95%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .offerFeatureStyle .promoImg img {
            position: absolute;
            width: 100%;
            transition: transform .1s ease;
        }

    .offerFeatureStyle:hover .promoImg img {
        transform: translateY(-3px);
        transition: transform .2s ease-in;
    }

    .offerFeatureStyle div.promoTxt {
        padding-top: 15px;
        font-size: 16px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

        .offerFeatureStyle div.promoTxt::after {
            position: absolute;
            content: '';
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            display: block;
            box-shadow: 0 0 9px 6px white;
        }

    .offerFeatureStyle a.moreButton {
        margin: 0 10px 10px 10px;
        z-index: 3;
    }

/* MORE BUTTON */

@media (max-width: 749px) {

    .offerFeatureStyle div.promoTxt {
        font-size: 14px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

    a.moreButton span {
        font-size: small;
    }
}

a.moreButton {
    display: inline-block;
    vertical-align: middle;
    color: #ef3124 !important;
    font-size: 14px;
    height: 33px;
    line-height: 33px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    border: solid 2px #ef3124;
    transition: .2s;
}

    a.moreButton span {
        display: table-row;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        padding-right: 1em;
    }

    a.moreButton:hover {
        border: solid 2px #ef3124;
        color: white !important;
        background: #ef3124;
    }
/*
a.moreButton span::after {
	font-family: "fontello";
	content: '>';
	padding-left: .5em;
	font-size: .7em;
	position: absolute;
}
a.moreButton:hover span::after {
	padding-left: .6em;
}
*/
*.dark a.moreButton {
    color: white !important;
    border: solid 2px #eeeeee;
}

    *.dark a.moreButton:hover {
        border: solid 2px #ef3124;
    }

.offerCarouselWindow .bx-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.offerCarouselWindow .bx-wrapper .bx-loading {
    min-height: 50px;
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.imgsliderWindow .bx-wrapper .bx-loading {
    min-height: 50px;
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.offerCarouselWindow .bx-pager {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 2;
}

    .offerCarouselWindow .bx-pager.bx-default-pager {
        height: 30px;
        line-height: 35px;
        bottom: -30px;
    }

    .offerCarouselWindow .bx-pager .bx-pager-item {
        display: inline-block;
    }

        .offerCarouselWindow .bx-pager .bx-pager-item a {
            display: block;
            width: 12px;
            height: 12px;
            margin: 0 2px;
            background: grey;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50%;
            overflow: hidden;
            text-indent: -9999px;
        }

            .offerCarouselWindow .bx-pager .bx-pager-item a.active {
                background: #ef3124;
            }

    .offerCarouselWindow .bx-pager.pager-text {
        top: 0;
        bottom: auto;
        position: absolute;
        font-size: 16px;
        height: 30px;
    }

        .offerCarouselWindow .bx-pager.pager-text a {
            display: inline-block;
            padding: 0 15px 0 14px;
            border-left: 1px solid #9b9b9b;
            line-height: 32px;
            color: #9b9b9b;
            text-decoration: none;
        }

            .offerCarouselWindow .bx-pager.pager-text a:first-child {
                border-left: none;
            }

            .offerCarouselWindow .bx-pager.pager-text a:hover,
            .offerCarouselWindow .bx-pager.pager-text a.active {
                text-decoration: underline;
                color: black;
            }

*.dark .offerCarouselWindow .bx-pager.pager-text a:hover,
*.dark .offerCarouselWindow .bx-pager.pager-text a.active {
    color: white;
}

    *.dark .offerCarouselWindow .bx-pager.pager-text a.active.inverted ~ a:hover,
    *.dark .offerCarouselWindow .bx-pager.pager-text a.active.inverted:hover,
    *.dark .offerCarouselWindow .bx-pager.pager-text a.active.inverted {
        color: black;
    }

.offerCarouselWindow .bx-controls .bx-prev,
.offerCarouselWindow .bx-controls .bx-next {
    font-size: 0;
    text-decoration: none;
    height: auto;
    width: auto;
    margin: 0;
    background: none;
    position: absolute;
    z-index: 3;
}

    .offerCarouselWindow .bx-controls .bx-next,
    .offerCarouselWindow .bx-controls .bx-next:hover,
    .offerCarouselWindow .bx-controls .bx-next:active {
        top: 42%;
        top: calc(50% - 30px);
        left: auto;
        right: -30px;
    }

    .offerCarouselWindow .bx-controls .bx-next,
    .offerCarouselWindow .bx-controls .bx-prev:hover,
    .offerCarouselWindow .bx-controls .bx-prev:active {
        top: 42%;
        top: calc(50% - 30px);
        left: -30px;
        right: auto;
    }

    .offerCarouselWindow .bx-controls .bx-prev::before {
        font-family: "Fontello";
	    content: '\31';
        font-size: 50px;
        color: #676060;
    }

    .offerCarouselWindow .bx-controls .bx-next::before {
        font-family: "Fontello";
	    content: '\32';
        color: #676060;
    }

    .offerCarouselWindow .bx-controls .bx-prev:hover::before,
    .offerCarouselWindow .bx-controls .bx-prev:active::before,
    .offerCarouselWindow .bx-controls .bx-next:hover::before,
    .offerCarouselWindow .bx-controls .bx-next:active::before {
        color: #ef3124;
    }

    .offerCarouselWindow .bx-controls .bx-prev.disabled::before,
    .offerCarouselWindow .bx-controls .bx-next.disabled::before,
    .offerCarouselWindow .bx-controls .bx-prev.disabled:hover::before,
    .offerCarouselWindow .bx-controls .bx-next.disabled:active::before {
        color: #eeeeee;
        cursor: default;
    }


/*------   .OfferFeatureStyle   -------*/

.bannerCarouselWindow .offerFeatureStyle h3,
.bannerCarouselWindow .offerFeatureStyle h4 {
    padding-bottom: 6px;
    font-size: 2em;
    font-family: solido_bold;
}

.bannerCarouselWindow .offerFeatureStyle p {
    padding: 0;
}

    .bannerCarouselWindow .offerFeatureStyle p strong {
        font-weight: normal;
        color: #ef3124;
    }

.bannerCarouselWindow .offerFeatureStyle {
    float: left;
    width: 180px;
    margin-right: 15px;
    background: #ededed;
    background: -moz-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
    background: -webkit-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
    background: -o-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
    background: -ms-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
    background: linear-gradient(to bottom, #ededed 0%, #eeeeee 30%, #ffffff 70%);
}

    .bannerCarouselWindow .offerFeatureStyle:nth-child(5n) {
        margin-right: 15px;
    }

    .bannerCarouselWindow .offerFeatureStyle .promoImg {
        position: relative;
        padding-bottom: 95%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .bannerCarouselWindow .offerFeatureStyle .promoImg img {
            position: absolute;
            width: 100%;
            transition: transform .1s ease;
        }

    /*.bannerCarouselWindow .offerFeatureStyle:hover .promoImg img {
	transform: translateY(-3px);
	transition: transform .2s ease-in;
}*/

    .bannerCarouselWindow .offerFeatureStyle div.promoTxt {
        padding: 0 10px;
        font-size: 16px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

        .bannerCarouselWindow .offerFeatureStyle div.promoTxt::after {
            position: absolute;
            content: '';
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            display: block;
            box-shadow: 0 0 9px 6px white;
        }

    .bannerCarouselWindow .offerFeatureStyle a.moreButton {
        margin: 10px;
        z-index: 3;
    }

    /*------   .PromoImg   -------*/

    .bannerCarouselWindow .offerFeatureStyle .promoImg {
        position: relative;
        padding-bottom: 95%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .bannerCarouselWindow .offerFeatureStyle .promoImg img {
            position: absolute;
            width: 100%;
            transition: transform .1s ease;
            display: block;
        }

    .bannerCarouselWindow .offerFeatureStyle:hover .promoImg img {
        transform: translateY(0);
        transition: transform .0s ease-in;
    }

/* OFFER FEATURE STYLE */

.bannerCarouselWindow .offerFeatureStyle {
    float: left;
    width: 180px;
    margin-right: 15px;
    background: white;
    /* background: -moz-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -webkit-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -o-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: -ms-linear-gradient(top, #ededed 0%, #eeeeee 30%, #ffffff 70%);
	background: linear-gradient(to bottom, #ededed 0%, #eeeeee 30%, #ffffff 70%); */
}

    .bannerCarouselWindow .offerFeatureStyle:nth-child(5n) {
        margin-right: 15px;
    }

    .bannerCarouselWindow .offerFeatureStyle .promoImg {
        position: relative;
        padding-bottom: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .bannerCarouselWindow .offerFeatureStyle .promoImg img {
            position: absolute;
            width: 100%;
            transition: transform .1s ease;
        }

    .bannerCarouselWindow .offerFeatureStyle:hover .promoImg img {
        transform: translateY(-3px);
        transition: transform .2s ease-in;
    }

    .bannerCarouselWindow .offerFeatureStyle div.promoTxt {
        padding-top: 15px;
        font-size: 16px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

        .bannerCarouselWindow .offerFeatureStyle div.promoTxt::after {
            position: absolute;
            content: '';
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            display: block;
            box-shadow: 0 0 9px 6px white;
        }

    .bannerCarouselWindow .offerFeatureStyle a.moreButton {
        margin: 0 10px 10px 10px;
        z-index: 3;
    }

/* MORE BUTTON */

@media (max-width: 749px) {

    .bannerCarouselWindow .offerFeatureStyle div.promoTxt {
        font-size: 14px;
        color: black;
        height: 90px;
        position: relative;
        overflow: hidden;
    }

    .bannerCarouselWindow .offerFeatureStyle a.moreButton span {
        font-size: small;
    }
}

.bannerCarouselWindow .offerFeatureStyle a.moreButton {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 3;
    display: inline-block;
    vertical-align: middle;
    color: white !important;
    font-size: 14px;
    height: 33px;
    line-height: 33px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    border: solid 2px #ef3124;
    transition: .2s;
    background-color: #ef3124;
}

    .bannerCarouselWindow .offerFeatureStyle a.moreButton span {
        display: table-row;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        padding-right: 1em;
    }

    .bannerCarouselWindow .offerFeatureStyle a.moreButton:hover {
        border: solid 2px #ef3124;
        color: #ef3124 !important;
        background: white;
    }
/*
a.moreButton span::after {
	font-family: "fontello";
	content: '>';
	padding-left: .5em;
	font-size: .7em;
	position: absolute;
}
a.moreButton:hover span::after {
	padding-left: .6em;
}
*/
*.dark a.moreButton {
    color: white !important;
    border: solid 2px #eeeeee;
}

    *.dark a.moreButton:hover {
        border: solid 2px #ef3124;
    }

.bannerCarouselWindow .bx-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.bannerCarouselWindow .bx-wrapper .bx-loading {
    min-height: 50px;
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.imgsliderWindow .bx-wrapper .bx-loading {
    min-height: 50px;
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.bannerCarouselWindow .bx-pager {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 2;
}

    .bannerCarouselWindow .bx-pager.bx-default-pager {
        height: 30px;
        line-height: 35px;
        bottom: -30px;
    }

    .bannerCarouselWindow .bx-pager .bx-pager-item {
        display: inline-block;
    }

        .bannerCarouselWindow .bx-pager .bx-pager-item a {
            display: block;
            width: 12px;
            height: 12px;
            margin: 0 2px;
            background: grey;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50%;
            overflow: hidden;
            text-indent: -9999px;
        }

            .bannerCarouselWindow .bx-pager .bx-pager-item a.active {
                background: #ef3124;
            }

    .bannerCarouselWindow .bx-pager.pager-text {
        top: 0;
        bottom: auto;
        position: absolute;
        font-size: 16px;
        height: 30px;
    }

        .bannerCarouselWindow .bx-pager.pager-text a {
            display: inline-block;
            padding: 0 15px 0 14px;
            border-left: 1px solid #9b9b9b;
            line-height: 32px;
            color: #9b9b9b;
            text-decoration: none;
        }

            .bannerCarouselWindow .bx-pager.pager-text a:first-child {
                border-left: none;
            }

            .bannerCarouselWindow .bx-pager.pager-text a:hover,
            .bannerCarouselWindow .bx-pager.pager-text a.active {
                text-decoration: underline;
                color: black;
            }

*.dark .bannerCarouselWindow .bx-pager.pager-text a:hover,
*.dark .bannerCarouselWindow .bx-pager.pager-text a.active {
    color: white;
}

    *.dark .bannerCarouselWindow .bx-pager.pager-text a.active.inverted ~ a:hover,
    *.dark .bannerCarouselWindow .bx-pager.pager-text a.active.inverted:hover,
    *.dark .bannerCarouselWindow .bx-pager.pager-text a.active.inverted {
        color: black;
    }

.bannerCarouselWindow .bx-controls .bx-prev,
.bannerCarouselWindow .bx-controls .bx-next {
    font-size: 0;
    text-decoration: none;
    height: auto;
    width: auto;
    margin: 0;
    background: none;
    position: absolute;
    z-index: 3;
}

    .bannerCarouselWindow .bx-controls .bx-next,
    .bannerCarouselWindow .bx-controls .bx-next:hover,
    .bannerCarouselWindow .bx-controls .bx-next:active {
        top: 42%;
        top: calc(25% - 30px);
        left: auto;
        right: -30px;
    }

    .bannerCarouselWindow .bx-controls .bx-prev,
    .bannerCarouselWindow .bx-controls .bx-prev:hover,
    .bannerCarouselWindow .bx-controls .bx-prev:active {
        top: 42%;
        top: calc(25% - 30px);
        left: -30px;
        right: auto;
    }

        .bannerCarouselWindow .bx-controls .bx-prev::before {
            font-family: "Fontello";
	        content: '\31';
            font-size: 50px;
            color: #676060;
        }

    .bannerCarouselWindow .bx-controls .bx-next::before {
        font-family: "Fontello";
	    content: '\32';
        color: #676060;
    }

    .bannerCarouselWindow .bx-controls .bx-prev:hover::before,
    .bannerCarouselWindow .bx-controls .bx-prev:active::before,
    .bannerCarouselWindow .bx-controls .bx-next:hover::before,
    .bannerCarouselWindow .bx-controls .bx-next:active::before {
        color: #ef3124;
    }

    .bannerCarouselWindow .bx-controls .bx-prev.disabled::before,
    .bannerCarouselWindow .bx-controls .bx-next.disabled::before,
    .bannerCarouselWindow .bx-controls .bx-prev.disabled:hover::before,
    .bannerCarouselWindow .bx-controls .bx-next.disabled:active::before {
        color: #eeeeee;
        cursor: default;
    }

.bnImage{
    position: fixed  ;
    right: -100%;
    transform: rotate(5deg);
    z-index: 999999999;
    animation: slide 15s;
}

.bnImage.back{
    transform:  rotateY(180deg) rotate(-5deg);
    animation: slideBack 15s;
}


@keyframes slide {
    0%{
        right: -100%;
        top: 500px;
    }
    100%{
        right: 100%;
        top: 200px;
    }  
}
@keyframes slideBack {
    0%{
        left: -100%;
        top: 500px;
    }
    100%{
        left: 100%;
        top: 200px;
    }  
}

.dv_card_title h3 { color: #000 !important; }
.dv-card-wrap h3 { font-style: inherit !important;letter-spacing: inherit !important;text-transform: none !important; }

.swiper-container {
    width: 96%;
    height: 100%;
    padding-bottom: 25px;
}
.swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-pagination-bullet-active { background: #ee3124; }

.swiper-slide .dv-card-wrap { width: 90% !important; }

.terms { font-size: 11px !important; line-height: 15px !important; padding: 10px; }

.whitetext { color: #fff !important; }

.center { text-align: center !important; }

/* CONTAINER FIX */

.mainContainer { margin-left: -2px; }

/* PRODUCT TWEAKS */

.dv-card-wrap { border-radius: 0 !important; }

.dv-card-wrap p { font-family: solido_book,helvetica,'arial narrow' !important; }

.dv-card-wrap a.medButton { font-size: 20px !important; }

.dv_card_title { font-family: solido_book,helvetica,'arial narrow' !important; font-size: 1.2em !important; }

.medButton text { font-size: 19px !important; }

.notEcomMed { top: 14px; position: relative; margin: 8px; line-height: 33px !important; margin-bottom: 33px; }

.dv-cta-block { border-radius: 0 !important; }

/* HELPER CLASSES */

.mTop10 { margin-top: 10px !important; }
.mTop20 { margin-top: 20px !important; }
.mTop30 { margin-top: 30px !important; }
.mTop50 { margin-top: 50px !important; }

.mTopNeg10 { margin-top: -10px !important; }
.mTopNeg20 { margin-top: -20px !important; }
.mTopNeg30 { margin-top: -30px !important; }
.mTopNeg50 { margin-top: -50px !important; }

.mBottom10 { margin-bottom: 10px !important; }
.mBottom20 { margin-bottom: 20px !important; }
.mBottom30 { margin-bottom: 30px !important; }
.mBottom50 { margin-bottom: 50px !important; }

.mBottomNeg10 { margin-bottom: -10px !important; }
.mBottomNeg20 { margin-bottom: -20px !important; }
.mBottomNeg30 { margin-bottom: -30px !important; }
.mBottomNeg50 { margin-bottom: -50px !important; }

.pTop10 { padding-top: 10px !important; }
.pTop20 { padding-top: 20px !important; }
.pTop30 { padding-top: 30px !important; }
.pTop50 { padding-top: 50px !important; }

.pBottom10 { padding-bottom: 10px !important; }
.pBottom20 { padding-bottom: 20px !important; }
.pBottom30 { padding-bottom: 30px !important; }
.pBottom50 { padding-bottom: 50px !important; }

.pad10 { padding:10px !important; }
.pad20 { padding:20px !important; }
.pad30 { padding:30px !important; }
.pad50 { padding:50px !important; }

.align { display: flex;align-items: center;justify-content: center; }
.align-item { max-width: 50%; }
.align-item-top { align-self: flex-start; }
.align-item-bottom { align-self: flex-end; }
.carousel__slide,.fancybox__slide{overscroll-behavior:contain;max-width:100%}.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel :after,.carousel :before{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:60%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto}.has-dots{margin-bottom:calc(.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + .5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.fancybox__container.is-animated.is-closing .fancybox__thumbs,.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.carousel__button{width:48px;height:48px;padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:currentColor;background:0 0;border-radius:50%;box-shadow:none;transition:opacity .15s}.carousel__button.is-next,.carousel__button.is-prev{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:bevel;stroke-linecap:round;filter:none;pointer-events:none}html.with-fancybox{scroll-behavior:auto}body.compensate-for-scrollbar{overflow:hidden!important;touch-action:none}.fancybox__container{position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);box-sizing:border-box;display:flex;flex-direction:column;color:#fff;-webkit-tap-highlight-color:transparent;overflow:hidden;z-index:1050;outline:0;transform-origin:top left}.fancybox__container *,.fancybox__container ::after,.fancybox__container ::before{box-sizing:inherit}.fancybox__container :focus{outline:0}body:not(.is-using-mouse) .fancybox__container :focus{box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(1,210,232,.94)}.fancybox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:rgba(24,24,27,.92)}.fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10}.fancybox__carousel.has-dots{margin-bottom:calc(.5rem + 22px)}.fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default}.fancybox__track{display:flex;height:100%}.fancybox__slide{flex:0 0 auto;width:100%;margin:0;padding:48px 8px 8px;position:relative;display:flex;flex-direction:column;outline:0;overflow:auto}.fancybox__slide::after,.fancybox__slide::before{content:"";flex:0 0 0;margin:auto}.fancybox__content{margin:0 env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);padding:36px;color:#374151;background:#fff;position:relative;align-self:center;display:flex;flex-direction:column;z-index:20}.fancybox__content :focus:not(.carousel__button.is-close){outline:dotted thin;box-shadow:none}.fancybox__caption{align-self:center;max-width:100%;margin:0;padding:1rem 0 0;line-height:1.375;color:currentColor;visibility:visible;cursor:auto;flex-shrink:0;overflow-wrap:anywhere}.is-loading .fancybox__caption{visibility:hidden}.fancybox__container>.carousel__dots{top:100%;color:#fff}.fancybox__nav .carousel__button{z-index:40}.fancybox__nav .carousel__button.is-next{right:8px}.fancybox__nav .carousel__button.is-prev{left:8px}.carousel__button.is-close{position:absolute;top:8px;right:8px;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);z-index:40}.fancybox__content>.carousel__button.is-close{position:absolute;top:-40px;right:0;color:#fff}.fancybox__no-click,.fancybox__no-click button{pointer-events:none}.fancybox__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;color:currentColor}.fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053}.fancybox__spinner svg{animation:2s linear infinite fancybox-rotate;transform-origin:center center;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%}.fancybox__spinner svg circle{fill:none;stroke-width:2.75;stroke-miterlimit:10;stroke-dasharray:1,200;stroke-dashoffset:0;animation:1.5s ease-in-out infinite fancybox-dash;stroke-linecap:round;stroke:currentColor}@keyframes fancybox-rotate{100%{transform:rotate(360deg)}}@keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.carousel__button.is-close,.carousel__dots,.fancybox__backdrop,.fancybox__caption,.fancybox__nav{opacity:1}.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav{animation:.15s backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .carousel__button.is-close,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav{animation:.15s both fancybox-fadeOut}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs,.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox-fadeIn{animation:.15s both fancybox-fadeIn}.fancybox-fadeOut{animation:.1s both fancybox-fadeOut}.fancybox-zoomInUp{animation:.2s both fancybox-zoomInUp}.fancybox-zoomOutDown{animation:.15s both fancybox-zoomOutDown}.fancybox-throwOutUp{animation:.15s both fancybox-throwOutUp}.fancybox-throwOutDown{animation:.15s both fancybox-throwOutDown}@keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@keyframes fancybox-fadeOut{to{opacity:0}}@keyframes fancybox-zoomInUp{from{transform:scale(.97) translate3d(0,16px,0);opacity:0}to{transform:scale(1) translate3d(0,0,0);opacity:1}}@keyframes fancybox-zoomOutDown{to{transform:scale(.97) translate3d(0,16px,0);opacity:0}}@keyframes fancybox-throwOutUp{to{transform:translate3d(0,-30%,0);opacity:0}}@keyframes fancybox-throwOutDown{to{transform:translate3d(0,30%,0);opacity:0}}.fancybox__carousel .carousel__slide{scrollbar-width:thin;scrollbar-color:#ccc rgba(255,255,255,0.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px}.fancybox__carousel .carousel__slide::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)}.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content,.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content,.fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content{cursor:move;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto}.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in}.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out}.fancybox__image{transform-origin:0 0;user-select:none;transition:none}.has-image .fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px}.is-closing .has-image .fancybox__content{overflow:visible}.has-image[data-image-fit=contain],.has-image[data-image-fit=cover]{overflow:visible;touch-action:none}.has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap}.has-image[data-image-fit=contain] .fancybox__image{max-width:100%;max-height:100%;object-fit:contain}.has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto}.has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto}.has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto}.has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%}.has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover}.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content,.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.fancybox__carousel .fancybox__slide.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0 3px;opacity:1}.fancybox__thumbs .carousel__slide{flex:0 0 auto;width:96px;margin:0;padding:8px 3px;box-sizing:content-box;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer}.fancybox__thumbs .carousel__slide .fancybox__thumb::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:5px solid rgba(34,213,233,.96);opacity:0;transition:opacity .15s;border-radius:4px}.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92}.fancybox__thumbs .carousel__slide>*{pointer-events:none;user-select:none}.fancybox__thumb{position:relative;width:100%;padding-top:calc(100% / 1.5);background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;border-radius:4px}.fancybox__toolbar{position:absolute;top:0;right:0;left:0;z-index:20;background:linear-gradient(to top,hsla(0deg,0%,0%,0) 0,hsla(0deg,0%,0%,.006) 8.1%,hsla(0deg,0%,0%,.021) 15.5%,hsla(0deg,0%,0%,.046) 22.5%,hsla(0deg,0%,0%,.077) 29%,hsla(0deg,0%,0%,.114) 35.3%,hsla(0deg,0%,0%,.155) 41.2%,hsla(0deg,0%,0%,.198) 47.1%,hsla(0deg,0%,0%,.242) 52.9%,hsla(0deg,0%,0%,.285) 58.8%,hsla(0deg,0%,0%,.326) 64.7%,hsla(0deg,0%,0%,.363) 71%,hsla(0deg,0%,0%,.394) 77.5%,hsla(0deg,0%,0%,.419) 84.5%,hsla(0deg,0%,0%,.434) 91.9%,hsla(0deg,0%,0%,.44) 100%);padding:0;touch-action:none;display:flex;justify-content:space-between;opacity:1;text-shadow:1px 1px 1px rgba(0,0,0,.4)}@media all and (min-width:1024px){.fancybox__slide{padding:64px 100px}.carousel__button.is-close,.fancybox__nav .carousel__button.is-next{right:40px}.fancybox__nav .carousel__button.is-prev{left:40px}.fancybox__toolbar{padding:8px}}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto}.fancybox__toolbar__items--center{position:absolute;left:50%;transform:translateX(-50%)}.fancybox__toolbar__items--right{margin-left:auto}@media (max-width:640px){.fancybox__toolbar__items--center:not(:last-child){display:none}}.fancybox__counter{min-width:72px;padding:0 10px;line-height:48px;text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased}.fancybox__progress{background:rgba(34,213,233,.96);height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:30;user-select:none}.fancybox__container:fullscreen::backdrop{opacity:0}.fancybox__button--fullscreen g:nth-child(2){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:first-child{display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__button--slideshow g:nth-child(2),.fancybox__container.has-slideshow .fancybox__button--slideshow g:first-child{display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block}
 @font-face {
  font-family: 'Bebas Neue';
  src: url('/Views/Locale/Content/Fonts/BebasNeue-Regular.eot');
  src: url('/Views/Locale/Content/Fonts/BebasNeue-Regular.eot?#iefix') format('embedded-opentype'),
      url('/Views/Locale/Content/Fonts/BebasNeue-Regular.woff2') format('woff2'),
      url('/Views/Locale/Content/Fonts/BebasNeue-Regular.woff') format('woff'),
      url('/Views/Locale/Content/Fonts/BebasNeue-Regular.ttf') format('truetype'),
      url('/Views/Locale/Content/Fonts/BebasNeue-Regular.svg#BebasNeue-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* temp HP font */
/* @font-face {
	  font-family: 'Headline One';
	  src: url('/Views/Locale/Content/Fonts/HEADOH__.ttf') format('truetype');
	  font-weight: normal;
		font-style: normal;
		font-display: swap;
}
@font-face {
  font-family: 'Headline One normal';
  src: url('/Views/Locale/Content/fonts/HEADTH__.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */
/**
---
Modifier for /giftcardbalance page
---

V 1.0.2
Last modified:15/01/2024
---

CHANGELOG
- text here
---
*/


  @charset "utf-8";
/* CSS Document */

/* mad monday */

.giftCardBalance {
    margin: 0 auto;
    padding: 20px;
    width: auto;
}

.giftCardDisc {
    font-size: 11px;
    padding: 10px 25px 50px;
}


/* --------------------- Smartphone -------------------- */


@media (max-width: 360px) {

.giftCardText {
	background-image:none;
	text-align: justify;}


.giftCardBlock img {
	width:100%;}
	
.giftCardBlock {
	margin:0;}
	
.giftCardBalance .giftStep {
    margin-top: 10px;
	padding:0;
}

.giftCardDisc {
    font-size: 11px;
    padding: 10px 25px 25px;
}	

}

/* --------------------- Smartphone landscape -------------------- */

@media (min-width: 360px) and (max-width: 568px) {
	
.giftCardText {
	background-image:none;}
}
	





/* --------------------- Tablet -------------------- */

@media (min-width: 569px) and (max-width: 959px) {

.giftCardBalance {
    margin: 0 auto;
    padding: 15px;
}	

.giftCardText {
		padding: 0 50% 10px 10px;
		text-align: left;
		}

}





#recPage a{
    color: black;
    text-decoration: none;
    display: block;
    width: fit-content;
}

#recPage h1,#recPage h3{
    text-transform: uppercase;
    font-family: 'Poppins';
    color: #333;
    font-size: 1.8em;
    text-align: center;
}

#recPage main{
    width: 100%;
    margin: 0 auto;
}

#recPage button{
    background-color: transparent;
    display: block;
    border: none;
    cursor: pointer;
    transition: .2s all linear;
    height: auto;
    width: auto;
}

#recPage .cta{
    background-color: transparent;
    display: block;
    border: none;
    cursor: pointer;
    transition: .2s all linear;
    height: 190px;
    width: auto;
}

#recPage button.active{
    background-color:#8C7BB4;
}

#recPage button.active img{
    filter: invert(100);
    filter: brightness(100)
}

#recPage button:hover{
    background-color: rgb(236, 236, 236);
}

#recPage button.active:hover{
    background-color: #7d6da2;
}

#btn-Candidatura{
    /* padding: 1.5em; */
    height: 60px;
}

/* NAVBAR */    

#recPage nav {
    background-color: rgb(22, 22, 22);
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    z-index: 999999;
    width: 100%;
    padding-top: .5em;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.2);
}

#recPage nav a:first-of-type{
    height: 30px;
}

#recPage nav img{
    width: 100%;
    height: 30px;
}

#recPage nav ul{
    display: flex;
    list-style: none;
}

#recPage nav ul li{
    margin-left: 1em;
    color: rgb(22, 22, 22);
    background-color: #fff;
    border-radius: 30px;
    padding: .1em 1.5em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: .7em;
    cursor: pointer;
} 

/* HERO */

#recPage header{
    background-image: url('/Views/Locale/promoPages/recPages/AlliboHR/img/HR-Hero.jpg?rel=1');
    background-position: center;
    background-size: cover;
    height: 40vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#recPage header::before{
    content: '';
    display: block;
    position: absolute;
    background-color: rgb(0, 0, 0);
    opacity: .6;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#recPage .HR-inner{
    padding: clamp(3em,4em,8em);
}

#recPage .HR-mainText{
    width: 100%;
    margin: 0 auto;
    z-index: 9;
}

#recPage .HR-mainText h1{
    position: relative;
    font-size: clamp(1.5em,5vw,5em);
    color: #fff;
    z-index: 1;
}

#recPage .aw_intro{
    display: none;
}

/* TEXT-BOX */

#recPage .HR-textBox{
    padding: 4em 2em;
    width:85%;
    font-size: 1.4em;
    margin: 2em auto;
}

#recPage .HR-textBox h3{
    font-weight: 400;
    text-transform: none;
    font-size: 1em;
    white-space: pre-line;
}

/* CONTENT */

#recPage main .HR-buttonBox img {
    height: 70px;
    width: 100%;
    margin: 0 auto .5em auto;
}

#recPage main h2 {
    font-size: 1em;
    margin: .5em auto;
    width: 80%;
    font-family: 'Poppins';
    font-weight: 400;
}

#recPage button.active h2{
    color: white;
}

#recPage .HR-buttonBox{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#recPage .HR-buttonBox::after{
    content: '';
    display: block;
    position: absolute;
    bottom: -5px;
    width: 100%;
    height: 5px;
    background-color: #8C7BB4;
}

#recPage .HR-content .HR-inner {
    width: 100%;
    padding: 0;
    margin: 1em auto;
    min-height: 500px;
    max-height: fit-content;
    display: none;
    transition: .2s all linear;
}

#recPage button.active .HR-content .HR-inner{
    display: block;
}

#recPage .section-img{
    margin: 2em auto;
    transition: .2s all linear;
}

#recPage .section-img img{
    width: 100%;
    height: 200px;
    object-fit:cover;
    object-position: 20% 20%;
    filter: brightness(50%);
}

/* ALLIBO */

#recPage #HR-Candidatura a {
    background-color: #E81E25;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Poppins';
    padding: .5em 2em;
    display: block;
    width: fit-content;
    border-radius: 60px;
    font-size: 1.2em;
    text-transform: capitalize;
    margin: 0 auto;
    transition: .2s all linear;
}
#recPage #HR-Candidatura a:hover{
    background-color: #8C7BB4;
}

.aw_jobPosting::after {
    content: '';
    width: 90%;
    height: 1px;
    background-color: #d9d9d9;
    display: block;
    margin: 1em auto 0 auto;
}

.aw_jobPosting h3{
    text-align:start;
}

.aw_jobPosting mark {
    display: inline-block;
    margin-bottom: 7px;
    padding: 2px 6px 1px 6px;
    background-color: #E81E25 !important;
    padding: .25em .5em;
    font-weight: 600;
    border-radius: 30px;
    color: #FFF;
    font-size: 80%;
    text-transform: uppercase;
}

.aw_application .aw_applyLink {
    line-height: 30px;
}

.aw_jobList .aw_pager {
    margin-top: 7px;
    justify-content: center;
    border-top: none !important;
    display: flex !important;
}

.aw_jobPosting p {
    text-align: center;
    font-size: 1.2em;
}

.aw_jobPosting mark {
    font-size: 100% !important;
}

#recPage .NL-buttons a{
    width: auto;
}

#recruitingDay .aw_jobList .aw_pager {
    display: none !important;
}

/* Media queries */

@media(min-width:1440px){
    #recPage header{
     height:65vh;
    }
}

@media (max-width:576px){
    #recPage main h2{
        font-size: .8em;
    }  

    #recPage main .HR-buttonBox img:last-of-type{
        width: 70%;
        height: 50px;
        margin: 0 auto;
    }

    #recPage #btn-Candidatura{
        padding: 0;
    }

    #recPage header{
        height: 50vh;
    }

    #recPage .HR-textBox {
        width: 90%;
        padding: 1em;
    }
    
}

/* Sticky Banner */

#sticky{
    padding-top: 2em;
}

#nav-sticky.allibo > div{
    justify-content: space-between;
}


/* FullArt banner */

.FAB-banner img{
    width: 100%;
    border-radius: 5px;
}

.FAB-banner{
    overflow: hidden;
}






/* MASSIVE RESTYLING TEMP */

/* Last Modified: 17/06/2022 

by Manuel

*/

.faSecondaryMenu{
	display:none;
	background-color: white;
}

.faSecMenuPosition {
	display: none !important;
}

.quickSearch p.added {
	display: flex;
	gap: .5em;
    justify-content: flex-end;
}

.quickInputContainer {
    position: relative;
    height: 46px;
    font-size: 18px;
    background: #fff;
    border: solid 1px #eaeaea;
    display: flex;
    background: #f0f0f0 0 0 no-repeat padding-box;
	border-radius: 6px;
}

.platformBar ul {
    border-radius: 5px;
    width: max-content;
}

.platformBar li {
    height: 40px;
    float: center;
    padding: 0;
    cursor: pointer;
    border-right: none;
	text-transform:capitalize;
	transition:.2s all linear;
	font-weight: 600;
}

.platformBar {
    padding-bottom: 0;
    position: relative;
    margin: 2em auto .5em auto;
    display: flex;
    justify-content: center;
}

.platformBar li a.platButton {
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600 !important;
}

.quickSearchWider {
    margin-right: 0;
}

@media (min-width:1280px) {
    .platformBar ul {
        width: 1268px !important;
    }   
}

.loyalty-upgrade-prompt {
    float: right;
    background-color: #f39433;
    padding: 0 6px 0 6px;
    margin-top: -11px;
    letter-spacing: 2px;
}

/* button hovering color */

#usato:hover{
	background-color: #FFC21A;
	color: white;
	transition:.2s all linear;
}
#presell:hover{
	background-color: #E81E25;
	color: white;
	transition:.2s all linear;
}

#presell:hover a,#usato:hover a{
    color: #fff;
}

.loyaltyProfileBox {
    margin-left: 10px;
    margin-top: 11px;
}

.loyaltyProfileBox p {
    font-weight: bold;
    border-radius: 8px;
}

.joinNow a {
    line-height: 11px;
    color: rgb(255, 255, 255);
}

.head1 {
    margin-top: 5px;
    margin-left: 12px;
    width: 215px;
}

.head1 a {
    display: block;
    width: 215px;
    height: 55px;
}

.headBar .head1 a img{
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.platformBar li:hover a.platButton, .platformBar li.current-page a.platButton {
    display: block;
    height: 40px;
    width: fit-content;
}

@media (max-width:570px){
    body {
        position: relative;
    }
}

/* Tablet view Fix */

@media (max-width: 959px){
    .platMenuMobile {
        width: 100%;
        height: 150px;
    }

    .platMenuMobile {
        height: 46px;
        border-radius: 10px;
    }

    .platMenuMobile a {
        padding: 10px 0;
    }

}

/* new Hamburger Menu */

@media (max-width:960px) {
    .platformBar, #menu li {
        background: white;
        border: none !important;
    }
    
    #menu li {
        padding-left: 2em;
    }
    
    .platformBar, #menu li .platButton {
        color: #333;
        border: #fff 1px !important;
    }

    #menu li{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #menu li::after {
        font-family: 'fontello';
        content: '\32';
        display: block;
        width: 20px;
        height: 20px;
        opacity: .5;
    }
    
    .platformBar {
        padding: 0px 6px 6px 6px;
    }

    .platformBar ul {
        width: max-content;
    }
    
}

@media (max-width: 576px){
    
    #menu{
        top: 44px !important;
        z-index: 100000000000000000000000000000;
        padding: 1em 0;
        background-color: white;
        box-shadow: 0 6px 8px rgba(0,0,0,0.15);
    }

    .cartEmpty {
        border-left: none;
        border-right: none;
    }

    .platformBar {
        padding: 0px 6px 6px 6px;
    }
    
    .platformBar ul {
        width: max-content;
    }

    .platformBar li {
        box-shadow: none;
    }

}

.head1 a {
    background: none !important;
}

/* platformbar tablet view fix */

@media (min-width: 569px) and (max-width: 959px){
    .platformBar {
        top: -11px !important ;
    }

}

/* Scroll to top Button */

.toTopBtn {
    height: 24px;
    width: 24px;
    bottom: 15px;
    right: 15px;
    padding: 10px;
    line-height: 24px;
    text-align: center;
    background: #fff;
    color: grey;
    font-size: 0;
    border-radius: 50px;
    font-weight: normal;
    transition: .2s ease;
    box-shadow: 0 0 9px rgba(0,0,0,15%)
}

.toTopBtn::after {
    content: "3";
    font-family: "fontello";
    font-size: 21px
}


.toTopBtn:hover {
    background: #eeeeee !important;
}

/* -------------------------------------------------------------------------------- */








/* 
Instafeed styling
by Manu

Get Instagram Profile's feed and render it with a website compliant layout.

v. 1.0.0
last edit:11/10/2023

Changelog:


*/

/* .LazyLoad*/
#instafeed .row{ 
    background-color: lightgray;
    animation: skeleton-loading 1s linear infinite alternate;
    height: 10px;
    width: 90%;
    border-radius: 30px;
    margin: .5em;
    margin-right: auto;
    margin-left: 0;
}

#instafeed .half{
    width: 60%;
}

#instafeed .round{
    animation: skeleton-loading 1s linear infinite alternate;
    background-color: lightgray;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-bottom: .5em;
}

#instafeed .title{
    width: 30%;
    margin-right: auto;
}

#instafeed .IG-slider-outer {
    margin: 2em 0;
    height: 540px;
}

#instafeed #loader {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    top: 50%;
}

/* script */
#instafeed {
    gap: 1.5em;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
    display: flex;
}

#instafeed .splide__slide .IG-content img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    transition: all linear .1s;
}

@media screen and (max-width:576px) {
    #instafeed .splide__slide .IG-content img {
        width: 300px;
        height: 300px;
    }
}

.IG-content img:hover {
    transform: translateY(-5px);
}

#instafeed .splide__slide:first-child {
    padding-left: 1.5em;
}

#instafeed .splide__slide:last-child {
    padding-right: 1.5em;
}

#instafeed .IG-container,
#instafeed .IG-header,
#instafeed .IG-info {
    width: min-content;
    text-decoration: none;
    color: #333;
}

#instafeed .IG-header {
    margin: 1em 0;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: start;
    width: 100%;
}

#instafeed .IG-header h3 {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
}

#instafeed .IG-follow {
    margin-left: auto;
    margin-right: .5em;
    background-color: #0099FC;
    color: #fff;
    width: fit-content;
    padding: .3em .7em;
    border-radius: 30px;
    font-weight: 500;
    font-size: 12px !important;
}

#instafeed .IG-follow:hover {
    background-color: #0070bb;
}

#instafeed .IG-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#instafeed .IG-buttons {
    display: flex;
    margin-bottom: .5em;
    gap: .3em;
}

#instafeed .IG-buttons svg {
    transition: all linear .1s;
}

#instafeed .IG-info {
    margin-top: 1em;
    width: 100%;
}

#instafeed .IG-buttons svg:first-child:hover {
    fill: #EC4A50;
}

#instafeed .IG-buttons svg:last-child,#instafeed .IG-buttons div:last-child {
    align-self: flex-end;
    margin-left: auto;
}

#instafeed .IG-buttons svg:hover {
    opacity: .7;
    cursor: pointer;
}

#instafeed .IG-caption {
    display: inline;
}

#instafeed .IG-caption .IG-text,
#instafeed .IG-hashtag {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: start;
    font-size: 14px;
    color: #5e5e5e;
}

#instafeed .IG-text {
    margin-bottom: .3em;
}

#instafeed .IG-caption a,
#instafeed .IG-header a {
    color: #333;
    text-decoration: none;
}

#instafeed .IG-timestamp{
    color: grey;
    font-size: 11px;
    display: flex;
}

#instafeed .IG-caption span {
    color: #333;
    font-weight: 600;
}

#instafeed .IG-hashtag {
    margin: 0;
}

#instafeed .IG-hashtag a {
    color: #3f729b;
}

#instafeed .IG-hashtag a:hover,
#instafeed .IG-text span:hover {
    text-decoration: underline;
}

[data-src] {
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }

    100% {
        background-color: hsl(200, 20%, 95%);
    }
}
/* 
Interactive images
by Manu
Make Image pop out with interactive Pointer
---
v. 1.0.1
last edit: 13/10/2023
---

Changelog:
  - added top/bottom to II-container
-
*/

.II-container {
  margin: 2em 0;
}

.II-container.has-text {
  display: flex;
  gap: 2.5em;
  align-items: center;
  justify-content: space-between;
}

.II-container.has-text.inverted {
  flex-direction: row-reverse;
}

.II-container.has-text .II-text {
  width: 40%;
}

.II-container.has-text .II-img-cont {
  width: 60%;
}

.II-container.has-text .pointer-popup {
  width: 60%;
}

/* modifier media query */

@media screen and (max-width: 576px) {
  .II-container.has-text {
    flex-direction: column;
  }

  .II-container.has-text .II-text {
    width: 100%;
  }

  .II-container.has-text .II-img-cont {
    width: 100%;
  }

  .II-container.has-text.inverted {
    flex-direction: column;
  }

  .II-container.has-text .pointer-popup {
    width: 100%;
  }
}

.II-img-cont {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.static {
  width: 100%;
  height: auto;
}

.II-img-cont img {
  border-radius: 5px;
  display: block;
}

.II-img-cont .image-pointer {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 3px #fff;
  z-index: 1;
  cursor: pointer;
  opacity: .4;
  transition: all linear .3s;
}

.II-img-cont .image-pointer::before {
  content: '';
  position: absolute;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 50%;
  border: solid 5px #fff;
  opacity: 0.8;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(.5);
  }

  80%,
  100% {
    opacity: 0;
  }
}

.II-img-cont:hover .image-pointer {
  opacity: 1;
}

.II-img-cont .image-pointer.active {
  opacity: 1;
}

@media screen and (max-width:576px) {
  .image-pointer {
    opacity: 1;
  }
}

.pointer-popup {
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 30%;
  height: fit-content;
  padding: 2em;
  background-color: #fff;
  /* padding: 1em; */
  border-radius: 5px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  font-family: 'Poppins', sans-serif;
  transition: all linear 1s;
}

.pointer-popup.active {
  display: block;
  animation: fadeIn .5s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.pointer-popup .popup-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: .5em;
}

.pointer-popup .popup-content .popup-text {
  display: flex;
  flex-direction: column;
  width: 55%;
  font-family: 'Poppins', sans-serif !important;
  gap: .5em;
}

.pointer-popup .popup-content .popup-text p.lead {
  font-size: 1.2em;
  font-weight: 600;
  overflow: hidden;
  color: #333;
}

.pointer-popup .popup-content .popup-text .desc-container {
  overflow: hidden;
  max-height: 5.3em;
}

.pointer-popup .popup-content .popup-text p.subline {
  font-size: 1em;
  line-height: 1.2;
  color: grey;
  display: -webkit-box;
  max-height: 2.3em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

.pointer-popup .popup-content .popup-text p.price {
  font-size: 1.5em;
}

.pointer-popup .popup-content .button {
  width: fit-content;
  font-size: 12px;
  margin: 0 0 0 auto;
}

.pointer-popup .popup-content img {
  max-height: 120px;
}

/* skeleton */
.lazySkeleton {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: lightgray;
  border-radius: 2px;
  animation: skeleton-loading 1s linear infinite alternate;
}

.lazySkeleton::after {
  content: '';
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.lazySkeleton.img {
  height: 140px;
  width: 40%;
}

.pointer-popup .popup-content .popup-text p.price.lazySkeleton {
  width: 60px;
}

.pointer-popup .popup-content .button.lazySkeleton {
  height: 30px;
  border-radius: 50px;
  width: 100px;
  border: none;
  user-select: none;
  pointer-events: none;
}

.pointer-popup .icon-cancel {
  color: lightgray;
  font-size: 15px;
  margin-left: auto;
  position: absolute;
  width: fit-content;
  right: 3%;
  top: 7%;
}

#one {
  top: 25%;
  left: 60%;
}

#two {
  top: 50%;
  left: 20%;
}

/* screen styling */

@media screen and (max-width:576px) {

  .pointer-popup {
    position: fixed;
    bottom: -100%;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: fit-content;
    opacity: 0;
    padding: 1.5em 0;
    transition: .2s all linear;
    border-radius: 0;
  }

  .pointer-popup.active {
    bottom: 0;
    opacity: 1;
  }

  .pointer-popup .popup-content {
    flex-direction: column;
    padding: 1em;
    gap: .5em;
  }

  .pointer-popup .popup-content .popup-text {
    flex-basis: 90%;
    width: 90%;
    text-align: start;
  }

  .pointer-popup .popup-content .popup-text p.subline {
    line-height: 1.2;
    max-height: 4.3em;
    -webkit-line-clamp: 4;
    margin-bottom: 1em;
  }

  .pointer-popup .popup-content .popup-text p.price {
    align-self: flex-end;
    font-size: 1.5em;
  }

  .pointer-popup .popup-content img {
    flex-basis: 100%;
    margin-bottom: 1.5em;
  }

  .icon-cancel {
    top: 3%;
  }

  .interactive-img-bg {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    position: fixed;
    z-index: 2;
    transition: .2s all linear;
    pointer-events: none;
  }

}
/* spinner */

.lds-ring {
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #d6d7d6;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #d6d7d6 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* new Navbar's minor fix & improvements */

.nav__store {
  max-width: 40px;
}

/* SVG logo */

/* .hamburgerLogo {
  background: url('https://www.gamestop.it/Views/Locale/Content/Images/logo.svg') no-repeat !important;
} */

/* searchbar (active status) */

.quickInputContainerWiderNewNavBar {
  border: none;
  border-bottom: solid 1px #c3c3c3;
  border-radius: 0;
  background: #fff;
  width: 90%;
}

@media (max-width: 568px) {
  .quickInputContainerNewNavBar {
      position: relative;
      height: 46px;
      border: none;
      border-bottom: solid 1px #c3c3c3;
      border-radius: 0;
      display: flex;
      margin-bottom: 2px;
      width: 96%;
  }  
}

/* Menu items styling*/

.searchDrop, .gsFlyerDrop, .storeDrop, .cartDrop, .accDrop, .languageDrop, .customerServiceDrop {
  padding: 0 0 0 40px;
}

.nav-right span {
  margin-right: 0px;
}

.nav__search, .nav__gsflyer, .nav__store, .nav__cart, .nav__account, .nav__language, .nav__customerService {
  flex-grow: 1;
}

.nav__store {
  max-width: 57px;
}

.nav__customerService {
  max-width: 120px;
}

/* Menu Header */

.leftSliderMenu {
  padding-bottom: 23.08px;
  padding-top: 24px;
}

.leftBarBlockSlider.scrollbar {
  overflow-y: auto;
  max-height: 88vh;
}

/* leftBar */
.enhancedActiveSlider {
  z-index: 999999999 !important;
}

/* centering back button in hamburger menu */

.ImgBckBtnNewNav {
  padding-top: 0;
}

@media (max-width:568px) {
  .gsFlyerDrop, .storeDrop, .languageDrop, .customerServiceDrop {
    background-size: 100%;
    margin-left: 10px;
  }

  .hamburgerLogo {
    background-size: 110px auto;
    width: 110px;
    margin: 4px 0;
    background-position: center;
  }
} 

/* z-index user navbar */

.accountSideMenu {
  z-index: 10 !important;
}

.topPanel{
 z-index: 3!important;
}

/* a tag & links */
.accountSideMenuListLink,.accountSideMenuListLink{
  color: #333 !important;
  text-decoration: none;
  text-transform: capitalize !important;
}
.prodSugg > .dv-card-wrap {
  float: left;
  margin-right: 10px;
  min-width: 200px;
  width: auto;
  overflow: hidden;
}

@media (max-width: 576px) {
  .prodSugg > .dv-card-wrap {
    float: left;
    margin-right: 10px;
    min-width: 159px;
    width: auto;
  }
  .prodSugg .dv-card-wrap:last-child {
    display: none;
  }
}

.prodSugg {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between !important;
}

.dv-card-wrap {
  margin-top: 10px;
  background-color: white;
  margin: 0.5rem 0 1rem 0;
  box-shadow: none;
  transition: box-shadow 0.25s;
  border-radius: 2px;
  position: relative;
}

.dv-card-wrap:hover {
  margin-top: 10px;
  background-color: white;
  margin: 0.5rem 0 1rem 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
  border-radius: 2px;
  position: relative;
}

.dv-condition2 {
  position: absolute;
  display: block;
  background-color: #ee3124;
  right: 5px;
  z-index: 200;
  color: white;
  top: 20px;
  float: right;
  box-shadow: none;
  border-radius: 20px;
  padding: 0.2em 0.6em;
}

.dv-condition-triangle-topleft {
  display: none;
}

.dv-cta-block {
  background-color: transparent;
  padding-bottom: 10px;
}

.dv-card-info-wrap p:nth-of-type(2) {
  display: none;
}
.dv-card-info-wrap p:nth-of-type(3) {
  opacity: 0;
}

.dv-card-wrap a.medButton {
  background: transparent;
  border: none;
  color: #ee3124;
  font-size: 14px;
  height: 31px;
  line-height: 31px;
  padding: 8px 16px;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  transition: all 0.2s ease 0s;
  vertical-align: middle;
  display: inherit;
  text-align: center;
}

.dv-card-wrap a.medButton:hover {
  background: #ee3124;
  border: none;
  color: #fff;
  font-size: 14px;
  height: 31px;
  line-height: 31px;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  transition: all 0.2s ease 0s;
  vertical-align: middle;
  display: inherit;
  text-align: center;
}

.dv-card-wrap a.medButton:hover span {
  color: #fff;
}

.card_rich_media > .media-inner > a img {
  transition: all 0.2s;
}
.dv-card-wrap:hover .card_rich_media > .media-inner > a img {
  transform: scale(1.05);
}

.img_chart {
  display: none;
}

/* main */

.checkValBtn div {
  background-color: #fff !important;
}

.checkValBtn div p {
  width: max-content;
}

#mainImgPrev span {
  display: block;
  width: 36px;
  height: 34px;
  line-height: 34px;
  background-image: none;
  background-position: 0 -36px;
  position: relative;
}

#mainImgNext span {
  display: block;
  width: 36px;
  line-height: 34px;
  height: 34px;
  background-image: none;
  background-position: 0 -36px;
  position: relative;
}

#mainImgPrev span::before {
  display: block;
  color: #000;
  font-family: "Fontello";
  content: "\31";
  cursor: pointer;
  position: absolute;
  top: 100%;
  right: 0;
}

#mainImgNext span::before {
  display: block;
  color: #000;
  font-family: "Fontello";
  content: "1";
  cursor: pointer;
  transform: rotate(180deg);
  width: 50px;
  position: absolute;
  top: 100%;
  left: 0;
}

.prodTitle h1 {
  font-weight: bold;
  font-family: "Poppins";
  font-size: 2.5em;
  margin: 0 auto;
}

@media (max-width: 576px) {
  .prodTitle h1 {
    font-weight: bold;
    font-family: "Poppins";
    font-size: 1.5em;
    margin: 0 auto;
  }

  .addedDetInfo {
    text-align: left;
    width: 85%;
  }
}

.prodTitle p {
  font-size: 13px;
}

.prodTitle p span {
  font-size: 16px;
  display: block;
}

.rateWord {
  display: none;
}

.prodSugg {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-evenly !important;
}

@media (max-width: 576px) {
  .prodSugg {
    max-height: max-content;
    overflow: hidden;
    text-align: center;
    padding: 0;
  }
}

.prodLeftBlock {
  width: 100%;
  text-align: center;
  margin-left: 0px;
  flex-grow: 0;
  flex-basis: 80%;
}

.prodrightBlock {
  flex-grow: 3;
}

.suggestedPackShots {
  padding: 20px 0 25px 20px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.mainInfo .prodImg {
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}

a.megaButtonEmpty {
  border: none;
  font-size: 1.2em;
}

a.megaButtonEmpty:hover {
  background-color: #fff;
  color: #ee3124;
}

.addCartBar {
  display: flex;
  justify-content: space-around;
  gap: 1.5em;
}

.buttonContainer a {
  width: max-content;
}

@media (max-width: 576px) {
  .addCartBar {
    flex-direction: column;
    height: auto !important;
    overflow: hidden;
  }
}

.bigBuyButtons .ropisPop img {
  width: 70%;
  display: inline-block;
}

/* Swogo */

.swogo-bundle-total {
  background: #fff !important;
}

.swogo-atc-division .swogo-total .swogo-price-container .swogo-price {
  font-family: "Poppins";
}

.swogo-bundle-products .swogo-bundle-products-container {
  justify-content: center;
}

/* Bundle Page */

.bundleBuilderRight .bundleProductVariant .bundleInfo a {
  width: fit-content;
}

.bundleBuilderRight h4 {
  font-size: 16px;
  font-weight: 400;
  margin: 0.5em 0;
}

.bundleBuilderRight .bundleProductVariant {
  border-bottom: none;
}

@media (max-width: 576px) {
  .bundleBuilderRight h4 {
    font-size: 14px;
    margin: 0.5em 0;
  }

  .bundleBuilderRight .bundleProductVariant {
    border-bottom: none;
  }

  .bundleBuilderRight .bundleProductVariant .buttons {
    margin: 1.5em 0;
  }
}

/* prodotto valido/non valido per la promozione */

.checkValBtn {
  margin-top: 0.5em;
  background-color: transparent;
}

.checkValBtn:hover {
  color: white;
}

.checkValBtn {
  margin-top: 0.5em;
  background-color: transparent;
}

.checkValBtn div.ProdottoNonValido {
  background-color: #e7e7e7 !important;
  padding: 1em 2em;
  width: max-content;
}
.checkValBtn div.ProdottoValido {
  background-color: #00b176 !important;
  color: #fff;
  padding: 1em 2em;
  width: max-content;
}

/* BUNDLE PAGE MOBILE */

@media (max-width: 576px) {
  .bundleBuilderRight .bundleProductVariant {
    height: max-content;
  }
}

/* PDP valid promo label fix */

.checkValBtn {
  text-decoration: none;
}

.checkValBtn div.ProdottoValido {
  border-color: #00b176 !important;
  color: #00b176 !important;
}

.checkValBtn div.ProdottoNonValido {
  border-color: #333 !important;
  color: #333 !important;
}

.checkValBtn div.ProdottoValido, .checkValBtn div.ProdottoNonValido {
  background-color: transparent !important;
  border: solid 2px;
  border-radius: 30px;
  padding: 1em 2em;
  font-family: "Poppins";
  font-weight: 600;
  font-size: 13px;
  width: max-content;
  margin-top: 2em;
}

@media (max-width: 576px) {
  .checkValBtn div.ProdottoValido {
    margin: 2em auto;
  }
}

.prodSinglePromo {
  width: auto;
}

@media (max-width: 576px) {
  .prodSinglePromo {
    width: 100%;
  }
}

.prodSinglePromoBtn a.button {
  width: fit-content;
  margin: 0 auto;
}

.prodDetBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 8px;
  padding: 0 0 60px 0;
  border-top: solid 1px #d8d8d8;
}

/* SET TIME LOOP ICON STYLING*/

/* Last Modified: 14/12/2022 

by Manuel

----------------------------

dependencies:

plugin.setTimeLoopIcon.js

----------------------------

applies periodic animation to selected icon from script

*/

*.highlight-icon{
    animation: higlight-anim 1s ease-in-out infinite alternate;
    -webkit-animation: higlight-anim 1s ease-in-out infinite alternate;
    -moz-animation: higlight-anim 1s ease-in-out infinite alternate;
}

@keyframes higlight-anim {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-10px) rotate(-1deg);
	}

	30% {
		transform: translateX(5px) rotate(2deg);
	}

	45% {
		transform: translateX(-5px) rotate(-1deg);
	}

	60% {
		transform: translateX(0%) rotate(0);
		/* transform: translateX(9px) rotate(2.4deg); */
	}

	75% {
		transform: translateX(0%) rotate(0);
		/* transform: translateX(-6px) rotate(-1.2deg); */
	}

	95% {
		transform: translateX(0%) rotate(0);
		/* transform: translateX(-6px) rotate(-1.2deg); */
	}
}


/* PromoSlider Options */

.SP-image.promoTrade{
    position: relative; 
}

.SP-image.promoTrade .promo-text {
    position: absolute;
    color: #333;
    bottom: 15%;
    left: 5%;
    width: 42%;
    font-family: 'poppins';
}

.SP-image.promoTrade .promo-text h5{
    font-size: 1.6em;
    font-weight: 700;
    width: 100%;
    line-height: 1.1;
}

.SP-image.promoTrade .promo-text h4{
    font-size: 3.5em;
    font-weight: 700;
    letter-spacing: -1px;
}

.SP-image.promoTrade .promo-text p{
    font-size: 1em;
    width: 100%;
    line-height: 1.2;
}

.SP-image.promoTrade .promo-text .btn {
    border: 2px solid;
    border-radius: 30px;
    color: #333;
    padding: .4em 1.25em;
    width: fit-content;
    font-weight: 600;
    margin-top: 2em;
}

.SP-image.promoTrade .promo-text .badge {
    background-color: #ee2a28;
    padding: .25em 1em;
    border-radius: 30px;
    color: #fff;
    font-family: 'Poppins',sans-serif;
    font-weight: 700;
    width: fit-content;
    height: min-content;
    margin-left: 1em;
}

.SP-image.promoTemp .promo-text {
    color: #fff ;
}
.SP-image.promoTemp .btn {
    color: #fff !important;
    border-color: #fff !important;
}

/* no-info variation */

[data-tradein].SP-image.promoTrade.no-info .promo-text{
    bottom: 30%;
}
[data-tradein].SP-image.promoTrade.no-info .promo-text h4{
    font-size: 4em;
}


@media (max-width:600px){
    .SP-image.promoTrade .promo-text{
        bottom: 20%;
    }     
    .SP-image.promoTrade .promo-text h5 {
        font-size: 1.2em;
        margin-bottom: 0em;
        font-weight: 700;
        text-align: left;
    }
    [data-tradein].SP-image.promoTrade.no-info .promo-text{
        bottom: 22%;
    }
    .SP-image.promoTrade .promo-text h4,[data-tradein].SP-image.promoTrade.no-info .promo-text h4 {
        font-size: 2em;
        text-align: left;
    }
    .SP-image.promoTrade .promo-text p {
        font-size: 1em;
        line-height: 1.1;
        text-align: left;
        margin-top: 0;
    }
    .SP-image.promoTrade .promo-text .btn {
        border: 1px solid;
        font-weight: 700;
        font-size: .7em;
        text-transform: capitalize;
    }
    .SP-image.promoTrade .promo-text .badge {
        font-size: .6em;
        padding: .25em 1em;
    }
    .SP-image.promoTrade .promo-text{
        bottom: 10%;
    }  
}
@media (max-width:400px){
    .SP-image.promoTrade .promo-text {
        width: 45%;
    }  
    .SP-image.promoTrade .promo-text h5 {
        font-size: 1.2em;
        margin-bottom: -0.3em;
        font-weight: 700;
        text-align: left;
    }
    .SP-image.promoTrade .promo-text p {
        font-size: .8em
    }  
    .SP-image.promoTrade .promo-text .btn {
        font-size: .7em;
    }
    [data-tradein].SP-image.promoTrade.no-info .promo-text{
        bottom: 18%;
    } 
}

/* GSDeals Tiles Options */
.V-container .promoTrade{
    position: relative;
}
.V-container .promoTrade .promo-text{
    position: absolute;
    top: 15%;
    font-family:'Poppins';
    text-align: center;
    width: 95%;
}
.V-container .promoTrade .promo-text h4 {
    font-size: 6em;
    letter-spacing: -3px;
    color: #222;
    margin: .3em 0 5px 0;
}
.V-container .promoTrade .promo-text p {
    font-size: 1.4em;
    color: #333;
    line-height: 1.1;
    margin: -.8em 0 0 0;
    opacity: .8;
    text-transform: capitalize;
}
@media (max-width:1280px){
    .V-container .promoTrade .promo-text h4 {
        font-size: 5em;
        letter-spacing: -2px;
        margin: 0 0 -.2em 0;
        color: #222;
    }
    .V-container .promoTrade .promo-text p {
        font-size: 1.7em;
        color: #333;
        opacity: .8;
        margin: 0 auto;
        width: 70%;
    }
}
@media (max-width:960px){
    .V-container .promoTrade .promo-text h4 {
        letter-spacing: -2px;
        font-size: 3em;
        margin: 2vh 0 -.2em 0;
        color: #222;
    }
    .V-container .promoTrade .promo-text p {
        font-size: 1em;
        color: #333;
        opacity: .8;
        margin: 0 auto;
        width: 80%;
    }
    .V-container .promoTrade .promo-text {
        top: 5%;
    }
}
@media (max-width:576px){
    .V-container .promoTrade .promo-text h4 {
        font-size: 5em;
        letter-spacing: -2px;
        margin: .3em 0 -.2em 0;
        color: #222;
    }
    .V-container .promoTrade .promo-text {
        top: 8%;
    }
}

@media (max-width:400px){
    .V-container .promoTrade .promo-text h4 {
        font-size: 3.5em;
    }
    .V-container .promoTrade .promo-text p {
        font-size: .7em;
    }
}

/* Twitch Scripts and evnvironment Styles */

.iFrame-container {
  position: absolute;
  width: 100%;
  padding-bottom: 56.25%;
}

#LPtwitchIframe {
  position: absolute;
  top: 10%;
  left: 2.5%;
  right: 2.5%;
  width: 95%;
  height: 95%;
  z-index: 1;
  border-radius: 10px;
  background-color: #000;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 576px) {
  #LPtwitchIframe {
    top: 70%;
    left: -2.5%;
  }
}

/* twitch-calendar */

#twitchCalendar {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#twitchCalendar .calendar-list {
  width: 95%;
  margin: 0 auto;
}

.calendar-event,
.calendar-event a {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 170px;
  max-height: 170px;
  border-radius: 10px;
  padding: 1em 0;
  font-family: "Poppins";
  color: #333;
  margin: 2em auto;
  text-decoration: none;
}

.calendar-event {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

.calendar-event.live-now {
  background: rgb(99, 24, 213);
  background: linear-gradient(
    90deg,
    rgba(99, 24, 213, 1) 0%,
    rgba(119, 44, 232, 1) 48%,
    rgba(102, 0, 255, 1) 100%
  );
  color: #fff !important;
  width: 100%;
  margin: 0 auto 2em auto;
}

.live-now a {
  display: flex;
  color: #fff !important;
  width: 100%;
}

.live-now .event-divider {
  background-color: #fff;
}

.live-now .stream-info .streamer {
  color: #fff;
}

.calendar-event.live-now .stream-info .type {
  color: #fff;
  background-color: #b07cff;
}

.calendar-event.live-now .stream-info .game {
  color: #fff;
}

.calendar-event .thumbnail {
  overflow: hidden;
  padding: 1em;
}

.calendar-event img {
  width: 130px;
  border-radius: 5px;
  height: auto;
}

.calendar-event .stream-info {
  flex-basis: 60%;
  align-self: center;
}

.calendar-event .stream-info .title,
.calendar-event .event-date .title {
  font-size: 2em;
}

.calendar-event .stream-info .game {
  font-size: 1.1em;
  color: #ed2a28;
}

.calendar-event .stream-info .streamer {
  font-size: 1.2em;
}

.calendar-event .stream-info .type {
  color: #fff;
  padding: 0.3em 0.9em;
  border-radius: 30px;
  background-color: #bfbfbf;
  width: fit-content;
  font-size: 1em;
}

.calendar-event .stream-info .description {
  font-size: 1em;
  font-weight: 400;
}

.calendar-event .stream-info .type {
  margin-top: 0.5em;
}

.calendar-event .event-divider {
  height: 110px;
  background-color: #636668;
  width: 1px;
}

.calendar-event.live-now .event-divider {
  height: 110px;
  background-color: #b07cff;
  width: 1px;
}

.calendar-event .event-date {
  text-align: center;
  width: 15%;
}

.calendar-event .event-date .title {
  font-size: 2.5em;
}

.calendar-event .event-date p {
  font-size: 1.2em;
}

.calendar-event .mobile-date {
  display: none;
}

a.ctaButton,
button.ctaButton {
  line-height: 0em;
}

/* expand button */

#twitchCalendar #expand {
  width: 30%;
  margin: 0 auto;
}

/* Loader */

#twitchLoader {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* media queries */

@media (max-width: 576px) {
  .calendar-event .stream-info {
    flex-basis: 60%;
    text-align: left;
    margin: 0 1em;
  }
  .calendar-event .stream-info .title,
  .calendar-event .event-date .title {
    font-size: 1.5em;
    /* margin-bottom: 0.5em; */
  }
  .calendar-event img {
    width: 100px;
  }
  .calendar-event .event-date {
    display: none;
  }
  .calendar-event,
  .calendar-event a {
    justify-content: space-evenly;
    padding: 0em;
    margin: 1em 0;
  }
  .calendar-event .event-divider {
    display: none;
  }
  .calendar-event .stream-info .streamer {
    font-size: 0.8em;
  }
  .calendar-event .stream-info .game {
    margin-top: 0.5em;
    font-size: 1em;
  }
  .calendar-event .stream-info .type {
    font-size: 0.8em;
    margin: 0;
  }
  .calendar-event .event-date p {
    font-size: 0.9em;
  }
  .calendar-event .mobile-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5em 0;
    gap: 0.5em;
    border-top: #ddd 1px solid;
    padding-top: 0.6em;
    width: 100%;
  }
  .calendar-event .mobile-date .title {
    font-size: 1em;
  }
  .calendar-event .mobile-date p {
    font-size: 0.8em;
  }
  .calendar-event.live-now {
    width: 90%;
    margin-top: 0;
  }
  .calendar-event.live-now .stream-info {
    width: 95%;
    flex-basis: 80%;
  }
}

/* twitch badge */
.liveBadge-container {
  margin: 0;
  position: relative;
  display: flex;
  align-self: center;
  transition: all 0.1s linear;
}

.liveBadge-container:hover {
  filter: drop-shadow(0px 0px 4px rgb(244, 220, 255));
}

.liveBadge-inner {
  background: rgb(99, 24, 213);
  background: linear-gradient(
    90deg,
    rgba(99, 24, 213, 1) 0%,
    rgba(119, 44, 232, 1) 48%,
    rgba(102, 0, 255, 1) 100%
  );
  border-radius: 30px;
  padding: 0.25em 0.75em;
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  align-self: flex-start;
  align-items: center;
  cursor: pointer;
}

.liveBadge-inner:hover {
  color: #fff;
}

.liveBadge-inner i {
  margin-right: 0.5em;
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all linear 0.1s;
  animation: rec 2s infinite forwards;
  opacity: 0;
  margin-bottom: 0.1em;
}

@keyframes rec {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.liveBadge-inner p {
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}
@media (max-width: 576px) {
  .liveBadge-inner {
    padding: 0.3em 0.6em;
    position: relative;
    height: 13px;
    margin-bottom: 0.4em;
  }
  .liveBadge-inner i {
    width: 5px;
    height: 5px;
    margin-right: 0.2em;
    margin-bottom: 0.1em;
  }
  .liveBadge-inner p {
    font-size: 1em;
  }
}

@media (max-width: 375px) {
  .liveBadge-container {
    margin-right: -3em;
  }
}

#twitchIframe > iframe {
  border-radius: 10px;
  overflow: hidden;
}

/* 
* Animations
* Last changed: 22/06/2022
---
Animations removed that are part of athena now
---
*/


@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate(0, -7px);
    transform: translate(0, -7px);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate(0, -4px, 0);
    transform: translate(0, -4px);
  }

  90% {
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate(0, -2px);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(10%);
  }
  15% {
    transform: translateX(-10%);
  }
  30% {
    transform: translateX(5%);
  }
  45% {
    transform: translateX(-5%);
  }
  65% {
    transform: translateX(3%);
  }
  90% {
    origin-transform: translateX(0);
  }
}

@keyframes pulse-intense {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  50% {
    -webkit-transform: scale(1.12, 1.12);
    transform: scale(1.12, 1.12);
  }

  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translate(-100%);
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translate(100%);
  }
  100% {
    opacity: 1;
  }
}
.breadCrumb {
    font-family: 'Poppins', sans-serif !important;

    padding: 1em 2em;
    color: #737373;
    display: flex;
    gap: .5em;
}

.breadCrumb h1 {
    font-size: 1em;
    margin-bottom: 0;
    text-transform: capitalize;
}

/* Modifier */

*.home h1 {
    font-weight: 300;
    font-size: .9em;
    text-transform: capitalize;
}

@media (max-width:568px) {

    .breadCrumb h1 {
        font-size: 1em;
        margin-bottom: .5em;
    }

    .breadCrumb {
        padding: 1em 2em;
        font-size: 1em;
        height: max-content;
        overflow-y: hidden;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-line-clamp: 1;
    }

    .breadCrumb a {
        overflow: hidden;
        display: block;
        color: #cbcbcb;
        display: -webkit-box !important;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

}
/*
----
Forms & Inputs Stylings
----
Last modified: 05/01/2023
----
This library will be removed over time as the new code is now part of athena framework
----
*/



.form fieldset.submit {
  font-size: 14px;
  text-align: center;
}


/* -- form : inputs -- */

.form-input.is-multiple {
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid transparent;
  background-color: #f0f0f0;
  border-radius: 5px;
  min-height: 47px;
}

.form-input.is-multiple > label:not(.error) {
  opacity: 0 !important;
}

.form-input.is-multiple > span.seperator {
  font-size: 17px;
  color: #ccc;
  padding: 0 3px;
  cursor: default;
  pointer-events: none;
}

.form-input button{
  color: #fff;
  background-color: #e81e25;
  height: 100%;
  border-radius: 0 5px 5px 0;
  line-height: 0;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  padding: 0 1em;
  font-size: 14px;
}



/* -- Form : checkbox/radio list (??) -- */

.form ul.checkbox-list {
  padding: 0 !important;
  margin: 0 !important;
}
.form ul.checkbox-list li {
  list-style: none !important;
}


/* -- Form : switch toggle -- */

.switch-toggle {
  display: flex;
  overflow: hidden;
}
.switch-toggle input {
  position: absolute !important;
  opacity: 0;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.switch-toggle label {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 17px;
  line-height: 37px;
  text-align: center;
  padding: 0 1em;
  border: 1px solid #e5e5e5;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.1);
}

.switch-toggle label:first-of-type {
  padding-left: 1.2em;
  border-radius: 24px 0 0 24px;
  box-shadow: inset 9px 3px 12px rgba(0, 0, 0, 0.1);
}
.switch-toggle label:last-of-type {
  padding-right: 1.2em;
  border-radius: 0 24px 24px 0;
  box-shadow: inset -9px 3px 12px rgba(0, 0, 0, 0.1);
}

.switch-toggle label:hover {
  cursor: pointer;
}

.switch-toggle input:checked + label {
  background-color: #ee3124;
  background: linear-gradient(180deg, #ee3124, #bf1218);
  border-color: #bf1218;
  box-shadow: none;
  color: #fff;
}



/* -- Form: input button (legacy) -- */

button.inputButton {
  display: inline-block;
  vertical-align: middle;
  height: 47px;
  line-height: 47px;
  padding: 0 12px;
  text-decoration: none;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #e81e25;
  border-radius:  5px;
  border: 0;
  color: #fff;
  outline: none;
}

button.inputButton:hover,
button.inputButton:active {
  background-color: #bf1218;
  border-color: #bf1218;
  cursor: pointer;
}

button.inputButton:disabled,
button.inputButton:disabled:hover {
  color: #b4b4b4;
  background: #ccc;
  border-color: #ccc;
  cursor: default;
}
button.inputButton > i {
  font-size: 21px;
}


/* --- Form : submit button (legacy) --- */

button.submitButton {
  position: relative;
  display: inline-block;
  height: 54px;
  width: 170px;
  padding: 0;
  border: none;
  margin: auto;
  border-radius: 29px;
  background-color: #ee3124;
  color: white;
  font-size: 21px;
  line-height: 54px;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  outline: none;
  z-index: 9;
  transition: width 0.1s, border-radius 0.1s, background-color 0.2s;
}

button.submitButton:hover,
button.submitButton:focus {
  background-color: #bf1218;
}

button.submitButton::before {
  display: block;
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  font-size: 1.5em;
  text-transform: none;
  text-decoration: inherit;
  color: white;
  width: 1em;
  margin: auto;
}

button.submitButton::after {
  content: " \279C";
}

button.submitButton:disabled,
button.submitButton[disabled] {
  color: #efefef;
  background-color: #ccc;
  cursor: not-allowed;
}

button.submitButton.is-loading,
button.submitButton.is-success,
button.submitButton.is-error {
  height: 54px;
  width: 54px;
  color: transparent;
}

button.submitButton.is-success::before,
button.submitButton.is-error::before {
  opacity: 0;
  transform: scale(3);
}
button.submitButton.is-success::before {
  content: "v";
}
button.submitButton.is-error::before {
  content: "x";
}
button.submitButton.is-loading::before {
  content: ".";
  opacity: 1;
  transform: scale(1);
  -moz-animation: spin 2s linear 0.1s infinite;
  -o-animation: spin 2s linear 0.1s infinite;
  -webkit-animation: spin 2s linear 0.1s infinite;
  animation: spin 2s linear 0.1s infinite;
}
button.submitButton.in::before {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.1s, transform 0.1s;
}

button.submitButton + label.message {
  position: relative;
  display: block;
  padding: 0.5em 1.5em;
  max-width: 470px;
  background-color: #eee;
  border-radius: 27px;
  margin: auto;
  color: grey;
  font-size: 1em;
  text-align: center;
  z-index: 99;
  opacity: 0;
}
button.submitButton + label.message.in {
  opacity: 1;
  transform: translateY(12px);
  transition: 0.2s ease-in;
}
button.submitButton + label.message::after {
  position: absolute;
  top: -9px;
  right: 50%;
  left: 50%;
  content: "";
  margin-left: -9px;
  border: solid;
  border-color: #eee transparent;
  border-width: 0 9px 10px 9px;
  z-index: 98;
  pointer-events: none;
}


/* -- Form : RECAPTCHA -- */

.recaptchaValidation {
  padding: 9px 3px;
  display: inline-block;
}


/* -- Form : progress bar -- */

.form div.form-progress-bar {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
}
.form-progress-bar {
  width: auto;
  text-align: center;
}

.form-progress-bar .progress-line {
  position: relative;
  height: 3px;
  background-color: lightgrey;
  width: 100%;
  margin: 6px auto;
}
.form-progress-bar .progress-step {
  display: block;
  position: absolute;
  border-radius: 50%;
  height: 9px;
  width: 9px;
  top: 50%;
  margin-left: -4px;
  transform: translateY(-50%) translateX(-50%);
  background-color: lightgrey;
  transition: ease-out 0.2s;
}
.form-progress-bar .progress-step.current {
  height: 15px;
  width: 15px;
  transition: ease-in 0.2s;
  background-color: #ee3124;
}
.form-progress-bar .progress-step:hover {
  height: 15px;
  width: 15px;
  background-color: #ee3124;
  transition: ease-in 0.2s;
}



/* -- Keygate -- */

form.key-gate {
  margin: 30px auto;
  text-align: center;
}
form.key-gate.is-error {
  animation: shake 0.4s 1 linear;
}
form.key-gate input.codeInput {
  font-size: 2.5ch;
  text-transform: none;
  height: 53px;
  line-height: 53px;
  border-radius: 29px;
  max-width: 300px;
  width: auto;
  margin: auto;
  padding: 0 4em 0 1em;
}
form.key-gate button.submitButton {
  position: absolute;
  display: inline-block;
  text-transform: uppercase;
  border-radius: 0 29px 29px 0;
  width: 4em;
  padding-right: 0.5em;
  margin-left: -4em;
}




/* --- responsive --- */

@media (max-width: 568px) {
  span.codeInput,
  input.codeInput[type="text"] {
    font-size: 2ch;
  }
}
/*
---
Loading Styles
Last modified: 14/03/2023
----
CHANGELOG:
- skeleton removed (-> now in Athena UI framework)
- modifier loading changed to 'is-loading'
- removed img.loading (not in use anymore)
*/


/* -- block loading -- */

div.loaded,
div.is-loading {
  position: relative;
  overflow: hidden !important;
}

div.loaded > *,
div.is-loading > * {
  opacity: 0.1;
}
div.loaded > * {
  opacity: 1;
  transition: opacity 1s ease-out;
}

div.is-loading::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  content: " ";
  background-color: transparent;
  z-index: 98;
}
div.is-loading::after {
  position: absolute;
  display: block;
  content: "";
  box-sizing: border-box;
  top: 20%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border: 2px solid #ccc;
  border-radius: 50%;
  border-top-color: #ef3124;
  animation: spin 0.8s linear infinite;
  z-index: 99;
}

/*
Global Shared styles
---
Last modified: 24/03/2023
---
CHANGELOG
- added loyalty colors
- .headline/subline/lead removed (-> athena UI framework)
- styles removed that are now part of athena framework
- .icon-availability added
- "ctaButton span.icon-info" behaviour added
- added a margin & padding framework layout
- color modifiers for headline moved into this file from heroslider
- added a modifier to make divs centered
- added text-capitalized modifier that makes headlines typo capitalized
- removed some cta properties to align each countries under the same layout
---
*/


/* -- layout -- */

section.section:first-child {
  padding-top: 0;
}
section.section:last-child {
  padding-bottom: 0;
}
section.section.is-narrow {
  padding: 0 0 1em;
}
section.section {
  padding: 2em 0 3em;
}
section.section.major {
  padding: 3.5em 0 3.5em;
}

@media (max-width: 959px) {
  section.section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 576px) {
  section.section {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
}

/* -- layout : margin -- */

*.m-5 {
  margin: 5em;
}
*.m-4 {
  margin: 4em;
}
*.m-3 {
  margin: 3em;
}
*.m-2 {
  margin: 2em;
}
*.m-1 {
  margin: 1em;
}

/* -- layout : margin top-- */

*.mt-5 {
  margin-top: 5em;
}
*.mt-4 {
  margin-top: 4em;
}
*.mt-3 {
  margin-top: 3em;
}
*.mt-2 {
  margin-top: 2em;
}
*.mt-1 {
  margin-top: 1em;
}

/* -- layout : margin top-- */

*.mb-5 {
  margin-bottom: 5em;
}
*.mb-4 {
  margin-bottom: 4em;
}
*.mb-3 {
  margin-bottom: 3em;
}
*.mb-2 {
  margin-bottom: 2em;
}
*.mb-1 {
  margin-bottom: 1em;
}

/* -- layout : margin left-- */

*.ml-5 {
  margin-left: 5em;
}
*.ml-4 {
  margin-left: 4em;
}
*.ml-3 {
  margin-left: 3em;
}
*.ml-2 {
  margin-left: 2em;
}
*.ml-1 {
  margin-left: 1em;
}

/* -- layout : margin right-- */

*.mr-5 {
  margin-right: 5em;
}
*.mr-4 {
  margin-right: 4em;
}
*.mr-3 {
  margin-right: 3em;
}
*.mr-2 {
  margin-right: 2em;
}
*.mr-1 {
  margin-right: 1em;
}

/* -- layout : padding -- */

*.p-5 {
  padding: 5em;
}
*.p-4 {
  padding: 4em;
}
*.p-3 {
  padding: 3em;
}
*.p-2 {
  padding: 2em;
}
*.p-1 {
  padding: 1em;
}

/* -- cta button (legacy) -- */

a.ctaButton,
button.ctaButton {
  font-family: "Poppins", sans-serif;
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 600;
  line-height: 2.5em;
  text-decoration: none;
  height: 2.5em;
  padding: 0 1em;
  transition: 0.1s ease;
  pointer-events: all;
  cursor: pointer;
}

a.ctaButton,
button.ctaButton {
  height: 2.5em;
  padding: 0 1em;
  color: #fff;
  border: 2px solid #e81e25;
  background-color: #e81e25;
  border-radius: 2em;
}

a.ctaButton span,
button.ctaButton span {
  text-align: center;
}

a.ctaButton:hover span::after,
a.ctaButton:focus span::after,
button.ctaButton:hover span::after,
button.ctaButton:focus span::after {
  transform: translateX(0.2em);
}
a.ctaButton:hover,
a.ctaButton:focus,
button.ctaButton:hover,
button.ctaButton:focus {
  border-color: #bf1218;
  background-color: #bf1218;
}

a.ctaButton.is-outlined,
button.ctaButton.is-outlined {
  border-color: #e81e25;
  background-color: transparent;
  color: #e81e25;
}

*.is-red a.ctaButton,
*.is-red button.ctaButton {
  border-color: white !important;
  background-color: white !important;
  color: #e81e25;
}

*.is-red a.ctaButton.is-outlined,
*.is-red button.ctaButton.is-outlined,
*.is-dark a.ctaButton.is-outlined,
*.is-dark button.ctaButton.is-outlined {
  border-color: white !important;
  color: white !important;
}

*.is-light a.ctaButton.is-outlined,
*.is-light button.ctaButton.is-outlined {
  border-color: black !important;
  color: black !important;
}

a.ctaButton:hover span.icon-info::before,
button.ctaButton:hover span.icon-info::before {
  animation: reflect 0.5s;
}


/* -- logo -- */

div.logo {
  position: relative;
  z-index: 3;
}
div.logo img {
  display: inline-block;
  padding: 5px 0;
  width: 100%;
  height: auto;
  max-height: 100%;
}
div.logo.big img,
div.logo.huge img {
  max-width: 720px;
  max-width: min(720px, 60vw);
}
div.logo.large img {
  max-width: 540px;
  max-width: min(540px, 40vw);
}
div.logo.medium img {
  max-width: 380px;
  max-width: min(380px, 25vw);
}
div.logo.small img {
  max-width: 270px;
  max-width: min(270px, 20vw);
}
div.logo.tiny img {
  max-width: 140px;
}

/* -- logo : mobile -- */

@media (max-width: 576px) {
  div.logo.big img,
  div.logo.huge img,
  div.logo.large img {
    max-width: 360px;
  }
  div.logo.medium img {
    max-width: 240px;
  }
  div.logo.small img {
    max-width: 170px;
  }
  div.logo.tiny img {
    max-width: 120px;
  }
}

/* -- typography -- */


span.quote,
em.quote {
  font-style: normal;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1em;
}
span.quote::before,
em.quote::before,
span.quote::after,
em.quote::after {
  font-size: 2em;
  margin-top: 0.2em;
  position: absolute;
}
span.quote::before,
em.quote::before {
  margin-left: -0.4em;
  content: "\201C";
}
span.quote::after,
em.quote::after {
  margin-left: 0.1em;
  content: "\201D";
}

span.pre {
  font-family: monospace;
  padding: 0px 2px;
  font-size: 0.9em;
  background-color: #ededed;
  border-radius: 9px;
  white-space: pre-wrap;
  word-spacing: -0.2em;
  letter-spacing: -0.01em;
  color: #555;
}

/* -- divider -- */

hr {
  border: 0;
  height: 1px;
  width: 100%;
  background: #d6d7d6;
}

hr.divider.major {
  margin: 3em auto;
}

/* -- colors brands -- */

span.xbox-green,
em.xbox-green,
strong.xbox-green {
  color: rgb(16, 124, 16);
}
span.xbox-lightgreen,
em.xbox-lightgreen,
strong.xbox-lightgreen {
  color: rgb(93, 194, 30);
}
span.xbox-grey,
span.xbox-gray,
em.xbox-grey {
  color: rgb(58, 58, 58);
}
div.xbox-green {
  background-color: rgb(16, 124, 16);
}
div.xbox-lightgreen {
  background-color: rgb(93, 194, 30);
}
div.xbox-grey {
  background-color: rgb(58, 58, 58);
}

span.playstation-blue,
em.playstation-blue,
strong.playstation-blue {
  color: rgb(0, 55, 145);
}
span.playstation-lightblue,
em.playstation-lightblue,
strong.playstation-lightblue {
  color: rgb(0, 120, 200);
}
div.playstation-blue {
  background-color: rgb(0, 55, 145);
}
div.playstation-lightblue {
  background-color: rgb(0, 120, 200);
}

span.nintendo-red,
em.nintendo-red,
strong.nintendo-red {
  color: rgb(230, 0, 18);
}
div.nintendo-red {
  background-color: rgb(230, 0, 18);
}

/* -- modifiers -- */

.is-centered {
  display: flex;
  justify-content: center;
}

/* CSS Document */

.ropisLinks {
	background-image: url("../../Content/Images/pus.png") !important;
    background-repeat: no-repeat !important;
    height: 14px;
    padding-left: 76px !important;
	font-weight:lighter;
    width:260px;
	margin-top:2px;
	}
	
.bonusLine {
	border: 1px solid #D1D1D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 1px #f1f1f1;
    margin-top: 15px !important;
    width: auto !important;
	background:url("../../Content/Images/bonus-background2.png") repeat-x scroll 0 0 #FEFEFE;
	padding: 5px;
	}
	
.prodList .bonusLine {
	border: 1px solid #D1D1D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 1px #f1f1f1;
    margin-top: 15px !important;
	width: auto !important;
	background:url("../../Content/Images/bonus-background2.png") repeat-x scroll 0 0 #FEFEFE;
	padding: 5px;
	}
	
	
.bonusLine br {
	display:none;}
	
.bonusLine a {
	margin-left:3px;}
	
.bonusLine p {
	background-image: url("../../Content/Images/arrowBonusLine.png") !important;
    background-repeat: no-repeat !important;
    height: 16px;
    width:auto!important;
	padding-left: 23px;
	}
	
.prodList .bonusLine p {
	background-image: url("../../Content/Images/arrowBonusLine.png") !important;
    background-repeat: no-repeat !important;
    width:auto!important;
	padding-left: 23px;
	height:auto;
	}
	
#addrSection span {
	background-image: url("../../Content/Images/billing_address.png") !important;
    background-position: left center;
    background-repeat: no-repeat !important;
	}
	
.singleChart table .notEcomMed {
    background-image: -moz-linear-gradient(center top , #C5C5C5 0%, #7A7A7A 100%);
    border: 1px solid #A9A9A9;
    border-radius: 5px 5px 5px 5px;
    color: #333333;
	text-shadow: 1px 1px 0 #CECECE;
}
	

*.no-cta .SC-text .SC-cta {
  display: none;
}

*.no-cta .SC-image a {
  pointer-events: none;
}

*.is-informative .CC-inner .CC-cta {
  display: none;
}

*.is-informative .CC-inner,
*.info-centered .CC-info {
  justify-content: center;
}

*.capitalized {
  text-transform: capitalize !important;
}

*.lowercase {
  text-transform: lowercase !important;
}

.ctaButton {
  text-transform: capitalize;
}

*.text-centered {
  justify-content: space-around;
}

@media (max-width: 576px) {
  .splide__slide.is-light .HS-text {
    margin-bottom: 2.5em !important;
  }
}

/* is-megaBanner HeroSlider modifier */

*.is-megaBanner li {
  height: 250px !important;
}

@media (max-width: 576px) {
  *.is-megaBanner .HS-inner {
    padding: 9em 2em;
  }
}

/* REGISTRATION FORM */

.banner-container {
  padding: 0 1em !important;
}

.loginBlock h1 span {
  font-family: "poppins";
  font-size: 20px;
  line-height: 1.2;
  height: max-content;
  margin-bottom: 1.5em;
}

.loginBlock {
  padding: 1em;
}

/* Headline Capitalized style*/
h2.headline,
h3.headline,
h4.headline,
h5.headline {
  text-transform: capitalize !important;
}

/* PDP Pickupstore variation (ropis) */
/* the fix is made because the add to cart button is conflitting with the ropis image */

.button.is-large {
  width: 100%;
}

@media (max-width: 1280px) {
  .buttonContainer {
    flex-wrap: wrap;
  }
  .button.is-large {
    width: 80%;
  }
}
@media (max-width: 576px) {
  .buttonContainer {
    flex-wrap: nowrap;
  }
  .button.is-large {
    width: 80%;
  }
  .bigBuyButtons .ropisPop img {
    width: 40%;
  }
}

/* PDP swogo styling*/
/* swogo promotions now look like standard promotion below */

.swogo-atc-division .swogo-total .swogo-price-container .swogo-price {
  font-family: "poppins", sans-serif;
}

.swogo-bundle-container {
  display: block;
  margin: 0 10px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.swogo-bundle {
  border: none !important;
}
.swogo-bundle-options {
  border-top: none !important;
}

.swogo-atc-division .swogo-atc {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 3;
  text-decoration: none;
  text-align: center;
  background-color: #e81e25;
  border-color: #e81e25;
  border-radius: 3em;
  border: 1px solid #e81e25;
  height: 3em;
  padding: 0 1.25em;
  box-sizing: border-box;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease, width 0.2s ease, outline-color 0.2s ease;
  text-transform: capitalize !important;
}

/* CSS Document */

.platformPopupColumn2 {
  background-color: #ffffff;
  border-left: 1px solid hsl(0, 0%, 93%);
  float: left;
  margin: 0;
  padding: 0;
  width: 143px;
  padding-top: 10px;
}

.platformPopup .platformPopupColumn2 h3 {
  color: hsl(0, 0%, 40%);
  font-size: 15px;
  font-weight: normal;
  height: 25px;
  padding: 10px 10px 0;
  text-shadow: 1px 1px 1px hsl(0, 0%, 100%);
  width: 130px;
  text-align: center;
}

.popButton2 .medButton2 {
  color: #ffffff;
  display: inline-block;
  float: none;
  text-shadow: none;
  width: 150px;
}

a.medButton2 {
  background: url("Images/med-button.png") no-repeat scroll 0 -52px rgba(0, 0, 0, 0);
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  padding: 0 0 0 4px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000000;
  vertical-align: middle;
}

.platformBar li a.platButton2 {
  color: #ffffff;
  display: block;
  font-weight: bold;
  height: 40px;
  line-height: 41px;
  padding: 0;
  position: relative;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000000;
  z-index: 2;
}

.platformBar li:hover a.platButton2 {
  background: url("Images/platform-bar.png") no-repeat scroll right -91px rgba(0, 0, 0, 0);
  border: medium none;
  color: #666666;
  height: 50px;
  line-height: 39px;
  padding: 5px 16px 0 2px;
  text-shadow: none;
}

a.medButton2 {
  background: url("/views/locale/Content/Images/med-button.png") no-repeat
    scroll 0 -52px hsla(0, 0%, 0%, 0);
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  padding: 0 0 0 4px;
  text-decoration: none;
  text-shadow: 1px 1px 0 hsl(0, 0%, 0%);
  vertical-align: middle;
}

a.medButton2 span {
  background: url("/views/locale/Content/Images/med-button.png") no-repeat
    scroll right 0 hsla(0, 0%, 0%, 0);
  cursor: pointer;
  display: block;
  height: 25px;
  line-height: 25px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 120px;
}

.platformPopup .platformPopupColumn2 p {
  padding: 0 0 10px 10px;
}

.platformPopupColumn2 img {
  margin: 10px auto 15px 13px;
}

/* ALTRO */

.platformPopupColumn {
  float: left;
  padding-left: 10px;
  width: 181px;
  border-left: 1px solid hsl(0, 0%, 93%);
  padding-top: 10px;
}

#platformPopup.platformPopup p {
  margin-top: 12px;
  padding: 0 0 0 15px;
}

#platformPopup.platformPopup img {
  display: block;
  margin: 0 10px 15px auto;
  max-height: 100%;
  max-width: 100%;
}

#platformPopup.platformPopup {
  background-color: #ffffff;
  background-image: none;
}

#imgMenuAltro {
  width: 100%;
}

/* SERVIZI */

/* pagina servizi restyling */

.categoriesBlocks2 > div a {
  border: none !important;
}

.categoriesBlocks2 > div {
  background-color: transparent !important;
}

.categoriesBlocks2 > div.used:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

.categoriesBlocks2 > div img {
  transition: 0.2s all;
}

.categoriesBlocks2 > div:hover img {
  transform: scale(1.05);
}

.breadcrumb h1 {
  font-family: "Poppins";
  margin: 1em auto;
}

/* Video Section Youtub eembedded styling*/

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container > * {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 95%;
}
.video-container .youtube-embed {
  margin: auto;
  position: relative;
  top: 0;
  left: 0;
  width: 95%;
  height: 95%;
}
.video-container .youtube-embed .cookie-optin-overlay {
  font-size: 1em;
}
.video-container .youtube-embed .cookie-optin-overlay button {
  font-family: "Poppins", sans-serif;
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  height: 2.5em;
  padding: 0 1em;
  transition: 0.1s ease;
  pointer-events: all;
  cursor: pointer;
  height: 2.5em;
  padding: 0 1em;
  color: #fff;
  border: 2px solid #e81e25;
  background-color: #e81e25;
  border-radius: 2em;
}
.video-container .youtube-embed .cookie-optin-overlay button[disabled] {
  opacity: 0.5;
}
.video-container .youtube-embed .cookie-optin-overlay button:hover {
  border-color: #bf1218;
  background-color: #bf1218;
}

h4.subline,
h5.subline,
p.subline {
  line-height: 1.5;
}

/* make element-invisible without affecting SEO Badly */
.element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

@media only screen and (min-width: 376px) and (max-width: 500px) {
  .nav-right {
    flex-basis: 46%;
  }
}

/**
---
Curtain Overlay v2
by Manuel & Phil  
---

V 1.0.2
Last modified:20/09/2023
---

CHANGELOG
- added text is-light, is-dark modifier
- added img 2x compatibility
---
*/

#gs-curtain {
  overflow: hidden;
  margin: 1em auto;
  font-family: "poppins", sans-serif;
  transition: all ease-in 0.8s;
}

.CR-wrapper {
  max-width: 1280px;
  margin: 1em auto 0 auto;
  height: max-content;
}

.CR-container {
  position: relative;
}

.CR-banner {
  border-radius: 5px;
  height: fit-content;
  height: 85px;
  overflow: hidden;
  margin: 0 auto;
  background-color: #f6f6f6;
  width: 100%;
}

.CR-banner a {
  width: 95%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CR-banner .CR-logo {
  width: 100%;
  object-fit: contain;
  max-height: 70px;
}

.CR-content {
  max-height: 0;
  overflow: hidden;
  border-radius: 5px;
  transition: all ease-in-out 0.8s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1em;
  position: relative;
}

.CR-content.open {
  padding: 2em 0;
  background-color: #f6f6f6;
}

.CR-content .icon-arrow-down {
  color: #222;
  font-size: 2em;
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.5em;
  transform: rotate(180deg);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.CR-content.open .icon-arrow-down:hover {
  color: #ee2a28;
}

.CR-inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  align-items: center;
  height: 100%;
}

#gs-curtain img {
  max-width: 100%;
}

.CR-banner img {
  display: block;
  max-height: 70px;
  width: auto;
  margin: auto;
}

.CR-block {
  background-color: rgb(204, 92, 92);
  border-radius: 5px;
  width: 48%;
  height: 430px;
  margin: 0 0.5em;
}

.CR-content.open .CR-sx-block,
.CR-content.open .CR-dx-block {
  opacity: 1;
}

.CR-text {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  color: #fff;
  height: 100%;
  width: 85%;
  margin: 0 auto;
}

.CR-text.video {
  height: auto;
  margin: 5% auto 2.5% auto;
  text-align: start;
  width: 95%;
}

.CR-text p {
  font-size: 1.2em;
  padding: 1em 0 0 0;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.4));
}

.CR-text img {
  max-height: 180px;
}

.CR-text.full-art img{
  max-height: 100%;
}

.CR-text .ctaButton {
  align-self: flex-end;
}

.CR-text h3 {
  font-size: 2em;
  color: #fff;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.4));
}

/* Video Section */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.video-container > * {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 95%;
}

.video-container .youtube-embed {
  margin: auto;
  position: relative;
  top: 0;
  left: 0;
  width: 95%;
  overflow: hidden;
  height: 95%;
  border-radius: 5px;
}

.youtube-embed img {
  top: -13.5% !important;
}

.video-container .youtube-embed .cookie-optin-overlay {
  font-size: 1em;
}

.video-container .youtube-embed .cookie-optin-overlay button {
  font-family: "Poppins", sans-serif;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  height: 2.5em;
  padding: 0 1em;
  transition: 0.1s ease;
  pointer-events: all;
  cursor: pointer;
  height: 2.5em;
  padding: 0 1em;
  color: #fff;
  border: 2px solid #e81e25;
  background-color: #e81e25;
  border-radius: 2em;
  margin-top: 1em;
}

.video-container .youtube-embed .cookie-optin-overlay button[disabled] {
  opacity: 0.5;
}

.video-container .youtube-embed .cookie-optin-overlay button:hover {
  border-color: #bf1218;
  background-color: #bf1218;
}

/* modifier */

*.is-dark p, *.is-dark .CR-text h3 {
  color: #fff !important;
}

*.is-light p ,*.is-light .CR-text h3 {
  color: #222 !important;
}

@media (max-width: 1200px) {
  #gs-curtain {
    width: 95%;
  }

  .CR-inner {
    display: block;
    width: 95%;
    margin: 0 auto;
  }

  .CR-block {
    width: 100%;
    max-width: 100%;
    background-color: rgb(190, 85, 85);
    margin-bottom: 1em;
    height: max-content;
    padding: 2em 0;
    margin: 1em 0;
  }

  .CR-content.open {
    padding: 0;
  }

  .CR-text.video {
    margin-top: 0;
  }

  .CR-text {
    width: 90%;
  }

  .CR-text p {
    font-size: 1em;
  }

  .CR-text h3 {
    font-size: 1.5em;
  }

  .video-container .youtube-embed .cookie-optin-overlay {
    font-size: 10px;
    width: 70%;
  }

  .youtube-embed .cookie-optin-overlay {
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    color: #fff;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 0 6px 21px black;
    transform: translateY(-50%);
    z-index: 1;
  }

  .video-container .youtube-embed .cookie-optin-overlay button,
  #gs-curtaina.ctaButton,
  button.ctaButton {
    font-size: 12px;
  }
}

/*Modifiche al Core Stylesheet di Athena*/

/*

WARNING: 

Editing the core style might cause responsiveness issue as well as compatibility troubles.
keep in mind that this file should be your last resort in order to edit something into the wesite.
it is always better to edit the other CSS before.

READ ME:

The usage for this CSS file is simple: paste here every class you want to add or edit from the core style of the page.
The main point behind all of this revolves around the fact that this file HAS TO BE ALWAYS ON THE BOTTOM OF EVERY OTHER FILE.
Othewise it might not works.

For that purpose you can just rename the file as many time you wish.

e*

/*CORE STYLES*/

/*Platform bar (TABLET VIEW)*/

/* Platform Bar has no background and shows skin when in tablet mode*/

@media (max-width: 959px) {

  .platformBar,
  #menu li {
    width: 90%;
  }

  .platformBar,
  #menu li .platButton {
    text-transform: Uppercase;
    font-size: 1.1em;
    text-align: left;
  }
}

/* Header has too thin background and shows skin when in tablet mode*/

@media (min-width: 569px) and (max-width: 959px) {
  .headBar {
    min-height: 90px;
  }
}

@media (max-width: 568px) {
  .mobileView .headBar {
    min-height: 75px;
  }
}

/* Searchbar is not centered while in tablet Mode*/

@media (min-width: 569px) and (max-width: 959px) {
  .headBar {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* hamburger menu behaviour */

@media (max-width: 548px) {
  #menu {
    position: fixed;
    top: 20px !important;
    z-index: 1000000000000000000;
  }
}

@media (max-width: 576px) {
  #menu {
    position: fixed;
    top: 44px !important;
    z-index: 10000;
  }
}

/* Add to cart pop up styling */

.ui-dialog.ui-widget-content {
  padding: 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  outline: none;
}

/* Mobile check-out buttons fix */

@media (max-width: 960px) {
  .gsBtn {
    width: 80% !important;
  }

  .subCtaBtn {
    width: 80% !important;
  }
}

/* SERVIZI */

/* pagina servizi */

.categoriesBlocks2>div a {
  border: none !important;
}

.categoriesBlocks2>div {
  background-color: transparent !important;
}

.categoriesBlocks2>div.used:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

.categoriesBlocks2>div img {
  transition: 0.2s all;
}

.categoriesBlocks2>div:hover img {
  transform: scale(1.05);
}

/* x-Overflowing on mobileview */

.mobileView {
  overflow-x: hidden;
}

/* x-Overflowing on mobileview */

body {
  overflow-x: hidden;
}

/* Button text in search prodotti */

.SPTenabled {
  font-size: 1.2em;
}

/* LISTA PRODOTTI */

.ribbon__element:nth-child(1) {
  z-index: 1;
}

/* /UNSUBSCRIBE elements fix */

.logButtons {
  display: contents;
}

/* CSS Document */

.platformPopupColumn2 {
  background-color: #ffffff;
  border-left: 1px solid hsl(0, 0%, 93%);
  float: left;
  margin: 0;
  padding: 0;
  width: 143px;
  padding-top: 10px;
}

.platformPopup .platformPopupColumn2 h3 {
  color: hsl(0, 0%, 40%);
  font-size: 15px;
  font-weight: normal;
  height: 25px;
  padding: 10px 10px 0;
  text-shadow: 1px 1px 1px hsl(0, 0%, 100%);
  width: 130px;
  text-align: center;
}

.popButton2 .medButton2 {
  color: #ffffff;
  display: inline-block;
  float: none;
  text-shadow: none;
  width: 150px;
}

a.medButton2 {
  background: url("Images/med-button.png") no-repeat scroll 0 -52px rgba(0, 0, 0, 0);
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  padding: 0 0 0 4px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000000;
  vertical-align: middle;
}

.platformBar li a.platButton2 {
  color: #ffffff;
  display: block;
  font-weight: bold;
  height: 40px;
  line-height: 41px;
  padding: 0;
  position: relative;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000000;
  z-index: 2;
}

.platformBar li:hover a.platButton2 {
  background: url("Images/platform-bar.png") no-repeat scroll right -91px rgba(0, 0, 0, 0);
  border: medium none;
  color: #666666;
  height: 50px;
  line-height: 39px;
  padding: 5px 16px 0 2px;
  text-shadow: none;
}

a.medButton2 {
  background: url("/views/locale/Content/Images/med-button.png") no-repeat scroll 0 -52px hsla(0, 0%, 0%, 0);
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  padding: 0 0 0 4px;
  text-decoration: none;
  text-shadow: 1px 1px 0 hsl(0, 0%, 0%);
  vertical-align: middle;
}

a.medButton2 span {
  background: url("/views/locale/Content/Images/med-button.png") no-repeat scroll right 0 hsla(0, 0%, 0%, 0);
  cursor: pointer;
  display: block;
  height: 25px;
  line-height: 25px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 120px;
}

.platformPopup .platformPopupColumn2 p {
  padding: 0 0 10px 10px;
}

.platformPopupColumn2 img {
  margin: 10px auto 15px 13px;
}

/* ALTRO */

.platformPopupColumn {
  float: left;
  padding-left: 10px;
  width: 181px;
  border-left: 1px solid hsl(0, 0%, 93%);
  padding-top: 10px;
}

#platformPopup.platformPopup p {
  margin-top: 12px;
  padding: 0 0 0 15px;
}

#platformPopup.platformPopup img {
  display: block;
  margin: 0 10px 15px auto;
  max-height: 100%;
  max-width: 100%;
}

#platformPopup.platformPopup {
  background-color: #ffffff;
  background-image: none;
}

#imgMenuAltro {
  width: 100%;
}

/* SERVIZI */

/* pagina servizi restyling */

.categoriesBlocks2>div a {
  border: none !important;
}

.categoriesBlocks2>div {
  background-color: transparent !important;
}

.categoriesBlocks2>div.used:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

.categoriesBlocks2>div img {
  transition: 0.2s all;
}

.categoriesBlocks2>div:hover img {
  transform: scale(1.05);
}

.breadcrumb h1 {
  font-family: "Poppins";
  margin: 1em auto;
}

/*  scale img from searchlist */
.searchProductImage img {
  transform: translate(-50%, -50%) scale(1.4);
}

@-moz-document url-prefix() {
  .searchProductImage img {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media not all and (min-resolution: 0.001dpcm) {
  .searchProductImage img {
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@media (max-width: 576px) {
  .searchProductImage img {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Button in mobile wiew was overlapping due to longer text */
@media (max-width: 576px) {
  .button {
    font-size: 12px;
  }
}

/* scroll-behaviour smooth */

* {
  scroll-behavior: smooth !important;
}

/* removed margin-right on logo */

.hamburgerLogo {
  margin: -6px 0px 0 0;
}


/* swogo PDP button fix */

@media screen and (max-width: 750px) {
  .swogo-atc-division {
    justify-content: space-around !important;
  }

  .swogo-atc-division .swogo-atc {
    width: 100% !important;
    max-width: fit-content !important;
    height: 40px !important;
    margin-left: 4px !important;
    font-size: 14px !important;
  }

  .swogo-atc-division .swogo-total {
    margin: 0 !important;
  }
}

/* PDP resize width */

@media (max-width: 576px) {
  #prodMain {
    width: 95%;
    margin: 0 auto;
  }
}

/* PDP suggested Prod */

.splide__wrapper--carousel {
  width: 100% !important;
}

/* popup pdp */
#promoVerifyDiv {
  font-family: 'Poppins', sans-serif !important;
}

#promoVerifyDiv .tradeInPopupValid,
#promoVerifyDiv .tradeInPopupNotValid {
  font-weight: 500;
  text-align: start;
  line-height: 1.3;
  font-size: 20px;
}

#promoVerifyDiv .tradeInPopupNotValid {
  color: #333;
  font-size: 16px;
}

#promoVerifyDiv .tradeInPopupDesc {
  font-size: 12px;
  opacity: 0.6;
  font-family: 'Open Sans';
}

.tradeInPopupProduct {
  margin-bottom: .5em;
  border-bottom: 1px solid #e7e7e7;
}

/* Pickup@store popup */
.ui-dialog.ui-widget-content {
  width: 60% !important;
  margin: 0 auto;
  left: 20% !important;
  right: 20% !important;
}

#RopisPopup {
  max-width: 100% !important;
  font-family: 'Poppins', sans-serif;
}

.ropisPopContent img {
  display: block;
  position: relative;
  width: fit-content;
  height: auto;
  margin: 0 auto 1.5em;
}

.ropisPopContent p {
  color: grey;
}

.ropisPopContent span {
  color: #333 !important;
}

@media screen and (max-width:576px) {
  .ui-dialog.ui-widget-content {
    width: 90% !important;
    margin: 0 auto;
    left: 5% !important;
    right: 5% !important;
  }

  .ropisPopContent img {
    width: 100%;
    margin: 0 auto 1.5em;
  }
}

/* cedemoPlayer mobile fix video */
#cedemoPlayer div {
  max-width: 100% !important;
}

/* splider carousel mobile fix on borders. */

@media (max-width:576px) {

  .splide__wrapper--carousel,
  .splide__wrapper--slider {
    margin: 0 0;
  }
}