@keyframes bg-anim {
    0% {
      background-image: url(../images/line01.svg);
    }
   
  
    100% {
        background-image: url(../images/line02.svg);
      }
  
  }


.log{
    z-index:20000;
    top:100;
    left:0;
    position:fixed;
    font-size:3rem;
    color:red;
}
html, body{
    margin:0;
    padding:0;
    font-size:var(--unit);
    font-family:cmuTypewriter;
    width:100%;

}
*, ::before, ::after {
    box-sizing: border-box;
}
*, ::before, ::after {
    background-repeat: no-repeat;
}

a{
    font-family:cmuTypewriter;
    color:var(--main-color);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6{
    margin:0;
    padding:0;
    font-weight:normal;
}
h2{
    font-family:cmuTypewriter;
    font-size:5.5rem;
    line-height:6rem;
    text-transform:uppercase;
}
h3{
    font-family:cmuTypewriter;  
    text-align:center;
    padding:2rem;
}
h4{
    font-family:cmuTypewriter;  
    margin:2rem 0;
}
p{
    margin:0 0 1em 0;
}
img {
    pointer-events: none;
  }



header{
    width: 100%;
    position: fixed;
    z-index: 10000;  
    padding: 4rem 4rem 0 4rem;
    top: 0;
    background: white;
}
header h1{
    font-size: 5rem;
    /*background: var(--main-color);*/
    
    animation:bg-anim 10s infinite;
    background-size:100% 100%;

    height: 1ex;
    line-height: 2.5rem;
    position: relative;

}
header h1 span{
    color: var(--main-color);
    background: white;
    position: absolute;
    display: block;
    padding-right: 1rem;
    height: 3rem;
}
header h1 span:last-child{
    right:0;
    padding-left:1rem;

}

nav{
    height:4rem;
  
    margin-left:2ch;
    margin-right:10ch;
    display: flex;
    font-size:5rem;
  
}
nav ul{
    list-style: none;
    margin:0;
    padding:0;
    height:auto;
    background:white;
    text-transform:lowercase;
    display:flex;
    font-size:3rem;
    width:calc(100% - 8rem);
    line-height:4rem;
}
nav ul li{
  flex-grow:1;
}
nav ul li a{
    display:block;
    width:100%;
    color:var(--main-color);
    text-decoration: none;
    padding-left:1rem;
}
nav ul li.active, nav ul li:hover{
    background-color:var(--sec-color);
}
nav div.socials-lng{

    color:var(--main-color);
    background:white;
    font-size:3rem;
    line-height:4rem;
    text-align:right;

}

main{

    font-size:5rem;
    margin-left:calc(4rem + 2ch);
    margin-right:calc(4rem + 10ch);
    background:var(--body-color);

    position:relative;
    margin-top:10rem;

}
/*
.about main{
    height:calc(100vh - 12rem);
    overflow:auto;
    overflow-y:hidden;

    
}*/

.word-rand{
    color:var(--primary-color);
}


.intro{
    width:100%;
    
    text-align:center;
    color:var(--main-color);
    font-size:15rem;
    line-height:1em;
    display:flex;
    flex-shrink:0;
    flex-direction: column;
    justify-content: center;
    font-family:cmuSerif;

    text-transform:lowercase;
   /* text-shadow:-1px -1px 0 var(--third-color), 1px -1px 0 var(--third-color), -1px 1px 0 var(--third-color), 1px 1px 0 var(--third-color);
  */
    height:calc(100vh - 12rem);
        
}
.intro p{
    margin:0;
}
figure{
    margin:0 0 2rem 0;
    width:100%;
    cursor:grab;
}

figure img{
    height:auto;
    width:100%;
    display:block;
}
figcaption{
    font-family: cmuTypewriter;
font-size: 0.7em;
background:var(--body-color);
}
.text-flow figure{
    height:50%;

    width:100%;
    
    display:flex;
}
.text-flow figure img{
    max-width:50%;
    max-height:100%;
}
.text-flow figure figcaption {
    width: 50%;
    font-size: 0.8em;
    line-height: 1.1em;
    padding: 1rem;
}

.video-container {     margin-top:2rem; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video-caption{
    font-size: 0.8em;
    line-height: 1.1em;
    padding: 1rem;

}
.body-text a{
    background-color:var(--sec-color);
}
.body-text{
    display:flex;
    align-items: flex-start;
    font-family:cmuSerif;
    font-size:3rem;
    line-height:3.5rem;
    padding: 2rem 4rem 4rem 4rem;

}
.body-text.single{
    font-size:4rem;
    line-height:4.5rem;
}
.body-text.single>div{
    width:75%;
}
.body-text>div{
    width:50%;
    padding-right:4rem;
}

.body-text p{
    margin-bottom:0;
    text-indent:4rem;
}
.body-text p:first-child{
    text-indent:0;
}





.about .body-text, .activities .body-text{
    display:block; 
    

}
.about .body-text div{
    margin:0 auto 4rem auto;
    
}
.logos img{
    width:300px;
}

.activities .body-text>div{
    border-bottom:1px solid var(--main-color);
    padding-bottom:1rem;
}


.activities .body-text div a{
    color:black;
    font-family:cmuSerif;
}
.activities .body-text div a a{
    color:var(--main-color);
}
.activities .read-more{
    display:block;
    text-align:right;
    color:var(--main-color);
}
.body-text div.practicals{
    margin:2rem 4rem;
}
.practicals p{
    text-indent:0;
}
.main-schema{
    position:absolute;
    top:0;
}
.body-text > div.main-image{
    width:100%;
    margin:0 auto;
    display:none;
    
}
.main-image img{
    display:none;

    filter: grayscale(100%);
    opacity: 0.2;
    max-width: 100%;
    max-height: 100%;
}

.team main ul{
    
    padding:0;
    list-style: none;
    width:50%;

}
.team main ul li{
    border-bottom:1px solid var(--main-color);
    padding:1rem 1rem 1rem 0;
    font-size:3rem;
    margin:0;
}
.team main ul li span{

    display:inline-block;
    padding:0 1rem;
}
.team main ul li span:not(:last-child){
    border-right: 1px solid var(--main-color);
}
.team main ul li:hover{
    color:white;
    background:var(--main-color);

}
.team main ul li:hover a{
    color:white;
}
.team main ul li:hover span{
    border-color:white;
}

.body-text div{
    margin-bottom:4rem;
}
span.date{
    display:block;
}


/* SCHEMA */
.schema{
    height: calc(100vh - 12rem);
}
.main-schema{
    cursor:move;
}
.node{
    cursor:grab;
}
a.node-type-1, a.node-type-2{
    cursor:pointer;
    font-style: italic;

}


.gallery-module{
    position:absolute;
    width:100%;
    height:100%;
    font-size: 2.5rem;
    opacity:0;
    z-index:1;
    transition: opacity 300ms linear;
    
}
.gallery-module.loaded{
    opacity:0.2;
}
.gallery-module.active{
    z-index:2000;
    opacity:1;
    pointer-events:none;
}
.gallery-module figure{
    pointer-events: all;
}
.gm-content{
    position:relative;
    opacity:0.5;
}

.gm-content.active{
    z-index:2000;
    opacity:1;
    pointer-events: none;
}
.gm-content *{
    pointer-events: all;
}

.intro.gm-content.active *{
    pointer-events: none;
}
.team .gallery-module figure{
    width:50%;
}
.gallery-module figure{
    width:500px;
    height:auto;
    position:absolute;
    user-select: none;
}

.gallery-module figure.current{
    z-index:3000;
}

.gallery-module figure .iframe-over {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.gallery-module figure .iframe-over.disable{
    display:none;
}

.switch{
    position:fixed;
    right:calc(6rem + 10ch);
    top:12rem;
    width:4rem;
    height:4rem;
    background:url('../images/ico-layer.svg');
    background-size:cover;
    z-index:10000;
    

    cursor:pointer;
}

footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:white;
    height:6rem;
    text-align:center;
    z-index:1000000;

}

footer img{
    margin-top:0.5rem;
    height:5rem;
    width:auto;
    display:inline-block;
    margin-right:2rem;
}

ul.files{
    list-style: none;
    margin:0 0 2rem 0;
    padding:0;
}
ul.files li:before{
    content:'→ ';

}