/* LOGIC-OF-NATURE.CSS In De Wolken */

.tooltip{position:relative;display:block;margin:0 auto}
.tooltip input{display:none}
.tooltiplabel{font-size:0.9em;display:block;text-align:center;cursor:pointer;margin-bottom:5px;color:orange;text-shadow:1px 1px 1px #000}
.tooltip input:checked+span{visibility:visible}
.tooltip .tooltiptext{
visibility:hidden;
width:auto;
height:auto;
background-color:#f0f8ff;
color:#000;
text-align:left;
border-radius:10px 10px 25px 25px;
padding:5px 3px 10px 10px;
font-size:0.8em;
line-height:1.2em;
box-shadow:2px 2px 4px #202020;
text-shadow:0 0 0;
border:1px solid #c0c0c0;
/* Position the tooltip */
position:absolute;
z-index:1;
bottom:32px;
left:0;
cursor:url('cursor-red-x.png'),auto
}

.tooltip ul{list-style:none;padding:5px 0 0 5px;font-size:0.9em}

.tooltip ul li::before{
content:"\2022";
color:red;
font-weight:bold;
display:inline-block; 
width:1em;
margin-left:-1.0em
}

.tooltipclose{float:right;bottom:-5px;margin-right:15px;position:relative;color:#ff0000;font-size:1.5em;font-weight:bold}

.LONinfoblok{
position:sticky;
top:0;
width:auto;
min-height:270px;
font-size:1.0em;
line-height:1.1em; 
margin-left:0;
margin-right:0;
margin-bottom:20px;
padding:10px 25px 10px 25px;
box-shadow:2px 2px 6px #666;
border-radius:10px;
background-color:#faf0e6;
z-index:2
}
@media only screen and (max-width:1112px){.LONinfoblok{position:relative;padding:10px;background-color:#f0f8ff}}

.LONinfoblok h2{
font-size:1.3em !important;
margin-bottom:3px !important;
color:#0080FF;
font-family:'Poiret One',Times New Roman;
text-shadow:1px 1px 1px #696969
}

/* BUTTON*/
.LONbutton{
margin:0 auto 0 30px;
border:none;
text-align:center;
font-size:1.0em;
cursor:pointer;
text-decoration:none;
padding:0 3px 0 3px;
background-color:transparent
}
/* MEDIA*/
@media only screen and (max-width:926px){.LONbutton{font-size:0.9em;margin-left:10px}}
@media only screen and (max-width:438px){.LONbutton{font-size:1.0em;margin-left:20px}}
@media only screen and (max-width:390px){.LONbutton{font-size:0.8em;margin-left:20px}}
@media only screen and (max-width:320px){.LONbutton{font-size:1.0em;margin-left:60px}}

.LONbutton a:link,
.LONbutton a:visited{color:#000;text-decoration:none}
.LONbutton a:hover,
.LONbutton a:active{color:orange !important;text-decoration:none;text-shadow:1px 1px 1px #000;
}

/* HEAD*/
.LONgridHead{font-weight:bold;margin-bottom:14px;font-size:0.8em;text-align:center}
/* MEDIA*/
@media only screen and (max-width:926px){.LONgridHead{font-size:0.7em}}
@media only screen and (max-width:438px){.LONgridHead{font-size:0.8em}}
@media only screen and (max-width:390px){.LONgridHead{font-size:0.7em}}
@media only screen and (max-width:360px){.LONgridHead{font-size:0.6em}}
@media only screen and (max-width:320px){.LONgridHead{font-size:1.0em}}

/* CONTAINER*/
.LONgridContainer{
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
margin-top:-10px;
font-size:1.0em;
display:grid;
grid-template-columns:repeat(5,1fr);
column-gap:1.5vw;
background-color:transparent
}
/* MEDIA*/
@media only screen and (max-width:1024px){.LONgridContainer{grid-template-columns:repeat(4,1fr)}}
@media only screen and (max-width:820px){.LONgridContainer{grid-template-columns:repeat(3,1fr)}}
@media only screen and (max-width:507px){.LONgridContainer{grid-template-columns:repeat(2,1fr)}}
@media only screen and (max-width:390px){.LONgridContainer{grid-template-columns:repeat(2,1fr)}}
@media only screen and (max-width:320px){.LONgridContainer{grid-template-columns:repeat(1,1fr)}}

.LONgridContainer > div {margin-top:10px}

/* IMAGE*/
.LONgridContainer img{width:100%;margin-bottom:0;border-radius:5px;float:right;margin-left:6px;margin-top:-20px}

/* HR*/
.LONgridContainer hr{border:0;height:1px;margin-top:8px;margin-bottom:0;width:100%;background:#909090}

/* P*/
.LONgridContainer p{padding:0 10px 0 10px;font-size:0.8em;background-color:#faf0e6;
height:225px;text-align:left;line-height:1.2em;border-radius:10px 10px 25px 25px;margin-bottom:10px;box-shadow:2px 2px 4px #696969;border:1px solid #c0c0c0;
}

/* MEDIA*/
@media only screen and (max-width:320px){.LONgridContainer p{height:235px;}}

/* TRANSPARENT achter image*/
.LONgridTransparent{background-color:transparent !important;height:100px !important;box-shadow:0 0 0 !important;border:none !important}