/*
Theme Name: Stephan Judick
Theme URI: https://www.diginovum.de/
Author: DIGINOVUM
Author URI: http://www.diginovum.de/experten
Description: Individuelles Theme nach Boilerplate und Bootstrap
Tags: boilerplate, clean, simple, starter, bootstrap, seo
Text Domain: judick
*/
/**********************************************************************
     _ _       _                                       _
    | (_)     (_)                                     | |
  __| |_  __ _ _ _ __   _____   ___   _ _ __ ___    __| | ___
 / _` | |/ _` | | '_ \ / _ \ \ / / | | | '_ ` _ \  / _` |/ _ \
| (_| | | (_| | | | | | (_) \ V /| |_| | | | | | || (_| |  __/
 \__,_|_|\__, |_|_| |_|\___/ \_/  \__,_|_| |_| |_(_)__,_|\___|
          __/ |
         |___/
***********************************************************************
URL: www.diginovum.de
Creator: diginovum GmbH
Author: Frank Schmitz
Contact: schmitz@diginovum.de
http://diginovum.rocks/xxx
〈 〉 | « » | ← → | ‹ › | “ ” | – ⌄ ∨ 📷
❤ ☀ ★ ☂ ☎ ☏ ⌚ ❄ ♫ ☯ 🗸 ✓ ✔✔ 🗹 ✅ ☑
⨯ ✗ ✘ ❌ ☒ ❎ ◄ ► ◅ ▻ • ™ © ® ☘ ✿ ❀ ■
**********************************************************************/


/* bitter-regular - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/bitter-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/bitter-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/bitter-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/bitter-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/bitter-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/bitter-v28-latin-regular.svg#Bitter') format('svg'); /* Legacy iOS */
}

/* bitter-500 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/bitter-v28-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/bitter-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/bitter-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/bitter-v28-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/bitter-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/bitter-v28-latin-500.svg#Bitter') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}



/**********************************************************************
***  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%;}
  .bild {background-color: #cecece; width: 100%; min-height: 200px; padding-top: 90px; margin-bottom: 15px;}
  .col5 {float: left; width: 20%; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
  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;}



/**********************************************************************
*** HELFER
*********************************************************************/
  .light, .light > p {font-weight: lighter;}
  .normal, .normal > p {font-weight: normal;}
  .bold, .bold > p {font-weight: 500;}
  .underline {text-decoration: underline;}
  .italic {font-style: italic!important;}
  .uppercase {text-transform: uppercase;}
  .round {border-radius: 4px;}
  .hidden {display: none!important;}

  .bg-grafik1 {background: url("./img/grafik1.png") no-repeat center center /cover;}
  .gradient-grey {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededef+10,ffffff+84 */
    background: #ededef; /* Old browsers */
    background: -moz-linear-gradient(top, #ededef 10%, #ffffff 84%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ededef 10%,#ffffff 84%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ededef 10%,#ffffff 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededef', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }


  .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:0!important;}


  .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;}

  .no-border,
  .no-border .border {border: 0 solid transparent!important;}
  .border {border: 1px solid #ffffff;}
  .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;}

  .right {text-align: right;}
  .right > img {float: right;}

  .left {text-align: left;}
  .left > img {float: left;}

  .center {text-align: center;}
  .center > img, img.mitte {margin:0 auto;}
  .img-center {display: block; margin: 0 auto;}

  .umbruch {-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;}
  .box {width: 100%; height:100%; display: block;}
  .rund {border-radius: 4px;}

  .h100 {min-height:100px;}
  .h200 {min-height:200px;}
  .h300 {min-height:300px;}
  .h400 {min-height:400px;}
  .h500 {height:500px;}
  .h600 {min-height:600px;}

  .volle-hoehe {height: 95vh; position: relative; display:table; width: 100%;}
  .tabelle {display: table; width: 100%;}
  .vzentriert {display: table-cell; vertical-align: middle; width: 100%;}


/**********************************************************************
*** BROWSEHAPPY
*********************************************************************/
  #browsehappy {width: 100%;height: 65px;padding:15px;text-align: center;position: fixed;left: auto;right: auto;top: 79px;  background-color: #b41918;z-index: 999;margin-bottom: 0px;}
  #browsehappy a {text-decoration: underline;font-weight: bold;}



/**********************************************************************
*** STYLES FÜR judick
*********************************************************************/



/**********************************************************************
*** BASICS
*********************************************************************/
  html.loaded {background-color: #fff;}
  html {font-size: 18px; color: #232323;}

  body {
    font-size: 18px;
    line-height: 1.5;
    background-color: #fff;
    color: #232323;
    font-family: 'Roboto', sans-serif;
  }

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Bitter', serif;
    color:#000;
    margin-top: 0px;
    margin-bottom: 28px;
  }

  h1, .h1 {font-size: 2.4rem;}
  h2, .h2 {font-size: 1.7rem;}
  h3, .h3 {font-size: 1.4rem;}
  h4, .h4 {font-size: 1.2rem;}

  p {
    margin: 0 0 21.6px;
    line-height: 1.5;
  }
  strong {font-weight: 500;}

  /*p {font-size: 21px;}*/
  small {font-size: .8rem;}
  figcaption {padding-top: 10px;}

  .xxl {font-size: 6rem!important;}
  .xl {font-size: 3rem!important;}
  .l {font-size: 1.7rem!important;}
  .m {font-size: 1rem!important;}
  .s {font-size: .8rem!important;}
  .xs {font-size: .4rem!important;}


  a {
    color: #656566;
    transition: 0.3s all ease;
  }

  p > a {
    text-decoration: underline;
    font-weight: 500;
    margin: 12px 0 0;
    color: #656566;
    transition: 0.3s all ease;
  }
  a:hover {color: #ba1c24;}
  a:focus {outline: none; outline-offset: -2px;}


  .white {color:white!important;}
  .black {color: black!important;}
  .lightgrey {color: #ededef!important;}
  .grey, .grau {color: #ededef!important;}
  .darkgrey {color: #7a7c80!important;}
  .blue {color:#141433!important;}
  .red {color: #ba1c24!important;}
  .orange {color: #fdb000!important;}


  .bg-white {background-color:white!important;}
  .bg-black {background-color: black!important;}
  .bg-lightgrey {background-color: #ededef!important;}
  .bg-grey, .bg-grau {background-color: #ededef!important;}
  .bg-darkgrey {background-color: #7a7c80!important;}
  .bg-lightblue {background-color: #lightblue!important;}
  .bg-blue {background-color: #141433!important;}
  .bg-red{background-color: #ba1c24!important;}
  .bg-orange {background-color: #fdb000!important;}


  .shadow {box-shadow: 0 0px 10px -2px #333;}

  .gefuellt-1 {background-color: white!important; color: black;}
  .gefuellt-2 {background-color: black!important; color: white;}
  .gefuellt-3 {background-color: #e6e6e6;}

  .btn-judick,
  .btn-flex {
    color: #353535;
    background-color: #ffffff;
    border: 2px solid #e0e0e3;
    border-radius: 0;
    padding: 10px 30px;
    font-size: 14px;
    outline: 0 !important;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    display: inline-block;

  }

  .btn-judick:hover,
  .btn-judick:focus,
  .btn-judick:active,
  .btn-flex:hover,
  .btn-flex:focus,
  .btn-flex:active {
    background-color: #fff;
    border-color: #cacad0;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.16);
    box-shadow: 0 2px 10px rgba(0,0,0,0.16);
    text-decoration: none;
  }

  .btn-flex:hover,
  .btn-flex:focus,
  .btn-flex:active {}

  blockquote {
    font-family: 'Bitter', serif;
    font-style: italic;
    border-left-width: 1px;
    color: #656566;
    padding: 12px 24px;
    margin: 0 0 24px;
    font-size: 1.2rem;
    border-left: 5px solid #d8d8d8;
  }



/**********************************************************************
*** NAVBAR
*********************************************************************/
  .navbar-judick {}
  .navbar-brand {
    height: auto;
    padding: 5px 0;
    line-height: inherit;
  }

  .nav > li > a {color: white; padding: 15px 15px; text-align: right; }

  .nav li > a:focus,
  .nav li > a:hover,
  .nav li.active > a {
    background-color: #141433;
    /*color: #ba1c24;*/
    text-decoration: underline;
    /*border-bottom: 2px solid white;*/
  }


/**********************************************************************
*** HEADER
*********************************************************************/
  #content-header {height: 300px; margin-top: 50px; background-position: bottom center;}
  #page-header-text {padding-top:60px;}
  #page-header-text .h1 {font-size: 4rem !important;}

  #page-header-links {margin-top: -50px;}

  .page-header-link-box {
    display: table;
    height: 100px;
    width: 100%;
    text-align: center;
  }

  .page-header-link {
    display: block;
    width: 100%;
    padding: 30px 0;
  }
  .page-header-link:hover {text-decoration: none!important;}
  .page-header-link-box {background-color: #141433; transition: all .4s ease;}
  .page-header-link-box:hover {background-color: #ba1c24; color: #141433;}
  .page-header-link-box:hover .glyphicon {color: #141433!important;}

  .page-header-link .glyphicon {
    margin-right: 5px;
    font-size: 1.3rem;
  }

  #content-header {}
  #page-header-text {}




/**********************************************************************
*** HOME
*********************************************************************/
  .home #content-header {
    height: 600px;
    margin-top: 50px;
    position: relative;
    background-position: center bottom;
    background-size: initial;
  }

  .home #page-header-text {
    padding-top: 90px;
  }

  .home #page-header-text .h1 {font-size: 6rem!important;}

  .home #content-header {}
  .home #content-page {}



/**********************************************************************
*** SECTIONS
*********************************************************************/
  .main-content {padding: 30px 0 120px;}

  .flex-section {position: relative; padding: 30px 0;}

  .flex-text-intro {padding-bottom: 30px;}

  .flex-content a {color: #141433; text-decoration: underline;}

  .flex-citation-text {
    font-family: 'Bitter', serif;
    color: #656566;
    font-style: italic;
  }

  .flex-citation-text strong {color: #232323;}


  .flex-milestone .flex-milestone-date {
    font-size: 0.8rem;
    color: #979799;
    margin-bottom: 15px;
  }



/**********************************************************************
*** BLOG
*********************************************************************/

  .post .entry-meta,
  .post .header-meta {
    font-size: 0.8rem;
    color: #979799;
    margin-bottom: 20px;
  }

  .post .entry-title a {
    margin-top: 20px;
    margin-bottom: 28px;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 400;
    color: #000;
  }

  .post .entry-title a:hover {
    color: #ba1c24;
    text-decoration: none;
  }

  .post a.more-link {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 0;
    color: #656566;
  }

  .post a.more-link:hover {
    color: #ba1c24;
  }

  .post hr.sep, .entry hr.sep, .issue hr.sep, .political-issue hr.sep {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 1px solid #d8d8d8;
  }



/**********************************************************************
*** FOOTER
*********************************************************************/
  #page-footer {}
  #page-footer-links {margin-top: -50px;}
  #page-footer-contact {margin-top: -75px;}

  #page-footer-blocks {padding-top: 60px;}

  #footer-meta {font-size: 14px;}
  #footer-meta a {}
  #footer-meta ul {list-style: none; margin-bottom: 0; padding-left: 0; display: inline-block;}
  #footer-meta li {display: inline-block;}
  #footer-meta li a {padding: 0 2px;}
  #footer-meta li a::after {content: '|'; display: inline-block; padding-left: 10px;}
  #footer-meta li:last-child a:after {content: '';}



/**********************************************************************
*** MOBILES MENU
*********************************************************************/
  #mobile-footer-menu {background-color: #141433; padding: 5px 0;}
  .mobil-menu-icon svg {max-height: 36px;}

  #footer-menu .menu-item-home {display: none;}

  .icon-bar {background-color: #ffffff;}
  #mobile-logo {max-height: 40px; padding-top: 10px;}
  .navbar-mobile-judick {border-top: 3px solid #000; z-index: 9;}

  #mobile-footer-menu .navbar-toggle {margin-top: 3px;}
  #mobile-footer-menu .navbar-brand {padding: 5px;}
  .mobil-menu-tile {height: 30px; width: 30px;margin:10px 2% 0;}
  .navbar-toggle .icon-bar {background-color: white;}
  #mobile-footer-menu ul {text-align: right;}
  #footer-menu a {color:white;}

  #footer-menu .nav > li.active > a,
  #footer-menu .nav > li > a:focus,
  #footer-menu .nav > li > a:hover {color: #ba1c24; background-color: transparent;}



/**********************************************************************
*** FORMULARE
*********************************************************************/
  .wpcf7 {padding-top: 5px!important;}
  .wpcf7 .input-group {margin: 10px 0;}
  .wpcf7 p {text-align: center;}
  .wpcf7-submit {margin: 0!important;}
  .form-group {margin-bottom: 5px;}
  .input-group, .form-group {padding: 5px 0; border-color: #fff; color:#ffffff;}
  .input-group-addon {font-size: 27px; background-color: #141433; color: white;}
  .form-control {color: #141433!important;}
  .input-group-addon,
  .form-control {border-radius: 0px!important;}
  .wpcf7 .form-control:focus {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px #fff; border-color: white;}
  .wpcf7 .wpcf7-form-control-wrap {position: relative;}
  .wpcf7 .wpcf7-form-control-wrap input {border-left: 0; height: 45px;}
  .wpcf7 .wpcf7-list-item input {height: auto!important;}
  .wpcf7 ::placeholder {color: #ccc; red; opacity: 1;}
  .wpcf7  :-ms-input-placeholder {color: #ccc;}
  .wpcf7  ::-ms-input-placeholder {color: #ccc;}

  .wpcf7-not-valid-tip {display: none!important;}
  .wpcf7-not-valid {border: 2px solid red; border-left: 2px solid red!important; display: block;}

  .wpcf7 #datenschutz input {margin-right: 5px;}

  .wpcf7 .wpcf7-list-item-label {color: #141433;}

  .wpcf7 .screen-reader-response {display: none;}
  .wpcf7 .wpcf7-response-output {padding: 15px; text-align: center; color: red;}

  .wpcf7 #datenschutz {font-size: .8rem;}



/**********************************************************************
*** COOKIE NOTICE
**********************************************************************/
  #cookie-notice{display:block;visibility:hidden;position:fixed;min-width:100%;height:auto;z-index:100000;font-size:13px;line-height:20px;left:0;text-align:center}.cn-top{top:0}.cn-bottom{bottom:0}.cookie-notice-container{padding:10px;text-align:center;width:100%}.cookie-notice-revoke-container{position:absolute;bottom:0;width:100%;z-index:1;visibility:hidden}.cn-top .cookie-notice-revoke-container{top:0;bottom:auto}#cookie-notice .cn-revoke-cookie{margin:0}

  #cn-notice-text a {text-decoration: underline;}
  #cn-accept-cookie {padding: 3px 15px; margin-left: 5px;}






/**********************************************************************
*** BREAKPOINT MAX 1200px
*********************************************************************/
  @media (max-width: 1200px) {
    .col5 {font-size: 0.8em;}

    .home #content-header {background-size: cover;}

    .flex-flickity-judick .flickity-prev-next-button.previous {left: 20%;}
    .flex-flickity-judick .flickity-prev-next-button.next {right: 20%;}

  }



/**********************************************************************
*** BREAKPOINT MAX 992px
*********************************************************************/
  @media (max-width: 992px) {
    html {font-size: 14px;}

    h1, .h1 {font-size: 2rem;}
    h2, .h2 {font-size: 1.5rem;}
    h3, .h3 {font-size: 1rem;}
    h4, .h4 {font-size: 1rem;}

    .col5 {width: 30%; margin-bottom: 30px;}
    #logo {max-height: 50px;}

    .flex-flickity-judick .flickity-prev-next-button.previous {left: 10%;}
    .flex-flickity-judick .flickity-prev-next-button.next {right: 10%;}

    .page-header-link-box {margin-bottom: 30px;}



  }



/**********************************************************************
*** BREAKPOINT MAX 767px
*********************************************************************/
  @media (max-width: 767px) {

    html {font-size: 14px;}

    h1, .h1 {font-size: 2rem;}
    h2, .h2 {font-size: 1.5rem;}
    h3, .h3 {font-size: 1.3rem;}
    h4, .h4 {font-size: 1.1rem;}

    #cookie-law-info-bar {bottom: 50px!important;}

    .home #content-header {
      height: 400px;
      margin-top: 0px;
      background-position: center bottom;
      background-size: cover;
    }
    #content-header {height: auto; margin-top: 0px;}
    .home #page-header-text .h1 {font-size: 4rem !important; max-width: 50%;}
    #page-header-text .h1 {font-size: 2rem !important;}

  }



/**********************************************************************
*** BREAKPOINT MAX 640px
*********************************************************************/
  @media (max-width: 640px) {
    .home #page-header-text .h1 {font-size: 2rem !important; max-width: 50%;}

  }