/* COLOR PROGRAM */

    :root {
        --primary_text_color: #000000;
        --blue-black: #111214;
        --navy: #2e323e;
        --orange: #fa4616;
        --yelo: #f8c142;
    }

/* FONTS */

    @font-face {
		font-family: newsam;
		src: url(../fonts/Newsam-Book.woff2) format('woff2');
		font-weight: 350;
		}
		
	@font-face {
		font-family: newsam;
		src: url(../fonts/Newsam-Regular.woff2) format('woff2');
		font-weight: 400;
		}
		
	@font-face {
		font-family: newsam;
		src: url(../fonts/Newsam-Medium.woff2) format('woff2');
		font-weight: 500;
		}
		
	@font-face {
		font-family: newsam;
		src: url(../fonts/Newsam-Bold.woff2) format('woff2');
		font-weight: 700;
		}
		
	@font-face {
		font-family: sombra95;
		src: url(../fonts/Sombra95-Black.woff2) format('woff2'),
		src: url(../fonts/Sombra95-Black.woff) format('woff');
		font-weight: 800;
		}
		
	@font-face {
		font-family: gibson_semibold;
		src: url(../fonts/gibson-semibold.otf);
		}
		
	@font-face {
		font-family: gibson_regular;
		src: url(../fonts/gibson-regular.otf);
		}
		
	@font-face {
		font-family: interstate_blk_cond;
		src: url(../fonts/interblacon.woff);
		}
		
	@font-face {
		font-family: interstate_blk;
		src: url(../fonts/interbla.woff);
		}
		
	p1 {
		font-family: "chronicle_display_reg", serif;
		font-weight: 200;
		font-style: normal;
		text-align: left;
		font-size: 18px;
		letter-spacing: .1px;
		line-height: 1.32;
		color: #000;
		}
		
	h1 {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 100px !important;
		letter-spacing: .1px;
		line-height: .8;
		color: #000;
		}
		
	h2 {
		font-family: "knockout_welterweight", sans-serif;
		font-style: normal;
		text-align: center;
		font-size: 30px !important;
		letter-spacing: .1px;
		line-height: .8;
		color: #000;
		}
		
	span.introtext-italic {
		font-family: "chronicle_display_italic", serif;
		font-weight: 200;
		}
		
	span.sectiontitle {
		font-family: "newsam", sans-serif;
		font-weight: 500;
		font-style: normal;
		letter-spacing: 4px;
		line-height: .8;
		color: #000;
		}
		
	span.centervert {
        font-family: "sombra95", "newsam", sans-serif;
        font-weight: 800;
        letter-spacing: -1px;
        line-height: .95;
        color: #2e323e;
    }
    
    span.lowertitle {
        font-family: "newsam", sans-serif;
        font-weight: 700;
        text-align: center;
        font-style: normal;
        letter-spacing: 1px;
        color: #000;
    }
    
    
/* TOP RULE */

    .topbar {
        background-image: url('../images/bar-pattern-7.svg');
		background-size: auto 100%;
		background-position: left;
		background-repeat: repeat-x;
		position: absolute;
        top: 58px;
        left: 2%;
        height: 1.5vw;
        width: 96%;
        z-index: 99;
    }

/* SECTION HEADERS */

    .endheaderopacity {
        position: absolute;
        display: block;
        top: 0%;
        left: 150px;
        background-color: #fff;
        width: 60%;
        opacity: 0;
    }
    
    .logo-reduce {}
    
    @media (max-width: 600px) {
        .logo-reduce {
            background-position: left !important;
            width: 30px !important;
            margin-left: 1px;
        }
        @media (max-height: 740px) {
            .logo-reduce {
                margin-left: 8px;
            }
        }
    }
		
/* CONTACT FORM */

    #mailing-list{
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh + 76px);
    }
    
    #mailinglist-cont{
        order: 2;
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 98%;
        padding: 20vh 0;
    }
                
    #mailinglist-text{
        order: 1;
        position: relative;
    }
                    
    #mailinglist-form{
        order: 2;
        position: relative;
    }
    
    #fcf-form {
        display:block;
        width: 70vw;
        max-width: 1000px;
    }
    
    .fcf-h3 {
        font-family: "newsam", sans-serif;
        font-weight: 700;
        font-size: 30px;
        font-weight: 600;
        color: var(--blue-black);
    }
    
    .fcf-body {
        margin: 0;
        font-family: "newsam", sans-serif;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--blue-black);
        text-align: left;
        background-color: #fff;
        padding: 30px;
        padding-bottom: 10px;
        max-width: 100%;
    }
    
    .fcf-form-group {
        margin-bottom: 1rem;
    }
    
    .fcf-input-group {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }
    
    .fcf-form-control {
        background-image: url(../images/diagonalfield-vltgrey.png);
        background-size: auto 100px;
        background-repeat: repeat;
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-family: "Neuface Sans Web", sans-serif;
        font-size: 24px;
        font-style: italic;
        font-weight: 400;
        font-feature-settings: "ss05" 1, "ss02" 1;
        line-height: 1.5;
        color: var(--blue-black);
        background-color: rgba(0,0,0,0);
        background-color: transparent;
        background-clip: padding-box;
        outline: none;
        border: none;
        /* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
    }
    
    .fcf-form-control:focus {
        border-bottom: 3px solid var(--blue-black);
        background-image: none;
    }
    
    select.fcf-form-control[size], select.fcf-form-control[multiple] {
        height: auto;
    }
    
    textarea.fcf-form-control {
        font-family: -apple-system, Arial, sans-serif;
        height: auto;
    }
    
    label.fcf-label {
        display: inline-block;
        margin-bottom: 0.5rem;
        font-size: 18px;
        color: var(--blue-black);
        font-weight: 400;
    }
    
    .fcf-btn {
        display: inline-block;
        font-weight: 600;
        color: var(--blue-black);
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    @media (prefers-reduced-motion: reduce) {
        .fcf-btn {
            transition: none;
        }
    }
    
    .fcf-btn:hover {
        color: #fff;
        text-decoration: none;
    }
    
    .fcf-btn:focus, .fcf-btn.focus {
        outline: 0;
    }
    
    .fcf-btn-primary {
        color: #fff;
        background-color: var(--navy);
        border-color: var(--navy);
    }
    
    .fcf-btn-primary:hover {
        color: #fff;
        background-color: var(--yelo);
        border-color: var(--yelo);
    }
    
    .fcf-btn-primary:focus, .fcf-btn-primary.focus {
        color: #fff;
        background-color: c;
        border-color: var(--blue-black);
    }
    
    .fcf-btn-primary:visited {
        color: #fff;
        background-color: var(--blue-black);
        border-color: var(--blue-black);
    }
    
    .fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
    }
    
    .fcf-btn-block {
        display: block;
        width: 100%;
    }
    
    .fcf-btn-block+.fcf-btn-block {
        margin-top: 0.5rem;
    }
    
    input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
        width: 100%;
    }
    
      
    #output-message-cont {
        background-image: url(../images/diagonalfield-vltgrey.png);
        background-size: auto 100px;
        background-repeat: repeat;
        position: relative;
        width: 100%;
        background-color: rgba(0,0,0,0);
        background-color: transparent;
        height: 48px;
    }
    
    .output-message {
        color: var(--blue-black);
        display: block;
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
        cursor: revert;
    }
    
    #output-message-cont .output-message:hover {
        color: var(--blue-black);
    }
    
/* HERO ANIMATION */
     
    .hero-open, .hero-2nd, .hero-3rd, .hero-4th, .final {
        background-size: cover;
		background-position: center;
		position: absolute;
		line-height:0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: #3d7e4a;
		overflow: hidden;
		opacity: 0;
    }
    
    .hero-2nd-anim, .hero-3rd-anim, .hero-4th-anim, .final-anim {
		animation-name: fade-in;
		animation-duration: 1s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    	animation-fill-mode: forwards;
	}
    
    .hero-open {
		background-image: url('../images/shipping-container-hoist-3.jpg');
		background-position: top;
		opacity: 1;
		z-index: 1;
	}
		
	.hero-open-anim {
		-webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
		animation-delay: 0s;
	}
     
    .hero-2nd {
		background-image: url('../images/Exterior-Q-Series-2.jpg');
		z-index: 2;
	}
		
	.hero-2nd-anim {
		-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
		animation-delay: 1s;
	}
		
		@media (max-width: 2000px) {
			.e6eaf1 {
				background-image: url('../images/');
			}
		}
		
		@media (max-width: 1000px) {
			.e6eaf1 {
				background-image: url('../images/');
			}
		}
		
		@media (max-width: 700px) {
			.e6eaf1 {
				background-image: url('../images/');
			}
		}
		
	.hero-3rd {
	    background-image: url('../images/Cafeteria-kitchen_2.jpg');
		z-index: 3;
	}
		
	.hero-3rd-anim {
		-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
		animation-delay: 3s;
	}
	
	.hero-4th {
	    background-image: url('../images/container-ship-large-vert.jpg');
		z-index: 5;
	}
		
	.hero-4th-anim {
		-webkit-animation-delay: 4.5s; /* Chrome, Safari, Opera */
		animation-delay: 4.5s;
	}
		
	.final {
		background-image: url('../images/powerlines-women-collage-2B.jpg');
		z-index: 6;
	}
		
	.final-anim {
		-webkit-animation-delay: 6.5s; /* Chrome, Safari, Opera */
		animation-delay: 6.5s;
	}
		
	/* HERO RESPONSIVE IMAGES */
		
	/* 
	@media (orientation: landscape) {
	    @media (min-width: 3000px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2600.jpg');
        	}
	    }
	    
	    @media (min-width: 2500px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2400.jpg');
        	}
	    }
	    
	    @media (min-width: 2200px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2000.jpg');
        	}
	    }
	    
	    @media (min-width: 2000px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-1800.jpg');
        	}
	    }
	    
	    @media (min-width: 1600px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-1600.jpg');
        	}
	    }
	    
	    @media (min-width: 1400px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-1400.jpg');
        	}
	    }
	}
	
	@media (orientation: portrait) {
	    @media (min-height: 2000px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2600.jpg');
        	}
	    }
	    
	    @media (min-height: 1800px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2400.jpg');
        	}
	    }
	    
	    @media (min-height: 1600px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2200.jpg');
        	}
	    }
	    
	    @media (min-height: 1400px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-2000.jpg');
        	}
	    }
	    
	    @media (min-height: 1200px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-1800.jpg');
        	}
	    }
	    
	    @media (min-height: 1000px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-1600.jpg');
        	}
	    }
	    
	    @media (min-height: 800px) {
	        .hero-open {
        		background-image: url('../images/powerlines-sunset-1400.jpg');
        	}
	    }
	}
	*/
    
    @-moz-keyframes fade-in {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}

		@-webkit-keyframes fade-in {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}

		keyframes fade-in {
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}
		
/* HERO INTRO VIDEO */

    .vidcont {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-color: #fa4616;
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: calc(100% + 1px);
        line-height: 0;
        display: block;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        z-index: 4;
    }
    
    .vidcont-anim {
		animation-name: fade-in;
		animation-duration: 1s;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    	animation-fill-mode: forwards;
    	-webkit-animation-delay: 4.5s; /* Chrome, Safari, Opera */
    	animation-delay: 4.5s;
	}
	
	video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 177.77777778vh;
        min-width: 100%;
        min-height: 56.25vw;
    }
    
    #video0 {visibility: hidden;}
    
    /* INTRO SECTION */
    
    .profileimage {
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: block;
		width: 100%;
		height: 63vw;
    }
    
    /* LOWER SECTION */
    
    #lowerwrapper {
        position: relative;
        display: block;
        width: 100%;
        z-index: 0;
    }
    
    .timelineendrule {
        background-image: url('../images/bar-pattern-2.svg');
		background-size: auto 100%;
		background-position: left;
		background-repeat: repeat-x;
    }
    
    /* MEDIA QUERIES */
    
    @media (min-aspect-ratio: 15/10) {
       .hero-4th {display: none;} 
       .final-anim {
    		-webkit-animation-delay: 14.5s; /* Chrome, Safari, Opera */
    		animation-delay: 14.5s;
	    }
    }
    
    @media only screen and (max-width: 900px) and (orientation: landscape) {
        .topbar {
            height: 3vw;
        }
    }
    
    @media only screen and (min-height: 740px) {
        .topbar {
            top: 78px;
        }
    }
    
    @media only screen and (max-width: 900px) and (orientation: portrait) {
        .topbar {
            height: 4vw;
        }
		.profileimage {
			height: 100vh;
			background-color: #fa4616;
		}
    }
    
    @media only screen and (max-height: 600px) {
        .topbar {
            display: none;
        }
    }