html{
	scroll-padding-top:100px;
}

a {
    color:var(--vc_black); 
}

body {
    background:var(--vc_white);
    font-family:"Aspekta", "Inter", sans-serif;
}

.tab-rainbow {
    display:flex;
    width:100%;
    height:6px;

    background: linear-gradient(90deg, 
        var(--pd_1096_500) 0%, 
        var(--ra_9514_500) 10%, 
        var(--pd_957_500) 20%, 
        var(--gbc_500) 30%, 
        var(--bp_344_500) 40%,
        var(--gbc_500) 50%,
        var(--pd_957_500) 60%,
        var(--ra_9514_500) 70%,
        var(--pd_1096_500) 100%
        );
    background-size: 400%;
    
    animation: tabRainbowMove 5s linear infinite;
}

@keyframes tabRainbowMove {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


main#home-main{
    display:flex;
    position:relative;
    box-sizing:border-box;
    margin:0;
    padding:0;
    flex-direction:column;
}

#home-main p{
    width:100%;
    max-width:720px;
    text-align:center;
    margin:0;
    line-height:1.25em;
    font-size:1.25em;
}

/* INTRO */
#home-main .intro{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:30px 15px;
    gap:5px;
}

#home-main .intro h1 {
    font-size:2.5em;
    font-weight:bold;
    text-align:center;
    margin:0;
    line-height:1.25em;
}

/* CONTENT TABS */
#home-main .code-graphic{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:0px;
    align-items:flex-start;
}

#home-main .code-graphic h2{
    font-size:1.3em;
    margin:0;
}

#home-main .tabs-container{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:100%;
    box-shadow:0 0 18px 0 rgba(12,12,12,0.1);
}

#home-main .tab-item{
    flex-grow:1;
    text-align:center;
    border-left:1px solid var(--vc_white);
    border-right:1px solid var(--vc_white);
    padding:15px;
}

#home-main .tab-item:hover{
    cursor:pointer;
}

#home-main .tab-item:first-child{
    border-left:none;
}

#home-main .tab-item:last-child{
    border-right:none;
}

.tab-item.references{
    background:#DEDEDE;
}

.tab-item.isolation-mode{
    background:#D1D1D1;
}

.tab-item.comparative-mode{
    background:#C5C5C5;
}

.tab-item.game-mode{
    background:#929292;
}

.tab-item.active{
    background:var(--vc_white);
}

.tab-item.active.game-mode{
    background:var(--vc_dark_200);
    color:var(--vc_white)
}


#home-main .tab-content{
    display:flex;
    flex-grow:1;
    background:var(--vc_white);
    z-index:1;
    width:100%;
    height:100%;
}

.tab-content-item{
    display:none;
    height:calc(100vh - 260px);
}

.tab-content-item.active{
    display:flex;
    width:100%;
    flex-direction:row;
    justify-content: space-between;
    padding:15px;
    gap:30px
}

.tab-content-item.active.game-mode{
    background:var(--vc_dark_200);
    color:var(--vc_white)
}

.tab-content-item .graphic{
    display:flex;
    width:100%;
}

.tab-content-item img{
    width:100%;
    height: auto;
    object-fit:contain;
}

.tab-content-item .slideshow {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.tab-content-item .slideshow img {
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.tab-content-item .slideshow img.active {
    opacity: 1;
}


.tab-content-item .graphic svg{
    display:block; 
    width:100%;
    height:auto
}

.tab-content-item .graphic svg .bldg:hover{
    cursor:pointer;
}

.tab-content-item .graphic svg .bldg .body path{
    opacity:0;
}

.tab-content-item .graphic svg .bldg.hover .body path,
.tab-content-item .graphic svg .bldg:hover .body path{
    opacity:1;
}

.tab-content-item .info{
    display:flex;
    width:100%;
    flex-direction:column;
    text-align:left;
    justify-content:center
}

.tab-content-item .info h3 {
    margin:0;
    line-height:1.25em;
}

#home-main .tab-content-item .info p{
    text-align:left;
    margin-top:8px;
    margin-bottom:16px;
}

.tab-content-item a.login{
    padding:4px 12px;
    border:1px solid var(--vc_black);
    border-radius:4px;
    font-weight:500;
    margin:1em 0;
    width:fit-content;
	 color:var(--vc_black);
}

.tab-content-item a.login:hover{
    background:var(--vc_black);
    color:var(--vc_white);
}

.tab-content-item.game-mode a.login {
    background:var(--vc_white);
    color:var(--vc_black)
}

.tab-content-item.game-mode a.login:hover {
    background:none;
    border-color:var(--vc_white);
    color:var(--vc_white);
}

.tab-content-item .info .code-list {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.tab-content-item .info a.code-list-item{
    display:flex;
    border-radius:4px;
    font-weight:500;
    color:var(--vc_black);
    font-size:1.15em;
    align-items:center;
    gap:8px;
}

.tab-content-item.game-mode .info a.code-list-item{
    color:var(--vc_white);
}

.tab-content-item.game-mode .info a.code-list-item:hover{
    color:var(--vc_black)
}

a.code-list-item.hover,
a.code-list-item:hover{
    background:rgba(24,24,24,0.1);
}

.game-mode a.code-list-item.hover,
.game-mode a.code-list-item:hover{
	color:var(--vc_black)!important;
    background:rgb(247, 247, 247,0.8)
}

a.code-list-item::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background:var(--vc_black)
}


a.code-list-item.pd-1096 {
    background: none;
}

a.code-list-item.pd-1096:hover,
a.code-list-item.pd-1096.hover {
    background: var(--pd_1096_105);
}

a.code-list-item.pd-1096::before {
    background: var(--pd_1096_400);
}

a.code-list-item.ra-9514 {
    background: none;
}
a.code-list-item.ra-9514:hover,
a.code-list-item.ra-9514.hover {
    background: var(--ra_9514_105);
}
a.code-list-item.ra-9514::before {
    background: var(--ra_9514_400);
}

a.code-list-item.bp-344 {
    background: none;
}

a.code-list-item.bp-344:hover,
a.code-list-item.bp-344.hover {
    background: var(--bp_344_105);
}

a.code-list-item.bp-344::before {
    background: var(--bp_344_400);
}

a.code-list-item.bp-220 {
    background: none;
}

a.code-list-item.bp-220:hover,
a.code-list-item.bp-220.hover {
    background: var(--bp_220_105);
}

a.code-list-item.bp-220::before {
    background: var(--bp_220_400);
}

a.code-list-item.pd-957 {
    background: none;
}

a.code-list-item.pd-957:hover,
a.code-list-item.pd-957.hover {
    background: var(--pd_957_105);
}

a.code-list-item.pd-957::before {
    background: var(--pd_957_400);
}

a.code-list-item.gbc {
    background: none;
}

a.code-list-item.gbc.hover,
a.code-list-item.gbc:hover {
    background: var(--gbc_105);
}
a.code-list-item.gbc::before {
    background: var(--gbc_400);
}

a.code-list-item.ct-220-957::before {
    background: #FFCD00;
	background: linear-gradient(180deg, rgba(255, 205, 0, 1) 0%, rgba(154, 59, 187, 1) 100%);
}

a.code-list-item.ct-all::before {
	background: #E91A52;
	background: linear-gradient(180deg, rgba(233, 26, 82, 1) 0%, rgba(243, 112, 34, 1) 20%, rgba(255, 205, 0, 1) 40%, rgba(66, 182, 73, 1) 60%, rgba(0, 201, 232, 1) 80%, rgba(154, 59, 187, 1) 100%);
}


.code-list-item.coming-soon,
.bldg.coming-soon{
    opacity:0.35;
    pointer-events:none;
}

.code-list-item .icon svg{
	width:14px;
	height:14px;
	fill:var(--vc_white)
}

#references a.code-list-item::before{
	display:none
}

#references .code-list-item .icon{
	padding:4px;
	border-radius:4px;
	width:28px;
	height:28px;
	display:flex;align-items:center;justify-content:center;
}

#references .code-list-item.pd-1096 .icon{
	background:var(--pd_1096_400);
}

#references .code-list-item.ra-9514 .icon{
	background:var(--ra_9514_400);
}

#references .code-list-item.gbc .icon{
	background:var(--gbc_400);
}

#references .code-list-item.pd-957 .icon{
	background:var(--pd_957_400);
}

#references .code-list-item.bp-344 .icon{
	background:var(--bp_344_400);
}

#references .code-list-item.bp-220 .icon{
	background:var(--bp_220_500);
}

.bldg.disable {
    opacity:0.3;
    pointer-events:none;   
    filter:saturate(0)
}

/* BETA USER SIGN UP SECTION */
#home-main .beta-user{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:30px 15px;
    gap:5px;
    background:var(--vc_dark_200);
    color:var(--vc_white);
}

#home-main .beta-user h2{
    font-size:2.5em;
    font-weight:bold;
    text-align:center;
    margin:0;
    line-height:1.25em;
}

#home-main .beta-user a.sign-up{
    padding:4px 12px;
    border:1px solid var(--vc_white);
    background:var(--vc_white);
    border-radius:4px;
    color:var(--vc_black);
    font-weight:500;
    margin:1em 0;
}

#home-main .beta-user a.sign-up:hover{
    background:none;
    color:var(--vc_white);
}

#home-main .beta-user a.login{
    color:var(--vc_white);
    font-weight:500;
    opacity:0.6;
}

#home-main .beta-user a.login:hover{
    opacity:1;
}

@media screen and (max-width:768px){
    #home-main .tabs-container{
        flex-direction:column;
    }

    #home-main .tab-item{
        border:0
    }

    #home-main .tab-content-item{
        height:100%
    }

    #home-main .tab-content-item.active{
        flex-direction:column-reverse;
        padding-top:0;
    }

    #home-main .tab-content-item h3 {
        display:none;
    }

    #home-main .slideshow {
        aspect-ratio: 16 / 9;
    }
}