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

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  color: #3B3B3B;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif;
  line-height: 1.2;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

svg {
  display: block;
}

button,
.button {
  border-radius: 0;
  font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif;
  transition: 150ms all ease-in-out;
  padding: 0;
  font-size: 1.4rem;
  color: #CCCCCC;
  outline: none;
  border: none;
  -webkit-appearance: none;
  background-color: transparent;
  cursor: pointer;
  letter-spacing: 0.05rem;
}

button p,
.button p {
  color: #FFFFFF;
}

button.white,
.button.white {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

button.primary,
button.secondary,
.button.primary,
.button.secondary {
  padding: 16px 40px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
}

button.primary.small,
button.secondary.small,
.button.primary.small,
.button.secondary.small {
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
}

button.primary,
.button.primary {
  background-color: #01b6fb;
  color: #FFFFFF;
}

button.primary:hover,
.button.primary:hover {
  background-color: #3491C9;
}

button.primary.disabled,
.button.primary.disabled {
  background-color: #DDDDDD;
  color: #777777;
}

button.primary.disabled:hover,
.button.primary.disabled:hover {
  background-color: #DDDDDD;
  color: #777777;
}

button.secondary,
.button.secondary {
  border: 2px solid #ffffff;
  color: #ffffff;
}

button.secondary:hover,
.button.secondary:hover {
  border-color: #F1F3F4;
  color: #F1F3F4;
}

button.secondary:hover.disabled,
.button.secondary:hover.disabled {
  border-color: #DDDDDD;
  color: #DDDDDD;
}

button.clean,
.button.clean {
  color: #00C6FF;
}

button.clean:hover,
.button.clean:hover {
  color: #00b2e6;
}

button.primary-white,
.button.primary-white {
  background-color: #FFFFFF;
  color: #007CA9;
}

button.primary-white:hover,
.button.primary-white:hover {
  background-color: #f2f2f2;
}

button.primary-red,
.button.primary-red {
  background-color: #fd0d00;
  color: #FFFFFF;
}

button.primary-red:hover,
.button.primary-red:hover {
  background-color: #e40c00;
}

button.secondary-red,
.button.secondary-red {
  border: 1px solid #fd0d00;
  color: #fd0d00;
  height: 42px;
  padding: 0 1.5rem;
}

button.secondary-red:hover,
.button.secondary-red:hover {
  border-color: #e40c00;
}

button.secondary-red.delete,
.button.secondary-red.delete {
  display: flex;
}

button.secondary-red.delete icon,
.button.secondary-red.delete icon {
  margin: auto 1rem auto 0;
}

button.secondary-red.delete svg,
.button.secondary-red.delete svg {
  height: 18px;
  width: 15px;
}

button.secondary-red.delete svg path,
.button.secondary-red.delete svg path {
  transition: fill 300ms ease-in-out;
  fill: #fd0d00;
}

button.secondary-red.delete:hover svg circle,
button.secondary-red.delete ellipse,
button.secondary-red.delete line,
button.secondary-red.delete polygon,
button.secondary-red.delete polyline,
button.secondary-red.delete rect,
button.secondary-red.delete path,
.button.secondary-red.delete:hover svg circle,
.button.secondary-red.delete ellipse,
.button.secondary-red.delete line,
.button.secondary-red.delete polygon,
.button.secondary-red.delete polyline,
.button.secondary-red.delete rect,
.button.secondary-red.delete path {
  fill: #e40c00;
}

button.secondary-red p,
.button.secondary-red p {
  color: #fd0d00;
}

button.icon,
.button.icon {
  display: flex;
}

button.icon icon,
.button.icon icon {
  margin: auto 1rem auto 0;
}

button.icon icon svg,
.button.icon icon svg {
  width: 20px;
  height: 20px;
}

button.icon icon svg circle,
button.icon icon svg ellipse,
button.icon icon svg line,
button.icon icon svg polygon,
button.icon icon svg polyline,
button.icon icon svg rect,
button.icon icon svg path,
.button.icon icon svg circle,
.button.icon icon svg ellipse,
.button.icon icon svg line,
.button.icon icon svg polygon,
.button.icon icon svg polyline,
.button.icon icon svg rect,
.button.icon icon svg path {
  fill: #FFFFFF;
}

button.icon icon .plus-icon,
.button.icon icon .plus-icon {
  height: 14px;
  width: 14px;
}

button.disabled,
.button.disabled {
  cursor: default;
}

button.delete svg,
.button.delete svg {
  height: 18px;
  width: 15px;
}

button.delete svg circle,
button.delete svg ellipse,
button.delete svg line,
button.delete svg polygon,
button.delete svg polyline,
button.delete svg rect,
button.delete svg path,
.button.delete svg circle,
.button.delete svg ellipse,
.button.delete svg line,
.button.delete svg polygon,
.button.delete svg polyline,
.button.delete svg rect,
.button.delete svg path {
  transition: fill 300ms ease-in-out;
}

button.delete:hover,
.button.delete:hover {
  color: #fd0d00;
}

button.delete:hover svg circle,
button.delete:hover svg ellipse,
button.delete:hover svg line,
button.delete:hover svg polygon,
button.delete:hover svg polyline,
button.delete:hover svg rect,
button.delete:hover svg path,
.button.delete:hover svg circle,
.button.delete:hover svg ellipse,
.button.delete:hover svg line,
.button.delete:hover svg polygon,
.button.delete:hover svg polyline,
.button.delete:hover svg rect,
.button.delete:hover svg path {
  fill: #fd0d00 !important;
}

.buttons-wrapper {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

@media (max-width: 33em) {
  .buttons-wrapper {
    padding: 1rem;
  }
}

@media (min-width: 33em) {
  .buttons-wrapper {
    padding: 2rem;
  }
}

.buttons-wrapper.align-right button:first-child {
  margin-left: auto;
}

.buttons-wrapper.two-options button:first-child {
  margin-right: auto;
}

.buttons-wrapper.two-options button:last-child {
  margin-left: auto;
}

.buttons-wrapper.center {
  justify-content: space-around;
}

.buttons-wrapper.center button {
  margin-right: 0;
}

.buttons-wrapper.center .micro-copy {
  text-align: center;
}

.buttons-wrapper button {
  margin-right: 1rem;
}

.buttons-wrapper button:last-child {
  margin-right: 0;
}

.buttons-wrapper>.micro-copy {
  margin-top: 0.3rem;
  width: 100%;
}

.buttons-wrapper>.micro-copy:first-child {
  margin-top: 0;
}

.buttons-wrapper.dark {
  background-color: #777777;
}

.buttons-wrapper.dark .micro-copy {
  color: #FFFFFF;
  text-align: center;
}

.buttons-wrapper.clean {
  padding: 0;
  width: auto;
  background-color: transparent;
}

a.button {
  text-decoration: none !important;
}

header {
  height: 80px;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 81, 110, 0.9);
}

header .inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding: 2rem;
  margin: 0 auto;
  z-index: 1000;
}

header nav {
  margin-left: auto;
}

.logo-text {
  margin-left: 1.2rem;
}

@media (max-width: 33em) {
  .logo-text {
    display: none;
  }
}


.footer_top {
  background-color: #00658a;
  color: #FFFFFF;
  text-align: center;
  padding: 2rem 4rem;
}

.footer_bottom {
  background-color: #007CA9;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
}

svg#logo_and_tagline {
  width: 470px;
  display: inline-block;
  max-width: 100%;
}

footer .inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
}

footer p {
  margin: 0;
  font-size: 1.2rem;
  padding: 0.5rem;
}

footer a {
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
}

.welcome-error {
  display: none;
}

settings-card .welcome-error {
  display: block;
}

settings-card .welcome {
  display: none;
}

.welcome .inner {
  margin: 0 auto;
  min-height: 100vh;
  width: 100%;
  max-width: 1280px;
  color: #FFFFFF;
}

.welcome h1,
.welcome h2,
.welcome h3,
.welcome h4,
.welcome h5,
.welcome h6 {
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.65);
  letter-spacing: -0.05rem;
  text-transform: none;
  max-width: 840px;
  margin: 0;
  font-weight: normal;
}

.welcome .button.main-cta {
  padding: 16px 80px;
  font-size: 18px;
  font-weight: bold;
  z-index: 1001;
}

.landing-banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bgtop.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.landing-banner h1 {
  font-weight: bold;
  letter-spacing: 0.05rem;
  margin-bottom: 24px;
  max-width: 628px;
  width: 100%;
}

@media screen and (max-width: 768px){
  .landing-banner h1{
    margin-top: 9vh;
  }
}

@media screen and (max-width: 420px) and (max-height: 720px){
  .landing-banner h1{
    margin-top: 8vh
  }
  
}


.landing-banner p{
  margin: 0;
  max-width: 640px;
  font-size: 20px;
  line-height: 1.5;
}

@media screen and (max-width: 768px){
  .landing-banner p{
    font-size: 18px;
  }
}

.external-link.white{
  color: #fff;
  text-decoration: underline;
  font-size: 18px;
  font-weight: bold;
}

.external-link.white:hover{
  color: #f2f2f2;
}

.landing-banner .button{
  font-size: 20px;
  padding: 20px;
  width: 100%;
}

.flex-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}




.landing-banner .inner {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: calc(25vh + 2rem);
  transition: 300ms all linear;
}

@media (max-width: 33em) {
  .landing-banner .inner {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: calc(80px + 1rem);
  }
}

@media (min-width: 33em) {
  .landing-banner .inner {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: calc(80px + 2rem);
  }
}

.landing-banner .links-container{
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
  width: 100%;
  max-width: 300px;
}

.landing-banner .links-container .button{
  font-weight: bold;
}



.curve {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 500;
}

.devices {
  width: 100%;
  max-width: 1000px;
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  transform: translateY(0px);
  transition: 400ms all linear;
  margin-top: 14rem;
}

.devices-placeholder {
  position: relative;
  background-image: linear-gradient(to bottom, #00516e 0%, #0076a1 100%);
  min-height: 100vh;
}

.devices-placeholder.initial .devices {
  transform: translateY(-460px);
}

.devices-placeholder.initial .imac {
  margin: 14rem 10% 0 10%;
  transform: scale(1.2);
}

.devices-placeholder.initial .ipad,
.devices-placeholder.initial .iphone {
  transform: translateX(-100%);
  opacity: 0;
}

.devices-placeholder.initial h2,
.devices-placeholder.initial h3,
.devices-placeholder.initial a {
  opacity: 0;
  transform: translateX(-150%);
}

.devices-placeholder .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150vh;
  position: relative;
  color: #FFFFFF;
}

@media (max-width: 33em) {
  .devices-placeholder .inner {
    padding: 1rem;
  }
}

@media (min-width: 33em) {
  .devices-placeholder .inner {
    padding: 2rem;
  }
}

@media (max-width: 33em) {
  .devices-placeholder .inner {
    text-align: center;
  }
}

.devices-placeholder h2 {
  opacity: 1;
  transform: translateX(0%);
  transition: 400ms 2200ms ease-in-out;
  font-weight: bold;
}

@media (max-width: 33em) {
  .devices-placeholder h2 {
    font-size: 2.6rem;
    margin-top: calc(3.6rem * 0.6);
  }
}

@media (min-width: 33em) {
  .devices-placeholder h2 {
    font-size: 3.6rem;
    margin-top: calc(4.6rem * 0.6);
  }
}

.devices-placeholder h3 {
  opacity: 1;
  transform: translateX(0%);
  transition: 400ms 2800ms ease-in-out;
}

@media (max-width: 33em) {
  .devices-placeholder h3 {
    font-size: 1.8rem;
    margin-bottom: calc(1.8rem * 1.2);
  }
}

@media (min-width: 33em) {
  .devices-placeholder h3 {
    font-size: 2.4rem;
    margin-bottom: calc(2.4rem * 1.2);
  }
}

.devices-placeholder a {
  opacity: 1;
  transform: translateX(0%);
  transition: 400ms 3400ms ease-in-out;
}

.devices-placeholder img {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
  width: 100%;
  display: block;
  margin: 0 auto;
}

.iphone {
  transition: 400ms 1600ms cubic-bezier(0.56, 0.01, 0.49, 1.21);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2400;
  width: 13.5%;
  max-width: 135px;
  transform: translateX(0%);
  opacity: 1;
}

.ipad {
  transition: 400ms 1000ms all cubic-bezier(0.56, 0.01, 0.49, 1.21);
  position: absolute;
  bottom: 0;
  left: calc(8.25vw/2);
  z-index: 2200;
  width: 28.5%;
  max-width: 285px;
  transform: translateX(0%);
  opacity: 1;
}

.imac {
  transition: 400ms all cubic-bezier(0.56, 0.01, 0.49, 1.21);
  z-index: 2000;
  width: 80%;
  max-width: 800px;
  margin-left: 20%;
  transform: scale(1);
}

.imac.hover:hover {
  bottom: 37vh;
}

.imac.hover:hover .imac-micro {
  opacity: 1;
  visibility: visible;
}

.imac .imac-micro:not(.hover) {
  opacity: 0;
}

.imac .imac-micro {
  width: 80%;
  max-width: 800px;
  margin: 0;
  visibility: hidden;
  position: absolute;
  top: 8rem;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: 300ms all ease-in-out;
  color: #FFFFFF;
  height: 40px;
  line-height: 40px;
  font-size: 1.8rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.animate .imac {
  transition-property: all;
}

@media (max-width: 33em) {
  .controller-wifi {
    background-color: #3B3B3B;
  }
}

@media (min-width: 33em) {
  .controller-wifi {
    background: linear-gradient(to bottom, #FFFFFF 50%, #3B3B3B 50%);
    background-position: bottom;
  }
}

.controller-wifi.initial .iphone-app {
  transform: rotate(20deg) translateX(90px);
}

.controller-wifi .inner {
  display: flex;
  flex-flow: column wrap;
  position: relative;
}

@media (max-width: 33em) {
  .controller-wifi .inner {
    padding-top: 10rem;
    padding-bottom: 10rem;
    min-height: auto;
  }
}

@media (min-width: 33em) {
  .controller-wifi .inner {
    padding-top: 14rem;
    padding-bottom: 14rem;
  }
}

@media (max-width: 33em) {
  .controller-wifi .inner {
    padding-left: 1rem;
  }
}

@media (min-width: 33em) {
  .controller-wifi .inner {
    padding-left: 2rem;
  }
}

@media (max-width: 33em) {
  .controller-wifi .inner {
    padding-right: 1rem;
  }
}

@media (min-width: 33em) {
  .controller-wifi .inner {
    padding-right: 2rem;
  }
}

.controller-wifi h2,
.controller-wifi h3 {
  text-align: center;
  margin: 0 auto;
  text-shadow: none;
}

@media (max-width: 33em) {

  .controller-wifi h2,
  .controller-wifi h3 {
    color: #FFFFFF;
  }
}

@media (min-width: 33em) {

  .controller-wifi h2,
  .controller-wifi h3 {
    color: #007CA9;
  }
}

.controller-wifi h2 span,
.controller-wifi h3 span {
  color: #00C6FF;
}

.controller-wifi h2 {
  font-weight: bold;
}

@media (max-width: 33em) {
  .controller-wifi h2 {
    font-size: 3.6rem;
  }
}

@media (min-width: 33em) {
  .controller-wifi h2 {
    font-size: 4.2rem;
  }
}

.controller-wifi h3 {
  margin-top: 3rem;
}

@media (max-width: 33em) {
  .controller-wifi h3 {
    font-size: 2.0rem;
  }
}

@media (min-width: 33em) {
  .controller-wifi h3 {
    font-size: 3.0rem;
  }
}

.wifi-snap {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 33em) {
  .wifi-snap {
    margin-top: 4rem;
  }
}

@media (min-width: 33em) {
  .wifi-snap {
    margin-top: 10rem;
  }
}

.wifi-snap img {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
  margin-left: auto;
  max-width: 700px;
  width: 70%;
  height: 100%;
}

.wifi-snap figcaption {
  margin: auto 0 60px 1rem;
  width: 20%;
}

@media (max-width: 33em) {
  .wifi-snap figcaption {
    font-size: 1.4rem;
    margin-bottom: 0;
  }
}

.wifi-info {
  width: 75vw;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

@media (max-width: 33em) {
  .wifi-info {
    margin-top: 4rem;
  }
}

@media (min-width: 33em) {
  .wifi-info {
    margin-top: 8rem;
  }
}

.wifi-info .text {
  margin-left: 2rem;
}

.wifi-info img {
  width: 50%;
  height: 100%;
  max-width: 300px;
}

.wifi-info h4 {
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: none;
  margin-bottom: 2rem;
}

.wifi-info p {
  margin: 0;
  line-height: 1.4;
}

.features {
  text-align: center;
  background-image: linear-gradient(to bottom, #00516e 0%, #0076a1 100%);
  position: relative;
  overflow: hidden;
}

@media (min-width: 33em) {
  .features:before {
    content: "";
    background-color: white;
    height: 200vh;
    width: 55vw;
    top: -50vh;
    left: 50vw;
    display: block;
    z-index: 100;
    position: absolute;
    transform: rotate(3deg);
  }

  .features:after {
    content: "";
    background-color: white;
    height: calc(100vh + 4rem);
    width: 45vw;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
  }
}

.features .inner {
  display: flex;
  align-items: center;
}

@media (max-width: 33em) {
  .features .inner {
    padding: 1rem;
  }
}

@media (min-width: 33em) {
  .features .inner {
    padding: 2rem;
  }
}

.features .title {
  font-size: 3.2rem;
  font-weight: bold;
}

.features .title+.micro-copy {
  font-size: 1.8rem;
  margin-top: 0.5rem;
}

@media (max-width: 33em) {
  .features .primary.primary-white {
    margin: 1rem auto;
  }
}

@media (min-width: 33em) {
  .features .primary.primary-white {
    margin: 2rem auto;
  }
}

@media (min-width: 33em) {

  .features-wrapper,
  .feature-thumbnails {
    width: 50vw;
    padding: 0 5vw;
    max-width: calc(1280px /2);
  }
}

.features-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.feature-list-wrapper {
  overflow: hidden;
}

@media (max-width: 33em) {
  .feature-list-wrapper {
    width: calc(100vw - 2rem);
  }
}

@media (min-width: 33em) {
  .feature-list-wrapper {
    width: calc(36vw - 4rem);
  }
}

.feature-list {
  transition: 250ms all ease-in-out;
  display: flex;
  flex-flow: row nowrap;
}

@media (max-width: 33em) {
  .feature-list {
    width: calc((100vw - 2rem)*3);
  }
}

@media (min-width: 33em) {
  .feature-list {
    width: calc((36vw - 4rem)*3);
  }
}

@media (max-width: 33em) {
  .feature-list.feature-list-1 {
    transform: translateX(calc(0 - 2rem));
  }
}

@media (min-width: 33em) {
  .feature-list.feature-list-1 {
    transform: translateX(0);
  }
}

.feature-list.feature-list-1 .feature:not(.feature-1) {
  opacity: 0;
  transform: scale(0.4);
}

@media (max-width: 33em) {
  .feature-list.feature-list-2 {
    transform: translateX(calc(-100vw + 2rem));
  }
}

@media (min-width: 33em) {
  .feature-list.feature-list-2 {
    transform: translateX(calc(-36vw - -4rem));
  }
}

.feature-list.feature-list-2 .feature:not(.feature-2) {
  opacity: 0;
  transform: scale(0.4);
}

@media (max-width: 33em) {
  .feature-list.feature-list-3 {
    transform: translateX(calc(-200vw + 4rem));
  }
}

@media (min-width: 33em) {
  .feature-list.feature-list-3 {
    transform: translateX(calc((-36vw - -4rem)*2));
  }
}

.feature-list.feature-list-3 .feature:not(.feature-3) {
  opacity: 0;
  transform: scale(0.4);
}

.feature {
  text-align: center;
  opacity: 1;
  transform: scale(1);
  transition: 400ms all ease-in-out;
}

@media (max-width: 33em) {
  .feature {
    padding: 1rem;
  }
}

@media (min-width: 33em) {
  .feature {
    padding: 2rem;
  }
}

@media (max-width: 33em) {
  .feature {
    width: 100vw;
  }
}

@media (min-width: 33em) {
  .feature {
    width: calc(36vw - 4rem);
  }
}

.feature .thumb {
  box-shadow: 1px 2px 3px rgba(59, 59, 59, 0.8);
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  height: 175px;
  width: 175px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 33em) {
  .feature .thumb {
    margin: 0 auto 1rem auto;
  }
}

@media (min-width: 33em) {
  .feature .thumb {
    margin: 0 auto 2rem auto;
  }
}

.feature .thumb svg {
  height: 120px;
  width: 120px;
}

.feature .thumb svg circle,
.feature .thumb svg ellipse,
.feature .thumb svg line,
.feature .thumb svg polygon,
.feature .thumb svg polyline,
.feature .thumb svg rect,
.feature .thumb svg path {
  fill: #00516E;
}

.feature .sub-title {
  font-size: 2.8rem;
}

.feature .description {
  font-size: 1.8rem;
  margin-top: 0.5rem;
}

.feature-list-navigation {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

@media (max-width: 33em) {
  .feature-list-navigation {
    margin: 1rem auto;
  }
}

@media (min-width: 33em) {
  .feature-list-navigation {
    margin: 2rem auto;
  }
}

.feature-list-navigation .bubble,
.feature-list-navigation button {
  filter: drop-shadow(1px 2px 3px rgba(59, 59, 59, 0.8));
}

.feature-list-navigation svg {
  height: 28px;
  width: 28px;
}

.feature-list-navigation .next {
  margin-left: 1rem;
  transform: rotate(180deg);
}

.feature-list-navigation .prev {
  margin-right: 1rem;
}

.feature-list-navigation .separator {
  margin: 0 -1px;
  height: 4px;
  width: 20px;
  background-color: #FFFFFF;
}

.feature-list-navigation .bubble {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background-color: #0076a1;
  position: relative;
  z-index: 100;
}

.feature-list-navigation.feature-list-1 .bubble-1 {
  background-color: #FFFFFF;
}

.feature-list-navigation.feature-list-2 .bubble-2 {
  background-color: #FFFFFF;
}

.feature-list-navigation.feature-list-3 .bubble-3 {
  background-color: #FFFFFF;
}

.feature-thumbnails {
  position: relative;
  z-index: 300;
  height: 100vh;
  transition: 250ms all ease-in-out;
}

.feature-thumbnails .feature {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 33em) {
  .feature-thumbnails {
    display: none;
  }
}

.feature-thumbnails img {
  max-width: 38vw;
}

.feature-thumbnails.feature-list-1 {
  opacity: 1;
}

.feature-thumbnails.feature-list-1 .feature:not(.feature-1) {
  opacity: 0;
}

.feature-thumbnails.feature-list-2 {
  opacity: 1;
}

.feature-thumbnails.feature-list-2 .feature:not(.feature-2) {
  opacity: 0;
}

.feature-thumbnails.feature-list-3 {
  opacity: 1;
}

.feature-thumbnails.feature-list-3 .feature:not(.feature-3) {
  opacity: 0;
}

.bottom-banner {
  background-image: linear-gradient(to bottom, #00516e 0%, rgba(0, 81, 161, 0) 75%), url(../img/bgbottom.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.bottom-banner .inner {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 33em) {
  .bottom-banner .inner {
    padding: 1rem;
  }
}

@media (min-width: 33em) {
  .bottom-banner .inner {
    padding: 2rem;
  }
}

.bottom-banner h4 {
  font-size: 4.4rem;
  font-weight: bold;
  margin-bottom: 4rem;
}

.bottom-banner a {
  text-decoration: underline;
  color: #FFFFFF;
}

.scroll-icon {
  opacity: 1;
  position: fixed;
  z-index: 3500;
  overflow: visible;
  transition: all 300ms ease;
}

@media (max-width: 768px) {
  .scroll-icon {
    bottom: 1rem;
    right: 1rem;
    transform: translateY(0%);
    display: none;
  }
}

@media (min-width: 769px) {
  .scroll-icon {
    top: calc((100vh / 2) - (66px + 20px + 1rem));
    right: 2rem;
    transform: translateX(0%);
  }
}

.scroll-icon:hover .micro {
  opacity: 1;
}

.scroll-icon.hidden {
  opacity: 0;
}

@media (max-width: 33em) {
  .scroll-icon.hidden {
    transform: translateY(100%);
  }
}

@media (min-width: 33em) {
  .scroll-icon.hidden {
    transform: translateX(100%);
  }
}

.scroll-icon .icon {
  width: 24px;
  height: 66px;
  overflow: visible;
}

.scroll-icon .arrow {
  animation: arrow-animation 2000ms ease-in-out infinite;
}

.scroll-icon .arrow circle,
.scroll-icon .arrow ellipse,
.scroll-icon .arrow line,
.scroll-icon .arrow polygon,
.scroll-icon .arrow polyline,
.scroll-icon .arrow rect,
.scroll-icon .arrow path {
  fill: #FFFFFF;
  box-shadow: 1px 1px 1px rgba(59, 59, 59, 0.8);
}

.scroll-icon .micro {
  opacity: 0;
  transition: 300ms opacity ease-in-out;
  font-size: 1.2rem;
  color: #FFFFFF;
  text-align: center;
  position: absolute;
  top: -48px;
  left: -12px;
  width: 48px;
  margin: 0;
}

@keyframes arrow-animation {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  50% {
    transform: translate3d(0%, 5px, 0);
  }

  100% {
    transform: translate3d(0%, 0, 0);
  }
}

a {
  text-decoration: none;
  cursor: pointer;
}

p {
  line-height: 1.2;
  font-size: 1.6rem;
}

p strong {
  font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.8rem;
}

ul li,
ol li {
  line-height: 1.2;
  font-size: 1.6rem;
}

p+h1,
p+h2,
p+h3,
p+h4,
p+h5 {
  margin-top: 2rem;
}

strong {
  font-weight: bold;
}

em {
  color: #007CA9;
}

nav a {
  color: white;
}

img {
  max-width: 100%;
  height: auto;
}

.highlight {
  color: #00C6FF;
}

sup {
  top: -0.8rem;
  position: relative;
  font-size: 60%;
  line-height: 0;
  vertical-align: baseline;
}

.tagline-desktop{
  display: none;
}

.tagline-mobile{
  display: block;
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .tagline-desktop{
    display: block;
  }
  .tagline-mobile{
    display: none;
  }
}

header nav a{
  padding: 12px 20px !important;
}