/* Enter Your Custom CSS Here */


body {
	font-family: SPDTheSansRegular;
	font-size: 14pt;
}

body[data-fontsize="small"] section article {
    font-size: 14px;
}
body[data-fontsize="regular"] section article {
    font-size: 21px;
}
body[data-fontsize="large"] section article {
    font-size: 26px;
}

main section article > div.wrapper {
    padding: 10% 22% 10% 8%;
}

header {
	font-family: SPDTheSansExtraBold;
  	text-transform: uppercase;
}

section.article article header .title {
  	text-transform: uppercase;
    font-size: 72px;
    margin-bottom: 23px;
	letter-spacing:-1px;
}
section.article article header .title.intro {
    font-size: 72px;
    margin-bottom: -40px;
    text-transform: uppercase;
	letter-spacing:-1px;
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
 { 
	section.article article header .title {
 	   font-size: 36px;
  	}
	section.article article header .title.intro {
  	  font-size: 36px;
      margin-bottom: -78px;
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	section.article article header .title.intro {
      margin-bottom: -118px;
	}
}

p {
	font-family: SPDTheSansBold;
    margin: 0 0 20px;
}

main section article {
    text-shadow: 0px 0px 0 #2b2b2c;
}

.wrapper ul {
	list-style-type: square;
  	margin-left:20px;
}

nav #chapters > li h2 {
	display:none;  
}


/* Anpassungen an Schriften */
@font-face {
    font-family: 'SPDTheSansRegular';
    src: url('./fonts/spd_lf5.eot');
    src: url('./fonts/spd_lf5.eot') format('embedded-opentype'),
         url('./fonts/spd_lf5.woff') format('woff'),
         url('./fonts/spd_lf5.ttf') format('truetype'),
         url('./fonts/spd_lf5.svg#SPD2002TheSansRegular') format('svg');
}



@font-face {
    font-family: 'SPDTheSansBold';
    src: url('../fonts/spd_lf6.eot');
    src: url('../fonts/spd_lf6.eot') format('embedded-opentype'),
         url('../fonts/spd_lf6.woff') format('woff'),
         url('../fonts/spd_lf6.ttf') format('truetype'),
         url('../fonts/spd_lf6.svg#SPD2002TheSansBold') format('svg');
}


@font-face {
    font-family: 'SPDTheSansExtraBold';
    src: url('../fonts/spd_thesans_tt8-webfont.eot');
    src: url('../fonts/spd_thesans_tt8-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/spd_thesans_tt8-webfont.woff2') format('woff2'),
         url('../fonts/spd_thesans_tt8-webfont.woff') format('woff'),
         url('../fonts/spd_thesans_tt8-webfont.ttf') format('truetype'),
         url('../fonts/spd_thesans_tt8-webfont.svg#SPDTheSansExtraBold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'SourceSansProLight';
    src: url('./fonts/sourcesanspro-light.eot');
    src: url('./fonts/sourcesanspro-light.eot') format('embedded-opentype'),
         url('./fonts/sourcesanspro-light.woff') format('woff'),
         url('./fonts/sourcesanspro-light.ttf') format('truetype'),
         url('./fonts/sourcesanspro-light.svg#SPDTheSansRegular') format('svg');
}



@font-face {
    font-family: 'hel-n-light';
    src: url('./fonts/hel-n-light.eot');
    src: url('./fonts/hel-n-light.eot') format('embedded-opentype'),
         url('./fonts/hel-n-light.woff') format('woff'),
         url('./fonts/hel-n-light.ttf') format('truetype'),
         url('./fonts/hel-n-light.svg#hel-n-light') format('svg');
}

@font-face {
    font-family: 'hel_lightitalic';
    src: url('./fonts/hel_light_italic.eot');
    src: url('./fonts/hel_light_italic.eot') format('embedded-opentype'),
         url('./fonts/hel_light_italic.woff') format('woff'),
         url('./fonts/hel_light_italic.ttf') format('truetype'),
         url('./fonts/hel_light_italic.svg#hellightitalic') format('svg');
}



@font-face {
    font-family: 'helv-regul';
    src: url('./fonts/helv-regul.eot');
    src: url('./fonts/helv-regul.eot') format('embedded-opentype'),
         url('./fonts/helv-regul.woff') format('woff'),
         url('./fonts/helv-regul.ttf') format('truetype'),
         url('./fonts/helv-regul.svg#helv-regul') format('svg');
}


@font-face {
  font-family: 'fontello';
  src: url('./fonts/fontello.eot?21545437');
  src: url('./fonts/fontello.eot?21545437#iefix') format('embedded-opentype'),
       url('./fonts/fontello.woff?21545437') format('woff'),
       url('./fonts/fontello.ttf?21545437') format('truetype'),
       url('./fonts/fontello.svg?21545437#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}



section.article article header .chapter {
  display:none;
}



.viewport-overlay .howto button {
    background-color: #cc0000;
}

.overlay {
	background: url('http://www.wir-bewegen-hessens-norden.de/wp-content/uploads/2015/12/spd-rot2015.png') no-repeat bottom !important; 		background-size:contain !important;
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: portrait)
 { 
  	.overlay {
     	background-position: left 0px bottom 0px !important; 
    	background: url('http://www.wir-bewegen-hessens-norden.de/wp-content/uploads/2016/01/spd-rot_mobil.png') no-repeat bottom !important; 
    	background-size:contain !important;
  	}
  
  	main section .full.topcenter {
   		background-position: center top;
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-color:#e30613;
  }
}
  

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape)
 { 
  	section.article article header .title.intro {
        margin-bottom: -98px;
  	}
  
	section.article article header .title.intro {
        margin-bottom: -188px;
  	}
  
  	main section article > div.wrapper {
    	padding: 10% 10% 10% 8%;
  	}
  
    section.article article {
	    left: 70px;
    	max-width: 85%;
	}
}
  
  
.overlay:not(.externalvideo) {
	background-image:none;
}