:root {
  --primary: #d3b271;
  --accent: #d3b271;
  --white: #ffffff;
  --black: #000000;
}


/* CUSTOM CSS  */
html {
	background-color: #222939;
}

body {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--black);
	font-family: 'Alexandria', sans-serif;
	font-size: 16px;
	overflow-x: hidden;
}


body,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,
h1,h2,h3,h4,h5,h6 {
  font-family: "Alexandria",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}


body.landing {
	background-image: url();
	background-color: #222939;
	background-attachment: fixed;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}
body a {
	color: var(--primary);
}
body a:hover {
	color: var(--accent);
}

.text-accent {
	color: var(--accent);
}

.uk-grid-small div.uk-first-column {
	padding: 0 !important;
}


.uk-table {
	border-color: #666;
	border-style: solid;
	border-width: 1px;
}

.uk-table th,
.uk-table td {
	border-color: #666;
	border-style: solid;
	border-width: 1px;
}


/**  BUTTON CTA  **/
.button-cta {
	color: #23293a;
  min-width: 300px;
	padding-top: .5em;
	padding-bottom: .5em;
	letter-spacing: 0.05em;
	font-size: 1em;
  background: #d3b271;
  background: -webkit-linear-gradient(left, #d3b271 1%, #dda536 100%);
  background: linear-gradient(to right, #d3b271 1%, #dda536 100%);
  transform: scale(1);
	transition: all .2s ease-in-out;
}

.button-cta:active,
.button-cta:focus {
  outline: none;
	background: var(--white);
}

.button-cta:hover {
	color: #23293a;
  animation: pulse 1.5s infinite  ease-out;
  box-shadow: 0px 15px 28px -11px rgba(255, 99, 99, 0.9);
  background: -webkit-linear-gradient(left, #d37171 1%, #dda536 100%);
  background: linear-gradient(to right, #d37171 1%, #dda536 100%);
}

@keyframes pulse {
  0% {
  	transform: scale(1.01);
    -moz-box-shadow: 0 0 0 0 rgba(255, 99, 99, 0.5);
    box-shadow: 0 0 0 0 rgba(255, 99, 99, 0.4)
  }
  50% {
  	transform: scale(1);
    -moz-box-shadow: 0 0 0 30px rgba(255, 99, 99, 0);
    box-shadow: 0 0 0 15px rgba(255, 99, 99, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 99, 99, 0);
    box-shadow: 0 0 0 0 rgba(255, 99, 99, 0);
  }
}

.uk-button-primary {;
  background-color: var(--primary);
	color: #23293a;
 }

.uk-button-primary.uk-active,
.uk-button-primary:active,
.uk-button-primary:hover {
  background-color: #f09240;
	color: #23293a;
 }


/** END Button Pulse **/

/** ELEMENTS ANIMATION **/

.elements-1 {
  transform: translateY(0);
  animation: elements 5s infinite ease-in-out;
}

.elements-2 {
  transform: translateY(0);
  animation: elements 8s infinite reverse ease-in-out;
}

.elements-3 {
  transform: translateY(0);
  animation: elements 10s infinite ease-in-out;
}

@keyframes elements {
  0% {
  transform: translateY(0);
  }
  50% {
  transform: translateY(10px);
  }
  100% {
  transform: translateY(0);
  }
}

/** //ELEMENTS ANIMATION **/


span.icon-flag {
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center center;
  height: 26px;
  width: 26px;
  display: inline-block;
  margin-right: .75em;
  vertical-align: middle;
}

span.icon-flag.fl-vn {
  background-image: url('../img/flag-vn.svg');
}
span.icon-flag.fl-id {
  background-image: url('../img/flag-id.svg');
}
span.icon-flag.fl-en {
  background-image: url('../img/flag-my.svg');
}
span.icon-flag.fl-th {
  background-image: url('../img/flag-th.svg');
}
span.icon-flag.fl-cn {
  background-image: url('../img/flag-cn.svg');
}
span.icon-flag.fl-cn-myr {
  background-image: url('../img/flag-cn.svg');
}
span.icon-flag.fl-cn-cny {
  background-image: url('../img/flag-cn.svg');
}
span.icon-flag.fl-my {
  background-image: url('../img/flag-my.svg');
}
span.icon-flag.fl-kr {
  background-image: url('../img/flag-kr.svg');
}
span.icon-flag.fl-jp {
  background-image: url('../img/flag-jp.svg');
}

.plus18 {
  background-image: url(../img/18plus.svg);
  min-width: 24px;
  min-height: 24px;
  margin-bottom: 3px;
}

button.currency-lang {
  min-width: 120px;
  padding:0;
  background-color: #222939;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--white);
  padding: 0 1.2em;;
}

button.currency-lang:hover {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
}

button.currency-lang span.icon-flag {
  margin-bottom: 2px;
}

.language-container {
	margin-right: 42px;
}

.lang-area {
  min-width: 120px;
}

.uk-dropdown.dropdown-dark {
  background: #10161d;
  color: #eee;
  padding: 0;
}

.uk-dropdown.dropdown-dark ul li a{
  color: #ccc;
  padding: 1em 1.5em;
}

.uk-dropdown.dropdown-dark ul li:last-child {
  margin-bottom: 1em;
}

.uk-dropdown.dropdown-dark ul li.uk-active {
  background: #1f2731;
}

.uk-dropdown.dropdown-dark ul li {
  transition: all .3s ease;
}

.uk-dropdown.dropdown-dark ul li:hover {
  color: #fff;
  background: #1c2029;
}

.uk-dropdown.dropdown-dark ul li.uk-active a {
  color: var(--accent);
  cursor: default;
}

.uk-dropdown.dropdown-dark ul li.label {
  padding: .5em 4.5em .5em 4.5em;
}
  
.uk-dropdown.dropdown-dark ul li.label:hover {  
  cursor: default;
  background: #333;
}

.enter-username {
	max-width: 320px;
	display: block;
	background-color: transparent;
	color: var(--white);
	margin-bottom: 8px;
}

.enter-username::placeholder {
	color: var(--white);
}

.select-team-form [type=radio] {	
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.select-team-form [type=radio] + img {
  cursor: pointer;
  background: rgba(170, 100, 0, .3);
	padding: 3em 2em;
	box-shadow: inset 0px 6px 10px rgba(215, 55, 0 , .25);
	transition: all .2s ease-in;
}


.select-team-form [type=radio] + img:hover {
  background: rgba(170, 100, 0, .5);
	transform: scale(1.04);
}


.select-team-form [type=radio]:checked + img {
  outline: 2px solid #44d0ee;
	box-shadow: inset 0px 6px 10px rgba(215, 55, 0 , 0);
  background: -moz-linear-gradient(top, rgba(18,201,204,0.6) 0%, rgba(5,109,182,0.6) 100%);
	background: -webkit-linear-gradient(top, rgba(18,201,204,0.6) 0%,rgba(5,109,182,0.6) 100%);
	background: linear-gradient(to bottom, rgba(18,201,204,0.6) 0%,rgba(5,109,182,0.6) 100%);

	transition: none;
}

.pp-qr {
	border-radius: 12px;
}

.shields-top,
.shields-bottom,
.shields-right,
.shields-left {
	background-color: #efefef;
}

.badge-left {
	left: -5%;
}

.badge-right {
	right: -5%;
}

.tnc-container {
	padding: 1em;
}

.popup-tnc .uk-modal-header,
.popup-tnc .uk-modal-footer,
.popup-tnc .uk-modal-dialog {
  background-color: #222939;
}

.popup-tnc .uk-modal-footer,
.popup-tnc .uk-modal-header {
	border: none;
}

.popup-tnc.uk-modal {
  background-color: rgba(74, 20, 20, 0.8);
background: -moz-linear-gradient(left, rgba(221,165,54,0.5) 0%, rgba(74,20,20,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(221,165,54,0.5) 0%,rgba(74,20,20,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(221,165,54,0.5) 0%,rgba(74,20,20,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.popup-tnc .uk-modal-body {
  color: var(--white);
	font-family: 'Alexandria', sans-serif;
}

.popup-tnc .uk-modal-title {
  color: var(--primary);
}

.popup-tnc  ol {
   list-style: none;
   counter-reset: item;
 }

 .popup-tnc ol > li {
   counter-increment: item;
   margin-bottom: 5px;
   line-height: 1.4;
 }

 .popup-tnc ol > li:before {
	font-family: 'Alexandria', sans-serif;
		margin:  0 0 0 -2em;
		content: counter(item) ;
		background: transparent;
		border-radius: 100%;
		color: var(--primary);
		width: 1.7em;
		line-height: 1.7em;
		text-align: center;
		display: inline-block;
		border: 0px solid transparent;
 }

span.timer {
	color: var(--primary);
	font-size: 6em;
	letter-spacing: -0.05em;
}

span.congrats {
	color: var(--primary);
	font-size: 6em;
	line-height: 1;
}

span.total-prize,
span.final-score {
	color: var(--primary);
	font-size: 2.5em;
	line-height: 1;
}

.br-mobile {
	display: none;
}

/* START Form Modal */

.form-modal {
	color:  var(--black);
}

.blur{
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  transition: all 300ms ease-out;
  opacity: 0.7;
}

.high-color{color: var(--accent-4); }

.uk-modal-header {
    background-color: #1a2332;
    font-size: 14px;
}
.uk-modal-header.correct {
    background-color: green;
    font-size: 14px;
}
.uk-modal-header.incorrect {
    background-color: red;
    font-size: 14px;
}
.uk-modal-header h3{
    color: var(--white);
    font-size: 14px;
}

.popup-tnc .uk-modal-title,
.popup-mechanics .uk-modal-title {
  font-size: 1.5em;
}
.uk-button.submit-btn {
    background-color: #ffcd00;
    color: var(--black);
    transition: all .2s ease-out; 
}
.uk-button.submit-btn:hover {
    background-color: #ffa22b;
}

.bg-grey { background-color: #e8edf1; }

.uk-modal { background-color: rgba(0,0,0,.7);}
.uk-modal-dialog{ box-shadow: 0 5px 25px rgba(0, 0, 0, 0.16); }

.uk-modal-body{color: var(--black);}

/* Sign Up Modal */

#message-response{
  border: 1px solid rbga(0,0,0,0);
  padding: 0.5em 1em;
  max-width: 470px;
  margin: 1em auto;
  text-align: center;
  border-radius: 3px;
}

#message-response.error{
  background-color: #ffcaca; color: #ff4e4e; border-color: #9b1111;
}

#message-response.success{
  background-color: #d1f0d0; color: #4baf46; border-color: #14710f;
}

/* END Form Modal */



/* Media Queries */


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

	.badge-left,
	.badge-right {
		max-width: 360px;
	}

}

@media screen and (max-width: 1280px){
	.badge-left,
	.badge-right {
		max-width: 300px;
	}
	
	.uk-container {
		padding-left: 0;
		padding-right: 0;
	}

}	

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


	.ilp-content {
		display: flex;
		align-items: center;
	}

}	

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

	body {
		font-size: 14px;
	}

	.ilp-logo {
		max-width: 100%;
	}

	.language-container {
		margin-right: 12px;
	}
}	

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

	 .visible-xs {
	 	display: block !important;
	 } 

	 .hidden-xs {
	 	display: none !important;
	 } 

	.br-mobile {
		display: block;
	}

	.button-cta {
		min-width: 100%;
		padding-top: .15em;
		padding-bottom: .15em;
	}

	button.currency-lang {
		padding: 0 4px 0 8px;
		min-width: 0;
	}

	.lang-area {
	  min-width: 0;
	}

	.uk-dropdown.dropdown-dark ul li a {
	  color: #ccc;
	  padding: .8em 1em;
	}


}	

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


	.button-cta {
		min-width: 100%;
		padding-top: 0;
		padding-bottom: 0;
	}

	.uk-overlay {
  padding: 15px;
	}

}	


@media screen and (orientation: landscape)  and (max-height: 900px){
}

@media screen and (orientation: landscape)  and (max-height: 700px){
}

@media screen and (orientation: landscape)  and (max-height: 640px){

}

#modal-timeout .uk-modal-body{
  text-align: center;
  background-color: #000;
  color: #ff4b00;
  border: 1px solid #ff4b00;
}

#modal-timeout .uk-modal-body h1 {
  color: #ff4b00;
}