:root {
    /*
    --bg:#000000;
    --txt:#9d9d9d;
    --tris: #444444;
    --trisS: #525252;
    --trisH: #323232;
    --trans: #888888;
    --pik: #5b8bc9;
    --col_cont: rgba(30, 30, 30, 0.7);
    */

    /*
    --bg:#1e2324;
    --txt:#cccccc;
    --tris: #444444;
    --trisS: #cccccc;
    --trisH: #232c2e;
    --trans: #888888;
    --pik: #5b8bc9;
    --col_cont: rgb(24, 27, 29);*/
    /*
    --bg:#1a1a1a;
    --txt:#d4d4d4;
    --tris: #414141;
    --trisS: #9b9b9b;
    --trisH: #2e2e2e;
    --trans: #888888;
    --pik: #5b8bc9;
    --col_cont: #151515;
*/
    --bg:#000000;
    --txt:#d4d4d4;
    /* --txtH:#262626; */
    --tris: #18181b;
    --trisS: #212127;
    --trisH: #000000;
    --trisSH: #b4b4c4;
    /* --trisSH: #e9e9ff; */
    --trisSOpen: #9494a3;
    /* --trisSH: #646470; */
    --trans: #ffffff;
    --pik: #ad6746;
    --col_cont: #000000;
/*
    --bg:#d8d8d8;
    --txt:#313131;
    --tris: #444444;
    --trisS: #646464;
    --trisH: #cccccc;
    --trans: #dddddd;
    --pik: #71abda;
    --col_cont: rgba(185, 185, 185, 0.8);*/
}
/*
html {
    scroll-behavior: smooth;
}*/





@keyframes intro {
    0% {opacity: 0; margin-top: 30px;}
    100% {opacity: 1; transform: scale(1);}
}

/* @keyframes first-tris {
    0% {transform: scale(1); stroke: transparent; fill: var(--bg)}
    50% {stroke: var(--txt); fill: var(--bg)}
    90% {transform: scale(1.2);}
    100% {transform: scale(1); stroke: transparent; fill: var(--bg)}
} */
@keyframes first-tris {
    0% {transform: scale(1); stroke: transparent; fill: var(--bg)}
    50% {stroke: var(--txt); fill: var(--bg)}
    90% {transform: scale(1);}
    100% {transform: scale(1); stroke: transparent; fill: var(--bg)}
}


@keyframes intro-moodboard {
    0% {opacity: 0;}
    10% {opacity: 0;}
    100% {opacity: 1;}
}



@keyframes tris {
    
    0% {opacity: 0; /*transform: scale(0);*/ stroke-dashoffset: -670;   stroke-dasharray: 670}
    30% {opacity: 0.5; stroke: var(--trans); stroke-width: 5px; stroke-dashoffset: -670;}
    100% {opacity: 1; transform: scale(1); stroke: var(--trisS); stroke-width: 1px; stroke-dashoffset: 0;}
}

@keyframes txt {
    0% {opacity: 0;}
    20% {opacity: 0;}
    100% {opacity: 1;}
}


@keyframes blockShow {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0px);}
}

@keyframes closar {
    0% {opacity: 0; transform: translateX(-100px);}
    100% {opacity: 1; transform: translateX(0px);}
}

@keyframes moodboard-img {
    0% {opacity: 1;     filter: blur(0px);}
    50% {opacity: 1;    filter: blur(0px);}
    60% {opacity: 0;    filter: blur(10px);}
    100% {opacity: 0;    filter: blur(10px);}
}
/*
@keyframes loop {
    0% {stroke-dashoffset: 200; stroke-dasharray: 670; stroke-width: 1px; stroke: var(--trisS)}
    100% {stroke-dashoffset: 200; stroke-dasharray: 600; stroke-width: 1px; stroke: var(--trisS)}
}
*/

@font-face {
    font-family: "Century Gothic";
    src: url(fonts/C_light.woff);
}

* {
    color: #222;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

*::selection {
    background-color: var(--tris);
}


body {
 
    /*filter: sepia(0.5) invert(1);*/
    /*background: #151110;*/
    background: var(--bg);

    /*background: #151413;*/

    /*background: radial-gradient(#151110 100%, #35322f 100%);*/

    margin: 0;

    overflow: hidden;

    transition: all cubic-bezier(0.52, 0, 0.11, 1) 0.5s;

  


    z-index: 3000;

/*
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;*/
}


main {
    animation: intro 1s;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;
}

.moodboard {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: intro-moodboard 3s ease 0s forwards;
}

body.hide .moodboard-item img {
    opacity: 0;
    filter: blur(10px);
}

.moodboard-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.moodboard-item {
    position: absolute;
    transform: translate(-50%, -50%);
    animation: moodboard-img 10s ease 0s infinite alternate-reverse forwards;
    opacity: 0;
    /*animation: name duration timing-function delay iteration-count direction fill-mode;*/
}

.moodboard-item img {
    position: absolute;
    transition: all ease 1s;
}

.clip-t1 {
    clip-path: path('M0 0 221.7 0 110.85 193Z');
}

.clip-t2 {
    clip-path: path('M0 193 221.7 193 110.85 0Z');
}


svg {
    
    position: absolute;

    /*width: 221.7px;
    height: 193px;*/

    overflow: visible;
    
 

    /*transform: scale(1.2);*/
    transition: all cubic-bezier(0.52, 0, 0.11, 1) 0.5s;

}




.tris {

    position: absolute;


}




.tris path {
    display: none;

    fill: transparent;
    stroke: var(--trisS);
    stroke-width: 1px;
    stroke-dasharray: 680; stroke-dashoffset: 0;



    transition: all 0.3s /*cubic-bezier(.41,.02,0,.98)*/ ease, stroke 0.2s ease;

    z-index: 1000;

    

    animation: tris 1s cubic-bezier(.41,.02,0,.98);
    /* animation: tris 1.5s ease; */

    cursor: pointer;

}

body:not(.hide) #Phoenix path {
    fill: #000000;
    animation: first-tris 1.5s ease 0s infinite forwards;
}

.col_cont .larger {
    width:130%;
}
.col_cont .larger > * {
    transform: translateX(-10%);
}

.t0 {
    transform-origin: 110px 128px;
}
.t1 {
    transform-origin: 110px 60px;
}



.tris path:hover {
    fill: var(--trisH);

    /*stroke: /*#3cc0e8*//*#e8953c;*/

    /* stroke-width: 10px; */

    stroke: var(--trisSH);

    z-index: 999999999;

    transform: scale(1.1);

    /* filter: blur(7px); */

    /* fill: var(--tris); */

}
/*
.tris:hover text {

}
*/
.tris text {

    text-align: center;

    position: absolute;

    fill: var(--txt);

    font-weight: 100;
    font-size: 0.8em;

    letter-spacing: 4px;

    display: none;

    animation: txt 0.5s;
    
    text-transform: uppercase;

    transition: all 0.3s;
    transition-delay: 0.3s;

    user-select: none;

    pointer-events: none;
}




/*
#s3D {
    
    fill: url(main/img/key.png);
    


}*/

/*
.test {
    background: #f00;


}

*/






















/*=====================================================================*/
/*===========================   content    ============================*/
/*=====================================================================*/


/*=============*/
.test {
    background: #ecea45;
    padding: 10px;
    border: 1px solid #f00;
}
/*=============*/








.content { 
    margin-left: 40vw;

    transform: skewX(10deg);


}

.col_cont {

    box-sizing: border-box;
    /* padding: 100px 330px 100px 200px; */
    padding: 5vh 30vw 5vh 5vw;
    transform: translateX(5vw);


    display: none;

    width: 80vw;
    max-width: 150vh;
    height: 100vh;
    background: var(--col_cont)/*transparent*/;

    /*border-left: 1px solid #555;*/

    overflow-y: scroll;
    overflow-x: hidden;


    transition: all 0.3s;
    opacity: 0;

    flex-direction: column;


    /* animation-name: intro; */
    animation-duration: 0.3s;

    align-self: flex-start;

}

.col_cont * {
    font-size: 1.1em;
    color: var(--txt);


}

.col_cont img {
    width: 100%;
    /*margin: 10px 0px;*/
}

.col_cont h3 {
    /*border-left: 3px solid var(--pik);*/
    /*padding-left: 10px;*/
    margin: 0;
    font-size: 1.7em;

    letter-spacing: 5px;

    text-transform: uppercase;
}

.col_cont h4 {
    /*border-left: 3px solid var(--pik);*/
    /*padding-left: 10px;*/
    margin: 0;
    font-size: 1.2em;

    letter-spacing: 5px;

    text-transform: uppercase;
}

.col_cont li {
    margin: 0 0 10px 0;
}

.col_cont .creation-date {
    font-size: 4em;
    padding: .5em 0;
    width: 100%;
    border-top: 1px solid var(--trisSOpen);
    margin: 1em 0;
    color: var(--trisSOpen);
}


.col_cont .block {
    margin: 50px 0;
    width: 95%;
    max-width: 95vh;
    padding-left: 5vw;

    transform: skewX(-10deg);


}

.block * {

    animation-name: blockShow;
    animation-duration: 0.5s;
    animation-delay: 0.6s;
    animation-timing-function: cubic-bezier(0.43,-0.02, 0, 0.99);
}

.col_cont p {
    margin: 20px;

    letter-spacing: 2px;
    margin-left: 0;
    color: var(--trisSOpen);
}

.col_cont a {
    color: var(--trisSOpen);
    transition: color .3s ease;
}

.col_cont a:hover {
    color: var(--txt);
}



/* === slider === */
.slider {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}



.slider div {
    display: flex;
    flex-direction: row;

    align-items: center;
    transition: all cubic-bezier(0.49, 0.01, 0, 1.04) 0.5s;
}


.slider div img {
    width: 100%;
}


.slider_control {
    display: flex;
    justify-content: space-between;
    width: 100%;

    position: absolute;

    transition: all ease 0.3s;
    opacity: 0;
    padding: 0 100px;

    user-select: none;

    text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.slider_control h2{

    font-size: 2.7em;
    margin: 0;
    cursor: pointer;
    padding: 200px 80px;

    opacity: 0.5;
    
    color: #ffffff;
}

.slider_control h2:hover{
    opacity: 1;
}


.slider_control:hover {
    width: 90%;
    opacity: 1;
}


.slider_step {
    color: #eee;
    background: rgba(0,0,0,0.3);
    padding: 5px 10px;
    border-radius: 100px;

    transform: translateY(-50px);
    font-size: 1em;
    
    margin: 0;
}

.time_msc {
    margin: 0 10px 0 20px;
    cursor: pointer;
}

/* === /slider === */






/* ================= Audio =================*/

.player {
    margin: 30px 0;

    height: 50px;
    
    /*border: solid 1px #9d9d9d;*/

    display: flex;
    flex-direction: row;
    align-items: center;

    
    background-size: cover;

    /*transform: skewX(-10deg);*/
    padding: 30px;

    transition: all ease 0.3s;

    /*transition: background-position linear 0.15s;*/
}


.btn_plps_audio, .btn_plps_video, .btn_fullscreen_video {
    width: 50px;
    height: 50px;
    position: relative;
    cursor: pointer;
}

.btn_plps_audio path, .btn_plps_video path {
    transition: all ease 0.5s;

}

.msc_off path{
    stroke: #9d9d9d;
    stroke-width: 0px;
    fill: #9d9d9d;
    /*fill: transparent;*/
    stroke-dasharray: 150px;
    stroke-dashoffset: 0px;
 
}
.msc_on path {
    stroke: #9d9d9d;
    stroke-width: 5px;
    fill: transparent;
    stroke-dasharray: 35px;
    stroke-dashoffset: -35px;
    transform: scaleX(0.75);
}


.time_msc {

    width: 100%;
    height: 10px;

    background: #525252;
    margin: 0 0 0 20px;
}

.time_line {
    background: #888888;
    width: 0%;
    height: 100%;
    transition: width linear 0.15s;
}



/* ================= /Audio ================= */




/* ================= video ================= */

    video {
        width: 100%;
    }

    .video_control {
        display: flex;
        flex-direction: row;
        align-items: center;

    }


    .time_line_vid {
        background: #888888;
        width: 0%;
        height: 100%;
        transition: width linear 0.15s;
    }
/* ================= /video ================= */


.j_col {
    display: flex;
    flex-direction: row;

}

.g_col {
    margin: 0 20px;
    width: 40%;
}

.j_col div div div {
    background: #333;
}

.j_col div div div div {
    background: #999;
    height: 30px;
}







/*
*{
    transition: all 0s !important;
    animation-name: none !important;

}*/



/*
#trucc {
    pointer-events: none;
    position: absolute;
    background-image: url("img/lol.png");

    width: 100vw;
    height: 100vh;

    z-index: 1000;
}*/


.hidden {
    opacity: 0 !important;
    pointer-events: none;
    /*display: none !important;*/
}

.back {
    stroke: 5px var(--trans);

    display: none;
}











.toLarge {
    width: 70%;
}







/* ================================================== */
/* =================== RESPONSIVE =================== */
/* ================================================== */


.phone_close {
    position: fixed;
    top: 0;


    animation: closar 0.3s;

    display: none;

    padding: 15px 25px;

    background: rgba(0,0,0,0.5);
}

.phone_close h1 {
    font-size: 60px;
    color: var(--txt);
    user-select: none;

    margin: 0;
}

@media only screen and (max-width: 900px) {
    /*
    body {
        background-color: rgb(94, 66, 66);
    }*/


    .phone_close {
        display: block;
    }
    
    .content {
        transform: skewX(0deg);
        padding: 0;
        margin: 0;
    }

    .col_cont {
        padding: 0;
        width: 100vw;
    }

    .col_cont p {
        margin-left: 10px;
    }

    .col_cont .block {
        transform: skewX(0deg);
    }

    .toLarge {
        width: 100%;
    }

    .slider_control {
        opacity: 1;
    }

    .slider_control:hover {
        width: 100%;
    }

    .time_msc {
        margin: 0 10px 0 20px;
    }

    .video_control {
        margin-left: 5px;
    }
    
    .slider_control h2 {
        padding: 80px 60px;
    }

    .col_cont h3 {
        margin-left: 10px;
    }
}


/* ================================================== */
/* =================== /RESPONSIVE ================== */
/* ================================================== */

.main_overview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    opacity: 1;
}

.main_overview img {
    width: 7vw;
    padding: 1vw;
    box-sizing: border-box;
}

.main_overview img:nth-child(2n+1) {
    width: 10vw;
}

.main_overview img:nth-child(3n+2) {
    align-self: flex-end;
}