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

@font-face {
    font-family: 'authentic_sans_edit90_edit';
    src: url('../fonts/authenticsans-90-edit-webfont.woff2') format('woff2'),
         url('../fonts/authenticsans-90-edit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    
  --typeface-one: authentic_sans_edit90_edit;
  --typeface-two: authentic_sans_edit90_edit;
  --padding: 5px;
  --m: 10px;
  --background: rgb(244,244,244);
}

*{
    
    /*TYPOGRAPHY*/
    font-family: var(--typeface-one);
    font-size: 18px;

}

a{text-decoration: none; color:black;}
a:hover{font-family: var(--typeface-one);}
a:active{color:black;}

body{
    
    margin: 0;
    padding: 0;
    width:100%;
    overflow: hidden;
    
}

p{
    
    margin-block-start: 0em;
    
}

/*MAIN STRUCTURE*/

.header{
    
    /*basics*/
    position: absolute;
    bottom:0;
    right:0;
    width:80vw;
    height:65px;
    
    padding-top: 5px;
    padding-left: 10px;
    
    /*appearance*/
    background-color: white;
    filter: drop-shadow(0px -20px 10px white);
}

#subheader{
    
    /*basics*/
    position: absolute;
    bottom:0;
    left:0;
    width:20vw;
    height:auto;
    
    padding-top: 5px;
    padding-left: 10px;
    
    /*appearance*/
    background-color: white;
    filter: drop-shadow(0px -20px 10px white);
    
}

.upcoming{
    
    position: relative;
    float: left;
    width:100%;
    
}

.content{
    
    position: absolute;
    top:0px;
    left:0;
    width:100%;
    height:100%;
    

}

.col1{
    position: absolute;
    left:0;
    top:0;
    width:20%;
    height:100%;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
}

.col2{
    
    position: absolute;
    left:20%;
    top:0;
    width:20%;
    height: 100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
     background: var(--background);
    
}

.col3{
    
    position: absolute;
    left:40%;
    top:0;
    width:20%;
    height: 100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
    background: var(--background);

}

.col4{
    
    position: absolute;
    left:60%;
    top:0;
    width:20%;
    height: 100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
    background: var(--background);
    
    
}

.col5{
    
    position: absolute;
    left:80%;
    top:0;
    width:20%;
    height:100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
     background: var(--background);
    
}

.longcol{
    
    position: absolute;
    left:20%;
    top:0;
    width:40%;
    height: 100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
    background: var(--background);
    
}

.longcol2{
    
    position: absolute;
    left:60%;
    top:0;
    width:40%;
    height:100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
    background: var(--background);
    
}

.longcol3{
    
    position: absolute;
    left:40%;
    top:0;
    width:40%;
    height:100vh;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
    background: var(--background);
    
}

.mobilecol{
    
   position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    
    overflow-x: hidden;
    overflow-y: hidden;
    
    background: var(--background);
    
}

/*VISUAL STRUCTURES*/

.line{
    
    position: relative;
    float: left;
    width:100%;
    height:0px;
    margin-bottom:10px;
    border-bottom: 1px solid black;
    
    
}

/*SUB STRUCTURE*/

.colheader{
    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    
    background:white;
    
}

.infos{
    
    position: relative;
    float: left;
    width:100%;
    
    margin-left: var(--m);
    margin-top:var(--m);
    
}

.info{
    
    position: relative;
    float: left;
    
    max-width:100%;
    width:auto;
    height:auto;
    
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    
    margin-right:10px;
    margin-bottom: 5px;
    
    border: 1px solid black;
    border-radius: 25px;
    
}

.titleimage{
    
    position: absolute;
    bottom:0;
    left:0;
    width:95%;
    
    background-color: white;
    filter: drop-shadow(0px -20px 10px white);
}

.mobiletitleimage{
    
    position: absolute;
    bottom:0;
    left:0;
    width:80%;
    height:auto;
    
    padding-left:10%;
    padding-right:10%;
    
     background-color: white;
    box-shadow: 0px -30px 10px white;
    
}

.active{
    
    position: absolute;
    bottom:20px;
    left:30px;
    
    padding: var(--padding);
    
    background-color:white;
    color:black;
    border: 1px solid black;
    border-radius: 25px;
    
    
}

#finished{
    
    background-color: var(--background);
    
}

.project{
    
    position: relative;
    float: left;
    
    width:100%;
    height: auto;
    
}

.projectimage{
    
    position: relative;
    float: left;
    width:calc(100% - 100px);
    
    padding:30px;
    margin-left:20px;
    margin-bottom: 10px;
    
    border: 1px solid black;
    
}

.projectimage:hover{
    
    background-color: white;
    
}

.number{
    
    position: relative;
    float: left;
    width:100%;
    
    margin-left:20px;
    
}

.texts{
    
    position: absolute;
    top:0;
    left:0;
    width: calc(100% - 1px);
    height:80%;
    
    overflow-x: hidden;
    overflow-y: scroll;
    
}

.scroll{
    
    position: relative;
    float: left;
    height: auto;
    width:100%;
    overflow: hidden;
    padding-top:15px;
    
}

.video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    
  margin-bottom:20px;
}

iframe{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
}

.subtitle{
    
    position: relative;
    float: left;
    width:100%;
    height: auto;
    
    padding-bottom:10px;
    padding-top: 10px;
    
    text-align: center;
    
    font-family: var(--typeface-two);
    text-transform: uppercase;
    
}

.projectheader{
    
    background-color: var(--background);
    
}

.projecttitle{
    

    
}

.postshort{
    
    position: relative;
    float: left;
    width:calc(100% - 80px);
    height:auto;
    padding:20px;
    margin-right:20px;
    margin-left:20px;
    margin-bottom:10px;
    border: 1px solid black;
    border-radius: 25px;
    
    
}

.postshorticon{
    
    float: left;
    height:100px !important;
    max-width:100%;
    margin-bottom:10px;
}

.postshortinfo{
    
    float: left;
    padding-left:10px;
    font-size:15px;
}

.textpost{
    
    text-align: center;
    
}

.textpost:hover{
    
    background-color: white;
    
}

.projects, .abouts, .text{
    
    position: absolute;
    top:40px;
    left:0;
    width: calc(100% - 1px);
    height:100%;
    
    overflow-x: hidden;
    overflow-y: scroll;
    
}

.projects{
    
    border-left: 1px solid black;
    
}

.text{
    
    height:calc(100% - 42px);
    max-height: 100%;
    
}

.post{
    
    float:left;
    width:calc(90% - 10px);
    padding:10px;
    padding-bottom:10px;
    height:auto;
    margin-left: 10px;
    
    border-bottom: 1px solid black;
}

.post img{
    
    height:250px;
    
}

.tags{
    
    position: relative;
    float:left;
    width:calc(100% - 20px);
    height:auto;
    
    padding-left:10px;
    margin-top:20px;
    font-size: 15px;
    
}

.tag{
    
    text-decoration: underline;
    font-size: 15px;
}

.postheader{
    float: left;
    width:100%;
    height:20px;
    
    
}

.posttitle,.postdate,.postauthor, .eventtime, .eventlocation{
    
    font-size:15px;
    
}

.postshortdate{
    
    padding-left: 10px;
    
}

.postshortauthor{
    
    padding-left:20px;
    font-size: 15px;
    
}

/*EVENTS*/

.event{
    
    position: relative;
    float: left;
    width:calc(100% - 40px);
    
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom: 10px;
    
   border: 1px solid black;
    border-radius: 25px;
    
    background:white;
    
}

.event:hover{
    
    box-shadow: inset 0px 0px 30px lightgrey;
    filter: drop-shadow(0px 0px 30px white);
    
    cursor: pointer;
    
}

.events{
    
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    margin-bottom: 20px;
  
    overflow-x: hidden;
    overflow-y: scroll;
    
}

.eventname{
    
    position: relative;
    float: left;
    width:100%;
    
    margin-top:10px;
    margin-bottom:5px;
    
}

.eventlocation{
    
    position: relative;
    float: left;
    width:100%;
    margin-bottom:5px;
    
}

.classamount{
    
     position: relative;
    width:auto;
    
    padding: 4px;
    
    float: left;
    
    border: 1px solid black;
    border-radius: 25px;
    
}

.classfee{
    position: relative;
    width:auto;
    
    padding: 4px;
    
    float: right;
    
    border: 1px solid black;
    border-radius: 25px;
    
}

.classmonth{
    position: relative;
    float: left;
    
    width:auto;
    
    padding: 4px;
    
    border: 1px solid black;
    border-radius: 25px;

    
}

.calculation{
    
    position: relative;
    width:100%;
    
    float: left;
    
}

.book{
    
    position: relative;
    width:100%;
    
    padding: 4px;
    float: left;
    
    margin-bottom:10px;
    
    text-align: center;
    
    border: 1px solid black;
    border-radius: 25px;
    
}

.book:hover{
    
    box-shadow: inset 0px 0px 30px yellow;
    filter: drop-shadow(0px 0px 10px orange);
    
    cursor: pointer;
    
}

.teachers{
    
    position: relative;
    float: left;
    width:100%;
    
    margin-top: var(--m);
    
    text-align: left;
    
    
}

.teacher{
    
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    
    border-bottom: 1px solid black;
}

.teachername{
    
    font-size: 15px;
    
}

.classdates{
    
    position: relative;
    float: left;
    width: calc(50% - 4px);
    margin-right: 4px;
    font-size: 15px;
    
}

.past{
    
    position: relative;
    float: left;
    
}

.pastclass{
    
    position: relative;
    float: left;
    width:calc(50% - 32px);
    height:auto;
    padding:10px;
    margin-right: 10px;
    margin-bottom:10px;
    border: 1px solid black;
    border-radius: 25px;
    
    text-align: center;
    
    background-color:white;
    
}

/*BOOKING*/

.calculation{
    
    position: relative;
    width:100%;
    
    padding: 4px;
    float: left;
    

    
}

.booking{
    
    position: relative;
    float: left;
    width:100%;
    
    margin-top: 15px;
    
}

.bookline{
    
    position: relative;
    float: left;
    width:100%;
    
    padding-top:5px;
    
    border-bottom: 1px solid black;
}

.month {
    
    position: relative;
    float: left;
    width:calc(100% / 3);
    
}

.fee{
    position: relative;
    float: right;
    width:calc(100% / 3);
    
    text-align: right;
}

.amount {
    position: relative;
    float: left;
    width:calc(100% / 3);
    
    text-align: center;
    
}

.totalfee{
    
    position: relative;
    float: right;
    width:auto;
    
    margin-bottom: 10px;
    margin-top:10px;
    
    padding: var(--padding);
    
    border-top: 1px solid black;
    
}

.bookclassdates{
    
    position: relative;
    float: right;
    width:auto;
    
    margin-left:5px;
    padding: 2px;
    padding-bottom:0;
    
    border: 1px solid black;
    
    font-size: 15px;
    
}



/*–––––––GALLERY–––––––*/

.imageline{
    
    position: relative;
    float: left;
    
    width:100%;
    height:auto;
    
}

.galleryimage{
    
    position: relative;
    float: left;
    
    width:100%;
    
}


/*HTBMA*/

.htbmba{
    
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    
}

.htbmbaimage{
    
    position: absolute;
    left:10%;
    bottom: 0;
    width:80%;
    filter: drop-shadow(0px 0px 10px white);
    
}

.menup{
    
    position: absolute;
    bottom:0;
    left:0;
    width:98%;
    height:auto;
    
    font-size:45px !important;
}

/*ABOUT*/

.about, .contact, .member{
    
    float: left;
    width:calc(100% - 40px);
    margin-right:10px;
    margin-left:10px;
    padding: 10px;
    padding-top:0;    
    border: 1px solid black;
    border-top: 0px;
    
}

.about, .contact{
    
    border: 0px;
}

#aboutcol{
    
    padding-top:0;
    
}

.minititle{
    
    position: relative;
    float: left;
    width: calc(100% - 10px);
    height:auto;
    
    margin-bottom: var(--m);
    
    text-align: center;
    text-decoration: underline;
    
}


.minidate{
    
    position: relative;
    float: right;
    width:auto;
    height:auto;
    padding-top:3px;
    padding-left:3px;
     padding-right:3px;
    margin-bottom: 10px;
    border:1px solid black;
    
    font-size: 15px;
    
}

.description{
    
    position: relative;
    float: left;
    width:100%;
    
    text-align: left;
    
}

.description a:hover{
    
    color: var(--background);
    
}

.description img{
    
    position: relative;
    float: left;
    width:100%;
    
}

img{
    
    position: relative;
    float: left;
    width:100%;
    
}

.member{
    
    height:auto;
    
}

.member:hover{
    
    background: var(--background);
    cursor:pointer;
    
}

.memberimage{
    
    margin-bottom: var(--m);
    width:50%;
    margin-right:50%;
    
}

.memberfunction{
    
    font-size:15px;
    
}

/*IMAGES*/

.images{
    
    position: absolute;
    top:0;
    left:0;
    width:calc(100% - 20px);
    height: 100%;
    margin-bottom: 20px;
    margin-left: 10px;
  
    overflow-x: hidden;
    overflow-y: scroll;
    
}

.imageframe,.pubimageframe{
    
    position: relative;
    float: left;
    width: 100%;
    
    overflow:hidden;
    
}

.image{
    
    position: relative;
    float: left;
    width:100%;
    
}

.caption{
    
    position: absolute;
    
    padding: 5px;
    
    width: calc(100% - 10px);
    
    bottom:0;
    
    background:white;
    
    font-size: 15px;
    
    display: none;
    
}

.pubcaption{
    
    position: relative;
    float: left;
    
    padding-bottom: 10px;
    font-size: 15px;

    
}

/*SPANS*/

#underline{
    
    border-bottom: 1px solid black;
    font-size:15px;
}


.mobilecol .bookclassdates, .mobilecol .classamount, .mobilecol .classfee, .mobilecol .classmonth, .mobilecol .month , .mobilecol .amount , .mobilecol .fee, .mobilecol .totalfee, .mobilecol .classmonth, .mobilecol .classamount{
    
    font-size: 4.5vw !important;
    
}

.calculation > *{ 
    
    font-size: 4vw !important;
    
}

.mobilecol .eventname, .mobilecol .eventlocation, .mobilecol .minititle, .mobilecol .book, .mobilecol .description{
    
    font-size: 5vw !important;
    
}

/*VECTOR!!*/

svg{
    
    overflow:visible;
    
}

.st2{
    
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    
}