/*

   ===================================================================================

   W e b d e s i g n   u n d   S u c h m a s c h i n e n o p t i m i e r u n g

   Webdesign und Suchmaschinenoptimierung 
   für kleine und mittelständische Firmen,
   preiswerte Komplett-Lösungen mit hoher Qualität


   Frank Leusing, D-48151 Münster 
   www.Leusing.de

   ===================================================================================

*/

/*
orange: #1D5070   E4 A2 3B
sehrdunkelgrau: #444444
dunkelgrau: #444444
mittelgrau #E6E6E6
hellgrau: #F8F8F8
*/



/* WARNING OLD IE-VERSION ============= */
#ie-old-warning {position:absolute; top:0px; left:0px; width:100%; min-height:3em; background-color:#DD0000; color:#FFFFFF; font-weight:bold; padding: 1em; z-index:99; } 
#ie-old-warning a {color:#FFFFFF;}

html { /* scroll-behavior: smooth; */ }

body { min-width:320px;   height: 100%; }

.container {margin-bottom:0 !important; }
.container-fluid {margin-bottom:0 !important; padding-left:0 !important; padding-right:0 !important; }
.graubg {background-color:#F8F8F8;}
.full-width { margin: 0 auto; width: 100%; }
.row-centered { text-align:center; }
.col-centered { display:inline-block; float:none; /* reset the text-align */ text-align:left; /* inline-block space fix */ /*margin-right:-4px; */ }
.center-block { display: block; margin-left: auto; margin-right: auto;}

.logo-div { top: 0; position: fixed; width:100%; height: 90px; background-color: rgba(135,135,135,0.8); transition:background-color .4s;  z-index:9; 
  -webkit-box-shadow: 0px 5px 3px -3px rgba(2, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 3px -3px rgba(2, 0, 0, 0.2);
  box-shadow: 0px 5px 3px -3px rgba(2, 0, 0, 0.2);
}
.logo {width:400px; padding-top:14px; margin-bottom:0; }
.headerfoto {/* height:300px; */ margin-bottom:20px; }
.headtext {padding-top:8px;;}
h1.headertext { padding: 300px 0 0 0; line-height:1.8; }
h1.headertext span { text-transform:none; font-size:3.4rem; font-weight:400; color:#ffffff;      background: rgba(226,163,57, 1); padding: 0.2rem 0 ;  }
.head-foto {border-right:6px solid #ffffff; border-left:6px solid #ffffff; overflow:hidden; height:initial; padding:0; height: 300px;}
.head-foto img {width:100%; /* min-height:300px; */ }
.content {padding:60px !important; background-color:rgba(255, 255, 255, 0.9); padding-bottom:5rem !important; }
.img-oben {margin:0 0 2rem 0; max-width:580px;}

.calc {background-color:#F8F8F8;  padding:1.5em 2em 1.5em 2em;  margin:1em 0 4em 0;}
.calc-col {padding-right:0; }
.calc h2 {margin-bottom:2em; }
.calc-select {margin:1em 0 1em 0;}
.calc-select p { margin:0 1em ; display:inline-block;  }
.calc-pic img {margin-top:0.2em; float:right;}
.calc-text p {margin:1em 0 0 0; }
/* div{border:1px solid red;} */

/*
.image-bg-fluid-height,
.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
*/ 
.image-bg-fluid-height {
    /* die folgenden Eigenschaften sind nun im HTML */
    /* background: url('../img/header-01-1200.jpg') no-repeat center center scroll ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;  */
    height:600px;
    width:auto;
}

.image-bg-fixed-height {
/*	background: url('../img/header-01-1500.jpg') no-repeat center center scroll;
    height: 600px; */
}

.img-center {
	margin: 0 auto;
}



/* TYPOGRAPHY ======================================== */
body {font-size: 1.5rem; font-family: 'open sans', sans-serif; font-weight:300; color:#444444; line-height:1.7; }
.container {margin-bottom:3em; }
.headline {color:#444444; font-size:2.2rem; font-weight:300;    word-spacing: 0.02em; letter-spacing: 0.01em;  display:block; padding-top:20px; margin-bottom:0.3rem; }
.headtext2 {font-size:1.5rem; display:block; margin-bottom:1.4rem; }
.headtext2 a {color:#444444; font-weight:300; }
.marginleft {margin-left:0; }
h1 {color:#1D5070; font-size:5rem; font-weight:500; text-transform:uppercase;  word-spacing: 0.02em; letter-spacing: 0.01em;  margin-top:0.7em;  
	-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for WebKit */
     word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
    hyphens: auto;
}
h2 {color:#1D5070; font-size:2rem; font-weight:700; text-transform:uppercase;  word-spacing: 0.02em; letter-spacing: 0.01em;  margin:0; padding:1.5em 0 0.5em 0;}
h2 + p {margin-top:0.2em; }
/* h1:after {content:""; position:absolute; left:15px; bottom:15px; height:5px; width:60px; border-bottom:5px solid #BDB9B3; } */
b, strong { font-weight: 700; color:#1D5070;}
p {margin: 1.5em 0;}
a {text-decoration:none; font-weight:bold; color:#1D5070; }
a:visited {text-decoration:none; font-weight:bold; color:#1D5070; }
a:hover {text-decoration:none; font-weight:bold; color:#444444; }
a:active {text-decoration:none; font-weight:bold; color:#444444; }
footer {background-color:#F8F8F8; color:#444444; padding:1.2em 0 0.5em 0; margin: 12em 0 0 0 !important;; }
footer h3 {font-size: 1.4rem; color:#1D5070; font-weight:700; text-transform:uppercase;  letter-spacing: 0.02em;  margin:1rem 0 1rem 0; }
footer p {font-size: 1.4rem; margin:0.8rem 0 2rem 0;}
footer .container {margin-bottom:0; }
p.webdesign {font-size: 1.2rem; color:#444444; margin:1em 0 1em 0; padding:0; }
p.webdesign a {font-size: 1.2rem; color:#444444; font-weight:300; }
p.webdesign a:hover {font-size: 1.2rem !important; color:#000000; font-weight:700; }

.kontaktform { background-color:#F8F7F7; padding:2em; }
.kontaktform h3 { margin-top:0; }
label.control-label {font-weight:400; font-size:1.5rem; margin:0 0 0.3em 0 !important;}
input.form-control {border-radius:0; }
textarea.form-control {min-height:10em; border-radius:0; }
.form-group button { margin-top:2em !important;}
.btn-kontaktform:hover, .btn-kontaktform:focus, .btn-kontaktform:active { color:#444444; background: #E3E2E2; }
.required {color:red; margin-top:0; padding-top:0.5em; }
p.required {padding:0.5em 0 0.3em 0; margin:0; }


/* SELECTED TEXT ======================== */
::selection { background: #1D5070; color:#ffffff; }
::-moz-selection { background: #1D5070; color:#ffffff; }


/* COLOR BULLETS FOR LISTS ===============*/
ul.liste {padding-left:2em;}
ul.liste li { list-style:none; }
ul.liste li:before { content: ""; position:relative; left: -8px; top:-1px; background-color:#BDB9B3; display:inline-block; width:7px; height:7px; border-radius:50%; }
/*
ul.liste { list-style: none; padding:0; margin:0;}
ul.liste li { padding-left: 1em; text-indent: -.7em; }
ul.liste li:before { content: "•  "; color:#BDB9B3; }
*/


/* NAVIGATION ======================================== */
.nav.affix { position: fixed; top: 0; width: 100%; z-index:10; } /* Navbar scroll & fix ====*/
.nav { font-size:1.4rem; font-weight:300 !important; }
.navbar {margin-bottom:0 !important; }
.navbar { /*min-height:50px;*/ background:#fff; padding:0; border:0;}
a.navbar-brand {padding:0; }
/* img .logo {padding:0 0 0 15px;; margin: 0 ; } */
ul.mainnav {padding:0; margin:0;}
.nav {padding:0; margin:0;}
.nav-col {padding:0; }

.navbar-default .navbar-toggle { border:0;}
/* .navbar-toggle { float:left; }
.nav-icon {display:inline-block; }
.icon-text { margin:-26px 0 0 35px; } */
.nav-hamburger {background:#F8F8F8;}
button.navbar-toggle { height:50px; border-radius:0; margin:0; background-color:#E6E6E6; }
button.navbar-toggle:hover { background-color:#BDB9B3 !important; }
.navbar-toggle:hover .icon-bar { background-color:#ffffff !important; }
div.nav p {display:block; /*height:50px;*/ padding: 14px 1.2em 0 0; margin:0; font-weight:400; color:#444444 !important; }
div.nav-adr-sm p {padding-left:15px; }

.nav li{list-style-type: none; }
.nav a{font-size:1.4rem; color:#444444; background-color:#ffffff; font-weight:400; line-height: 1.2em; text-decoration:none; }
ul.mainnav a{padding:0.5em 1em; }
.navbar-default ul.mainnav li.active > a{background-color:#1D5070; color:#FFFFFF; }
.navbar-default .nav a:link{color:#444444; font-weight:300; text-decoration:none; transition: all 0.1s ;}
.navbar-default .nav a:visited{color:#444444; font-weight:300; text-decoration:none;}
.nav li a:hover{color:#444444 !important; background-color:#F2F2F2 !important; font-weight:300; text-decoration:none;}
.nav li a:hover{color:#444444 }
/* nav li:hover{color:#444444 !important; background-color:#E5E4E3 !important; font-weight:300; text-decoration:none;} */
/* nav li:hover a{color:#444444 !important; background-color:#F8F8F8 !important; font-weight:300; text-decoration:none;} */
.nav a:active{color:#FFFFFF !important; background-color:#BDB9B3 !important; font-weight:300; text-decoration:none;}

.nav { display: list-item !important;}
.nav li { display: list-item !important;}
.nav li a { display: list-item !important;}

.sidebar-nav, navbar {
    background-color: transparent !important;}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
        border-color:none; }

.navbar-nav li a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 3rem;}

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

/* #nav li:last-child a:hover{background-color:#608A2D; }   */
/*  div#nav li:last-child a:hover{padding:4px 12px 8px 4px;}   */

.nav-link-hover:hover { }

.sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; margin-bottom: 30px;}

/* make sidebar nav vertical */ 
@media (min-width: 768px) {
    .sidebar-nav .navbar ul { float: none; }
    .sidebar-nav .navbar ul:not { display: block; }
    .sidebar-nav .navbar li { float: none; display: block; }
    .sidebar-nav .navbar li a { padding-top: 13px; padding-bottom: 13px; }
}





/* BUTTON ======================================== */
.btn-primary {color:#ffffff; background-color:#BDB9B3; border:none;}
.btn-lg.round { border-radius: 24px; }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color:#444444; background: #E3E2E2; }
.btn-primary:active, .btn-primary.active { background: #BDB9B3; box-shadow: none; }
.btn-sharp { border-radius:0; }
.btn-kontakt {padding:1em 5em; margin-top:4em; }
.btn-kontakt:active { background: #BDB9B3; box-shadow: none; }

a.kontakt {display:inline-block; font-size:1.5rem; font-weight:400; padding:0.8em 4em; margin-top:4em; background-color:#BDB9B3; color:#ffffff !important; }
a.kontakt:hover {font-weight:400; background-color:#E3E2E2; color:#444444 !important; }
.right {float:right; }



.infobox {background-color: #F8F8F8; padding:1.5em 2em 1.5em 2em;  margin:1em 0 4em 0;}
.infobox h2 { margin: 0.5em 0; }
.infobox p { margin-bottom: 0.5em; }
.infobox50l {background-color: #F8F8F8; margin: 0em 1em 1em 0em; padding: 1em 1em;  width:45%; float:left;}
.infobox50r {background-color: #F8F8F8; margin: 0em 0em 1em 1em; padding: 1em 1em;  width:45%; float:right;}



/* FADE-EFFECT ======================================== */
/* keyframes for start and end  */
@-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; } }
.fade-in { opacity:0; /* invisible at start */
-webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; /* call keyframe with name fadeIn and use animattion ease-in, repeat it only one time */
-webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; /* after animation is done keep the last keyframe value (opacity: 1) */
-webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; animation-duration:1.5s; }
.fade-in.delay { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; }


/* MAP ========================================*/
#map {
    width: 100%;
    height: 350px;
}


/* GALLERY ======================================== */
.gallery {margin-top: 5rem; margin-bottom:5rem; padding-left:15px; }
x.gallery-pic {margin:10px; }
x.mpgallery img {margin:18px 18px 18px 0; width:260px; height:260px;}
.image-div-100 img {margin:18px 18px 18px 0; width:546px; height:auto;}

/* Animation effects for Magnific ===================================*/
/* http://web.simmons.edu/~grovesd/notes/week13/magnific/magnific  */
.mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out;} /* overlay at start */
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.8;} /* overlay animate in */
.mfp-fade.mfp-bg.mfp-removing { opacity: 0;} /* overlay animate out */
.mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out;} /* content at start */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1;} /* content animate in */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0;} /* content animate out */


/* IMAGE ZOOM ======================================== */
.zoom-container { float: left; position: relative; width: 260px; height: 260px; margin: 0 25px 25px 0; overflow: hidden;}
.zoom-container-400 { float: left; position: relative; width: 400px; height: 400px; margin: 0 25px 25px 0; overflow: hidden;}
.image-div { position: absolute; top: 0; left: 0; }
.image-div img { -webkit-transition: 1s ease-out; transition: 1s ease-out; }
/* .image-div img {transition-timing-function: cubic-bezier(.2,.57,.29,.82); -webkit-transition-timing-function: cubic-bezier(.2,.57,.29,.82);}  */
.zoom-container:hover .image-div img { -webkit-transform: scale(1.20); transform: scale(1.20);}
.zoom-container-400:hover .image-div img { -webkit-transform: scale(1.20); transform: scale(1.20);}


/* MEDIA QUERIES ======================================== */
@media(max-width:767px){	/* Extra Small */
    .head-foto {height: initial;}
    .img-oben {margin:0 0 2rem 0; max-width:400px; width: 100%;}
	h1.headertext span {  font-size:2.0rem;  padding: 0.5rem 0 ;  }
    .navbar-nav>li>a { padding-top: 1em !important; padding-bottom: 1em !important; }
    .footer-col {margin-top:5rem; margin-bottom:5rem; }
	.content {padding-top:3em;}
	.logo {width:260px; padding-top:30px; }
}
@media(min-width:768px){  /* Small */
    .container { width: 640px;  }
	footer {margin: 10em 0 0 0; }
    .head-foto {height: 285px;}
    .img-oben {margin:0 0 2rem 0; max-width:520px;}
	h1.headertext span {  font-size:2.8rem;  padding: 0.5rem 0 ;  }
    .navbar-nav>li>a { padding-top: 1em !important; padding-bottom: 1em !important; }
	.content {padding-top:3em;}
	.logo {width:350px; padding-top:20px; }
}
@media(min-width:992px){  /* Medium */
    .container { width: 940px;  }
	.marginleft {margin-left:50px; }
    .navbar-nav>li { margin: 0.4em 0 !important; }
    .sidebar-nav, navbar { position:fixed; margin:300px 0 0 20px;}
	.content {padding-left:0; }
    .headerfoto { margin-bottom:60px; }
    .img-oben {margin:0 0 2rem 0; max-width:430px;}
	.nav {font-size:0.9em; }
	.content {padding-top:0em;}
	.logo {width:400px; padding-top:14px; }
	.navbar-default .navbar-nav>li a{display: inline !important; padding: 0.4em 1.5em 0.4em 1em !important; color: #1d5070 !important; font-weight: 700 !important;}
}
@media(min-width:1200px){  /* Large */
    .container { width: 1200px;  }
    .head-foto {border-left: 0; height: 300px;}
    .img-oben {margin:0 0 2rem 0; max-width:580px;}
	h1.headertext span {  font-size:3.4rem;  padding: 0.3rem 0 ;  }
	.content {padding: 0em 60px 60px 60px!important;}
	.footer-col {margin-top:1rem; margin-bottom:1rem;}
	.logo {width:400px; padding-top:14px; }
}


/* print */
@media print {
img.logo {
    -webkit-filter: invert(90%); 
    filter: invert(90%);
    margin-right:4em;
}
}