about-brochure/css/main.css

/* =============
|  Loading fonts
|============ */

@font-face {
    font-family: quicksand;
    src: local('Quicksand-Regular'), local('Quicksand Regular'),
         url(./Quicksand-Regular.ttf) format('truetype');
}

/* =============
|  General
|============ */

* { z-index: 1; }
html { margin 0; padding: 0; }
body { margin: 0; background: #FFF; font-size: 1.2em; font-family: quicksand; line-height: 1.5em; text-align: justify; }

a { text-decoration: inherit; color: inherit; }

h1, h2, h3, h4 { padding: .5em 0; color: #646464; }
h1             { margin: 0; padding: 10vh 0; margin-bottom: .5em; color: #FFF; text-shadow: -1px -1px 0 #646464, 1px -1px 0 #646464, -1px 1px 0 #646464, 1px 1px 0 #646464; }
h2             { color: #F00; }

#aboutMuseum-Digital h1 { background: url(../media/Screenshot-Startpage.png) no-repeat center center; background-size: cover; }
#aboutPresseberichte h1 { background: url(../media/TitlePage/06073815564.jpg) no-repeat center center; background-size: cover; }

body > *    { padding: 2em 5vw; }
body > main { padding: 0 0 2em 0; }
body > main > * { padding-left: 5vw; padding-right: 5vw; }

a.buttonLike { padding: .8em 1.0em; background: #F00; color: #FFF;
               border: #D6D6D6; border-radius: .3em;
                box-shadow: 2px 2px 4px #D6D6D6, -2px -2px 4px #D6D6D6;
               transition: background .4s, color .4s; }
a.buttonLike:hover { background: #C11; color: #FFF; }

.centerVertically { vertical-align: middle !important; }

div.placeHolder { display: none; }

/* =============
|  Structure elements
|============ */

/* =======
|  Navigation
|====== */

body > nav     { position: sticky; top: 0; left: 0;
                 display: flex; padding-top: 0; padding-bottom: 0;
                 background: #333; color: #EEE; border-bottom: #D6D6D6; box-shadow: 2px 2px 2px #333; }
body > nav > * { display: inline-block; flex: 1; padding: .6em .5em; vertical-align: middle; }

nav > a[href="#bottom"] { text-align: right; padding: .4em .5em; }
nav > a[href="#bottom"]:before { content: " \002193 "; display: inline-block; padding: .2em .5em;
                                 background: #EEE; color: #333; border-radius: 100%;
                                 transition: background .4s, color .4s; }
nav > a[href="#bottom"]:hover:before { background: #F00; color: #FFF; }

/* =======
|  Sections
|====== */

@media screen and (min-width: 70em) {

    section > div > div     { display: inline-block; width: 45%; vertical-align: top; }
    section > div > div:last-child    { padding-left: 9.5%; }
    section > div > div:only-child    { display: block; width: initial; padding-right: initial; }

}
section > div > div img { display: block; width: 100%; }

#introduction > div > div { display: block; width: initial; padding-right: initial; }

/* =======
|  Defined lists (as <ul>)
|====== */

ul.dl             { margin: 0; padding: 0; }
ul.dl > li        { margin: 0 0 0 1em; padding: 0; list-style: none; }
ul.dl > li:before { content: attr(data-title); display: block; font-weight: bold; margin-left: -1em; }

/* =======
|  Footer for options
|====== */

#optionsFooter     { display: flex; flex-flow: row wrap; padding: 1em 0; border-top: 1px solid #D6D6D6; }
#optionsFooter > * { display: inline-block; flex: 1; min-width: 40%; max-width: 49%; }

#optionsFooter ul      { margin: 0; padding: 0; list-style: none; }
#optionsFooter ul > li { margin: 0; padding: 0; }
#optionsFooter ul > li > a { display: block; margin: 0; padding: .5em;
                             border-bottom: 1px solid #D6D6D6; transition: background .4s; }
#optionsFooter ul > li > a:hover { background: #EEE; }

#optionsLangs      {  }
#optionsLangs > li > a > *    { vertical-align: middle; }
#optionsLangs > li > a:before { content: " \01F4AC "; display: inline-block; margin-right: .5em; }

/* =============
|  Animations
|============ */

@keyframes fade-in {
    from { opacity: .4; }
    to   { opacity:  1; }
}