.bg { position:absolute;width:100%;height:100vh;

background-color:black;display:flex;align-items:flex-start; }
.bg-img { width:20%;height:90%;background-size:cover;background-position:top center; }
.bg-transition { width:100%;height:100%;background: linear-gradient(180deg, rgba(255,197,75,0) 0%, black 100%); }

.twilight-guardians { box-sizing: border-box;padding:30px;padding-top:150px;padding-bottom:150px;width:100%;max-width:600px;font-family:Roboto;color:white;font-size:20px;line-height: 1.6;letter-spacing: 1px; }
.frame-login { height:100vh;min-height:800px }
.login-top { position:relative;margin-top:120px;height:130px;z-index:1;display:flex; justify-content:center; }

.game-logo { cursor:hand;cursor:pointer;transition: all 1s; }
.game-logo:hover { transform: scale(1.1); }

.home-list-view { display:flex;width:100%;height:300px;margin-top:40px;position:absolute; }

.home-list-e { position:relative;height:100%;
cursor:hand;cursor:pointer;min-width:calc(100% / 3);
padding:10px;
    scroll-snap-align: start;box-sizing: border-box; }

.home-list-img-frame {width:100%;height:100%;overflow:hidden;}

.home-list-img { width:100%;height:100%;background-color:red;transition: all 1s; }

.home-list-img:hover {   transform: scale(1.2); }


.home-swipe-view {
	border:0px solid blue;
	width:calc(100% - 60px);
	max-width:1000px;
	margin-top:40px;
	height:100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-coordinate: 0 0;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: x mandatory;
  position:absolute;

  -webkit-overflow-scrolling: touch;

}

.home-swipe-view::-webkit-scrollbar {
  display:none ;
}

/* Hide scrollbar for IE, Edge and Firefox */
.home-swipe-view {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.home-title {
	
	color: #a6eafc;
    font-family: Rajdhani;
    font-size: 30px;
   text-shadow: 0px 0px 20px rgba(255,255,255,0.6);
   margin-bottom:5px;
	
}

.home-text { color: #fff;font-family:Roboto;    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 1px; }

.footer { width:100%;height:200px;background-color:black;display:flex;align-items: flex-end; }
.footer-cnt { box-sizing: border-box;padding:30px;width:100%;margin-top:10px;text-align:center;font-family: Roboto;color: white;font-size: 16px;line-height: 1.6;letter-spacing: 1px; }
.footer-cnt div { padding-top:5px; }

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

 
}

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

  .bg-img { height: 60%; }
  .twilight-guardians { padding-top:300px; } 
  .frame-login { height:110vh; }

}

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

.home-swipe-view {

	max-width:500px;	
}
.home-list-view { width:calc(100% * 3);}

}