:root{
  --grid-width:1240px;
  --center-width:600px;
  --column-width:240px;
  --padding:10px;
  --inner-margin:20px;
}

html {
  overflow-y:scroll;
}
    
body{
  margin:0;
  padding:0;
  box-sizing:border-box;
  min-height:100vh;
  min-width:320px;

}
    
main {
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width:calc(var(--grid-width) - 2*var(--padding));
  padding:0 var(--padding);
  margin:0 auto;
}

.left, .center, .right, .full{
  display:flex;
  flex-flow:column;
  width:100%;
  max-width:calc(var(--grid-width)/2);
  margin:0 auto;
  padding:0;
}

.full {
  position:relative;
  justify-content:center;
  max-width:calc((var(--grid-width)/2) - 20px);
  min-height:50px;
  padding:0 15px;
}

.banner{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  max-width:var(--grid-width);
  margin-bottom:20px;
}

.center{
  margin-bottom:40px!important;
}
 
.left{
  flex-direction:column;
}
 
.right{
  display:flex;
  flex-flow:column;
  margin-bottom:20px;
}

.right.fold{
  margin:-35px auto 0;
}

.sticky{
  display:inherit;
  flex-flow:inherit;
}

#tools{
  display:none;
}
    
.hide{
    display:none;
}

.no_margin{
  margin-bottom:0!important;
}

.single{
  max-width:calc(var(--grid-width)/2);
  margin:auto auto 40px;
}

.under {
  order:5;
}

@media (max-width:420px) {
  
  .full {
  }
}

@media (max-width:1220px) {
  
      .one{
        order:1!important;
      }
      
      .two{
        order:2!important;
      }
      
      .three{
        order:3!important;
      }
      
      .unset{
        order:unset!important;
      }
      
}

@media (min-width: 480px) {
		
    main{
      display:flex!important;
      flex-wrap:wrap;
      max-width:calc(var(--grid-width) - 2*var(--padding));
    }
        
    .center, .left, .right, .full {
      max-width:calc(var(--grid-width)/2);
    }
    
    .center{
      margin:auto;
    }
        
    .center.first{
      margin-top:0;
    }
        
}

	
	@media (min-width: 820px) {
      
      :root{
        --padding:20px;
        --inner-margin:30px;
      }
            
      .full{
        max-width:calc((var(--grid-width)/2) + 180px + 2*(var(--inner-margin)));
      }
            
      .center {
        width:calc(75% - var(--padding));
        margin:0 var(--inner-margin) 0 auto;
      }
      
      .left{
        width:100%;
        max-width:calc((var(--grid-width)/2) + 180px + 2*(var(--inner-margin)));
      }
        
      .right, .right.fold {
          width:calc(20% - var(--padding));
          flex-flow:column;
          margin:0 auto 0 var(--inner-margin);
          max-width:180px;
          justify-content:flex-start;
          order:1;
      }
      
      .right.top_over{
          margin-top:-180px;
      }
      
      .right .sticky{
        max-width:180px;
      }
        
      .center.first{
        margin-top:20px;
      }
        

      .ligograph, .full.ligo {
          max-width:calc(100% - 180px);
      }
        
      .sticky {
          position: fixed;
      }
      
      #tools{
        display:block;
      }
        
      .left.directory{
          order:2;
      }

	}
	
	@media (min-width: 1220px) {
        
      :root{
        --padding:30px;
        --inner-margin:30px;
      }
        
      main{
          justify-content:center;
          max-width:calc(var(--grid-width) - 2*var(--padding));
      }
        
      .full{
          flex-basis:calc(var(--grid-width) - 2*var(--padding))!important;
          max-width:none!important;
      }
        
      .left{
          flex-wrap:wrap;
          justify-content:flex-start;
          order:2;
          margin:0;
          flex-basis:240px;
          min-height:80vh;
      }
        
      .left.fixed, .left .fixed{
          position:absolute;
          width:240px;
          top:125px;          
      }
        
      .left.absolute{
          position:absolute;
          width:240px;
          margin-top:40px;
      }
    
      .center {
          order:3;
          flex-basis:calc(var(--grid-width)/2);
          margin:0 auto;
          padding-bottom:50px;
      }
        
        .center.absolute{
          margin-left:calc(var(--grid-width)/4);
          min-height:50vh;
        }
    
        .right{
            order:4!important;
            flex-flow:column!important;
            justify-content:flex-start!important;
            margin:0!important;
            max-width:180px!important;
        }
        
        .conf, .pers, .publi {
          display:inherit;
          flex-flow:column;
          justify-content:inherit;
          margin:0;
        }
        
        footer .grid{
          display:inherit;
          flex-flow:inherit;
            flex-basis:1228px;
            padding:40px 0;
        }
        
        .hide{
          display:inherit;
          flex-flow:inherit;
        }
        
        .left.hide{
          display:block;
        }
        
        
        .right.nofull{
        }
        
        .directory{
          position:relative;
          margin-top:-125px;
        }
        
	}