/* relevanter CSS-Code */

* {
    font-family: Arial, sans-serif;
}

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    background: black;
    
}

header {
    background: rgb(92, 204, 102)
 
}

main {
    flex: 1;
   
}

footer {
                                /* Abstand des Footers ?       */
   
    opacity: 66%;
    border: solid rgb(105, 218, 101) ;        /* füllt die Fläche des Footers                 */
    border-radius:  25px  25px 0px 0px;         /* gibt die Rundung des Footers unten keine     */
    border-width: 5px 5px 0px 5px;              /* gibt den Rand des Footers unten keiner       */
    overflow: hidden; clear:both; 
    text-align: center;         /* gibt den Rand der Objekte des Footers an     */
    background-color: rgb(168, 216, 166);
    max-width: 1400px;
    align-self: center;
    padding: 0px 0px 0px 0px;
    
    font-size:xx-small;
    
}

.btn{
    background-color: rgb(168, 216, 166);
    opacity:.99;
    border: 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    font-size: 16px;
    cursor: pointer; 
    }

    .btn:hover {
        background-color: RoyalBlue;
    }
.container {
    margin: 0em auto;                           /* liste der links: ABSTAND ZUM RAND            */
    max-width: 1200px;
    padding: 0 0em;
   
   
}



pippo {
    display: none;
    border:5px solid #A8D7A6;
	background-color: #D3E4D6;
	opacity:.85;
    height:100px;
    width:1390px;
    margin-left:10px;
	border-radius: 25px 25px 25px 25px;
	position:fixed;
    bottom: 250px;
    left: 230px;
    align-self: center;
    
}

a:hover + pippo {
    display: block;
    font-size:25px;                             /* GROESSE SCHRIFTART IM INFO 1          */
}
pippo2 {
    display: none;
    border:5px solid #A8D7A6;
	background-color: #D3E4D6;
	opacity:.85;
    height:100px;
    width:1390px;
    margin-left:10px;
	border-radius: 25px 25px 25px 25px;
	position:fixed;
    bottom: 300px;
left: 250px;
    align-self: center;
}

a:hover + pippo2 {
    display: block;
    font-size:16px;                             /* GROESSE SCHRIFTART IM INFO 2          */
}



/* ENVIROMENT */
/*@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300);*/
/**{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.
}*/
body{
    background-color: rgbrgb(238, 238, 238); /* feld html unterm titel */
   /*  font-family: 'Roboto', sans-serif;  /* feld html unterm titel */
}
main{
    padding: 20px 20px;
}
/*
h1{
    font-weight:600;										 font dicke TITEL 
    width: 100%;
    background-color: rgb(64,81,181);		/* feld html titelfläche farbe 
    color: rgb(255,255,255);						/* feld html farbe titel 
    padding: 20px 60px;									/* feld html abstand titel 
}
*/

h2{
    font-weight: 300;										/* feld html dicke unterm titel */
}
p + p{
    margin-top: .7em;									/* feld infobox abstand paragraf */
}
.IB-caption{
    font-size: 1.7em;									/* feld infobox abstand paragraf */
    line-height: 22px;								/* ??? */
    line-height: 2.6rem;							/* feld infobox abstand titel untertitel beschreibung */
    opacity: .8;											/* feld infobox untertitel helligkeit */
    filter: alpha(opacity=80);				/* ??? */
}
.IB-button{
    display: inline-block;						/* ??? */
    font-weight:3em;										/* fontsize button and close button */
    padding: 10px;										/* padding text button */
    min-width: 24px;									/* breite button */
    border-radius: 2px;								/* ??? */
    border: none;											/* ??? */
    text-align: center;								/* ??? */
    text-transform: uppercase;				/* ??? */
    cursor: pointer;									/* POINTER ÜBER BUTTON */
    -webkit-transition: all .3s;			/* ??? */
            transition: all .3s;			/* ??? */
}
.IB-button:hover{
    background-color: rgba(168,215,166, .4);	/* COLOR CLOSE BUTTON   MIT DURCHSICHTIGKEIT */
}
.IB-button.IB-button--raised{
    background-color: rgb(168, 215, 166);					/* COLOR  BUTTON A8D7A6   */
    color: rgb(255,255,255);									/* COLOR  BUTTON  TEXT */
    /*box-shadow: 0 1px 10px rgba(0,0,0,0.42), 0 1px 2px rgba(0,0,0,0.4);/* COLOR  BUTTON  TEXT SCHATTEN */
}
.IB-button.IB-button--raised:hover{
    background-color: rgb(168,215,166);					/* COLOR  BUTTON  HINTERGRUND WENN DRAUF */
   /* box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); /* COLOR  BUTTON  TEXT SCHATTEN WENN DRAUF*/
}
.IB-infobox{
    background-color: rgb(255,255,225); 			    /* COLOR  INFOBOX   */
    border-radius: 10px;								    /* RUNDUNG INFOBOX */
    overflow: hidden;
}
.IB-infobox-content{
    padding: 10px;										/* INFOBOX RAND TEXT */
}
.IB-infobox-btns{
    width: 100%;									/* LUNGHEZZA IN PERCENTUALE DEL INFOBOX*/
    border-top: 1px solid rgb(00,200,200);			/* LINeA NEL INFOBOX E COLORE */
    text-align: RIGHT;								/* lINEA E CLOSE BOX ALLINEAMENTO  */
    padding: 18px 10px -10px -10px;								/* INFOBOX RAND CLOSE BOX 18 DA SOTTO E SOPRA 120RECHTS*/
}
.ONSCHButton{
    margin-top: 10px;									/* BUTTO RAND  */
}

/* ONSCH */
#menuONSCH{
    display: none;
}
#menuONSCH1{
    display: none;
}

.infobox{
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    position: fixed;
    top: 50%;					/* INFOBOX POSITION*/
    left: 50%;				/* INFOBOX POSITION*/
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-width: 400px;
    z-index: 1;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    -webkit-transition: visibility 0s .4s, opacity .4s 0s;
            transition: visibility 0s .4s, opacity .4s 0s;
}

  
:checked + .infobox{
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: visibility 0s 0s, opacity .4s .1s;
            transition: visibility 0s 0s, opacity .4s .1s;
}