@import url(https://fonts.googleapis.com/css?family=Muli:400,700);* {
  outline: 0;
  margin: 0;
  padding: 0;
  font-family: 'Muli', sans-serif !important; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: black; }

button {
  cursor: pointer;
  width: 15%;
  border: none;
  border-radius: 5px;
  font-size: 2vw;
  color: white;
  position: relative;
  background: none;
  line-height: 2; }

button img {
  position: absolute;
  top: 0;
  left: 0; }

button span {
  position: relative; }

#container {
  position: absolute;
  height: 100%;
  width: 100%; }

#inner-container {
  text-align: center;
  width: 100%;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  height: auto; }

.disabled {
  pointer-events: none;
  opacity: 0.5; }

.hidden {
  display: none !important; }

#full {
  cursor: pointer;
  position: absolute;
  float: right;
  top: 4%;
  right: 0%;
  height: 7%;
  width: 7%;
  z-index: 10; }

.screen1 {
  height: 100%;
  width: 100%;
  left: 0%;
  top: 0%;
  position: relative;
  color: white;
  text-align: left; }

#screen1-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.screen1 #intro-title {
  height: 15%;
  position: relative; }

.screen1 #intro-title h1 {
  bottom: 0;
  left: 8%;
  position: absolute;
  font-size: 2.5vw; }

.screen1 #intro-body {
  height: 60%;
  position: relative; }

.screen1 #intro-body ul {
  font-size: 1.7vw;
  position: relative;
  top: 5%;
  left: 8%;
  width: 58%;
  height: 70%;
  list-style: none;
  word-wrap: break-word; }

.screen1 #intro-body ul.sublist {
  width: 100%; }

.screen1 #footer {
  height: 10%;
  position: relative; }

.screen1 #footer button {
  left: 7%;
  height: 100%;
  width: 18%; }

.screen1 ul li {
  font-weight: normal;
  word-wrap: break-word; }

.screen2 {
  height: 100%;
  width: 100%;
  text-align: left; }

.screen2 #leftHalf {
  height: 100%;
  width: 40%;
  position: relative;
  display: inline-block;
  float: left;
  padding: 0 0 0 4%;
  font-size: 1.5vw;
  color: #547b33 !important;
  background: url(https://res.cloudinary.com/dodge7ws8/image/upload/core-interactives/grade-4/solar-cooker/G4_M2_Solar_Cooker_ASSETS-05.svg); }

.bold {
  font-weight: bold !important; }

li.bold {
  list-style: none; }

.screen2 #leftHalf ul {
  position: relative;
  top: 5%;
  width: 100%;
  height: 25%;
  line-height: 1.5; }

.screen2 #leftHalf li {
  list-style: none; }

.subScreen2 li:before {
  content: "- "; }

.subScreen2 li.bold:before {
  content: ""; }

.screen2 #leftHalf .subScreen1, .screen2 #leftHalf .subScreen2 {
  height: 100%;
  width: 100%;
  font-size: 2vw !important; }

.subScreen2 #scaleDiv {
  height: 28%;
  width: 76%;
  position: relative;
  display: inline-block;
  left: 12%; }

#scalePointer {
  position: absolute;
  bottom: -4%;
  height: 84%;
  width: 8%;
  left: 45.5%;
  transform-origin: center 92%; }

#timeTaken {
  text-align: center;
  display: inherit;
  font-size: 2.8vw;
  width: 100%;
  display: inline-block; }

.screen2 #leftHalf .dropDownContainer {
  height: 15%;
  width: 100%; }

.screen2 #leftHalf label.title {
  font-size: 1.8vw; }

.screen2 #leftHalf select.dropDown {
  width: 100%;
  height: 62%;
  font-size: 2vw;
  background: url(https://res.cloudinary.com/dodge7ws8/image/upload/v1518768877/core-interactives/grade-4/solar-cooker/G4_M2_Solar_Cooker_ASSETS-15.svg);
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  border: 0;
  background-size: 100%;
  color: #437013;
  background-position-x: -5px;
  text-align-last: center; }

.screen2 #leftHalf #buttonsDiv {
  position: absolute;
  bottom: 0;
  left: 9%;
  height: 20%;
  width: 100%; }

/*.screen2 #leftHalf #buttonsDiv>div{
  position: relative;
  width: 35%;
  height: 100%;
  display: inline-block;
}*/
#buttonsDiv button {
  height: 50%;
  width: 42%;
  text-align: center;
  font-weight: bold;
  position: relative;
  top: 0; }

/*#buttonsDiv button#startBtn,#buttonsDiv button#startOverBtn{
  width: 116%;
  top: -3%;
  left: -7%;
}*/
/*button#startBtn span,button#startOverBtn span{
  top:2px;
  font-size: 1.8vw;
}*/
button#resetBtn span {
  left: 4%;
  color: #4a6312;
  font-size: 1.8vw; }

.screen2 #rightHalf {
  height: 100%;
  width: 56%;
  position: relative;
  float: right;
  display: inline-block; }

.screen2 #rightHalf #rightHalf-bg {
  position: absolute;
  top: 0;
  left: 0%; }

#cookerPreviewDiv {
  position: relative;
  height: 61%;
  width: 54%;
  top: 15%;
  left: 15%;
  display: inline-block; }

#clockDiv {
  position: absolute;
  height: 25%;
  width: 25%;
  bottom: 0%;
  right: 3%;
  text-align: center; }

#clock-img {
  position: absolute;
  top: 0;
  left: 0; }

#clockDiv #clockHandsDiv {
  position: relative;
  height: 31%;
  width: 15%;
  display: inline-block;
  top: 25%; }

#hourHand {
  position: absolute;
  height: 80%;
  top: 11%;
  left: 35%;
  transform-origin: center 74%;
  /*transform: rotate(0deg);*/ }

#minuteHand {
  position: relative;
  height: 100%;
  transform-origin: center 74%;
  /*transform: rotate(0deg);*/ }

#heatingText {
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 3vw;
  top: 45%; }

#smoke {
  display: none; }

#canvas {
  position: absolute;
  height: 79%;
  width: 40%;
  opacity: 0.4; }

/*# sourceMappingURL=solarCooker.bundle.css.map*/