*	{
        margin: 0px;
        border: 0px;
        padding: 0px;
        }

@font-face {
        font-family: 'myriad-std';
        src: url('../font/myriad-std.eot');
        src: url('../font/myriad-std.eot?#iefix') format('embedded-opentype'),
        url('../font/myriad-std.woff') format('woff'),
        url('../font/myriad-std.ttf') format('truetype');
        }

@font-face {
	font-family: 'Source Sans Pro';
	src: url('../font/SourceSansPro-Light.eot');
	src: url('../font/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'),
	url('../font/SourceSansPro-Light.woff2') format('woff2'),
	url('../font/SourceSansPro-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	}

html, body {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	line-height: 26px;
	color: #3c3c3b;
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
	background: #fff;
        }

img	{
        max-width: 100%;
        height: auto;
        border: 0;
        line-height: 0;
        }

hr	{
	border-top: 1px solid #aa0028;
	display: block;
	margin: 30px 0;
	clear: both;
	}

a:link, a:visited {
        font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	line-height: 26px;
        color: #aa0028;
        text-decoration: none;
        }

a:hover, a:active {
        font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	line-height: 26px;
        color: #3c3c3b;
        text-decoration: none;
        }

h1	{
        font-family: myriad-std, arial, sans-serif;
        font-size: 30px;
        line-height: 34px;
        font-weight: bold;
        color: #aa0028;
        margin: 0 0 20px 0;
	display: block;
        }

h2	{
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 22px;
        line-height: 26px;
        font-weight: bold;
        color: #aa0028;
        margin: 0 0 20px 0;
	display: block;
        }

#wrapper {
	max-width: 1600px;
	margin: 0 auto;
	background: url('../images/sonne-bg.png') no-repeat bottom left;
	border-bottom: 15px solid #a00101;
	padding-bottom: 40px;
	}	

#header {
	margin: 0 auto;
	max-width: 100%;
	background-image: url('../images/pestalozzi-foerderschule-itzehoe.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
	text-align: center;
	padding: 16.4% 0 11% 0;
	}

a.navi:link, a.navi:visited {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 22px;
        line-height: 30px;
        color: #3c3c3b;
        text-decoration: none;
        padding: 0;
         }

a.navi:hover, a.navi:active {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 22px;
        line-height: 30px;
        color: #ba0f0f;
        text-decoration: none;
        padding: 0;
        }

.navi-active {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 22px;
        line-height: 30px;
        color: #ba0f0f;
        text-decoration: none;
        padding: 0;
        }

#nav-container {
	width: 96%;
	padding-left: 4%;
	margin: 0 auto;
	}	

#nav	{
	width: 60%;
	margin: 0 auto;
	}

#nav ul	{
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
	height: 24px;
        }

#nav li {
        float: left;
        padding: 0;
        margin: 0 5.5%;
	position: relative;
        }

#nav li a, #nav li span {
        display: block;
        }

#nav ul ul {
	text-align: left;
        display: none;
        position: absolute;
	left: -7px;
        z-index: 99999;
        margin: 0;
        width: 170px;
        padding: 5px 0 0 0;
        }

#nav li li {
        float: none;
   	text-align: left;
        }

#nav li ul li a:link, #nav li ul li a:visited {
	float: none;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        line-height: 24px;
	background: #aa0028;
        color: #fff;
        text-decoration: none;
        padding: 5px 10px;
	text-align: left;
	display: block;
	width: 170px;
	border-bottom: 1px solid #fff;
        }

#nav li ul li a:hover, #nav li ul li a:active, .snavi-active {
	float: none;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        line-height: 24px;
        color: #fff;
	background: #890101;
        text-decoration: none;
        padding: 5px 10px;
	text-align: left;
	display: block;
	width: 170px;
	border-bottom: 1px solid #fff;
        }

.shifter .shifter-handle { float: right; margin: 10px 15px 0 0; }
.shifter .shifter-navigation {
	background: #ddd url('../images/bg-mnavi.png') no-repeat top center;
	padding: 0 0 17px 0; }
.shifter .shifter-navigation a {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        line-height: 22px;
        color: #fff;
        margin: 17px 0 0 20px;
        display: block;
        text-decoration: none;
        }

.shifter .shifter-navigation span {
        font-family: 'Source Sans Pro', sans-serif;
        margin: 15px 0 0 20px;
        font-size: 18px;
        line-height: 22px;
        color: #3c3c3b;
        display: block;
//      border-bottom: 1px solid #3c3c3b;
        padding: 3px;
	background: #fff;
        }

#mobile-button {
	text-align: center;
	margin-top: -5%;
	}

#content {
	max-width: 60%;
	margin: 0 auto;
	text-align: left;
	padding: 0 30px;
	margin-top: -3.5%;
	}

#content img {
	margin: 0 30px 30px 0;
	height: auto;
	}

#subline {
	padding: 4.5% 0 0 8%;
	color: #aa0028;
	max-width: 50%;
	margin: 0 auto;
	text-align: left;
	}

#telh	{
	display: inline;
	}

@media only screen and (max-width: 1520px) {

#nav ul li {
        float: left;
        padding: 0;
        margin: 0 4%;
        }}

@media only screen and (max-width: 1280px) {

#header {
	padding: 16% 0 11% 0;
	}

#nav ul li {
        float: left;
        padding: 0;
        margin: 0 2.9%;
        }}

@media only screen and (max-width: 1200px) {

#telh	{
	display: none;
	}

#subline {
	padding: 4% 0 0 8%;
	}}

@media only screen and (max-width: 1110px) {

#header {
	padding: 15.8% 0 11% 0;
	}

#nav ul li {
        float: left;
        padding: 0;
        margin: 0 2%;
        }}

@media only screen and (max-width: 1024px) {

#content {
	max-width: 85%;
	padding: 4% 0 0 0;
	margin-top: 0;
	}

#nav, #subline {
	display: none;
	}

#header {
	background-image: url('../images/pestalozzi-foerderschule-itzehoe-mobile.png');
	padding: 18.5% 0 9.5% 0;
	}

#mobile-button {
	margin-top: -3%;
	}}

@media only screen and (max-width: 850px) {

#content {
	padding: 5% 0 0 0;
	}

#mobile-button {
	margin-top: -4%;
	}}

@media only screen and (max-width: 640px) {

#content {
	padding: 6% 0 0 0;
	}

#mobile-button {
	margin-top: -4.5%;
	}}

@media only screen and (max-width: 540px) {

#content img {
	margin: 0 0 30px 0;
	height: auto;
	float: none !important;
	width: 100% !important;
	}}

@media only screen and (max-width: 480px) {

#mobile-button {
	margin-top: -6%;
	}}

/* cookieModal */
.cookieModal {position: fixed;bottom: -100%;left: 0;width: 100%;z-index: 1111;background: #890101;transition: ease-in-out 0.8s;}
.cookieModal.in {bottom: -1px;}
.cookieModal .cmContent h5 {letter-spacing: 1px;color: var(--white);}
.cookieModal .cmContent p {color: var(--white);font-size: 14px;}
.cookieModal .cmContent p a {color: #222;text-decoration: none;font-weight: 600;}
.cookieModal .cmContent a.btn-link {color: var(--success);text-decoration: underline;}
/* /cookieModal */