/* Theme Name: KPI Events Theme URI: https://www.kpi-event.de Author: DIGINOVUM Author URI: https://www.diginovum.de/dienstleistungen/ Description: Individuelles Theme basierendes auf Bootstrap und ACF, SEO optimiert Tags: boilerplate, clean, simple, bootstrap, seo Text Domain: kpi */ /********************************************************************** _ _ _ _ | (_) (_) | | __| |_ __ _ _ _ __ _____ ___ _ _ __ ___ __| | ___ / _` | |/ _` | | '_ \ / _ \ \ / / | | | '_ ` _ \ / _` |/ _ \ | (_| | | (_| | | | | | (_) \ V /| |_| | | | | | || (_| | __/ \__,_|_|\__, |_|_| |_|\___/ \_/ \__,_|_| |_| |_(_)__,_|\___| __/ | |___/ *********************************************************************** URL: https://www.diginovum.de Creator: DIGINOVUM GmbH Author: Frank Schmitz Contact: schmitz@diginovum.de *********************************************************************** 〈 〉 | « » | ← → | ⟵ ⟶ | ‹ › | “ ” | – ⌄ ∨ 📷 ❤ ☀ ★ ☂ ☎ ☏ ⌚ ❄ ♫ ☯ 🗸 ✓ ✔✔ 🗹 ✅ ☑ ⨯ ✗ ✘ ❌ ☒ ❎ ◄ ► ◅ ▻ • ™ © ® ☘ ✿ ❀ ■ **********************************************************************/ /********************************************************************** *** TWEAKS *********************************************************************/ svg{max-height:100%; /* chrome needs it */} body.logged-in .navbar-fixed-top {top:30px;} .embed-responsive > iframe {border: 0 none; bottom: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;} img[class^="wp-image-"], img[class*=" wp-image-"] {display: block; max-width: 100%; height: auto;} :focus {outline:0; -webkit-outline: 0; -moz-outline: 0; -ms-outline: 0; -o-outline: 0;} .aligncenter {margin-left: auto; margin-right: auto;} .screen-reader-text {display: none!important;} .embed-responsive-3by4 {padding-bottom: 116.25%;} /********************************************************************** *** FONTS *********************************************************************/ /* Red Hat-regular - latin */ @font-face { font-family: 'Red Hat'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/kpi/RedHatDisplay-Regular.ttf'); src: local(''), url('fonts/kpi/RedHatDisplay-Regular.ttf') format('truetype'); } /* Carla Sans Regular - latin */ @font-face { font-family: 'CarlaSansRegular'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/kpi/CarlaSansRegular.woff'); src: local(''), url('fonts/kpi/CarlaSansRegular.woff2') format('woff2'), url('fonts/kpi/CarlaSansRegular.woff') format('woff'); } /* Carla Sans Bold - latin */ @font-face { font-family: 'CarlaSansBold'; font-style: normal; font-display: swap; font-weight: bold; src: url('fonts/kpi/CarlaSansBold.woff'); src: local(''), url('fonts/kpi/CarlaSansBold.woff2') format('woff2'), url('fonts/kpi/CarlaSansBold.woff') format('woff'); } .redhat {font-family: 'Red Hat'; font-weight: normal;} .carla {font-family: 'CarlaSansRegular'; font-weight: normal;} /*.social-icon {font-family: 'smartphone'; font-size: 27px; color: black;}*/ /********************************************************************** *** HELPER *********************************************************************/ .img-center {display: block; margin: 0 auto;} .hyphens {-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;} .box {padding: 15px;} .rounded {border-radius: 5px;} /*.full-height {height: 95vh; position: relative; display:table; width: 100%;} .vertical-table {display: table; width: 100%;} .vertical-centered {display: table-cell; vertical-align: middle; width: 100%;}*/ /***************************** *** TEXT ******************************/ .light, .light > p {font-weight: lighter;} .normal, .normal > p {font-weight: normal;} .bold, .bold > p {font-weight: bold;} .underline {text-decoration: underline;} .italic {font-style: italic!important;} .uppercase {text-transform: uppercase;} .right {text-align: right;} .right > img {float: right;} .left {text-align: left;} .left > img {float: left;} .center {text-align: center;} .center > img, img.center {margin:0 auto;} /***************************** *** PADDING ******************************/ .padding {padding:15px;} .padding-xs {padding-top: 5px!important; padding-bottom: 5px!important;} .padding-xs-top {padding-top: 5px!important;} .padding-xs-bottom {padding-bottom: 5px!important;} .padding-s {padding-top: 15px!important; padding-bottom: 15px!important;} .padding-s-top {padding-top: 15px!important;} .padding-s-bottom {padding-bottom: 15px!important;} .padding-m {padding-top: 30px; padding-bottom: 30px;} .padding-m-top {padding-top: 30px!important;} .padding-m-bottom {padding-bottom: 30px!important;} .padding-l {padding-top: 60px!important; padding-bottom: 60px!important;} .padding-l-top {padding-top: 60px!important;} .padding-l-bottom {padding-bottom: 60px!important;} .padding-xl {padding-top: 90px!important; padding-bottom: 90px!important;} .padding-xl-top {padding-top: 90px!important;} .padding-xl-bottom {padding-bottom: 90px!important;} .padding-xxl {padding-top: 150px!important; padding-bottom: 150px!important;} .padding-xxl-top {padding-top: 150px!important;} .padding-xxl-bottom {padding-bottom: 150px!important;} .padding-0 {padding-top:0!important; padding-bottom:0!important;} .padding-0-bottom {padding-bottom:0!important;} .padding-0-top {padding-top:0!important;} .no-padding {padding-top:0!important; padding-bottom:0!important;} /***************************** *** MARGIN ******************************/ .margin {margin: 15px;} .margin-s {margin-top: 15px!important; margin-bottom: 15px!important;} .margin-s-top {margin-top: 15px!important;} .margin-s-bottom {margin-bottom: 15px!important;} .margin-m {margin-top: 30px!important; margin-bottom: 30px!important;} .margin-m-top {margin-top: 30px!important;} .margin-m-bottom {margin-bottom: 30px!important;} .margin-l {margin-top: 60px!important; margin-bottom: 60px!important;} .margin-l-top {margin-top: 60px!important;} .margin-l-bottom {margin-bottom: 60px!important;} .margin-xl {margin-top: 90px!important; margin-bottom: 90px!important;} .margin-xl-top {margin-top: 90px!important;} .margin-xl-bottom {margin-bottom: 90px!important;} .margin-xxl {margin-top: 150px!important; margin-bottom: 150px!important;} .margin-xxl-top {margin-top: 150px!important;} .margin-xxl-bottom {margin-bottom: 150px!important;} .margin-0 {margin-top: 0!important; margin-bottom: 0!important;} .margin-0-bottom {margin-bottom: 0!important;} .margin-0-top {margin-top: 0!important;} /***************************** *** BORDER ******************************/ .no-border, .no-border .border {border: 0 solid transparent!important;} .border {border: 1px solid #000;} .border-top-bottom {border-top: 1px solid black; border-bottom: 1px solid black;} .border-right-left {border-right: 1px solid black; border-left: 1px solid black;} .border-bottom {border-bottom: 1px solid black;} .border-top {border-top: 1px solid black;} .border-right {border-right: 1px solid black;} .border-left {border-left: 1px solid black;} /***************************** *** FLEX ******************************/ .display-flex {display: flex; flex-wrap: wrap; justify-content: center;} .display-flex-item {display: flex; align-content: stretch; margin: 0 -.3px 30px;} .equal-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .equal-height > div[class*='col-'] { display: flex; flex-direction: column; /*margin-left: -1px; margin-right: -1px;*/ justify-content: center; } /********************************************************************** *** STYLES FÜR kpi *********************************************************************/ html.loaded {background-color: #000;} html {font-size: 100%; -webkit-text-size-adjust: 100%; color: #fff;} body { background-color: #000; color: #fff; font-family: 'Red Hat'; text-rendering: optimizeLegibility; font-size: 17px; line-height: 1.6; /*padding-top: 75px;*/ /*font-weight: 700;*/ /*letter-spacing: 0.3px;*/ } /***************************** *** TEXT ******************************/ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'CarlaSansRegular'; margin-top: 0px; margin-bottom: 15px; color: #e5c097; font-weight: normal; line-height: 1.2em; } .bg-gold h1, .bg-gold h2, .bg-gold h3, .bg-gold h4, .bg-gold h5, .bg-gold h6, .bg-gold .h1, .bg-gold .h2, .bg-gold .h3, .bg-gold .h4, .bg-gold .h5, .bg-gold .h6 { color: #000; } h1, .h1 {font-size: 80px; font-weight: bold;} h2, .h2 {font-size: 33px;} h3, .h3 {font-size: 21px;} h4, .h4 {font-size: 18px;} p { margin: 0 0 15px; /*line-height: 1.5rem;*/ } small {} strong {} ul {} ul li {padding: 5px 0;} small {font-size: .8rem;} figcaption {padding-top: 10px;} .xl {font-size: 40px!important;} .l {font-size: 30px!important;} .m {font-size: 20px!important;} .s {font-size: 18px!important;} .xs {font-size: .8rem!important;} /***************************** *** LINKS ******************************/ a { color: white; transition: 0.3s all ease; } p > a { text-decoration: underline; font-weight: 500; margin: 12px 0 0; color: white; transition: 0.3s all ease; } a:hover {color: white;} a:focus {color: white; outline: none; outline-offset: -2px;} /***************************** *** COLORS ******************************/ .white {color:white!important;} .black {color: #101010!important;} .lightgrey {color: #A9A9A9!important;} .grey {color: #808080!important;} .darkgrey {color: #1c1919!important;} .gold {color: #E5C097!important;} .bg-white {background-color:white!important;} .bg-white-transparent {background-color: rgb(255,255,255,.8)!important;} .bg-black {background-color: #101010!important;} .bg-lightgrey {background-color: #A9A9A9!important;} .bg-grey {background-color: #808080!important;} .bg-darkgrey {background-color: #1c1919!important;} .bg-gold {background-color: #E5C097!important;} /***************************** *** BUTTONS ******************************/ .btn-kpi { color: white; background-color: black; border: 1px solid white; border-radius: 0px; padding: 9px 18px; /*font-size: 21px;*/ /*line-height: 21px;*/ outline: 0 !important; text-align: center; vertical-align: middle; display: inline-block; transition: all .8s ease; text-transform: uppercase; } .btn-kpi:hover, .btn-kpi:focus, .btn-kpi:active { background-color: #E6D9BF; color: black; border-color: white; text-decoration: none; } .btn-kpi-active { color: #e5c097; background-color: #808080; border: 1px solid #e5c097; border-radius: 0px; padding: 9px 18px; /*font-size: 21px;*/ /*line-height: 21px;*/ outline: 0 !important; text-align: center; vertical-align: middle; display: inline-block; transition: all .8s ease; text-transform: uppercase; } .btn-kpi-active:hover, .btn-kpi-active:focus, .btn-kpi-active:active { background-color: #E6D9BF; color: black; border-color: white; text-decoration: none; } .kpi-text-link { font-weight: 600; position: relative; transition: color .5s ease; } .kpi-text-link:hover { text-decoration: none; color: tomato; } /***************************** *** MISC ******************************/ .shadow {box-shadow: 0 0px 10px -2px #333;} .shadow-s {box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);} .shadow-m {box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);} .shadow-l, .img-circle {box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);} blockquote { font-family: 'Montserrat'; /*font-style: italic;*/ border-left-width: 0px; color: #000; padding: 30px 0px; margin: 0; font-size: 2.8rem; border-left: 0px solid white; } hr { margin-top: 0px; margin-bottom: 0px; border-color: #E5C097; border-width: 2px; border-radius: 1px; width: 100%; } .img-border-right { box-shadow: 40px 20px #e5c097; margin: 0 40px 20px 0; } .img-border-left { box-shadow: -40px 20px #e5c097; margin: 0 0 20px 40px; } /********************************************************************** *** PAGE-NAVIGATION *********************************************************************/ /***************************** *** NAVBAR-META ******************************/ /*#page-navigation-meta { height: 50px; }*/ /***************************** *** NAVBAR ******************************/ .navbar-kpi { transition: 1s background-color ease; top: 0px; background-color: black; margin-bottom: 0; /*margin-top: 50px;*/ box-shadow: 0 4px 4px -5px #333; padding: 20px 0; } .navbar-kpi .navbar-nav > li { border-bottom: 1px solid black; transition: 1s background-color ease; border-bottom: 1px solid #000; background-color: #000!important; padding: 18px 15px 12px; } .navbar-kpi .nav li:hover > a, .navbar-kpi .nav li.active > a, .navbar-kpi .nav li.current-page-ancestor > a { border-bottom: 1px solid #e5c097; background-color: black; background-color: transparent!important; } .navbar-kpi .navbar-nav li a { font-family: 'Red Hat'; color: white; padding: 0 0 5px; background-color: transparent!important; } .navbar-kpi .nav li.dropdown:hover > ul.dropdown-menu { display: block; } .navbar-nav > li > .dropdown-menu { background-color: #000000!important; } .navbar-nav > li > .dropdown-menu li { padding: 5px 15px; text-align: right; } .navbar-nav > li > .dropdown-menu li a { border-bottom: 1px solid #000; } .navbar-kpi .nav li > a:focus {} .navbar-kpi .nav li > a:hover, .navbar-kpi .nav li.active > a {} #hauptmenu {} #menu-hauptmenu {} .navbar-brand {} #logo {} /********************************************************************** *** PAGE-HEADER *********************************************************************/ /***************************** *** PAGE HEADER IMAGE ******************************/ #page-header-img {} /***************************** *** PAGE HEADER VIDEO ******************************/ #page-header-video {} #page-header-video { /*padding: 10% 0;*/ height: 80vh; max-height: 1080px; background-position: center center; background-size: cover; position: relative; } #page-header-video .full-height { height: 80vh; max-height: 1080px; position: relative; } /***************************** *** PAGE HEADER BG ******************************/ #page-header-bg {} #page-header-bg { /*padding: 10% 0;*/ height: 80vh; max-height: 1080px; background-position: center center; background-size: cover; position: relative; } #page-header-bg .full-height { height: 80vh; max-height: 1080px; position: relative; } .page-header-content { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .page-header-content br { height: 3px; } #page-header-link { margin-top: 30px; } #page-header-link.btn-kpi { background-color: transparent; } #page-header-link.btn-kpi:hover, #page-header-link.btn-kpi:focus, #page-header-link.btn-kpi:active { color: #E5C097; border-color: #E5C097; } /********************************************************************** *** PAGE-CONTENT *********************************************************************/ #main-content {} #main-content .container, #main-content .container-fluid {} .content-section { position: relative; padding-top: 90px; padding-bottom: 90px; max-width: 1920px; margin-left: auto; margin-right: auto; } /*.content-section.cs-margin-0 {margin-top: 0; margin-bottom: 0;} .content-section.cs-margin-s {margin-top: 30px; margin-bottom: 30px;} .content-section.cs-margin-m {margin-top: 60px; margin-bottom: 60px;} .content-section.cs-margin-l {margin-top: 30px; margin-bottom: 90px;}*/ .content-intro > div > p:last-child, .content-intro > p:last-child, .content-area > div > p:last-child, .content-outro > div > p:last-child {margin-bottom: 0;} .content-title { padding-bottom: 30px; } /*.content-title::after { content: ''; width: 150px; height: 5px; background-color: tomato; margin: 45px auto; display: block; }*/ .content-title-heading { margin-bottom: 0; } .content-title-subline {} .content-intro { padding-bottom: 30px; } .content-area {} .content-item { padding-bottom: 30px; } .content-item-intro a.btn-kpi { text-decoration: none!important; } .content-title-subheading { margin-bottom: 15px; } .content-outro { padding-bottom: 30px; } .content-link {/*text-align: center;*/} .img-content {} /***************************** *** TEXT ******************************/ .content-section-text {} /***************************** *** TILES ******************************/ .content-section-tiles {} .content-section-tiles .tiles-item { padding: 30px 0; height: 100%; position: relative; } .content-section-tiles .tiles-item .tiles-item-content { /*position: absolute; top: 50%; transform: translateY(-50%); width: 100%;*/ /*padding: 30px 0;*/ } .content-section-tiles .content-title-subheading { margin-bottom: 0; margin-top: 15px; } .content-section-tiles .tiles-item.bg-white .content-title-subheading { color: black; font-family: 'Red Hat'; } /***************************** *** IMAGE-TEXT ******************************/ .content-section-image-text .content-link { padding-top: 30px; } /***************************** *** IMAGE-TEXT-DOUBLE ******************************/ .content-section-image-text-double {} .content-section-image-text-double .content-item { padding-bottom: 0; } .content-section-image-text-double .img-border-right { box-shadow: 40px -20px #e5c097; margin: 20px 40px 0 0; } .content-section-image-text-double .plus { /*text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #e5c097; top: 50%; transform: translateY(-50%);*/ position: relative; } .content-section-image-text-double .plus .bar { background-color: #e5c097; margin: 0 auto; display: block; position: absolute; top: -15px; left: 0; right: 0; z-index: 99; } .content-section-image-text-double .plus .bar-horizontal { width: 300px; height: 30px; } .content-section-image-text-double .plus .bar-vertical { width: 30px; height: 300px; top: -150px; } .content-section-image-text-double .content-area .content-item-text { padding-right: 90px; } .content-section-image-text-double .content-area-2 .content-item-text { padding-left: 90px; } /***************************** *** C2A ******************************/ .content-section-c2a {} .content-section.content-section-c2a { padding: 60px 0; } .content-section-c2a .content-item { padding-bottom: 0; } .content-section-c2a .border-black-right { border-right: 1px solid black; } .c2a-contact .col-sm-6 { padding-top: 15px; padding-bottom: 15px; } .content-section-c2a.bg-gold .content-item, .content-section-c2a.bg-gold .content-item a { color: black; } .content-section-c2a .content-item .dashicons { color: white; vertical-align: middle; font-size: 2rem; width: 40px; height: 40px; margin-right: 10px } /***************************** *** IMAGE ******************************/ .content-section-image {} .content-section-image .content-image-item a, .content-section-image .content-image-item a img { display: block; margin: 0 auto; } /***************************** *** SHORTCODE ******************************/ .content-section-shortcode {} /***************************** *** VIDEO ******************************/ .content-section-video {} /***************************** *** IMAGE GALLERY ******************************/ .content-section-image-gallery {} .image-gallery-item { margin-bottom: 30px; } .img-gallery { padding-top: 60%; position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; } .img-gallery-overlay { /* content: '+'; */ font-size: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgb(229, 192, 151, .7); opacity: 0; text-align: center; padding: 8%; color: white; transition: .8s opacity ease; } .img-gallery-overlay:hover { opacity: 1; } /***************************** *** SLIDER ******************************/ .content-slider-flickity {} .slider-item-image { width: 100%; position: relative; } .slider-item-text { position: absolute; bottom: 15px; left: 0; right: 0; color: white; } .flickity-button { background: transparent; } .flickity-button:hover { background: transparent; } .flickity-prev-next-button .flickity-button-icon { width: 40px; height: 40px; } .flickity-prev-next-button { width: 40px; height: 40px; } .flickity-button-icon { fill: white; } .flickity-button:disabled { display: none; } .flickity-prev-next-button.previous {left: -70px;} .flickity-prev-next-button.next {right: -70px;} /***************************** *** SLIDER TESTIMONIAL ******************************/ .slider-testimonial {} .slider-testimonial-item { width: 33%; padding: 15px; } .slider-testimonial .flickity-page-dots .dot { background: #fff; } /***************************** *** SLIDER COVERFLOW ******************************/ .content-section-slider-coverflow {} .content-section-slider-coverflow .slider-coverflow-item { /*width: 30%;*/ width: 50%; position: relative; /* flex-box, center image in cell */ display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-left: -35px; } .content-section-slider-coverflow .slider-coverflow-item.is-selected { z-index: 10; } .content-section-slider-coverflow .slider-coverflow-item img { display: block; max-width: 100%; max-height: 100%; /* dim unselected */ opacity: 0.5; -webkit-transform: scale(0.85); transform: scale(0.85); /*-webkit-filter: blur(1px); filter: blur(1px);*/ -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s; transition: opacity 0.5s, transform 0.5s, filter 0.3s; } .content-section-slider-coverflow .slider-coverflow-item.is-selected img { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-filter: none; filter: none; } .content-section-slider-coverflow .slider-coverflow-item.is-previous img, .content-section-slider-coverflow .slider-coverflow-item.is-next img { opacity: 1; -webkit-transform: scale(0.85); transform: scale(0.85); } .slider-coverflow-item-text { position: absolute; bottom: 45px; left: 0; right: 0; color: white; padding: 15px 30px; } /***************************** *** SLIDER TEXT ******************************/ .content-section-slider-text {} .content-slider-text-gsap { overflow: hidden; text-align: center; } .content-section-slider-text-loader { display: none; } .slider-text-item-wrapper.h1.white { font-size: 5rem; } .kpi-dot { padding: 0 45px; font-size: 10rem; vertical-align: text-top; } /***************************** *** CONTACTFORM ******************************/ /***************************** *** SLIDER FLICKITY ******************************/ /********************************************************************** *** PAGE-SECTIONS *********************************************************************/ .page-section {} /***************************** *** CONTACT ******************************/ #page-section-contact { padding: 90px 0; } #page-section-contact-img { margin-top: 30px; /*box-shadow: 40px 15px #e5c097; margin: 30px 40px 15px auto;*/ } /********************************************************************** *** PAGE-FOOTER *********************************************************************/ #page-footer {} #page-footer-blocks ul, #page-footer-menu ul { list-style: none; padding-left: 0; margin-bottom: 0; } #page-footer-blocks ul li, #page-footer-menu ul li { display: inline-block; margin: 0 15px; } /***************************** *** PAGE-FOOTER-BLOCKS ******************************/ #page-footer-blocks { padding: 90px 0; } #page-footer-blocks .dashicons { margin-right: 10px; vertical-align: text-bottom; } #page-footer-blocks .dashicons-location { margin-bottom: 10px; float: left; margin-top: 5px; } #page-footer-meta-socials { text-align: center; } #page-footer-meta-socials a { text-decoration: none!important; } #page-footer-meta-socials .dashicons { font-size: 37px; } /***************************** *** PAGE-FOOTER-MENU ******************************/ #page-footer-menu { padding-bottom: 30px; } .back2top { padding: 5px 0; display: inline-block; } #logo-footer { margin: 5px 0; } /***************************** *** PAGE-FOOTER-FLYOUT ******************************/ #flyout { position: fixed; left: 0; top: 40%; padding: 15px 60px 15px 15px; border-radius: 0 45px 45px 0; transition: .5s all ease; transform: translateX(-160px); width: 230px; height: 60px; /*background-color: #E5C097;*/ } #flyout:hover { transform: translateX(0); background-color: #E5C097; } #flyout:hover .icon { border-radius: 0; background-color: #E5C097; } #flyout .icon { width: 60px; height: 60px; border-radius: 50%; position: absolute; right: 0; top: 0; transition: .5s all ease; padding: 15px; font-size: 27px; } /********************************************************************** *** SINGLE *********************************************************************/ /********************************************************************** *** CPT *********************************************************************/ /********************************************************************** *** FORMS *********************************************************************/ .wpcf7 {} .wpcf7 .form-control { border-radius: 0; } .wpcf7 .form-control:focus { box-shadow: inset 0 1px 1px #e5c097,0 0 5px #e5c097; border: 1px solid #e2e2e2; } .wpcf7 label { font-weight: normal; } .wpcf7 #legal {margin-right: 5px;} .wpcf7-acceptance {padding: 5px 0; display: block;} .wpcf7 .wpcf7-not-valid-tip, .wpcf7 .screen-reader-response/*, .wpcf7 .wpcf7-response-output*/ {display: none!important;} .wpcf7 .wpcf7-not-valid {border: 2px solid red!important;} /*.wpcf7 .form-group { margin-bottom: 30px; } .wpcf7 .wpcf7-form-control-wrap { margin-top: 10px; display: block; } .wpcf7 input[type="text"], .wpcf7 input[type="email"] { width: 100%; -webkit-appearance: none; border-radius: 4px; padding: 20px; font-size: 1rem; line-height: 16px; border: 1px solid #e2e2e2; margin-bottom: 15px; color: tomato; font-style: italic; } .wpcf7 textarea { resize: vertical; width: 100%; min-height: 200px; padding: 20px; -webkit-appearance: none; border: 1px solid #e2e2e2; margin-bottom: 15px; color: tomato; font-style: italic; color: tomato; } .wpcf7 .wpcf7-not-valid {border: 2px solid red!important;} .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok { display: block!important; text-align: center; padding: 20px; } .wpcf7 .legaltext, .wpcf7-form-control-wrap.legal { font-size: 1rem; line-height: 1rem; font-weight: normal; } .wpcf7-list-item-label { font-weight: normal; } .wpcf7 input[disabled] { cursor: not-allowed; }*/ /********************************************************************** *** COOKIEBOT *********************************************************************/ /*.cookieconsent-optout-marketing { display: block; background-color: #ececec; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-top: 15%; }*/ /********************************************************************** *** SIMPLE LIGHTBOX *********************************************************************/ .slbOverlay,.slbWrapOuter,.slbWrap{position:fixed;top:0;right:0;bottom:0;left:0} .slbOverlay{overflow:hidden;z-index:2000;background-color:#000;opacity:0.7;-webkit-animation:slbOverlay 0.5s;-moz-animation:slbOverlay 0.5s;animation:slbOverlay 0.5s}.slbWrapOuter{overflow-x:hidden;overflow-y:auto;z-index:2010}.slbWrap{position:absolute;text-align:center}.slbWrap:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slbContentOuter{position:relative;display:inline-block;vertical-align:middle;margin:0px auto;padding:0 1em;box-sizing:border-box;z-index:2020;text-align:left;max-width:100%}.slbContentEl .slbContentOuter{padding:5em 1em}.slbContent{position:relative}.slbContentEl .slbContent{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;background-color:#fff;box-shadow:0 0.2em 1em rgba(0,0,0,0.4)}.slbImageWrap{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;position:relative}.slbImageWrap:after{content:"";position:absolute;left:0;right:0;top:5em;bottom:5em;display:block;z-index:-1;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background-color:#FFF}.slbDirectionNext .slbImageWrap{-webkit-animation:slbEnterNext 0.4s;-moz-animation:slbEnterNext 0.4s;animation:slbEnterNext 0.4s}.slbDirectionPrev .slbImageWrap{-webkit-animation:slbEnterPrev 0.4s;-moz-animation:slbEnterPrev 0.4s;animation:slbEnterPrev 0.4s}.slbImage{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:5em 0;margin:0 auto}.slbCaption{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-size:1.4em;position:absolute;left:0;right:0;bottom:0;padding:.71429em 0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbCloseBtn,.slbArrow{margin:0;padding:0;border:0;cursor:pointer;background:none}.slbCloseBtn::-moz-focus-inner,.slbArrow::-moz-focus-inner{padding:0;border:0}.slbCloseBtn:hover,.slbArrow:hover{opacity:0.5}.slbCloseBtn:active,.slbArrow:active{opacity:0.8}.slbCloseBtn{-webkit-animation:slbEnter 0.3s;-moz-animation:slbEnter 0.3s;animation:slbEnter 0.3s;font-size:3em;width:1.66667em;height:1.66667em;line-height:1.66667em;position:absolute;right:-.33333em;top:0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbLoading .slbCloseBtn{display:none}.slbLoadingText{font-size:1.4em;color:#fff;color:rgba(255,255,255,0.9)}.slbArrows{position:fixed;top:50%;left:0;right:0}.slbLoading .slbArrows{display:none}.slbArrow{position:absolute;top:50%;margin-top:-5em;width:5em;height:10em;opacity:0.7;text-indent:-999em;overflow:hidden}.slbArrow:before{content:"";position:absolute;top:50%;left:50%;margin:-.8em 0 0 -.8em;border:.8em solid transparent}.slbArrow.next{right:0}.slbArrow.next:before{border-left-color:#fff}.slbArrow.prev{left:0}.slbArrow.prev:before{border-right-color:#fff}.slbIframeCont{width:80em;height:0;overflow:hidden;padding-top:56.25%;margin:5em 0}.slbIframe{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background:#000}@-webkit-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-moz-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-webkit-keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnter{from{opacity:0;-moz-transform:translate3d(0, -1em, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0);-moz-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);-o-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterNext{from{opacity:0;-moz-transform:translate3d(4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0);-moz-transform:translate3d(4em, 0, 0);-ms-transform:translate3d(4em, 0, 0);-o-transform:translate3d(4em, 0, 0);transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes slbEnterPrev{from{opacity:0;-moz-transform:translate3d(-4em, 0, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0);-moz-transform:translate3d(-4em, 0, 0);-ms-transform:translate3d(-4em, 0, 0);-o-transform:translate3d(-4em, 0, 0);transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}} /********************************************************************** *** BREAKPOINT MAX 1200px *********************************************************************/ @media (max-width: 1200px) { /** BASICS **/ body {} h1, .h1 {font-size: 3rem;} h2, .h2 {font-size: 2rem;} h3, .h3 {font-size: 1.7rem;} h4, .h4 {font-size: 1.4rem;} h5, .h5 {font-size: 1.2rem;} h6, .h6 {font-size: 1.2rem;} /** MENU **/ /** HEADER **/ /** CONTENT **/ .content-section-image-text-double .content-area-2 .content-item-text .content-item-title { padding-top: 20px; } /** FOOTER **/ } /********************************************************************** *** BREAKPOINT MAX 992px *********************************************************************/ @media (max-width: 992px) { /** BASICS **/ body {} h1, .h1 {font-size: 3rem;} h2, .h2 {font-size: 2rem;} h3, .h3 {font-size: 1.7rem;} h4, .h4 {font-size: 1.4rem;} h5, .h5 {font-size: 1.2rem;} h6, .h6 {font-size: 1.2rem;} /** MENU **/ #logo {} #hauptmenu {} .navbar-kpi .navbar-nav > li > a {} /** HEADER **/ /** CONTENT **/ .content-section {} /*.content-section-image-text-double .plus .bar-horizontal { width: 150px; height: 15px; } .content-section-image-text-double .plus .bar-vertical { width: 15px; height: 150px; top: -75px; }*/ .flickity-prev-next-button.previous {left: -30px;} .flickity-prev-next-button.next {right: -30px;} /** FOOTER **/ } /********************************************************************** *** BREAKPOINT MAX 767px *********************************************************************/ @media (max-width: 767px) { /** BASICS **/ body {} h1, .h1 {font-size: 3rem;} h2, .h2 {font-size: 2rem;} h3, .h3 {font-size: 1.7rem;} h4, .h4 {font-size: 1.4rem;} h5, .h5 {font-size: 1.2rem;} h6, .h6 {font-size: 1.2rem;} .equal-height {display: block;} .equal-height > div[class*="col-"] {display: block;} /** MENU **/ .navbar-kpi {padding: 10px 0;} #nav-logo {height: 18px;} #hauptmenu {} .navbar-kpi .navbar-nav > li {text-align: right;} .navbar-kpi .navbar-nav > li > a {display: inline-block;} .navbar-toggle .icon-bar {background-color: #e5c097;} .caret {display: none;} .navbar-nav > li.dropdown {padding-bottom: 5px;} .navbar-nav > li > .dropdown-menu {display: block; position: relative; float: none; padding: 10px 0 0 0;} .navbar-nav > li > .dropdown-menu li {padding-right: 0;} .navbar-nav > li > .dropdown-menu li a {display: inline-block; padding-bottom: 0;} /** HEADER **/ #page-header-bg, #page-header-video {height: 50vh;} #page-header-bg .full-height, #page-header-video .full-height {height: 50vh;} .page-header-content {left: 0;} /** CONTENT **/ .content-section {} .content-section {padding-top: 45px; padding-bottom: 45px;} .content-section-image-text-double .content-area .content-item-text {padding-bottom: 30px;} .content-section-image-text-double .content-area-2 .content-item-text {padding-top: 30px;} #page-section-contact {padding: 30px 0 45px;} .c2a-contact {padding-top: 15px;} .flickity-prev-next-button.previous {left: 15px;} .flickity-prev-next-button.next {right: 15px;} .slider-testimonial-item {width: 50%;} .slider-testimonial-item img {margin: 0 auto;} .content-section-image-text-double .content-area-2 .content-item-text {padding-left: 30px;} .content-section-image-text-double .content-area .content-item-text {padding-right: 30px;} /** FOOTER **/ #page-footer-blocks {padding: 30px 0;} .page-footer-block {padding-bottom: 30px;} #footer-menu a {font-size: 12px;} #logo-footer {margin: 15px auto;} #page-footer-blocks ul li, #page-footer-menu ul li {margin: 0 10px;} } /********************************************************************** *** BREAKPOINT MAX 640px *********************************************************************/ @media (max-width: 640px) { /** BASICS **/ body {} h1, .h1 {font-size: 2.4rem;} h2, .h2 {font-size: 2rem;} h3, .h3 {font-size: 1.5rem;} h4, .h4 {font-size: 1.4rem;} h5, .h5 {font-size: 1.2rem;} h6, .h6 {font-size: 1.2rem;} /** MENU **/ #logo {} #hauptmenu {} .navbar-kpi .navbar-nav > li > a {} /** HEADER **/ .page-header-content {width: 100%; padding: 0 15px;} /** CONTENT **/ .content-section {} .slider-text-item-wrapper.h1.white {font-size: 3rem;} .slider-coverflow-item-text.h3 {font-size: 1.3rem;} /** FOOTER **/ } /********************************************************************** *** IE 10+ *********************************************************************/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { }