@charset "utf-8";
/* CSS Document */

@font-face{
src: url("../fonts/SweetSansProExThin.otf");
font-family: SSPXthin;
}
@font-face{
src: url("../fonts/TypoRoundThinDemo.otf");
font-family: TRthin;
}

*{
padding: 0px;
margin: 0px;
user-select: none;
box-sizing: border-box;
}

body{
width: 100%;
height: 100dvh;
background: #fffafa;
display: flex;
align-items: center;
justify-content: center;
}
header{
display: none;
}
#mobilelogo{
display: none;
}


/* MAIN SITE */
.main-container{
width: 750px;
height: 750px;
display: grid;
padding: 30px;
grid-template-columns: repeat(3, 220px);
grid-template-rows: repeat(3, 220px);
grid-gap: 10px;
}
.circle-menu{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #000000;
margin: 8px;
}
.circle-naam{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #000000;
margin: 8px;
}
.circle-main{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
margin: 10px;
}
#b3{
background-color: #99004d;
}
.circle-title-konijn{
position: relative;
width: 200px;
height: 200px;
margin: 10px;
border-radius: 50%;
background-color: #008080;
}
.circle-logo{
position: relative;
width: 220px;
height: 220px;
margin: 0px;
}
.circle-title-uniek{
position: relative;
width: 200px;
height: 200px;
margin: 10px;
border-radius: 50%;
background-color: #ffbf00;
}
#b7{
background-color: #ffbf00;
}
#b9{
background-color: #008080;
}
#b1, #b2, #b4, #b6, #b8{
width: 180px;
height: 180px;
margin: 10px;
}
#b5{
width: 220px;
height: 220px;
}




/* MAIN SIDE MENU */
.check-main{
width: 180px;
height: 180px;
margin: 20px;
position: absolute;
z-index: 4;
opacity: 0;
cursor: pointer;
}
.toggle-cross-main{
width: 60px;
height: 40px;
margin: 80px 70px 80px 70px;
position: absolute;
z-index: 3;
}
.toggle-cross-main .line{
position: absolute;
width: 100px;
height: 1px;
background: #000000;
transform-origin: center;
transition: 0.3s all linear;
}
.toggle-cross-main .ln1{
width: 100%;
top: 0%;
}
.toggle-cross-main .ln2{
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.toggle-cross-main .ln3{
width: 100%;
top: 100%;
transform: translateY(-100%);
}
.check-main:checked ~ .toggle-cross-main .ln1{
top: 50%;
transform: translate(0, -50%) rotate(45deg);
height: 1px;
}
.check-main:checked ~ .toggle-cross-main .ln2{
width: 0px;
opacity: 0;
}
.check-main:checked ~ .toggle-cross-main .ln3{
top: 50%;
transform: translate(0, -50%) rotate(-45deg);
height: 1px;
}
nav{
position: fixed;
top: 0px;
left: -50%;
width: 250px;
height: 100%;
list-style: none;
background: #ede5de;
border-right: 1px solid #000000;
z-index: 2;
opacity: 0;
transition: 0.3s all linear;
}
.check-main:checked ~ nav{
left: 0px;
opacity: 1;
}
nav li{
padding: 10px 15px;
font-size: 18px;
font-family: SSPXthin;
color: #000000;
text-align: left;
font-weight: bold;
border-right: 5px solid #ede5de;
}
nav li:hover{
background: #99004d;
cursor: pointer;
color: #ffbf00;
font-weight: bold;
border-right: 5px solid #ffbf00;
}






/* RESPONSIVE MAIN HEIGHT */
@media only screen and (max-height: 768px){
.main-container{
width: 600px;
height: 600px;
grid-template-columns: repeat(3, 170px);
grid-template-rows: repeat(3, 170px);
}
.circle-title-konijn, .circle-title-uniek, .circle-menu, .circle-main, .circle-naam{
width: 150px;
height: 150px;
margin: 10px;
}
.circle-logo{
width: 170px;
height: 170px;
margin: 0px;
}
#b2, #b4, #b6, #b8{
width: 150px;
height: 150px;
margin: 0px;
}
#b5{
width: 170px;
height: 170px;
margin: 10px 5px 10px 15px;
}
}






/* MOBILE */
@media only screen and (max-width: 768px){
/* RESPONSIVE MAIN */
.main-container, .circle-menu, .circle-main, .circle-naam, .circle-title-konijn, .circle-title-uniek, .circle-logo, .check-main, .toggle-cross-main, nav{
display: none;
}
/* MOBILE SIDE MENU */
header{
width: 100%;
height: 60px;
position: fixed;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.check-mobile, .toggle-cross-mobile{
width: 30px;
height: 18px;
position: absolute;
left: 20px;
top: 20px;
}
.check-mobile{
z-index: 4;
opacity: 0;
cursor: pointer;
}
.toggle-cross-mobile{
z-index: 3;
}
.toggle-cross-mobile .line{
position: absolute;
width: 100%;
height: 2px;
background: #000000;
transform-origin: center;
transition: 0.3s all linear;
}
.toggle-cross-mobile .ln1{
width: 100%;
top: 0%;
}
.toggle-cross-mobile .ln2{
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.toggle-cross-mobile .ln3{
width: 100%;
top: 100%;
transform: translateY(-100%);
}
.check-mobile:checked ~ .toggle-cross-mobile .ln1{
top: 50%;
transform: translate(0, -50%) rotate(45deg);
background: #ffffff;
height: 1px;
}
.check-mobile:checked ~ .toggle-cross-mobile .ln2{
width: 0px;
opacity: 0;
}
.check-mobile:checked ~ .toggle-cross-mobile .ln3{
top: 50%;
transform: translate(0, -50%) rotate(-45deg);
background: #ffffff;
height: 1px;
}
.menu-mobile{
position: absolute;
top: 0px;
width: 200px;
height: 100dvh;
padding-top: 57px;
color: #ffffff;
list-style: none;
background: #133939;
left: -50%;
z-index: 2;
opacity: 0;
transition: 0.3s all linear;
}
.check-mobile:checked ~ .menu-mobile{
left: 0px;
opacity: 1;
}
.menu-mobile li{
padding: 8px 20px 10px 20px;
font-size: 16px;
font-family: TRthin;
color: #ffffff;
text-align: left;
border-bottom: 3px solid #133939;
}
.menu-mobile li:hover{
background: #800040;
cursor: pointer;
color: #ffbf00;
font-weight: bolder;
border-bottom: 3px solid #ffbf00;
}
#top-sidemenu-mobile{
height: 3px;
background: #006666;
}
#bottom-sidemenu-mobile{
position: absolute;
width: 200px;
background: #0d2626;
bottom: 0px;
border-top: 1px solid #006666;
padding-top: 20px;
padding-bottom: 20px;
}
#info-sidemenu-mobile{
margin-left: 20px;
text-align: left;
}
#info-sidemenu-mobile tr th{
font-family: SSPXthin;
font-size: 12px;
color: #ffbf00;
}
#info-sidemenu-mobile tr td{
font-family: SSPXthin;
font-size: 11px;
color: #ffffff;
}



#mobilelogo{
display: block;
width: 200px;
height: 650px;
}
.mobile-naam-maartenkonijn{
height: 40px;
width: 180px;
margin: 0px 10px 20px 10px;
}
.mobile-title-konijn{
width: 180px;
height: 180px;
margin: 10px;
border-radius: 50%;
background-color: #008080;
}
.mobile-logo{
width: 200px;
height: 200px;
}
.mobile-title-uniek{
width: 180px;
height: 180px;
margin: 10px;
border-radius: 50%;
background-color: #ffbf00;
}
#b22{
width: 160px;
margin: 0px 10px 0px 10px;
}
#b44, #b66{
width: 160px;
height: 160px;
margin: 10px;
}
#b55{
width: 200px;
height: 200px;
margin: 0px;
}
}