@font-face {
  font-family: 'robotoregular';
  src: url("../fonts/Roboto-Regular-webfont.eot");
  src: url("../fonts/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular-webfont.woff") format("woff"), url("../fonts/Roboto-Regular-webfont.ttf") format("truetype"), url("../fonts/Roboto-Regular-webfont.svg#robotoregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'robotomedium';
  src: url("../fonts/Roboto-Medium-webfont.eot");
  src: url("../fonts/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium-webfont.woff") format("woff"), url("../fonts/Roboto-Medium-webfont.ttf") format("truetype"), url("../fonts/Roboto-Medium-webfont.svg#robotomedium") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'robotobold';
  src: url("../fonts/Roboto-Bold-webfont.eot");
  src: url("../fonts/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold-webfont.woff") format("woff"), url("../fonts/Roboto-Bold-webfont.ttf") format("truetype"), url("../fonts/Roboto-Bold-webfont.svg#robotobold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'roboto_condensedregular';
  src: url("../fonts/RobotoCondensed-Regular-webfont.eot");
  src: url("../fonts/RobotoCondensed-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoCondensed-Regular-webfont.woff") format("woff"), url("../fonts/RobotoCondensed-Regular-webfont.ttf") format("truetype"), url("../fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedbold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'roboto_condensedbold';
  src: url("../fonts/RobotoCondensed-Bold-webfont.eot");
  src: url("../fonts/RobotoCondensed-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoCondensed-Bold-webfont.woff") format("woff"), url("../fonts/RobotoCondensed-Bold-webfont.ttf") format("truetype"), url("../fonts/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold") format("svg");
  font-weight: normal;
  font-style: normal; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
	text-align: center;
}

body {
	text-align: left;
	max-width: 1280px;
	margin: 0 auto;
  background-image: url("/images/wand_ohne_f.jpg");
	background-position: center top;
	background-size: auto;
	background-repeat: no-repeat;
  font-family: Arial, Swiss, Helvetica, Sans-Serif;
}

img { border-width: 0; }
div { box-sizing: border-box; }
a, a:hover, a:active, a:visited { color: #ffffff; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }


header {
  background-image: url("/images/logo_aufgeklaert_autonom.svg"), url("/images/logo_jubi.png");
	background-position: left top, right 27px top 23px;
	background-repeat: no-repeat;
  height: 142px;
  width: 100%;
  margin-bottom: -142px;
}

#header_links {
  position: relative;
}

#link_home, #link_jubi {
  display: inline-block;
  position: absolute;
  height: 142px;
}
#link_jubi {
  right: 0;
  height: 95px;
  width: 280px;
}
#link_home img, #link_jubi img {
  border-width: 0;
  height: 142px;
  width: 325px;
  display: inline-block;
}

#link_jubi img {
  height: 95px;
  width: 280px;
}


main { 
	background-image: url("/images/l.png"), url("/images/r.png");
	background-position: left bottom, right bottom;
	background-size: auto, auto;
	background-repeat: no-repeat;
  width: 100%;
  height: 560px;
  display: block;
}

article { 
/*	height: 100%;*/
}

.start article {
  padding-top: 100px;
}

#plakat_1  { background-image: url("/images/plakat.png"); }
#plakat_2  { background-image: url("/images/plakat.png"); }
#plakat_3  { background-image: url("/images/plakat.png"); }
#plakat_4  { background-image: url("/images/plakat.png"); }
#plakat_5  { background-image: url("/images/plakat.png"); }
#plakat_6  { background-image: url("/images/plakat.png"); }
#plakat_7  { background-image: url("/images/plakat.png"); }
#plakat_8  { background-image: url("/images/plakat.png"); }
#plakat_9  { background-image: url("/images/plakat.png"); }
#plakat_10 { background-image: url("/images/plakat.png"); }


nav {
	display: block;
	height: 200px;
	background-image: url("/images/bg_links.svg"), url("/images/green_bg.png");
	background-position: right top, left top;
	background-size: 100%, auto;
	background-repeat: no-repeat, repeat-x;
  background-color: #c9de9b;
}
nav::after {
	clear: both;
}

#block_1, #block_2, #block_3, #block_4 {
	float: left;
	width: 25%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#block_1 { background-image: url("/images/icon_Projekt.svg"); }
#block_2 { background-image: url("/images/icon_Plakate.svg"); }
#block_3 { background-image: url("/images/icon_Material.svg"); }
#block_4 { background-image: url("/images/icon_Links.svg"); }

#block_1 a, #block_2 a, #block_3 a, #block_4 a {
  display: block;
  height: 100%;
  color: transparent;
}

footer {
	height: 80px;
	background: url("/images/bg_impressum.svg") no-repeat bottom right;
	background-color: #d9e8b8;
	position: relative;
	color: #ffffff;
}
footer > div { display: inline-block; height: 100%; }

#logo_hessen { float: left; }

#footer_menu { float: right; }
#footer_menu ul { list-style-type: none; margin: 0 128px 0.5em 0; padding: 0; display: block; position: absolute; bottom: 0; right: 0;}
#footer_menu ul li { display: inline-block; }
#footer_menu ul li::before { content: '|'; margin: 0 18px; }
#footer_menu ul li:first-of-type::before { display: none; }

.slick-arrow { width: 50px; height: 50px; background-position: center; background-repeat: no-repeat; z-index: 999; }
.slick-prev { background-image: url("/images/btn_links.svg"); }
.slick-next { background-image: url("/images/btn_rechts.svg"); }
.slick-prev::before, .slick-next::before { display: none !important; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { opacity: 1; background-repeat: no-repeat; background-image: url("/images/btn_links.svg"); background-position: center; }
.slick-next:hover, .slick-next:focus { background-image: url("/images/btn_rechts.svg"); }
.slick-slide { text-align: center; }
.slick-slide > a { margin: 0 auto; display: inline-block; }

.center-image { width: 290px; height: 410px; }

#plakate_slick {
  width: 800px;
  margin: 0 auto;
}

#plakate_slick .slick-list .item {
  height: 410px;
  width: 290px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 220px;
}

#plakate_slick .slick-list .item.slick-current img {
  background-size: contain;
  transition: all 300ms ease;
}


#plakate_slick2 .slick-list.draggable {
  margin: 0 20px;
}

#plakate_slick2 .slick-list div.item img {
  -webkit-transform-origin : 50% 100%;
  -moz-transform-origin : 50% 100%;
  -o-transform-origin : 50% 100%;
  -ms-transform-origin : 50% 100%;
  transform-origin : 50% 100%;
  -webkit-transition : all 300ms ease;
  -moz-transition : all 300ms ease;
  -o-transition : all 300ms ease;
  -ms-transition : all 300ms ease;
  transition: all 300ms ease;
}

#plakate_slick2 .slick-list div:not(.slick-center) img {
/*
  -webkit-transform-origin : 50% 100%;
  -moz-transform-origin : 50% 100%;
  -o-transform-origin : 50% 100%;
  -ms-transform-origin : 50% 100%;
  transform-origin : 50% 100%;
*/
  -webkit-transform : scale(0.66);
  -moz-transform : scale(0.66);
  -o-transform : scale(0.66);
  -ms-transform : scale(0.66);
  transform : scale(0.66);
  -webkit-transition : all 300ms ease;
  -moz-transition : all 300ms ease;
  -o-transition : all 300ms ease;
  -ms-transition : all 300ms ease;
  transition: all 300ms ease;
}
#plakate_slick2 .slick-list .item.slick-current + .slick-active__ img,
#plakate_slick2 .slick-list div.slick-center img {
/*#plakate_slick2 .slick-list .item.slick-center.slick-current img {*/
  -webkit-transform : scale(1);
  -moz-transform : scale(1);
  -o-transform : scale(1);
  -ms-transform : scale(1);
  transform : scale(1);
  -webkit-transition : all 300ms ease;
  -moz-transition : all 300ms ease;
  -o-transition : all 300ms ease;
  -ms-transition : all 300ms ease;
  transition: all 300ms ease;
}




#plakate_slick2 { width: 860px; margin: 0 auto;}

#plakate_slick2 .slick-track { left: -12px; }




body.textpage {
  font-size: 16px;
}

.textpage header {
}

.textpage main {
  font-family: 'robotoregular', Arial, Swiss, Helvetica, Sans-Serif;
  /*
  min-height: 587px;
  height: 587px;
  max-height: 587px;
  */
  min-height: 547px;
  height: 547px;
  max-height: 547px;
  margin-top: 142px;
  background-color: #c9de9a;
  background-image: url("/images/background_green.png");
	background-position: right top;
	background-size: auto;
	background-repeat: no-repeat;
  padding-top: 50px;
  padding-bottom: 23px;
}

.textpage #stage {
  background-image: url("/images/maedchen.png"), url("/images/junge.png");
	background-position: left 113px bottom, right bottom;
	background-size: auto;
	background-repeat: no-repeat;
  height: 100%;
}
.textpage #stage.scrollable {
  scrollbar-width: thin;
  overflow-y: scroll;
}
.textpage #content {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}

body.textpage main a, body.textpage main a:hover, body.textpage main a:active, body.textpage main a:visited { color: #d2232a; text-decoration: none; }
body.textpage main a:hover { text-decoration: underline; }

.textpage #content p { margin-top: 0; }

body.textpage h1 { color: #FFFFFF; font-size: 1.55rem; margin-bottom: 0.65em; }
body.textpage h1:first-of-type { margin-top: -8px; }
body.textpage main h2 { font-size: 0.8rem; margin-top: 1.5em; }
body.textpage #content article:first-of-type h2 { margin-top: 1em; }


/* https://pixelbar.be/blog/microsoft-edge-internet-explorer-10-und-ie11-via-media-queries-css-ansprechen/ */

@media all and (-ms-high-contrast:none) {
  /* @see tilenavigation.scss */
  #plakate_slick2, /* IE10 */
  *::-ms-backdrop, #plakate_slick2 {     /* IE11 */
      margin-bottom: 45px;
  }
}

@media (max-width: 1198px) {
  .textpage #stage { background-position: left 24px bottom, right bottom; }
  .textpage #content { width: 100%; padding-left: 260px; padding-right: 150px; }
}

@media (max-width: 1012px) {
}

@media (max-width: 950px) {
  #block_1, #block_2, #block_3, #block_4 { background-size: contain; }
}

@media (max-width: 910px) {
  /*
  #plakate_slick2 { width: 100%; }
  .slick-prev { left: 14%; }
  .slick-next { right: 14%; }
  */
  #plakate_slick2 { width: 410px; padding-left: 40px;}
  .slick-prev { left: 0; }
  .slick-next { right: 0; }
  #plakate_slick2 .slick-list .item img { 
    -webkit-transform : scale(1);
    -moz-transform : scale(1);
    -o-transform : scale(1);
    -ms-transform : scale(1);
    transform : scale(1);
  }
}

@media (max-width: 710px) {
  .start article { padding-top: 140px; }
}

@media (max-width: 700px) {
  .textpage #stage { background-image: none; }
  .textpage #content { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 635px) {
  #footer_menu ul { margin-right: 1em; background-color: #000000; }
  nav { height: 280px; padding-top: 30px; }
  nav > div:n-th(2)::after { clear; both; }
  #block_1, #block_2, #block_3, #block_4 { width: 50%; height: 125px; }
  #block_3, #block_4 { background-color: #c9de9a; }
}

@media (max-width: 604px) {
  #link_home, #link_jubi {width: 48%; height: 100px; }
}

@media (max-width: 594px) {
  header { background-size: 50%, 40%; height: 120px; }
}


@media (max-width: 520px) {
  header { height: 110px; }
  footer { position: static; height: auto; background-position: bottom; }
  #logo_hessen, #footer_menu  { display: block; width: 100%; margin: 0 auto; float: none; height: 80px; }
  #logo_hessen { background-color: #ffffff; text-align: center; }
  #footer_menu { position: relative; }
  #footer_menu ul { bottom: 1em; right: 2em; }
}

@media (max-width: 470px) {
  header { height: 100px; }
  main { background-image: none; } 
}