/*SECTION 4 - SUBSCRIPTION*/
.lpg-block.subscriptions .subscription .row{
    text-align: center;
}
.lpg-block .white-box-red,
.lpg-block .white-box-blue{
    border: none!important;
}
.lpg-block.subscriptions .white-box-blue{
    min-height: 430px;
    border-radius: 10pt;
    background-color: var(--midnight-blue);
    background-image: var(--doodle-light-20-image);
    margin-top: 0;
    border: none;
}
.lpg-block.subscriptions .white-box-red{
    min-height: 470px;
    border-radius: 10pt;
    background-color: var(--strawberry);
    background-image: var(--doodle-dark-20-image);
    margin-top:-20px;
    border: none;
}
.lpg-block.subscriptions .current-plan {
    filter:grayscale(100%);
}
.lpg-block.subscriptions .flip-card-back .white-box-red {
    background-color: var(--midnight-blue);
    background-image: var(--doodle-light-20-image);
}
.lpg-block.subscriptions .flip-card-back .white-box-blue {
    background-color: var(--strawberry);
    background-image: var(--doodle-dark-20-image)
}
.lpg-block.subscriptions .white-box-blue h2 {
    padding-top: 43px;
    color: var(--strawberry)!important;
}
.lpg-block.subscriptions .white-box-red h2 {
    padding-top: 43px;
    color: var(--white)!important;
}
.lpg-block.subscriptions .flip-card-back .white-box-blue h2 {
    color: var(--midnight-blue)!important;
}
.lpg-block.subscriptions .white-box-red h3,
.lpg-block.subscriptions .flip-card-back .white-box-blue h3
{
    text-transform: uppercase;
    font-size: 16pt;
    color: white !important;
    margin-top: 10px!important;
}
.lpg-block.subscriptions .flip-card-back .white-box-blue h3
{
    color: var(--midnight-blue) !important;
}
.lpg-block.subscriptions .white-box-blue h3 {
    text-transform: uppercase;
    font-size: 16pt;
    color: var(--strawberry)!important;
    height: 60px;
}
.lpg-block.subscriptions .white-box-blue h1,
.lpg-block.subscriptions .white-box-red h1 {
    margin-top: 26px;
    color:white!important;
}
.lpg-block.subscriptions .white-box-blue .strike,
.lpg-block.subscriptions .white-box-blue .discounted,
.lpg-block.subscriptions .white-box-red .strike,
.lpg-block.subscriptions .white-box-red .discounted {
    font-size: 50pt!important;
    font-family: 'Recoleta', serif;
    color: var(--white)!important;
}
.lpg-block.subscriptions .white-box-blue p,
.lpg-block.subscriptions .white-box-red p{
    min-height: 115px ;
}
.lpg-block.subscriptions .flip-card-front .white-box-blue h1 {
    color:var(--strawberry)!important;
}
.lpg-block.subscriptions .flip-card-back .white-box-blue h1 {
    color:var(--midnight-blue)!important;
}
.lpg-block.subscriptions .full-price-wrapper {
    text-align:right;
    overflow:hidden;
    position: relative;
}
.lpg-block.subscriptions .discounted-wrapper {
    text-align:left;
}
.lpg-block.subscriptions .full-price {
    font-family: 'Recoleta', serif !important;
    opacity: 0.6;
    position: absolute;
    top:0;
    left:0;
    font-size: 50pt!important;
    color: var(--white)!important;
    width:100%;
    height:100%;
    text-align: right;
    display: block;
}
.lpg-block.subscriptions .slash {
    position: absolute;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
    top: 40%;
    left: 55%;
    width: 100px;
    height: 0;
    display: block;
    border-top: 8px solid var( --white);
}
/*
.lpg-block.subscriptions .strike:after{
    font-size: 100px;
    content: "\/";
    padding-right: 60px;
    margin-left: -80px;
    display: inline-block;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}
 */
.lpg-block.subscriptions .discounted {
    font-family: "Flama",sans-serif;
    color: white;
}
.lpg-block.subscriptions .subscription .btn{
    margin-top: 15px;
    margin-bottom: 25px;
    background-color:var(--strawberry);
    border:none;
}
.lpg-block.subscriptions .subscription .flip-card-back .btn{
    padding: 10px 30px;
    margin-top: 15px;
    margin-bottom: 25px;
    background-color:var(--midnight-blue);
    border:none;
}
.lpg-block.subscriptions .subscription .btn.btn-primary,.lpg-block.subscriptions .subscription .btn.btn-primary:hover{
    padding: 10px 30px;
    background-color:white;
    color:var(--strawberry) !important;
}
.lpg-block.subscriptions .subscription .flip-card-back .btn.btn-primary,
.lpg-block.subscriptions .subscription .flip-card-back .btn.btn-primary:hover{
    background-color:white;
    color:var(--midnight-blue) !important;
}
.lpg-block.subscriptions .white-box-red button{
    margin-top: 35px!important;
}
.lpg-block.subscriptions .currency{
    text-align: left;
    margin-top: 22px;
    opacity: 0.4;
    font-family: "Flama", sans-serif !important;
    font-weight: normal;
    line-height: 36px;
}
.lpg-block.subscriptions .selector {
    margin-top:25px;
    text-align: center;
}
.lpg-block.subscriptions .promotion-text {
    position: absolute;
    top:-25px;
    right:30px;
    width:40%;
}
.lpg-block.subscriptions .promotion-text img {
    width:100%;
}
section.lpg-block.subscriptions .container{
    position: relative;
}
.lpg-block.subscriptions .slider-label {
    position: relative;
    top:-40px;
    margin-bottom: 50px;
}
.lpg-block.subscriptions .slider-label .slider-monthly{
    margin-right: 140px;
    margin-top: 0;
    font-size:var(--font-s) !important;
}
.lpg-block.subscriptions .slider-label .slider-annual{
    margin-left: 130px;
    margin-top: -46px;
    font-size: var(--font-s) !important;
}
.lpg-block.subscriptions .flip-card-front .white-box-blue h5{
    color:var(--strawberry)!important;
    text-align: center;
}
.lpg-block.subscriptions .white-box-red h5 {
    color:white!important;
    text-align: center;
}
.lpg-block.subscriptions .flip-card-back .white-box-blue h5 {
    color:var(--midnight-blue) !important;
    text-align: center;
}
/* flip cards source: https://www.w3schools.com/howto/howto_css_flip_card.asp */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    height: 460px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-flipped {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

/* Style the back side */
.flip-card-back {
    transform: rotateY(180deg);
}

/*switch*/
.selector input.lp-switch-checkbox {
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 44px!important;
    height: 24px!important;
    background-color: var(--midnight-blue)!important;
    border-radius: 50px !important;
    top:-10px;
}
.selector input.lp-switch-checkbox:after {
    content: "";
    position: absolute;
    left: 1px;
    background: white;
    border: 1px solid var(--midnight-blue) !important;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: all 0.3s linear;
}
.selector input.lp-switch-checkbox:checked {
    border-color: var(--strawberry);
    background-color: var(--strawberry);
    background-position: 5px !important;
}
.selector input.lp-switch-checkbox:checked:after {
    left: 21px;
    border-color: var(--strawberry);
    transition: all 0.3s linear;
}
.selector input.lp-switch-checkbox:active:after {
    width: 16px;
    margin-left: 3px;
    margin-right: 3px;
    transition: all 0.3s linear;
}

/* additions for dynamic price and plans beta */
.promotion-text-label {
    transform: rotate(-5deg);
    color: var(--purple-rain);
    font-family: 'Bad Script', serif;
    width: 320px;
    max-width: 25vw;
    font-size: 18px;
    line-height: normal;
}
.promotion-text-label::after {
    width: 60px;
    height: 60px;
    display:block;
    content:' ';
    background-image: url(/wp-content/plugins/landing-page-generator/images/topmusic-2021/arrow-swirl-dark.svg);
    background-repeat: no-repeat;
    background-size:contain;
    position: absolute;
    top:0;
    left:-60px;
    transform: rotate(29deg);
}
@media only screen and (min-width: 1300px) {
    .promotion-text-label::after {
        left: 15px;
    }
}