@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&display=swap");
:root {
--ci-color: $colorci;
--dark-color: $color1;
--light-color: $color2;
}
@font-face {
font-family: "fira_sansbold";
src: url(//www.ageba.ch/wp-content/themes/ageba/assets/webfonts/firasans-bold-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "fira_sansbook";
src: url(//www.ageba.ch/wp-content/themes/ageba/assets/webfonts/firasans-book-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "fira_sanslight";
src: url(//www.ageba.ch/wp-content/themes/ageba/assets/webfonts/firasans-light-webfont.woff) format("woff");
font-weight: normal;
font-style: normal;
}
nav {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
padding: 0 0 0 1em;
overflow-x: hidden;
background-color: transparent;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media screen and (max-width: 768px) {
nav.navbar {
position: relative;
}
}
nav.navbar .navbar-brand {
font-family: "Cormorant Garamond";
font-weight: 600;
text-transform: uppercase;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav.navbar .navbar-brand .dark {
color: #141717;
}
nav.navbar .specialmail {
margin-left: auto;
margin-right: 1em;
}
nav.navbar .specialmail a {
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 1840px) {
nav.navbar .specialmail {
display: none;
}
}
@media screen and (max-width: 1280px) {
nav.navbar .specialmail {
display: block;
}
}
@media screen and (max-width: 600px) {
nav.navbar .specialmail {
display: none;
}
}
nav.navbar .navbar-toggler {
background-color: #00656c;
color: #fff;
padding: 1em;
margin: 0;
border-radius: 0;
border: 0px;
font-size: 1em;
height: 65px;
width: 5em;
z-index: 100000;
border: none;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav.navbar .navbar-toggler:focus {
border: 0px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
nav.navbar .navbar-toggler .bar {
height: 3px;
background-color: #fff;
width: 100%;
display: block;
}
nav.navbar .navbar-toggler .bar::before {
content: "";
height: 3px;
background-color: #fff;
width: 100%;
display: block;
top: -9px;
position: relative;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav.navbar .navbar-toggler .bar::after {
content: "";
height: 3px;
background-color: #fff;
width: 100%;
display: block;
bottom: -6px;
position: relative;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav.navbar .navbar-toggler:hover {
background-color: #141717;
}
nav.navbar.scrolled {
background-color: #fff;
}
nav.navbar.scrolled .specialmail a {
color: #00656c;
}
nav.navbar.scrolled .navbar-brand {
opacity: 1;
}
nav.navbar .navbar-collapse {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media screen and (max-width: 768px) {
nav.navbar .navbar-collapse .fullnav .smallmenu {
padding-top: 1em;
padding-bottom: 1em;
}
}
nav.navbar .navbar-collapse .fullnav .bignav {
border-top: 2px solid #fff;
}
@media screen and (max-width: 768px) {
nav.navbar .navbar-collapse .fullnav .bignav {
border-top: none;
padding-top: 1em;
padding-bottom: 1em;
}
}
nav.navbar .navbar-collapse .fullnav .bignav .navbar-nav {
-webkit-columns: 2;
columns: 2;
max-width: unset;
-webkit-column-gap: 2em;
column-gap: 2em;
display: block;
}
@media screen and (max-width: 768px) {
nav.navbar .navbar-collapse .fullnav .bignav .navbar-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-columns: unset;
columns: unset;
-webkit-column-gap: unset;
column-gap: unset;
}
}
nav.navbar .navbar-collapse .fullnav .bignav .nav-link {
color: #fff;
font-family: "Cormorant Garamond";
font-weight: 600;
font-size: 2em;
}
nav.navbar .navbar-collapse .fullnav .bignav .nav-link:hover {
color: #141717;
}
@media screen and (max-width: 1024px) {
nav.navbar .navbar-collapse .fullnav .bignav .nav-link {
font-size: 1.5em;
}
}
@media screen and (max-width: 768px) {
nav.navbar .navbar-collapse .fullnav .bignav .nav-link {
font-size: 1.25em;
}
}
nav.navbar .navbar-collapse .fullnav #menu-main-menu .current-menu-item a {
text-decoration: none;
color: #141717;
}
nav.navbar .navbar-collapse .menu-quicknav-container #menu-quicknav {
position: relative;
}
nav.navbar
.navbar-collapse
.menu-quicknav-container
#menu-quicknav
.menu-item-has-children
.sub-menu {
display: none;
position: absolute;
}
nav.navbar
.navbar-collapse
.menu-quicknav-container
#menu-quicknav
.menu-item-has-children
.sub-menu
.menu-item-has-children
.sub-menu:hover {
display: block;
}
nav.navbar .navbar-collapse .lightback {
background-color: #f0f8f8;
}
@media screen and (max-width: 1460px) {
nav.navbar
.navbar-collapse
.lightback
.menu-quicknav-container
#menu-quicknav
li
a {
background-color: none;
border-right: none;
}
}
@media screen and (max-width: 890px) {
nav.navbar
.navbar-collapse
.lightback
.menu-quicknav-container
#menu-quicknav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
nav.navbar
.navbar-collapse
.lightback
.menu-quicknav-container
#menu-quicknav
li {
border-bottom: 0px solid #fff;
}
nav.navbar
.navbar-collapse
.lightback
.menu-quicknav-container
#menu-quicknav
li:nth-child(odd) {
border-right: none;
}
nav.navbar
.navbar-collapse
.lightback
.menu-quicknav-container
#menu-quicknav
li:nth-child(-n + 2) {
border-bottom: none;
}
nav.navbar
.navbar-collapse
.lightback
.menu-quicknav-container
#menu-quicknav
li
a {
line-height: unset;
padding: 1em 0;
font-size: 1em;
background: transparent;
color: #141717;
border-right: none;
background-color: none;
}
}
@media screen and (max-width: 768px) {
nav.navbar .navbar-collapse .infobox {
display: none;
}
}
nav.navbar .navbar-collapse .whiteback {
background-color: #00656c;
}
nav .menu-quicknav-container ul {
list-style: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
nav .menu-quicknav-container ul li a {
font-size: 1em;
padding: 0 1em;
line-height: 65px;
border-radius: 0px;
background: #00656c;
color: #fff;
display: block;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
border-right: 2px solid #fff;
}
nav .menu-quicknav-container ul li a:hover {
text-decoration: none;
background: #141717;
color: #fff;
}
nav .menu-quicknav-container ul li a:focus {
text-decoration: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
nav .menu-quicknav-container ul li:last-child a {
border-right: none;
}
@media screen and (max-width: 1700px) {
nav .menu-quicknav-container ul li {
width: 50%;
border-bottom: 2px solid #fff;
}
nav .menu-quicknav-container ul li:nth-child(odd) {
border-right: 2px solid #fff;
}
nav .menu-quicknav-container ul li:nth-child(-n + 2) {
border-bottom: 2px solid #fff;
}
}
.opennav main,
.opennav header,
.opennav footer {
-webkit-filter: blur(5px);
filter: blur(5px);
}
@media screen and (max-width: 768px) {
.opennav main,
.opennav header,
.opennav footer {
-webkit-filter: none;
filter: none;
}
.opennav h1 {
margin-top: 0;
}
}
.opennav .specialmenu {
opacity: 0;
}
.opennav nav {
background-color: #00656c !important;
}
.opennav nav.navbar .specialmail a {
color: #fff;
}
.opennav nav.navbar .navbar-toggler {
background-color: #141717;
}
.opennav nav.navbar .navbar-toggler .bar::before {
top: 0px;
}
.opennav nav.navbar .navbar-toggler .bar::after {
bottom: 3px;
}
.opennav nav.navbar .navbar-brand {
color: #fff;
opacity: 1;
}
.opennav nav.navbar .navbar-brand .dark {
color: #fff;
}
header {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
header .headlink {
text-decoration: none;
}
header.dienstleistungen {
background-image: url(//www.ageba.ch/wp-content/themes/ageba/assets/style/back1.jpg);
}
header.dienstleistungen h1 {
font-size: clamp(3em, 5vw, 9em);
}
header.personen h2 {
font-size: clamp(1.5em, 4vw, 3em);
}
header h1 {
font-size: clamp(3em, 10vw, 9em);
padding: 5vw;
line-height: 0.8;
font-family: "Cormorant Garamond";
font-weight: 600;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
header h1 {
margin-top: -65px;
}
}
header h1 .dark {
color: #141717;
font-size: 0.85em;
}
header .btn {
line-height: 65px;
padding: 0 1em;
}
header h2 {
font-size: clamp(1.5em, 4vw, 5em);
color: #fff;
line-height: 1;
padding: 5vw;
font-family: "fira_sanslight";
}
header .bg-primary {
background-color: rgba(0, 101, 108, 0.9) !important;
}
header .bg-light {
background-color: rgba(240, 248, 248, 0.9) !important;
}
.specialmenu {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
width: calc(50% - 80px);
z-index: 10000;
}
@media screen and (max-width: 1680px) {
.specialmenu {
width: 43%;
}
}
@media screen and (max-width: 1280px) {
.specialmenu {
display: none;
}
}
.menu-quicknav-container ul {
list-style: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.menu-quicknav-container ul li.current-menu-item > a {
background: #141717;
}
.menu-quicknav-container ul li.current-menu-item > a ~ a {
background: #f0f8f8;
}
.menu-quicknav-container ul li.current-menu-parent > a {
color: #f0f8f8;
background: #141717;
}
.menu-quicknav-container ul li.current-menu-parent > a ~ a {
color: #141717;
background: #f0f8f8;
}
.menu-quicknav-container ul li a {
font-size: 1em;
padding: 0 1em;
line-height: 65px;
border-radius: 0px;
background: #00656c;
color: #fff;
display: block;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
border-right: 2px solid white;
}
.menu-quicknav-container ul li a:hover {
text-decoration: none;
background: #141717;
}
.menu-quicknav-container ul li a:active {
text-decoration: none;
background: #141717;
}
.menu-quicknav-container ul li a:focus {
text-decoration: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
background: #141717;
}
.menu-quicknav-container ul li:last-child a {
border-right: 0px;
}
.menu-quicknav-container #menu-quicknav-1 {
position: relative;
}
.menu-quicknav-container #menu-quicknav-1 .menu-item-has-children .sub-menu {
display: none;
border: 0;
border-right: none;
}
.menu-quicknav-container
#menu-quicknav-1
.menu-item-has-children
.sub-menu
.current-menu-item:not(.anchor-submenu)
> a {
color: #f0f8f8;
background: #141717;
}
.menu-quicknav-container
#menu-quicknav-1
.menu-item-has-children
.sub-menu
.current-menu-item:not(.anchor-submenu)
> a
~ a {
color: #141717;
background: #f0f8f8;
}
.menu-quicknav-container
#menu-quicknav-1
.menu-item-has-children
.sub-menu
.current-menu-item.anchor-submenu
> a:target {
color: #f0f8f8;
background: #141717;
}
.menu-quicknav-container
#menu-quicknav-1
.menu-item-has-children
.sub-menu
.current-menu-item.anchor-submenu
> a:target
~ a:target {
color: #141717;
background: #f0f8f8;
}
.menu-quicknav-container #menu-quicknav-1 .menu-item-has-children .sub-menu a {
background-color: #f0f8f8;
color: #141717;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
border-right: none;
}
.menu-quicknav-container
#menu-quicknav-1
.menu-item-has-children
.sub-menu
a:hover {
background-color: #141717;
color: #fff;
}
.menu-quicknav-container
#menu-quicknav-1
.menu-item-has-children:hover
.sub-menu {
display: block;
position: absolute;
-webkit-transition: 0.3s;
transition: 0.3s;
border-right: 0;
}
.bg-primary {
background-color: #00656c !important;
color: #fff;
}
.bg-light {
background-color: #f0f8f8 !important;
}
.paddingbox {
padding-left: 5vw;
padding-right: 5vw;
}
.wp-block-cover {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
main {
overflow-x: hidden;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
main.personsingle {
overflow-x: unset;
}
main.personsingle .sticky-top {
top: 5em;
}
.bigperson {
margin-bottom: 3em;
width: calc(100% - 2em);
}
.bigperson:nth-of-type(odd) {
padding-right: 3em;
}
.bigperson:nth-of-type(even) {
padding-left: 3em;
}
@media screen and (max-width: 768px) {
.bigperson {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.bigperson .blockbtn {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bigperson .flag {
background-color: #00656c;
padding: 0.5em 1em;
position: relative;
color: #fff;
display: block;
font-size: clamp(1.25em, 1.5vw, 2em);
font-family: "fira_sanslight";
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.bigperson .flag::after {
content: "";
background-image: url(//www.ageba.ch/wp-content/themes/ageba/assets/style/arrow.svg);
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
width: 2em;
height: calc(100% + 1em - 3px);
display: inline-block;
position: absolute;
top: 0;
right: -2em;
}
.bigperson figure {
border-bottom: 1em solid #00656c;
text-align: center;
position: relative;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.bigperson figure::before {
content: "";
background: #f0f8f8;
width: 100%;
height: 0%;
opacity: 0.5;
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.bigperson figure img {
-o-object-fit: contain;
object-fit: contain;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.bigperson h3 {
font-family: "Cormorant Garamond";
margin-bottom: 0;
font-weight: 600;
}
.bigperson:hover figure {
border-color: #141717;
}
.bigperson:hover figure::before {
height: 10%;
}
.bigperson:hover .flag {
background: #141717;
}
.serviceprev figure {
position: relative;
overflow: hidden;
}
.serviceprev figure::after {
content: "";
position: absolute;
width: 0.5em;
background-color: #00656c;
mix-blend-mode: multiply;
top: 0;
right: 0;
height: 100%;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.serviceprev figure::before {
content: ">";
position: absolute;
font-family: "Cormorant Garamond";
font-size: clamp(1.5em, 5vmax, 4em);
top: -200%;
right: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
z-index: 2;
}
.serviceprev:nth-of-type(even) .textbox {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
@media screen and (max-width: 768px) {
.serviceprev:nth-of-type(even) .textbox {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
}
.serviceprev:nth-of-type(even) figure::after {
right: auto;
left: 0;
}
.serviceprev:hover figure::after {
width: 100%;
}
.serviceprev:hover figure::before {
top: 50%;
opacity: 1;
}
footer {
background-color: #141717;
color: #fff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
footer a {
color: #fff;
text-decoration: underline;
}
footer a:hover {
color: #f0f8f8;
}
footer h2 {
color: #fff;
font-weight: 600;
}
footer .lightback {
background-color: #f0f8f8;
}
footer .lightback img {
mix-blend-mode: multiply;
}
footer ul {
list-style: none;
padding: 0;
margin: 0;
}
footer ul .current-menu-item a {
color: #f0f8f8;
}
footer ul li a {
color: #fff;
}
footer ul li a:hover {
color: #f0f8f8;
}
body {
font-size: 16px;
line-height: 1.5;
color: #141717;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
* {
scroll-behavior: smooth;
}
hr {
margin: 2em 0;
}
body {
font-family: "fira_sansbook", sans-serif;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.jumbotron-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
img {
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #00656c;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
font-weight: normal;
font-style: normal;
}
h1,
h2,
h3 {
font-family: "Cormorant Garamond";
}
h4,
h5,
h6 {
font-family: "fira_sanslight";
font-weight: normal;
}
b,
strong {
font-family: "fira_sansbold";
}
a {
color: #00656c;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
a:hover {
color: #141717;
}
.btn,
.wp-block-button__link,
.wp-block-file .wp-block-file__button {
font-size: 1em;
padding: 1em;
border-radius: 0px;
background: #00656c;
color: #fff;
border: 0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn:hover,
.wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover {
text-decoration: none;
background: #141717;
color: #fff;
}
.btn:focus,
.wp-block-button__link:focus,
.wp-block-file .wp-block-file__button:focus {
text-decoration: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.btn.btn-dark,
.wp-block-button__link.btn-dark,
.wp-block-file .wp-block-file__button.btn-dark {
background-color: #141717;
}
.btn.btn-dark:hover,
.wp-block-button__link.btn-dark:hover,
.wp-block-file .wp-block-file__button.btn-dark:hover {
text-decoration: none;
background: #00656c;
}
.btn.btn-light,
.wp-block-button__link.btn-light,
.wp-block-file .wp-block-file__button.btn-light {
background-color: #f0f8f8;
color: #141717;
}
.btn.btn-light:hover,
.wp-block-button__link.btn-light:hover,
.wp-block-file .wp-block-file__button.btn-light:hover {
text-decoration: none;
background: #141717;
color: #fff;
}
.paddingbox {
padding: 5vmax;
}
.paddingbox-x {
padding-left: 5vmax;
padding-right: 5vmax;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.wp-block-cover {
background-color: #00656c !important;
position: relative;
padding: calc(5vw + 30px);
}
.wp-block-cover .has-background-dim {
background-color: #00656c !important;
opacity: 0.8 !important;
}
.wp-block-cover .wp-block-cover__inner-container h2 {
font-size: clamp(2em, 4vw, 5em);
font-weight: 600;
}
.wp-block-cover .wp-block-cover__inner-container p {
font-family: "fira_sanslight";
font-size: 2em;
line-height: 1.25;
}
.wp-block-cover .wp-block-cover__inner-container .wp-block-button {
width: 100%;
}
.wp-block-cover .wp-block-cover__inner-container .btn,
.wp-block-cover .wp-block-cover__inner-container .wp-block-button__link,
.wp-block-cover
.wp-block-cover__inner-container
.wp-block-file
.wp-block-file__button {
background: #f0f8f8;
color: #00656c;
border: 0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
width: 100% !important;
font-family: "fira_sansbold";
}
.wp-block-cover .wp-block-cover__inner-container .btn:hover,
.wp-block-cover .wp-block-cover__inner-container .wp-block-button__link:hover,
.wp-block-cover
.wp-block-cover__inner-container
.wp-block-file
.wp-block-file__button:hover {
text-decoration: none;
background: #141717;
color: #fff;
}
.wp-block-cover .wp-block-cover__inner-container .btn:focus,
.wp-block-cover .wp-block-cover__inner-container .wp-block-button__link:focus,
.wp-block-cover
.wp-block-cover__inner-container
.wp-block-file
.wp-block-file__button:focus {
text-decoration: none;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
p,
ul {
max-width: unset;
}
.form-control {
margin-bottom: 1rem;
padding: 1em;
border-radius: 0;
border: 0px solid #00656c;
border-bottom: 2px solid #00656c;
font-size: 1em;
color: #141717;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.form-control:focus {
border-color: #141717;
-webkit-box-shadow: none;
box-shadow: none;
color: #141717;
outline: none;
}
.btn-primary.disabled,
.btn-primary:disabled {
background: #00656c;
} header{
h1{
position: relative;
.pme{
width: 10vw;
position: absolute;
top: 1vw;
right: 1vw;
}
}
}
@media screen and (max-width: 768px){
header{
h1{
max-width: 80%;
.pme{
min-width: 1.5em
}
}
}
}