@charset "UTF-8";



		div.engineText
		{
		   display: none;
		}

        div.hero div.heroes
        {
           height: calc(100vh - 54px);
           width: 100%;
           margin-top: 54px;
           position: relative;
           overflow-x: hidden;
           text-align: center;
        }
      
      
        
        div.hero div.heroes img.banner,
        div.hero div.heroes img.mobile
        {
           position: absolute;
           width: auto;
           height: 100%;
           top: 0;
           left: 50%;
		   opacity: 0;
           transition: opacity 1000ms ease;
           z-index: 10;
           
           object-fit: cover;
           min-width: 100%;
		   min-height: 100%;
		   transform: translateX(-50%);
        }
        
        
        div.hero div.heroes div.banner,
        div.hero div.heroes div.mobile
        {
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
           opacity: 0;
           transition: opacity 1000ms ease;
           z-index: 10;
           min-width: 100%;
		   min-height: 100%;
		}
     
          
        div.hero div.heroes img.banner.top,
        div.hero div.heroes img.mobile.top,
        div.hero div.heroes div.banner.top
        {
           opacity: 1;
        }
     
        div.hero div.heroes img.banner,
        div.hero div.heroes div.mobile,
        div.hero div.heroes div.mobile.top
        {
          display: none;
        }
      
	
		div.hero div.heroes div.banner video, 
		div.hero div.heroes div.banner iframe,
		div.hero div.heroes div.banner object,
		div.hero div.heroes div.banner embed
		{ 
			height: 100%;
			width: auto;
			position: absolute;
			z-index: 10;
			padding: 0;
			border: 0;
			margin: 0;
			top: 0;
			left: 0;
	        min-width: 100%;
	 	    min-height: 100%;
		    object-fit: cover;
		    transform: translateX(-50%);
            left: 50%;
       }
        
        
        
        
        div.hero div.indicators
        {
           position: absolute;
           z-index: 20;
           bottom: 18px;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
           width: 100%;
           height: auto;
           
        }
        
        div.hero div.indicators a.indicator
        {
           height: 13px;
           width: 13px;
           background-image: url('indicator-hollow.png');
           background-repeat: no-repeat;
           background-size: contain;
           background-blend-mode: screen;
           display: inline-block;
           margin-left: 7px;
           margin-right: 7px;
           cursor: pointer;
        }
        
        div.hero div.indicators a.indicator.top
        {
           background-image: url('indicator-solid.png');
        }
       
        
        div.hero div.caption
        {
          width: 100%;
          vertical-align: top;
        }
   
        div.hero div.caption div.dotBackground
        {
          display: inline-block;
          width: 38%;
          height: 120px;
        }
        
          
        div.hero div.caption h2
        {
          display: inline-block;
          width: calc(62% - 50px);
          margin-left: 8px;
          margin-right: 8px;
          font-size: 17px;
          font-family: HN57;
          font-weight: bold;
          line-height: 1.25em;
          vertical-align: top;
          position: relative;
        }
        
        div.hero div.caption h2 a
        {
          color: #000000;
          position: absolute;
          visibility: hidden;
          top: 16px;
          right: 0;
          text-align: right;
        }
        
        div.hero div.caption h2 a.top
        {
          visibility: visible;
        }
        
        
         div.hero div.caption h2 a span
		{
		   background-image: url('yellow_square_30.png');
		   background-size: 0 0.2em;
		   background-repeat: no-repeat;
		   background-position: 0 0.4em; 
		   transition: background-size 500ms ease-in-out;
		   display: inline;
		   width: auto;
	   
		 }
 
 
	    div.hero div.caption h2 a:hover span
		{
		   background-size: 100% 0.2em;
		}

	 	div.hero div.caption div.deco
	 	{
	 	  display: inline-block;
          height: 112px;
          background-color: #FFDF00;
          width: 24px;
          margin: 0;    
          vertical-align: top; 
	 	}
	 	
	 	
		
		div.promise
		{
		   text-align: center;
		   margin-top: 4em;
		   margin-bottom: 6em;
		}
		
		div.promise h1
		{
		   font-family: HN57;
		   font-weight: bold;
		   color: #414042;
		   line-height: 1.5em;
		   font-size: 24px;
		}
		
		div.promise h1 span
		{
		   border-bottom: 3px solid #FFDF00;
		   width: auto;
		   padding-bottom: 2px;
		}
		
		
       div.newsFeed
       {
           display: none;
       }
       
     
		div.scrollingFeed
		{
		   position: relative;
		   width: 100%;
		   margin-top: 72px;
		}
		
		
		/* scrollbar will be visible in Firefox */
		div.scrollingFeed div.scroller
		{
		  width: 100%;
		  text-align: center;
		  overflow-x: scroll;
		  overflow-y: hidden;
		  white-space: nowrap;
		  margin-right: auto;
		  margin-left: auto;
		  display: inline-block;
		  -webkit-overflow-scrolling: touch;
		  vertical-align: top;
		  
		}
		
		div.scrollingFeed div.scroller::-webkit-scrollbar {
		  display: none;
		}

		/* Hide scrollbar for IE and Edge */
		div.scrollingFeed div.scroller {
		  -ms-overflow-style: none;
		}
		
		div.scrollingFeed div.scroller div.post
		{
		   text-align: left;
		   vertical-align: top;
		   display: inline-block;
		   width: 38%;
		   margin-right: 0;
		   margin-left: 4%;
		   margin-bottom: 0.2em;
		}
		
		div.scrollingFeed div.dotBackground
		{
		   height: 60px;
		   width: calc(96% - 48px);
		   margin-left: calc(4% + 24px);
		}
	
	
	
		div.left, div.right
		{
		   width: 100%;
		   margin-bottom: 3em;
		   text-align: left;
		   position: relative;
		   z-index: 35;
		   margin-top: 3em;
		}
	
		div.left p, div.right p
		{
		  width: calc(100% - 12px);
		  margin-left: auto;
		  margin-right: auto;
		  position: relative;
		  z-index: 35;
		}
		
		div.left p span, div.right p span
		{
		   display: block;
		   line-height: 1.1em;
		}
		
		
		div.left p span.heading, div.right p span.heading {
		   font-family: HN67;
		   color: #525252;
		   font-size: 18px;
		   letter-spacing: 0.075em;
	       margin-top: 0.25em;
		}

		div.left p span.subheading, div.right p span.subheading {
		   color: #989998;
		   font-size: 16px;
		   letter-spacing: 0.075em;
		}
	
	
@media (min-width: 767px) {
	
	   div.hero div.heroes
        {
           height: calc(100vh - 72px);
           margin-top: 72px;
        }
        
        
        div.hero div.heroes img.banner
        {
           display: block;
        }
        div.hero div.heroes img.mobile
        {
           display: none;
        }
       
      
        div.hero div.caption div.dotBackground
        {
          width: 50%;
          margin: 0;
          margin-top: 10px;
        }
      
        div.hero div.caption h2
        {
          width: calc(49% - 53px);
          font-size: 19px;
          margin-right: 1%;
          margin-left: auto;
        }
        
        div.hero div.caption h2 a
        {
          text-align: right;
          left: auto;
          right: 0;
        }

        div.hero div.caption div.deco
        {
          display: inline-block;
          height: 112px;
          background-color: #FFDF00;
          width: 43px;
          margin: 0;    
          margin-top: -8px;
          vertical-align: top; 
        }
        
        
        div.promise h1
		{
		   font-size: 44px;
		}
        
       div.scrollingFeed
       {
          display: none;
       }
 
       div.newsFeed
       {
           display: block;
           width: 100%;
           margin-top: 144px;
           position: relative;
           margin-bottom: 120px;
       }
       
       div.newsFeed div.newsBlock
       {
          width: calc(100% - 224px);
          display: inline-block;
          vertical-align: top;
          position: relative;
          margin-left: 112px;
          overflow-x: hidden;
          padding-bottom: 4em;
       }
       
       div.newsFeed div.newsBlock div.posts
       {
          width: 100%;
          position: absolute;
          top: 0;
          background-color: #FFFFFF;
          z-index: 49;      
          transition: left 750ms ease;
       }
       
       div.newsFeed div.newsBlock div.pseudo
       {
          visibility: hidden;
          position: relative;
          width: 100%;
          display: block;
          white-space: wrap;
       }
 
       
       div.newsFeed div.newsBlock div.posts div.post,
       div.newsFeed div.newsBlock div.pseudo div.post
       {
          width: 22%;
          margin-right: 1.5%;
          margin-left: 1.5%;
          margin-bottom: 1.75em;
          display: inline-block;
          vertical-align: top;
       }
       
       
       div.newsFeed div.scrollButton
       {
		  margin: 0;
		  position: absolute;
		  top: 37%;
		  -ms-transform: translateY(-37%);
		  transform: translateY(-37%);
		  width: 50px; 
		  z-index: 52;  
		  display: inline-block;    
       }
       
       div.newsFeed div.scrollButton.scrollLeft
       {
          left: 50px;
       }
      
       div.newsFeed div.scrollButton.scrollRight
       {
          right: 50px;
       }
       div.newsFeed div.scrollButton img.scrollButton
       {
           width: 50px;
           height: auto;
           position: absolute;
           cursor: pointer;
           top: 0;
           left: 0;
       }
       
    
 	   div.newsFeed div.scrollButton img.scrollButton.active
 	   {
 	      visibility: visible;
 	   }
       div.newsFeed div.scrollButton img.scrollButton
       {
          visibility: hidden;
       }
       
       
       		
		div.newsFeed div.dotBackground
		{
		   height: 60px;
		   width: 64%;
		   margin-left: auto;
		   margin-right: auto;
		   position: relative;
		   z-index: 50;
		}
		
		
		div.left, div.right
		{
		   width: 72%;
		   margin-bottom: 3em;
		   position: relative;
		   z-index: 35;
		}
	
		div.left
		{
		  text-align: right;
		  margin-left: 0;
		  margin-right: 28%;
		}
	
		div.right
		{
		  text-align: left;
		  margin-left: 28%;
		  margin-right: 0;
		}
	
		div.left p, div.right p
		{
		   width: 100%;
		   margin-left: 0;
		   margin-right: 0;
		}
	
		div.left p { text-align: right; }
		div.right p { text-align: left; }
		
		
	    div.rightBackgroundDeco,
		div.leftBackgroundDeco
		{
		   position: relative;
		   padding-top: 40px;
		}
	
		div.rightBackgroundDeco div.edge,
		div.leftBackgroundDeco div.edge
		{
		   position: absolute;
		   top: 0;
		   width: 36px;
		   height: 56%;
		   background-color: #FFDF00;
		   z-index: 0;
		}
  
		div.rightBackgroundDeco div.edge
		{
		  right: 0;
	 
		}
		div.leftBackgroundDeco div.edge
		{
		   left: 0;
		}
	
		div.rightBackgroundDeco div.dotBackground,
		div.leftBackgroundDeco div.dotBackground
		{
		   z-index: 0;
		   width: 42%;
		   height: 136%;
		   top: 20px;
		   position: absolute;
		   z-index: 0;
		}
  
		div.rightBackgroundDeco div.dotBackground
		{
		   left: 5px;
	
		}
		div.leftBackgroundDeco div.dotBackground
		{
			right: 5px; 
		}
  
 
}



@media (min-width: 1599px) { 


	    div.promise h1
		{
		   font-size: 60px;
		}
       
	   div.hero div.caption h2
	   {
	     font-size: 28px;
	   }
}