/**********                    **********/
/**********      index.php     **********/
/**********                    **********/

body 		
	background-color: #2f3149;
}



  html {
        /* Size of largest container or bigger */
        min-width: 1024px;
        max-width: 1024px;

    }
.content{
  position: absolute;
  left: 150px;
  top: 300px;
  width: 600px;
  color: #000000;
  font-family:    'Quicksand', sans-serif;
  font-size:      16px;
  line-height: 1.3;

}

.morecontent{
  position: absolute;
  left: 150px;
  top: 300px;
  width: 700px;
  color: #000000;
  font-family:    'Quicksand', sans-serif;
  font-size:      16px;
  line-height: 1.3;

}

.smallcontent1{
  position: absolute;
  left: 150px;
  top: 400px;
  width: 300px;
  color: #000000;
  font-family:    'Quicksand', sans-serif;
  font-size:      14px;
  line-height: 1.3;

}

.smallcontent2{
  position: absolute;
  left: 680px;
  top: 400px;
  width: 200px;
  color: #000000;
  font-family:    'Quicksand', sans-serif;
  font-size:      12px;
  line-height: 1.3;
  background-color: #F0F0F0;

}

.h1{
  position: absolute;
  left: 300px;
  top: 230px;
  width: 600px;
  color: #000000;
  font-family:    'Quicksand', sans-serif;
  font-size:      18px;
  line-height: 1.3;

}

.top-right-menu{
  position: absolute;
  right: 15px;
  top: 15px;
    color: #ffffff; 

}
.top-right{
  position: absolute;
  right: 13px;
  top: 13px;
}

.top-right-map{
  position: absolute;
  right: 100px;
  top: 13px;
}


.top-right-back{
  position: absolute;
  right: 130px;
  top: 13px;
}

.top-right-text{
  position: absolute;
  right: 13px;
  top: 13px;
  font-family:    'Quicksand', sans-serif;
  font-size:      16px;
  line-height: 1.3;
  color: #ffffff;
}
.top-right-medalla{
  position: absolute;
  right: 165px;
  top: 13px;
}

.top-right-text-medalla{
  position: absolute;
  right: 100px;
  top: 13px;
  font-family:    'Quicksand', sans-serif;
  font-size:      16px;
  line-height: 1.3;
  color: #ffffff;
}
.top-right-medalla2{
  position: absolute;
  right: 100px;
  top: 13px;
}

.top-right-text-medalla2{
  position: absolute;
  right: 100px;
  top: 13px;
  font-family:    'Quicksand', sans-serif;
  font-size:      16px;
  line-height: 1.3;
  color: #ffffff;
}



.top-right-ayudatarea{
  position: absolute;
  right: 110px;
  top: 13px;
}
.top-right-ayudatarea0{
  position: absolute;
  right: 150px;
  top: 13px;
}

.top-right-text-ayudatarea{
  position: absolute;
  right: 200px;
  top: 30px;
  font-family:    'Quicksand', sans-serif;
  font-size:      16px;
  line-height: 1.3;
  color: #ffffff;
}

/* Seguir */
.seguir{
  position: absolute;
  bottom: 13px;
  right: 40px;
/*  width: 170px;
  height: 65px;*/
}
/* Name aus Cookie am Anfang*/
.name_down_left{
  position: absolute;
  bottom: 10px;
  left: 50px;
}


/* Kleines Bild oben links */
.image_top_left{
  position: absolute;
  top: 80px;
  left: 50px;
}

/* Sprechblase Aufgabenstellung */
.sprachblase_top_left{
  position: absolute;
  top: 98px;
  left: 240px;
}
.sprachblase_top_left_content
{
    position: absolute;
    top: 110px;
    left: 270px;
    width: 355px;

    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;
}

/* Sprechblase zwischen Levels mittel */
.sprachblase-ml{
  position: absolute;
  top: 80px;
  left: 10px;
}
.sprachblase-ml-content
{
    position: absolute;
    top: 200px;
    left: 60px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 18pt*/;
    width: 200px;
}


.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px; 
    width: 100%;/*whatever width you want*/;
    text-align: center;
}

.wraptocenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: #999;
}

.wraptocenter * {
  vertical-align: middle;
}


/**********                    **********/
/**********      BILD TONINO   **********/
/**********                    **********/
.bild-tonino
{
  position: absolute;
  top: 100px;
  left: 68px;
}
/**********                    **********/
/**********      VIDEOS        **********/
/**********                    **********/

.video-klein
{
  position: absolute;
  top: 100px;
  left: 50px;
}

.level-0-1-video
{
    position: absolute;
    top: 200px;
    right: 40px;
}


/**********                    **********/
/**********     AUDIO          **********/
/**********                    **********/
.audio{
  position: absolute;
  top: 100px;
  left: 68px;
  opacity: 0.6;
}
/**********                    **********/
/**********      BACK 	       **********/
/**********                    **********/

.back{
  position: absolute;
  bottom: 2px;
  left: 20px;
}

/**********                    **********/
/**********      CODE FORM     **********/
/**********                    **********/

.code{
  font-family:    'Quicksand', sans-serif;
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 125%;
  color: #000000; 
}

input.rounded {
	border: 1px solid #FFFFFF; 
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
/*	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666; */
	font-size: 10px;
	padding: 4px 7px;
	outline: 0;
	-webkit-appearance: none;
	height: 25px;
	width: 130px;
}
input.rounded:focus {
	/*border-color: #339933;*/
}

input.roundedwborder {
	border: 1px solid #000000; 
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
/*	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666; */
	font-size: 14px;
	padding: 4px 7px;
	outline: 0;
	-webkit-appearance: none;
	height: 30px;
	width: 130px;
}

.button {
    background-color: #ff0066;
   opacity: 0.5; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
/*	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666; */
	font-size: 10px;
	padding: 4px 7px;
	outline: 0;
	-webkit-appearance: none;
	height: 25px;
	width: 130px;
}


/**********                    **********/
/**********      CODE FORM     **********/
/**********                    **********/

.levelTitle{
  font-family:    'Quicksand', sans-serif;
  text-transform: uppercase;
  position: absolute;
  font-weight: 800;
  font-size: 185%;
  top: 47px;
  left: 26px;
  color: #ffffff; 
}

.levelNumber{
  font-family:    'Quicksand', sans-serif;
  position: absolute;
  font-size: 200%;
  top: 25px;
  right: 90px;
  color: #ffffff; 

}

/*text box for input code*/
.gamecode{
  font-family:    'Quicksand', sans-serif;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

/*game logo*/
.gamelogo{
  position: absolute;
  bottom: 0px;
  right: 0px;
}




.menu{
  position: absolute;
  top: 15px;
  right: 10px;
}

header {
/*    background-color: #358EAC; 
    background-image: "/0_1MENU-ELEMENTS/leisteoben.gif";*/
}

header h1 {
    margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
}

#text {
    float:left;
    width:220px;
    height:100px;
    margin:20px 20px 20px;
    position:relative;
}

h3 {
    position:absolute;
    top:0;
}

.popover{
  max-width:100%;
}

/* Remove Popover Arrow*/

.popover.bottom .arrow {visibility:hidden;}







/* Content*/

/*Level 0-1*/



.level-0-0-sprachblase{
  position: absolute;
  top: 160px;
  left: 10px;
}

.level-0-startarea{
  position: absolute;
  top: 335px;
  left: 425px;
  width: 170px;
  height: 170px;

}

.level-0-codearea{
  position: absolute;
  top: 545px;
  left: 425px;
  width: 170px;
  height: 50px;

}

.level-0-impressumarea{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 120px;
  height: 35px;

}

.level-0-1-sprachblase-content
{
    position: absolute;
    top: 180px;
    left: 70px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 18pt*/;
    width: 200px;
}

.level-0-1-popover-ayuda-content
{
    font-family:    'Quicksand', sans-serif;
    font-size:      16px; /* 16pt*/;
}


/**********                    **********/
/**********      level 2-1     **********/
/**********                    **********/

.level-2-1-map
{
  text-align: center;
  position: absolute;
  top: 200px;
  right: 120px;

}


/**********                    **********/
/**********      level 2-2     **********/
/**********                    **********/

/*

.level-2-2-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-2-2-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px;
    width: 430px;
}
*/

/**********                    **********/
/**********      level 2-3     **********/
/**********                    **********/

.level23fail{
	position: absolute;
	top: 190px;
	left: 260px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    text-align: center;
    font-weight: bold;
    color: red;
    background-color: white;
    height: 70px;
    width: 500px;
	border-radius: 25px;
    padding: 20px; 
}

.level-2-3-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-2-3-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-2-3-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-2-3-map
{
  text-align: center;
  position: relative;
  top: 250px;
}

.level-2-3-elige
{
  text-align: center;
  position: relative;
  bottom: 235px;
}

.level-2-3-camino
{
  text-align: center;
  position: relative;
  bottom: 80px;
}

/**********                    **********/
/**********      level 2-3A    **********/
/**********                    **********/
.level-2-3a-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-2-3a-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-2-3a-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-2-3a-sub-popover
{
    position: absolute;
    top: 240px;
    left: 50px;
}

.level-2-3a-map
{
  text-align: center;
  position: relative;
  top: 230px;
}

.level-2-3a-answer
{
  text-align: center;
  position: relative;
  top: 250px;
  width: 450px;
  left: 290px;
}

.level-2-3a-test-level-2-3b{
  text-align: center;
  position: relative;
}
/**********                    **********/
/**********      level 3-2     **********/
/**********                    **********/

.level-3-2-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-3-2-sprechblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-3-2-sprechblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-3-2-map
{
  text-align: center;
  position: relative;
  top: 220px;
}

.level-3-2-elige
{
  text-align: center;
  position: relative;
  bottom: 235px;
}

.level-3-2-camino
{
  text-align: center;
  position: relative;
  bottom: 80px;
}

.level-3-2-button-a
{
    position: absolute;
    top: 490px;
    left: 296px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}


.level-3-2-button-b
{
    position: absolute;
    top: 490px;
    left: 586px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}




/**********                    **********/
/**********      level 3-2A    **********/
/**********                    **********/
.level-3-2a-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-3-2a-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-3-2a-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-3-2a-ascensor{
  position: absolute;
  top: 110px;
  right: 20px;
}


/**********                    **********/
/**********      level 3-2B    **********/
/**********                    **********/
.level-3-2b-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-3-2b-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-3-2b-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-3-2b-ascensor{
  position: absolute;
  top: 110px;
  right: 20px;
}
.level-3-2b-computer{
  position: absolute;
  top: 350px;
  left: 150px;
  width: 130px;
  height: 200px;
}
/**********                    **********/
/**********      level 3-3     **********/
/**********                    **********/
.level-3-3-fahrstuhl-true{  
  position: absolute;
  top: 353px;
  left: 731px;
  width: 80px;
  height: 50px;
}
.level-3-3-fahrstuhl-false{
  position: absolute;
  top: 428px;
  left: 731px;
  width: 80px;
  height: 210px;
}
.level-3-3-fahrstuhl-false2{
  position: absolute;
  top: 267px;
  left: 731px;
  width: 80px;
  height: 50px;
}
/*FLUR*/
.level-3-3-flur-l1{
   position: absolute;
   left: 121px;
   top: 120px;
   width: 145px;
   height: 483px;  
}
.level-3-3-flur-l2{
   position: absolute;
   left: 420px;
   top: 300px;
   width: 38px;
   height: 140px;  
}
.level-3-3-flur-r1{
  position: absolute;
   left: 800px;
   top: 130px;
   width: 230px;
   height: 477px;  
}
.level-3-3-flur-r2{
   position: absolute;
   left: 640px;
   top: 250px;
   width: 70px;
   height: 222px;
}
.level-3-3-flur-r3{
   position: absolute;
   left: 601px;
   top: 290px;
   width: 39px;
   height: 140px;  
}
.level-3-3-flur-r4{
   position: absolute;
   left: 577px;
   top: 310px;
   width: 24px;
   height: 90px; 
}
.level-3-3-tur-1{
   position: absolute;
   left: 545px;
   top: 210px;
   width: 33px;
   height: 30px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-2{
   position: absolute;
   left: 590px;
   top: 210px;
   width: 33px;
   height: 30px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-3{
   position: absolute;
   left: 633px;
   top: 210px;
   width: 33px;
   height: 30px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-4{
   position: absolute;
   left: 546px;
   top: 242px;
   width: 33px;
   height: 30px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-5{
   position: absolute;
   left: 591px;
   top: 242px;
   width: 33px;
   height: 30px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-6{
   position: absolute;
   left: 634px;
   top: 242px;
   width: 33px;
   height: 30px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-7{
   position: absolute;
   left: 549px;
   top: 275px;
   width: 33px;
   height: 40px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-8{
   position: absolute;
   left: 594px;
   top: 275px;
   width: 33px;
   height: 40px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-9{
   position: absolute;
   left: 637px;
   top: 275px;
    width: 33px;
   height: 40px;
   background-color: #ff0066;
   opacity: 0.5;
}
.level-3-3-tur-0{
   position: absolute;
   left: 549px;
   top: 325px;
    width: 130px;
   height: 22px;
   background-color: #ff0066;
   opacity: 0.5;
}
/**********                    **********/
/**********      level 4       **********/
/**********                    **********/
.level-4-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-4-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-4-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-4-flyer{  
  position: absolute;
  top: 281px;
  left: 450px;
  width: 120px;
  height: 97px;

}

.level-4-phone{  
  position: absolute;
  top: 505px;
  right: 0px;
  width: 65px;
  height: 65px;
}

/**********                    **********/
/**********      level 4-1     **********/
/**********                    **********/

.level-4-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-4-1-close{  
  position: absolute;
  top: 35px;
  left: 870px;
  width: 62px;
  height: 55px;
/*  background-color: #ff6600;
*/
}

.level-4-1-ayuda{  
  position: absolute;
  top: 220px;
  left: 700px;
  width: 65px;
  height: 65px;
  
}


/**********                    **********/
/**********      level 4-2     **********/
/**********                    **********/

.level-4-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-4-2-close{  
  position: absolute;
  top: 85px;
  left: 705px;
  width: 62px;
  height: 55px;
}

.level-4-2-ayuda{  
  position: absolute;
  top: 220px;
  left: 700px;
  width: 65px;
  height: 65px;

}

.level-4-2-play-audio{  
  position: absolute;
  top: 225px;
  left: 525px;
  width: 155px;
  height: 30px;
}


/**********                    **********/
/**********      level 5-1     **********/
/**********                    **********/
.level-5-1-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-5-1-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-5-1-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px; /* 16pt*/;
    width: 430px;
    
}

.level-5-1-hide-video{  
  position: absolute;
  bottom: 0px;
  right: 0px;
    background-color: #6600ff;
        opacity: 0.4;
}


.level-5-1-crimen-click-area-1{  
  position: absolute;
  top: 520px;
  left: 80px;
  width: 80px;
  height: 205px;

}

.level-5-1-crimen-click-area-2{  
  position: absolute;
  top: 500px;
  right: 270px;
  width: 430px;
  height: 70px;

}

.level-5-1-perro-click-area{  
  position: absolute;
  bottom: 15px;
  left: 350px;
  width: 200px;
  height: 130px;

}

.level-5-1-crimen-video{  
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 210px;

}


.level-5-1-perro-video-1{  
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 210px;

}

/********

.level-5-2-true-perro-click-area{  
  position: absolute;
  top: 581px;
  left: 327px;
  width: 250px;
  height: 50px;

}
.level-5-2-false-perro-click-area{  
  position: absolute;
  top: 581px;
  left: 585px;
  width: 180px;
  height: 50px;

}

.level-5-1-perro-video-2{  
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 210px;
}

***/
.level-5-1-text1{  
    position: absolute;
    top: 522px;
    left: 430px;
    width: 350px;
    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;
}

.level-5-1-text-perro1{  
    position: absolute;
    top: 522px;
    left: 530px;
    width: 350px;
    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;
}


.level-5-1-text2{  
    position: absolute;
    top: 465px;
    left:620px;
    width: 245px;
    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;

}

.level-5-1-text3{  
    position: absolute;
    top: 406px;
    left: 620px;
    width: 245px;
    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;

}
/*CLICKAREA DIALOG*/
.level-5-1-true-perro-click-area{  
  position: absolute;
  top: 450px;
  left: 590px;
  width: 250px;
  height: 50px;

}
.level-5-1-false-perro-click-area{  
  position: absolute;
  top: 390px;
  left: 590px;
  width: 250px;
  height: 50px;

}


/**********                    **********/
/**********      level 5-2     **********/
/**********                    **********/

.level-5-2-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-5-2-sprachblase{
  position: absolute;
  top: 80px;
  left: 240px;
}

.level-5-2-sprachblase-content
{
    position: absolute;
    top: 90px;
    left: 270px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 16pt*/;
    width: 430px;
}

.level-5-2-ayuda-top
{
    position: absolute;
    bottom: 70px;
    right: 100px;
}

.level-5-2-ayuda-bottom
{
    position: absolute;
    top: 170px;
    right: 220px;
}

.level-5-2-close{  
  position: absolute;
  top: 20px;
  left: 890px;
  width: 62px;
  height: 55px;
}



/**********                    **********/
/**********      level 5-3     **********/
/**********                    **********/

.level-5-3-video
{
  position: absolute;
  top: 80px;
  left: 50px;
}

.level-5-3-ayuda-top
{
    position: absolute;
    top: 70px;
    right: 210px;
}


.level-5-3-ayuda-bottom
{
    position: absolute;
    top: 240px;
    left: 50px;
}

/**********                    **********/
/**********      level 6-1    **********/
/**********                    **********/

.level-6-1-sprachblase-content{
 	position: absolute;
    top: 170px;
    left: 120px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 18pt*/;
    width: 230px;
}
.level-6-1-code{
 	position: absolute;
    top: 410px;
    left: 60px;
    width: 100px;
}
.level-6-1-video{
 	position: absolute;
    top: 285px;
    left: 406px;

}


/**********                    **********/
/**********      level 6-1    **********/
/**********                    **********/

.level-6-2-puerta{

  position: absolute;
  top: 286px;
  left: 126px;
  width: 265px;
  height: 430px;
}

/**********                    **********/
/**********      level 6-3     **********/
/**********                    **********/

.level-6-3-oferta-click-area-1{  
  position: absolute;
  top: 200px;
  left: 100px;
  width: 240px;
  height: 80px;
}

.level-6-3-rufo-click-area{  
  position: absolute;
  bottom: 0px;
  left: 70px;
  width: 150px;
  height: 165px;
}

.level-6-3-gafas-click-area{  
  position: absolute;
  bottom: 103px;
  left: 220px;
  width: 60px;
  height: 35px;
}

.level-6-3-buitron-click-area{  
  position: absolute;
  bottom: 270px;
  right: 200px;
  width: 150px;
  height: 150px;
}

.level-6-3-text1{  
    position: absolute;
    top: 380px;
    left: 120px;
    width: 245px;
    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;
}

.level-6-3-text2{  
    position: absolute;
    top: 460px;
    left: 120px;
    width: 245px;
    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;
}

/**********                    **********/
/**********      level 6-4     **********/
/**********                    **********/

.level-6-4-ayuda
{
  position: absolute;

    top: 500px;
    left: 200px;
}
.level-6-4r-popover-list-words-content
{
    font-family:    'Quicksand', sans-serif;
    font-size:      16px; /* 16pt*/;
}

.level-6-4-play-audio{  
  position: absolute;
  top: 353px;
  left: 28px;
  width:230px;
  height: 50px;
}

.level-6-4-perseguir{  
  position: absolute;
  top: 430px;
  left: 28px;
  width:230px;
  height: 50px;
}

/**********                    **********/
/**********      level 7-1     **********/
/**********                    **********/
.level-7-1-content{

    position: absolute;
    top: 70px;
    left: 20px;
    font-family:    'Quicksand', sans-serif;
    font-size:      18px; /* 18pt*/;
    width: 200px;
}


.level-7-1-fadeIn{  
  position: absolute;
  top: 100px;
  left: 25px;
  display: none;
}

.level-7-1-fadeIn2{  
  position: absolute;
  top: 200px;
  left: 25px;
  display: none;
}

.level-7-1-fadeIn3{  
  position: absolute;
  top: 300px;
  left: 25px;
  display: none;
}

.level-7-1-fadeIn4{  
  position: absolute;
  top: 400px;
  left: 25px;
  display: none;
}

.level-7-1-fadeIn5{  
  position: absolute;
  top: 465px;
  left: 210px;
  display: none;
}


.level74A{
    font-size:      45px;

  position: absolute;
  top: 565px;
  left: 200px;
}
.level74B{
    font-size:      45px;

  position: absolute;
  top: 565px;
  left: 480px;
}
.level74C{
    font-size:      45px;

  position: absolute;
  top: 565px;
  left: 780px;
}

/*****ASD ALLLE LINKS*/
.asd{
    position: absolute;
    top: 110px;
    left: 20px;
    width: 420px;

    font-family:    'Quicksand', sans-serif;
    font-size:      16px;
    line-height: 1.3;
    background-color: #ffffff;
    opacity: 0.6;
    border-radius: 20px;    
}


/**********                    **********/
/**********      MAP		   **********/
/**********                    **********/

.map0{  
  position: absolute;
  top: 371px;
  left: 24px;
  width: 60px;
  height: 60px;

}

.map11{  
  position: absolute;
top: 325px;
  left: 100px;
  width: 60px;
  height: 50px;

}

.map12{  
  position: absolute;
top: 225px;
  left: 100px;
  width: 70px;
  height: 50px;

}

.map13{  
  position: absolute;
top: 130px;
  left: 115px;
  width: 60px;
  height: 50px;

}

.map21{  
  position: absolute;
top: 80px;
  left: 190px;
  width: 70px;
  height: 50px;

}

.map22{  
  position: absolute;
top: 127px;
  left: 270px;
  width: 60px;
  height: 50px;

}

.map23{  
  position: absolute;
top: 220px;
  left: 275px;
  width: 70px;
  height: 50px;

}

.map23a{  
  position: absolute;
top: 340px;
  left: 230px;
  width: 70px;
  height: 50px;

}

.map23b{  
  position: absolute;
top: 340px;
  left: 310px;
  width: 70px;
  height: 50px;

}

.map31{  
  position: absolute;
top: 450px;
  left: 275px;
  width: 70px;
  height: 50px;
  
}

.map32{  
  position: absolute;
top: 560px;
  left: 275px;
  width: 70px;
  height: 50px;

}

.map32a{  
  position: absolute;
top: 625px;
  left: 362px;
  width: 70px;
  height: 50px;

}
.map32b{  
  position: absolute;
top: 685px;
  left: 362px;
  width: 70px;
  height: 50px;

}

.map4{  
  position: absolute;
top: 550px;
  left: 445px;
  width: 70px;
  height: 50px;
 
}
.map51{  
  position: absolute;
top: 450px;
  left: 450px;
  width: 70px;
  height: 50px;

}

.map52{  
  position: absolute;
top: 330px;
  left: 445px;
  width: 70px;
  height: 50px;

}

.map53{  
  position: absolute;
top: 220px;
  left: 445px;
  width: 70px;
  height: 50px;

}

.map61{  
  position: absolute;
top: 130px;
  left: 455px;
  width: 70px;
  height: 50px;

}

.map62{  
  position: absolute;
top: 80px;
  left: 545px;
  width: 60px;
  height: 50px;

}

.map63{  
  position: absolute;
top: 135px;
  left: 621px;
  width: 60px;
  height: 50px;

}

.map71{  
  position: absolute;
  top: 332px;
  left: 627px;
  width: 60px;
  height: 50px;

}

.map64{  
  position: absolute;
  top: 227px;
  left: 627px;
  width: 60px;
  height: 50px;

}

.map72{  
  position: absolute;
top: 455px;
  left: 627px;
  width: 60px;
  height: 50px;

}

.map73{  
  position: absolute;
top: 565px;
  left: 627px;
  width: 60px;
  height: 50px;

}

.map74{  
  position: absolute;
top: 650px;
  left: 697px;
  width: 60px;
  height: 50px;

}

.map75{  
  position: absolute;
top: 450px;
  left: 800px;
  width: 60px;
  height: 50px;

}

/**********                    **********/
/**********      CODE FORM     **********/
/**********                    **********/

.leben{
  font-family:    'Quicksand', sans-serif;
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 1.3;
  background-color: rgba(255,255,255,.1);
   border-radius: 25px;
   padding: 10px;
float: right;
  
}


.med75{
    position: absolute;
    top: 70px;
    right: 20px;
   border-radius: 25px;
   padding: 10px;
}

.ayudacount75{
   border-radius: 25px;
   padding: 10px;
    position: absolute;
    top: 300px;
    right: 20px;
    color: #FFFFFF;
    width: 183px;
    height: 100px;
 	 background-color: #a3e2d0;
}

.ayudacount75img{
    position: absolute;
    top: 330px;
    right: 20px;
      display: block;

}