/** Wraps any styles in a retina media query. */ /** Wraps any styles in a retina media query. */ /** Option variable to define the spacing between images in the generated sprite */ /** A mixin to create retina sprites with hover & active states You have to register a pair of sprites using `@link #retina-sprite-add` and then you can use this mixin: @include retina-sprite-add(icons, "icons/*.png", "icons-retina/*.png") .my-icon @include retina-sprite(icon-name, icons) @param String $name @param String [$sprite-name] @param Boolean [$hover=false] @param Boolean [$active=false] */ /** @param String $name @param String $path @param String $path2x */ /** Wraps any styles in a retina media query. */ /** Mixin for retina backgrounds where you can't use a sprite. - Make sure you have a file@2x.png file additional to your file.png. - The mixin prepends $imgPath, which should be set globally at some point. Default is: "img/" Examples: li @include retina-background(arrow, no-repeat 10px 15px) a.external @include retina-background(external, no-repeat right) @param {String} $file Path to file relative to images folder defined in config.rb and without a file extension @param {Object} [$attr] Additional attributes like position or repetition. E.g. `no-repeat top right` @param {String} [$type] The file type. */ /* --- START SPRITES CONFIG --- */ /* --- END SPRITES CONFIG --- */ header, section, div, p { box-sizing: border-box; } header { position: absolute; top: 0; left: 0; width: 100%; z-index: 9; } .home #masthead, .home #footer { background: transparent; } .home #footer { padding-top: 0; width: auto; left: initial; right: 0; } .home #footer.menu-open { width: 100%; } .home #footer .main-navigation, .home #footer .site-info { display: none; } .home #masthead { position: absolute; background: transparent; } .home.menu-open #masthead { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYzBlMCIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjdmYzAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, rgba(161, 192, 224, 0.7)), color-stop(100%, rgba(66, 127, 192, 0.8))); background-image: -moz-linear-gradient(top, rgba(161, 192, 224, 0.7), rgba(66, 127, 192, 0.8)); background-image: -webkit-linear-gradient(top, rgba(161, 192, 224, 0.7), rgba(66, 127, 192, 0.8)); background-image: linear-gradient(to bottom right, rgba(161, 192, 224, 0.7), rgba(66, 127, 192, 0.8)); } .home #page { height: 100%; color: #ffffff; } .home #nl_footer_abo_form { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYzBlMCIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjdmYzAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(161, 192, 224, 0.7)), color-stop(100%, rgba(66, 127, 192, 0.8))); background-image: -moz-linear-gradient(bottom, rgba(161, 192, 224, 0.7), rgba(66, 127, 192, 0.8)); background-image: -webkit-linear-gradient(bottom, rgba(161, 192, 224, 0.7), rgba(66, 127, 192, 0.8)); background-image: linear-gradient(to top right, rgba(161, 192, 224, 0.7), rgba(66, 127, 192, 0.8)); background-color: transparent; border: none; margin-bottom: 12px; } .home #abo_form_content { padding: 0; } #intro_content, .bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #intro_content { z-index: 9; } .text-container { width: 100%; height: 100%; font-family: "Merriweather", "Times New Roman", serif; font-size: 20px; font-size: 5.5vw; padding: 0 5%; letter-spacing: 0.06em; font-style: italic; line-height: 1.2; } .text { position: absolute; left: 0; right: 0; width: calc(100% - 82px); max-width: 850px; margin: 0 auto; text-align: center; } .text p { margin: 0.5em 0; } .text p.book-title { font-style: normal; } .text p.book-title a { text-transform: uppercase !important; } span.linebreak { display: block; } span.mobile-linebreak { display: inline; } #teaser_nav { position: absolute; top: 80%; left: 0; right: 0; margin: 0 auto; max-width: 400px; height: 45px; overflow: hidden; display: flex; justify-content: center; } #teaser_nav > div, #teaser_nav > ul, #teaser_nav li { float: left; } #teaser_nav ul { margin: 0 15px; } #teaser_nav li { font-size: 34px; padding: 0 5px; font-family: "Merriweather", "Times New Roman", serif; } #teaser_nav a { font-style: normal; } #teaser_nav a.current, #teaser_nav a.current:hover { color: #cccccc; cursor: default; } .teaser-nav-btn { position: absolute; top: 49%; } .teaser-nav-btn .btn { display: block; text-indent: 9999px; } #weiter { right: 0; } #zurueck { left: 0; } #zurueck_button { background-image: url('assets/img/sprites-s1c4e6d74be.png'); background-position: 0 -504px; background-repeat: repeat-y; height: 36px; width: 36px; /** Option variable to turn on/off IE8 support. This requires Modernizr's test for `css-mediaqueries` and RespondJS Set to `1` to turn on support. */ } #zurueck_button:hover { background-position: 0 -650px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #zurueck_button { background-image: url('assets/img/sprites-retina-s885042aa4e.png'); -moz-background-size: 46px 774px; -o-background-size: 46px 774px; -webkit-background-size: 46px 774px; background-size: 46px 774px; background-position: 0 -504px; } #zurueck_button:hover { background-position: 0 -650px; } } #weiter_button { background-image: url('assets/img/sprites-s1c4e6d74be.png'); background-position: 0 -288px; background-repeat: repeat-y; height: 36px; width: 36px; /** Option variable to turn on/off IE8 support. This requires Modernizr's test for `css-mediaqueries` and RespondJS Set to `1` to turn on support. */ } #weiter_button:hover { background-position: 0 -434px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #weiter_button { background-image: url('assets/img/sprites-retina-s885042aa4e.png'); -moz-background-size: 46px 774px; -o-background-size: 46px 774px; -webkit-background-size: 46px 774px; background-size: 46px 774px; background-position: 0 -288px; } #weiter_button:hover { background-position: 0 -434px; } } .bg, .text { display: none; } .bg.s-1, .text.s-1 { display: block; } .bg { background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; } #bg_1 { background-image: url('assets/img/1024/JPSendker_01_Autor_1024.jpg?1475676910'); } #bg_2 { background-image: url('assets/img/1024/JPSendkerINTRO_2.jpg?1474959117'); } #bg_3 { background-image: url('assets/img/1024/JPSendker_03_Herzenhoeren_1024.jpg?1475675870'); } #bg_4 { background-image: url('assets/img/1024/JPSendker_04_DasFluesternderSchatten_1024.jpg?1475675005'); } #bg_5 { background-image: url('assets/img/1024/JPSendker_05_Drachenspiele_1024.jpg?1475766989'); } #bg_6 { background-image: url('assets/img/1024/JPSendker_06_HerzenstimmenFS_1024.jpg?1476347256'); background-position: center top; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } .bg-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; } body.home { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYzBlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQyN2ZjMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #a1c0e0), color-stop(100%, #427fc0)); background-image: -moz-linear-gradient(top, #a1c0e0, #427fc0); background-image: -webkit-linear-gradient(top, #a1c0e0, #427fc0); background-image: linear-gradient(to bottom right, #a1c0e0, #427fc0); } #intro_content p { line-height: 1.3; letter-spacing: 0.02em; } #intro_content a { color: #ffffff; font-family: "Merriweather", "Times New Roman", serif; text-decoration: none; text-transform: none; } #intro_content a:hover { color: #ebebeb; } .black { background-color: #000000; } .white { background-color: #ffffff; } .text-gray { color: #b3b3b3; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } @media only screen and (max-height: 568px) and (orientation: portrait) { #bg_1 { background-image: url('assets/img/768/JPSendker_01_Autor_568_portrait.jpg?1475877088'); } #bg_2 { background-image: url('assets/img/1024/JPSendker_02_Ende_der_Nacht_1024_portrait.jpg?1476968585'); } #bg_4 { background-image: url('assets/img/768/JPSendker_04_DasFluesternderSchatten_568_portrait.jpg?1476191563'); } #bg_6 { background-image: url('assets/img/768/JPSendker_06_HerzenstimmenFS_568_portrait.jpg?1476347654'); } } @media only screen and (min-height: 569px) and (orientation: portrait) { #bg_1 { background-image: url('assets/img/1024/JPSendker_01_Autor_1024_portrait.jpg?1475876790'); } #bg_2 { background-image: url('assets/img/1024/JPSendker_02_Ende_der_Nacht_1024_portrait.jpg?1476968585'); } #bg_4 { background-image: url('assets/img/1024/JPSendker_04_DasFluesternderSchatten_1024_portrait.jpg?1476191461'); } #bg_6 { background-image: url('assets/img/1024/JPSendker_06_HerzenstimmenFS_1024_portrait.jpg?1476347556'); } } @media only screen and (max-width: 767px) { #icon_menu { position: absolute; bottom: 10px; right: calc(4% + 43px); } #icon_menu_nav { margin-bottom: 0; } } @media only screen and (max-width: 767px) { span.mobile-linebreak { display: block; } } @media only screen and (max-width: 767px) and (orientation: landscape) { .text-container { font-size: 32px; font-size: 2.8vw; } } @media only screen and (min-width: 480px) { .text { width: 76%; } #icon_menu-toggle { margin-bottom: 0; } } @media only screen and (min-width: 568px) { .text-container { font-size: 17px; font-size: 2.8vw; } } @media only screen and (min-width: 568px) and (max-width: 768px) and (orientation: landscape) { #weiter { bottom: 8%; } } @media only screen and (min-width: 736px) { #weiter { right: 5%; } #zurueck { left: 5%; } } @media only screen and (min-width: 768px) and (orientation: landscape) { .text { width: 70%; } } @media only screen and (min-width: 768px) { h2 { font-size: 1.7em; } .desk-linebreak { display: block; } } @media only screen and (min-width: 769px) and (orientation: landscape) { #bg_1 { background-image: url('assets/img/1024/JPSendker_01_Autor_1024.jpg?1475676910'); } #bg_2 { background-image: url('assets/img/1024/JPSendker_02_Ende_der_Nacht_1024.jpg?1476968447'); } #bg_3 { background-image: url('assets/img/1024/JPSendker_03_Herzenhoeren_1024.jpg?1475675870'); } #bg_4 { background-image: url('assets/img/1024/JPSendker_04_DasFluesternderSchatten_1024.jpg?1475675005'); } #bg_5 { background-image: url('assets/img/1024/JPSendker_05_Drachenspiele_1024.jpg?1475766989'); } #bg_6 { background-image: url('assets/img/1024/JPSendker_06_HerzenstimmenFS_1024.jpg?1476347256'); } } @media only screen and (min-width: 1024px) { .text-container { font-size: 32px; } } @media only screen and (min-width: 1024px), only screen and (min-height: 561px) and (orientation: landscape) { #bg_1 { background-image: url('assets/img/2500/JPSendker_01_Autor_2500.jpg?1475676899'); } #bg_2 { background-image: url('assets/img/2500/JPSendker_02_Ende_der_Nacht.jpg?1476965562'); } #bg_3 { background-image: url('assets/img/2500/JPSendker_03_Herzenhoeren_2500.jpg?1475675858'); } #bg_4 { background-image: url('assets/img/2500/JPSendker_04_DasFluesternderSchatten_2500.jpg?1475674951'); } #bg_5 { background-image: url('assets/img/2500/JPSendker_05_Drachenspiele_2500.jpg?1475766961'); } #bg_6 { background-image: url('assets/img/2500/JPSendker_06_HerzenstimmenFS_2500.jpg?1476347230'); } } /*# sourceMappingURL=intro.css.map */