/* hide the footer */
#footer {
  display: none !important;
}
/* *** */
#sidescrollbar {
  width: 10px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 999;
  display: none;
  cursor: pointer;
  overflow: hidden;
}
#sidescrollbar ul#dividers {
  width: 6px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 3;
  opacity: 0.25;
  overflow: hidden;
}
#sidescrollbar ul#dividers li {
  width: 100%;
  height: 20px;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-bottom: 1px solid #fff;
}
#sidescrollbar ul#dividers li:last-child {
  border-bottom: 0px;
  margin-bottom: 0px;
}
#sidescrollbar #indicator {
  background: #ecdc25;
  width: 6px;
  height: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
}
#sidescrollbar #bar {
  background: #000;
  width: 6px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0.25;
}
/* */
#scroll_down {
  width: 100px;
  position: absolute;
  margin-left: -50px;
  left: 50%;
  bottom: 40px;
  display: block;
  z-index: 50;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
  opacity: 0.35;
  cursor: pointer;
  -webkit-transition: opacity 100ms ease-in-out;
  -moz-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}
#scroll_down div.icon {
  width: 30px;
  height: 79px;
  float: left;
  position: relative;
  margin: 0px 0px 0px 35px;
  padding: 0px 0px 0px 0px;
  display: block;
}
#scroll_down div.icon.scroll {
  background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/mouse-scroll-sprite.png) 0px 0px no-repeat;
  background-size: cover;
  animation: mousescroll 900ms steps(6) infinite;
}
#scroll_down div.icon.fingerswipe {
  background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/swipe-hand.png) 0px 0px no-repeat;
  background-size: cover;
  animation: fingerswipe 800ms steps(20) alternate infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@keyframes mousescroll {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -474px;
  }
}
@keyframes fingerswipe {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px 43px;
  }
}
#scroll_down:hover {
  opacity: 1 !important;
}
#scroll_down.mobile span {
  content: attr(data-mobile);
}
@media screen and (max-width: 960px) {
  #scroll_down {
    width: 50px;
    margin-left: -25px;
    bottom: 20px;
  }
  #scroll_down div.icon {
    width: 15px;
    height: 39px;
    margin: 0px 0px 0px 20px;
  }
  @keyframes mousescroll {
    from {
      background-position: 0px 0px;
    }
    to {
      background-position: 0px -237px;
    }
  }
  @keyframes fingerswipe {
    from {
      background-position: 0px 0px;
    }
    to {
      background-position: 0px 21.5px;
    }
  }
}
/* */
div.parallax-stage {
  background-color: #56585a;
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  overflow: hidden;
  z-index: 1 !important;
  /*  */
  /* stage */
}
div.parallax-stage div.loading {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#56585a+0,333333+100 */
  background: #56585a url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/preloader_64_yellow_gray.marriner.gif) center center no-repeat;
  /* Old browsers */
  background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/preloader_64_yellow_gray.marriner.gif) center center no-repeat, -moz-radial-gradient(center, ellipse cover, #56585a 0%, #333333 100%);
  /* FF3.6-15 */
  background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/preloader_64_yellow_gray.marriner.gif) center center no-repeat, -webkit-radial-gradient(center, ellipse cover, #56585a 0%, #333333 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/preloader_64_yellow_gray.marriner.gif) center center no-repeat, radial-gradient(ellipse at center, #56585a 0%, #333333 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#56585a', endColorstr='#333333', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  /* background: @marriner-gray url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/preloader_64_yellow_gray.marriner.gif) center center no-repeat, ; */
  width: 100%;
  height: 100vh;
  left: 0px;
  top: 0px;
  position: absolute;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  z-index: 900;
}
div.parallax-stage ul.parallax-nav {
  width: 20px;
  position: fixed;
  margin-top: -112px;
  right: 73px;
  top: 50%;
  z-index: 2;
  display: none !important;
}
div.parallax-stage ul.parallax-nav .arrow {
  background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/home-hero-arrow-down.png) center top no-repeat;
  width: 27px;
  height: 15px;
  float: left;
  position: relative;
  margin: 0px -4px 0px -5px;
  padding: 0px 0px 0px 0px;
  display: block;
  cursor: pointer;
}
div.parallax-stage ul.parallax-nav .arrow:hover {
  background-position: center bottom;
}
div.parallax-stage ul.parallax-nav li {
  background: none;
  width: 16px;
  height: 16px;
  float: left;
  position: relative;
  margin: 0px 0px 5px 0px;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
  display: block;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 2px solid #ecdc25;
}
div.parallax-stage ul.parallax-nav li:last-child {
  margin-bottom: 0px;
}
div.parallax-stage ul.parallax-nav li:hover {
  background: none;
  border: 2px solid #fff;
}
div.parallax-stage ul.parallax-nav li.current {
  background: #ecdc25;
  border: 2px solid #ecdc25;
}
div.parallax-stage ul.parallax-nav li.current:hover {
  background: #ffffff;
  border: 2px solid #ffffff;
}
div.parallax-stage div.animation_frame {
  width: 100%;
  height: 100vh;
  left: 0px;
  top: 0px;
  position: absolute;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
}
div.parallax-stage div.animation_frame div.animation_bg {
  width: 100%;
  height: 100vh;
  left: 0px;
  top: 0px;
  position: absolute;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: none;
  z-index: 0;
}
div.parallax-stage div.animation_frame#frame1 .animation_bg {
  background: #000000 url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/stars-blur.jpg) center bottom no-repeat;
  background-size: cover;
  /* width: 103%;
				height: 103%;
				top: -1.5%;
				left: -1.5%;
				
				-webkit-filter: blur(60px);
				-moz-filter: blur(60px);
				-o-filter: blur(60px);
				-ms-filter: blur(60px);
				filter: blur(60px); */
}
div.parallax-stage div.animation_frame#frame2 .animation_bg {
  background: #000000 url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/stars.jpg) center bottom no-repeat;
  background-size: cover;
  width: 100%;
  height: 150%;
  top: auto;
  bottom: 0%;
}
div.parallax-stage div.animation_frame#frame3 .animation_bg {
  background: #000000 url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/stars.jpg) center top no-repeat;
  background-size: cover;
  width: 100%;
  height: 150%;
  top: auto;
  bottom: 0%;
}
div.parallax-stage div.animation_frame#frame3 .animation_bg.top {
  top: 0%;
  bottom: auto;
}
div.parallax-stage div.animation_frame#frame4 .animation_bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+17,ffffff+17,808283+100 */
  background: #ffffff;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ffffff 17%, #808283 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%, #ffffff 17%, #808283 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #ffffff 17%, #ffffff 17%, #808283 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#808283', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
div.parallax-stage div.animation_frame#frame4 .content h2 {
  color: #56585a;
}
div.parallax-stage div.animation_frame#frame5 .animation_bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#abacad+0,585a5c+100 */
  background: #abacad;
  /* Old browsers */
  background: -moz-linear-gradient(top, #abacad 0%, #585a5c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #abacad 0%, #585a5c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #abacad 0%, #585a5c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#abacad', endColorstr='#585a5c', GradientType=0);
  /* IE6-9 */
}
div.parallax-stage div.animation_frame#frame6 .animation_bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#585a5c+0,abacad+100 */
  background: #585a5c;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #585a5c 0%, #abacad 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #585a5c 0%, #abacad 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #585a5c 0%, #abacad 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#585a5c', endColorstr='#abacad', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
div.parallax-stage div.animation_frame#frame7 .animation_bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#585a5c+0,abacad+100 */
  background: #585a5c;
  /* Old browsers */
  background: -moz-linear-gradient(left, #585a5c 0%, #abacad 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #585a5c 0%, #abacad 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #585a5c 0%, #abacad 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#585a5c', endColorstr='#abacad', GradientType=1);
  /* IE6-9 */
}
div.parallax-stage div.animation_frame#frame8 .animation_bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#585a5c+0,abacad+100 */
  background: #585a5c;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #585a5c 0%, #abacad 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #585a5c 0%, #abacad 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #585a5c 0%, #abacad 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#585a5c', endColorstr='#abacad', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
div.parallax-stage div.animation_frame#frame9 .animation_bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#abacad+0,585a5c+100 */
  background: #abacad;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #abacad 0%, #585a5c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #abacad 0%, #585a5c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #abacad 0%, #585a5c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#abacad', endColorstr='#585a5c', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
div.parallax-stage div.animation_frame#frame10 .animation_bg {
  background: #f6f5ef url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/tan-circles-bg.jpg) top center no-repeat;
  background-size: cover;
  /*background: @tan url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/circles-animated-sprite.jpg) center top no-repeat; 
			
		
				animation: circlesbg 1000ms steps(9) infinite;*/
}
@keyframes circlesbg {
  from {
    background-position: center 0px;
  }
  to {
    background-position: center -9720px;
  }
}
div.parallax-stage div.animation_frame#frame10 .content div.animation {
  margin-bottom: 0px;
  margin-top: -8px;
}
div.parallax-stage div.animation_frame#frame10 .content div.logotext {
  display: none;
  height: 0px;
}
div.parallax-stage div.animation_frame#frame10 .content h2 {
  font-size: 72px;
  line-height: 72px;
  color: #56585a;
  margin-top: -46px;
}
div.parallax-stage div.animation_frame div.content {
  width: 100%;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  z-index: 1;
}
div.parallax-stage div.animation_frame div.content a {
  margin-top: 65px;
}
div.parallax-stage div.animation_frame div.content h2 {
  width: 100%;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  text-align: center;
  font-size: 96px;
  line-height: 96px;
  font-weight: 300;
  color: #ffffff;
}
div.parallax-stage div.animation_frame div.content h2 em {
  color: #ecdc25;
}
div.parallax-stage div.animation_frame div.content h2 sup {
  vertical-align: super;
  font-size: 36px;
}
div.parallax-stage div.animation_frame div.content div.animation {
  background-position: 0px 0px;
  background-repeat: no-repeat;
  width: 260px;
  height: 260px;
  float: left;
  position: relative;
  margin: 0px 0px 60px -130px;
  padding: 0px;
  display: block;
  left: 50%;
  clear: both;
  /* */
}
div.parallax-stage div.animation_frame div.content div.animation.compass {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/compass.png);
}
div.parallax-stage div.animation_frame div.content div.animation.compass .needle {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/needle.png);
  background-position: center center;
  background-repeat: no-repeat;
  animation: needle 1200ms steps(12) forwards;
  animation-delay: 1000ms;
  width: 108px;
  height: 108px;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  left: 76px;
  top: 96px;
  display: block;
  transform: rotate(-90deg);
}
@keyframes needle {
  /*  from{transform: rotate(0deg);}
					to{transform: rotate(360deg);
					} */
  8% {
    transform: rotate(-90deg);
  }
  16% {
    transform: rotate(-75deg);
  }
  24% {
    transform: rotate(-60deg);
  }
  32% {
    transform: rotate(-45deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  48% {
    transform: rotate(-15deg);
  }
  56% {
    transform: rotate(0deg);
  }
  64% {
    transform: rotate(15deg);
  }
  72% {
    transform: rotate(30deg);
  }
  80% {
    transform: rotate(15deg);
  }
  88% {
    transform: rotate(0deg);
  }
  94% {
    transform: rotate(7deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
div.parallax-stage div.animation_frame div.content div.animation.lightbulb {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/lightbulb-animation.png);
  width: 268px;
  margin-left: -134px;
  animation: lightbulb 1200ms steps(9) forwards;
  animation-delay: 1000ms;
}
@keyframes lightbulb {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -2340px;
  }
}
div.parallax-stage div.animation_frame div.content div.animation.key {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/key-book-animation.png);
  width: 465px;
  margin-left: -233px;
  animation: key 600ms steps(17) forwards;
  animation-delay: 1000ms;
}
@keyframes key {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -4420px;
  }
}
div.parallax-stage div.animation_frame div.content div.animation.quill {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/quill-and-ink-animation.png);
  width: 624px;
  margin-left: -312px;
  animation: quill 800ms steps(24) forwards;
  animation-delay: 1000ms;
}
@keyframes quill {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -6240px;
  }
}
div.parallax-stage div.animation_frame div.content div.animation.devices {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/devices-animation.png);
  width: 592px;
  margin-left: -296px;
  animation: devices 600ms steps(10) forwards;
  animation-delay: 1000ms;
}
@keyframes devices {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -2600px;
  }
}
div.parallax-stage div.animation_frame div.content div.animation.door {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/door-animation.png);
  width: 272px;
  margin-left: -136px;
  animation: door 500ms steps(6) forwards;
  animation-delay: 1000ms;
}
@keyframes door {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -1560px;
  }
}
div.parallax-stage div.animation_frame div.content div.animation.plant {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/plant-animation.png);
  width: 173px;
  margin-left: -87px;
  animation: plant 800ms steps(10) forwards;
  animation-delay: 1000ms;
}
@keyframes plant {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -2600px;
  }
}
div.parallax-stage div.animation_frame div.content div.animation.logo {
  background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/marriner-logo-animation.png);
  width: 865px;
  height: 271px;
  margin-left: -433px;
  animation: logo 1200ms steps(24) forwards;
  animation-delay: 1000ms;
}
@keyframes logo {
  from {
    background-position: left 0px;
  }
  to {
    background-position: left -6504px;
  }
}
@media screen and (max-width: 1690px) {
  div.parallax-stage div.animation_frame#frame10 .content div.animation {
    margin-top: 3px !important;
  }
  div.parallax-stage div.animation_frame#frame10 .content h2 {
    font-size: 60px;
    line-height: 60px;
    /*margin-top: -46px; */
  }
  div.parallax-stage div.animation_frame div.content h2 {
    font-size: 72px;
    line-height: 72px;
  }
  div.parallax-stage div.animation_frame div.content h2 sup {
    font-size: 30px;
  }
}
@media screen and (max-width: 1280px) {
  div.parallax-stage div.animation_frame#frame10 .content div.animation {
    /*margin-top: -7px;*/
  }
  div.parallax-stage div.animation_frame#frame10 .content h2 {
    font-size: 48px;
    line-height: 48px;
    /*margin-top: -46px;*/
  }
  div.parallax-stage div.animation_frame div.content h2 {
    font-size: 60px;
    line-height: 60px;
  }
  div.parallax-stage div.animation_frame div.content h2 sup {
    font-size: 24px;
  }
}
@media screen and (max-width: 1160px) {
  div.parallax-stage div.animation_frame#frame10 .content div.animation.logo {
    background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/marriner-logo-zoom.png);
    background-position: center 0px;
    background-size: cover;
    animation: logo 340ms steps(7) forwards;
    animation-delay: 1000ms;
  }
  @keyframes logo {
    from {
      background-position: center 0px;
    }
    to {
      background-position: center -1897px;
    }
  }
  div.parallax-stage div.animation_frame#frame10 .content div.logotext {
    background: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/marriner-logo-text-animation.png) 0px 0px no-repeat;
    background-size: cover;
    width: 640px;
    height: 119px !important;
    float: left;
    position: relative;
    margin: -53px 0px 82px -320px;
    left: 50%;
    animation: logotext 340ms steps(9) forwards;
    animation-delay: 0ms;
    clear: both;
    display: block;
  }
  @keyframes logotext {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -1071px;
    }
  }
  div.parallax-stage div.animation_frame#frame10 .content a {
    margin-top: 45px;
  }
}
@media screen and (max-width: 1030px) {
  div.parallax-stage div.animation_frame#frame10 .content div.animation {
    margin-top: 11px !important;
  }
  div.parallax-stage div.animation_frame#frame10 .content h2 {
    font-size: 36px;
    line-height: 36px;
    font-weight: 400;
    /*margin-top: -46px;*/
  }
  div.parallax-stage div.animation_frame div.content h2 {
    font-size: 48px;
    line-height: 48px;
  }
  div.parallax-stage div.animation_frame div.content h2 sup {
    font-size: 18px;
  }
}
@media screen and (max-width: 960px) {
  ul.parallax-nav {
    display: none;
  }
}
@media screen and (max-width: 890px) {
  div.parallax-stage div.animation_frame#frame1 .animation_bg {
    background: #000000 url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/stars-mobile-blur.jpg) center bottom no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  div.parallax-stage div.animation_frame#frame2 .animation_bg {
    background: #000000 url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/stars-mobile.jpg) center bottom no-repeat;
    background-size: cover;
  }
  div.parallax-stage div.animation_frame#frame10 .content div.animation {
    /*margin-top: -7px;*/
    margin-bottom: 0px;
  }
  div.parallax-stage div.animation_frame#frame10 .content div.animation.logo {
    background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/clarity_v2/marriner-logo-zoom.png);
    background-position: center 0px;
    animation: logo 340ms steps(7) forwards;
    animation-delay: 1000ms;
  }
  @keyframes logo {
    from {
      background-position: center 0px;
    }
    to {
      background-position: center -1897px;
    }
  }
  div.parallax-stage div.animation_frame#frame10 .content h2 {
    font-size: 30px;
    line-height: 30px;
    /*margin-top: -46px;*/
  }
  div.parallax-stage div.animation_frame div.content {
    /* animation */
    /* animation */
    /* content */
  }
  div.parallax-stage div.animation_frame div.content div.logotext {
    width: 320px !important;
    height: 59.5px !important;
    margin: -20px 0px 33px -160px !important;
    background-size: cover;
    background-position: left -535px !important;
  }
  @keyframes logotext {
    from {
      background-position: left -535px;
    }
    to {
      background-position: left -535px;
    }
  }
  div.parallax-stage div.animation_frame div.content h2 {
    font-size: 36px;
    line-height: 36px;
    font-weight: 400 !important;
  }
  div.parallax-stage div.animation_frame div.content h2 sup {
    font-size: 14px;
  }
  div.parallax-stage div.animation_frame div.content div.animation {
    background-size: cover;
    width: 130px;
    height: 130px;
    margin: 0px 0px 40px -65px;
    /* */
  }
  div.parallax-stage div.animation_frame div.content div.animation.compass .needle {
    background-size: cover;
    width: 54px;
    height: 54px;
    left: 38px;
    top: 48px;
  }
  div.parallax-stage div.animation_frame div.content div.animation.lightbulb {
    width: 134px;
    margin-left: -67px;
  }
  @keyframes lightbulb {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -1170px;
    }
  }
  div.parallax-stage div.animation_frame div.content div.animation.key {
    width: 232.5px;
    margin-left: -116.25px;
  }
  @keyframes key {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -2210px;
    }
  }
  div.parallax-stage div.animation_frame div.content div.animation.quill {
    width: 312px;
    margin-left: -156px;
  }
  @keyframes quill {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -3120px;
    }
  }
  div.parallax-stage div.animation_frame div.content div.animation.devices {
    width: 296px;
    margin-left: -148px;
  }
  @keyframes devices {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -1300px;
    }
  }
  div.parallax-stage div.animation_frame div.content div.animation.door {
    width: 136px;
    margin-left: -68px;
  }
  @keyframes door {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -780px;
    }
  }
  div.parallax-stage div.animation_frame div.content div.animation.plant {
    width: 86.5px;
    margin-left: -43.25px;
  }
  @keyframes plant {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -1300px;
    }
  }
  div.parallax-stage div.animation_frame div.content div.animation.logo {
    width: 432.5px;
    height: 135.5px;
    margin-left: -216.25px;
    background-position: left bottom !important;
    animation: logo 340ms steps(1) forwards;
    animation-delay: 1000ms;
  }
  @keyframes logo {
    from {
      background-position: left bottom;
    }
    to {
      background-position: left bottom;
    }
  }
}
@media screen and (max-width: 660px) {
  div.parallax-stage div.animation_frame#frame10 .content div.animation {
    /*margin-top: -7px;*/
  }
  div.parallax-stage div.animation_frame#frame10 .content div.animation.logo {
    background-position: left 0px !important;
    animation: logo 340ms steps(7) forwards;
    animation-delay: 1000ms;
  }
  @keyframes logo {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -949px;
    }
  }
  div.parallax-stage div.animation_frame#frame10 .content h2 {
    font-size: 24px;
    line-height: 30px;
    /*margin-top: -46px;*/
    margin-top: -79px !important;
    margin-bottom: -37px !important;
  }
  div.parallax-stage div.animation_frame div.content a {
    height: 50px;
    font-size: 22px;
    line-height: 47px;
    margin-left: -80px;
    margin-top: -11px !important;
  }
  div.parallax-stage div.animation_frame div.content a:hover {
    background-position: right 22px bottom;
  }
  div.parallax-stage div.animation_frame div.content a span {
    background-position: right 22px bottom;
    background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/cta-arrow-small.png);
    padding-left: 20px;
    padding-right: 50px;
  }
  div.parallax-stage div.animation_frame div.content a span::after {
    background-position: right 22px top;
    background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/cta-arrow-small.png);
    padding-left: 20px;
    padding-right: 50px;
  }
  div.parallax-stage div.animation_frame div.content div.logotext {
    margin-top: 0px;
    margin-bottom: 0px;
    background-size: cover;
    background-position: left -535px !important;
    animation: logotext 1000ms steps(7) forwards;
    animation-delay: 0ms;
  }
  @keyframes logotext {
    from {
      background-position: left -535px;
    }
    to {
      background-position: left -535px;
    }
  }
  div.parallax-stage div.animation_frame div.content h2 {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 30px;
    line-height: 36px;
  }
  div.parallax-stage div.animation_frame div.content h2 sup {
    font-size: 12px;
  }
}
@media screen and (max-width: 450px) {
  /* shrink width of last frame h2 so that you don't get a widow on clarity */
  div.parallax-stage div.animation_frame#frame10 div.content div.animation {
    /*margin-top: -7px;*/
  }
  div.parallax-stage div.animation_frame#frame10 div.content h2 {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 45px !important;
    margin-top: -64px !important;
  }
}
@media screen and (max-width: 400px) {
  div.parallax-stage div.animation_frame div.content h2 {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  div.parallax-stage div.animation_frame div.content div.logotext {
    width: 214px !important;
    height: 30px !important;
    background-size: cover;
    margin-left: -107px !important;
    margin-bottom: 14px !important;
  }
  @keyframes logotext {
    from {
      background-position: left 0px;
    }
    to {
      background-position: left -358px;
    }
  }
}
@media screen and (max-width: 340px) {
  /* shrink width of last frame h2 so that you don't get a widow on clarity */
  div.parallax-stage div.animation_frame#frame10 div.content h2 {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }
}