/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html {
  --black: #000000;
  --steel: #eeeeee;
  --grey: #a0a0a0;
  --white: #fff;
  --box-1: #fff;
  --red: #EF0A0A;

  --bkg-color: #fff;
  --text-color: #000;
  --dark-bkg-color: #eee;
  --lighter-text-color: #333;
  --briefing-bkg: #FCFCF6;

  --text-on-red-color: #fff;
  --stroke-color: var(--black);

  /* --subscribe-background: #f3f5f7; */
}

html.dark{

    --steel: #4C4D4F;
    --grey: #4C4D4F;
    --white: #131414;
    --red: #EF0A0A;
    --black: #e9e9e9;
    --box-1: #333;
    --bkg-color: #131414;
    --text-color: #e9e9e9;
    --dark-bkg-color: #333;
    --lighter-text-color: #eee;
    --briefing-bkg: #131414;
  
    --text-on-red-color: #eee;
    --stroke-color: var(--grey);
    
    /* --subscribe-background: #000; */
}

/* @grey: var(--grey);
@black: var(--black);
@steel: var(--steel);
@grey: var(--grey);
@white: var(--white);
@red: var(--red);

@bkg-color: var(--bkg-color);
@text-color: var(--text-color);
@text-on-red-color: var(--text-on-red-color);
@briefing-bkg: var(--briefing-bkg);

@dark-bkg-color: var(--dark-bkg-color);
@lighter-text-color: var(--lighter-text-color);
@stroke-color: var(--stroke-color);


@stroke-style: 1px solid @stroke-color;

@border_light: 1px solid #f0f0f0;
@border_dark: 1px solid #d2d2d2; */

body a, body p, h1, h2, h3{
  font-family: 'Lyon Text Web', sans-serif;
  color: var(--text-color);
}

li{
  color: var(--text-color);
}




body .subscriber-only {
  display: none;
}
body .non-subscriber-only {
  display: block;
}
body #top-subscribe.non-subscriber-only {
  display: inline-block;
}
body .id-form {
  cursor: pointer;
}
body.piano-subscribed .subscriber-only {
  display: block !important;
}
body.piano-subscribed .non-subscriber-only {
  display: none;
}
body.piano-subscribed .userStatus {
  text-shadow: 0 0 0 #5ea259;
  color: transparent;
  font-family: 'StudioProSaturday-Regular', sans-serif;
}
body.piano-subscribed #userDot {
  color: #5ea259;
}
.userStatusMob .email {
  display: none;
}
.subscriber-only,
.non-subscriber-only {
  /* opacity: 0;
  transition: opacity 0.1s linear;
  transition-delay: 0.1s; */
}
body.content-ready .subscriber-only,
body.content-ready .non-subscriber-only {
  /* opacity: 1; */
}
body.piano-not-subscribed .subscriber-only {
  display: none;
}
body.piano-not-subscribed .non-subscriber-only {
  display: block;
}

/* over four SwG */
body.over-four .swg-box {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.hook-paywall{
  padding-top: 1em; 
  margin-top: 0px !important;
}

@media (max-width: 650px) {
  .hook-paywall{
    padding-top: 2em !important;
  }
}

.new-subscribe-body-wrapper{
  margin: 0; 
  background: var(--bkg-color);
}

.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
width: 100%;
}
@media (max-width: 540px) {
  .row{
    display: block;
  }
}

.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.left-column{
  width: 50%;
}
.gift-left{
  width: 70% !important;
}


.gift-zone{
     max-width: 1090px !important;
}

html.dark .right-column img{
  -webkit-filter: invert(.8);
          filter: invert(.8);
}

@media (max-width: 540px) {
  .left-column{
    width: 100%;
  }
}

.image-right {
max-width: 100%;
max-height: 450px;
}

.lockup-right {
text-align: right;
float: right;
}

.left-wrapper{
text-align: left;
}

/*desktop*/
.heading-main {
  font-family: 'StudioProSaturday-SemiBold', sans-serif;
  font-size: 42px;
  letter-spacing: -0.52px;
  line-height: 43px;
  margin-top: 1em;
    margin-bottom: 2em;
}
@media (max-width: 540px) {
  .heading-main {
    font-size: 32px;
    letter-spacing: -0.4px;
    line-height: 32px;
  }
  .heading-hook{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
  }
}


.save-50 {
  font-family: 'Lyon Text Web' , sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
   font-display: swap;
  font-size: 20px;
  letter-spacing: -0.11px;
  color: #EF0A0A;

  margin-bottom: 0;
  margin-top: 3em;
}

.h2-body {
  font-family: 'Lyon Text Web' , sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 100;
}

@media (max-width: 540px) {
  .h2-body {
    font-family: 'Lyon Text Web' , sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 100;
  }
}

.save-percent{
  margin-bottom: 0;
}

.gift-button{
  display: block;
  margin-top: 4em !important;
}

.gift-heading{
  margin-bottom: 20px !important;
}

.smart-gift-text{
  margin-top: 0;
}

.h2-body-list {
font-family: 'Lyon Text Web';
font-size: 15px !important;
line-height: 18px !important;

font-weight: 100;

margin-bottom: 2em;
}

.subscription-type{
  margin-top: 1.1em;
  position: relative;
  min-height: 32px;
  font-family: 'StudioProSaturday-SemiBold', sans-serif;
  font-size: 26px;
  letter-spacing: 0.05px;
  /* color: #EF0A0A; */
  margin-bottom: 0;
}


.price-area {
  font-family: 'StudioProSaturday-Medium';
  font-size: 30px;
  margin: 12px 0;
}

.best-value-eyebrow{
  background: #EF0A0A;
  color: white;
  padding: 2px 8px;
  border-radius: 9px;
  position: absolute;
  bottom: 30px;
  font-size: 13px;
  text-transform: uppercase;
  font-family: 'StudioProSaturday-SemiBold', sans-serif;
}

.best-value {
  margin-bottom: 30px;
  color:  #EF0A0A;;
}

@media (max-width: 540px) {
  .best-value {
    margin-bottom: 1em;
  }
}

.bodycopy-2 {
  font-family: 'StudioProSaturday-Regular';
  font-size: 12px;
  /* letter-spacing: 0.5px;
  line-height: 1.5; */
}
.bodycopy-2.per-week{
 font-size: 18px;
 margin: 0 0 1em 0;
 line-height: 1.3;
}

.button-description-container ul {
  position: relative;
  list-style: none;
    padding-left: 0;
    /* letter-spacing: 0px; */
    line-height: 1.6em;
    font-size: 14px;
}

.button-description-container  ul li:before {

    content: '✓';  
    font-weight: bold;
    position: absolute;
    left: 0;  /* place the SVG at the start of the padding */
    width: 1em;
    height: 1em;
    /* background:  no-repeat; */
    /* could do SVG if needed with background */
  
}

.button-description-container li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}


.subscription-description{

  text-align: left;
  margin: 15px 0; 
  /* this may need to be 30px if not using feature dropdown */
}

.button-description-container{
  /* margin: 0 30px; */
  /* //rd could use top and bottom 30px also perhaps */
}

.view-features{
  font-size: 12px;
  font-family: 'StudioProSaturday-Regular';
  cursor: pointer;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 10px auto;
}

.view-features:after {
  position: absolute;
  right: -24px;
  top: 3px;
  content: "";
  background-image: url(../svg/chevron_down.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 14px;
  height: 8px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.view-features.rotated:after{
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.see-all-options{
  text-align: center;
  margin: 2em auto;
  font-family: 'StudioProSaturday-Regular';
  cursor: pointer;
  position: relative;
}
.see-all-options span{
  position: relative;
}

.see-all-options span:after {
  position: absolute;
    right: -30px;
    top: 6px;
    content: "";
    background-image: url(../svg/chevron_down.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 9px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.see-all-options.rotated span:after{
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.body-12 {
  font-family: 'Lyon Text Web' , sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 100;

}

.tsp-masthead-image {
  display: block;
  margin: 0 auto;
  width: 400px;
  max-width: 80%;

  margin-top: 1em;
}

.subscribe-page-wrapper-outer {
  /* background: var(--subscribe-background); */
}

.subscribe-page-wrapper-lower{
  margin: 3em 15px;
  /* background: var(--grey); */
}

.subscribe-page-wrapper-outer .subscribe-page-wrapper,
.subscribe-page-wrapper-lower .subscribe-page-wrapper {
  max-width: 1440px;
  margin: 0 auto;

  text-align: center;
}

body.over-four .subscribe-page-wrapper-outer .subscribe-page-wrapper,
body.over-four .subscribe-page-wrapper-lower .subscribe-page-wrapper {
  max-width: 1440px;
}

.inner-wrapper-subscribe {
  max-width: 100%;
  margin: 0 auto;
}

.inner-wrapper-subscribe-lower {
  max-width: 740px;
  margin: 0 auto;
}

.price-main {
  font-family: 'StudioProSaturday-Regular', sans-serif;
  font-size: 20px;
  margin: 5px 0 15px 0;
  /* margin-bottom: 2px; */
  /* margin-top: 18px; */
}

.price-main span.full-price {
  color: #9a9898;
  -webkit-text-decoration: #EF0A0A line-through;
          text-decoration: #EF0A0A line-through;
  padding-right: 5px;
}

@media (max-width: 540px) {
  .price-main {
      margin-top: 2px;
      margin-bottom: 10px;
  }
}

.subscription-hr{
  border-top: 1px solid var(--grey);;
  margin: 2em 0;
}

@media (max-width: 540px) {
  .subscription-hr{
    border-top: 1px solid var(--grey);;
    margin: 1em 0;
  }
}


.subscriber-login-top {
  text-align: right;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;

  font-family: 'StudioProSaturday-Regular';
  font-size: 14px;
 
}
@media (max-width: 540px) {
  .subscriber-login-top {
    font-size: 12px;
  }
}

.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box-container-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /* justify-content: space-between; */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  /* gap: 1em; */


}
@media (max-width: 740px) {
  .box-container-row .box-1:nth-of-type(2){
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}

.box-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* flex-basis: 100%;
  flex: 1; */
  width: 324px;
  /* background: var(--box-1); */
  padding: 0em 2em;
  border-right: 1px solid #cecdcd;
  text-align: left;
}
.box-1:last-of-type{
  border-right: none;
  
}

/* wtf */
.box-1-image-top{
  /* max-height: 166px;ox-1-image-top
  width: max-content; */

  max-height: 166px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 808px) and (max-width: 1166px) {
  .box-1 {
    border: none;
  }
  .box-1:first-of-type{
    border-right: 1px solid #cecdcd !important;
  }
  .box-1:last-of-type{
    margin-top: 2em;
  }
}

@media (max-width: 808px) {
  .box-1 {
    margin: 0 auto;
    padding: 1em 1em;
    border: none;
  }
}

.box-row-bundle{
  border: 1px solid !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  max-width: 1000px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 3em auto 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 540px) and (max-width: 1050px) {
  .box-row-bundle{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 2em;
  }
}

@media (max-width: 540px) {
  .box-row-bundle{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 1em;
  }
}

.middle-box {
  border-left: 2px solid #dfe0e0;
  border-right: 2px solid #dfe0e0;
  margin-top: 1em 0;
}

.center{
  text-align: center;
  margin: 0 auto;
}

.round-button {
  border: 1px solid black;
  color: black;
  /* background: var(--bkg-color); */
  padding: 10px 20px;
  border-radius: 28px;
  cursor: pointer;
  display: inline-block;
  font-family: studioprosaturday-semibold,sans-serif;
  font-weight: 100;
  /* font-size: 22px; */
  line-height: .9;
  max-width: 100%;
  text-align: center;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  text-decoration: none;
  font-size: 32px;
}

.round-button:hover {

  background: black;
  color: white;
}

.round-button:active {
  border: 1px solid #eeeeee;
  background: grey;
}

.new-subscribe-body-wrapper .btn {
  /* padding: 1em; */
  font-family: 'StudioProSaturday-SemiBold', sans-serif;
  font-size: 14px;
  letter-spacing: 0.51px;
  border-radius: 5px;
  text-decoration: none;

  margin: 0 auto;

  /* min-width: 75%; */
  padding: 12px 0;
  text-align: center;
}

.btn-full{
  width: 100%;
  display: block;
}

.new-subscribe-body-wrapper .btn-white {
  background: white;
  color: #EF0A0A;
  border: 2px solid #EF0A0A;
}

.new-subscribe-body-wrapper .btn-subscribe {
  background: #EF0A0A;
  color: white;
}


.new-subscribe-body-wrapper .btn-subscribe:hover {
  background: #DB1812;
  color: white;
}

@media (max-width: 1040px) {
  .subscribe-page-wrapper{
    margin: 0 15px !important;
  }
}

@media (max-width: 540px) {
  .subscribe-page-wrapper{
    margin: 0 15px !important;
  }
}


body{
  -webkit-animation: myfadeInAnimation 1500ms;
  animation: myfadeInAnimation 1500ms;
}

@keyframe myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}



/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #EF0A0A;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: white;
}

input:focus + .slider {
-webkit-box-shadow: 0 0 1px #2196F3;
        box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.toggle-12-6{
  position: relative;
  top: 10px;
  font-size: 80%;
  cursor: pointer;
}

.switch{
  margin-left: 1em;
  margin-right: 1em; 
}

    /* // April 2020 new fonts Lyon and the other one */
    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../lyontext-blackitalic-web.html') format('woff2'), url('../lyontext-blackitalic-web-2.html') format('woff');
        font-weight: 900;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-black-web.woff2') format('woff2'), url('../woff/lyontext-black-web.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-bolditalic-web.woff2') format('woff2'), url('../woff/lyontext-bolditalic-web.woff') format('woff');
        font-weight: 700;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-bold-web.woff2') format('woff2'), url('../woff/lyontext-bold-web.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-semibolditalic-web.woff2') format('woff2'), url('../woff/lyontext-semibolditalic-web.woff') format('woff');
        font-weight: 600;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-semibold-web.woff2') format('woff2'), url('../woff/lyontext-semibold-web.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-regularno2italic-web.woff2') format('woff2'), url('../woff/lyontext-regularno2italic-web.woff') format('woff');
        font-weight: 400;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-regularno2-web.woff2') format('woff2'), url('../woff/lyontext-regularno2-web.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-regularitalic-web.woff2') format('woff2'), url('../woff/lyontext-regularitalic-web.woff') format('woff');
        font-weight: 400;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('../woff2/lyontext-regular-web.woff2') format('woff2'), url('../woff/lyontext-regular-web.woff') format('woff');
        font-weight: 100;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-blackitalic-web.woff2') format('woff2'), url('../woff/lyondisplay-blackitalic-web.woff') format('woff');
        font-weight: 900;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-black-web.woff2') format('woff2'), url('../woff/lyondisplay-black-web.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-bolditalic-web.woff2') format('woff2'), url('../woff/lyondisplay-bolditalic-web.woff') format('woff');
        font-weight: 700;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-bold-web.woff2') format('woff2'), url('../woff/lyondisplay-bold-web.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-mediumitalic-web.woff2') format('woff2'), url('../woff/lyondisplay-mediumitalic-web.woff') format('woff');
        font-weight: 500;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-medium-web.woff2') format('woff2'), url('../woff/lyondisplay-medium-web.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-regularitalic-web.woff2') format('woff2'), url('../woff/lyondisplay-regularitalic-web.woff') format('woff');
        font-weight: 400;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-regular-web.woff2') format('woff2'), url('../woff/lyondisplay-regular-web.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-lightitalic-web.woff2') format('woff2'), url('../woff/lyondisplay-lightitalic-web.woff') format('woff');
        font-weight: 300;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Display Web';
        src: url('../woff2/lyondisplay-light-web.woff2') format('woff2'), url('../woff/lyondisplay-light-web.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'StudioProSaturday-Medium';
        src: url('../woff2/studioprosaturday-mediumitalic.woff2') format('woff2'), url('../woff/studioprosaturday-mediumitalic.woff') format('woff');
        font-weight: 500;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'StudioProSaturday-Medium';
        src: url('../woff2/studioprosaturday-medium.woff2') format('woff2'), url('../woff/studioprosaturday-medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'StudioProSaturday-Regular';
        src: url('../woff2/studioprosaturday-regularitalic.woff2') format('woff2'), url('../woff/studioprosaturday-regularitalic.woff') format('woff');
        font-weight: 400;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'StudioProSaturday-Regular';
        src: url('../woff2/studioprosaturday-regular.woff2') format('woff2'), url('../woff/studioprosaturday-regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'StudioProSaturday-SemiBoldItalic';
        src: url('../woff2/studioprosaturday-semibolditalic.woff2') format('woff2'), url('../woff/studioprosaturday-semibolditalic.woff') format('woff');
        font-weight: 600;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'StudioProSaturday-SemiBold';
        src: url('../woff2/studioprosaturday-semibold.woff2') format('woff2'), url('../woff/studioprosaturday-semibold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }

  
.tp-container-inner, 
.tp-container-inner iframe {
    min-width: 100%;
    /* or set a specific min-width like: */
    /* min-width: 300px; */
}