//The style tree .page-navi { .ie-7 &, .ie-8 & { //We hide the offcanvas navigation for old browsers in order to show the old-browser-notice display: none; } .branding { display: block; width: 100%; max-height: rem(200px); padding: rem(20px) rem(40px); text-align: center; overflow: hidden; img { height: 100%; width: auto; margin: 0 auto; } } } .page-wrap { width: 100%; overflow: hidden; transform: translateX(0); @extend %animated-transform; @include breakpoint(medium) { transform: none; } } .header { //if you have prosition fixed for the header remove the transform attribute transform: translateX(0); @extend %animated-transform; background: $light; position: relative; width: 100%; @include breakpoint(medium) { transform: none; } margin-bottom: rem(66px); z-index: 10; .branding { display: block; text-align: center; position: relative; @include breakpoint(small) { display: inline-block; float: left; padding-left: 40px; } @include breakpoint(medium) { padding-left: 0; } &:after { content: ''; position: absolute; width: rem(350px); height: rem(31px); top: rem(-3px); left: calc(100% + 20px); display: none; background: { image: image-url('claim.png'); position: center right; repeat: no-repeat; size: contain; } @include breakpoint(small) { display: inline-block; } @include breakpoint(medium) { width: 421px; height: 31px; } @include breakpoint(giant) { position: relative; top: rem(12px); left: rem(14px); } } body:not(.index) & { @include breakpoint(medium) { white-space: nowrap; width: 167px; } } img { max-width: 100%; height: auto; } } .navigation { position: absolute; top: 0; left: 0; right: 0; background: $light; padding: rem(27px) 0 rem(16px); z-index: 11; @include breakpoint(large) { position: fixed; } .ie-7 &, .ie-8 & { position: absolute !important; } .scroll & {padding: 0;box-shadow: 0 5px 10px rgba(0,0,0,0.5);} .scroll &, body:not(.index) & { @include breakpoint(medium) { padding: rem(10px) 0 rem(10px); } } .top-info {margin-bottom: rem(32px);} .opening-hours, .contact { line-height: rem(22px); margin-top: rem(47px); width: 100%; text-align: center; .scroll &, body:not(.index) & { @include breakpoint(medium) { margin-top: rem(27px); } } @include breakpoint(tiny) { width: 50%; } @include breakpoint(small) { width: auto; text-align: left; } a { color: $dark; text-decoration: underline; &:hover { text-decoration: none; } } } .opening-hours { @include breakpoint(small) { margin-right: rem(9px); } } .contact { @include breakpoint(small) { margin-right: rem(27px); } } } } .slideshow { .slider { .slide { height: 600px; background: { position: center; repeat: no-repeat; size: cover; } position: relative; .cmsbackend &:not(:first-child), .nojs &:not(:first-child) { display: none !important; } } } } .content { background: { color: $light; } padding-bottom: rem(98px); .claim { font: { family: $display-font; size: rem(25px); } color: $primary; line-height: 1.7; } .slides-container { body:not(.cmsbackend) & { counter-reset: slides; .slide { padding-left: 160px; background-position: center left; background-size: 150px; background-repeat: no-repeat; counter-increment: slides; &:before { content: 'Slide 'counter(slides); display: block; } } } } } .breakfix { @include breakpoint(tiny) { display: none; } @include breakpoint(small) { display: block; } @include breakpoint(large) { display: none; } } .section- { &news { padding: rem(22px) 0 rem(71px) 0; background: #f0e3b7; .title { color: $primary; font: { family: $display-font; size: rem(25px); } line-height: 1; padding: rem(20px) 0 rem(17px); &:before { content: ''; display: inline-block; width: rem(44px); height: rem(51px); background: { position: center; repeat: no-repeat; size: contain; } } } .aktuelles { .title:before { background-image: image-url('assets/lightbulb.svg'); float: left; margin-right: rem(10px); } } .tips { .title:before { background-image: image-url('assets/bell.svg'); float: right; } } } &newsletter { padding: rem(14px) 0 rem(19px); .btn {margin: 10px;} } &maps { position: relative; //height: rem(454px); padding: rem(100px) 0 rem(113px); .map-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparentize(#cceae2, .5); z-index: 2; } iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } } .row { z-index: 2; } .contact-box { background: $light; text-align: center; z-index: 2; padding-top: rem(36px); .branding { display: block; margin-bottom: rem(22px); } .address { margin-bottom: rem(34px); } .btn { color: $light; border-color: $primary; background: $primary; padding: rem(16px) rem(10px); &:hover, &:active, &:focus { border-color: $secondary; background: $secondary; } } } } } .footer {} // Styled lists dl.floatList { dt, dd { display: block; vertical-align: top; line-height: $base-line-height; } dt { padding-right: .5rem; min-width: 40%; clear: both; float: left; } dd { width: 60%; float: right; } } .unstyled { margin-bottom: 0; li { padding: 0; &:before { display: none; } } ul { margin: 0; } } // Misc .highlight { color: $primary; font-weight: bold; } .bewertet { margin-top:1em; display:inline-block; } .btn { background: transparent; border: 1px solid currentColor; color: $primary; cursor: pointer; display: inline-block; font-size: 1rem; line-height: 1rem; padding: .7rem 1rem; text-align: center; text-decoration: none; transition: 300ms all ease-in-out; &:hover, &:active, &:focus { background: transparent; color: $secondary; } *[class^="icon"] { margin-left: .5rem; vertical-align: middle; } } .googleMaps { border: none; height: em(350px); margin-bottom: 1.5rem; width: 100%; } .notification { padding: 1em; background: $alert; color: $light; font-size: 1.2em; } .fancy { position: relative; text-decoration: none; &:before { content: ""; position: absolute; width: 0; top: 100%; left: 0; height: 1px; background: $primary; transition: 300ms all ease-in-out; } &:hover:before { width: 100%; } }