.revealer {
  max-width: 1200px;
  position: relative;
	z-index: 999;
}

.revealer .revealer-boundries {
  position: relative;
}

.revealer .revealer-boundries:before, .revealer .revealer-boundries:after {
  display: block;
  content: '';
  background: #2a2a2a;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: -5px;
  left: -5px;
  padding: 5px;
  border-radius: 5px;
  background-image: linear-gradient(to right bottom, rgba(51, 51, 51, 0.8) 0%, rgba(189, 189, 189, 0.8) 25%, rgba(51, 51, 51, 0.8) 50%, rgba(66, 170, 179, 0.8) 75%, rgba(51, 51, 51, 0.8) 100%);
}

.revealer .revealer-boundries:after {
  background: none;
  background-image: linear-gradient(to right bottom, rgba(51, 51, 51, 0.8) 0%, rgba(189, 189, 189, 0.8) 25%, rgba(51, 51, 51, 0.8) 50%, rgba(66, 170, 179, 0.8) 75%, rgba(51, 51, 51, 0.8) 100%);
  top: -8px;
  left: -8px;
  padding: 8px;
  z-index: -1;
}

.revealer .revealer-top-layer {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.revealer .revealer-layer {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  width: 50%;
  top: 0;
  height: 100%;
}

.revealer .revealer-layer img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

.revealer .revealer-frame {
  position: absolute;
  top: 0;
  left: 0;
  background: url("../images/revealer-frame.png");
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.revealer .revealer-handle {
  position: absolute;
  top: 0;
  z-index: 3;
  width: 5px;
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #fff;
}

.revealer .revealer-handle .revealer-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all .3s ease-in-out;
  background: url("../images/handle-knob.svg") no-repeat center;
  background-size: 100%;
  width: 40px;
  height: 40px;
}

.revealer .revealer-handle .revealer-knob:hover {
  -webkit-transform: translate(-50%, -50%) scale(1.4);
          transform: translate(-50%, -50%) scale(1.4);
}

.revealer:after {
  content: '';
  display: block;
  width: 100%;
  height: 0px;
  /* background: #3e3e3e; */
  bottom: -9px;
  position: absolute;
  box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.38);
}

.revealer-mobile {
  background: url(img/mobile-bg.png);
  min-height: 455px;
  padding: 3.85% 8.8% 0 13%;
  max-width: 700px;
  background-size: 100%;
  background-repeat: no-repeat;
	position: relative;
	z-index: 999;
}

.revealer-mobile .revealer-boundries:before, .revealer-mobile .revealer-boundries:after {
  display: none;
}






/* Header adjust on scroll - moved from Styles.css by John M */
#header,
#header .top-nav,
#header #logo,
#header #navigation a#pull,
#header #navigation a#pull:after,
#header .region-header .inline  {
    transition: all ease .4s;
}
#header.is--scroll {
    height: 80px;
}
#header.is--scroll .top-nav {
    padding: 4px 0;
    top: 0;
}
#header.is--scroll #logo {
    margin-top:12px;
	width: 180px;
}
#header.is--scroll .top-nav div.ribbon-cta span {
    left: 65px;
    padding-top: 2px;
}
#header.is--scroll .top-nav div.ribbon-cta img {
    max-width: 42% !important;
}

@media (max-width: 1200px) {
	#header.is--scroll #logo {
    	width: 160px;
	}
}
@media (max-width: 1000px) {
    #header.is--scroll #logo {
        margin-top: 12px;
    }
}
#header.is--scroll #navigation a#pull {
    height: 80px;
}
#header.is--scroll #navigation a#pull:after {
    top: 14px;
}
#header.is--scroll .region-header .inline {
    margin-bottom: 0;
}

/* 3 arrows */
.triple-arrow-container {
  /*display: none;*/
  display: block;
  width: 100px;
  height: 100px;
  position: relative !important;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0%) rotateZ(0deg);
  z-index: 1;
}
.triple-arrow-container.small-arrow {
	transform: translate(-50%, 0%) rotateZ(0deg) scale(0.5);
	top: 0;
}
@media (max-width: 600px) {
	#header.is--scroll #logo {
		margin-top:12px;
		width: 160px;
	}
}
@media (max-width: 500px) {
	.hp-hdr .triple-arrow-container {
		display: none;
	}
}

.triple-arrow-container:hover {
  cursor: pointer;
}
.triple-arrow-container:hover .triple-arrow {
  top: 50%;
}
.triple-arrow-container:hover .triple-arrow:before {
  transform: translate(-50%, -50%) rotateZ(-30deg);
}
.triple-arrow-container:hover .triple-arrow:after {
  transform: translate(-50%, -50%) rotateZ(30deg);
}

.triple-arrow {
  position: absolute !important;
  left: 50%;
  transition: all .4s ease;
}
.triple-arrow:before, .triple-arrow:after {
  transition: all .4s ease;
  content: '';
  display: block;
  position: absolute;
  transform-origin: bottom right;
  background: #fff;
  width: 5px;
  height: 55px;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}
.triple-arrow.arrow-green:before, .triple-arrow.arrow-green:after {
	background: #38b738;
}
.triple-arrow:after {
  transform-origin: bottom left;
  transform: translate(-50%, -50%) rotateZ(45deg);
}
.triple-arrow:nth-child(1) {
  opacity: 0.3;
  top: 0%;
}
.triple-arrow:nth-child(2) {
  opacity: 0.6;
  top: 25%;
}
.triple-arrow:nth-child(3) {
  opacity: 1;
  top: 50%;
}

/* parallax */
.parallax-mirror {
   z-index:  1 !important  ;
}
.block.uhd-premium,
.block.hp-hdr,
.block.uhd-mobile,
.block.home-theater  {
    position: relative;
    z-index: 1;    
}
.block.uhd-premium.plax-standard,
.block.hp-hdr.plax-standard,
.block.uhd-mobile.plax-standard,
.block.home-theater.plax-standard  {
	background: none;
}
.hp-top {
    z-index: 2;
}

/* Headers on load transition */
.block.block-block.uhd-premium h3,
.block.block-block.uhd-mobile h3,
.block.block-block.home-theater h3 {
    transition: all .8s ease;
    transform: scale(0);
    opacity: 0.7;
}
.block.block-block.uhd-premium.is-loaded h3,
.block.block-block.uhd-mobile.is-loaded h3,
.block.block-block.home-theater.is-loaded h3 {
    transform: scale(1);
    opacity: 1;
}