/* _base */
.dev-errors {
  font-size: 1em;
  text-align: left;
  z-index: 250;
  color: black;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 10px;
  width: 100%;
  background-color: #ff0;
}
.dev-errors .error-box {
  border: 1px SOLID black;
  background-color: #ffeeee;
  padding: 10px;
}
/*  SIMPLE - START */
.rel {
  position: relative;
}
.abs {
  position: absolute;
}
.fs12 {
  font-size: 0.75em;
}
.fs14 {
  font-size: 0.875em;
}
.fs20 {
  font-size: 1.25em;
}
.fs24 {
  font-size: 1.5em;
}
.em1 {
  height: 1em;
}
.emh {
  height: 0.5em;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}
.nobr {
  white-space: nowrap;
}
.d-none {
  display: none;
}
.d-fadein {
  opacity: 0;
  transition: 0.5s opacity;
}
.d-fadein.on {
  opacity: 1;
}
.t-center {
  text-align: center;
}
.t-right {
  text-align: right;
}
.t-left {
  text-align: left;
}
.n {
  font-weight: 400;
}
.b {
  font-weight: 700;
}
.pointer {
  cursor: pointer;
}
a,
a:hover,
a:visited,
a:active {
  cursor: pointer;
  text-decoration: none;
}
a,
a:visited,
a:active {
  color: #0099cc;
}
a:hover {
  color: #17c6ff;
}
.smaller {
  font-size: 0.875em;
}
.p100 {
  width: 100%;
}
.clear,
.row {
  clear: both;
}
.f-left {
  float: left;
}
.f-right {
  float: right;
}
.page-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sc1,
.sc2,
.sc3,
.sc4,
.sc5,
.sc6,
.sc7,
.sc8,
.sc9,
.sc10,
.sc11,
.sc12 {
  box-sizing: border-box;
  float: left;
  padding: 0em 0.5em;
}
.sc1:empty:after,
.sc2:empty:after,
.sc3:empty:after,
.sc4:empty:after,
.sc5:empty:after,
.sc6:empty:after,
.sc7:empty:after,
.sc8:empty:after,
.sc9:empty:after,
.sc10:empty:after,
.sc11:empty:after,
.sc12:empty:after {
  content: "\00a0";
}
.sc1 {
  width: 8.33333333%;
}
.sc2 {
  width: 16.66666667%;
}
.sc3 {
  width: 25%;
}
.sc4 {
  width: 33.33333333%;
}
.sc5 {
  width: 41.66666667%;
}
.sc6 {
  width: 50%;
}
.sc7 {
  width: 58.33333333%;
}
.sc8 {
  width: 66.66666667%;
}
.sc9 {
  width: 75%;
}
.sc10 {
  width: 83.33333333%;
}
.sc11 {
  width: 91.66666667%;
}
.sc12 {
  width: 100%;
}
.c1,
.c2,
.c3,
.c4,
.c5,
.c6,
.c7,
.c8,
.c9,
.c10,
.c11,
.c12 {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 0em;
}
@media only screen and (min-width: 500px) {
  .c1,
  .c2,
  .c3,
  .c4,
  .c5,
  .c6,
  .c7,
  .c8,
  .c9,
  .c10,
  .c11,
  .c12 {
    float: left;
    padding: 0em 0.5em;
  }
  .c1 {
    width: 8.33333333%;
  }
  .c2 {
    width: 16.66666667%;
  }
  .c3 {
    width: 25%;
  }
  .c4 {
    width: 33.33333333%;
  }
  .c5 {
    width: 41.66666667%;
  }
  .c6 {
    width: 50%;
  }
  .c7 {
    width: 58.33333333%;
  }
  .c8 {
    width: 66.66666667%;
  }
  .c9 {
    width: 75%;
  }
  .c10 {
    width: 83.33333333%;
  }
  .c11 {
    width: 91.66666667%;
  }
  .c12 {
    width: 100%;
  }
  .c-right {
    float: right;
  }
}
/* SIMPLE END */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  background-color: white;
  text-align: center;
}
table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  padding: 0;
  margin: 0;
}
table tr,
table td {
  border: 0;
  padding: 0;
}
#outer-wrapper {
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
#wrapper,
.wrapper {
  text-align: left;
  position: relative;
  width: 100%;
  font-size: 3.2vw;
}
#footer-text {
  padding: 1.5em 0em 1.5em 0em;
  text-align: center;
  font-size: 1em;
  color: #888;
}
#main {
  clear: both;
  position: relative;
  min-height: calc(100vh - 6.5em);
}
body.b-debug #main {
  background-color: rgba(255, 0, 0, 0.5);
}
.slide-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.vid-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: absolute;
  opacity: 1;
  transition: left 0.5s linear, opacity 1s;
  left: 0;
  top: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  z-index: 1;
}
.vid-container.off {
  opacity: 0;
}
.vid-container.left {
  left: -100%;
}
.vid-container.right {
  left: 100%;
}
.vid-container.pri {
  z-index: 2;
}
.vid-container video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}
.vid-container video.on {
  opacity: 1;
}
a.button {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  padding: 0.5em 1.5em;
  margin: 0em 0.5em;
  display: inline-block;
  color: #ffffff;
  background-color: #0099cc;
  font-weight: 600;
}
a.button:hover {
  color: #ffffff;
  background-color: #17c6ff;
}
a.button.sq {
  border-radius: 0em;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
}
.full {
  clear: both;
}
body.b-debug .full {
  background-color: #f000ff;
}
.wide {
  clear: both;
  margin: 0 auto;
  max-width: 62.5em;
}
body.b-debug .wide {
  background-color: #00ff00;
}
.normal {
  clear: both;
  margin: 0 auto;
  padding: 0em 1em;
  max-width: 31.25em;
}
body.b-debug .normal {
  background-color: #00ff00;
}
.medium {
  clear: both;
  margin: 0 auto;
  padding: 0em 1em;
  max-width: 50em;
}
body.b-debug .medium {
  background-color: #00ff00;
}
.std {
  clear: both;
  margin: 0 auto;
  padding: 0em 1em;
  max-width: 38.75em;
}
body.b-debug .std {
  background-color: #00ff88;
}
.highlight {
  padding: 1em 2em 0.25em 2em;
  border-radius: 1em;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  background-color: white;
}
.highlight:hover {
  background-color: rgba(0, 153, 204, 0.1);
}
.button-box {
  display: inline-block;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em;
  min-width: 18.75em;
}
.button-box a.button {
  margin: 1em 0em;
  display: block;
}
.bk-hands {
  background-image: url('../tests/img/index/Top-Image-Android-1.jpg');
}
.text-area h1 {
  font-size: 2em;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
  font-weight: normal;
}
.text-area p {
  font-weight: normal;
  font-size: 1em;
  line-height: 1.5em;
}
[data-action] {
  cursor: pointer;
}
#ma-slogan {
  float: left;
  background: url("../assets/index/MA-Slogan-323px.png") no-repeat;
  background-size: cover;
  width: 13.6875em;
  height: 5.625em;
}
#ma-logo {
  float: right;
  background: url("../assets/index/SereneScreen-Logo-144px.png") no-repeat;
  background-size: cover;
  width: 9em;
  height: 5.625em;
}
.search-box {
  position: relative;
  padding: 0em;
}
.search-box input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 1em;
  padding: 0.5em 2em 0.5em 1em;
  position: relative;
}
.search-box input[type="text"]::placeholder {
  color: #ccc;
}
.search-box .icon {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1.625em;
  height: 1.625em;
  background: no-repeat;
  background-size: contain;
}
.search-box input:placeholder-shown + .icon {
  background-image: url('../assets/icons/si-glyph-magnifier.svg');
}
.search-box input:not(:placeholder-shown) + .icon {
  background-image: url('../assets/icons/si-glyph-button-error.svg');
}
.search-box input:not(:placeholder-shown) + .icon:hover {
  background-image: url('../assets/icons/si-glyph-circle-error.svg');
}
ul.sub-line {
  list-style: none;
  padding: 0.75em 0em;
  margin: 0;
}
ul.sub-line li {
  display: inline;
  display: relative;
}
ul.sub-line li label {
  cursor: pointer;
  padding: 0em 0.1875em;
}
@media only screen and (min-width: 500px) {
  ul.sub-line li label {
    padding: 0em 0.75em;
  }
}
ul.sub-line li input {
  visibility: hidden;
  position: absolute;
}
ul.sub-line li.label {
  color: #aaa;
  padding-right: 2em;
}
ul.sub-line li input:hover + label {
  color: #17c6ff;
}
ul.sub-line li input:checked + label {
  color: #0099cc;
  text-decoration: underline;
}
ul.sub-line li input:checked:hover + label {
  color: #0099cc;
}
ul.sub-line li:first-of-type label {
  padding: 0em 0.3125em 0em 0em;
}
ul.sub-line li:not(.label) + li:before {
  content: "|";
  color: #999999;
}
/* Tables */
table.top td {
  vertical-align: top;
}
a.buy-now {
  position: relative;
  display: inline-block;
  width: 8.925em;
  height: 2.625em;
  background: url('../assets/index/BuyNow-Button.png') no-repeat;
  background-size: contain;
}
a.buy-now:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 8.925em;
  height: 2.625em;
  background: url('../assets/index/BuyNow-Hover.png') no-repeat;
  background-size: contain;
  transition: opacity 0.25s;
}
a.buy-now:hover:after {
  opacity: 1;
}
.answer {
  clear: both;
}
a.ios-button,
a.android-button {
  width: 8.925em;
  height: 2.625em;
  background: no-repeat;
  background-size: contain;
  display: inline-block;
}
a.ios-button:hover,
a.android-button:hover {
  opacity: 0.6;
}
a.ios-button {
  background-image: url('../assets/index/app-store.png');
}
a.android-button {
  background-image: url('../assets/index/google-play.png');
}
body:not(.os-windows) .show-windows {
  display: none;
}
body:not(.os-ios) .show-ios {
  display: none;
}
body:not(.os-android) .show-android {
  display: none;
}
body:not(.os-mac) .show-mac {
  display: none;
}
body:not(.os-linux) .show-linux {
  display: none;
}
.sform input[type="text"],
.sform input[type="email"],
.sform select {
  margin: 0.1875em;
  width: 100%;
  font-size: 1em;
  padding: 0.1875em 0.5em;
  box-sizing: border-box;
}
.sform label {
  text-align: right;
  width: 100%;
  display: block;
  padding: 0.1875em 0em;
  font-size: 1em;
  font-weight: 600;
}
.sform input[type="checkbox"],
.sform input[type="radio"] {
  display: inline-block;
  position: relative;
  top: 0.0625em;
}
.sform input[type="checkbox"] + label,
.sform input[type="radio"] + label {
  display: inline-block;
  text-align: left;
  width: auto;
  padding-left: 0.3125em;
}
.sform textarea {
  width: 100%;
  padding: 0.1875em 0.5em;
  margin: 0.1875em;
  box-sizing: border-box;
}
.sform button[type="submit"] {
  position: relative;
  border: 0;
  display: inline-block;
  width: 7.65em;
  height: 2.25em;
  background: url('../assets/Button.png') no-repeat;
  background-size: cover;
  color: white;
  font-size: 1.25em;
}
.sform button[type="submit"]:hover {
  background: url('../assets/Button-Hover.png') no-repeat;
  background-size: cover;
}
.sform .errbox {
  border: 1px SOLID #ff00ff;
  max-width: 25em;
  display: inline-block;
  padding: 1em;
  color: #ff00ff;
  font-weight: 600;
  width: 100%;
  margin: 1em 0em;
}
.sform .errbox:empty {
  display: none;
}
.sform .button,
.sform .ebutton {
  cursor: pointer;
  color: white;
  padding: 0.5em 1.25em;
  background: url('../assets/Button.png') no-repeat center;
  background-size: contain;
}
.sform .button:hover,
.sform .ebutton:hover {
  background: url('../assets/Button-Hover.png') no-repeat center;
  background-size: contain;
}
.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #0099cc;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.top-bar {
  clear: both;
  margin-top: 0em;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 50;
  background-color: white;
  text-align: center;
  color: white;
}
.top-bar .medium {
  margin-top: 1.375em;
  background-color: #0099cc;
}
.top-bar a,
.top-bar a:visited,
.top-bar a:link,
.top-bar .on {
  font-size: 1.5em;
  padding: 0.41666667em 1em 0.41666667em 1em;
  color: white;
}
.top-bar .on,
.top-bar .hh {
  display: inline-block;
  position: relative;
  z-index: 5;
  top: 0em;
  transition: background-color 0.2s, top 0.2s;
}
.top-bar .on.vis,
.top-bar .hh.vis {
  top: -0.41666667em;
  background-color: #5ed7ff;
}
.top-bar-correct {
  height: 3.3125em;
}
@media only screen and (min-width: 500px) {
  #wrapper,
  .wrapper {
    font-size: 1rem;
    max-width: 62.5em;
    width: 100%;
    margin: 0 auto;
  }
}
#wrapper.xlarge {
  max-width: 87.5em;
}
.xanim {
  visibility: visible;
  transform: translateY(20px) scale(0.9);
  opacity: 0;
}
.xshow {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s, opacity 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s;
}
.flash-line {
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 500px) {
  .flash-line {
    text-align: left;
  }
}
.flash-container {
  position: relative;
  height: 3em;
}
.flash-container .flash-box {
  position: absolute;
  height: 2em;
  left: 0em;
  top: 0.5em;
  width: 37.5em;
  border-radius: 1.5em;
  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  background-color: #5ed7ff;
  opacity: 1;
  z-index: 1;
}
.flash-container .flash-box.off {
  width: 6.25em;
  height: 1.5em;
  top: 0.75em;
  opacity: 0;
  transition: opacity 1s,width 0.5s,left 0.5s,height 0.5s, top 0.5s;
}
.flash-container .flash-sub {
  display: inline-block;
  z-index: 5;
  display: absolute;
}
.flash-container li {
  cursor: pointer;
}
.fdiv-right,
.fdiv-left {
  padding: 1em 0em;
  width: 100%;
  text-align: center;
}
.fdiv-right img,
.fdiv-left img {
  display: inline-block;
  width: calc(100vw - 2em);
}
.normal-only {
  display: none;
}
@media only screen and (min-width: 500px) {
  .fdiv-right,
  .fdiv-left {
    padding: 1em;
    width: auto;
    text-align: left;
  }
  .fdiv-right img,
  .fdiv-left img {
    display: block;
    width: inherit;
  }
  .fdiv-left {
    float: left;
  }
  .fdiv-right {
    float: right;
  }
  .phone-only {
    display: none;
  }
  .normal-only {
    display: inherit;
  }
}
@media print {
  .no-print {
    display: none !important;
  }
}
