@font-face {
    font-family: 'GraphikRegular';
    src: local('Graphik-Semibold'), url('../font/GraphikRegular.otf');
}
@font-face {
    font-family: 'Graphik-Semibold';
    src: local('Graphik-Semibold'), url('../font/Graphik-Semibold.ttf');
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: local('OpenSans-Bold'), url('../font/OpenSans-Bold.ttf');
}
@font-face {
    font-family: 'OpenSans-BoldItalic';
    src: local('OpenSans-BoldItalic'), url('../font/OpenSans-BoldItalic.ttf');
}
@font-face {
    font-family: 'OpenSans-ExtraBold';
    src: local('OpenSans-ExtraBold'), url('../font/OpenSans-ExtraBold.ttf');
}
@font-face {
    font-family: 'OpenSans-ExtraBoldItalic';
    src: local('OpenSans-ExtraBoldItalic'), url('../font/OpenSans-ExtraBoldItalic.ttf');
}
@font-face {
    font-family: 'OpenSans-Light';
    src: local('OpenSans-Light'), url('../font/OpenSans-Light.ttf');
}
@font-face {
    font-family: 'OpenSans-LightItalic';
    src: local('OpenSans-LightItalic'), url('../font/OpenSans-LightItalic.ttf');
}
@font-face {
    font-family: 'OpenSans-Regular';
    src: local('OpenSans-Regular'), url('../font/OpenSans-Regular.ttf');
}
@font-face {
    font-family: 'OpenSans-RegularItalic';
    src: local('OpenSans-RegularItalic'), url('../font/OpenSans-RegularItalic.ttf');
}
@font-face {
    font-family: 'OpenSans-SemiBold';
    src: local('OpenSans-SemiBold'), url('../font/OpenSans-SemiBold.ttf');
}
@font-face {
    font-family: 'OpenSans-SemiBoldItalic';
    src: local('OpenSans-SemiBoldItalic'), url('../font/OpenSans-SemiBoldItalic.ttf');
}

body {
	font-family: 'OpenSans-Regular' !important;
}
.spacer-5 {
	height: 5px;
}
.spacer-10 {
	height: 10px;
}
.spacer-20 {
	height: 20px;
}
.spacer-30 {
	height: 30px;
}
.spacer-50 {
	height: 50px;
}
.spacer-100 {
	height: 100px;
}
.spacer-300 {
	height: 300px;
}


.left-menu {
	background: #fff;
}
.left-menu a {
	color: #000;
	text-decoration: none;
}
.left-menu .list-unstyled {
	border: none;
	border-radius: 0;
	margin-bottom: 1px;
}
.left-menu a.dropdown-item {
	padding: 15px 70px;

}
.left-menu li a:hover {
	background: #eeeeee;
	color: #000;
}

.left-menu .side {
	margin-left: 40px;
}

.left-menu a.dropdown-item:focus {
	background: #eeeeee;
	color: #000;
}
#sidebar {
	min-width: 250px;
	/* min-height: 250px; */
	background: white;
	color: black;
}
#sidebar.active {
	margin-left: -250px;
}
#sidebar ul.components {
	padding: 20px 0;
	border-bottom: 1px solid #eee;
}
#sidebar ul li a {
	padding: 10px;
	font-size: 1.1em;
	display: block;
}
.page-new {
	background: #f5f5f0;
}
.page-new .main-title {
	font-size: 24px;
	color: #000;
	font-weight: 700;
}
.page-new .main-title:after {
	content: '';
	display: block;
	/*border-bottom: 2px solid #5eb132;*/
	width: 50px;
	margin-top: 20px;
}
.page-new .sub-title {
	font-size: 20px;
	color: #5eb132;
	margin-bottom: 20px;
}
.page-new h4 {
	margin-bottom: 10px;
}
.main-left, .main-right {

}
.main-right {
	background: #eeeeee;
}
.main-left {
	background: #fff;
	border-bottom: 1px solid #5eb132;
}
.main-right .content {
	margin-bottom: 50px;
}
.main-right .a{
	margin-left: 13px;
	min-height: 100vh;
}
.main-right .m-height {
	min-height: 100vh;
}
#register_form .form-control {
	padding: 0.7rem 0.75rem !important;
	/*font-size: 0.855rem !important;*/
}
.register_img_text1 {
	bottom: 61px;
	font-size:20px;
	right: 45px;
	font-family: 'OpenSans-Regular';
}
.register_img_text2 {
	bottom: 35px;
	font-size:20px;
	right: 63px;
	font-family: 'OpenSans-SemiBold';
}
.reg_img_text_right {
	right: 170px !important;
}
.register_img_text3 {
	bottom: 17px;
	right: 125px;
	font-size: 14px;
	font-family: 'OpenSans-Regular';
}
.register_img_my_text1 {
	bottom: 61px;
	font-size:20px;
	right: 45px;
	font-family: 'OpenSans-Regular';
}
.register_img_my_text2 {
	bottom: 35px;
	font-size:20px;
	right: 40px;
	font-family: 'OpenSans-SemiBold';
}
.register_img_my_text3 {
	bottom: 17px;
	right: 147px;
	font-size: 14px;
	font-family: 'OpenSans-Regular';
}

/* MK */
.spin_title {
	text-align: center;
}
.spin_title_p1 {
	font-family: 'OpenSans-Bold';
	font-size: 40px;
	color: #000;
}
.spin_title_p2 {
	font-family: 'OpenSans-Bold';
	font-size: 40px;
	color: #000;
	margin-top: -18px;
}
.roller_bg {
	background-image: url('../img/new_roller.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*height: 300px;*/
	height: 460px;
	/*margin-top: -40px;*/
	/*position: relative;*/
}

.roller_bg_change {
	background-image: url('../img/winner_roller_new.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*height: 300px;*/
	height: 360px;
	margin-top: -40px;
}
.randomizeMachine {
    width: 100%;
    /*height: 90px !important;*/
    height: 100px !important;
}

#machine1 {
	margin-left: 0px;
	margin-top: 68px;
	text-align: center;
}
.machine1_img {
	width: 40%;
    height: auto;
    margin-top: 2px;
}
.winner_name {
	/*margin-top: 30px;*/
	margin-top: 0px;
}
.winner_name h4 {
	font-size: 26px;
    font-weight: bold;
}
.roller_img {
    width: 150px;
}
.roller_spin {
	margin-bottom: 0px;
	font-family: 'OpenSans-Bold';
	font-size: 22px;
	background: linear-gradient(to right, #b08955, #ecc979, #b08955);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/*margin-top: 68px;*/
	margin-top: 120px;
	-webkit-text-stroke-width: 0.5px;
   	-webkit-text-stroke-color: black;
}
.winner_roller_spin {
    margin-bottom: 0px;
    font-family: 'OpenSans-Bold';
    font-size: 30px;
    background: linear-gradient(to right, #b08955, #ecc979, #b08955);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*margin-top: 55px;*/
    margin-top: 115px;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: black;
}
.winner_title {
	color : #b78855;
	font-family: 'OpenSans-Bold';
	font-size: 32px;
	-webkit-text-stroke-width: 0.5px;
   	-webkit-text-stroke-color: black;
   	margin-bottom: 0px;
    margin-top: -18px;
}
.next_winner {
	font-family: 'OpenSans-Bold';
	font-size: 14px;
	text-decoration: underline;
	margin-top: 10px;
	color: #000;
}
/* MK End */

.confetitti {
	position: absolute;
  	opacity: .1;
}

/*#whole_page{
	position: relative;
}*/

div#whole_page img#confetitti{
    position: absolute;
    /* position in top left of #tobecovered */
    top: 0px; /* top of #tobecovered */
    left: 0; /* left of #tobecovered */
}


@media (min-width: 1920px) and (max-width: 2560px) {
	.register_img_text1 {
		bottom: 115px !important;
		font-size: 30px !important;
		right: 45px !important;
		font-family: 'OpenSans-Regular';
	}
	.register_img_text2 {
		bottom: 76px !important;
		font-size: 30px !important;
		right: 68px !important;
		font-family: 'OpenSans-SemiBold';
	}
	.register_img_text3 {
		bottom: 48px !important;
		right: 145px !important;
		font-size: 17px !important;
		font-family: 'OpenSans-Regular';
	}
	.register_img_my_text1 {
		bottom: 115px !important;
		font-size:30px;
		right: 45px;
		font-family: 'OpenSans-Regular';
	}
	.register_img_my_text2 {
		bottom: 76px !important;
		font-size:30px;
		right: 40px;
		font-family: 'OpenSans-SemiBold';
	}
	.register_img_my_text3 {
		bottom: 48px !important;
		right: 123px;
		font-size: 14px;
		font-family: 'OpenSans-Regular';
	}
	.winner_roller_spin {
	    font-size: 45px;
	    margin-top: 200px;
	}

	/*MK*/
	#machine1 {
		/*margin-left: 215px;
    	margin-top: 145px;*/
    	margin-left: 0px;
    	margin-top: 100px;
	}
	.machine1_img {
		width: 40% !important;
		height: auto;
	}
	.winner_name {
		margin-top: 1.5%;
	}
	.randomizeMachine {
		width: 100%;
    	/*height: 90px !important;*/
    	height: 180px !important;
	}
	.machine1_img {
	    margin-top: 12px;
	}
	.roller_bg {
	    height: 800px;
	}

	.congrat_image{
		margin-top:-69px;
		width:300px;
		/*margin-left: 30% !important;*/
		margin-left: 0 !important;
	}
	.roller_spin {
	    font-size: 35px;
	    margin-top: 215px;
	}
	.roller_img{
		width:200px;
	}

}

@media (min-width: 1025px) and (max-width: 1440px){
	/*MK*/
	#machine1 {
		margin-left: 0px !important;
	    margin-top: 70px !important;
	    text-align: center;
	}
	.machine1_img {
		width: 35% !important;
		height: auto;
		margin-top: 7px;
	}
	.randomizeMachine {
		width: 100%;
    	height: 90px !important;
	}

	.register_img_my_text1 {
		bottom: 40px;
	    font-size: 14px;
	    right: 39px;
	    font-family: 'OpenSans-Regular';
	}
	.register_img_my_text2 {
		bottom: 23px;
	    font-size: 14px;
	    right: 35px;
	    font-family: 'OpenSans-SemiBold';
	}
	.register_img_my_text3 {
		bottom: 10px;
		right: 140px;
		font-size: 12px;
		font-family: 'OpenSans-Regular';
	}

	.congrat_image{
		margin-top: 0px;
	}

	.roller_img{
		width:150px;
	}
}

@media (min-width:769px) and (max-width: 1024px){
	.register_img_text1 {
		bottom: 45px !important;
		font-size: 14px !important;
		right: 30px !important;
		font-family: 'OpenSans-Regular';
	}
	.register_img_text2 {
		bottom: 30px !important;
		font-size: 14px !important;
		right: 43px !important;
		font-family: 'OpenSans-SemiBold';
	}
	.reg_img_text_right {
	    right: 26px !important;
	}
	.register_img_text3 {
		bottom: 15px !important;
		right: 131px !important;
		font-size: 12px !important;
		font-family: 'OpenSans-Regular';
	}
	#machine1 {
		margin-left: 226px !important;
    	margin-top: 70px !important;
	}
	.roller_spin {
		margin-bottom: 0px;
		font-family: 'OpenSans-Bold';
		font-size: 20px;
		background: linear-gradient(to right, #b08955, #ecc979, #b08955);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-top: 125px;
		-webkit-text-stroke-width: 0.5px;
	   	-webkit-text-stroke-color: black;
	}
	.winner_roller_spin {
	    margin-bottom: 0px;
	    font-family: 'OpenSans-Bold';
	    font-size: 22px;
	    background: linear-gradient(to right, #b08955, #ecc979, #b08955);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    margin-top: 115px;
	    -webkit-text-stroke-width: 0.5px;
	    -webkit-text-stroke-color: black;
	}
	.winner_title {
		color : #b78855;
		font-family: 'OpenSans-Bold';
		font-size: 32px;
		-webkit-text-stroke-width: 0.5px;
	   	-webkit-text-stroke-color: black;
	   	margin-bottom: 0px;
	    margin-top: -18px;
	}
	.machine1_img {
		width: 70%  !important;
		height: auto !important;
		margin-top: 6px;
	}
	.winner_name {
		margin-top: 0px;
	}

	.winner_name h4 {
	    font-size: 19px;
	    font-weight: bold;
	}

	.randomizeMachine {
	   	width: 480px !important;
    	height: 78px!important;
	}

	.randomize{
		font-size:25px;
	}

	.roller_img{
		width:120px;
	}

	.roller_button{
		margin-top: 16px;
	}

	#randomizeButton{
		margin-top: -20px;
	}

	.machine1_img {
		width: 25%;
		height: auto!important;
	}

}

@media (min-width: 768px) and (max-width: 991px) {
	.register_img_text1 {
		bottom: 45px !important;
		font-size: 14px !important;
		right: 30px !important;
		font-family: 'OpenSans-Regular';
	}
	.register_img_text2 {
		bottom: 30px !important;
		font-size: 14px !important;
		right: 43px !important;
		font-family: 'OpenSans-SemiBold';
	}
	.reg_img_text_right {
	    right: 25px !important;
	}
	.register_img_text3 {
		bottom: 15px !important;
		right: 131px !important;
		font-size: 12px !important;
		font-family: 'OpenSans-Regular';
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	div#whole_page img#confetitti {
	    position: absolute;
	    top: 0px;
	    left: 0;
	}
  	.spin_title_p1 , .spin_title_p2 {
  		font-family: 'OpenSans-Bold';
		font-size:23px;
		text-align: : center!important;
	}

	.spin_title_p2 {
		margin-top: -10px;
	}

	.navbar-text a {
		margin-left: -15px !important;
		margin-top: -10px !important;
	}
	.roller_spin {
		margin-bottom: 0px;
		font-family: 'OpenSans-Bold';
		font-size: 14px;
		background: linear-gradient(to right, #b08955, #ecc979, #b08955);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-top: 105px;
		-webkit-text-stroke-width: 0.5px;
	   	-webkit-text-stroke-color: black;
	}
	.winner_roller_spin {
	    margin-bottom: 0px;
	    font-family: 'OpenSans-Bold';
	    font-size: 14px;
	    background: linear-gradient(to right, #b08955, #ecc979, #b08955);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    margin-top: 95px;
	    -webkit-text-stroke-width: 0.5px;
	    -webkit-text-stroke-color: black;
	}
	.winner_name h4 {
	    font-size: 20px;
	    font-weight: bold;
	}
	.winner_title {
		color : #b78855;
		font-family: 'OpenSans-Bold';
		font-size: 20px;
		-webkit-text-stroke-width: 0.5px;
	   	-webkit-text-stroke-color: black;
	   	margin-bottom: 0px;
	    margin-top: -10px;
	}
	#machine1 {
		margin-left: 0%;
		margin-top: 60px;
		width: 100%;
	}
	.machine1_img {
		width: 35% !important;
		height: auto!important;
		margin-top: 5px !important;
	}
	.winner_name {
	    margin-top: -4px !important;
	    font-size: 10px !important;
	}

	.roller_bg {
		background-image: url('../img/roller_new.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 370px;
		margin-top: -22px;
	}

	.roller_bg_change {
		background-image: url('../img/winner_roller_new.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 220px;
		margin-top: -22px;
	}

	.randomizeMachine {
	    width: 300px;
	    height: 60px!important;
	}

	.randomize{
		font-size:25px;
	}

	.roller_img{
		width: 100px;
	}

	.roller_button{
		margin-top: 10px;
	}

	#randomizeButton{
		margin-top: -20px;
	}
}

@media (min-width: 375px) and (max-width:480px){
	.spin_title_p1 , .spin_title_p2 {
		font-family: 'OpenSans-Bold';
		font-size:22px;
		text-align: : center!important;
	}

	.spin_title_p2 {
	 	margin-bottom: 50px;
	 	margin-top: -7px;
	}

	.navbar-text a {
		margin-left: -15px !important;
		margin-top: -10px !important;
	}
	.roller_spin {
		margin-bottom: 0px;
		font-family: 'OpenSans-Bold';
		font-size: 14px;
		background: linear-gradient(to right, #b08955, #ecc979, #b08955);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-top: 56px;
		-webkit-text-stroke-width: 0.5px;
	   	-webkit-text-stroke-color: black;
	}
	.winner_roller_spin {
	    margin-bottom: 0px;
	    font-family: 'OpenSans-Bold';
	    font-size: 14px;
	    background: linear-gradient(to right, #b08955, #ecc979, #b08955);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    margin-top: 48px;
	    -webkit-text-stroke-width: 0.5px;
	    -webkit-text-stroke-color: black;
	}
	.winner_title {
		color : #b78855;
		font-family: 'OpenSans-Bold';
		font-size: 24px;
		-webkit-text-stroke-width: 0.5px;
	   	-webkit-text-stroke-color: black;
	   	margin-bottom: 0px;
	    margin-top: -11px;
	}
	#machine1 {
		margin-left: 40px;
		margin-top: 22px;
		width: 100%;
		height: 55px!important;
	}
	.winner_name h4 {
	    font-size: 11px;
	    font-weight: bold;
	}
	.machine1_img {
		width: 75% !important;
		height: auto!important;
		margin-top: 6px !important;
	}
	.winner_name {
		margin-top: -2px;
	}

	#winner_phone_txt {
		font-size: 16px !important;
	}

	.roller_bg {
		background-image: url('../img/roller_new.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 220px;
	}

	.roller_bg_change {
		background-image: url('../img/winner_roller_new.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 220px;
	}

	.randomizeMachine {
	    width: 300px !important;
	    height: 47px !important;
	}

	.randomize{
		font-size:25px;
	}

	.roller_img{
		width:85px;
	}

	.roller_button{
		margin-top: -35px;
	}

	.congrat_image{
		width:200px;
		margin-left: 25% !important;
	}

	div#whole_page img#confetitti {
	    position: absolute;
	    top: 0px;
	    left: 0;
	}
}

@media (max-width: 320px){
	.spin_title_p1 , .spin_title_p2 {
		font-family: 'OpenSans-Bold';
		font-size:18px;
		text-align: : center;
	}
	.spin_title_p2 {
	 	margin-bottom: 50px;
	 	margin-top: -18px;
	}

	.navbar-text a {
		margin-left: -15px !important;
		margin-top: -10px !important;
	}

	#machine1 {
		margin-left: 0%!important;
		margin-top: 86px;
		width: 100%!important;
	}

	.machine1_img {
		width: 59%;
		height: auto;
	}

	.roller_bg {
		background-image: url('../img/roller_new.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 190px;
	}

	.roller_bg_change {
		background-image: url('../img/winner_roller_new.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 190px;
	}

	.randomizeMachine {
		width: 500px !important;
		height: 35px !important;
	}

	.randomize{
		font-size:24px;
	}

	.winner_name {
		margin-top: 0%!important;
		text-align: center;
	}

	.roller_img{
		width:80px;
	}

	.roller_button{
		margin-top: -35px;
	}

	.congrat_image{
		width:200px;
		margin-left: 25% !important;
	}

}

a#sg_users.active{
	color: #ffb700;
}

a#malay_users.active{
	color: #ffb700;
}

a#sg_spin.active{
	color: #ffb700;
}

a#malay_spin.active{
	color: #ffb700;
}

a#sg_users:hover{
	color: #ffb700;
}

a#malay_users:hover{
	color: #ffb700;
}

a#sg_spin:hover{
	color: #ffb700;
}

a#malay_spin:hover{
	color: #ffb700;
}