@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;400;600;800&display=swap');
/* CSS Document */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
  -webkit-tap-highlight-color: #000; 
  height:100%;
  background-color: #222;
}

body {
	font-family: 'Noto Sans Thai', sans-serif;
	margin: 0px;
	border: 0px;
	color: #C9C9C9;
	background-color: #21002f;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 100vw;
  min-height: 100%;
}

h1, h2, h3, h4, h5 {
}

h1 {
  color: #ffe800;
  margin-top: 5px;
	text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5rem;
}


h2 {
  color: #ff4ef9;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}

h3 {
  color: #fbe256;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.bg-sec h3{
  margin-left: 10px;
}

h4 {
  color: #F5F5F5;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1rem;
}

h5 {
    color: #DDD;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
    color: #EBEBEB;
}

a.md-badge:link, a.md-badge:visited, a.md-badge:hover, a.md-badge:active {
    color: black;
}

.h1 {
	  color: #fbe256;
  margin-top: 5px;
	text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5rem;
}
.md-badge {
    font-size: 0.8rem;
}
ul {
    list-style: none;
}
.promotion ul {
    list-style:disc;
}
hr {
    margin-bottom: 0px;
}

article {
	word-wrap: break-word;
	max-width: 100%;
}
.list-group-item{
	background-color: #f2f2f2;
	font-size: 0.8em;
}
.list-group-item h3{
	color: #690000;
	font-size: 1.3em;
}
.list-group-item.active {
	background-color: #690000;
	border-color:#690000;
}

.form-control:focus {
	color: #ffffff;
    background-color: #260000;
    border-color: #f80000;
    border-bottom: none;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(255 0 0 / 25%);
}
/*************************/
/* font css */
@font-face {
 font-family:icon-csn;
 font-display:swap;
 src:url("../fonts/casinoicon.eot");
 src:url("../fonts/casinoicon.eot?#iefix") format("embedded-opentype"),
 url("../fonts/casinoicon.woff") format("woff"),
 url("../fonts/casinoicon.ttf") format("truetype");
 font-style:normal;
 font-weight:400
}
.font-icon,
[font-icon]:before {
 display:inline-block;
 font-family: icon-csn!important;
 line-height:1;
 font-style:normal;
 font-weight:400;
 font-variant:normal;
 text-transform:none;
 text-rendering:optimizeLegibility;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
}
[font-icon]:before {
 content:attr(font-icon)
}
.icon-card-game:before {
 content:"\E913"
}
.icon-slot-alt:before {
 content:"\E985"
}
.icon-chip:before {
  content: "\E91F"
}
.icon-diamond:before {
  content: "\E92E"
}
.icon-lottery:before {
  content: "\E95C"
}
.icon-lotto:before {
  content: "\E95D"
}
.icon-medal:before {
  content: "\E961"
}
.icon-slot:before {
  content: "\E986"
}
.icon-soccer:before {
  content: "\E987"
}
.icon-hourglass:before {
  content: "\E9B2"
}
.icon-fish:before {
  content: "\E93A"
}
	
/* end font css */
.btn {
    box-sizing: border-box;
    border-radius: 0px;
    width: 300px;
    padding: 0.5rem;
}

.btn-100 {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0px;
    width: 100%;
    padding: 0.5rem;
}

.btn-user{
	border-radius: 5px;
	border: thin solid #b3570e;
    padding: 0px 5px;
    font-weight: bold;
}
.header-box {
    flex-basis: 100%;
    margin-bottom: 20px;
}

.fx-3-1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 300px;
    flex: 1;
}

.fx-2-1 {
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    min-width: 320px;
    flex: 1;
}
.fx-2-1 ul {
    margin: 0rem 1rem;
    padding: 0;
}
.fx-2-1 ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}
.fx-2-1 ul li span {
    padding-left: 1rem;
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
}
.fx-2-1 ul li:before {
    content: url("../images/icn-right.png");
    position: absolute;
    width: 36px;
    height: 36px;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.fx-wrap {
    display: flex;
    flex-wrap: wrap;
}

.fx-ai-center {
    display: flex;
    align-items: center;
}
.fx-ab-center{
	display: flex;
    align-items: center;
	justify-content: center;
}
section {
  display: flex;
}
.alert-danger {
  color: bisque;
  background-color: #44090A;
  border-color: #3C0001;
}
.block {
  flex: 1;
}
.block-s {
  flex: 1;
}

.container-head {
    padding-left: 5px;
    padding-right: 5px;
}

.container-banner {
  display:flex;
  max-width: 1200px;
  margin:auto auto;
  width:100%;
}

.fx {
  display: flex;
  flex-wrap: wrap;
}
.taskbar {
  max-width: 500px;
  margin: 10px auto;
}
.taskbar img {
  width: 50px;
}
.taskbar > div {
  margin-top: auto;
}
.m-icon a:link, .m-icon a:visited, .m-icon a:active {
  color: #CFCFCF;
}
.m-icon {
  font-size: 1.5rem;
  color: #000;
line-height: unset!important;
}

.m2-icon {
  font-size: 2rem;
}
.s-icon {
  font-size: 1.2rem;
  color: #CFCFCF;
}
.icon-xs {

    height: 30px;
}

.icon-30 {
    width: 30px;
    height: 30px;
}

.icon-sm {
    width: 50px;
}
.fav-icon {
    position: absolute;
    color: #000;
    padding: 0px 8px;
    top: 45px;
    right: 15px;
    font-size: 1rem;font-weight: 700;
    background-color: #FFC800;
    border-radius: 15px;
}

.grid-box {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: dense;
    width: 100%;
    grid-gap: 10px;
    padding: 8px;
}
.product-list {
    margin: 20px 0px;
    border: 3px solid #820002;
    border-radius: 10px;
    background-color: #260000;
    padding: 20px 0px;
}
.profile-icon {
    font-size: 2rem;
    color: #FFBC00;
    border-radius: 50%;
    background-color: #820002;
    width: 70px;
    height: 70px;
    padding-top: 5px;
    margin-bottom: -50px;
}


.btn-logout {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #464646;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding-top: 4px;
}

.active-logo{
    width: 200px;
}

.inactive-logo{
    height: 80px;
    padding: 5px;
    margin: 0px 8px;
}

.closed-logo{
    opacity: 0.7;
    filter: grayscale(100%);
}

/* --------------display--------------- */
.d-block ,.d-sm-none  {
  display:none;
}
.d-none ,.d-xl-block  {
  display:block;
}

.bg-main {
	border-radius: 3px;
	background-color: rgba(184,184,184,15%);
}


.bg-sec {
	border-radius: 3px;
    background-color: rgb(75 41 0 / 26%);
}

.bg-alert {
	color: #FFFFFF;
	background-image: -webkit-linear-gradient(270deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
	background-image: -moz-linear-gradient(270deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
	background-image: -o-linear-gradient(270deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
	background-image: linear-gradient(180deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
}

.bg-notice {
	color: #FFFFFF;
	background-image: -webkit-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: -moz-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: -o-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: linear-gradient(180deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
}

/*----------------  form ---------------*/

.main-form button{
    background-color: transparent;
}
/*********** form ***************/
.input-icon {
  position: absolute;
  width: 30px;
  top: 18px;
  left: 15px;
  text-align: center;
  color: #f80000;
}
.form-control {
  color: #AAA;
  background-color: #ff00e5;
  border-radius: 0px;
  width: 100%;
  font-size: 1rem;
  border: none;
  padding-left: 50px;
  height: calc(2.5em + .5rem);
}
.form-group {
  display: flex;
  position: relative;
  margin-bottom: 1rem;
}
.form-select {
  -webkit-appearance: none;
  padding-left: 50px;
}
.form-otp {
	border: medium solid rgb(255,68,0);
	padding: 10px;
	border-radius: 5px;
	width: 100%;
}
.form-otp input{
	background-color: #EEE;
}
.form-comment{
	color: #fbe256;
}

.form-body{
	width: 500px;
	margin: auto;
}

/*---------------- ---------------*/


    

/*---------------- header ---------------*/
nav {
  display: flex;
  /* border: thin dashed #D200FF; */
}
nav .navicon {
  color: #FFBC00;
  font-size: 35.0px;
  line-height: 40.0px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 0px;
}

header {
    position: fixed;
	display: block;
    top: 0;
    left: 0;
    right: 0;
    padding: 0px 0px;
    z-index: 1500;
    height: 65px;
    border-bottom: thin solid #9500d0;
    background-color: #4b006d;
}

header .logo img {
    max-width: 130px;
	max-height: 60px;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: -30px;
}

#box-header {
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
}
.box-balance {
    display: flex;
    
}
.logo-page {
  margin: 10px auto;
    justify-content: center;
}
.logo-page img {
  width: 150px;
}
.header-btn {
  display: flex;
  font-size: 16px;
  line-height: 14px;
  font-weight: 700;
  color: #222;
  border-style: none;
  border-radius: 8px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 155, 0, 1.00) 100%);
  background: linear-gradient(0deg, #efbb2a, #f6e7a2);
}
.header-mainbox {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	flex-grow: 1;
	max-width: 270px;
    max-height: 80px;
    margin-top: 0px;
    
}
.txt-1r{
    font-size: 1rem;
}
.txt-2r{
    font-size: 2rem;
}
.txt-credit {
    min-width: 100px;
    text-align: center;
}
/*---------------- bank ---------------*/
#box-bank {
    text-align: center;
}
#box-bank > img{
    border-radius: 100%;
    width: 50px;
    margin: 3px;
}
/*---------------- splash ---------------*/

#body-splash {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
}
.splash-img {

    max-width: 400px;
  margin: 10px auto;
    width: 100%;
}
.promotion-img {

    max-width: 400px;
  margin: 10px auto;
    width: 100%;
}
.splash-detail {
    padding: 0px 10px;
  }

.btn-main {
	display: flex;
	font-weight: 600;
	justify-content: center;
	align-items: center;
	min-width: 80px;
	height: 30px;
	margin: 0 0 0 0.4rem;
	padding: 0.85rem 0.7rem;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.8px;
	border-radius: 22px;
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
}
.btn-red {
    background-color: #9E008E;
    border-color: #8200c3;
	color: white;
}
.btn-white {
    color: #8200c3;
    background-color: #EBEBEB;
	border-color: transparent;
}
.btn-white a:link,.btn-white a:visited,.btn-white a:hover,.btn-white a:active {
	text-decoration: none;
    color: #8200c3;
}
.btn-red a:link,.btn-red a:visited,.btn-red a:hover,.btn-red a:active {
	text-decoration: none;
	color: #EBEBEB!important;
}

.gray-btn {
	display: flex;
	font-size: 16px;
	line-height: 20px;
	color: #FFD7D8;
	border-radius: 3px;
	padding: 15px 20px;
	justify-content: center;
	align-items: center;
	background-image: -webkit-linear-gradient(270deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	border-style: none;
}

.pro-btn {
  display: flex;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #FFD7D8;
  border-radius: 3px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  background-image: -webkit-linear-gradient(270deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  border-style: none;
}

.pro-des {
    margin-top: -5px;
}

.slogan-img {
  width: 150px;
}


/*---------------- contents / body ---------------*/
#box-body{
    margin-top: -750px;
    
}
.contents {
  display: flex;
  width: 100%;
  align-items: center;
}
.box-dark {
  width: 100%;
  padding: 20px 0px;
  background: rgb(51,51,51);
  background: -moz-radial-gradient(top center, ellipse cover,  rgba(51,51,51,1) 0%, rgba(9,9,9,1) 100%);
  background: -webkit-radial-gradient(top center, ellipse cover,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  background: radial-gradient(ellipse at top center,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#090909',GradientType=1 );
}
.box-red {
  width: 100%;
  background-image: url("../images/splash-bg.png"); /*background-color: #222;*/
  background-position: center top;
  background-size: cover;
  border-bottom: thick solid #960001;
}
.box-black {
  background-color: #111;
  padding: 20px 10px;
}

.box-banner {
  width:100%;
  background-image: url(/images/promotions/bg.jpg);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
}

.hilight-product {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    flex-basis: 150px;
    justify-content: center;
	text-align: center;
    max-width: 200px;
    min-height: 100px;
    margin: 8px;
	margin-top: 20px;
	padding: 8px;
    border: 1px solid #ff00e5;
    border-radius: 10px;
}
/*---------------- service ---------------*/
#box-showoff {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    background-color: #000;
    border-radius: 10px;
    padding: 20px 10px;
    margin: 10px 0px;
}
.showeach {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.showeach > div > img {
    padding: 10px;
    width: 45px;
    height: 45px;
}

/*---------------- slider ---------------*/
/*how many images we have
$slides: 4;

// how much we want each slide to show
$time_per_slide: 4;

// total time needed for full animation
$total_animation_time: $time_per_slide * $slides;
*/

.box-slide{
    overflow: hidden;
    height: 370px;
    width: 400px;
}

.slide-text{
	display: flex;
	flex-basis: 500px;
	height: 370px;
	align-items: center;
}
.box-slide-text{
	display: flex;
	flex-basis: 500px;
	flex-wrap: wrap;
	justify-content: center;
	max-height: 370px;
	overflow: hidden;
}
.slide-text{
	/* transition: top 2s;*/
	max-width: 100%;
	max-height: 100%;
	position: relative;
}

.box-splash-text{
    overflow: hidden;
    padding: 40px;
    width: 400px;
}

.slide-img{
    /* transition: top 2s;*/
    /*max-width: 400px;*/
    /*max-height: 400px;*/
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}
.sub-panel {
    align-content: space-between;
    /*
        display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    */
    text-align: center;
    }
@keyframes slide-down{   
	0%,100%{top:calc(100% * -2);}
	30%{top:calc(100% * -2);}
	35%{top: calc(100% * -1);}
	65%{top: calc(100% * -1);}
	70%{top: calc(100% * 0);}
	95%{top: calc(100% * 0);}
} 


/*---------------- download ---------------*/
#box-download {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background: rgb(51,51,51);
  background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(9,9,9,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#090909',GradientType=0 );
  border-bottom: thick solid #B30002;
}
/*---------------- game ---------------*/
#box-game {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 0px;
	background-color: #000000;
}
.each-game {
  display: flex;
  flex-basis: 150px;
  max-width: 200px;
}
.each-game img {
  width: 100%;
    height: 100%;
}

/*---------------- footer ---------------*/
footer {
  background-color: #000;
  color: #DDD;
  font-size: 12px;
  justify-content: center;
}
.box-footer {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    flex-grow: 1;
	font-size: 0.9em;
    flex-wrap: wrap;
    border-top: 2px solid #ff00e5;
	background-color: #111111;
}
.box-footer h3 {
    color: #ff4ef9;
    font-size: 1rem;
	margin-top: 0px;
}
#footer-tags a{
    display: inline-block;
    padding: 5px 8px;
    text-decoration: none;
    color: #F5F5F5;
    background: hsla(0,0%,100%,.2);
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

#main-panel {
	background-image: url("../images/panel.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
    margin-bottom: 0px;
    height: 90px;
}
.popup-lkwheel {
    display: flex;
    justify-content: flex-end;
    
}


.fixed-bottom{
	background-image: -webkit-linear-gradient(270deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
	background-image: -moz-linear-gradient(270deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
	background-image: -o-linear-gradient(270deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
	background-image: linear-gradient(180deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
}

.footer-bar {
                position:sticky;
                bottom: 0px;
                right: 0;
                max-height: unset;
                overflow: hidden;
            }


/*----------------  swal ก๊อปมาจาก temp-main ยังไม่มีเวลาไล่ดูว่ามันคืออะไร---------------*/

       .swal2-popup {
	background-color: #222;
	border-radius: 1rem;            

        }

        .swal2-popup .swal2-title {
	color: #FF8E11;
        }

        .swal2-popup .swal2-input {

            height:2rem;

        }

        .swal2-popup .swal2-input:focus {
	box-shadow: none;
	border: 1px none #aaa;
        }

        .swal2-popup .swal2-styled.swal2-confirm {
	background-color: #222;
	color: #8200c3;
	border-radius: 5px;
        }

        .swal2-popup .swal2-styled.swal2-cancel {

            background-color:#222;

            border-radius:5px;

        }


        @media screen and (max-width: 480px) {
		.form-body{
			width: 340px;
		}
        .swal2-popup .swal2-validation-message {

            font-size:0.9rem;

        }

        .swal2-popup .swal2-title {

            font-size:1.4rem;

        }

        .swal2-icon.swal2-warning {
	color: #F5F5F5;
	border-color: #DDD;
        }



        }

 .swal-wide {
                width: 510px !important;
            }
            .swal2-popup {
                background-color: #222; 
                background: #222;
                width: 478px;
                padding: 17px;
                border-radius: 3px;
                text-align: center;
                overflow: hidden;
                display: none;
				-webkit-box-shadow: unset!important;
				box-shadow:unset!important;
            }
            #swal2-title {
                color: #fbe256;
                font-size: 1.5rem;
                text-align: center;
                font-weight: 400;
                text-transform: none;
                position: relative;
                margin: 25px 0;
                padding: 0;
                line-height: 40px;
                display: block; 
            }
            .swal2-popup .swal2-file, .swal2-popup .swal2-input, .swal2-popup .swal2-textarea {
                background-color: #EEE;
}
            .swal2-popup #swal2-content {
                color: #a1a1a1;
}
            .swal2-popup .swal2-styled.swal2-confirm {
                /* background-color: #3399FF; */
                background: #EBEBEB;
                color: #8200c3;
                border: none;
                box-shadow: none;
                font-weight: 400;
				min-width: 80px;
				margin: auto;
				font-size: 1.2rem;
				line-height: 1;
				letter-spacing: 0.8px;
                -webkit-border-radius: 22px;
                border-radius: 22px;
                padding: 10px 40px;
                /*margin: 26px 5px 0 5px;*/
                cursor: pointer;
				width: unset;
				
            }                
            @media (max-width: 375px) {
                .swal-wide {
                    width: 270px !important;
                    margin: 0 auto !important;
                    top: 10% !important;
                }        
                .swal-wide .sa-custom {
                    width: 240px !important;
                    height: 200px !important;
                }
            }

.has-error .form-control {     
                border-color: #F00 !important;
            }
            .help-block {
                color: #F00 !important;
                margin-bottom: 0px !important;
            }
           
            .lds-dual-ring {
                display: inline-block;
                width: 20px;
                height: 20px;
            }
            .lds-dual-ring:after {
                content: " ";
                display: block;
                width: 20px;
                height: 20px;
                margin: 1px;
                border-radius: 50%;
                border: 5px solid #000;
                border-color: #000 transparent #000 transparent;
                animation: lds-dual-ring 1.2s linear infinite;
            }
            @keyframes lds-dual-ring {
                0% {
                    transform: rotate(0deg);
                }        
                100% {
                    transform: rotate(360deg);
                }
            }        
            .lds-dual-ring-lg {
                display: inline-block;
                width: 40px;
                height: 40px;
            }
            .lds-dual-ring-lg:after {
                content: " ";
                display: block;
                width: 40px;
                height: 40px;
                margin: 1px;
                border-radius: 50%;
                border: 10px solid #000;
                border-color: #000 transparent #000 transparent;
                animation: lds-dual-ring 1.2s linear infinite;
            }
            @keyframes lds-dual-ring-lg {
                0% {
                    transform: rotate(0deg);
                }        
                100% {
                    transform: rotate(360deg);
                }
            }
            #getotp{        
                font-weight: 900;        
                text-decoration: underline;        
            }        
            #getotp:hover{        
                cursor:point;        
            }
/*----------------  modal ---------------*/
.register-comment {
    text-align: left;
  width: 90%;
  background-color: #310b00;
  border-radius: 8px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  font-weight: 100;
    list-style: circle;
}

.box-login {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #111111;
    color: #AAA;
}
.modal-comment {
      font-size: 0.9rem;
      color: #FFA91E;
    padding: 10px;
  }
.modal-login {
  margin: auto;
    margin-top: 80px;
  border-radius: 10px;
  width: 400px;
  padding: 10px 10px;
  background-color: #111111;
  color: #AAA;
}
.modal-register {
   margin-top: 80px;
  border-radius: 10px;
  padding: 50px 10px;
  background-color: #111111;
  color: #AAA;
}
.modal-input {
  position: relative;
  margin: 10px 0px;
}
.modal-btn-ok {
  border-radius: 8px;
  color: #FFF;
  width: 100%;
  padding: 15px;
  margin: 10px 0px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  border-style: none;
  cursor: pointer;
	background-color: #8200c3;
    text-shadow: 0 1px 4px #6d3a04;
}

/*---------------- sweet alert ---------------------*/

/*----------------  padding ---------------------*/
.pd-5 {
  padding: 5px;
}
.pdt-5 {
  padding-top: 5px;
}
.pdb-5 {
  padding-bottom: 5px;
}
.pdl-5 {
  padding-left: 5px;
}
.pdr-5 {
  padding-right: 5px;
}
.pd-10 {
  padding: 10px;
}
.pdt-10 {
  padding-top: 10px;
}
.pdb-10 {
  padding-bottom: 10px;
}
.pdl-10 {
  padding-left: 10px;
}
.pdr-10 {
  padding-right: 10px;
}
.mr-3 {
  margin-right: 3px;
}
.ml-3 {
  margin-left: 3px;
}
.mt-3 {
  margin-top: 3px;
}

.mt-m15 {
    margin-top: -15px;
}
.mb-3 {
  margin-bottom: 3px;
}

.mr-5 {
  margin-right: 5px;
}
.ml-5 {
  margin-left: 5px;
}
.mt-5 {
  margin-top: 5px;
}
.mb-5 {
  margin-bottom: 5px;
}

.mt-20 {
    margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-120 {
    margin-top: 120px;
}

.my-m25 {
    margin-top: -25px;
    margin-bottom: -25px;
}
.my-m50 {
    margin-top: -50px;
    margin-bottom: -50px;
}

.mx-m25 {
    margin-left: -25px;
    margin-right: -25px;
}
.mx-m50 {
    margin-left: -50px;
    margin-right: -50px;
}
.w-100 {
  width: 100%;
}
.fw-100 {
  flex-basis: auto;
}
/******************  **********************/
.txt-white {
  color: #DDDDDD;
}
.fx-100p {
    display: flex;
    flex-basis: 100%;
}
.fx-100 {
    display: flex;
    flex-basis: 100px;
}
.fx-440 {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  flex-basis: 300px;
  align-content: center;
}
.fx-280 {
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  flex-basis: 280px;
  text-align: center;
    
}
.fx-280 > p {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.fx-200 {
    margin: 15px;
    flex-basis: 200px;
    flex-grow: 1;
}
.div80 {
  height: 80px;
}
.jp-vdo {
  width: 100%;
  max-width: 550px;
}
.img-100 {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
  .rev-wrap {
    flex-wrap: wrap-reverse;
  }


.fx-center {
  display: flex;
  justify-content: center;
}

.fx-evenly-around{
    display: flex;
    align-content: space-around;
	justify-content: space-evenly;
}
.fx-between{
    display: flex;
	justify-content: space-between;
}
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}
.text-err{
	text-align: center;
	color: #fbe256;
	height: fit-content;
}
.text-err::before  {
	color: #fbe256;
}
.text-err:not(:empty)::before {
	content: "\2639";
	margin-right: 0.2em;
	font-size: 1.5em;
}
.text-hilight {
	color:#ffb400;
	font-weight: 800;
	line-height: 1.2em;
}
.text-gold {
	color: #fbe256;
}

.text-golden {
    background-color: #00fffd;
    background-image: linear-gradient(321deg, #8cfeff, #00fffd);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    font-weight: 800;
	line-height: 1.2em;
}
.btn-tag {
  background-color: #960001;
  color: #D7D7D7;
  font-size: 0.8rem;
  border-radius: 5px;
  padding: 5px 10px;
  line-height: 2.5;
  border-style: none;
}
.header-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  opacity: 1;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
.header-bar-out {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.detail-btn {
  display: flex;
  color: #FFF;
  font-size: 16px;
  line-height: 14px;
  padding: 8px 10px;
  justify-content: center;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(180deg, rgba(230, 0, 0, 1.00) 0%, rgba(255, 61, 61, 61.00) 100%);
  background: linear-gradient(0deg, #E30000, #FF4343);
  border-radius: 5px;
  border-style: none;
  cursor: pointer;
}
.btn-gl{
    display: inline-block;
    color: #FFA30C;
    border:0.2em solid #e66500;
    border-color: #e66500;
    border-radius:30px;
    padding:10px 15px;
    text-align:center;

}

.text-balance {
	text-transform: uppercase;
	background: linear-gradient(to bottom, #ffa500 0%,#FF3D00 70%, #ff7600 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 1.8rem;
    min-width: 90px;
    max-width: 95px;
    text-align: center;
}

.fs-3rem {
    font-size: 3rem;
}

.text-turnover {
	text-transform: uppercase;
	color: #BBBBBB;
  background: linear-gradient(to bottom, #EEEEEE 0%,#a9a391 70%, #FFFFFF 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 1.8rem;
  min-width: 90px;
  max-width: 95px;
  text-align: center;
}
.text-menu {
     color: #A60002;
	position: absolute;
	bottom: 5px;
}
.text-black {
    color: #000;
}
.text-gray {
    color: #5A5A5A;
}
.grid-item {
    padding: 0px 5px;
    place-self: stretch;
    overflow: hidden;
}
.grid-history {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto auto auto;
	width: 100%;
}



#body-main {
    margin-top: 80px;
}


.bg-gray {
    background-color: #151515;    
}

.footer-end {
    padding: 20px 0px;
}

.hotgames-img {
    width: 150px;
}

#hotgames {
	text-align: center;
	padding: 20px 0px;
	background-color: rgba(13,13,13,0.75);
}



.box-title {
  margin: 0px -5px;
  border-left: 5px solid #ff4ef9;
  padding: 5px;
  background-color: #480d42;
	text-align: center;
}
#box-slots{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}
#box-slots>div{
  display: flex;
  flex-basis: 100px;
  min-width: 120px!important;
  min-height: 100px;
  max-width: 150px;
  margin: 2px;
}
#box-slots>div img{
	width: 100%;
}

/*----------------  box popup ---------------*/
#popup-login{
    z-index: 990;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.box-popup {
  background-color: #000;
  margin: 70px auto;
  padding: 10px;
  border-radius: 3px;
  width: 400px;
  position: relative;
	border: 2px solid #333;
  /*transition: all 5s ease-in-out;*/
}
.box-popup .close {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 200ms;
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
  color: white;
}
.box-popup .close:hover {
  color: #ff5353;
}
.box-login {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
  border: medium solid #c1ab52;
  border-radius: 10px;
  width: 400px;
  padding: 30px 10px;
  background-color: #000;
  color: #AAA;
}

.box-popup .logo img{
    width: 150px;
}
.btn-close {
    position: absolute;
    right: 20px;
    top: 10px;
    left:auto;
}

.modal-header {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	padding: 10px 20px;
	text-align: center;
	justify-content: center;
}

.modal-body {
  position: relative;
  margin: auto;
	width: 90%;
  text-align: center;
}
#login-form a:link {
  color: #CCC;
  text-decoration: underline;
}
.modal-body a:active {
  color: #CCC;
}
.modal-body a:visited {
  color: #CCC;
}
.modal-content {
  background-color:#333;
}
.modal-footer>:not(:first-child) {
    margin-left: auto;
}
/**************  Media Query *******************/
@media screen and (max-width:1200px) {
  header .logo img {
    width: 150px;
/*    height:40px;*/
  }

  .d-none .d-xl-block {
    display:block;
  }
  .d-block .d-sm-none {
    display:none;
  }
    
}

@media screen and (max-width:768px) {
  .each-game {
    flex-basis: 150px;
  }
  header {
    margin-bottom: 0px;
  }
  header .logo img {
    width: 250px;
/*    height:40px;*/
  }
 header .logo img {
    width: 150px;
/*    height:40px;*/
  }

    .btn{
        width: 100%;
    }
  .jp-vdo {
    width: 90%;
    max-width: 550px;
  }
	/*
  .box-slide {
        overflow: hidden;
        width: 300px;
        height: auto;
	  justify-content: center;
    }
    */
	
      .promotion-img {
    max-width: 300px;
    width: 100%;
          margin: -20px auto;
  }
    .grid-box {
        display: grid;
        grid-template-columns: auto;
        grid-auto-flow: dense;
        width: 100%;
        grid-gap: 10px;
        top: 0px;
    }
  /*---------------- splash ---------------*/
  .splash-img {
    max-width: 550px;
    width: 100%;
  }
    .showeach {
        justify-content: center;
    }
	.box-splash-text{
		overflow: hidden;
		padding: 20px;
		width: 100%;
	}
	.bg-slots {
		background-blend-mode: multiply;
	}
	.bg-casino {
		background-blend-mode: multiply;
	}
	.bg-baccarat {
		background-blend-mode: multiply;
	}
	.bg-promotions {
		background-blend-mode: multiply;
	}
  .bg-game-demo {
		background-blend-mode: multiply;
	}
    
#body-splash {
    flex-wrap: wrap;
}
    #box-showoff{
        width: 85%;
    }

  /*************************/

  /************/
/*************************/
    .box-popup {
        padding: 10px 0px;
        width: 100%;
        margin: auto;
        position: fixed;
        background-color: #000;
        color: #AAA;
        height: 100%;
        border-style: none;
        /*transition: all 1s ease-in-out;*/
    }
	.modal-footer{
		position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
	}
	
  /*************************/
  .modal-login {
    border: none;
    width: 100%;
    padding: 0px;
      background-color: #111;
      height: 100%;
  }
  .modal-register {
    margin-top: 80px;
    padding-bottom: 30px;
    padding-top: 0px;
    border: none;
  }
  .modal-body {
    margin: 10px 20px;
      text-align: center;
  }
  .modal-input {
    position: relative;
    margin: 20px 0px;
  }

  
   .modal-btn-ok {
    margin: 0px 0px;
    z-index: 901;
  }
    #pro-detail-1 {
        order:2;
    }
    #pro-detail-2{
        order: 1;
    }
	.hilight-product {
		max-width: 100%;
	}
	#box-slots{
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
	}
}
@media screen and (max-width:650px) {
  header .logo img {
    width: 100px;
    max-height:50px;
    margin-left: 0px;
    margin-top: 15px;
    margin-bottom: 0px;
  }
  .d-sm-none  {
    display:block;
  }
  .d-xl-block {
    display:none;
  }
    .box-slide {
        overflow: hidden;
        height: 290px;
        width: 320px;
    }
	.slide-text{
		flex-basis: 350px;
		height: 300px;
		align-items: center;
	}
	.box-slide-text{
		flex-wrap: wrap;
		max-height: 300px;
		overflow: hidden;
	}
    .showeach {
        justify-content:flex-start;
    }
	.box-footer{
		justify-content: center;
	}
    .s-text-center {
		text-align: center;
	}
	.box-title {
		text-align: left;
	}
    
}

@media screen and (max-width:320px) {
  .each-game {
    flex-basis: 220px;
  }
  header .logo img {
    width: 80px;
    height:40px;
  }
    #box-showoff{
        width: 100%;
    }
    .hotgames-img{
        width: 130px;
    }
}
/* ***************************/
#main-content {
	display: flex;
	flex-direction: column;
	margin-top: 65px;
	/*min-height: 85vh;*/
}

.text-f12 {
	font-size: 1.2em;
}
.text-f1 {
	font-size: 1em;
}

.text-red {
	color: #ff4ef9;
}

.text-f2 {
	font-size: 2em;
}
.box-hilight {
	line-height: 1.5em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0px;
	color: #EEEEEE;
	margin-left: auto;
	margin-right: auto;
	overflow-x: hidden;
}

.box-hilight-product {
	/*margin-bottom: -40px;*/
	padding-top: 40px;
}


.btn-hilight {
	display: flex;
	flex-shrink: 1;
	font-weight: 400;
	justify-content: center;
	align-items: center;
	min-width: 80px;
	height: 30px;
	margin: auto;
	padding: 1.2rem 2rem;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: 0.8px;
	border-radius: 22px;
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
}

.btn-cancel {
	display: block;
    width: 50px;
    line-height: 45px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
	border-style: solid;
    border-width: 2px;
    cursor: pointer;
}
.bg-hilight {
    color: #000;
    background:#4c0084;
}
.bg-lolight {
    color: #000;
    background:#190033;
}

.bg-slots {
    color: #000;
    background-color: #600f05;
    background-image: url("../images/slots-bn.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.bg-slots-demo{
    color: #000;
    background-color: #600f05;
    background-image: url("../images/banner-demo-betflik199.jpg");
    background-repeat: no-repeat;
    /* background-position: center center; */
    background-size: cover;
}
.bg-luckygame{
  color: #000;
    background-color: #600f05;
    background-image: url("/images/games-demo/banner-page-RTP-GAMEbetflik199.jpg");
    background-repeat: no-repeat;
    /* background-position: center center; */
    background-size: cover;
}
.bg-promotions {
    color: #000;
    background-color: #600f05;
    background-image: url("../images/promotion-bg.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bg-casino {
    color: #000;
    background-color: #600f05;
    background-image: url("/assets/images/online-casino-header.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bg-baccarat {
    color: #000;
    background-color: #600f05;
    background-image: url("/assets/images/online-baccarat-header.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.bg-game-demo {
  color: #000;
  background-color: #600f05;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.box-game {
	font-size: 0.9em;
    line-height: 1.3em;
}
.box-game h4{
	color: #FFF;
	font-weight: 600;
	margin-bottom: 0px;
}

.hilight-product .icon{
	margin-top: -50px;
	margin-bottom: -20px;
	width: 100%;
}
.hilight-product .icon img{
	max-width: 100px;
	width: 100px;
	height:76px;
}

.hilight-product span{
	font-size: 0.8rem;
}

.container {
	padding-left: 5px;
	padding-right: 5px;
}
.mod-newgame {
    display: flex;
    flex-basis: 80px;
    max-width: 120px;
    max-height: 130px;
    margin: 5px;
    justify-content: center;
}
.mod-newgame img{
	max-width: 100%;
	height:100%;
}
.px-10 {
	padding: 0px 10px;
}

.mx-10 {
	margin: 0px 10px;
}

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

.hilight-img {
	position: relative;
	width: 100%;
	max-width: 200px;
}
.hilight-img img{
	width: 100%;
}

.hilight-title {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 1.5em;
}



.vip-img {
	position: relative;
	width: 100%;
	max-width: 250px;
}
.vip-img img{
	width: 100%;
}


.vip-text {
	margin-top: -50px;
	padding: 5px;
	text-align: center;
	font-size: 0.9em;
}
.vip-text h3{
	font-size: 1em;
}

.logo {
	display: flex;
}





.main-header {
	height: 65px;
}

.w-90 {
	width: 90%;
}
.w-80 {
	width: 80%;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
	/*width: 100%;*/
    margin-top: 20px;
    border-top: none;
	padding: 10px;
}

#menu-user {
	display: flex;
    position: fixed;
	justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 50px;
    background-color: #ECECEC;
    /*border-top: 3px solid #A60002;*/
}

.menu-icon {
	display: flex;
	text-align: center;
	padding-top: 5px;
	cursor: pointer;
	position: relative;
	height: 70px;
	width: 70px;
	justify-content: center;
	line-height: unset;
}
.menu-icon svg {
	color: #111;
}

.m-icon-center {
	color: #fff!important;
    margin: 0 auto;
	margin-top: -15px;
	margin-bottom: -4px;
    text-align: center;
    font-size: 3rem;
    padding: 0.6rem;
    border-radius: 50%;
    display: inline-block;
	background-image: -webkit-gradient(linear-gradient(0deg,rgb(117 0 0),#fe1700));
    background-image: linear-gradient(0deg,rgb(117 0 0),#fe1700);
    background-repeat: repeat-x;
}

.user-icon {
	font-size: 1.5em;
	color: #e95c5c;
	margin: 0 auto;
    text-align: center;
    padding: 0.6rem;
    border-radius: 50%;
	width: 45px;
	height: 45px;
	background-color: #323232;
}
.text-green {
	color: #0ea725;
}

.menu-user-all {
	display: flex;
	width: 100%;
	max-width: 700px;
	justify-content: space-around;
}

.game-logo {
	max-height: 20px;
	height: 20px;
    width: 65px;
    object-fit: contain;
}

.l-icon {
	font-size: 5rem;
}

#register-form {
	text-align: center;
}

.otp-icon {
	display: inline-flex;
}

.otp-icon i{
	margin: 5px;
}

.m-1 {
	margin: 1rem;
}

.input-red {
	display: block;
    width: 100%;
    border-left: 3px solid #f80000;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    /*padding: 10px 40px 10px 50px;*/
}

.mobile-nav-toggle {
	margin-left: 5px!important;
	margin-right: 5px!important;
}

/* style new */
.box-slots-page {
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
}

#box-slots>div {
  min-width: unset;
}

.box-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  position: relative;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item img {
  width: 100%;
  height: auto;
  display: inline-block;
}

.card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  padding: 30px 25px;
  border-radius: 5px;
  border: 1px solid #4b006d;
  gap: 10px;
}

.card-item .card-img {
  width: 100px;
  height: auto;
  /* background-color: #4b006d; */
  border-radius: 10px;
}

.card-item .card-img img {
  width: 100%;
  height: auto;
  display: inline-block;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.btn-games {
  background: #9e018d;
  padding: 2px 10px;
  border-radius: 30px;
  border: 1px solid #8200c3;
}

.bg-slots-demo {
  color: #000;
  background-color: #600f05;
  background-image: url(../images/banner-demo-betflik199.jpg);
  background-repeat: no-repeat;
  /* background-position: center center; */
  background-size: cover;
}

.row-overflow{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space: nowrap!important;
}

.yellow-bar{
  background-color: #ed9d05!important;
}
.text-shadow{
  text-shadow: 1px 1px 0 black;
}
section#main-content h1 {
      font-size: 2em; 
    }