/* Reset */
*{ box-sizing:border-box; word-wrap: normal; word-break: keep-all;}
body{margin:0; font-family: 'Raleway', sans-serif; font-size:2.34vh; }
img, video, svg{max-width:100%;}
a{ text-decoration:none; color:inherit;}
h1,h2,h3,p,figure{margin:0;}
input,textarea,button{font-size:inherit;font-family:inherit;color:inherit;}

/* Vars */
:root {
  --main-red:#E02727;
  --light-blue:#288BA2;
  --light-blue2:#288aa1;
  --medium-blue:#277887;
  --dark-blue:#1E6879;
  --light-orange:#e67358;
  --medium-orange:#e06349;
  --dark-orange:#DF4E2C;
}

/* Helper */
.transparent{opacity: 0;}
.hide{display:none;}
.absolute{position:absolute;}
.center{top:50%; left:50%; transform:translate(-50%,-50%);}

.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.relative{position: relative;}
.regular{font-weight: 400;}
.medium{font-weight: 500;}
.bold{font-weight: 700;}
.red-text{color:var(--main-red); }

.white-back{background: #FFF;}
.orange-back{background: #e67358; }
.blue-back{ background: var(--light-blue);}

.button{background: var(--main-red); color:#FFF; cursor:pointer; border-radius:0.25em;}
.fake-link{cursor:pointer; text-decoration: underline;}

/* Structure */
#app{position:relative; width:100%; height:100vh; overflow: hidden;}
.screen{position:absolute; top:0; left:0; width:100%;height:100%; display:none;}
.hidden-screen{ z-index:-1; opacity:0; }
.visible-screen{ z-index:1; opacity:1; }
.panel{position:absolute;width:100%;height:100%;top:0;left:0;display:none;}
.panel-container{position:relative; width:119vh; height: 90vh; margin:5vh auto 0 auto; overflow:hidden; padding:3% 3.5%;}
#app-navigator{position: fixed; bottom:0; right:0; background:#000; padding:1em 2em; border-radius:0.75em 0 0 0; z-index:999;}
#app-navigator h2{font-weight:400;color:#FFF;font-size:1em; margin-bottom: 1em;}
#soundAuth{position: fixed; top:50%; left:50%; background:#000; color:#FFF; padding:0.5em 1em; border-radius:0.5em; box-shadow:0 0 1em rgba(0,0,0,0.4); transform:translate(-50%,-50%); z-index:99; cursor:pointer; display:none;}

/* Panels */
.orange-panel{ background: var(--light-orange); }
.orange-panel .panel-container{border:0.5vw solid; border-color:var(--medium-orange); border-radius:3vh;}
.blue-panel{ background: var(--light-blue); }
.blue-panel .panel-container{border:0.5vw solid; border-color:var(--medium-blue); border-radius:3vh;}
.panel-title{position:absolute;top:0;left:0; background:var(--medium-orange); border-radius:0 0 2vh 0; font-size: 1.55em; padding:1em 1em; color:#FFF; }
.panel-title-wrapper{position:absolute;top:0;left:0;background:#DF4E2C;z-index:1;border-radius:0 0 2vh 0;}
.panel-title-wrapper .panel-title{position:relative;}
.panel-subtitle{color:#FFF; padding:0.75em 1.5em 0.75em 2.5em; position:relative; font-size:1.1em;}
.panel-subtitle:before{content:''; display:block; position: absolute; height:0.8em;width:0.8em; left:1.5em; top:0.9em; background:url('../img/arrow_left.png') no-repeat left center; background-size:auto 100%;}

/*** Reward ***/
#reward-screen, #reward-screen2{display:none;z-index:99;}
#reward-screen .panel, #reward-screen2 .panel{display:block;}
.rewards-wrapper{position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:center;}
.rewards-wrapper > div{width:26%; margin:0 1%; }
.reward-numbers{ position:relative; color:#FFF; font-size:10.5em; font-weight:700; height:1em; line-height:1em; overflow:hidden; display:flex; flex-wrap:wrap; align-items:flex-start;}
.reward-number-alg{position:relative; text-align:center; width:0.6em; height: 1em;}
.reward-alg-stripe{position:absolute; top:0; left:0; width:100%; transition:1s;height: 4em; }
.reward-number{vertical-align: middle; letter-spacing: 0; height: 1em;}
.reward-stars{text-align:center;padding-top:1.5%; line-height:2em;}
.reward-stars img{width:35%; margin:0 1%; opacity:0.3; transition:0.3s;}

#reward-screen2{background:var(--dark-blue);}
#reward-screen2 .reward-alg-stripe{ transition:0.5s; }
#reward-screen2 #reward-stripe12{ transition: 1s; }
#reward-screen2 .rewards-wrapper{width:50%;height:50%;left:50%;top:50%; transform:translate(-50%,-50%); border:0.1em solid #e9cd2e; padding-top:4.5em; border-radius:1em;}
#reward-screen2 .rewards-wrapper > div{width:50%; margin:0 1%; }
.rewards2-title{color:#e9cd2e; font-size:2em; position:absolute; top:15%; left:50%; transform:translate(-50%,0); font-weight:700;}

/* Home */
#home-screen .panel1 .panel-container{padding:0;}
#intro-logo{position:absolute; width:14.64%; transform: translate(-50%,-100%); }
#intro-text{width:100%;top:70%;margin-top:5vh;opacity:0; transition:1.5s; text-align: center;}
#intro-text h1{font-size:2.33em; line-height:1em;}
#intro-text h2{ font-size:1.88em; margin-top:0.2em;}
.sound-warning{width:30.33%;}
.sound-waring-message{font-weight:700;}
#sound-warning-button{font-weight:1.1em; padding:1.25em 1em; text-transform:uppercase; font-weight:700; line-height:1.6em; margin-top:2em; transition:0.3s;}
#sound-warning-button:hover{ background:#7B1515;}
.sound-message{width:35%;}

#sound-signal{position:relative; width:50%; padding-top:50%; margin:0 auto 8% auto;}
#sound-signal img{ position:absolute; top:0; width:100%; display:block; opacity:0;}
#signal-center{width:20%;height:20%;background:var(--main-red); border-radius:50%;}

/* About */
#about-screen{}
#about-screen .panel1 .panel-container{ border-radius:3vh; background: url('../img/background1.jpg') no-repeat center; background-size:80% auto;}
/*#about-screen .panel2 .panel-container{ border:5px solid var(--medium-blue); border-radius:3vh; }*/
#about-main-title{ position:absolute;width:100%; text-align: center; left:0; top:5%; font-size:3.5em; font-weight:800; color:#FFF;}
#sobre-play-button{ width:11.7%;padding-top:11.7%; background:url('../img/play.png') #288BA2 no-repeat center; background-size:33.33% auto; border-radius:50%; z-index:10; cursor:pointer; box-shadow:0 0 7px rgba(0,0,0,0.5); transition:opacity 0.3s;}
#sobre-play-button:hover, .about-button:hover{opacity:0.8; }

.about-buttons{width:100%; bottom:6%; left:0; z-index:9;}
.about-button{display:inline-block; background:var(--light-blue); color:#FFF; font-size:0.88em; font-weight:700; cursor:pointer; min-width:14.65%; padding:1em; border-radius:1.5vh; margin:0 0.7em;  box-shadow:0 0 7px rgba(0,0,0,0.5); transition:0.3s;}


#about-screen .panel2{font-size:0.9em;}
.about-title{color:#FFF;font-size:2.55em;}
.about-content{margin:1em 0; color:#FFF; line-height:1.5em; width:80%;}
.about-logo{position:absolute;bottom:6%; width:17%;}
.about-logo img{width:100%;}
.close-button{position:absolute;top:6.5%;right:5%;width:8%;cursor:pointer;}
.close-button img{width:100%;height:auto;}
.about-content a:hover{text-decoration: underline;}

.roteiro-wrapper{/*display:flex; flex-wrap: wrap; justify-content: space-between;*/}
.roteiro-image{width:80%;}
.roteiro-text{width:33%; height:25.5em;font-size:0.9em; border-bottom:0.2em solid var(--dark-blue);}
.scroll-area{overflow-y: scroll; padding-right:1em;}

/* Presentation */
#presentation-screen{}
#presentation-screen .panel1 .panel-container{ background:url('../img/background2.jpg') no-repeat center; background-size:100% auto;}
#chef-image{position:absolute; height:68%; top:16%; right:10%; z-index:0; }

.text-balloon{position:absolute;background:var(--dark-blue); padding:1em 2em 1em 1em; border-radius: 2vh 0 2vh 2vh; color:#FFF; font-weight:500; line-height:1.3em; font-size:0.77em; width:33%; }
.text-balloon:after{content:''; display: block; position: absolute; top:0.5em; right:0.5em; border-right:0.3em solid;  border-top:0.3em solid; border-color: var(--dark-orange); height:0.8em; width:0.8em; }

.text-balloon2{position:absolute;background:var(--dark-blue); padding:1em 2em 1.5em 1.2em; border-radius: 2vh 2vh 2vh 0vh; color:#FFF; font-weight:500; line-height:1.3em; font-size:0.77em; width:33%; }
.text-balloon2:after{content:''; display: block; position: absolute; bottom:0.5em; left:0.5em; border-left:0.3em solid;  border-bottom:0.3em solid; border-color: var(--dark-orange); height:0.8em; width:0.8em; }

.text-balloon3{position:absolute;background:var(--dark-blue); padding:1em 2em 1.5em 1.2em; border-radius: 2vh 2vh 0vh 2vh; color:#FFF; font-weight:500; line-height:1.3em; font-size:0.77em; width:35%; }
.text-balloon3:after{content:''; display: block; position: absolute; bottom:0.5em; right:0.5em; border-right:0.3em solid;  border-bottom:0.3em solid; border-color: var(--dark-orange); height:0.8em; width:0.8em; }

#presentation-balloon1{top:36%; opacity:0; right:35%; transition:1s;}
#presentation-balloon2{top:49%; opacity:0; right:40%; transition:1s;}
#presentation-balloon3{top:65%; opacity:0; right:35%; transition:1s;}

#start-button1{opacity:0;transition:1s;}
#chef-image2{position:absolute; width:36%; top: 19%; left:18%; z-index:1; }
#table-image1, .table-image{position:absolute; width:115%; max-width: none; left:-7.5%;top:87%;z-index:2;}

#presentation-balloon4{top:14%; left:60%; opacity: 0; transition:1s;}
#presentation-balloon5{top:30%; left:63%; opacity: 0; transition:1s;}

#chef-image3{position:absolute;width:40%; left:3%; top:34%; }
#presentation-gallery-wrapper{position:absolute;width:44%; bottom:0; right:8%; background: var(--dark-blue); border-radius:1em 1em 0 0; color:#FFF; height:86%;}
#presentation-slides{position:relative;height:100%;width:100%;overflow: hidden;}
.presentation-slide{position:absolute;left:0;width:100%;height:100%;padding:1.5em;left:100%;}
.presentation-slide:first-child{left:0;}
.presentation-slide header{height:33%;}
.presentation-slide header h2{font-size:1em;}
.presentation-slide header p{font-size:0.8em;margin:1.25em 0 0 0; line-height:1.4em;}
.presentation-slide figure{border:0.25em solid;border-color:var(--dark-orange); height:62%; border-radius:1em; }
.presentation-slide figure img{ object-fit: cover; width:100%; height:100%; position:relative; top:-1%;}
.presentation-controls{position:absolute; width:100%; top:90%; transform:translateY(-50%); text-align:center; }
.presentation-control-item{ display: inline-block; background:var(--dark-orange); padding:0.5em 1em; margin:0 0.25em;}
.presentation-control-item:first-child{ border-radius:1em 1em 0 1em; padding:0.7em 0.7em 0.7em 1em;}
.presentation-control-item:last-child{ border-radius:1em 1em 1em 0; padding:0.7em;}
.presentation-control-item div{display:inline-block; vertical-align:middle;}

.presentation-button{height:2em; width: 2em; border-radius:50%; cursor:pointer; box-shadow: 0 0 7px rgba(0,0,0,0.4); transition: background 0.3s, opacity 0.3s; }
.presentation-button:hover{opacity:0.8;}
#presentation-sound-button{ background-image:url('../img/sound_icon.png'); background-position: center; background-repeat:no-repeat; background-color: var(--light-blue2); background-size:50% auto;  }

#presentation-control-info{font-weight:700; font-size:0.9em; min-width:2.5em; text-align:left;}

.presentation-arrow{ height:3em; width: 3em; cursor:pointer;}
#presentation-arrow-left{ background-image:url('../img/arrow_small_left.png'); background-position:45% center; background-repeat: no-repeat; background-color: var(--light-blue2);  background-size:30% auto; }
#presentation-arrow-right{ background-image:url('../img/arrow_small_right.png'); background-position: 55% center; background-repeat: no-repeat; background-color: var(--light-blue2); background-size:30% auto; margin-left:0.5em; }
.disabled-button{background-color:rgba(40, 138, 161, 0.5) !important; cursor: default;}

/*** Clothes ***/
#chef-image4{position: absolute; width:36.3%; top:19.5%; left:53%; }
#clothes-balloon1{top:36%; left:13.4%; opacity:0; transition:1s;}
#clothes-balloon2{top:52%; left:9.3%;  opacity:0; transition:1s;}

#clothes-picker{position:absolute;width:62.5%;height:100%; top:0;left:0; z-index:9;}
#clothes-picker .picker-wrapper{position: absolute; left:5%;}
#clothes-picker .isDraggable{position:absolute; width:100%; top:0; left:0;}
.picker-wrapper .picker-place path{fill:rgba(43,132,153,0.15) !important;}
.picker-wrapper .picker-place path.st0{fill: transparent !important;}

#picker-sapato1{width:12%;top:47%; left:37% !important;}
#picker-sapato2{width:12%;top:4%; left:67.5% !important;}
#picker-calcas{width:21%;top:23.5%;}
#picker-chapeu{width:13%; top:23%; left:33% !important;}
#picker-jaleca{width:30.5%; top:22.5%; left:52% !important;}
#picker-avental{width:24%; top:68%; left:73% !important;}
#picker-casaco{width:30%; top:67%; left:4% !important;}
#picker-bata{width:28%; top:60%; left:42% !important;}
#picker-chapeu2{width:12%; top:35%; left:84% !important;}
#picker-luva{width:12%; top:15%; left:84% !important;}
#picker-pano{width:7%; top:51%; left:84% !important;}
#picker-laco{width:9%; top:61%; left:30% !important;}


#clothes-drop{position: absolute; width:37.5%; height:100%; top:0;right:0; background:var(--medium-orange); border-radius:3vh; z-index:0;}
#chef-drop-image{position: absolute; width:47%; top:50%; left:50%; transform:translate(-50%,-50%);}

.isDropzone{position:absolute;left:50%; transform:translateX(-50%);}
.isDropzone .dropped{position:relative;}
.isDropzone .dropped svg{width:100%;}
.isDropzone #svg-sapato1 .svg-hide, .isDropzone #svg-sapato2 .svg-hide{fill:transparent;}

#dropzone-calcas{top:45.5%;height:38%; width:35% !important;z-index:1;}
#dropzone-chapeu{top:1%;height:18%; width:30% !important;}
#dropzone-jaleca{top:26%;height:27%; width:39% !important;z-index:2;}
#dropzone-avental{top:45%;height:30%; width:35% !important;z-index:3; left:51%}
#dropzone-sapato1{top:79.5%; left:24%; height:10%; width:24% !important; transform:translate(0,0); z-index:0;}
#dropzone-sapato2{top:79%; left:51%; height:10%; width:23% !important; transform:translate(0,0); z-index:0;}
#dropzone-pano{top:44.5%; height:17%; width:30% !important;z-index:3; z-index:5;}
#dropzone-pano .dropped{left:25% !important;}
#dropzone-calcas svg{width:100%;}

#finish-button1{position:absolute; bottom:3.5%; min-width:42%; left:50%; transform: translateX(-50%); text-align: center; margin:0 0 0 -1%;}
#finish-button2{position:absolute; bottom:3.5%;  left:5%; margin:0 0 0 -1%; display:none;}
#finish-button3{position:absolute; bottom:3.5%;  right:5%; margin:0 0 0 -1%; display:none;}


.reward-panel{position: absolute; width:100%; height:100%; top:0; left:0; z-index:99; background: rgba(30,104,121,0.9); z-index:99; font-family:Arial; /*display:none;*/ }

/*** Sistematização ***/
.sist-title-wrapper{position:absolute;top:0;left:0; color:#F4D22A; display:flex; /*flex-wrap: wrap;*/ padding:4% 0 0 4%; /*width:50%;*/ }
.sist-title{ /*width:81%;*/}
.sist-title-wrapper h2{font-size:2.3em;}
.sist-title-wrapper h3{font-size:1em;}
.sist-title-image{position:relative; width:4.2em; /*width:19%;*/ min-height:1px; margin-right:1em; text-align:center;}
.sist-title-image img:nth-child(1){ display:inline-block; margin-top:23%; width:50%;  }
.sist-title-image img:nth-child(2){ position:absolute;top:0; left:0; width:100%; opacity:0;}
.lamp-animation{animation: light-anim 1s 3; animation-fill-mode: forwards;}
#temp-button{position:absolute; top:60%;left:6%;font-size:1.4em;text-align:center;}
@keyframes light-anim{ 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;} }

#sist-chef{position: absolute; left:50%; height:67.8%; transform:translateX(-50%); bottom:3.25%;opacity:0; transition:0.6s;}

.sist-balloon{position:absolute;color:#FFF; background: var(--dark-blue); padding:1em; border-radius:0.9em;font-weight:bold; min-width:20%; text-align: center; opacity:0; transition:opacity 0.6s, margin 1s cubic-bezier(.48,1.96,.47,.94) }
.sist-balloon:before{content:''; position:absolute; display:block; height:1.1em; width:1.1em; background: var(--dark-blue); top:50%; transform:translate(-50%,-50%) rotateZ(45deg);  }
.sist-balloon:after{content:'';display:block;position:absolute;height:0.5em;width:0.5em; top:50%; border:0.3em solid var(--dark-orange); }
.sist-balloon span{opacity:0; transition:0.3s 0.8s;}

.sist-balloon-left{margin-right:50px;}
.sist-balloon-right{margin-left:50px;}
.sist-balloon-left:before{left:100%;}
.sist-balloon-right:before{left:0;}
.sist-balloon-right:after{border-top:none; border-right:none; left:0; transform:translate(-1.8em,-50%) rotateZ(45deg);}
.sist-balloon-left:after{border-bottom:none; border-left:none; left:100%; transform:translate(1em,-50%) rotateZ(45deg);}

.sist-balloon-bottom:before{left:50%;top:100%;}
.sist-balloon-bottom:after{border-top:none; border-right:none; top:100%; left:50%; transform:translate(-50%,1em) rotateZ(-45deg);}

.sist-balloon-visible{opacity:1;margin:0;}
.sist-balloon-visible span{opacity:1;}

#sist-balloon1{top:32.5%;left:58%;}
#sist-balloon2{top:69%;left:60%;}
#sist-balloon3{top:82.5%;left:60%;}
#sist-balloon4{top:50%;right:60.5%;}
#sist-balloon5{top:63.5%;right:61.5%;}
#sist-balloon6{top:88%;right:60.5%;}

/*** Tarefas ***/
#chef-image5, .chef-image5{width:23.5%; position:absolute;left:23%;top:18%;z-index:1; }
#tasks-balloon1{top:12.5%; left:50%; /*width:37%;*/ opacity:0; transition:1s; }
#tasks-balloon2{top:35%; left:48%;/* width:37%;*/  opacity:0; transition:1s;}

.star-box{position:absolute;top:2.5%;right:2%;color:#FFF;font-size:2em: font-weight:bold; display: flex; flex-wrap: wrap; align-items: center; width:15%; font-size:1.1em; border:0.20em solid var(--dark-orange); border-radius:0.7em; line-height:1em; text-align:center; background: var(--dark-orange);  }
.star-box-left{width:33.33%; padding:0.4em 0.4em; background:var(--light-orange); border-radius:0.7em 0 0 0.7em;}
.star-box-right{width:66.66%; }
.star-box-left img{}
.star-box-numbers{font-size:1.3em;line-height:1em;}
.star-box-actual{font-weight:800;}

#tasks-board{position:absolute;width:33%; height:77%; top:4%; right:4%; background:url('../img/board.png') no-repeat center top; background-size:100% auto; padding-top:19%; /*overflow: hidden;*/ }

#tasks-board2{position:absolute;width:33%; height:77%; top:4%; right:4%; background:url('../img/board3.png') no-repeat center top; background-size:100% auto; padding-top:19%; /*overflow: hidden;*/ }

#task-list, #task-list2{position:absolute; width:57%; top:31%; left:4%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.task-list-column{ width: 48%; }

.task-container{ position:relative; background: rgba(43, 132, 153, 0.3); margin-bottom:10%; opacity:0;}
.task-container:before{content:''; display:block; position:absolute; bottom:100%; left:0; width:100%; padding-top:2%; background: url('../img/paper_top2.png') repeat-x top left; background-size:100% auto;}
.task-container:after{content:''; display:block; position:absolute; top:100%; left:0; width:100%; padding-top:2%; background: url('../img/paper_bottom2.png') repeat-x top left; background-size:100% auto; }

.task-item{width:100%; background:#FFF; color:#000; padding:0.5em; position:relative; font-size:0.77em; position:absolute; top:0; left:0; cursor:grab; line-height:1.1em; /*z-index:1;*/ }
.task-item:before{content:''; display:block; position:absolute; bottom:100%; left:0; width:100%; padding-top:2%; background: url('../img/paper_top.png') repeat-x top left; background-size:100% auto;}
.task-item:after{content:''; display:block; position:absolute; top:100%; left:0; width:100%; padding-top:2%; background: url('../img/paper_bottom.png') repeat-x top left; background-size:100% auto;}
.task-drag{z-index:99; box-shadow:0 0 10px rgba(0,0,0,0.5); transform:scale(1.02,1.02); background-color:#FFF;}

#tasks-board .task-item, #tasks-board2 .task-item{position:relative; width:80%; margin:0 8%; background:url('../img/separator.png') no-repeat left bottom #FFF; background-size:100% auto; padding:3% 0 5% 0; }
#tasks-board .task-item:after, #tasks-board .task-item:before, #tasks-board2 .task-item:after, #tasks-board2 .task-item:before{display:none;}

#tasks-board .correction-item[data-answer="true"], #tasks-board2 .correction-item[data-answer="true"]{color:#009245;}
#tasks-board .correction-item[data-answer="false"], #tasks-board2 .correction-item[data-answer="false"]{color:#FF0000;}

#tasks-board .correction-item[data-answer="true"]:after, #tasks-board2 .correction-item[data-answer="true"]:after{content:''; display:block; position:absolute; top:50%; left:102%; transform:translate(0,-50%); background:url('../img/check.png') #FFF no-repeat center; background-size: 70% auto ; height:1.8em; width:1.8em; border:0.4em solid #009245; border-radius:50%; padding:0; box-shadow:0 0 0.4em rgba(0,0,0,0.4); }

#tasks-board .correction-item[data-answer="false"]:after, #tasks-board2 .correction-item[data-answer="false"]:after{content:''; display:block; position:absolute; top:50%; left:102%; transform:translate(0,-50%); background:url('../img/times.png') #FFF no-repeat center; background-size: 45% auto ; height:1.8em; width:1.8em; border:0.4em solid #FF0000; border-radius:50%; padding:0; box-shadow:0 0 0.4em rgba(0,0,0,0.4); }

.tasks-buttons{right:4%;bottom:6%;width:35%;}
.tasks-buttons .about-button{padding:1.25em 1em; display:inline-block; }
#tasks-verify, #tasks-verify2{min-width:45%;}
#tasks-try, #tasks-continue{display:none;}
#board-tasks2{position:absolute;width:43%;left:50%;bottom:2.5%;transform: translateX(-50%); display:none;}
#board-tasks2 img{width:100%;}
.tasks-sist-list{position:absolute;width:67%; top:33%; left:15%; z-index:1;height:60%;}

.sist-task-item{position:relative; width:90%; margin:0 5% 0 5%; background:url('../img/separator.png') no-repeat left bottom #FFF; background-size:100% auto; padding:3% 0 4% 0; font-size:0.75em; display:none; }
.sist-task-item:last-child{ background:#FFF; }

/*** Route ***/
#route-screen .panel1 .panel-container{background:url('../img/background3.png') no-repeat center; background-size:100% auto;}
.router-bar{position:absolute;  bottom:5%; right:0; display:flex; color:#FFF; flex-wrap: wrap; border-radius:1em 0 0 1em; background:rgba(39,120,135,0.6);}

.router-item{padding:1.5em 0.8em;position:relative; background:var(--medium-blue); opacity:0; transition:1s;border:0.25em solid var(--medium-blue);}
.router-item:last-child{padding-right:4em;}
.router-item h3{font-size:1em; font-weight:700; margin:0;}
.router-item h4{font-size:0.85em; font-weight:400; margin:0;}
.router-item-active{padding-left:2.5em;border-top:0.25em solid #FFF; border-bottom:0.25em solid #FFF; cursor:pointer;}
.router-item:first-child{border-radius:1em 0 0 1em;}
.router-item:before{ content:''; display:block; position:absolute; top:0; left:1.25em; width:0.6em; height:100%; background:url('../img/arrow_left.png') no-repeat center 1.8em; background-size:100% auto; opacity:0; transition:1s 1s;}
.router-item-active{border-radius:1em 0 0 1em; border:0.25em solid #FFF; border-right:none; }
.router-item-active:before{opacity: 1;}
.router-item-done{background:none; border:0.25em solid rgba(0,0,0,0.0) !important; }
.router-item-done:before{content:''; display:block; position:absolute; width:1.5em; height:1.5em; background: url('../img/check.png') no-repeat center #FFF; background-size:65% auto; border:0.25em solid #009245; border-radius:50%; top:0; left:0; transform: translate(-40%,-40%); box-shadow:0 0 0.5em rgba(0,0,0,0.5); opacity:1; }

/*** Activity 1 ***/
#activity1-screen .panel-subtitle{font-weight:1em;}
#chef-image6{position:absolute; width:20%; top:22%; right:11%;}
#activity1-screen .panel1 .panel-container{background:url('../img/background3.png') no-repeat center; background-size:100% auto;}
#activity1-balloon1{top:42%;right:30.5%;width:35%; opacity:0; transition:1s;}
#activity1-balloon2{top:54%;right:36%;width:35%; opacity:0; transition:1s;}

#chef-image7{position: absolute; width:37.3%; top:19%; right:3%;}
#books-image{position: absolute; width:40.6%; bottom:5%; left:3%;}
#activity1-balloon3{top:23%;right:39%; width:37%; opacity:0; transition: 1s;}
#activity1-balloon4{top:38%;right:44%; width:37%; opacity:0; transition: 1s;}

#book-item-wrapper{position:absolute;width:50%;height:80%;left:0;top:20%;}
.book-item-container{position:absolute; background:no-repeat center; background-size:100% auto;}
.book-drag{cursor:grab;}
.book-dragging{z-index:10;}
#book-item-container1{width:34%; top:5%; left:4%; background-image:url('../img/receita1_back.png');}
#book-item-container2{width:30%; top:53%; left:4%; background-image:url('../img/receita2_back.png');}
#book-item-container3{width:14%; top:8%; left:74%; background-image:url('../img/receita3_back.png');}
#book-item-container4{width:14%; top:8%; left:42%; background-image:url('../img/receita3_back.png');}
#book-item-container5{width:14%; top:8%; left:58%; background-image:url('../img/receita3_back.png');}
#book-item-container6{width:52%; top:25%; left:42%; background-image:url('../img/receita6_back.png');}
#book-item-container7{width:52%; top:75%; left:38%; background-image:url('../img/receita7_back.png');}

#book-container, #book-container2 {position:absolute;width:51%;height:77.2%;top:6%;right:0;background:url('../img/book.png') no-repeat top right; background-size:100% auto;}
#book-container2{top:20%; opacity:0; transition:1s;}
#book-inner, #book-inner2{position:relative;width:83%;margin:5% 0 0 11%;height:88%;}
.book-box{position:absolute;border:0.1em dashed var(--medium-orange); border-radius:1em; overflow: hidden; transition:0.3s;}
.book-box-title{color:#DF4E2C;font-weight:700;position:absolute;left:0; top:50%;text-align:center;transform:translateY(-50%);width:100%;font-family: 'Kalam', cursive;}
.book-dropped{border:none;}
.book-dropped .book-box-title{display:none;}

#book-container2 .book-box img{opacity:0;transition:1s;}
#book-container2 .book-box-title, #book-container2 .book-box{transition:1s;}

#book-box1, #book2-box1{width:62%;height:20%;top:3%;}
#book-box2, #book2-box2{width:35%;height:45%;top:0;left:64%;}
#book-box3, #book2-box3{width:18%;height:15%;top:26%; font-size:0.7em;}
#book-box4, #book2-box4{width:18%;height:15%;top:26%; left:21%; font-size:0.7em;}
#book-box5, #book2-box5{width:18%;height:15%;top:26%; left:42%; font-size:0.7em;}
#book-box6, #book2-box6{width:38%;height:48%; top:47%;}
#book-box6 .book-box-title, #book2-box6 .book-box-title{top:3%; transform:none;}
#book-box7, #book2-box7{width:55%;height:50%; top:48%; left:43%}
#book-box7 .book-box-title, #book2-box7 .book-box-title{top:3%; transform:none;}
.book-drop-wrong{box-shadow:0 0 0.2em 0.15em #FF0000; overflow: hidden;}
.book-drop-right{box-shadow:0 0 0.2em 0.15em #009245; overflow: hidden;}
#book2-box6 img{position:relative;width:90%;top:13%;left:5%;}
#book2-box7 img{position:relative;width:90%;top:13%;left:5%;}

/*#receita-sist1{position:absolute; top:28%; left:31%; z-index:99; font-size:0.8em; opacity:1;}
#receita-sist2{position:absolute; top:31%; left:59%; z-index:99; font-size:0.8em; opacity:1}
#receita-sist3{position:absolute; top:28%; left:31%; z-index:99; font-size:0.8em; opacity:1}
#receita-sist4{position:absolute; top:28%; left:31%; z-index:99; font-size:0.8em; opacity:1}
#receita-sist5{position:absolute; top:28%; left:31%; z-index:99; font-size:0.8em; opacity:1}
#receita-sist6{position:absolute; top:65%; left:31%; z-index:99; font-size:0.8em; opacity:1}
#receita-sist7{position:absolute; top:28%; left:31%; z-index:99; font-size:0.8em; opacity:1}*/

.book-buttons{position:absolute;width:51%;right:0;bottom:6%;}
.book-buttons .about-button{min-width:25%;}

#chef-image8{position:absolute; width:36%; top: 19%; left:18%; z-index:1; }
#activity1-balloon5{position:absolute;top:22%;left:53%;opacity:0;transition:1s;}
#activity1-balloon6{position:absolute;top:36%;left:56%;opacity:0;transition:1s;}

#task-list2{display:block; width:26%; top:35%; left:20%; }
#task-list2 .task-list-column{width:100%;}
#tasks-board2{right:15%;padding-top:26%;}
#tasks-try2, #tasks-continue2{display:none;}
.tasks-board-title{position:absolute;;width:100%;color:#E06349;font-weight:700; text-align:center; top:35%; padding:0 5% 0 1%; font-size:0.9em;}
#activity1-screen .tasks-buttons{right:15%;bottom:6%;width:35%;}

#chef-image9{position:absolute;width:39.25%;top:34%;left:5%;z-index:2;}
#receita-image{position:absolute;width:30.2%;left:50%;top:26%;z-index:1;}
#activity1-balloon7{position:absolute;top:24%;left:38%;z-index:3;opacity:0;transition:1s;}
#activity1-balloon8{position:absolute;top:38%;left:35%;z-index:3;opacity:0;transition:1s;}

#chef-image10{position:absolute;width:37%;top:19%;left:54%;opacity:0; transition:1s;}
#activity1-balloon9{position:absolute;top:37%;left:20%;width:37%;opacity:0; transition:1s;}
#activity1-balloon10{position:absolute;top:53%;left:15%;width:37%;opacity:0; transition:1s;}
.help-buttons{position:absolute;width:18%;left:4%;bottom:5%;}
.help-button{background:#288BA2;font-weight:800;border-radius:0.7em; box-shadow: 0 0 0.75em rgba(0,0,0,0.5); padding:0.5em 0.75em;color:#FFF; text-align:center; cursor:pointer; font-size:0.8em; line-height:1.4em; margin-top:1.75em; transition:0.3s;}
.help-button:hover{opacity:0.7;}

.pop-anim{animation:pop 0.75s 2 ;}
@keyframes pop{
    0%{transform:scale(1,1);}
    50%{transform:scale(1.1,1.1);}
    100%{transform:scale(1,1);}
}

#answer-board1{display:none;}
.answer-board{position:absolute; bottom:0; right:10%; border-radius:1em 1em 0 0; background: var(--medium-blue); text-align:center; min-height:85%; width:44%; color:#FFF;}
.answer-board-title{position:absolute; width:100%; padding:1.5em; font-weight:700; margin-bottom:1.5em;}
.answer-board-content{position:absolute; left:0; top:17%; width:100%; height:68%; overflow: hidden;}
.answer-board-item{position:absolute;height:100%;width:90%;margin:0 5%; left:100%;}
.answer-board-item:first-child{left:0;}
.answer-board-question{position:relative;border:0.2em solid var(--dark-orange); border-radius:1em 1em 0 0; height:50%;}
.answer-board-question h3{font-size:1.44em; font-weight:400; position:absolute; width:100%; top:50%; transform:translateY(-50%);padding:0.5em;}
.answer-board-answers{position:relative;border:0.2em solid var(--dark-orange); border-top:none; border-radius:0 0 1em 1em; height:50%;}
.answer-board-answer{display:inline-block; position:relative; top:50%; transform:translateY(-50%); margin:0 0.75em;}
.answer-button{position:relative; height:4em; width:4em; text-align:center; line-height:1em; background:#FFF; border-radius:50%; color:#288BA2; border:0.5em solid #288BA2; box-shadow:0 0 0.75em rgba(0,0,0,0.5); font-weight:700; padding-top:1em; cursor:pointer; font-size:0.9em; transition: 0.3s;}
.answer-button:hover{transition:0.3s; opacity:0.7;}
.answer-button img{position:absolute;width:60%;top:50%;left:50%; transform:translate(-50%,-50%);}
.board-answer2{margin:0 0.5em;}
.board-answer2 .answer-button{height:5em; width:5em; margin:0;}
.board-answer-correct:after{content:'';display:block; position: absolute; height:1.5em; width:1.5em; top:-0.75em; right:-0.5em; background:url('../img/check.png') no-repeat center #FFF; background-size:60% auto; border:0.3em solid #009245; border-radius:50%;}
.board-answer-incorrect:after{content:'';display:block; position: absolute; height:1.5em; width:1.5em; top:-0.75em; right:-0.5em; background:url('../img/times.png') no-repeat center #FFF; background-size:50% auto; border:0.3em solid #FF0000; border-radius:50%;}

.answer-nav{position:absolute; background:var(--dark-orange); bottom:0; left:50%; transform: translateX(-50%); padding:0.5em 0.5em 0.3em 0.5em; border-radius:0.75em 0.75em 0 0;}
.answer-nav-button{display: inline-block; padding:0.5em 1em; margin:0 0.25em; height:2em; width: 2em; border-radius:50%; cursor:pointer; box-shadow:0 0 0.75em rgba(0,0,0,0.4); transition: background 0.3s, opacity 0.3s; }
.answer-nav-button:hover{opacity:0.8;}
.answer-nav-left{ background-image:url('../img/arrow_small_left.png'); background-position:45% center; background-repeat: no-repeat; background-color: var(--light-blue2);  background-size:30% auto; }
.answer-nav-right{ background-image:url('../img/arrow_small_right.png'); background-position: 55% center; background-repeat: no-repeat; background-color: var(--light-blue2); background-size:30% auto; margin-left:0.5em; }

#help-panel1, #help-panel2{display:none;z-index:99;}
.panel-title2{font-size:2.3em;color:#FFF;margin:0;line-height:1em;}
.help-panel{padding:2.5em;}
.help-panel img{position:relative;height:85%;margin-top:5%;}
#activity1-balloon11{top:23%; left:50%; width:35%; opacity:0; transition:1s; }
#activity1-balloon12{top:39%; left:47%; width:35%; opacity:0; transition:1s;}

.panel-extra-title{position:absolute; width:64%; left:36%; top:14%; font-family: 'Kalam', cursive; font-size:1.8em; color:#FFF; font-weight:700; text-align:center;}

/*** Pictograma ***/
.picto-container{position:absolute;width:61%;right:0;bottom:0;height:75%;background:var(--medium-orange); border-radius:1em 0 0 0;}
.picto{position:relative;height:65%;top:0;width:90%;margin:0 5%;display:flex;}
.picto-item{position:relative; height:100%; width:100%; }
.picto-validation{}
.pic-item-content{position:absolute;width:100%;height:75%;top:25%;border:1px dashed #FFF;border-left:none;}
.pic-item-content img{ position:absolute; width:90%; margin-left:5%;}
.pic-item-content img:nth-child(1){bottom:2%;}
.pic-item-content img:nth-child(2){bottom:26%;}
.pic-item-content img:nth-child(3){bottom:50%;}
.pic-item-content img:nth-child(4){bottom:75%;}
.picto-item:first-child .pic-item-content{border-left:1px dashed #FFF;}

.picto-subtitle{position:absolute;top:100%;color:#FFF;font-family: 'Kalam', cursive; text-align: center; width:100%; border:1px dashed #FFF; border-top:none; border-left:none;}
.picto-flash{opacity:1;animation:picto-flash-anim 1s infinite;}
@keyframes picto-flash-anim{
    0%{opacity:1;}
    50%{opacity:0;}
    100%{opacity:1;}
}
.picto-item:first-child .picto-subtitle{border-left:1px dashed #FFF;}

.picto-validation{position:absolute;width:100%;padding-top:100%;top:7%;left:0; }
.picto-correct:after{content:'';position:absolute; box-sizing: border-box; display:block; width:90%; height:90%; top:5%; left:5%; border:0.2em solid #009245; background:url('../img/check.png') center no-repeat #FFF; background-size:60% auto; border-radius:50%; box-shadow:0 0 1em rgba(0,0,0,0.4);}
.picto-incorrect:after{content:'';position:absolute; box-sizing: border-box; display:block; width:90%; height:90%; top:5%; left:5%; border:0.2em solid red; background:url('../img/times.png') center no-repeat #FFF; background-size:50% auto; border-radius:50%; box-shadow:0 0 1em rgba(0,0,0,0.4);}

.picto-grabber{position:absolute; background:var(--medium-orange); border-radius:1em 0 0 1em; right:100%; top:16%; padding:0.5em; width:12%;}
.picto-grabber-item{width:100%;}
.picto-grabber-subtitle{font-family: 'Kalam', cursive; text-align: center; color:#FFF; font-size:0.7em; margin-bottom:1.5em;}
.glasses-container{position:relative;}
.glasses-container img{position: absolute; width:80%; left:10%; cursor: grab; opacity:0;}
.glasses-container img:first-child{position:relative; opacity:1; z-index:9;}

.picto-buttons{position:absolute;width:100%;width:61%;right:0;bottom:5%;}
#help-button3{margin:0;}
#picto-button1,#picto-button2, #picto-button3{display:inline-block; margin:0; padding:1.3em 2em;position:absolute;margin:0;bottom:0;}
#picto-button1{left:50%;transform:translateX(-50%);}
#picto-button2{position:absolute;left:5%; display:none;}
#picto-button3{position:absolute;right:5%;  display:none;}
#glass-half-container{border-radius:0.5em; background:var(--medium-orange); box-shadow:0 0 1em rgba(0,0,0,0);}
.glass-anim{animation:glass-anim 1.2s 3; }
@keyframes glass-anim{
0%{transform:scale(1,1); box-shadow:0 0 0em rgba(0,0,0,0); }
50%{transform:scale(1.3,1.3); box-shadow:0 0 0.8em rgba(0,0,0,0.5); }
100%{transform:scale(1,1);  box-shadow:0 0 0em rgba(0,0,0,0); }
}

#activity1-balloon13{top:33%; left:48%; opacity:0; transition:1s; }
#activity1-balloon14{top:49%; left:53%; opacity:0; transition:1s;}
#help-panel4{z-index:99;}
#help-image4{width:75%; height:auto; margin-top:8em;}

/* Activity 1 - Answers 2 */
#answer-board2 .answer-board-content{position:absolute; left:0; top:1.5em; width:100%; height:81%; overflow: hidden;}
#answer-board2 .answer-board-question{ height:35%;}
#answer-board2 .answer-board-answers{ height:65%; }
#answer-board2 .answers-wrapper{display:flex; flex-wrap: wrap; justify-content:space-around; position:relative; top:50%; transform:translateY(-50%);}
#answer-board2 .answer-board-answer{display:block; top:auto; transform:none; margin:1%;}
#answer-board2 .multiple-answer-button{ width:6.5em; height:6.5em; margin:0; padding-top:2.3em; font-size:0.6em; font-weight:800; }

/*** Activity 2 ***/
#chef-image11{position:absolute;width:37.2%;top:18%;right:10%;}
#activity2-balloon1{position:absolute;width:38%;top:30%;left:19%;opacity:0;transition:1s;}
#activity2-balloon2{position:absolute;width:38%;top:41%;left:14%;opacity:0;transition:1s;}
#activity2-balloon3{position:absolute;width:38%;top:54%;left:9%;opacity:0;transition:1s;}

.question-table{position:absolute; width: 47%; top:28%; left:2%; display:flex; flex-wrap: wrap; }
.question-table-row{  }
.question-table-column{position:relative;}
.question-table-column:nth-child(1){width:40%;}
.question-table-column:nth-child(2){width:20%;}
.question-table-column:nth-child(3){width:20%; z-index:2;}
.question-table-column:nth-child(4){width:20%;}
.question-table-cell{border:1px dashed #FFF; border-left:none; border-bottom:none;  color:#FFF; font-family: 'Kalam', cursive; font-size:0.83em; padding:1.1em 0; height:3.2em; line-height:1em; text-align:center; width:100%; }
.question-table-cell:first-child{ height:2.5em; padding:0.75em 0; }
.question-table-cell:last-child{ border-bottom:1px dashed #FFF;}
.question-table-column:nth-child(1) .question-table-cell{ text-align:left;}
.question-table-column .no-border{border:none; border-right:1px dashed #FFF; }
.question-table-check{display:inline-block;height:1.2em;width:1.2em;background:#FFF;border-radius:50%; cursor:pointer;}
.table-checked{background:url('../img/check2.png') no-repeat center #288BA2; background-size:70% auto;}

.column-correct:after{content:''; display:block; box-sizing: content-box; position:absolute; width:95%; height:99%; top:-0.2em; left:-0.2em; border:0.25em solid #009245;  }
.column-correct:before{content:''; display:block; position:absolute; top:-0.2em; right:-0.8em; transform:translate(0,-50%); background:url('../img/check.png') #FFF no-repeat center; background-size: 65% auto ; height:1.4em; width:1.4em; border:0.3em solid #009245; border-radius:50%; padding:0; box-shadow:0 0 0.4em rgba(0,0,0,0.4); z-index:3;}

.column-incorrect:after{content:'';display:block; box-sizing: content-box; position:absolute; width:95%; height:99%; top:-0.20em; left:-0.20em; border:0.25em solid red; }
.column-incorrect:before{content:''; display:block; position:absolute; top:-0.2em; right:-0.8em; transform:translate(0,-50%); background:url('../img/times.png') #FFF no-repeat center; background-size: 50% auto ; height:1.4em; width:1.4em; border:0.3em solid #FF0000; border-radius:50%; padding:0; box-shadow:0 0 0.4em rgba(0,0,0,0.4); z-index:3;}

.table-buttons{position:absolute;width:47%; bottom:5%;left:2%; height:3em;}
.table-buttons .about-button{position:absolute; margin:0; min-width:33.33%; text-align:center;}
#receitas-verify{ left:50%; transform:translateX(-50%); }
#receitas-back{ left:0; display:none;}
#receitas-forward{ right:0; display:none; }


.questions-container{position:absolute; width:49%; height:100%; right:0; top:0; background:var(--medium-blue); border-radius:1em 0 0 0; padding:4% 4%; overflow:hidden;}
.questions-inner-container{position:relative; height:95%; border:0.15em solid var(--dark-orange); border-radius:1em; }
.question-slides{position:relative; height:100%;}
.question-slide{position:absolute; height:100%; width:100%; left:120%;}
.question-slide:first-child{left:0;}
.question-slide img{ position:absolute; height:85%; width:auto; max-width:none; top:50%; left:50%; transform:translate(-50%,-50%)}
.question-navigator{width:100%; top:100%; text-align:center; transform:translateY(-50%); color:#FFF;}
.question-nav-item{ display: inline-block; background:var(--dark-orange); vertical-align:middle; height:3em; padding:0.5em 0.5em; margin:0 0.1em;}
.question-nav-item span{display:inline-block; padding:0.5em 1em 0 1em; font-size:0.8em; font-weight:700;}
.question-nav-item:first-child{ border-radius:1em 1em 0 1em;}
.question-nav-item:last-child{ border-radius:1em 1em 1em 0;}
.question-nav-button{ display:inline-block; height:2em; width: 2em; border-radius:50%; cursor:pointer; box-shadow: 0 0 7px rgba(0,0,0,0.4); transition: background 0.3s, opacity 0.3s;}
.question-nav-button:first-child{margin-right:0.5em;}
.question-nav-button:hover{opacity:0.8;}
.left-nav{ background-image:url('../img/arrow_small_left.png'); background-position:45% center; background-repeat: no-repeat; background-color: var(--light-blue2);  background-size:30% auto; }
.right-nav{ background-image:url('../img/arrow_small_right.png'); background-position:55% center; background-repeat: no-repeat; background-color: var(--light-blue2);  background-size:30% auto; }

#book-container3 {position:absolute; width:52%; height:79%; bottom:2%; right:0; background:url('../img/book.png') no-repeat top right; background-size:100% auto; opacity:0; transition:1s;}
.book-container-wrapper3{width:80%;margin:18% 0 0 12%;}
.book-container-wrapper3 div{transition:1s;opacity:0;}
.receitas-sist1{ font-weight:bold; margin-bottom:1em;}
.receitas-sist2{ color:#FFF; background:var(--dark-blue); padding:0.5em; border-radius:0.75em; font-size:0.85em; margin:1.5em 0;}
.receitas-sist3{font-family: 'Kalam', cursive; color:#DF4E2C; background:url('../img/check3.png') no-repeat left center; background-size:auto 0.8em; padding-left: 2.3em; font-weight:bold; font-size:0.85em;}

#activity2-balloon4{top:33%; left:48%; opacity:0; transition:1s; }
#activity2-balloon5{top:47%; left:53%; opacity:0; transition:1s;}

#help-buttons14{width:50%; display:flex; align-items:center;}
#help-button4{/*position:absolute;bottom:6%;left:3%;*/ margin:0;}

#answer-board3{right:5%;}
#answer-board3 .answer-board-content{position:absolute; left:0; top:1.5em; width:100%; height:75%; overflow: hidden;}
#answer-board3 .answer-board-question{height:75%;font-size:0.9em;}
#answer-board3 .answer-board-answers{height:25%;}
#answer-board3 .answer-board-answer{display:block; top:auto; transform:none; margin:1%;}
#answer-board3 .answers-wrapper{display:flex; flex-wrap: wrap; justify-content:space-around; position:relative; top:50%; transform:translateY(-50%);}
.answer-control-buttons{position:absolute; width:100%; bottom:8%; }
#answer-button7{position:absolute; left:1.5em; bottom:0; margin:0; display:none;}
#answer-button8{position:absolute; right:1.5em; bottom:0; margin:0; display:none;}

#help-buttons2{width:50%;display:flex; align-items:center;}
#help-button5{margin:0;}
.hint-button{background:url('../img/lamp2.png') no-repeat center var(--light-blue); background-size:50% auto; height:3em; width:3em; box-shadow:0 0 0.75em rgba(0,0,0,0.4); border-radius:0.7em; margin-left:1.5em; cursor:pointer; opacity:1; transition:0.3s; display:none;}
.hint-button:hover{opacity:0.7;}
#help-panel5, #hint-panel2{z-index:99;}
#hint-image2{width:80%;height:auto;margin-top:6em;}
#hint-balloon{opacity:1; display:none; width:22%;top:69%;left:19.5%;font-size:0.8em;}

#hint-button-summer{display:block;}
#hint-balloon-summer{opacity:1; display:none; width:22%;top:69%;left:15.5%;font-size:0.8em;}

/*.sist-balloon{position:absolute;color:#FFF; background: var(--dark-blue); padding:1em; border-radius:0.9em;font-weight:bold; min-width:20%; text-align: center; opacity:0; transition:opacity 0.6s, margin 1s cubic-bezier(.48,1.96,.47,.94) }
.sist-balloon:before{content:''; position:absolute; display:block; height:1.1em; width:1.1em; background: var(--dark-blue); top:50%; transform:translate(-50%,-50%) rotateZ(45deg);  }
.sist-balloon:after{content:'';display:block;position:absolute;height:0.5em;width:0.5em; top:50%; border:0.3em solid var(--dark-orange); }
.sist-balloon span{opacity:0; transition:0.3s 0.8s;}*/

/*** Activity 3 ***/
#chef-image12{position:absolute;width:37.2%;top:18%;right:10%;}
#activity3-balloon1{position:absolute;width:38%;top:30%;left:16%;opacity:0;transition:1s;}
#activity3-balloon2{position:absolute;width:38%;top:43%;left:11%;opacity:0;transition:1s;}

.receitas3-container{position:absolute; width:72%; left:15%; top:28%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.receita3{width:45%; text-align: center; color:#FFF; position:relative;}
.receita3-title{font-weight:800; font-size:0.8em; margin-bottom:1em;}
.receita3 img{display:block; width:100%;}
#receita3-button1{position:absolute;bottom:5%;left:50%;transform:translateX(-50%); text-align:center;}

.receitas-expo-container{position:absolute; width:36%; top:27%; left:8%;}
.receitas-expo{}
.receitas-expo-item{display:none;}
.receitas-expo-item:first-child{display:block;}
.receitas-expo-item img{ display:block; width:100%;}
.receitas-expo-buttons{ width:100%; display:flex; justify-content: space-between; margin-top:1em;}
.receitas-expo-button{margin:0;width:40%;text-align:center;}
.expo-active-button{opacity:0.7;}

#answer-board4{right:5%; height:87%;}
#answer-board4 .answer-board-content, #answer-board5 .answer-board-content{position:absolute; left:0; top:1.5em; width:100%; height:80%; overflow: hidden;}
#answer-board4 .answer-board-question{height:30%;font-size:0.9em;}
#answer-board4 .answer-board-answers{height:70%;}
#answer-board4 .answer-board-answer, #answer-board5 .answer-board-answer{display:block; top:auto; transform:none; margin:1%;}
#answer-board4 .answers-wrapper, #answer-board5 .answers-wrapper{display:flex; flex-wrap: wrap; justify-content:space-around; position:relative; top:50%; transform:translateY(-50%);}
.answer-control-buttons{position:absolute; width:100%; bottom:8%; }

.answer-select{background:#DDD; padding:0.5em; color:#1E6879; width:70%; margin:2em 0 0 0; font-family: inherit; font-size:inherit; border:none; font-weight:500;}
.sub-select{margin-top:2em;display:none;}
.sub-select label{display:block;margin-bottom:0.5em;}
.sub-select .answer-select{margin:0;}

#receitas3-sist-image, #receitas3-sist-image2{ position:absolute; width:45%; top:25%; right:5%; display:none; }
#receitas3-sist-image2{display:none;}
#act3-sist-balloon1{width:30%;top:43%;left:18%;z-index:99;}
#act3-sist-balloon2{width:30%;top:43%;left:18%;z-index:99;}
#act3-sist-balloon1:before, #act3-sist-balloon1:after, #act3-sist-balloon2:before, #act3-sist-balloon2:after{top:2em;}
#act3-sist-balloon1 span span, #act3-sist-balloon2 span span{color:var(--dark-orange);}
.chef-image13{width:23.5%; position:absolute;left:32%;top:18%;z-index:1; }
#activity3-balloon3{ position:absolute; top:35%; left:58%; opacity:0; transition:1s;}
#activity3-balloon4{ position:absolute; top:48%; left:63%; opacity:0; transition:1s;}

#answer-board5{right:5%; height:95%;}
#answer-board5 .answer-board-question{height:25%;font-size:0.9em;}
#answer-board5 .answer-board-answers{height:75%;}
#answer-board5 .answer-select{ background:#f2f2f2; text-align:center; margin:0; padding:0.25em 0.5em; width:100%; font-size:0.9em; }

#answer-board5 .answer-select-container{position:relative; margin:0 auto; padding:0.5em 0; width:80%;}
#answer-board5 .answer-board-answers{ padding-top:1.5em; }

#answer-board5 .select-correct:before{content:''; display:block; position:absolute; top:50%; left:0; transform:translate(-110%,-50%); background:url('../img/check.png') #FFF no-repeat center; background-size: 70% auto ; height:1.4em; width:1.4em; border:0.3em solid #009245; border-radius:50%; padding:0; box-shadow:0 0 0.4em rgba(0,0,0,0.4);z-index:19;}
#answer-board5 .select-incorrect:before{content:''; display:block; position:absolute; top:50%; left:0; transform:translate(-110%,-50%); background:url('../img/times.png') #FFF no-repeat center; background-size: 50% auto ; height:1.4em; width:1.4em; border:0.3em solid #FF0000; border-radius:50%; padding:0; box-shadow:0 0 0.4em rgba(0,0,0,0.4); z-index:19;}
#answer-button10{position:absolute; left:1.5em; bottom:0; margin:0;display:none;}
#answer-button11{position:absolute; right:1.5em; bottom:0; margin:0; display:none;}
#answer-board5 .answer-control-buttons{position:absolute;bottom:4%;}
#chef-image13{position:absolute;width:37.2%;top:18%;right:10%;}
#activity3-balloon5{ position:absolute; top:35%; left:58%; opacity:0; transition:1s;}
#activity3-balloon6{ position:absolute; top:48%; left:63%; opacity:0; transition:1s;}

#vegi-image{ position:absolute; width:35%; top:45%; left:5%;}
#question-table2{position:absolute; width: 45%; top:25%; left:45%; display:flex; flex-wrap: wrap; }
#question-table2 .question-table-column:nth-child(1){width:48%;}
#question-table2 .question-table-column:nth-child(2){position:relative; width:26%; z-index:4;}
#question-table2 .question-table-column:nth-child(3){width:26%;}

.table-buttons2{position:absolute;width:45%; bottom:6%;left:45%; height:3em;}
.table-buttons2 .about-button{position:absolute; margin:0; min-width:33.33%; text-align:center;}
#vegi-verify{ left:50%; transform:translateX(-50%); }
#vegi-back{ left:0; display:none;}
#vegi-forward{ right:0; display:none; }

#question-table2 .column-incorrect:after{ width:97%; height:99%; top:-0.1em;}
#question-table2 .column-correct:after{ width:97%; height:99%; top:-0.1em;}

/*** Activity 4 ***/
.chef-image14{position:absolute;width:36%; position:absolute; right:12%; top:19%; z-index:1; }
#activity4-balloon1{position:absolute; top:33%; left:20%; opacity:1; transition:1s;}
.receita-video-container{position:absolute; width:72%; top:25%; left:14%;}
.receita-video-container:after{content:''; position:absolute; width:100%; height:100%; padding:0 0 0.6em 0; background:var(--medium-orange); top:0; left:0.6em;}
#receita-video{width:100%;display:block; position:relative; border:0.8em solid var(--dark-blue); z-index:1; }
#receita-next{position:absolute;bottom:5%; left:50%; transform: translateX(-50%); text-align: center; }

#activity4-balloon3{position:absolute; top:33%; left:21%; opacity:0; transition:1s;}
#activity4-balloon4{position:absolute; top:49%; left:12%; opacity:0; transition:1s;}

.receita-form-container{position:absolute;width:85%;height:74%; left:7.5%;bottom:0;background:var(--medium-blue); border-radius:1em 1em 0 0; padding:2em 3em;}

#receita-form{display:flex; flex-wrap:wrap; justify-content: space-between;}
.receita-form-column{width:48%;}
#receita-form label{display:block; color:#FFF; font-family: 'Kalam', cursive; font-weight: 700; margin-bottom:0.1em; }
#receita-form input[type="text"], #receita-form textarea{background:#FFF; font-family:inherit; font-size: inherit; border:none; padding:0.35em; width:100%; font-size:0.9em; margin-bottom:0.7em; resize:none;}
#receita-form #receita-ingredients{height:5em;}
#receita-form #receita-preparation{height:8em;}
.receita-form-note{font-family: 'Kalam', cursive; font-size:0.8em; margin-top:3em; color:#FFF; }

.form-buttons{display:flex; justify-content: space-between; margin-top:1em;}
.form-button{background:var(--light-blue); border:0.4em solid var(--dark-blue); border-radius:1em; cursor:pointer; transition:0.3s;}
.form-button:hover{opacity:0.8;}
#form-help-button{background:url('../img/lamp2.png') no-repeat center var(--light-blue); background-size:60% auto; height:4em; width:4em; }
#receita-form input[type="submit"]{color:#FFF;padding:0.5em 2em;}
#help-panel6{z-index:99;}
.receita-help-container{display:flex; flex-wrap: wrap; justify-content:space-between; margin-top:2em;}
.receita-help-image{width:46%; }

.fr-container{ position:absolute; width:50%; height:85%; top:5%; right:5%; background:url('../img/rf_background.png') no-repeat top center; background-size:100% 97%; padding:2em; overflow:hidden;}
.fr-flex{ display:flex; flex-wrap: wrap;}
.fr-title{ font-family: 'Kalam', cursive; color:var(--dark-orange); font-size:2em; font-weight:700; line-height:1.2em; padding-bottom:0.15em; margin-bottom:0.5em; min-height:1em; background:url('../img/receita_border.png') no-repeat left bottom; background-size:100% auto;}
.fr-specs{width:50%;margin-top:1em;}
.fr-image{width:50%;margin-top:0.5em;}
.fr-image img{width:100%;}
.fr-specs div{ padding:0.25em 0 0.25em 2.5em; margin-bottom:0.75em; font-weight:700; font-size:0.9em; min-height:1.5em;}
.fr-dificulty{background:url('../img/rf_spec1.png') no-repeat center left; background-size:auto 100%;}
.fr-time{background:url('../img/rf_spec2.png') no-repeat center left; background-size:auto 100%;}
.fr-people{background:url('../img/rf_spec3.png') no-repeat center left; background-size:auto 100%;}

.fr-texts{justify-content:space-between; margin-top:1em; font-family: 'Raleway', sans-serif;}
.fr-column{width:47%; font-size:0.9em; padding:1em 0;}
.fr-column:first-child{ background:#BEEDD1; border-radius:1em;  padding:1em;}
.fr-subtitle{font-family: 'Kalam', cursive; color:var(--dark-orange); font-size:1.1em; font-weight:700;}
.fr-text{font-size:0.8em;}
#fr-next{position:absolute; bottom:4%; right:11%; text-align:center; }
#fr-print{position:absolute; bottom:4%; right:31%; text-align:center; }

#final-image{width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#activity4-balloon5{top:11%;left:4%; opacity:0; transition:1s;}
#activity4-balloon6{top:30%;left:7%; opacity:0; transition:1s;}



/* 

Fixes

*/
.zoom-button{ position:absolute; background:url('../img/search-plus-solid.svg') center no-repeat; background-size:contain; cursor:pointer; }
.zoom-button1{ bottom:0.5em; right:0.5em; width:1.5em; height:1.5em; opacity:0.8;  }
.zoom-viewer{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:99; display:none;}
.zoom-viewer img{position:absolute; height:80%; top:10%; left:50%; transform:translateX(-50%); }

#help-buttons-extra{width:50%;display:flex; align-items:center;}
#help-button-extra{margin:0;padding:1em 1em;}
#extra-panel9{z-index:99;}

@media print { 
  /* All your print styles go here */
  /**{background-color:#FFF !important;}*/
  .panel-title-wrapper{display:none;}
  .fr-container{width:100%;left:0;}
  .panel-container{width:90% !important; margin:0 auto; height:950px !important; overflow:visible !important; padding:0 2em 2em 2em;}
  .about-button{display:none;}
  #app-navigator{display:none;}
 }