/*
 -------------------------------- 
 PVII Zeitgeist - version: 1.0.4
 by Project Seven Development
 www.projectseven.com
 --------------------------------
*/

/* 
Google Schriften lokal gespeichert und hier definiert und eingebunden
----------------------------------------------------------------------

montserrat-100 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v26-latin_latin-ext-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v26-latin_latin-ext-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v26-latin_latin-ext-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v26-latin_latin-ext-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v26-latin_latin-ext-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-v26-latin_latin-ext-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* 
Ab hier definition des alternativen Monserrat fonts 
-----------------------------------------------------
/* montserrat-alternates-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-alternates-v17-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v17-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-alternates-v17-latin_latin-ext-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v17-latin_latin-ext-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-alternates-800 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-alternates-v17-latin_latin-ext-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/montserrat-alternates-v17-latin_latin-ext-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* vollkorn-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/vollkorn-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/vollkorn-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/vollkorn-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/vollkorn-v23-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/vollkorn-v23-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/vollkorn-v23-latin-regular.svg#Vollkorn') format('svg'); /* Legacy iOS */
}

/* vollkorn-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/vollkorn-v23-latin-500italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/vollkorn-v23-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/vollkorn-v23-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/vollkorn-v23-latin-500italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/vollkorn-v23-latin-500italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/vollkorn-v23-latin-500italic.svg#Vollkorn') format('svg'); /* Legacy iOS */
}


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

/*
--------------------------------------------------------
 Set font for all body elements and for headings
--------------------------------------------------------
*/
body {
	font-family: Montserrat, Verdana, Geneva, sans-serif;
	font-weight: 300;
	font-size: 100%;
 }
.hmy-section h1, 
.hmy-section h2, 
.hmy-section h3, 
.hmy-section h4, 
.hmy-section h5 {
	font-family: Montserrat, Verdana, Geneva, sans-serif;
	font-weight: 600;
}
strong, b {font-weight: 600;}

/*
--------------------------------------------------------
 Set font-sizes for various elements
--------------------------------------------------------
*/
.hmy-section h1 {font-size: 200%;}
.hmy-section h2 {font-size: 180%}
.hmy-section h3 {font-size: 155%;}
.hmy-section h4, .hmy-section h5 {font-size: 138%;}

.footer {
    font-size: 75%;

}

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


/*
--------------------------------------------------------
 Set custom styles for the Team Grid Harmony instance 
 in Layout-04, including animating the images on hover.
--------------------------------------------------------
*/
.team-grid .hmy-section.member .hmy-content {
	padding: 10px;
	overflow: hidden;
}
.team-grid .hmy-section.member img {
	transition: all ease-out .5s;
	transform: scale(1);
	transform-origin: center;
	opacity: 1;
}
.team-grid .hmy-section.member img:hover {
	transform: scale(1.75);
	opacity: .5;
}
.image-caption {
	margin: 0px;
	letter-spacing: .5em;
}
.image-description {
	font-size: 80%;
}

/*
--------------------------------------------------------
 Custom media queries for Team Grid. Flex-basis 50%
 sets the grid to two boxes per row at 1280px screen
 width, while 100% linearizes all boxes.
--------------------------------------------------------
*/
@media only screen and (min-width: 0px) and (max-width: 1280px) {
	.team-grid .hmy-section.member {flex-basis: 50% !important;}
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.team-grid .hmy-section.member {flex-basis: 100% !important;}
}

/*
--------------------------------------------------------
 Handy-dandy utility rules you can apply to any element
--------------------------------------------------------
*/
.centered {text-align: center;}
.bordered {border: 1px solid;}
.rounded {border-radius: 3px;}
.sub-headline {
    font-family: 'Montserrat Alternates';
	font-size: 86%;
    font-weight: 400;
	letter-spacing: .1em;
}
.tagline {
	font-size: 85%;
	letter-spacing: .25em;
}
.fancy {
	border-radius: 3px;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.45);
}

.blocked-indent {
	padding: 1% 10%;
	line-height: 2.25;
	font-size: 88%;
	letter-spacing: .1em;
}
.bump-padding-top {
	padding-top: 48px;
}

/*
--------------------------------------------------------
 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: 900; /* war 10 */
	box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
}
.sticky .hmy-content {
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}
/*Für Spalte zwei oberen Abstand wenn links sticky mit 80px */
.ausrichten-top.hmy-content {
    padding: 0px 0px 0px 100px !important;
}

/*
-------------------------------------------------------------
 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: 1.8em;}

.logo .hmy-content {
    padding-top: 5px;
    padding-right: 0px;
    padding-left: 10px;
    padding-bottom: 5px;
}

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

.search .hmy-content {
	padding: 10px 6px 10px 6px;
	text-align: right;
}
.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;
}


/*
---------------------------------------------------------------
 Special fixed background images. The first class "top-panel"
 sets the smoky wisp background in the first content box in
 layout-01. The second class "banner-01" is for the large, 
 full-width image of the woman in the hat in layouts 01-03.
---------------------------------------------------------------
*/
.top-panel {
	background-image: url(img/smoke.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: fixed;
}

.banner-01 {
	background-image: url(img/pr_face.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

/*
**************************************************************
 The following classes are for the various background
 images used. The first part of the class name relates to the
 layout page number. ".zeit-2 .spirit" is assigned to the 
 "spirit" element in layout-02.
***************************************************************
 Each of these elments is assigned both a linear gradient and
 a conventional background image, with the gradient serving as
 a mask between the background and the actual content.
***************************************************************
*/
.zeit-2 .spirit {
	color: #FFF;
	background: linear-gradient(rgba(120,120,120,0.98), rgba(120,120,120,0.30)), url(img/face.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}
.zeit-3 .spirit {
	color: #FFF;
	background: linear-gradient(rgba(120,120,120,0.98), rgba(120,120,120,0.30)), url(img/face.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}
.zeit-8 .ruhm {
    /* Smake Hintergrundbild für alle Seiten */
    background-image: url(img/smoke.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: fixed;
    
}

/*
---------------------------------------------------------------------------
 Search Pop-Down. Note that the popdown can be used for anything you
 want. It does not have to house a search box.
---------------------------------------------------------------------------
*/
.popper {
	transition: all ease-out .75s;
	position: absolute;
	left: 0px;
	z-index: -1;
	width: 100%;
	top: -100%;
	opacity: 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background-color: rgba(115,115,115,0.9);
}
.hmy-noscript .popper {
	position: static;
}
#popper.show-popper {
	top: 100%;
	opacity: 1;
}
#popper.hide-popper {
	top: -100%;
}


/*
-------------------------------------------------------------------------
                           Media Queries
-------------------------------------------------------------------------
*/

/*
*********************************
      Basic Cosmetics
*********************************
*/
@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;}

}

/*
******************************************************
 Read by IE10 and 11 ONLY. These browsers do not do 
 well with viewport height and vertical centering.
 We add significant top/bottom padding to simulate
 vertical centering.
******************************************************
*/
@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;}
}


/* 
*******************************************************
Overrides to default Adaptive Menu Magic media query 
*******************************************************
*/

/* 
****************************************************
    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;}
}

/* 
**************************************
            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*/