* {box-sizing:border-box}

@font-face {
    font-family: 'Sofia Sans';
    src: url('fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



body {
    margin: 0;
    padding: 35px;
  
    width: 100%;
    height: 100%;
  
    overflow: hidden;
    position: relative;
  
    background-image: url(media/openday5nov2023/Lynx1-medium.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  
    text-align: center;
  
    justify-content: center;
  
    background-color: #2a2a2a;
  
    overflow-y: scroll;
    font-family:'Sofia Sans', Times New Roman;
      }
  
      body::-webkit-scrollbar{
          display: none;
}



.sidebar{
    writing-mode: vertical-lr;
    text-align: left;
    height: 100%;
    width: 75px;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: #212121c2;
    overflow: hidden;
    padding-top: 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    }

    button.sidebarbutton{
        width: 100%;
        border-style: none;
        border-radius: 15px;
    
        cursor: pointer;
        background-color: #006eff00;
    
        font-size: 400%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
        }
    
        button.sidebarbutton:hover{
            background-color: #d6c5c9b9;
}



.gallery{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #d6c5c9b9;
    overflow: hidden;
    transition: 0.5s;

    font-weight: bold;

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    padding-left: 75px;
    }
    
    a.gallerylink:link {color:rgb(0, 0, 0); text-decoration: underline;}
    a.gallerylink:visited {color:rgb(0, 0, 0); text-decoration: underline;}
    a.gallerylink:hover {color: #f1f1f1; text-decoration: underline;}

    .gallerymenu {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #d6c5c9b9;
        overflow-x: hidden;
        padding-top: 20px;
        transition: 0.5s;

        border-left: dashed;
        font-size: 200%;
    }
  
    .gallerymenu a {
        text-decoration: none;
        color: #000000;
        display: block;
    }
  
    .gallerymenu a:hover {
        color: #f1f1f1;
    }

    .gallerymain {
        display: flex;
        flex-wrap: wrap;

        margin-right: 230px; 
        padding-left: 30px;
        height: 100%;

        overflow-y: scroll;
    }

    .gallerymain::-webkit-scrollbar{
        display: none;
}



.galleryblue{
    width: 100%;

    background-color: #5bcefb80;
    border-style: solid;
    border-radius: 25px;

    text-align: center;
    font-size: 200%;

    margin-top: 1%;
    margin-bottom: 1%;
    }

    .bluecover{
        height: 100%;
        width: 100%;
    }

    .blueheader{
        width: 100%;
        margin: 25px;
    }

    .bluerow{
        display: flex;
        flex-wrap: wrap;
    }

    .bluecolumn1, .bluecolumn2, .bluecolumn3{
        flex: 33;
        max-width: 33%;
    }

    .blueitem1, .blueitem2, .blueitem3{
        border-radius: 25px;
    
        width: 99%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }
    

    .blueitem1 img, .blueitem2 img, .blueitem3 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }
    
    .blueitem1 img:hover, .blueitem2 img:hover, .blueitem3 img:hover{
        transform: scale(1.05);
    }
    
    .blueitem1 video, .blueitem2 video, .blueitem3 video{
        padding: 5px;
        width: 95%;
        border-radius: 25px;
    
}



.schematics{
    width: 100%;

    background-color: #F5ABB980;
    border-style: solid;
    border-radius: 25px;

    text-align: center;
    font-size: 200%;

    margin-top: 1%;
    margin-bottom: 1%;
    }

    .schematiccover{
        height: 100%;
        width: 100%;
    }

    .schematichead{
        width: 100%;
        margin: 25px;
    }

    .schematicrow{
        display: flex;
        flex-wrap: wrap;
    }

    .schematiccolumn1, .schematiccolumn2, .schematiccolumn3{
        flex: 33;
        max-width: 33%;
    }

    .schematicitem1, .schematicitem2, .schematicitem3{
        border-radius: 25px;
    
        width: 99%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }
    
    .schematicitem1 img, .schematicitem2 img, .schematicitem3 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }
    
    .schematicitem1 img:hover, .schematicitem2 img:hover, .schematicitem3 img:hover{
        transform: scale(1.05);
    }

    .schematicrowitem{
        border-radius: 25px;
    
        width: 98%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }
    
    .schematicrowitem img{
        padding: 5px;
        max-width: 100%;
    
        border-radius: 25px;
        transition: transform .2s;
    }
    
    .schematicrowitem img:hover{
        transform: scale(1.01);
    }
    
    .schematicrowitem video{
        padding: 5px;
        width: 100%;
        border-radius: 25px;
}





.practicalgallery{
    width: 100%;

    background-color: #ddf072c2;
    border-style: solid;
    border-radius: 25px;

    text-align: center;
    font-size: 200%;

    margin-top: 1%;
    margin-bottom: 1%;
    }

    .practicalgallerycover{
        height: 100%;
        width: 100%;
    }

    .practicalgalleryhead{
        width: 100%;
        margin: 25px;
    }

    .practicalgalleryrow{
        display: flex;
        flex-wrap: wrap;
    }

    .practicalgallerycolumn1, .practicalgallerycolumn2, .practicalgallerycolumn3{
        flex: 33;
        max-width: 33%;
    }

    .practicalgalleryitem1, .practicalgalleryitem2, .practicalgalleryitem3{
        border-radius: 25px;
    
        width: 99%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }
    
    .practicalgalleryitem1 img, .practicalgalleryitem2 img, .practicalgalleryitem3 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }
    
    .practicalgalleryitem1 img:hover, .practicalgalleryitem2 img:hover, .practicalgalleryitem3 img:hover{
        transform: scale(1.05);
}




.video{
    width: 100%;

    background-color: #ffffff80;
    border-style: solid;
    border-radius: 25px;

    text-align: center;
    font-size: 200%;

    margin-top: 1%;
    margin-bottom: 1%;
    }

    .videocover{
        height: 100%;
        width: 100%;
    }

    .videohead{
        width: 100%;
        margin: 25px;
    }


    .videorow{
        display: flex;
        flex-wrap: wrap;
    }

    .videocolumn1, .videocolumn2, .videocolumn3{
        flex: 49.5%;
        max-width: 49.5%;
    }

    .videoitem1, .videoitem2, .videoitem03{
        border-radius: 25px;
    
        width: 99%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }

    video.jetengine, video.lynx{
        padding: 5px;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 25px;
    }


    /*
    .videorowitem{
    border-radius: 25px;
    
    width: 99%;
    height: auto;    
    margin-left: 1%;
    
    margin-bottom: 15px;
    
    background-color: #E2C4D8c2;
    
    padding: 5px; 
    
    border: solid;
    
    float: left;
    }

    .videorowitem video{
        padding: 5px;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 25px;
}
*/




.swagpictures{
    width: 100%;

    background-color: #7de9bcc2;
    border-style: solid;
    border-radius: 25px;

    text-align: center;
    font-size: 200%;

    margin-top: 1%;
    margin-bottom: 1%;
    }

    .swagpicturescover{
        height: 100%;
        width: 100%;
    }

    .swagpictureshead{
        width: 100%;
        margin: 25px;
    }

    .swagpicturesrow{
        display: flex;
        flex-wrap: wrap;
    }

    .swagpicturescolumn1, .swagpicturescolumn2, .swagpicturescolumn3{
        flex: 33;
        max-width: 33%;
    }

    .swagpicturesitem1, .swagpicturesitem2, .swagpicturesitem3{
        border-radius: 25px;
    
        width: 99%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }
    
    .swagpicturesitem1 img, .swagpicturesitem2 img, .swagpicturesitem3 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }
    
    .swagpicturesitem1 img:hover, .swagpicturesitem2 img:hover, .swagpicturesitem3 img:hover{
        transform: scale(1.05);
}




.randomgallery{
    width: 100%;

    background-color: #c381f8c2;
    border-style: solid;
    border-radius: 25px;

    text-align: center;
    font-size: 200%;

    margin-top: 1%;
    margin-bottom: 1%;
    }

    .randomgallerycover{
        height: 100%;
        width: 100%;
    }

    .randomgalleryhead{
        width: 100%;
        margin: 25px;
    }

    .randomgalleryrow{
        display: flex;
        flex-wrap: wrap;
    }

    .randomgallerycolumn1, .randomgallerycolumn2, .randomgallerycolumn3{
        flex: 33;
        max-width: 33%;
    }

    .randomgalleryitem1, .randomgalleryitem2, .randomgalleryitem3{
        border-radius: 25px;
    
        width: 99%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    
        float: left;
    }
    
    .randomgalleryitem1 img, .randomgalleryitem2 img, .randomgalleryitem3 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }
    
    .randomgalleryitem1 img:hover, .randomgalleryitem2 img:hover, .randomgalleryitem3 img:hover{
        transform: scale(1.05);
}














.log {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #d6c5c9b9;
    overflow: hidden;
    transition: 0.5s;

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    padding-left: 75px;
    }

    .logmenu {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #d6c5c9b9;
        overflow-x: hidden;
        padding-top: 20px;
        transition: 0.5s;

        border-left: dashed;
        font-size: 200%;
    }
  
    .logmenu a {
        text-decoration: none;
        color: #000000;
        display: block;
    }
  
    .logmenu a:hover {
        color: #f1f1f1;
    }

    .logmain {
        margin-right: 230px; 
        padding-left: 30px;
        padding-top: 30px;
        height: 100%;


        overflow-y: scroll;

    }

    .logmain::-webkit-scrollbar{
        display: none;
    }

    h1.logtext{
        text-align: left;
        font-size: 125%;
    }

    h2.logtext{
        text-align: left;
        font-size: 100%;
    }

    h3.logtext{
        text-align: left;
        font-size: 75%;
    }

    .logblue, .logpink, .loggreen{
    height: auto;
    border-style: solid;
    border-radius: 25px;
    background-color: #5bcefb80;
    padding: 50px;
    margin-bottom: 30px;
    text-align: left;
    font-size: 200%;
    }

    .logpink{
        background-color: #F5ABB980;
    }

    .loggreen{
        background-color: #5fee3380;
}





.main{
    border-radius: 25px;

    margin-left: 75px;
    
    max-width: 100%;

    padding: 15px;

    background-color: #D6C5C9a4;

    overflow-y: hidden;
    }

    .mainflex{
    display: flex;
    flex-direction: row;
}



.left{
    flex: 15%;
    max-width: 15%;

    border-radius: 25px;

    color: white;

    height: 100%;

    padding: 5px;
    padding-bottom: 10px; 
    background-color: #6D76A7;
    }

    .menuimages{
        width: 100%;
        height: auto;
    }

    .menuflex{
        display: flex;
        flex-direction: column;
    }

    .menuleft{
        flex: 100%;
    }

    .menuright{
        flex: 100%;
    }

    img.menubutterfly{
        max-width: 95%;
        margin-top: 5px;
    }

    img.menuvista{
        max-width: 95%;
        margin-top: 5px;
    }

    .collapsiblemenu {
        font-family:'Sofia Sans', Times New Roman; 
        font-size: 1.2vw;
        color: white;
        text-align: center;
        margin: 5px;
        border-radius: 25px;
      
        background-color: #6D76A7;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
    }
      
      .collapsiblemenu:after {
        content: '\2228';
        color: white;
        font-weight: bold;
        float: right;
        margin-left: 5px;
        background-color: #6D76A7;
    }
    
      .activemenu{
        background-color: #bbb;
    }
    
      .activemenu:after {
        content: "\2227";
        background-color: #bbb;
    }
      
      .contentmenu {
        font-family:'Sofia Sans', Times New Roman;
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #6D76A7;
        font-size: 1.2vw;
}

a.menulinks:link {color:white; text-decoration: none;}
a.menulinks:visited {color:white; text-decoration: none;}
a.menulinks:hover {color: #E2C4D8; text-decoration: none;}

a.menulinksdarker:link {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
a.menulinksdarker:visited {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
a.menulinksdarker:hover {color: white; text-decoration: none;}


.centerhidden{
    flex: 57.5%;
    max-width: 57.5%;
    height: auto;
    }

    .centervisible{
    border-radius: 25px;
    margin-left: 1%;
    margin-right: 1%;
    height: auto;
    width: 98%;
    padding: 2.5%;
    background-color: #ebd9dd44;
    font-size: 100%;
}

.collapsiblenotice {
    font-family:'Sofia Sans', Times New Roman; 
    font-size: 100%;
    color: rgb(218, 59, 59);
    margin: 5px;
    text-align: center;
    border-radius: 25px;
  
    background-color: #dccde7;
    cursor: pointer;
    padding: 18px;
    width: 98%;
    border: none;
    text-align: left;
    }

    .collapsiblenotice:after {
      content: '\2228';
      color: rgb(218, 59, 59);
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
  
    .activenotice{
        background-color: rgba(220, 205, 231, 0.50);
    }

    .activenotice:after {
      content: "\2227";
      background-color: rgba(220, 205, 231, 0.50);
    }
  
    .contentnotice {
      font-size: 150%;
      color: rgb(218, 59, 59);
      margin: 5px;
      text-align: center;
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #6d76a700;
      font-size: 1.2vw;
}

.collapsiblecenter {
    font-family:'Sofia Sans', Times New Roman; 
    font-size: 100%;
    color: white;
    text-align: center;
    margin: 5px;
    border-radius: 25px;
  
    background-color: #B598CC;
    cursor: pointer;
    padding: 18px;
    width: 98%;
    border: none;
    text-align: left;
    }
  
    .collapsiblecenter:after {
      content: '\2228';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
  
    .activecenter:after {
      content: "\2227";
    }
  
    .contentcenter {
      font-family:'Sofia Sans', Times New Roman;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #ff003300;
      border-radius: 25px;
      border: none;
}

a.middlelinks:link {color:#551A8B; text-decoration: none;}
a.middlelinks:visited {color:#551A8B; text-decoration: none;}
a.middlelinks:hover {color: #c484e4; text-decoration: none;}

/* Disable display: none; if the element needs to be visible!!! */
.warning{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;

    
    display: none;
    
    /* Disable display: none; if the element needs to be visible!!! */
}

.mobilenotice{
    display: none;
}


a.noticelink:link {color:rgb(218, 59, 59); text-decoration: underline;}
a.noticelink:visited {color:rgb(218, 59, 59); text-decoration: none;}
a.noticelink:hover {color:rgb(232, 255, 25); text-decoration: none;}


.about{
    border-radius: 25px;
    width: 100%;
    height: auto;    
    margin-bottom: 15px;
    background-color: #E2C4D8c2;
    padding: 5px; 
    border: solid;
}



.nextcloud{
        border-radius: 25px;
        width: 100%;
        height: auto;    
        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }

    h2.aligntext{
        text-align: left;
    }

    img.nextcloudimg{
        float: right;
        height: 200px;
        padding: 15px;
    }

    object.filetree{
        border-radius: 25px;
        height: 750px;
        width: 100%;
}



.theory{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .theoryleft{
        flex: 50%;
    }
    .theoryright{
        flex:50%;
        padding-top: 7%;
}


.hangar{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .hangarleft{
        flex: 50%;
        padding-top: 8%;
    }
    .hangarright{
        flex:50%;
}


.reports{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .reportsleft{
        flex: 50%;
    }

    .reportsright{
        flex:50%;
        padding-top: 13%;
}


.manuals{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;
    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .manualsleft{
        flex: 50%;
        padding-top: 3%;
    }
    .manualsright{
        flex:50%;
}


.jellyfin{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .pdfnotice{
        display: none;
    }

    img.jellyfinimg{
        float: right;
        height: 300px;
        padding: 5px;
    }

    iframe.library{
        border-radius: 25px;
        height: 750px;
        width: 100%;
}


.simulators{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .simulatorsleft{
        flex: 50%;
        padding-top: 0%;
    }
    .simulatorsright{
        flex:50%;
        padding-top: 0%;
    }

    img.simimg{
        width: 97.5%;
        border-radius: 25px;
        padding: 5px;
}



.qrcodes{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .qrcodes1{
        flex: 25%;
    }
    .qrcodes2{
        flex: 25%;
        border-style: none none none dashed;
    }
    .qrcodes3{
        flex: 25%;
        border-style: none none none dashed;
    }

    img.qrcodesimg{
        max-width: 75%;
        border-radius: 25px;
}


.calendar{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    iframe.icalendar{
        border-radius: 25px;
        height: 750px;
        width: 95%;
        padding: 5px; 
        border: solid;
}


.schedule{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;
    border: solid;
}



.dockerstatus{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);
    border: solid;
}



.supplies{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }

    .suppliesleft{
        flex: 50%;
        padding-top: 4%;
    }

    .suppliesright{
        flex:50%;
}



.referencemanuals{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }

    .referencemanualsleft{
        flex: 50%;
    }
   .referencemanualsright{
        flex:50%;
}


.code{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }

    .codeleft{
        flex: 50%;
        padding-top: 5%;
    }
    .coderight{
        flex:50%;
}


.itsetup{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }

    .itsetupleft{
        flex: 50%;
    }
    .itsetupright{
        flex:50%;
        padding-top: 3%;
}




.right{
    flex: 27.5%;
    max-width: 27.5%;
    height: 100%; 
    background-color: #ebd9dd44;;
    padding: 10px;
    border-radius: 35px;

}

.rightcolumn{
    padding: 10px;
    border-radius: 35px;
    background-color: #D6C5C9a4;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    }

    span.rightcolumnnotice{
        font-size: 300%;
        text-align: center;
        margin: 10px;
        width: 100%;
        max-width: 100%;
    }

    .rightcolumn1, .rightcolumn2, .rightcolumn3{
        flex: 100%;
        max-width: 100%;
}


a.rightlinks:link {color:rgb(0, 0, 0); text-decoration: underline;}
a.rightlinks:visited {color:rgb(0, 0, 0); text-decoration: underline;}
a.rightlinks:hover {color: #EBD9DD; text-decoration: underline;}


.amc{
    border-radius: 25px;
    width: 100%;
    height: auto;
    padding-top: 10px;
    background-color: rgb(77, 141, 179);
    margin-bottom: 15px;
    border-style: solid;    
    }
    img.amc66{
        max-width: 95%;
        border-radius: 25px;
        border-style: solid; 
        border-color: black;
}

/*AMC Notices*/
.amcnotice1, .amcnotice2{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #4D8DB3;
    margin-bottom: 15px;
    border-style: solid;
    }
    
    
    img.amcnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
}

/* Vista - ACC relevant Notices*/
.newyear, .breakfest{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-image: linear-gradient(to right, #ec644a, #448cd0);
    margin-bottom: 15px;
    border-style: solid;
    }

/* Vista Notices*/
.elective, .orientationday, .mijnvista{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
    }

    img.vistanotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }


/*ACC Notices*/
.bbq, .door, .news{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #448cd0;
    margin-bottom: 15px;
    border-style: solid;
    }

    img.accnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }

    
/*Swag Aviation Notices*/
.adresschange, .mobileupdate{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #B598CC;
    margin-bottom: 15px;
    border-style: solid;
    overflow-x: hidden;
    }

    img.swagnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }

/*
.openevening{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
}

.skills{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #B598CC;
    margin-bottom: 15px;
    border-style: solid;
}

.openday{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
}
*/



.bottominfo{
    border-radius: 25px;
    margin-top: 1%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottom::-webkit-scrollbar{
        display: none;
    }

    .info{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    a.bottomlink:link {color:#121d83; text-decoration: underline;}
    a.bottomlink:visited {color:#121d83; text-decoration: none;}
    a.bottomlink:hover {color:#279494; text-decoration: none;}

    .personalcontact{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: 100%;   
    }

    .contact{
        flex: 34%;
        max-width: 34%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }

    .karlijn{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }

    span.contactwhite{
        font-size: 140%;
        color: rgb(0, 0, 0);
        margin: 1px;
        text-align: center;
    }

    span.contactblue{
        font-size: 140%;
        color: #0d1988;
        margin: 1px;
        text-align: center;
}


.bottomnotice{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottomnotice::-webkit-scrollbar{
        display: none;
    }

    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .noticetext{
        flex: 50%;
        max-width: 50%;
        padding: 5px;
        height: 100%;   
    }


    .acclogo{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }
    img.bottomacclogo{
        max-width: 100%;
        padding-top: 0%;
    }

    .amclogo{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;
    }

    img.bottomamclogo{
        max-width: 100%;
        padding-top: 10%;
}


.bottomlogos{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottomlogos::-webkit-scrollbar{
        display: none;
    }

    .logos{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .unraid{
        flex: 14%;
        max-width: 14%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .unraid::-webkit-scrollbar{
        display: none;
    }
    
    .docker{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .docker::-webkit-scrollbar{
        display: none;
    }

    .mariadb{
        flex: 11%;
        max-width: 20%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .mariadb::-webkit-scrollbar{
        display: none;
    }

    .nextcloudlogo{
        flex: 11%;
        max-width: 20%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .nextcloudlogo::-webkit-scrollbar{
        display: none;
    }

    .jellyfinlogo{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .jellyfinlogo::-webkit-scrollbar{
        display: none;
    }

    .handbrake{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .handbrake::-webkit-scrollbar{
        display: none;
    }

    .ytdl{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .ytdl::-webkit-scrollbar{
        display: none;
    }

    .nginx{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .nginx::-webkit-scrollbar{
        display: none;
    }

    .cloudflare{
        flex: 13%;
        max-width: 13%;
        padding: 5px;
        height: 100%;   
        overflow-y: scroll;
    }
    .cloudflare::-webkit-scrollbar{
        display: none;
}


@media (max-width: 1200px){

    .bluecolumn1, .bluecolumn2{
        flex: 50%;
        max-width: 50%;
    }

    .blueitem1, .blueitem2{
        width: 98%;
    }

    .bluecolumn3{
        flex: 99%;
        max-width: 99%;
    }
    
    .blueitem3{
        width: 49%;
    }

    .schematiccolumn1, .schematiccolumn2{
        flex: 50%;
        max-width: 50%;
    }

    .schematicitem1, .schematicitem2{
        width: 98%;
    }

    .schematiccolumn3{
        flex: 99%;
        max-width: 99%;
    }

    .schematicitem3{
        max-width: 49%;
    }

    .practicalgallerycolumn1, .practicalgallerycolumn2{
        flex:  50%;
        max-width: 50%;
    }

    .practicalgalleryitem1, .practicalgalleritem2{
        width: 98%;
    }

    .practicalgallerycolumn3{
        flex: 99%;
        max-width: 99%;
    }

    .practicalitem3{
        max-width: 49%;
    }

    .swagpicturescolumn1, .swagpicturescolumn2{
        flex:  50%;
        max-width: 50%;
    }

    .swagpicturesitem1, .swagpicturesitem2{
        width: 98%;
    }

    .swagpicturescolumn3{
        flex: 99%;
        max-width: 99%;
    }

    .swagpicturesitem3{
        max-width: 49%;
    }

    .randomgallerycolumn1, .randomgallerycolumn2{
        flex:  50%;
        max-width: 50%;
    }

    .randomgalleryitem1, .randomgalleryitem2{
        width: 98%;
    }

    .randomgallerycolumn3{
        flex: 99%;
        max-width: 99%;
    }

    .randomgalleryitem3{
        max-width: 49%;
    }



    .mainflex{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .left{
        flex: 25%;
        max-width: 25%;
    }
 
    .centerhidden{
        flex: 75%;
        max-width: 75%;
        margin-bottom: 5px;
    }

    .simulatorsright{
        padding-top: 10%;
    }

 


    .right{
        flex: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }
        
        .rightcolumn1, .rightcolumn2, .rightcolumn3{
            flex: 32%;
            max-width: 32%;
            height: 100%;
            margin-right: 0.66%;
            margin-left: 0.66%;
    }

        
    img.bottomacclogo{
        padding-top: 60%;
        }
        
    img.bottomamclogo{
        padding-top: 35%;
    }
}

@media (max-width: 800px){
    body {
        padding: 2px;
    }

    .sidebar{   
        display: none;
    }

    .gallery{
        display: none;
        }
    
    .log {
        display: none;
        }

    .main{
        max-width: 100%;
        padding: 5px;
        background-color: #D6C5C9a4;
        overflow-y: hidden;

        margin: 5px;
        }
    
        .mainflex{
        display: flex;
        flex-direction: column;
    }
    


    .left{
        flex: 100%;
        max-width: 100%;
        margin-bottom: 5px;
        }
    
        .menuflex{
            display: flex;
            flex-direction: row;
        }

        .menuleft{
            flex: 50%;
        }
    
        .menuright{
            flex: 50%;
        }

        img.menubutterfly{
            max-width: 45%;
        }
    
        img.menuvista{
            max-width: 45%;
            position: relative;
            margin-left: 5%;
            top: -25px
        }
    
        .collapsiblemenu {
            font-size: 125%;

        }
          .contentmenu {
            font-size: 100%;
    }
    



    .centerhidden{
        flex: 100%;
        max-width: 100%;
        margin-bottom: 5px;
        }

        .collapsiblenotice {
            font-size: 80%;
        }

        .contentnotice {
            font-size: 50%;
        }

        .collapsiblecenter {
            font-size: 75%;
        }

        .contentcenter {
            font-size: 90%;
    }
    
    .mobilenotice{
        display: block;
        
        border-radius: 25px;

        width: 100%;
        height: auto;    
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
    }
    
    .about{
        flex-direction: column;
        border-radius: 25px;
        width: 100%;
        height: auto;    
        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }
    
    
    .nextcloud{
            border-radius: 25px;
            width: 100%;
            height: auto;    
            margin-bottom: 15px;
            background-color: #E2C4D8c2;
            padding: 5px; 
            border: solid;
        }
    
        h2.aligntext{
            text-align: center;
        }

        img.nextcloudimg{
            width: 100%;
            height: auto;
    }

    
    .theory{
        flex-direction: column;
        }
    
        .theoryleft{
            flex:100%;
        }
        .theoryright{
            flex:100%;
            padding-top: 0%;
    }
    
    .reports{
        flex-direction: column;
        }
    
        .reportsleft{
            flex:100%;
        }
        .reportsright{
            flex:100%;
            padding-top: 0%;
    }


    .hangar{
        flex-direction: column;
        }
    
        .hangarleft{
            flex: 100%;
            padding-top: 0%;
        }
        .hangarright{
            flex:100%;
    }
    
    .manuals{
        flex-direction: column;
        }
    
        .manualsleft{
            flex:100%;
        }
        .manualsright{
            flex:100%;
            padding-top: 0%;
    }
    
    
    .jellyfin{
        border-radius: 25px;
    
        width: 100%;
        height: auto;    
    
        margin-bottom: 15px;
    
        background-color: #E2C4D8c2;
    
        padding: 5px; 
    
        border: solid;
        }
    
        .pdfnotice{
            display:contents;
            width: 100%;
            color: red;
        }

        iframe.library{
            display: none;
    }
    
    
    .simulators{
        flex-direction: column;
        }
    
        .simulatorsleft{
            flex:100%;
            padding-top: 0%;
        }
        .simulatorsright{
            flex:100%;
            padding-top: 0%;
        }

        img.simimg{
            width: 75%;
    }


    .qrcodes{
        flex-direction: column;
        }
    
        .qrcodes1{
            flex: 100%;
        }
        .qrcodes2{
            flex: 100%;
            border-style: dashed none none none;
        }
        .qrcodes3{
            flex: 100%;
            border-style: dashed none none none;
        }
        img.qrcodesimg{
            width: 50%;
    }


    iframe.icalendar{
        height: 400px;
    }



    .supplies{
        flex-direction: column;
        }
    
        .suppliesleft{
            flex: 100%;
            padding-top: 0%;
        }
        .suppliesright{
            flex:100%;
    }


    .referencemanuals{
        flex-direction: column;
        }
    
        .referencemanualsleft{
            flex:100%;
        }
        .referencemanualsright{
            flex:100%;
            padding-top: 0%;
    }


    .code{
        flex-direction: column;
        }
    
        .codeleft{
            flex: 100%;
            padding-top: 0%;
        }
        .coderight{
            flex:100%;
    }
    
    
    .itsetup{
        flex-direction: column;
        }
    
        .itsetupleft{
            flex: 100%;
        }
        .itsetupright{
            flex: 100%;
            padding-top: 0%;
    }


    .rightcolumn{
        max-width: 100%;
    }

    .right{
        flex: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;
        }
    
        .rightcolumn1, .rightcolumn2, .rightcolumn3{
            flex: 100%;
            max-width: 100%;
    }



    
    .info{
        display: flex;
        flex-direction: column;
        }
    
        .personalcontact{
            flex: 100%;
            max-width: 100%;
        }
    
        .contact{
            flex: 100%;
            max-width: 100%;
            border-style: dashed none none none;
        }
    
        .karlijn{
            flex: 100%;
            max-width: 100%;
            border-style: dashed none none none;
    }

    
    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }   
    
        .noticetext{
            flex: 100%;
            max-width: 100%;
            border-style: none none dashed none;
        }

        .acclogo{
            flex: 30;
            max-width: 30%;
            border-style: none;
        }
        img.bottomacclogo{
            max-width: 100%;
            padding-top: 0%;
        }
    
        .amclogo{
            flex: 70%;
            max-width: 70%;
            border-style: none;
        }
        img.bottomamclogo{
            max-width: 100%;
            padding-top: 10%;
    }

    
    .bottomlogos{
        border-radius: 25px;
        margin-top: 1%;
        width: 100%;
        height: auto;   
        padding: 5px; 
        background-color: rgba(255, 255, 255, 0.63);
        }
    
        .bottomlogos::-webkit-scrollbar{
            display: none;
        }
    
        .logos{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border-radius: 25px;
            height: 100%;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.322);
            border: solid;
        }
    
        .unraid{
            flex: 25%;
            max-width: 25%;
        }
        
        .docker{
            flex: 25%;
            max-width: 25%;
        }
    
        .mariadb{
            flex: 25%;
            max-width: 25%;
        }
    
        .nextcloudlogo{
            flex: 25%;
            max-width: 25%;
        }
    
        .jellyfinlogo{
            flex: 20%;
            max-width: 20%;
        }
    
        .handbrake{
            flex: 20%;
            max-width: 20%;
        }
    
        .ytdl{
            flex: 20%;
            max-width: 20%;
        }
    
        .nginx{
            flex: 20%;
            max-width: 20%;
        }
    
        .cloudflare{
            flex: 20%;
            max-width: 20%;
    }
}