/* ----------------------------------------------------------------------------------
    RESPONSIVE LAYOUTS
---------------------------------------------------------------------------------- */
html,
body {
  overflow: auto;
}



/* Desktop / Laptop */
@media only screen and (max-width: 1440px) and (min-width: 1366px) {

  .box-timeline {
    display: block;
    margin-left: 400px;
  }

  svg#Layer_overview {
    width: auto;
    height: 105%;
    /* margin-left: 15rem; */
  }

  .box-north-arrow {
    bottom: 5rem;
  }

  .cd-horizontal-timeline .timeline {
    height: 80px;
  }

  .cd-horizontal-timeline {
    bottom: 2rem;
  }

  .box-north-arrow {
    width: 40px;
    height: 40px;
    right: 1rem;
    bottom: 0.5rem;
  }

  .gyroscope {
    bottom: 0.5rem;
    display: none;
    right: 1rem;
  }

  .box-power-by {
    right: 4rem;
  }

  .box-power-by img {
    height: 1rem !important;
  }

}

@media only screen and (max-width: 1500px) {

  .top-title {
    font-size: 1.5rem !important;
  }

  #overview-map,
  #overview-map-1 {
    overflow: auto;
  }

  #overview-map svg,
  #overview-map-1 svg {
    width: auto !important;
    height: 100% !important;
  }
}

@media only screen and (max-width: 1024px) {

  .box-guide {
    display: block;
  }

  svg#Layer_overview {
    width: auto;
  }

  .box-north-arrow {
    right: unset;
    left: 1rem;
    bottom: 8rem;
  }

  .box-timeline {
    width: 600px;
    margin: 0 0 0 32rem;
  }

  .cd-horizontal-timeline {
    width: 500px;
    /* bottom: unset; */
    /* top: 4rem; */
  }

  /* .cd-horizontal-timeline .events a::after {
    bottom: -25px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
  } */

  .cd-horizontal-timeline .events {
    width: 500px;
  }

  .cd-horizontal-timeline .events a {
    padding-bottom: 37px;
  }

  .gyroscope {
    bottom: 1rem;
    display: none;
    right: unset;
    left: 10rem;
    bottom: 9rem;
    width: 60px;
    height: 60px;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {

  #arrow-left-popup,
  #arrow-right-popup {
    font-size: 18px !important;
    padding: 8px 6px !important;
    width: 150px !important;
  }

  #arrow-left-popup {
    left: 40px !important;
  }

  #arrow-right-popup {
    right: 40px !important;
  }

  .box-guide {
    display: block;
  }

  .box-menu {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .menubar-sm {
    display: flex !important;
    align-items: center;
    height: 64px;
  }

  .menubar-md {
    display: none !important;
  }

  .corner-top-right-bevel {
    display: none;
  }

  svg#Layer_overview {
    width: auto;
    height: 150%;
  }

  .box-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 64px;
    right: 0;
    display: none;
  }

  ul.menu {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #589199;
    border-top: 1px solid #ffffff;
    z-index: 4;
  }

  .box-timeline {
    width: 100%;
    margin: 0 auto;
  }

  /* .cd-horizontal-timeline .events a::after {
    bottom: -16px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  } */

  .cd-horizontal-timeline .timeline {
    height: 80px;
  }

  .box-north-arrow {
    left: unset;
    width: 40px;
    height: 40px;
    right: 1rem;
    bottom: 1rem;
  }

  .gyroscope {
    bottom: unset;
    display: none;
    right: unset;
    left: unset;
    top: 0.8rem;
    right: 4rem;
    width: 35px;
    height: 35px;
  }

  .box-power-by {
    right: 4rem;
  }

  .box-power-by img {
    height: 1rem !important;
  }
}

@media only screen and (max-width: 768px) {

  #dagens {
    bottom: 8px !important;
    left: 10px !important;
  }

  #fremtidig {
    bottom: 8px !important;
    right: 10px !important;
  }

  #arrow-left-popup,
  #arrow-right-popup {
    font-size: 18px !important;
    padding: 8px 6px !important;
    width: 150px !important;
  }

  #arrow-left-popup {
    left: 40px !important;
  }

  #arrow-right-popup {
    right: 40px !important;
  }

  .highlight {
    display: none;
  }

  .svgicon,
  .home-marker {
    width: 100px !important;
    height: 100px !important;
    transform-origin: 50px !important;
  }

  #line-map {
    top: 66px !important;
    left: 5px !important;
  }

  #btn-help,
  #btn-help-1,
  #btn-help-close,
  #btn-help-1-close {
    right: 10px !important;
  }

  #help-menu,
  #help-menu-1 {
    right: 26px !important;
  }

  #modal-gallery .modal-body,
  #modal-compress .modal-body {
    padding: 0.3rem !important;
  }

  .carousel-thumbnails {
    margin-top: .25rem !important;
  }

  .submenu {
    display: none !important;
  }

  .modal-left img {
    width: 30px !important;
  }

  #help-menu,
  #help-menu-1 {
    width: 94% !important;
  }

  .top-title {
    font-size: 2rem;
    width: 60%;
    white-space: nowrap;
    /* ไม่ให้ข้อความขึ้นบรรทัดใหม่ */
    overflow: hidden;
    /* ซ่อนส่วนที่เกิน */
    text-overflow: ellipsis
  }

  .box-menu {
    display: none;
  }

  .box-timeline {
    width: 100%;
    margin: 0 auto;
  }

  .cd-horizontal-timeline {
    width: 90%;
  }

  .cd-horizontal-timeline .events {
    width: 90%;
  }

  .cd-horizontal-timeline .timeline {
    height: 86px;
  }

  .cd-horizontal-timeline .events a {
    padding-bottom: 27px;
  }

  .mobile-menu {
    display: block;
  }

  .menubar-sm {
    display: flex !important;
    align-items: center;
    height: 64px;
  }

  .menubar-md {
    display: none !important;
  }

  /* .cd-horizontal-timeline .events a::after {
    bottom: -16px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  } */

  .corner-top-right-bevel {
    display: none;
  }

  .box-north-arrow {
    left: unset;
    width: 40px;
    height: 40px;
    right: 1rem;
    bottom: 1rem;
  }

  .gyroscope {
    bottom: unset;
    display: none;
    right: unset;
    left: unset;
    top: 0.8rem;
    right: 4rem;
    width: 35px;
    height: 35px;
  }

  .box-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 64px;
    right: 0;
    display: none;
  }

  ul.menu {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #589199;
    border-top: 1px solid #ffffff;
    z-index: 4;
  }
}

@media only screen and (max-width: 736px) {

  .top-title {
    font-size: 1.4rem;
  }

  /* .cd-horizontal-timeline .events a::after {
    bottom: -13px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  } */

  /* svg image.home-marker {
    height: 100px;
    width: 100px;
    cursor: pointer;
  } */

  .box-north-arrow {
    left: unset;
    width: 40px;
    height: 40px;
    right: 2rem;
  }

  .gyroscope {
    bottom: unset;
    display: none;
    right: unset;
    left: unset;
    top: 0.8rem;
    right: 4rem;
    width: 35px;
    height: 35px;
  }

  a#alternatives-1 {
    left: 0;
  }

  a#alternatives-3 {
    right: 0;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .cd-horizontal-timeline .timeline {
    height: 86px;
  }

  .cd-horizontal-timeline .events a {
    padding-bottom: 27px;
  }
}

@media screen and (max-height:500px) {
  #overview-map svg, #overview-map-1 svg {
    width: 100% !important;
    height: auto !important;
  }

  .svgicon,
  .home-marker {
    width: 120px !important;
    height: 120px !important;
    transform-origin: 60px !important;
  }

  #line-map {
    top: 64px !important;
    left: 5px !important;
  }

}

@media screen and (max-height:380px) {

  #line-map {
    top: 40px !important;
    left: 5px !important;
  }

  .box-menu {
    top: 40px;
  }

  .navbar-fixed {
    height: 40px;
  }

  /* .top-title {
    width: 90%;
    font-size: 1.4rem;
    padding: 0.5rem 0 0.5 0.5rem;
    text-align: left;
  } */

  .mobile-menu {
    top: 0px;
  }

  .menubar-sm {
    display: block !important;
  }

  .menubar-md {
    display: none !important;
  }

  .home-icon {
    padding: 5px;
    width: 44px;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  /* svg image.home-marker {
    height: 100px;
    width: 100px;
    cursor: pointer;
  } */

  svg#Layer_overview {
    width: auto;
    height: 180%;
  }

  .box-timeline {
    width: 100%;
    margin: 0 auto;
  }

  .cd-horizontal-timeline {
    width: 70%;
  }

  .cd-horizontal-timeline .events {
    width: 62%;
  }

  .cd-horizontal-timeline .timeline {
    height: 86px;
  }

  a#alternatives-3 {
    right: 20px;
  }

  .gyroscope {
    bottom: unset;
    display: none;
    right: unset;
    left: unset;
    top: 3px;
    right: 3rem;
    width: 35px;
    height: 35px;
  }
}

/*
@media only screen and (max-width: 667px) {
  .box-north-arrow {
    width: 30px;
    height: 30px;
    left: unset;
    right: 1rem;
    bottom: 1rem;
  }

  svg image.home-marker {
    height: 100px;
    width: 100px;
    cursor: pointer;
  }

  svg#Layer_overview {
    width: auto;
    height: 180%;
  }
}

@media only screen and (max-width: 430px) {
  .box-timeline {
    display: none;
  }
}
@media only screen and (max-width: 414px) {
  .top-title {
    width: 70%;
  }

  a#alternatives-1 {
    left: 0;
  }

  a#alternatives-3 {
    right: 0;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 40px;
  }

  .cd-horizontal-timeline {
    width: 100%;
  }

  .cd-horizontal-timeline .events {
    width: 100%;
  }

  .box-timeline {
    /* margin: 0 auto; * /
  }

  .cd-horizontal-timeline .events a {
    text-align: left;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  svg image.home-marker {
    height: 80px;
    width: 80px;
    cursor: pointer;
  }

  .box-north-arrow {
    width: 30px;
    height: 30px;
    left: unset;
    right: 1rem;
    bottom: 7rem;
  }

  .gyroscope {
    top: unset;
    display: block;
    right: unset;
    left: 1rem;
    bottom: 7rem;
    width: 30px;
    height: 30px;
  }
}


@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min--moz-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3/1),
only screen and (min-device-pixel-ratio: 3) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}

@media only screen and (max-width: 390px) {
  .top-title {
    /* display: none; * /
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}*/