@media print {

	.Header {
		display:none;
	}
}

@media screen {

.Header {
	height:80px;
    min-width: 1024px;
	width:1050px;
	padding:0px;
	display: inline; /* Inline display for old browsers */
    display: flex;   /* Override it by coming after - use flex for new browsers */
    align-items: center;    /* same as above, for new browsers */
	position:fixed;
	top:0px;
	left:0px;
	background-color:#24497E;
	overflow:visible;
	z-index:20;
    box-shadow: 0 0 15px 2px #000000;
}


/* an element in the header, the logo and the navigation */
.header-element {
    display: inline-block;
    vertical-align: middle;
}

/* surrounding navigation element for links in the header */
.Header nav {
    text-align: center;
    flex-grow: 1;    /* for new browsers: grow to rest of space */
}

.HeaderImage {
	height:80px;
	width:296px;
	padding:0px;
	display:inline;
}


.HeaderLink {
    position: relative;
    display: inline-block;                 /* Needed for width to actually work */
	color:#ffffff;
	font-family:calibri,sans-serif;
	font-size:25px;
	text-decoration:none;
	font-weight:bold;
    width: 120px;
    text-align: center;

    border-left: 2px solid white;
    height: 42px;
    line-height: 42px;
    margin-left: -2px;
}

.HeaderLink:before, .HeaderLink:after {
    content: "";
    position: absolute;
    left: 2px;
    background-color: white;
    width: 1px;
    height: 34px;
    margin-top: 4px;
}

.HeaderLink:after {
    left: -5px;
}

.HeaderLink:first-child {
    border: none;
}

.HeaderLink:first-child:before, .HeaderLink:first-child:after {
    content: none;
}

.Header:before, .Header:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -40px;
    top: 0;
    border-width: 80px;
    border-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: #24497E;
    border-right-width: 40px;
    border-bottom-width: 0;
    z-index: -1;
	pointer-events:none;
}

.Header:before {
    content: none;
}