* {margin: 0;padding: 0;}
*, *::before, *::after {box-sizing: border-box;}
/* ### * {box-sizing: border-box;} ### */
html {font-size: 100%;overflow-y: scroll;}
body {font-family: 'Lato', sans-serif;}

#map { width: 100%; height: 500px;}

A { color: #0570b8;}

h2 {
	text-align: center;
	padding: 0 10%;
	font-size: 1.25em;
	line-height: 1.375em;
	color: #0570b8;
}
h4 {
    font-size: 1em;
    line-height: 1.375em;
    color: #0570b8;
}
p, td {line-height: 1.625em;}
p, tr {margin-bottom: 1.625em;}
p:last-child {margin-bottom: 0px;}
a {text-decoration: none;outline: none;}
ul {list-style: none;}
table {border-collapse: collapse;width: 100%;}
td {vertical-align: top;}
img {border: 0;display: block;width: 100%;height: auto;}
p img {width: auto;height: auto;}
input, select {font: 1em Arial, sans-serif;}
button::-moz-focus-inner,
input::-moz-focus-inner {border: 0;padding: 0;}

.all {
	position: relative;
	display: block;
	margin: 0 auto;	
	max-width: 984px; /* plus 12px left/right-padding for all widths */
}
			
.header {
	position: fixed;
	left: 50%;
    top: 0%;
    transform: translateX(-50%);	
	width: 100%;
	max-width: 960px;	
	background-color: #f5f3ed;
	-webkit-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.4);
	        box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.4);
	z-index: 990;
	transition: all 0.2s ease;
}	
	.logo-left,
	.logo-right {
		position: absolute;
		top: 100px;
		width:200px;
		height: 230px;
		background-position: left top;
		background-repeat: no-repeat;
	}
    .logo-left a,
    .logo-right a { width: 200px; height: 230px;}
	.logo-left {left: -200px;background-image: url('../img/bg-logo_stadtteildetektive.png');}
	.logo-right {right: -200px;background-image: url('../img/SPTG_DAM_logo.png');}
	
	.logo {transition: all 0.2s ease;}
		.logo img {display: block;margin: 0 auto;}
				
	.nav {text-align: center;line-height: 1em;}
		.nav > ul {}
			.nav > ul li {
				vertical-align: top;
				border-style: solid;
				border-color: #666;
			}
			.nav > ul li:first-child {padding-left: 0;}
			.nav > ul li:last-child,
            .nav > ul li.kontakt {padding-right: 0;border-width: 0;}
				.nav > ul li a {text-transform: uppercase;font-weight: bold;color: #666;}
				.nav > ul li a:hover {color: #000;}
    .nav ul li.icon {display: none;}
				
.main {
	position: relative;
	margin: 0 auto;
	padding: 0 12px;
	width: 100%;
	max-width: 984px;	
}	
	.section {margin-bottom: 40px;padding: 0;}
		.section h1 {	
			margin: 0 auto;
			width: 140px;
			height: 140px;
			border-radius: 70px;
			font-size: 1.5em;
			line-height: 1em;
			text-align: center;
			text-transform: uppercase;
			color: #fff;
		}
		.section h1::before,
		.section h1::after {
			content: " ";
			width: 40%;
			height: 2px;
			position: absolute;
			top: 69px;
		}
		.section h1::before {left: 12px;}
		.section h1::after {right: 12px;}

			.section h1 > span {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-moz-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
				height: 100%;
				width: 100%;
			}
				.section h1 > span span {padding-bottom: 8px;}
		
        #intro h1,
		#intro h1::before,
		#intro h1::after,
        #projekt h1,
		#projekt h1::before,
		#projekt h1::after,
		#schulen h1,
		#schulen h1::before,
		#schulen h1::after,
        #kontakt h1,
		#kontakt h1::before,
		#kontakt h1::after {background: #fcc841;}

		#spielendlernen h1,
		#spielendlernen h1::before,
        #spielendlernen h1::after,
        #downloads h1,
		#downloads h1::before,
		#downloads h1::after,
        #frageboegen h1,
		#frageboegen h1::before,
		#frageboegen h1::after,
		#dam h1,
		#dam h1::before,
		#dam h1::after {background: #0570b8;}
		
		.row {
			position: relative;
			margin: 0 -12px;						
		}
			.row > .col {
				margin-bottom: 40px;
				padding: 0 12px 0 12px;
				display: inline-block;
				vertical-align: top;
			}

			.col-33 {width: 33.333%;}
			.col-50 {width: 50%;}
			.col-100 {width: 100%;}			
				.col .col {
					display: block;
					margin: 0px;
					padding: 0px;
					width: 100%;
				}
/* swiper */
		#topslider h1,
		#topslider h3 {line-height: 1em;text-transform: uppercase;}
				
				.swiper-container {
					width: 100%;
					height: auto;
					max-width: 960px;
					max-height: 566px;
				}
					.swiper-slide {text-align: center;}
						.swiper-slide > img {width: 100%;height: auto;display: block;}
						.swiper-slide-top-layer {
							position: absolute;
							display: flex;
							flex-direction: column;
							justify-content: flex-end; 		
							width: 100%;
							height: 49%;
							box-sizing: border-box;
						}
							.swiper-slide-top-layer > div {width: 80%;margin: 0 auto;}
							.swiper-slide-top-layer-img {padding-bottom: 16px;}
								.swiper-slide-top-layer-img img {display: block;width: 100%;height: auto;max-height: 62px;}
							.swiper-slide-top-layer-text {color: #fff;text-shadow: 2px 2px 4px #333;}
								.swiper-slide-top-layer-text h1 {}
								.swiper-slide-top-layer-text h3 {}
								.swiper-slide-top-layer-text p {}
								
								span.swiper-pagination-bullet {
									border: 2px solid #fff;
									width: 12px;
									height: 12px;
								}
								span.swiper-pagination-bullet-active {}
			
				ul.grid33 {margin: 0 -12px 0px;} 
				ul.schulen {}
				ul.videolink {}
					ul.grid33 li {
							display: inline-block;
							vertical-align: top;
							margin-bottom: 24px;
							padding: 0 12px;
							width: 33.333333%;
						}
						ul.grid33 li  a {
							display: block;
							width: 100%;
							text-align: center;							
						}
							ul.grid33 > li  a img {}
							
						ul.schulen li a,
                        ul.videolink li a {
							font-weight: bold;
							line-height: 1em;
							color: #000;
						}
							ul.schulen li a img,
                            ul.videolink li a img {}
							ul.schulen li a span, 
                            ul.videolink li a span {display: block;}
							ul.schulen li a > span, 
                            ul.videolink li a > span {padding: 20px 0;background: #fff;}
								ul.schulen li a span.stadtteil, 
                                ul.videolink li a span.tag {margin-bottom: 4px;}
								ul.schulen li a span.schule, 
                                ul.videolink li a span.tag-titel {color: #808080;}
							ul.schulen li a:hover > span, 
                            ul.videolink li a:hover > span {background: #fcc841;}
							ul.schulen li a:hover,
                            ul.videolink li a:hover,
							ul.schulen li a:hover span, 
                            ul.videolink li a:hover span {color: #fff}
					
				ul.download {text-align: center;}
					ul.download li {margin-bottom: 12px;}
					ul.download li:last-child {margin-bottom: 0;}
						ul.download li a, a.download-link {
							display: inline-block;
							vertical-align: top;
							padding: 2px 40px 0 0;
							font-size: 1.5em;
							font-style: italic;
							line-height: 1em;
							width: auto;
							height: 32px;
							color: #666;
							background: url('../img/icon_download.png') right top no-repeat;
							/*background-size: contain;*/
						}
						ul.dwonload li a, a.download-link:hover {
							color: #0570b8;
							background-position: right -32px;
							text-decoration: underline;
						}
						
p.dev {
position: absolute;
top:0;
right: 0;
z-index: 9998;
font-size: 10px !important;
color: #666;
text-align: right;
line-height:10px;
display: block;
}

/* ######################################## BREAKPOINTS ######################################## */

/* #################### max-width-styles #################### */
@media (max-width: 1359px) {
/* @media (max-width: 1376px) { */
	.logo-left,
	.logo-right {display: none;}
	.logo {display: block;}
}

@media (max-width: 959px) {
/* @media (max-width: 976px) { */
	.logo {margin-bottom: 10px;}
	#topslider {margin: 0 -12px 20px;}
		#topslider h1 {font-size: 3.5em;margin-bottom: 7px;}
		#topslider h3 {font-size: 1.3em;}
}

@media (max-width: 767px) {
	.header {
		position: fixed;
		margin: 0 auto;
		padding: 10px 0 0;
		background-image: none;
	}
			.logo img {height: auto;width: 80%;max-height: 40px;}
	.nav {font-size: 0.75em;}
		.nav > ul {display: table;width: 100%;border-collapse: collapse;}
			.nav > ul li {display: table-cell;padding: 0;border-width: 0 1px 0 0;}
				.nav > ul li a {display: block;line-height: 2.5em;}
				
	#topslider h1 {font-size: 2em;margin-bottom: 7px;}
	#topslider h3 {font-size: 1.25em;}
    #topslider {padding-top: 75px;}
		
		.section h1::before,
		.section h1::after {display: none;}
		.section h1 {
			padding: 4px 0;
			width: 100%;
			height: auto;
			line-height: 1.5em;
			border-radius: 8px;
		}
		.section h1 span {display: block;}
		.section h1 br,
		.section h1 em {display: none;}

	.col-33,
	.col-50 {width: 100%;}

	ul.grid33 > li {margin-bottom: 12px;width: 50%;}
		ul.schulen li a, 
        ul.videolink li a {font-size: 1.25em;}
	
	#kontakt p {margin-bottom: 0;}
	p.registerspace {display: none;}
}

@media (max-width: 479px) {
	ul.grid33 > li {
		display: block;
		margin-bottom: 12px;
		padding: 0 12px;
		width: 100%;
	}
}
/* #################### min-width-styles #################### */
@media (max-width: 576px) {
    
    .nav ul li a {font-size: 1.5em !important;}
    
    /* ul.topnav li:not(:first-child) {display: none;} */
    ul.topnav li {display: none; border: 0;}
    ul.topnav li.icon {
        /* color: #0570b8; 
        font-size: 35px !important; */
        float: right;
        padding-right: 30px;
        display: inline-block;
    }
    /* ul.topnav li.icon a { color: #0570b8; font-size: 35px; } */
    
    ul.topnav li.icon a {
        position: relative;
        padding-left: 1.25em;
    }
    ul.topnav li.icon a:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0.25em;
        width: 1.5em;
        height: 0.15em;
        background: #0570b8;
        box-shadow: 
        0 0.5em 0 0 #0570b8,
        0 1em 0 0 #0570b8;
        
    }
    
    ul.topnav.responsive {position: relative;}
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
        padding-left: 20px;
    }
    
}

@media (min-width: 768px) {
	body {
		background: #f5f3ed url('../img/bg-body.png') center top repeat-y;
		background-size: cover;
	}
	.header {
		padding-top: 10px;
		height: 75px;
		background-image: url('../img/logo_std-bildmarke_klein.png');
		background-position:10px top;
		background-repeat: no-repeat;
		background-size: contain;
	}
		.logo {height: 30px;}
			.logo img {height: 100%;width: auto;}
			
		.nav {font-size: 1.0em;}
				.nav > ul li {
					display: inline-block;
					padding: 0 30px;
					border-width: 0 2px 0 0;
				}
			
	#topslider {padding-top: 75px;}
		
	ul.schulen li a,
    ul.videolink li a {font-size: 1.5em;}	
}

@media (min-width: 960px) {
/* @media (min-width: 977px) { */
	.header {
		padding-top: 15px;
		height: 100px;
		background-position:50px top;
		background-size: contain;
		-webkit-box-shadow: none;
		        box-shadow: none;
	}
	.sticky .header {
		padding-top: 10px;
		height: 75px;
		-webkit-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.4);
		        box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.4);
		transition: all 0.2s ease;
	}
		.logo {
			margin-bottom: 14px;
			height: 40px;
		}
		.sticky .logo {height: 30px;}
		
	#topslider {margin-bottom: 40px;padding-top: 100px;}
		#topslider h1 {font-size: 5em;margin-bottom: 7px;}
		#topslider h3 {font-size: 1.375em;}

	#projekt,
	#schulen {margin-bottom: 16px;}/* nur, wenn ul.grid letztes element ist */

}

@media (min-width: 1360px) {
/* @media (min-width: 1377px) { */
	.header {
		-webkit-box-shadow: none;
		box-shadow: none;
		background-image: none;
	}
	.sticky .header {height: 40px;}
		.logo-left, .logo-left a,
		.logo-right, .logo-right a {display: block;}
		.logo {display: none;}
		.nav {padding-top: 25px;transition: all 0.2s ease;}
		.sticky .nav {padding-top: 0;transition: all 0.2s ease;}
}