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);
}

/* over four SwG */
body.over-four .swg-box {
  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: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
@media (max-width: 540px) {
  .row{
    display: block;
  }
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

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

html.dark .right-column img{
  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: 10px
}
@media (max-width: 540px) {
  .heading-main {
    font-size: 32px;
    letter-spacing: -0.4px;
    line-height: 32px;
  }
  .heading-hook{
    margin-left: auto;
    margin-right: auto;
  }
}

.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: 23px;
  line-height: 27px;
  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: 30px;
  min-height: 28px;
  font-family: 'StudioProSaturday-SemiBold', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05px;
  color: #EF0A0A;
}
@media (max-width: 540px) {
  .subscription-type{
    margin-top: 1.5em;
  }
}

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

.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;
}


.button-description-container ul {
  list-style: none;
  padding-left: 0;
}

.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{
  /* padding: 0 0 0 0; */
  text-align: left;
  margin: 30px 0;
  /* line-height: 1.8 !important; */
}

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


.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: 1024px;
  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-Medium', sans-serif;
  font-size: 30px;
  margin-bottom: 2px;
  margin-top: 18px;
}

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

.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;

  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;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box-container-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  justify-content: center;
  width: 100%;
}

.box-1 {
  display: flex;
  flex-direction: column;
  /* flex-basis: 100%;
  flex: 1; */
  width: 300px;
  background: var(--box-1);
  margin: 1em;
}

@media (max-width: 540px) {
  .box-1 {
    margin: 2em auto;
  }
}


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

.new-subscribe-body-wrapper .btn {
  /* padding: 1em; */
  font-family: 'StudioProSaturday-SemiBold', sans-serif;
  font-size: 12px;
  letter-spacing: 0.51px;

  text-decoration: none;

  margin: 0 auto;

  /* min-width: 75%; */
  padding: 1em 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;
  }

  .box-container-row {
    display: block;
  }
}


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;
transition: .4s;
}

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

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

input:focus + .slider {
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('/sites/all/themes/saturday/fonts/fonts/LyonText-BlackItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/fonts/LyonText-BlackItalic-Web.woff') format('woff');
        font-weight: 900;
        font-style: italic;
        font-stretch: normal;
         font-display: swap;
    }

    @font-face {
        font-family: 'Lyon Text Web';
        src: url('/sites/all/themes/saturday/fonts/LyonText-Black-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-BoldItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-Bold-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-SemiboldItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-Semibold-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-RegularNo2Italic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-RegularNo2-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-RegularItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonText-Regular-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-BlackItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-Black-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-BoldItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-Bold-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-MediumItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-Medium-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-RegularItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-Regular-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-LightItalic-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/LyonDisplay-Light-Web.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/StudioProSaturday-MediumItalic.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/StudioProSaturday-Medium.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/StudioProSaturday-RegularItalic.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/StudioProSaturday-Regular.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/StudioProSaturday-SemiBoldItalic.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/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('/sites/all/themes/saturday/fonts/StudioProSaturday-SemiBold.woff2') format('woff2'), url('/sites/all/themes/saturday/fonts/StudioProSaturday-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
         font-display: swap;
    }