/* =reset.css (by Andy Clarke) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align: baseline; background : transparent; }

:focus { outline : 0; } 
/*table { border-collapse : collapse; border-spacing : 0; }*/
caption, th, td { text-align : left; font-weight : normal; }
button { overflow : visible; }


/* CLEARING
-------------------------------------------------------------*/

/* =clear */
.clear { clear: both; font-size: 1px; line-height: 0; }

/* =clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block; }
/* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */

/* =all-clear */
.all-clear { overflow: hidden; }
/*Because authors use "_height" as min-height in IE lt 7, it is important to turn the above declaration off in IE lt 7.*/
.all-clear { overflow: hidden; _overflow: visible; }
/*The declaration below is not directly related to the technique, but since we are using "overflow" I like to throw in a fix to prevent IE lt 7 from not respecting the width of a container and expanding its dimension depending on content (large image, long string, etc.).*/
.all-clear { overflow: hidden;	_overflow: visible; _overflow-x: hidden; }
/*Setting hasLayout in IE lt 7*/
.all-clear { overflow: hidden;	_overflow: visible; _overflow-x: hidden; _height: 0; }
/*Taking care of IE Mac*/
.all-clear {	overflow: hidden;	_overflow: visible; _overflow-x: hidden; _height: 0; }
/*\*//*/ 
.all-clear { display: inline-block; }
/**/

/* Layout */
html { }
body { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.5em; color: #000; background: #fff; }
.container { overflow: auto; max-width: 1520px; margin: 3.5% auto; }

/* Header */
.header-top { position: fixed; top: 0; width: 100%; height: 34px; background: linear-gradient(to right, #4c1420, #632934); z-index: 10; }
.header-top a { float: right; display: block; text-indent: -9999px; width: 20px; height: 20px; margin: 8px 16px 0 0; }
.header-top a.email { background: url(img/ico-email.png) center 1px no-repeat; }
.header-top a.tg { background: url(img/ico-soc-tg.png) center no-repeat; }
.header-top a.fb { background: url(img/ico-soc-fb.png) center no-repeat; }
.header-top a.tt { background: url(img/ico-soc-tt.png) center no-repeat; }
.header-top a.ig { background: url(img/ico-soc-ig.png) center no-repeat; }
header { overflow: auto; padding: 30px 36px 30px 40px; margin-top: 34px; text-align: center; }
header:not(.home header) { padding-bottom: 26px; background: #350d16 url(img/bg-header.jpg) no-repeat; }
header.hero { text-shadow: 0 0 12px rgba(0, 0, 0, 0.6); color: #fff; height: 810px; background: #350d16 url(img/hero-01.jpg) top center no-repeat; }
header.hero h1 { font-size: 84px; margin: 256px auto 22px; }
header.hero p { font-size: 22px; }
a.logo { display: block; text-indent: -9999px; width: 402px; height: 114px; background: url(img/SchutzschildTraegerin-logo.png) no-repeat; background-size: contain; }
.nav { float: right; margin-top: 24px; }
.nav a { display: block; float: left; font-weight: 400; text-shadow: 0 0 12px rgba(0, 0, 0, 0.8); color: #fff; margin-left: 32px; }
.nav a:first-of-type { margin-left: 0; }
.nav a:hover, .nav a:active { color: #f2a71b; }
.nav a.menu { display: none; text-indent: -9999px; width: 20px; background: url(img/ico-menu.gif) center 6px no-repeat; }

/* Content */
.intro-title { text-align: center; color: #f2a71b; padding: 2%; background: linear-gradient(to bottom right, #4c1420, #632934 60%); }
.intro-title p { display: inline-block; font-size: 22px; line-height: 1.5em; max-width: 1020px; }
.home .intro-title { padding: 2.6% 4% 1.4%; }
.half.text, .half-r.text { width: 41%; padding: 4% 4.5% 1%; }
.wide.text { width: 91%; padding: 4% 4.5% 3%; }
.img-box { text-align: center; background: #f9f9f9; border-radius: 30px; }
.img-box img { max-width: 100%; margin: 9%; }
.half.yellow, .half.red { width: 49.7%; height: 440px; }
.half.yellow { margin-right: 0.3%; background: #f8d38d; }
.half.yellow .wrap { max-width: 760px; float: right; }
.wrap .text { width: 82%; padding: 8% 9% 1%; }
.half.red { color: #fff; margin-left: 0.3%; background: #632934; }
.half.red .wrap { max-width: 760px; }
.half.red h2 { color: #f2a71b; }
.half.red a { color: #fff; }
.half.red a:hover, .half.red a:active { color: #f2a71b; }
.half.red .soc-wrap { float: left; font-size: 9px; text-align: center; text-transform: uppercase; line-height: 1.3em; width: 54px; height: 82px; margin-right: 10px; margin-bottom: 10px; }
.half.red .soc-wrap:last-of-type { margin-right: 0; }
.half.red a.soc { display: block; text-indent: -9999px; width: 48px; height: 48px; margin: 0 auto 7px; border-radius: 10px; }
.half.red a.soc.tg { background: #f8d38d url(img/ico-soc-tg-l.png) center no-repeat; }
.half.red a.soc.tg:hover, .half.red a.soc.tg:active { background: #f2a71b url(img/ico-soc-tg-l.png) center no-repeat; }
.half.red a.soc.fb { background: #f8d38d url(img/ico-soc-fb-l.png) center no-repeat; }
.half.red a.soc.fb:hover, .half.red a.soc.fb:active { background: #f2a71b url(img/ico-soc-fb-l.png) center no-repeat; }
.half.red a.soc.tt { background: #f8d38d url(img/ico-soc-tt-l.png) center no-repeat; }
.half.red a.soc.tt:hover, .half.red a.soc.tt:active { background: #f2a71b url(img/ico-soc-tt-l.png) center no-repeat; }
.half.red a.soc.ig { background: #f8d38d url(img/ico-soc-ig-l.png) center no-repeat; }
.half.red a.soc.ig:hover, .half.red a.soc.ig:active { background: #f2a71b url(img/ico-soc-ig-l.png) center no-repeat; }
.text h3.up { margin-top: -50px; }
.text h3.no-top { margin-top: 0; }
.links { padding-bottom: 3%; }
.links p { line-height: 1.2em !important; word-break: break-all; margin-bottom: 0.6em !important; }
.links p a { font-weight: 500; }
.links p a:hover, .links p a:active { color: #000; }
.links h3, .seminare h3 { padding-bottom: 3px; margin-bottom: 16px; border-bottom: 2px dashed #ccc; }
.seminare h3:first-of-type { margin-top: 0; }
.expandable { display: block; font-size: 16px; font-weight: 700 !important; text-align: left; color: #632934; width: 100%; padding: 12px 10px 10px 12px; cursor: pointer;background:  linear-gradient(to right, #ffeece, #fdf4e2); border: 0; border-radius: 4px; }
.expandable:hover, .expandable:active { background: #f8dfb0; }
.expandable:after { float: right; content: '+'; font-size: 20px; font-weight: 700; text-align: center; text-transform: uppercase; line-height: 1.1em; color: #632934; width: 16px; height: 24px; padding: 0 4px; margin-top: -1px; background: #fff; border-radius: 2px; }
.expandable.active:after { content: "–"; }
.content { overflow: hidden; max-height: 0; padding: 0 24px; margin-bottom: 50px; transition: max-height 0.2s ease-out; background: #fff7e7; border-radius: 4px; }
.content p { font-size: 16px; line-height: 1.4em; margin-bottom: 1em; }
.content p:first-of-type, .content h4 { margin-top: 24px; }
.content p:last-of-type { margin-bottom: 2.5em; }
.content li { font-size: 16px; line-height: 1.4em; margin: 0 0 1em 2em; }
.half.danke { font-size: 22px; text-transform: uppercase; text-align: center; letter-spacing: 2px; line-height: 1.6em; height: 220px; padding-top: 200px; background: url(img/ST-logo-symbol.png) 55% 60px no-repeat; }
.half.danke.centered { float: none; height: 220px; padding-top: 170px; margin: 0 auto; background-position-y: 30px; }
footer { padding: 12px 16px; background: linear-gradient(to right, #2c040b, #632934); }
footer p { font-size: 14px; color: #f2a71b; margin-bottom: 0; }
footer p a { font-weight: 500; color: #f2a71b; }
footer p a:hover, footer p a:active { color: #fff; }
footer p a.top { padding-right: 20px; background: url(img/ico-top.png) right no-repeat; }
footer p span { padding: 0 6px; }

/* Common */
.half, .half-r { position: relative; width: 50%; }
.half { float: left; }
.half-r { float: right; }
a { font-weight: 700; text-decoration: none; color: #94001e; }
a:hover, a:active { color: #000; transition: .2s; }
a.btn { clear: both; display: inline-block; font-size: 18px; font-weight: 700; text-transform: uppercase; color: #fff; padding: 6px 24px 7px; margin: 0 auto; background: #1bb9bb; border-radius: 8px; }
a.btn:hover, a.btn:active { background: #137c7d; }
.a-left { text-align: left; }
.a-right { text-align: right; }
.a-center { text-align: center; }
.f-left { float: left; }
.f-right { float: right; }
.clear { clear: both; }
.no-margin { margin-bottom: 6px; }
strong { font-weight: 700; }
table { width: 100%; padding-bottom: 2px; margin-bottom: 50px; border-bottom: 2px dashed #ccc; }
table:first-of-type { margin-top: 40px; }
table tr:nth-child(odd) { background: #f9f9f9; }
table tr td:nth-child(2) { font-size: 14px; text-align: right; width: 30%; }
table tr td:nth-child(2) strong { font-size: 20px; }
table td { line-height: 1.4em; padding: 8px 16px; }

h1 { font-size: 72px; font-family: 'Allison', serif; letter-spacing: 1px; }
h2 { font-size: 36px; line-height: 1.1em; margin-bottom: 18px; }
h3 { font-size: 30px; font-weight: 500; line-height: 1.1em; margin-bottom: 18px; margin-top: 40px; }
h4 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
p { margin-bottom: 1.6em; }
li { margin: 0 0 1em 1em; }

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 1921px) {
    
}

@media (max-width: 1440px) {
    header { padding: 30px 22px 30px 18px; }
    a.logo { width: 360px; height: 102px; }
    .nav { margin-top: 22px; }
    .nav a { margin-left: 26px; }
    .intro-title { padding: 3% 2% 2%; }
    header.hero { height: 660px; background-position-x: right; }
    header.hero h1 { margin-top: 190px; }
}

@media (max-width: 1280px) {
    .home .intro-title { padding-bottom: 1%; }
    .home .intro-title p { font-size: 20px; }
    .half.text, .half-r.text { width: 45%; padding: 2% 2.5% 1%; }
    .wide.text { width: 95%; padding: 4% 2.5% 1%; }
    .img-box img { margin: 4%; }
    .text h3.up { margin-top: 0; }
    .half.danke { height: 240px; padding-top: 180px; background: url(img/ST-logo-symbol.png) 55% 40px no-repeat; }
    h1 { font-size: 64px; }
    h2 { font-size: 32px; }
     
}

@media (max-width: 1200px) {
    .nav.responsive { position: absolute; right: 22px; width: 280px; padding-top: 32px; border-bottom: 8px solid #632834; z-index: 9; }
    .nav.responsive .menu { position: absolute; right: 0; top: 0; }
    .nav.responsive a { float: none; display: block; text-shadow: none; text-align: left; padding: 10px 16px; margin-left: 0; background-color: #632834; border-bottom: 1px solid #4c1d26; }
    .nav.responsive a:last-of-type { padding: 0; background-color: unset; }
    .nav.responsive a:hover, .nav.responsive a:active { background-color: #4d1a24; }
    .nav a.menu { display: block; float: right; }
    .nav a { display: none; }
    .img-box { background: none; }
    .img-box img { margin: 4% 0; }
}

@media (max-width: 1024px) {
    header.hero { height: 540px; background: #1e0207 url(img/hero-01-m.jpg) top center no-repeat; }
    header.hero h1 { font-size: 76px; margin-top: 170px; }
}

@media (max-width: 960px) {
    .intro-title { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
    .home .intro-title { text-align: left; }
    .half, .half-r.img-box, .half.text, .half-r.text { float: none; width: 94%; padding: 1% 3%; }
    .half.yellow, .half.red { overflow: auto; width: 89%; height: unset; padding: 4% 5%; }
    .half.yellow { margin: 0 1% 1% 0; border-bottom-right-radius: 10px; border-top-right-radius: 10px; }
    .half.yellow .wrap { float: none; max-width: unset; }
    .half.red { margin-left: 1%; border-bottom-left-radius: 10px; border-top-left-radius: 10px; }
    .wrap .text { width: 100%; padding: 0; }
    .wide.text { width: 94%; padding: 4% 3% 1%; }
    .img-box img { margin: 0; }
    footer { text-align: center; padding: 14px 16px 12px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
    footer p { line-height: 1.4em; }
	footer p.f-right { float: none; margin-bottom: 12px; }
}

@media (max-width: 640px) {
    table { font-size: 16px; }
    .intro-title { padding: 4% 2%; }
}

@media (max-width: 480px) {
    a.logo { width: 290px; height: 82px; }
    header { padding: 20px 18px; }
    header.hero { height: 360px; background: #1e0207 url(img/hero-01-s.jpg) top right no-repeat; }
    header.hero h1 { font-size: 62px; margin: 90px auto 14px; }
    header.hero p { font-size: 20px; padding-left: 2%; padding-right: 2%; }
    .nav { margin-top: 12px; }
    .nav.responsive { right: 16px; width: 91%; }
    .nav.responsive a.menu { right: 2px; }
    .home .intro-title { padding: 5% 5% 0; }
    .home .intro-title p { font-size: 18px; }
    .intro-title h1 { font-size: 56px; padding-bottom: 8px; }
    .container { margin: 6% auto 2%; }
    .half, .half-r.img-box, .half.text, .half-r.text { width: 92%; padding: 3% 4%; }
    .half.yellow, .half.red { width: 87%; padding: 6%; }
    .content { padding: 0 12px; }
    .wide.text { width: 92%; padding: 4% 4% 1%; }
    .half.danke { height: 220px; background-position-x: 20px; background-size: contain; }    
    h2 { font-size: 30px; font-weight: 500; }
    h3 { font-size: 26px; word-break: break-word; }
    h4 { font-size: 20px; }
    .text p, .text li { font-size: 16px; line-height: 1.6em; }
    table td { padding: 8px; }
    table tr td:nth-child(2) { width: 33.3%; }
}

@media (max-width: 360px) {
    header { padding: 10px 18px; }
    header.hero h1 { margin-top: 80px; }
    a.logo { margin-top: 22px; }
    .nav { margin-top: 0; }
    h2 { font-size: 28px; }
}

@media (max-width: 340px) {
    
}