/* 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);}
*:not(input){-webkit-touch-callout:none; /*-webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;*/	}

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;}
*{cursor: default;}
a, a *{cursor: pointer;}
br{display: inline !important;}
input, textarea{cursor: text; 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; 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);}}

body.library, body.story{background: #e6e8e9; height: auto;}



/* LIBRARY */
body.library > i{display: block; position: absolute; width: 10px; height: 10px; background: #f00;}
body.library > ul{display:block; list-style-type: none; list-style-image: none; position: relative; width:inherit; overflow: hidden;}
body.library > ul > li {list-style-image: none; list-style-type: none;}
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:#666666 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:#4c4b4b;}
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 .paging{top:10px; 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 .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:#666666;}




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 .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;}


/* 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;}

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';}

/* SIDEMENU */
.sideMenu{list-style: none; display: block; position: static;left:0; top:0; z-index: 2; background: #fff; 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.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: 58%; 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:58%\9;}
.sideMenu.det + span{width:100%;}

.sideMenu > h3{width:140px; cursor: pointer; position: relative; z-index: 11; vertical-align:top; display:block; float: left; background:#666666; box-shadow:0 1px 0 rgba(0,0,0,0.1); margin-bottom: 3px; line-height: 28px; 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{background-color: #888; cursor: default;}
.sideMenu > h3.empty > * {cursor:default;}
.sideMenu > h3.empty a:focus {outline: none;}
.sideMenu > h3{margin:0; font-size:0; width: 25%; min-width: 0; top:0; position:relative; display: block; padding:0; text-align: center; border-left:#fff 1px solid; height: 67px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
h3.videotoc {width: 100%; border-left: 0; border-top: 1px solid #fff;}
.sideMenu > h3:nth-of-type(1){border:0;}
.sideMenu > h3.on{background:#4c4b4b; padding-left:16px;}
/*.sideMenu > h3.on > a {background:#4c4b4b;}*/
.sideMenu > h3.on{padding-left: 0}
.sideMenu > h3.touch:not(.empty) {background:#4c4b4b;}
.sideMenu > h3:before{font-family:'Icons'; margin-right: 8px; font-weight: normal;}

.sideMenu > h3:before{font-size: 26px; line-height:45px; margin:0;}
.sideMenu > h3 > a {background-color: transparent; position: absolute; bottom:2px; top:0; padding-top: 32px; font-size: 11px; left:0px; 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 > h3.videotoc:before{content: 'X'; margin-right: 8px;}

.sideMenu > h3 button{opacity:0; font-size:0 !important; background-color:transparent !important; visibility:hidden; position: fixed; line-height: 18px; font-size: 18px; right: 7%; top:35px; 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:17px; 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: 60px; bottom: 87px; 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%;}
.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;}
 .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%;}
 .sideMenu > div > *{width: auto; padding-left:20px; margin-right: 20px; box-sizing:border-box; -moz-box-sizing: border-box;}
.sideMenu > div > *:first-child {margin-top: 55px;}
.sideMenu > div > *:last-child{padding-bottom: 25px; margin-bottom: 40px;}
.sideMenu > div > dl, .tablet .sideMenu > div > dl, .sideMenu > div > i.r{width:50%; right:2%; position: absolute; display: none;}
 /*.sideMenu > div > dl,  .sideMenu > div > i{position: static; display: block; width: auto;}*/
 .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() .sideMenu > div > dl dt{background: rgba(230,232,233,0.92);}
.sideMenu > div > dl.extra dt span{position:absolute; left: -5px; 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() .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() .sideMenu > div > dl.extra dd {background: rgba(230,232,233,0.92);}
.tablet .sideMenu > div > dl.extra dd{width:48%; padding-left:10%;}
 .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;}
.sideMenu > div > dl.extra dd > *:last-child{margin-bottom: 35px}
 .sideMenu > div > dl.extra dd > *:last-child{margin-bottom: 25px}
 .sideMenu > div > dl.extra dd.on{display: block;}
.sideMenu dt {margin:1px;}
.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;} 
 .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;}
 .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%;}

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

.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;}
.in-text-link, .timejump {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;}

.sideMenu > div p{font-size: 18px; line-height: 24px;}
.sideMenu > div h3{font-size: 28px; line-height: 34px;}
.sideMenu hr{margin-top: 20px; margin-bottom: 20px}


.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%;}
.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; 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 {border: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 .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;}