/* Imports fonts and gives it name */
/* Passion Conflict - Passion */
@font-face {
    font-family: 'Sofia Sans';
    src: url('fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {box-sizing:border-box}





.collapsible {
    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;
  }
  
  .collapsible:after {
    content: '\2228';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    background-color: #6D76A7;
  }

  .active{
    background-color: #bbb;
  }

  .active:after {
    content: "\2227";
    background-color: #bbb;
  }
  
  .content {
    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;
}





.collapsible2 {
    font-family:'Sofia Sans', Times New Roman; 
    font-size: 250%;
    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;
    }

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

    .active2:after {
      content: "\2227";
      background-color: rgba(220, 205, 231, 0.50);
    }
  
    .content2 {
      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;
}





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

      border-radius: 25px;
      border: none;
}






body {
  margin: 0;
  padding: 35px;

  width: 100%;
  height: 100%;

  overflow: hidden;
  position: relative;

  background-image: url(media/openday5nov2023/Linx1-medium.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  text-align: center;

  justify-content: center;

  animation: change 20s infinite ease-in-out;
  animation-delay: 1s;
  animation-duration: 60s;

  background-color: #2a2a2a;

  overflow-y: scroll;
  font-family:'Sofia Sans', Times New Roman;
    }

    body::-webkit-scrollbar{
        display: none;
}





.slidemenu {
    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.slidebutton{
    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.slidebutton: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;

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

    padding-left: 75px;
    }
    
    .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 {
        margin-right: 230px; 
        padding-left: 30px;
        height: 100%;

        overflow-y: scroll;
    }

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

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




.gallerygroupblue{
    width: 100%;
    display: flex;

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

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

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

    .gallerygrouppink{
        width: 100%;
        display: flex;

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

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

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

    .gallerygroupwhite{
        width: 100%;
        display: flex;

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

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

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




.galleryitem32{
    border-radius: 25px;

    width: 32%;
    height: auto;    
    margin-left: 1%;

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;

    float: left;
    }

    .galleryitem32 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }

    .galleryitem32 img:hover{
        transform: scale(1.05);
    }


    .galleryitem32 iframe{
        padding: 5px;
        width: 95%;
        aspect-ratio: 16 / 9;
        border-radius: 25px;

}




.galleryitem98{
    border-radius: 25px;

    width: 98%;
    height: auto;    
    margin-left: 1%;

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;

    float: left;
    }

    .galleryitem98 img{
        padding: 5px;
        max-width: 100%;

        border-radius: 25px;
        transition: transform .2s;
    }

    .galleryitem98 img:hover{
        transform: scale(1.01);
    }

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




.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{
    height: auto;
    border-style: solid;
    border-radius: 25px;
    background-color: #5bcefb80;
    padding: 50px;
    margin-bottom: 30px;
    text-align: left;
    font-size: 200%;
    }

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

    .logwhite{
        height: auto;
        border-style: solid;
        border-radius: 25px;
        background-color: #ffffff80;
        padding: 50px;
        margin-bottom: 30px;
        text-align: left;
        font-size: 200%;
}




.main{
    border-radius: 25px;
    margin-left: 70px;
    height: 100%;
    max-width: 100%;

    padding: 15px;

    background-color: #D6C5C9a4;

    overflow-y: hidden;
    }

    .menu {
        border-radius: 25px;

        width: 15%;

        height: auto;

        padding: 5px; 
        background-color: #6D76A7;

        float: left;
    }

    .menuspacer{
        height: 25px;
        width: 100%;

        background-color: rgba(129, 33, 219, 0);
}






.middleboxhidden{
  float: left;
  width: 50%;
  height: auto;

  background-color: rgba(243, 13, 224, 0);
    }

    .middleboxvisible{
        border-radius: 25px;

        margin-left: 1%;
        margin-right: 1%;

        width: 98%;
        height: auto;

        padding: 2.5%;
    
        background-color: #ebd9dd44;
    }

    .flexcontainer{
        border-radius: 25px;

        width: 100%;

        margin-bottom: 15px;

        background-color: #E2C4D8c2;

        display: -webkit-flex; 
        display: flex 1;

        border: solid;
    }

        .column65l{   
           flex: 1 1 65%;
        
        
            background-color: rgba(168, 21, 21, 0);
        
            float: left;    
        }

        .column35r{    
            flex: 1 1 35%;
            background-color: rgba(168, 21, 21, 0);
            float: left;    
            border-style: none none none dashed;
        }

        .column35l{
            flex: 1 1 35%;
            background-color: rgba(168, 21, 21, 0);
        
            float: left;  
        }

        .column65r{
            flex: 1 1 65%;
            background-color: rgba(168, 21, 21, 0);
            float: left;    
            border-style: none none none dashed;
        }

        .column50l{
            flex: 1 1 50%;
            background-color: rgba(168, 21, 21, 0);
        
            float: left;  
        }

        .column50r{
            flex: 1 1 50%;
            background-color: rgba(168, 21, 21, 0);
            float: left;    
            border-style: none none none dashed;
        }

        .column25l{
            flex: 1 1 25%;
            background-color: rgba(21, 72, 168, 0);
            float: left; 
            border-style: none none none dashed;
        }

        .column33l1{
            flex: 1 1 33%;
            background-color: rgba(21, 72, 168, 0);
            float: left; 
        }

        .column34l2{
            flex: 1 1 34%;
            background-color: rgba(21, 72, 168, 0);
            float: left; 
            border-style: none none none dashed;
        }

        .column33l3{
            flex: 1 1 33%;
            background-color: rgba(168, 21, 21, 0);
            float: left;    
            border-style: none none none dashed;
        }

        .passwordspacer{
            width: 100%;
            height: 22%;

            background-color: rgba(220, 20, 60, 0);
        }

        .exercisespacer{
            width: 100%;
            height: 22%;

            background-color: rgba(220, 20, 60, 0);
        }

    .autocontainer{
        border-radius: 25px;

        width: 100%;
        height: auto;    

        margin-bottom: 15px;

        background-color: #E2C4D8c2;

        padding: 5px; 

        border: solid;
    }

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

    iframe.agenda{
        border-radius: 25px;
        height: 750px;
        width: 95%;
    }

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



.rightsection{
    border-radius: 35px;

    width: 35%;
    height: auto; 

    background-color: #9182C4;

    float: right;
    }

    .rightcontainer{
        border-radius: 25px;

        margin: 20px;

        width: 95%;
        height: auto;

        padding: 5px; 

        background-color: #B598CC;
}






.bottom{
    border-radius: 25px;

    margin-top: 1%;

    width: 100%;
    height: 235px;   

    padding: 5px; 

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

    float:left;
    }

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

        .bottomgif{
            border-radius: 25px;
        
            height: 100%;
            width: 14%;    
        
            margin-right: 5px;
        
            background-color: #bf678b;
        
            border: solid;
            float: left;
            overflow-y: scroll;
        }

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

        img.gif{
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
        }

    .bottommiddle{
        border-radius: 25px;

        height: 100%;
        width: 69%;

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

        float: left;
        border: solid;
    }

    .personal{
        padding: 5px;

        height: 100%;
        width: 35%;    

        background-color: rgba(49, 20, 117, 0);

        float: left;
        overflow-y: scroll;
    }

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

    .personalcontact{
        padding: 5px;

        height: 100%;
        width: 20%;    

        background-color: rgba(49, 20, 117, 0);

        float: left;
        border-style: none none none dashed;
        overflow-y: scroll;
    }

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

    .contact{
        padding: 5px;

        height: 100%;
        width: 30%;

        float: left;

        background-color: rgba(121, 31, 31, 0);

        border-style: none none none dashed;
        overflow-y: scroll;
    }

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

    .karlijn{
        padding: 5px;

        height: 100%;
        width: 15%;

        float: left;

        background-color: rgba(28, 133, 68, 0);

        border-style: none none none dashed;
        overflow-y: scroll;
    }

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

        .logocontainer{
            margin-left: 5px;
        
            height: 100%;
            width: 15%;
        
            float: left;
        
            background-color: #6d76a700;
        }

        .logoacc{
            border-radius: 25px;
        
            margin-bottom: 5px;
        
            padding-top: 3%;
        
            height: 61%;
            width: 100%;  
        
            background-color: #436cb9;
        
            border: solid;
            overflow: scroll;
        }

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

        .logoaccleft{
            height: 100%;
            width: 40%;  
        
            background-color: #56889100;
            float:  left;
        }

        .logoaccright{
            height: 100%;
            width: 60%;  
        
            background-color: #3d4e6e00;
            float:  right;
        }

        .logoamc{
            border-radius: 15px;
        
            padding-top: 2%;
        
            height: 35%;
            width: 100%;  
        
            background-color: #ffffff;
        
            border: solid;
            overflow: scroll;
        }

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




h1.menuhead{
    font-size: 2vw;
    color: white;
    text-align: center;
    margin: 5px;
    }

    h1.middlehead{
        font-size: 200%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h2.middletext{
        font-size: 150%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h3.middlefoot{
        font-size: 100%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h1.middlelinks{
        font-size: 200%;
        margin: 5px;
        text-align: center;
    }

    h2.middlelinks{
        font-size: 150%;
        margin: 5px;
        text-align: center;
    }

    h1.noticehead{
        font-size: 175%;
        color: rgb(218, 59, 59);
        margin: 5px;
        text-align: center;
    }

    h2.noticetext{
        font-size: 125%;
        color: rgb(218, 59, 59);
        margin: 5px;
        text-align: center;
    }

    h2.noticelink{
        font-size: 125%;
        color: rgb(218, 59, 59);
        margin: 5px;
        text-align: center;
    }

    h2.righttext{
        font-size: 175%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h4.rightnote{
        font-size: 100%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h2.rightlinks{
        font-size: 175%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h1.bottomhead{
        font-size: 125%;
        color: black;
        margin: 5px;
        text-align: left;
    }

    h2.bottomtext{
        font-size: 100%;
        color: black;
        margin: 5px;
        text-align: left;
    }

    h2.transtext{
        font-size: 100%;
        color: rgb(148, 125, 125);
        margin: 5px;
        text-align: left;
    }

    h2.giftext{
        font-size: 150%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h3.giftext{
        font-size: 115%;
        color: black;
        margin: 5px;
        text-align: center;
    }

    h2.acclink{
        font-size: 150%;
        color: rgb(255, 255, 255);
        margin: 7px;
        text-align: center;
    }

    h1.karlijnname{
        font-size: 150%;
        color: #121d83;
        margin: 10px;
        text-align: center;
    }

    h2.karlijnhead{
        font-size: 140%;
        color: rgb(0, 0, 0);
        margin: 10px;
        text-align: center;
    }

    h3.karlijntext{
        font-size: 125%;
        color: rgb(0, 0, 0);
        margin: 15px;
        text-align: center;
    }

    h3.karlijnlink{
        font-size: 125%;
        color: rgb(0, 0, 0);
        margin: 15px;
        text-align: center;
    }

    h1.contacthead{ 
        font-size: 175%;
        color: rgb(0, 0, 0);
        margin: 2px;
        text-align: center;
    }

    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;
    }

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

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

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.middlelinks:link {color:#551A8B; text-decoration: none;}
a.middlelinks:visited {color:#551A8B; text-decoration: none;}
a.middlelinks:hover {color: #c484e4; text-decoration: none;}

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;}

a.giftext:link {color:rgb(0, 0, 0); text-decoration: none;}
a.giftext:visited {color:rgb(0, 0, 0); text-decoration: none;}
a.giftext:hover {color: white; text-decoration: none;}

a.acclink:link {color:rgb(255, 255, 255); text-decoration: none;}
a.acclink:visited {color:rgb(255, 255, 255); text-decoration: none;}
a.acclink:hover {color: rgb(0, 0, 0); text-decoration: none;}

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

a.instagram:link {color:#121d83; text-decoration: underline;}
a.instagram:visited {color:#121d83; text-decoration: none;}
a.instagram:hover {color:#279494; text-decoration: 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;}