.Stilm1 {font-size: 14px; color: black;} 
.Stil0 {font-size: 16px; color: black;}  
.Stil1 {font-size: 18px; color: black;}  
.Stil2 {font-size: 20px; color: black;}
.Stil3 {font-size: 22px; color: black;}  
.Stil4 {font-size: 26px; color: black;} 

* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html { 
    height: 100%;
    margin: 0;
    font-family: Arial,Helvetica, sans-serif;
}

/*style table for tab links*/
.headerTable {
    z-index:999; /*  The transform css entries for flip-box (3d elements) move the flip elements at the top and would be on top of the menu. Thus, z-index=999 */    
    position: fixed;
    top:0px; 
    width:100%;
    outline:none;
    border: none;
    border-spacing: 0px;
    padding: 0px;
    margin: 0px;
}

/*style table cells for tab links*/
.headerCell {
    width:20%;
    outline:none;
    border: none;
    border-spacing: 0px;
    padding: 0px;
    margin: 0px; 
}


/* Style tab links */
.tablink {
    background-color: rgb(21,96,130);
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding:10px 0px;
    font-size: 14px;
    margin-top:-1px; /*to avoid that text scrolling can be seen */
    width:100%;
    height: 65px;
}

.tablink_selected {
    background-color: white;
    color: black;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding:10px 0px;
    font-size: 14px;
    margin-top:-1px; /*to avoid that text scrolling can be seen */
    width:100%;
    height: 65px;
}

.tablinkArticle {
    background-color: rgb(21,96,130);
    color: rgb(132,226,145);
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding:7px 0px;
    font-size: 18px;
    width:100%;
    height: 80px;
}

.tablinkBottom {
    background-color: rgb(21,96,130);
    border-radius: 20px 20px 20px 20px;
    transition: transform 0.2s;
    color: white;    
    border: none;
    outline: none;
    cursor: pointer;
    padding:10px;
    margin-bottom: 40px;
    font-size: 22px;    
    width:90%;
    height: 250px;
    word-wrap: break-word;    
}

.tablinkInfo {
    background-color: white;
    border-radius: 20px 20px 20px 20px;   
    color: rgb(21,96,130);    
    border: none;
    outline: none;    
    padding:10px;
    margin-bottom: 40px;
    font-size: 22px;    
    width:90%;
    height: 250px;
    word-wrap: break-word;    
}

.linkexternal {        
    font-size: 18px;    
    background-color: rgb(21,96,130);
    color: rgb(132,226,145);   
}

.linkexternal, .linkexternal:visited {
    color: rgb(132,226,145);
    text-decoration:none;    
}

@media (hover: hover) and (pointer: fine) {
    .tablink:hover { background-color: rgb(25,115,155) }
    .tablinkArticle:hover { background-color: rgb(25,115,155) }
    .linkexternal:hover { background-color: rgb(25,115,155) }
    .submit:hover { background-color: rgb(25,115,155);}    
    .tablinkBottom:hover {transform: scale(1.1);} 

    /*.tooltip:hover .tooltiptext {
        visibility: visible; 
    } */ /*enable this if onmouseenter="reSize('containerX','backX','innerX','picX2')" gets changed to onmousenter() in index.html */     
}


/* Outer Box holding the divs including the flexible one */
.outerbox {
    display: flex;
    flex-flow: column;
    padding: 0;
    height: 100%;
    }

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    color: black;
    padding-top: 115px;
    padding-bottom: 55px;
    padding-right: 5%;
    padding-left: 5%;
    }

.footer {
    flex-grow: 1;
    background-color: rgb(21,96,130);
    padding: 15px 5%;
    }
    
.info {
    flex-grow: 1;    
    padding: 0px 0px;
    }    

#Home {background-color: white;}
#Planing {background-color: white;}
#Control {background-color: white;}
#Archive {background-color: white;}  
#About {background-color: white;} 

/* Style tab links second row*/
.tablink_2row {
    height: 50px; 
    background-color: white;
}

.tablink_2row_trans {
    height: 50px; 
    background-color: transparent;
}

.tablink_2rowcell {    
    text-align: right;
    padding-right:5px;
    vertical-align: middle;
}

.buttontablink2 {
    background-color: transparent;
    color: black; 
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 0px;
    margin: 0px 15px;
    font-size: 14px; 
}
.searchbar {
    display:inline;    
}

.searchbar_input {
    width:100px;
    font-size: 14px; 
    color: black;
}

.imgConnect {
    margin:-6px;
    width: 34px;
}

#Contact {background-color: white;} 

.sublinktop {
    text-align: left;     
    font-size: 16px;
    padding-left:0;
    line-height: 32px;
    margin-bottom:30px;
    padding-right:3%;    
}

.sublinktop, .sublinktop:visited {
    color: rgb(59,125,35);
    text-decoration:none;    
}


/* Style tab links bottom row*/
.tablink3 {
    background-color: transparent;
    color:white;
    display: inline-flex;
    align-items: flex-end; 
    float: left;            
    border: none;
    outline: none;
    cursor: pointer;
    padding-left:0;
    padding-right: 5%;
    padding-top :0;
    padding-bottom: 0;
    font-size: 14px; 
    height:40px;
}     

.tablink3img {
    height:24px;
}

.tablink3imglarge {
    height:32px;
}

.otherpic {
    height:120px;
    text-align:center;    
}

.otherpicSmall {
    height:80px;
    text-align:center;    
}

.largerPic {    
    height: auto;
    max-width: 100%;     
}

.centerPic {
    display: flex;
    justify-content: center;
}


.movingPic {
    height:80px;    
    position: relative;
    animation: moveMe 1s;    
    animation-iteration-count: infinite;
}

.movingPicTotalHeight {
   Height:130px; 
}


/* Style tab links bottom row*/
.buttonEngFig {
    background-color: transparent;
    color:white; 
    border: none;
    outline: none;
    cursor: pointer;
    padding-left:0;
    padding-right: 5%;
    padding-top :0;
    padding-bottom: 0;    
    height:40px;
}     

@keyframes moveMe {
  0% {left: 0px; top: 0px;}
  10% { left: 0px; top: 2px;}
  20%  { left: 0px; top: 10px;}
  30%  { left: 0px; top: 20px;}
  40%  { left: 0px; top: 25px;}
  50%  { left: 0px; top: 27px;}
  60% { left: 0px; top: 25px;}
  70%  { left: 0px; top: 20px;}
  80%  { left: 0px; top: 10px;}
  90%  { left: 0px; top: 2px;}
  100%  { left: 0px; top: 0px;}   
}

#Privacy {background-color: white;} 
#Impressum {background-color: white;} 

/* Style for main body tabcontent*/

h3 {
    text-align: center; 
    color: white;
    font-size: 52px;   
    text-shadow: 3px 3px 0 black;
    } 
    
h4  {
    text-align: center; 
    color: white;
    font-size: 42px;   
    text-shadow: 3px 3px 0 black;
    }
 
h1 {
    text-align: left; 
    color: rgb(21,96,130);
    font-size: 26px;                
    } 
        
h2 {
    text-align: left; 
    color: rgb(21,96,130);
    font-size: 22px;                
    }    
    
p,li {
    text-align: left; 
    color: rgb(21,96,130);
    font-size: 16px;     
}

p {
    line-height: 1.5;
}  

li {
    line-height: 1.9;  
    }
  

.center {
    text-align:center;      
}

.title {
    text-align: left; 
    color: rgb(21,96,130);
    font-size: 14px;
}
    
.titleCenter {
    text-align: center; 
    color: rgb(21,96,130);
    font-size: 14px;    
}
.pBox {
    text-align: left; 
    color: white;
    font-size: 16px;    
}

.pBoxCentL {
    text-align: center; 
    color: white;
    font-size: 24px;    
}


label{
    display:block;
    margin:1em 0 .2em;
    font-size: 16px;                 
}

.tableArchive {
    text-align: left; 
    color: rgb(21,96,130);
    font-size: 16px;  
    width: 100%;
    border:0;  
    word-break: break-word;
}

.flag {
    width:50px;  
    }

.col1 {
    width:15%;
}

.col2 {
    width:30%;
}

.col3 {
    width:55%;
}
 
.input{
    background:white;
    margin:1em 0 0;                
    border:none;
    border-radius:8px;
    transition:all .3s ease-out;
    display:block;
    width:100%;
    padding:.3em;
    font-size:18px;                
    border:solid 1px #CCC;
    resize:vertical;                
}

.submit {
    background:rgb(21,96,130);
    cursor: pointer;
    margin:1em 0 0;
    color:white;
    border:none;
    border-radius:8px;
    transition:all .3s ease-out;
    display:block;
    width:100%;
    padding:.3em;
    font-size: 22px;                
    border:solid 1px #CCC;
    resize:vertical;                
}


/* single-line textarea */
.textarea{
    min-height:180px;
    display:block;
    width:100%;
    padding:.3em;
    font-size:18px;                
    border:solid 1px #CCC;
    resize:vertical;  
    font-family: inherit;
   }                        

fieldset {
    border: 0;
    padding:0px;
    }


.column,.singlecolumn {
    width:100%;
    padding:1em;
    float:left; 
    } 
    

.columns3,.columns5 {
    width:100%;
    padding:1em; 
    display:inline-block; 
    }  
    
.centerDiv {        
        justify-content: center;  
        text-align: center;
    } 
    
    
.banner {      
    padding-top: 95px;
    padding-bottom: 55px;
    padding-right: 5%;
    padding-left: 5%;
    background-repeat: no-repeat;        
    background-size: 100%,100%;
    background-position: top;        
    background-image: url("images/banner.jpg");
    min-height:85%;        
    }    

.bannerTable {       
   width:100%;
   height:100%;
   text-align: center;
   vertical-align: middle;
   } 
   
    
@media screen and (max-width:1400px) {
    .banner {        
        h3 {
            font-size:42px;               
        } 
    
        h4  {    
            font-size: 34px;               
        }   
    }
}    
 
 @media screen and (max-width:1000px) {
    .banner { 
        min-height:100%; 
        background-size: cover;
        h3 {
            font-size: 32px;               
        } 
    
        h4  {    
            font-size: 26px;               
        }   
    }    
 }

@media screen and (max-width:800px) {
    .banner { 
        min-height:100%; 
        background-size: cover;
        h3 {
            font-size: 26px;               
        } 
    
        h4  {    
            font-size: 22px;               
        }   
    }
}
     
.columnBox {
        border-radius: 20px 20px 20px 20px;
        width:98%;
        padding:1em;
        float:left;
        background-color: rgb(21,96,130);  
        margin:1%;
    }   
  
    
@media screen and (min-width:1000px) {
/*  make the form 2 columns or 3 * or 5 */
    
    form, fieldset :after{
    content:'';
    display:block;
    clear:both;                
    }              

    .column{
        width:50%;
        padding:1em;
        float:left;            
    }
    
    .columns3 {
        width:32%;
        padding:1em;
        display:inline-block;    
    }
    
    .columns5 {
        width:19%;
        padding:1em;
        display:inline-block;         
    }  
    
   
    .centerDiv {
        display: flex;
        justify-content: center;         
    }       
  
    .columnBox {
        border-radius: 20px 20px 20px 20px;
        width:48%;
        padding:1em;
        float:left;
        background-color: rgb(21,96,130);  
        margin:1%;
    }   
    
}

.gifcontainer {
    width: 250px;
    margin: auto;
    display: block;
}

.video {
    width:100%
}
   
.flipCard  {transform: rotateY(180deg);}

.flip-box {         
    background-color: transparent;   
    height: 300px;  /*init value */  
    border: none;
    perspective: 1000px;
    border-radius: 20px 20px 20px 20px;    
}

/* This container is needed to position the front and back side */
.flip-box-inner { 
    position: relative;
    width: 100%;
    height: 100%; 
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;       
}


/* Position the front and back side */
.flip-box-front, .flip-box-back {   
    position: absolute; 
    width: 100%;      
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden; 
}

/* Style the front side */
.flip-box-front {    
    height: 100%;
    background-color: white;
    color: black;
    border-radius: 20px 20px 20px 20px;
}

/* Style the back side */
.flip-box-back {    
    /* min-height: 300px;  */ /* will be set in java script */
    background-color: rgb(21,96,130);
    color: white;      
    padding:1em; 
    float:left;    
    transform: rotateY(180deg);
    border-radius: 20px 20px 20px 20px;    
}

.containerImg {
    width: 100%;
    max-height:576px;
    max-width:864px; 
    border-radius: 20px;
}

.tooltip {
    position: relative; 
}

/* Tooltip text */
.tooltiptext {   
    visibility: hidden;
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; 
    margin-top: 5px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;    
    position: absolute;
    z-index: 1;    
}

.tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%; 
  left: 50%;
  margin-left: -5px; 
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}