html {
  overflow-y: scroll;
}
    
body{
      font-size: 12pt;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      min-height:100vh;
      background-color:#fff;
  }
    
    header {
        display:flex;        
        background:#004C66;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index:3;
    }
    
    nav{
        display:flex;
        height:40px;
        padding:0 0 10px;
        flex-basis:100%;
        background-color:#005F7F;
    }
    
    main, #main {
      display: flex;
      margin-top:60px;
      flex-direction:row;
      flex-wrap: wrap;
      justify-content: flex-start;

    }

    .full, .grid {
        display:flex;
        flex-wrap:wrap;
        margin: 0;
        padding:5px 10px;
        flex-basis:100%;
        background-color: #fff;
    }
    
    .full {
        position:relative;
        padding:0 0 10px;
        flex-direction:column;
    }
    
    .left, .center, .right{
        width:100%;
        margin:0;
        padding:0;
    }
    
    .center.first{
      margin-top:20px;
    }
    
    .ligograph{
      display:flex;
      flex-direction:row;
      flex-wrap: wrap;
      height:calc(95vh - 160px);
      justify-content:flex-start;
      margin-bottom:40px;
    }
    
    .right{
        display:flex;
        flex-flow:row wrap;
        justify-content:space-between;
    }
    
    .left{
        flex-direction:column;
    }
    
    .centered{
        width:100%;

    }
    
    .fold{
        display:inherit;
        position:fixed;
        justify-content:flex-start;
        top:0;
        left:100px;
        z-index:5;
        max-width:50%;
    }
    
    .right.nofold, .right.nofull{
        width:100%;
        max-width:625px;
        margin-left:0;
        margin-bottom:0px;
    }
    
    .top{
        margin-top:0!important;
    }
    
    .row{
        flex-flow:row wrap;
    }
    
    .conf {
        display:flex;
        flex-flow:row wrap;
        justify-content:space-between;
        align-items:flex-start;
        margin-top:20px;
    }
    
    .medaillon{
      position:relative;
      margin-left:125px;
      min-height:180px;
      margin-top:-172px;
    }

    .medaillon.pub{
      margin-left:80px;
      margin-top:-120px;
      min-height:120px;
    }
    
    .sticky{
        display:inherit;
        flex-flow:inherit;
    }
    
    footer, footer .grid{
        display:flex;
        flex-flow:row wrap;
        justify-content: center;
        background-color:#404040;
        z-index:50;
    }
    
    .hide{
        display:none;
    }
    
    .pagination a {
      padding:5px;
    }
    
    .pagination .active {
      font-weight:800;
    }

	@media (min-width: 480px) {
		
        main, #main{
          top:60px;
        }
        
        .grid {
          display:flex;
          flex-wrap:wrap;
          padding:25px 40px;
        }
        
        nav{
            padding:0 40px 20px;
        }
        
        .center, .left{
            max-width:625px;
        }
        
        .center.first{
          margin-top:0;
        }
        
        .fold{
            left:150px;
        }
        
        .medaillon, .medaillon.pub{
          margin-left:150px;
          max-width:450px;
        }
        
        .medaillon{
          margin:-172px 0 5px 140px;
          min-height:170px;
        }

        .medaillon.pub{
          margin-top:-195px;
          min-height:190px;
        }
        
	}
  
  @media (max-width: 1228px) {
  
      .one{
        order:1!important;
      }
      .two{
        order:2!important;
      }
      
      .three{
        order:3!important;
      }
      
      .unset{
        order:unset!important;
      }
      
  }

	
	@media (min-width: 768px) {
        
        .grid{
            max-width:800px;
            margin:0 auto;
        }
        
        .full{
          padding-bottom:10px;
        }
         
        .center, .left {
            flex-basis:75%;
            margin:0 0 20px;
        }
        
        .center.first{
          margin-top:20px;
        }
        
        .fold{
            left:auto;
            justify-content:flex-end;
            position:relative;
            z-index:0;
        }
        
        .centered{
            max-width:625px!important;
        }
        
        .ligograph, .full.ligo {
          max-width:calc(100% - 180px);
          min-width:300px;
        }
        
        .right{
            margin:0 0 0 auto;
            flex-direction:column;
            width:120px;
            justify-content:flex-start;
            align-items:center;
            order:1;
        }
        
        .sticky {
            position: fixed;
        }
        
        .left.directory{
          order:2;
        }
        
        .right.nofold, .right.nofull {
            margin-left:auto;
            order:5;
            width:140px;
        }
        
        .right.pub{
          margin-top:-130px;
        }
        
        .conf {
          margin:10px 0 -20px;
        }
        


	}
	
	@media (min-width: 1228px) {
        
        body{
            background: #f9f9f9;
        }
        
        nav {
            flex-basis:1122px;
            padding:0 60px 20px;
        }
        
        main, #main{
            justify-content:center;
        }
        
        .full, .grid {
            flex-basis:1122px;
            max-width:none;
            margin:0;
        }
        
        .grid{
            padding:15px 60px;
        }
        
        .left{
            flex-wrap:wrap;
            order:2;
            margin:0;
            flex-basis:240px;
            min-height:80vh;
        }
        
        .left.fixed, .left .fixed{
          position:absolute;
          width:240px;
          top:125px;          
        }
    
        .center {
            order:3;
            flex-basis:625px;
            margin-left:58px;
            padding-bottom:50px;
        }
    
        .right{
            order:4;
            margin-top:0;
            width:140px;
        }
        
        .fold{
            position:relative;
            top:auto;
            right:auto;
        }
        
        .centered{
            margin-left:300px;
        }
        
        .conf, .pers, .publi {
          display:inherit;
          flex-flow:column;
          justify-content:inherit;
          margin:0;
        }
        
        .medaillon, .medaillon.pub {
          margin:0 0 20px;
          max-width:none;
          min-height:auto;
        }
        
        footer .grid{
            flex-basis:1228px;
            padding:40px 0;
        }
        
        .hide{
          display:inherit;
        }
        
        .left.hide{
          display:block;
        }
        
        .right.nofold{
            margin-left:auto;
            width:140px;
        }
        
        .right.nofull{
        }
        
        .directory{
          position:relative;
          margin-top:-125px;
        }
        
	}