/* GLOBAL STYLES
-------------------------------------------------- */

html, body { 
  font-family: CiscoSans, Arial, sans-serif; 
  background-color: #ededed;
  height: 100%;
  margin: 0;
  padding: 0;
  font-weight: 300;
}
.container { 
  width: 100% !important; 
  height: 100% !important; 
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
button:focus { 
  outline: 0;
}
.mobile-show {
  display: none;
}

/* START
-------------------------------------------------- */

#start { 
  background-color: #049FD9;
  text-align: center;
  /*display: none;*/
}
/*#start .logo {
  background-color: #ffffff;
  text-align: left;
  padding: 22px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
#start svg {
  margin-top: 75px;
}
*/#start h1 {
  font-size: 28px;
  line-height: 36px;
  color: #FFFFFF;
  font-weight: 300;
  width: 100%;
  max-width: 1100px;
  padding: 20px 30px;
  margin: 0 auto;
  opacity: 0;
}
#start button {
  width: 72px;
  height: 72px;
  background: url("../img/arrow-down.svg") center center no-repeat;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  opacity: 0;
}
#start button:hover {
  width: 72px;
  height: 72px;
  background: url("../img/arrow-down-hover.svg") center center no-repeat;
}

/* QUESTION
-------------------------------------------------- */

#question { 
  background-color: #ffffff;
  text-align: center;
  display: none;
}
#question .inside {
  max-width: 1000px;
}
#question h1 {
  font-size: 100px;
  color: #333333;
  font-weight: 100;
  margin-bottom: 30px;
}
#question button {
  border: 2px solid #049FD9;
  border-radius: 100px;
  font-size: 20px;
  color: #049FD9;
  text-align: center;
  line-height: 24px;
  width: 310px;
  height: 100px;
  font-weight: 300;
  background-color: #ffffff;
  padding: 0 30px;
}
#question button:hover {
  background-color: #049FD9;
  color: #ffffff;
  cursor: pointer;
}
#question .content {
  padding: 30px;
}
#question svg { 
  width: 100%; 
  height: auto;
}

/* CORRECT
-------------------------------------------------- */

#correct { 
  background-color: transparent;
  text-align: center;
  display: none;
}
#correct .background {
  width: 1097px;
  height: 500px;
  background-color: #45A041;
  margin: 0 auto;
}
#correct .inside {
  max-width: 1000px;
}
#correct h1 {
  font-size: 80px;
  color: #ffffff;
  font-weight: 100;
  margin-bottom: 30px;
}
#correct p {
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  padding: 0 30px;
}
#correct button {
  width: 72px;
  height: 72px;
  background: url("../img/arrow-right.svg") center center no-repeat;
  margin: 0 auto;
  cursor: pointer;
  border: none;
}
#correct button:hover {
  width: 72px;
  height: 72px;
  background: url("../img/arrow-right-hover.svg") center center no-repeat;
}

/* CORRECT
-------------------------------------------------- */

#incorrect { 
  background-color: transparent;
  text-align: center;
  display: none;
}
#incorrect .background {
  width: 1097px;
  height: 500px;
  background-color: #C41230;
  margin: 0 auto;
  animation-name: scale;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: forwards;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
#incorrect .inside {
  max-width: 1000px;
}
#incorrect h1 {
  font-size: 80px;
  color: #ffffff;
  font-weight: 100;
  margin-bottom: 30px;
}
#incorrect p {
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  padding: 0 30px;
}
#incorrect button {
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 100px;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 30px;
  height: 44px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 7px 20px;
}
#incorrect button:hover {
  background-color: #ffffff;
  color: #C41230;
  cursor: pointer;
}

/* CONGRATULATIONS
-------------------------------------------------- */

#congratulations { 
  background-color: #049FD9;
  text-align: center;
  display: none;
}
/*#congratulations .logo {
  background-color: #ffffff;
  text-align: left;
  padding: 22px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
#congratulations svg {
  margin-top: 75px;
}*/
#congratulations h1 {
  font-size: 28px;
  line-height: 36px;
  color: #FFFFFF;
  font-weight: 300;
  width: 100%;
  max-width: 1100px;
  padding: 20px 30px;
  margin: 0 auto;
}
#congratulations button {
  border: none;
  border-radius: 100px;
  font-size: 22px;
  line-height: 30px;
  color: #049FD9;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 18px 8px;
  background-color: #ffffff;
  margin: 10px 0;
  letter-spacing: 1.3px;
  border: 2px solid transparent;
}
#congratulations button:hover {
  border: none;
  background-color: #049FD9;
  color: #ffffff;
  cursor: pointer;
  border: 2px solid #ffffff;
}

/* SVG
-------------------------------------------------- */

#svg {
  display: none;
}
svg path.draw {
  fill-opacity: 0;
  animation-name: draw;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: forwards;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}