/*If you don't want it to add it to a link, you can just enclose it within a span and that would work.
//<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
//in your css, then you can:
//#clickableAwesomeFont {
//     cursor: pointer
//}
*/
    .khlogo {border : 2px solid green;}
    .khtrenner {border : 1px solid green;}
    .autoabml  {font-size : 0.9em; font-style: italic;}
    .links-box{
        display : inline-block;
        min-width : 45%;
        text-align: left;
        margin: 5px 5px;
        border-top: 0px solid green;
        border-bottom: 0px solid green;
    }
    .rechts-box{
        display : inline-block;
        min-width : 45%;
        text-align: right;
        color : black;
        margin: 5px 5px;
        border-top: 0px solid red;
        border-bottom: 0px solid red;
    }
    .links5-box{
        display : inline-block;
        min-width : 10%;
        text-align: center;
        margin: 5px 5px;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
    }
    .slinks-box{
        display : inline-block;
        min-width : 40%;
        text-align: left;
        margin: 5px 5px;
        border-top: 0px solid green;
        border-bottom: 0px solid green;
    }
    .srechts-box{
        display : inline-block;
        min-width : 40%;
        text-align: right;
        color : black;
        margin: 5px 5px;
        border-top: 0px solid red;
        border-bottom: 0px solid red;
    }
    .ssrechts-box{
        display : inline-block;
        min-width : 20%;
        text-align: right;
        color : black;
        margin: 5px 5px;
        border-top: 0px solid red;
        border-bottom: 0px solid red;
    }

    .mitte-box{
        display : inline-block;
        min-width : 1%;
        text-align: justify;
        color : green;
        margin: 5px 5px;
       padding-left : 30px;
        border-top: 0px solid green;
        border-bottom: 0px solid green;
    }
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: green;
   color: white;
   text-align: center;
   z-index: 4;
}
.footer a,
.footer a:hover {
    text-decoration: underline;
    color: rgba(255, 255, 255, 255);
}

.navi {
    width: 20%;
    top : 5%;
    float: left;
	position:fixed;
	display:none;
	background-color:white;
    border : 1px solid black;
	border-radius: 5px;
	box-shadow: 10px 10px 10px white inset, 20px 20px 20px grey;
    z-index: 4;
}


//span a:before {content:url("https://khwalter.net/img/Okay 3.png");}
//span a:before {content: "\f29b";}
span a:link {}

nav h3 {margin-bottom : 10px;}
nav a {
    display: block;
    color: black;
    padding: 0.4em 0 0.4em 2em;
    margin-bottom: 1em;
    background: PowderBlue url(../img/open_left.png) no-repeat left center;
    
    -webkit-background-size: 0.75em auto;
    -moz-background-size: 0.75em auto;
    background-size: auto 80%;
    font-size:1.0em;
}
    
nav a:hover {
    text-decoration: none;
    font-weight:bold;
    background-image: url(../img/ok.png);
    /* Nur das Bild wird ausgetauscht,
    die anderen Hintergrund-Eigenschaften bleiben */
}

 .submenu {
    width: 20%;
    top : 5%;
    left : 20%;
    float: left;
	position:fixed;
	display:none;
	background-color:white;
    border : 1px solid black;
	border-radius: 5px;
	box-shadow: 10px 10px 10px white inset, 20px 20px 20px grey;
    z-index: 4;
}

.submenu a {
    display: block;
    text-align:center;
    color: black;
    padding: 0.4em 0 0.4em 1em;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
    background: PowderBlue url(../img/open_left.png) no-repeat left center;
    
    -webkit-background-size: 0.75em auto;
    -moz-background-size: 0.75em auto;
    background-size: auto 80%;
    font-size:0.9em;
    font-family: -apple-system, "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
}


#idOptOut {
     cursor: pointer;
    
     background: white url(../images/square.gif) no-repeat right;
}
#idOptOut:hover { background-image: url(../img/Close.png);}