html,body{
	direction:rtl;
	text-align:right;
    font-size: 16px !important;
}
body, ul{padding: 0;margin: 0;}
body {
    background-image: url(../assets/bg0.jpg);
    background-size: 100% 100%;
}
html, body , *[ng-app] , *[ng-view]{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#game {
    /*box-shadow: 0 0 5px #000;*/
}

#game.square {
    width: 468px;
     height: 468px;
}

#game {
    width: 1444px;
    height: 608px;
}

#game.square {
    width: 680px;
    height: 680px;
}


@media only screen and  (max-width: 1444px) {
    #game {
        width: 1024px;
        height: 408px;
    }

    #game.square {
        width: 480px;
        height: 480px;
    }
}


@media only screen and (max-width: 1024px) {
    #game {
        width: 754px;
        height: 300px;
    }

    #game.square {
        width: 380px;
        height: 380px;
    }
}



.content {
    /*font-size: 2.8vh;*/
}

#game canvas {
    margin: 0 auto;
}

.lifebuoy.disabled{
	opacity: 0.2;
}

.content-object-label
{
	position: absolute;
    z-index: 0;
    height: auto;

    background: rgba(255,255,255,0.8);
    padding: 1%;
    border-radius: 4px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    -ms-transform: translate(-50%,-100%); /* IE 9 */
    -webkit-transform: translate(-50%,-100%); /* Safari */
    transform: translate(-50%,-100%);

}

.content-object-label:after{
    content:"";
    position:absolute;
    top:100%;
    left:51%;
    width: 0;
    height: 0;
    border-top: 10px solid rgba(255,255,255,0.8);
    border-right: 12px solid transparent;

}

.public .hidden_points {
    position: relative !important;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    padding-right: 5vh;
    font-size: 3.5vh;
}

.level, .lives, .percents, .lifebuoy{
	
	
	background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
   
   
    color: #5edeff;
    font-size: 2.6vmin;
    line-height: 7.5vh;
    padding-right: 1vw;
    padding-left: 1vw;
    
}

.bottom-toolbar , .level, .lives, .percents, .lifebuoy , .public .hidden_points {
    max-height: 55px;
    height: 7.5vh;
}

.level{

	 border-bottom-left-radius: 0 !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
}
.level b, .percents b{
	font-size: 3.5vh;
}

.lives{
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    direction: ltr;
}
.lives ul{margin:0;padding:0;}
.lives li{
	display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0px 1px;
    background-image: url(../assets/heart-full.png);
    width: 33px;
    height: 8vh;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.lives li:not(.full){
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}


.percents {
	border-radius: 0 !important;
	text-align: center;
        direction: rtl;
}

@media only screen and (max-height: 728px) {
    .hidden_settings div .circle-timer canvas {
        margin: 0.8vh 0 0 0.2vh;
    }
}

@media only screen and (min-height: 728px) {
    .level, .lives, .percents, .lifebuoy, .hidden_points {
        line-height: 57px !important;
    }

    .lives li {
        max-height: 60px;
    }
}

.lifebuoy{
	border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    background-image: url(../assets/lifebuoy.png);
    background-repeat: no-repeat;
    background-size: auto 66%;
    background-position: center;
    width: 4vw;
    max-width:80px;
    min-width: 50px;
}

.game-intro{
	
	width: 800px;
	background-image: url(../assets/intro-logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 300px;
}

.buttons.bottom {
    top: 100%;
    left: 0%;
    float: left;
    position: absolute;
    width:	100%;
    text-align: center;

}

.buttons button {
	margin: 0 0.5%;
    letter-spacing: 1px;
    min-width: 134px;
    /*height: 44px !important;*/
}

.pink {
	background-color: #ec0f52;
}

.comix .content{
    width: 830px;
    min-height: 530px;
   /* background-color: rgba(235,235,235,1);*/
   background-color: #fff;
}

.comix img {

    width:100%;
    visibility: hidden;
}

.comix .page {
    position: absolute;
    width: 100%;
    height: auto;
     background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    font-weight: bold;
}

.comix .page span {
    position: absolute;
    background-color: #fff9ed;
    border-radius: 20px;
    height: auto;
    padding: 1.6% 2.5%;
    margin: -1% -1% 0 0;
    font-size: 90%;
}

.comix .buttons.bottom{
	top: auto;
	bottom: 2%;
}

.comix .current-page {
	float: right;
    margin: 0 3% 0 -5%;
    color: #ec0f52;
}

.comix .page3{
    
}

.comix  .zoom .buttons, .comix  .zoom .current-page{
    display: none;
}

.comix .zoom {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

   -webkit-perspective: 1500px;
   -moz-perspective: 1500px;
   -ms-perspective: 1500px;
}

.comix  .zoom .page3 {
    
    -webkit-transform: translate(-12%,-6%) translateZ(1500px);
    -moz-transform: translate(-11%,-4%)  translateZ(1500px);
    -ms-transform: translate(-11%,-4%)  translateZ(1500px);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transition: all  1.5s;
    -ms-transition: all  1.5s;
    transition: all  1.5s;

    -webkit-filter: brightness(800%);
    -moz-filter: brightness(800%);
    -o-filter: brightness(800%);
    -ms-filter: brightness(800%);
    filter: brightness(800%);
}

@media only screen and (max-width: 900px) {
    .comix .content{
        width: 720px;
        min-height: 470px;
    }
}

.logo {
	background-image: url(../assets/logo-small.png);
	background-repeat:no-repeat;
	background-position: center center;
	position: absolute;
	background-size: contain;
	top:1.5%;
        z-index: 11;
}

.logo-small{
	width: 10%;
	height:10%;
}

.logo-medium{
	width: 20%;
	height:17%;
}

.logo.left{
	left: 0;
}

.logo.center{
	left: 50%;
}

.logo-small.center{
	margin-left:-5%;
}

.logo-medium.center{
	margin-left:-10%;
}

.game-levels{
	
    height: 100%;

    
}

.game-levels .content {
	background-image: url(../assets/map-bg-silouette.png);
    background-repeat: no-repeat;
    background-position: center;
	position: absolute;
	width: 1010px;
	background-size: cover;
    text-align: center;
    padding: 0.5% 2%;
    height: 430px;
    margin-top: 30px;
}

.game-levels li{
	width: 21%;
	margin: 0% 0.5% 0;
	position: relative;
	display: inline-block;
}

.game-levels li img{
	width: 100%;
}

.game-levels li.bonus:after{
	content: "";
	position:absolute;	
	width: 25%;
	height: 25%;
	background-image: url(../assets/bonus-level-label.png);
	background-size: cover;
	display: block;
	top:10%;
	left:-4%;
	}


.game-levels li button {
    height: auto;
    max-height: 100%;
    border-radius: 0;
    display: inline-block;
    background-color: transparent;
    border: 0;
    padding: 0 0;
    color: #fff;
    position: relative;
    font-size: auto;
    font-weight: bold;
    line-height: auto;
    width: 100%;
    padding-top: 100%;
}

.game-levels li button[disabled]:after{
	content: "";
	position:absolute;	
	width: 36%;
	height: 36%;
	background-image: url(../assets/level-lock.png);
	background-size: contain;
	display: block;
	top:46%;
	left:50%;
	margin-top: -18% ;
	margin-left: -18% ;
	background-position: center center;
	background-repeat: no-repeat;
}

.game-levels li .img {
    background-image: url(../assets/map/map.png);
    background-repeat: no-repeat;
    background-position-x: right;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 200%;
}

.game-levels li.finished .img {
    background-position-x: left;
}

.game-levels li.level0 .img {
    background-position-y: -0.1%;
}

.game-levels li.level1 .img {
    background-position-y: 16.4%;
}

.game-levels li.level2 .img {
    background-position-y: 33%;
}

.game-levels li.level3 .img {
    background-position-y: 49.6%;
}

.game-levels li.level4 .img {
    background-position-y: 66.1%;
}

.game-levels li.level5 .img {
    background-position-y: 82.7%;
}

.game-levels li.level6 .img {
    background-position-y: 99.3%;
}


.game-levels li .level-title {
    position: absolute;
    top: 76%;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

@media only screen and (max-width: 990px) {
    .game-levels .content{
        width: 710px;
        height: 326px;
    }

    .game-levels li .level-title {
         top: 76.5%;
        font-size: 10px;
    }
}

.level-stars {
   width: 46%;
    position: absolute;
    margin-left: -21%;
    height: 19%;
    left: 50%;
    bottom: -7%;
    background-position: 6% top, 50% center, 94% top;
    background-size: 31%;
    background-repeat: no-repeat;
}

.level-stars.zero{
	background-image: 	url(../assets/level-star-empty.png) ,
 						url(../assets/level-star-empty.png) ,
 						url(../assets/level-star-empty.png) ;
}
.level-stars.one{
	background-image: 	url(../assets/level-star-empty.png) ,
 						url(../assets/level-star-empty.png) ,
 						url(../assets/level-star-full.png)  ;
}
.level-stars.two{
	background-image: 	url(../assets/level-star-empty.png) ,
 						url(../assets/level-star-full.png)  ,
 						url(../assets/level-star-full.png)  ;
}
.level-stars.three{
	background-image: 	url(../assets/level-star-full.png)  ,
 						url(../assets/level-star-full.png)  ,
 						url(../assets/level-star-full.png)  ;
}

.instructions .content, .level-feedback .content{
    width: 1100px;
    background-repeat: no-repeat;
    background-position-x: center;
    padding: 0 0 0;
    height: 378px;
    margin-top: 24px;
}

.instructions .content {
    padding-right: 345px;
}

.level-feedback  .content {
    padding-right: 460px;
}

.level-feedback .content:after{
    content:"";
    clear: both;
    display: block;
}

.instructions .content {
	background-image: 	url(../assets/instructions/instructions-title-bg.png),
    url(../assets/instructions/big-silouette-bg.png);
    background-size: auto 18.3%, auto 100%;
    background-position-y: 3%, top;
    padding-top: 12px;
}

.level-feedback .content {
	background-image: 	url(../assets/feedback-title-bg.png),
    url(../assets/instructions/big-silouette-bg.png);
    background-size: auto 26.5%, auto 100%;
    background-position-y: 4%, top;
     padding-top: 9px;
}

.instructions .buttons.bottom , .level-feedback .buttons.bottom{
	top: 103%;
}

.instructions .content > h1 , .level-feedback .content > h1 {
	
    color: #fff;
}

.instructions .content > h1 {
	font-size: 110%;
    letter-spacing: 1px;
    margin-top: 18px;
}

.level-feedback .content > h1 {
    font-size: 150%;
    letter-spacing: 2px;
    white-space: nowrap;
}

.instructions button[disabled] , .level-intro button[disabled], .comix button[disabled] {
	opacity: 0.5;
}

.instructions-content , .level-feedback-content {

}

 .level-feedback-content {
    width: 188px;
 }

 .instructions-content {
    width: 70%; 
    height: 280px;
 }

.instructions .instructions-content h1 {
	color: #ec0f52;
	margin:5% 0 0;
	padding:0;
    font-size: 110%;
}

.instructions .instructions-content p {
	margin: 0;
}

.instructions-content .page1
{
	width: 85%;
}

.instructions-content .page1 img
{
    width: 55%;
    float: left;
    margin-right: 15px;
}

.instructions-buttons {
	    bottom: 14px;
    position: absolute;
}

.instructions-content .page2 img {
    width: 170%;
    margin: -6% -9%;
}

.instructions-content .page2
{
	width:48%;
}

.instructions-content .page3 p
{
	background-image: url(../assets/instructions/instructions3.png);
    background-repeat: no-repeat;
    line-height: 240%;
    background-size: auto 75%;
    display: inline-block;
    padding-left: 16%;
}

.instructions-content .page3 img{
	float: left;
	width: 30%;
}

.instructions-buttons button.small-button{
    margin: 0 -5%;
}

 .comix .buttons button{
    margin: 0 -1%;
 }

button.small-button{
    transform: scale(0.7);
    margin: 0 -2% 0 0;
    font-size: 110%;
    min-width: 0;
}

button[disabled] {
	cursor: auto;
}

.level-intro  {
    width: 430px;
    
}

.level-intro h1 , .question h1 {
    background-color: #ec0f52;
    color: #fff;
    text-align: center;
    border-radius: 8px 7px 0 0;
    padding: 0.5% 1%;
    margin: 0;
    font-size: 120%;
    letter-spacing: 1px;
}

.level-intro .content , .question .content{
    background-color: #fff;
    padding: 4% 4% 10%;
    font-size: inherit;;
}

.level-helpers {
	text-align: center;
}

.level-helper {
	display: inline-block;
	margin: 0 1.5% 1%;
	min-width: 20%;
    line-height: 80%;
}

.level-helpers2 .level-helper {
	/* width: 40%;*/
}

.level-helpers3 .level-helper {
	/*width: 25%;*/
}

.level-helper .img {
	width: 66px;
    height: 60px;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: auto 84px;
    background-position: -10px -11px;
}

.level-helper b {
    color: #fff;
    background-color: #ffa200;
    font-size: 80%;
    padding: 6px 10px;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
    width: 100%;
    display: inline-block;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    letter-spacing: 1px;
    min-width: 118px;
}

.level-disaster b{
	background-color: #ec0f52;
}

.game-victory {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../assets/final-feedback.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    width: 100%;
    height: 100%;
 	text-align: center;
}

.game-victory .content {
    top: 25%;
    width: 300px;
}

.pcenter {
	position: absolute;
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%,-50%); /* IE 9 */
   	-webkit-transform: translate(-50%,-50%); /* Safari */
    transform: translate(-50%,-50%);
}

.game-victory h1 {
   
    color: #ec0f52;
    font-size: 120%;
}

.victory-star {
	display: inline-block;
	background-image: url(../assets/score-star.png);
    background-repeat: no-repeat;
    background-size: contain;
    width:30px;
    height:30px;
    opacity: 0.5;
}

.victory-star.ok {
	opacity: 1;
}

.total-points , .use-help-button{    
    display: inline-block;
    background-color: #ec0f52;
    border-radius: 10px;
    background-image: url(../assets/white-star-on-grey.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    padding: 1% 24% 1% 0;
    border: 5px solid #ec0f52;
    color: #fff;
    white-space: nowrap;
    font-size: 90%;
    text-align: center;
    margin-top: 3%;
}

.total-points b {
	font-size: 180%;
    line-height: 80%;
    letter-spacing: 2px;
}

.game-victory .total-points ,  .game-victory .use-help-button {
	width: 70%;
}

.total-points img {
	float: right;
}

.game-victory .buttons {
	top: auto;
	bottom: 5%;
}

.orange {
	background-color: #ffa200;
}

.blue {
    background-color: #5ed7ff;
}

button.replay:after {
    background-image: url(../assets/restart.png);
    background-size:80%;
    background-position: center;
}

.level-feedback .victory-star {
	vertical-align: middle;
    transform: scale(1.4) translateY(-1px);
}

.level-feedback .total-points , .level-feedback .use-help-button {
	width: 188px;
}

.level-feedback p {
    margin: 0 0 6px 0;
    text-align: center;
}

.level-points {
	background-image: url(../assets/white-stars-on-grey.png);
}

.use-help-button {
    text-align: initial;
    padding-right: 33%;
    background-color: transparent;
    border-color: transparent;
    color: #333;
    background-image: url(../assets/green-lifebouy-on-grey.png);
    cursor: pointer;
        line-height: 150%;
}

.answer {
    display: flex;
    margin: 0 0 2%;
    position: relative;
}

.answer:not(.correct):not(.incorrect){
    cursor: pointer; 
}

.question {
    width: 410px;
    overflow: hidden;
}

.question.help h1:before {
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    float: right;
    background-image: url(../assets/lifebuoy-white.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 1px 0 0 0;
}

.question .answer .img
{
    height: 110px;
    width: 256px;
	background-image: url(../assets/questions.png);
	background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    background-color: #eee;
    border-radius: 8px;
    margin: -5% -12% -5% -10%;
    transform: scale(0.6,0.6);
    
}

.question .answer .img:before{
    content:"";
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top:-4px;
    right:-4px;
    background-color: #fff;
    border: 4px solid #fff;
    transform: scale(2.1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.question .answer.correct .img:before{
    display: block;
    background-color: #50bc07;
        background-image: url(../assets/small-y.png);
}

.question .answer.incorrect .img:before{
    display: block;
    background-color: #ec0f52;
         background-image: url(../assets/small-x.png);
}

.question .answer input {
    display: none;
}

.question .answer:hover .img, .question .answer.active .img{
    background-color: #ffa200;
}

.question .answer .answer-text{
    display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  z-index:1;
}

.buttons.grey-bottom-buttons {
    background-color: #eee;
    padding: 2% 3% 2% 0 ;
    top: auto;
    position: relative;
    text-align: right;
}

.grey-bottom-buttons button {
    float: left;

}

.question .question-feedback {
    display: flex;
    font-size: 80%;
    line-height: 0.8;
        text-align: right;
    /*    justify-content: center;
    flex-direction: column;*/
}

.game-victory , .question {
    z-index: 10;
}

/*
.question:before {
    content: "";
    position: absolute;
    background-color: rgba(255,255,255,0.4);
    z-index: -1;
    width: 100%;
    height:100%;
    transform: scale(5,3);
}
*/
.question.only-true-false .img {
    display: none;
}

.question.only-true-false .answer {
    display: inline-block;
    text-align: center;
    width: 46%;
    margin: 0 2%;
    color: #fff;
    padding: 4%;
    border-radius: 6px;
    font-weight: bold;
    font-size: 110%;
    position: relative;
}

.question.only-true-false .answer .answer-text {
    display: inline;
}

.question.only-true-false .answer0 {
     background-color: #50bc07; 
}

.question.only-true-false .answer:before {
    vertical-align: -webkit-baseline-middle;
}

.question.only-true-false .answer0:before{
    content: url(../assets/small-y.png)
}

.question.only-true-false .answer1 {
     background-color: #ec0f52;
}

.question.only-true-false .answer1:before{
    content: url(../assets/small-x.png)
}

.answer:not(.correct):not(.incorrect):after{
  content:"";
  display: none;
}

.answer.active:not(.correct):not(.incorrect):after{
    
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: absolute;
     top:-10px;
    right:-10px;
   
    background-color: #fff;
    border: 4px solid #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../assets/eye.png);
}

.question.only-true-false .active:not(.correct):not(.incorrect).answer0:after{
    display: block;
    top:-10px;
    left:-10px;
    right: auto;

    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.question.only-true-false .active:not(.correct):not(.incorrect).answer1:after{
    display: block;
    top:-10px;
    right:-10px;
}

button.info:after {
    background-position: 72.7% 26%;
    background-color: #fff;
    box-shadow: inset 0 0 0px 5px #000;
}

.hidden_settings .question-mark {
    height: 60%;
    position: absolute;
    top: 50%;
    margin-top: -30%;
    width: 40%;
    left: 50%;
    margin-left: -20%;
}

.hidden_settings div > a, .hidden_settings div > .circle-timer {
    height: 100%;
}

.timer-option {
    margin-right: -8px;
    font-weight: bold;
    display: block;
    top: 50%;
    transform: scale(0.9) translateY(-50%);
    position: absolute;
}

.timer-option .sandclock{
    vertical-align: middle;
}

.timer-option .checkbox , .timer-option .checkbox:after , .timer-option .checkbox.active:after{
    -webkit-transition: all linear 0.4s;
    transition: all linear 0.4s;
}

.level-helper.curious .img{
    background-size: auto 70px;
    background-position: -5px -5px;
}

.game-levels #hero {
    position: absolute;
    background-image: url(../assets/shkafkafit.png);
    background-repeat: no-repeat;
    background-size:  100% auto;
    width: 60px;
    height: 100px;
    background-position: center;
    right: 47%;
    top: -0;

    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.game-levels #hero.at0 {
    right: 15%;
    top: 17%;
}

.game-levels #hero.at1 {
    right: 37%;
    top: 17%;
}

.game-levels #hero.at2 {
    right: 57%;
    top: 17%;
}

.game-levels #hero.at3 {
    right: 78%;
    top: 17%;
}

.game-levels #hero.at4 {
    right: 26%;
    top: 66%;
}

.game-levels #hero.at5 {
    right: 47%;
    top: 66%;
}

.game-levels #hero.at6 {
    right: 68%;
    top: 66%;
}

.preloader {
    width: 76%;
    height: 10px;
    position: absolute;
    bottom: -10%;
    left: 50%;
    margin-left: -38%;
    background-color: rgba(0,0,0,0.7);

}

.preloader .pas {
    display: block;
    position: absolute;
    left: 0;
    top:0;
    width:0;
    height: 100%;
    -webkit-transition: width 0.2s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    -ms-transition: width 0.2s ease-in-out;
    -o-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
}

.preloader , .preloader .pas {
     border-radius: 10px;   
}

.preloader .title {
    position: absolute;
    top: -27px;
    font-size: 11px;
    color: #fff;
    padding: 2px 1px;
    letter-spacing: 1px;
    width: 30px;
    margin-left: -16px;
    left: 0;
    text-align: center;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    -webkit-transition: left 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out;
    -ms-transition: left 0.2s ease-in-out;
    -o-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
}

.preloader .title:after{
    content:"";
    position:absolute;
    top:100%;
    left:10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #ec0f52 transparent transparent transparent;
    
}

.sound_panel{
    z-index:5 !important;
}

.instructions-button {
    left: 14vh;
        text-align: center;
}

.instructions-button .question-mark {
    top: 50%;
    position: relative;
    height: 60%;
    margin-top: -60%;
}

.correct-answer-feedback {
    position: absolute;
    top:100%;
    left: 0%;
    width: 100%;
    text-align: center;
    background-color: #000;
    color: #fff;
    padding: 10px 0;
    opacity:1;
    pointer-events: none;
    font-size: 140%;
        
}

.correct-answer-feedback.show {
    top:60%;
    opacity: 0;
    -webkit-transition: all ease-out 4s;
    transition: all ease-out 4s;
}

.correct-answer-feedback b {
    direction: ltr;
    color: #ffa200;
    text-shadow:   0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
    letter-spacing: 1px;
    font-size: 120%;
}

.correct-answer-feedback:after {
    background-position: 99% 26%;
    content: "";
    width: 50px;
    height: 35px;
    vertical-align: middle;
}

.correct-answer-feedback.show > * , .correct-answer-feedback.show:after {
    -webkit-transition: transform ease-out 3s;
    transition: transform ease-out 3s;
}

.correct-answer-feedback.show > * {
    transform: scale(1.1);
}

.correct-answer-feedback.show:after {
    transform: scale(1.4)  rotate(-60deg) translateY(-10px);
}

.correct-answer-feedback i {
    font-style: normal;
}

.correct-answer-feedback > * {
    margin: 0 5px;
    display: inline-block;
}

.sound_panel span.active:before {
    opacity: 1;
}

.bottom-toolbar {
    bottom: 2vh;
}

.top-toolbar {
    top: -1vh;
}

.bottom-toolbar , .top-toolbar {
    position: absolute;
    
    width: 100%;
    direction: ltr;
    text-align: center;
}

.bottom-toolbar > * , .top-toolbar > * {
    display: inline-block;
        vertical-align: middle;
}

.instructions .buttons {
    text-align: left;
}

.instructions .buttons .back{
    left: 18%;
}

.animate-show {
    opacity: 1;
}

.animate-show {
    -webkit-transition: opacity linear 0.4s;
    transition: opacity linear 0.4s;
}

.animate-show.ng-hide {
    opacity: 0;
}