@import url("https://fonts.googleapis.com/css?family=Comfortaa");
@font-face {
  font-family: "Bull";
  src: url("../fonts/Bull-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Bull-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Bull-Regular.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Bull-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Bull-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Bull-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Bull-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Bull";
  src: url("../fonts/Bull-Bold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Bull-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Bull-Bold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Bull-Bold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Bull-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Bull-Bold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Bull-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700;
  font-style: normal;
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
    -webkit-tap-highlight-color: transparent;
}
html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
  font-family: 'Bull',Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color:#ffffff;
  background-color: rgba(0,29,60,1);
}

#container {
  width: 100%;
  height: 100%;
  position:relative;
  opacity:0;
  transition: all 0.1s linear;
}

#container.ready,#container.playing,#container.ended{
    opacity:1;
}


.board-wrapper{
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 60px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 2px solid #ffffff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s linear;
    z-index: 12;
    opacity: 1;
}

#container.playing .board-wrapper{
    opacity:0;
    z-index:-1;
}

.board-wrapper:hover{
    cursor: pointer;
}
.board-wrapper:active{
    transform:translateX(-50%) scale(0.9);
}

.board{
    height:30px;
    width:40px;
    display:flex;
    align-items: flex-end;
    justify-content: center;
    transition: all 0.2s linear;
}

.board span{
    flex:1;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: #ffffff;
    border-radius: 4px 4px 0 0;
    margin:1px;
}

.board span:nth-child(1){
    height:50%;
}

.board span:nth-child(2){
    height:100%;
}

.board span:nth-child(3){
    height:80%;
}

#container #game {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#container .game-over-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.66);
  opacity:0;
  transition: all 0.2s linear;
  z-index: -1;
  display:flex;
  justify-content: center;
  align-items: center;
}

#container .game-over-popup .game-over-content{
    position: absolute;
    border-radius:20px;
    transition: all 0.2s linear;
    background-color:#ffffff;
    width:80%;
    max-width:700px;
    height: auto;
    transform: translateY(100vh);
    transition-delay: 0.3s;
    padding:40px 15px;
    color:#001D3C;

}
#container .game-over-popup .game-over-content .game-over-content-wrap{
    overflow:auto;
    max-height: 80vh;
    padding: 30px 20px 0;
}
.game-over-content p{
    color:#001D3C;
    text-align: center;
    padding:30px 0 0 0;
    margin:0;
}

.podium{
    height:150px;
    width:100%;
    display:flex;
    align-items: flex-end;
    overflow: hidden;
}

.p-badge,.p-score,.p-stat{
    display:flex;
    align-items: center;
    justify-content: center;
    flex:1;
    text-align: center;
    color:#ffffff;
}
.p-badge{
    height:80%;
    background-color:#AC022D;
}

.p-badge img{
    max-width: 80%;
    width:70px;
}

.p-score{
    height:100%;
    background-color:#DB0B41;
    font-weight: bold;
    font-size:17px;
}

.p-score h4{
    margin:5px 0;
}

.p-stat{
    height:70%;
    background-color:#AC022D;
    flex:1;
}

.p-badge .levels{
    display:flex;
    justify-content: center;
}
.p-badge .levels .level{
    display:none;
    text-align: center;
}

.p-badge .levels .level.activel{
    display:block;
}

.game-over-content .replay{
    width:100%;
    padding:30px 0 0 0;
    text-align: center;
    font-weight: bold;
}


.game-over-content .replay img{
    vertical-align: middle;
    margin-right:5px;
    margin-top:-4px;
}

.nocookie #container.ended .game-over-popup{
    opacity:1;
    z-index: 13;
}
.nocookie #container.ended .game-over-popup .game-over-content{
    transform: translateY(0);
}

#container.ended .game-over-popup.close{
    opacity:0;
    z-index: -1;
}

#container.ended .game-over-popup.close .game-over-content{
    transform: translateY(100vh);
}

#container .game-ready {
  position: absolute;
  top: 20vh;
  left: 0;
  width:100%;
  text-align: center;
  padding:0 30px;
}

#container .game-ready-instructions{
    position: absolute;
    text-align: center;
    top: calc(50vh + 20px);
    width: 100%;
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
    opacity: 0;
    -webkit-transform: translatey(-50px);
            transform: translatey(-50px);
    background-color: transparent;
    cursor:default;
}

#container.ready .game-ready-instructions{
  opacity: 1;
  -webkit-transform: translatey(0);
          transform: translatey(0);
}

#container .game-ready-instructions p{
    margin:0;
    padding:5px 0;
}

#container .game-ready h1, #container .game-ready h2 {
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
  opacity: 0;
  -webkit-transform: translatey(-50px);
          transform: translatey(-50px);
  background-color: transparent;
  cursor:default;
}
#container #instructions {
  position: absolute;
  width: 100%;
  top: 20vh;
  left: 0;
  text-align: center;
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
  opacity: 0;
}

#container #instructions p{
        font-size:13px;
        line-height: 14px;
}
#container #instructions.hide {
  opacity: 0 !important;
}

#container #score-boost-instructions {
  position: absolute;
  width: 100%;
  top: 5px;
  left: 0;
  text-align: center;
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
  opacity: 0;
  z-index:9;
  font-size: 30px;
}

#container #score-boost-instructions.show{
    /*opacity: 1;*/
}

#container.playing #score, #container.resetting #score {
  -webkit-transform: translatey(0) scale(1);
          transform: translatey(0) scale(1);
}
#container.playing #instructions {
  opacity: 1;
}
#container.ready .game-ready h1, #container.ready .game-ready h2{
  opacity: 1;
  -webkit-transform: translatey(0);
          transform: translatey(0);
}
#container.ended #score {
  -webkit-transform: translatey(0px) scale(1);
          transform: translatey(0px) scale(1);
}


#top-bar{
    position: absolute;
    width:100%;
    padding:30px;
    z-index:1;
    display:flex;
    box-sizing: border-box;
    align-items: center;
    opacity:0;
    transition: all 0.2s linear;
}

#container.playing #top-bar{
    opacity:1;
}

#top-bar .levels {
    flex:1;
    display:flex;
}

#top-bar .levels .level{
    width:180px;
    opacity:0;
    position:absolute;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    transition: all 0.3s ease;
    /*-webkit-transform: translatey(-200px) scale(1);
            transform: translatey(-200px) scale(1);*/
    /*-webkit-transform: translate(calc(50vw - 106px), 15vh) scale(1);
            transform: translate(calc(50vw - 106px), 15vh) scale(1);*/
    transform: translateX(-50%) scale(0.5);
    top:80px;
    left: 50%;
    text-align: center;
}

#top-bar .levels .level.initial,
#top-bar .levels .level.activel.initial{
    -webkit-transition:none;
    transition:none;
    width: 80px;
    top: 0;
    left: 0;
    transform: translateX(0%) scale(1);
    /*-webkit-transform: translatey(-200px) scale(1);
            transform: translatey(-200px) scale(1);*/
    opacity:1;
    /*-webkit-transform: translatex(-30px) translatey(-80px) scale(0.6);
            transform: translatex(-30px) translatey(-80px) scale(0.6);*/
}

#top-bar .levels .level.initial h3{
    opacity:0;
    font-size: 12px;
}


#top-bar .levels .level h3{
    opacity: 1;
    margin:0;
    padding: 0 0 15px;
    font-size: 18px;
    -webkit-transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
}

#top-bar .levels .level h4{
    margin:0;
    padding: 15px 0 0;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;

    -webkit-transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
}

#top-bar .levels .level h4 span{
    display: block;
}

#container.ended .levels .level h3{
    display: none;
}

#container.ended .levels .level h4{
    display: none;
}

#top-bar .levels .level img{
    max-width: 100px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;

    -webkit-transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
}

#top-bar .levels .level.activel{
    opacity:1;
    transform: translateX(-50%) scale(1);
    /*-webkit-transform: translatex(-30px) translatey(-80px) scale(0.6);
            transform: translatex(-30px) translatey(-80px) scale(0.6);*/
}

#top-bar .levels .level.animateActivel{
    width: 110px;
    top: 0;
    left: 0;
    transform: translateX(0%) scale(1);

    -webkit-transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    transition: all 0.5s cubic-bezier(0, 0.8, 0.5, 1) 0.3s;
    /*-webkit-transform: translatex(-30px) translatey(-80px) scale(0.6);
            transform: translatex(-30px) translatey(-80px) scale(0.6);*/
}

#top-bar .levels .level.animateActivel img,
#top-bar .levels .level.initial img{
    max-width: 50px;
}
#top-bar .levels .level.animateActivel h4,
#top-bar .levels .level.initial h4{
    font-size: 12px;
    padding: 8px 0 0;
}

#top-bar .levels .level.animateActivel h3{
    opacity:0;
    font-size: 12px;
    padding: 0;
}
.cookie #container.ended #top-bar{
    display:none;
}


#container #score {
  text-align: right;
  font-size: 7vh;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-transform: translatey(-200px) scale(1);
          transform: translatey(-200px) scale(1);
}

#score-boost{
    opacity:0;
    transition: all 0.3s linear;
    padding-right: 15px;
    bottom: 3px;
    position: relative;
}

#score-boost img{
    width:16px;
    vertical-align: middle;
}

#score-boost.active{
    opacity: 1;
}

.game-over{
    position:absolute;
    width:100%;
    height:100%;
    z-index: -1;
    top:0;
    text-align: center;
    opacity:0;
    transition: all 0.2s linear;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding:70px 0 120px 0;
}

.b-s-container img{
    max-width: 100%;
}

.game-over h4,.game-over .score{
    font-size: 40px;
    margin:15px 0;
    font-weight: bold;
}

.game-over .replay{
    color: #ffffff;
	padding: 15px 0;
	display: block;
	cursor: pointer;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	width: 200px;
	border-radius: 30px;
    margin: 0 auto;
    transition: all 0.1s linear;
    border:2px solid #ffffff;
    opacity: 1;
}

.start-game{
    color: #ffffff;
	padding: 15px 0;
	display: block;
	cursor: pointer;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	width: 200px;
	border-radius: 30px;
    transition: all 0.1s linear;
    border:2px solid #ffffff;
    opacity: 0;
    z-index: -1;
    position: absolute;
    left:50%;
    bottom:120px;
    transform: translateX(-50%);
}

.start-game:active{
    transform: translateX(-50%) scale(0.9);
}

#container.ready .start-game{
    opacity:1;
    z-index: 10;
}

.game-over .replay img{
    margin-right:5px;
    margin-bottom:-3px;
}

.game-over .replay:active{
    cursor: pointer;
    opacity: 0.8;
    transform: scale(0.9);
}

.game-over .levels{
    display:flex;
    align-items: center;
    justify-content: center;
}
.game-over .levels .level{
    display:none;
    width:50%;
}
.game-over .levels .level.activel{
    display:block;
}
.cookie #container.ended .game-over{
    opacity:1;
    z-index:11;
}

.rbmform-form{
    width: 100%;
    position: relative;
    padding: 20px 0;
    transition: all 0.2s linear;
    opacity: 1;
}
.rbmform-container{
    position: relative;
}
.input-wrap {
	position: relative;
	width: 100%;
	padding: 15px 0;
	text-align: center;
}
.input-wrap .inp {
	display: block;
	border: 1px solid #E6E6E6;
	background: none;
	width: 100%;
	padding: 10px;
	height: 50px;
    border-radius: 15px;
    text-align: center;

}

.input-wrap .inp:focus{
    outline: none;
}
.input-wrap .inp-label {
	font-size: 16px;
	display: block;
    cursor: pointer;
    padding: 0 0 15px;
}
.submit-wrap{
    padding: 20px 0 0;
}
.submit-wrap .inp-sub {
	color: #ffffff;
	padding: 15px 0;
	display: block;
	cursor: pointer;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	background: #DB0B41;
	width: 100%;
	border-radius: 15px;
    margin: 0 auto;
    transition: all 0.2s linear;
}

.submit-wrap .inp-sub:hover{
    cursor: pointer;
    opacity:0.8;
}

.label-terms{
	color: #001D3C;
	text-decoration: none;
	font-size: 13px;
}
.err {
	font-size: 12px;
	color: red;
	display: none;
	position: absolute;
	border: 0;
	width: 100%;
    left:50%;
	padding: 5px 0;
    transform: translateX(-50%);
}

.thanku_content {
	text-align: center;
	padding: 15px 15px;
	font-size: 16px;
}

.rbmform-form.hide{
    opacity: 0;
}
.rbmform-thanku {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

.rbmform-thanku .thanku_content {
	position: relative;
    font-size: 22px;
}


.score-board{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,29,60,0.8);
    transition: all 0.2s linear;
    z-index:-1;
    opacity:0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.score-board.show{
    opacity:1;
    z-index: 13;
}

.score-board .replay{
    display:none;
}

.score-board-content{
    width:100%;
    height:100%;
    position: fixed;
    max-width:800px;
    transform: translateY(100%);
    transition: all 0.2s linear;
    transition-delay: 0.2s;
    overflow:hidden;
}


.score-board .replay{
    display:none;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.score-board.after-submit .replay{
    display:block;
}

.close-score-board{
    font-size:50px;
    position: absolute;
    top:5px;
    left:50%;
    color:#cccccc;
    transform: translateX(-50%);
    cursor:pointer;
}
.score-board.after-submit .close-score-board{
    display:none;
}
.close-score-board:active{
    transform: translateX(-50%) scale(0.9);
}
.score-board.loaded .score-board-content{
    transform: translateY(0);
}

.score-board-content .your-score{
    height:35%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 30px 0 30px;
}

.score-board-content .other-scores{
    background-color: #ffffff;
    color:#001D3C;
    height:65%;
    overflow-y:scroll;
    position: relative;
    padding: 0 0 50px;
}

.score-board-content .week-number{
    padding:15px 0;
    background-color:#ffffff;
    box-shadow: 0 7px 11px -2px rgba(0,0,0,0.16);
    text-align: center;
    width:100%;
    position: sticky;
    top:0;
}

.score-board-content .reset-score{
    padding:15px 0;
    text-align: center;
    width:100%;
    position: fixed;
    bottom:0;
    background-color: rgba(0,29,60,1);
    box-shadow: 7px 0 11px -2px rgba(0,0,0,0.16);
    color:#ffffff;
    font-size:15px;
}

.score-board-content .reset-score img{
    margin-bottom:-2px;
    margin-right:3px;
}

.all-scores{
    width:100%;
    padding:0;
    margin:0;
    list-style-type: none;
}

.all-scores li{
    display:flex;
    padding:15px;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 29, 60, 0.1);
}

.all-scores li.highlight{
    background-color: rgba(0, 29, 60, 1) !important;
    color:#ffffff;
}

.all-scores li:nth-child(2n){
    background-color:#ffffff;
}

.all-scores li span{
    flex:1;
}
.all-scores span:nth-child(3){
    flex:4;
    text-align: left;
}
.all-scores li img{
    width:25px;
}


.restart-game{
    display:none;
    position: absolute;
    bottom:15px;
    left:15px;
    transition: all 0.1s linear;
}

.restart-game:active{
    transform: scale(0.9);
}

.restart-game-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,29,60,0.8);
    transition: all 0.2s linear;
    z-index:-1;
    opacity:0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.restart-game-popup.show{
    opacity:1;
    z-index: 13;
}


#container.playing .restart-game{
    display:block;
}

.restart-game-popup .restart-game-popup-content{
    text-align: center;
}

.button{
    color: #ffffff;
    padding: 15px 0;
    display: block;
    cursor: pointer;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    border-radius: 30px;
    transition: all 0.1s linear;
    border: 2px solid #ffffff;
    margin-left:10px;margin-right:10px;
    display: inline-block;
}

.button:active{
    transform: scale(0.9);
}

.general-loading{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,29,60,0.8);
    transition: all 0.2s linear;
    z-index:-1;
    opacity:0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.general-loading.show{
    opacity:1;
    z-index: 13;
}

.general-loading .circle-loader{
    display:block;
}

/**loader**/

/**===== circle2 =====*/
.circle-loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin: -25px 0 0 -25px;
  border: 4px #001D3C solid;
  border-top: 4px #BC0433 solid;
  border-radius: 50%;
  -webkit-animation: spin2 1s infinite linear;
          animation: spin2 1s infinite linear;
  display:none;
}

.score-board.loading .circle-loader{
    display:block;
}


@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
/** END of circle2 */
/**loader**/