@charset "utf-8";
body {
  --youtubeModalWidth: 1200px;
  --youtubeModalHeight: 675px;
}
#youtube_btn {
  cursor: pointer;
  position: relative;
}
#youtube_btn:hover {
  opacity: .8;
}
#youtube_btn .abs {
  position: absolute;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: .6;
}
#youtube_modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: rgba(200, 200, 200, 0.5);
  z-index: 70000;
}
.youtubeHidden {
  animation-name: youtubeHidden;
  animation-duration: .5s;
}
@keyframes youtubeHidden {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#youtube_rapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 1200px;
  width: 90%;
  z-index: 70001;
  background-color: black;
  animation-name: youtubeModal;
  animation-duration: .4s;
}
@keyframes youtubeModal {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: var(--youtubeModalWidth);
    height: var(--youtubeModalHeight);
  }
}




#youtube_modal #youtube_rapper iframe {
  width: 100%;
  height: 100%;
}

#youtube_close {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

@media screen and (max-width: 1400px) {
  #youtube_close {
    top: -50px;
    right: -40px;
  }
}
@media screen and (max-width: 700px) {
  #youtube_area {
    width: 90%;
    margin: 0 auto 20px;
  }
  #youtube_close {
    top: -50px;
    right: 0px;
  }
}