#headline {
	padding: 6rem 0;
}

#body #headline .intro-content {
	background-color: rgba(30, 30, 30, 0.9);
	padding-left: 3rem;
	padding-right: 3rem;
	width: 560px;
}


#headline .intro-content .vid-holder ~ .closebtn {
  top: calc(50% - 25vw - 1em);
  right: calc(50% - 39vw - .75em);
}

#headline .vid-holder ~ .closebtn, #video video ~ .closebtn  {
  -webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
  border-radius: 50%;
  background-color: #E02;
  color: white;
  border: 2px solid white;
  -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.5);
  box-shadow: 1px 2px 1px rgba(0,0,0,0.5);
  position: absolute;
  -webkit-transform: scale(0.5,0.5);
          transform: scale(0.5,0.5);
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 1.8em;
  opacity: 0;
  pointer-events:none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
 #video video ~ .closebtn {
   z-index: 99;
 }


#headline .playing .vid-holder ~ .closebtn, #video .playing .closebtn, #headline .paused .vid-holder ~ .closebtn {
  opacity: 0.7;
  pointer-events: all;
  cursor: pointer;
  -webkit-transform: scale(1,1);
          transform: scale(1,1);
}

 #video .playing .closebtn {
   opacity: 0.25;
   right: -.75em;
   top: -.75em;
   cursor: pointer;
 }

  #video .playing #big3-focused-video:hover .closebtn {
    opacity:0.75
  }


#headline .intro-content ul {
	padding-left:0;
	list-style: none;
	font-size: 16px;
	text-shadow: 0px 2px 1px rgba(0,0,0,0.8);
	line-height: 2em;
	margin-top: -.5em;
}

#headline .intro-content ul > li:before {
	box-shadow: 0px 2px 1px rgba(0,0,0,0.4);
	border-radius:1px;
	content: "";
	display: inline-block;
	height: 12px;
	width: 12px;
	user-select: none;
	pointer-events: none;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background-color: #e41c34;
	margin-right: 1rem;
	margin-top: .5rem;
  transform: translateY(.15rem);
}

#body #headline .intro-content a.btn {
	text-shadow: none;
	float: none !important;
	display: block !important;
	margin: 0 auto;
	max-width: 25rem;
	font-size: 1.8rem !important;
	border-radius: 3px !important;
}


#headline .intro-content {
		text-shadow: 0px 2px 1px rgba(0,0,0,0.8);
}

#headline .intro-content p.minor {
	font-size: 16px;
	margin-left: 2.3rem;
	line-height:1.9;

}

#headline h1 {
  line-height: 1.1 !important;
  text-transform: none;
}



h3 > sup {
	top: -.75em;
	font-size: 50%;
}

#headline p {
	font-size: 18px;
	line-height: 1.5;
}

@media (min-width:1000px)  {

  #headline p {
    font-size: 19px;
		line-height: 1.5;
  }

}


@media (min-width: 513px) and (max-width: 667px) {
	#body .masthead .navbar .container-fluid .navbar-header-fixed .mobile {
		background-color: transparent !important;
	}
}

#body #headline .intro-content {
	padding-bottom: .5rem;
}



@media (max-width: 767px) {
  .welcome-cont .promo a.division-jumper {
	 padding-top: 0 !important;
	 margin-top: 0 !important;
	 line-height: 18px;
 }
	#headline .btn {
		line-height: 3rem !important;
	}
	#headline .intro-content {
		margin-top: 3rem;
	}

	#headline .scroll-down a.btn {
		width:48px;
		height: 48px;
		line-height: 48px !important;
		display:inline-block;
	}

  #headline h1 br {
		display: none;
	}

  #headline h1 {
    line-height: 1 !important;
		font-size: 8.5vw !important;
		margin-bottom: 3rem;
  }
	#body .bar h2 {
		font-size: 5vw !important;
	}
}

@media (min-height: 901px) and (max-height:1080px) {
	#body #headline .intro-content {
    padding-bottom: 8rem;
	}
}


@media (min-width: 601px) and (max-width: 768px) {
	#headline {
		max-height: inherit;
		padding: 0;
	}
}




@media (min-width: 601px) and (max-width: 992px) {
	#primary-cta .btn {
		line-height: 5rem;
	}
}




/*_------------------------------------------------------------------------ */


#benefits {
  margin-bottom: 35px;
}

/* The "Get Started Now >" button */


#primary-cta .cta-pre {
  display: none;
}

#video .intro-content.playing ~ #big-3-video {
  pointer-events: none;
  max-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

#video .intro-content {
    pointer-events: all;
    z-index: 1;
    position: relative;
    margin: 0 auto;
    position: relative;
    height: 45vw;
}

#video .intro-content.playing video:not(.now-showing){
  z-index: 1;
  opacity: 0;
  max-height:0;
}

#video .intro-content, #video .intro-content.playing video.now-showing {
    pointer-events: all;
}

#video .intro-content.playing {
      pointer-events: all;
      height: 65vw;
      max-height: 65vw;
}

/*
 * Remove comment to enable small screen movie #video
 * .intro-content #big-3-video { width: 800px; margin: 0 auto; }
 */

#video .intro-content .video-caption {
  text-align: center;
  font-size: 300%;
}

#products h4 {
  margin-bottom: 5px;
  font-size: 130%;

}

@media (max-width: 820px) {
	#products h4 {
		min-height: 4rem;
	}
}


#products h3.show {
  display: block;
  margin: -8px 0 0;
  padding-bottom: 15px;
  font-size: 120%;
  font-weight: 500;
}


#big-3-video .slick-track {
  margin-bottom: 1em;
}

@media screen and (min-width:800px) {
  #big-3-video .slider-video label {
    font-size: 1.2em;
    margin-top: 8px;
    left: .5em;
    right: .5em;
  }
	#headline .intro-content .vid-holder ~ .closebtn {
		top: calc(8vw - 1em);
		right: calc(50% - 32vw - .75em);
	}

}

@media screen and (min-width:900px) {

  #body  #big-3-video .slider-video label {
    font-size: 15px;
  }

}

@media screen and (min-width:1000px) {

}

@media screen and (min-width:1200px) {


  #body  #big-3-video .slider-video label {
    font-size: 18px;
    left: 1em;
    right: .5em;
  }

	#headline .intro-content .vid-holder ~ .closebtn {
		top: calc(5vw - 1em);
		right: calc(50% - 29vw - .75em);
	}

}



.playbtn::before, .playbtn::after {
  background-color: transparent;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}


#products .products-wrapper {
  margin: 1em auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}


@media only screen and (min-width: 768px){
  #products .products-wrapper .col-sm-6  {
   width: auto !important;
   max-width: 30% !important;
   display: block;
 }
}

@media only screen and (min-width: 720px) and (max-width: 768px) {
  #body #products .products-wrapper > div .img-wrap {
    height: unset !important;
    max-height: unset !important;
  }
  #body #products .products-wrapper > div .img-wrap > a {
      height: unset !important;
    max-height: unset !important;
  }
}

@media only screen and (max-width: 720px) {
  #body #products .products-wrapper {
    margin: 1em auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
  }

  #body #products .product-content h3 {
    font-size: 1.8em !important;
  }
  #body #products .product-content p {
    width: 100%;
    font-size: 18px;
    margin-top: 1.5em !important;
  }

  #body #products .product-content a.btn {
    width: 28vw;
    margin-top: 1em !important;
    margin-right: -4vw;
  }

  #body #products .products-wrapper .product {
    min-height: 50vh;
  }
  #body #products .products-wrapper .col-sm-6  {
   width: 90% !important;
   max-width: 90% !important;
   display: block;
   min-height: 50vh;
 }

 #body #products .products-wrapper > div .img-wrap {
   max-height: unset !important;
   width:50%;
 }

#body #products .products-wrapper > div .img-wrap a {
  display: inline !important;
  max-height: unset !important;
  width:100%;
}

 #body #products .product-content {
   bottom: 1em;
 right: -5%;
 left: 55%;
 max-width: 50%;
 position: absolute;
 text-align: left;
 top: 4em;
 }
}

@media only screen and (max-width: 480px) {
  #body #products .products-wrapper .product {
    min-height: 90vh !important;
  }

  #body #products .product-content h3 {
    font-size: 1.5em !important;
    margin: 0;
  }

  #products .products-wrapper > div .img-responsive.pull-left {
    float: left !important;
    margin: 0 auto;
    padding: 0;
    padding-top: 50px;
  }

  #body #products .product-content a.btn {
    width: 48vw;
    margin-top: .5em !important;
    padding: 0;
    -webkit-transform: translateX( -15vw );
            transform: translateX( -15vw );
  }
}

#products .products-wrapper div:nth-child(2) .img-wrap {
  padding-left: 0;
}



.col-sm-6 {
    width: 50%;
}

#products .product-content {
  max-width: 100%;
  padding-top: 1em;
  text-align: center;
}

#products .product-content h3 {
  font-size: 160%;
  white-space: nowrap;
  overflow-x: visible;
}

#products .product-content a.btn {
  clear: left;
  margin: 8px 0 !important;
  font-size: 1.5em !important;
  width: 25vw;
  max-width: 300px;
}


#products .img-wrap img {
  max-width: 100%;
}

.num-dot {
  display: block;
  height: 64px;
  margin-bottom: 20px;
  color: #fff;
  border-radius: 64px;
  background-color: #000;
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 100;
  line-height: 64px;
}

.bar h2 {
  padding: 30px 0;
  font-size: 600%;
  font-weight: 600;
}

.bar h2>span {
  font-size: 70%;
}

.scott-says {
  z-index:9;
  -webkit-transition: .5s ease-in-out all;
  transition: .5s ease-in-out all;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  border:none;
  color: white;
  text-shadow: 1px 3px 4px rgba(0,0,0,0.4), 0px 1px 2px rgba(0,0,0,0.6);
  font-weight: bold;
  font-size: 4vw;
  line-height: 1.2em;
  text-align: left;
  position: absolute;
  height: auto;
  left: 10%;
  top: 15%;
    -webkit-transform: scale(1);
            transform: scale(1);
  quotes: "\201C""\201D""\2018""\2019";
}

.scott-says.lowered .intro-content.seen .scott-says.lowered {
  top: 54%;
}

.intro-content.seen .scott-says {
  left: 15%;
  top: 20%;
  font-size: 2vw;
}

.scott-says::before, .scott-says::after {
  color: rgba(250,0,60,1.0);
  font-size: 3em;
  position: absolute;
  display: block;
}
.scott-says::before {
  content:open-quote;
  left: -.25em;
  top: .15em;
}
.scott-says::after {
  content:close-quote;
  right: .8em;
  bottom: -.2em;
}

.scott-says > span {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
}

#body #headline .intro-content.seen.hit  .scott-says {
  opacity: .2;
}


#body #headline .intro-content.seen.playing  .scott-says {
  opacity: 0;
}

#products .product-wrapper > .animated {
  display: table-row !important;
  background-color: teal!important;
}


@media only screen and ( max-width: 770px) {
  #body #slideshow .slideshow-carousel .slick-dots {
      width: 50%;
  }
  #body #headline .intro-content.seen .scott-says {
    left: 6%;
    top: 14%;
    font-size: 2.4vw;
  }
  #body #headline .intro-content.seen .scott-says.lowered {
    top: 54%;
  }
}
@media only screen and ( max-width: 690px) {
  #body #products .products-wrapper .product {
    min-height: 70vh;
  }
}

@media only screen and ( max-width: 600px) {
  #headline .intro-content >a.btn {
    font-size:2em !important;
    padding:4px !important;
  }
  .slider-video label {
    -webkit-transform: translateY(8px) scale(.8);
            transform: translateY(8px) scale(.8);
  }

  #video .intro-content:not(.playing) #big-3-video .slick-list.draggable {
    -webkit-transform: translateX(-8.5vw);
            transform: translateX(-8.5vw);
  }
}

@media only screen and ( min-width: 1150px) {

  #video .intro-content.playing #big-3-video {
    bottom: -20vh;
    z-index: -1;
  }

  #video .playing #focused-video-title {
    font-size: 2.25em;
  }
}


.big-bg-video {
  position: absolute;
  z-index: -1;
  margin: 0;
  width: 100vw;
  height: 60vw;
  min-height: 60vw;
  min-width: 100vw;
  top: 0;
  left: 0;
}

#video .intro-content #big-3-video {
  -webkit-transition: .5s ease top;
  transition: .5s ease top;
  z-index: 2;
}

#video .intro-content #big-3-video video {
  background-color: #777;
}
#video .intro-content #big-3-video video:hover, #video .intro-content #big-3-video .slider-video:hover video {
  background-color: #777;
}

#video .intro-content:not(.playing) #big-3-video {
  bottom: -10vh;
}
#video .intro-content.playing #big-3-video {
  bottom: -30vh;
  z-index: -1;
}


#big-3-video .slider-video {
    margin: 5px;
    overflow:hidden;
}


#big-3-video .slider-video video {
  border: .5vh solid #777;
  background-color: #777;
  width: 32vw;
  height: 20vw;
  -webkit-transition: .2s ease border;
  transition: .2s ease border;
  overflow: hidden;
  display: block;
  opacity:0;
}

#big-3-video .slider-video.is-loaded video {
  opacity:1.0;
}


#big-3-video .slider-video img {
  display: block;
  position:absolute;
    border: .5vh solid #777;
  top:3vw;
}

#big-3-video .slider-video.is-loaded  img {
    opacity:0;
    z-index:9999;

}

#big-3-video .slider-video:not(.is-loaded) img {
  opacity: 1.0;
  z-index:9999;
  top:3vw;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}


#big-3-video .slider-video:hover video {
    border: .5vh solid #e41c34;
    background-color: #e41c34;
}

#big-3-video .slider-video label {
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(80% - 10px);
  line-height: 1.25em;
  height: auto;
  display: block;
  font-family: proxima-nova-alt !important;
  text-align: center;
  position: absolute;
  font-size: 13px;
  color: #666;
}

#big-3-video .slick-dots {
  width: 40%;
  margin-left: 30%;
}

#big-3-video .slider-video:hover label {

      color: #e41c34;
}



#big-3-video .slick-arrow {
  font-size: 2em;
  text-indent: 0;
  color: #777;
  top: calc(50% - 3em);
  padding-top: 3em;
  padding-bottom: 3em;
  cursor: pointer;
}

#big-3-video .slick-arrow:hover {
  color: #e41c34;
}

#video .intro-content.playing #big-3-video .slick-arrow {
  font-size: 3em;
  top: calc(50% - 30vh);
  padding-top: 20vh;
  padding-bottom: 20vh;
}


#big-3-video .prev-arrow{
left:.5em;
}
#video .intro-content.playing #big-3-video .prev-arrow{
  left: 3vw;
}

#big-3-video .next-arrow {
right:.5em;
}

#video .intro-content.playing #big-3-video .next-arrow{
  right: 3vw;
}


#big-3-video .slider-video  {
  background-color: transparent;
  position: relative;
  height: 24vw !important;
max-height: 100%;
min-height: 28vw;
}

#big-3-video .slider-video video {
  display: block;
  position:absolute;
  margin: 0; padding: 0;
  bottom:3vw;
  width: calc(100% - 4px);
  top: 3vw;
  height:auto;
}

#big-3-video .slick-slide {
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

#big-3-video .slick-slide:not(.slick-center) {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: 0.5;
}

#big-3-video .slick-slide.slick-center {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  opacity: 1.0;
}

.intro-content.playing #big-3-video .slick-slide {
  opacity: 0;
  -webkit-transform: translateY(100px) scale(.8);
          transform: translateY(100px) scale(.8);
}
.intro-content.playing #big-3-video .slick-slide.slick-center {
  opacity: 0;
  -webkit-transform: translateY(-40px) scale(1.5);
          transform: translateY(-40px) scale(1.5);
}



#video .intro-content {
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
}


#video .intro-content.playing .slick-dots {
  display: none !important;
  opacity: 0;
}

.slideshow-carousel .slick-dots {
  width: 25%;
}

#big3-focused-video {
  -webkit-transition: 0.4s ease all;
  transition: 0.4s ease all;
  position: absolute;
  width:100%;
  top: 0;
  bottom: 0;
  opacity: 0.0;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  display: block;
  padding:1vw;
}


#big-3-video:after {
  z-index: 99;
  position: absolute;
  display: block;
  top: 0; left:0; right:0; bottom:0;
  pointer-events:none;
  content: "";
  background-image: -webkit-gradient(linear, left top, right top, color-stop(5%, white), color-stop(10%, transparent), color-stop(90%, transparent), color-stop(95%, white) );
  background-image: linear-gradient(90deg, white 5%, transparent 10%, transparent 90%, white 95% );
}
#big3-focused-video video {
  opacity: 1.0;
  -webkit-filter: blur(0px);
          filter: blur(0px);
  position:absolute;
  display:block;
  pointer-events:all;
  top:0; left:0; bottom:0; right:0;
  padding:0; margin:0;

}

.intro-content.playing #big3-focused-video {
  opacity: 1.0;
  -webkit-filter: blur(0px);
          filter: blur(0px);
  margin-top: 50px;
  width: 80vw;
  margin-left: calc(10vw - .5em);
  height: 48vw;
}

.intro-content.playing #big3-focused-video video:not(.now-showing) {
  opacity: 0;
  height: 0;
  max-height: 0;
  z-index: -1;
  display: none;
}

.intro-content.playing #big3-focused-video video.now-showing {
  opacity: 1;
  display: block;
  top:0; left:0; right:0; bottom:0;
  margin:0;
  padding:0;
  z-index: 1;
  border: 1vw solid #777;
}

#body #primary-cta .container a.btn.black-on-trans.bordered {
  color: black!important;
}


#big-3-video .slick-slide::after {
  -webkit-transform: scale(1.0) translateX(0) translateY(0);
          transform: scale(1.0) translateX(0) translateY(0);
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
  z-index: 9999;
  color: white;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.1);
  display: block;
  position: absolute;
  top: calc(40% - 1em);
  left: calc(50% - 1em);
  width: 2em;
  height: 2em;
  background-image:url("/assets/images/icons/big-play-btn.png");
  background-size: contain;
  padding: 0;
  padding-left: .2em;
  content:"";
  opacity: 0.3;
  margin: 0;
  border:0;
}

#big-3-video .slick-slide:hover {

}

#big-3-video .slick-slide:hover::after {
    opacity: .8;
    -webkit-transform: scale(1.3);
            transform: scale(1.3) translateX(0) translateY(0);
}


#focused-video-title {
  -webkit-transition: 0.3s ease-out all;
  transition: 0.3s ease-out all;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  position:absolute;
  display:block;
  font-size: 2.25em;
  left: 0;
  right: 0;
  bottom: .5em;
  opacity: 0;
  text-align: center;
}

.playing  #focused-video-title {
  position:absolute;
  display:block;
  font-size: 1.5em;
  left: 0;
  right: 0;
  opacity: 1.0;
  bottom: -1.5em;
  text-align: center;
}

.slider-transitioning video, .slick-current video {
  visibility: visible; /*Resolves phantom video rendering in IE 11*/
}

.slider-video.slick-slide > div {
  -webkit-transition: 0.3s ease opacity;
  transition: 0.3s ease opacity;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 11%;
  opacity: 1.0;
  bottom: calc(32% + 4px);
  left: 1px;
  right: 4px;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  border: 3px solid #777;
}
.slider-video.slick-slide:hover > div {
  border: 3px solid #e41c34;
}

.slider-video:not(.is-loaded) > video {
  opacity: 0;
}

.slider-video.is-loaded > div {
  opacity: 0;
}

#big-3-focused-video video:not(.now-showing) {
	pointer-events:none;
}
#video {
	position: relative;
}
#video .scroll-down {
	position: absolute;
	bottom: -1rem;
	z-index:99;
	pointer-events:all;
	cursor:pointer;
}

.portfolio-content .num-dot {
  margin-bottom: 1rem;
  margin-top: -1rem;
}




  #benefits #portfoliolist .portfolio-content {
    padding-left: 1em;
    padding-right: 1em;
    font-size: 14px;

  }


  #benefits #portfoliolist .portfolio .portfolio-wrapper {
    height: 390px;
  }



	@media (max-width:767px) {

		#benefits #portfoliolist .portfolio .portfolio-wrapper {
			height: 300px;
		}

	}

	@media (min-width:768px) and (max-width:1000px ){
		#benefits #portfoliolist .portfolio .portfolio-wrapper {
			height: 380px;
		}
		#benefits .benefits-wrapper {
			width: calc(100% - 6em);
			margin-left: 3em; margin-right: 3em;
		}
	}

	@media (min-width:1001px ){
		#benefits #portfoliolist .portfolio .portfolio-wrapper {
			height: 320px;
		}
	}
