html,body {
  margin:0;
  padding:0;
  height:100%;
}

#beta{
  position:absolute;
  top:0px;
  right:0px;
  pointer-events:none;
  width:10%;
}
#beta img{
  width:100%;
}

body {
  background-color:#f6f6f6;
  font-family:Roboto,Arial;
  color:#333;
  overflow:hidden;
  cursor:default;
  box-sizing:border-box;
  font-size: 100%; /* font size base */
}

.noselect {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selectable {
    -webkit-user-drag: initial;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}


.wrapper {
  margin:auto;
  position:relative;
  height:100%;
  overflow:auto;
  box-sizing:border-box;
}

.clearFix {
  clear:both;
}

.screen {
  opacity: 1;
  position:relative;
  margin-left:1em;
  margin-right:1em;
  min-height:calc(100%-128px);
}

.screen.ng-hide-add, .screen.ng-hide-remove {
  transition: opacity ease 0.5s;
}

.screen.ng-hide {
  opacity: 0;
}

/* Test colors */
.colorT1 {
  background:#ffb762;
}
.colorT2 {
  background:#c7daee;
}
.colorT3 {
  background:#9ddcc8;
}
.colorT4 {
  background:#fca1c4;
}
.colorT5 {
  background:#dcc7ee;
}
.colorTM {
  background:#ddd;
}

/* =================================================================================
     Page header 
   ================================================================================= */
#head {
  padding:1em;
  padding-top: 1.5em;
  opacity: 1;
}
#head.ng-hide-add, #head.ng-hide-remove {
  transition: opacity ease 1.5s;
}
#head.ng-hide {
  opacity: 0;
}

#head .headLogo {
  height:6em;
  position: absolute;
  right: 1em;
  z-index: 100;
  top: 0.8em;
}

#head .headTitle {
  display:inline;
  color:#58bbc4;
  font-size:120%;
  font-weight:800;
  margin-right:2em;
  cursor:pointer;
}

#head .menuBar {
  display:inline;
  vertical-align:bottom;
}

#head .menuBar div {
  display:inline;
  margin-right:1em;
  cursor:pointer;
}
#head .menuBar div:hover {
  color:#58bbc4;
}
#head .menuBar .userClasscode {
  font-weight:bold;
}

/* =================================================================================
     Landing Screen 
   ================================================================================= */
#landingScreen .landingWrapper { 
  text-align:center;
  margin-top:10%;
}
#landingScreen .landingLanguageButton,
#landingScreen .landingStartButton {
  font-size:120%;
  cursor:pointer;
  background:#58bbc4;
  color:#fff;
  padding:0.5em;
  font-weight:normal;
  border-radius:2px;
  display:inline-block;
  text-transform:uppercase;
}
#landingScreen .landingLanguageButton:hover,
#landingScreen .landingStartButton:hover {
  background: #eb76ab;
}


/* =================================================================================
     Test Done Screen 
   ================================================================================= */

#testDoneScreen .result {
  text-align:center;
  padding:2em;
}

#testDoneScreen .result .finalTitle {
  text-align:center;
  color:#ffc200;
  font-size:200%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:1em;
  line-height:1.25em;
}
#testDoneScreen .result .finalImage {
  font-size:28px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 1em;
  padding:1em;
}
#testDoneScreen .result .finalImage .fa {
  font-size:2.5em;
  line-height: 2em;
  color:white;
}


#testDoneScreen .result .buttonBar {
  padding:2em;
  clear:both;
}
#testDoneScreen .result .percent {
  padding:0.5em;
  font-size:2em;
}

#testDoneScreen .result .finishButton {
  display:inline-block;
  cursor:pointer;
  background:#58bbc4;
  color:#fff;
  padding:0.5em;
  padding-right:1em;
  font-weight:normal;
  border-radius:2px;
  text-transform:uppercase;
}
#testDoneScreen .result .finishButton:hover {
  background: #eb76ab;
}

#testScreen .progress-score {
  position:absolute;
  display:none;
  top:0px;
  left:0px;
  width:100%;
  pointer-events:none;
  text-align:center;
}

#testScreen .progress-score > div {
  display: inline-block;
  white-space: nowrap;
  background: white;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;

  color: #ffc200;
}


/* =================================================================================
     Admin Task Screen 
   ================================================================================= */

#adminScreen .welcome {
  margin-top:0.5em;
  color:#ffc200;
  font-size:200%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.25em;
}

#adminScreen .taskStatsPanel {
  position:absolute;
  background:white;
  box-shadow:0px 0px 4px #eee;
  z-index:10;
  display:block !important;
  width:250px;
  padding:20px;
}

#adminScreen .taskStatsPanel .taskStatsTask {
  font-style:italic;
  margin-bottom:1em;
}

#adminScreen .taskStatsPanel .statBar {
  position:relative;
  background:#ffcccc;
  width:100%;
  height:20px;
  margin:5px;
}
#adminScreen .taskStatsPanel .statBarGreen {
  background:#ccffcc;
  height:20px;
  position:absolute;
  left:0;
  top:0;
}
#adminScreen .taskStatsPanel .statBarLabel {
  position:absolute;
  width:100%;
  text-align:left;
  height:20px;
}
#adminScreen .taskStatsPanel .okButton {
  cursor:pointer;
  float:right;
  display:block;
  padding:0.2em;
  box-sizing: border-box;
  white-space: nowrap;
  background:#58bbc4;
  color:white;
}

#adminScreen .taskList {
  display:table;
  border-spacing:4px;
  max-width: 95%;
}

#adminScreen .taskManagement .taskTestName {
  margin-top:0.5em;
  color:#ffc200;
  font-size:100%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.25em;
}

#adminScreen .taskList .taskListEntry,
#adminScreen .taskList .taskListEntryHeader {
  display:table-row;
}

#adminScreen .taskList .taskListEntry > div {
  display:table-cell;
}
#adminScreen .taskList .taskListEntry > div.gap {
  margin-top:1em;
}

#adminScreen .taskList .taskListEntryHeader > div { 
  font-weight:bold;
  display:table-cell;
  font-size:90%;
}

#adminScreen .taskList .taskListEntry .toggleButton,
#adminScreen .addTaskButton,
#adminScreen .saveTasksButton {
  cursor:pointer;
  display:inline-block;
  padding:0.2em;
  padding-right:0.5em;
  box-sizing: border-box;
  white-space: nowrap;
  background:#58bbc4;
  color:white;
}
#adminScreen .saveTasksButton {
  margin-left: 33.6em;
  margin-bottom:3em;
}

#adminScreen .taskList .taskListEntry .toggleButton.disabled {
  color:#45888E;
}
#adminScreen .addTaskButton {
  margin-top:1em;
}

#adminScreen .taskList .taskListEntry input {
  background:#58bbc4;
  border: 0;
  color:white;
  padding:0.2em;
  font-size: 1em;
  box-sizing: border-box;
  outline: none;
}
#adminScreen .taskList .taskListEntry input:focus {
  border-color:#ffc200;
}
#adminScreen .taskList .taskListEntry .taskListLevel input {
  width:3em;
}
#adminScreen .taskList .taskListEntry .taskListLearningApp input {
  width: 7em;
}
#adminScreen .taskList .taskListEntry .taskListName input {
  width: 15em;
}
#adminScreen .taskList .taskListEntry .taskListFeedback input {
  width: 16em;
}

#adminScreen .taskList .taskListEntry .selectButton {
  cursor:pointer;
  display:inline-block;
  padding:0.2em;
  box-sizing: border-box;
  white-space: nowrap;
  background:#58bbc4;
  color:white;
}

#adminScreen .taskList .taskListEntry .selectButton.typeB {
  background:#bb3333;
}
#adminScreen .taskList .taskListEntry .selectButton.typeG {
  background:#33bb33;
}
#adminScreen .taskList .taskListEntry .selectButton.typeP {
  background:#3333bb;
}
#adminScreen .taskList .taskListEntry .selectButton.typeL {
  background:#bbbb33;
}
#adminScreen .taskList .taskListEntry .selectButton.typeT {
  background:#bb33bb;
}

#adminScreen .taskList .taskListEntry .selectButton:hover {
  border-color:#ffc200;
  background:#ffc200;
}

#adminScreen .taskList .taskListEntry .selectDropDown {
  position:absolute;
  z-index:10;
  background:#fefefe;
  border:1px solid #58bbc4;
}
#adminScreen .taskList .taskListEntry .selectDropDown .selectDropDownItem {
  white-space: nowrap;
  color:#58bbc4; 
  cursor:pointer;
  margin:0.5em;
}
#adminScreen .taskList .taskListEntry .selectDropDown .selectDropDownItem:hover {
  color:#ffc200;
}

/* =================================================================================
     Statistic Task Screen 
   ================================================================================= */

#statisticScreen .welcome {
  margin-top:0.5em;
  color:#ffc200;
  font-size:200%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.25em;
}

#statisticScreen .taskStatsPanel {
  background:white;
  box-shadow:0px 0px 4px #eee;
  z-index:10;
  display:block !important;
  padding:20px;
}

#statisticScreen .taskStatsPanel .taskStatsTask {
  font-style:italic;
  margin-bottom:1em;
}

#statisticScreen .taskStatsPanel .statBar {
  position:relative;
  background:#ffcccc;
  width:100%;
  height:20px;
  margin:5px;
}
#statisticScreen .taskStatsPanel .statBarGreen {
  background:#ccffcc;
  height:20px;
  position:absolute;
  left:0;
  top:0;
}
#statisticScreen .taskStatsPanel .statBarLabel {
  position:absolute;
  width:100%;
  text-align:left;
  height:20px;
}
#statisticScreen .taskStatsPanel .okButton {
  cursor:pointer;
  float:right;
  display:block;
  padding:0.2em;
  box-sizing: border-box;
  white-space: nowrap;
  background:#58bbc4;
  color:white;
}

#statisticScreen .taskList {
  border-spacing:4px;
  max-width: 95%;
}

#statisticScreen .taskTestName {
  margin-top:0.5em;
  color:#ffc200;
  font-size:100%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.25em;
}

#statisticScreen .taskList .taskListEntry,
#statisticScreen .taskList .taskListEntryHeader {
}

#statisticScreen .taskList .taskListEntry > div {
}
#statisticScreen .taskList .taskListEntry > div.gap {
  margin-top:1em;
}

#statisticScreen .taskList .taskListEntryHeader > div { 
  font-weight:bold;
  font-size:90%;
}

#statisticScreen .taskList .taskListEntry .toggleButton,
#statisticScreen .addTaskButton,
#statisticScreen .saveTasksButton {
  cursor:pointer;
  display:inline-block;
  padding:0.2em;
  padding-right:0.5em;
  box-sizing: border-box;
  white-space: nowrap;
  background:#58bbc4;
  color:white;
}
#statisticScreen .saveTasksButton {
  margin-left: 33.6em;
  margin-bottom:3em;
}

#statisticScreen .taskList .taskListEntry .toggleButton.disabled {
  color:#45888E;
}
#statisticScreen .addTaskButton {
  margin-top:1em;
}

#statisticScreen .taskList .taskListEntry input {
  background:#58bbc4;
  border: 0;
  color:white;
  padding:0.2em;
  font-size: 1em;
  box-sizing: border-box;
  outline: none;
}
#statisticScreen .taskList .taskListEntry input:focus {
  border-color:#ffc200;
}
#statisticScreen .taskList .taskListEntry .taskListLevel input {
  width:3em;
}
#statisticScreen .taskList .taskListEntry .taskListLearningApp input {
  width: 7em;
}
#statisticScreen .taskList .taskListEntry .taskListName input {
  width: 15em;
}
#statisticScreen .taskList .taskListEntry .taskListFeedback input {
  width: 16em;
}

#statisticScreen .taskList .taskListEntry .selectButton {
  cursor:pointer;
  display:inline-block;
  padding:0.2em;
  box-sizing: border-box;
  white-space: nowrap;
  background:#58bbc4;
  color:white;
}

#statisticScreen .taskList .taskListEntry .selectButton.typeB {
  background:#bb3333;
}
#statisticScreen .taskList .taskListEntry .selectButton.typeG {
  background:#33bb33;
}
#statisticScreen .taskList .taskListEntry .selectButton.typeP {
  background:#3333bb;
}
#statisticScreen .taskList .taskListEntry .selectButton.typeL {
  background:#bbbb33;
}
#statisticScreen .taskList .taskListEntry .selectButton.typeT {
  background:#bb33bb;
}

#statisticScreen .taskList .taskListEntry .selectButton:hover {
  border-color:#ffc200;
  background:#ffc200;
}

#statisticScreen .taskList .taskListEntry .selectDropDown {
  position:absolute;
  z-index:10;
  background:#fefefe;
  border:1px solid #58bbc4;
}
#statisticScreen .taskList .taskListEntry .selectDropDown .selectDropDownItem {
  white-space: nowrap;
  color:#58bbc4; 
  cursor:pointer;
  margin:0.5em;
}
#statisticScreen .taskList .taskListEntry .selectDropDown .selectDropDownItem:hover {
  color:#ffc200;
}

/* =================================================================================
     Class Statistic Task Screen 
   ================================================================================= */

#classstatisticScreen .welcome {
  margin-top:0.5em;
  color:#ffc200;
  font-size:200%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.25em;
}

#classstatisticScreen .classStatsPanel {
  background:white;
  box-shadow:0px 0px 4px #eee;
  z-index:10;
  display:block !important;
  padding:20px;
  margin-bottom:2em;
}


#classstatisticScreen .classList {
  border-spacing:4px;
  max-width: 95%;
}

#classstatisticScreen .classTestName {
  margin-top:0.5em;
  color:#ffc200;
  font-size:100%;
  font-family:Oswald,Arial;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.25em;
}

/*! responsive-nav.js 1.0.39 by @viljamis */

.nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}


.nav-collapse.opened {
  max-height: 9999px;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.navbar {
  position:relative;
  z-index:2;
  margin-bottom:50px;
}
.mkt-header .app-header {
  position:absolute;
  width:100%;
  z-index:0;
  top:0px;
  box-sizing:border-box;
}

@media screen and (min-width: 650px) {
  .navbar {
    margin-bottom:0px;
    z-index:1 !important;
  }
  .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }

  .mkt-header .app-header {
    position:relative;
  }
  .mkt-header .app-header .app-title h1 {
    padding-left:0px;
    width:auto;
    padding-top:1em;
  }
}

/* ********************************************************** */

.quiz .assistant.assistant-1.still {
  background-image: url('/images/quiz/assistant-1-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-2.still {
  background-image: url('/images/quiz/assistant-2-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-3.still {
  background-image: url('/images/quiz/assistant-3-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-4.still {
  background-image: url('/images/quiz/assistant-4-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-5.still {
  background-image: url('/images/quiz/assistant-5-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-6.still {
  background-image: url('/images/quiz/assistant-6-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-7.still {
  background-image: url('/images/quiz/assistant-7-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-8.still {
  background-image: url('/images/quiz/assistant-8-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-9.still {
  background-image: url('/images/quiz/assistant-9-anim.png') !important;
}
/* line 153, ../../app/styles/pages/_quiz.scss */
.quiz .assistant.assistant-10.still {
  background-image: url('/images/quiz/assistant-10-anim.png') !important;
}

.progress-dot {
 margin-right:5px;
}
.progress-dot:last-child {
 margin-right:0px;
}


.action-pane .description {
  padding-bottom:10px;
  line-height:1.1em; 
}

#head {
  padding-bottom:5em;
}

#avatarScreen .assistant-intro {top:340px; }

#avatarScreen .choose-assistant .bubble.in {
  transition-delay:0.5s;
}

#avatarScreen .assistant-wrapper * {
  pointer-events:none;
}

#wrapper .confirmation .action-button {
  float:right;
  margin-left:1%;
}
#wrapper .confirmation .action-button.cancel {
  margin-left:0;
  margin-right:1%;
  float:left;
}

.evaluation-card .student-result {
  white-space:nowrap;
}
.evaluation-card .student-result .progressTrash {
  cursor:pointer;
}

.LearningAppFrame {
  pointer-events:none;
}
.LearningAppFrame.active {
  pointer-events:auto;
}

.quiz .bubble-feedback .action-button.check {
  position: absolute;
  bottom: 5%;
  right: 20%;
  pointer-events: auto;
}

/* 27.10.2016 */

@media (min-width: 1200px){
 .mkt-header .app-header {
   margin-right:0 !important;   
   margin-left:0 !important;
 }
}
@media (min-width: 1330px){
 .mkt-header .app-header {
   padding-left:0 !important;
   padding-right:0 !important;
   margin-right:auto !important;   
   margin-left:auto !important;
 }
}

@media (min-width: 650px){
 .mkt-header .app-header .app-title h1 a {
   font-size:150%;
 }
}
@media (max-width: 650px){
 .mkt-header h1 {
   padding-right:0 !important;
   width: calc(100% - 42px - 16% ) !important;
 }
 .mkt-header .app-header .app-title {
   margin-top:-7px;
   margin-left:40px;
   
 }
}

@media (max-width: 670px) and (max-height: 670px){
 .test-card .description {
   font-size:80%;
 }
}

@media (max-width: 320px), (max-height: 320px){
 .test-card .description {
   display:none;
 }
 .bubble-feedback,
 .bubble-assignment {
   font-size:80%;
 }
}
.selectTopicText {
  position: absolute;
  top: -50px;
/*  font-family: "ImpactURW", "Impact", "sans-serif";*/
  color: #00bace;
  font-size:1.2em;
}

.IEBanner{
 position:fixed;
 left:0;
 top:0;
 width:100%;
 height:100%;
 text-align:center;
 padding:10%;
 box-sizing:border-box;
 background:#fff;
 font-weight:bold;
 font-size:120%;
 z-index:10000;
}
.IEBanner div{
 background:#fff;
 padding:10%;
}

.action-button.selected {
  background-color: #70d9e3 !important;
}

.quiz .active.assignment .bubble-assignment, 
.quiz .active.feedback .bubble-feedback {
   z-index:1;
}

@media (max-height: 420px){
 .quiz .active.assignment .bubble-assignment, 
 .quiz .active.feedback .bubble-feedback {
   bottom:20px !important;
 }
 .quiz .active .assistant {
   bottom:-136px !important;
   
 }
}

.ng-hide.ng-hide-animate{
     display: none !important;
}

.teacher-hints h2 {
  font-size:120%;
}
.teacher-hints h3 a {
  text-decoration:none;
  color:inherit;
  cursor:default;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.0);
  }
  50% {
    -webkit-transform: scale(1.05);
  }
  to { 
    -webkit-transform: scale(1.0);
  }
}
@-moz-keyframes pulse {
  from {
    -moz-transform: scale(1.0);
  }
  50% {
    -moz-transform: scale(1.05);
  }
  to { 
    -moz-transform: scale(1.0);
  }
}
@-ms-keyframes pulse {
  from {
    -ms-transform: scale(1.0);
  }
  50% {
    -ms-transform: scale(1.05);
  }
  to { 
    -ms-transform: scale(1.0);
  }
}
@keyframes pulse {
  from {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.05);
  }
  to { 
    transform: scale(1.0);
  }
}
.pulseEffect {
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: infinite; 
  -moz-animation-name: pulse; 
  -moz-animation-duration: 1s; 
  -moz-animation-iteration-count: infinite; 
  -ms-animation-name: pulse; 
  -ms-animation-duration: 1s; 
  -ms-animation-iteration-count: infinite; 
  animation-name: pulse; 
  animation-duration: 1s; 
  animation-iteration-count: infinite; 
}

/* menu pulse effect on cards */

@-webkit-keyframes delaypulse1 {
  from { -webkit-transform: scale(1.0); } 20% {  -webkit-transform: scale(1.0); } 25% {  -webkit-transform: scale(1.05);}
  30% {  -webkit-transform: scale(1.0); } to {   -webkit-transform: scale(1.0); }
}
@-moz-keyframes delaypulse1 {
  from { -moz-transform: scale(1.0); } 20% {  -moz-transform: scale(1.0); } 25% {  -moz-transform: scale(1.05);}
  30% {  -moz-transform: scale(1.0); } to {   -moz-transform: scale(1.0); }
}
@-ms-keyframes delaypulse1 {
  from { -ms-transform: scale(1.0); } 20% {  -ms-transform: scale(1.0); } 25% {  -ms-transform: scale(1.05);}
  30% {  -ms-transform: scale(1.0); } to {   -ms-transform: scale(1.0); }
}
@keyframes delaypulse1 {
  from { transform: scale(1.0); } 20% {  transform: scale(1.0); } 25% {  transform: scale(1.05);}
  30% {  transform: scale(1.0); } to {   transform: scale(1.0); }
}

@-webkit-keyframes delaypulse2 {
  from { -webkit-transform: scale(1.0); } 30% {  -webkit-transform: scale(1.0); } 35% {  -webkit-transform: scale(1.05);}
  40% {  -webkit-transform: scale(1.0); } to {   -webkit-transform: scale(1.0); }
}
@-moz-keyframes delaypulse2 {
  from { -moz-transform: scale(1.0); } 30% {  -moz-transform: scale(1.0); } 35% {  -moz-transform: scale(1.05);}
  40% {  -moz-transform: scale(1.0); } to {   -moz-transform: scale(1.0); }
}
@-ms-keyframes delaypulse2 {
  from { -ms-transform: scale(1.0); } 30% {  -ms-transform: scale(1.0); } 35% {  -ms-transform: scale(1.05);}
  40% {  -ms-transform: scale(1.0); } to {   -ms-transform: scale(1.0); }
}
@keyframes delaypulse2 {
  from { transform: scale(1.0); } 30% {  transform: scale(1.0); } 35% {  transform: scale(1.05);}
  40% {  transform: scale(1.0); } to {   transform: scale(1.0); }
}

@-webkit-keyframes delaypulse3 {
  from { -webkit-transform: scale(1.0); } 40% {  -webkit-transform: scale(1.0); } 45% {  -webkit-transform: scale(1.05);}
  50% {  -webkit-transform: scale(1.0); } to {   -webkit-transform: scale(1.0); }
}
@-moz-keyframes delaypulse3 {
  from { -moz-transform: scale(1.0); } 40% {  -moz-transform: scale(1.0); } 45% {  -moz-transform: scale(1.05);}
  50% {  -moz-transform: scale(1.0); } to {   -moz-transform: scale(1.0); }
}
@-ms-keyframes delaypulse3 {
  from { -ms-transform: scale(1.0); } 40% {  -ms-transform: scale(1.0); } 45% {  -ms-transform: scale(1.05);}
  50% {  -ms-transform: scale(1.0); } to {   -ms-transform: scale(1.0); }
}
@keyframes delaypulse3 {
  from { transform: scale(1.0); } 40% {  transform: scale(1.0); } 45% {  transform: scale(1.05);}
  50% {  transform: scale(1.0); } to {   transform: scale(1.0); }
}

@-webkit-keyframes delaypulse4 {
  from { -webkit-transform: scale(1.0); } 50% {  -webkit-transform: scale(1.0); } 55% {  -webkit-transform: scale(1.05);}
  60% {  -webkit-transform: scale(1.0); } to {   -webkit-transform: scale(1.0); }
}
@-moz-keyframes delaypulse4 {
  from { -moz-transform: scale(1.0); } 50% {  -moz-transform: scale(1.0); } 55% {  -moz-transform: scale(1.05);}
  60% {  -moz-transform: scale(1.0); } to {   -moz-transform: scale(1.0); }
}
@-ms-keyframes delaypulse4 {
  from { -ms-transform: scale(1.0); } 50% {  -ms-transform: scale(1.0); } 55% {  -ms-transform: scale(1.05);}
  60% {  -ms-transform: scale(1.0); } to {   -ms-transform: scale(1.0); }
}
@keyframes delaypulse4 {
  from { transform: scale(1.0); } 50% {  transform: scale(1.0); } 55% {  transform: scale(1.05);}
  60% {  transform: scale(1.0); } to {   transform: scale(1.0); }
}

@-webkit-keyframes delaypulse5 {
  from { -webkit-transform: scale(1.0); } 60% {  -webkit-transform: scale(1.0); } 65% {  -webkit-transform: scale(1.05);}
  70% {  -webkit-transform: scale(1.0); } to {   -webkit-transform: scale(1.0); }
}
@-moz-keyframes delaypulse5 {
  from { -moz-transform: scale(1.0); } 60% {  -moz-transform: scale(1.0); } 65% {  -moz-transform: scale(1.05);}
  70% {  -moz-transform: scale(1.0); } to {   -moz-transform: scale(1.0); }
}
@-ms-keyframes delaypulse5 {
  from { -ms-transform: scale(1.0); } 60% {  -ms-transform: scale(1.0); } 65% {  -ms-transform: scale(1.05);}
  70% {  -ms-transform: scale(1.0); } to {   -ms-transform: scale(1.0); }
}
@keyframes delaypulse5 {
  from { transform: scale(1.0); } 60% {  transform: scale(1.0); } 65% {  transform: scale(1.05);}
  70% {  transform: scale(1.0); } to {   transform: scale(1.0); }
}

@-webkit-keyframes delaypulse6 {
  from { -webkit-transform: scale(1.0); } 70% {  -webkit-transform: scale(1.0); } 75% {  -webkit-transform: scale(1.05);}
  80% {  -webkit-transform: scale(1.0); } to {   -webkit-transform: scale(1.0); }
}
@-moz-keyframes delaypulse6 {
  from { -moz-transform: scale(1.0); } 70% {  -moz-transform: scale(1.0); } 75% {  -moz-transform: scale(1.05);}
  80% {  -moz-transform: scale(1.0); } to {   -moz-transform: scale(1.0); }
}
@-ms-keyframes delaypulse6 {
  from { -ms-transform: scale(1.0); } 70% {  -ms-transform: scale(1.0); } 75% {  -ms-transform: scale(1.05);}
  80% {  -ms-transform: scale(1.0); } to {   -ms-transform: scale(1.0); }
}
@keyframes delaypulse6 {
  from { transform: scale(1.0); } 70% {  transform: scale(1.0); } 75% {  transform: scale(1.05);}
  80% {  transform: scale(1.0); } to {   transform: scale(1.0); }
}




.delayedPulseEffect {
  -webkit-animation-duration: 10s; 
  -webkit-animation-iteration-count: infinite; 
  -moz-animation-duration: 10s; 
  -moz-animation-iteration-count: infinite; 
  -ms-animation-duration: 10s; 
  -ms-animation-iteration-count: infinite; 
  animation-duration: 10s; 
  animation-iteration-count: infinite; 
}

.delayedPulseEffect:nth-child(1) {
  -webkit-animation-name: delaypulse1; 
  -moz-animation-name: delaypulse1; 
  -ms-animation-name: delaypulse1; 
  animation-name: delaypulse1; 
}
.delayedPulseEffect:nth-child(2) {
  -webkit-animation-name: delaypulse2; 
  -moz-animation-name: delaypulse2; 
  -ms-animation-name: delaypulse2; 
  animation-name: delaypulse2; 
}
.delayedPulseEffect:nth-child(3) {
  -webkit-animation-name: delaypulse3; 
  -moz-animation-name: delaypulse3; 
  -ms-animation-name: delaypulse3; 
  animation-name: delaypulse3; 
}
.delayedPulseEffect:nth-child(4) {
  -webkit-animation-name: delaypulse4; 
  -moz-animation-name: delaypulse4; 
  -ms-animation-name: delaypulse4; 
  animation-name: delaypulse4; 
}
.delayedPulseEffect:nth-child(5) {
  -webkit-animation-name: delaypulse5; 
  -moz-animation-name: delaypulse5; 
  -ms-animation-name: delaypulse5; 
  animation-name: delaypulse5; 

}
.delayedPulseEffect:nth-child(6) {
  -webkit-animation-name: delaypulse6; 
  -moz-animation-name: delaypulse6; 
  -ms-animation-name: delaypulse6; 
  animation-name: delaypulse6; 
}
.color-orange {
  color:#ffc200;
}
.teacherHintContent {
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  max-height:0px;
  overflow:hidden;
  max-width:0px;
}
.teacherHintContent.open{
  max-height:2000px;
  max-width:2000px;
}
.teacherHintContent ul {
  list-style-type:none;
  padding-left:44px;
  margin-bottom:0;
}
.teacherHintContent ul li {
  padding-bottom:1em;
}

.teacherHintContent a {
  cursor:pointer;
  text-decoration: none;
  color: #008391;
  -webkit-transition: all 0.35s cubic-bezier(0.7, 0.3, 0, 1);
  transition: all 0.35s cubic-bezier(0.7, 0.3, 0, 1);
  -webkit-transition-property: color;
  transition-property: color;
}
.teacherHintContent a:hover {
  color:#ffc200;
}
.teacherHintContent > div > p {
  padding-left:44px;
}




.evaluation-card h1:before{
  float:right; 
  max-height:120px;
}
.evaluation-card h1.noicon:before{
  display:none !important;
}

.evaluation-card h1{
  text-align:left !important;
  font-size:2.5em !important;
}

@media (max-width: 650px){
 .evaluation-card h1:before{
  display:none !important;
 }
 .evaluation-card h1{
  font-size:1.5em !important;
 }

}
.tab {
  display:none;
}
.tab.selected{
  display:block;
}
.icon-button {
  vertical-align:middle;
}

#avatarScreen {
  margin-left:0 !important;
  margin-right:0 !important;
  padding-top: 20em;
  top: -9em;
  overflow-x: hidden;
  box-sizing: border-box;
  min-height:100%;
  position:absolute;
  width:100%;
}
#avatarScreen .content-wrapper {
  padding-bottom:10em;
}


.footer {
  font-size:1em;
  max-width:660px;
  padding-left:2em;
  padding-right:2em;
  padding-bottom:3em;
  margin:auto;
  text-align:center;
  padding-top:1em; 
  margin-top:1em; 
  border-top:1px solid #eee;
}
.footer a {
  cursor:pointer;
  text-decoration: none;
  padding-left: 1em;
  color: #565656;
  -webkit-transition: all 0.35s cubic-bezier(0.7, 0.3, 0, 1);
  transition: all 0.35s cubic-bezier(0.7, 0.3, 0, 1);
  -webkit-transition-property: color;
  transition-property: color;
}
.footer a:hover {
  color: #008391;
}