* {
  margin: 0;
  padding: 0;
/*   position: relative; */
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

.bg {
/*   https://images.unsplash.com/photo-1560717789-0ac7c58ac90a?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQ3Njg3ODk&ixlib=rb-1.2.1&q=80 */
/*    https://images.unsplash.com/photo-1655276767948-14014744e65b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTU4NzIwMTY&ixlib=rb-1.2.1&q=80 */
  background-image: 
    linear-gradient(0, rgba(255,255,255,0.8), rgba(255,255,255,0.4)),
    url("../img/bg.jpg");
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  overflow: scroll;
  overflow-x:hidden;
  opacity: 0.8;
}

.naviBar {
  width: 100%;
  height: 12%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 999;
}

.navBarMobile {
  width: 100%;
  height: 10%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 999;
}

.search {
  margin: 24px;
  cursor: pointer;
}

.searchImg {
  height: 36px;
  width: 36px;
  transition: all 0.3s;
}

.searchImg:hover {
  transform: scale(1.3);
}

.searchBar {
  height: 30px;
  border-radius: 8px;
  border: 2px solid #666666;
  margin-left: 12px;
  display: none;
}

.navItems {
  margin: 16px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.navItems a {
  text-decoration:none;
  color:white;
}

.navItem {
  font-size: 18px;
  color: white;
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  margin: 24px;
  cursor: pointer;
}

.navItem:hover:after {
  width:100%;
}

.navItem:after {
  content:'';
  display: block;
  height: 1px;
  width:0%;
  background: white;
  margin-top: 1px;
  transition: all 0.3s;
}

.log {
  font-size: 18px;
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  color: white;
  padding: 4px 24px;
  border-radius: 14px;
  border: 1px solid white;
  background: transparent;
  margin: 16px;
  transition: all 0.3s;
}

.log:hover {
  color: black;
  border: 1px solid rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0.5);
}

.logout {
  display: none;
}

.login.active {
  display: none;
}

.logout.active{
  display: inline-block;
}

.navItemsMobile {
  margin: 16px;
  display: flex;
}

.listBtn img {
  width: 28px;
  height: 28px;
/*   margin: 14px; */
  cursor: pointer;
  transition: all 0.3s;
}

.listBtn img:hover {
  transform: scale(1.5,0.8);
}

.menuMobile {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
  opacity: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}

.menuMobile.active {
  z-index: 1000;
  opacity: 1;
  transition: all 0.5s;
}


.closeBtn {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
}

.closeBtn img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.closeBtn img:hover {
  transform: scale(1.5);
}

.menuMobile .navItems {
  flex-direction: column;
}

.loading {
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading img {
  position: relative;
  width: 150px;
}

.content {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  flex-direction: column;
  position: absolute;
  top: 16%;
}

.home {
  width: 28px;
  height: 28px;
  margin: 12px 12px -8px 40px;
  cursor: pointer;
  transition: all 0.3s;
}

.home img {
  width: 100%;
  height: 100%;
}

.home:hover {
  opacity: 0.5;
}

.left {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  margin-left: 32px;
}

.title {
  margin-right: 16%;
  margin-left: 4px; 
/*   background: gray; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.title p {
  font-size: 44px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
}

.title p:before {
  content: '';
  width: 8px;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
/*   left: -20; */
  margin-left: -20px;
}

.right {
  width: 60%;
  height: 100%;
  padding: 36px 24px 24px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.splide__slide img {
  width: 60%;
  height: 100%;
  border-radius: 20px;
  opacity: 0.6;
  object-fit: cover;
  transition: all 0.5s;
}

.splide__slide img:hover {
  opacity: 1;
}

@media (max-width: 575.98px)  {
  .naviBar {
    display: none;
  }

  .navBarMobile {
    display: flex;
  }

  .searchImg {
    width: 28px;
    height: 28px;
  }

  .searchBar {
    height: 24px;
  }

  .loading img {
    width: 20%;
  }
  
  .content {
    height: 100vh;
    flex-direction: column;
    z-index: 1;
  }
  
  .left {
    width: 100%;
    justify-content: center;
    margin-top: 15%;
    margin-bottom: -10%;
  }
  
  .right {
    width: 100%;
    padding: 24px;
  }

  .splide__slide img {
    opacity: 1;
  }
}