/* home page */
/* */
#heroes {
  /* 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;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  overflow: hidden !important;
  z-index: 0;
  /* heroes */
}
#heroes * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
#heroes #hero-cta-bar {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#585a5c+0,272828+100&0.95+0,0.95+100 */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNTg1YTVjIiBzdG9wLW9wYWNpdHk9IjAuOTUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3MjgyOCIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(-45deg, rgba(88, 90, 92, 0.95) 0%, rgba(39, 40, 40, 0.95) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(88, 90, 92, 0.95) 0%, rgba(39, 40, 40, 0.95) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(88, 90, 92, 0.95) 0%, rgba(39, 40, 40, 0.95) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2585a5c', endColorstr='#f2272828', GradientType=1);
  /* IE6-8 fallback on horizontal gradient */
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  z-index: 1001;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
#heroes #hero-cta-bar a.cta {
  float: left;
  position: relative;
  margin: 0px 10px 0px 10px;
  left: auto;
  top: auto;
}
#heroes ul#pagination {
  height: 12px;
  margin: 0px auto 0px auto;
  position: fixed;
  left: 50%;
  bottom: calc(55px + 80px);
  z-index: 1000;
  opacity: 0;
}
#heroes ul#pagination li {
  background: none;
  width: 8px;
  height: 8px;
  float: left;
  position: relative;
  margin: 0px 10px 0px 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;
}
#heroes ul#pagination li:last-child {
  margin-right: 0px;
}
#heroes ul#pagination li:hover {
  background: none !important;
  border: 2px solid #ffffff !important;
}
#heroes ul#pagination li.current {
  background: #ecdc25 !important;
  border: 2px solid #ecdc25 !important;
}
#heroes ul#pagination li.current:hover {
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
}
#heroes div.arrow-down {
  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;
  position: fixed;
  margin-left: -13px;
  left: 50%;
  bottom: calc(20px + 80px);
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
}
#heroes div.arrow-down:hover {
  background-position: center bottom;
}
div.hero {
  background: #56585a 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: calc(100% - 80px);
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  opacity: 0;
  z-index: 0;
  /* hero */
}
div.hero video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 0;
  bottom: 0;
  z-index: 1;
  display: block;
}
div.hero div.bgimage {
  /* Preserve aspet ratio for ios */
  width: 100%;
  height: 100%;
  max-width: 100%;
  background-position: center center !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  opacity: 1;
  display: block;
}
div.hero div.bgimage.light {
  /* what to do with a light image */
  opacity: 0.4;
  /*  -webkit-filter: blur(25px);
			  -moz-filter: blur(25px);
			  -o-filter: blur(25px);
			  -ms-filter: blur(25px);
			  filter: blur(25px); */
}
div.hero img.bgimageforcolor {
  display: none;
}
div.hero #hero_content {
  width: 80%;
  height: auto;
  float: left;
  position: relative;
  margin: 0px 10% 0px 10%;
  padding: 0px 0px 0px 0px;
  display: block;
  z-index: 10;
  cursor: pointer;
}
div.hero #hero_content h1 {
  width: 100%;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  color: #ffffff;
  font-size: 86px;
  line-height: 72px;
  font-weight: 300;
  letter-spacing: -0.025em;
  text-align: center;
}
div.hero #hero_content h1 em {
  color: #ecdc25;
}
div.hero #hero_content p {
  width: 100%;
  float: left;
  position: relative;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  display: block;
  color: #ffffff;
  text-align: center;
  line-height: 36px;
}
@media screen and (max-width: 960px) {
  #heroes {
    /* height: ~"calc(100vh - 60px)"; */
  }
  #heroes * {
    background-attachment: scroll;
  }
}
@media screen and (max-width: 800px) {
  div.hero #hero_content h1 {
    font-size: 72px;
    line-height: 72px;
  }
  div.hero #hero_content a.cta {
    /* background-position: right 22px top;
				background-image: url(https://dev.marriner.com/wp-content/themes/mmc2019/elements/styles/../images/cta-arrow-small.png); */
    height: 50px;
    font-size: 22px;
    line-height: 47px;
    /* padding-left: 20px;
				padding-right: 50px; */
  }
  div.hero #hero_content a.cta:hover {
    /*background-position: right 22px bottom;*/
  }
  div.hero #hero_content a.cta 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.hero #hero_content a.cta 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;
  }
}
@media screen and (max-width: 600px) {
  div.hero video {
    display: none !important;
  }
  div.hero #hero_content h1 {
    font-size: 48px;
    line-height: 48px;
  }
}
@media screen and (max-width: 560px) {
  div.hero #hero_content {
    top: -40px;
  }
  div.hero #hero_content p {
    font-size: 14px;
    line-height: 28px;
  }
}
@media screen and (max-width: 460px) {
  #heroes #hero-cta-bar {
    height: 140px;
    flex-direction: column;
  }
  #heroes #hero-cta-bar a.cta {
    margin: 0px 0px 0px 0px;
  }
  #heroes #hero-cta-bar a.cta:first-child {
    margin-bottom: 10px;
  }
  #heroes ul#pagination {
    bottom: calc(55px + 120px);
  }
  #heroes div.arrow-down {
    bottom: calc(30px + 120px);
  }
  div.hero {
    height: calc(100% - 140px) !important;
  }
}