/*
--------------------------------------------------------
 Reset Box Model for all elements in page
--------------------------------------------------------
*/
* {box-sizing: border-box;}

body {
	font-family: azo-sans-web, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.0rem;
    padding: 0px 20px;
}
h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center	{
	text-align: center;
}
.hmy-section h1 {
 	margin: 0;
    font-family: acumin-pro, sans-serif;
    font-weight: 800;
    font-style: normal;
    padding-top: 30px;
    padding-bottom: 10;
}
.hmy-section h2, 
.hmy-section h3,
.hmy-section h4 {
 	margin: 0;
    font-family: acumin-pro, sans-serif;
    font-weight: 800;
    font-style: normal;
    padding-top: 10px;
    padding-bottom: 10px;
}
.hmy-section h5,
.hmy-section h6 {
	margin: 0;
    font-family: Julius Sans One, Verdana, sans-serif;
	font-weight: lighter;
    font-style: normal;
}
.hmy-section h1 {font-size: 2.4rem;}
.hmy-section h2 {font-size: 2.0rem;}
.hmy-section h3 {font-size: 1.6rem;}
.hmy-section h4 {font-size: 1.4rem;}
.hmy-section h5 {font-size: 1.2rem;}
.hmy-section h6 {font-size: 1.1rem;}

.center {
	text-align: center;
}
p {
	margin-top: 1.0em;
    font-family: azo-sans-web, sans-serif;
    font-weight: 300;
    font-size: 1.0rem;
	line-height: 1.6;
}
ul 	{
	font-family: azo-sans-web, sans-serif;
    font-weight: 300;
    font-size: 1.0rem;
	list-style-type: square;
	line-height: 1.8;
}
ul ul 	{
	font-family: azo-sans-web, sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
	list-style-type: disc;
	line-height: 1.6;
}
/*
--------------------------------------------------------
 Root Menu Links and sub-menu links must be expressed in
 pixel sizes. 16px is the default font-size for all
 browsers. The first rule is for root links, the 
 second is for sub-menu links.
--------------------------------------------------------
*/
.p7AMM li a {font-size: 18px;}
.p7AMM ul ul li a {font-size: 15px;}


/*
--------------------------------------------------------
 Restrict height of logo image to a maximum of 60px
--------------------------------------------------------
*/
img.z-logo {
	max-height: 150px;
	padding: 0px;
}
img.footer-logo {
	max-height: 150px;
	padding: 10px;
}

/*
--------------------------------------------------------
 Section Headers. Use this class when you want a single
 page-wide Harmony column to act as a header between
 sections of your page. The media query undoes the
 large amount of top padding for linearized views.
--------------------------------------------------------
*/
.section-header .hmy-content {padding: 4em 2.5em 1.5em 2.5em;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.section-header .hmy-content {padding: 1em 2.5em;}
}


/*
--------------------------------------------------------
 Sticky elements. Sticky elements act like elements
 that are "position: fixed" when they are full-width.
 When an element is not full-width, and has an adjacent
 element that is not set to "sticky", the sticky
 element will stick in view until a taller sibling
 element has been scrolled its full height. 
--------------------------------------------------------
*/
.header {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 10;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}
.sticky .hmy-content {
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}

/*
-------------------------------------------------------------
 Harmony custom and exception rules. Where you see a
 class name in front or after the Harmony element, such as:
 ".logo .hmy-content" or ".hmy-content-wrapper.full-height", 
 it indicates a User Class assignment in the Harmony UI.
 ************************************************************
 NOTE: position: sticky will cease to work if the element
 or one of its parents is also set to overflow: hidden.
-------------------------------------------------------------
*/
.hmy-content {padding: 2.5em;}

.logo .hmy-content {padding: 0px 0px 0px 10px;}

.nav .hmy-content {padding: 0px;}

.hmy-content-wrapper.intro .hmy-content {
	max-width: 1000px;
	margin: auto;
}
.p7HMY.hmy-color-root-gray,
.p7HMY .hmy-content-wrapper.hmy-color-content-gray,
.p7HMY.hmy-color-root-gray.transparent,
.p7HMY .hmy-content-wrapper.hmy-color-content-gray.transparent {
	color: #FFF; /*we change text color for the gray theme*/
}

/*
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Setting a Harmony content wrapper to a 
 min-heigt of 100vh sets that element to 
 the full height of the browser window.
 When we do this, it is also advisable to
 use the Harmony UI to vertically center
 the content within.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
*/
.hmy-content-wrapper.full-height {
	min-height: 100vh;
}
.hmy-content-wrapper.intro {
	min-height: 100vh;
	border-bottom: 1px solid;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
	.footer .hmy-content.hmy-left, .footer .hmy-content.hmy-right {text-align: center;}
	.footer p {margin: 0px;}
	.hmy-content-wrapper.search .hmy-content {text-align: center;}
	input#search {max-width: 75%;}
	input#do-search {max-width: 20%; min-width: 0px;}
	.hmy-content-wrapper {min-height: 0px !important;}
	.p7AMM ul li a.search {padding: 11px 20px 17px 20px;}

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.hmy-content-wrapper.intro {min-height: 0; padding: 10% 0;}
	.p7AMM li a {line-height: 20px;}
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
.p7AMM.amm-responsive {
	padding: 0px !important;
}

.p7AMM.amm-fixed {
    max-height: 100% !important;
    overflow-y: auto;
}

.p7AMM.amm-responsive li {
	text-align: left !important;
	display: block;
	max-height: 700777px;
}
.p7AMM.amm-responsive a { padding: 10px 24px; }

.p7AMM.amm-responsive.amm-pointer ul ul:after {
	display: none !important;
}
.p7AMM.amm-responsive ul ul {
	width: 100%;
	min-width: 0px;
	margin: 0px !important;
	position: relative !important;
}
.p7AMM.amm-responsive ul,
.p7AMM.amm-responsive a {
	border-radius: 0px !important;
}
.p7AMM.amm-responsive .amm-toolbar {
	display: block;
	text-align: right;
	margin: 0px 0px;
	padding: 0px 10px;
	background-color: #111;
	color: #FFF !important;
}
.p7AMM.amm-responsive .amm-toolbar a {
	display: inline-block;
	text-decoration: none;
	font-size: 2rem;
	color: #FFF;
	opacity: 0.7;
}
.p7AMM.amm-responsive .amm-toolbar a:hover {
	opacity: 1;
}
.p7AMM.amm-responsive .amm-toolbar.amm-toggle-text.closed a:before {
	display: inline-block;
	content: "Show Menu";
}
.p7AMM.amm-responsive .amm-toolbar.amm-toggle-text.opened a:before {
	display: inline-block;
	content: "Hide Menu";
}

.p7AMM.amm-responsive ul.closed {
	display: none;
}
.p7AMM.amm-responsive ul.opened {
	display: block;
}
.p7AMM.amm-responsive li.amm-more {
	display: none !important;
}
.p7AMM.amm-responsive li.amm-root-moved {
	position: relative !important;
	top: 0px !important;
	left: 0px !important;
}
}

/* 
****************************************************
    Overrides to default Harmony Media Queries
****************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
.p7HMY .hmy-section {flex-basis: 100% !important;}
.hmy-content {padding: 1.5em;}
.p7HMY .hmy-section .hmy-content-wrapper {border-radius: 0px !important; border: none !important;}
.p7HMY.hmy-legacy .hmy-section {float: none !important; width: 100% !important;}
}

/* 
**************************************
            Tablets 
**************************************
*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
  div {background-attachment: scroll !important;}
  .zeit-5 .sidebar, .zeit-6 .sidebar {background-size: contain; background-position: top;}
  .hmy-content-wrapper.hmy-vertical-center.sticky {display: block;}
    .img.z-logo {
	padding: 8px;
    margin-bottom: 12px;
}
    
}

/* 
**************************************
            Smartphones
**************************************
*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
     div {background-attachment: scroll !important;}
  	.zeit-5 .sidebar, .zeit-6 .sidebar {background-size: contain; background-position: top;}
}

/*End Media Queries*/