/* |===========================================================================|
    | Lettertype » MEXICO  (Lettertype met schaduw) » Gebruiken voor "RHYTHMZ" |
    >==========================================================================| */

@font-face {
    font-family: 'MexicoBold';
    src: url('Mexico/Mexico Shadow-Bold.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'MexicoHeavy';
    src: url('Mexico/Mexico Shadow-Heavy.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'MexicoLight';
    src: url('Mexico/Mexico Shadow-Light.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'MexicoRegular';
    src: url('Mexico/Mexico Shadow-Regular.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'MexicoXbold';
    src: url('Mexico/ Mexico Shadow-Xbold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'MexicoXlight';
    src: url('Mexico/ Mexico Shadow-Xlight.ttf') format('truetype');
    font-weight: bold;
}

* {
    box-sizing: border-box;
  }

.mainTxt {
     padding: 0 20px;
     margin-top: 10px;
     overflow-y: auto;     /* Voegt de verticale scrollbalk toe */
     flex-grow: 1;         /* Neemt alle beschikbare ruimte in tussen header en footer */
     font-size: 20px;
}

.mainTxt a {
    color: white;
    text-decoration: none;
    display: block;
}

.footBtn {
    padding: 15px 20px;
    background: #000000;
    border-top: 1px solid #fbdd7e;
    text-align: right;
    flex-shrink: 0;   /* Footer blijft altijd dezelfde hoogte */
}

#indexBtn, #scrollBtn {
                       position:fixed;            
                       bottom: 20px;
                       background-color:#77ab56;
                       border:2px solid black;
                       border-radius:5px;
                       border-bottom:4px solid #808080;
                       border-right:2px solid #BEBEBE;
                       color:#fbdd7e;
                       padding:3px 10px;
                       text-align:center;
                       text-decoration:none;
                       display:inline-block;
                       font-size:18px;
                       right:115px;
                       width:75px;
                       height:40px; 	
                       z-index:1;   
                      }
#indexBtn:hover {
                 background-color:#fbdd7e;
                 color:#77ab56;            
                }
#scrollBtn {
            right:30px;
           }
#scrollBtn:hover {
                   background-color:#fbdd7e;
                   color:#77ab56;        
                  }

#indexBtn2, #scrollBtn2 {
                    position:fixed;            
                    bottom: 20px;
                    background-color:#77ab56;
                    border:2px solid black;
                    border-radius:5px;
                    border-bottom:4px solid #808080;
                    border-right:2px solid #BEBEBE;
                    color:#fbdd7e;
                    padding:3px 10px;
                    text-align:center;
                    text-decoration:none;
                    display:inline-block;
                    font-size:18px;
                    right:115px;
                    width:75px;
                    height:40px; 	
                    z-index:1;   
                   }
#indexBtn2:hover {
              background-color:#fbdd7e;
              color:#77ab56;            
             }
#scrollBtn2 {
         right:30px;
        }
#scrollBtn2:hover {
                background-color:#fbdd7e;
                color:#77ab56;        
               }

.mainheader {
    background-color: black;
    color:white;
    border-bottom: 1px solid #fbdd7e;
    height:165px;              
    width:100%;               
    padding-left:10px;
    padding-right:10px;
    padding-top:20px;  
    flex-shrink: 0;       /* Header mag niet kleiner worden */
}

hr.saffronsmall {
    width: 100%;
    border: 1px solid #fbdd7e;
    border-radius: 5px;           
} 
h1 {                     /* Dit is een hoofdstuktitel   */
    font-size:36px;
    color:#77ab56; /* #009b77; */
   }
h2 {                     /* Dit is een hoofdstuktitel       */
    font-size:32px; 
    color:#009b77;
   }                                  
h3 {                     /* Dit is een paragraaf-titel    */
    font-size:25px;
    color:#91bc76;
   }
h4 {                     /* Hoofdstuktitel voor een Pop-Up venster  */
    font-size:20px;
    color:black;
   }

.vertical-table {
float:left;
vertical-align:middle;
border:hidden;
text-decoration:none;           /* Verwijderen van de onderstreping bij hyperlinks  */
}                            

.vertical-table td {
    padding-right:25px;
    }                            
        
.menutable:hover {
    color:#ec2d01;            /* Tekstkleur hyperlinks verandert in ".tomato" */
}

button.keys {                          
    background-color: #77ab56;
    color: #fbdd7e;
    border: 2px solid black;
    border-bottom:4px solid #808080;  /* grijstint donker */
    border-right:3px solid #BEBEBE;   /* grijstint licht */ 
    border-radius:5px;  
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight:bold;
    width:80px;
   }

button.keys:hover {
          background-color:#fbdd7e;
          color:#77ab56;
         }  

.column {
    float:left;
    width:33.33%;
    height:100%;
    padding:5px;
}

/* Clearfix (clear floats) */
.row::after {
    content:"";
    clear:both;
    display:table;
    }

.center {
    margin:auto;
    width:60%;
    padding:10px;
} 

img  {
    border-radius:5px;
}

audio {
    transform: scale(0.7); /* Maakt het speler 20% kleiner */
    transform-origin: left; /* Zorgt ervoor dat het links uitlijnt in plaats van in het midden */
}

.FullWidth {                       /* Als een <table> definitie niet de gehele breedte van het canvas vult, wordt het volgende */
    float:left;                    /* HTML-element er rechts van geplaatst, in plaats van eronder. Door de tabel binnen een    */
    width: calc(100% - 1px);       /* <div class="FullWidth", wordt de browser geforceerd om onder de tabel verder te gaan met */
    padding-left:10px;             /* de volgende HTML-elementen.                                                              */
    padding-right:10px;
   }