@keyframes hero_fade {
            0% {
	        opacity:0%;
            transform:scale(250%); 
            filter:grayscale(100%);
            }
            100% {
	        opacity:100%;
            transform:scale(150%);
            filter:grayscale(0%);
            } 
        }

@keyframes hero_fade_mobile {
            0% {
	        opacity:0%;
            transform:scale(250%); 
            filter:grayscale(100%);
            }
            100% {
	        opacity:100%;
            transform:scale(120%);
            filter:grayscale(0%);
            } 
        }
        
@keyframes hero_highres_fade {
            0% {
	        opacity:0%;
            }
            
            80% {
	        opacity:0%;
            }
            100% {
	        opacity:100%;
            } 
        }
        
/* Hero */
div.hero {
	position:relative;
	height:480px;
    width:100vw;
    left:calc(0px - var(--page-margin));
    overflow:hidden;
	}
	
	div.hero_content {
        position:absolute;
		top:50%;
		transform:translateY(-50%);
        left:400px;
        padding:0px 0px 300px 30px;
		text-align:left;
		font-size:20px;
        width:calc(100% - 400px - var(--page-margin));
        max-width:calc(800px - var(--page-margin));
        z-index:1000;
		background:rgb(244,246,246,.8);
		transition:left 1s;
		}
 
     .hero h2 {
        font-size:30px;
        line-height:36px;
        margin-top:340px;
    	}
    
    .hero p {
	    margin:var(--margin-l) 0px var(--margin-s) 0px;
	    font-size:18px;
	    line-height:25px;
		}

	.hero a.cta-button {
	    background-color: var(--color-orange);
	    font-size:18px;
		}
		

/* Pixelation Effect */
.image-container {
	position:absolute;
	bottom:0px;
	left:0px;
	overflow:hidden;
	animation:hero_fade 6s ease-out;
	transform:scale(150%);
	transition:1s;
	}
	
canvas {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit: cover;
	z-index:100;
	}

.high-res {
	position:absolute;
	animation:hero_highres_fade 2s ease-out;
	}
	

/* Responsive Styles For Hero Div */
@media (max-width: 800px) {
	
	.hero {
		height:580px !important;
		}

	.image-container {
		left:-120px;
		bottom:70px;
		}
 
     .hero h2 {
        font-size:21px;
        line-height:26px;
    	}
    	
		div.hero_content {
			left:180px;
			padding-left:var(--margin-m);
			width:calc(100vw - 180px - var(--margin-m));
			}
		}/* END Media 800 */