/* HANDPHONE/HP */
@media only screen and (max-width: 480px) {
 .menu-toggle {
  top: 50px;
  right: 15px;
 }

 .navbar {
  /* position: static; */
  position: absolute;
  /* top: -10px; */
  /* left: 0;
  width: 100%; */
 }

 .navbar .cover-screen-mobile {
  height: 80px
 }

 .corner-decor.left {
  top: 5px;
 }

 .navbar .titleWithBackground-mobile {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 90px;
  display: block !important;
  z-index: 2;
  /* background-color: white; */
  background-image: url('/image/Mobile-LunarNewYear-Rev1.jpg');
  /* background-image: url('/image/Mobile-Navbar_Christmas-Rev2.jpg'); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
 }

 .navbar .titleWithBackground-tablet {
  display: none !important;
 }

 .navbar h3 {
  margin-top: 12px;
  margin-left: 15px;
  /* display: none !important; */
 }

 .show-flex .navigation {
  margin-top: 10px;
  /* margin-top: 70px; */
 }

 .corner-decor.right {
  display: none;
 }

 .navbar.fixed {
  position: fixed;
  /* top: 0; */
  animation: slideDown 0.5s forwards;
 }

 .navbar.unfixed {
  animation: slideUp 0.5s forwards;
 }

 @keyframes slideDown {
  from {
   top: -100px;
  }

  to {
   top: 0;
  }
 }

 @keyframes slideUp {
  from {
   top: 0;
  }

  to {
   top: -100px;
  }
 }

 .navbar nav ul li {
  margin: 5px 0;
 }

 .navigation ul li a span.text {
  font-size: 10px;
 }

 h1 {
  font-size: 2em;
 }

 h2 {
  font-size: 1.5em;
 }

 p {
  font-size: 0.9em;
 }

 .parallax-image {
  background-size: contain;
  background-position: center;
  background-attachment: fixed;
 }

 .parallax-1 {
  /* background-size: cover; */
  background-position: top;
 }

 .parallax-1,
 .parallax-2 {
  /* padding-bottom: 0px; */
  padding-bottom: 115px;
 }

 .parallax-2 #parallax-inner-h1 {
  font-size: 35px;
  /* text-align: center;
  color: rgba(255, 255, 255, .4); */
 }

 .parallax-3 #parallax-inner-h1 {
  font-size: 50px;
 }

 .parallax-1 .parallax-inner {
  padding: 0 0;
 }

 .username-box {
  font-size: 10px;
  padding: 3px 6px;
 }

 .hover-area {
  width: 35px;
  height: 35px;
 }

 .detail-view #imageTotal {
  /* position: fixed;
  bottom: 14px;
  left: 120px; */
  /* margin-top: 50px; */
  /* margin-bottom: -10px; */
  font-weight: bold;
  position: absolute;
  left: 50%;
  /* right: 40%; */
  transform: translateX(-50%);
  bottom: -12px;
 }

 .tree li {
  width: 100%;
 }

 .tree li a img {
  width: 100px;
  height: 100px;
 }

 .tree li a {
  font-size: 14px;
 }

 table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
 }

 .photo-gallery img {
  width: 100%;
  height: auto;
  margin-left: 0px;
 }

 .photo-wrapper:hover .archived-text-photo {
  /* bottom: 200px; */
  left: 50px;
  transform: translateX(-24%);
  bottom: calc(100% - 60px);
  border-radius: 10px;
 }

 #landscape-pakFariz+.archived-text {
  bottom: 0px;
 }

 #kotak-pakFariz+.archived-text {
  bottom: 0px;
 }

 .photo-wrapper:hover #landscape-pakFariz+.archived-text {
  bottom: 160px;
  left: 15%;
 }

 #potrait-pakFariz+.archived-text {
  left: 30%;
 }

 .photo-wrapper:hover #potrait-pakFariz+.archived-text {
  /* bottom: 220px; */
  left: 35% !important;
 }

 .photo-wrapper:hover img#landscape-buNovi+.archived-text-photo {
  transform: scale(1.05) translateX(35%);
  bottom: calc(100% - 40px);
  left: unset;
 }

 .photo-wrapper:hover img#pano-marchello+.archived-text-photo {
  transform: scale(1.05) translateX(20%);
  left: unset;
 }

 .photo-wrapper:hover img#ultrawide-0_5+.archived-text-photo {
  bottom: 0px;
  left: unset;
  transform: translateX(25%);
 }

 .photo-wrapper:hover #kamera-photobooth+.archived-text {
  right: unset;
  left: calc(240px - 10%);
  transform: translateX(-115%);
  bottom: calc(100% - 45px);
 }

 .video-gallery .video-wrapper {
  width: 100%;
  height: 215px;
 }

 .archived-text-vidwrapper {
  left: calc(100% - 120px);
  transform: translateX(45%);
 }

 .video-wrapper:hover .archived-text-vidwrapper {
  /* transform: translateX(-140%); */
  /* transform: translateX(calc(-100% - 70px)); */

  /* transform: translateX(-100%); */
  /* left: calc(30% + 1px); */
  transform: translateX(0);
  left: 0;
 }

 .lengthVid {
  top: 85px !important;
  right: 0px !important;
  font-size: 10px !important;
 }

 .lyric-container div p {
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  max-width: 45%;
  font-size: 0.7rem;
  padding: 5px 10px;
  color: #fff;
  word-wrap: break-word;
 }

 .lyric-container div p:empty {
  background-color: transparent;
 }

 .lyric-left {
  position: absolute;
  /* bottom: 40px; */
  bottom: calc(100% - 470px);
  left: 0;
  text-align: left;
 }

 .lyric-right {
  position: absolute;
  bottom: calc(100% - 470px);
  /* top: calc(100% + 5px); */
  right: 0;
  text-align: right;
  /* bottom: -12px; */
 }

 .fullscreen-video .archived-text {
  top: 0px;
  bottom: 50px;
  right: calc(100% - 110px);
  padding-bottom: 30px;
  /* transform: translateX(()) */
  /* position: absolute; */
  /* margin-bottom: 500px; */
  /* margin-right: 180px; */
  /* background-color: red; */
 }

 .fullscreen-video .archived-text.potrait {
  left: 20px;
  bottom: 930px;
  top: 123px;
  font-size: 0.7rem;
  padding-bottom: 23px;
  right: calc(100% - 180px);
  /* bottom: 700px; */
  /* right: calc(100% - 120px); */
 }

 .fullscreen-video .archived-text.landscape {
  font-size: 0.6rem;
  bottom: calc(100% - 200px);
  top: calc(100% - 45%);
  /* top: 483px; */
  /* padding-bottom: 22px; */
  right: calc(100% - 138px);
  padding-bottom: 5%;
  /* bottom: 260px; */
  /* bottom: 700px; */
  /* right: calc(100% - 120px); */
 }

 /* .timeVideo {
  /* top: 0;
 } */

 .watched {
  transform: translateX(290px);
 }

 .archived-text.landscape+.timeVideo {
  bottom: 100px;
  left: 55%;
  transform: translateX(-50%);
  max-width: 300px;
  min-width: 300px;
  font-size: 12px;
 }

 .archived-text.potrait+.timeVideo {
  position: absolute;
  /* top: 0px; */
  /* right: 30px; */
  /* right: 50px; */
  /* bottom: 65px; */
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 260px;
  width: 300px;
  font-size: 0.7rem;
  text-align: center;
  display: inline-block;
 }
}