@font-face {
	font-family: 'Lithos Pro';
	src: url('../fonts/LithosPro-Black.eot');
	src: url('../fonts/LithosPro-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/LithosPro-Black.woff') format('woff'),
		url('../fonts/LithosPro-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}
@font-face {
    font-family: 'KottaOneRegular_1';
    src: url('../fonts/KottaOneRegular_1.eot');
    src: url('../fonts/KottaOneRegular_1.eot') format('embedded-opentype'),
         url('../fonts/KottaOneRegular_1.woff2') format('woff2'),
         url('../fonts/KottaOneRegular_1.woff') format('woff'),
         url('../fonts/KottaOneRegular_1.ttf') format('truetype'),
         url('../fonts/KottaOneRegular_1.svg#KottaOneRegular_1') format('svg');
}
@font-face {
    font-family: 'LithosProRegular';
    src: url('../fonts/LithosProRegular.eot');
    src: url('../fonts/LithosProRegular.eot') format('embedded-opentype'),
         url('../fonts/LithosProRegular.woff2') format('woff2'),
         url('../fonts/LithosProRegular.woff') format('woff'),
         url('../fonts/LithosProRegular.ttf') format('truetype'),
         url('../fonts/LithosProRegular.svg#LithosProRegular') format('svg');
}
html{
	background: rgba(0, 0, 0, 0) url("../images/bg-img.jpg") repeat scroll 0 0;
}
body {background: rgba(0, 0, 0, 0) url("../images/bg-img.jpg") repeat scroll 0 0;float: left;font-family: "Lato",sans-serif;height:100%;margin: 0;width: 100%;position: relative;}
*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;   
}
*{margin: 0;padding: 0;}
img{border: none;}
.wraper, .header, .content, .host, .bars {float: left;width: 100%;}
.wraper{padding: 20px 35px 50px;}
.container-fluid{position: relative;}
#countdown {background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; height: 100%; position: absolute; width: 100%; z-index: 1;}
#countdown #seconds { color: #fff;font-size: 200pt !important;left: 45%; position: absolute;top: 30%; }
header {
  margin-top: 40px;
  position: relative;
}
header.header .logo {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -50px;
  width: 100%;
}
.logo img { display: inline-block; margin: auto; max-width:75px;}
.logo .logo_txt { color: #ffdb14; display: inline-block; font-size: 50px; line-height:65px; font-weight: 900; -webkit-text-shadow: 0 10px 15px #000; -moz-text-shadow: 0 10px 15px #000; -ms-text-shadow: 0 10px 15px #000; -o-text-shadow: 0 10px 15px #000; text-shadow: 0 10px 15px #000; text-transform: uppercase; vertical-align: middle; margin:0 0 0 20px; font-family: 'Lithos Pro';}
/*.logo img {  margin: auto;}*/
.host ul {float: left;list-style: outside none none;padding: 0;width: 100%;}
.host li {color: #fff;float: left;font-size: 26px;text-transform: uppercase;width: 25%;font-family: 'Kotta One', serif;}
.host ul li:nth-child(2) {text-align: center;}
.host ul li:nth-child(3) {text-align: right;}
.host li:last-child {text-align: right;}
.host span {background-color: rgba(0, 0, 0, 0.2);border-radius: 12px;box-shadow: 0 0 4px rgba(255, 255, 255, 0.6) inset;display: inline-block;margin: 0 0 0 20px;padding: 12px 30px;}
.bars {margin-top: 0px;}
.bars .cssProgress,
.bars .cssProgress2 {float: left;width: 49%; background: rgba(0, 0, 0, 0) url("../images/blue-bg.png") repeat scroll 0 0;border: 2px solid rgba(255, 255, 255, 0.75);border-radius: 8px;box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);height: 72px;margin: 3px;position: relative;}
.bars .cssProgress-bar {background: rgba(0, 0, 0, 0) url("../images/green-bg.png") repeat scroll 0 0;border: 2px solid rgba(19, 147, 2, 0.65);border-radius: 8px;height: 68px;}
.left-bar-text.pull-left {display: block;left: 0;padding: 8px;position: absolute;}
.left-bar p {line-height: 30px;margin: 0; color: #000;display: block;font-size: 30px;font-weight: 600;text-shadow: 2px 2px 2px white;}
.left-bar small {line-height: 20px;color: #fff; display: block;font-size: 20px;font-weight: 800;margin-top: 3px;text-align: left;text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);}
.center { left: 50%;padding: 7px 0 0 10px;position: absolute;top: 0; }
.right-bar p, .center p{line-height: 30px;margin: 0; color: #fff;display: block;font-size: 30px;font-weight: 600;text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);}
.right-bar small {line-height: 20px;color: #fff; display: block;font-size: 20px;font-weight: 800;margin-top: 3px;text-align: right;text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);}
.bars .cssProgress.red {border: 3px solid #f10000;overflow: hidden;}
.bars .cssProgress.blue {border: 3px solid #000876;overflow: hidden;}
.bars .cssProgress.yellow {border: 3px solid #fff600;overflow: hidden;}
.bars .progress2 {background-color: transparent;float: left;width: 100%;}
.left-bar {left: 0;padding: 7px 0 0 10px;position: absolute;top: 0;}
.right-bar {position: absolute;padding: 7px 0 0 10px;right: 10px;text-align: right;top: 0;}
.game_box .scroll-now {float: left;width: 100%;}
.theme_form {background: #fff none repeat scroll 0 0;border-radius: 5px;padding: 30px 40px 40px; margin: 0 auto; width: 450px;position:relative;}
.theme_form span { color: #333;font-size: 15px;float:left;font-weight: 600;padding-bottom: 15px;}
.success-false, .waiting-for-players, .start-game, .reset-game, .reset-game-inprogress,.success-true {background: #fcf4f2 none repeat scroll 0 0;border-color: #e62600;border-radius: 3px;border-style: solid;border-width: 1px 1px 1px 7px;color: #a51b00 !important;font-family: "Lato",sans-serif !important;font-size: 14px !important;margin: 0 auto 15px;padding: 12px;text-transform: none !important;width: 450px !important;}
.success-true{border-color: green; color: green !important;}
input[type="text"], input[type="password"], input[type="email"], textarea { background-color: #fff;border: 1px solid #ddd;border-radius: 3px;box-shadow: none;color: #666;font-family: "Open Sans",sans-serif;font-size: 15px;outline: medium none; padding: 12px 10px;position: relative;width: 100%; }
.theme_form input[type="submit"], .theme_form input[type="buttont"] {
  background: #19597d none repeat scroll 0 0;border-radius: 3px;color: #fff;cursor: pointer;font-family: "Open Sans",sans-serif; font-size: 18px; margin-top: 20px; padding: 12px; width: 100%;border: none;}
.theme_form input[type="submit"]:hover, .theme_form input[type="buttont"]:hover {background: #000 none repeat scroll 0 0;}
.final-score {
  color: #fff;
  display: table;
  margin: 0 auto;
  padding: 15px;
}
.final-score > h3 {
  margin: 0 0 10px;
  text-align: center;
}
.final-score table {
  border: 1px solid #fff;
  width: 100%;
}
.final-score tr {
  border-bottom: 1px solid #fff;
  color: #fff;
  display: table;
  padding: 10px 0;
  width: 100%;
  font-size: 20px;
}
.final-score td {
  padding: 10px;
}
.black_image {
  background: #000 none repeat scroll 0 0;
  float: left;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 20px;
  font-family: KottaOneRegular_1;
  font-size: 63px;
  line-height: 1.2;
}
#speech_started{ display: none; }

.register > h2 {
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    /*text-transform: uppercase;*/
}

.register input[name="email"] {
	margin-top: 10px;
}

.register input[name="password"] {
	margin-top: 10px;
}

.register input[name="cpassword"] {
	margin-top: 10px;
}

.register span {
    font-size: 12px;
    font-weight: normal;
    margin-top: 0;
    text-align: center;
    width: 100%;
}

.already_registered {
    color: blue !important;
    font-size: 13px !important;
}

.already_registered a {
    text-decoration: none !important;
}

.forgot_password {
    color: blue !important;
    font-size: 13px !important;
    font-weight: normal !important;
    margin-top: 10px;
}

.forgot_password a {
    text-decoration: none !important;
}


.back_btn {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-left: -15px;
  position: absolute;
  text-align: center;
  top: 32px;
  vertical-align: middle;
  width: 40px;
}

.flaticon-left-arrow:before {
    content: "";
}
.fi:before {
    display: inline-block;
    font-family: "Flaticon";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-decoration: inherit;
    text-rendering: optimizelegibility;
    text-transform: none;
}

#div_gamerids_outer{
	border:1px solid #CCC;
	width:100%;
	overflow:auto;
}
#div_gamerids_outer #div_gamerids {
  float: left;
  margin-bottom: 10px;
  overflow: auto;
  width: 100%;
}
#div_gamerids_outer #div_gamerids_content {
  background-color: #FFF;
  float: left;
  min-width: 600px;
  padding: 10px;
  width:100%;
  display:table;
}
#div_gamerids_outer #div_gamerids_content > div {
  margin: 0 10px 0 0;
  position: relative;
  display:table-cell;
}
#div_gamerids_outer .gamerID_each {
  background-color: -moz-menubartext;
  float: left !important;
  font-size: 12px !important;
  font-weight: normal !important;
  margin-right: 0;
  padding: 4px 10px !important;
  width: auto;
}
#div_gamerids_outer .cross_each {
  color: red !important;
  font-size: 11px !important;
  margin-right: 6px;
  position: absolute;
  right: 3px;
  top: -7px;
  cursor: pointer;
}
#sendgold_form .theme_form {
  max-width: 100%;
  width: 100% !important;
}

#game_message {
  /*line-height: 0;
  min-height: 70px;
  vertical-align: top;
  padding:0 20px 30px 20px;*/
  resize: vertical;
  font-size: 12px;
}



@media(max-width: 1400px){
.host li{font-size: 24px;line-height: normal;}
}
@media(max-width: 1199px){
.host li{font-size: 18px;line-height: normal;}	
.left-bar p, .right-bar p{font-size: 24px;line-height: normal;}
.left-bar small, .right-bar small{font-size: 16px;margin-top:3px; }
.logo span{font-size: 50px;}
}

@media(max-width: 991px){
.host label {display: block;text-align: center;}
.left-bar p, .right-bar p{font-size: 20px;line-height: normal;}
.left-bar small, .right-bar small{font-size: 14px;margin-top:3px; }
.host ul li:nth-child(3) {text-align: center;}
.host span {display: block;margin: 0 20px;}
.logo span{font-size: 40px;}
}
@media(max-width: 767px){
.host li {margin-top: 10px;text-align: left !important;width: 100%;}
.host label {display: inline-block;text-align: left;width: 40%;}
.host span {display: inline-block;margin: 0;padding: 3% 5%;width: 60%;}
body{padding: 15px;}
}

/**
dynamic Grid 
**/
.cssProgress.width_99 {width: 99%;}
.cssProgress.width_49 {width: 49%;}
.cssProgress.width_24 {width: 24%;}
.cssProgress.width_33 {width: 33%;}

.cssProgress.width_16 {width: 16%;}
.cssProgress.width_14 {width: 14%;}
.cssProgress.width_11 {width: 11%;}
.cssProgress.width_9 {width: 9%;}
.cssProgress.width_8 {width: 8%;}

.width_16 .left-bar small, .width_16 .right-bar small{ font-size: 15px; }
.width_16 .left-bar p, .width_16 .right-bar p{ /*font-size: 22px;*/ font-size: 18px; }
.width_14 .left-bar small, .width_14 .right-bar small{ font-size: 13px; }
.width_14 .left-bar p, .width_14 .right-bar p{ font-size: 20px; }
.width_10 .left-bar small, .width_10 .right-bar small,
.width_11 .left-bar small, .width_11 .right-bar small{ font-size: 10px; }
.width_10 .left-bar p, .width_10 .right-bar p,
.width_11 .left-bar p, .width_11 .right-bar p{ font-size: 18px; }
.width_8 .left-bar small, .width_8 .right-bar small,
.width_9 .left-bar small, .width_9 .right-bar small{ font-size: 8px; }
.width_8 .left-bar p, .width_8 .right-bar p,
.width_9 .left-bar p, .width_9 .right-bar p{ font-size: 16px; }

/*  Custom CSS  */
.width_11 .left-bar { width: 50%;}
.width_11 .left-bar p, .width_11 .right-bar p { font-size: 15px; line-height: normal;}
.width_11 .left-bar small, .width_11 .right-bar small { font-size: 12px;}
.width_11 .right-bar p,
.width_11 .center p { font-size: 15px; line-height: normal;}

.width_9 .left-bar { width: 50%;}
.width_9 .left-bar p, .width_9 .right-bar p { font-size: 15px; line-height: normal;}
.width_9 .left-bar small, .width_9 .right-bar small { font-size: 12px;}
.width_9 .right-bar p,
.width_9 .center p { font-size: 15px; line-height: normal;}

.width_8 .left-bar { width: 50%;}
.width_8 .left-bar p, .width_8 .right-bar p { font-size: 12px; line-height: normal;}
.width_8 .left-bar small, .width_8 .right-bar small { font-size: 12px;}
.width_8 .right-bar p,
.width_8 .center p { font-size: 15px; line-height: normal;}
/*  Custom CSS  */


.reset-event{ color: #86b5b9; float: right; cursor: pointer;}
.ui-widget-overlay.ui-front { background: #000; opacity: 0.7; }
#interval1, #interval2, #resetEvent, #whichHost, #whichDB, #reset_event, #eventID_box16, .wraper audio, .send_to{display: none;}
#show_players { margin-left: 5px; position: relative; z-index: 9; height:30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border:1px solid #FFFFFF; width:60px; cursor: pointer;}
.header > input[type="button"], #end_event { float: left;	background: #0a7fbd none repeat scroll 0 0;border: 1px solid #fff;border-radius: 4px;color: #fff;padding: 4px; position:relative; z-index:9;}
#end_event { display: inline-block;margin-left: 15px;width: 12%;cursor: pointer;}
.content {margin-top: 15px;}
.verse { background: #000;; color: #fff; }

@media(max-width:1024px){
	.logo .logo_txt { font-size:30px;}
	.host li { font-size: 14px;}
	.host span { margin: 0 0 0 10px; padding: 12px 20px;}
	.width_33 .left-bar p,
	.width_33 .right-bar p { font-size: 18px; min-height:30px;}

	.width_24 .left-bar p,
	.width_24 .right-bar p { font-size: 15px; min-height:30px;}
	
	.width_24 .center {padding-top:3px;}
	.width_24 .right-bar p,
	.width_24 .center p { font-size: 18px;}
	
	.width_16 .left-bar p,
	.width_16 .right-bar p { font-size: 12px;}
	
	.width_16 .left-bar small,
	.width_16 .right-bar small { font-size: 10px;}
	
	.width_16 .left-bar p,
	.width_16 .right-bar p { font-size: 12px; width: 70px; min-height:30px;}
	
	.width_16 .center { padding:0 0 0 15px;}
	.width_16 .right-bar p,
	.width_16 .center p { font-size: 13px;}
	
	.bars .cssProgress.width_33,
	.bars .cssProgress2.width_33 { width: 32.7% !important;}
	.bars .cssProgress.width_11,
	.bars .cssProgress2.width_11 { width: 11.8% !important;}
	
	.bars .cssProgress.width_8,
	.bars .cssProgress2.width_8{ width:8.4% !important}

	.bars .cssProgress.width_9,
	.bars .cssProgress2.width_9{ width:9.3% !important}
	.width_9 .left-bar p,
	.width_9 .right-bar p,
	.width_9 .left-bar small,
	.width_9 .right-bar small,
	.width_8 .left-bar p,
	.width_8 .right-bar p,
	.width_8 .left-bar small,
	.width_8 .right-bar small { font-size: 8px; line-height: 12px; width: 90%;}
	.width_11 .left-bar p,
	.width_11 .right-bar p,
	.width_11 .left-bar small,
	.width_11 .right-bar small { font-size: 10px; line-height: 12px; width: 90%;}
	.width_11 .center,
	.width_9 .center,
	.width_8 .center { padding: 7px 0 0 6px;}
	.width_11 .right-bar,
	.width_9 .right-bar,
	.width_8 .right-bar { bottom: 8px; padding: 7px 0 0 6px; top: auto !important;}
	.width_11 .left-bar,
	.width_9 .left-bar,
	.width_8 .left-bar { width: 100% !important;}
	.width_11 .right-bar p,
	.width_11 .center p,
	.width_8 .right-bar p,
	.width_9 .right-bar p,
	.width_11 .center p,
	.width_9 .center p,
	.width_8 .center p { font-size: 10px; line-height: normal;}
	.width_11 .center,
	.width_9 .center,
	.width_8 .center { left:0; padding: 0px 0 0 10px; top: 35px; width: 100%;}
}