/* font yang dipakai  */
@font-face {
	font-family: "Montserrat-ExtraBold";
	src: url("../fonts/Montserrat-ExtraBold.otf");
}

@font-face {
	font-family: "Montserrat-Light";
	src: url("../fonts/Montserrat-Light.otf")format("opentype")
}

@font-face {
	font-family: "Montserrat-SemiBold";
	src: url("../fonts/Montserrat-SemiBold.otf")format("opentype")
}

@font-face {
	font-family: "coolvetica-compressed-rg";
	src: url("/fonts/coolvetica\ compressed\ rg.ttf")format("opentype")
}

@font-face {
	font-family: "coolvetica-condensed-rg";
	src: url("/fonts/coolvetica\ condensed\ rg.ttf")format("opentype")
}

@font-face {
	font-family: "coolvetica-crammed-rg";
	src: url("/fonts/coolvetica\ crammed\ rg.ttf")format("opentype")
}

@font-face {
	font-family: "coolvetica";
	src: url("/fonts/coolvetica\ rg.ttf")format("opentype")
}


/* Global */



.features {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white(0, 0, 0);
    color: rgb(0, 0, 0);
    text-align: center;
    -webkit-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    z-index: 2;
}

.description-text {
    /* font-size: 14px; */
}

/*========================================================*/

/* Navbar */
.caskade_overview {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #ededed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white(0, 0, 0);
    color: rgb(0, 0, 0);
    text-align: left;
    -webkit-box-shadow: 0px 4px 23px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 23px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 23px 0px rgba(0,0,0,0.75);
    z-index: 2;
}


.navbar-custom {
    background-color: #f4f4f4;
    
    /* -webkit-box-shadow: 9px 24px 62px -36px rgba(0,0,0,0.75);
    -moz-box-shadow: 9px 24px 62px -36px rgba(0,0,0,0.75);
    box-shadow: 9px 24px 62px -36px rgba(0,0,0,0.75); */
    z-index: 3;

}

.navbar-custom a{
    width: 20%;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(128, 128, 128, 0.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(128, 128, 128, 0.8);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: rgba(128, 128, 128, 0.8);
}

.img-header {
    max-width: 80%;
    height: auto;
    margin-left: 30px;
    margin-right: auto;
}@media (max-width: 768px) {
    .img-header {
        max-width: 100%;
    }
}

#mynavbar a {
	font-size: 18px;
	margin-left: px;
	color: rgb(90, 90, 90);
    padding: 10px 20px;
    /* margin-right: 20px; */
    width:100%; 
    position:relative;
    
	/* text-transform: uppercase; */
	background-color: transparent;
}

#mynavbar a:hover {
	/* color: #fe2e65; */
}


#header .navbar-default .navbar-nav > .active > a, 
#header .navbar-default .navbar-nav > .active > a:focus {
	/* color: #fe2e65; */
	background-color: transparent;
}

.dropdown a:before {
	content: "";
	position: absolute;
	width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
	background-color: #005194;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

#mynavbar a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

.btn-primary {
    border-radius: 25px;
    padding-right: 40px;
    padding-left: 40px;
}

/*========================================================*/

/* Footer */
.footer {
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 40px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(39, 39, 39);
    font-size: 16px;
    color: white;
    text-align: center;
    -webkit-box-shadow: 20px -4px 124px -71px rgba(0,0,0,0.75);
    -moz-box-shadow: 20px -4px 124px -71px rgba(0,0,0,0.75);
    box-shadow: 20px -4px 124px -71px rgba(0,0,0,0.75);
    
}

#footer-title {
    font-family: "coolvetica";
    text-align: center;
    letter-spacing: 2px;
    font-size: 16px;
}

.icon-media-social {
    text-align: left;
}

.icon-soc {
    margin-left: 5px;
}

.copyright {
    font-size: 12px;
}

/* mobile footer */
@media (max-width: 768px) {
    .icon-media-social {
        text-align: center;
    }
}

/*========================================================*/

/* index */


/* homepage */

#homepage {
    /* font-family: "Montserrat-Light"; */
    display: flex;
    flex-direction: column;
    
}
.container_homepage {
    margin-top: 10px;
    /* font-family: "Montserrat-Light"; */
    color: rgb(68, 68, 68);


    z-index: 1;
    
}

.btn-view-more {
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.btn-subscibe {
    border-radius: 25px;
    padding-right: 20px;
    padding-left: 20px;
}


/* .list-games {
    margin-top: 30px;
    border-radius: 25px;
    background-color: rgba(112, 200, 241, 0.315);
    width: auto;
    padding: 10px;
    font-family: "Montserrat-SemiBold";
    text-align: center;
    font-size: 24px;
}

.img-list-games {
    margin-top: 10px;
    border-radius: 8px;
    width: 80%;
    height: auto;
} */

.img-list-article-1 {   
    float: left;
    width: 100%;
    height: auto;
}

.article_1 {
    background-color: #ededed;
    margin-left: 35px;
    margin-right: 35px;
    margin-bottom: 0px;

}@media (max-width: 768px) {
    .article_1 {
        background-color: #ededed;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    
    }

}

.mobile-caskade {
    padding-top: 40px;
    padding-right: 30px;
}

.caskade-title{
    padding-top: 40px;
}

@media (max-width: 768px) {
    .mobile-caskade {
        padding: 40px;
    }
    .desc-caskade {
        text-align: left;
    }

    .desc-mobile h1{
        font-size: 2em;
        font-weight: bolder;
    }

}



.article_1 h3{
    /* font-family: 'montserrat-ExtraBold'; */
    color: rgb(68, 68, 68);
}

.description-article-1 {
    text-align: justify;
    color: black;
    

}@media (max-width: 768px) {
    .description-article-1 {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px
    }
  }

.whatwedo {
    margin-top: 30px;
    width: auto;
    padding: 10px;
}

.whatwedo-class p {
    font-size: 14px;
    /* font-family: "Montserrat-Light"; */
}

.title-whatwedo {
    text-align: center;
    font-family: "Montserrat-semibold";
    font-size: 24px;
}



.form-control-newslatter {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 25px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.Newslatter {
    background-color: white;
    padding: 40px;
    
    color: rgb(68, 68, 68);
    text-align: center;
    z-index: 4;
}@media (max-width: 768px) {
    .Newslatter {
        padding-top: 20px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 20px;
        
        color: rgb(68, 68, 68);
        text-align: center;
        z-index: 4;
    }
}

.input-newslatter {
    padding-top: 20px;
    font-size: 14px;
    
}



/*========================================================*/

/* Headers */


.img-title {
    border-radius: 8px;
    width: 80%;
    height: auto;
    -webkit-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
}

#features h1 {
    color: rgb(68, 68, 68);
    text-align: left;
}

#features p {
    color: rgb(0, 0, 0);
    text-align: left;
}

/*========================================================*/

/* Login */

#login_wrapper {
    padding: 30px;
    background-color: #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white(0, 0, 0);
    color: rgb(0, 0, 0);
    text-align: center;
    -webkit-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    z-index: 2;
}

.container_login {
    /* font-family: "Montserrat-Light"; */
    color: white;
    border-radius: 25px 25px 0px 0px;
    -webkit-box-shadow: 4px 5px 60px -20px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 5px 60px -20px rgba(0,0,0,0.75);
    box-shadow: 4px 5px 60px -20px rgba(0,0,0,0.75);
    z-index: 1;
}


.login-card-description {
    font-size: 32px;
    text-align: center;
    /* font-family: "Montserrat-ExtraBold"; */
    color: rgb(39, 39, 39);
    font-weight: normal;
    margin-bottom: 23px; 
}

.forgot-password-link {
    font-size: 14px;
    color: #919aa3;
    margin-bottom: 0px; 
}

.form-control-login {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/*========================================================*/

/* About us */

.about_us {
    padding-top: 50px;
    padding-right: 10;
    padding-bottom: 10px;
    padding-left: 10px;
    background-color: white;
    /* font-family: "Montserrat-light"; */
    text-align: center;
}


.description-about-us-1 {
    padding: 10px;
}

.description-about-us-2 {
    /* takut ada keperluan */
}

.description-about-us-3 {
    /* takut ada keperluan */
    text-align: justify;
}

.description-about-us-4 {
    /* takut ada keperluan */
    text-align: justify;
}

/* .card {
    border-radius: 25px;
    padding: 10px;
}

.card :hover{
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card-body{
    text-align: center;
} */

.image-about-us {
    padding: 10px;
    border-radius: 25px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    z-index: 4;
}

.Newslatter-about-us {
    background-color: rgb(84, 227, 241);
    padding: 40px;
    color: rgb(68, 68, 68);
    text-align: center;
    -webkit-box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
    box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
}

.Newslatter-homepage {
    background-color: rgb(255, 255, 255);
    padding: 40px;
    color: rgb(68, 68, 68);
    text-align: center;
    -webkit-box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
    box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
}

.img-header-about-us{
    width: 100%;
    height: auto;
    -webkit-box-shadow: 3px 24px 53px -19px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 24px 53px -19px rgba(0,0,0,0.75);
    box-shadow: 3px 24px 53px -19px rgba(0,0,0,0.75);
}

/* featured games */
.featured-games {
    background-color: #050505;
    color: white;
}

.description-featured-games{
    color: white;
    text-align: justify;
}

.description-article-featured-games {
    padding: 50px;
    position: absolute;
}

.img-featured-games {   
    float: left;
    width: 100%;
    height: auto;
}

.overlay {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 33%, rgba(255,255,255,0) 100%);
    height: 50%;
    width: 50%;
    padding: 40px;
}@media (max-width: 768px) {
    .overlay {
        padding: 40px;
        background-color: rgba(0, 0, 0, 0.9);
        height: 100%;
        width: 100%;
    }
}

.featured-games-stay {
    -webkit-box-shadow: -2px 1px 41px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: -2px 1px 41px -8px rgba(0,0,0,0.75);
    box-shadow: -2px 1px 41px -8px rgba(0,0,0,0.75);
    /* background-image: url('/img/Header_featured_games_2.PNG'); */
    background-size: cover;
    color: white
}@media (max-width: 768px) {
    .featured-games-stay {
        margin-left: -15px;
        margin-right: -15px;
    }
}

#featured-games-1 {
    padding: 40px;
    background-color: #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white(0, 0, 0);
    color: rgb(0, 0, 0);
    text-align: center;
    -webkit-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    -moz-box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    box-shadow: 16px 10px 61px -28px rgba(0,0,0,0.75);
    z-index: 2;
}@media (max-width: 768px) {
    #featured-games-1 {
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .featured-title h1{
        text-align: left;
        font-size: 2em;
        font-weight: bolder;
    }
}


.featured-title {
    text-align: left;
}

.description-featured{
    color: black;
    /* font-family: "Montserrat-Light"; */
    padding-bottom: 20px;
}

.title-featured {
    color: white!important;
}@media (max-width: 768px) {
    .title-featured  {
        /* margin-left: -15px; */
        margin-left: 0px;
    }
    .description-featured-games-stay{
        /* margin-left: -15px;
        margin-right: -15px; */
        margin-left: 0px;
        margin-right: 0px;
        text-align: justify;
    }
    .media-featured {
        /* margin-left: -15px;
        margin-right: -15px; */
        margin-left: 0px;
        margin-right: 0px;
    }
}

.featured-games-video {
    padding: 0px;
}@media (max-width: 768px) {
    .featured-games-video {
        padding: 20px;
    }
}

.media-social-title {
    padding-top: 10px;
}

.icon-media-social-featured-social {
    margin-top: -10px;
}

.card-video {
    width: 100%;
    height: auto;
    margin-top: 10px;
    border-radius: 25px;
    -webkit-box-shadow: 10px 10px 23px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 23px -8px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 23px -8px rgba(0,0,0,0.75);
}

.image-card {
    border-radius: 25px 25px 0px 0px;
}

.img-fluid-1 {
    width: 450px;
    height: 200px;
}
.newsletter-featured {
    background-color: rgb(84, 227, 241);
    text-align: center;
    padding-top: 40px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 40px;
    -webkit-box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
    box-shadow: 3px -5px 53px -19px rgba(0,0,0,0.75);
}

.Newslatter-featured-game {
    background-color: rgb(84, 227, 241);
    padding: 40px;
    /* font-family: 'montserrat-ExtraBold'; */
    color: rgb(68, 68, 68);
    text-align: center!important;

}


/* caskade */

#featured {
    padding: 40px;
    background-color: #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white(0, 0, 0);
    color: rgb(0, 0, 0);
    text-align: center;
    box-shadow: inset 0px 0px 40px rgba(0,0,0,0.5);
    z-index: 2;
}

.caskade-featured-games-desc{
    color: rgb(64, 105, 214)!important;
}




/* buat background */

.overlay-caskade::before {
    /* background-color:	rgb(255, 210, 98); */
    content: "";
    position: absolute;
    padding-right: 100%;
    background-color: rgba(255, 210, 98, 0.9);
    height: 100%;
    width: auto;
    box-shadow: inset 0px 0px 40px rgba(0,0,0,0.25);
    width: auto;
}

.overlay-caskade {
    position: relative; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-image: url(/img/about_us_image_1.PNG); */
    background-repeat: no-repeat;
    background-position: left;
    background-size: 50%;
}


.overlay-caskade-2 {
    /* position: relative; 
    background-image: url(/img/about_us_image_1.PNG);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 50%; */
    position: relative; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-image: url('/img/about_us_image_1.PNG'); */
    background-repeat: no-repeat;
    background-position: right;
    background-size: 50%;
}

.overlay-caskade-2::before {
    content: "";
    position: absolute;
    padding-right: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    height: 100%;
    width: auto;
    box-shadow: inset 0px 0px 40px rgba(0,0,0,0.25);
    width: auto;
}

.caskade-desc {
    padding-top: 40px;
    text-align: left;
}

@media (max-width: 768px) {
    .overlay-caskade {
        background-position: -100% -70%;
        background-size: 80%;
    }
    .overlay-caskade-2 {
        background-position: 180% 180%;
        background-size: 80%;
    }
    .caskade-desc {
        padding-top: 0px;
        font-size: 2em;
        font-weight: bolder;
        text-align: left;
    }
    .overlay-caskade {
        padding-left: 20px;
        padding-right: 20px;

    }
    
    .overlay-caskade-2 {
        padding-left: 20px;
        padding-right: 20px;
    }

}


.description-caskade {
    padding: 40px;
    text-align: left;
}

.img-caskade {
    width: 60%;
    height: auto;
    margin: auto;
}

.img-list-games {
    border-radius: 8px;
    width: 40%;
    height: auto;
} 

.img-carousel {
    width: 80%;
    height: auto;
    padding-bottom: 40px;
}@media (max-width: 768px) {
    .img-carousel {
        padding-top: 20px;
        width: 20%;
        height: auto;
    }
}
/* ########### Styles other than FlickGal. ########### */

.message {
  text-align: center;
}


/* ########### FlickGal ########### */

.yourFlickgalWrap .item { 
    width: 200px ; 
}
.yourFlickgalWrap .moving {
  -webkit-transition: -webkit-transform .2s ease-out;
  -moz-transition: -moz-transform .2s ease-out;
}

.yourFlickgalWrap .containerInner {
  overflow: hidden;
  width: 700px;
}

.yourFlickgalWrap .containerInner .item {
  display: inline-block;
  height: 180px;
  line-height: 180px;
  text-align: center;
  margin: 0 5px;
  border-radius: 20px;
  border: 1px #000000 solid;
  background: rgb(255, 255, 255);
  color: rgba(0,0,0,.4);
  font-weight: bold;
  font-size: 200%;
  -webkit-user-select: none;
  user-select: none;
}

.yourFlickgalWrap .nav {
  text-align: center;
}

.yourFlickgalWrap .nav li {
  display: inline-block;
}

.yourFlickgalWrap .nav li a {
  text-decoration: none;
  color: rgba(0,0,0,.2);
  font-size: 300%;
}
.yourFlickgalWrap .nav li a:hover {
  background: lightgray;
}
.yourFlickgalWrap .nav li a:active {
  background: gray;
}
.yourFlickgalWrap .nav .selected a {
  color: rgba(0,0,0,1);
}
.yourFlickgalWrap .arrows {
  font-size: 300%;
}
.yourFlickgalWrap .arrows a {
  text-decoration: none;
  color: rgba(0,0,0,.6);
}
.yourFlickgalWrap .arrows a:hover {
  background: lightgray;
  color: rgba(0,0,0,1);
}
.yourFlickgalWrap .arrows a:active {
  background: gray;
}
.yourFlickgalWrap .arrows a.off {
  color: rgba(0,0,0,.2);
  background: none;
}
.yourFlickgalWrap .arrows .prev {
  float: left;
}
.yourFlickgalWrap .arrows .next {
  float: right;
}

/* custom */
.yourFlickgalWrap .item { 
    width: 200px ; 
}

.yourFlickgalWrap .containerInner .card-2 {
    margin: 10px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgb(250, 250, 250);
    border-radius: 10px;
    user-select: none;
}

.card-caskade {
    margin: 10px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    /* -webkit-transition: all .6s ease; */
    -webkit-backface-visibility: hidden;
}

/* om dod */
.card-caskade {
    margin:0
}

.card-caskade:hover .btn-custom {
    filter: none;
    -webkit-filter: grayscale(0%);
    -webkit-filter: opacity(100%);

}

.card-2:hover{
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    -webkit-filter: grayscale(0%);
    border: 1px solid rgb(2, 2, 2)!important;
    border-radius: 10px;
    filter: none;
}

.btn-custom{

    border: solid 2px white;
    -webkit-filter: opacity(0%);
    z-index: 1;
}

.btn-custom:hover{
    -webkit-filter: opacity(100%);
}



.list-games {
    width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.preview {
    padding-bottom: 500px;
}

.splide__slide {
    margin-left: -60px;
}