* {--c-gold: #DBAD6A;}
.gold-bg {background-color: var(--c-gold);}

header {
    display:block;width:100%;height:100%;overflow: hidden;
    position:fixed;z-index:2;height:100vh;
}
.in-grid {display: inline-grid !important;}
.transparent-head-help {
    height:calc(150vh + 400px);padding: 0 !important;width:100%;background: transparent;z-index: 1;position:relative;
}
.over-header {z-index: 10;position:relative;}
.scaleIn {transition: filter 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;}
.header-plus-over {position:absolute;top:0;left:0;width:100%;height:100%;overflow: hidden;z-index:2;}
.header-bg {
    position:relative;display:block;width:100%;height:100%;object-fit: cover;
    z-index: 1;
}
#firefly {
    position:absolute;width:100%;height:100%;z-index:100;
}

.s-tra {opacity: 0.7;}

@keyframes plus-appear {
    from {top: -20%;opacity:0;}
    to {top: 0;opacity:1;}
}
@keyframes plus {
    0%{transtransform:translateY(0px)}
    50%{transform:translateY(-10px)}
    100%{transform:translateY(0px)}
}
@keyframes plus-shake {
    0%{transform:translateX(0px)}
    50%{transform:translateX(-10px)}
    100%{transform:translateX(0px)}
}
@keyframes glow-appear {
    0% {opacity:0;}
    100% {opacity:0.5;}
}
@keyframes plus-glow {
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes bfade {
    from{transform: translate(-50%, 20px);opacity:0;}
    to{transform: translate(-50%, 0px);opacity: 1;}
}
@keyframes fog {
    0% {transform: translateX(-30px);opacity: 0;}
    50% {transform: translateX(0px);opacity: 1;}
    100% {transform: translateX(30px);opacity:0;}
}


.waiting-left {transform: translateX(-10%);opacity:0;transition: all 0.4s ease-in-out;}
.waiting-right {transform: translateX(10%);opacity:0;transition: all 0.4s ease-in-out;}
.from-left {transform: translateX(0%);opacity:1;}
.from-right {transform: translateX(0%);opacity:1;}

header img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.bg-effect {position:relative;display:block;width:100%;height:100%;overflow:hidden;}
.bg-layer {
    position:absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;
    display:block;object-position: center bottom;
}
.layer-1 {z-index: 1;}.layer-2 {z-index: 3;}.layer-3 {z-index: 5;}.layer-4 {z-index: 4;}
.layer-1 {
    background: linear-gradient(to top, #b1684d 50%, #c9bd66);
    /*c9bd66*/
}
.layer-3 {
    transform: scale(1.3);transition: transform 0.6s ease-in-out, opacity 0.4s ease-in-out;opacity: 0;
    transform-origin: top center;
}
.loaded-characters {transform: scale(1);opacity: 1;}
.layer-4 {
    animation: 
        plus-appear 1.5s ease-in-out 0.5s forwards,
        plus 5s ease-in-out 2s infinite;
}

.bottom-float {
    position:absolute;bottom: 5%;left:50%;transform:translate(-50%, 100px);opacity: 0;
    text-align: center;z-index:10;animation: bfade 1s ease-in-out 1.5s forwards;
}

h3, h4 {line-height: 1.25;}

h1 {display: inline-block;}
h1 font, h3 font {position: relative;z-index: 3;}

.cube {
    position:absolute;z-index: 1;background-color: var(--c-gold);display:block;
    transform: scale(0) !important;transition: all 0.5s ease-in-out;
}
.cube-appear {transform: scale(1) !important;}

.c1 {bottom: -3.25vh;left:-1vh;height:3vh;width:3vh;}
.c2 {bottom: -2.75vh;left:3vh;height:1.5vh;width:1.5vh;}
.c3 {bottom: 1.15vh;left:-4vh;height:2vh;width:2vh;}
.c4 {top: 2.5vh;left:1vh;height:1vh;width:1vh;}
.c5 {top: -2vh;left:3vh;height:2vh;width:2vh;}
.c6 {top: -2vh;left:6vh;height:1vh;width:1vh;}


.b1 {bottom: 8vh;right: 0vh;height:5vh;width:5vh;}
.b2 {bottom: -2vh;right: -6vh;height:2vh;width:2vh;}
.b3 {bottom: 12vh;right: -4.5vh;height:2.5vh;width:2.5vh;}
.b4 {top: -3vh;left: -1vh;height:2vh;width:2vh;}
.b5 {top: -4vh;left: -3vh;height:1vh;width:1vh;}
.b6 {top: 0.5vh;left: -4vh;height:3vh;width:3vh;}
.b7 {bottom: -0vh;right: 2vh;height:2vh;width:2vh;}
.b8 {bottom: -2vh;right: 12vh;height:1.5vh;width:1.5vh;}


.p1 {top: -6vh;left: 0;height: 5vh;width:5vh;}
.p2 {top: -2vh;left: -6vh;height: 5vh;width:5vh;}
.p3 {top: -5.5vh;left: -4vh;height: 3vh;width:3vh;}
.p4 {bottom: -4vh;right: 0;height: 3vh;width:3vh;}
.p5 {bottom: -2vh;right: -6vh;height: 5vh;width:5vh;}



#s1 {background-color: var(--c-dgray);z-index:2;text-align: center;}
#s2 {background-color: var(--c-gray);padding-top: 20vh;padding-bottom: 20vh;z-index:1;position:relative;overflow: hidden;}
#s3 {background-color: var(--c-dgray);text-align: center;z-index:5;position:relative;}
#s4 {background-color: var(--c-gold);z-index:5;}
#s5 {background-color: var(--c-dgray);z-index:5;}

#s1 .increase-line {width: 50%;margin-left: 25%;}
#s1 h3.inline {margin-left: 2vw;}
#s1 a font {margin: -0.25vh 0 0 0;}
#s5 h1 {text-align: center;display:block;}


.sin-effect {
    transform: scale(5);opacity:0;color: var(--c-gold);
    transition: all 0.2s ease-in-out;position:relative;display: inline-block;
}
.sin-effected {
    transform: scale(1);opacity:1;color: var(--c-white);
}

.separator {
    position:absolute;bottom:0;left:0;width:100%;height:auto;display:block;
}
.separator-top, .separator-bottom {
    width:100%;display:block;position:absolute;left:0;bottom: -1px;z-index: 997;
}
.separator-top {transform: rotateX(180deg);top:-1px;bottom: auto;}

.circle-bottom {
    position:absolute;left: calc(50% - 16vh - 8px);bottom: calc(-16vh - 8px);
    height: calc(32vh + 8px);width:calc(32vh + 8px);background-color: var(--c-white);
    border-radius: 100%;border: solid 4px var(--c-blue);

    display: none;
}
.plus-circle {
    position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
    z-index: 10;height: 10vh;display: block;
}
.circle-bottom::before {
    position:absolute;top: 50%;left:50%;transform: translate(-50%, -50%);
    height: calc(30vh + 8px);width:calc(30vh + 8px);content:"";border: solid 4px var(--c-bg);
    border-radius: 100%;z-index: 4;background-color: var(--c-blue);
}


.side-g-1 {grid-template-columns: 40% 50%;column-gap: 10%;} 
.side-g-2 {grid-template-columns: 50% 40%;column-gap: 10%;} 
.side-g-1 .in-grid, .side-g-2 .in-grid {align-items: center;}

.pad-showcase {padding: 15vh 0;overflow: visible;z-index: 10;}
.highlighted-grid {transform: skewY(10deg);}
.highlighted-grid .in-grid {
    background-color: var(--c-gold);height: 15vh;
    box-shadow: 3px 3px 5px 0 rgba(50,50,50,0.5);
}
@keyframes show-grid {
    from {transform: scale(1.1);}
    to {transform: scale(1);}
}
.appear-l {background-color: var(--c-gold);transform: scale(1.1);opacity: 0;transition: opacity 0.8s ease-in-out;}
.appear-anim {opacity: 1;animation: show-grid 0.8s ease-in-out forwards;}
.all-gro:nth-child(1) {z-index: 100;}
.all-gro:nth-child(2) {opacity: 0.8;}
.all-gro:nth-child(3) {opacity: 0.7;}
.appear-anim:nth-child(4) {opacity: 0.6;}
.appear-anim:nth-child(5) {opacity: 0.5;}
.appear-anim:nth-child(6) {opacity: 0.4;}
.appear-anim:nth-child(7) {opacity: 0.3;}
.appear-anim:nth-child(8) {opacity: 0.2;}

.pad-showcase .in-grid {overflow: visible;}
.glowbottom::before {
    content: "";position:absolute;background-color: var(--c-gold);
    top: 80%;left:0;width:100%;height:100%;opacity: 0.6;
    transform: perspective(03em) rotateX(60deg) scale(0.8, 0.4);
    filter: blur(2em);transition: all 0.2s ease-in-out;
}
.glowbottom:hover::before {opacity: 1;}


#s3 {text-align: center;padding: 10% 5%;position:relative;overflow: hidden;}
.perks-title {
    font-size: 8vh;line-height:1;
    margin-bottom: 10vh;display: inline-block;
}
.perks-title font {display:block;}
.eff-1 {text-align: left;color: var(--c-gold);z-index:3;opacity: 1;}
.eff-2 {
    text-align: right;margin: -5vh 0 0 10vh;
    z-index:2;opacity: 0.3;color: white;
    -webkit-text-fill-color: var(--c-dgray);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

.movefromtop {margin-top: 40vh;}

.feature-shown {display: inline-block;max-width: 1500px;text-align: center;}
.feature-promo, .feature-content {display:inline-block;width:47.5%;vertical-align: middle;}
.feature-promo img {width: 100%;}
.right-content {text-align: left;margin-left: 5%;}
.left-content {text-align: right;margin-right: 5%;}
.extra-title-font {font-size: 6vh;line-height: 1;margin-bottom: 4vh;}

.center-content {display:block;width:100%;margin: 0;text-align: center;z-index: 10;}

.fullfeature {max-width: 100%;width:100%;display:block;padding: 8% 0 8% 0;margin-top: 10vh;}
.float-around {
    position:absolute;padding: 0.5vh 1vh;background-color: var(--c-gold);
    z-index: 10;text-align: left;white-space: nowrap;
}
.feat-1 {top: 0;left:50%;}
.feat-2 {top: 10%;left:60%;}
.feat-3 {top: 20%;left:65%;}
.feat-4 {top: 30%;left:60%;}
.feat-5 {top: 40%;left:50%;}


.pattern {
    position:absolute;top:0;left:-10vw;width:120vw;height:100%;z-index: 1;
}
.pattern-in {
    position:relative;display:block;width:100%;overflow: hidden;
}
@keyframes pattern-1{
    from{-webkit-transform:translateX(-100%);transform:translateX(-100%);}
    to{-webkit-transform:translateX(0);transform:translateX(0);}
}
@keyframes pattern-2{
    from{-webkit-transform:translateX(0%);transform:translateX(0%);}
    to{-webkit-transform:translateX(-100%);transform:translateX(-100%);}
}
.pattern font {
    font-size: 20vh;display:block;white-space :nowrap;
    color: rgb(20,20,20);opacity: 0.5;
}
.pattern .ps1 font {animation: pattern-1 300s linear infinite;}
.pattern .ps2 font {animation: pattern-2 300s linear infinite;}
.smaller-box {display: inline-block;width: 50%;}
.part-button {
    border: solid 4px var(--c-gold);background: transparent;
    margin-top: 4vh;color: var(--c-gold);cursor: pointer;
    transition: color 0.2s ease-in-out;
}
.part-button::before {
    position:absolute;top:0;left:0;width:100%;height:0%;content: "";
    transition: height 0.2s ease-in-out;background-color: var(--c-gold);
}
.part-button:hover {color: var(--c-white);}
.part-button:hover::before {height:100%;}


#s4 {text-align: center;background-color: var(--c-gold);padding: 0;width:100%;}
.get-grid {grid-template-columns: 60% 40%;column-gap: 0;row-gap: 0;}
.left-side-get {background: black;}
.left-side-get div {
    position:relative;display:block;width:100%;height:100%;
    background: url('../assets/plus/full.png?v=2');background-size: cover;
    background-position: center bottom;
}
.right-side-get {
    background-color: var(--c-gold);text-align: left;
    padding: 15% 10%;align-self: center;
}
.ord-title {font-size: 7vh;}
.plus-price {margin: 10% 0;}
.plus-price h1 {font-size: 8vh;line-height: 1;}
.plus-price h4 {font-size: 2.5vh;line-height: 1;}

.existing-plus {font-size: 3vh;}
.existing-plus img {height: 3.5vh;margin-right: 1vh;}
.existing-plus font, .existing-plus img {display: inline-block;vertical-align: middle;}
.existing-plus font {margin-top: -0.5vh;}

.faq-section {width: 80%;margin: 5% 0 0 10%;background-color: var(--c-dgray);}
details {width:100%;display:block;margin-bottom: 2vh;}
summary {padding: 1vh 2vh;background-color: #1e1e1e;}
summary h3 {vertical-align: middle;margin-top: -0.5vh;}
details p {padding: 1vh;text-align:left;}

@media (max-width: 980px) and (orientation: portrait) {
    header {height: calc(100% - 6vh);}
    #s1 .increase-line {width: 90%;margin-left:5%;}
    .split-top {top: -1px;}
    .feature-in {width: 90%;padding: 0 5%;}
    .special-title, .extra-title-font {font-size: 5vh;}
    .left-feature, .right-feature, .swap-upgrades .right-feature {
        margin-left: 0;margin-right:0;width:100%;display:block;
        text-align: center;
    }
    .swap-upgrades .left-feature {display: none;}
    .faq-section {width: 90%;margin: 5% 0 0 5%;}
    .highlighted-grid .in-grid {height: 10vh;}

    .movefromtop {margin-top: 20vh;}

    .layer-2 {transition: all 0.1s ease-in-out;}
    .transparent-head-help {height:calc(100vh + 200px);}
    .orscd {margin-top: 2vh;margin-left: 0 !important;display:block;}

    .feature-promo, .feature-content {display:block;width:100%;margin: 0 !important;}
    .feature-content {text-align: center !important;}
    .feature-promo img {height: 30vh;width: auto;}

    .smaller-box {width: 90%;}

    .get-grid {grid-template-columns: 100%;}
    .left-side-get {display: none !important;}
    .ord-title {line-height: 1;}

    .feat-1 {top: 0;left:50%;}
    .feat-2 {top: 20%;left:60%;}
    .feat-3 {top: 40%;left:65%;}
    .feat-4 {top: 60%;left:60%;}
    .feat-5 {top: 80%;left:50%;}
}
@media (max-aspect-ratio: 1/1) {
    .layer-4 {margin-top: -8%;}
}
@media (max-aspect-ratio: 3/1) {
    .layer-4 {margin-top: -5%;}
}



.w-logo .logo-text .blue {color: var(--c-white);}
.pfin-header {
    width:100%;height:100%;background-color: var(--c-dgray);
}
.plus-confirm {
    bottom: 0;right: 5%;height: 85%;display:block;position:absolute;
}
canvas {width:100%;height:100%;}

.confirm-text {
    position:absolute;top:50%;left:10%;z-index: 100;width: 60%;
    text-align: center;transform: translateY(-50%);
}
.pfin-header .orscd {margin: 0 4vh;}
.center-confirm {
    left: 50%;top:50%;transform: translate(-50%, -50%);
    position:absolute;text-align: center;width: 90%;
}


@media (max-width: 980px) and (orientation: portrait) {
    .plus-confirm {right: 50%;height: 60%;transform: translateX(50%);}
    .confirm-text .extra-large {margin-bottom: 2vh;}
    .confirm-text {
        top: 20%;transform: none;left: 5%;width: 90%;
    }
    .pfin-header .orscd {margin: 1vh 0;}

    .center-confirm {left: 50%;top:50%;transform: translate(-50%, -50%);}
}