:host, :root{
    --fa-li-margin: 1.5em;
    --subnav-height:85px;

    --black-matte: rgb(15, 15, 15);
    --black: rgba(0, 0, 0, 1);

    --purple:#716ff7;
    --synthBlue: #220B6A;
    --nightPurple: #3C0956;
    --nightPlum: #852467;
    --nightBlack: #020B1E;
    --gridLineTeal: #30C2B8;
    --gridLineGreen: #5EDAA4;
    --greenNeon: #40C6A7;
    --synthPink: #EF227D;
    --synthPeach: #FF7682;
}
html {
   scroll-behavior: smooth;
}
body{
    background: var(--black-matte);
}
a.anchor {
   position: absolute;
   width: 100%;
   visibility: hidden;
   top: 0;
   left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--roboto);
}
.eyebrow{
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.95px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 6px;
}
.pageUpper{
    background: linear-gradient(180deg, var(--synthBlue) 0%, var(--synthPink) 69.71%, var(--synthPeach) 100%);
    background: url(_img/sunset-grid-2.svg) no-repeat 50% 0 / cover,  linear-gradient(180deg, var(--synthBlue) -20.34%, var(--synthPink) 56.14%, var(--synthPeach) 118.86%);
}


#top-navigation-cloud{
    box-shadow:none;
    background: transparent;
    -webkit-backdrop-filter: blur(10px); 
    backdrop-filter: blur(8px);

}
#top-navigation-cloud .accentGradient{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.lp-logo-wrapper{
    padding: 23px 0 32px;
    margin-right: 40px;
    line-height:24px;
}
.lp-navbar-brand{
    margin-right:16px;
    padding-top:5px;
    padding-bottom:5px;
    line-height:30px;
}
.lp-logo-wrapper img{
    width:100px;
}
.lp-navbar-collapse{
    display:flex;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
}
.lp-navbar-collapse h1{
    font-size:16px;
    font-weight:300;
    line-height:24px;
}
.lp-navbar-collapse h1 a{
    color:#FFF;
}
.lp-navbar-collapse .sub-nav-links{
    display: flex;
    margin:0 35px 0;
}
.lp-navbar-collapse .sub-nav-links .sub-nav-links_link{
    margin:0 15px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}
         
.cta-btn_outline{
    border-radius: 5.75px;
    display: inline-block;
    color: #FFF;
    text-align: center;
    font-family: var(--roboto);
    font-style: normal;
    transition: all 0.3s ease-in-out;
}



.cta-btn_outline{
    background-color: transparent;
    border:2px solid #FFF ;
    padding: 8px 20px;
}
.cta-btn_outline:hover, .cta-btn_outline:focus{
    background-color: #FFF;
    color: var(--black-matte);
}
.heroTop{
    padding: 60px 0 180px;
    position:relative;
    z-index: 1;
    overflow: hidden;
}

.heroTop img.logo-tag{
    width:872px;
    height:auto;
    max-width: 100%;
    display: block;
    margin:0 auto;
}
.heroTop .gridBase{
    position: absolute;
    bottom: 0;
    left:50%;
    transform: translateX(-50%);
    width: 100%;
}

.heroTop .dateWrapper h3{
    margin-bottom:26px;
}
.heroTop .cta-btn_outline{
    background-color: transparent;
    border:2px solid var(--nightPurple) ;
    color: var(--nightPurple);
    padding: 10px 24px;
    font-size: 24px;
    font-weight: 700;
}
.heroTop .cta-btn_outline:hover, .cta-btn_outline:focus{
    background-color: var(--nightPurple);
    color: #FFF;
}

.whyAttend, .agenda, .whoAttend{
    background:linear-gradient(180deg, var(--nightBlack) -20.15%, var(--nightPurple) 51.9%, var(--nightPlum) 126.77%);
    background: url(_img/constellations.png) repeat 0 0 / 1024px, linear-gradient(180deg, var(--nightBlack) -20.15%, var(--nightPurple) 51.9%, var(--nightPlum) 126.77%);
    padding: 120px 0;
}
.prompt-lib{
    padding: 120px 0;
    background:linear-gradient(220deg, var(--synthBlue) -20.15%, var(--nightPurple) 51.9%, var(--greenNeon) 140.77%);
}
.whyAttend h2, .agenda h2{
    color: #FFF;
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 300;
    line-height: 105%; /* 67.2px */
    letter-spacing: 0.64px;
    margin: 0;
}

.whyAttend h3{
    color: #FFF;
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.whyAttend .card-border-left img{
    width: 90px;
    height:auto;
    display: block;
    margin-bottom: 20px;
}

.glassTile{
    position: relative;
    border-radius: 9px;
    box-shadow: 15px 20px 35px 0px rgba(0, 0, 0, 0.20);

}
.glassTile::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(21,21,21,1) 0%, rgba(21,21,21,1) 100%) padding-box,radial-gradient(63.19% 115.44% at 96.38% 103.67%, var(--synthPeach) 0%, rgba(113, 111, 247, 0.10) 100%) border-box, radial-gradient(110.53% 89.32% at 2% 3%, #716FF7 0%, rgba(255, 130, 112, 0.00) 100%) border-box;
    inset:0;
    border: 1.5px solid transparent;
    border-radius: 9px;
    z-index: -1;
    opacity: 1;
    transition: all .2s ease-in-out;
}
.glassTile::before{
    background: url(_img/texture.png) 0% 0% / 150px 150px repeat, radial-gradient(151.92% 127.02% at 15.32% 21.04%, rgba(0,0,0, 0.25) 0%, rgba(190, 221, 255, 0.02) 77.08%, rgba(23, 57, 85, 0.01) 100%);
    content: '';
    position: absolute;
    inset: 1.5px;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    border-radius: 9px;
    opacity: 0.25;
}

.speakers .card-border-left .logo, .onDemand-hdr .speaker-tile .logo{
    background: linear-gradient(316deg, var(--synthPeach) 0%, #a676c5 103.96%, var(--purple) 165.02%);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9px 0 9px 0;
    width:170px;
    height: 40px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.onDemand-hdr .speaker-tile .logo img{
    width: 110px;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.agenda, .whoAttend, .whyAttend{
    position: relative;
    overflow: hidden;
}
.agenda::before, .agenda::after,.whoAttend::before, .whoAttend::after, .whyAttend::before{
    content: "";
    position: absolute;
    width: 100%;
    
}

.agenda .glassTile, .whyAttend .glassTile, .prompt-lib .glassTile{
    display: block;
    position: relative;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.whyAttend .glassTile::after, .prompt-lib .glassTile::after{
    background: radial-gradient(63.19% 115.44% at 96.38% 103.67%, var(--synthPeach) 0%, rgba(113, 111, 247, 0.10) 100%) border-box, radial-gradient(110.53% 89.32% at 2% 3%, var(--purple) 0%, rgba(255, 130, 112, 0.00) 100%) border-box;;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(rgba(255, 255, 255, 0.95) 0 0) padding-box, linear-gradient(#fff 0 0);
    /* -webkit-mask-composite: destination-out; */
    mask-composite: exclude;
} 

.agenda .glassTile::after{
    background: radial-gradient(63.19% 115.44% at 96.38% 103.67%, var(--synthPink) 0%, rgba(113, 111, 247, 0.10) 100%) border-box, radial-gradient(110.53% 89.32% at 2% 3%, var(--synthPeach) 0%, rgba(255, 130, 112, 0.00) 100%) border-box;;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(rgba(255, 255, 255, 0.95) 0 0) padding-box, linear-gradient(#fff 0 0);
    /* -webkit-mask-composite: destination-out; */
    mask-composite: exclude;
} 

.agenda .card-border-left{
    padding: 1.5px;
}
.agenda .onDemand-card{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;
    height: 100%;
}
.agenda .onDemand-card a.simple{
    color: var(--gridLineTeal);
    background-image: url(_img/simple-arrow-green.svg);
}

.onDemand-hdr{
    border-radius: 9px 9px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.onDemand-hdr img{
    width: 100%;
    border-radius: 9px 9px 0 0;
}
.onDemand-hdr .speaker-tile{
    align-self: stretch;
    flex: 1;
    backdrop-filter: blur(21.5px);
    padding: 55px 25px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.onDemand-hdr .speaker-tile p{
    color:#ffffff;
    text-align: center;
    line-height: normal;
}


.onDemand-card .sessionTitle{
    color: #ffffff;
    
}
.onDemand-card .sessionTitle .session{
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    display: block;
    margin-top: 5px;
}
.onDemand-card .sessionTitle, .onDemand-card .sessionCTA{
    padding-left: 25px;
    padding-right: 25px;
    
}
.onDemand-card .sessionTitle{
    padding-top: 15px;
    padding-bottom: 15px;
}
.onDemand-card .sessionCTA{
    padding-bottom: 20px;
    padding-top: 5px;
}

@media (max-width:1023px){
    .agendaSession .glassTile{
        margin:1rem 0;
    }
}

.accentLine{
    width: 100px;
    height: 4px;
    background: linear-gradient(270deg, var(--gridLineTeal) -7%, var(--gridLineGreen) 107%);
    margin: 50px auto;
}
.accentLine.leftAccent{
    margin: 50px 0;
}
.accentGradient{
    background: var(--greenNeon);
    width:100%;
    height:3px
}

.accentGradient.accentGradient-thin{
    height:1px
}

.card-border-left{
    padding:30px;
}

.card-border-left p{
    margin: 0;
}
.card-border-left p+p{
    margin-top: 1rem;
}
.card-border-left::before{
    background: var(--purple);
    background: -moz-linear-gradient(180deg, var(--purple) 0%, var(--synthPeach) 100%);
    background: -webkit-linear-gradient(180deg, var(--purple) 0%, var(--synthPeach) 100%);
    background: linear-gradient(180deg, var(--purple) 0%, var(--synthPeach) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#716ff7",endColorstr="#ff8270",GradientType=1);
}
.card-border-left .accordionParent p{
    position: relative;
    z-index: 2;
}

.whyAttend .card-border-left::before, .speakers .card-border-left::before, .agenda .card-border-left::before, .prompt-lib .card-border-left::before{
    display: none;
}

.lp-cta{
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--synthBlue) -70.24%, var(--synthPink) 76.32%, var(--synthPeach) 140%);
    background: url(_img/cta.svg) no-repeat 0 0 / cover;
}
.lp-cta.dots-abstract-circles.variant5::before{
    background-size: cover;
    background-position: 0 50%;
}


@media (max-width:1199px){
    .lp-navbar-collapse .sub-nav-links{
        margin: 0 15px 0
    }
}
@media (max-width:991px){
    .lp-logo-wrapper{
        margin-right:20px;
    }
    
    .lp-navbar-collapse .sub-nav-links{
        display: none;
    }
    .heroTop{
        padding: 60px 0 140px;
    }
}
@media (max-width:767px){
    #top-navigation-cloud{
        padding-top:0;
        padding-bottom:0;
    }
    #top-navigation-cloud .container{
        width:100%;
    }
    .heroTop{
        padding: 60px 0 120px;
    }
}
@media (max-width:575px){
    .lp-navbar-collapse h1{
        display:none;
    }
    #top-navigation-cloud, #top-navigation-cloud-buffer{
        display:block;
    }
    
    .heroTop .dateWrapper h3 span{
        display: block;
    }
    
    .whyAttend h3{
        font-size: 26px;
    }
    .heroTop img.logo-tag{
        margin-bottom: 20px;
    }
    .heroTop{
        padding: 60px 0 80px;
    }
    .heroTop .cta-btn_outline{
        font-size: 18px;
    }
}

@media (min-width:1600px){
    .pageUpper{
        background-position: 50% 90%;
    }
    .heroTop{
        padding-bottom: 200px;
    }
    .heroTop .gridBase{
        bottom: -10%;
    }
}