* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
  background-color: #EEEEEE;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

li {
  list-style: none;
}
#logo, #points {
  position: absolute;
  width: 800px;
  max-width: 90vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  fill: black;
  fill-opacity: 0;
  z-index: 3;
}
#logo {
  stroke: black;
  stroke-width: 2;
  transition: stroke-width 2.5s;
  animation: fill 3s ease forwards 2s;
}
@keyframes fill {
    0% { fill: black; fill-opacity: 0; stroke: black; stroke-width: 2;
        width: 800px; max-width: 90vw; top: 50%; left: 50%; transform: translate(-50%,-50%); }
   50% { fill: black; fill-opacity: 1; stroke: black; stroke-width: 0;
        width: 800px; max-width: 90vw;  top: 50%; left: 50%; transform: translate(-50%,-50%); }
  100% { fill: black; fill-opacity: 1; stroke: transparent; stroke-width: 0;
        width: 400px; max-width: 65vw; top: 10%; left: 50%; transform: translate(-50%, 0); }
}

#points {
  height: 800px;
  animation: points-anim 4s ease forwards 4s;
}

#logo .str0 {
  stroke: black;
}
.fil0 {
  fill: black;
}
.fil1 {
  fill: #008DD2;
}
.fil2 {
  fill: #F5F5F5;
}
.fil3 {
  fill: #E51170;
}
.fil4 {
  fill: #FECC00;
}
.fil5 {
  fill: transparent;
}

#logo #path01 { stroke-dasharray: 276px; stroke-dashoffset: 276px; animation: line-anim 3.5s ease forwards 0.0s; }
#logo #path02 { stroke-dasharray: 93px;  stroke-dashoffset: 93px;  animation: line-anim 3.4s ease forwards 0.1s; }
#logo #path03 { stroke-dasharray: 158px; stroke-dashoffset: 158px; animation: line-anim 3.3s ease forwards 0.2s; }
#logo #path04 { stroke-dasharray: 66px;  stroke-dashoffset: 66px;  animation: line-anim 3.2s ease forwards 0.3s; }
#logo #path05 { stroke-dasharray: 416px; stroke-dashoffset: 416px; animation: line-anim 3.1s ease forwards 0.4s; }
#logo #path06 { stroke-dasharray: 347px; stroke-dashoffset: 347px; animation: line-anim 3.0s ease forwards 0.5s; }
#logo #path07 { stroke-dasharray: 194px; stroke-dashoffset: 194px; animation: line-anim 2.9s ease forwards 0.6s; }
#logo #path08 { stroke-dasharray: 288px; stroke-dashoffset: 288px; animation: line-anim 2.8s ease forwards 0.7s; }
#logo #path09 { stroke-dasharray: 234px; stroke-dashoffset: 234px; animation: line-anim 2.7s ease forwards 0.8s; }
#logo #path10 { stroke-dasharray: 317px; stroke-dashoffset: 317px; animation: line-anim 2.6s ease forwards 0.9s; }
#logo #path11 { stroke-dasharray: 276px; stroke-dashoffset: 276px; animation: line-anim 2.5s ease forwards 1.0s; }
#logo #path12 { stroke-dasharray: 93px;  stroke-dashoffset: 93px;  animation: line-anim 2.4s ease forwards 1.1s; }
#logo #path13 { stroke-dasharray: 158px; stroke-dashoffset: 158px; animation: line-anim 2.3s ease forwards 1.2s; }
#logo #path14 { stroke-dasharray: 66px;  stroke-dashoffset: 66px;  animation: line-anim 2.2s ease forwards 1.3s; }
#logo #path15 { stroke-dasharray: 203px; stroke-dashoffset: 203px; animation: line-anim 2.1s ease forwards 1.4s; }
#logo #path16 { stroke-dasharray: 92px;  stroke-dashoffset: 92px;  animation: line-anim 2.0s ease forwards 1.5s; }

@keyframes line-anim { to { stroke-dashoffset: 0; } }

.menu {
  position: absolute;
  top: 50%;
  display: flex;
  left: 50%;
  width: 600px;
  max-width: 95vw;
  height: 600px;
  transform: translate(-50%, -50%);
  align-items: center;
}
.menu ul {
  position: absolute;
  width: 100%;
}
.menu li {
  position: absolute;
  top: 50%;
  margin: 10px;
  padding: 20px;
  width: calc(100% - 30px);
  font-size: 35px;
  text-align: center;
  transform: translateY(-50%);
  color: black;
  cursor: pointer;
  visibility: hidden;
}

.menu li:nth-child(1) { animation: menu-text1-anim 1.5s ease forwards 3.5s; }
.menu li:nth-child(2) { animation: menu-text2-anim 1.5s ease forwards 3.5s; }
.menu li:nth-child(3) { animation: menu-text3-anim 1.5s ease forwards 3.5s; }
.menu li:nth-child(4) { animation: menu-text4-anim 1.5s ease forwards 3.5s; }

.menu li:hover:nth-child(1) span {
  color: #008DD2;
}
.menu li:hover:nth-child(2) span {
  color: #E51170;
}
.menu li:hover:nth-child(3) span {
  color: #FECC00;
}
.menu li:hover:nth-child(4) span {
  color:   black;
}

@keyframes li-line-anim { to { stroke-dashoffset: 0; } }

@keyframes menu-text1-anim {
  from { visibility: visible; color: transparent; }
    to { visibility: visible; transform: translateY(calc(-50% - 150px)); } }
@keyframes menu-text2-anim {
  from { visibility: visible; color: transparent; }
    to { visibility: visible; transform: translateY(calc(-50% -  50px)); } }
@keyframes menu-text3-anim {
  from { visibility: visible; color: transparent; }
    to { visibility: visible; transform: translateY(calc(-50% +  50px)); } }
@keyframes menu-text4-anim {
  from { visibility: visible; color: transparent; }
    to { visibility: visible; transform: translateY(calc(-50% + 150px)); } }

.points-part {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.point-part {
  position: absolute;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  visibility: hidden;
  transition: 2.5s;
  z-index: 2;
}
.point-part1 {
  background-color: #008DD2;
  top: 50%;
  left: 50%;
  transform: translate( -50%,  -50%);
  animation: points-part1-anim 2s ease forwards 3.5s;
}
.point-part2 {
  background-color: #E51170;
  top: 50%;
  right: 50%;
  transform: translate( 50%,  -50%);
  animation: points-part2-anim 2s ease forwards 3.5s;
}
.point-part3 {
  background-color: #FECC00;
  bottom: 50%;
  left: 50%;
  transform: translate( -50%,  50%);
  animation: points-part3-anim 2s ease forwards 3.5s;
}
.point-part4 {
  background-color: black;
  bottom: 50%;
  right: 50%;
  transform: translate( 50%,  50%);
  animation: points-part4-anim 2s ease forwards 3.5s;
}

@keyframes points-part1-anim {
    0% { visibility: visible; }
  100% {
    visibility: visible;
    top: 5vw;
    left: 15vw;
    height: 20vh;
    width: 20vh;
  }
}
@keyframes points-part2-anim {
    0% { visibility: visible; }
  100% {
    visibility: visible;
    top: 25vw;
    right: 20vw;
    height: 15vh;
    width: 15vh;
  }
}
@keyframes points-part3-anim {
    0% { visibility: visible; }
  100% {
    visibility: visible;
    bottom: 20vw;
    left: 10vw;
    height: 30vh;
    width: 30vh;
  }
}
@keyframes points-part4-anim {
    0% { visibility: visible; }
  100% {
    visibility: visible;
    bottom: 5vw;
    right: 15vw;
    height: 40vh;
    width: 40vh;
  }
}

.part {
  position: absolute;
  transition: all ease 1s;
  border-radius: 50%;
  width: 1vw;
  height: 1vw;
  overflow: hidden;
  visibility: hidden;
  text-align: center;
}
@keyframes part-on-anim {
  to { visibility: visible; }
}
.part.open {
  visibility: visible;
  width: 500vw;
  height: 500vw;
  z-index: 2;
}
.part.closing {
  width: 10px;
  height: 10px;
  z-index: 2;
}
.part1 {
  top: 5vw;
  left: 15vw;
  transform: translate(-50%, -50%);
  background-color: #008DD2;
}
.part2 {
  top: 25vw;
  right: 20vw;
  transform: translate( 50%, -50%);
  background-color: #E51170;
}
.part3 {
  bottom: 20vw;
  left: 10vw;
  transform: translate(-50%, 50%);
  background-color: #FECC00;
}
.part4 {
  bottom: 5vw;
  right: 15vw;
  transform: translate( 50%,  50%);
  background-color: black;
}
.part .part-content {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.part1 .part-content {
  top: 50%;
  left: 50%;
  transform: translate(-15vw, -5vw);
}
.part2 .part-content {
  top: 50%;
  right: 50%;
  transform: translate(20vw, -25vw);
}
.part3 .part-content {
  bottom: 50%;
  left: 50%;
  transform: translate(-10vw, 20vw);
}
.part4 .part-content {
  bottom: 50%;
  right: 50%;
  transform: translate(15vw, 5vw);
  color: #DDDDDD;
}
.part .part-article {
  width: 80vw;
  max-width: 600px;
}
.part-article a {
  text-decoration: none;
  color: #DDDDDD;
  font-size: 25px;
}
.part .close-button {
  position: absolute;
  width: 4vw;
  height: 4vw;
  min-width: 20px;
  min-height: 20px;
  max-width: 30px;
  max-height: 30px;
  top: 0px;
  right: 0px;
  cursor: pointer;
  transition: transform 0.8s;
  transform: translate(100%, -100%) rotateZ(135deg);
  z-index: 5;
  cursor: pointer;
}
.part.opening .close-button,
.part.open .close-button {
  transform: translate(-100%, 100%);
}
.part .close-button:hover .strx1, .part .close-button:hover .strx2 {
  transform-origin: center;
  transform: rotateZ(180deg);
  transition: transform 0.5s;
}
.part .close-button .strx {
  stroke: black;
  stroke-width: 300;
  stroke-linecap:round;
  stroke-linejoin:round
}
.part4 .close-button .strx {
  stroke: #DDDDDD;
}
#logo.black .bw0 {
  transition: stroke-width 1.5s;
  stroke: white;
  stroke-width: 2;
}
#logo.towhite .bw0 {
  transition: stroke-width 1.5s;
  stroke-width: 0;
}