/* Theme Name:Neutrum-Business-SPÖRCK Theme URI:https://www.pannasch.net/ Description:Schlichtes, Suchmaschinen-Optimiertes Theme mit vielen Features. Version:1.0 Author:pannasch.net Author URI:https://pannasch.net/ */ /* hellgrau #f9f9f9 | dunkelgrau #696969 | hellblau #7abdf4 | grün #4fafc8 | dunkelblau #0050a1 | weiß #ffffff */ /* ########## Body ########## */ * {margin:0; padding:0;} *, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} html, body {background:transparent; color:#696969; font-family:'Roboto', Helvetica, Tahoma, sans-serif; font-size:102%; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; -o-hyphens:auto; -ms-hyphens:auto; hyphens:auto;} .clear {clear:both;} .clearfix:after {content:" "; clear:both; display:block; font-size:0; visibility:hidden; height:0;} .valign {position:absolute; top:50%; transform:translateY(-50%);} .halign {position:absolute; left:50%; transform:translateX(-50%);} .vh-align {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .all-align {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;} /* inline-block zentrieren */ p {font-weight:400; line-height:1.8em; text-align:justify; margin:14px 0;} strong, .bold {font-weight:700;} .wrapper {margin:0 auto; padding:0 5vmin; max-width:1300px;} .max800 .wrapper {max-width:800px;} h1, h2, h3, h4, h5, h6 {-webkit-box-decoration-break:clone; box-decoration-break:clone; font-weight:500; font-family:'Oswald', sans-serif;} h1 {text-transform:uppercase; font-size:2.0em; margin:20px 0;} h2 {text-transform:none; font-size:1.6em; margin:0 0 10px;} h3 {text-transform:none; font-size:1.3em; margin:20px 0 5px;} h4 {text-transform:none; font-size:1.15em; margin:15px 0 5px;} h5 {text-transform:none; font-size:1.05em; margin:30px 0 5px;} h6 {text-transform:none; font-size:1.0em; margin:30px 0 5px;} .hero-title, .hero-teaser { line-height:1; margin:0; color:#0050a1; text-shadow:0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff;} .hero-title {font-size:calc(1em + 5vmin); margin:0 0 25px;} /* ########## Links ########## */ a {color:#696969; text-decoration:none;} p a {color:#696969; text-decoration:none; border-bottom:1px dotted #696969; padding:0 0 1px;} a img {border:none;} a.more-link, span.more-link {display:inline-block; background:transparent; font-size:0.9em; color:#696969; padding:18px; text-transform:uppercase; border:1px solid #696969;} a.more-link:hover, span.more-link:hover {color:#fff; background:#4fafc8; border-color:#fff;} /* ########## Hover-Transition ########## */ #submit:hover, a.more-link:hover, span.more-link:hover, .main-menu li a:hover, #pagination .page-numbers:hover, .reply a:hover, #main-nav ul ul li:hover > a, #main-nav ul ul li a:hover, .downloads.content li:hover, .careertitle:hover, #menu li:hover, ul.tags li a:hover {-webkit-transition-property:color, background; -webkit-transition-duration:0.3s, 0.3s; -webkit-transition-timing-function:linear, ease-in; -moz-transition-property:color, background; -moz-transition-duration:0.3s, 0.3s; -moz-transition-timing-function:linear, ease-in; -o-transition-property:color, background; -o-transition-duration:0.3s, 0.3s; -o-transition-timing-function:linear, ease-in;} /* ########## Header ########## */ noscript p.hideme {position:absolute; z-index:10000; top:-200px; background:#f03510; color:#fff; text-align:center; font-size:1.15em; margin:0 auto; width:100%; padding:25px 5px; animation:slideup 7s; -moz-animation:slideup 7s; -webkit-animation:slideup 7s; -o-animation:slideup 7s;} noscript p.hideme i.icon {font-size:130%; color:#fff; margin:0 15px 0 0;} header {position:fixed; top:0; left:0; z-index:100; display:inline-block; width:100%; height:auto; background-color:#fff;} header .dp-btn {position:absolute; top:0px; right:20px; padding:8px; cursor:pointer; background:#4fafc8; color:#fff; font-size:1.8em; border-bottom-left-radius:5px; border-bottom-right-radius:5px;} .logo {position:relative; max-width:250px; margin:0 auto;} .hiring {display:block; right:-80px; padding:3px 5px; font-size:0.8em; background-color:#4fafc8; color:#fff;} header.small {box-shadow:0 5px 5px -5px #b9b9b9;} header.small .logo {max-width:158px;} header.small .nav-icon {top:0px;} .logo img {padding:8px 8px 0;} #headerimage {position:relative; width:100vw; height:100vh; background-color:rgba(255,255,255,0.1);} #headerimage.small {height:60vh;} #headerimage .vh-align {z-index:2; width:100vw;} #headerimage img {display:block; margin:0 auto; width:80vw; max-width:1000px;} #headerimage .overlay {position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:url(images/layout/overlay-pattern.png); background-repeat:repeat; opacity:0.4; transform:skew(0deg);} /* ########## MMenu ########## */ #menu.mm-menu {background:#fff; /*color:#fff;*/ font-size:1.3em;} .mm-wrapper_opened #mmenu-wrapper:before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:100; background-color:rgba(0,0,0,0.15); animation:fadeIn ease-in 1; animation-fill-mode:forwards; animation-duration:1s;} button.hamburger {display:block; float:left; padding:28px 10px 8px 30px;} header.small button.hamburger {padding:15px 10px 8px 30px;} button .hamburger-inner, button .hamburger-inner::before, button .hamburger-inner::after {background-color:#696969;} /* #menu .mm-counter {color:#fff;} .mm-menu .mm-listview .mm-btn_next:after {border-color:#fff !important;} */ .mm-menu .mm-navbar a, .mm-menu .mm-navbar>* {display:none;} #menu li:hover {background:#f9f9f9;} #menu li.menu-item-has-children a:hover {cursor:default;} #menu li.menu-item-has-children a.mm-btn_next:hover {cursor:pointer;} /* ########## Content ########## */ .content {position:relative; display:block; width:100%; margin:0; padding:70px 0;} .teaser h1 {font-size:calc(1em + 5vmin); margin:20px 0 0; padding:0 5px;} .teaser h3 {font-size:calc(1em + 1.2vw); margin:0px 0 35px;} .teaser .two-col p {-moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap:5.0em; -webkit-column-gap:5.0em; column-gap:5.0em;} .teaser .fluid-toggle-box {position:relative; z-index:1;} .teaser .fluid-toggle-box.closed p:before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:100; background:linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 60%);} .headline {margin:50px 0 70px; padding:0 10px;} .headline h1 {font-size:2.5em; margin:20px 0 0;} .headline h4 {margin:0 0 5px;} .post ul {display:table; margin:10px 0 10px 20px;} .post ul li {position:relative; list-style:none; padding:4px 0;} .post ul li:before {position:absolute; left:-15px; top:50%; transform:translateY(-50%); content:"\e824"; font-family:fontello; font-size:1.2em; color:#7cac19; font-style:normal; font-weight:normal; text-decoration:inherit;} .left {float:left;} .right {float:right;} .center {text-align:center;} .blue {background-color:rgba(79,175,200,0.8); color:#fff;} .gray {background-color:#f9f9f9;} .white {background-color:#fff;} .margin0 {margin:0;} .border {border-top:5px solid #f9f9f9; border-bottom:5px solid #f9f9f9;} .no-border {border:none !important;} .margin-top-small {margin:25px 0 0;} .margin-top-big {margin:55px 0 0;} #not-found {padding:50px 0;} .circle img {border-radius:50%;} .tab-white:before, .tab-blue:before, .tab-gray:before {content:''; position:absolute; z-index:2; width:90px; height:90px; left:50%; bottom:-50px; transform:translateX(-50%); border-radius:50%;} .tab-white:before {background:#fff url(images/gravatar-gray.svg); border:10px solid #fff; box-shadow:0 0 0 5px #fff;} .tab-blue:before {background:#4fafc8 url(images/gravatar-white.svg); border:10px solid #4fafc8; box-shadow:0 0 0 5px #fff;} .tab-gray:before {background:#f9f9f9 url(images/gravatar-gray.svg); border:10px solid #f9f9f9; box-shadow:0 0 0 5px #f9f9f9;} /*.tab-white:after, .tab-blue:after, .tab-gray:after {content:''; height:30px;}*/ .archivinfo {margin:0 10%;} .archivinfo h1 {line-height:1.6em;} .archivinfo h2 {font-size:1.3rem;} .archivinfo span {display:inline-block; background:#4fafc8; color:#fff; padding:8px 12px; font-family:'Open Sans', Helvetica, Tahoma, sans-serif; font-style:normal;} .hotline h1 {font-size:calc(1em + 3.5vw); line-height:1; margin:0 0 10px;} .hotline span.phone {display:block; margin:20px 0; font-family:'Oswald', sans-serif; font-size:calc(1em + 9vw); line-height:1;} .hotline span.times {padding:0 10px;} .hotline .text p {text-align:center; font-size:1.2em; margin:0; line-height:1.1;} /* Zitat */ .zitat {background-image:url(images/layout/bg-zitat.jpg); background-repeat:no-repeat; background-size:contain; background-position:left 15vw bottom -5vw; padding-top:40.00%;} .zitat .text {width:40vw; left:70vw; padding:10px; background:rgba(255,255,255,0.7); border-radius:15px;} .zitat .text p {margin:0; font-size:2em; text-align:left; line-height:1;} .zitat .text p:before {position:absolute; top:-10vmin; left:-10vmin; z-index:-1; content:"\e81f"; font-family:fontello; font-size:30vmin; color:#f9f9f9; line-height:1.0em; font-style:normal; font-weight:normal; text-decoration:inherit;} .zitat .text span {display:inline-block; margin:10px 0 0; font-style:italic; text-align:right; color:#4fafc8;} .mask {overflow:hidden;} .mask:before {content:''; position:absolute; right:-50%; bottom:-26px; width:110%; height:80%; background:#fff; -moz-transform:skew(10deg, -80deg); -webkit-transform:skew(10deg, -80deg); transform:skew(10deg, -80deg);} article {overflow:hidden;} .overlay {position:absolute; bottom:0; left:-150%; right:0; background-color:#fff; opacity:0.5; width:120%; height:100%; -webkit-transition:.7s ease; -o-transition:.7s ease; transition:.7s ease; -webkit-transform:skew(-15deg); -ms-transform:skew(-15deg); transform:skew(-15deg);} article:hover .overlay {left:150%;} .from-top .dp-panel-container:before {content:''; background-image:url(images/gravatar-gray.svg) !important; position:absolute; z-index:-1; top:-200px; right:-250px; width:120vw; height:120vw; background-repeat:no-repeat; opacity:0.05; transform:rotate(20deg);} .single .post p:first-of-type {font-weight:bold;} .single ul.gallery.flex-parent {flex-wrap:nowrap; padding:15px 8vmin;} .single ul.gallery .flex-child {flex:1 0 0; padding:0;} .single ul.gallery .flex-child img {padding:0;} .terms span {margin:0 3px; padding:3px 5px; background-color:#f6f6f6; border-radius:3px;} /* Tags */ ul.tags {width:100%; margin:30px 0 0;} .page ul.tags {margin:40px 0 0;} ul.tags li.tagstitle {font-family:'Oswald', sans-serif; font-size:1.0em; font-weight:500;} ul.tags li {display:inline-flex; list-style:none; margin:5px 0;} ul.tags li:before {display:none;} ul.tags li a {background:#f9f9f9; font-size:0.9em; margin:0 3px; padding:5px 10px; border-radius:15px; border:2px solid #eceae3;} ul.tags li a:hover {background:#4fafc8; color:#fff; border:2px solid #fff;} /* Login */ .login.content {height:calc(100vh - 484px);} /* Archiv */ .archive article {padding:50px 3%;} .archive .headline {margin:0 0 20px;} /* .archive .post {margin:40px 0; padding:30px 0;} .archivinfo p, #not-found p {margin:-60px 0 0;} */ /* ########## :nth ########## */ div.nth article:nth-of-type(odd) {background-color:#fff;} div.nth article:nth-of-type(even) {background-color:#f9f9f9;} /* ########## Team ########## */ .team .headline {margin:50px 0 0px;} .team .slick-track {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:flex-start; margin:0 auto;} .team .flex-child {flex:1 1 auto; padding:1%; float:none;} .team .circle {margin:0 0 10px; padding:0 !important;} .team .circle img {display:block; margin:0 auto; border:5px solid #f9f9f9;} .team p {text-align:center; margin:3px 0;} .team .name {font-weight:600; margin:5px 0 15px;} .team p a {border-bottom:none;} /* ########## Downloads ########## */ .download.content li {position:relative; list-style:none; margin:30px 0; padding:10px 50px 10px 10px; border-radius:10px;} .download.content li.pdf:before, .download li.jpg:before {float:left; display:block; width:40px; height:auto; margin:10px;} .download.content li.pdf:before {content:url('images/layout/icons/icon_pdf.svg');} .download.content li.jpg:before {content:url('images/layout/icons/icon_jpg.svg');} .download.content li:hover {background-color:#f9f9f9;} .download.content li a {display:block;} .download.content span.type {text-transform:uppercase;} .download.content i.icon-download {right:0; font-size:2em; color:#d20a1a;} /* ########## Aktion/Campaign-Styles ########## */ .campaign {position:relative;} .campaign .watersign {position:relative; overflow:hidden;} .campaign .watersign:before {content:''; background-image:url(images/gravatar-gray.svg) !important; background-repeat:no-repeat; position:absolute; z-index:1; top:-200px; right:-250px; width:80vmin; height:80vmin; opacity:0.03; transform:rotate(20deg);} .campaign img {background-color:#f9f9f9;} .campaign h1, .campaign h2 {letter-spacing:1px; text-shadow:0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff;} .campaign .headline {margin:30px 0 40px;} .campaign .text {width:75%; margin:0 auto; padding:10px; background-color:rgba(255,255,255,0.8);} /* Extra-Styles "Jubiläum" */ .campaign {background-image:url(images/layout/jubilee/jubilee-girl.jpg); background-repeat:no-repeat; background-position:left 10vw bottom; background-size:contain;} /*.campaign h1, .campaign h2 {color:#4fafc8;}*/ /* ########## Karriere ########## */ .careercontainer.post {margin:70px 0; padding:10px 0; background:#f9f9f9; border-radius:15px;} .careertitle {background:#4fafc8; margin:0; padding:10px 0; border-radius:15px;} .careertitle:hover {background:#67a0ce;} .careertitle a {color:#fff;} .careerteaser {background-image:url(images/layout/bg-careerteaser.jpg); background-repeat:no-repeat; background-size:cover;background-position:center center;} .careerteaser:before {position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; content:''; background-color:rgba(0,0,0,0.65);} .careerteaser .post {position:relative; z-index:2; color:#fff;} .careerteaser .more-link {color:#fff; border:1px solid #fff;} .careerteaser .more-link:hover {border:1px solid transparent !important;} /* ########## Fotoalbum Referenzen ########## */ .phalb .flex-child {flex:0 1 auto; background:#4fafc8; margin:2%; padding:2%;} .phalb .flex-child:hover img {border:0px solid rgba(255,255,255,0.0);} .phalb img {padding:0; border:8px solid rgba(255,255,255,0.3);} .phalb .caption {position:relative; left:0; text-align:center; padding:16px 0 0; background:none; color:#fff;} /* ########## Blockquote ########## */ blockquote {border-top:10px dotted #e5e5e5; border-bottom:10px dotted #e5e5e5; margin:40px 0; padding:15px 0; letter-spacing:2px;} /* ########## Logos ########## */ /* .logos .slick-track {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center;} .logos .flex-child {flex:1 0 auto; padding:0 2% !important; float:none;} .logos .flex-child img {display:inline-block; height:8vmin; width:auto; padding:0;} .logos p {display:none; text-align:center;} .slick-prev:before, .slick-next:before {color:#4fafc8;} */ .logos {padding: 35px 0 !important;} .logos p {margin: 0 !important;} .logos .marquee { --gap: 3vw; position:relative; display:flex; overflow:hidden; user-select:none; gap:var(--gap); } .logos .marquee__content { flex-shrink:0; display:flex; justify-content:space-around; gap:var(--gap); min-width:100%; list-style:none; /* animation-duration wird per JS gesetzt */ animation: scroll 20s linear infinite; } .logos .marquee__content > li { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; } .logos .marquee__content img { display:inline-block; height:8vmin; width:auto; padding:0; } .logos .marquee__content p { display:block; text-align:center; margin:10px 0 0; font-size:0.85em; } @keyframes scroll { from {transform:translateX(0);} to {transform:translateX(calc(-100% - var(--gap)));} } /* Pause on hover */ .logos .marquee--hover-pause:hover .marquee__content { animation-play-state:paused; } /* Pause animation when reduced-motion is set */ @media (prefers-reduced-motion: reduce) { .logos .marquee__content { animation-play-state:paused !important; } } .slick-prev:before, .slick-next:before {color:#4fafc8;} /* ########## Table-Style ########## */ .table {display:table; width:100%; border-collapse:collapse;} .table-row {display:table-row;} .table-cell {display:table-cell;} /* ########## Table-Style ########## */ .table {display:table; width:100%; border-collapse:collapse;} .table dl {display:table-row; width:100%; border-bottom:1px solid #d9d9d9;} .table dt, .table dd, .table .table-cell {display:table-cell; vertical-align:middle; text-align:left;} .table dd {padding:25px 2%; width:40%;} .table dt {padding:25px 2%; width:60%;} /* ########## FlexBox ########## */ .flex-parent {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch;} .flex-child {flex:1 0 50%; padding:3%;} .flex-child.mask {padding:0;} .flex-child {position:relative;} .reverse {flex-direction:row-reverse;} .flex-start {align-self:flex-start;} /* News */ .news .flex-child.first {flex-basis:100%;} .paged .news .flex-child.first {flex-basis:50%;} /* ########## Seiten ########## */ .page .flex-child p:first-of-type {margin:0 0 14px;} .page .flex-child p:last-of-type {margin:14px 0 0;} /* ########## Single ########## */ .single .flex-parent {align-items:center;} /*.single .wrapper:first-of-type {max-width:100%; margin:0 10vmin;}*/ /*.page .flex-child {padding:0 0 0 5.5%;}*/ /* ########## News/Referenzen Startseite ########## */ .home .flex-parent article:nth-child(odd) {padding:0 5% 0 0;} .home .flex-parent article:nth-child(even) {padding:0 0 0 5%;} .postcontainer h1 {text-align:center; margin:10px 0 0;} /*.postcontainer h1:after {content:''; display:block; margin:1.0rem auto; width:70%; height:0px; border-bottom:1px solid #f0f0f0;}*/ .archive .postcontainer h1:after {border-bottom:none;} .postcontainer a.more-link {display:inline-block; margin:20px;} .postexcerpts {position:relative; padding:0 !important;} /* Triangle */ .postcontainer h1.triangle {position:relative; margin:-70px auto 20px; text-align:center; line-height:1.3;} .postcontainer h1.triangle:before {content:''; width:0px; height:0px; display:block; margin:0 auto; border-style:solid; border-width:40px;} .gray .postcontainer h1.triangle:before {border-color:transparent transparent #f9f9f9 transparent;} .white .postcontainer h1.triangle:before {border-color:transparent transparent #fff transparent;} /* ########## Timeline ########## */ .timeline {margin:80px 0 0;} /*.timeline .slick-slide {padding:0 2%;}*/ .timeline .slick-slide span.year {z-index:-1; font-size:40vw; opacity:0.05;} .timeline .flex-parent {align-items:flex-start;} .timeline .flex-child {flex:1; max-width:400px;} .timeline .flex-child .box {padding:10px; background-color:#f9f9f9;} .timeline .flex-child .date {background-color:#4fafc8; margin:0; color:#fff; font-size:1.1em; line-height:2;} .timeline .flex-child img {margin:10px 0; padding:0;} /* Timeline-Nav*/ .timeline .single-item-nav .slick-slide {font-size:4vmin; text-align:center; opacity:0.2;} .timeline .single-item-nav .slick-slide.slick-center {font-size:6vmin; color:#4fafc8; opacity:1;} .timeline .single-item-nav .slick-current:after {content:"\e830"; font-family:fontello; display:block; font-size:0.5em; line-height:0.5em; font-style:normal; font-weight:normal; text-decoration:inherit; margin:0 7px 0 0px;} /* ########## Impressum ########## */ .impressum div.quelle {margin:50px 0 0;} .impressum div.quelle ul {margin:20px 0;} .impressum div.quelle li {list-style:none; margin:5px 0 5px 20px;} .impressum div.quelle li:before {content:"\f1f9"; font-family:fontello; font-size:1.0em; line-height:1.0em; vertical-align:middle; font-style:normal; font-weight:normal; text-decoration:inherit; margin:0 7px 0 0px;} .impressum address.address {display:block; width:100%; margin:20px 0; float:none; text-align:left;} .impressum #legal {margin:50px 0;} .impressum #legal span {display:block; margin-left:10px;} /* ########## Datenschutz ########## */ .datenschutz.content p {text-align:left;} .datenschutz.content #legal p {margin:0 0 0 20px;} .datenschutz.content span.nr {padding:0 5px 0 0;} .datenschutz.content ul {margin:20px 0 20px 20px;} .datenschutz.content li {list-style:none; padding:1px 0 1px 10px;} .datenschutz.content li:before {content:"\f111"; font-family:fontello; font-size:0.3em; line-height:1.0em; vertical-align:middle; font-style:normal; font-weight:normal; text-decoration:inherit; margin:0 7px 0 0px;} .datenschutz.content #index {display:inline-block; padding:15px; background-color:#f3f3f3; border:1px solid #e0e0e0;} .datenschutz.content #index #h {margin:0 0 10px;} .datenschutz.content ol li {list-style:decimal; margin:0; padding:0;} .datenschutz.content #index ol {margin:0 0 0 40px;} .datenschutz.content #index ol li {line-height:1.6em;} .datenschutz.content #index ol li:before {content:""; margin:0;} .datenschutz #trust {font-size:2em; margin:50px 0 0;} .datenschutz.content #currentstatus {font-size:0.85em; text-align:center; margin:40px 0 0;} /* ########## Pagination ########## */ .pagination {margin:20px 0 80px; text-align:center;} .pagination li {display:inline; list-style:none;} .pagination .page-numbers {margin:0 2px; padding:6px; width:36px; line-height:30px; text-align:center; font-size:1.2em; color:#696969; display:inline-block; background:#f9f9f9; border-radius:3px;} .pagination .page-numbers:hover {background:#4fafc8; color:#fff;} .pagination span.current {color:#fff; background:#4fafc8;} .pagination a.prev.page-numbers, .pagination a.next.page-numbers {display:none;} /* ########## Footer ########## */ footer {position:relative; margin:0; padding:60px 0; color:#fff; background:#4fafc8;} footer .flex-child {flex:1 1 0; padding:0 !important;} /* Tagcloud */ #tagcloud {max-width:1000px; margin:0 auto; padding:30px; text-align:justify;} #tagcloud a {color:#fff; line-height:1.5em;} /* Footer-Nav */ footer a {color:#fff;} footer .footer-nav {margin-left:20px;} footer .footer-nav li {position:relative; list-style:none;} footer .footer-nav li:before {position:absolute; top:50%; left:-20px; margin:0; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); content:"\e82d"; font-family:fontello; font-size:0.8em; color:#fff; font-style:normal; font-weight:normal; text-decoration:inherit;} footer .footer-nav li a {line-height:2.0em; transition:all 1s ease; border-bottom:none;} footer .footer-nav li a:hover {padding-left:10px;} /* ################### Sticky Footer ###################### */ .page-kontakt .content {min-height:calc(100vh - 580px);} /* ################### Fullscreen Video ###################### */ .fullscreen-bg {position:fixed; top:0; right:0; bottom:0; left:0; overflow:hidden; z-index:-100; min-width:100%; min-height:100%; width:auto; height:auto;} .fullscreen-video {position:absolute; top:50%; left:50%; width:auto; height:auto; min-width:100%; min-height:100%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} /*.fullscreen-bg::after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);}*/ @media (max-width:767px) { .fullscreen-bg {background:url('http://spoerck.pannasch.net/wp-content/uploads/2018/04/video-clouds.jpg') center center / cover no-repeat;} .fullscreen-video {display:none;} } /* ########## Kontakt ########## */ .contact.entry-content {padding:0;} .contact .flex-child:first-of-type {padding:0;} .contact .flex-child.white {position:static;} .contact a.ds {display:block; clear:both; padding-left:15%;} .contact address {padding:0 0 0 3%;} address {width:100%; display:inline-block; margin:20px 0; font-style:normal;} address span {display:block; margin:7px 0;} address span.place {margin:0 0 15px;} address span.email {margin:15px 0;} address span.name {font-size:1.15rem; font-weight:bold; margin:0 0 15px;} span.icn:before {font-family:fontello; font-size:1.05em; line-height:1.0em; font-style:normal; font-weight:normal; text-decoration:inherit; margin:0 7px 0 0px;} span.icn.email:before {content:"\f0e0";} span.icn.phone:before {content:"\e812";} span.icn.fax:before {content:"\e80e";} span.icn.times:before {content:"\e81e";} #contactForm {margin:40px 0;} .dpcf #submit:hover {background:#4fafc8;} /* ############## Google Map ############## */ #map_canvas img {max-width:none;} #map_canvas {position:absolute; z-index:1; left:0; top:0; width:50%; height:100%;} a.large-view i.icon{font-size:2em;} a.large-view {position:absolute; z-index:3; bottom:50%; left:50%; transform:translateX(-50%); color:#696969; text-decoration:none; background:#fff; border-radius:50%; line-height:60px; text-align:center; width:60px; height:60px;} /* Routenplaner */ #routenplaner {position:absolute; z-index:2; top:0px; width:100%; padding:10px; text-align:center; color:#fff; font-size:1.1em; text-decoration:none; background-color:#000; opacity:0.6; box-shadow: 0 5px 5px -5px #333;} #routenplaner:hover {background-color:#4fafc8; opacity:1; transition:0.5s ease-in-out;} #back {position:absolute; top:50%; left:0; z-index:2; text-decoration: none; background:#fff; padding:18px; font-family:'Oswald', sans-serif;} /* ############## Danke ############## */ .danke.content {margin:0; padding:0;} .danke {width:100vw; height:100vh;} .danke .post {width:100vw; margin-top:-80px; text-align:center;} .danke h1 {font-size:10vw;} .danke p {display:inline-block; font-size:1.2em;} /* ########## Image classes ########## */ img {max-width:100%; height:auto; padding:8px;} /*.no-bg {background:none;}*/ .caption {position:absolute; bottom:5px; left:27px; padding:8px; background-color:#f9f9f9;} .alignleft {float:left; margin:0 20px 10px 0;} .alignright {float:right; margin:0 0 10px 20px;} .aligncenter {display:block; margin:0 auto 20px;} .wp-caption {background:#f9f9f9; margin:0 auto 40px; padding:10px; box-shadow:0 0 5px #c0c0c0; transform:rotate(-3deg);} .timeline .wp-caption {background:transparent; margin:0 auto 40px; padding:10px; box-shadow:none; transform:rotate(0deg);} .wp-caption img {padding:0;} figure.wp-caption {background:#f9f9f9; padding:5px;} figure.wp-caption img {margin:0 auto; width:100%;} figure {display:table;} figcaption {display:display:block; caption-side:bottom; padding:6px 5px 4px; text-align:center; font-size:0.8rem;} .gallery {margin:40px auto !important;} .gallery img {border:none !important; max-height:200px;} .gallery li {list-style:none; text-align:center;} .gallery .gallery-caption {color:#bcbcbc;} .gallery .gallery-caption:before {display:block; font-family:'fontello'; content:"\e823"; font-size:100%; text-align:center; vertical-align:middle; font-weight:normal; line-height:1em; width:100%; padding:0; -webkit-border-radius:100%; border-radius:100%; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box; color:#bcbcbc;} .postthumb {background-color:#f9f9f9; min-width:100%; margin-bottom:0px;} .standardpostthumb {background-color:transparent;} /* ########## Toggle ########## */ .toggle-box {padding:40px;} /*.boxed {border:1px solid #e8e8e8; background-color:#f3f3f3; border-radius:5px;}*/ .toggle-box p {margin:0;} .toggle-button:hover {cursor:pointer;} /* Fluid Toggle-Box */ .fluid-toggle-box {overflow:hidden;} /* ########## Various classes and id´s ########## */ button:focus {outline:0;} /* Chrome Hack */ input[type=search] {-webkit-appearance:none;} .hidden {display:none !important;} .search-highlight {background:#e94c16; color:#fff; padding:2px 6px;} #back-to-top {display:none;} #back-to-top i {top:-40px; font-size:5.0em; line-height:1;} #back-to-top i.icon-angle-circled-up {z-index:2; color:#4fafc8;} #back-to-top i.icon-circle {z-index:1; color:#fff;} #back-to-top i:hover {color:#67a0ce;} sub, sup {font-size:0.8em;} em {line-height:1.5em;} hr {width:50%; margin:30px auto; margin-left:auto; margin-right:auto; height:1px; background-color:#f6f6f6; color:#f6f6f6; border:0 none;} #dp_footer {display:none;} #dp {margin:100px 0 30px; padding:0;} #dp h5 {font-size:1.0em; font-weight:400; line-height:1.5em; margin:15px 0 5px; background:none;} #dp-logo {display:block; background:url(https://www.pannasch.net/images/pannasch-logo.svg) no-repeat left center; width:100%; height:75px;} #dp a {color:#bebebe; font-size:0.8em; text-decoration:none; border:none;} #not-found p {text-align:center;} /* Fluid YouTube Videos .aspect-ratio {position:relative; width:100%; height:0; padding-bottom:56%;} .aspect-ratio iframe {position:absolute; width:100%; height:100% !important; left:0; top:0; background-color:#f9f9f9; padding:5px;} */ /* Fluid YouTube Videos - ALT */ iframe {width:100%; margin:0 0 20px 0;} /* ########## FadeIn mit Delay ########## */ .fadein {opacity:0; opacity:1 \9; /*just in case ie*/ -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-delay:2.0s; -moz-animation-delay:2.0s; animation-delay:2.0s;} .fadein.sec1 {-webkit-animation-delay:1s; -moz-animation-delay:1s; animation-delay:1s;} @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } /* ########## Animation ########## */ .trans {transition:0.5s ease-in-out;} /* No-JS SlideUp @keyframes slideup {0% {top:0px;} 75% {top:0px;} 100% {top:-200px;}} @-moz-keyframes slideup {0% {top:0px;} 75% {top:0px;} 100% {top:-200px;}} @-webkit-keyframes slideup {0% {top:0px;} 75% {top:0px;} 100% {top:-200px;}} @-o-keyframes slideup {0% {top:0px;} 75% {top:0px;} 100% {top:-200px;}} */ /* ########################################################################### */ /* ------------------------------------------------------------- His Responsiveness ------------------------------------------------------------- */ /* ########################################################################### */ a[href^=tel] { color:inherit; text-decoration:none;} @media screen and (max-width:880px) { html, body {font-size:105%;} button.hamburger, header.small button.hamburger {padding:15px 10px 8px 30px;} .logo {max-width:158px;} .zitat {padding-top:100%; background-position:left -4vw bottom -5vw;} .zitat .text {background-color:rgba(255,255,255,0.9);} .zitat .text p {font-size:1.2em;} .zitat .text p:before {display:none;} .contact.flex-parent {flex-direction:column-reverse;} #map_canvas {position:relative; width:100%; height:50vh;} a.large-view {left:50%; top:50vh; transform:translate(-50%, -50%);} .postcontainer h1 {position:relative; top:0; left:0; padding:0; text-align:center; max-width:100%; background:none;} .postcontainer.first h1 {max-width:100%;} #back-to-top {display:block;} .headline h1 {font-size:2.1em;} p {line-height:1.6em;} .teaser .two-col p {-moz-column-count:1; -webkit-column-count:1; column-count:1;} .flex-child {flex:1 0 100%;} .contact address {padding:0;} .contact address span {padding:0 0 0 15%;} .contact address span.name {padding:15px 0; text-align:center;} .toggle-box, .boxed {padding:10px;} .home .flex-parent article:nth-child(odd), .home .flex-parent article:nth-child(even) {padding:3%;} }/* Ende @media screen */ @media screen and (max-width:787px) { footer .flex-child {flex:1 1 auto;} }/* Ende @media screen */ @media screen and (max-width:600px) { /*header {position:relative;)*/ .hiring {display:none;} /* .logos .flex-child img {height:15vmin;} */ .logos .marquee__content img {height:15vmin;} .zitat {padding-top:110%; padding-bottom:0;} .zitat .text {position:relative; width:90%; top:0; right:0; bottom:0; left:0; margin:5%; padding:25px; background-color:rgba(79,175,200,0.8); transform:translate(0);} .zitat .text p, .zitat .text span {color:#fff;} .timeline .single-item-nav .slick-slide.slick-center {font-size:8vmin;} .hotline span.icn.phone:before {content:"";} .hotline span.times {display:block;} .hotline .text {display:none;} #tagcloud {text-align:center;} .table dt, .table dd {display:block;} .table dt {width:100%;} .table dd {width:100%;} }/* Ende @media screen */ /* Abstand */