@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
q,
small,
strong,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
nav,
svg {
  border: 0;
  margin: 0;
  padding: 0;
}
article,
aside,
figure,
figure img,
figcaption,
hgroup,
header,
section,
video,
object,
svg {
  display: block;
}
a img {
  border: 0;
}
figure {
  position: relative;
}
figure img {
  width: 100%;
}
ul,
li {
  margin-left: 7px;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  background: #fff;
  font-family: system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
.roboto {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}
.bold {
  font-weight: 700;
}
.pointer {
  cursor: pointer;
}
.pass-through {
  pointer-events: none;
}
.pass-through * {
  pointer-events: none;
}
.hrzlist {
  display: block;
  zoom: 1;
}
.hrzlist:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
.hrzlist > li {
  float: left;
}
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
.container {
  background: #aaa;
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: white;
  overflow: hidden;
  -ms-touch-action: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.content {
  width: 100%;
}
.content .pad {
  padding: 0 25px;
}
.content .banner {
  margin: 12.5px 0;
}
.copy {
  color: #3e4545;
  font-weight: 400;
}
.hero {
  text-align: center;
}
.hero.sea {
  background: #40c1ac;
}
.hero.sky {
  background: #009fdf;
}
.hero.lava {
  background: #EF453E;
}
.hero.sun {
  background: #ED8B00;
}
.hero.slate {
  background: #3e4545;
}
.hero.transparent {
  background-color: transparent;
}
.explore img {
  width: 200px;
  height: 200px;
}
.tips {
  padding-top: 16px;
  width: 100%;
}
.tips .hero {
  height: 175px;
  position: relative;
}
.tips .hero img {
/*
	position: absolute;
  bottom: 0;
  height: auto;
  */
  height: 100%;
}
.tips .hero img.left {
  max-width: 175px;
  left: 12.5px;
}
.tips .hero img.right {
  max-width: 50px;
  right: 12.5px;
}
.tips .tip {
  padding: 25px;
}
.tips .tip .header {
  padding: 12.5px 0 18.75px 50px;
  background-repeat: no-repeat;
  background-position: 0 12.5px;
  background-size: 35px;
}
.tips .tip .list {
  margin-left: 34.375px;
}
.tips .tip .list .copy {
  list-style-type: disc;
  margin-bottom: 18.75px;
  padding-left: 12.5px;
  font-size: 1.25em;
}
.tips .tip .list .copy:last-child {
  margin-bottom: 0;
}
.tips .tip:nth-child(odd) {
  background: #eee;
}
.tips .tip.discussion .header {
  background-image: url(../svg/discussion.svg);
}
.tips .tip.polling .header {
  background-image: url(../svg/polling.svg);
}
.tips .tip.survey .header {
  background-image: url(../svg/assignment.svg);
}
.tips .tip.quiz .header {
  background-image: url(../svg/quiz.svg);
}
.tips .tip.profile .header {
  background-image: url(../svg/profile.svg);
}
.stepper {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 50;
}
.stepper span {
  display: inline-block;
  margin-right: 12.5px;
  background: #E0E0E0;
  border: 1px solid rgba(0, 0, 0, 0);
  width: 12.5px;
  height: 12.5px;
  border-radius: 6.25px;
}
.stepper span.active {
  background: #00838D;
}
.featureTrans.ng-hide-add {
  z-index: 2;
}
.featureTrans.ng-hide-remove {
  z-index: 1;
}
.featureTrans.forward.ng-hide-remove.ng-hide-remove-active {
  -webkit-animation: moveFromRightFade 500ms ease-in-out both;
  -moz-animation: moveFromRightFade 500ms ease-in-out both;
  animation: moveFromRightFade 500ms ease-in-out both;
}
@-moz-keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-webkit-keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
.featureTrans.forward.ng-hide-add.ng-hide-add-active {
  -webkit-animation: moveToLeftFade 500ms ease-in-out both;
  -moz-animation: moveToLeftFade 500ms ease-in-out both;
  animation: moveToLeftFade 500ms ease-in-out both;
}
@-moz-keyframes moveToLeftFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes moveToLeftFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes moveToLeftFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
.featureTrans.back.ng-hide-remove.ng-hide-remove-active {
  -webkit-animation: moveFromLeftFade 500ms ease-in-out both;
  -moz-animation: moveFromLeftFade 500ms ease-in-out both;
  animation: moveFromLeftFade 500ms ease-in-out both;
}
@-moz-keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
.featureTrans.back.ng-hide-add.ng-hide-add-active {
  -webkit-animation: moveToRightFade 500ms ease-in-out both;
  -moz-animation: moveToRightFade 500ms ease-in-out both;
  animation: moveToRightFade 500ms ease-in-out both;
}
@-moz-keyframes moveToRightFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-webkit-keyframes moveToRightFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes moveToRightFade {
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@media screen and (max-height: 450px) {
  .explore {
    -webkit-text-size-adjust: none;
  }
  .explore .hero img {
    width: 150px;
    height: 150px;
  }
  .explore .copy {
    font-size: .85em;
  }
}
@media screen and (max-height: 300px) {
  .explore .hero img {
    width: 100px;
    height: 100px;
  }
  .explore .banner {
    font-size: 1em;
  }
  .explore .copy {
    font-size: .75em;
  }
  .stepper span {
    margin-right: 6.25px;
    width: 6.25px;
    height: 6.25px;
    border-radius: 3.125px;
  }
}
@media screen and (max-height: 275px) {
  .explore .hero {
    position: absolute;
    top: calc(50% - 50px);
    background: none !important;
    left: 12.5px;
  }
  .explore .hero img {
    width: 75px;
    height: 75px;
  }
  .explore .banner {
    font-size: .9em;
  }
  .explore .text {
    position: absolute;
    top: calc(50% - 50px);
    left: 75px;
  }
}
@media screen and (max-width: 320px) {
  .tips .tip .header {
    font-size: 1.5em;
    background-size: 27.5px;
    padding-left: 43.75px;
  }
  .tips .tip .list .copy {
    font-size: 1em;
  }
}