@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-300.eot); src: local(''),
url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-300.eot?#iefix) format('embedded-opentype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-300.woff2) format('woff2'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-300.woff) format('woff'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-300.ttf) format('truetype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-300.svg#OpenSans) format('svg'); font-display: swap;
} @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-regular.eot); src: local(''),
url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-regular.eot?#iefix) format('embedded-opentype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-regular.woff2) format('woff2'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-regular.woff) format('woff'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-regular.ttf) format('truetype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-regular.svg#OpenSans) format('svg'); font-display: swap;
} @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src: url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-500.eot); src: local(''),
url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-500.eot?#iefix) format('embedded-opentype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-500.woff2) format('woff2'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-500.woff) format('woff'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-500.ttf) format('truetype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-500.svg#OpenSans) format('svg'); font-display: swap;
} @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-600.eot); src: local(''),
url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-600.eot?#iefix) format('embedded-opentype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-600.woff2) format('woff2'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-600.woff) format('woff'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-600.ttf) format('truetype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-600.svg#OpenSans) format('svg'); font-display: swap;
} @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-700.eot); src: local(''),
url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-700.eot?#iefix) format('embedded-opentype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-700.woff2) format('woff2'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-700.woff) format('woff'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-700.ttf) format('truetype'), url(//www.singer-bau.at/wp-content/themes/empty/css/fonts/open-sans-v34-latin-700.svg#OpenSans) format('svg'); font-display: swap;
} .hamburger {
padding: 5px 10px;
display: inline-block;
cursor: pointer;
transition-property: opacity, -webkit-filter;
transition-property: opacity, filter;
transition-property: opacity, filter, -webkit-filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger-box {
width: 30px;
height: 24px;
display: inline-block;
position: relative; }
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; } .hamburger--3dx .hamburger-box {
-webkit-perspective: 60px;
perspective: 60px; }
.hamburger--3dx .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
.hamburger--3dx.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dx.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dx-r .hamburger-box {
-webkit-perspective: 60px;
perspective: 60px; }
.hamburger--3dx-r .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx-r.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg); }
.hamburger--3dx-r.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dx-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dy .hamburger-box {
-webkit-perspective: 60px;
perspective: 60px; }
.hamburger--3dy .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg); }
.hamburger--3dy.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dy.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dy-r .hamburger-box {
-webkit-perspective: 60px;
perspective: 60px; }
.hamburger--3dy-r .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy-r.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.hamburger--3dy-r.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dy-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--arrow.is-active .hamburger-inner::before {
-webkit-transform: translate3d(-6px, 0, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-6px, 0, 0) rotate(-45deg) scale(0.7, 1); }
.hamburger--arrow.is-active .hamburger-inner::after {
-webkit-transform: translate3d(-6px, 0, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-6px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::before {
-webkit-transform: translate3d(6px, 0, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(6px, 0, 0) rotate(45deg) scale(0.7, 1); }
.hamburger--arrow-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(6px, 0, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(6px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowalt .hamburger-inner::before {
transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt .hamburger-inner::after {
transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: translate3d(-6px, -7.5px, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-6px, -7.5px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.hamburger--arrowalt.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: translate3d(-6px, 7.5px, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-6px, 7.5px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r .hamburger-inner::before {
transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt-r .hamburger-inner::after {
transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: translate3d(6px, -7.5px, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(6px, -7.5px, 0) rotate(45deg) scale(0.7, 1);
transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: translate3d(6px, 7.5px, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(6px, 7.5px, 0) rotate(-45deg) scale(0.7, 1);
transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
transition-property: none; }
.hamburger--boring.is-active .hamburger-inner {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.hamburger--boring.is-active .hamburger-inner::before {
top: 0;
opacity: 0; }
.hamburger--boring.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); } .hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.15s;
transition-delay: 0.15s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.32s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.15s;
transition-delay: 0.15s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r .hamburger-inner::after {
top: -20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse-r .hamburger-inner::before {
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, -10px, 0) rotate(45deg);
transform: translate3d(0, -10px, 0) rotate(45deg);
transition-delay: 0.32s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
.hamburger--collapse-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--elastic .hamburger-inner {
top: 2px;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic .hamburger-inner::before {
top: 10px;
transition: opacity 0.15s 0.4s ease; }
.hamburger--elastic .hamburger-inner::after {
top: 20px;
transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(135deg);
transform: translate3d(0, 10px, 0) rotate(135deg);
transition-delay: 0.1s; }
.hamburger--elastic.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0; }
.hamburger--elastic.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(-270deg);
transform: translate3d(0, -20px, 0) rotate(-270deg);
transition-delay: 0.1s; } .hamburger--elastic-r .hamburger-inner {
top: 2px;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic-r .hamburger-inner::before {
top: 10px;
transition: opacity 0.15s 0.4s ease; }
.hamburger--elastic-r .hamburger-inner::after {
top: 20px;
transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(-135deg);
transform: translate3d(0, 10px, 0) rotate(-135deg);
transition-delay: 0.1s; }
.hamburger--elastic-r.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0; }
.hamburger--elastic-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(270deg);
transform: translate3d(0, -20px, 0) rotate(270deg);
transition-delay: 0.1s; } .hamburger--emphatic {
overflow: hidden; }
.hamburger--emphatic .hamburger-inner {
transition: background-color 0.2s 0.25s ease-in; }
.hamburger--emphatic .hamburger-inner::before {
left: 0;
transition: top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic .hamburger-inner::after {
top: 10px;
right: 0;
transition: top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic.is-active .hamburger-inner {
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: transparent; }
.hamburger--emphatic.is-active .hamburger-inner::before {
left: -60px;
top: -60px;
-webkit-transform: translate3d(60px, 60px, 0) rotate(45deg);
transform: translate3d(60px, 60px, 0) rotate(45deg);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
.hamburger--emphatic.is-active .hamburger-inner::after {
right: -60px;
top: -60px;
-webkit-transform: translate3d(-60px, 60px, 0) rotate(-45deg);
transform: translate3d(-60px, 60px, 0) rotate(-45deg);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r {
overflow: hidden; }
.hamburger--emphatic-r .hamburger-inner {
transition: background-color 0.2s 0.25s ease-in; }
.hamburger--emphatic-r .hamburger-inner::before {
left: 0;
transition: top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic-r .hamburger-inner::after {
top: 10px;
right: 0;
transition: top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic-r.is-active .hamburger-inner {
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: transparent; }
.hamburger--emphatic-r.is-active .hamburger-inner::before {
left: -60px;
top: 60px;
-webkit-transform: translate3d(60px, -60px, 0) rotate(-45deg);
transform: translate3d(60px, -60px, 0) rotate(-45deg);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
.hamburger--emphatic-r.is-active .hamburger-inner::after {
right: -60px;
top: 60px;
-webkit-transform: translate3d(-60px, -60px, 0) rotate(45deg);
transform: translate3d(-60px, -60px, 0) rotate(45deg);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--slider .hamburger-inner {
top: 2px; }
.hamburger--slider .hamburger-inner::before {
top: 10px;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
transition-timing-function: ease;
transition-duration: 0.2s; }
.hamburger--slider .hamburger-inner::after {
top: 20px; }
.hamburger--slider.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--slider.is-active .hamburger-inner::before {
-webkit-transform: rotate(-45deg) translate3d(-4.2857142857px, -6px, 0);
transform: rotate(-45deg) translate3d(-4.2857142857px, -6px, 0);
opacity: 0; }
.hamburger--slider.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
transform: translate3d(0, -20px, 0) rotate(-90deg); } .hamburger--slider-r .hamburger-inner {
top: 2px; }
.hamburger--slider-r .hamburger-inner::before {
top: 10px;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
transition-timing-function: ease;
transition-duration: 0.2s; }
.hamburger--slider-r .hamburger-inner::after {
top: 20px; }
.hamburger--slider-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
transform: translate3d(0, 10px, 0) rotate(-45deg); }
.hamburger--slider-r.is-active .hamburger-inner::before {
-webkit-transform: rotate(45deg) translate3d(4.2857142857px, -6px, 0);
transform: rotate(45deg) translate3d(4.2857142857px, -6px, 0);
opacity: 0; }
.hamburger--slider-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(90deg);
transform: translate3d(0, -20px, 0) rotate(90deg); } .hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.15s linear; }
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.32s;
background-color: transparent; }
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--spring-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.15s;
transition-delay: 0s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r .hamburger-inner::after {
top: -20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
.hamburger--spring-r .hamburger-inner::before {
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.32s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spring-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.32s linear; }
.hamburger--spring-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand .hamburger-inner {
transition: background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear;
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand .hamburger-inner::before {
transition: top 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand .hamburger-inner::after {
transition: bottom 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand.is-active .hamburger-inner {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-color: transparent;
transition: background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear;
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: top 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: bottom 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r .hamburger-inner {
transition: background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear;
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r .hamburger-inner::before {
transition: top 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r .hamburger-inner::after {
transition: bottom 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r.is-active .hamburger-inner {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: transparent;
transition: background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear;
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: top 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: bottom 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin-r .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin-r .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin-r.is-active .hamburger-inner {
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze .hamburger-inner {
transition-duration: 0.1s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--vortex .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
transition-duration: 0s;
transition-delay: 0.1s;
transition-timing-function: linear; }
.hamburger--vortex .hamburger-inner::before {
transition-property: top, opacity; }
.hamburger--vortex .hamburger-inner::after {
transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
transition-property: bottom, transform, -webkit-transform; }
.hamburger--vortex.is-active .hamburger-inner {
-webkit-transform: rotate(765deg);
transform: rotate(765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
transition-delay: 0s; }
.hamburger--vortex.is-active .hamburger-inner::before {
top: 0;
opacity: 0; }
.hamburger--vortex.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } .hamburger--vortex-r .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
transition-duration: 0s;
transition-delay: 0.1s;
transition-timing-function: linear; }
.hamburger--vortex-r .hamburger-inner::before {
transition-property: top, opacity; }
.hamburger--vortex-r .hamburger-inner::after {
transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
transition-property: bottom, transform, -webkit-transform; }
.hamburger--vortex-r.is-active .hamburger-inner {
-webkit-transform: rotate(-765deg);
transform: rotate(-765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
transition-delay: 0s; }
.hamburger--vortex-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0; }
.hamburger--vortex-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
html.locked, body.locked {
overflow: hidden !important; }
.hamburger {
z-index: 9999; }
.mobile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
pointer-events: none;
-webkit-transform: translateX(100%);
transform: translateX(100%);
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease; }
.mobile-nav.is-active {
pointer-events: all;
-webkit-transform: translateX(0%);
transform: translateX(0%); }
.mobile-nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100vh;
margin: 0;
padding: 20vh 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center; }
body section {
min-height: 100vh;
margin: 0 auto; }
@media (min-height: 950px) and (min-width: 1024px) {
.not-ie body {
width: 100vw;
height: 100vh; }
.not-ie body section {
height: 100vh; } }
@media (max-width: 767px) {
.not-ie body section {
min-height: 60vh;
margin-top: 10vh;
margin-bottom: 10vh; } }
@media (max-width: 767px) {
.no-mobile, .hidden-phone {
display: none !important; } }
@media (max-width: 1025px) {
.projekt-hidden-phone {
display: none !important; } }
@media (min-width: 767px) {
.no-desktop, .hidden-desktop {
display: none !important; } }
@media (min-width: 1026px) {
.projekt-hidden-desktop {
display: none !important; } }
* {
box-sizing: border-box;
font-family: 'Open Sans'; }
html {
transition: opacity 1s ease; }
html.loading {
opacity: 0; }
html.loaded {
opacity: 1;
transition: opacity 1s ease; }
html, body {
margin: 0;
padding: 0; }
body {
overflow-x: hidden; }
@media (max-width: 767px) {
body {
padding: 0 10px; } }
h1, h2, h3, h4 {
font-weight: 800; }
h1 {
-webkit-transform: translateY(150px);
transform: translateY(150px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; }
.loaded h1 {
-webkit-transform: translateY(0px);
transform: translateY(0px); }
h2 {
font-size: calc(1vw + 20.8px);
color: #000; }
@media (max-width: 320px) {
h2 {
font-size: 24px; } }
@media (min-width: 1920px) {
h2 {
font-size: 40px; } }
.ie h2 {
font-size: calc(0.75vw + 21.6px); }
@media (max-width: 320px) {
.ie h2 {
font-size: 24px; } }
@media (min-width: 1920px) {
.ie h2 {
font-size: 36px; } }
h3 {
text-align: center;
color: #000;
font-size: calc(0.625vw + 16px);
text-transform: uppercase; }
@media (max-width: 320px) {
h3 {
font-size: 18px; } }
@media (min-width: 1920px) {
h3 {
font-size: 28px; } }
h4 {
text-transform: uppercase;
color: #000; }
p {
font-size: calc(0.5vw + 8.4px);
letter-spacing: calc(0.0625vw + 0.8px);
color: #000;
font-weight: 300;
max-width: 100%;
line-height: 1.5; }
@media (max-width: 320px) {
p {
font-size: 10px; } }
@media (min-width: 1920px) {
p {
font-size: 18px; } }
@media (max-width: 320px) {
p {
letter-spacing: 1px; } }
@media (min-width: 1920px) {
p {
letter-spacing: 2px; } }
@media (min-height: 1024px) {
p {
line-height: 1.7; } }
@media (min-height: 1280px) {
p {
line-height: 1.9; } }
.ie p {
font-size: calc(0.375vw + 8.8px); }
@media (max-width: 320px) {
.ie p {
font-size: 10px; } }
@media (min-width: 1920px) {
.ie p {
font-size: 16px; } }
.wrapper {
margin: 0 auto; }
.more-info, .referenzen a {
text-decoration: none;
background: transparent;
color: #000;
border: 1px solid #000;
padding: 8px 15px;
line-height: 1;
display: inline-block;
margin-top: 30px;
margin-bottom: 30px;
font-size: 14px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
transition: all 0.2s ease; }
.more-info:hover, .referenzen a:hover {
color: #fff;
background: rgba(0, 0, 0, 0.9); }
.toggle-content {
display: none;
max-width: 100%; }
.toggle-content p {
max-width: 100%; }
.toggle-content p:first-child {
margin-top: 0; }
header {
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999; }
header nav {
max-width: 1280px;
margin: 0 auto;
text-align: center; }
header nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
list-style: none;
padding: 0;
max-width: 900px;
margin: 10px auto; }
@media (max-width: 767px) {
header nav ul {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 10px; } }
header nav ul li {
width: 12.5%;
position: relative;
text-align: center; }
header nav ul li.logo {
width: 25%; }
@media (max-width: 767px) {
header nav ul li {
line-height: 1.2;
width: auto; } }
header nav ul a {
text-decoration: none;
color: #000;
text-transform: none;
font-weight: 700;
font-size: calc(0.1875vw + 9.4px); }
header nav ul a:after {
content: "";
top: -15px;
width: 100%;
height: 5px;
display: block;
position: absolute; }
header nav ul a.active {
color: #8f1538; }
header nav ul a.active:after {
background: rgba(143, 21, 56, 0.3); }
@media (max-width: 320px) {
header nav ul a {
font-size: 10px; } }
@media (min-width: 1920px) {
header nav ul a {
font-size: 13px; } }
@media (max-width: 1025px) {
header nav ul a {
font-size: 10px; } }
@media (max-width: 767px) {
header nav ul a {
font-size: 20px;
padding: 0px;
line-height: 1.2; } }
header nav ul a img {
width: 160px;
height: auto; }
@media (max-width: 767px) {
header nav ul a img {
width: 80px;
display: inline-block; } }
@media (min-width: 767px) {
header nav ul a img {
margin-top: -15px;
margin-bottom: -60px;
padding-bottom: 20px; } }
.hero {
background-position: center center;
background-size: cover;
min-height: 80vh;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (min-width: 767px) {
.hero {
height: 100vh; } }
.hero h1 {
color: #fff;
text-transform: uppercase;
font-size: calc(1.375vw + 15.6px);
letter-spacing: calc(0.5vw + 0.4px); }
@media (max-width: 320px) {
.hero h1 {
font-size: 20px; } }
@media (min-width: 1920px) {
.hero h1 {
font-size: 42px; } }
@media (max-width: 320px) {
.hero h1 {
letter-spacing: 2px; } }
@media (min-width: 1920px) {
.hero h1 {
letter-spacing: 10px; } }
.hero.hero-split {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
@media (max-width: 767px) {
.hero.hero-split {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }
.hero.hero-split .left, .hero.hero-split .right {
height: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100%; }
@media (max-width: 767px) {
.hero.hero-split .left, .hero.hero-split .right {
width: 100%;
max-width: 100%;
min-width: 100%; } }
@media (max-width: 767px) and (orientation: portrait) {
.hero.hero-split .left, .hero.hero-split .right {
height: 50%;
min-height: 50%; } }
@media (max-width: 767px) and (orientation: landscape) {
.hero.hero-split .left, .hero.hero-split .right {
height: 80%;
min-height: 80%; } }
.hero.hero-split .left {
background-position: center center;
background-size: cover;
width: calc(50% + 80px); }
.hero.hero-split .right {
background: #f0f0f0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
position: relative;
width: calc(50% - 80px); }
.hero.hero-split .right h1 {
color: #2e2b2c;
text-align: left;
font-weight: 400;
font-size: calc(2.5vw + 12px);
margin: 1.5em; }
@media (max-width: 320px) {
.hero.hero-split .right h1 {
font-size: 20px; } }
@media (min-width: 1920px) {
.hero.hero-split .right h1 {
font-size: 60px; } }
.spacer-line {
display: inline-block;
height: 5vh;
margin-top: 2vh;
margin-bottom: 2vh;
width: 1px;
background: #000; }
section.text {
max-width: calc(25vw + 320px);
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (max-width: 320px) {
section.text {
max-width: 400px; } }
@media (min-width: 1920px) {
section.text {
max-width: 800px; } }
section.text p {
max-width: 100%; }
section.text.geschichte h3 {
margin-bottom: 0;
margin-top: .5em;
font-size: calc(0.625vw + 13px); }
@media (max-width: 320px) {
section.text.geschichte h3 {
font-size: 15px; } }
@media (min-width: 1920px) {
section.text.geschichte h3 {
font-size: 25px; } }
section.text.geschichte p {
max-width: 450px;
font-size: calc(0.1875vw + 11.4px);
margin-top: 0; }
@media (max-width: 320px) {
section.text.geschichte p {
font-size: 12px; } }
@media (min-width: 1920px) {
section.text.geschichte p {
font-size: 15px; } }
section.team {
max-width: calc(37.5vw + 280px);
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative; }
section.team .fullwidth {
display: block;
width: 100%;
text-align: center; }
@media (max-width: 320px) {
section.team {
max-width: 400px; } }
@media (min-width: 1920px) {
section.team {
max-width: 1000px; } }
.ie section.team {
max-width: calc(18.75vw + 340px); }
@media (max-width: 320px) {
.ie section.team {
max-width: 400px; } }
@media (min-width: 1920px) {
.ie section.team {
max-width: 700px; } }
section.team h4 {
width: 100%;
display: block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
position: relative;
z-index: 10; }
section.team h4:before {
content: "Ansprechpartner";
display: block;
width: 180px;
height: 100%;
background: #f5f3f0;
top: 0;
position: absolute;
z-index: 8;
left: 50%;
margin-left: -90px; }
section.team h4:after {
content: "";
display: block;
width: 100%;
height: 1px;
background: #000;
top: 50%;
position: absolute;
z-index: 5; }
section.team .members {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
section.team .member {
text-align: center;
width: 30%;
position: relative;
max-height: 300px;
padding: calc(1.5625vw + 0px); }
@media (max-width: 320px) {
section.team .member {
padding: 5px; } }
@media (min-width: 1920px) {
section.team .member {
padding: 30px; } }
section.team .member img {
width: 100%;
max-width: 300px;
border-radius: 50%; }
section.team .member p {
font-size: calc(0.5vw + 6.4px);
letter-spacing: 0; }
@media (max-width: 320px) {
section.team .member p {
font-size: 8px; } }
@media (min-width: 1920px) {
section.team .member p {
font-size: 16px; } }
@media (min-width: 1025px) {
section.team .member {
line-height: 0;
overflow: hidden; }
section.team .member p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
position: absolute;
background: rgba(0, 0, 0, 0.7);
top: calc(1.25vw + 6px);
left: calc(1.25vw + 6px);
right: calc(1.25vw + 6px);
bottom: calc(1.25vw + 6px);
font-size: calc(0.125vw + 9.6px);
z-index: 99;
line-height: 1.2;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
margin: 0; } }
@media (min-width: 1025px) and (max-width: 320px) {
section.team .member p {
top: 10px; } }
@media (min-width: 1025px) and (min-width: 1920px) {
section.team .member p {
top: 30px; } }
@media (min-width: 1025px) and (max-width: 320px) {
section.team .member p {
left: 10px; } }
@media (min-width: 1025px) and (min-width: 1920px) {
section.team .member p {
left: 30px; } }
@media (min-width: 1025px) and (max-width: 320px) {
section.team .member p {
right: 10px; } }
@media (min-width: 1025px) and (min-width: 1920px) {
section.team .member p {
right: 30px; } }
@media (min-width: 1025px) and (max-width: 320px) {
section.team .member p {
bottom: 10px; } }
@media (min-width: 1025px) and (min-width: 1920px) {
section.team .member p {
bottom: 30px; } }
@media (min-width: 1025px) and (max-width: 320px) {
section.team .member p {
font-size: 10px; } }
@media (min-width: 1025px) and (min-width: 1920px) {
section.team .member p {
font-size: 12px; } }
@media (min-width: 1025px) {
section.team .member p b {
font-size: calc(0.3125vw + 9px); } }
@media (min-width: 1025px) and (max-width: 320px) {
section.team .member p b {
font-size: 10px; } }
@media (min-width: 1025px) and (min-width: 1920px) {
section.team .member p b {
font-size: 15px; } }
@media (min-width: 1025px) {
.ie section.team .member p {
line-height: 1;
font-size: 12px; }
.ie section.team .member p b {
font-size: 14px; }
section.team .member img {
width: 100%;
position: relative;
line-height: 0; }
section.team .member:hover p {
opacity: 1; } }
.referenzen {
background-image: url(//www.singer-bau.at/wp-content/themes/empty/img/referenzen.jpg);
background-position: bottom center;
background-size: cover;
min-height: 90vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative; }
@media (min-width: 1200px) {
.referenzen {
height: 100vh; } }
.referenzen.freude {
background-image: url(//www.singer-bau.at/wp-content/themes/empty/img/unsplash.jpg); }
.referenzen p {
max-width: 620px;
text-align: center; }
.referenzen h2 {
text-align: center; }
.vorteile {
position: relative;
margin-bottom: 50px; }
@media (min-width: 767px) {
.vorteile:before {
content: "";
display: block;
height: 90%;
left: 50%;
top: 10%;
width: 1px;
background: #000;
position: absolute;
z-index: 5; } }
.vorteile .vorteil {
max-height: 400px;
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: -50px;
position: relative;
padding: 20px; }
@media (max-width: 767px) {
.vorteile .vorteil {
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0; } }
.vorteile .vorteil:before {
content: "";
width: 10px;
height: 10px;
background: #000;
position: absolute;
right: -5px;
top: 50%;
margin-top: -10px;
border-radius: 50%; }
@media (max-width: 767px) {
.vorteile .vorteil:before {
display: none; } }
.vorteile .vorteil:nth-child(even) {
margin-left: 0; }
.vorteile .vorteil:nth-child(even) h5 {
text-align: right;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; }
.vorteile .vorteil:nth-child(even) .img {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.vorteile .vorteil:nth-child(odd) {
margin-left: 50%; }
.vorteile .vorteil:nth-child(odd) h5 {
text-align: left;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.vorteile .vorteil:nth-child(odd) .img {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; }
.vorteile .vorteil:nth-child(odd):before {
left: -5px;
right: auto; }
@media (max-width: 767px) {
.vorteile .vorteil {
margin-left: 0 !important; }
.vorteile .vorteil .img {
-webkit-box-ordinal-group: 2 !important;
-ms-flex-order: 1 !important;
order: 1 !important; }
.vorteile .vorteil h5 {
-webkit-box-ordinal-group: 3 !important;
-ms-flex-order: 2 !important;
order: 2 !important;
margin-top: 0;
padding-top: 0;
margin-bottom: 20px;
text-align: center !important; } }
.vorteile .vorteil h5 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 20px;
color: #000;
font-size: calc(0.25vw + 11.2px); }
@media (max-width: 320px) {
.vorteile .vorteil h5 {
font-size: 12px; } }
@media (min-width: 1920px) {
.vorteile .vorteil h5 {
font-size: 16px; } }
.vorteile .vorteil .img {
width: 140px; }
.vorteile .vorteil .img img {
max-width: 100%; }
.kontakt {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (max-width: 767px) {
.kontakt {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 50px; } }
.kontakt iframe {
width: 100%;
height: 60vh;
pointer-events: none; }
@media (max-width: 767px) {
.kontakt iframe {
height: 80vh; } }
.ie .kontakt {
height: 60vh; }
.kontakt .widget {
position: absolute;
top: 50%;
margin-top: -100px;
left: 55%;
padding: 20px 40px;
background: #8f1538;
color: #fff;
text-align: center; }
.kontakt .widget h4 {
margin: 10px 0;
text-transform: none;
color: #fff;
margin-bottom: 0; }
.kontakt .widget .spacer-line {
height: 20px;
background-color: #fff;
margin-bottom: 5px;
margin-top: 5px;
opacity: 0.5; }
.kontakt .widget p {
margin-top: 0;
letter-spacing: 0;
font-size: 14px;
line-height: 1.6;
color: #fff; }
.kontakt .widget p a {
color: inherit;
text-decoration: none; }
@media (max-width: 767px) {
.kontakt .widget {
left: auto;
right: auto;
top: auto;
padding: 10px 20px;
position: relative;
margin-top: 30px; }
.kontakt .widget p {
font-size: 10px; } }
footer {
text-align: center;
padding: 10px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
footer .logo {
text-align: left; }
@media (max-width: 1025px) {
footer .logo {
text-align: center;
margin-bottom: 20px; } }
footer .logo img {
width: 50%;
max-width: 100px; }
footer a {
color: #000;
text-decoration: none; }
footer p {
margin: 0;
font-weight: 700;
font-size: 14px; }
footer a#imprintlink {
text-align: right;
color: #000;
font-weight: 400;
font-size: 12px;
text-decoration: none; }
@media (max-width: 767px) {
footer a#imprintlink {
text-align: center;
margin-top: 20px; } }
@media (min-width: 767px) and (max-width: 1025px) {
footer {
margin-bottom: 50px; } }
@media (max-width: 1025px) {
footer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
footer p, footer a {
font-size: 10px; } }
#imprint {
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
padding: 20px;
text-align: center; }
#imprint.visible {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
#imprint h1 {
font-size: 24px; }
#imprint h3 {
font-size: 18px; }
#imprint p {
font-size: 10px;
font-weight: 400;
max-width: 500px; }
#imprint .close {
position: fixed;
top: 20px;
right: 20px;
cursor: pointer; }
.up {
display: block;
text-align: center;
margin: 8vh auto 0; }
@media (min-width: 767px) {
.up {
margin-top: -10vh;
margin-bottom: 5vh; } }
@media (min-width: 1025px) {
.up {
margin-top: -15vh;
margin-bottom: 4vh; } }
.up img {
width: 24px;
height: auto;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.vorteile-alt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
max-width: 1440px;
margin-left: auto;
margin-right: auto; }
@media (min-width: 1026px) {
.vorteile-alt {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
@media (max-width: 1025px) {
.vorteile-alt {
margin-bottom: 10vh; } }
.vorteile-alt .vorteil {
width: 23%;
text-align: center;
background: #f0f0f0;
margin-top: 70px;
padding: 0 3% 2%;
max-height: 400px; }
@media (max-width: 1025px) {
.vorteile-alt .vorteil {
width: 35%;
padding: 0 3% 2%; } }
@media (max-width: 767px) {
.vorteile-alt .vorteil {
width: 90%;
padding: 0 10% 5%; } }
@media (min-width: 1025px) {
.vorteile-alt .vorteil {
height: 500px; } }
.vorteile-alt .vorteil img {
width: 80px;
height: 80px;
margin-top: -40px;
margin-bottom: 15px; }
.vorteile-alt .vorteil h3 {
text-transform: none;
font-size: calc(0.25vw + 11.2px); }
@media (max-width: 320px) {
.vorteile-alt .vorteil h3 {
font-size: 12px; } }
@media (min-width: 1920px) {
.vorteile-alt .vorteil h3 {
font-size: 16px; } }
.vorteile-alt .vorteil p {
font-size: calc(0.125vw + 11.6px);
line-height: 1.8; }
@media (max-width: 320px) {
.vorteile-alt .vorteil p {
font-size: 12px; } }
@media (min-width: 1920px) {
.vorteile-alt .vorteil p {
font-size: 14px; } }
.referenzen_header {
margin-top: 200px;
margin-bottom: 100px;
background: #fff; }
@media (max-width: 767px) {
.referenzen_header {
margin: 100px 0 50px; } }
.referenzen_header h1 {
text-align: center;
font-size: calc(1.25vw + 26px);
letter-spacing: calc(0.75vw + -0.4px);
color: #000;
text-transform: uppercase; }
@media (max-width: 320px) {
.referenzen_header h1 {
font-size: 30px; } }
@media (min-width: 1920px) {
.referenzen_header h1 {
font-size: 50px; } }
@media (max-width: 320px) {
.referenzen_header h1 {
letter-spacing: 2px; } }
@media (min-width: 1920px) {
.referenzen_header h1 {
letter-spacing: 14px; } }
@media (max-width: 767px) {
.referenzen_header h1 {
font-size: 18px; } }
.projekt-seite .hidden-desktop {
margin: 10px 10px 30px;
text-align: center; }
.projekt-seite h4 {
text-transform: none;
font-size: calc(0.375vw + 22.8px); }
@media (max-width: 320px) {
.projekt-seite h4 {
font-size: 24px; } }
@media (min-width: 1920px) {
.projekt-seite h4 {
font-size: 30px; } }
@media (max-width: 1025px) {
.projekt-seite {
padding-top: 50px; }
.projekt-seite h4 {
text-align: center;
margin-bottom: 0;
margin-top: 10px; }
.projekt-seite p {
text-align: center; } }
@media (min-width: 767px) and (max-width: 1025px) {
.bottom-tablet {
margin-bottom: 150px; } }
.projekte {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media (max-width: 1025px) {
.projekte {
min-height: auto !important;
margin: 5vh 0 0; } }
@media (min-width: 1025px) {
.projekte.bottom {
margin-bottom: 10vh; } }
.projekte .projekt {
height: 75vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: block;
margin: 10px 20px;
margin: 1vw;
position: relative; }
.projekte .projekt .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
background: rgba(255, 255, 255, 0.9);
color: #000; }
.projekte .projekt .content .spacer-line {
height: 20px; }
.projekte .projekt .content p {
max-width: 450px; }
.projekte .projekt:hover .content {
opacity: 1; }
@media (max-width: 767px) {
.projekte .projekt {
height: 20vh;
margin: 5px; } }
@media (max-width: 767px) and (orientation: landscape) {
.projekte .projekt {
height: 70vh; } }
.projekte .projekt.width-2 {
width: 66.666%;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2; }
.projekte .projekt.width-1 {
width: 33.333%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.lg-backdrop {
background: rgba(255, 255, 255, 0.5); }
.lg-actions .lg-next, .lg-actions .lg-prev, .lg-sub-html, .lg-inner, .lg-toolbar {
background-color: rgba(255, 255, 255, 0.85);
color: #ccc; }
.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
color: #666; }
.lg-image {
max-width: 900px !important; }
#hotline {
background: #920c35;
position: fixed;
padding: 10px;
top: 120px;
left: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-left: 0;
min-width: 170px;
z-index: 9999;
-webkit-transform: translateX(-44px);
transform: translateX(-44px);
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
color: #fff;
text-decoration: none; }
#hotline:hover {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
#hotline img {
width: 24px;
height: 24px;
margin-right: 10px; }
.bouncer {
position: absolute;
bottom: 20px;
left: 50px;
right: 50px;
text-align: center;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite; }
.bouncer img {
width: 24px; }
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1); }
40% {
-webkit-transform: translateY(-20px) scale(1.1);
transform: translateY(-20px) scale(1.1); }
60% {
-webkit-transform: translateY(-10px) scale(1.05);
transform: translateY(-10px) scale(1.05); } }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1); }
40% {
-webkit-transform: translateY(-20px) scale(1.1);
transform: translateY(-20px) scale(1.1); }
60% {
-webkit-transform: translateY(-10px) scale(1.05);
transform: translateY(-10px) scale(1.05); } }
.ie #unternehmen {
height: 700px; }
.ie #news {
height: 700px; }
.ie #geschichte {
height: 1000px; }
.ie #vorteile {
height: 700px; }
.ie #team {
height: 700px; }
.ie .projekt-seite .projekte {
height: 100vh; }
.swiper-container {
width: 100%;
max-width: 1024px;
height: 80vh;
max-height: 400px; }
@media (max-width: 767px) {
.swiper-container {
max-height: 80vh; } }
.swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.swiper-button-next, .swiper-button-prev {
z-index: 9999;
background-size: contain;
width: 20px; }
@media (max-width: 767px) {
.swiper-button-next, .swiper-button-prev {
width: 10px; } }
.swiper-button-next {
background-image: url(//www.singer-bau.at/wp-content/themes/empty/assets/ic_right.svg);
right: 0; }
.swiper-button-prev {
background-image: url(//www.singer-bau.at/wp-content/themes/empty/assets/ic_left.svg);
left: 0; }
section.news {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.news-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 0 100px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.news-slide .img {
width: 45%;
min-width: 300px;
padding-right: 30px; }
.news-slide .img img {
max-width: 100%; }
.news-slide .text {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: left; }
.news-slide .text h4 {
margin-bottom: 0;
font-weight: 400;
font-size: calc(0.125vw + 11.6px); }
@media (max-width: 320px) {
.news-slide .text h4 {
font-size: 12px; } }
@media (min-width: 1920px) {
.news-slide .text h4 {
font-size: 14px; } }
.news-slide .text h3 {
margin-top: 10px;
text-align: left;
font-size: calc(0.5vw + 14.4px); }
@media (max-width: 320px) {
.news-slide .text h3 {
font-size: 16px; } }
@media (min-width: 1920px) {
.news-slide .text h3 {
font-size: 24px; } }
.news-slide .text p {
font-size: calc(0.1875vw + 11.4px); }
@media (max-width: 320px) {
.news-slide .text p {
font-size: 12px; } }
@media (min-width: 1920px) {
.news-slide .text p {
font-size: 15px; } }
@media (max-width: 767px) {
.news-slide {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 40px; }
.news-slide .img {
padding: 0 20px; }
.news-slide .text {
padding: 0 20px; } }