/*****************************************************/
/*** Triangle styling ***/

.triangle, .triangle-fixed{
    display: block;
    position: absolute;
    background: var(--black);
    overflow: hidden;
    transition: 0.2s ease;
}

.triangle:hover{
    transform: scale(1.04);
    transition: 0.2s ease;
}

.reference-point{
    /*filter: drop-shadow(0px 0px 22px rgba(0,0,0,0.3));*/
}

.triangle-down{
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
}

.triangle-up{
    clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
}

.reference-point{
    width: 100%;
    position: relative;
    max-width: 900px;
    max-height: 900px;
    min-width: 600px;
    min-height: 600px;
    float: right;
}



/* Unique triangles - slice 1 - Wavespace */
#t-1-1{
  	width: 93%;
    height: 0%;
    padding-bottom: 78%;
    left: 41%;
    top: 7%;
    z-index: 2;
}

#t-1-2{
    width: 48%;
    height: 0%;
    padding-bottom: 41%;
    left: 14%;
    top: 14%;
}

#t-1-3{
    width: 35%;
    height: 0%;
    padding-bottom: 29%;
    left: 48%;
    top: 63%;
}

#t-1-4{
    width: 43%;
    height: 0%;
    padding-bottom: 36%;
    left: 123%;
    top: 3%;
    z-index: 2;

}

#t-1-5{left: 27%; top: 13%;}
#t-1-6{left: 79%; top: 89%;}
#t-1-7{left: 63%; top: 89%;}

/* Unique triangles - slice 2 - Team */
#t-2-1{
  	width: 40%;
    height: 0%;
    padding-bottom: 34%;
    left: 25%;
    top: 4%;
    z-index: 2;
}

#t-2-2{
    width: 40%;
    height: 0%;
    padding-bottom: 34%;
    left: 42%;
    top: 23%;
}

#t-2-3{
    width: 40%;
    height: 0%;
    padding-bottom: 34%;
    left: 2%;
    top: 44%;
}

#t-2-4{
    width: 40%;
    height: 0%;
    padding-bottom: 34%;
    left: 19%;
    top: 63%;
    z-index: 2;

}

#t-2-5{left: 22%; top: 19%;}
#t-2-6{left: -40%; top: 6%;}
#t-2-7{left: -59%; top: 6%;}

/* Unique triangles - slice 3 - Projects */
#t-3-1{
 	width: 72%;
    height: 0%;
    padding-bottom: 61%;
    left: 23%;
    top: 10%;
    z-index: 2;
}

#t-3-2{
	width: 44%;
    height: 0%;
    padding-bottom: 38%;
    left: 0%;
    top: 22%;
}

#t-3-3{
    width: 66%;
    height: 0%;
    padding-bottom: 57%;
    left: 53%;
    top: 40%;
}

#t-3-4{left: 1%; top: 36%;}
#t-3-5{left: 143%; top: 16%;}
#t-3-6{left: 152%; top: 7%;}

/* Unique triangles - slice 4 - Contact */
#t-4-1{
 	width: 27%;
    height: 0%;
    padding-bottom:22%;
    left: 131%;
    top: 2%;
    z-index: 2;
}

#t-4-2{
	width: 73%;
    height: 0%;
    padding-bottom: 60%;
    left: 40%;
    top: 19%;
    z-index: 2;
}

#t-4-3{left: 126%; top: 16%;}

/*****************************************************/
/*** Triangle constants ***/
.t-yellow-100{background: var(--yellow);}
.t-yellow-50{background: var(--yellow);opacity: 0.5;}
.t-grey-100{background: #828287;}
.t-grey-50{background: #58585F;}
.t-grey-25{background: #58585F;opacity: 0.5;}

.t-xxs{
    width: 5%;
    height: 0%;
    padding-bottom: 4%;
}

.t-xs{
    width: 10%;
    height: 0%;
    padding-bottom: 8%;
}

.t-s{
    width: 15%;
    height: 0%;
    padding-bottom: 13%;
}

.t-m{
    width: 20%;
    height: 0%;
    padding-bottom: 16%;
}