@import url(https://fonts.googleapis.com/css?family=Merriweather:700|Merriweather+Sans:100,200,400,700,400italic&subset=latin,latin-ext);

body, html   { font-family:'Merriweather Sans', Calibri, Myriad, Arial, sans-serif; font-size: 100%; font-weight: 100; margin: 0px; /*-webkit-font-smoothing: antialiased; text-rendering: optimizelegibility*/ }
body         { background:#fff; color: #494949; }

h1,h2,h3     { font-family:'Crete Round',serif; color: black; margin-bottom: 20px }

.clear       { clear:both; height: 0px; width:100% }
.nobr        { white-space: nowrap }
.nowrap *    { white-space: nowrap }
.center      { text-align: center }
.hidden      { display: none }
.unvisible   { visibility: hidden }
.clickable   { cursor: pointer }
.relative    { position: relative }
.align-r     { text-align: right }
.float-r     { float: right }

a img        { border: none; }
a            { color: #C6001C; text-decoration: none; }
a:hover      { text-decoration: none }
a.rounded-button, .rounded-button { display: inline-block; border: 1px solid #cb7d87; color: #fff; padding: 4px 4px; border-radius: 12px }
a.rounded-button:hover { background: #fff; color: #C6001C; border-color: #fff }
a.rounded-button { font-size: 80%; padding: 5px 10px }
.rounded-button a { color: #fff }
.rounded-button i.off { opacity: 0 }
.rounded-button i.off:hover { opacity: .5 }
.lineheight  { line-height: 140% }

h1,h2,h3     { font-family: 'Merriweather', serif; font-weight: 700 }

.col1-3 { width: 31%; margin: 0 2% 0 0; box-sizing: border-box; float: left }
.col2-3 { width: 61%; margin: 0 2% 0 0; box-sizing: border-box; float: left }
.col1-2 { width: 48%; margin: 0 2% 0 0; box-sizing: border-box; float: left }



/* Sample page: */
/* included elements can be affected by nnx.cms.css */

.inner-margin { margin:0 15px }
.container { max-width: 1100px; margin: 0 auto; position: relative }

header, main, footer { width: 100% }

/*Colors */
.bgcolor-gray { background: #121B1E  }
.bgcolor-red { background: #C6001C; color: #fff }




/* HEADER */
.top-bar { padding: 25px 0 10px 0 }
.top-bar div div {  }
.top-bar .logo { float: left; width: 30%; font-weight: 600; font-size: 120% }
.top-bar .logo small { font-weight: 100; font-size: 40% }
.top-bar .logo img { margin-top: 10px; opacity: 1 }
.top-bar a .logo { color: #fff; }
.top-bar .adress {float: left; width: 30%; font-size: 80%  }
.top-bar .museum-list { float: left; width: 17%; text-align: center }
.top-bar .lang-select { float: right; width: 17%; text-align: right }
#Splash { width: 100%; overflow: hidden; max-height: 240px }
.splash-image img { max-width: 100%; margin: 0; padding: 0; transition: opacity .8s ease-in-out }
.splash-image .outer-splash { position: relative }
.splash-image .inner-splash { position: absolute }
#SplashPreLoader { text-align: center; color: gray; line-height: 200%; font-size: 90%; padding: 80px 0 0 0 }

/* MENU */
.h-menu { padding: 25px 0 8px 0; color: #000 }
.h-menu a { font-weight: 600; font-size: 85%; color: #000; padding-right: 15px }
.h-menu a:hover { color:#C6001C }

.h-menu a.am-select { color:#C6001C }

#RollMenu { position: absolute; left: 0; top:0; width: 100%; z-index: 1000; max-height: 0px; overflow: hidden;  }
#RollMenu #m1,#RollMenu #m2,#RollMenu #m3,#RollMenu #m4, #RollMenu #m5 {display: none }
#RollMenu .container { padding: 25px 0; line-height: 150%; font-size: 90% }
#RollMenu .container strong { display: block; padding: 5px 0 15px 0; border-top: 2px solid #fff; }
#RollMenu .container a { color: #fff; padding: 3px 0; display: inline-block; font-weight: 300 }
#RollMenu .container a:hover { text-decoration: underline; color: #fff }
#RollMenu .container .black * { color: #000; border-color: #000 }

.search { display: block; width: 100%; text-align: center; padding: 60px 0 20px 0; font-size: 120% }
.search input[type=text] { border: none; background: none; border-bottom: 1px solid #ecc2c2; padding-bottom: 4px; width: 50%; max-width: 450px; font-size: 120%; color: #fff }
.search input[type=submit] { display: inline-block; background: none; border: 1px solid #ecc2c2; color: #fff; padding: 6px 15px; border-radius: 15px; font-size: 100%; font-weight: 100; cursor: pointer} 
.search input[type=submit]:hover { background: #ef0021 }



/* HOMEPAGE */
.news-box { width: 90%; float: left; margin: 0 10% 20px 0; font-size: 100%; line-height: 130%; text-align: left }
.news-box a { text-decoration: none !important }
.news-box a p { color: black }
.news-box a p span { display: block; font-style: italic; font-size: 9 0%; line-height: 150% }
.news-box a:hover p { color: #C6001C}
.news-box a:hover p strong { text-decoration: underline }

.video-board { margin-top: 50px }
.video-box-cover{ background: #e7e7e7; width: 31%; float: left; margin: 0 2% 40px 0; height: 230px; border-radius: 8px; }
.video-box { width: 100%; height: 230px; background: #f64e04; color: #fff; border-radius: 8px; cursor: pointer; transition:margin .2s ease-in-out }
.video-box:hover { margin-top: -15px }
.video-box:hover .preview .icon { opacity: .8 }
.video-box .title { height: 60px; overflow: hidden }
.video-box .title p { font-size: 80%; padding: 8px 12px; font-weight: bold }  
.video-box .preview { height: 160px; position: relative; overflow: hidden; background: #121B1E; text-align: center }
.video-box .preview i.icon { position: absolute; top:50px; left:45%; font-size: 300%; opacity: .3; transition:opacity .2s ease }

#VideoBox { position: fixed; z-index: 999; display: none; left: 0; top:0; right:0; bottom:0; background: rgba(0, 0, 0, 0.8) }
#VideoBox .video-center { position: relative; width:640px; margin: 100px auto 0 auto; text-align: center }
#VideoBox .video-center img { margin-bottom: 12px }
#VideoBox .video-handlers { text-align: center; margin-top: 15px }
#VideoBox .video-handlers span, .homepage-promo span  { color: #fff; display: inline-block; border: none; border-radius: 3px; margin: 5px; font-size: 120%; padding: 8px 12px }
#VideoBox .video-handlers span.close-video { background: none; color: silver; border:1px solid silver; border-radius: 16px}
#VideoBox .video-handlers span.close-video:hover { background:#f64e04; border-color: #f64e04; color: #000   }
#VideoBox #videoTitle { color: #fff; font-size: 130%; font-family:'Open Sans', Calibri, Myriad, Arial, sans-serif;  }





/* MAIN */
main { padding: 35px 0 }
main nav.chapter-nav a { margin: 0 8px 12px 0 }



/* FOOTER */
footer { padding: 15px 0; font-size: 80%; color: silver }
footer .impressum { line-height: 170%; width: 33%; float: left } 
footer .impressum a.author { color: #6b7274 }
footer .impressum a.author:hover {text-decoration: underline }

footer .partners { float: left; } 

footer .maintainer { float: right } 
footer .maintainer img { margin: 25px 0 }
footer .maintainer a i { color: silver; font-size: 200%; margin-right: 10px }
footer .maintainer a:hover i { color: #fff }


/* [MAPA] */
#nnx_mapa { width: 100%; min-height: 500px }

 
/* [CMS]  */
.nnx-cms     { /* CMS generated content in nnx.cms.css */ }


/* [CMS] fulltext results */
p.search-result { padding: 8px 0 8px 0; border-bottom: 1px dotted silver }
p.search-result b { font-size: 125%; font-family:'Crete Round',serif; color:#C6001C }
p.search-result span { color: gray; font-size: 90% }


/* [CMS] form validator */
input.correct   { border: 1px solid #00bfff }
input.incorrect { border: 1px solid red }
.preloader      { width: 100%; text-align: center; padding: 100px 0 100px 0 }

/* [CMS] download */
a.file-link b { text-decoration: none }
.nnx-file { width: auto; float: left; background:#C6001C; font-size: 80%; border-radius: 4px; padding: 5px 16px; text-decoration: none  }
.nnx-file a, .nnx-file a b { color: #fff }
.nnx-file a b {font-size: 120%}
.nnx-file a small { font-size: 80%; display: block; max-height: 0px; overflow: hidden; transition:max-height .3s ease-in-out }
.nnx-file:hover a { text-decoration: none;  }
.nnx-file:hover a small { max-height: 50px }
.nnx-file:before { content: "\f0ed"; font-size: 150%; margin-right: 8px; font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit; color: #fff }
.nnx-file a.file-link b{ color: #fff !important }

/* [CMS] gallery */
.gallery-list-box { position: relative; width: 250px; height: 200px; float: left; margin: 10px; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden }
.gallery-list-box h2 { position: absolute; width: 100%; padding: 8px; background: rgba(255, 255, 255, 0.7); left: 0; bottom: 0; }
.gallery-list-box h2 span { padding: 10px; display: inline-block; font-size: 80%; overflow: hidden }
.gallery-list-box:hover h2 { background: rgba(0, 178, 243, 0.7); color: #fff;  }





@media screen and (max-width: 820px) {  
   .screen { display: none; visibility: hidden }
  

   /* [CMS] gallery */
   .gallery-list-box { position: relative; width: 45%;}   
}   


@media screen and (max-width: 600px) {  	
   
   /* [CMS] gallery */
   .gallery-list-box { position: relative; width: 100%; margin: 0 0 20px 0  }
}