#circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
	width:150px;
    height:150px;	
}
.loader{
    width:calc(100% - 0px);
	height:calc(100% - 0px);
	border:8px solid #162534;
	border-top:8px solid #53ebe4;
	border-radius:50%;
	animation:rotate 5s linear infinite;
}
.loader-wrapper{
    width:100%;
    height:100%;
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    background-color:black;
    display:flex;
    justify-content:center;
    align-items:center;
}
@keyframes rotate {
100% {transform:rotate(360deg);}
} 
/* Main body*/

body{
    line-height:1.5;
    scroll-behavior: smooth;
}
li{
	font-family:'Kdam Thmor Pro', sans-serif;
    font-size: 14pt;
}
p{
    font-family:'Overlock SC', cursive;
    color:#04c4d9;
    font-size:large;
    text-align:center;
}
.mainbody {
    background-image:url(images/bgcompile-no-overlay.jpg);
    background-repeat:no-repeat;
    background-size:cover; 
    max-width:100%;
    max-height:100%;
}
 .buttonplay{
    display:flex;
    justify-content:center;
    padding-top:15%;
 }
.navbar {
    background-color:rgba(77, 0, 79, 0.46);
    background-blend-mode:soft-light;
}
.navbar-nav li{
    padding-left:10px;
    padding-right:10px;
  }
.playback{
    border:hidden;
    background-color:transparent !important;
    display:flex;

} 
.preorder {
    background-color:rgb(0, 0, 0, 0.61) ;
    border:hidden;
    font-family:'Kdam Thmor Pro', sans-serif;
    color:antiquewhite;
    font-size:20pt;
    padding:1% 8% 1% 8%;
    border-radius:35px;
    text-align:center;
    margin:auto;
    display:flex;

}
.secone{
    padding-bottom:100px;
}
.seconecontent2{
    padding-top:50px;
    padding-bottom:50px;
    align-items:center;
}
.trailer{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10000;
    background:rgb(0, 0, 0, 0.95);
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    visibility:hidden;
    opacity:0;
}
.trailer.active{
    visibility:visible;
    opacity:1;
}
.trailer video{
    position:relative;
    max-width:900px;
    outline:none;
}
.close{
    position:absolute;
    top:30px;
    right:30px;
    cursor:pointer;
    filter:invert(1);
    max-width:32px;
}
#timeline {
    display:flex;
    background-color: #c1115a;
}
#timeline:hover .item{
    width:23.3333%;
}
.item {
    transform:translate3d(0,0,0);
    position:relative;
    width:25%;
    height:100vh;
    min-height:600px;
    color:white;
    overflow:hidden;
    transition:width 0.5s ease;
}
.item::before, .item:after{
    transform:translate3d(0,0,0);
    content: '';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.item:after{
    background:rgb(8, 23, 61,0.85) ;
    opacity:1;
    transition:opacity 0.5s ease;
}
.item:before{
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
    z-index:1;
    opacity:0;
    transform:translate3d(0,0,0) translateY(50%);
    transition:opacity 0.5s ease transform 0.5s ease;
}
.item:hover{
    width:30% !important;
}
.item:hover .content{
    opacity:1;
    transform:translateY(0);
    transition:all 0.75s ease 0.5s;
}
.item:hover .bg{
    filter:grayscale(0);
    -webkit-mask-image:linear-gradient(black, transparent);
    mask-image:linear-gradient(black, transparent);
    
}
.item:hover:after{
    background:transparent !important;
    transition:opacity 0.75s ease transform 0.75s ease;
}
.content{
    transform:translate3d(0,0,0) translateY(25px);
    position:relative;
    z-index:1;
    text-align:center;
    margin:0 1.681em;  
    top:55%;
    opacity:0;
    margin-top:8px;
}
.content p{
    color:white;
}
.content h2{
    color:black;
    font-size:30pt;
    font-family:'ZCOOL QingKe HuangYou', cursive;
}
.year{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    z-index:1;
    border-top:1px solid white;
    border-bottom:1px solid white;
    
}
.bg{
    transform:translate3d(0,0,0);
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    background-size: over;
    background-position:center center;
    transition:filter 0.5s ease;
    filter:grayscale(100%);
}
.gradient1{
    background-image:linear-gradient(to right, rgba(46,49,90,0), rgba(46,49,90,0,1));
}
#slogan{
    color:#53ebe4;
}
#characterName{
    font-size:18px;
    color:#53ebe4;
}
#section-3{
    background-color:rgb(8, 23, 61, 0.54);
    padding-top:50px;
}
.card{
	border-radius:0;
	border-radius:5%;
	align-items:center;
	padding:1%;
}
.secthree p{
	font-family:'Overlock SC', cursive;
	padding-top:2%;
    text-align:center;
    color:white;
}
.card-deck{
	padding: 2% 5% 2% 5%;
    display:flex;
    
}
.secthree{
    display:block;
}
.characters{
    padding-bottom:2%;
    padding-top:2%;
}
.page-footer{
    padding: 3% 5% 2% 14%;
    background-color:#ffecff ;
    background-size:cover;
    align-items:center;
}
#ftext{
    text-align:left;
    color: black;
    font-family:'Kdam Thmor Pro', sans-serif;
    font-size:small;
}
.copyright1{
    padding-top:28px;
}
.socials{
    padding-top:20px;
    text-align:center;
}
.col-md-2{
    justify-content:center;
    align-items:center;
    text-align:center;
}

@media (max-width:991px){
    .trailer video{
        max-width:90%;
    }
}
@media (max-width:600px){
    .trailer video{
        max-width:90%;
    }
    #timeline{
        display: block;

    }
    .item{
        position: relative;
        min-width: 100%;
        transform:translate3d(0,0,0);
        width:100%;
        height:25vh;
        min-height:200px;
        transition:height 0.5s ease;
    }
    .item:hover{
        height:600px !important;
    }
}