@charset "iso-8859-1";
/* CSS Document */


/*Navigation*/
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

body, html{height: 100%;background-color: #f8f8f8;}

html{
font-family: 'Work Sans', sans-serif;
}
img{
	max-width:100%;
	max-height:100%;
}
.navbar-fixed-top{
	top:0px;
	left:0;
	width:100%;
	margin:0;
	position:absolute;
	height:60px;
	display: flex;
}

.main-nav{
  background-color:#657f84;
}
.navbar-header{
		width:1024px;
		display: flex;
		margin:0 auto;
		align-items: center;
}
.navbar-brand{
	display: flex;
	font-size:24px;
	background-image:url(../i/nk-logo.png);
	background-size:20%;
	background-repeat:no-repeat;
	height: 100%;
	align-items: center;
	}

a.navbar-brand{
	text-decoration:none;
	color:#f9f5cb;
}

.nav_bread_butter{
	font-size: 19px;
	margin-left: auto;
	display: flex;
}

.nav_bread_butter i{
	font-size: 25px;
	margin-right: 10px;
}

.nav_bread_butter a{
	color:#fff;
	text-decoration:none;
	display: flex;
	align-items: center;
	margin-right: 20px;
}

.nav_bread_butter a:hover{
  color:#f9f5cb;
}

#instruktion-bt{
	display:flex;
	align-items:center;
}
#instruktion-bt:hover{
	cursor: pointer;
}
.wrapp-box-nav{
	display:flex;
	height:100%;
}

.cover-wrapper{
	width: 520px;
	display:flex;
	margin: auto;
	height: 360px;
	justify-content: space-between;
}

.cover{
	width: 253px;
	border: 5px solid white;
	box-shadow: 0px 0px 7px #0000004d;
	background-size: 100%;
	background-repeat:no-repeat;
	background-position: 50%;
	cursor:pointer;
	transition:all 0.2s ease
}

.cover:hover{
	background-size:105%;
}

.cover-wrapper .cover:nth-child(1){
	background-image:url('/i/50-kr-omslag.jpg');
}

.cover-wrapper  .cover:nth-child(2){
	background-image:url('/i/100-kr-omslag.jpg');
}
.bgbook1 {
	background-image:url('/i/50-kr-omslag.jpg');
	background-repeat:no-repeat;
	background-position:26% 0;
	background-size:15%

 }

.bgbook2 {
	background-image:url('/i/100-kr-omslag.jpg');
	background-repeat:no-repeat;
	background-position:26% 0;
	background-size:15%

 }

.exer-wrapp{
	width: 1080px;
	margin:22% auto;
	padding:20px;
	flex-direction: column;
}

.book1{
	background-color :#f8963c
}


.book2{
	background-color:#95a0a2;
}

.exer-wrapp .exercise{
	width:100%;
	float:left;
	margin:5px;
	padding:10px;
	box-shadow: 0px 0px 7px #0000004d;
	color: #222;
	cursor: pointer;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	border: 1px solid #fff;
	transition:all 0.2s ease;
	line-height:25px;
	text-align:left;

}

.missing_type{display:none}



.exer-wrapp .exercise:hover{
 box-shadow: 0px 0px 12px #000000ab;
}

.exer-wrapp .exercise:last-child{
	margin-bottom:0px;
}


/*MONEY SIZE*/

.money-1{
	width:76px;
	height:76px
}
.money-2{
	width:91px;
	height:91px
}

.money-5{
	width:96px;
	height:96px;
}
.money-10{
	margin-top:20px;
	width:81px;
	height:81px
}
.money-20{
	width:249px;
	height:136px;
	max-height:none;
	max-width:none!important;
}
.money-50{
	width:268px;
	height:136px;
	max-height:none;
	max-width:none!important;
}
.money-100{height: 136px;width: 268px;max-width: none!important;}


.exerciseid10 .money-50{
	width:auto;
	height:auto;

}

.exerciseid18 .money-100{
	width:auto;
	height:auto;

}
.exerciseid73 .money-20{
	width:auto;
	height:auto;

}
.marked{
	outline: 6px solid #66f766!important;
}

#instruktionsdiv{
	top:60px;
	left:0;
	width:100%;
	margin:0;
	position:absolute;
	background-color:#d7dedf;


}

#inner-instrk-div{
	width: 1002px;
	height:48px;
	margin:0 auto;
	display: flex;
}
/*Reward star*/

#reward-star-wrapp{
	float:left;
	display: flex;
	align-items: center;
}

#reward-cover-wrapper{	
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ffffffd9;
	z-index: 999;
	display:flex;

}

.reward-star{
	width: 100px;
	height: 100px;
	background-image: url('/i/rewardstar.svg');
	background-size: contain;
	background-position:50%;
	margin: auto;
	animation: rewardstaranim 2s ease forwards;
}

@keyframes rewardstaranim{
	0%{transform:rotate(0deg)scale(0);}
	70%{transform:rotate(2160deg)scale(1)}
	80%{transform:scale(1.3)}
	100%{transform:scale(1)}
}

.stardiv{
	height:40px;
	float:left;
	margin-right: 5px;
	width:40px;
	background-image: url(/i/star-inactive.png);
	background-repeat:no-repeat;
}

.staractive{
	background-image:url(/i/star-active.png);
	-webkit-animation:bounceIn 0.5s 1 ease;
	animation:bounceIn 0.5s 1 ease;
	-webkit-animation-fill-mode: forwards; 
	animation-fill-mode: forwards;
	background-repeat:no-repeat;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/*Title and main scene*/

#exercise_name{
	font-size:24px;
	margin-left: 20px;
	float: left;
	margin: auto auto auto 20px;
}

#mainscene{
	position:relative;
	margin-left:0;
	width:1002px;
	display: flex;
	flex-direction: column;
	top:0!important;
	border: 3px solid #ffffff;
	border-top:none;
	background: #fff;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	margin: 108px auto 20px auto!important;
}

/*Button answer*/
footer button{
		background-color:#78c250;
		width: 50%;
		height:60px;
		margin: auto;
		border:4px solid #94d571;
		border-radius:8px;
		color:white;
		font-size:24px;
		transition: background-color 0.6s cubic-bezier(0, 1.43, 0.43, -0.03);
		transition: border-color 0.6s linear;
}

footer button:hover{
		background-color:#94d571;
		border:4px solid #78c250;
		cursor:pointer;
}
footer {
    display: flex;
    padding: 20px 20px;
}
.avsluta{
	width: 30%;
	background-color:#d5a671;
	border:4px solid #c28350;
}
/*Type 1*/
#pg-type1 .question-area{
	height:200px;
	width:96%;
	position:relative;
	top:20px!important;
	margin:0 auto;
	background-size:100%;
	background-position:center;
	border:5px solid #fff; 
	background-color:#e5e9d9;
	transition: background-color 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

.wronganswer{
	background-color:red!important;
}

#pg-type1 #answer-area{
	padding-top:10px;
	max-height:420px!important;
	height:420px;
	margin-top:20px;
	display:flex;
	align-items: center;
	justify-content:space-around; 
}

#answer-area div img{
	margin: 0 4px;
	max-height:180px;
	max-width: 200px;
}

#answer-area div img{
	/* transition: outline-color 0.6s cubic-bezier(0, 1.43, 0.43, -0.03); */
}

#pg-type1 #answer-area div img:hover{
	outline: 6px solid #35585f;
	cursor:pointer;
	z-index: 10000;
}

.exerciseid70 .question-area-51,.exerciseid70 #reward-star-wrapp,
.exerciseid71 .question-area-51,.exerciseid71 #reward-star-wrapp,
.exerciseid72 .question-area-51,.exerciseid72 #reward-star-wrapp,
.exerciseid73 .question-area-51,.exerciseid73 #reward-star-wrapp,
.exerciseid74 .question-area-51,.exerciseid74 #reward-star-wrapp,
.exerciseid75 .question-area-51,.exerciseid75 #reward-star-wrapp,
.exerciseid89 .question-area-51,.exerciseid89 #reward-star-wrapp,
.exerciseid90 .question-area-51,.exerciseid90 #reward-star-wrapp,
.exerciseid91 .question-area-51,.exerciseid91 #reward-star-wrapp,
.exerciseid92 .question-area-51,.exerciseid92 #reward-star-wrapp,
.exerciseid93 .question-area-51,.exerciseid93 #reward-star-wrapp,
.exerciseid94 .question-area-51,.exerciseid94 #reward-star-wrapp

{
	display:none!important
}
/*Type2 2*/

#pg-type2 #question-area{
	height:450px;
	border:5px solid #fff;
	background: none;
	display:flex;
	justify-content: space-around;
	flex-wrap:wrap;
	padding:0!important;
}

#pg-type2 #question-area div img{
	border:8px solid #ffffff;
	transition: border-color 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
	margin:0;
}

#pg-type2 #question-area div img:hover{
	cursor:pointer;
	z-index: 10000;
}

#pg-type2 #answer-area{
	padding-top:10px;
	margin-top:20px;
	float: left;
	width: 100%;
	display: flex;
	justify-content: space-around;
}

#pg-type2 .answer{
	padding-top:10px;
	object-fit: contain;
	margin-top:20px;
	margin:15px 0;
	border:2px solid #ecf0dc;
}

#pg-type2 .answer:hover{
cursor:pointer;
border:2px solid #657f84;
}

#dropbox-1, #dropbox-2{
	background-color: #ecf0dc;
	min-height: 215px;
	float:left;
	width: 45%;
	padding:5px;
	border-radius:10px;
}
#dropbox-1:hover, #dropbox-2:hover{
	
	}
#dropbox-1{
	left:10px;
	background-color: #a0bff3;
	font-size: 20px!important;
	
}
#dropbox-2{
	left:30px;
	background-color: #f58c8c;
	font-size: 30px!important;
}
#dropbox-1 header, #dropbox-2 header{
	text-align: center;
	font-weight:bold
	
}

#pg-type3 footer button{
	float:left;
}

/*Type 3*/

.question-area-51, .question-area-52{
	height:220px;
	width:96%;
	position:relative;
	top:20px!important;
	margin:0 auto;
	transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.question-area-51{
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	display: flex;
	justify-content: center;
}

.question-area-51 img{
	margin:auto;
}

.question-area-52{
	background-size:20%;
	background-position:30% 50%;
	background-repeat: no-repeat;
}


 #pg-type3 footer{
	 /* height:80px!important; */
	 float:left;
	 width:1002px;
	 padding-top:30px;
	 text-align: center;
	 z-index:1;
	 display: flex;
	 flex-direction: column;
	 position:relative;
	 margin-top:40px;
}

#pg-type3 footer div{background-image: url(/i/etiket.png);width: 100%;background-size: contain;height: 100px;background-position: 50%;background-repeat: no-repeat;float:left;position:relative;z-index: 2000;}

#pg-type3.exerciseid24 footer div,
#pg-type3.exerciseid27 footer div,
#pg-type3.exerciseid29 footer div,
#pg-type3.exerciseid36 footer div,
#pg-type3.exerciseid38 footer div{
		background:none!important;
}


#pg-type3 footer input{
	width:65px;
	position: absolute;
	left: 378px;
	top: 26px;
	height:40px;
	font-size: 24px;
	text-align: right;
	padding-right:5px;
	border-radius:6px;
}

#pg-type3 footer button{
	float:left;
	margin-top: 20px;
}
/*Type 4*/

#question-area-54{
	height:180px;
	width:96%;
	position:relative;
	top:20px!important;
	margin:0 auto;
	border:5px solid #fff;
	transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
}


#pg-type4 .dropp-area{
	width:902px;
	margin-left:50px;
	height: 220px;
	background-color: #ecf0dc;
	border-radius:15px;
	margin-top:30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#pg-type4 .dropp-area img {
	margin:2px
}

#draggable-wrpp{
	float:left;
	width:1000px;
	height:160px;
	padding-top:40px;
	position: relative;
	display:flex;
}

.draggable-container{
	margin:auto;
}

#pg-type4 .drag-item{
	position:absolute;
	border:8px solid white;
	margin:0px!important;
	padding:0px;
	max-height:136px!important;
	transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
#pg-type4 .drag-item:hover{
	border:8px solid #35585f;
	cursor:pointer;
}

#pg-type4 .drag-item:nth-child(1){
	left:0px;
		top:74px;
}
#pg-type4 .drag-item:nth-child(2){
	left:100px;
		top:66px;
}

#pg-type4 .drag-item:nth-child(3){
	left:212px;
  top:50px;
}

#pg-type4 .drag-item:nth-child(4){
	left:330px;
	top:50px;
}

#pg-type4 .drag-item:nth-child(5){
	left:435px;
}

#pg-type4 .drag-item:nth-child(6){
	left:712px;
}

 #pg-type4 footer{
	 float:left;
	 width:1002px;
	 text-align: center;
	 margin-top: 40px;
}



/*Type 5*/

#question-area-55 {
	/* height:640px; */
	width: 100%;
	position:relative;
	top:20px!important;
	margin: 0 auto 20px auto;
	/* border:5px solid #fff; */
	transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
#question-area-55 div{
	float:left!important;
	margin-bottom: 32px;
	height: 114px;
	/* margin-right: 50px; */
	margin: 30px 14px;
}

#question-area-55 div img{
		outline: 6px solid #ffffff00;
		transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
#question-area-55 div img:hover{
	outline: 6px solid #35585f;
	cursor:pointer;
}

 #pg-type5 footer{
	 float:left;
	 width:1002px;
	 text-align: center;
}


/*Type 6*/

#question-area-56 {
	/* height:640px; */
	width:991px;
	/* display: flex; */
	padding: 20px;
	top:0px!important;
	margin:0 auto;
	transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
	position: relative;
}


#question-area-56 div img{
		border: 6px solid #ffffff00;
		transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
		height: 239px;
		object-fit: contain;
}
#question-area-56 div img:hover{
	outline: 6px solid #35585f;
	cursor:pointer;
}

#question-area-56 div{transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);/* position: absolute; */float: left;width: 237px;padding: 10px;}
#question-area-56 div:nth-child(1){
	top:-130px;
	left:-70px;
	
}

#question-area-56 div:nth-child(2){
	/* top:100px; */
	/* left:30px; */
}
#question-area-56 div:nth-child(3){
	/* top:-80px; */
	/* left:220px; */
}
#question-area-56 div:nth-child(4){
	top:0px;
	right:-120px
}
#question-area-56 div:nth-child(5){
	top:300px;
	left:300px
	
}
#question-area-56 div:nth-child(6){
	top:400px;
	left:-100px;
}
#question-area-56 div:nth-child(7){
	top:200px;
	right:-30px;
}
#question-area-56 div:hover{
	cursor:pointer;
}

 #pg-type6 footer{
	 float:left;
	 width:1002px;
	 padding-top:30px;
	 text-align: center;
}
/*Type 7*/

#question-area-57-ter div{
	margin: 35px 5px;
}

#question-area-57,#question-area-57-bis,#question-area-57-ter {
	/* height:640px; */
	width:991px;
	top:0px!important;
	margin:0 auto;
	padding:0!important;
	border:5px solid white;
	transition: border 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
	position: relative;
	display:flex;
	align-items: center;
	justify-content:space-around;
	flex-wrap:wrap;
}

#question-area-57 div{
	width:300px;
}
#question-area-57-bis div{
	transform: scale(0.75);
	transform-origin: 0 0

}
#question-area-57-bis div:nth-child(3){
	margin-top: -100px;
}

#question-area-57 div img, #question-area-57-bis img,#question-area-57-ter img{
		transition: border-color 0.6s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

#question-area-57-ter .samesize{
	height:240px!important
}

#question-area-57-ter .samesize2{
	height:160px!important
}

#question-area-57 div img:hover, #question-area-57-bis img:hover,#question-area-57-ter img:hover{
	outline: 6px solid #35585f;
	cursor:pointer;
}
 #pg-type7 footer{
	 /* height:80px!important; */
	 float:left;
	 width:1002px;
	 padding-top:30px;
	 text-align: center;
}
 #pg-type7.exerciseid89 #question-area-57-ter div{

 	height:200px!important ;    
 	float:left!important;            


 }