#toc_container li,#toc_container ul{margin:0;padding:0}#toc_container.no_bullets li,#toc_container.no_bullets ul,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li{background:0 0;list-style-type:none;list-style:none}#toc_container.have_bullets li{padding-left:12px}#toc_container ul ul{margin-left:1.5em}#toc_container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}#toc_container.toc_light_blue{background:#edf6ff}#toc_container.toc_white{background:#fff}#toc_container.toc_black{background:#000}#toc_container.toc_transparent{background:none transparent}#toc_container p.toc_title{text-align:center;font-weight:700;margin:0;padding:0}#toc_container.toc_black p.toc_title{color:#aaa}#toc_container span.toc_toggle{font-weight:400;font-size:90%}#toc_container p.toc_title+ul.toc_list{margin-top:1em}.toc_wrap_left{float:left;margin-right:10px}.toc_wrap_right{float:right;margin-left:10px}#toc_container a{text-decoration:none;text-shadow:none}#toc_container a:hover{text-decoration:underline}.toc_sitemap_posts_letter{font-size:1.5em;font-style:italic}:root {
--positionvar: fixed;
--positionx: 50%;
--positiony: 1.3em;
--size: 4rem;
--openingdistance: calc(var(--size) * 1.2);
--openingAngle: 3.14*2;
--tide: 1vw;
}
@media (orientation:portrait) {
:root {
--tide: 1vh;
}
} #site-navigation {
display: none;
}
@media (min-width: 960px) {
:root {
--size: 5rem;
--openingdistance: calc(var(--size) * 1.2);
}
}
.circular-menu {
position: var(--positionvar);
top: var(--positiony);
right: calc(var(--positionx) - var(--size) / 2 );
z-index: 100;
}
.circular-menu.active {
transform: translate3d(0, calc(50vh -  var(--size) - 12px), 0);
transition: transform .2s;
}
@keyframes anim-glow {
0% {
box-shadow: 0 0 rgba(255, 230, 200, 0.5);
}
100% {
box-shadow: 0 0 20px 12px transparent;
border-width: 2px;
}
}
.circular-menu .floating-btn {
display: block;
width: var(--size);
height: var(--size);
border-radius: 50%;
box-shadow: 0 2px 5px 0 rgba(255, 255, 255, .7);
animation: anim-glow 4s ease infinite;
color: white;
text-align: center;
line-height: 3.9;
cursor: pointer;
outline: 0;
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/bgDoT100.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: rgba(0, 0, 0, .8);
}
.menu_top li {
background-repeat: no-repeat;
background-size: auto auto;
background-position: center;
}
.menu_top .li_0 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_0.png);
}
.menu_top .li_1 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_1.png);
}
.menu_top .li_2 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_2.png);
}
.menu_top .li_3 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_3.png);
}
.menu_top .li_4 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_4.png);
}
.menu_top .li_5 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_5.png);
}
.menu_top .li_6 {
background-image: url(//buon-giorno-design.de/wp-content/uploads/circle_gooey_menu/li_6.png);
}
.circular-menu.active .li_0 {
--liNr: 0;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .li_1 {
--liNr: 1;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .li_2 {
--liNr: 2;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .li_3 {
--liNr: 3;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .li_4 {
--liNr: 4;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .li_5 {
--liNr: 5;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .li_6 {
--liNr: 6;
--angle: calc((3.14 - var(--openingAngle) ) / 2 + ( var(--openingAngle) / var(--menuItems) ) *  var(--liNr));
transform: translate3d( calc(cos( var(--angle )) * var(--openingdistance)), calc(sin( var(--angle )) * var(--openingdistance)) ,0);
transition-duration: calc(150ms + 1000ms * var(--liNr) / var(--menuItems));
}
.circular-menu.active .selected_li a {
color: red;
}
.circular-menu.active .floating-btn {
box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
}
.circular-menu .floating-btn:active {
box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);
}
.circular-menu .floating-btn i {
font-size: .85em;
display: block;
transition: transform .2s;
top: calc(50% - .51em);
position: relative;
color: rgba(255, 255, 255, .7);
}
.circular-menu.active .floating-btn i {
transform: rotate(-45deg);
}
.circular-menu.active .floating-btn:before {
position: fixed;
width: 100vw;
top: calc(-50vh + var(--size)/4 + 1em);
left: calc(-50vw + var(--size)/2);
height: 100vh;
-webkit-backdrop-filter: blur(3px) brightness(.7);
content: "";
z-index: -10;
}
@media (max-width: 960px) {
.circular-menu.active .floating-btn:before {
top: calc(-50vh + var(--size)/4 + 2em);
}
}
.circular-menu:after {
display: block;
content: ' ';
width: calc(var(--size) / 2 + .5rem);
height: calc(var(--size) / 2 + .5rem);
border-radius: 50%;
position: absolute;
top: calc(var(--size) / 5);
right: calc(var(--size) / 5);
z-index: -2;
background-color: rgba(255, 255, 255, .6);
transition: all .5s ease;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
.circular-menu.active:after {
transform: scale3d(6, 6, 1);
transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}
.circular-menu .items-wrapper {
padding: 0;
margin: 0;
}
.circular-menu .menu-item {
display: none;
position: absolute;
bottom: -5px;
z-index: -1;
justify-content: center;
text-decoration: none;
color: black!important;
font-size: .7em;
font-weight: 400;
width: 5em;
height: 5em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
align-items: flex-end;
}
.circular-menu.active .menu-item {
display: flex;
}
.circular-menu .menu-item:hover {
color: red!important;
}
.circular-menu.active ul {
padding: 0;
margin: 0;
position: relative;
top: calc(-1 * var(--size));
}
.circular-menu.active li {
transition-timing-function: cubic-bezier(0.935, 0.000, 0.340, 1.330);
}
.circular-menu li {
display: block;
width: calc(var(--size) - .3rem);
height: calc(var(--size) - .3rem);
border-radius: 50%;
position: absolute;
top: 0;
left: .15rem;
z-index: -1;
}
.wave {
position: fixed;
opacity: 0;
top: calc(50vh - .5px);
left: 50vw;
width: 1px;
height: 1px;
border: rgba(255,255,255,.5) 7px solid;
background: rgba(0,0,0,.9); 
-moz-border-radius: 50% / 50%;
-webkit-border-radius: 50% / 50%;
border-radius: 50% / 50%;
-moz-animation-name: ripple;
-webkit-animation-name: ripple;
animation-name: ripple; -moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.wave:before {
content: "";
position: absolute;
opacity: 0;
top: -1px;
left: -1px;
width: 2px;
height: 1px;
border: #FFF 5px solid;
-moz-border-radius: 100vw / 100vw;
-webkit-border-radius: 100vw / 100vw;
border-radius: 50% / 50%;
-moz-animation-name: ripple-2;
-webkit-animation-name: ripple-2;
animation-name: ripple-2;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: 2.5;
-webkit-animation-iteration-count: 2.5;
animation-iteration-count: 2.5;
}
@keyframes ripple {
from {
opacity: 1;
}
to {
width: calc(130 * var(--tide));
height: calc(130 * var(--tide));
border-width: 1px;
top: calc((50vh - .5px) - 65 * var(--tide));
left: calc(50vw - 65 * var(--tide));
opacity: 0;
}
}
@keyframes ripple-2 {
0% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
width: 60vw;
height: 60vw;
border-width: 1px;
top: 19vw;
left: 19vw;
}
}-