@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
html, body {font-family: 'Work Sans', sans-serif;min-height: 100%;height:100%;}
body.change-overflow {overflow:hidden;}
* {outline:0;}
a:hover, a:active, a:focus {text-decoration: none;}
a, button {
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
}
h1, h2, h3, h4, h5 {font-weight: 900;}

ul {margin:0;padding:0;list-style-type: none;}
.mobile-visible {display:none;}
.tablet-visible {display:none;}
.justify-content-center {justify-content: center;}
.pad-none {padding:0;}
.full {width:100%;}
.table-content {display: table;  width: 100%;  height: 100%;}
.table-cell-content {display: table-cell; vertical-align: middle;}
.animation-- {-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;  }
.animation-one {-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;  }
.anim1 {-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;  }
.anim2 {-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
.fl-right {float:right;}
.height-fix {height:100%;}
.h-fix {height:100%;}
.height-very {height:80%;}
.stream-iframe {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;width:100%;}
.stream-iframe iframe, .stream-iframe img {position:absolute;top:0;left:0;width:100%;height:100%;}
.stream-iframe .player {background:transparent !important;}
.grayscale img, .grayscale iframe {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.grayscale img:hover {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
.js-marquee {margin:0 !important;}
.inline-block {display:inline-block}
.padArea {padding:0 120px}
.marginSec {margin:100px 0;}
.cursorP {cursor:pointer;}

.fitCont {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.fitCont:after{
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.m-visible {display:none;}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 12px;
    padding-left: 12px;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}
body {background: #6A0DAD;}
body.home {background: #690da6;}
header {padding:35px 0;margin-bottom: 30px;}
header .logo {max-width: 176px;}
header nav {height:100%;}
header nav ul {display: flex;}
header nav ul li {margin:0 12px;}
header nav ul li a {
    padding:5px;
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: all 0.3s ease-in;
    position: relative;
}
header nav ul li a:hover {
    color: #FFC857;
}
header nav ul li a:hover:after {
    opacity: 1;
}
header nav ul li a:after {
    content:"";
    width: 5px;
    height: 5px;
    display: block;
    background: #FFC857;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 2.5px);
    margin-top: 4px;
    opacity: 0;
    transition: all 0.3s ease-in;
}

.toggle-container {
    position: relative;
    width: 66px;
    height: 29px;
    background-color: #BB86FC;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease;
}

.toggle-circle {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background-color: #6A0DAD;
    border-radius: 50%;
    transition: left 0.3s ease;
}

.toggle-container .text {
    z-index: 1;
    color: #6A0DAD;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    margin-left: 17px;
}



.toggle-container.active .toggle-circle {
    left: 45px;
}

.toggle-container.active .text {
    margin-left: -10px;
}

header a.loginButton {transition: all 0.3s ease-in;background: #F3A70B;padding: 10px 30px;border-radius: 28px;color: #6A0DAD;text-align: center;font-size: 16px;font-weight: 600;margin-right:24px;border: 1px solid #F3A70B;}
header a.loginButton:hover {background: none;color:#F3A70B;}
#mainArea {margin-top:20px;}
#mainArea h1 {
    color: #BB86FC;
    text-align: center;
    font-size: 64px;
    font-weight: 800;
    max-width: 790px;
    display: inline-block;
}
#mainArea h2 {
    color: #FFF;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    margin:20px 0 48px;
}
#mainArea h2 span {color: #F3A70B;font-weight: 900;}
.buttonStyle1 {transition: all 0.3s ease-in;background: #F3A70B;padding: 10px 30px;border-radius: 28px;color: #6A0DAD;text-align: center;font-size: 16px;font-weight: 600;margin-right:24px;border: 1px solid #F3A70B;}
.buttonStyle1:hover {background: none;color:#F3A70B;}
.buttonStyle2 {transition: all 0.3s ease-in;background: none;padding: 10px 30px;border-radius: 28px;color: #F3A70B;text-align: center;font-size: 16px;font-weight: 600;margin-right:24px;border: 1px solid #F3A70B;}
.buttonStyle2:hover {background: #F3A70B;color:#6A0DAD;}
.headStyle1 {
    color: #F3A70B;
    font-size: 64px;
    font-weight: 800;
    line-height: normal;
}
#mainArea .mainScene {
    margin-top: -100px;
    z-index: -1;
    position: relative;
}
#whatIs {margin-top: -264px;}
#whatIs p {
    color: #BB86FC;
    font-size: 16px;
    font-weight: 500;
    line-height: 150.4%;
    margin:20px 0 75px;
}
#whatIs .mysticVideo {max-width: 486px;margin-top:40px;}
#whatIs .videoArea {display: inline-block;position: relative;}
#whatIs .videoArea:after {content:"";width: 289px;height: 16px;border-radius: 289px;background: #470677;filter: blur(10px);position: absolute;bottom: -60px;left: 50%;transform: translate(-50%, -50%);}

#whoCanJoin {margin:62px 0 90px;}
#whoCanJoin p {
    color: #BB86FC;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    max-width: 661px;
    display: inline-block;
    margin:32px 0 64px;
}
.animBox {
    border-radius: 50px;
    border: 2px solid rgba(224, 224, 224, 0.20);
    background: rgba(187, 134, 252, 0.10);
    width: 100%;
    padding:50px;
    height: 518px;
    position: relative;
    transition: all 0.3s ease-in;
    overflow: hidden;
}
.animBox .head {
    color: #BB86FC;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin-bottom:15px;
    transition: all 0.3s ease-in;
}
.animBox .text {
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 134.977%;
    transition: all 0.3s ease-in;
}
.animBox .char {
    width: 35%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease-in;
}
.animBox .animArrow {
    position: absolute;
    margin-top: 20px;
    left: -60px;
    transition: all 0.3s ease-in;
}
.animBox .char.performers {
    width: 42%;
}
.animBox .char.vendors {
    width: 52%;
}
.animBox a {position: absolute;top: 0;left:0;width:100%;height: 100%;z-index: 3;}
.animBox:hover {background: #BB86FC !important;}
.animBox:hover .head {color: #6A0DAD;}
.animBox:hover .text {color: #6A0DAD;}
.animBox:hover .char {bottom:28px;}
.animBox:hover .animArrow {left:50px;}

#whoCanJoin .letsGo {margin-top:78px;display: inline-block; }

#howItWorks {}
#howItWorks .infoBox {
    border-radius: 50px;
    background: #E0E0E0;
    padding:85px 40px;
    margin-top:24px;
    min-height: 385px;
    transition: all 0.3s ease-in;
}
#howItWorks .image {
    width: 195px;
    margin-right: 36px;
    flex-shrink: 0;
    flex-grow: 0;
}
#howItWorks .image img {transition: all 0.3s ease-in;}
#howItWorks .head {
    color: #6A0DAD;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin:15px 0;
}
#howItWorks .text {
    color: #6A0DAD;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
#howItWorks img.how2 {padding:20px;}
#howItWorks .infoBox:hover {background: #BB86FC;}
#howItWorks .infoBox:hover .image img {margin-top:-10px;}
#howItWorks .nextStep {margin-top:78px;display: inline-block;}

#whyChoose {margin:90px 0;}
#whyChoose .headStyle1 {margin-bottom: 35px;}
#whyChoose .box {
    border-radius: 50px;
    background: #BB86FC;
    min-height: 282px;
    padding:50px 23px 38px;
    text-align: center;
    position: relative;
}
#whyChoose .box .img {
    display: inline-block;
    width: 38%;
}
#whyChoose .box .text {
    color: #6A0DAD;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    position: absolute;
    width: 100%;
    left: 0;
    padding: 0 19px;
    bottom: 38px;
}
#whyChoose .box .img2 {width:44%;}
#whyChoose .box .img3 {width:58%;}
#whyChoose .nextStep {display: inline-block;margin-top:64px;}

#registerBox {margin:90px 0 0; }
#registerBox .headStyle1 {margin-bottom:35px;}
#registerBox .animBox {background: #F3A70B;height:584px;}
#registerBox .head, #registerBox .text {color: #6A0DAD;}


footer {padding:85px 0;}
footer .line {display: block;width: 100%;height: 1px;background: #BB86FC;margin-bottom:85px;}
footer .logoArea {max-width: 392px;}
footer .linkArea {}
footer .head {
    color: #BB86FC;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin-bottom:15px;
}
footer .linkArea {display: inline-block;}
footer .linkArea a {
    display: block;
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    margin-top:15px;
    transition: all 0.3s ease-in;
}
footer .linkArea a:hover {color:#F3A70B;}
footer .footerLinks {margin:200px 0 43px;position: relative;}
footer .footerLinks a {
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    margin-right:56px;
    position: relative;
    transition: all 0.3s ease-in;
}
footer .footerLinks a:hover {color:#F3A70B;}
footer .footerLinks a:last-child {margin-right:0;}
footer .footerLinks a:after {content:"";width: 1px;height: 24px;background: #BB86FC;position: absolute;left: calc(100% + 28px);}
footer .footerLinks a:last-child:after {content:none;}
footer .copyright {
    color: #BB86FC;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
footer .copyright a {
    color: #BB86FC;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 150.4%;
}
.howItWorks {}
.howItWorks .howImg1 {display: inline-block;max-width: 289px;}
.howItWorks h1 {
    color: #BB86FC;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin:36px 0 24px;
}
.howItWorks .desc {
    color: #BB86FC;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
.howItWorks .desc span {color: #F3A70B;font-weight: 800;}
.howItWorks .sidebar ul li {
    margin-bottom:50px;
}
.howItWorks .sidebar ul li a {
    color: #BB86FC;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    display: block;
}
.howItWorks .sidebar ul li a span {
    border-radius: 25px;
    border: 1px solid #F3A70B;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    margin-right: 20px;
    position: relative;
    transition: all 0.3s ease-in;
}
.howStep {margin-top:200px;}
.howItWorks .sidebar ul li a span:after {
    content: "";
    width: 1px;
    height: 48px;
    background: #F3A70B;
    position: absolute;
    bottom: -100%;
    left: 50%;
}
.howItWorks .sidebar ul li:last-child a span:after {content:none;}

.howItWorks .sidebar ul li a:hover span,
.howItWorks .sidebar ul li a.active span {
    color: #6A0DAD;
    background: #F3A70B;
}
.howItWorks .content .section .imgArea {text-align: center;margin-top:74px;}
.howItWorks .content #section3 .imgArea {margin-top:0;}
.howItWorks .content #section5 .imgArea {margin-top:0;}
.howItWorks .content #section6 .imgArea {margin-top:0;}
.howItWorks .content #section1 .imgArea img {max-width: 282px;display: inline-block;}
.howItWorks .content #section2 .imgArea img {max-width: 276px;display: inline-block;}
.howItWorks .content #section3 .imgArea img {max-width: 278px;display: inline-block;}
.howItWorks .content #section4 .imgArea img {max-width: 278px;display: inline-block;}
.howItWorks .content #section5 .imgArea img {max-width: 278px;display: inline-block;}
.howItWorks .content #section6 .imgArea img {max-width: 278px;display: inline-block;}
.howItWorks .content .head {
    color: #BB86FC;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.howItWorks .content .subHead {
     color: #F3A70B;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
    margin:6px 0 24px;
 }
.howItWorks .content p {
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
.howItWorks .content .rightSide {padding-left:29px;}
.howItWorks .content .section {margin-bottom:200px;}
.howItWorks .content .section:last-child {margin-bottom:0;}
.howItWorks .sidebar {
    position: sticky;
    top: 30px;
}
.howItWorks .joinPadding {margin-top:75px;}
.howItWorks h2 {
    color: #F3A70B;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.howItWorks .joinDesc {
    margin:25px 0 60px;
    color: #BB86FC;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
.howItWorks .letsGo {display: inline-block;margin-top:64px;}

#ourDna {}
#ourDna h1 {
    color: #BB86FC;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
#ourDna .subHead {
    padding: 12px 0 64px;
    color: #F3A70B;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150.4%;
}
#ourDna .box {
    border-radius: 50px;
    border: 2px solid rgba(224, 224, 224, 0.20);
    background: rgba(187, 134, 252, 0.10);
    padding: 75px 100px;
    margin-bottom:24px;
    transition: all 0.3s ease-in;
}
#ourDna .box .head {
    color: #BB86FC;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom:24px;
    transition: all 0.3s ease-in;
}
#ourDna .box .desc span {
    color: #F3A70B;
    font-weight: 800;
}
#ourDna .box .desc {
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    transition: all 0.3s ease-in;
}
#ourDna .box .dna1 {display: inline-block;max-width: 378px;}
#ourDna .box .dna2 {display: inline-block;max-width: 217px;}
#ourDna .box .dna3 {display: inline-block;max-width: 108px;}
#ourDna .box .dna4 {display: inline-block;max-width: 154px;}
#ourDna .box .dna5 {display: inline-block;max-width: 153px;}
#ourDna .box .dna6 {display: inline-block;max-width: 180px;}
#ourDna .box .dnaCR {display: inline-block;max-width: 192px;}
#ourDna .box .imgArea {flex:1;}

#ourDna .box.vertical {min-height: 692px}
#ourDna .box .con {height: 100%;}

#ourDna .box:hover {background: #F3A70B;}
#ourDna .box:hover .head {color: #6A0DAD;}
#ourDna .box:hover .desc {color: #6A0DAD;}
#ourDna .dnaCarousel {}
#ourDna .dnaCarousel .cHead {
    color: #BB86FC;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
#ourDna .dnaCarousel .cSubHead {
    color: #F3A70B;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150.4%;
    margin:24px 0 72px;
}
#ourDna .dnaCarousel .arrowArea img {width: 78px;cursor: pointer}
#ourDna .dnaCarousel .arrowArea .arrowLeft {margin-right:24px;}
#ourDna .flexHeight {height: 100%;}

#whoCanJoin .cHead {
    color: #BB86FC;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
#whoCanJoin .sub {
    color: #BB86FC;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    margin:30px 0 64px;
}
#whoCanJoin .boxC {
    padding: 50px 70px;
    border-radius: 50px;
    background: #E0E0E0;
    transition: all 0.3s ease-in;
}
#whoCanJoin .imgArea {text-align: center;}
#whoCanJoin .imgArea img {display: inline-block;max-width: 147px;}
#whoCanJoin .text-area .head {
    color: #6A0DAD;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin:35px 0 24px;
}
#whoCanJoin .text-area .text {
    color: #6A0DAD;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
#whoCanJoin .boxC.right .imgArea {flex: 0 0 40%;}
#whoCanJoin .boxC.right .imgArea img {margin-right: 35px;}
#whoCanJoin .imgArea.performers img {max-width: 121px}
#whoCanJoin .imgArea.vendors img {max-width: 178px}
#whoCanJoin .boxC.heightC {min-height: 812px;}
#whoCanJoin .boxC.heightH {height: calc(50% - 12px);}
.mBot24 {margin-bottom:24px;}
#whoCanJoin .boxC:hover {background: #F3A70B;}

#whyChoosePage {}
#whyChoosePage .cHead {
    color: #BB86FC;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
#whyChoosePage .sub {
    color: #BB86FC;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    margin:30px 0 64px;
}
#whyChoosePage .boxC {
    padding: 42px;
    border-radius: 50px;
    border: 2px solid rgba(224, 224, 224, 0.20);
    background: rgba(187, 134, 252, 0.10);
    margin-bottom:24px;
    min-height: 384px;
    transition: all 0.3s ease-in;
}
#whyChoosePage .boxC .imgArea {flex: 0 0 44%;margin-top:50px;}
#whyChoosePage .imgArea {text-align: center;}
#whyChoosePage .imgArea img {display: inline-block;}
#whyChoosePage .imgArea img.one {width: 183px;}
#whyChoosePage .imgArea img.two {width: 151px;}
#whyChoosePage .imgArea img.three {width: 122px;}
#whyChoosePage .imgArea img.four {width: 133px;}
#whyChoosePage .boxC .head {
    color: #BB86FC;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom:24px;
    transition: all 0.3s ease-in;
}
#whyChoosePage .boxC.m0 {margin:0;}
#whyChoosePage .boxC .text {
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
#whyChoosePage .boxC:hover {
    border-color: #F3A70B;
}

#whyChoosePage .boxC:hover .head {
    color:#F3A70B;
}
#registerPage {}
#registerPage .headArea {margin:70px 0;}
#registerPage .headArea p {
    color: #BB86FC;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
#registerPage h1 {
    color: #BB86FC;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

#registerPage .box {
    border-radius: 50px;
    border: 2px solid rgba(224, 224, 224, 0.20);
    background: rgba(187, 134, 252, 0.10);
    padding: 75px 100px;
    margin-bottom:24px;
    transition: all 0.3s ease-in;
}
#registerPage .box .head {
    color: #BB86FC;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom:24px;
    transition: all 0.3s ease-in;
}
#registerPage .box .desc span {
    color: #F3A70B;
    font-weight: 800;
}
#registerPage .box .desc {
    color: #BB86FC;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    transition: all 0.3s ease-in;
}
#registerPage .headUp {
    color: #F3A70B;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom:8px;
}
#registerPage .box img.register1 {max-width: 465px;}
#registerPage .box img.register2 {max-width: 204px;margin-top:75px;}
#registerPage .box img.register3 {max-width: 188px;}
#registerPage .box img.register4 {max-width: 180px;}
#registerPage .box img.register5 {max-width: 276px;}
#registerPage .box .desc ul {list-style-type: disc;padding-left: 31px;}
#registerPage .box .desc ul li {margin-bottom:30px;}
#registerPage .box .desc ul li:last-child {margin:0;}

.heightAuto .box {height: 100%;}
#registerPage h2 {
    color: #F3A70B;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin:60px 0 30px;
}
#registerPage .joinDesc {
    color: #BB86FC;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
    margin-bottom:50px;
}
#whoCanJoin .secHead {
    color: rgba(106, 13, 173, 0.50);
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom:24px;
    margin-top: -20px;
}
#whoCanJoin .heightR {height: 100%;}
body.registerPage {background: #fff;}
body.loginPage {background: #F7F7F7;}
body.panel {background: #F7F7F7;}
.registerP .rightSide {display: inline-block;padding-top: 100px;}
.registerP .rightSide .back img {margin-right:16px;}
.registerP .rightSide .back {
    color: #8D8D8D;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.registerP h1 {
    color: #575656;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin:32px 0 10px;
}
.registerP .rightSide .sub a {
    color: #6A0DAD;
    font-weight: 600;
}
.registerP .rightSide .sub {
    color: #575656;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.registerP .rightSide .head {
    color: #575656;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin:30px 0;
}
.registerP .form {text-align: left;margin-bottom:16px;}
.registerP .form .top {
    color: #575656;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom:6px;
}
.registerP .form input {
    border-radius: 6px;
    border: 1px solid #DADAE0;
    padding:15px;
    width: 100%;
    display: block;
}
.registerP .form select {
    border-radius: 6px;
    border: 1px solid #DADAE0;
    padding:15px;
    width: 100%;
    display: block;
    height:auto !important;
}
.form .iti {
    width: 100%;
}
.stickyTop {position: sticky;top:10px;}
.registerP .form input[type='checkbox'] {
    border-radius: 3px;
    border: 1px solid #DADAE0;
    width:16px;
    height: 16px;
    margin-right:10px;
}
.passiveInput {display:none;}
.passiveInput.active {display: block;}
.registerP .form button[type='submit'] {
    border-radius: 100px;
    border: 1px solid #6A0DAD;
    padding: 15px;
    width: 90%;
    background: none;
    display: inline-block;
    color: #6A0DAD;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.userPanel .sidebar .userBox {}
.userPanel .sidebar .userBox .img {width:81px;height: 81px;}
.userPanel .sidebar .userBox .img img {width: 100%;border-radius: 100%;}
.userPanel .sidebar .userBox .details {padding-left:14px;}
.userPanel .sidebar .userBox .details .user {color: #6A0DAD;font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;}
.userPanel .sidebar .userBox .details .title {margin-top:4px;color: #8D8D8D;font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;}
.userPanel .sidebar .createEvent {
    border-radius: 100px;
    background: #6A0DAD;
    padding: 15px;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 100%;
    display: block;
}
.userPanel .sidebar .mHead {
    color: #8D8D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-left: 30px;
    margin:27px 0 16px;
}
.userPanel .sidebar .buttonBox {margin-bottom:15px;}
.userPanel .sidebar .buttonBox .button {border-radius: 50px;border: 1px solid #DADAE0;position: relative}
.userPanel .sidebar .buttonBox .button .icon {width:70px;text-align: center;}
.userPanel .sidebar .buttonBox .button .icon img {max-width: 17px;}
.userPanel .sidebar .buttonBox .button .text {padding: 15px 45px 15px 0;color: #8D8D8D;font-size: 14px;font-style: normal;font-weight: 500;line-height: normal;}
.userPanel .sidebar .buttonBox .button .arrow {position: absolute;right: 20px;}
.userPanel .sidebar .buttonBox .button a {position: absolute;top:0;left:0;width:100%;height: 100%;z-index: 1;}
.userPanel .sidebar .buttonBox .button.sub {margin-top:15px;margin-left: 30px;}
.userPanel .sidebar .buttonBox .button .count {
    width: 17px;
    height: 17px;
    background: #6A0DAD;
    color: #F5F5F5;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: 0;
}
.userPanel .content {
    border-radius: 25px;
    border: 1px solid #DADAE0;
    background: #FFF;
    padding: 35px 50px;
    flex:1;
}
.userPanel .content h1 {
    color: #575656;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.userPanel .content .desc {
    color: #8D8D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom:34px;
}
.userPanel .content .eventBox {
    padding: 24px;
    border-radius: 15px;
    border: 1px solid #E0E0E0;
    margin-bottom:24px;
}
.userPanel .content .eventBox .eventName {
    color: #575656;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    margin-bottom:14px;
}
.userPanel .content .eventBox .location {
    color: #8D8D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom:14px;
}
.userPanel .content .eventBox .location div {
    display: inline-block;
}
.userPanel .content .eventBox .date {
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    background: #F7F7F7;
    padding:10px;
    text-align: center;
    color: #8D8D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.userPanel .content .eventBox .date .icon {margin-bottom:8px;}

.userPanel .content .eventBox .numberOffers {
    border-radius: 6px;
    background: #6A0DAD;
    padding: 10px;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin:14px 0;
}
.userPanel .content .eventBox .offersArea {
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    background: #F7F7F7;
    padding: 10px;
}
.userPanel .content .eventBox .offersArea .viewOffers {
    border-radius: 6px;
    border: 1px solid #8D8D8D;
    padding: 10px;
    color: #8D8D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: block;
    text-align: center;
}
.userPanel .content .eventBox .offersArea .viewOffers.pass {
    border: 1px solid #EEE;
}
.userPanel .content .eventBox .cancelEvent {
    color: #8D8D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding:10px;
    border-radius: 6px;
    border: 1px solid #DADAE0;
    text-align: center;
    display: block;
    margin-top:14px;
}
.userPanel .content .head {
    color: #575656;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom:30px;
}
header .user {margin-right:30px;}
header .user .userName {
    color: #6A0DAD;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left:10px;
}

body.home header .user .userName, body.page header .user .userName {
    color:#bb86fc;
}

.staticStep .number {
    color: #6A0DAD;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #F3A70B;
    text-align: center;
    line-height: 50px;
    display: inline-block;
}
.staticStep .head {
    color: #BB86FC;
    text-align: right;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin:20px 0;
}
.staticStep p {
    color: #BB86FC;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150.4%;
}
.staticStep .step1 {margin-top:100px;}
.staticStep .left .head, .staticStep .left p {text-align: left;}
.staticStep .step2 {margin:50px 0;}
.staticStep img.step2B {max-width: 482px;float:right;}
.staticStep .step4 .head, .staticStep .step4 p {text-align: center;}
.staticStep .step4 {margin-top:40px;}
.staticStep .step3 {margin-top:60px;}










@media only screen and (max-width: 800px) {


}

@keyframes slideLeft {
    from {
        margin-left: 20px;
    }
    50% {
        margin-left: 40px;
    }
    100% {
        margin-left: 20px;
    }
}
@keyframes slideRight {
    from {
        margin-right: 20px;
    }
    50% {
        margin-right: 40px;
    }
    100% {
        margin-right: 20px;
    }
}
@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotatingReverse {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
.rotating {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
}
.reverse {
    -webkit-animation: rotatingReverse 15s linear infinite;
    -moz-animation: rotatingReverse 15s linear infinite;
    -ms-animation: rotatingReverse 15s linear infinite;
    -o-animation: rotatingReverse 15s linear infinite;
    animation: rotatingReverse 15s linear infinite;
}


.shake {
    animation: shakeAnim 2s cubic-bezier(.36,.07,.19,.97) both infinite;
}
@keyframes shakeAnim {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}