.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 7, 2013 */
@font-face {
  font-family: 'open_sansbold';
  src: url('../fonts/opensans-bold-webfont.eot');
  src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-bold-webfont.woff') format('woff'), url('../fonts/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'open_sanslight';
  src: url('../fonts/opensans-light-webfont.eot');
  src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-light-webfont.woff') format('woff'), url('../fonts/opensans-light-webfont.ttf') format('truetype'), url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'open_sansregular';
  src: url('../fonts/opensans-regular-webfont.eot');
  src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'open_sanssemibold';
  src: url('../fonts/opensans-semibold-webfont.eot');
  src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold-webfont.ttf') format('truetype'), url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'open_sansextrabold';
  src: url('../fonts/OpenSans-ExtraBold.eot');
  src: url('../fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-ExtraBold.woff') format('woff'), url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'), url('../fonts/OpenSans-ExtraBold.svg#open_sanssemibold') format('svg');
  font-weight: normal;
  font-style: normal;
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden !important;
  position: relative;
}
body {
  background: url('../img/bg.jpg') center top #919191 no-repeat;
  font-family: open_sanssemibold, sans-serif;
}
h1,
h2,
h3,
h4 {
  font-weight: 600;
}
ul,
li {
  list-style: none;
}
ul,
li,
p,
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}
*:focus {
  outline: none;
  -webkit-outline: none;
}
.part {
  position: relative;
}
.hide {
  display: none;
  opacity: 0;
  filter: alpha(opacity=0);
}
/*
Main Container
*/
.container {
  width: 1020px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
#register {
  z-index: 1;
}
#social-intro {
  z-index: 3;
}
#content {
  z-index: 10;
}
#card {
  z-index: 20;
}
#lang-popup {
  z-index: 30;
}
#loader {
  z-index: 4;
}
#loadingWrapper {
  display: none;
}
#audios {
  display: none;
}
/*
Quiz
*/
#content {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 730px;
  right: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: url('../img/bg-ctn.png') repeat-x;
  padding: 20px 20px 0;
}
#content .wrapper {
  padding: 0 2.5%;
}
#content section {
  *zoom: 1;
}
#content section:before,
#content section:after {
  display: table;
  content: "";
  line-height: 0;
}
#content section:after {
  clear: both;
}
#content.bigPadding {
  padding-top: 80px;
}
#videoBackground {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  overflow: hidden;
  z-index: 0;
}
#videoBackground video,
#videoBackground img {
  width: 100%;
  position: relative;
}
#videoBackground .overlay {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 10;
}
.slug-sochiparalympics #videoBackground {
  display: none !important;
}
.landscape video {
  width: 100%;
}
.portrait video {
  height: 100%;
}
/**
Image preloader
*/
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  padding: 50px 0;
  text-align: center;
  background: white;
  font-size: 12px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#main-actions {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
}
#main-actions #btnMute {
  width: 36px;
  height: 33px;
  display: block;
  margin: 5px 10px;
  background: transparent url(../img/mute.png) left top no-repeat;
}
#main-actions #btnMute.active {
  background-position: left bottom;
}
.no-touch #main-actions #btnMute:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
/*
* Font size
*/
.border-radius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.display-none {
  display: none;
  visibility: hidden;
}
.caption {
  position: absolute;
  top: 0;
  left: -777777777px;
}
.padding-bottom {
  padding-bottom: 15px;
}
/*
* Icon
*/
.icon-reset-white {
  background: url('../img/icon-reset-white.png') no-repeat center center;
  width: 21px;
  height: 29px;
  display: inline-block;
}
.icon-playagain {
  background: url('../img/icon-playagain.png') no-repeat center center;
  width: 21px;
  height: 29px;
  display: inline-block;
}
.icon-reset {
  background: url('../img/icon-reset.png') no-repeat center center;
  width: 28px;
  height: 31px;
  display: inline-block;
}
.icon-social {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: no-repeat center center;
  cursor: pointer;
}
.icon-facebook {
  background-image: url('../img/icon-facebook.png');
}
.icon-googleplus {
  background-image: url('../img/icon-googleplus.png');
}
.icon-twitter {
  background-image: url('../img/icon-twitter.png');
}
.icon-mail {
  background-image: url('../img/icon-mail.png');
}
.icon-facebook-color,
.icon-googleplus-color,
.icon-twitter-color {
  width: 22px;
  height: 22px;
  display: inline-block;
  background: no-repeat center center transparent;
}
.icon-facebook-color {
  background-image: url('../img/icon-facebook-color.png');
}
.icon-googleplus-color {
  background-image: url('../img/icon-googleplus-color.png');
}
.icon-twitter-color {
  background-image: url('../img/icon-twitter-color.png');
}
.icon-email-color {
  width: 23px;
  height: 24px;
  display: inline-block;
  background: url('../img/icon-email-color.png') no-repeat center center transparent;
}
/**
* Card
*/
#card {
  position: absolute;
  left: 0;
  width: 262px;
  top: 0;
  left: 50%;
  margin-left: -131px;
}
#card .shadow {
  background: url('../img/card/card-shadow.png?v=2') no-repeat transparent center center;
  height: 155px;
  position: absolute;
  display: none;
  left: 4px;
  width: 255px;
}
#card .wrapper {
  width: 262px;
  height: 375px;
  position: relative;
  top: -380px;
  -webkit-perspective: 600;
  -moz-perspective: 600;
}
#card .flipper {
  width: 262px;
  height: 375px;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#card.dom-ready-1 .flipper {
  -webkit-transform: rotateY(180deg);
  -webkit-transition-duration: 2s;
  -moz-transform: rotateY(180deg);
  -moz-transition-duration: 2s;
  transform: rotateY(180deg);
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
#card.dom-ready-2 .flipper {
  -webkit-transform: rotateY(359deg);
  -webkit-transition-duration: 2s;
  -moz-transform: rotateY(359deg);
  -moz-transition-duration: 2s;
  transform: rotateY(359deg);
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
#card.dom-ready-3 .flipper {
  -webkit-transform: rotateY(0deg);
  -webkit-transition-duration: 0.01s;
  -moz-transform: rotateY(0deg);
  -moz-transition-duration: 0.01s;
  transform: rotateY(0deg);
  -webkit-transition-duration: 0.001s;
  -moz-transition-duration: 0.001s;
  -o-transition-duration: 0.001s;
  transition-duration: 0.001s;
}
#card .front,
#card .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  background: url('../img/card/card.png') 0 0 no-repeat transparent;
}
#card .front {
  width: 262px;
  height: 375px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
}
#card .back {
  width: 262px;
  height: 375px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#card .light {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('../img/card/card-light.png') 0 0 no-repeat transparent;
}
#card .clip {
  position: absolute;
  background-image: url('../img/card/card-clip.png');
  width: 60px;
  top: -101px;
}
#card .clip.part1 {
  height: 41px;
  top: -100px;
  left: 99px;
}
#card .front .clip.part2 {
  height: 84px;
  top: -59px;
  left: 99px;
  background-position: bottom left;
}
#card .back .clip.part2 {
  background-image: url('../img/card/card-clip-reverse.png');
  height: 84px;
  top: -59px;
  left: 98px;
  background-position: bottom left;
}
#card .cord {
  position: absolute;
  background-image: url('../img/card/card-cord.png?v=1');
  width: 63px;
  height: 410px;
  top: -494px;
  left: 99px;
}
#card.small {
  width: 230px;
  height: 329px;
}
#card.small .wrapper,
#card.small .front,
#card.small .back {
  width: 230px;
  height: 329px;
  background-size: 230px auto;
}
#card.small .cord {
  left: 82px;
}
#card.small .clip.part1 {
  left: 82px;
}
#card.small .front .clip.part2 {
  left: 82px;
}
#card.small .back .clip.part2 {
  left: 82px;
}
#card.small .shadow {
  background-image: url('../img/card/card-shadow.png?v=2');
  left: -13px;
}
#card.small .light {
  background: url('../img/card/card-light-small.png') 0 0 no-repeat transparent;
}
#card.small .flipper {
  width: 230px;
}
#card.small .front,
#card.small .back {
  background-image: url('../img/card/card-small.png');
}
#card.small .custom {
  top: 40px;
  left: 25px;
}
#card .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#card .mode {
  display: none;
  visibility: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: center center no-repeat transparent;
}
#card .mode.active {
  display: block;
  visibility: visible;
}
#card .advanced_en {
  background-image: url('../img/card/card-advanced-en.png');
  top: 13px;
}
#card .advanced_fr {
  background-image: url('../img/card/card-advanced-fr.png');
  top: 15px;
}
#card .en-mini,
#card .fr-mini {
  background-position: center 93px;
}
#card .en-mini .user,
#card .fr-mini .user {
  bottom: auto;
  position: absolute;
  top: 0;
  width: 150px;
  height: 329px;
  left: 41px;
}
#card .en-mini .user .codebar,
#card .fr-mini .user .codebar {
  top: auto;
  bottom: 32px;
}
#card .en-mini .user button,
#card .fr-mini .user button {
  position: absolute;
  right: -128px;
  top: 70px;
}
#card .en-mini .user .name,
#card .fr-mini .user .name {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 19px;
  position: absolute;
  overflow: hidden;
  width: 150px;
  bottom: 114px;
  max-height: 38px;
}
#card .en-mini .user .country,
#card .fr-mini .user .country {
  color: #257f28;
  font-weight: 700;
  font-size: 14px;
  padding-top: 5px;
  position: absolute;
  bottom: 74px;
  max-height: 37px;
  overflow: hidden;
}
#card .en-mini {
  background-image: url('../img/card/card-en-mini.png');
}
#card .fr-mini {
  background-image: url('../img/card/card-fr-mini.png');
}
#card .en,
#card .fr {
  top: 8px;
  background: center center no-repeat transparent;
}
#card .en {
  background-image: url('../img/card/card-en.png');
}
#card .fr {
  background-image: url('../img/card/card-fr.png');
}
#card .custom {
  width: 180px;
  height: 250px;
  position: absolute;
  top: 69px;
  left: 40px;
}
#card .custom img {
  width: 100%;
}
#card .codebar {
  background: url('../img/card/card-codebar.png') transparent center top no-repeat;
  height: 34px;
  width: 100%;
  position: absolute;
  bottom: 57px;
}
#card .form {
  padding-top: 76px;
  /*select {
			width: 121px;
			&.small {
				width: 90px
			}
		} */

}
#card .form .user {
  top: 80px;
}
#card .form .title {
  position: static;
  text-align: center;
  width: 100%;
  font-size: 19px;
  background: url('../img/asset-arrow-down-gray.png') bottom center transparent no-repeat;
  height: 37px;
  width: 180px;
  margin-bottom: 30px;
  margin-left: -15px;
  color: rgba(0, 0, 0, 0.8);
}
#card .form .btnCtn {
  text-align: center;
  width: 100%;
}
#card .form form div {
  position: static;
}
#card .form .ctn {
  *zoom: 1;
}
#card .form .ctn:before,
#card .form .ctn:after {
  display: table;
  content: "";
  line-height: 0;
}
#card .form .ctn:after {
  clear: both;
}
#card .form input {
  width: 154px;
}
#card .form input.small {
  width: 123px;
}
#card .form button {
  position: relative;
  right: auto;
  top: auto;
  display: inline-block;
}
#card .success,
#card .wrong {
  background: url('../img/card/answer-circle.png') center center no-repeat transparent;
}
#card .success img,
#card .wrong img {
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}
#card .success img {
  width: 2000px;
  top: -860px;
  left: -283px;
}
#card .success img.active {
  width: 129px;
  top: 91px;
  left: 65px;
  opacity: 1;
}
#card .wrong img {
  width: 2000px;
  top: -860px;
  left: -283px;
}
#card .wrong img.active {
  width: 129px;
  top: 101px;
  left: 57px;
  opacity: 1;
}
.advanced #card .en-mini {
  background-image: url('../img/card/card-en-mini-advanced.png');
}
.advanced #card .fr-mini {
  background-image: url('../img/card/card-fr-mini-advanced.png');
}
/*
* Button
*/
.btn.btn1 {
  cursor: pointer;
  border: 0;
  display: inline-block;
  position: relative;
  width: 85px;
  height: 85px;
  color: #fff;
  line-height: 85px -2;
  font-size: 18px;
  background: url('../img/btn-start-inactive.png') 0 0 transparent no-repeat;
}
.btn.btn1.active{
  background: url('../img/btn-start.png') 0 0 transparent no-repeat;
}
.btn.btn1.active:focus {
  background: url('../img/btn-start-hover.png') 0 0 transparent no-repeat;
}
.btn.btn1 .asset {
  background: url('../img/asset-register-arrow-inactive.png') 0 0 transparent no-repeat;
  width: 11px;
  height: 33px;
  margin-left: 4px;
  background-size: 11px;
}
.btn.btn1.active .asset {
  background: url('../img/asset-register-arrow.png') 0 0 transparent no-repeat;
}
.btn.btn2 {
  cursor: pointer;
  border: 0;
  display: inline-block;
  margin-top: 10px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 60px -2;
  font-size: 16px;
}
.btn.btn2 .asset {
  background: url('../img/asset-arrow-right-gray.png') 0 0 transparent no-repeat;
  width: 9px;
  height: 27px;
  right: -13px;
  position: absolute;
  top: 20px;
}
.btn.btn3 {
  width: 76px;
  height: 76px;
  display: inline-block;
  background: url('../img/asset-arrow-right-big.png') center center rgba(255, 255, 255, 0.25) no-repeat;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
}
.btn.btn3:focus {
  background-color: rgba(255, 255, 255, 0.5);
}
.btn.btn3.loader {
  background: rgba(255, 255, 255, 0.25);
  padding: 6px 3px 0 3px;
}
.btn.btn3.disabled {
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.btn.btn4 {
  cursor: pointer;
  border: 0;
  display: inline-block;
  margin-top: 10px;
  position: relative;
  background-color: rgba(81, 184, 72, 0.8);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 57px;
  height: 57px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 57px -2;
  font-size: 13px;
  margin: 0 auto;
}
.btn.btn4 .asset {
  background: url('../img/asset-arrow-right-green.png') 0 0 transparent no-repeat;
  width: 9px;
  height: 27px;
  right: -13px;
  position: absolute;
  top: 15px;
}
.no-touch .btn.btn1.active:hover {
  background: url('../img/btn-start-hover.png') 0 0 transparent no-repeat;
}
.no-touch .btn.btn3:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.clear {
  clear: both;
}
.vcenter .item {
  vertical-align: middle;
  display: inline-block;
}
.vcenter .item.empty {
  width: 0;
  height: 100%;
}
/**
* Enter Point
*/
#mobile-enter-point {
  height: 100%;
  width: 100%;
  position: relative;
}
#mobile-enter-point .wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: absolute;
  top: 23%;
  text-align: center;
}
#mobile-enter-point .go-button {
  text-align: center;
  display: inline-block;
  margin-top: 20%;
  z-index: 100;
}
#mobile-enter-point .go-button img {
  margin-top: -65px;
  z-index: 1000;
  width: 130px;
  height: 130px;
}
#mobile-enter-point .wrapper-image {
  width: 100%;
  display: inline-block;
  text-align: center;
}
#mobile-enter-point .wrapper-image img {
  margin-top: 8%;
  height: 30px;
}
#register {
  display: none;
  background: url('../img/bg-ctn.png') repeat-x;
  text-align: center;
  padding: 0 40px 0 40px;
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 55%;
  color: #fff;
  /*
	button{
		.text{
			display:block;
			left: 0;
			line-height: 85px;
			position: absolute;
			top: 0;
			width: 85px;
		}
	}
	*/

}
#register h1 {
  font-size: 21px;
  background: url('../img/asset-register-arrow-down.png') bottom center transparent no-repeat;
  margin-bottom: 20px;
  padding-bottom: 1em;
}
#register form {
  padding-top: 154px;
}
#register .ctn {
  *zoom: 1;
  display: block;
  text-align: left;
}
#register .ctn:before,
#register .ctn:after {
  display: table;
  content: "";
  line-height: 0;
}
#register .ctn:after {
  clear: both;
}

#register .ctn.d .btn-action {
  background: url('../img/dk_arrows.png') 95% center no-repeat rgba(0, 0, 0, 0.6);
}
/**
* Login Popup
*/
#lang-popup {
  position: absolute;
  width: 80%;
  top: 30px;
  background-color: rgba(46, 46, 46, 0.95);
  left: 50%;
  margin-left: -40%;
  top: 50%;
  margin-top: -277px;
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  *zoom: 1;
}
#lang-popup:before,
#lang-popup:after {
  display: table;
  content: "";
  line-height: 0;
}
#lang-popup:after {
  clear: both;
}
#lang-popup a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
#lang-popup a span {
  display: block;
}
#lang-popup a:focus {
  color: #ffffff;
  color: #257F28;
}
#lang-popup a:focus .ori {
  font-size: 18px;
}
#lang-popup a:focus .trad {
  font-size: 14px;
}
#lang-popup .ori {
  font-size: 16px;
  line-height: 20px;
}
#lang-popup .trad {
  font-size: 12px;
  line-height: 14px;
}
#lang-popup ul {
  *zoom: 1;
  padding: 30px 10%;
}
#lang-popup ul:before,
#lang-popup ul:after {
  display: table;
  content: "";
  line-height: 0;
}
#lang-popup ul:after {
  clear: both;
}
#lang-popup li {
  width: 30%;
  float: left;
  display: block;
  border-bottom: 1px solid #c8c8c8;
  padding: 7px 0;
}
#lang-popup li.last {
  border: 0;
}
#lang-popup li.col {
  padding-left: 10%;
}
#lang-popup .btn-close {
  background: url('../img/btn-close.png') center center transparent no-repeat;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  cursor: pointer;
  display: block;
  padding: 10px;
}
.no-touch #lang-popup a:hover {
  color: #ffffff;
  color: #257F28;
}
.no-touch #lang-popup a:hover .ori {
  font-size: 18px;
}
.no-touch #lang-popup a:hover .trad {
  font-size: 14px;
}
.ie .flip .front {
  display: none !important;
}
.ie .flip .back .active {
  display: block !important;
  visibility: visible;
}
.ie .back .active {
  display: none !important;
}
/*----------------------------------
Timer
----------------------------------*/
#timer {
  font-family: open_sansregular;
  padding: 10px 0;
  height: 22px;
  font-size: 29px;
  color: #cbdb2a;
  font-weight: 300;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 0 7px #CBDB2A;
  background-color: #474747;
  line-height: 22px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #494949), color-stop(0.5, #515151), color-stop(0.51, #484848), to(#424242));
  background: -moz-linear-gradient(top, #494949, #515151 50%, #484848 51%, #424242);
  /*border styles*/

  border-top: solid 2px #555;
  border-bottom: solid 2px #111;
  overflow: hidden;
  position: absolute;
  width: 150px;
  top: 35px;
  right: 30px;
  z-index: 25;
}
#timer .text {
  position: absolute;
  left: 5%;
  top: 12px;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
  font-weight: 600;
  line-height: 45px;
}
#timer .shadow {
  height: 200px;
  position: absolute;
  top: -65px;
  left: -4%;
  width: 107%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 70px #000000;
  -moz-box-shadow: inset 0 0 70px #000000;
  box-shadow: inset 0 0 70px #000000;
}
#timer .spotlight {
  background: url('../img/score/spotlight.png') 0 0 no-repeat transparent;
  position: absolute;
  top: -30px;
  right: -3%;
  width: 300px;
  height: 150px;
  display: none;
}
/*----------------------------------
Steps - Number of questions
----------------------------------*/
#steps {
  position: relative;
  margin-top: 2px;
  color: #353535;
  background: #f3f3f3;
  border: 1px solid #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  z-index: 5;
  font-size: 18px;
  text-align: center;
  height: 39px;
}
#steps ul {
  width: 100%;
  position: relative;
  height: 39px;
  overflow: hidden;
}
#steps li {
  display: block;
  position: absolute;
  height: 39px;
  top: 0;
  background-color: #f3f3f3;
  left: -100px;
}
#steps li .number {
  padding-left: 20px;
  line-height: 39px;
}
#steps li.first {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
#steps li.first .number {
  padding-left: 10px;
}
#steps li.last {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
#steps li.last .arrow {
  display: none;
}
#steps li .arrow {
  position: absolute;
  right: -35px;
  top: -1px;
  width: 35px;
  height: 41px;
  background: url('../img/arrow.png') 0 0 transparent no-repeat;
}
#steps li.current {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}
#steps li.current .arrow {
  background-image: url('../img/arrow_actif.png');
}
#steps li.success.current,
#steps li.success {
  background-color: #f3f3f3;
}
#steps li.success.current .number,
#steps li.success .number {
  top: 0;
  text-indent: -77777px;
  background: url('../img/asset-check.png') 56% 7px no-repeat transparent;
}
#steps li.success.current .arrow,
#steps li.success .arrow {
  background-image: url('../img/arrow.png');
}
#steps li.wrong.current,
#steps li.wrong {
  background-color: #f3f3f3;
}
#steps li.wrong.current .number,
#steps li.wrong .number {
  top: 0;
  text-indent: -77777px;
  background: url('../img/asset-wrong.png') 56% 6px no-repeat transparent;
}
#steps li.wrong.current .arrow,
#steps li.wrong .arrow {
  background-image: url('../img/arrow.png');
}
#steps.step_10 li {
  width: 10%;
}
#steps.step_10 li.first {
  width: 9%;
}
#steps.step_10 li.last {
  width: 11%;
}
#steps.step_10 li.last .number {
  padding-left: 10px;
}
/*----------------------------------
Loading bar
----------------------------------*/
#loading {
  height: 13px;
  background: #C8DB34;
  position: relative;
  display: none;
  border-radius: 5px;
  margin: 2px 0;
  z-index: 5;
}
/*----------------------------------
Questions/Answers
----------------------------------*/
#question {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 2px;
  z-index: 5;
}
#question .question,
#question .answer {
  padding: 20px 5%;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#question .question {
  color: #000;
}
#question .answer {
  color: #fff;
}
#question .answer p {
  padding-bottom: 15px;
  display: block;
}
#question .answer.success {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #22ab42;
  background-image: -moz-linear-gradient(top, #00bb3a, #54934e);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00bb3a), to(#54934e));
  background-image: -webkit-linear-gradient(top, #00bb3a, #54934e);
  background-image: -o-linear-gradient(top, #00bb3a, #54934e);
  background-image: linear-gradient(to bottom, #00bb3a, #54934e);
  background-repeat: repeat-x;
  border-color: #54934e #54934e #376133;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
#question .answer.wrong {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #d92d2e;
  background-image: -moz-linear-gradient(top, #ff2525, #a1383c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff2525), to(#a1383c));
  background-image: -webkit-linear-gradient(top, #ff2525, #a1383c);
  background-image: -o-linear-gradient(top, #ff2525, #a1383c);
  background-image: linear-gradient(to bottom, #ff2525, #a1383c);
  background-repeat: repeat-x;
  border-color: #a1383c #a1383c #682427;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
#question .answer.success .btnCtn,
#question .answer.wrong .btnCtn {
  height: 84px;
}
#question .answer.success .q,
#question .answer.wrong .q {
  display: none;
}
#question .answer.success .a,
#question .answer.wrong .a {
  display: block;
}
/*----------------------------------
Answer choices
----------------------------------*/
#choices {
  z-index: 50;
  padding-top: 2px;
}
#choices div {
  position: relative;
  padding-bottom: 2px;
}
#choices a {
  cursor: pointer;
  font-size: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: none;
  text-align: left;
  /*
		position: absolute;
		top: 0;
		left: 0;
		*/

  width: 98.1%;
  background: rgba(0, 0, 0, 0.22);
  padding: 5px 0 5px 2%;
  display: block;
  color: rgba(255, 255, 255, 0.65);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
}
#choices a:focus,
#choices a .active {
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.no-touch #choices a:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
/*----------------------------------
Share button
----------------------------------*/
.share {
  position: absolute;
  bottom: 20px;
  left: 5%;
}
.share li {
  float: left;
}
body.rtl #anim-flip {
  direction: ltr;
}
body.rtl #videoBackground {
  direction: ltr;
}
.container .restart {
  left: 0px;
}
body.rtl #choices a {
  text-align: right;
  padding: 5px 2% 5px 0px;
}
body.rtl .new-quiz-btn {
  padding-right: 17px;
}
body.rtl .new-quiz-btn .ctn {
  padding: 0px;
}
body.rtl .new-quiz-btn img {
  padding: 0px 5px;
}
.score {
  /* form */

}
.score .form .ctn {
  position: relative;
  z-index: 2;
}
.score .form .btnCtn {
  position: absolute;
  top: 151px;
  z-index: 1;
}
.rtl #score .successTotal {
  left: 71px;
}
.rtl #score .questionTotal {
  width: 60px;
  left: 35px;
}
section.score {
  margin-top: 5px;
  height: 115px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
section.score .radialCircle {
  background: white;
  width: 21%;
  height: 30px;
  right: 0;
  border-radius: 50%;
  box-shadow: 0 0 93px 80px white;
  position: absolute;
  top: 38px;
}
section.score div {
  position: absolute;
}
section.score .text {
  font-size: 19px;
  color: rgba(0, 0, 0, 0.7);
  left: 5%;
  top: 42px;
}
section.score .totalCtn {
  left: 120px;
}
section.score .successTotal {
  font-size: 84px;
  color: #51b848;
  width: 90px;
  text-align: right;
}
section.score .questionTotal {
  font-size: 33px;
  color: #616161;
  left: 109px;
  top: 54px;
}
section.score .timer {
  color: rgba(0, 0, 0, 0.7);
  top: 35px;
  left: 340px;
}
section.score .timer .text {
  font-size: 12px;
  display: block;
}
section.score .timer .time {
  color: #51B848;
}
section.worldRank {
  margin-top: 5px;
  padding: 5px 0 5px 5%;
  color: #cbdb2a;
  font-size: 21px;
  background-color: rgba(0, 0, 0, 0.75);
  text-transform: uppercase;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#ranking {
  padding: 10px;
  margin-top: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.3);
}
#ranking table {
  width: 100%;
}
#ranking thead {
  background: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
}
#ranking thead .id {
  width: 4%;
}
#ranking thead .score {
  width: 15%;
  text-align: right;
}
#ranking thead .time {
  width: 15%;
  text-align: center;
  padding-left: 20px;
}
#ranking thead th {
  padding: 0px 5px;
}
#ranking tbody {
  padding-top: 5px;
  color: rgba(255, 255, 255, 0.85);
}
#ranking tbody .id {
  color: rgba(203, 219, 42, 0.85);
}
#ranking tbody .score {
  color: rgba(203, 219, 42, 0.85);
}
#ranking tbody tr:first-child td {
  padding-top: 10px;
}
#ranking tbody td {
  padding: 3px 5px;
}
#ranking,
#yourRank {
  font-size: 14px;
}
#ranking .id,
#yourRank .id {
  width: 10%;
  font-size: 18px;
  text-align: right;
}
#ranking .name,
#yourRank .name,
#ranking .country,
#yourRank .country {
  width: 40%;
}
#ranking .score,
#yourRank .score,
#ranking .time,
#yourRank .time {
  width: 15%;
}
#ranking .country,
#yourRank .country,
#ranking .name,
#yourRank .name {
  text-align: left;
}
#ranking .score,
#yourRank .score {
  text-align: right;
}
#ranking .time,
#yourRank .time {
  text-align: center;
  padding-left: 20px;
}
section.rank {
  margin-top: 5px;
  padding: 5px 0 5px 5%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(203, 219, 42, 0.85);
  color: #000;
}
section.rank span {
  font-weight: 700;
  color: #cbdb2a;
}
section.rank#yourRank {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
}
/*
	.score section.action {
		padding: 0;
	}
	   */
/* Set of call to action at the end of score page */
#actions {
  *zoom: 1;
  padding-top: 5px;
}
#actions:before,
#actions:after {
  display: table;
  content: "";
  line-height: 0;
}
#actions:after {
  clear: both;
}
#actions .action {
  float: left;
}
#actions .action1.ghost,
#actions .action2.ghost,
#actions .action3.ghost {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  height: 80px;
  display: block;
}
#actions .action3.ghost {
  margin-right: 0;
}
#actions .action1 {
  color: #FFF;
  width: 75.5%;
  margin-right: 1%;
}
#actions .action1 .ctn {
  height: 80px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0 2.5%;
  max-height: 100%;
  text-align: center;
}
#actions .action1 p {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  font-size: 22px;
  max-width: 190px;
}
#actions .action1 ul {
  display: inline-block;
  padding: 5px 0 0 0;
  width: 65px;
  font-size: 20px;
}
#actions .action1 li {
  padding-top: 7px;
  float: left;
  padding-left: 10px;
}
#actions .action2,
#actions .action3 {
  width: 23.5%;
  height: 80px;
}
#actions .action2 a,
#actions .action3 a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  height: 80px;
  display: block;
  text-decoration: none;
  text-align: center;
}
#actions .action2 a:focus,
#actions .action3 a:focus {
  background-color: rgba(0, 0, 0, 0.7);
}
#actions .action2 a, #actions .action3 a {
  color: #FFF;
  font-size: 16px;
}
#actions .action2 .ctn, #actions .action3 .ctn {
  height: 100%;
}
#actions .action2 .icon-reset {
  top: 8px;
}
#actions .action2 span.text, #actions .action3 span.text {
  margin-right: 5px;
  width: 100px;
  display: inline-block;
  max-height: 100%;
}
#actions .action3 a .ctn {
  padding-top: 0px;
  z-index: 99999;
  position:relative;
}
.no-touch #actions .action2 a:hover,
.no-touch #actions .action3 a:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
#actions .action3 .youth-ctn .ctn{
  padding-top: 0;
}
#actions .action3 .youth-ctn .text{
  width: 115px;
}

.newQuiz {
  text-decoration: none;
  display: block;
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.newQuiz.v1 {
  width: 200px !important;
  border: 1px solid #dddddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 65px;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.newQuiz.v1 .ctn {
  padding: 9px 7% 0 7%;
}
.newQuiz.v1:focus {
  opacity: 1;
  filter: alpha(opacity=100);
  background-color: rgba(0, 0, 0, 0) !important;
}
.newQuiz.v1:focus .ctn {
  opacity: 1;
  filter: alpha(opacity=100);
}
.newQuiz .ctn {
  opacity: 0.8;
  filter: alpha(opacity=80);
  padding: 15px 7% 0 7%;
}
.newQuiz span {
  position: relative;
  top: 5px;
  margin-left: 5px;
}
.newQuiz li {
  display: inline-block;
}
.newQuiz a {
  color: #fff;
}
.no-touch .newQuiz.v1:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  background-color: rgba(0, 0, 0, 0) !important;
}
.no-touch .newQuiz.v1:hover .ctn {
  opacity: 1;
  filter: alpha(opacity=100);
}
#social-intro,
.new-quiz-btn {
  font-size: 16px;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 60px;
  display: none;
}

.new-quiz-btn {
  background-color:#ffffff;
  color:#6d6d6d;
}

#social-intro a,
.new-quiz-btn a {
  position: absolute;
  top: 0px;
  left: 8px;
}
#social-intro {
  position: absolute;
  width: 230px;
  margin: 0 0 0 -125px;
  left: 50%;
  top: 750px;
}
#social-intro .ctn {
  padding: 5px 7% 0 7%;
}
#social-intro li {
  padding: 0 8px;
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
}
.restart {
  z-index: 999;
  display: none;
  text-align: center;
  padding-top: 5px;
  position: absolute;
  padding-bottom: 20px;
}



#content .restart{
  top:30px;
  left:30px;
}

#content.bigPadding .restart{
  top:90px;
}
.new-quiz-btn {
  /*background:url("../img/icon-reset.png") no-repeat scroll 100px center transparent;*/

  cursor: pointer;
  display: inline-block;
  padding-top: 15px;
  padding-bottom: 15px;
  height: auto;
  padding-right: 26px;
  background-color:#ffffff;
}
.new-quiz-btn .ctn {
  padding: 0 20px;
}
.new-quiz-btn img {
  vertical-align: middle;
}
section.action a.newQuiz.v1 {
  width: 48.5%;
}
.shareCtn {
  text-decoration: none;
  display: block;
  width: 22%;
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.shareCtn.v1 {
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 65px;
}
.shareCtn.v1 .ctn {
  padding: 9px 7% 0 7%;
}
.shareCtn .ctn {
  padding: 15px 7% 0 7%;
}
.shareCtn span {
  position: relative;
  top: 5px;
  margin-left: 5px;
}
.medalCtn {
  position: absolute;
  top: 0;
  right: 10%;
  width: 116px;
  display: none;
}
.medalCtn div {
  position: absolute;
}
.medalCtn .medal {
  top: -347px;
}
.medalCtn .shadow {
  top: 193px;
  left: -18px;
}
/*----------------------------------
Animation
----------------------------------*/
#anim {
  margin-top: 5px;
  background: transparent;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 300px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  width: 689px;
  text-align: center;
}
#anim .anim-step {
  top: 0;
  left: 0;
  height: 1000px;
  display: block;
  position: absolute;
  background: transparent url() left top no-repeat;
}
#anim #anim-outro {
  width: 100%;
  height: 100%;
  z-index: 2;
}
#anim #anim-outro img {
  top: 0;
  left: 0;
  position: absolute;
}
#anim #anim-intro,
#anim #anim-cube,
#anim #anim-next {
  width: 150%;
  height: 200%;
  left: -25%;
  top: -50%;
}
#anim #anim-intro img,
#anim #anim-cube img,
#anim #anim-next img {
  width: 100%;
}
#anim #anim-intro {
  z-index: 4;
}
#anim #anim-cube {
  z-index: 3;
}
#anim #anim-cube .cube {
  height: 300px;
}
#anim #anim-cube .cube .face-intro {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
}
#anim #anim-cube .cube .face-outro {
  top: 0;
  left: 0;
  z-index: 1;
  margin-left: 172px;
}
#anim #anim-cube .cube.spin {
  top: 150px;
}
#anim #anim-next {
  background: #fff;
  z-index: 1;
}
#anim #anim-next .outroWrapper {
  opacity: 0;
  filter: alpha(opacity=0);
}
#anim .wrapper {
  position: relative;
  padding: 0;
}
#anim #timer {
  z-index: 10;
}
#anim-flip {
  top: 25px;
  left: 20px;
  position: absolute;
  display: none;
  z-index: 20;
}
#anim-flip .view-back {
  opacity: 0;
  filter: alpha(opacity=0);
}
#anim-bis {
  top: 25px;
  height: 300px;
  width: 689px;
  position: absolute;
  text-align: center;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  z-index: 9;
}
#anim-bis #anim-next {
  width: 150%;
  height: 200%;
  left: -25%;
  top: -50%;
  display: block;
  position: absolute;
}
#anim-bis #anim-next img {
  width: 100%;
}
#anim-bis #anim-next .wrapper {
  padding: 0;
  position: relative;
}
.bigPadding #anim-flip,
.bigPadding #anim-bis {
  top: 85px;
}
/*------------------------------------------------
 Anim
 ------------------------------------------------
.anim-step {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
	border-radius:5px;
}*/
/*------------------------------------------------
 Anim step 1
 ------------------------------------------------*/
.anim-step-1 {
  display: block;
}
.anim-step-1 img {
  position: absolute;
}
/*------------------------------------------------
 Anim step 2
 ------------------------------------------------*/
#anim-flip {
  overflow: visible !important;
}
#anim-flip .view {
  width: 690px;
  height: 300px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  position: relative;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
}
#anim-flip .view .slice {
  width: 139px;
  height: 100%;
  z-index: 100;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  -moz-transition: -moz-transform 500ms ease-in-out;
  -o-transition: -o-transform 500ms ease-in-out;
  -ms-transition: -ms-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
}
#anim-flip .view .slice.s5 {
  width: 138px;
}
#anim-flip .view .view-back {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
  /*background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
			background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0a0a0a), color-stop(100%, #666666));
			background: -webkit-linear-gradient(left, #0a0a0a 0%, #666666 100%);
			background: -o-linear-gradient(left, #0a0a0a 0%, #666666 100%);
			background: -ms-linear-gradient(left, #0a0a0a 0%, #666666 100%);
			background: linear-gradient(left, #0a0a0a 0%, #666666 100%);    */

}
#anim-flip .view .view-back span {
  display: block;
  float: right;
  padding: 5px 20px 5px;
  width: 100%;
  text-align: right;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
#anim-flip .view .view-back span:first-child {
  padding-top: 20px;
}
#anim-flip .view .view-back span[data-icon]:before {
  content: attr(data-icon);
  font-family: 'icons';
  color: #aaa;
  color: rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
  padding-right: 5px;
}
#anim-flip .view .s2,
#anim-flip .view .s3,
#anim-flip .view .s4,
#anim-flip .view .s5 {
  -webkit-transform: translate3d(138px, 0, 0);
  -moz-transform: translate3d(138px, 0, 0);
  -o-transform: translate3d(138px, 0, 0);
  -ms-transform: translate3d(138px, 0, 0);
  transform: translate3d(138px, 0, 0);
}
#anim-flip .view .s1 {
  background-position: 0px 0px;
}
#anim-flip .view .s2 {
  background-position: -138px 0px;
}
#anim-flip .view .s3 {
  background-position: -276px 0px;
}
#anim-flip .view .s4 {
  background-position: -414px 0px;
}
#anim-flip .view .s4 > .overlay {
  background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
#anim-flip .view .s5 {
  background-position: -552px 0px;
}
#anim-flip .view .s5 > .overlay {
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
#anim-flip .view .overlay {
  width: 138px;
  height: 100%;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  -ms-transition: opacity 500ms ease-in-out;
  transition: opacity 50ms ease-in-out;
}
#anim-flip .view img {
  position: absolute;
  z-index: 0;
  -webkit-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  -moz-transition: left 0.3s ease-in-out;
  -ms-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}
#anim-flip .view.anim .s1 {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  transition-delay: 500ms;
  -webkit-transform: rotate3d(0, 1, 0, -90deg);
  -moz-transform: rotate3d(0, 1, 0, -90deg);
  -o-transform: rotate3d(0, 1, 0, -90deg);
  -ms-transform: rotate3d(0, 1, 0, -90deg);
  transform: rotate3d(0, 1, 0, -90deg);
}
#anim-flip .view.anim .s2 {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
  transition-delay: 400ms;
  -webkit-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -45deg);
  -moz-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -45deg);
  -o-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -45deg);
  -ms-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -45deg);
  transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -45deg);
}
#anim-flip .view.anim .s3 {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  transition-delay: 300ms;
  -webkit-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -moz-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -o-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -ms-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  transform: translate3d(138, 0, 0) rotate3d(0, 1, 0, -20deg);
}
#anim-flip .view.anim .s4 {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  transition-delay: 200ms;
  -webkit-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -moz-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -o-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -ms-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  transform: translate3d(138, 0, 0) rotate3d(0, 1, 0, -20deg);
}
#anim-flip .view.anim .s5 {
  -webkit-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -moz-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -o-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  -ms-transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
  transform: translate3d(138px, 0, 0) rotate3d(0, 1, 0, -20deg);
}
/*------------------------------------------------
 Anim step 3
 ------------------------------------------------*/
.anim-step-3 {
  display: none;
}
.anim-step-3 .anim-ctn {
  position: absolute;
  top: 0;
  left: 0;
}
.anim-step-3 .img-sequence {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
/*------------------------------------------------
 Anim step 4
 ------------------------------------------------*/
.cute-slider {
  position: relative;
}
#my-cute-slider {
  width: 800px;
  height: 200px;
}
#anim-cube {
  display: none;
  overflow: visible;
  *zoom: 1;
}
#anim-cube:before,
#anim-cube:after {
  display: table;
  content: "";
  line-height: 0;
}
#anim-cube:after {
  clear: both;
}
#anim-cube .bg {
  width: 7000px;
  height: 7000px;
  position: absolute;
}
#anim-cube .cube {
  position: relative;
  -webkit-transition: all 400ms linear;
  -webkit-transform: rotateX(0deg);
  -webkit-transform-style: preserve-3d;
}
#anim-cube .cube.spin {
  -webkit-transform: rotateX(-90deg);
}
#anim-cube .cube > div {
  position: absolute;
  width: 690px;
  height: 300px;
}
#anim-cube .cube > div:first-child {
  -webkit-transform: rotateX(90deg) translateZ(150px);
}
#anim-cube .cube > div:nth-child(2) {
  -webkit-transform: translateZ(150px);
}
#anim-cube .cube > div:nth-child(3) {
  width: 74px;
  -webkit-transform: rotateY(90deg) translateZ(-150px);
}
#anim-cube .cube > div:nth-child(4) {
  -webkit-transform: rotateY(180deg) translateZ(150px);
}
#anim-cube .cube > div:nth-child(5) {
  width: 74px;
  -webkit-transform: rotateY(-90deg) translateZ(-443px);
}
#anim-cube .cube > div:nth-child(6) {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
}
.customSelect {
  /* This is the default class that is used */

  /* Put whatever custom styles you want here */

  background: url('../img/dk_arrows.png') 95% center no-repeat rgba(0, 0, 0, 0.6);
  font-size: 13px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 184px;
  text-align: left;
  padding: 5px 11px;
  margin-bottom: 19px;
  line-height: 20px;
  height: 20px;
  font-weight: normal;
  overflow: hidden;
}
select {
  width: 207px;
  margin-bottom: 0;
  height: 24px;
}
.customSelect.customSele gbctHover {
  /* Styles for when the select box is hovered */

}
.customSelect.customSelectOpen {
  /* Styles for when the select box is open */

}
.customSelect.customSelectFocus {
  /* Styles for when the select box is in focus */

}
.customSelectInner {
  /* You can style the inner box too */

}
/**
* Form
*/
label {
  display: none;
  visibility: hidden;
}
input,
.input {
  text-align: left;
  margin-bottom: 19px;
  padding: 5px 11px;
  width: 183px;
  border: 0;
  display: block;
  color: white;
  background: rgba(0, 0, 0, 0.25);
}
input:-moz-placeholder,
.input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input:-ms-input-placeholder,
.input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input::-webkit-input-placeholder,
.input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.input {
  width: 205px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
}
input,
.input {
  font-size: 13px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
#updateForm {
  display: none;
  padding: 15px;
  text-align: center;
}
#updateForm h1 {
  color: #FFF;
  padding-bottom: 5px;
}
#updateForm input {
  width: 50%;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: inline-block;
}
#updateForm .btn.btn4 {
  margin-top: 0;
}
.checkbox-item {
  padding-bottom: 10px;
  text-transform: capitalize;
  font-size: 14px;
  text-align: left;
}
.checkbox-item input {
  width: 15px;
  height: 15px;
  float: left;
}
.checkbox-item label {
  visibility: visible;
  display: inline;
}

@media (min-width: 1900px) {
  
}
/*
@media (min-width: 1000px)  and (max-width: 1070px) {
	.container {
		width: 1000px;
	}
	#content {
		padding: 0 10px;
		width:710px;
	}
}
*/
@media (min-width: 1070px) {
  #timer {
    top: 34px;
  }
  .bigPadding #timer {
    top: 94px;
  }
  .restart {
    top: 550px;
  }
  html.touch #register {
    left: 50%;
    margin-left: -140px;
  }
  html.touch .restart {
    top: 700px;
    left: 50%;
    margin-left: -365px;
  }
  html.touch #content {
    left: 50%;
    margin-left: -365px;
  }
}
@media (min-width: 730px) and (max-width: 1070px) {
  body.rtl #score .successTotal {
    left: 64px;
  }
  body.rtl #score .questionTotal {
    left: 53px;
    top: 45px;
  }
  .container {
    width: 730px;
    margin: 0 auto;
    position: relative;
    height: 100%;
  }
  /*----
  	Welcome animation
  	----*/
  #anim-ctn {
    display: none;
  }
  /*----
  	Register form
  	----*/
  #register {
    left: 50%;
    margin-left: -140px;
    width: auto;
    box-sizing: border-box;
  }
  /*----
  	Card
  	----*/
  /*----
  	Quiz
  	----*/
  #content {
    left: 0;
    right: auto;
  }

}
@media (min-width: 729px) {
  .m {
    display: none !important;
  }
}
@media (max-width: 1069px){
  #choices div{
    padding-bottom: 15px;
  }

  #choices a{
    padding: 10px 0 10px 2%;
  }
}
  @media (max-width: 727px) {
  .d {
    display: none !important;
  }
  .m {
    display: block !important;
  }
  body {
    background-image: none;
    background-color: #b0b0b0;
  }
  body,
  html {
    overflow-x: visible;
  }
  #loader {
    display: none;
  }
  #content {
    background: none;
  }
  .rtl #ranking th.name,
  .rtl #ranking th.country,
  .rtl #ranking th.score {
    width: 100%;
    text-align: right;
  }
  .rtl #ranking td.name,
  .rtl #ranking td.country,
  .rtl #ranking td.score {
    text-align: right;
  }
  .container .restart {
    display: none!important ;
  }
  .rtl #medal .shadow {
    left: 0px;
    right: -15px;
  }
  .rtl #timer {
    right: 0px;
  }
  .rtl #yourRank td.id {
    text-align: center;
  }
  .rtl #yourRank td.name {
    text-align: right;
  }
  .rtl #yourRank td.country {
    text-align: right;
  }
  .rtl #yourRank td.score {
    text-align: right;
  }
  .container {
    width: auto;
  }
  #question {
    z-index: 10;
  }
  #card .shadow {
    left: 50%;
    margin-left: -127.5px;
    display: none !important;
  }
  /* Homepage */
  #social-intro {
    position: relative;
    top: 0;
    width: auto;
    left: 0;
    margin: 0;
    padding: 0;
    opacity: 1;
    margin: 40px 20px 20px 20px;
  }
  #content {
    width: 100%;
    padding: 0;
    left: 0;
    min-height: auto;
    padding: 0 2.5%;
  }
  #actions {
    margin-bottom: 10px;
  }
  #actions::after {
    content: '';
    height: 10px;
    width: 100%;
  }
  #actions .action1 {
    padding-right: 0;
    width: 100%;
    padding-bottom: 5px;
  }
  #actions .action2 {
    padding-right: 2%;
    margin-right: 0;
  }
  #actions .action2,
  #actions .action3 {
    width: 100%;
  }
  #steps {
    font-size: 15px;
  }
  #steps.step_10 li.first,
  #steps.step_10 li.last {
    width: 10%;
  }
  #steps li .number {
    padding-left: 0;
  }
  #steps .arrow {
    display: none !important;
  }
  #register {
    position: relative;
    display: none;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 0;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    color: white;
    background: none;
    padding-top: 30px;
  }
  #register form {
    padding: 0 2.5%;
  }
  #register input,
  #register .input {
    width: 95%;
    text-align: left;
    padding: 8px 11px;
  }
  #register .input {
    width: 99.4%;
  }
  #register select {
    width: 90% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #register .checkbox-item {
    display: inline-block;
    width: 100%;
  }
  #register .checkbox-item #update_checkbox_id {
    width: 10%;
  }
  /* Register form*/
  .customSelect {
    width: 95%;
  }
  /**
  	   * Quiz
  	   */
  .restart {
    position: static;
    top: 0;
    padding-top: 10px;
    width: auto;
  }
  #anim {
    background: none;
    height: auto;
    border-radius: 0;
  }
  #timer {
    height: 52px;
    font-size: 40px;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    line-height: 45px;
  }
  #timer .text {
    font-size: 12px;
  }
  #timer .spotlight {
    right: -15%;
  }
  section#score {
    background-image: url('../img/score/bg-lb-default-head.png');
    background-position: 0% 100%;
    background-repeat: repeat-x;
    background-color: transparent!important;
    width: 100%;
    height: 130px;
  }
  section#score .text {
    font-size: 18px;
    position: absolute;
    left: 20px;
    top: 13px;
    font-family: 'open_sansbold';
    color: #616161;
    text-transform: none;
  }
  section#score .totalCtn {
    position: absolute;
    top: 28px;
    left: 20px;
  }
  section#score .successTotal {
    display: inline;
    font-size: 35px;
    padding-right: 3px;
    position: static;
  }
  section#score .questionTotal {
    font-size: 35px;
    position: static;
    display: inline;
  }
  section#score .timer {
    color: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 20px;
    top: 75px;
  }
  section#score .timer .text {
    font-size: 13.5px;
    position: static;
    font-family: 'open_sansbold';
    color: #616161;
    text-transform: none;
  }
  section#score .timer .time {
    font-size: 19px;
  }
  /* 	#score
  		{
  			width: 100%;
  			height: 130px;
  			.text 
  			{
  				font-size: 18px;
  				left: 20px;
  				top: 8px;
  				position: absolute;
  			}
  			.totalCtn
  			{
  				top: 27px;
  				left: 20px; 
  				position: absolute;
  				.successTotal
  				{
  					font-size: 36px;
  				}
  				.questionTotal
  				{
  					font-size: 36px;
  				}
  			}
  			.timer 
  			{
  				top: 73px;
  				left: 20px;
  				font-size: 12.5px;
  				.text
  				{
  					left: 0px;
  					top: 0px;
  					position: relative;
  				}
  				.time
  				{
  					font-size: 18px;
  				}
  			}
  		}*/
  section.scoreList tbody .id {
    font-size: inherit;
  }
  /**
  	* Stats
  	*/
  #ranking table {
    width: 100%;
    table-layout: fixed;
  }
  #ranking th {
    font-family: 'open_sansbold';
  }
  #ranking th.id {
    width: 10%;
  }
  #ranking th.name {
    padding-top: 10px;
    width: 60%;
    display: inline-block;
    font-size: 1.28em;
  }
  #ranking th.country {
    width: 60%;
    display: inline-block;
  }
  #ranking th.score {
    padding-bottom: 10px;
    width: 60%;
    display: inline-block;
    text-align: left;
  }
  #ranking th.time {
    padding-bottom: 10px;
    vertical-align: bottom;
    width: 20%;
    padding-left: 0px;
    padding-right: 0px;
  }
  #ranking tbody tr:first-child td.id {
    padding-top: 13px;
  }
  #ranking td {
    font-family: 'open_sansbold';
  }
  #ranking td.id {
    width: 10%;
    vertical-align: top;
    font-size: 1.28em;
    font-family: 'open_sansextrabold';
    text-align: center;
  }
  #ranking td.name {
    padding-top: 0px;
    font-size: 1.28em;
    width: 90%;
    display: inline-block;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow: hidden;
    word-wrap: break-word;
  }
  #ranking td.country {
    padding-bottom: 0px;
    padding-top: 0px!important;
    padding-left: 2px;
    width: 70%;
    display: inline-block;
  }
  #ranking td.score {
    padding-top: 0px!important;
    padding-left: 2px;
    text-align: left;
    width: 70%;
    display: inline-block;
    padding-bottom: 15px;
  }
  #ranking td.time {
    width: 20%;
    vertical-align: bottom;
    padding-bottom: 15px;
    padding-left: 0px;
  }
  #yourRank table {
    width: 100%;
    table-layout: fixed;
  }
  #yourRank td {
    font-family: 'open_sansbold';
  }
  #yourRank td.id {
    text-align: center;
    padding-top: 0px;
    width: 20%;
    vertical-align: top;
    font-size: 1.28em;
    font-family: 'open_sansextrabold';
  }
  #yourRank td.name {
    padding-top: 0px;
    width: 100%;
    display: inline-block;
    font-size: 1.28em;
    padding-bottom: 0px;
    overflow: hidden;
    word-wrap: break-word;
  }
  #yourRank td.country {
    width: 60%;
    display: inline-block;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 1px;
  }
  #yourRank td.score {
    padding-top: 0px;
    width: 60%;
    display: inline-block;
    text-align: left;
    padding-left: 1px;
  }
  #yourRank td.time {
    width: 20%;
    vertical-align: bottom;
    padding-left: 0px;
  }
  #action {
    margin-bottom: 10px;
  }
  .medalCtn {
    right: 30px;
  }
  .medalCtn .shadow {
    left: -15px;
    top: 195px;
  }
  .medalCtn .shadow img {
    width: 120px;
  }
  .medalCtn .medal {
    top: -68px;
  }
  .medalCtn .medal img {
    width: 90px;
  }

  .customSelectInner {
    min-width:260px;
  }


}