/*
Theme Name: OBHL Theme
Description: Theme für ONline Büroeinrichtungen
Author: Barre & Meyer Werbeagentur GmbH
Author URI: https://barreundmeyer.de
Template: Divi
Version: 1.1
Text Domain:  Divi
*/

/* Setting the breakpoint of the mobile menu */
@media only screen and ( max-width: 1050px ) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {display: none;}
#et_mobile_nav_menu {display: block;}
}

@media only screen and ( max-width: 980px ) {.page-id-45 .zeile-mobil .et_pb_column.et_pb_column_1_2 {margin-right: 2.5%;width: 47.25% !important;}}
@media only screen and ( max-width: 650px ) {.page-id-45 .zeile-mobil .et_pb_column.et_pb_column_1_2 {margin-right: 0%;width:100% !important;}}


.unterseite-bildauswahl{width: 100%;}
.unterseite-bildauswahl .stuhl1{background-image: url('https://obhl.de/wp-content/uploads/2018/03/produkte-konferenztische.jpg');background-size: cover;padding: 35%;margin-right: 4px;margin-bottom: 4px;}
.unterseite-bildauswahl .stuhl2{background-image: url('https://obhl.de/wp-content/uploads/2018/03/produkte-empfang.jpg');background-size: cover;padding: 35%;margin-bottom: 4px;}
.unterseite-bildauswahl .stuhl3{background-image: url('https://obhl.de/wp-content/uploads/2018/03/produkte-arbeitsbeleuchtung.jpg');background-size: cover;padding: 35%;margin-right: 4px;}
.unterseite-bildauswahl .stuhl4{background-image: url('https://obhl.de/wp-content/uploads/2018/03/produkte-schraenke.jpg');background-size: cover;padding: 35%;}

.unterseite-bildauswahl .overlay{opacity: 0;-moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    width: 100%; height: 100%;
    position: absolute;
    top: 0;background-color: rgba(0,0,0,0.4);
}
.unterseite-bildauswahl .overlay h2{font-size: 28px;font-style: italic; color: #ffffff;    text-align: center;position: absolute;top: 45%;left: 0;right: 0;}

.unterseite-bildauswahl .overlay:hover{opacity: 1;}

@media screen and (max-width: 980px){
  .unterseite-bildauswahl .stuhl1{;margin: 0px!important;}
    .unterseite-bildauswahl .stuhl2{;margin: 0px!important;}
      .unterseite-bildauswahl .stuhl3{;margin: 0px!important;}
        .unterseite-bildauswahl .stuhl4{;margin: 0px!important;}
}



a:hover{color: #00964f!important;}
#top-menu-nav>ul>li>a:hover{
  opacity: 1;
  color: #00964f!important;
}

.et-fixed-header #top-menu li.current-menu-item>a:hover{
  opacity: 1;
  color: #00964f!important;
}

.et_pb_bg_layout_light .et_pb_post p{
font-size: 18px!important;
}


.referenz-logo-zeile, .produkt-logo-zeile{width: 100%;text-align: center;}
img.refrenz-logo-start{ width: 10.5%!important;display: inline-block;vertical-align: middle;padding: 5px;}
img.produkt-logo-start{ width: 10.5%!important;display: inline-block;vertical-align: middle;padding: 15px;}


@media screen and (max-width: 980px){
  img.refrenz-logo-start{ width: 24%!important;display: inline-block;vertical-align: middle;padding: 15px;}
  img.produkt-logo-start{ width: 24%!important;display: inline-block;vertical-align: middle;padding: 15px;}
}
@media screen and (max-width: 680px){
  img.refrenz-logo-start{ width: 40%!important;display: inline-block;vertical-align: middle;padding: 15px;}
  img.produkt-logo-start{ width: 40%!important;display: inline-block;vertical-align: middle;padding: 15px;}
}





.produktbutton{width: 100%;text-align: center;}

.ueberschriftenblock{font-size: 24px;color: #666666;font-style:italic;}
.ueberschriftenblock h1{display: inline-block!important;padding-bottom: 0px;font-size: 24px;color: #000000;font-style:italic;}

/* Anpassungen am Header Modal Button*/
.modalnavi img{width: 17px;}
/* Anpassungen am Footer*/
#main-footer{padding-bottom: 40px;background-color: #fff;}
#footer-bottom .container{
  max-width: none;
}

#weisser-balken{
  z-index: 999;
}
/* Spezialistenteam-Anpassungen*/
.haken-spezteam{position: absolute;left: 20px;}

/*  Blogmodul-Anpassungen*/
.blogmodul-startseite a.more-link{
  padding-top: 20px;
  float: right;
  color: #666;
  font-style: italic;}
  .blogmodul-startseite a.more-link::after{content: "\24";font-family: 'ETmodules';color: #666;position: relative;    left: 3px;top: 3px;font-size:20px;}
.blogmodul-startseite a.more-link:hover{color: #00964f!important;}
.blogmodul-startseite a.more-link:hover a.more-link::after{color: #00964f!important;}

/*  Project-Boxen Grid in Divi*/
@media screen and (max-width: 980px){
  .et_pb_portfolio_grid .et_overlay{z-index: 3!important;
    opacity: 1!important;}
}

/*------------------------------*/
.et_pb_portfolio_grid  h2.et_pb_module_header{
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  font-size: 18px;
  position: absolute;
  margin-left: auto!important;
  margin-right: auto!important;
  top: 45%;
  text-align: center;
  left: 0;
  right: 0;
}
.et_pb_portfolio_grid .et_pb_portfolio_item h2 a {
  color: #ffffff;
}
.et_pb_portfolio_grid .et_pb_portfolio_item p {
  top: 10%;
  padding-left: 10%;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters {
  display: none; /*hides portfolio filters*/
}
.et_pb_portfolio_grid .et_overlay {
  border: none;
}
.et_pb_portfolio_grid .et_overlay:before {
  display: none; /*hides overlay icon*/
}

/* THREE COLUMN PORTFOLIO GRID LAYOUT */
@media only screen and ( min-width: 768px ) {
.three-column-grid .et_pb_grid_item {
width: 33.333% !important;
margin: 0 0 0 0 !important;
border: 1px solid white;
}

.three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;
}

.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
}

/* Spezialistenteam  */
/* ------------------------------------------------  */
/* ------------------------------------------------------------  */
.teammember{width: 20%;float: left;border-right: 1px solid white;}
.teammember-info a{ color: #333;font-weight: bold;}


figcaption h3{text-transform: uppercase;font-family: "Montserrat";letter-spacing: 1px;color: #333;}
.hover-bio-wrapper {position: relative;color: rgba(0,0,0,1);width: 100%}
figure.hover-bio img{display: block;}
figure.hover-bio {background-color: #000;position: relative;overflow: hidden;margin: 0;padding: 0;display: inline-block;line-height: 0;}
figure.hover-bio::before, figure.hover-bio::after{position: absolute;background: #fff;opacity: 0.8;content: '';height: 100%;width: 100%;display: block;top: 0;left 0;-moz-transform: translate3d(0, -100%, 0);-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);-moz-transition: all 0.8s;-webkit-transition: all 0.8s;transition: all 0.8s;}
figure.hover-bio figcaption{display: table-caption;caption-side: bottom;position: absolute;background: #fff;line-height: 1.7em;-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;box-sizing: border-box;text-align: left;padding: 10px;
    z-index: 100;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    top: 50%;
    left: 0;
    -moz-transform: translate3d(-100%, -50%, 0);
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
    opacity: 1;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

figure.hover-bio img{
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

figure.hover-bio figcaption{
    display: table;
    top: 100%;
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

figure.hover-bio:hover img {
            opacity: .5;
}

figure.hover-bio:hover figcaption{background-color: rgba(255,255,255,1);#fff;opacity: 1;-moz-transform: translate3d(0, -100%, 0);-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);-moz-transition: all 0.8s;-webkit-transition: all 0.8s;transition: all 0.8s;box-shadow: 0px -2px 28px rgba(255,255,255, 0.3);}

/* Referenzen  */
/* ------------------------------------------------  */
/* ------------------------------------------------------------  */

.border-hover .et_pb_column {overflow: hidden;position: relative;border: 1px solid white;}
.border-hover .et_pb_column img {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.border-hover .et_pb_column:hover .et_pb_image.bild img{transform: scale(1.1);}
.border-hover .et_pb_column:hover .et_pb_image.bild:after{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);content: '';}
.border-hover .et_pb_image.logo{opacity: 0;display: none;}
.border-hover .et_pb_column:hover .et_pb_image.logo{display: block;opacity: 1;position: absolute;top: 40%!important;width: 100%;text-align: center;color: #fff;}


/* Modal  */
/* ------------------------------------------------  */
/* ------------------------------------------------------------  */
.div-modal {display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow-y: auto;z-index: 99999;background-color:rgba(0,0,0,.8)!important;animation: fade 1s forwards;animation-delay: 0;}
.div-modal .modalinner {box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);overflow: hidden;padding: 30px 30px 30px 0px;margin: 100px auto;max-width: 1000px;background-color: #fff;z-index: 1;}
#modalvideo.modalinner{padding: 30px 0px 0px 0px!important;}
.modalclose{
    padding: 7px;
    transition: all .4s;
    position: absolute;
    right: -30px;
    z-index: 99999;
    top: -30px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

.modalclose img, .modalclose2 img{width:100%;}
.modalclose:hover,.modalclose2:hover{width: 42px; height: 42px;}

.active_modal{display:block!important;}
.active_modal_body{overflow:hidden!important;}
.modalclose:hover,.modalclose2:hover, #buttongrundriss1:hover, #button_impressionen:hover, .button_preise, .verfuegbarkeit{cursor:pointer}

.div-modal .et_pb_slide {padding: 0!important;}
.div-modal .et_pb_slider {overflow:visible!important;}
.div-modal .et-pb-controllers {top:103%!important;}
.div-modal .et-pb-controllers a {background-color: #000!important;}
.div-modal .et-pb-controllers .et-pb-active-control {background-color: #999!important;}
.div-modal h3 {font-size: 50px !important;}
.div-modal .et_pb_slide_content{position: absolute;top: 108%;width: 100%;color: #333;text-shadow:none!important;}
.div-modal .et_pb_slides .et_pb_slider_container_inner {display: block!important;}
#modal-preise .modalinner{padding: 40px 30px 30px;}
#modal-preise .modalclose {top: -35px;right: -25px;}
@keyframes fade {from {opacity: 0;}	to {opacity: 1;}}
@keyframes scale {from {height: 0;}	to {height: 600px;}}
@media screen and (max-width: 980px){

	.div-modal .modalinner {padding: 10px 0px 100px!important;}
	.modalclose {top: -6px!important;right: 0!important;}
	.div-modal h3 {font-size: 20px !important;}
}