/* [SEC 1.]The font face styles are there so I can load the fonts locally; 
no need to reupload them on the server. Just delete all the font-face styles here and 
remove the [added]font folder as well. */

@font-face {
    font-family: pancettapromedium;
    src: url('../../fonts/Pancetta.Pro.Medium.otf') format('opentype');
    font-display: swap
}

@font-face {
    font-family: pancettaproregular;
    src: url('../../fonts/Pancetta Pro Regular.otf') format('opentype');
    font-display: swap
}

@font-face {
    font-family: pancettaprolight;
    src: url('../../fonts/Pancetta.Pro.Light.otf') format('opentype');
    font-display: swap
}

@font-face {
    font-family: pancettaprosemibold;
    src: url('../../fonts/Pancetta.Pro.SemiBold.otf') format('opentype');
    font-display: swap
}

/* [SEC 1.] */

/* [SEC 2.] These are the styles that were in the main page before and I added them here instead */

.helpText {
    background-color: white;
    padding: 10px 20px;
    text-align: center;
    margin-bottom: 10px;
}

.best {
    color: #606;
}

.payList {
    width: 100%;
}

.payList .payDetails {
    color: white;
    margin-bottom: 20px;
}

.payList .payDetails ul li {
    float: left;
    width: 50%;
    padding: 0px 10px 10px 10px;
    text-align: left;
}

.payList .payElement {
    float: left;
    padding: 0px 10px 10px 10px;
    width: 33%;
    /* width: 25%; */
    color: white;
}

.payList .payElement h3 {
    font-size: 23px;
}

.payList .payElement ul {
    list-style-type: none;
    padding: 0px;
}

.payList .payElement ul li {
    margin-bottom: 5px;
}

.payList .payElement ul li:last-child {
    margin-top: 10px;
}

@media screen and (max-width: 1100px) {
    .payList .payElement {
        width: 50%;
    }

    .payList .payDetails ul li {
        width: 50%;
        padding-right: 30px;
    }
}


@media screen and (max-width: 700px) {
    .payList .payElement {
        width: 100%;
    }

    .payList .payDetails ul li {
        width: 100%;
        padding-right: 10px;
    }
}

/* [SEC 2.] */

/* [SEC 3.] Styles of promoion banner on the bottom of the page  */

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

.promotionBanner {
    color: rgb(242, 242, 55);
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(102, 0, 102, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(102, 0, 102, 1) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(102, 0, 102, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#660066", GradientType=1);
    width: 100vw;
    position: fixed;
    bottom: 0;
    height: 6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    box-shadow: rgba(255, 255, 255, 0.16) 0px 10px 36px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
    z-index: 9999;
    animation: bannerMoveUp 1s ease-out 2.5s backwards;
}

.campaignText {
    font-family: pancettaprosemibold;
    margin-left: 2rem;
    padding-left: 2rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 50vw;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #606;
    transform: skew(-40deg);
    border-left: 2rem double rgb(55, 5, 55);
}

.campaignText>* {
    transform: skew(40deg);
}

.campaignText h1 {
    font-size: 2rem;
    border-radius: 15px;
    margin-top: 10px;
    background-color: #606;
    padding: 5px 20px;
    color: rgb(242, 242, 55);
}

.campaignText p {
    margin-top: -10px;
    font-size: 1.6rem;
}

.campaignTextMobile {
    font-family: pancettaprosemibold;
    margin-left: 2rem;
    padding-left: 2rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 50vw;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #606;
    transform: skew(-40deg);
    border-left: 2rem double rgb(55, 5, 55);
}

.campaignTextMobile>* {
    transform: skew(40deg);
}

.campaignTextMobile h1 {
    font-size: 2rem;
    border-radius: 15px;
    margin-top: 10px;
    background-color: #606;
    padding: 5px 20px;
    color: rgb(242, 242, 55);
}

.campaignTextMobile p {
    margin-top: -10px;
    font-size: 1.6rem;
}

.consentBannerParent {
    padding: 0px;
}

@keyframes bannerMoveUp {
    0% {
        margin-bottom: -6rem;
    }

    100% {
        margin-bottom: 0;
    }
}

#clockdiv {
    background-color: #000000;
    transform: skew(-40deg);
    width: 50vw;
    font-family: pancettaprosemibold;
    font-size: 4rem;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    font-weight: 100;
    text-align: center;
    height: 100%;
    padding: 10px;
    bottom: 0;
    padding-top: 1.5rem;
}

#clockdiv>* {
    transform: skew(40deg);
}

#clockdiv>div {
    padding: 2px;
    display: inline-block;
    margin: 5px 10px;
}

#clockdiv div>span {
    padding: 2px;
    border-radius: 3px;
    display: inline-block;
    font-weight: 900;
}

#clockdiv>div:nth-child(2) {
    width: 10rem;
}

/* [SEC 3.1] Making the banner responsive */

@media (max-width: 786px) {
    .campaignText {
        display: none;
    }

    .campaignTextMobile {
        display: flex !important;
    }

    #clockdiv {
        font-size: 3.5rem;
    }
}

@media (max-width: 484px) {
    .campaignTextMobile .longTag {
        display: none !important;
    }

    .campaignTextMobile .shortTag {
        display: flex !important;
    }

    #clockdiv {
        font-size: 3.0rem;
    }

    #clockdiv>div {
        margin: 0px 2px;
    }
}


@media (max-width: 401px) {

    .campaignTextMobile h1 {
        margin-left: -2rem;
    }

    .campaignTextMobile .veryShortTag {
        display: flex !important;
    }

    .campaignTextMobile .shortTag {
        display: none !important;
    }

    #clockdiv {
        font-size: 2.5rem;
    }

    #clockdiv>div {
        margin: 0px 0px;
    }
}

/* [SEC 4.1] Styles of pricing plan header section */

.plans-header {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
}

.plans-header-bg-image {
    width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    height: 35rem;
    filter: blur(4px);
    position: relative;
    z-index: -1;
}

.plans-header-bg-image img {
    width: 100%;
}

.plans-header-title-main-layer {
    display: flex;
    width: 50%;
    background-color: rgba(102, 0, 102, 0.757);
    transform: skew(-35deg);
    height: 170px;
    margin-top: -10rem;
    animation: moveLeft 1s ease-out 0s forwards;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: -26rem;
}

.plans-header-title-main-layer h1 {
    line-height: 4rem;
    color: white;
    font-family: pancettaprosemibold;
    font-size: 5rem;
    margin-left: 60px;
    transform: skew(35deg);
    animation: textFadeIn 2s 0.5s backwards;
}

.plans-header-title-main-layer h2 {
    line-height: 4rem;
    color: white;
    font-family: pancettaprosemibold;
    font-size: 7rem;
    margin-left: 60px;
    transform: skew(35deg);
    animation: textFadeIn 2s 0.7s backwards;
}

@keyframes moveLeft {
    0% {
        margin-right: -100rem;
    }

    /* 
    100% {
        margin-right: -26rem;
    } */
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.plans-header-title-second-layer {
    display: flex;
    width: 50%;
    background-color: rgba(102, 0, 102, 0.757);
    transform: skew(-35deg);
    height: 170px;
    margin-top: -10rem;
    animation: moveLeft 1.1s ease-out 0s forwards;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: -20rem;
    margin-bottom: -7rem;
}

.plans-header-title-first-layer {
    display: flex;
    width: 50%;
    background-color: rgba(102, 0, 102, 0.757);
    transform: skew(-35deg);
    height: 170px;
    margin-top: -10rem;
    animation: moveLeft 1.1s ease-out 0s forwards;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: -23rem;
    margin-bottom: -7rem;
}

/* [SEC 4.2] Pricing plan body section  */

* {
    --heightOfButton: 120px;
}

.plan-info {
    color: aliceblue;
    position: relative;
    z-index: 99;
    margin-top: 165px;
}

.plan-info h1 {
    font-family: pancettaprosemibold;
    font-size: 4rem;
}

.plan-info p {
    font-family: pancettaprolight;
    font-size: 2rem;
}

.plans-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-bottom: 50px;
    margin-top: 20px;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    margin-top: -190px;
}

.plan-coupon {
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.plan-coupon form input {
    padding: 20px 30px;
}

.plan-coupon form button {
    margin-top: 15px;
    padding: 10px 25px;
    color: white;
    background-color: #792b79;
    border-color: black;
}

.plan-coupon form button:hover {
    background-color: #606;
    border-color: black;
    color: white;
}

.plan {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: -35px;
    margin-bottom: -60px;
}

.plan-brand {
    margin-right: auto;
    font-family: pancettaprosemibold;
    font-size: 20rem;
    color: #4d014d59;
    width: 200px;
    text-align: left;
}

.plan-title-price {
    display: flex;
    flex-direction: column;
    align-items: end;
    font-family: pancettapromedium;
}

.plan-title {
    font-size: 5rem;
    margin-left: -40px;
    margin-bottom: -20px;
    color: aliceblue;
}

.plan-price span {
    font-size: 7rem;
    color: #792b79;
}

.plan-price s {
    display: none;
    font-size: 3rem;
    color: gray;
}

.plan-price em {
    display: none;
    font-size: 4rem;
    color: #792b79;
}

.plan-button {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2rem;
    margin-right: 2rem;
}

.plan-underlayer {
    height: var(--heightOfButton);
    width: 100%;
    background-color: #4d014d59;
    position: relative;
}

.skew-30 {
    transform: skew(20deg);
}

.skew-50 {
    transform: skew(40deg);
    margin-top: calc(var(--heightOfButton)*(-1))
}

.skew-70 {
    transform: skew(-20deg);
    margin-top: calc(var(--heightOfButton)*(-1))
}

.skew-70:hover {
    animation: skewTranform 10s 1s infinite;
}

.skew-50:hover {
    animation: skewTranform 15s 1s infinite;
}

.skew-30:hover {
    animation: skewTranform 12s 1s infinite;
}

.plan-button-text {
    position: relative;
    z-index: 99;
    margin-top: calc(var(--heightOfButton)*(-1));
    margin-left: 3rem;
    margin-right: 3rem;
    color: aliceblue;
    text-align: center;
    font-family: pancettapromedium;
    text-decoration: none;
}

.plan-button-text:hover h1 {
    text-decoration: none !important;
}

.plan-button-text h1 {
    font-size: 6rem;
    margin-top: -12px;
}

.plan-button-text h2 {
    font-size: 3rem;
}

@keyframes skewTranform {
    0% {
        transform: skew(20deg)
    }

    33% {
        transform: skew(40deg);
    }

    66% {
        transform: skew(-30deg);
    }

    100% {
        transform: skew(20deg);
    }
}

.plan-description {
    font-family: pancettaproregular;
    font-size: 2rem;
    color: aliceblue;
    list-style-type: none
}

.plan-description i {
    color: #792b79;
    margin-right: 10px;
}

/* [SEC 4.3] Responsive */

@media (max-width: 1320px) {

    .plans-header-title-first-layer,
    .plans-header-title-second-layer,
    .plans-header-title-main-layer {
        display: none;
    }
}

@media (max-width: 1225px) {

    .plan {
        padding-left: 40px;
        padding-right: 40px;
    }

    .plan-description {
        display: flex;
        flex-direction: row;
        order: 2;
        margin-top: -61px;
        margin-bottom: 90px;
        gap: 10px;
        justify-content: space-between;
    }

    .plan-description i {
        display: none;
    }

    .plan-description li {
        border: #606 solid 1px;
        padding: 5px;
        border-radius: 10px;
        font-size: 1.5rem;
        text-align: center;
    }

    .plan-info {
        padding-left: 40px;
        padding-right: 40px;
    }

    .plan-button {
        flex-grow: 0;
    }

    .plan-title-price {
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        text-align: center !important;
    }

    .plan-title {
        margin-left: 0px
    }
}

@media (max-width: 910px) {

    .plan-title-price {
        flex-grow: 0;
    }

    .plan-brand {
        display: none;
    }

    .plan {
        margin-top: 30px;
    }

    .plan-description {
        margin-top: 0px;
    }

}

@media (max-width: 710px) {

    .plan-title-price {
        order: 1;
    }

    .plan-title-price::after {
        content: " ";
        order: 1;
        width: 30px;
    }

    .plan-button {
        order: 2;
    }

    .plan-description {
        flex-direction: column;
        order: 3;
        margin-top: 10px;
        margin-bottom: 10px;
        gap: 10px;
        justify-content: space-between;
    }

    .plan-description li {
        border: none
    }

    .plan {
        border: #606 solid 1px;
        margin-left: calc(100vw - 3%);
        margin-right: calc(100vw - 3%);
        margin-top: 85px;
        padding-top: 30px;
        padding-bottom: 30px;
        box-shadow: rgba(240, 240, 248, 0.2) 0px 7px 29px 0px;
    }

    .plan-underlayer{
        display: none;
    }

    .plan-button-text h1,
    .plan-button-text h2{
        font-size: 2rem !important;
    }

    .plan-button-text{
        margin-top: 0px
    }

    .plan-title {
        line-height: 4rem;
        margin-bottom: 10px;
    }

    .plan-button{
        border: #606 solid 1px;
        border-radius: 10px;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .plan-info {
        margin-top: 70px;
        margin-bottom: -40px;
    }

}