/* @font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/themes/Newspaper-child/assets/fonts/Open%20Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap; */
/* } */


:root {
    --green-sheen: #81ae9d;
    --pakistan-green: #00700E;
    --custom-gray: #32373B80;
    --custom-black: #32373B;
    --smoky-black: #12100E;
    --platinum: #DAE2DF;
    --dark-electric-blue: #61707D;
    --onyx: #32373b;
}

#paywall {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--platinum);
    padding: 17px;
    position: relative;
}

#paywall::before {
    content: " ";
    background: transparent linear-gradient(180deg, #DAE2DF00 0%, var(--platinum) 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    height: 125px;
    width: 100%;
    top: -125px;
}

#paywall>svg {
    color: var(--pakistan-green) !important;
    width: 22px;
    height: 25px;
}

#paywall>h2 {
    color: var(--smoky-black);
    text-align: center;
    font: normal normal bold 16px/22px Open Sans !important;
    letter-spacing: 0px;
    margin-top: 9px;
}

/* #paywall>h2 {
    color: var(--smoky-black);
    text-align: center;
    font: normal normal bold 16px/22px Open Sans !important;
    letter-spacing: 0px;
    margin-top: 9px;
} */


#paywall>.subscription {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;

    margin: 27px 48px;
    width: 100%;
    height: 200px;

    overflow: hidden;
    -webkit-transition: height 0.3s 0.1s ease-in;
    -moz-transition: height 0.3s 0.1s ease-in;
    -o-transition: height 0.3s 0.1s ease-in;
    transition: height 0.3s 0.1s ease-in;
}

#paywall>.subscription.yearly:not(.active) {
    height: 130px;
}

#paywall>.subscription:not(.active):not(.yearly) {
    height: 102px;
}


#paywall>.subscription.yearly.active {
    height: 355px;
}

#paywall>.subscription.active:not(.yearly) {
    height: 201px;
}



#paywall>.subscription:not(.active) {
    cursor: pointer;
}

#paywall>.subscription.active {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 0px 0px 5px 5px;

    margin: 27px 48px;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#paywall>.subscription:not(:last-of-type) {
    margin-bottom: 42px;
}

#paywall>.subscription.active>.subscription-inner>.subscription-footer {
    display: none;
}

#paywall>.subscription>.subscription-inner>.subscription-footer {
    width: 100%;
    text-align: center;
}

#paywall>.subscription>.subscription-inner>.subscription-footer>a>svg {
    color: var(--dark-electric-blue);
}

#paywall>.subscription>.subscription-inner>.subscription-full {
    display: none;
}


#paywall>.subscription.active {
    border-top: 2px solid var(--pakistan-green);
}

#paywall>.subscription>.subscription-inner {
    padding: 19px;
    position: relative;
}

#paywall>.subscription>.subscription-inner>.subscription-price {
    position: absolute;
    right: 19px;
    top: 19px;

    color: var(--smoky-black);
    font: normal normal bold 16px/22px Open Sans !important;
    letter-spacing: 0px;
}

#paywall>.subscription.active>.subscription-inner {
    padding: 27px 48px;
    text-align: center;
}

#paywall>.subscription.active:not(.yearly)>.subscription-inner {
    padding: 19px;
}

#paywall>.subscription>.subscription-inner>.subscription-title {
    color: var(--onyx);
    font: italic normal normal 18px/27px "Noto Serif" !important;
    letter-spacing: 0px;
    color: #32373B;
    font-weight: 600;
    margin-top: 0;
}


#paywall>.subscription>.subscription-inner>.subscription-description {
    font: normal normal normal 12px/23px Open Sans !important;
}

#paywall>.subscription.active>.subscription-inner>.subscription-title {
    margin-top: 15px;
    margin-bottom: 0;
}

#paywall>.subscription>.subscription-inner>.subscription-subtitle {
    display: none;
    /*color: var(--green-sheen);*/
    text-align: center;
    font: normal normal bold 13px/18px Open Sans;
    letter-spacing: 1.56px;
    color: #3f8367;/*#81AE9D*/
    text-transform: uppercase;
    opacity: 1;
}

#paywall>.subscription.active>.subscription-inner>.subscription-subtitle {
    display: block;
}

#paywall>.subscription.active>.subscription-inner>.subscription-description {
    color: var(--smoky-black);
    text-align: center;
    font: normal normal normal 12px/23px Open Sans;
    letter-spacing: 0px;
    margin-top: 25px;
    margin-bottom: 25px;
}

#paywall>.subscription.active>.subscription-inner>.subscription-price {
    text-align: center;
    margin-top: 25px;
    position: inherit;
    top: inherit;
    right: inherit
}

#paywall>.subscription.active>.subscription-inner>.subscription-full {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#paywall>.subscription.active>.subscription-inner>.subscription-full>.subscription-button {
    background: var(--pakistan-green) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
    font: normal normal normal 13px/18px Open Sans;
    padding: 9px 50px;
    border: 0;
    box-shadow: 0px 3px 6px #00000029;
    margin-top: 24px;
    text-decoration: none;
}

#paywall .subscription-button:hover {
    background: var(--onyx) !important;
}

#paywall>.subscription.active>.subscription-inner>.subscription-full>.subscription-info {
    text-align: center;
    font: normal normal normal 11px/21px Open Sans;
    letter-spacing: 0px;
    color: #6d7881;/*#32373B80;*/
    margin-top: 11px;
}

#paywall>a.compare-link {
    color: var(--dark-electric-blue);
    text-align: center;
    font: normal normal normal 13px/18px Open Sans;
    letter-spacing: 0px;
    opacity: 1;
    text-decoration: none;
}

#paywall>.paywall-footer {
    display: flex;
    justify-content: flex-end;
    width: 90%;
    margin-top: 40px;
}

#paywall>.paywall-footer>span {
    color: var(--smoky-black);
    text-align: center;
    font: normal normal bold 13px/23px Open Sans;
    letter-spacing: 0px;
}

#paywall>.paywall-footer>span>a {
    color: var(--pakistan-green);
    text-align: center;
    font: normal normal bold 13px/23px Open Sans;
    letter-spacing: 0px;
    text-decoration: none;
}

#paywall>.subscription.yearly:not(.active)>.subscription-inner>.subscription-price {
    display: none;
}

#paywall>.subscription.yearly:not(.active)>.subscription-inner>.subscription-subtitle {
    display: block;
}

#paywall>.subscription.yearly:not(.active)>.subscription-inner>.subscription-description {
    display: none;
}

#paywall>.subscription.yearly:not(.active)>.subscription-inner>.subscription-title {
    text-align: center;
    margin-top: 15px;
}

#paywall>.subscription.active:not(.yearly) {
    align-items: normal;
}

#paywall>.subscription.active:not(.yearly)>.subscription-inner>.subscription-title {
    text-align: left;
    margin-bottom: 0;
    margin-top: 0;
}

#paywall>.subscription.active:not(.yearly)>.subscription-inner>.subscription-description {
    text-align: left;
    margin-top: 10px;
}

#paywall>.subscription.active:not(.yearly)>.subscription-inner>.subscription-price {
    position: absolute;
    top: 19px;
    right: 19px;
    margin-top: 0;
}

#paywall>.subscription.active:not(.yearly)>.subscription-inner>.subscription-full>.subscription-button {
    margin-top: 36px;
}

#paywall>.subscription:not(.yearly)>.subscription-inner>.subscription-title {
    margin-bottom: 0;
}

#paywall>.subscription:not(.yearly)>.subscription-inner>.subscription-description {
    margin-top: 10px;
    margin-bottom: 0;
}

@media screen and (max-width: 376px) {
    #paywall>.subscription:not(.active):not(.yearly) {
        height: 140px;
    }

    #paywall>.subscription:not(.yearly)>.subscription-inner>.subscription-title {
        max-width: 50%;
    }

    #paywall>.subscription.active:not(.yearly)>.subscription-inner>.subscription-title {
        max-width: 80%;
    }
}

@media screen and (max-width: 414px) {
    #paywall>.subscription.yearly.active {
        height: 430px;
    }


    #paywall>.subscription:not(.yearly)>.subscription-inner>.subscription-title {
        max-width: 75%;
    }
}

@media screen and (max-width: 392px) {
    #paywall>.subscription:not(.active):not(.yearly) {
        height: 140px;
    }
}

@media screen and (max-width: 372px) {
    #paywall>.subscription.yearly.active {
        height: 450px;
    }
}

@media screen and (max-width: 361px) {
    #paywall>.subscription.yearly.active {
        height: 475px;
    }
}

@media screen and (max-width: 342px) {
    #paywall>.subscription.yearly.active {
        height: 495px;
    }
}

@media screen and (max-width: 339px) {
    #paywall>.subscription.yearly.active {
        height: 555px;
    }
}

@media screen and (max-width: 358px) {
    #paywall>.subscription:not(.active):not(.yearly) {
        height: 160px;
    }
}

@media screen and (max-width: 327px) {
    #paywall>.subscription:not(.active):not(.yearly) {
        height: 185px;
    }
}

@media only screen and (min-width: 1024px) {
    #paywall>h2 {
        font: normal normal bold 20px/22px Open Sans;
    }

    #paywall>a.compare-link {
        font: normal normal normal 15px/18px Open Sans;
    }

    #paywall>.paywall-footer>span {
        font: normal normal bold 17px/23px Open Sans;
    }

    #paywall>.subscription>.subscription-inner>.subscription-title {
        font: italic normal bold 22px/33px "Noto Serif";
    }

    #paywall>.subscription>.subscription-inner>.subscription-subtitle {
        font: normal normal bold 15px/18px Open Sans;
    }

    #paywall>.subscription.active>.subscription-inner>.subscription-description {
        font: normal normal normal 14px/23px Open Sans;
    }

    #paywall>.subscription>.subscription-inner>.subscription-price {
        font: normal normal bold 18px/22px Open Sans;
    }

    #paywall>.subscription.active>.subscription-inner>.subscription-full>.subscription-button {
        font: normal normal normal 15px/18px Open Sans;
    }

    #paywall>.subscription>.subscription-inner>.subscription-description {
        font: normal normal normal 14px/23px Open Sans;
    }

    #paywall>.subscription.active>.subscription-inner>.subscription-full>.subscription-info {
        font: normal normal normal 13px/21px Open Sans;
    }
}