:root {
	   --app-height: 100%;
	}
	
	html {
		height: -webkit-fill-available;

  }
  @font-face {
	  font-family: brunch;
	  src: url("../layout/brunch.otf") format("opentype");
  }
  
  @font-face {
	  font-family: brunch;
	  font-weight: bold;
	  src: url("../layout/brunch_bold.otf") format("opentype");
  }
  
  ul, li { 
	  padding: 0px;
	  margin: auto;
  }
  #_evidon_banner,#_evh-link, #_evh-button { 
	  display:none !important;
  }
  
  body { 
 	color:#fff;
	 max-width: 400px;
	 margin: auto;
	background: #fff;
	font-family: brunch, sans-serif;
 font-weight: 700;
font-style: normal;
text-transform: uppercase;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
   overflow-x: hidden;
  min-height: var(--app-height);
  transition: filter 1s ease;
   
}
.show-online { 
	display: none;
}
.no-header .show-online { 
	display: block;
}
@keyframes dronover { 
	  0% { transform:rotate(0deg) translate(0,0);}
	  30% { transform: rotate(1deg) translate(-5px, 5px);}
	  50% { transform: rotate(-1deg) translate(5px, 5px);}
	  60% { transform: rotate(1deg) translate(0px, -5px);}
	  80% { transform: rotate(0deg) translate(-5px, -5px);}
   }
   @keyframes swiatlo { 
		 0% { transform:rotate(-4deg) translate(0,0);}
		 30% { transform: rotate(-8deg)  translate(0,0);}
		 50% { transform: rotate(-3deg) translate(0,0);}
		 60% { transform: rotate(-5deg) translate(0,0);}
		 80% { transform: rotate(-4deg) translate(0,0);}
	  }
	  .alert-popup { 
		  position: fixed;
		  top:0px;
		  bottom:0px;
		  right:0px;
		  left:0px;
		  z-index: 999999999999;
		  display: none;
		  background: rgba(0, 27, 128, 0.8);
	  }
	  .alert-popup.active { 
		  display: block;
	  }
	  .alert-in-header { 
		  font-size:22px;
		  font-weight: bold;
		  text-align: center;
		  padding:15px;
	  }
	  .alert-in-text { 
		  padding:15px;
	  }
	  .alert-in { 
		  background:#001b80;
		  display: none;
		  position: absolute;
		  top:50%;
		  left:50%;
		  width: 90%;
		  transform: translate(-50%,-50%);
 		  border:1px solid #fff;
 		  color:#fff;
		  border-radius:20px;
		  font-size:16px;
		  line-height: 20px;
		  text-align: center;
	  }
	  .alert-in .btn .btn-normal { 
		  
	  }
	  .alert-in.active { 
		  display: block;
	  }
 body.inactive { 
	filter:grayscale(1);
}
#main-menu-grey { 
	display: none;
}
body.inactive #main-menu-grey { 
	display: block;
}
body.inactive #main-menu { 
	display: none;
}
.moment { 
	position: fixed;
	z-index: 999;
	color:#fff;
 	opacity: 0;
}
.moment img { 
	width: 100px;
	transform: translateZ(0);
}
.no-header header { 
	position: relative;
}
.no-header .full-layer { 
	padding-top:20px !important;
}
 header { 
	position: fixed;
	top:0px;
	height: 60px;
	z-index: 999999999;
	width: 100%;
	max-width: 400px;
 	
}
header.hidden #switch, #switch.inactive { 
	transform: translateY(-140%) translateX(-50%);
	 
 }
 header.hidden .header-button-menu.active { 
	 transform: scale(0) translateY(0);
 }
.switsch { 
	position: absolute;
	left:10px;
	top:5px;
	width:100px;
	

}
.header-right-button-wrap { 
	position: absolute;
	top:0px;
	right:0px;
	width:60px;
	height: 60px;
}
.header-left-button-wrap { 
	position: absolute;
	left:0px;
	top:0px;
	width:60px;
	height: 60px;
}
.menu-hidden .header-right-button-wrap, .menu-hidden .header-left-button-wrap { 
	display:none;
}
.header-left-button { 
	position:absolute;
	left:10px;
	top:10px;
	transform: translateY(-100%);
 	opacity: 0;
	transition: all .5s ease;
}
.header-button { 
	position: absolute;
	right:10px;
	top:10px;
	transform: translateY(-100%);
	margin-top: -15px;
	opacity: 0;
	transition: all .5s ease;
}
.header-button.active, .header-left-button.active, .header-button-main-menu.header-left-button.active, .header-button-online-back.header-left-button.active { 
	transform: translateY(0) scale(1);
	opacity: 1;
	margin-top: 0px;
}
.header-button.header-button-menu.active { 
	transform: translateY(0) scale(1);
}
.header-button.header-button-menu, .header-button.header-button-main-menu, .header-button-main-menu.header-left-button, .header-button-online-back.header-left-button { 
	width: 50px;
	border-radius: 100%;
 	line-height: 50px;
	text-align: center;
	height: 50px;
	color:#fff;
	font-size: 20px;
	font-weight: bold;
	transform: scale(0);
}
.header-button-menu:hover, .header-button.header-button-menu.selected,.header-button-main-menu:hover, .header-button.header-button-main-menu.selected, .header-button-online-back.header-left-button:hover { 
 	background:#fff;
	color:#001b80;
}
.header-button.header-button-pomin { 
text-align: center;
height: 50px;
line-height: 50px;	
	
	
}.header-button-arrow {
	font-size: 40px;
	 margin-bottom: 0px;
	 display: block;
	
}
.header-button-text { 
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
}
.normal-menu { 
	width:300px;
	border-radius: 10px;
	margin: auto;
}
.normal-menu li { 
	list-style: none;
	display: block;
	position: relative;
}
.normal-menu li a { 
	background: #fff;
	color:#061a7b;
	height: 80px;
	line-height:78px;
	border:1px solid #061a7b;
	border-width: 0px 1px 1px 1px;
	
	text-align: center;
	display: block;
	font-size: 13px;
	text-decoration: none;
}
.normal-menu li:first-of-type a { 
	border-width: 1px 1px 1px 1px;
	border-radius: 40px 40px 0px 0px;
}
.normal-menu li:last-of-type a { 
	border-radius:0px 0px 40px 40px;
}


.online-menu { 
	width:180px;
	border-radius: 40px;
	margin: 0px auto;
	background:transparent;
}
.online-menu li { 
	list-style: none;
	display: block;
	position: relative;
	margin-bottom: 50px;
}
.online-menu li a, .online-menu li a.inverted:hover { 
	background: #fff;
	color:#001b80;
	height: 44px;
	line-height:44px;
	border:1px solid #fff;
 border-radius: 40px;	
	text-align: center;
	display: block;
	font-size: 20px;
	text-decoration: none;
} 

.online-menu li a:hover, .online-menu li a.inverted { 
	background: transparent;
	color:#fff;
}
.mini-rotate-header { 
	font-size:26px;
	font-weight: 900;
	transform:rotate(4deg);
	margin-bottom: 15px;
	text-align: center;
}
.wybo-input { 
	background: transparent;
	height: 50px;
	line-height:48px;
	border:1px solid #fff;
	border-width: 0px 1px 1px 1px;
color:#fff;
padding: 0px 15px;
border-radius: 0px;
}
.wybo-inputs .input-wrap:first-of-type .wybo-input { 
	border-radius: 40px 40px 0px 0px;
	border-width: 1px 1px 1px 1px;
}
.wybo-inputs .input-wrap:last-of-type .wybo-input  { 
	border-radius: 0px 0px 40px 40px;
 }
 input.wybo-input.invalid {
	   /* insert your own styles for invalid form input */
	   -moz-box-shadow: none;
	   border-color:#cc0000;
 
color:#cc0000;
	 }
	 input.wybo-input.valid {
			/* insert your own styles for invalid form input */
			-moz-box-shadow: none;
			border-color:#30d443;
	  
	 color:#30d443;
		  }
		  
		  input.wybo-input.valid::-webkit-input-placeholder, input.wybo-input.valid::-moz-placeholder, input.wybo-input.valid::-ms-input-placeholder { 
				color:#30d443;
			}
		  input.wybo-input.invalid::-webkit-input-placeholder, input.wybo-input.invalid::-moz-placeholder, input.wybo-input.invalid::-ms-input-placeholder { 
			  color:#cc0000;
		  }
		  
#popup-menu { 
	position: fixed;
	top:0px;
	left:0px;
	 
 	min-height: var(--app-height);
width:100%;
background: #001b80;
z-index: 999999;
display: none;
opacity: 0;
transform: translateY(-100%);
flex-direction: column;
justify-content: center;
align-content: center;
}
#popup-menu.block { 
	display: flex;
	
}
.popup-menu { 
	width:300px;
	margin: auto;
	
}
.popup-menu li {
	list-style: none;
	height: 60px;
	
}
.popup-menu li a { 
	display: block;
	height: 60px;
	line-height: 59px;
	border:1px solid #fff;
	border-width: 1px 1px 0px 1px;
	color:#fff;
	font-size: 11px;
	padding: 0px 15px;
	text-decoration: none;
	transition: all .5s ease;
	padding-left: 60px;
	position: relative;
}
.popup-menu li a:hover { 
	background: rgba(255,255,255,.3);
}
.popup-menu li a i { 
 	position: absolute;
	top:15px;
	left:30px;
	transform: translateX(-50%);
	font-size: 30px;
}
.popup-menu li:first-of-type a { 
	border-radius: 40px 40px 0px 0px;
}
.popup-menu li:last-of-type a { 
	border-width: 1px;
	border-radius: 0px 0px 40px 40px;
}
.page {
   /* mobile viewport bug fix */
min-height: var(--app-height);
  position: absolute;
	width: 100%;
	background: #fff;
	display: none;
	opacity: 0;
	top:0px;
	left:0px;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	top:0px;
 }
.page.block { 
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.page.active { 
	background: #001b80;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 999;
	opacity: 1;
	position: relative;
}
.page.hiding { 
	position: relative;
 	opacity: 1;
}
.page.showing { 
	position: absolute;
	z-index: 99999;
	opacity: 0;
	transform: translateX(100%);
	 
}
.fake-circle { 
	width:10px;
	background: rgba(255,255,255,.3);
	height: 10px;
	position: fixed;
	z-index: 99999999999;
	opacity: 0;
	border-radius: 100%;
}

.ar-layer, #sketch-layer { 
	z-index: 999999;
	background: #001b80;
min-height: var(--app-height);
  /* mobile viewport bug fix */
   display: none;
	position: absolute;
width: 100%;
left:0px;
top:0px;
	opacity: 0;
	padding: 15px;
	padding-top:70px;
}
.ar-layer.block, #sketch-layer.block { 
	display: flex;
	justify-content: center;
	align-items: normal;
	flex-direction: column;
}
.ar-layer.active, #sketch-layer.active { 
	display: flex;
	opacity: 1;	position: relative;
	z-index: 99999;
	

}
#sketch-layer.active { 
	position: absolute;
}
.ar-layer.active.absolute, #sketch-layer.active.absolute { 
	position: absolute;
}

.ar-layer iframe, #sketch-layer iframe { 
	position: fixed;
	width: 100%;
	top:0px;
	left:0px;
	height: 100%;
	z-index: 99;
	transform: translateY(100%);
	background: #fff;
	transition:all .5s ease;
}
.ar-layer iframe.active, #sketch-layer iframe.active { 
	transform: translateY(0);
}
.ar-layer.hiding, #sketch-layer.hiding { 
	z-index: 9999;
	position: absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	width:100%;
	min-height: 100%;
}

.ar-bg { 
	position: absolute;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
	background-size: cover;
	background-position: center;
}
.full-layer { 
	z-index: 999999;
	background: #fff;
min-height: var(--app-height);
  /* mobile viewport bug fix */
   display: none;
	position: absolute;
width: 100%;
left:0px;
top:0px;
	opacity: 0;
	padding: 15px;
	padding-top:70px !important;
}
 .full-layer.block { 
	display: flex;	padding-top:70px;

	justify-content: center;
	align-items: normal;
	flex-direction: column;
}
#results-layer.full-layer.block, #question-layer.trojka.full-layer.block { 
	justify-content:start;
 }
.full-layer.active { 	padding-top:70px;

	display: flex;
	opacity: 1;	position: relative;
	z-index: 99999;	flex-direction: column;

	

}
.full-layer.active.absolute { 
	position: absolute;
}
.full-layer.hiding { 
	z-index: 9999;
	position: absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	width:100%;
	min-height: 100%;
}
.afterarvideo { 
	position: fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	z-index: 99;
	background: rgba(0,0,0,.6);
	color:#fff;
	font-size:34px;
	font-weight: bold;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
	text-align: center;
 		background: linear-gradient(139deg, rgba(0,27,128,.6), rgba(210,36,188,.6));
		background-size: 200% 200%;
 		-webkit-animation: AnimationName6s ease infinite;
		-moz-animation: AnimationName 6s ease infinite;
		animation: AnimationName 6s ease infinite;
	}
	
	@-webkit-keyframes AnimationName {
		0%{background-position:23% 0%}
		50%{background-position:78% 100%}
		100%{background-position:23% 0%}
	}
	@-moz-keyframes AnimationName {
		0%{background-position:23% 0%}
		50%{background-position:78% 100%}
		100%{background-position:23% 0%}
	}
	@keyframes AnimationName {
		0%{background-position:23% 0%}
		50%{background-position:78% 100%}
		100%{background-position:23% 0%}
	}
	
	
	#main-loading-layer, #loading-ar { 
	background-image:url(/layout/domowka_loader.jpg);
	background-position: center 20%;
	background-size: auto 70%;  
	background-repeat: no-repeat;
}
#main-loading-layer { 
	background: #000;
}
.main-loading-start { 
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background-size:cover;
	background-position: left top;
	background-repeat: no-repeat;
	background-image:url(/layout/preloader.jpg);
	transition:all .4s ease;
 	transform-origin: center top;
 }
.main-loading-start-after { 
	position: absolute;
	left:0px;	
	 transform-origin: center bottom;
 	top:0px;
	right:0px;
	bottom:0px;
	background:#000;
	
}
.main-loading-second { 
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: #001b80;
background-image:url(/layout/pierwszy_ekran.jpg);
background-size:auto 100%;
background-position:center top;
background-repeat: no-repeat;
opacity: 0;
transition:all .3s ease;
}
.main-loading-second.active { 
	opacity: 1;
}
.lang_en .main-loading-start { 
	background-image:url(/les-embiez-wyborowa/layout/preloader_en.jpg);

}
.lang_en .main-loading-second { 
	background-image:url(/les-embiez-wyborowa/layout/pierwszy_ekran_en.jpg);

}
.lang_en #main-loading-lasyer, .lang_en #loading-ar  { 
	background-image:url(/les-embiez-wyborowa/layout/pierwszy_ekran_en.jpg);

}

.main-loading-progress { 
	position: absolute;
	top:50%;
	left:50%;
	/* display: none; */
	transform: translate(-50%,-50%);
	height: 20px;
	width: 250px;
	border:1px solid #fff;
	border-radius: 40px;
}
.main-loading-progress.switchowy { 
	border: none;
	height: auto;
}
.main-loading-progress-text { 
	position: absolute;
	top:100%;
	margin-top: 5px;
	text-align: center;
	font-size: 10px;
	color:#fff;
	left:0px;
	right:0px;
}
.main-loading-progress-in { 
	transform-origin: left center;
	position: absolute;
	left:1px;
	top:1px;
	right:1px;
	bottom:1px;
	border-radius: 40px;
	transform: scale(0,1);
	background: rgba(255,255,255,.3);
}
.switchowy .switch { 
	transform: scale(1.7);
}
.switchowy .main-loading-progress-in { 
	display: none;
}
 .birth-enter { 
	 	font-size: 40px;
	 transform: rotate(6deg);
	 text-align: center;
	 margin-bottom: 30px;
  }
.select-age-in { 
	height: 102px;
	border:1px solid #fff;
}
.select-age-in:nth-child(1) { 
	border-width: 1px 0px 1px 1px;
	border-radius: 40px 0px 0px 40px;
}
.select-age-in:nth-child(3) { 
	border-width: 1px 1px 1px 0px;
	border-radius: 0px 40px 40px 0px;
}
.select-age-in:nth-child(2) { 
	
	border:1px solid #fff;
 }
 
 
 
 ul.main-menu, ul.new-menu { 
	 margin: 0px auto;
	 
	 padding: 0px;
	 width: 300px;
 }
 ul.main-menu li, ul.new-menu li { 
	 margin: 0px;
	 margin-bottom:10px;
	 display: block;
 }
 ul.main-menu li:last-of-type { 
	 margin-bottom: 
 }
 ul.main-menu li a, ul.new-menu li a  { 
	 display: block;
	 padding: 15px;
	 transition:all .5s ease;
	 border-radius: 40px;
 }
 ul.new-menu li a { 
	 text-align: center;
 }
 ul.new-menu li a i { 
	 margin-left:10px;
 }
 ul.new-menu a .new-menu-description { 
	 text-decoration: none !important;
	 color:#fff;
	 display: inline-block;
	 position: relative;
 	 margin-top:20px;
	 font-size:14px;
	 text-align: center;
	 width: 200px;
	 
 }
 ul.main-menu li a:hover { 
	 background: rgba(255,255,255,.2);
 }
 
.video-wrap { 
	position: absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	overflow: hidden;
}
.answer-list-wrap { 
	position: relative;
}
.answer-list { 
	display: inline-block;
	position: relative;
	transition:opacity .4s ease;
}
.answer-list.inactive { 
opacity:0;
display: none;	
}
.answer-list.toshow.inactive { 
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
display: inline-block;
}
.answer-list.hiding { 
	opacity: 0;
}

.online-loading-game { 
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	 
}
.online-loading-game-1 { 
	display: inline-block;
	width: auto;
	height: 50px;
	animation:loadinggame1 2s linear infinite;	 
}

.online-loading-game-2 { 
	display: inline-block;
	width: auto;
	height: 40px;
	margin-left:10px;
	opacity: .4;
animation:loadinggame2 2s linear infinite;	 
 
}
@keyframes loadinggame1 { 
0% { opacity:1;}
 25% {  opacity:1}
 35% {  opacity:0.4}
 50% { opacity:0.4}
 80% { opacity:0.4;}
 85% {  opacity:1}
	}
	@keyframes loadinggame3 { 
		0% { opacity:0.4;}
		 35% {  opacity:0.4}
		 50% {  opacity:1}
		 75% {  opacity:.4}
		 100% { opacity:.4}
			}
.online-loading-game-3 { 
	display: inline-block;
	width: auto;
	transform: rotate(90deg);
	height: 30px;
	opacity: .4;
	 animation:loadinggame3 2s linear infinite;	 
  
}

@keyframes loadinggame2 { 
	0% { opacity:0.4;}
	35% { opacity:1}
	50% { opacity:.4}
 	85% { opacity:1;}
	100% { opacity:.4}
	}
.online-loading-game-dots { 
	margin:0px 15px;
	width:50px;
	position: relative;
	animation:dotswrapwrap 2s ease-in-out infinite;
}
.online-loading-game-dots-in {
	position: absolute;
	left:0px;
	transform: translate(0%,-50%);
	top:50%;
	animation:dotswrap 2s ease-in-out infinite;
	
	
 }
 
  @keyframes dotswrapwrap { 
	  0% {  transform: scale(.7); transform-origin:left center;}
	  15% { transform: scale(1);transform-origin:right center;}
	  25% { transform: scale(.7); transform-origin:right center;}	   
	  50% { transform: scale(1);transform-origin:left center;}
100% { transform: scale(.7); transform-origin:left center;}
  }
	  
	   @keyframes dotswrap { 
	 0% { transform:translate(0,-50%);opacity:1}
	 25% { transform:translate(100%,-50%) ; opacity:1}
	 35% { transform:translate(100%,-50%); opacity:0}
	 50% { transform: translate(100%,-50%);opacity:0}
	 70% { transform: translate(100%,-50%);opacity:0}
	 75% { transform:translate(100%,-50%); opacity:1}
	 100% { transform:translate(0%,-50%); opacity:1}
 }
 @keyframes dotswrap1 { 
	 0% { transform:translate(0,-50%);opacity:0}
	  15% { transform:translate(0%,-50%); opacity:0}
	  25% { transform:translate(0%,-50%); opacity:1}
	  50% { transform: translate(100%,-50%);opacity:1}
	  75% { transform: translate(0%,-50%);opacity:1}
	  85% { transform:translate(0%,-50%); opacity:0}
	  100% { transform:translate(0%,-50%); opacity:0}
  }
.online-loading-game-dots:nth-child(4) {
 	animation-delay: .4s;
}
.online-loading-game-dots:nth-child(4) .online-loading-game-dots-in{ 
animation:dotswrap1 2s ease-in-out infinite;
opacity: 0;
	
}
.online-loading-game-dot {
	display:inline-block;
	width:6px;
	height:6px;
	border-radius:50%;
	margin:2px;
	background:#fff;
	position: relative;
	animation: blink 1s linear infinite;
	animation-delay: .5s;
}


	.online-loading-game-dot:nth-child(2) {
		animation-delay: .1s;
		transform: translateY(1px);
		width:8px;
		height: 8px;
		animation:none;
	}

	.online-loading-game-dot:nth-child(3) {
		animation-delay: 0s;
	}
	@keyframes blink { 
		0% { opacity:1}
		50% { opacity:0}
	}
 
@keyframes wave {
0% {
	transform: initial;
}

30% {
	transform: translateY(-15px);
}
60% { 
	transform: initial;
}
100% { transform: initial;}
}
.mini-avatar { 
height:auto;
display: inline-block;
width: 100%;
border-radius: 100%;
margin-bottom: 30px;
}
.mini-avatar img { 
	width: 100%;
}
.new-game-players { 
width:300px;
}
.playerRow { 
	border:1px solid #fff;
	border-radius: 0px;
	height: 40px;
	line-height: 28px;
	margin-bottom: 10px;
	display: block;
	transform-origin: left center;
	padding-left: 50px;
	padding-right:30px;
	position: relative;	 border-radius: 0px 20px 20px 0px;
opacity: 0;
	margin: 0px 15px 20px 15px;
 }
 #new-game-players .playerRow { 
 }
.playerRowAvatar { 
	position: absolute;
	left: -1px;
	border-radius: 100%;
	top: -1px;
	border: 1px solid #fff;
	height: 40px;
	transform: translateX(-20px);
	width: 40px;
	z-index: 4;
}
.playerRowAvatar img { 
	width: 100%;
}
.playerRowAvatar:after { 
	
	 border-radius: 100%;
	 border: 1px solid #061a7b;
	 position: absolute;
	 z-index: 0;
	 top: 0px;
	 content: " ";
	 left: 0px;
	 right: 0px;
	 bottom: 0px;
 }
 .playerRowAddedPointsBg { 
	 position: absolute;
	 right:2px;
	 top:2px;
	 height: 34px;
	 
	 width: 34px;
	 color:#061a7b;
	 line-height: 34px;
	 text-align: center;
	 background: #fff;
	  border-radius: 100%;
	 font-size: 12px;
 }
.playerRowAddedPoints { 
	position: absolute;
	right:0px;
	top:0px;
	bottom:0px;
	left:2px; 
	color:#061a7b;
	text-align: center;
	line-height: 34px;
	text-align: center;
	 
 	border-radius: 100%;
	font-size: 12px;
}
.playerRowName { 
	position: relative;
	font-size: 16px;
	line-height:38px;
}
.playerRowPoints{
	position: absolute;
	left:2px;
	top:2px;
	bottom:2px;
	transform-origin: left center;
	background: #fff;
	border-radius: 0px 20px 20px 0px;
	
}
.playerRow.winner .playerRowPoints { 
	background:  rgba(75, 253, 119, 0.6);
	left:0px;
	top:0px;
	bottom:0px;

}

 .winnerRowWrap { 
	 position: relative; 
	 z-index: 999999;
	 perspective: 1000px;
	 
	 
  }
  .winnerRowOut { 
	  overflow: hidden;
 		border-radius: 100%;
  
	  
	  
  }
  .winnerRowIn { 
	  position: relative;
	  margin: auto;		
	  transform: rotateY(0) translateZ(-10px);
	  transform-style: preserve-3d;
	  transform-origin: center;
	  animation:flipWinner 8s linear infinite;border-radius: 100%;	  
  }
  
  
  @keyframes flipWinner { 
	  0% { transform: rotateY(0) translateZ(-10px)}
	  50% { transform: rotateY(180deg) translateZ(-10px);}
	  
  }
  .winnerRowFront { 
	  position: absolute;
	  left:0px;
	  right:0px;
	  top:0px;
	  border-radius: 100%;
	  bottom:0px;
		display: flex;
		align-items:center;
		flex-direction: column;
		justify-content: center;
	  transform: rotateY(0deg) translateZ(2px);
		background: #fff;
		color:#1e367e;
		font-size: 90px;
		text-align: center;
  }
  .winnerRowBack { 
	  position: absolute;border-radius: 100%;
	  border:1px solid rgba(255,255,255,.8);
 	  transform: rotateY(180deg) translateZ(-1px);
	  opacity: 1;
	  left:0px;padding: 15px;
	  right:0px;
	  display: flex;
	  align-items:center;
	  flex-direction: column;
	  justify-content: center;
	  bottom:0px;
	  top:0px;
	  background: #fff;
	  color:#1e367e;
	  font-size: 20px;
	  text-align: center;
	  
  }
  .winnerRowFront span, .winnerRowBack span { 
	  font-size:13px;
	  display: block;
  }
  .winnerRow img { 
	  width:100%;
  }
  
.question-tags { 
	text-align: center;
	margin-top: 20px;
}
.tag { 
	display: inline-block;
	min-height: 30px;
	border-radius: 5px;
	margin: 5px 5px;
	 padding: 5px 10px; letter-spacing: 4px;
	line-height: 20px;
	font-size: 13px;
 background:#1E367E;
	 border:1px solid #fff;
	 color:#fff;
	transition:all .3s ease;
 }
 .tag.active { 	background: #fff;
	color:#1E367E;
	border:1px solid #fff;
	 animation:tag .4s ease forwards;
	
 }
 .tag.inactive:not(.active) { 
	 opacity:.2;
 }
 .mini-avatar { 
	 transition: all .4s ease;
	 border:3px solid transparent;
 }
 .mini-avatar.ukryty { 
	 
	  filter:grayscale(1);
	  opacity: .5;
	  transform: scale(.5);
 }
 .mini-avatar.inactive { 
	 filter:grayscale(1);
	 opacity: .7;
	 transform: scale(.8);
 }
 .mini-avatar.active { 
	 animation:tag .4s ease forwards;
border:3px solid #fff;

 }
 .miniavatardesc { 
	 position: absolute;
	 top:100%;
	 margin-top: 10px;
	 left:50%;
	 transform: translateX(-50%) translateY(-15px) scale(0.5);
	 transition:all .5s ease;
	 opacity: 0;
	 font-size: 11px;
	 white-space: nowrap;
	 color:#fff;
	 
 }
 .mini-avatar.active .miniavatardesc { 
	 transform: translateX(-50%) translateY(0) scale(1);
	 opacity: 1;
 }
 @keyframes tag { 
	  0% { 
		  transform: scale(1);
	  }
	  40% { transform: scale(0.9);}
	  60% { transform: scale(1.2);}
	  100% { transform: scale(1.1);}
  }
  .insertwrap { 
	  font-size: 16px;
	  margin-top: 20px;
	  font-weight: bold;
  }
  .insert { 
	  color: #b1f675;
	  text-transform: lowercase;
	  display: inline-block;
	  border-bottom: 1px solid #fff;
	  margin: 0px 5px;
  
	  font-weight: bold;
	  text-transform: lowercase;
	  min-width: 100px;
  }
  .question-content { 
	  text-align: center;
  }
  .question-players { 
	  width: 100%;
	  margin-top:30px;
	  text-align: center;
	  
  }
  .player-answered { 
	  width:40px;
	  height: 40px;
	  display: inline-block;
	  margin: 10px;
	  border-radius: 100%;
	  text-align: center;
	  position: relative;
	  line-height:40px;
	  color: rgba(0, 26, 117, 0.425);
	  font-size: 20px;
	  font-weight: 900;
	  text-transform: uppercase;
	  opacity:0;
	  transform: translateY(10px);
	  
  }
  .player-answered.showed { 
	  animation:showme 1s ease 1s forwards;

  }
  .player-answered.showed.done { 
	  animation:answerdone 1s ease forwards;
  }
  .player-answered.showed.time { 
		animation:answerdone 1s ease forwards;
	}
  @keyframes answerdone { 
	  0% { transform: translate(0) scale(1); opacity: .4; }
	  60% { transform: translate(0) scale(1.3); opacity: 1; }
	  90% { transform: translate(0) scale(.9); opacity:1;}
	  100% { transform: translate(0) scale(1.1); opacity:1;}
  }
  .player-answered.done .fa-check { 
	  opacity: 1; 
	  transform: scale(2);
	  transform-origin: right bottom;
  }
  
	.player-answered.time .fa-stopwatch { 
		opacity: 1; 
		transform: scale(2);
		transform-origin: right bottom;
	}
   @keyframes showme { 
	   0% { transform: translateY(10px) scale(0); opacity: 0;}
	   40% { transform: translateY(0) scale(1.2); opacity: .4; }
	   70% { transform: translateY(0) scale(0.9); opacity: .4;}
	   100% { transform: translateY(0) scale(1); opacity: .4;}
   }
   .player-answered:nth-child(2) { 
	   animation-delay: 1.2s;
   }
   .player-answered:nth-child(3) { 
		  animation-delay: 1.4s;
	  }
	  .player-answered:nth-child(4) { 
			 animation-delay: 1.6s;
		 }
		 .player-answered:nth-child(5) { 
				animation-delay: 1.8s;
			}
			.player-answered:nth-child(6) { 
				   animation-delay: 2s;
			   }
			   .player-answered:nth-child(7) { 
					  animation-delay: 2.2s;
				  }
				  .player-answered:nth-child(8) { 
						 animation-delay: 2.4s;
					 }
  .player-answered i { 
	  position: absolute;
	  left:100%;
	  top:100%;
	  transform: translate(-50%,-50%);
  color:#fff;
  font-size: 14px;
  transition:all 1s ease;
  }
 .player-answered.wait .fa-check,.player-answered.wait .fa-stopwatch {
opacity: 0;	 
 }
 .player-answered.done .fa-hourglass,.player-answered.done .fa-stopwatch { 
	 opacity: 0;
 }
 .player-answered.time .fa-hourglass,.player-answered.time .fa-check { 
	  opacity: 0;
  }
  .game-list-game.mygame { 
	  border:2px solid #fff;
  }
  span.green { 
	  color:#ea9157;
	  font-size: 11px;
  }
 .game-list-game { 
	 border:1px solid #fff;
	 margin-bottom: 20px;
	 padding: 20px;
	border-radius: 40px;
 }
 .game-list-game.active { 
	 background: #fff;
	 color:#001a75;
 }
 .odliczanie { 
	 position: fixed;
	 top:0px;
	 left:0px;
	 right:0px;
	 bottom:0px;
	 z-index: 999999999999;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 opacity: .5;
	 align-items: center;
 }
 .odliczanie div { 
	 font-size: 80px;
	 color:#fff;
	 position: absolute;
	 
	 transform: scale(10);
	 z-index: 999999;
	 opacity: 0;
	 font-weight: 900;
	 color:  #f5ef81;
 }
 .odliczanie div:nth-child(2) { 
	 color:  #f7bf7c;
 }
 .odliczanie div:nth-child(3) { 
	 color: #f38f8f;
 }
 .online-tutorial-button, .run-video-button, .run-tutorial-video-button ,.next-fall-video-button { 
	 position: fixed;
	 bottom:100px;
	 white-space: nowrap;
	 left:50%;
	 transform: translateX(-50%);
	 padding: 0px 15px;
	 height: 40px;
	 line-break: 40px;
	 background: #fff;
 	 color:#001b80;
	  border:none;
	 font-size: 14px;
	 text-transform: uppercase;
	 border-radius: 40px;
	 z-index: 9999999999;
	 
 }
 .online-tutorial-button i, .run-video-button i .run-tutorial-video-button i,.next-fall-video-button i { 
	 margin-left: 10px;
 }
 #count-switch { 
	 position: fixed;
	 top:0px;
	 left:50%;
	 transform: translate(-50%,-100%);
	 z-index: 999999999;
	 background: #fff;
	 margin-top:10px;
	 margin-left:10px;
	 color:#061a7b;
	 transition:all .5s ease;
	 opacity: 0;
	 border-radius: 40px;
	 width: 100px;
	 height:50px;
 }
 #count-switch.done { 
	 background: #cc0000;
	 color:#fff;
 }
 #count-switch.good { 
	  background: #30d443;
	  color:#fff;
  }
 #count-switch.active { 
	 transform: translate(-50%,0);
	 opacity: 1;
	 
 }
 .switch-number { 
	 heigth:50px;
	 display: block;
	 text-align: center;
	 line-height: 50px;
	 
 }
 .big-switch .full-layer { 
	 padding-top:110px;
 }
 /* 
 @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
	   html {
		 transform: rotate(-90deg);
		 transform-origin: left top;
		 width: 100vh;
		 overflow-x: hidden;
		 position: absolute;
		 top: 100%;
		 left: 0;
	   }
	 } */