/*

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

   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

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

*/

/*
Farbe 1: #F4BC2F     grün B 0 B 6 9 0
dunkelgrau: #444444
mittelgrau #EDEDED
hellgrau: #F9F9F9
*/


/* 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;}


body { min-width:280px; font-family: 'Open Sans', sans-serif; font-weight:300; color:#444444; background-color:#FDFDFC; margin-top:8px; margin:0 auto;  font-size:1.4rem; }
.container {margin-bottom:0 !important; max-width:2000px; margin:0 auto; }
.container-fluid {margin-bottom:0 !important; padding-right:0 !important;  max-width:2000px; margin:0 auto !important; }
.container-fluid img { max-width:2000px; margin:0 auto; }
.graubg {background-color:#F9F9F9;}
.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;}


header { height:160px; background-color:#FAFAF9; }
.logo { padding-top:8px; }
.head-foto {margin:0; padding:0;  }
.head-foto img {width:100%; height:auto; margin:0 0 70px 0; padding:0; }
.header-foto-div {position:relative; }
.cycle-slideshow {z-index:1; }  /* sonst Fehler mit Navbar */
.header-foto-narrow {width:100%; margin-bottom:70px; }
.header-headline {color:#F4BC2F; font-size:2rem; font-weight:400; text-transform:uppercase; word-spacing: 0.02em; letter-spacing: 0.01em; line-height:1.4em; margin:0.25em 0 0.25em 0; padding:0; } 
.header-text {font-size:1.3rem; line-height:1.45em;  margin:0; padding:2px 0 0 0; }
.header-text span {color:#F4BC2F; }
.header-text img {color:#F4BC2F; padding:0 0 2px 0; display:inline-block; }  /* square-bullet */
.square-bullet {color:#F4BC2F;}  /* square-bullet */ /* funktionier noch nicht */

/* TYPOGRAPHY ======================================== */
body {line-height:1.7em; }
.container {margin-bottom:3em; }
.marginleft {margin-left:0; }
.content {margin-bottom:8em; }
b {color:#F4BC2F; }
h1 {color:#444444; font-size:2rem; font-weight:400; text-transform:uppercase; word-spacing: 0.02em; letter-spacing: 0.01em; margin:0 0 2em 0; line-height:1.4em; }
h1:after {content:""; position:absolute; left:15px; bottom:28px; height:5px; width:60px; border-bottom:5px solid #F4BC2F; }
h2 {color:#F4BC2F; font-size:1em; font-weight:700; text-transform:uppercase; word-spacing: 0.02em; letter-spacing: 0.01em; margin:0 0 0.5em 0; padding:0; line-height:1.4em; }
p + h2 {margin-top:3em; }
p {margin: 0 0 1.5em 0;}
a {text-decoration:none; font-weight:bold; color:#F4BC2F; }
a:visited {text-decoration:none; font-weight:bold; color:#F4BC2F; }
a:hover {text-decoration:none; font-weight:bold; background-color:#F4BC2F; color:#ffffff; }
a:active {text-decoration:none; font-weight:bold; background-color:#F4BC2F; color:#ffffff; }
a.link0 {text-decoration:none; font-weight:300; color:#444444; }
a.link0:visited {text-decoration:none; font-weight:300; color:#444444; }
a.link0:hover {text-decoration:none; font-weight:300; background-color:#FDFDFC; color:#444444; }
a.link0:active {text-decoration:none; font-weight:300; background-color:#FDFDFC; color:#444444; }
footer {background-color:#FAFAF9; color:#444444; padding:1.2em 0 0.5em 0; margin: 8em 0 0 0; }
footer h3 {font-size: 1.3rem; color:#F4BC2F; font-weight:700; text-transform:uppercase; letter-spacing: 0.02em; margin:1em 0 1em 0; }
footer p {font-size: 1.3rem; margin:0 0 2em 0;}
footer .container {margin-bottom:0; }
footer table.tabelle {font-size: 1.3rem !important; font-family: 'Open Sans', sans-serif; font-weight:300; color:#444444; line-height:1.8em; }
.footer-plan {padding-top:5px;}
.webdesign p {font-size: 1.1rem; color:#888888; margin:1em 0 1em 0; padding:0; }
.webdesign p a {color:#888888; font-weight:300; }
.webdesign p a:hover {color:#ffffff; font-weight:300; }

table.tabelle {font-size: 0.9em !important; font-family: 'Open Sans', sans-serif; font-weight:300; color:#444444; line-height:1.8em; }
.kontaktform { background-color:#F8F7F7; padding:2em; }
.kontaktform h3 { margin-top:0; }
label.control-label {font-weight:400; font-size:1.6rem; 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; }
p.infobox  {padding:1em 10em 1em 1.5em; margin:4em 0; background: #F3F3F3; border-left:5px solid #F4BC2F; }

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


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


/* NAVIGATION ======================================== */
nav.affix { position: fixed; top: 0; width: 100%; } /* Navbar scroll & fix ====*/
.nav-wrapper { min-height:50px; z-index:10; } /* prevents nav from jump when afix takes an element out of DOM-order to fixed */
nav {font-size:0.9em; z-index:10; position:relative; }
.navbar {margin-bottom:0 !important; font-size:1.3rem; }
.navbar {min-width:300px; height:50px !important; background-color:rgba(242,242,242,0.9) !important; padding:0; border:0; -webkit-box-shadow: 0px 5px 3px -3px rgba(2, 0, 0, 0.1); -moz-box-shadow: 0px 5px 3px -3px rgba(2, 0, 0, 0.1); box-shadow: 0px 5px 3px -3px rgba(2, 0, 0, 0.1); }
.navbar .navbar-nav { display: inline-block; float: none; } /* navbar centered */
.navbar .navbar-collapse { text-align: center;} /* navbar centered */
.container-fluid>.navbar-collapse{ margin-right: 0; margin-left: 0; }
.navbar-collapse{ padding: 0;}
.container-fluid{padding-left: 0;}
a.navbar-brand {padding:0; }
/* img .logo {padding:0 0 0 15px;; margin: 0 ; } */
.navbar-default .navbar-toggle { border:0;}
.navbar-default { background:rgba(242,242,242,0); }
/* .navbar-toggle { float:left; }
.nav-icon {display:inline-block; }
.icon-text { margin:-26px 0 0 35px; } */
.navbar-toggle {margin:0; padding-top:0; padding-bottom:0; border-radius:0; height:50px; }
.navbar-toggle span {padding-right:0.75em; }
.navbar-toggle p.navbar-toogle-text {display:inline-block; height:50px; padding: 14px 1.2em 0 0; margin:0; float:left; }
.navbar-toggle:hover { background-color:rgba(242,242,242,0) !important; padding-bottom:0; }
button.navbar-toggle-button { height:50px; padding:0 0.5em; border-radius:0; border:0; margin:0; background-color:#EDEDED; }
button.navbar-toggle-button:hover { background-color:#F4BC2F !important; }
.navbar-toggle-button: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; }
ul.nav li a {height:50px; padding: 15px 1.2em; margin:0; border:0; /* text-transform:uppercase; */ font-weight:300; color:#444444 !important; background-color:rgba(249,249,249,0) !important; }
ul.nav li.active {background-color:rgba(232,232,232,0.9) !important; color:#444444 !important; }
ul.nav li:hover {background-color:#F4BC2F !important; color:#ffffff !important; }
ul.nav li a:hover {background-color:#F4BC2F !important; color:#ffffff !important; }
.nav-link-hover li { transition: 0.4s; }
.nav-link-hover:hover { }
.navbar li { transition: 0.4s; }


/* NAV-TOGGLE BREAKPOINT ======================================== */
@media (max-width: 1000px) {  /* == change navbar breakpoint from 768 pixels standard ========== */
    .navbar-header { float: none; }
    .navbar-left,.navbar-right { float: none !important; }
    .navbar-toggle { display: block; }
    .navbar-collapse { border-top: 0px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
    .navbar-fixed-top { top: 0; border-width: 0 0 1px; }
    .navbar-collapse.collapse { display: none!important;  }
    .navbar-collapse { margin-top:50px; }
    .navbar-nav { float: none!important; /* margin-top: 7.5px; */ }
    .navbar-nav>li { float: none; }
    .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
    .collapse.in{ display:block !important; }
}


/* BUTTON ======================================== */
.btn-primary {color:#ffffff; background-color:#F4BC2F; 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: #F4BC2F; box-shadow: none; }
.btn-sharp { border-radius:0; }
.btn-kontakt {padding:1em 5em; margin-top:4em; }
.btn-kontakt:active { background: #F4BC2F; box-shadow: none; }

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


img.plan {max-width:100%; }

/* 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:1s; -moz-animation-duration:1s; animation-duration:1s; }
.fade-in.delay { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; }





/* GALLERY ======================================== */
.gallery {margin-top: 5rem; }
.gallery-pic {margin:10px; }
.mpgallery img {margin:18px 24px 18px 0; width:300px; height:300px;}
a.mpgallery:hover {; font-weight:400;}

/* 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 it */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0;} /* content animate out */



/* MEDIA QUERIES ======================================== */
@media(max-width:340px){ /* Extra Extra Small eigen */
header { height:190px !important; }
img.logo { height:50px; }
.header-headline {font-size:1.4rem; }
ul.nav {width:100%; padding-left:0; }
ul.nav li a {background-color:rgba(249,249,249,1) !important;}
ul.nav li.active a {background-color:rgba(235,235,235,1) !important; }
.navbar-nav {margin-top: 0;}
.header-foto-div {padding:0;}
.head-foto img {width:100%; height:auto; margin:0 0 70px 0; }
}

@media(min-width:341px) and (max-width: 766px){
header { height:180px !important; }
.header-headline {font-size:1.4rem; }
ul.nav {width:100%; padding-left:0; }
ul.nav li a {background-color:rgba(249,249,249,1) !important;}
ul.nav li.active a {background-color:rgba(235,235,235,1) !important; }
.navbar-nav {margin-top: 0;}
.header-foto-div {padding:0;}
.head-foto img {width:100%; height:auto; margin:0 0 70px 0; }
}

@media(min-width:767px){ /* Extra Small */
header { height:160px; }
.header-headline {font-size:1.4rem; }
ul.nav {width:100%; padding-left:0; }
ul.nav li a {background-color:rgba(249,249,249,1) !important;}
ul.nav li.active a {background-color:rgba(235,235,235,1) !important; }
.head-foto img {width:100%; height:auto; margin:0 0 70px 0; }
}
@media(min-width:768px){ /* Small */
header { height:160px; }
.header-headline {font-size:2rem; }
ul.nav {width:100%; padding-left:0; }
ul.nav li a {background-color:rgba(249,249,249,1) !important;}
ul.nav li.active a {background-color:rgba(235,235,235,1) !important; }
.head-foto img {width:100%; height:auto; margin:0 0 70px 0; padding:0; }
footer {margin: 10em 0 0 0; }
}
@media(min-width:992px){ /* Medium */
header { height:160px; }
.header-headline {font-size:2rem; }
ul.nav {width:auto; padding-left:0; }
ul.nav li a {background-color:rgba(249,249,249,0) !important; }
ul.nav li.active a {background-color:rgba(235,235,235,0) !important; }
.head-foto img {width:100%; height:auto; margin:0 0 70px 0; padding:0; }
.marginleft {margin-left:50px; }
}
@media(min-width:1200px){ /* Large */
header { height:160px; }
.header-headline {font-size:2rem; }
ul.nav {width:auto; padding-left:0; }
ul.nav li a {background-color:rgba(249,249,249,0) !important; }
ul.nav li.active a {background-color:rgba(235,235,235,0) !important; }
.head-foto img {width:100%; height:auto; max-height:400px; margin:0 0 70px 0; padding:0; }
}