@font-face{
    font-family:"Rosa Black Sans";
    src:url("fonts/hinted-RosaSans-Black.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face{
    font-family:"Rosa Black Italic";
    src:url("/fonts/hinted-RosaSans-BlackItalic.ttf") format("truetype");
    font-weight:normal;
    font-style:italic;
}

@font-face{font-family:"Rosa Black Bold";
	   src:url("/fonts/hinted-RosaSans-Bold.ttf") format("truetype");
	   font-weight:bold;
	   font-style:normal;
	  }

.section-center{
    position:absolute;
    top:50%;
    left:0;
    display:block;
    width:100%;
    padding:0;
    margin:0;
    z-index:6;
    text-align:center;
    transform:translateY(-50%);
}

[type=checkbox]:checked,[type=checkbox]:not(:checked)
{
    position:absolute;
    left:-99999px;
}

.menu-icon:checked+label,.menu-icon:not(:checked)+label{
    position:fixed;
    top:170px;
    left:75px;
    display:block;
    width:70px;
    height:70px;
    padding:0;
    margin:0;
    cursor:pointer;
    z-index:10;
}

.menu-bulle {
    position:fixed;
    top:150px;
    left:50px;
    display:block;
    width:80px;
    height:80px;
    padding:0;
    margin:0;
    z-index:9;
    overflow:hidden;
    background-color:#fff487;
    animation:border-transform 7s linear infinite;
    transition:top 350ms 1100ms cubic-bezier(.32, 1, .23, 1),right 350ms 1100ms cubic-bezier(.32, 1, .23, 1),
	       transform 250ms 1100ms ease,width 650ms 400ms cubic-bezier(.32, 1, .23, 1),height 650ms 400ms cubic-bezier(.32, 1, .23, 1);
}

.menu-icon:checked+label:before,.menu-icon:not(:checked)+label:before {
    position:absolute;
    content:"";
    display:block;
    width:30px;
    height:20px;
    z-index:20;
    top:0;
    left:0;
    border-top:2px solid #45050c;
    border-bottom:2px solid #45050c;
    transition:border-width 100ms 1500ms ease,top 100ms 1600ms cubic-bezier(.32, 1, .23, 1),height 100ms 1600ms cubic-bezier(.23, 1, .32, 1),
	       background-color 200ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1);
}
.menu-icon:checked+label:after,.menu-icon:not(:checked)+label:after {
    position:absolute;
    content:"";
    display:block;
    width:22px;
    height:2px;
    z-index:20;
    top:10px;
    left:0px;
    background-color:#45050c;
    margin-top:-1px;
    transition:width 100ms 1750ms ease,right 100ms 1750ms ease,margin-top 100ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1);
}
.menu-icon:checked+label:before{
    top:10px;
    transform:rotate(45deg);
    height:2px;
    background-color:#45050c;
    border-width:0;
    transition:border-width 100ms 340ms ease,top 100ms 300ms cubic-bezier(.32, 1, .23, 1),height 100ms 300ms cubic-bezier(.32, 1, .23, 1),background-color 200ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1);
}

.menu-icon:checked+label:after{
    width:30px;
    margin-top:0;
    transform:rotate(-45deg);
    transition:width 100ms ease,right 100ms ease,margin-top 100ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1);
}
@keyframes border-transform{0%, 100%
			       {border-radius:63% 37% 54% 46%/55% 48% 52% 45%}14%
			       {border-radius:40% 60% 54% 46%/49% 60% 40% 51%}28%
			       {border-radius:54% 46% 38% 62%/49% 70% 30% 51%}42%
			       {border-radius:61% 39% 55% 45%/61% 38% 62% 39%}56%
			       {border-radius:61% 39% 67% 33%/70% 50% 50% 30%}70%
			       {border-radius:50% 50% 34% 66%/56% 68% 32% 44%}84%
			       {border-radius:46% 54% 50% 50%/35% 61% 39% 65%}
			   }

.menu-icon:checked~.menu-bulle{
    animation-play-state:paused;
    top:50%;
    left:40px;
    transform:translate(-50%, -50%);
    width:35%;
    height:88%;
    transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1),
	       transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1),
	       height 750ms 1000ms cubic-bezier(.32, 1, .23, 1);
}

.menu-bulle ul{
    position:absolute;
    top:25%;
    left:50px;
    display:block;
    width:100%;
    padding:0;
    margin:0;
    z-index:6;
    text-align:right;
    list-style:none;
}

.menu-bulle ul li{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    padding-bottom:15px;
    margin:10px 0;
    text-align:center;
    list-style:none;
    pointer-events:none;
    opacity:0;visibility:hidden;
    transform:translateY(30px);
    transition:all 250ms linear;
}

.menu-bulle ul li:nth-child(1)
{
    transition-delay:200ms;
}

.menu-bulle ul li:nth-child(2){
    transition-delay:150ms;
}

.menu-bulle ul li:nth-child(3)
{
    transition-delay:100ms;
}

.menu-bulle ul li:nth-child(4)
{
    transition-delay:50ms;
}

.menu-bulle ul li a
{
    font-family:sans-serif;
    font-size:2vh;
    line-height:1.1;
    font-weight:800;
    display:inline-block;
    position:relative;
    color:#45050c;
    transition:all 250ms linear;
    max-width:9vw;
}

.menu-bulle ul li a:hover
{
    text-decoration:underline;
    color:#45050c;
}

.menu-bulle ul li a:after
{
    display:block;
    position:absolute;
    top:50%;
    content:"";
    height:2vh;
    margin-top:-1vh;
    width:0;
    left:0;
    transition:width 250ms linear;
}

.menu-bulle ul li a:hover:after
{
    width:100%;
}

.menu-icon:checked~.menu-bulle ul li
{
    pointer-events:auto;
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    transition:opacity 350ms ease,transform 250ms ease;
}

.menu-icon:checked~.menu-bulle ul li:nth-child(1)
{
    transition-delay:1400ms;
}

.menu-icon:checked~.menu-bulle ul li:nth-child(2)
{
    transition-delay:1480ms;
}

.menu-icon:checked~.menu-bulle ul li:nth-child(3)
{
    transition-delay:1560ms;
}

.menu-icon:checked~.menu-bulle ul li:nth-child(4)
{
    transition-delay:1640ms;
}

@media screen and (min-width: 3400px)
{
    .menu-icon:checked~.menu-bulle{
	left:90px;
    }
}

@media screen and (max-width: 991px)
{
    .menu-icon:checked~.menu-bulle
    {
	animation-play-state:paused;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:200%;
	height:200%;
	transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1),
		   transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1),
		   height 750ms 1000ms cubic-bezier(.32, 1, .23, 1);
    }

 .menu-bulle ul{
     left:0;
     transform:translateY(10%);
     transform:translateX(-20%);
 }


 .menu-icon:checked+label,.menu-icon:not(:checked)+label
 {
     right:55px;
 }

 .logo
 {
     left:30px;
 }

 .menu-bulle
 {
     right:30px;
 }

 h1
 {
     font-size:9vw;
     -webkit-text-stroke:2px rgba(0,0,0,0);
     text-stroke:2px rgba(0,0,0,0);
     -webkit-text-fill-color:#fff487;
     text-fill-color:#fff487;
     color:#fff487;
 }

 .menu-bulle ul li a{
     font-size:2vh;
     padding:5px;
     max-width:unset;
 }
 
 .menu-icon:checked+label
 {
     top:10px;
     left:10px;
     width:50px;
     height:50px;
 }
 .menu-icon:not(:checked)+label
 {
     top:110px;
     left:50px;
 }

 .menu-bulle
 {
     top:90px;
     left:30px;
     display:block;
     width:60px;
     height:60px;
 }
