*
{
	margin:				0;
}

body
{
    font-family:            Kern-r;
/*	margin:				    1em;
    overflow:               hidden;
*/}

a
{
    color:                  white;
    text-decoration:        none;
    border-bottom:          1px solid rgba(255,255,255,0.0);
    transition:             border-bottom 0.2s;
}

p a
{
    border-bottom:          1px solid rgba(255,255,255,0.75);
    transition:             border-bottom 0.4s;
    padding-bottom:         2px;
}

p a:hover,
a:hover
{
    border-bottom:          1px solid rgba(255,255,255,1.0);
}


sup
{
    font-size:              0.65em;
}

.menu
{
    display:                none;
    position:               absolute;
    right:                  0;
    top:                    0;
    width:                  50vw;    
    height:                 100vh;
    background-color:       rgba(0,0,0,0.75);    
}

.menu ul
{
    color:                  white;
}

#menu-burger
{
    position:               absolute;
    display:                inline-block;
    box-sizing:             border-box;
    top:                    0;
    right:                  0;
    padding:                1em 1em 0 0; 
}


#menu-burger #title
{
/*
    display:                inline-block;
*/
    display:                none;
    font-size:              1.5vw;
    line-height:            3.2vw;
    transform:              translate(0,-0.4vw);
    cursor:                 pointer;
}


#menu-burger a
{
    display:                inline-block;
    font-size:              3.2vw;
    cursor:                 pointer;
    line-height:            1em; /* same as h1 title */
    color:                  white;
    box-sizing:             border-box;
    transform-origin:       50% 67%; /* empiric :-/ */
    transition:             transform 0.2s;
    border-bottom:          0;
    user-select:           none;
}

#menu-burger a.close
{
    text-decoration:        none;
    transform:              rotate(45deg);
}

.block
{
	margin-bottom:		    1.0em;
    box-sizing:             border-box;
    padding-right:          1em;

}

.background-black
{
    background-color:   black;
    color:              white;
}

.background-black
{
    background-color:   black;
    color:              white;
}

h1,h2
{
    color:               white;
    font-weight:          normal;
    user-select:           none;
}

h1
{
    display:                inline;
    white-space:            nowrap;
    font-size:              3.2vw;
    line-height:            1.0em;
    padding-bottom:         0.1em;
}

h2
{
    font-size:              2vw;
}

ul 
{
    list-style:             none;
    padding:                0;
    margin:                 0;
}

p
{
    font-size:              1.25vw;
    margin-bottom:          1.0em;
    user-select:            none;
}

li
{
    font-size:              3vw;
}

.main
{
    display:                flex;
    width:                  100%;
    height:                 100%;
}

.main.index
{
/*    height:                 75%;
*/}

.main .column.left
{
    flex :                  1;
    overflow-y:             hidden;
/*    overflow-y:             scroll;
*/
}

.main .column.left .social
{
    display:                flex;
    width:                  100%;
    flex-direction:         column;
}

.main .column.left .social .block
{
    flex:                   1;
    flex-shrink:            0;
}

.block p.fade-in,
#description .fade-in
{
    opacity:                0.0;
    transition: opacity 0.8s ease-in; 
}

.block p.fade-in.visible,
#description .fade-in.visible
{
    opacity:                1.0;
}

.social-icons
{
    margin-top:             2em;
}

.social-icons a
{
    display:                inline-block;
    margin-right:           6px;
    text-decoration:        none;
    transition:             none;

} 

.social-icons a:hover
{
    text-decoration:        none;
    border-bottom:          0;
    transition:             none;
}


.social-icons img
{
    width:                  30px;
    height:                 30px;
}

.main .column.right
{
    flex :                  1;
    align-self:             flex-start;
    text-align:             center;
}

img
{
    width:                  90%;
    object-fit:             contain;
}

.project 
{
    position:           relative;
    background-size:    contain;
    background-position: center;
    background-repeat:  no-repeat;
    background-color:   black;
    overflow:           hidden;
}

.main .column.right.project
{
    align-self:         unset;
    text-align:         left;    
}


.block
{
    top:                0;
    left:               0;  
    padding-top:        1.0em;
    padding-left:       1.0em;
}

.project.typo-black h1, 
.project.typo-black p, 
.project.typo-black a 
{
    color:              black;
}

.project.typo-black a 
{
    border-bottom:      1px solid black;
}

.project .block
{
    position :          absolute;
}

.project  .block h1
{
    margin-bottom:      0.1em;
    display:            block;
}

.project img,
.project video
{
    display:            block;    
    box-sizing:         border-box;
    pointer-events:     none;
    width:              100%;
    height:             100%;
    object-fit:         contain;
}

.project video
{
    object-fit:         cover;
}

.project p
{
    margin-bottom:      0.15em;
}


.grid-container 
{
    height: 100%;
    position : absolute ;
    top:0;
    left:0;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.exhibition
{
    position:           relative;
}

/*
.illustration
{

    background-image:   url(../Img/pathways_round.jpg);
    background-size:    100%;
    background-position-y: top;
}
*/

#sphere-02-container
{
    display:          flex;
    width:            100%;
    height:           100%;
    justify-content:  center;
    align-items:      flex-start;
    flex-direction:   row;
    margin:           0;
    overflow:         hidden;
    
}

#sphere-02-container canvas
{
    max-width: 100%;
    max-height: 100%;
}


.main.video-container
{
    height:             100%;
}

.column.plotters
{
    flex:               1;
    background-image:   url(../Img/Axidraw_landscape_02.jpg);
    background-size:    cover;
}

/*
—————— HYPER
—————— HYPERCOMBINATION
*/

.project.hyper img
{
    transform:          scale(0.9);
}

.project.hypercombination img
{
    transform:          scale(0.875);
}

/*
—————— DEAMBULATIONS
*/
.project.deambulations
{
    background-color: #FFF151;
}

.project.deambulations img
{
    transform:          scale(0.975);
}

/*
—————— SINUSOÏDES
*/

.project.sinusoides
{
    background-color:   #DBDBD9; 
}

.project.sinusoides img
{
    transform:          scale(1.35);
}

/*
—————— ORBE
*/
.project.orbe img
{
    transform:          scale(0.89);
}


/*
—————— PATHWAYS (BOOK)
*/
.project.pathways
{
    background-color: #e0e1e3;
}



.project.pathways img
{
    transform:          translate(-15px,0px) scale(1.3);
}


/*
—————— SATO / B01V
*/
.project.sato-B01V
{
    background-color: #DBDADF;
}

.project.sato-B01V img
{
    padding : 5.5vw;
    filter: drop-shadow(10px 10px 20px #000000);
}



/*
—————— PATHWAYS (EXHIBTION)
*/
.project.pathways-exhibition img
{
    object-fit:         cover;
}


/*
—————— Deux générations
*/

.project.deux_generations img
{
    object-fit:         cover;

}

.project.deux_generations h1,
.project.deux_generations p,
.project.deux_generations a
{
    color : #DD0000;
}

.project.deux_generations a
{
    text-decoration: none;
    border-bottom: 1px solid #DD0000;
}


/*
—————— STRUCTURES
*/
.project.structures
{
    background-color:   #0000D6;
}

/*
—————— LINE BALLET / GALERIE CHARLOT
*/
.project.galerie-charlot
{
    background-image:   url(../Img/Line_Ballet_1080p.jpg);
    background-size:    contain;
}

.project.galerie-charlot video
{
    object-fit:    contain;
}

/*
—————— SATO / BLUE, BLACK & GREY
*/
.project.sato-blue-black-grey .backgrounds
{
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100vh;
    display:    flex;
    flex-direction: column; 
}
.project.sato-blue-black-grey img
{
    position:   absolute;
}

.project.sato-blue-black-grey .backgrounds .background-top,
.project.sato-blue-black-grey .backgrounds .background-bottom
{
    flex:1;
}

.project.sato-blue-black-grey .backgrounds .background-top
{
    background: #7f7f7f;
}

.project.sato-blue-black-grey .backgrounds .background-bottom
{
    background: #8a8a8a;
}


/*
—————— HAZE / TRIBUTE TO HWF
*/

.project.haze-hwf img
{
    padding:            6%;
}

.project.haze-hwf
{
    background-color:   white;
}

.project.haze-hwf img
{
    padding:            6%;
}

/*
—————— RADIANCE
*/
.project.radiance
{
    background-color:   #0000D6;
}
.project.radiance img
{
    padding:            1.05%;
}

/*
—————— AATB
*/
.project.aatb img
{
    object-fit:         cover;
}


/*
—————— VERSUM
*/
.project.versum
{
    background-color:   white;
}
.project.versum img
{
    padding:            7%;
}

/*
—————— LIGNES
*/
.project.lignes img
{
    object-fit:         cover;
}


/*
—————— GRAPHIC WAVES
*/
.project.graphic-waves img
{
    object-fit:    cover;
}

/*
—————— DESSINS GEOMETRIQUES
*/
.project.dessins-geometriques
{
    background-color:   #E6DB76;
}

/*
—————— COMPUTER HISTORY
*/
.project.computer-history img
{
    object-fit: contain;
    padding: 4%;
}

/*
—————— P5LEARNABLE
*/
.project.p5Learnable
{
    background-color:   rgb(28,28,28);
    background-image:   url(../Img/p5LearnableProgramming.jpg);
    background-size:    contain;
}

.project.p5Learnable video
{
    object-fit:    contain;
}

/*
—————— DOMESTIKA
*/
.project.domestika
{
    background-size:    contain;
    background-size:    80%;
}

.project.domestika video
{
    object-fit:     contain;
    padding:        12%;
}


@media screen and (max-width: 1400px) 
{
    .main.index
    {
        height:                 75vh;
    }

    .menu
    {
        height:                 75vh;
    }

}


@media screen and (max-width: 1100px)
{
    body
    {
        overflow-y:         scroll;
        overflow-x:         hidden;
    }


    #menu-burger #title
    {
        font-size:             5.0vw;
        user-select:           none;
        transform :            unset;
    }

    #menu-burger a
    {
        font-size:              7.5vw;
    }

    h1
    {
        font-size:              6.5vw;
        line-height:            7.5vw;
    }

    h2
    {
        font-size:              5.5vw;
    }
    
    ul 
    {
        list-style:             none;
        padding:                0;
        margin:                 0;
    }
    
    li
    {
        font-size:              6vw;
    }

    p
    {
        font-size:              3.5vw;        
    }

    .menu
    {
        background-color:       black;
        width:                  100vw;
        height:                 80vh;
    }

    .main
    {
        flex-direction:         column;
        height:                 200vh;
    }

    .main.last-one-column
    {
        height:                 100vh;
    }

    .main.index
    {
        height:                 80vh;
    }

    .main .column.left
    {
        overflow-y:         hidden;
        overflow-x:         hidden;
    }


    .main .column.left,
    .main .column.right
    {
        flex:                   1;
        height:                 100vh;
    }

    .main.video-container {
        height: 100vh;
    }


    .main .column.left .social
    {
        flex-direction:         row;
    }
    
    .block 
    {
        margin-bottom:      1em;
    }    

    .block.header
    {
        margin-bottom:      0em;
    }    


    .project.illustration#sphere-02-container
    {
        height:             80vh;
        position:           absolute;
        top:                0;
        left:               0;
        z-index:            -100;
        opacity:            0.4;
        align-items:        center;
    }



    p.annex{
        display:            none;
    }

    .filler
    {
        display:            none;
    }

    .project.pathways img
    {
        transform:          translate(-8px,0px) scale(1.8);
    }

    .project.hypercombination img,
    .project.hyper img,
    .project.deambulations img,
    .project.orbe img
    {
        transform: unset;
    }

    .project.radiance img,
    .project.versum img
    {
        padding:    0;
    }


    .project.haze-hwf img
    {
        padding:            0;
    }    

/*
    .project.versum img 
    {
        padding:            1%;
    }
*/

    .project.domestika video
    {
        padding:        4%;
    }    

    #dicegl,
    #live-plotting
    {
        display:        none;
    }

}