/* FONT */
@font-face {font-family:'BundesSans'; src:url(../Font/BundesSansWeb-Regular.woff) format('woff'), url(../Font/BundesSansWeb-Regular.ttf) format('truetype'); font-weight:normal; font-style:normal;}
@font-face {font-family:'BundesSans'; src:url(../Font/BundesSansWeb-Bold.woff) format('woff'), url(../Font/BundesSansWeb-Bold.ttf) format('truetype'); font-weight:bold; font-style:normal;}
@font-face {font-family:'BundesSerif'; src:url(../Font/BundesSerifWeb-Regular.woff) format('woff'), url(../Font/BundesSerifWeb-Regular.ttf) format('truetype'); font-weight:normal; font-style:normal;}
@font-face {font-family:'Icons'; src:url(../Font/Icons.woff) format('woff'), url(../Font/Icons.ttf) format('truetype'); font-weight:normal; font-style:normal;}


/* GLOBAL SETUP */
*{margin:0; padding:0; border:0; outline:none; -webkit-user-drag: none; user-drag: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -moz-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-tap-highlight-color: rgba(0,0,0,0);}

html, input, textarea, button, select {font-family:'BundesSans', sans-serif;}
body {background:#fff; color:#000; font-size: 16px; font-weight: 200; width: 100%; display: block;}
a{text-decoration:none; opacity:1; color:inherit; transition:all 0.15s; -moz-transition:all 0.15s; -webkit-transition:all 0.15s;}
a img {border:none; display: block; height: auto;}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a, h3 span{color:inherit; font-size:inherit;}
h1 > a:focus, h2 > a:focus, h3 > a:focus, h4 > a:focus, h5 > a:focus, h6 > a:focus {outline:1px solid #0778a5;}
.sidebar a:focus, .sidebar a:focus abbr {outline:1px solid #075F82;}
p {color:inherit; line-height: 22px; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;}
.tablet p{line-height: 24px;}
br{display: inline !important;}
input, textarea{font-weight: 200; border-radius: 0;}
button{transition:all 0.15s; -moz-transition:all 0.15s; -webkit-transition:all 0.15s;}
abbr{border-bottom:1px dashed #888; cursor: help; text-decoration: none;}
a abbr{cursor: pointer;}
a abbr{cursor: pointer; border-bottom: 0;}
.transit{transition:top 0.3s; -moz-transition:top 0.3s; -webkit-transition:top 0.3s;}
.noTransit{transition:all 0s !important; -moz-transition:all 0s !important; -webkit-transition:all 0s !important;}
.noTransitChilds, .noTransitChilds *{transition:all 0s !important; -moz-transition:all 0s !important; -webkit-transition:all 0s !important;}
object{pointer-events:none; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.clear {clear:both;}

*::-webkit-input-placeholder{opacity: 1; color: #888; -webkit-transition:color 0.6s;}
*::-moz-placeholder{opacity: 1; color: #888; -moz-transition:color 0.6s;}
*:-ms-input-placeholder{opacity: 1; color: #888; transition:color 0.6s;}
*:focus::-webkit-input-placeholder{opacity: 1; color: transparent;}
*:focus::-moz-placeholder{opacity: 1; color: transparent;}
*:focus:-ms-input-placeholder{opacity: 1; color: transparent;}


*::selection{background-color:rgba(0,0,0,1); color: #fff;}
h2::selection{background-color:#000; color:#fff;}
h3::selection{background-color:#000; color:#fff;}
h4::selection{background-color:#000; color:#fff;}
h5::selection{background-color:#000; color:#fff;}
p::selection{background-color:#000; color:#fff;}
input::selection{background-color:#000; color: #fff;}
textarea::selection{background-color:#000; color: #fff;}
*::-moz-selection{background-color:rgba(0,0,0,1); color: #fff;}
h2::-moz-selection{background-color:#000; color:#fff;}
h3::-moz-selection{background-color:#000; color:#fff;}
h4::-moz-selection{background-color:#000; color:#fff;}
h5::-moz-selection{background-color:#000; color:#fff;}
p::-moz-selection{background-color:#000; color:#fff;}
input::-moz-selection{background-color:#000; color: #fff;}
textarea::-moz-selection{background-color:#000; color: #fff;}


/* ANIMATIONS */
@keyframes toolIn{0%{margin-top: 0; opacity:0;} 30%{margin-top: 0; opacity:0;} 100%{margin-top: -10px; opacity:1;}}
@-webkit-keyframes toolIn{0%{margin-top: 0; opacity:0;} 30%{margin-top: 0; opacity:0;} 100%{margin-top: -10px; opacity:1;}}

@keyframes idleRotate{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
@-webkit-keyframes idleRotate{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}}



/* LAYOUT */ 
/* page: basic page layout; detail: viewer page layout; desktop, tablet, phone: layout variations for different devices, desktop is default without definition */

body.page{min-width: 1024px;}
body.page > *:not(script) {display:block; max-width:100%;}
body.page .textwrap > *, body.page > .content > div, body.page > .list > div, body.page .foot > ul, body.page > .head > div, body.page > form > .filter, body.page > form > .sortwrapper, body.page > .teaser > *{display:block; max-width:1500px; padding-left:50px; padding-right:50px; margin:0 auto;}
body.page script {display: none;}

body.page.tablet{min-width: 600px; font-size: 18px;}
body.page.tablet > *:not(p) > *:not(img){padding-left:40px; padding-right:40px;}
body.page.phone{min-width: 0; font-size: 18px;}
body.page.phone > *:not(p) > *:not(img){padding-left:20px; padding-right: 20px;}
body.page404{background: #e6e8e9;}
body.library, body.story{background: #e6e8e9; height:100%; position: fixed; min-width: 600px; overflow: hidden;}
body.library.phone, body.story.phone{height:auto; position:static; min-width: 0; overflow: visible;}
body.library.phone.det, body.story.phone.det{height: 100%; position: fixed; overflow: hidden;}

/* HEAD */
h1{font-weight:normal; font-size:52px; height:74px; text-align: right; padding:15px 0 30px;}
h1 a {display: inline; width:290px; height: 74px;}
h1 a:first-child {height:inherit; width:auto; float:left;}
.story.desktop h1 a:first-child {display: none;}
h1 a:focus{outline: 1px solid #67aeca;}
.page h1 a span{display: none;}
.page h2, .type0 h2{font-size:32px; line-height: 36px; padding:5px 0; color: #c40046; font-family:'BundesSerif', sans-serif; font-weight: normal; border-bottom:#cbcccd 1px solid; letter-spacing: 1px; margin-bottom: 10px; transition:border 0.6s; -webkit-transition:border 0.6s; -moz-transition:border 0.6s;}
.page .subteaser h2, .type0 .subteaser h2{color:#fff;}
.library .page h2, .library .type0 h2, .teaser h2 {color: #e73770;}
.phone.page h2{font-size: 28px; line-height: 32px;}
.page h3, .type0 h3{font-size: 28px; font-weight: bold; line-height: 34px; margin-bottom: 6px; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;}
.page.phone h3{font-size: 22px; line-height:26px;}
.page h4, .type0 h4{font-size: 18px; font-weight: bold;}
.page h5{font-size: 18px; font-weight: bold; line-height: 22px; margin-bottom: 10px;}
.page h3 a:hover, .page h5 a:hover{color:#075f82;}

.library .head .head-link:before { content: 'f'; }
.library .head .head-link { position: absolute; right: 20px; bottom: -43px; top: auto; left: auto; font-weight: normal; }


/* ROOT ELEMENTS */
.page > p, .page > h2, .page > h3, .page > h4, .page > h5{padding: 0 35% 0 50px; max-width:1600px; margin:0 auto; box-sizing: border-box; -moz-box-sizing: border-box;}
body.page > .textwrap > p, body.page > .textwrap > h2, body.page > .textwrap > h3, body.page > .textwrap > h4, body.page > .textwrap > h5 {padding: 0 35% 0 50px; max-width:1600px; margin:0 auto; box-sizing: border-box; -moz-box-sizing: border-box;}
body.page .textwrap > .accordion {padding-right: 35%; max-width: 1600px; box-sizing: border-box;}
.phone .textwrap iframe, .tablet .textwrap iframe {padding-right: 0 !important;}
.page > a, .textwrap > a{color:#0778a5; display: block; font-size: 16px; font-weight: bold; line-height: 40px; display: inline-block; padding:5px 50px; width: auto;}
.textwrap li {margin-bottom: 5px; line-height: 22px;}
.textwrap ul {margin-bottom: 25px;}

hr.hrtop {border-top:1px solid #cbcccd;}

.page > a strong {max-width: 1500px; display: block; margin:0 auto;}
.page > a:hover strong{color:#075f82;}
.page > a:focus strong{color:#075f82; outline:1px solid #67aeca;}
.page > a:focus {border:1px solid #0778A5;}

.page > p a, body.page .textwrap > p a, .accordion a{color:#0778a5; padding:0; font-weight: bold; display: inline;}
.page > p a:hover, body.page .textwrap > p a:hover, .page > p a:focus, body.page .textwrap p a:focus, .accordion a:hover, .accordion a:focus {outline:1px solid #67aeca;}
.page > h3, body.page .textwrap > h3{margin-bottom: 10px; margin-top: 50px;}
.page > h5, body.page .textwrap > h5{margin-bottom: 10px}
.page > h3 + h5, .textwrap > h3 + h5{margin-top: 25px}
.page > p, body.page .textwrap p{margin-bottom: 25px;}
.page .textwrap ol {margin-left: 20px; margin-bottom: 25px;}

@media screen and (min-width: 1340px) {
	.page > p,
	body.page .textwrap p,
	.topic-intro p,
	.topic-intro li,
	.accordion {font-size: 18px; line-height: 24px;}
}

@media screen and (max-width: 1000px) {
	.page.tablet > a, .page.tablet > p, .page.tablet > h2, .page.tablet > h3, .page.tablet > h4, .page.tablet > h5, .page.tablet .textwrap > a, .page.tablet .textwrap p, .page.tablet .textwrap > h2, .page.tablet .textwrap > h3, .page.tablet .textwrap > h4, .page.tablet .textwrap > h5, .page.tablet .textwrap > .accordion {padding:0 40px;}
	.page.phone > a, .page.phone > p, .page.phone > h2, .page.phone > h3, .page.phone > h4, .page.phone > h5, .page.phone .textwrap > .accordion {padding:0 20px;}
}


/* HEADLINES */
body.noTransitChilds .head {position: absolute; top:0;}
body.page.noTransitChilds .head {position: static;}
.head {position: relative; z-index: 12; background-color: #fff;}
.head ul{font-size: 13px; color: #737373; text-align: right; list-style: none;}
.tablet .head ul{font-size: 14px}
.tablet .head a img{width: 80%; max-width: 275px;}
.phone .head ul{display: none}
.head ul li{display: inline-block; padding-left: 25px; line-height: 30px;}
.head ul li a:focus {color: #000; /*outline: 1px dotted #cbcccd;*/ outline: 1px solid #67aeca;}
.head ul li a:hover{color: #000;}
.page404 .head{background-color: #fff;}


.library.desktop .head, .library.tablet .head, .library .head, .story.desktop .head, .story.tablet .head, .story .head{background: #fff; min-height: 47px; text-align: right; font-size:0; padding:0 15px; width: 100%; z-index: 3; box-sizing:border-box; -moz-box-sizing: border-box;}
.story .head h3 object {vertical-align: middle; padding-bottom: 2px; padding-right: 5px;}
.library.phone .head, .story.phone .head{background: #fff; padding:0 20px 0 20px; position: absolute; top:0; width: 100%; min-height:100px;}
.library.phone.det .head, .story.phone.det .head{display: none;}
.library .head > a, .story .head > a{color:#0778a5; display: block; font-size: 16px; font-weight: bold; line-height: 20px; padding: 13px 0; position: absolute; top:0; left: 14px;}
.library .head > a:hover, .story .head > a:hover, .textwrap > a:hover {color: #075f82;}
.library .head > a:focus, .story .head > a:focus, .textwrap > a:focus{color: #075f82; outline:1px solid #67aeca;}
.library .head > a:before, .story .head > a:before, .textwrap > a:before, .page > a strong:before, a.backlink:before {content: 'd'; font-family:'Icons'; font-size: 14px; font-weight: normal; margin-right: 8px;}
body a.backlink {margin:0 auto; max-width: 1500px;}
.textwrap > a {border-top: 1px solid #cbcccd;}
.library.phone .head > a, .story.phone .head > a{position: absolute; top:65px; padding:5px 0 10px 0;}
.library.desktop .head h1, .library.desktop .head h2, .library.tablet .head h1, .library.tablet .head h2, .library:not(.phone) .head h1, .library:not(.phone) .head h2, .story.desktop .head h1, .story.desktop .head h2, .story.tablet .head h1, .story.tablet .head h2, .story:not(.phone) .head h1, .story:not(.phone) .head h2 {vertical-align:top; background: none; height:auto; font-weight: normal; color: #737373; font-size: 14px; display: inline-block; font-family: inherit; line-height: 19px; padding:13px 0;}
@media screen and (max-width: 800px) {
	.library:not(.phone) .head h2, .story:not(.phone) .head h2 {max-width:45%;}
}
@media screen and (max-width: 800px) { 
	.library.tablet .head h2, .story.tablet .head h2 {max-width:43%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
}
@media screen and (orientation: landscape) {
	.library.phone h1 a:first-child {width: 30%;}
}
.library .head h1 img, .library .head h1 span, .story .head h1 img, .story .head h1 span{display: none;}
.phone.library .head h1 img, .phone.story .head h1 img {display: inline-block; margin:0 auto;}
.library .head h2:before, .story .head h2:before{content:'/';}
.library.phone .head h2, .story.phone .head h2{display: none;}
.library.tablet .head a:before, .library.tablet .head h1, .library.tablet .head h2,
.story.tablet .head a:before, .story.tablet .head h1, .story.tablet .head h2{font-size: 16px;}
.library .head h3, .story .head h3 {font-size: 16px; color: #075f82; text-align: center; line-height: 20px; padding-top: 13px; position: relative; cursor: pointer; margin:-83px auto 0; width:50%;}
.story .head h3{/* padding-top:24px; margin-top: -60px; */ width: 34%; /* margin-top:-48px; */ margin-top:-35px; padding:0;}
.story .head h3:focus {outline:1px solid #0778a5;}
.staticImage.story .head h3 {/*margin-top: -46px;*/ vertical-align: middle;}
/*.staticImage.tablet.story .head h3 {margin-top: -60px;}*/
.tablet.story .head h3 {padding-bottom: 10px;}
.story.staticImage .head h3 span {background:url(../Icon/icon_story.png) 0 0 no-repeat; width:35px; height:15px; display: inline-block; vertical-align: middle; padding-right: 20px; margin-top: -3px;}
.library.phone .head h3, .story.phone .head h3{display: none;}
.library:not(.phone) .foot, .story:not(.phone) .foot{display: none;}
@media screen and (min-width: 1340px) {
	body.library:not(.phone) .head a, body.story:not(.phone) .head a, body.library:not(.phone) .head h2, body.story:not(.phone) .head h2{font-size: 18px;}
	.library .head a:before, .library .head h1, .library .head h2, .story .head a:before, .story .head h1, .story .head h2{font-size: 18px;}
	.library .head h3, .story .head h3 {font-size: 18px;}
}


.head h1 a img{height: 68px; width: 107px;}
.phone .head h1 a, .phone .head h1 a:first-child img {width:inherit; height: auto;}
.phone .head h1 a{float:right; text-align: right;}
.phone .head h1 a:first-child{float:none; text-align: left;}
.phone h1{text-align: left; height: auto; background-position:0 10px; background-size: 200px; line-height:44px; font-size: 40px;}
.tablet:not(.library):not(.story) h1 a {width: 50%; font-size: 39px;}
body.phone h1 a, body.phone h1 a:first-child {width: 49%; font-size: 20px; line-height: 20px;}
body.phone h1 a img {display: inline;}

@media screen and (min-width: 400px){
.phone .head h1 a:nth-child(2){text-align:right;} 
}
@media screen and (max-width: 320px) {
body.phone .head h1 a, body.phone .head h1 a:first-child {font-size: 16px; line-height: 26px;}
}
@media screen and (min-width: 480px) {
.phone h1 {padding:20px 0; min-height: 60px;}
.phone h1 a {width: 49%; display: inline-block; vertical-align: top;}
.phone h1 a:first-child {margin-bottom: 0; margin-right: 1%;}
.phone h1 a img {width: 100%; height: auto;}
}
@media screen and (min-width: 550px) and (orientation:portrait) {
.phone h1 {padding: 20px 0 55px;}
}
@media screen and (orientation:landscape) {
	.phone .head h1 a:first-child img {width:100%;}
	body.phone h1 a, body.phone h1 a:first-child {font-size: 28px;}
}

/* TEASER */
.teaser{position: relative; overflow:hidden; background: #000 no-repeat 0 0; background-size: cover; max-height: 1000px; padding-bottom: 40px; box-sizing: border-box; -moz-box-sizing: border-box;}
.teaser:before{content:''; position: absolute; left:0; top: 0; background:#000; opacity: 0.75; width: 100%; height: 100%; transition:opacity 1.1s; -webkit-transition:opacity 1.1s;}
.teaser.off:before{opacity: 1;}
.phone .teaser{display: none;}

.teaser > div{position: relative; height:0; opacity:0; overflow: hidden; transform:perspective(1000px) translateZ(30px); -webkit-transform:perspective(1000px) translateZ(30px); transition:height 0s 1.1s, opacity 1.1s 0s ease-in-out, transform 1.1s 0s ease-in-out; -webkit-transition:height 0s 1.1s, opacity 1.1s 0s ease-in-out, -webkit-transform 1.1s 0s ease-in-out;}
.teaser > div.on{height:100%; opacity:1; transform:perspective(1000px) translateZ(0); -webkit-transform:perspective(1000px) translateZ(0); transition:height 0s 1.1s, opacity 0.6s 1.1s ease-in-out, transform 0.6s 1.1s ease-in-out; -webkit-transition:height 0s 1.1s, opacity 0.6s 1.1s ease-in-out, -webkit-transform 0.6s 1.1s ease-in-out;}
.teaser > div.off{transform:perspective(1000px) translateZ(-30px); -webkit-transform:perspective(1000px) translateZ(-30px);}
.teaser.dis > div{visibility: hidden; display: block;}
.teaser > div > div{color: #fff;}
.teaser > div > div > a:first-child{float:left; height:370px; overflow: hidden; margin-right: 10px; background-position: center center; background-size: cover;}
.teaser h2{border-color:rgba(255,255,255,0.3); width: 100%; margin: 30px 0 15px;}
.teaser h3{font-size: 40px; line-height: 42px;}
.teaser h3 a {line-height: 42px;}
.teaser a{font-weight: bold; line-height:30px; display: block;}
.teaser > div > div > a:not(:first-child):before{content: 'c'; font-size: 14px; margin-right: 8px; font-weight: normal; font-family:'Icons'; display: inline-block;}
.desktop .teaser > div > div a:hover{color:#ccc;}
.teaser h2 + div > a:focus {outline: 1px solid #cbcccd; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flexbox; display: -webkit-flex; display: flex;}
.teaser > div > img{display: none;}
.teaser div ul {clear:both; list-style: none; font-size: 0; padding-top: 30px;}
.teaser div ul li{display: inline-block; vertical-align: top; margin-bottom: 150px;}
.teaser div ul li:first-child{margin-left: 0;}
.teaser.dis ul li{display: block !important;}
.teaser div ul li img{margin-bottom: 16px; width: 100%; height: auto;}

.teaser .teasernav a:before{content: '';}
.teaser .teasernav{margin-top: 50px !important; margin-bottom: -70px !important; height: 26px; text-align: right; position: relative; z-index: 1; transform:initial; opacity: 1;}
.teaser .teasernav ul {margin:0; padding:5px 0 0 0; height: inherit; display: inline-block; vertical-align: top;}
.teaser .teasernav button {display: inline-block; vertical-align: top; margin-left: 20px; font-size: 0; background-color: transparent; cursor: pointer; width: 25px;}
.teaser .teasernav button:after {content: 'N'; display: inline-block; color: #fff; font-size: 18px; font-family:'Icons';}
.teaser .teasernav button.play:after {content: 'c'; display: inline-block; color: #fff;}
.teaser .teasernav button:focus {outline:1px solid #cbcccd;}
body > .teaser > .teasernav > ul li{width: 8px; height: 8px; cursor: pointer; display: inline-block !important; border:#e6e8e9 2px solid; border-radius:8px; margin-left: 10px; transition:all 0.6s 0.6s; -webkit-transition:all 0.6s 0.6s;}
.teaser .teasernav > ul li.on{background: #e6e8e9; border-width: 4px; margin-top:-2px;}
.teaser .teasernav > ul li:hover, .teaser .teasernav > ul li.on:hover{border-color: #fff; background: #fff; transition:all 0.2s; -webkit-transition:all 0.2s;}
.teaser .teasernav > ul li:focus, .teaser .teasernav > ul li.on:focus{color:#d0336b;}
.teaser .teasernav > ul li:after{content: ''; background: transparent; width: 20px; height: 20px; margin-left: -7px; margin-top: -7px; display: block;}
.teaser .teasernav > ul li span{display: none;}

@media screen and (max-width: 1000px) {
.tablet .teaser{min-height: 610px;}
.tablet .teaser > div > div{height:480px; margin-bottom: -260px;}
.tablet .teaser > div > div > a:first-child {width:48.9%; margin-left: 0;}
.tablet .teaser div ul li{margin-left: 10px;}
.tablet .teaser div ul li:after {margin-left: -10px;}
.tablet .teaser div ul li:first-child{margin-left:0;}
.tablet .teaser div ul li:nth-child(n+3){display: none}
}
@media screen and (max-width: 1179px) {
.teaser > div > div > a:first-child{width:38.95%; margin-left: 0}
.teaser div ul li{width: 18.6%; margin-left: 1.75%; display: inline-block;}
.teaser div ul li:nth-child(n+6){display: none}
}
@media screen and (min-width: 1180px) and (max-width: 1339px) {
.teaser > div > div > a:first-child{margin-right: 1.45%; width:49.25%;}
.teaser div ul li{width: 15.45%; margin-left: 1.45%; display: inline-block;}
.teaser div ul li:nth-child(n+7){display: none}
}
@media screen and (min-width: 1340px){
.teaser > div > div p{font-size: 18px; line-height: 24px; padding-bottom: 5px;}
.teaser > div > div > a{font-size: 18px;}
}
@media screen and (min-width: 1340px) and (max-width: 1499px) {
.teaser > div > div > a:first-child{margin-right: 1.25%; width:42.1%;}
.teaser div ul li{width: 13.2%; margin-left: 1.25%; display: inline-block;}
.teaser div ul li:nth-child(n+8){display: none}
}
@media screen and (min-width: 1500px) {
.teaser > div > div *:not(a){width: 87.34%;}
.teaser > div > div > a:first-child{margin-right: 1.14%; width:36.78%;}
.teaser div ul li{width: 11.5%; margin-left: 1.14%;}
}
@media screen and  (max-width: 795px){
	.tablet .teaser > div > div {margin-bottom: 0;}
}


/* SUB TEASER */
.subTeaser{position: relative; overflow: hidden; color: #fff; margin-bottom: 20px;}
.subTeaser > div {background-size:cover; background-position: 0 center;}
.phone .subTeaser{max-height: none;}
.subTeaser > div > div {margin:0 auto; width:1600px; }
.subTeaser > div > div > div{ background: rgba(0,0,0,0.7); width: 500px; padding:40px 20px; z-index: 1; margin-left:50px; margin-right: 1050px;} 

.tablet .subTeaser > div > div{width: 550px}
.subTeaser > img{width: 100%; min-width:1600px; height: auto; padding:0; max-width:none; position: absolute; top:0; left:0;}
.subTeaser h2{border-color:rgba(255,255,255,0.3);}
.subTeaser h3{font-size: 40px; line-height: 42px;}
.subTeaser + p {margin-top: 50px;}
@media screen and (min-width: 1340px) { 
.subTeaser p{font-size: 18px; line-height: 24px;}
}
@media screen and (max-width: 1000px) { 
.tablet .subTeaser {min-height: 500px;}
.tablet .subTeaser > div > div{width: 400px;}
.page.phone > .subTeaser > div{padding:0;}
.phone .subTeaser > div > div{width: auto; position: relative; z-index: 1; margin-left:20px;margin-right:20px;}
.phone .subTeaser p{margin-bottom: 5px}
.tablet .subTeaser > img, .phone .subTeaser > img{width: auto; position: absolute; right: 0; top: 0; height:100%; min-width: 100%;}	
.subTeaser > div > div > div{width: auto; padding:40px 20px; margin-left:0px; margin-right: 0px;} 
.teaser > div > div > a:first-child {padding:40px 20px;}
}



/* SEARCH */
form > div:first-child {display: none;}
h4 span input {width:60px; margin: 0 10px; font-size: 16px; font-weight: normal; padding: 1px 10px;}
h4 span label {margin: 0 10px; font-size: 16px; font-weight: normal;} 

.search{background:#e6e8e9; padding-top:40px; position: relative; overflow: hidden; transition:all 0.6s, color 0.3s; -webkit-transition:all 0.6s, color 0.3s; -moz-transition:all 0.6s, color 0.3s;}
form.searchresult .search{transition:all 0.4s, color 0.3s; -webkit-transition:all 0.4s, color 0.3s; -moz-transition:all 0.4s, color 0.3s;}
.search > div {max-width: 1500px; padding-left: 50px; padding-right: 50px; margin:0 auto;}
.phone .search > div {padding-right: 0; padding-left:0; }
.search input:focus {outline:2px solid #cbcccd;}

.phone .search{padding:0;}
.search.off{min-height: 80px; padding:5px 0;}
.phone .search.off{min-height: 50px; padding-top: 0;}
.search h2, .phone .search h2{position: relative; z-index: 4; padding-bottom: 34px; line-height: 40px; margin-bottom: 0;}
.search.off h2{border-color:transparent;}
.search h2 span{position: absolute; right: 0; top: 12px; cursor: pointer; pointer-events:none;}
.search h2 span *{pointer-events:none;}
.fixedSearch h2 span {padding-right: 0;}
.fixedSearch h2 {padding-left: 0;}

.staticImage .search h2 span:after{content:'x'; font-size: 32px; color:#737373; line-height: 32px; font-family:'Icons';}
.staticImage .search.off h2 span:after{content:'w';}
.staticImage .search h2 span *{display: none;}
.phone .search h2{padding-bottom: 75px;}
.phone .search h2 span{top: 10px}

.search > div > p, .search .fixedSearch p{opacity:0; font-size: 16px; overflow:hidden; white-space:nowrap; color: #737373; max-width:1260px; padding:0 90px 0 170px; margin-top:-35px; min-height:32px; margin-left: auto; margin-right:auto; display: block; line-height: 32px; transition:all 0.6s; -webkit-transition:all 0.6s; -moz-transition:all 0.6s;}
.phone .search > div > p, .phone .search .fixedSearch p{display: none;}
.search.off > div > p, .search .fixedSearch p{opacity: 1;}
.search.off > div > p:before{content:'Ausgewählter Zeitraum: ';} 
.search .fixedSearch p:before{content:'Ausgewählter Zeitraum: ';}
 
.search > div > p span:before, .search .fixedSearch p span:before{content:'|'; margin:0 10px;}
.search > div > p span:first-child:before, .search .fixedSearch p span:first-child:before{content: none;}
.search > div > ul{width: 924px; margin:0 auto; list-style: none;}
.tablet .search > div > ul{width: 100%;}
/*.phone .search > div > ul{width:280px !important;}*/
.search > div > ul > li{padding:25px 0;}
.phone .search > div > ul > li{padding:20px 0;}
.search > div > ul > li + li{border-top:#cbcccd 1px solid;}

.search .types{font-size: 0; color:#075f82; list-style:none; margin-top: 0px; }
.search .types li{position:relative; cursor: pointer; margin-right:70px; margin-left:0px; margin-top:20px; display: inline-block; font-size: 24px; line-height: 24px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; box-sizing: border-box; -moz-box-sizing: border-box;}
.phone .search .types li {margin-top:10px;}
.search .types li:focus {margin-left:67px;}
.tablet .search .types li{font-size: 20px; margin-left: 40px; line-height: 25px;}
.phone .search .types li{font-size: 17px; margin-left: 0; line-height: 20px; vertical-align: top;}
.tablet .search .types li, .phone .search .types li {margin-left:0; margin-right: 20px;}
.tablet .search .types li:last-child, .phone .search .types li:last-child {margin-left: 0; margin-right: 0;}
.search .types li span{cursor: pointer;}
.phone .search .types li span{font-size: 17px; vertical-align: top;}
.search .types li.off{ color:#0778a5;}
.search .types li:after{content:''; opacity:0; width: 0%; position: absolute; display: block; left:0; top:50%; border-bottom:#0778a5 2px solid; transition:opacity 0.3s, width 0s 0.3s; -webkit-transition:opacity 0.3s, width 0s 0.3s; -moz-transition:opacity 0.3s, width 0s 0.3s;}
.phone .search .types li:after{border-width: 1px}
.search .types li.dis:after{opacity: 1; width: 100%; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.search .types li:before{font-size: inherit; padding-right: 10px; font-family:'Icons';}
.phone .search .types li:before{font-size: 17px; padding-right: 5px; vertical-align: top;}

.search .types li a:focus {/*outline:1px solid #cbcccd;*/ outline:1px solid #67aeca;}
.search .types li.doc:before{content: 'f';}
.search .types li.pic:before{content: 'g';}
.search .types li.aud:before{content: 'h';}
.search .types li.vid:before{content: 'i';}
.search .types li.col:before{content:'e';}
.search .types li.col span:after{content: ' Geschichten/Sammlungen';}
.phone .search .types li.col span:after{content: ' Sammlungen'; font-size: 17px;}

@media screen and (min-width: 480px){
.phone .search .types li span{font-size: 20px;}
.phone .search .types li:before{font-size: 20px;}
}

.search h2 + div{margin:-85px 70px 37px 170px; padding-top:10px; display: block; position: relative; z-index: 5}
.phone .search h2 + div{margin:-65px 0 25px 0; padding:0;}
.search h2 + div input{ border:1px solid #e6e8e9; background:#fff; font-size: 18px; letter-spacing:1px; font-weight: normal; padding:4px 20px; height:40px; line-height: 32px; display: block; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; transition:all 0.15s; -moz-transition:all 0.15s; -webkit-transition:all 0.15s;}
.search h2 + div > span{width:100%; height:40px; display: block; cursor: text; position: absolute;}

.search ol{width:100%; max-height:0; margin-top: 2px; box-shadow:0 4px 6px rgba(0, 0, 0, 0.25); overflow: hidden; list-style:none; background: #fff; position: absolute; z-index: 5; transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
.search ol.on{max-height: 340px;}
.search ol li{font-size: 18px; line-height: 32px; padding:0 20px; cursor: pointer; transition:all 0.15s; -moz-transition:all 0.15s; -webkit-transition:all 0.15s;}
.search ol li:first-child{padding-top:10px;}
.search ol li:last-child{padding-bottom:10px;}
.search ol li:hover, .search ol li.on{background:#cbe3ec;}
.search ol span{font-weight: bold;}
.search ol li.spellcheck:before{content:'Meinten Sie: ';}

.search button{position:relative; background: #0778a5; font-size: 28px; color: #fff; width: 38.8%; text-align:left; line-height: 32px; padding:14px 0 14px 25px; margin-left: auto; display: block; font-weight: bold; cursor: pointer; margin-top:-10px; border:5px solid #e6e8e9;}
.tablet .search button{width: 100%; text-align: center;}
.phone .search button{width: 100%; text-align: center; font-size: 22px; padding: 14px 0; border:none;}
.search button:hover, .search button:focus{background:#075f82;}
.search button:focus {outline:1px solid #075f82;}
.search button:after{ font-size: 22px; position: absolute; right: 25px; top: 18px; content:'c'; font-family:'Icons';}
.phone .search button:after{position: static; padding-left: 10px; font-size: 18px}
.search .disabled, .search .disabled:hover, .search .disabled:focus {background:#888; cursor: default;}


.search .fixedSearch{z-index:10; top:-100px; position: fixed; padding:5px 0; visibility: hidden; left: 0; width: 100%; background:#e6e8e9; transition:color 0.3s; -webkit-transition:color 0.3s; -moz-transition:color 0.3s;}
.search .fixedSearch > div{min-width:924px; max-width: 1500px; padding:0 50px; margin:0 auto;}
.tablet .search .fixedSearch > div{padding-left:40px; padding-right: 40px; min-width: 0}
.phone .search .fixedSearch > div{padding-left:20px; padding-right: 20px; min-width: 0}
.search .fixedSearch.top{top:0; bottom:auto; visibility: visible;}
.search .fixedSearch.bottom{bottom:0; top:auto; visibility: visible;}
.search .fixedSearch h2{border-color:transparent;}
.phone .search .fixedSearch h2{padding:0; margin:0;}
.phone .search .fixedSearch h2 span{top: 5px}
.phone .search .fixedSearch h2 + div, .phone .search .fixedSearch p{display: none;}




/* TIMELINE */
.timeline {height:240px; font-weight: bold; margin-bottom: -25px; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.tablet .timeline {height:290px;}
.phone .timeline {height:200px; padding-top:20px;}
.timeline *::selection{background-color:rgba(255,255,255,0);}
.timeline *::-moz-selection{background-color:rgba(255,255,255,0);}
.timeline > div{height:inherit; left:0; overflow: visible; position: absolute; width: 100%; min-width: 1024px;}
.tablet .timeline > div{min-width: 320px;}
.phone .timeline > div{min-width: 320px;}
.timeline > div > div{position: relative; height:inherit; width:827px; margin: 0 auto;}

/*
.tablet .timeline > div > div{width:400px;}
.phone .timeline > div > div{width:268px;}
*/

.timeline > div > div > a{position: absolute; left:0; bottom:49px; z-index: 3; overflow:hidden; cursor:pointer; width:25px; height:50px; display: block; transform:scaleX(1) translateZ(0); -webkit-transform:scaleX(1) translateZ(0); -ms-transform:scaleX(1) translateZ(0); transition:left 0.6s; -webkit-transition:left 0.6s; -moz-transition:left 0.6s;}
.timeline > div > div > a:focus {outline:1px solid #075F82;}
.timeline > div > div > a > object {position:absolute; left:-10px;}
.tablet .timeline > div > div > a{bottom:59px; width:50px; height: 60px;}
.phone .timeline > div > div > a{bottom:49px; width:50px; height: 60px;}
.timeline > div > div > a:first-child{margin-left:-21px; transform:scaleX(-1) translateZ(0); -webkit-transform:scaleX(-1) translateZ(0); -ms-transform:scaleX(-1) translateZ(0);}
.tablet .timeline > div > div > a:first-child, .phone .timeline > div > div > a:first-child{margin-left:-35px;}
.timeline > div > div > a:nth-of-type(2){margin-left:-5px;}
.timeline > div > div > a.drag{transition:left 0s; -webkit-transition:left 0s; -moz-transition:left 0s;}
.staticImage .timeline > div > div > a.handleLeft{background: url(../Image/handleLeft.png) no-repeat -5px 0; transform:none;-webkit-transform:none; -ms-transform:none;}
.staticImage .timeline > div > div > a.handleRight{background: url(../Image/handleRight.png) no-repeat -10px 0;}
.tablet.staticImage .timeline > div > div > a.handleLeft, .phone.staticImage .timeline > div > div > a.handleLeft{background: url(../Image/handle_large.svg) no-repeat 0 0; transform:scaleX(-1) translateZ(0); -webkit-transform:scaleX(-1) translateZ(0); -ms-transform:scaleX(-1) translateZ(0);}
.tablet.staticImage .timeline > div > div > a.handleRight, .phone.staticImage .timeline > div > div > a.handleRight{background: url(../Image/handle_large.svg) no-repeat -10px 0;}
.staticImage .timeline > div > div > a *{display: none;}
.timeline > div > div > p{min-width:130px; opacity:0; visibility:hidden; font-size:18px; line-height: 67px; color:#075f82; text-align: center; position: absolute; bottom:0; left:0; height: 60px; width: 100px; transition:visibility 0s 0.6s, opacity 0.6s, left 0.6s, width 0.6s, background 0.3s; -webkit-transition:visibility 0s 0.6s, opacity 0.6s, left 0.6s, width 0.6s, background 0.3s; -moz-transition:visibility 0s 0.6s, opacity 0.6s, left 0.6s, width 0.6s, background 0.3s;}
.phone .timeline > div > div > p, .tablet .timeline > div > div > p{display: none;}
.timeline > div > div > p.on{opacity: 1; visibility:visible; transition:visibility 0s 0s, opacity 0.6s, left 0.6s, width 0.6s, background 0.3s; -webkit-transition:visibility 0s 0s, opacity 0.6s, left 0.6s, width 0.6s, background 0.3s; -moz-transition:visibility 0s 0s, opacity 0.6s, left 0.6s, width 0.6s, background 0.3s;}
.timeline > div > div > p:hover{background: #f5f6f6;}
.timeline > div > div > p span{cursor:pointer; display: block; opacity:0; position: absolute; width:inherit; height: inherit; top:0; transition:opacity 0.6s; -webkit-transition:opacity 0.6s; -moz-transition:opacity 0.6s; padding-top:12px;}
.timeline > div > div > p span:before{ font-size: 18px; font-weight: normal; padding-right: 5px; content:'a'; font-family:'Icons';}
.tablet .timeline > div > div > p span:before{font-size: 24px}
.timeline > div > div > p span:nth-child(2):before{content:'b';}
.timeline > div > div > p span:first-child{opacity:1;}
.timeline > div > div.zoom > p span:first-child{opacity:0;}
.timeline > div > div.zoom > p span:nth-child(2){opacity:1;}
.timeline > div > div i{font-style:normal; text-align:center; white-space:nowrap; background: #fff; font-size: 17px; color: #075f82; line-height: 19px; padding:4px 8px; position: absolute; top:0; z-index: 1; animation:toolIn 0.5s forwards ease-out 1 normal; -webkit-animation:toolIn 0.5s forwards ease-out 1 normal;}
.timeline > div > div i span{display: block;}

.timeline > div > div > ul{position: absolute; left:0; font-size: 0; margin-top:40px; transition:width 0s 2.2s,left 1.5s ease-in-out; -webkit-transition:width 0s 2.2s,left 1.5s ease-in-out; -moz-transition:width 0s 2.2s,left 1.5s ease-in-out;}
.timeline > div > div.zoom > ul{transition:width 0s, left 1.5s ease-in-out; -webkit-transition:width 0s, left 1.5s ease-in-out; -moz-transition:width 0s, left 1.5s ease-in-out;}
.tablet .timeline > div > div > ul{margin-top: 40px;}
.phone .timeline > div > div > ul{margin-top: 0px;}
.timeline > div > div > ul > li{width:18px; position:relative; height:inherit; height:140px; margin-left: 1px; display: inline-block; vertical-align: top; transition:margin 1.5s ease-in-out, width 1.5s ease-in-out; -webkit-transition:margin 1.5s ease-in-out, width 1.5s ease-in-out; -moz-transition:margin 1.5s ease-in-out, width 1.5s ease-in-out;}
.tablet .timeline > div > div > ul > li{width:13px; height:180px;}
.phone .timeline > div > div > ul > li{width:5px; height:140px;}
.timeline > div > div > ul > li.f{margin-left: 3px;}
.timeline > div > div.zoom > ul > li{width:228px; margin-left:3px;}
.tablet .timeline > div > div.zoom > ul > li{width:168px;}
.phone .timeline > div > div.zoom > ul > li{width:72px;}
.timeline > div > div > ul > li:after, .timeline > div > div.zoom > ul li ul li:after{content:''; position:absolute; width:100%; height:5px; background: #0778a5; z-index:1; bottom:0px; right:0; padding-left:1px; transition:background 0.6s,padding 1s ease-in-out; -webkit-transition:background 0.6s,padding 1s ease-in-out; -moz-transition:background 0.6s,padding 1s ease-in-out;}
.timeline > div > div > ul > li:first-child:after, .timeline > div > div > ul > li.f:after, .timeline > div > div.zoom > ul > li:after{padding-left:0;}
.timeline > div > div > ul > li ul li:first-child:after{right:-2px;}
.timeline > div > div > ul > li.off:after, .timeline > div > div.zoom > ul > li ul li.off:after{content:''; background: #565656;}
.timeline > div > div.zoom > ul > li ul li.off:after{transition:background 0s,padding 1s ease-in-out; -webkit-transition:background 0s,padding 1s ease-in-out; -moz-transition:background 0s,padding 1s ease-in-out;}
.timeline > div > div.zoom > ul > li.dis:after{content:''; background: #b5b5b5;}
.timeline > div > div > ul > li ul li.off:after{z-index: 2;}
.timeline > div > div.zoom > ul > li.off ul li:after{content:none;}


.timeline > div > div > ul > li p{pointer-events:none; position: absolute; bottom: -35px; /*25*/ line-height: 20px; font-size: 14px; opacity:0; transition:opacity 1.5s ease-in-out; -webkit-transition:opacity 1.5s ease-in-out; -moz-transition:opacity 1.5s ease-in-out;}
.timeline > div > div > ul > li.f p, .timeline > div > div.zoom > ul > li p{opacity:1;}
.timeline > div > div > ul > li span{ border:1px solid #e6e8e9; opacity:1; margin-bottom: 5px; visibility:visible; cursor:pointer; height:0%; position: absolute; bottom: 0; left:-1px; background: #6aaec9; width: 100%; z-index: 1; transition:background 0.6s, opacity 1.5s ease-in-out, height 2s ease-in-out, visibility 0s 0s; -webkit-transition:background 0.6s, opacity 1.5s ease-in-out, height 2s ease-in-out, visibility 0s 0s; -moz-transition:background 0.6s, opacity 1.5s ease-in-out, height 2s ease-in-out, visibility 0s 0s;}
.timeline > div > div > ul li.ev > span{background-image: url(../Image/pattern_stripes_blue.svg); background-repeat: repeat;}
.timeline > div > div > ul li.off.ev > span, .timeline > div > div > ul li.off li.ev > span{background-image: url(../Image/pattern_stripes_grey.svg); background-repeat: repeat;}
.timeline > div > div > ul > li.off span{background: #999;}
.desktop .timeline > div > div > ul > li span:hover{background-color: #075f82; transition:background 0.15s; -webkit-transition:background 0.15s; -moz-transition:background 0.15s;}
.timeline > div > div.zoom > ul > li > span{opacity: 0; visibility:hidden; transition:background 0.6s, opacity 1.5s ease-in-out, visibility 0s 1.5s, height 2s ease-in-out; -webkit-transition:background 0.6s, opacity 1.5s ease-in-out, visibility 0s 1.5s, height 2s ease-in-out; -moz-transition:background 0.6s, opacity 1.5s ease-in-out, visibility 0s 1.5s, height 2s ease-in-out;}
.timeline > div > div > ul > li ul{height:inherit;}
.tablet .timeline > div > div > ul > li ul, .phone .timeline > div > div > ul > li ul{display:none;}
.tablet .timeline > div > div.zoom > ul > li.det ul{display:block;}
.timeline > div > div > ul > li ul li{opacity: 0; visibility:hidden; display: inline-block; height:inherit; overflow:hidden; width: 8.37%;  vertical-align: top; position: relative; transition:opacity 1.5s ease-in-out, visibility 0s 1.5s; -webkit-transition:opacity 1.5s ease-in-out, visibility 0s 1.5s; -moz-transition:opacity 1.5s ease-in-out, visibility 0s 1.5s;}
.timeline > div > div > ul > li ul li:first-child{margin-left:-1px;}
.timeline > div > div.zoom > ul > li.det ul li{opacity: 1; visibility:visible; transition:opacity 1.5s ease-in-out, visibility 0s 0s; -webkit-transition:opacity 1.5s ease-in-out, visibility 0s 0s; -moz-transition:opacity 1.5s ease-in-out, visibility 0s 0s;}
.timeline > div > div.zoom > ul > li ul li p{display:none;}
.timeline > div > div > ul > li ul li span{background-color: #88bed4; visibility:hidden; margin-left: 1px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; transition:background 0.6s, visibility 0s 1.5s; -webkit-transition:background 0.6s, visibility 0s 1.5s; -moz-transition:background 0.6s, visibility 0s 1.5s;}
.timeline > div > div.zoom > ul > li ul li span{visibility: visible; transition:height 2s, background 0.6s, visibility 0s 0s; -webkit-transition:height 2s, background 0.6s, visibility 0s 0s; -moz-transition:height 2s, background 0.6s, visibility 0s 0s;}
.timeline > div > div.zoom > ul > li.off ul li span, .timeline > div > div.zoom > ul > li ul li.off span{background-color: #aeaeae;}
.desktop .timeline > div > div.zoom > ul > li ul li span:hover{background-color: #075f82; transition:background 0.15s; -webkit-transition:background 0.15s; -moz-transition:background 0.15s;}
.desktop .timeline > div > div.zoom > ul > li.dis ul li span, .tablet .timeline > div > div.zoom > ul > li.dis ul li span{background: #ddd; cursor: default;}

.timeline > div > div > ul.noTransit, .timeline > div > div > ul.noTransit *, .timeline > div > div > ul.noTransit *:after{transition:height 2s !important; -webkit-transition:height 2s !important; -moz-transition:height 2s !important;}



/* FILTER */
.filter {margin:25px 0; min-height: 125px; position: relative;}
.filter strong{display: inline-block; font-size: 16px; width:100px; padding-right: 15px; font-weight: bold; margin-bottom: 5px; vertical-align: top;}
.filter > div > span{display: inline-block; font-size: 16px; margin-left: 25px; color: #075f82; cursor: pointer; position: relative; transition:color 0.3s; -webkit-transition:color 0.3s; -moz-transition:color 0.3s;}
.phone .filter > div > span{font-size: 0;}
.filter > div > span a{cursor: pointer; font-size: 16px;}
.phone .filter > div > span a {font-size: 15px;}
.filter > div > span.off{color:#0778a5;}
.filter > div > span:after{content:''; opacity:0; width: 0%; position: absolute; display: block; left:0; top:50%; border-bottom:#0778a5 1px solid; transition:opacity 0.3s, width 0s 0.3s; -webkit-transition:opacity 0.3s, width 0s 0.3s; -moz-transition:opacity 0.3s, width 0s 0.3s;}
.filter > div > span.dis:after{opacity: 1; width: 100%; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.filter > div > span:before{font-family:'Icons'; margin-right: 5px; font-size: 16px;}
.filter > div > span.doc:before{content:'f';}
.filter > div > span.pic:before{content:'g';}
.filter > div > span.aud:before{content:'h';}
.filter > div > span.vid:before{content:'i';}
.filter > div > span.col:before{content:'e';}

.filter > div > span.col span:after{content: ' Geschichten/Sammlungen';}
.phone .filter > div > span.col span:after{content: ' Sammlungen';}


@media screen and (max-width: 1000px) {
.tablet .filter strong{display: block;}
.tablet .filter > div > span, .phone .filter > div > span{margin-right: 10px; margin-left: 0;}
.tablet .filter > div > span:last-child, .phone .filter > div > span:last-child {margin-right: 0;}
.tablet .filter > div > ul > li{width: 48.5%; margin-left: 0; margin-bottom: 0px;}
.tablet .filter > div > ul > li:nth-of-type(2n+2){margin-left: 3%;}
}
@media screen and (max-width: 400px) {
.phone .filter strong{display: block;}
}
.filter div > span > a:focus {outline:1px solid #cbcccd;}

.filter > div > ul{list-style: none; font-size: 0; margin-top:15px; position: relative;}
.filter > div > ul > li{color: #737373; padding:0; display: inline-block; font-size: 16px; margin-left: 1.4%; width:23.95%; min-height:42px; vertical-align: top;}
.phone .filter > div > ul > li{width: 48.5%; margin-left: 0; margin-bottom: 0px;}
.phone .filter > div > ul > li:nth-of-type(2n+2){margin-left: 3%;}
.filter > div > ul > li:first-child{margin-left:0;}
.filter > div > ul > li p{color:#545454; padding:0 10px; margin-bottom:5px; cursor:pointer; position: relative; background: #e6e8e9; display: block; border:#dedede 1px solid; font-weight: bold; line-height: 30px; transition:padding 0.3s 0.3s, margin 0.3s 0.3s, background 0.3s; -webkit-transition:padding 0.3s 0.3s, margin 0.3s 0.3s, background 0.3s; -moz-transition:padding 0.3s 0.3s, margin 0.3s 0.3s, background 0.3s;}
.filter > div > ul > li.on p{ color:#545454; padding-bottom: 5px; margin-bottom: 0; transition:padding 0.2s, margin 0.2s, background 0.3s; -webkit-transition:padding 0.2s, margin 0.2s, background 0.3s; -moz-transition:padding 0.2s, margin 0.2s, background 0.3s;}
.desktop .filter > div > ul > li p:hover, .desktop .filter > div > ul > li p:focus{background: #d3d5d5;}
.phone .filter > div > ul > li p{padding:0 8px; line-height: 34px; font-size: 15px;}
.staticImage .filter > div > ul > li p:after{content:'C'; font-family:'Icons'; text-align: center; width: 14px; font-size: 10px; position: absolute; right: 10px; line-height: 30px;}
.staticImage .filter > div > ul > li.on p:after{content:'L';}
.phone .filter > div > ul > li p:after{right: 8px; top:2px;}

.filter > div > ul > li p span{position: absolute; right: 5px; top:5px; pointer-events:none;}
.filter > div > ul > li p span svg line{stroke:#000 !important;}
.filter > div > ul > li div{z-index:3; background: #fff; border:#cdcdcd 1px solid; opacity: 0; visibility:hidden; font-size: 0; position: absolute; top:36px; left:0; padding:0; width:100%; overflow:hidden; -webkit-overflow-scrolling: touch; box-sizing: border-box; -moz-box-sizing: border-box; transition: max-height 0.4s cubic-bezier(.45,.03,.66,.98), visibility 0s 0.4s, opacity 0.2s cubic-bezier(1,0,1,0.5) 0.1s; -webkit-transition: max-height 0.4s cubic-bezier(.45,.03,.66,.98), visibility 0s 0.4s, opacity 0.2s cubic-bezier(1,0,1,0.5) 0.1s; -moz-transition: max-height 0.4s cubic-bezier(.45,.03,.66,.98), visibility 0s 0.4s, opacity 0.2s cubic-bezier(1,0,1,0.5) 0.1s;}
.phone .filter > div > ul > li div{top:auto;}
.filter > div > ul > li.on div{z-index:4; visibility: visible; opacity: 1; transition: max-height 0.4s cubic-bezier(.45,.03,.66,.98) 0.1s, visibility 0s, opacity 0.3s cubic-bezier(0.7,0,0,1) 0.1s; -webkit-transition: max-height 0.4s cubic-bezier(.45,.03,.66,.98) 0.1s, visibility 0s, opacity 0.3s cubic-bezier(0.7,0,0,1) 0.1s; -moz-transition: max-height 0.4s cubic-bezier(.45,.03,.66,.98) 0.1s, visibility 0s, opacity 0.3s cubic-bezier(0.7,0,0,1) 0.1s;} 
.filter > div > ul > li div span{opacity:0; visibility:hidden; color: #0778a5; cursor: pointer; text-align:right; font-weight: bold; width: 150px; margin:-30px 10px 10px auto; font-size: 16px; display: block; transition:all 0.3s, visibility 0s 0s; -webkit-transition:all 0.3s, visibility 0s 0s; -moz-transition:all 0.3s, visibility 0s 0s;}
.filter > div > ul > li div span:after{content:'t'; font-family:'Icons'; padding-left: 5px;}
.filter > div > ul > li div span:hover{padding-top: 5px; color: #075f82;}
.filter > div > ul > li.min div span{opacity:1; visibility:visible; transition:all 0.3s, visibility 0s 0.3s; -webkit-transition:all 0.3s, visibility 0s 0.3s; -moz-transition:all 0.3s, visibility 0s 0.3s;}
.filter > div > ul > li ul{list-style: none; overflow:hidden; padding-top:10px; margin-bottom: 10px; transition:margin-bottom 0.3s, max-height 0.3s; -webkit-transition:margin-bottom 0.3s, max-height 0.3s; -moz-transition:margin-bottom 0.3s, max-height 0.3s;}
.phone .filter > div > ul > li ul{margin-bottom: 0}
.filter > div > ul > li.min ul{margin-bottom: 30px;} 
.filter > div > ul > li ul li{/*color:#737373;*/ color:#595959; line-height: 20px; display: inline-block; vertical-align: top; margin-left: 1.4%; width:23.95%; height:40px; margin-bottom: 8px; padding:0 10px; font-size: 16px; cursor:pointer; box-sizing: border-box; -moz-box-sizing: border-box; transition:color 0.3s; -webkit-transition:color 0.3s; -moz-transition:color 0.3s;}
@media screen and (orientation:portrait){
	.tablet.page.staticImage .filter > div > ul > li ul li {height:auto;}
}
.filter > div > ul > li ul li b{cursor:pointer;}
.filter > div > ul > li ul li:nth-child(4n+1){margin-left: 0;}
.phone .filter > div > ul > li ul li{width: 100%; margin-left: 0; height: auto; padding:0 8px; line-height:20px;}
.desktop .filter > div > ul > li ul li:hover{color: #1f1f1f;}
.filter > div > ul > li ul li.on{color: #1f1f1f;}
.filter > div > ul > li ul li:after{content:'q'; font-family:'Icons'; opacity:0; visibility:hidden;  color: #1f1f1f; margin-left:8px; line-height:20px; vertical-align: top; font-size: 14px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.desktop .filter > div > ul > li ul li.on:hover{color:#1f1f1f;}
.filter > div > ul > li ul li.on:after{opacity:1;}
.desktop .filter > div > ul > li ul li.on:hover:after{color: #000;}

.filter ol{list-style: none; font-size: 0; padding:5px 0 10px; border-bottom:#cbcccd 1px solid;min-height: 32px;}
.phone .filter ol{padding-top: 0; min-height: 0}
.filter ol li{margin-right:30px; opacity:1; max-width: 300px; overflow: hidden; white-space: nowrap; color: #000; display: inline-block; font-size: 16px; line-height: 30px; cursor: pointer; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.phone .filter ol li{margin-right: 20px}
.filter ol li.touch{color:#737373;}
.filter ol li:after{content:'q'; font-family:'Icons'; color: #595959; padding-left: 5px; font-size: 14px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;} 
.filter ol li.touch:after{color: #000;}
.filter ol li.off{opacity:0; margin:0; max-width: 0;}
.filter > div > ul.ajaxanimation {opacity: 0.25; transition:opacity 0.5s; -webkit-transition:opacity 0.5s;}

@media screen and (max-width: 360px) and (orientation : portrait){
	.phone .filter strong {display: inline-block;}
	.filter > div > span a {font-size: 0;}
	.filter > div > span a span {font-size: 16px;}
}


/* SORT */
.sort{width:23.95%; height: 30px; position: relative; margin-bottom: 30px; left:0;}
.phone .sort{width: 100%; margin-bottom: 15px}
@media screen and (max-width: 1000px){
.tablet .sort{width:48.5%;}
.tablet .list.row .sort{width:32.46%; min-width: 306px}
}
@media screen and (min-width: 480px){
.phone .sort{width: 49%;}
}
.sort span{position: absolute; right: 0; top:5px; z-index:1;}
.staticImage .sort span{right:10px; top:1px;}
.staticImage .sort span:after{content:'y'; font-family:'Icons'; font-size: 20px; color: #fff;}
.sort:before{content:''; width:100%; height:34px; display: block; border-top:#fff 2px solid; border-bottom:#fff 2px solid; position: absolute; z-index: 2; top:-2px; box-sizing: border-box; -moz-box-sizing: border-box;}
.sort.idle:before{content:'';}
.sort.idle:after{content:''; z-index:1; background: url(../Image/circle.svg) no-repeat 0 0; width:25px; height:25px; right:7px; top:7px; position:absolute; display: block; animation:idleRotate 1s forwards linear infinite normal; -webkit-animation:idleRotate 1s forwards linear infinite normal;}
.sort ol{z-index:1; list-style: none; position: absolute; top:0; font-size: 18px; line-height: 30px; width: 100%;}
.sort ol li{opacity:0; display: none; cursor:pointer; background-color:#0778a5;color: #fff; padding:0 10px; width: inherit; box-sizing: border-box; -moz-box-sizing: border-box; transition:all 0.15s; -moz-transition:all 0.15s; -webkit-transition:all 0.15s;}
.desktop .sort ol li:hover{background: #0778a5;}
.phone .sort ol li{padding:0 8px;}
.sort ol li.on{opacity:1; display: block; background: #075f82;}


/* LIST */
.list{margin-bottom:70px;z-index:2;}
.tablet .list{margin-bottom: 30px}
.list > div{position: relative;}
.list > div > ul.ajaxanimation {opacity: 0.25; transition:opacity 0.5s; -webkit-transition:opacity 0.5s;}
p + .list, .textwrap + .list{margin-top: 40px}
.list + .list {margin-top: -60px;}

.list > div > a{color:#0778a5; display: table; text-align:right; font-size: 16px; font-weight: bold; line-height: 22px; margin-left: auto;}
.list > div > a:before{content: 'c'; font-family:'Icons'; font-size: 14px; margin-right: 8px; font-weight: normal;}
.list > div > a:hover, .list > div > a:focus{color:#075f82;}
.list > div > a:focus {/*outline:1px solid #cbcccd;*/ outline: 1px solid #67aeca;}
.list:after {display: block; content: ' '; clear: both;}
.list .prevpage a {text-align: left; float: left;}
.list .prevpage a:before {content: 'd';}

.listtoggle{font-size: 0; position: absolute; right: 0px; font-style: normal; cursor: pointer; color: #0778a5; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; background-color: transparent;}
.listtoggle:focus {outline:1px solid #075F82;}
.phone .listToggle{display: none}
.tablet .listToggle{right: 40px;}
/* no longer possible this way, fall back Icons need to be placed differently
.staticImage i.listToggle:before{content:'z'; font-family:'Icons'; font-size: 24px;}
.staticImage .list.row i:before{content:'A';}
*/
.list h2{margin-top: 40px;}
.list h3{padding-top: 7px; padding-bottom: 7px; margin-bottom: 8px; margin-top: 8px;}
.phone .list h3{padding-top:10px; padding-bottom: 10px}
.list h3:first-child{border-top:#cbcccd 1px solid; padding-top: 30px}
.list h4{text-transform: uppercase; padding-bottom: 5px;}
.list a + h5{padding-top: 15px;}
.list.row a + h5{border-top:#cbcccd 1px solid; padding-top: 10px}
.phone .list h5{margin-bottom: 0; padding-top:0;}
.list .list-content ul + *, .list .w + *{border-top:#cbcccd 1px solid; padding-top:20px;}

.list .list-content ul{list-style:none; font-size: 0; padding-top: 10px;}
.tablet .list .list-content ul {margin-left: -1.31%; width: 100%;}
.list.row ul{border:none;}
.list .list-content ul li{display: inline-block; vertical-align: top; margin-bottom: 35px; position: relative;}
.list.row ul li > *{max-width: 920px; margin-left: 34%;}
.tablet .list.row ul li > *{margin-left: 321px;}
.list.row.l ul li > *{margin-left: 50%;}
.list.row.l h3 {display: block;}
.list.single ul li{padding-bottom: 20px;}
.list .list-content ul > li strong{font-size: 18px; font-weight: bold; line-height: 32px; display: block;}
.list .list-content ul > li span,.list .list-content ul > li > p:first-child {font-size: 18px; font-weight: bold; line-height: 32px; display: inline-block;}
.list.row.l ul li > p:first-child {margin-left:0;}
.list .list-content ul > li span.lang {line-height: inherit; font-weight: inherit;}
.list.row.l ul li > span{margin-left: 0;}
.list .list-content ul li img{width: 100%; display: block; height: auto}
.list .list-content ul li p{font-size: 16px;}
.phone .list .list-content ul li p{display: none;}
.list .list-content ul li p + p{margin-top: 10px;}
.list.row ul li p + p{display: block;}
.tablet .list .list-content ul li p{font-size: 18px;}
.list .list-content ul li > a{position:relative; overflow: hidden; background-position: 0 0; position: relative; display: block; background-repeat:no-repeat; background-color:rgba(7,120,165,0); background-image:-moz-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%); background-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%); background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%); transition:background 0.3s; -webkit-transition:background 0.3s; -moz-transition:background 0.3s;}
.list .list-content ul li > a:focus {outline:1px solid #cbcccd;}
.list:not(.l) ul li > a {/*height:225px;*/ height: 210px;}
.list.row:not(.l) ul li > a {height: 270px;}
.list .list-content ul li > a > img { /* min-height: 100%; */  position: absolute; width: 100%; /*  min-width: 100%; */ }
.phone .list .list-content ul li > a > img{width:100%; height:auto;}
.list.row ul li > a{width:32.46%; margin-right:1.31%; float: left; margin-left: 0;}
.list.row.l ul li > a{width: 48%; margin-right: 2%; margin-left: 0; max-height: 350px; overflow: hidden; margin-bottom: 10px}
.list.row ul li > a img {width: 100%; height: auto;}
.tablet .list.row ul li > a{min-width: 306px; margin-left: 0;}

.list .list-content ul li.touch > a, .list .list-content ul li > a:focus, .list .list-content ul li > a:hover{background-position:0 100px; background-color:rgba(7,120,165,0.7); }
.list .list-content ul li > a:focus {outline:1px solid #000;}
.list .list-content ul li > a:after{color: #e1e3e6; font-family:'Icons'; font-size: 26px; position: absolute; left: 12px; bottom:2px; transition:color 0.3s; -webkit-transition:color 0.3s; -moz-transition:color 0.3s;}
.list .list-content ul li.touch > a:after{color: #fff;}
.list .list-content ul li > a img{z-index: -1; position: relative;}
.list .list-content ul li > a.sto:after{content:'u'; font-size: 25px;}
.list .list-content ul li > a.col:after{content:'e'; font-size: 22px; z-index:10;}
.list .list-content ul li > a.doc:after{content:'f';}
.list .list-content ul li > a.pic:after{content:'g';}
.list .list-content ul li > a.aud:after{content:'h';}
.list .list-content ul li > a.vid:after{content:'i';}
.list .list-content ul li > a strong{color: #e1e3e6; position: absolute; bottom:0; left:0; padding-left:55px; background-color:#0778a5; width:100%; line-height:38px;}
.list .list-content ul li.touch > a strong{color: #fff}

.list .list-content li.noresult {width:100%;}
.list .list-content li.noresult p {display:block !important; margin-left:0px !important;}

@media screen and (min-width: 1340px) { 
.list .list-content ul li p{font-size: 18px; line-height: 24px; padding-bottom: 5px;}
.list .list-content ul li > a:last-child{font-size: 18px;}
}
@media screen and (min-width: 1238px) {
.list .list-content ul li{width: 23.95%; margin-left:1.4%;}
.list .list-content ul li:nth-child(4n+1){margin-left: 0;}
}
@media screen and (max-width: 1237px) {
.list .list-content ul li{width:32%; margin-left:1.31%;}
.list .list-content ul {margin-left: -1.31%;}
.tablet .list .list-content ul li{width:32%;}
.desktop .list.single ul li:nth-of-type(4){display: none;}
}
@media screen and (max-width: 1000px) {
.tablet .list .list-content ul {margin-left: -3%; width:103%;}
.tablet .list .list-content ul li{ width:47%; margin-left: 3%;}
.tablet .list.row.l ul li > *{margin-left:0;}
.tablet .list.row.l ul li > a{width: 100%; max-height: 300px; overflow: hidden;}
.tablet .list.row.l ul li p{margin-bottom: 20px;}
}
@media screen and (min-width: 480px) {
.phone .list .list-content ul li{width:48.5%; /*margin-left: 3%;*/}
/*.phone .list .list-content ul li:nth-of-type(2n+1){margin-left: 0;}*/
.phone .list.row.l ul li{padding-bottom: 0;}
.phone .list:not(.single):not(.row) ul li > a{margin-bottom:10px;}
}
@media screen and (max-width: 479px) {
.phone .list.row.l ul li > *{margin-left:0;}
.phone .list.row.l ul li > a{width: 100%; max-height: 300px; overflow: hidden;}
.phone .list.row.l ul li p{margin-bottom: 20px}
.phone .list .list-content ul li{width:100%; margin-left: 0; margin-bottom: 25px}
.phone .list:not(.single):not(.row) .list-content ul li > *{margin-left: 50%;}
.phone .list:not(.single):not(.row) .list-content ul li > a{height:84px;margin-bottom:0; width: 45%; margin-left: 0; margin-right: 5%; float:left; background-image:-moz-linear-gradient(top,rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%); background-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%); background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%); }
.phone .list:not(.single):not(.row) .list-content ul li > a:after{ left:8px; font-size: 19px; bottom:0;}
.phone .list:not(.single):not(.row) .list-content ul li > a strong{font-size: 16px; line-height: 26px; left:0; padding-left: 38px;}
}

.list.row ul li{width:100%; margin-left: 0; padding-bottom: 30px;}
.tablet .list.single .w{overflow-x:scroll; -webkit-overflow-scrolling: touch;}
.tablet .list.single ul li{display: inline-block; width: 270px; margin-left:20px;}
.tablet .list.single ul li a{-webkit-backface-visibility: hidden;}


/* FOOT */
.foot{background: #0778a5; color: #cde4ed; line-height: 22px; padding-top:34px; padding-bottom:34px; font-size: 0;}
.phone .foot{padding-top:20px; padding-bottom: 20px; line-height: 26px;}
.phone.det .foot{display: none;}
.library.desktop .foot, .library.tablet .foot{display: none}
.library.phone .foot{padding-left:20px; padding-right: 20px}
.foot ul{position:relative; list-style:none;}
.foot li{display: inline-block; padding-right:20px; font-size: 16px;}
.foot li:last-child{position: absolute; right: 0; padding-right:50px; color:#fff;}
.foot li.ph{display: none}
.phone .foot li, .phone .foot li.ph{width:50%; padding:0; position: static; display: inline-block;}
.foot a{line-height:inherit; transition:all 0.15s; -moz-transition:all 0.15s; -webkit-transition:all 0.15s; color: #fff;}
.foot a:hover{color: #cde4ed;}
.foot a:focus {outline:1px solid #cbcccd;}



/* LIBRARY */
body.library > i{display: block; position: absolute; width: 10px; height: 10px; background: #f00;}
body.library > ul{height:0; display:block; list-style-type: none; list-style-image: none; } 
body.library > ul > li {list-style-image: none; list-style-type: none;}
body.library.phone > ul, body.story.phone > .storyline{position: relative; width:inherit; overflow: hidden; margin-top: 100px;}
body.library.phone.det > ul, body.story.phone.det > .storyline{position: static;}
.storyline li {list-style: none;}
body.library > ul > li > div{/*border:#daddde 1px solid;*/ position: absolute; display: none; -moz-transform:translateZ(0); -webkit-transform:translateZ(0); transform:translateZ(0);}
body.library > ul > li > div.type5 {border:none;}
body.library > ul > li > div.on{display: block;}
body.library > ul > li > div.transit{transition:width 0.4s, height 0.4s, left 0.4s, top 0.4s; -webkit-transition:width 0.4s, height 0.4s, left 0.4s, top 0.4s; -moz-transition:width 0.4s, height 0.4s, left 0.4s, top 0.4s;}
body.library > ul > li > div > img{position: absolute; cursor:pointer; width: 100%; height: 100%; top:0; left:0; display: block;}
body.library > ul > li > div > img + img{display:none; opacity:0; -moz-transition:opacity 0s; -webkit-transition:opacity 0s; transition:opacity 0s;}
body.library.noTransitChilds > ul > li > div > img {height: auto; width: 400px; margin:0 auto; position: relative;}
body.library.noTransitChilds > ul > li > div > img + img {display: none;}
body.library > ul > li > div.det{z-index:1;}
body.library > ul > li > div.det > img + img{opacity:1; -moz-transition:opacity 0.6s; -webkit-transition:opacity 0.6s; transition:opacity 0.6s;}
body.library > ul > li > div.drag > img{cursor:all-scroll;}
body.library > ul > li > div > h3{display: none}

body.library > p a, body.story .arrows a{visibility:hidden; position: absolute; top: 50%; right:0; z-index: 3; opacity:0; width: 40px; height: 37px; padding-top: 3px; background: rgba(231,233,234,0.8); font-size: 0; text-align: center; cursor: default; -moz-transition:background 0.2s, opacity 0.2s, visibility 0s 0.3s; -webkit-transition:background 0.2s, opacity 0.2s, visibility 0s 0.3s; transition:background 0.2s, opacity 0.2s, visibility 0s 0.3s;}
body.library > p a.on:focus, body.story .arrows a.on:focus{outline:2px solid #67aeca; display: inline;}
body.library > p a.on, body.story .arrows a.on{cursor:pointer; opacity:1; visibility: visible; -moz-transition: opacity 0.2s, visibility 0s; -webkit-transition: opacity 0.2s, visibility 0s; transition: opacity 0.2s, visibility 0s;}
body.library > p a:first-child, body.story .arrows a:first-child{left:0; right:auto;}
body.library > p a:before, body.story .arrows a:before{ content: 'c'; font-family:'Icons'; z-index:10; visibility:visible; display:block; color: #0077a7; height: 0; font-size: 28px; line-height: 36px; display: block; -moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;}
body.library > p a:first-child:before,body.story .arrows a:first-child:before{content: 'd';}
body.library > p a.touch, body.library > p a:focus, body.story .arrows a.touch, body.story .arrows a:focus{background: rgba(231,233,234,1);}
body.library > p a.touch:before, body.library > p a:focus:before, body.story .arrows a.touch:before, body.story .arrows a:focus:before{color: #005e83;}
body.library > p a.loading:before, body.story .arrows a.loading:before{content: none !important;}
body.library > p a.loading, body.story .arrows a.loading {background: rgb(231,233,234) url(/typo3conf/ext/dreipc_bstu/Resources/Public/Image/loader_small.gif) no-repeat 50% 50%; background-size: 20px;}



body .paging{text-align: center; width: 100%; z-index:1; position: relative; margin-top: 5px;}
body .paging > div {background:none repeat scroll 0 0 #e6e8e9; display: inline-block; position: relative; z-index: 1; padding:4px 9px 2px 4px;}
body.phone .paging{top:100px; position: absolute;}
body.phone.det .paging{top:10px;}
body .paging span{color:#5c5d5d; display: inline-block; font-size: 16px; vertical-align: top; line-height: 22px;}
body.tablet .paging span{font-size: 18px;}
body .paging span:first-child{color:#000;}
body .paging span:first-child:after{content: '|'; color:#5c5d5d; padding:0 5px;}

body .paging ol{list-style: none; display: inline-block; margin-left: 10px; vertical-align: middle; margin-top: 3px;}
body .paging ol li{width: 4px; height: 4px; margin:-3px  0 0 0; display: inline-block; font-size: 0; border:10px solid #e6e8e9; vertical-align: top; position: relative; cursor:pointer; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; /*hack for IE10+11*/ -ms-box-shadow:3px 3px 12px #e6e8e9; box-shadow:3px 3px 12px #e6e8e9;}
body .paging.slider ol li {border:none;}
body.story .browse .paging ol li {box-shadow:none;}
body .paging ol li:hover:before {background-color: #fff;}
body .paging ol li:before{content:''; opacity: 1; background: #5c5d5d; margin:1px; width: 4px; height: 4px; left: 0; top:0; position: absolute; border-radius: 4px; box-shadow:0 1px 4px rgba(0,0,0,0.4); -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s;}
body .paging.slider ol li:before {width: 8px; height:2px; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none;}
body .paging ol li.on{z-index:1;}
body .paging ol li.on:before{opacity: 1; margin:-7px 0 0 -7px; width: 18px; height: 18px;border-radius: 22px; background-color:#0077a7;}




body .paging li p:last-child {padding:5px; background-color:#e6e8e9; text-align: left; font-size: 14px; position: absolute; left:-45px; top:15px; width:120px; opacity: 0; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; -o-transition:all 0.3s;}
body .browse .paging li p:last-child {left: auto; right: 20px; z-index: 4; width: auto; white-space: nowrap; padding: 2px; top: -13px;}
body .paging li p.on:last-child {opacity: 1;}
body.tablet .paging ol li.on:before, body.phone .paging ol li.on:before{margin:-9px 0 0 -9px; width: 22px; height: 22px;}
body .paging ol li:after{content:''; opacity: 0; background: #fff; margin:1px; width: 2px; height: 2px; left: 0; top:0; position: absolute; border-radius: 8px; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s;}
body .paging ol li.on:after{opacity: 1; margin:-1px 0 0 -1px; width: 6px; height: 6px;}
body.tablet .paging ol li.on:after, body.phone .paging ol li.on:after{margin:-2px; width: 8px; height: 8px;}
body .paging ol li a:focus {display:block; border:4px solid #0077a7; margin-top:-2px; border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;}
/* PAGING FOR MORE THEN 10 ITEMS */
body .paging.slider ol{width: 325px; height: 2px; display: inline-table; position: relative; top: -3px; left: 5px; font-size: 0; margin-right: 10px;}
body.phone .paging.slider ol {width: 60%;}
body .paging.slider ol li{height: 2px; border-left:0 none; border-right:0 none;  display: table-cell; border-radius:0px;}
body .paging.slider ol li:before {right:-7px; left: auto;}
body .paging.slider ol li:after {right: -1px; left: auto;}
/* body .paging.slider ol li:after {right: -1px; left: auto;} */
/*body .paging.slider ol li:first-child:before {left: 0; right: auto;}*/
/*body .paging.slider ol li:first-child:after {left: 0; right: auto;}*/
body .paging.slider ol li a:focus{height: 2px; display: block; background-color: #ffffff; margin-top:-3px;}
body.tablet .paging.slider ol li:first-child.on:after, body.phone .paging.slider ol li:first-child.on:after {margin: -2px;}
body.tablet .paging.slider ol li.on:after, body.phone .paging.slider ol li.on:after {margin: -2px 1px;}


/*styling for +/- buttons*/
.desktop p.zoombutton {opacity: 0; display: block; width:100%; position: relative; margin-top:40px; text-align: center; cursor: pointer;}
p.zoombutton {opacity: 0;}
p.zoombutton.on {opacity: 1;}
p.zoombutton a {font-size: 20px; cursor: pointer; font-size: 0; margin-right: 15px;}
p.zoombutton a:after {display: inline-block; font-size: 20px; font-family:'Icons'; color:#fff; width: 35px; height: 20px; padding: 9px 0 5px; background-color: #888; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px;}
p.zoombutton a.on:after{background-color: #0077a7;}
p.zoombutton a:hover:after {background-color: #888; cursor:not-allowed;}
p.zoombutton a.on:hover:after, p.zoombutton a.on:focus:after{ background-color:#075f82; cursor: pointer;}
p.zoombutton a.bigger:after{content:'w';}
p.zoombutton a.smaller:after{content:'x';}

.browse p.zoombutton {position: absolute; top:80px; z-index:1;}
.story .browse .zoombutton {display: none;}
.story.fullBrowse .browse .zoombutton {display: block;}
body.story .browse-head .zoombutton.on a {display: none;}
body.story.fullBrowse .browse-head .zoombutton.on a {display: none;}


/* STORY */
body.story.phone {overflow-x: hidden;}
.story.desktop .foot, .story.tablet .foot{display: none}
.story.phone .foot{padding-left:20px; padding-right: 20px}
.story .progress {position: absolute; bottom: -3px; background-color: #d32f6b; height: 3px; left: 0;}

body.story > i{display: block; position: absolute; width: 10px; height: 10px; background: #f00;}
body.story .storyline{height:100%; display:block; position: absolute; z-index: 1; width: 100%;}
body.story.phone .storyline{position: relative; width:inherit; overflow: hidden;}
body.story.phone.det .storyline{position: static;}
body.story .storyline > li > div{position: absolute; display: none;}
body.story .storyline > li > div:not(.type5, .type1){border:#daddde 1px solid;}
body.story .storyline > li > div.on{display: block}
body.story .storyline > li > div.det{display: block; -webkit-transition: -webkit-transform 0.5s, opacity 0.6s; -o-transition: -o-transform 0.5s, opacity 0.6s; transition: transform 0.5s, opacity 0.6s, visibility 0s 0s; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; opacity: 1;}
/*body.story .storyline > li > div.det.type0, body.story .storyline > li > div.det.type2 {-webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%;}*/
body.story .storyline > li > div.transit{transition:width 0.4s, height 0.4s, left 0.4s, top 0.4s; -webkit-transition:width 0.4s, height 0.4s, left 0.4s, top 0.4s; -moz-transition:width 0.4s, height 0.4s, left 0.4s, top 0.4s;}
body.story .storyline > li > div > img{position: absolute; cursor:pointer; width: 100%; height: 100%; top:0; left:0; display: block;}
body.story .storyline > li > div > img + img{display:none; opacity:0; -moz-transition:opacity 0s; -webkit-transition:opacity 0s; transition:opacity 0s;}
body.story .storyline > li > div.det{z-index:1;}
body.story .storyline > li > div.det > img + img{opacity:1; -moz-transition:opacity 0.6s; -webkit-transition:opacity 0.6s; transition:opacity 0.6s;}
body.story .storyline > li > div.drag > img{cursor:all-scroll;}
body.story .storyline > li > div > h3{display: none}

/* storyboard */
body.story .storyboard {position: absolute; left: 30px; visibility: hidden; white-space: nowrap; z-index: 3; height: 100%; font-size: 0;}
body.story.phone .storyboard {top: 0; margin-top: 100px; width: 100%; overflow: hidden; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: 0;}
body.story .storyboard:before {content: ''; height: 100%; display: inline-block; vertical-align: middle;}
body.story .storyboard li {display: inline-block; vertical-align: middle; font-size: 16px; margin-right: 18px; width: 210px; position: relative; height: 140px; overflow: hidden;}
body.story.phone .storyboard li {display: inline-block; vertical-align: middle; font-size: 16px; margin-right: 18px; width: 140px; position: relative; height: 70px; overflow: hidden;}
body.story .storyboard.transit {transition-delay: 0s, 0s, 0.6s;}
body.story .storyboard li div img {width: 100%; height: auto;}

body.story .storyboard > li > p.tooltip {background-color:#0778a5; color: #fff; padding: 0 5px 5px; white-space:normal; text-align: left; font-size: 14px; position: absolute; left:0; bottom: 0; width:100%; opacity: 0; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; -o-transition:all 0.3s;}
body.story.storyboard .storyboard > li:focus .tooltip {opacity:1;}
body.story.storyboard .storyboard > li > p.tooltip.on {opacity: 1;}

/*body.story .storyboard > li {-webkit-transition: transform 0.4s; -moz-transition: transform 0.4s; -ms-transition: transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s;}*/
/*body.story .storyboard > li.off-left {-webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -ms-transform: translateX(-150px); -o-transform: translateX(-150px); transform: translateX(-150px);}*/



body.story .storyboard .cover > div, body.story .storyboard .intro > div, body.story .storyboard .text > div {width: 700px; white-space: normal; position: relative; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;}
body.story .storyboard .cover > div .subteaser {bottom: 35px;}
body.story .storyboard .cover > div img {min-height: 100%; height: auto; min-width: 100%; cursor: default;}
body.story .storyboard .text > div:before {content: ''; display: inline-block; vertical-align: middle; height: 100%;}
body.story .storyboard .text > div {display: inline-block; height: 100%; vertical-align: middle;}
body.story .storyboard li.coherent-era h3 {margin-top: 10px; position: absolute; top: 100%; width: 210px; white-space: normal;}

body.story.storyboard .storyboard {visibility: visible;}
body.story.storyboard > .storyline > li > div.on {display: block; opacity: 0;}
body.story.storyboard > .storyline > li > div.det {display: block; opacity: 0;}
body.story.storyboard > .storyline a {display: none;}
body.story.storyboard > .paging {display: none;}

body.story.storyboard .storyboard > li:focus {outline: 2px solid #000000;}
body.story.storyboard .storyboard > li.active {outline: 2px solid #d32f6b;}
/*body.story.storyboard .storyboard > li.off-left {-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}*/

/* type0 */
body.story > ul > li > div.type0 {width: 100%; height: 100%; border: none; overflow: hidden;}
body.story > ul > li > div.type0:before, body.story .storyboard .cover > div:before {content:''; position: absolute; right: 0; top: 0; width: 100%; height: 100%; border: none; background-position: 0 0; display: block; background-repeat:no-repeat; background-color:rgba(7,120,165,0); background-image:-moz-linear-gradient(top,rgba(0,0,0,0) 10%, rgba(0,0,0,1) 100%); background-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 10%, rgba(0,0,0,1) 100%); background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 100%);}
body.story.phone > ul > li > div.type0:before {background-color:rgba(7,120,165,0); background-image:-moz-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 100%); zoom: 1;  background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);}
body.story > ul > li > div.type0 .subteaser, body.story .storyboard .cover > div .subteaser {max-width: 600px; position: absolute; left: 30px; bottom: 76px; color: #fff;}
@media screen and (max-width: 630px) {
	body.story > ul > li > div.type0 .subteaser {bottom: 30px; padding-right: 30px;}
}
body.story > ul > li > div.type0 .subteaser h4, body.story .storyboard .cover > div .subteaser h4 {margin-bottom: 20px;}
body.story > ul > li > div.type0 h2, body.story .storyboard .cover > div h2 {border-color: rgba(255,255,255,0.3);}
body.story > ul > li > div.type0 img {position: absolute; width: auto; height: auto; z-index: -1000; overflow: hidden; }
body.story > ul > li > div.type0 img.ww {width: 100%;}
body.story > ul > li > div.type0 img.wh {height: 100%;}
body.story:not(.phone, .tablet, .desktop) > ul > li > div.type0 img {position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; cursor: default;}
/* type1 */
body.story > ul > li > div.type1 {max-width: 75%; border: none;}
body.story > ul > li > div.type1 ul{list-style: disc; padding-left: 40px;}
body.story > ul > li > div.type1 ul li{list-style: outside;}
body.story > ul > li > div.type1 h3, body.story > ul > li.intro h3, body.story .storyboard .text > div h3 {display: block; margin-bottom: 50px;}
body.story > ul > li > div.type1 p, body.story > ul > li > div.type1 ul, body.story > ul > li > div.type1 ol {max-width:740px; /*margin: 0 auto 16px auto;*/ margin: 0 auto 25px auto;}
body.story > ul > li > div.type1 .row, body.story > ul > li.intro .row {max-width:740px; margin:0 auto;}
body.story > ul > li > div.type1 h3, body.story > ul > li.intro h3 {max-width:740px; margin: 0 auto 25px; }
/* type2 */
body.story > ul > li > div.type2 {width: 100%; height: 100%; border: none; background-color: #0077a7;}
body.story > ul > li > div.type2 h3:before {content: ""; display: inline-block; height: 100%; vertical-align:middle;}
body.story > ul > li > div.type2 h3 {vertical-align: middle; height: 100%; display: inline-block; color: #fff; margin-left: 80px; font-size: 50px;}

/* ajax icon */
.story .overlay, .library .overlay {background-color: rgba(230, 232, 233, 0.8); top: 0;}
.overlay .loading {margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 60px; width: 60px;}

/*styling without any js*/

.library.tablet .sideMenu {position: static;}
.library.tablet .sideMenu > h3:first-child {margin-top: 0;}

body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div, body.story:not(.phone):not(.desktop):not(.tablet) > .storyline > li > div {display: none;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div > dl > dd, body.story:not(.phone):not(.desktop):not(.tablet) > .storyline > li > div > dl > dd {margin-bottom: 30px;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div > dl > dt, body.story:not(.phone):not(.desktop):not(.tablet) > .storyline > li > div > dl > dt {display: none;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div > dl .sidemenuinfo, body.story:not(.phone):not(.desktop):not(.tablet) > .storyline > li > div > dl .sidemenuinfo {display: block;}
body.library:not(.phone):not(.desktop):not(.tablet) .paging, body.story:not(.phone):not(.desktop):not(.tablet) .paging {display: none;}
body.library:not(.phone):not(.desktop):not(.tablet) .further, body.story:not(.phone):not(.desktop):not(.tablet) .browse {display: none;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div.on, body.story:not(.phone):not(.desktop):not(.tablet) > .storyline > li > div.on {display: block; position: static;}
body.library:not(.phone):not(.desktop):not(.tablet), body.story:not(.phone):not(.desktop):not(.tablet) {overflow: visible; height: auto; position: relative;}
body.library:not(.phone):not(.desktop):not(.tablet) .sideMenu, body.story:not(.phone):not(.desktop):not(.tablet) .sideMenu{display: none;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul, body.story:not(.phone):not(.desktop):not(.tablet) > ul{height: auto; padding-top: 80px;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li{list-style: none; width: 720px; margin:0 auto;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div {border:0 none;}
body.library:not(.phone):not(.desktop):not(.tablet) .further {position: static;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl {width: 720px; height: 600px; overflow-y: scroll; margin-top: 35px;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dt, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dt {display:block; background: #0778a5; box-shadow:0 1px 0 rgba(0,0,0,0.1); margin-bottom: 20px; line-height: 30px; min-width: 130px; padding:0 8px; color: #fff; font-weight: bold;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > *:first-child, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > *:first-child {margin-top: 25px; font-size: 28px; line-height: 34px; margin-bottom: 20px;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > *, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > *{font-size: 18px; line-height: 24px; margin-bottom: 10px;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd strong, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd strong{font-weight: bold;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > h4, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > h4 {margin-top: 20px; font-weight: bold;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd hr, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd hr{margin-top: 20px; margin-bottom: 20px; height: 1px; display: block; background-color: #b8baba;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > dl:first-child, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd > dl:first-child {font-size: 18px; line-height: 24px;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd dt, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd dt {font-weight: bold;}
body.library:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd dd, body.story:not(.phone):not(.desktop):not(.tablet) > ul > li > div:first-child > dl > dd dd {margin-bottom: 20px;}

body.library:not(.phone):not(.desktop):not(.tablet) > p > a.on, body.story:not(.phone):not(.desktop):not(.tablet) > p > a.on {position: absolute; top:45px; background-color: #0778a5; color: #fff; right:0; display: inline-block; cursor:pointer; width:180px; padding:2px 5px; visibility: visible; opacity: 1; font-size: 17px; font-weight: bold; height: auto; min-height: auto;}
body.story:not(.phone):not(.desktop):not(.tablet) > p > a {left: 0; right: auto;}
body.story:not(.phone):not(.desktop):not(.tablet) > p > a:before {color: #fff; font-family: 'Icons'; padding-right: 5px; line-height: 24px; color: #fff; font-size: 18px; display: inline-block;}
body.library:not(.phone):not(.desktop):not(.tablet) > p > a:hover, body.library:not(.phone):not(.desktop):not(.tablet) > p > a:focus, body.story:not(.phone):not(.desktop):not(.tablet) > p > a:hover, body.story:not(.phone):not(.desktop):not(.tablet) > p > a:focus {background-color: #075f82;}
body.library:not(.phone):not(.desktop):not(.tablet) > p a:before, body.story:not(.phone):not(.desktop):not(.tablet) > p a:before {content: '';}
body.library:not(.phone):not(.desktop):not(.tablet) > p > a:after, body.story:not(.phone):not(.desktop):not(.tablet) > p > a:before {content: 'c'; font-family: 'Icons'; padding-left: 5px; font-weight: bold;}
body.story:not(.phone):not(.desktop):not(.tablet) > p > a:before {content: 'd';}
body.library:not(.phone):not(.desktop):not(.tablet) > p > a:first-child, body.story:not(.phone):not(.desktop):not(.tablet) > p > a:first-child {left:0;}
body.story:not(.phone):not(.desktop):not(.tablet) > p > a:first-child {right:0; left: auto;}
body.library:not(.phone):not(.desktop):not(.tablet) > p > a:first-child:after {content: '';}
body.library:not(.phone):not(.desktop):not(.tablet) > p > a:first-child:before, body.story:not(.phone):not(.desktop):not(.tablet) > p > a:first-child:after {content: 'd'; color: #fff; font-family: 'Icons'; padding-right:5px; line-height: 24px; color: #fff; font-size: 18px; display: inline-block;}
body.story:not(.phone):not(.desktop):not(.tablet) > p > a:first-child:before {content: none;}
body.story:not(.phone):not(.desktop):not(.tablet) > p > a:first-child:after {content: 'c';}

/* NO-JS Story */
body.story:not(.phone):not(.desktop):not(.tablet) .storyboard {display: none;}
body.story:not(.phone):not(.desktop):not(.tablet) .type0 {width: auto; height: auto;}
body.story:not(.phone):not(.desktop):not(.tablet) .type0:before {content: none;}
body.story:not(.phone):not(.desktop):not(.tablet) .type0 img {position: static;}
body.story:not(.phone):not(.desktop):not(.tablet) .type0 .subteaser {position: static; color: #000000;}

/* SIDEMENU */
.sideMenu{list-style: none; display: block; position: absolute; width:0; height:0; left:0; top:0; z-index: 2; transition:width 0s 0.3s, height 0s 0.3s ; -webkit-transition:width 0s 0.3s, height 0s 0.3s; -moz-transition:width 0s 0.3s, height 0s 0.3s;}
.sideMenu.off h3 {min-width: 0; width: 0; padding: 0; overflow: hidden;}
.phone .sideMenu.off {padding-top: 0;}
.sideMenu.on{width: 100%; height: 100%; transition:width 0s 0s, height 0s 0s; -webkit-transition:width 0s 0s, height 0s 0s; -moz-transition:width 0s 0s, height 0s 0s;}
.phone .sideMenu{position: relative; height:auto; width: 100%; background: #fff; padding-top: 67px; overflow: hidden;}
.story.phone .sideMenu {margin-top: -48px;}
.phone.det .sideMenu{display: none;}
.desktop .sideMenu:before, .desktop .sideMenu:after, .tablet .sideMenu:before, .tablet .sideMenu:after{content: ''; position: fixed; z-index:1; right:0; width: 0%; transition:width 0.3s; -webkit-transition:width 0.3s; -moz-transition:width 0.3s;}
.sideMenu.on:before{width: 30%; height: 20%; top: 0; background:linear-gradient(top, rgba(230,232,233,1) 0%, rgba(230,232,233,1) 70%, rgba(230,232,233,0) 100%) no-repeat; background:-moz-linear-gradient(top, rgba(230,232,233,1) 0%, rgba(230,232,233,1) 70%, rgba(230,232,233,0) 100%) no-repeat; background:-webkit-linear-gradient(top, rgba(230,232,233,1) 0%, rgba(230,232,233,1) 70%, rgba(230,232,233,0) 100%) no-repeat;}
.sideMenu.on:after{width: 30%; height: 12%; bottom: 0; background:linear-gradient(top, rgba(230,232,233,0) 0%, rgba(230,232,233,1) 50%, rgba(230,232,233,1) 100%) no-repeat; background:-moz-linear-gradient(top, rgba(230,232,233,0) 0%, rgba(230,232,233,1) 50%, rgba(230,232,233,1) 100%) no-repeat; background:-webkit-linear-gradient(top, rgba(230,232,233,0) 0%, rgba(230,232,233,1) 50%, rgba(230,232,233,1) 100%) no-repeat;}
.sideMenu.det:before, .sideMenu.det:after{width: 100%;}

.sideMenu + span{visibility:hidden; opacity:0; z-index:1; width: 0%; position: fixed; background: rgba(230,232,233,0.92); height: 100%; top:0; right: 0; transition:width 0.3s, visibility 0s 0.3s, opacity 0.3s; -webkit-transition:width 0.3s, visibility 0s 0.3s, opacity 0.3s; -moz-transition:width 0.3s, visibility 0s 0.3s, opacity 0.3s;}
.sideMenu.on + span{visibility:visible; opacity: 1; width: 30%; transition:width 0.3s, visibility 0s 0s, opacity 0.3s; -webkit-transition:width 0.3s, visibility 0s 0s, opacity 0.3s; -moz-transition:width 0.3s, visibility 0s 0s, opacity 0.3s; zoom:1;}
.sideMenu.on + span{visibility:visible; opacity: 1\9; width:30%\9;}
.sideMenu.det + span{width:100%;}

.sideMenu > h3{width:140px; cursor: pointer; position: relative; z-index: 11; vertical-align:top; display:block; background: #0778a5; box-shadow:0 1px 0 rgba(0,0,0,0.1); margin-bottom: 3px; line-height: 30px; min-width: 130px; padding:0 8px; font-size: 14px; color: #fff; font-weight: bold; transition:width 0.3s, padding 0.3s, visibility 0s 0.3s; -webkit-transition:width 0.3s, padding 0.3s, visibility 0s 0.3s; -moz-transition:width 0.3s, padding 0.3s, visibility 0s 0.3s;}
.sideMenu > h3 > a {background-color: #0778a5;}
.sideMenu > h3.empty, .sideMenu > h3.empty:hover, .sideMenu > h3.empty a {background-color: #888; cursor: default;}
.sideMenu > h3.empty > * {cursor:default;}
.sideMenu > h3.empty a:focus {outline: none;}
.sideMenu > h3:first-child{margin-top: 108px;}
.phone .sideMenu > h3{margin:0; font-size:0; width: 25%; min-width: 0; top:0; position:absolute; display: block; padding:0; text-align: center; border-left:#fff 1px solid; height: 67px;}
.phone .sideMenu > h3:nth-of-type(1){left:0; border:0;}
.phone .sideMenu > h3:nth-of-type(2){left:25%;}
.phone .sideMenu > h3:nth-of-type(3){left:50%;}
.phone .sideMenu > h3:nth-of-type(4){left:75%;}
.phone .sideMenu h3.videotoc { position: static; width: 100%; height: auto; border: 0; border-top: 1px solid #fff; text-align: left; padding: 10px 20px 5px; }
.phone .sideMenu h3.videotoc a { position: static; font-size: 18px; }
.phone .sideMenu h3.videotoc + div { display: block; }
.sideMenu .pdf-download {background: transparent; color: #075f82; padding: 0; width: 156px;}
.sideMenu .pdf-download a {background: #fff; display: block; padding: 0 8px;}
.sideMenu .pdf-download a:hover {background: #075f82; color: #fff;}
.phone .sideMenu .pdf-download {display: none;}

.sideMenu > h3.on{background:#075f82; padding-left:16px;}
.sideMenu > h3.on > a {background:#075f82;}
.phone .sideMenu > h3.on{padding-left: 0}
.sideMenu > h3.touch:not(.empty), .sideMenu > h3.touch:not(.empty) > a{background:#075f82;}
.sideMenu > h3:before{font-family:'Icons'; margin-right: 8px; font-weight: normal;} /*font-size: 16px;*/

.phone .sideMenu > h3:before{font-size: 26px; line-height:45px; margin:0;}
.phone .sideMenu > h3 > a {background-color: transparent; position: absolute; bottom:2px; font-size: 11px; left:0; width:100%;}
.sideMenu > h3.inf:before{content: 'm';}
.sideMenu > h3.tra:before{content: 'n';}
.sideMenu > h3.def:before{content: 'V';}
.sideMenu > h3.sho:before{content: 'U';}
.sideMenu .pdf-download > a:before {content: 'f'; font-family: 'Icons'; margin-right: 8px;}
.sideMenu > h3.videotoc:before{content: 'X'; margin-right: 13px;}
.phone .sideMenu > h3.videotoc:before {display: none;}

.sideMenu > h3 button{opacity:0; font-size:0 !important; background-color:transparent !important; visibility:hidden; position: fixed; line-height: 18px; font-size: 18px; right: 3%; top:14%; color: #464747; transition:color 0.2s, opacity 0.3s, visibility 0s 0.3s; -webkit-transition:color 0.2s, opacity 0.3s, visibility 0s 0.3s; -moz-transition:color 0.2s, opacity 0.3s, visibility 0s 0.3s;}
.sideMenu > h3 button:hover{color: #000;}
.sideMenu > h3.on button{opacity:1; visibility:visible; transition:color 0.2s, opacity 0.3s, visibility 0s 0s; -webkit-transition:color 0.2s, opacity 0.3s, visibility 0s 0s; -moz-transition:color 0.2s, opacity 0.3s, visibility 0s 0s;}
.sideMenu > h3.on button:focus {outline:1px solid #0778A5;}
.sideMenu > h3 button:after{font-size:16px; content:'q'; cursor:pointer; font-family:'Icons'; font-weight: normal; padding:5px;}


@media only screen and (orientation: portrait) {
	.tablet .sideMenu > h3{font-size: 11px; line-height: 0; min-width: 0; width: 32px; height:65px; padding:0px 31px 2px; margin-bottom: 9px; text-align:center;}
	.tablet .sideMenu.off > h3{ min-width: 0; width: 0; padding: 0; overflow: hidden;}
	.tablet .sideMenu > h3.on{padding-left: 30px}
	.tablet .sideMenu > h3:before{font-size: 35px; line-height:48px;}
	.tablet .sideMenu > h3 > a {position: absolute; bottom: 10px; left:0; width:100%;}
	.tablet .sideMenu > h3.def:before, .tablet .sideMenu > h3.tra:before {line-height: 60px;}
	.tablet .sideMenu > h3 button{margin-top: 0;}
	.tablet .sideMenu > h3 button:after, .phone .sideMenu > h3 button:after{font-size: 20px}
}


.sideMenu > div{visibility: hidden; opacity: 0; width:100%; margin:0 5%; height: 0%; line-height: 22px;  position: absolute; top:16%; bottom:6%; overflow: auto; -webkit-overflow-scrolling: touch; box-sizing:border-box; -moz-box-sizing: border-box; transition:visibility 0s 0.3s, height 0s 0.3s, opacity 0.3s; -webkit-transition:visibility 0s 0.3s, height 0s 0.3s, opacity 0.3s; -moz-transition:visibility 0s 0.3s, height 0s 0.3s, opacity 0.3s;}
.tablet .sideMenu > div {left:2%; width: 90%;}
.phone .sideMenu > div{visibility: visible; position: static; opacity: 1; height: auto; margin:0 5%; display: none; overflow: visible;  hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; word-wrap:break-word;}
.sideMenu > h3.on + div{visibility: visible; z-index: 10; opacity: 1; height: 80%; /* width:90%; */ margin:0 5%;  transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; -webkit-transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; -moz-transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s;}
.sideMenu > h3 + div {width:90%;}
.sideMenu > h3.on + div a {border-bottom: 1px solid #0778a5;}
.sideMenu > div > div.on, .sideMenu > div > dl.on{visibility: visible; opacity: 1; height: 80%; transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; -webkit-transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; -moz-transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; overflow: visible;}
.phone .sideMenu > h3.on + div{display: block; height: auto;}
.sideMenu > div > *{position: relative; width: 62%; display:block; max-width: 760px; margin: 0 auto 10px; }
.tablet .sideMenu > div *{font-size: 18px;}
.tablet .sideMenu > div > *{width: 63%;}
.phone .sideMenu > div > *{width: auto; margin-left:20px; margin-right: 20px; box-sizing:border-box; -moz-box-sizing: border-box;}
.sideMenu > div > *:first-child {margin-top: 55px;}
.desktop .sideMenu > div > i + dl, .tablet .sideMenu > div > i + dl{margin-top: 70px;}
.sideMenu > div > *:last-child{padding-bottom: 25px; margin-bottom: 40px;}
.sideMenu > div > dl, .tablet .sideMenu > div > dl, .sideMenu > div > i.r{width:22%; right:2%; position: absolute; display: none;}
.phone .sideMenu > div > dl, .phone .sideMenu > div > i{position: static; display: block; width: auto;}
.phone .sideMenu > div > dl{padding-bottom:0;}
.sideMenu > h3.on + div > dl, .sideMenu > h3.on + div i.r{display: block;}
.sideMenu > div > dl.extra{border-bottom:#c4c8cc 1px solid; margin-bottom: 35px}
.sideMenu > div > dl dt{ font-weight: bold; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; word-wrap:break-word;}
.sideMenu > div > dl.extra dt{border-top:#c4c8cc 1px solid; padding:10px 0 10px 20px; cursor: pointer; z-index:3; position: relative; transition:color 0.2s; -webkit-transition:color 0.2s; -moz-transition:color 0.2s;}
/*body:not(.fullBrowse):not(.phone) .sideMenu > div > dl dt{background: rgba(230,232,233,0.92);}*/
.sideMenu > div > dl.extra dt span{position:absolute; left:0; pointer-events:none; top:10px; opacity:1; transition:opacity 0.2s; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s;}
.sideMenu > div > dl.extra dt.off{color: rgba(0,0,0,0.6);}
.sideMenu > div > dl.extra dt:focus {outline:1px solid #0778A5;}
.fullBrowse .sideMenu > div > dl.extra dt.off{color: #616366;}
.sideMenu > div > dl.extra dt.off span{opacity:0.3;}
.sideMenu > div > dl dd{padding-bottom: 20px;}
/*body:not(.fullBrowse):not(.phone) .sideMenu > div > dl dd {background: rgba(230,232,233,0.92);}*/
.sideMenu > div > dl dd > p {padding-top: 10px;}
.staticImage .sideMenu > div > dl.extra dt:before{font-family:'Icons'; content:'w'; font-size: 13px; position: absolute; top: 11px; left:0; line-height: 22px;}
.staticImage .sideMenu > div > dl.extra dt.on:before{content:'q'; top:10px;}
.sideMenu > div > dl.extra dd{visibility:hidden; height:0; opacity:0; position: fixed; right: 29%; top:14%; width: 48%; max-width: 760px; padding-bottom: 0; padding-right: 2%; overflow: auto; -webkit-overflow-scrolling: touch; transition:visibility 0s 0.3s, height 0s 0.3s, opacity 0.3s; -webkit-transition:visibility 0s 0.3s, height 0s 0.3s, opacity 0.3s; -moz-transition:visibility 0s 0.3s, height 0s 0.3s, opacity 0.3s;}
/*body:not(.fullBrowse):not(.phone) .sideMenu > div > dl.extra dd {background: rgba(230,232,233,0.92);}*/
.tablet .sideMenu > div > dl.extra dd{width:48%; padding-left:10%;}
.phone .sideMenu > div > dl.extra dd{position: static; opacity:1; height:auto; visibility: visible; display: none; width:auto; overflow: visible;}
.sideMenu > div > dl.extra dd.on{visibility: visible; height:80%; opacity:1; transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; -webkit-transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s; -moz-transition:visibility 0s 0s, height 0s 0s, opacity 0.3s 0.3s;}
.desktop .sideMenu > div > dl.extra dd > *:first-child, .tablet .sideMenu > div > dl.extra dd > *:first-child{margin-top: 35px}
.sideMenu > div > dl.extra dd > *:last-child{margin-bottom: 35px}
.phone .sideMenu > div > dl.extra dd > *:last-child{margin-bottom: 25px}
.phone .sideMenu > div > dl.extra dd.on{display: block;}
.sideMenu dt {margin:1px;}
.sideMenu .extra dt {text-indent: 15px;}
.sideMenu span:focus {outline: 1px solid #c4c8cc;}

.sideMenu .infohead {margin-bottom: 25px;}
.sideMenu > div h3{line-height: 34px; margin-bottom: 10px;}
.tablet .sideMenu > div h3 > abbr,
.tablet .sideMenu > div h3 > abbr,
.tablet .sideMenu > div h3{font-size: 28px; line-height: 34px;} 
.phone .sideMenu > div h3 > abbr {font-size:inherit; }
.sideMenu h4, .sideMenu h4 > abbr {font-size: 18px; font-weight: bold;}
.sideMenu h5 {font-size: 16px; font-weight: bold; margin-bottom:5px; }
.sideMenu h5 > abbr {font-size: 16px; font-weight: bold;}
.introduction {font-size: inherit; font-weight: bold; margin-top: 20px;}
.phone .sideMenu h4 + ul{margin-top: -10px}
.sideMenu i{font-style: normal; color: #005e83; font-weight: bold;}
.sideMenu hr{height:1px; display:block; background:#b8baba; font-size:0; margin-bottom:15px; margin-top: 20px;}
.tablet .sideMenu hr{margin-top: 20px; margin-bottom: 20px}
.sideMenu strong{font-weight: bold}
.sideMenu ul li {list-style: outside; width: 100%; margin-left: 15px;}
.sideMenu ul {margin-bottom:10px;}
.sideMenu .deflist dl > * {display:inline-block;}
.sideMenu .deflist dt {width:25%; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; vertical-align: top;}
.sideMenu .deflist dd {width:70%;}

.phone .sideMenu .deflist dt, .phone .sideMenu .deflist dd {width: 49%; vertical-align: top;}

.phone .sideMenu > div p strong{display: block;}
.sideMenu > div > dl.extra dd > p{margin-bottom: 10px}
.sideMenu .extra dd ol,
.sideMenu .extra dd ul { margin-left: 40px; }
.sideMenu .extra dd ul { font: inherit;}
.sideMenu .extra dd ul li { margin-left: 0;}
.sideMenu .extra dd h4 { margin-bottom: 0.7em;}
.sideMenu .extra dd h3 { margin-bottom: 0.7em;}
.in-text-link, .timejump, .sideMenu > h3.on + div .moreinfo a {color: #075f82;}
.in-text-link abbr {color: inherit;}
.sideMenu a:focus {outline: 1px solid #cdcdcd;}
.fullBrowse .sideMenu h3 + div a {color: #6abee0;}
.sideMenu dd a:focus {outline: 1px solid #075f82;}

h3.sidemenuinfo, h4.sidemenuinfo {display: none;}
.phone .sidemenuinfo {display: block; font-size: 16px; color:#075f81;}

@media screen and (min-width: 1340px) {
.sideMenu > div:not([role=main]) p,.sideMenu > div a, .sideMenu > div ul{font-size: 18px; line-height: 24px;}
.sideMenu > div h3{font-size: 28px; line-height: 34px;}
.sideMenu hr{margin-top: 20px; margin-bottom: 20px}
}

.sideMenu .videotoc.empty {display: none;}
.sideMenu .moreinfo h3 {font-size: 18px; margin-top:15px; margin-bottom: 5px;}
.sideMenu .videotoc + div li p{margin-bottom: 10px;}

.accordion > h3:first-child a {cursor: pointer; color:hsl(197, 92%, 34%); margin-bottom:10px; font-size: 26px;}
.accordion > h3:first-child a:after {content: 't'; font-family: 'Icons'; font-size: 16px; margin-left:10px; vertical-align: middle;}
.accordion > h3:first-child a:focus {outline-offset: 4px;}
.accordion > h3:first-child a.expanded:after {content: 's';}
/*.desktop .accordion {padding:0 35% 0 0!important; padding:0 calc(35% - 50px) 0 0!important; box-sizing: border-box!important;}*/
body.page.tablet .accordion div p {padding: 0;}
body.page.phone .accordion div {padding: 0;}
.accordion div h3 {font-size: 18px;}
.accordion div h3:not(:first-child) {margin-top:15px;}
.accordion ul {padding-left: 18px;}

.further{/*border-top:#0778a5 28px solid;*/ background: #3a3d41; position: absolute; bottom: 0; width: 100%; z-index: 5;}
/* LIBRARY FURTHER */
.tablet .further{border-top-width: 33px}
.phone .further{position: static; min-width: 0; border:0;}
.phone.det .further{display: none;}
.further h4{ cursor:pointer; font-size: 14px; font-weight: bold; color: #fff; width: 100%; padding-left:45px; min-height: 28px; line-height: 28px; display: inline-block; overflow: hidden; position:absolute; top: -28px; left:0; background-color:#0778A5; box-sizing:border-box; -moz-box-sizing: border-box; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;} 
.tablet .further h4{font-size: 18px; line-height: 33px; top: -33px;}
.phone .further h4{font-size: 18px; line-height: 52px; position: relative; display: block; top: 0; padding:0 20px; margin:0; width: auto;}
.further h4.touch, .further.on h4{background:#075f82;}
.further h4 span{position: absolute; left:0; top:4px; pointer-events:none; margin-left:15px;}
.staticImage .further h4 span{top:8px;}
/*.tablet.staticImage .further.on h4 span {top:-4px;}*/
.staticImage .further h4 span:after{content:'D'; font-family:'Icons'; font-size: 20px; color: #fff; line-height: 34px}
.staticImage .further.on h4 span:after{content: 'B'; font-size: 7px; line-height: 20px; padding-left: 7px; vertical-align: top;}
.phone .further h4 span{display: none;}
.further div{height:0; overflow: hidden; transition:max-height 0.3s; -webkit-transition:max-height 0.3s; -moz-transition:max-height 0.3s;}
.phone .further h4 + div {height: auto !important; max-height: initial !important;}
.further ul{list-style:none; font-size: 0; border-bottom:#616467 1px solid; z-index: 1; position: relative; margin:3% 1.7% 0;}
.phone .further ul{margin:0 20px;}
.further ul li{display: inline-block; width: 23.72%; vertical-align: top; padding-left:1.7%; padding-bottom: 150px;}
.tablet .further ul li, .phone .further ul li{padding-bottom: 180px;}
.further ul li:first-child{padding-left:0;}
.phone .further ul li{width: 45%; padding-left:0; padding-bottom: 25px; display: block;}
.further ul li > a{background-position: 0 0; position: relative; display: block; background-repeat:no-repeat; background-color:rgba(7,120,165,0); background-image:-moz-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%); background-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%); background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%); transition:background 0.3s; -webkit-transition:background 0.3s; -moz-transition:background 0.3s;}
.further ul li > a.touch, .further ul li > a:focus{background-position:0 100px; background-color:rgba(7,120,165,0.7);}
.further ul li > a.touch *{color:#fff;}
.further ul li > a.touch abbr{color:inherit;}
.further ul li > a:after{color: #e1e3e6; font-family:'Icons'; font-size: 25px; position: absolute; left: 12px; bottom: 8px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.further ul li > a.touch:after{color: #fff}
.further ul li > a img{z-index: -1; position: relative;}

.further ul li > a.doc:after{content:'f';}
.further ul li > a.vid:after{content:'i';}
.further ul li > a.aud:after{content:'h';}
.further ul li > a.sto:after{content:'u';}
.further ul li > a.col:after{content:'e';}
.further ul li > a.pic:after{content:'g';}
.further ul li > a > span{color: #e1e3e6; position: absolute; bottom: 8px; left: 45px; font-size: 18px; font-weight: bold; line-height: 26px; display: block;}
.further ul li > a > span.lang {position: static;}
.further ul li p{position:absolute; padding-top: 10px; top:100%; font-size: 16px; line-height: 22px; font-weight: bold; display: block; color: #d0d0d0;}
.further ul li a:hover p, .further ul li a:hover p i{color:#6aaec9;}
.further ul li a:focus p{outline:1px solid #6aaec9;}
.tablet .further ul li p{font-size: 18px; line-height: 24px;}
.phone .further ul li p{font-size: 18px; padding-top:0; left:110%; top:0; width: 100%; max-height: 90px; overflow: hidden;}
.further ul li i{font-style:normal; font-weight: normal; display: block; margin-top: 10px}
.phone .further ul li i{display: none}
.tablet .further div div{line-height: 30px; /*height: 30px;*/ height: auto;}
.further ul li img{width: 100%; display: block; height: auto;}
.further ul li a > div {max-height: 180px; /*250*/ height: 100%}
.tablet .further ul li a > div, .phone .further ul li a > div {height: 84px;}
@media screen and (orientation:landscape){
	.phone .further ul li a > div {height: 185px;}
}
.further div div{color:#d0d0d0; line-height: 24px; /*height:24px;*/ overflow: hidden;}
.phone .further div div{margin:20px 0px; overflow: hidden; height: auto;}
.further h5{font-size: 16px; font-weight: normal; display: inline-block;}
.phone .further h5{display: none;}
.further div div a{font-size: 16px; display: inline-block; font-weight: bold; padding-left: 5%;}
.further div div a:focus {outline:1px solid #fff;}
.further div div h5 {padding-left: 2%;}
.further div div a:before{content: 'c'; font-family:'Icons'; vertical-align: top; font-weight: normal; font-size: 14px; padding-right: 5px;}
.further div div a.touch{color: #fff;}
.tablet .further h5, .tablet .further div div a{font-size: 18px;}
.phone .further h5, .phone .further div div a{font-size: 18px; padding-left:5%; padding-right: 5%; line-height: 30px}
.tablet .further div div a {padding-left: 2%;}
.tablet .further div div a:before, .phone .further div div a:before{font-size: 16px;}

@media screen and (min-width: 1340px) { 
.further{border-top-width: 33px}
.further h4{font-size: 18px; line-height: 33px; top: -33px;}
.browse .browse-head > h4 {font-size: 18px;}
.browse .tags a {padding-top:6px; padding-bottom: 6px;}
.further ul li p{font-size: 18px; line-height: 24px;}
.further div div{line-height: 30px;}
.further h5, .further div div a{font-size: 18px;}
.further div div a:before{font-size: 16px;}
}

@media screen and (max-width: 1000px) {
.further ul li{width:32.2%;}
.further ul li:nth-child(4){display: none;}

}

@media screen and (min-width: 480px) {
.phone .further ul li{width:48.5%; margin-left: 3%; display: inline-block; padding-bottom: 100px}
.phone .further ul li:nth-child(2n+1){margin-left: 0;}
.phone .further ul li p{padding-top:10px; left:0; top:100%;}
}


/* story BROWSE */
.browse{background: #3a3d41; position: absolute; bottom: 0; width: 100%; z-index: 5; visibility: visible; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s;}
.browse.off {-webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px);}
.tablet .browse{min-width: 600px; border-top-width: 33px}
.phone .browse{position: static; min-width: 0; border:0;}
.phone.det .browse{display: none;}
.browse h4 {padding-left: 2%; font-size: 14px; font-weight: bold; color: #fff; width: 100%; display: inline-block; overflow: hidden; box-sizing:border-box; -moz-box-sizing: border-box;}
.browse-head {background: #0778a5; height: 28px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; position: relative; z-index: 8; max-height: }
.browse .tags {display: table; position: absolute; top: 0; left: 50%; margin: 0 0 0 -25%; width: 50%; font-size: 18px;}
@media screen and (max-width: 1340px) {
	body.story .browse > .browse-head {height:28px;}
	body.story .browse .tags {font-size: 16px; line-height: 20px;}
}

.browse-head h4 {padding-top: 6px; padding-bottom: 2px;}
/* .browse .tags a {padding-top: 2px; padding-bottom: 3px;} */
.browse .tags a {display: table-cell; color: #fff; border-right: #4da0c2 2px solid; padding-left: 3px; padding-right: 3px; text-align: center; font-style: 15px; padding-top:6px; padding-bottom: 7px;}
.browse .tags a.visible.first{border-left: #4da0c2 2px solid;}
.tablet .browse h4{font-size: 18px;}
.phone .browse h4{font-size: 18px; line-height: 52px; position: relative; display: block; top: 0; margin:0 20px; padding-left:0; width: auto;}
.browse .tags a.touch, .browse .tags a.on{background:#075f82;}
.browse .tags a:focus {background-color: #616467;}
.staticImage .browse h4 span{top:8px;}
.staticImage .browse h4 span:after{content:'D'; font-family:'Icons'; font-size: 20px; color: #fff; line-height: 34px}
.staticImage .browse.on h4 span:after{content: 'B'; font-size: 7px; line-height: 20px; padding-left: 7px}
/* PAGING for browse*/
body.story .browse .paging{text-align: right; width: auto; display:inline-block; position:absolute; top: 55px; z-index:4; right: 25px; padding:0px 3px; background-color: #3a3d41; height: auto;}
body.story .browse .paging > div {background: none;}
body.story .browse .paging span{color:#a1a1a1; display: inline-block; font-size: 16px; vertical-align: top; line-height: 22px;}
body.story .browse .paging span:first-child{color:#fff;}
body.story .browse .paging span:first-child:after{content: '|'; color:#a1a1a1; padding:0 5px;}
body.story .browse .paging ol{list-style: none; display: block; margin-left: 10px; vertical-align: top; position: absolute;	right: -5px;}
body.story .browse .paging ol li{display: block; font-size: 0; margin:15px 9px; background: #fff; border-color:#3a3d41; width: 4px; height: 4px; border-radius:4px; vertical-align: top; position: relative;}

/*paging for browse as a slider*/
body.story .browse .paging.slider ol {top:30px;}
body.story .browse .paging.slider ol li{margin:0; border-top: 0 none; border-bottom: 0 none; height: 6px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px;}

.browse > div{overflow: auto; height: 0; transition: height 0.3s; -webkit-transition: height 0.3s; -moz-transition: height 0.3s;}
.browse > .browse-head {/*height: auto;*/ height:33px; overflow: hidden; min-height: 28px;}
.browse > div > ul{list-style:none; font-size: 0; z-index: 1; height: 362px; overflow-y: auto; overflow-x:auto;}
.phone .browse > div > ul{margin:0 20px;}
.browse .arrows {display: none;}
.fullBrowse .browse .arrows {display: block;}

.browse > div > ul > li > a.touch{background: rgba(7, 120, 165, 0.7) 0 100px;}
.browse > div > ul > li > a.touch *{color:#fff;}
.browse > div > ul > li > a:after{color: #e1e3e6; font-family:'Icons'; font-size: 25px; position: absolute; left: 12px; bottom: 8px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;}
.browse > div > ul > li > a.touch:after{color: #fff}
.browse > div > ul > li > a:focus > div {outline:1px solid #fff;}
.browse > div > ul > li > a img{z-index: -1; position: relative;}

.browse > div > ul > li > a.doc:after{content:'f';}
.browse > div > ul > li > a.vid:after{content:'i';}
.browse > div > ul > li > a.aud:after{content:'h';}
.browse > div > ul > li > a.sto:after{content:'u';}
.browse > div > ul > li > a.col:after{content:'e';}
.browse > div > ul > li > a.pic:after{content:'g';}
.browse > div > ul > li > a span{color: #e1e3e6; position: absolute; bottom: 8px; left: 45px; /*font-size: 18px;*/ font-weight: bold; line-height: 26px; /*display: block;*/}
.browse > div > ul > li > a p span{position: static;}

.tablet .browse > div > ul > li p{font-size: 18px; line-height: 24px;}
.phone .browse > div > ul > li p{font-size: 18px; padding-top:0; left:110%; top:0; width: 100%;}
.browse > div > ul > li i{font-style:normal; font-weight: normal; display: block; margin-top: 10px}
.phone .browse > div > ul > li i{display: none}
.browse > div > ul > li img{width: 100%; display: block; height: auto;}
.browse > div > ul > li a > div {max-height: 250px; height: 100%}

body.story .storyline.browse-viewer {height: auto; position: static;}
.browse-viewer > li{display: block; width: 210px; margin: 0 auto 13px auto;}
.phone .browse-viewer > li{width: 45%; padding-left:0; padding-bottom: 25px; display: block;}
.browse-viewer > li:first-child {width: 100%; text-align: center; }
.browse-viewer > li:first-child p:first-child{font-size: 16px; position: static; width: 100%; margin-top: 23px; margin-bottom: 27px; padding-left: 0; font-weight: normal; color: #d0d0d0;}

.browse-viewer > li > a{background-position: 0 0; position: relative; display: block; background-repeat:no-repeat; background-color:rgba(7,120,165,0); background-image:-moz-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%); background-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%); background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%); transition:background 0.3s; -webkit-transition:background 0.3s; -moz-transition:background 0.3s; height: 140px;}
.browse-viewer > li > a > div{overflow: hidden;}
.browse-viewer > li > a > p{position:absolute; padding-left: 15px; top:0; left: 100%; font-size: 16px; line-height: 22px; font-weight: bold; display: block; color: #d0d0d0; width: 215px;}
.browse-viewer > li > div{position: absolute;}

@media screen and (max-width:650px){
	.browse-viewer > li > a > p {width:175px;}
}

.fullBrowse .browse-viewer > li > a {display: none;}
.fullBrowse .progress {display: none;}
.fullBrowse .browse-viewer > li:first-child {display: none;}
.fullBrowse .sideMenu {z-index: 7;}
.fullBrowse .sideMenu + span {top: auto; bottom: 0;}
.fullBrowse .sideMenu.on {color: #fff;}
.fullBrowse .sideMenu.on:after, .fullBrowse .sideMenu.on:before {content: none;}
.fullBrowse .sideMenu.on + span {background: rgba(58, 61, 65, .95); z-index: 6;}
.fullBrowse .sideMenu > dt span, .fullBrowse .sideMenu > h3 span {color: #fff;}
.fullBrowse .browse .arrows {font-family: 'Icons';}
.fullBrowse .browse .arrows p {font-family:'BundesSans', sans-serif;}
.fullBrowse .browse .arrows a {bottom: 5px; top:auto; z-index: 11; position: absolute; background: none;}
.fullBrowse .browse .arrows a:not(.loading).touch {background: none;}
.fullBrowse .browse .arrows a:before {content: 't';}
.fullBrowse .browse .arrows a:first-child:before {content: 's';}
.fullBrowse .browse .arrows a:first-child {top: 35px; bottom:auto;}
.fullBrowse.story .head {z-index: 7;}

@media screen and (max-width: 1340px) {
	.browse-head{height: 33px;}
	.browse-head .tags{line-height: 26px;}
	.browse h4{font-size: 18px;}
	.browse .browse-head > h4{font-size: 14px;}
	.browse h4 span{top:7px;}
	.browse > div > ul > li p{font-size: 18px; line-height: 24px;}
	.browse div div{line-height: 30px; /*height: 30px;*/ height:100%;}
	.browse .projekktor div {line-height: normal;}
}

@media screen and (max-width: 1000px) {
	.browse > div > ul > li{width:32.2%;}
	/*.browse > div > ul > li:nth-child(4){display: none;}*/
}

@media screen and (min-width: 480px) {
	.phone .browse ul li{width:48.5%; margin-left: 3%; display: inline-block; padding-bottom: 100px}
	.phone .browse ul li:nth-child(2n+1){margin-left: 0;}
	.phone .browse ul li p{padding-top:10px; left:0; top:100%;}
}



/* 404 PAGE*/
.page404 .content > div {margin-top: 180px; margin-bottom: 180px; max-width: 556px;}
.page404.tablet .content > div {margin-top: 20px; margin-bottom: 40px;}
.page404.phone .content > div {margin-top: 10px; margin-bottom: 0;}
.page404 .content img {margin: 150px auto 30px; display: block; height: auto;}
.page404.phone .content img {width: 100%;}
.page404 .content p,.page404 .content a {margin: 0 auto 10px; width:550px;}
.page404 .content a:before {content: "c"; font-family: "Icons"; font-size: 14px; font-weight: normal; margin-right: 8px;}
.page404 .content a:hover {color: #075f82;}
.page404 .content a {color: #0778a5; display: block; font-size: 16px; font-weight: bold; line-height: 22px;}

.page404 .foot {position: absolute; bottom: 0; left: 0; right: 0;}

.phone .error404.popup p {left: 50px; padding-right: 15px;}
.popup.error404 {max-width: 720px; max-height: 439px; width: 90%; background: url(../Image/404_popup_1444.png); -webkit-background-size: cover; background-size: cover;}
.popup.error404 p {position: absolute; bottom: 60px; left: 80px;}
.popup.error404 img {margin: 35px 0 30px 145px;}


/* POPUP */
body.hasOverlay .head {background-color: #fff;}
.overlay {position: fixed; opacity: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.8); z-index: 11; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;}
body.hasOverlay .overlay {opacity: 1;}
.popup {padding: 0 !important; margin: auto; position: absolute; top: 180px; left: 0; bottom: 0; right: 0; background-color: #fff;}
.phone .popup {top: 100px;}
.popup .close {position: absolute; right: 5px; top: 5px;}
.popup .close:after {content: "q"; cursor: pointer; font-family: "Icons"; font-weight: normal; padding: 5px;}


/*  VIDEO PLAYER */
video {width: 720px; height: 576px;}
video::-webkit-media-controls {display:none !important;}

/* hide controls for proper taborder when video/audio not active*/
.type4:not(.det) a, .type5:not(.det) a {visibility: hidden;}

.type4 > img:before {position: absolute; content: 'M'; font-family: "Icons"; font-size: 30px;}
.ppcontextmenu {display: none;}
.ppstart {display: none;}
/*.projekktor:hover .ppcontrols {visibility: visible;}*/
.projekktor {
	width:100% !important;
	height:100% !important;
}
.projekktor .ppcontrols > div {display: block;}
.projekktor .ppcontrols > div:first-child {opacity: 0; height: 125px; /*110px*/ bottom: 0; visibility: visible; margin: 0;padding: 0; position: absolute; right: 0; width: 100%; background-repeat:no-repeat; background-color:rgba(7,120,165,0); background-image:-moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%); background-image:-webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%); background-image:-ms-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%); transition:background 0.3s; -webkit-transition:background 0.3s; -moz-transition:background 0.3s; -o-transition:background 0.3s; }
body.phone .projekktor .ppcontrols > div:first-child, body.tablet .projekktor .ppcontrols > div:first-child {opacity: 1;}
.projekktor:hover .ppcontrols > div:first-child {opacity: 1;}
.ppcontrols a, .ppcontrols a:focus:before, .ppcontrols .ppvslider .ppvknob:focus{color: #0778a5;}
.projekktor .ppcontrols .pprewind {margin-right: 30px;}
.projekktor .ppcontrols .ppforward {margin-left: 30px;}
.projekktor .ppcontrols .pppause, .projekktor .ppcontrols .ppplay {width: 33px;}
.projekktor.fullscreen {position: relative !important; position: fixed !important; width:100% !important; height:100% !important;}


.ppcontrols .active {display: inline-block;}
.ppcontrols .inactive {display: none;}
.ppcontrols .center {position: absolute; text-align: center; left: 0; right: 0; bottom: 70px; /*55px*/}
.ppcontrols .bottom {position: relative; bottom: 0; left: 0; top: 31px;}
.ppcontrols .center > li, .ppcontrols .center > li > div {display: inline-block;}
.ppcontrols .center > li > div:last-child {margin-right: 0;}
.ppcontrols .center > li > div.inactive {display: none;}
.ppcontrols ul {list-style-type: none;}
.ppcontrols ul.right {margin: 0; padding: 0; position: relative; right: 2%; top: 0; }
.ppcontrols ul.right li {float: right; position: relative; margin-top: 18px;}
.ppcontrols ul.left {margin-left: 10px; position: absolute; z-index: 10;}
.ppcontrols ul.left li {float: left; position: relative; margin-top: 18px;}
.phone .ppcontrols ul.left {display: none;}
.ppcontrols .ppvslider {background: no-repeat linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(100, 100, 100, 1) 45%,rgba(100, 100, 100,1),rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%); background-size: 100% 90%; margin:0px 5px; width: 110px; font-size: 0; height:2px; padding:10px 0; top:0px; position: relative; cursor: pointer;}
.ppcontrols .ppvslider .ppvknob {color: #fff; font-family: "Icons"; font-size: 14px; vertical-align: top; margin-top: -8px; position: absolute; cursor: pointer; transition: none;}
.ppcontrols .ppvslider .ppvmarker {background: no-repeat linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(255, 255, 255, 1) 45%,rgba(255, 255, 255,1),rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%); background-size: 100% 90%; height: 2px !important; vertical-align: top; padding: 10px 0; margin-top:-10px; cursor: pointer;}
.ppcontrols .ppmute, .ppcontrols .ppmute.inactive {display:inline-block; color:#6a6c6b; font-family: "Icons"; text-transform: lowercase; font-weight: normal; vertical-align: top; margin-top: -5px;}
.ppcontrols .ppmute.active {color:#e0e0e0;}
/*video control icons*/
.ppcontrols .ppmute, .ppcontrols .ppunmute, .ppcontrols .ppvslider .ppvknob, .ppcontrols .setplay, .ppcontrols .pppause, .ppcontrols .pptracksbtn, .ppcontrols .setfullscreen, .ppcontrols .jumpbackward, .ppcontrols .jumpforward, .ppcontrols .ppscrubberdrag {font-size:0;}
.ppcontrols .ppmute:after{content: 'h'; font-size: 30px;}
.ppcontrols .ppvslider .ppvknob:after {content:'B'; font-size: 13px;}



.setplay:before, .setpause:before, .jumpforward:before, .jumpbackward:before, .fullscreenexit:before, .setfullscreen:before {font-family: "Icons"; display: inline-block; vertical-align: middle;}
.setplay:before {font-size: 37px; content: 'M'; color: #cfd0d0;}
.setpause:before {font-size: 37px; content: 'N'; color: #cfd0d0;}
.jumpforward:before {font-size: 20px; content: 'P'; color: #cfd0d0;}
.jumpbackward:before {font-size: 20px; content: 'O'; color: #cfd0d0;}
.fullscreenexit:before {font-size: 20px; content: 'R'; color: #cfd0d0;}
.setfullscreen:before {font-size: 20px; content: 'Q'; color: #cfd0d0;}

.ppcontrols .bottom {position: relative; top:65px;}
.ppscrubber {background: #000; height: 6px; width: 97%; margin-left:1.5%; overflow: hidden; position: absolute; z-index: 104;}
.ppscrubberdrag {background-color: transparent; cursor: pointer; height: 6px; left: 0; position: absolute; top: 0; width: 97%; margin-left:1.5%; z-index: 302;}
.ppplayhead, .pploaded {-webkit-backface-visibility: hidden; bottom: 0; cursor: pointer; display: block; height: 6px; left: 0; position: relative; -webkit-transform: translate3d(0,0,0); -webkit-transition: width .1s linear; -moz-transition: width .1s linear; -o-transition: width .1s linear; transition: width .1s linear;width: 1px; z-index: 301; }
.ppplayhead {margin-top: -6px; z-index:100; background-color: #FFF;}
div.ppcuepoint {background-color: #fff; opacity: .3; height:6px;}
.pploaded {background: #696a6a; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; filter: alpha(opacity = 80); opacity: .8; position: relative; z-index: 10; }
.ppdisplay.active img{ width:100%;}
.type5 .ppdisplay > div:first-child > img {width: 96% !important; left: 2% !important; height: 96% !important; top: 2% !important;}

/*sound*/
.pptimeleft > div:first-child {right: auto; left:10px;}
.pptimeleft > div {position: absolute; top:5px; right: 10px;}
.phone .pptimeleft {display: none;}

/*workarounds*/
.filter, .sortwrapper {margin-top:25px !important;margin-bottom:25px !important;}
.sortwrapper div {position: relative;}
.facetajaxcover {background: none repeat scroll 0 0 #e6e8e9; height: 30px;border: 1px solid #dedede; margin-bottom:10px; margin-top:15px; width:99.8%;}
.list div.on {background: url(../Image/ajaxloader.gif) no-repeat center; height:25px;}
.list .ajaxreload a {display:none;}

/* visually hidden */
.hidden { clip: rect(0 0 0 0); overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; border: 0; }


/* AUDIO*/
.audio {position: relative; height: 100%;}
.audio object {width: 96%; width: 96%; margin:2% 0 0 2%; position: absolute; top:0; left:0;}
.audio span {z-index: -1; display: none;}
.audio span:first-child{z-index: 0; display: block;}

.phone .maxwidth250 {max-width:250px; float: right;}
.phone .maxwidth250:after {clear:both;}

.nocolor .timeline li span {box-sizing: border-box; border: 2px ridge;}
.ppbuffering {display: none !important;}

/* keyboard navigation special styles */
.facetMultiselectContainer {padding:0;border-bottom:1px solid #cbcccd;}
.facetMultiselectContainer input {margin:0 3px;padding:0; vertical-align:middle;cursor:default;}
.facetMultiselectContainer label {padding:0 2px; vertical-align:middle;font-size:14px;line-height:14px;}
.facetMultiselectContainer > fieldset {padding:0 0 2px;width:23.95%;margin-left:1.4%;display:inline-block;vertical-align:top;}
.facetMultiselectContainer > fieldset:first-child {margin-left:0;}
.facetMultiselectContainer > fieldset.focus {outline:1px solid #cbcccd;}
.facetMultiselectContainer > fieldset > div {font-size:0;line-height:14px;}
.facetMultiselectContainer > fieldset > div.focus {background-color:#e6e8e9;}

.sortwrapper select {width:23.95%;padding:0 5px;font-size:16px;}

/* Topic-Intro */
.topic-intro {
	border-top: 1px solid #cbcccd;
}

body.page.desktop .topic-intro {
	padding-right: 35%;
	padding-left: 0;
	/*overflow: hidden;*/
}

body.page.tablet .topic-intro,
body.page.phone .topic-intro {
	padding: 0;
}

body.page .topic-intro h3 {
	border-top: 0;
}

.topic-intro a,
.topic-intro p {
	padding: 0 !important;
}
.topic-intro strong {
	font-weight: bold;
}
body.page .topic-intro :last-child {
	margin-bottom: 0;
}
.tablet .topic-intro .expander {
	display: inline-block;
	margin-top: 10px;
}
.topic-intro .expander.expanded:before {
	content: 'x';
}
.topic-intro .expandable {
	display: none;
	margin-bottom: 10px;
	overflow: hidden;
}
.topic-intro .expandable + p {
	clear: left;
}
.topic-intro .expander:before {
	content: 'w';
	margin-left: 2px;
	margin-right: 5px;
	font-family: 'Icons';
	position: relative;
	top: 1px;
}
.desktop .topic-intro img,
.tablet .topic-intro img {
	float: left;
	margin-right: 25px;
	margin-bottom: 25px;
}

.phone .topic-intro img {
	display: inline-block;
	margin-bottom: 25px;
}

.topic-intro ul {
	margin-left: 20px;
	clear: left;
}

.topic-intro a{color:#0778a5; font-weight: bold;}