@font-face { font-family:'Riga Screen'; src:url('../fonts/RigaScreenWeb-Regular.eot'); src:url('../fonts/RigaScreenWeb-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/RigaScreenWeb-Regular.woff') format('woff'), url('../fonts/RigaScreenWeb-Regular.ttf') format('truetype'); font-weight:normal; font-style:normal; } /*------------------------------------*\ MAIN \*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size:62.5%; height:100%; margin:0; } body { font:300 19px/1.54 'Riga Screen', Tahoma, Geneva, Arial, sans-serif; color:#646464; height:100%; margin:0; position: relative; animation: fadein 0.5s; -moz-animation: fadein 0.5s; /* Firefox */ -webkit-animation: fadein 0.5s; /* Safari and Chrome */ -o-animation: fadein 0.5s; /* Opera */ } hr.space { padding: 100px 0 0; margin: 0; border: 0; } hr.space.small { padding: 30px 0 0; margin: 0; border: 0; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } } /* clear */ .clear:before, .clear:after { content:' '; display:table; } .clear:after { clear:both; } .clear { *zoom:1; } img { max-width:100%; vertical-align:bottom; } a { color:#ee801c; text-decoration:none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover { color:#003d6b; text-decoration:none; -webkit-box-shadow: inset 0 -2px 0 0 #ee801c; box-shadow: inset 0 -2px 0 0 #ee801c; } a:focus { outline:0; } a:hover, a:active { outline:0; } input:focus { outline:0; border:1px solid #04A4CC; } .orange { color: #ee801c; font-weight: bold; } .blue-background { background-color: #003d6b; } .center { text-align: center; } /*------------------------------------*\ STRUCTURE \*------------------------------------*/ /* wrapper */ .wrapper { position:relative; } .inner-wrapper { /* max-width:1280px; width:95%; margin:0 auto; position:relative;*/ } /*.flex-wrapper { width: 100%; display:-webkit-flex; display:flex; justify-content: space-between; } .header .flex-wrapper { justify-content: space-between; height: 96px; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; }*/ /* header */ .header { background: rgba(255,255,255,0.85); color: #fff; position: fixed; top: 0; width: 100%; z-index: 9999; height: 100px; border-bottom: 2px solid #ee801c; } /* logo */ .logo-wrapper { position: absolute; top: 16px; left: 50px; } .logo a:hover { box-shadow: none; } .logo-img { height: 70px; width: auto; } /* social & contact icons */ .s-icons { display: none; position: fixed; left: 0; bottom: 200px; z-index: 9998; } .s-icons a { -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.7); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.7); display: block; margin: 10px 0; } .s-icons img { width: 35px; height: 35px; padding: 5px; background: #fff; } .c-icons { display: none; position: fixed; right: 0; top: 200px; z-index: 9998; transition:right 0.25s ease-in; } .c-icons a { display: block; -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.7); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.7); } .c-icons.expanded { right: 300px; transition:right 0.25s ease-out; } .c-icons img { display: block; width: 35px; height: 35px; margin: 0 0 5px; background: #ee801c; padding: 5px; } .c-icons img.ajax-loader { background: transparent; } .c-icon { display: left; } .c-form { background-color: rgba(255, 255, 252, 0.8); border-left: 1px solid #ee801c; color: #ee801c; position: fixed; top: 200px; width: 300px; right: -300px; } .c-form .wpcf7 { padding: 10px; } .wpcf7-list-item.first { margin-left: 0; } .ajax-loader { position: absolute; } .c-form .abstand-oben { margin-top: 40px; } .c-form-ueberschrift { /*background: #ee801c;*/ color: #ee801c; text-transform: uppercase; letter-spacing: 0.15em; line-height: 35px; padding-left: 10px; font-weight: 800; } .c-form input[type=text], .c-form input[type=date], .c-form input[type=tel], .c-form input[type=email], .c-form textarea { color: #000; /*padding: 5px 10px;*/ width: 100%; border: 0; margin: 1px; /*border: 1px solid #eee;*/ background: transparent; } .c-form input[type=text]:focus, .c-form input[type=date]:focus, .c-form input[type=tel]:focus, .c-form input[type=email]:focus, .c-form textarea:focus { /*border: 1px solid #ee801c;*/ } .c-form input[type=submit] { border: 0; background: #ee801c; color: #fff; padding: 5px 10px; margin: 1px; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #636363; } ::-moz-placeholder { /* Firefox 19+ */ color: #636363; } :-ms-input-placeholder { /* IE 10+ */ color: #636363; } :-moz-placeholder { /* Firefox 18- */ color: #636363; } .wpcf7-radio span { cursor: pointer; } /* HTML5 Boilerplate accessible hidden styles */ [type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* the basic, unchecked style */ [type="radio"] + span:before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; vertical-align: 0.02em; border-radius: 1em; border: 1px solid #ee801c; margin-right: 0.3em; transition: 0.5s ease all; } /* the checked style using the :checked pseudo class */ [type="radio"]:checked + span:before { background: #ee801c; } #telefon, #e-mail { right: -300px; transition:right .25s ease-in; } #telefon.expanded, #e-mail.expanded { right: 0; transition:right 0.25s ease-out; } #telefon-button, #e-mail-button { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #telefon-button.inactive, #e-mail-button.inactive { opacity: 0.4; } /* nav */ nav { position: absolute; right: 50px; bottom: 0; text-transform: uppercase; } nav ul { display: block; margin: 0; padding: 0; } nav li, nav li ul { display: inline-block; } nav li a, nav li a:focus { display: block; color: #003d6b; font-weight: bold; padding: 7px 15px 5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; letter-spacing: 0.15em; text-decoration: none; } nav li a:active, nav li.active a { color: #ee801c; text-decoration: none; -webkit-box-shadow:inset 0 -4px 0 0 #ee801c; box-shadow:inset 0 -4px 0 0 #ee801c; } nav li a:hover, nav li a:active { color: #fff; text-decoration: none; -webkit-box-shadow:inset 0 -40px 0 0 #ee801c; box-shadow:inset 0 -40px 0 0 #ee801c; } /* Alte Styles .menubutton { text-align: center; letter-spacing: 0.15em; position: absolute; bottom: -15px; left: 0; right: 0; } .menubutton > span { cursor: pointer; display: inline-block; } .menubutton.clicked { position: absolute; bottom: -25px; left: 0; right: 0; } .menu-hide-toggle { display: block; line-height: 0; } .menubutton.clicked .menu-hide-toggle { display: none; } .menubutton img { border-top: 2px solid #fff; } .menubutton.clicked img { transform: rotate(180deg); border: none; } .nav { background-color: #ee801c; text-align: center; letter-spacing: 0.15em; height: 2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nav.show { height: 36px; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nav ul, .nav li { padding: 0; margin: 0 auto; list-style-type: none; display: inline; position: relative; } .nav ul { display: none; opacity: 0; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .nav.show ul { display: inline; opacity: 1; } .nav li::after { content: " | "; color: #fff; } .nav li:last-child::after { content: ""; } .nav a { color: #fff; text-transform: uppercase; padding: 5px; display: inline-block; } .nav li:hover .sub-menu { display: block; } .nav .sub-menu, .nav.show .sub-menu { position: absolute; background-color: rgba(255, 255, 255, 0.8); border-left: 1px solid #ee801c; left: 0; top: 28px; display: none; padding: 20px; z-index: 100; } .nav .sub-menu a { display: block; padding: 0; color: #ee801c; font-weight: 800; } .nav .sub-menu li { text-align: left; display: block; } .nav .sub-menu li::after { content: ""; } .nav .sub-menu .sub-menu { background-color: transparent; position: relative; top: 0; display: block; font-size: 12px; padding: 0; } .nav .sub-menu .sub-menu a { margin: 0; padding-left: 40px; } */ /* Footer */ footer { padding-top: 60px; position: relative; background: #e6e6e4; } #kontakt { padding-top: 40px; } footer .row { padding-bottom: 40px; } footer .ueberschrift { margin-bottom: 40px; } footer .ueberschrift.ueberschrift-menu { margin-bottom: 0; } footer .col-lg-6, footer .col-md-12 { background: rgba(230,230,228,0.6); } footer strong { color: #003d6b; letter-spacing: 0.15em; text-transform: uppercase; } footer p { margin: 0 0 20px; font-size: 16px; line-height: inherit; } footer .karte { text-align: right; } footer .footer-ueberschrift { margin-bottom: 15px; } footer .footer-ueberschrift strong { color: #ee801c; } #menu-footer { margin: 0; padding: 0; list-style-type: none; color: #fff; text-align: center; line-height: 50px; text-transform: uppercase; letter-spacing: 0.15em; font-size: 16px; } #menu-footer li { display: inline; } #menu-footer li:first-child::after { content: " | "; } #menu-footer a { color: #fff; } .back-to-top { position: absolute; right: 50px; bottom: 15px; } /*------------------------------------*\ PAGES \*------------------------------------*/ /* Hero Box - Flexibler Content */ .wrapper, .section, .main { height: 100%; min-height: 100%; } .hero-image { height: 100%; min-height: 100%; background: transparent; } .hero { min-height: 700px; position: relative; padding-top: 300px; } /* Text */ .pension-text-animation { position: absolute; text-transform: uppercase; letter-spacing: 0.15em; color: #003d6b; font-size: 40px; } .pta-1 { top:117px; left:0; /*color: #38688c; font-size:30px;*/ } .pta-2 { top:070px; left:440px; /*color: #6388a4; font-size:25px;*/ } .pta-3 { top:380px; left:320px; /*color: #6388a4; font-size:25px*/ } .pta-4 { top:510px; left:520px; /*color: #003d6b; font-size:40px;*/ } .pta-5 { top:590px; left:120px; /*color: #6388a4; font-size:25px;*/ } .siegel { position: absolute; right: 50px; bottom: 50px; width: 200px; height: auto; } .siegel #Ebene_4 { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transform-origin: 50% 50%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .siegel:hover #Ebene_4 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); transform-origin: 50% 50%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hero .hero-anleser-wrapper { position: absolute; top: 190px; border: 1px dashed #646464; background-color: #fff; padding: 25px 35px; } .hero .hero-anleser-wrapper .hero-anleser-ueberschrift { color: #003d6b; letter-spacing: 0.15em; } /* Flip Effekt */ /*.flip-container { perspective: 300; -webkit-perspective: 300; transform-style: preserve-3d; } .flip-container:hover .back { transform: rotateY(0deg); } .flip-container:hover .front { transform: rotateY(180deg); } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(-180deg); } .flip-container { width: 320px; } .flipper { transition: 1s; transform-style: preserve-3d; position: relative; } .front, .back { display: flex; align-items: center; flex: 1; perspective: 10; padding: 5px 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .front { z-index: 2; -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .back { text-transform: none; -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); font-size: 16px; height: 100%; width: 100%; letter-spacing: 0; }*/ .card { perspective: 300px; -webkit-perspective: 300px; -moz-perspective: 300px; -o-perspective: 300px; -ms-perspective: 300px; width:400px; vertical-align:top; position:absolute; display:block; font-size:40px; font-weight:bold; } .card .content { transition: 0.5s ease-out; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; /* content backface is visible so that static content still appears */ backface-visibility: visible; -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -o-backface-visibility: visible; -ms-backface-visibility: visible; position:relative; width: 100%; height: 100%; } .card.applyflip .content { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } .card .content .cardFront, .card .content .cardBack { /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */ backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: visible; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .card .content .cardBack { letter-spacing: 0; font-weight: 400; text-transform: none; font-size: 16px; } .card .content .cardFront, .card.applyflip .content .cardFront { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); } .card .content .cardBack, .card.applyflip .content .cardBack { transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); } .card .content .cardFront, .card.applyflip .content .cardBack { /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */ animation: stayvisible 0.5s both; -webkit-animation: stayvisible 0.5s both; -moz-animation: stayvisible 0.5s both; -o-animation: stayvisible 0.5s both; -ms-animation: donothing 0.5s; -ms-transition: visibility 0s linear 0.17s; visibility: visible; } .card.applyflip .content .cardFront, .card .content .cardBack { /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */ animation: stayvisible 0.5s both; -webkit-animation: stayvisible 0.5s both; -moz-animation: stayvisible 0.5s both; -o-animation: stayvisible 0.5s both; -ms-animation: donothing 0.5s; -ms-transition: visibility 0s linear 0.17s; visibility: hidden; } @keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-ms-keyframes donothing { 0% { } 100% { } } .kreisbilder .card { position: static; cursor: pointer; } .kreisbilder .card .content .cardFront, .kreisbilder .card .content .cardBack { position: static; height: auto; color: #fff; } .kreisbilder .card .content .cardBack { position: absolute; top: 25px; padding: 0 10px; } .cardBack .kreisbildunterschrift { text-align: left; padding-left: 10px; border-left: 3px solid #fff; line-height: 1em; } .pension-gruppe-white-text-container-twocolumns .row { margin-left: -30px; margin-right: -30px; } #vorteile { background: url('../img/PG-Siegel-Datenschutz.png') 95% bottom no-repeat; } .impressum, .datenschutz { background: url('../img/PG-Siegel-Datenschutz.png') 5% 150px no-repeat fixed; } .impressum main, .datenschutz main { padding-top: 50px; } /* Wolken Hintergrund 80% Deckkraft */ .wolken { background: url('../img/wolken-80.png'); } /* Trenner */ .trenner { height: 200px; width: 100%; } /* Graue Box */ .graue-box { background-color: #e6e6e4; } .graue-box a { color: #ee801c; } .pension-gruppe-kreisbilder { padding: 50px 0 60px; } .pension-gruppe-cloud-text-container { padding-bottom: 30px; color: #fff; } .pension-gruppe-cloud-text-container h1, .pension-gruppe-cloud-text-container h2 { color: #fff; } .kreisbilder { display: flex; flex-direction:row; } .werte.kreisbildwrapper { width: 200px; flex: 1; text-align: center; } .kreisbild { margin: 0 0 20px; } .kreisbild span { position: relative; display: inline-block; } .kreisbildhover { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .kreisbildwrapper:hover .kreisbildhover { opacity: 1; } .kreisbildunterschrift { font-size: 20px; text-align: center; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; } .show-hidden-team-info { display: none; } .pension-gruppe-kreisbilder { /*background-color: #003d6b;*/ } .pension-gruppe-kreisbilder.team { background: #e6e6e4; color: #003d6b; text-align: center; } .pension-gruppe-kreisbilder.team .kreisbildunterschrift { color: #003d6b; } .team .kreisbildwrapper { padding-top: 20px; cursor: pointer; -webkit-transition: background 600ms ease-in-out; -moz-transition: background 600ms ease-in-out; -ms-transition: background 600ms ease-in-out; -o-transition: background 600ms ease-in-out; transition: background 600ms ease-in-out; } .team .kreisbildwrapper:hover, .team .kreisbildwrapper.active { background: #fff; } .kreisbild-infobox { background: #fff; padding: 80px; text-align: left; display: none; } .kreisbild-infobox.active { display: block; } /* Marken */ .pension-gruppe-marken-box { padding: 30px 0 0; } .pension-gruppe-marken-gruppe { margin-bottom: 50px; } .pension-gruppe-marken-box .row:hover .pension-gruppe-marken-gruppe-hintergrundbild { opacity: 0.6; } .pension-gruppe-marken-box .row:hover .pension-gruppe-marken-gruppe-bild { opacity: 0.4; } .pension-gruppe-marken-gruppe a:hover { text-decoration: none; -webkit-box-shadow: none; box-shadow: none; } .pension-gruppe-marken-gruppe h2 { font-size: 20px; margin: 13px 0 9px; letter-spacing: 0.15em; } .pension-gruppe-marken-gruppe p { margin: 0; } .pension-gruppe-marken-img-wrapper { position: relative; border: 1px dashed #646464; display: inline-block; padding-top: 1px; /* chrome 1px fix */ width: 100%; overflow: hidden; } .pension-gruppe-marken-img-wrapper img { width: 100%; height: auto; } .pension-gruppe-marken-gruppe-hintergrundbild { opacity: 0.2; -webkit-transition: opacity 600ms ease-in-out; -moz-transition: opacity 600ms ease-in-out; -ms-transition: opacity 600ms ease-in-out; -o-transition: opacity 600ms ease-in-out; transition: opacity 600ms ease-in-out; } .pension-gruppe-marken-gruppe .pension-gruppe-marken-gruppe-bild { position: absolute; top: 0; left: 0; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; } .pension-gruppe-marken-gruppe .row .pension-gruppe-marken-gruppe-bild { opacity: 1; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } a:hover .pension-gruppe-marken-img-wrapper .pension-gruppe-marken-gruppe-bild{ transform: scale(1.1); } .row .pension-gruppe-marken-gruppe:hover .pension-gruppe-marken-gruppe-bild { opacity: 1; } .row .pension-gruppe-marken-gruppe:hover .pension-gruppe-marken-gruppe-hintergrundbild { opacity: 0.2; } .pension-gruppe-marken-gruppe .row:hover .pension-gruppe-marken-gruppe-hintergrundbild { opacity: 0; } .pension-gruppe-marken-gruppe a:hover { color: #003d6b; } .pension-gruppe-marken-text-container-text { margin-bottom: 50px; } .marken-desc { color: #646464; } /* Statistik */ .pension-statistik, .pension-statistik h1, .pension-statistik h2 { } .pension-statistik h1 { text-transform: uppercase; color: #fff; margin-bottom: 50px; } .pension-statistik h2 { /* text-transform: uppercase; letter-spacing: 0.15em;*/ color: #fff; } .pension-statistik .pension-statistik-single h2 { font-size: 19px; } .pension-statistik { padding: 50px 0; color: #fff; } .pension-skybox-sidebar-container { padding: 60px 0; } .pension-skybox-sidebar { padding-top: 25px; } .pension-skybox-sidebar a { color: #ee801c; } .pension-skybox-sidebar ul { margin: 0; padding-left: 1em; } .pension-statistik-single { text-align: center; } .pension-statistik-single #circleBack { fill: transparent; stroke: white; stroke-width: 5; } .pension-statistik-single #circleFront { fill: transparent; stroke: white; stroke-width: 5; width: 10px; } .pension-statistik-single text { text-align: center; fill: #fff; } .chart { position: relative; display: inline-block; width: 160px; height: 160px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; line-height: 160px; z-index: 2; } /* Team */ .team-box { margin-bottom: 25px; min-height: 420px; } .team-box-inner { display: block; border: 1px solid #e6e6e4; min-height: 420px; transition: all 0.25s 0s ease-out; } .team-box-inner:hover { box-shadow: none; border: 1px solid #ee801c; transition: all 0.25s 0s ease-in; } .team-img-container { position: relative; } .team-img-click { position: absolute; top: 0; right: 0; display: block; z-index: 9999; opacity: 0; transition: all .3s .1s ease-out; } .team-box-inner:hover .team-img-click { opacity: .75; transition: all .3s .1s ease-in; } .team-name, .team-position { font-size: 20px; margin: 10px 0 5px; letter-spacing: 0.15em; font-weight: normal; color: #003d6b; padding: 0 10px; text-transform: uppercase; } .team-position { font-size: 1em; margin: 5px 0 10px; letter-spacing: 0; } .team-email { font-size: 1em; letter-spacing: 0; font-weight: normal; color: #ee801c; padding: 0 10px; } .iziModal { z-index: 9999 !important; border: none !important; } .iziModal .iziModal-header { background: #ee801c !important; } .iziModal .iziModal-content { padding: 5% !important; } .team-tag { font-size: 20px; letter-spacing: 0.15em; font-weight: normal; color: #003d6b; } .team-desc { font-style: italic; } /* Kunden */ .client-logo { margin-bottom: 25px; } .client-logo img { border: 1px dotted #333; -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; transition: all 0.25s 0s ease-out; } .client-logo:hover img { filter: none; transition: all 0.25s 0s ease-in; } /* Blog */ .pension-blog { padding: 60px 0; } .pension-blog .ueberschrift { padding-bottom: 40px; } #blog-search { border: none; background-color: #ee801c; width: 100%; padding: 3px; color: #fff; font-size: 14px; } #blog-search::-webkit-input-placeholder{ color: #fff; text-transform: uppercase; letter-spacing: 0.15em; } #blog-search::-moz-placeholder{ color: #fff; opacity: 1; text-transform: uppercase; letter-spacing: 0.15em; } #blog-search:-ms-input-placeholder{ color: #fff; text-transform: uppercase; letter-spacing: 0.15em; } #blog-search:-moz-placeholder { color: #fff; opacity: 1; text-transform: uppercase; letter-spacing: 0.15em; } .blogposts-wrapper { margin-top: 40px; } .blogposts-box { border-bottom: 1px solid #ee801c; padding-bottom: 15px; margin-bottom: 15px; } .blogposts-categorylist { margin: 0 0 5px; } .blogposts-categorylist a { color: #ee801c; } .blogposts-date { color: #003d6b; margin: 0; } .blogposts-headline { margin: 0 0 15px; } .blogposts-excerpt p { margin: 0; } .blogpost-thumbnail { border: 1px dashed #d8d8d8; width: 70px; height: 70px; } .blog-readmore { cursor: pointer; } #blog-sidebar { font-size: 15px; } #blog-sidebar a { color: #646464; } #blog-sidebar a:hover { color: #ee801c; } #blog-sidebar h3 { background-color: #b0b2b2; line-height: 30px; text-transform: uppercase; padding: 0 10px; font-weight: normal; color: #fff; letter-spacing: 0.15em; margin: 0; } #blog-sidebar ul { margin: 0 0 20px; padding: 20px 5px 10px; list-style-type: none; border-left: 1px dashed #646464; border-right: 1px dashed #646464; border-bottom: 1px dashed #646464; } #blog-sidebar li { padding-bottom: 10px; } .blog-video-wrapper { margin-bottom: 30px; } .blog-video-wrapper .blogposts-date { margin: 0; } .blog-video-wrapper .blogposts-categorylist { margin: 5px 0 0; } .mehrlesen-wrapper .mehrlesen-content{ max-height: 400px; overflow:hidden; position: relative; } .mehrlesen-wrapper.expanded .mehrlesen-content{ max-height: 100%; } .mehrlesen { position: absolute; bottom: 0; left: 0; right: 0; width: 5em; height: 5em; line-height: 5em; text-align: center; width: 100%; cursor: pointer; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+40 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .mehrlesen-wrapper.expanded .mehrlesen img { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .mehrlesen-wrapper.expanded .mehrlesen { background: none; bottom: -2em; } .slider-background { padding: 50px 0 100px; } .slider-text { padding-bottom: 10px; } .slider-text, .slider-text h1, .slider-text h2 { color: #fff; } .slider-wrapper { background: rgba(255,255,255,0.8); padding: 2em 0 1em; } .slider-inner-wrapper{ display: flex; } .slider-button-wrapper { display: flex; justify-content: center; align-items: center; } .slider-next, .slider-previous { cursor: pointer; } .slider-next { padding-left: 20px } .slider-previous { padding-right: 20px; } .slider-ueberschrift { -webkit-box-shadow:inset 0 -1px 0 0 #003d6b; box-shadow:inset 0 -1px 0 0 #003d6b; color: #003d6b; letter-spacing: 0.15em; padding-bottom: 10px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .carousel-cell.is-selected .slider-ueberschrift { -webkit-box-shadow:inset 0 -3px 0 0 #ee801c; box-shadow:inset 0 -3px 0 0 #ee801c; } .fullwidth-slider { position: relative; padding-top: 100px; } .fullwidth-carousel-cell-overlay { opacity: 0; background: url('../img/PG_Layer-Kreise_weiss30_1920x1100.png'); background-size: cover; display: block; width: 100%; height: 130%; position: absolute; } .fullwidth-slider .is-selected .fullwidth-carousel-cell-overlay { animation: sliderOverlay 3s 2s ease-in-out forwards; } .fullwidth-slider h2 { opacity: 0; position: absolute; bottom: 20%; left: 13%; margin: 0; font-size: 42px; background: rgba(255,255,255,0.85); padding: 7px 30px 7px 32px; -webkit-box-shadow: inset 0 -2px 0 0 #ee801c; box-shadow: inset 0 -2px 0 0 #ee801c; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .fullwidth-slider .is-selected h2 { animation:sliderCaption 1.5s 3.5s ease-in-out forwards; } .fullwidth-slider h2:hover { color: #fff; -webkit-box-shadow: inset 0 -80px 0 0 #ee801c; box-shadow: inset 0 -80px 0 0 #ee801c; } .fullwidth-slider-previous { position: absolute; left: 50px; top: 50%; z-index: 100; cursor: pointer; } .fullwidth-slider-next { position: absolute; right: 50px; top: 50%; z-index: 100; cursor: pointer; } .fullwidth-slider .slider-img, .fullwidth-slider .fullwidth-carousel-cell { width: 100%; } /*------------------------------------*\ IMAGES \*------------------------------------*/ /*------------------------------------*\ TYPOGRAPHY \*------------------------------------*/ .ueberschrift h1, .ueberschrift h2 { float: left; margin: 0; } h1 { font-size: 24px; text-transform: uppercase; color: #003d6b; letter-spacing: 0.15em; } h2 { font-size: 24px; font-weight: normal; color: #003d6b; } .ueberschrift-menu { margin-left: -50px; padding: 20px 0; } .ueberschrift-menu h1, .ueberschrift-menu h2 { color: #ee801c; font-size: 14px; } .ueberschrift h1 { padding-right: 10px; } .ueberschrift.ueberschrift-menu h1 { padding-right: 0; } /*------------------------------------*\ RESPONSIVE \*------------------------------------*/ @media only screen and (min-width:320px) { } @media only screen and (min-width:480px) { } @media only screen and (min-width:768px) { } @media only screen and (min-width:992px) { .hamburger { display: none !important; } } @media only screen and (min-width:1024px) { } @media only screen and (min-width:1140px) { } @media only screen and (min-width:1280px) { } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:144dpi) { } @media only screen and (max-width:991px) { .kreisbilder { flex-direction: row; flex-wrap: wrap; align-items: center; align-self: center; flex: 1; justify-content: center; } .card { width: 300px; padding-bottom: 100px; } } @media only screen and (max-width:991px) { nav { display: none; position: static; } nav li, nav li ul { display: block; } nav li a { text-align: center; padding: 20px; display: block; } .header { height: auto; padding: 20px 10px 10px; } .logo-wrapper { position: static; } nav li a:active, nav li a:focus { -webkit-box-shadow: inset 0 -70px 0 0 #ee801c; box-shadow: inset 0 -70px 0 0 #ee801c; } } /*------------------------------------*\ MISC \*------------------------------------*/ ::selection { background:#04A4CC; color:#FFF; text-shadow:none; } ::-webkit-selection { background:#04A4CC; color:#FFF; text-shadow:none; } ::-moz-selection { background:#04A4CC; color:#FFF; text-shadow:none; } /*------------------------------------*\ WORDPRESS CORE \*------------------------------------*/ .alignnone { margin:5px 20px 20px 0; } .aligncenter, div.aligncenter { display:block; margin:5px auto 5px auto; } .alignright { float:right; margin:5px 0 20px 20px; } .alignleft { float:left; margin:5px 20px 20px 0; } a img.alignright { float:right; margin:5px 0 20px 20px; } a img.alignnone { margin:5px 20px 20px 0; } a img.alignleft { float:left; margin:5px 20px 20px 0; } a img.aligncenter { display:block; margin-left:auto; margin-right:auto; } .wp-caption { background:#FFF; border:1px solid #F0F0F0; max-width:96%; padding:5px 3px 10px; text-align:center; } .wp-caption.alignnone { margin:5px 20px 20px 0; } .wp-caption.alignleft { margin:5px 20px 20px 0; } .wp-caption.alignright { margin:5px 0 20px 20px; } .wp-caption img { border:0 none; height:auto; margin:0; max-width:98.5%; padding:0; width:auto; } .wp-caption .wp-caption-text, .gallery-caption { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } .sticky { } .bypostauthor { } /*! Flickity v1.2.1 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0, 0%, 100%, 0.75); cursor: pointer; /* vertically center */ -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .flickity-prev-next-button:hover { background: white; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { filter: alpha(opacity=60); /* IE8 */ opacity: 0.6; } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button:disabled { filter: alpha(opacity=30); /* IE8 */ opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #333; } /* color & size if no SVG - IE8 and Android 2.3 */ .flickity-prev-next-button.no-svg { color: #333; font-size: 26px; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; filter: alpha(opacity=25); /* IE8 */ opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { filter: alpha(opacity=100); /* IE8 */ opacity: 1; } /*------------------------------------*\ PRINT \*------------------------------------*/ @media print { * { background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important; } a, a:visited { text-decoration:underline; } a[href]:after { content:" (" attr(href) ")"; } abbr[title]:after { content:" (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; } pre,blockquote { border:1px solid #999; page-break-inside:avoid; } thead { display:table-header-group; } tr,img { page-break-inside:avoid; } img { max-width:100% !important; } @page { margin:0.5cm; } p, h2, h3 { orphans:3; widows:3; } h2, h3 { page-break-after:avoid; } } /* Animationen */ @keyframes pulse { 0% { opacity: 0; } 30% { opacity: 1; } } @keyframes pulseMarken { 0% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes pulseMarkenReverse { 0% { opacity: 1; } 50% { opacity: 0.4; } } /*@keyframes scaleHero { 0% { transform: scale(0.5); opacity: 0.3; } 35% { transform: scale(0.9); opacity: 1; } 50% { transform: scale(1); opacity: 1; } 65% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(0.5); opacity: 0.3; } }*/ @keyframes scaleHero { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.6; } } @keyframes sliderCaption { 0% { opacity: 0; -moz-transform: translateY(80px); -webkit-transform: translateY(80px); -o-transform: translateY(80px); -ms-transform: translateY(80px); transform: translateY(80px); } 100% { opacity: 1; } } @keyframes sliderOverlay { 0% { opacity: 0; } 100% { opacity: 1; -moz-transform: translateY(-100px); -webkit-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } } .kreisbilder.animate .kreisbildwrapper:nth-of-type(1) .kreisbildhover{ animation:pulse 4s 0.5s ease-in-out infinite; } .kreisbilder.animate .kreisbildwrapper:nth-of-type(2) .kreisbildhover{ animation:pulse 4s 1s ease-in-out infinite; } .kreisbilder.animate .kreisbildwrapper:nth-of-type(3) .kreisbildhover{ animation:pulse 4s 1.5s ease-in-out infinite; } .kreisbilder.animate .kreisbildwrapper:nth-of-type(4) .kreisbildhover{ animation:pulse 4s 2s ease-in-out infinite; } .kreisbilder.animate .kreisbildwrapper:nth-of-type(5) .kreisbildhover{ animation:pulse 4s 2.5s ease-in-out infinite; } .kreisbilder.animate:hover .kreisbildwrapper .kreisbildhover { animation: stop; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(1) .pension-gruppe-marken-gruppe-hintergrundbild { animation:pulseMarken 4s 0.5s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(1) .pension-gruppe-marken-gruppe-bild { animation:pulseMarkenReverse 4s 0.5s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(2) .pension-gruppe-marken-gruppe-hintergrundbild { animation:pulseMarken 4s 1.5s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(2) .pension-gruppe-marken-gruppe-bild { animation:pulseMarkenReverse 4s 1.5s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(3) .pension-gruppe-marken-gruppe-hintergrundbild { animation:pulseMarken 4s 3s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(3) .pension-gruppe-marken-gruppe-bild { animation:pulseMarkenReverse 4s 3s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(4) .pension-gruppe-marken-gruppe-hintergrundbild { animation:pulseMarken 4s 4.5s linear infinite; } .pension-gruppe-marken-box .pension-gruppe-marken-gruppe:nth-of-type(4) .pension-gruppe-marken-gruppe-bild { animation:pulseMarkenReverse 4s 4.5s linear infinite; } .pension-gruppe-marken-box .row:hover .pension-gruppe-marken-gruppe-hintergrundbild, .pension-gruppe-marken-box .row:hover .pension-gruppe-marken-gruppe-bild { animation: stop; } .pension-text-animation { cursor: default; } .pension-text-animation.pta-1 { animation:scaleHero 13s ease-in-out infinite; } .pension-text-animation.pta-2 { animation:scaleHero 23s 1s ease-in-out infinite; } .pension-text-animation.pta-3 { animation:scaleHero 16s 3s ease-in-out infinite; } .pension-text-animation.pta-4 { animation:scaleHero 19s 4s ease-in-out infinite; } .pension-text-animation.pta-5 { animation:scaleHero 21s 7s ease-in-out infinite; } .pension-text-animation:hover { animation:scaleHero 2s ease-in-out forwards; } @media (max-width: 767px) { .hero .hero-anleser-wrapper { width: auto; top: 100px; left: 0; margin: 0 15px; } .pta-1, .pta-2, .pta-3, .pta-4, .pta-5 { display: none; } .kreisbilder { display: flex; flex-direction: column; } .kreisbildwrapper { align-self: center; } .graue-box { background: none; background-color: #e6e6e4; } .mehrlesen { width: 95%; } .s-icons { bottom: 0; } .hero-image .card { width: 100%; } header .nav li::after { content: ""; } header .nav a { display: block; } header .nav.show { height: 100%; } } /* .nav-collapse ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none; } .nav-collapse li { width: 100%; display: block; } .js .nav-collapse { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; } .nav-collapse.opened { max-height: 9999px; } .nav-toggle { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; overflow: hidden; display: block; background: #f43c12 url("../images/hamburger.gif") no-repeat 50% 33%; text-indent: -9999px; } @media screen and (min-width: 40em) { .js .nav-collapse { position: relative; } .js .nav-collapse.closed { max-height: none; } .nav-toggle { display: none; } }*/ /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, 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; position: absolute; right: 50px; top: 25px; } .hamburger:hover { opacity: 0.7; } .hamburger-box { width: 40px; 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: 40px; height: 4px; background-color: #003d6b; border-radius: 4px; position: absolute; transition-property: 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; } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; 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.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* Responsive Fixes */ @media (max-width: 1680px) { #vorteile, .impressum .pension-gruppe-white-box, .datenschutz .pension-gruppe-white-box { background: none; } } @media (max-width: 1300px) { .ueberschrift-menu { margin-left: 0; } } @media (max-width: 991px) { .fullwidth-slider h2 { font-size: 30px; } .graue-box { background: none; } footer { padding-top: 0; } footer .graue-box, #kontakt { padding-top: 0; } footer .row { padding-bottom: 0; } footer .container { background: rgba(230,230,228,0.6); padding-top: 100px; padding-bottom: 40px; } .fullwidth-carousel-cell-overlay { height: 160% } } @media (max-width: 991px) { .back-to-top { right: 10px; } } @media (min-width: 1200px) { .slider-wrapper .container { width: 95%; max-width: 1700px; } }