/* giordano added css */
/*html tags*/

body{
    padding-top: 165px !important;
    background-color:#EAEAEA !important;
}


ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
    color: #000;
}

p{
color: #000;
}


div.einleitungstext p{
    font-size: 18px;
}

h3 a:hover, a:focus {
    color: #2a6496;
    text-decoration: none;
}

.cart_button:hover{
    text-decoration: none;
}

/*Content-Blocks Classes*/
.sfimageWrp {
    vertical-align: initial;
    padding-bottom: 15px;
    padding-top: 8px;
}

.vertical_space {
    padding-bottom: 25px;
}

.big_vertical_space {
    padding-bottom: 100px;
}


.block_white_space {
    padding-bottom: 200px;
}

.pdf_white_space{
    padding-top: 420px;
}


/*img-classes*/
.wallpaper_img {
    height: 300px;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.row {
    margin-right: 0;
    margin-left: 0;
}


.btn {
    display: inline-block;
    padding: 9px 11px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: -7px;
    margin-top: -51px;
    color: #000;
    background-color: transparent;
    margin-left: 310px;
}

/*content-boxes white background*/
.content_box_white {
    background-color: #fff;
    padding: 15px;
    height: 350px;
}


/*newsboxes white background and grid*/

.news_box_white {
    background-color: #fff;
    padding: 15px;
    min-height: 461px;
    text-align: center;
}

.news_box_white img{
    width: 200px;
    height: 200px;
}

/*read more button */
.read_more.btn.btn-default{
    margin-left: 0;
    margin-top: 0;
    color: #428bca;
    border-color: #428bca;
}

.desc{
    height: 15%;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
    color: #428bca;
    border-color: #428bca;
}

.dropdown-menu>li>a {

    white-space: normal;
}


/*newsletter mail feed */

.newsletter_btn.btn.btn-primary {
    background-color: #fff;
    margin-left: 0px;
    color: #555;
    margin: 5px 5px 5px 0 !important;
    padding: 5px;
}


div.kohler_border h2 {
    color: #428bca !important;
    font-weight: bold !important;
    font-size: 24px;
}

div.kohler_border h3 {
    color: #428bca !important;
    font-weight: bold !important;
    font-size: 24px;
}

.kohler_news_header{
    color: #0085CA;
    height: 18%;
}


.kohler_border{
    padding-top: 15px;
    border: 1px solid #A4A4A4;
    margin-bottom: 15px;
}

.sf_colsIn col-md-12.kohler_border{
    padding: 15px;
    border: 1px solid #A4A4A4;
}






/*language Selector CSS*/
.languageSlector {
    padding-top: 10px !important;
}

.language ul {
   list-style: none;
}

.language ul li,
.language ul li a {
    background-color: #428bca;
    font-weight: bold;
    color: #fff;
    float: left;
    margin: 1px 3px 0 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    padding-left: 3px;
}

.hide_element{
    display:none !important;
}

.language ul > span {
    display: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 0px;
    padding-left: 2px;
    background-color: #000;
}

.list-inline {
    padding-left: 5px;
    margin-left: 0;
    list-style: none;
}


ul.sf-lang-selector.list-inline li a {
    color: #8A8D8F;
    background-color: white;
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 5px;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
}


/*searchbar*/

div.form-group.search{
    float: right;
}

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all.sf-autocomplete{
    background-color: #fff;
    list-style-type: none;
    display: none;
    width: 37px !important;
    position: relative;
    top: -3015px !important;
    left: 200px !important;
}


.ui-menu-item{
    text-align: left;
}


.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #000;
    background-color: transparent;
    border-color: transparent;
}




/*NAVIGATION*/

/*Navigation Elements*/
li.activeko {
    background-color: transparent;;
}

div#contentmega{
list-style-type: none !important;
}


div.main-navigation.fixed {
    background-color: #fff;
    position: fixed;
    top: 70px;
    width: 100%;
    height: 90px;
    z-index: 100;
    padding-top: 14px;
}


/*use Navigation in combination with col-md-12, nav is responsive and in one grid*/
ul.nav-products {
    /* background-image: url('../Images/nav-shadow.png');*/
    background-position: left bottom;
    background-repeat: no-repeat;
    height: 100px;
    list-style: none;
    margin: 0 0 -100px 0;
    padding: 0;
    position: relative;
    top: -195px !important;
    width: 105%;
}

    ul.nav-products li a {
        background-color: #FFF;
        color: #000;
        display: table-cell;
        font-weight: bolder;
        height: 60px;
        text-align: center;
        vertical-align: middle;
        width: 138px;
    }

ul.nav li.oncanvas a {
    /* background-image: url(../Images/main-nav-inactive.png); */
    background-repeat: repeat-x;
    color: #000;
    height: 24px;
    line-height: 24px;
    margin-right: 10px;
    padding: 0px 20px;
    text-transform: uppercase;
    background-color: #EAEAEA;
}

ul.nav-products li {
    display: inline-block;
    margin-right: -3px;
    padding: 1px;
}

/*main navigation*/
/*header-top class inherit navigation */
.header-top {
    padding: 22px 28px 9px 8px;
    background-color: #000;
    top: -5px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 100;
}


.header-top .info {
    margin: 0;
    float: left;
    padding-left: 0px;
    padding-right: 6px;
    margin-left: 15px;
}

.header-top .info li {
    display: inline-block;
    font-size: 15px;
    padding-right: 12px;
    padding-left: 10px;
    font-weight: 400;
    font-family: arial !important;
    padding-top: 6px;
    background-color: #fff;
    padding-bottom: 6px;
    border-radius: 4px;
}

.navigation-header {
    background-color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 10px 10px 17px;
    text-transform: uppercase;
}


.navigation-header a {
    color: #0085CA;
}

.navigation-header a.red {
    color: #EF3340;
}
.navigation-header a.yellow {
    color: #FFCD00;
}


.cart_button {
    color: #0085CA!important;
    padding-left: 140px;
    font-size: 3em !important;
    margin-left: -346px !important;
    margin-top: -8px!important;
}


.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
    background-color: transparent;
    padding-top: 18px;
    padding-bottom: 15px;
    font-size: 21px;
    position: fixed;
    -webkit-transition: height 2s ease;
    -o-transition: height 2s ease;
    transition: height 2s ease;
    z-index: 100;
    padding-left: 116px;
}

/*Meta NAV*/
ul.info li a {
    color: #8A8D8F;
}

ul.info {
    margin-left: -32px;
    list-style-type: none;
    margin-right: -32px;
}

div#contentmega ul.info li a {
color:#777;
}

div#contentmega{
    width: 1140px;
}


.sf_3cols_2_34 .sf_3cols_2in_34, .sf_3cols_3_33 .sf_3cols_3in_33 {
    margin-left: 12px;
    padding-top: -18px;
    margin-top: -8px;
}

.sf_3cols_2_34 .sf_3cols_2in_34, .sf_3cols_3_33 .sf_3cols_3in_33 {
    margin-left: 82px !important;
}


/* Footer */
.footer,
#footer {
    background-color: #000;
    color: #8A8D8F;
    padding: 20px 0 10px 0;
}

#footer strong {
    font-weight: normal;
    text-transform: uppercase;
}

#footer a strong {
    border-bottom: 2px solid #8A8D8F;
    color: #000;
    padding-bottom: 5px;
    text-transform: none;
}

#footer a strong:hover {
        border-bottom-color: #CCC;
        color: #CCC;

}


.navbar-default{
background-color: transparent;
border-color: transparent;
}

/*product_cart*/
em.fa.fa-shopping-cart {
    position: fixed;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2em;
    margin-left: 73px;
    padding-top: 27px;
    color: #000;
}


/*social media incons*/
.linkedin-square {
    height: auto;
    width: 33px;

}

img.fa-facebook-square {
    width: 34px;
    margin-top: -2px;
    height: auto;
    margin-left: 4px;
}

.fa.fa-facebook-square, .fa.fa-twitter-square {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 1.3em;
    color: #fff;
    margin-left: -26px;
}

.fa.fa-instagram {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    font-size: 1.3em;
    margin-left: -53px;
    color: #fff;
}

.social_media{
    padding:0;
}


/*shop button inherit startpage */
ul ul:not(.mega-menu-column) ul {
    top: -2px !important;
    left: 271px;
}

#primary-menu ul li .mega-menu-content {
    display: none;
    position: absolute;
    width: 272px;
    background-color: #FFF;
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEE;
    border-top: 2px solid #666666;
    height: auto;
    z-index: 199;
    top: 100%;
    left: 0;
    margin: 0;
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 276px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}


ul.sfNavHorizontalSiteMap li a {
    border-bottom: 2px solid #428bca;
    color: #428bca;
    display: block;
    padding: 20px 10px 0 10px;
    width: 100%;
}


/*
ul ul:not(.mega-menu-column), #primary-menu ul li .mega-menu-content {
    display: none;
    position: absolute;
    width: 272px;
    background-color: #FFF;
    box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEE;
    border-top: 2px solid #666666;
    height: auto;
    z-index: 199;
    top: 100%;
    left: 0;
    margin: 0;
}



.fancybox-nav 
{
    display:none;
}

/*
.sfNavList {
    max-width: 790px;
  }
  */


  /*leitbild css */
  /*start*/
  .collkachel-container {
    float:left;
    margin: 10px;
    width: 230px;
  height: 356px;
    background-color: #FFFFFF;
}

.collkachel-container img { width: 230px; }
.collkachel-container h1 { margin: 10px 0px; padding: 0px; width: 100%; color: #0085ca; font-size: 16px; font-weight: bold; letter-spacing: 0px; text-align: center; }

.collkachel-container .innerCon { height: 80px; overflow: hidden; padding: 5px 15px; }
.clicklink { cursor: pointer; color: #0085ca; text-decoration: underline; height: 30px; text-align: center; }
/*end*/


/*übersichtnavigation */
.tile {
    height: 335px;
    width: 252px;
}


/*formulare*/
.kontaktFormBtn { margin: 20px 0px; }

.kontaktFormRadio div { margin-bottom: 10px; }
.kontaktFormRadio span { margin-bottom: 10px; }
.kontaktFormRadio span label { margin-left: 5px; }

.sfTxtBoxMedium, .sfTxtBoxSmall { margin-top: 10px; }
.sfFormInstructions { margin: 20px 0px; }

.sfFormTitle { padding-top: 20px; }


/*formular classes*/
.layout-textbox label {
    float: none!important;
    padding-right: 20px;
    width: 100px!important;
    margin-top: 5px;
}

.row.formular_grid{
    font-size: 17px;
    padding-top: 150px;
}

.nav_element_left{
    float:left;
}

/* flipcard*/
/*start*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */


.flip-card{
    background-color: transparent;
    /* width: 168px; */
    width: 100%;
    height: 333px;
    perspective: 1000px;
    float: left;
    margin-bottom: 15px;
}

div.flip-card.flip-card-back h2 {
    text-align: left;
    padding-left: 15px!important;
    font-size: 18px;
}

div.flip-card h2 {
    color: #428bca !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

.flcard {
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height: 200px;
	
    -webkit-backface-visibility:hidden;
       -moz-backface-visibility:hidden;
         -o-backface-visibility: hidden;
            backface-visibility:hidden;
    
    -webkit-transition: -webkit-transform .5s linear 0s;
	   -moz-transition: -moz-transform .5s linear 0s;
	    -ms-transition: -ms-transform .5s linear 0s;
	        transition: transform .5s linear 0s;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
         -o-perspective: 1000px;
            perspective: 1000px;
}


.flip-card-front {
    width: 100%;
    padding-top: 15px;
    height: 333px;
    text-align: center;
    background-color: #fff;
	
	-webkit-transform:rotateY(0deg);
       -moz-transform:rotateY(0deg);
         -o-transform:rotateY(0deg);
            transform:rotateY(0deg);
	
  }


 .flip-card-front h1 {
    margin: 10px 0px;
    padding: 0px;
    width: 100%;
    color: #0085ca;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0px;
}
  

.flip-card.flip-card-front h1 { margin: 10px 0px; padding: 0px; width: 100%; color: #0085ca; font-size: 16px; font-weight: bold; letter-spacing: 0px; }
.flip-card-front img { width: 170px; }
.flip-card-front p { font-size:12px; }
  
  .flip-card-back {
    background-color: #fff;
	width: 100%;
    height: 100%;
	-webkit-transform:rotateY(180deg);
       -moz-transform:rotateY(180deg);
         -o-transform:rotateY(180deg);
            transform:rotateY(180deg);
	
	cursor:pointer;
  }


.flip-card-back h1 { margin: 20px 0px 0px 0px; padding: 0px; width: 100%; color: #0085ca; font-size: 16px; font-weight: bold; letter-spacing: 0px; }
.flip-card-back p { text-align: left; padding-left: 15px; font-size: 11px; }
.flip-card-back h1 { text-align: left; padding-left: 15px!important; }
.flip-card-back h2 { text-align: left; padding-left: 15px!important; font-size: 14px}

.flip-card:hover > .flip-card-front {
	-webkit-transform:rotateY(-180deg);
       -moz-transform:rotateY(-180deg);
         -o-transform:rotateY(-180deg);
            transform:rotateY(-180deg);
}

.flip-card:hover > .flip-card-back {
	-webkit-transform:rotateY(0deg);
       -moz-transform:rotateY(0deg);
         -o-transform:rotateY(0deg);
            transform:rotateY(0deg);
}


/*end*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-container-wrapper {
    max-width: 100%;
    width: 600px;
    left: 0;
    right:0;
    margin:auto;
}