/*==========================================================================
    Style
============================================================================

    @name           frisuer-abschnitt.de
    @author         Refs.media
    @copyright      Friseur Abschnitt
    @description    ---

============================================================================
    Contents
============================================================================

    - Imports (Normalize, Colors, Fonts)
    - Base
    - Custom
    - Media Queries
	
/* ==========================================================================
    normalize.css v3.0.1 | MIT License | git.io/normalize
   ========================================================================== */	
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}
audio, canvas, progress, video {display: inline-block; *display: inline; *zoom: 1;}
audio, canvas, img, video { vertical-align: middle;}
audio:not([controls]) {display: none; height: 0;}
[hidden] { display: none;}
html { font-size: 100%;  -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, button, input, select, textarea {font-family: sans-serif;}
body { margin: 0;}
a:focus {outline: 0;}
a:active, a:hover { outline: 0;}
h1 {font-size: 2em; margin: 0;}
h2 {font-size: 1.5em; margin: 0;}
h3 {font-size: 1.17em; margin: 0;}
h4 {font-size: 1em; margin: 0;}
h5 {font-size: 0.83em; margin: 0;}
h6 {font-size: 0.67em; margin: 0;}
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: 700;}
blockquote {margin: 1em 40px;}
dfn { font-style: italic;}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}
mark {background: #ff0; color: #000;}
p, pre {margin: 1em 0;}
code, kbd, pre, samp {font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em;}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
q {quotes: none;}
q:before, q:after {content: ''; content: none;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
dl, menu, ol, ul {margin: 0;}
dd {margin: 0 0 0 40px;}
menu, ol, ul {padding: 0;}
nav ul, nav ol {list-style: none; list-style-image: none;}
img {border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) {overflow: hidden;}
figure {margin: 0;}
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}
legend {border: 0; padding: 0; white-space: normal; *margin-left: -7px; }
button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
button, input {line-height: normal;}
button, select { text-transform: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer; *overflow: visible;}
button[disabled], html input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; *height: 13px; *width: 13px;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}
textarea {overflow: auto;  vertical-align: top; resize: vertical;}
table { border-collapse: collapse; border-spacing: 0;}


/* ==========================================================================
   Colors
   ========================================================================== 

		0|125|131         = #007d83;
		153|203|205       = #99cbcd;
		208|208|208       = #d0d0d0;
        85|85|85          = #555555;

/* ==========================================================================
   Webfonts
   ========================================================================== */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url(http://fonts.gstatic.com/s/raleway/v9/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'), url(http://fonts.gstatic.com/s/raleway/v9/cIFypx4yrWPDz3zOxk7hIQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(http://fonts.gstatic.com/s/raleway/v9/JbtMzqLaYbbbCL9X6EvaIwzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'), url(http://fonts.gstatic.com/s/raleway/v9/JbtMzqLaYbbbCL9X6EvaI73hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 300;
  src: local('Yanone Kaffeesatz Light'), local('YanoneKaffeesatz-Light'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/We_iSDqttE3etzfdfhuPRQu-MN34z13_ekgfqZIJiYv3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/We_iSDqttE3etzfdfhuPRbHVephy08vG3A_n649omsL3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/YDAoLskQQ5MOAgvHUQCcLWjF_m7mVnhXExjNED3rUtY.woff2) format('woff2'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/YDAoLskQQ5MOAgvHUQCcLQa6gm6bS00u2Qn-iPLo1Go.woff) format('woff');
}

/* ==========================================================================
   Base styles
   ========================================================================== */

html, body, input, button, select, textarea {  
	font-family: 'Raleway' ,Helvetica,Arial,sans-serif;
	font-weight: 400; 
	font-size: 15px; 
	line-height:1.5; 
	color:#000;

    text-rendering: optimizeLegibility;
}

html, body  {width:100%; height:100%; margin: 0; padding: 0; }
body {overflow-y:scroll;}
#wrapper {width:100%; height:100%;}

::-moz-selection { background-color: #99cbcd; color:#fff; text-shadow: none;}
::selection { background-color: #99cbcd; color:#fff; text-shadow: none;}
::-webkit-input-placeholder {}

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

a, a:focus, a:visited  {outline:none; text-decoration:none; color:#000; transition:color 0.2s ease-in-out; cursor:pointer;}
a:hover, a:active      {outline:none; text-decoration:none; color:#007d83;}

/* ==========================================================================
   Custom styles
   ========================================================================== */


/* ==================== Layout ==================== */
.section {padding-top:50px; padding-bottom: 50px;}
#footer .section {padding-top: 20px !important; padding-bottom: 20px;}
#ueberAbschnitt, #footerTop {
    background-color: #007d83;
    width:100%;
    color:#fff;
}
#big { 
    position: relative;
    width:100%; 
    height:100%; 
    background-image: url(../img/bg_abschnitt.jpg); 
    background-size: auto 100%; 
    background-repeat: no-repeat;
}
#big.four {
    background-image: url(../img/bg_abschnitt_404.jpg); 

}
#logo {margin:35px auto 0 auto; max-width: 180px;}
#logo object, #mainNavSticky #logoSticky object {overflow: hidden; width:100%;}
#header, #today{position: absolute; top:0; right:0; left:0;}
#today {top:auto; bottom: 50px;}
#todayInfo {
    border-top:1px solid #007d83;
    border-bottom: 1px solid #007d83;
    padding:10px 0 15px 0;
}

/* ==================== Nav ==================== */

#mainNav {margin-top:20px;}

.navbar {
  min-height: 0;
  margin-bottom: 0;
}
.navbar-default {
    background-color: transparent;
    border:none;
}
.navbar-default .navbar-collapse {border-top: 1px solid #d0d0d0;}
.navbar-nav {
    margin: 0 -15px 10px -15px;
 
}
.navbar-toggle {
    float: none;
    padding: 0;
    margin:0 auto 10px auto;
    display: block;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
}   
.navbar-default .navbar-toggle .icon-bar {
    background-color: #d0d0d0;
    transition: background-color 0.2s ease-in-out;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {  background-color: transparent;}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {  background-color: #007d83;}

.navbar-nav > li {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:18px;
    line-height: 18px;
    color: #999;
    display: block;
    border-bottom: 1px solid #d0d0d0;
}
.navbar-nav > li > a {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:18px;
    line-height: 18px;
    text-transform: uppercase;
    display:block;
    margin:0;  
    padding:7px 0 5px 0;
}
.navbar-default .navbar-nav > li > a {
  color: #555555;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #007d83;
    background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { 
    color: #007d83;
    background-color: transparent;
}

#mainNavSticky { 
    position: fixed; 
    z-index: 1000; 
    top:0; 
    right:0; 
    left:0; 
    background-color: #fff; 
    border-bottom: 1px solid #d0d0d0;
    opacity: 0;
}
#mainNavSticky #logoSticky {margin:10px 0; max-width: 100px; float:left;}

#mainNavSticky  .navbar-toggle {
    float: right;
    margin:27px 0 0 0;
}  


@media (min-width: 768px) {
    #mainNav {margin-top:35px;}
    .navbar-toggle {display: none;}
    .navbar-default .navbar-collapse {border-top: none;}
    .navbar-nav {
        float:none; 
        margin: 0 auto;
        display: table;
        width: auto;
    }
    .navbar-nav > li {
        display: inline-block;
        border:none;
    }
    .navbar-nav > li > a {
        padding: 0 0 3px 0;
        margin:0 15px;  
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus { border-bottom: 1px solid #007d83; }

    #mainNavSticky .navbar {  margin:30px 0 0 0; }
    
    #mainNavSticky .navbar-nav {
        float:right; 
        margin: 0;
        display: block;
    }
    #mainNavSticky .navbar-collapse { padding:0; }
    #mainNavSticky .navbar-default .navbar-nav > li:last-child > a { margin-right: 0;}
}

@media (min-width: 768px) and (max-width: 1199px){
     .navbar-nav > li > a {
        font-size:17px;
        line-height: 17px;
        margin:0 10px;  
    }      
}

/* ==================== Ueber Abschnitt ==================== */
ul {list-style: none;}
dl {display: inline-block; width:100%; margin:0 0 15px 0;}
dt {display: inline-block; float:left; width:35%; clear: left;}
dd {display: inline-block; margin: 0 0 10px 20px; float: left;}
.w20 dt {width:20%;}


/* ==================== Team ==================== */
.teamBild {position: relative; margin-bottom: 7px;}

ul.lebenslauf {border-top:1px solid #000;
    border-bottom: 1px solid #000;
    padding:10px 0 10px 0;}
ul.lebenslauf li { margin-bottom: 7px; font-size: 14px;}
.jahr {
    font-family: 'Yanone Kaffeesatz';
    font-size:14px;
    font-weight: 400;
    width: 70px;
    display: inline-block;
    padding-bottom: 7px;
    float: left;
    clear: both;
}

/* ==================== Typgraphie ==================== */
h1, h2 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:70px;
    line-height: 70px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
}
h2 {color:#007d83;}
#footer h2 {
    color:#fff;
    font-size:40px;
    line-height: 40px;
    font-weight:400;
    margin:0;
    letter-spacing: 1px;
}
h3 {
    font-family: 'Raleway';
    font-weight: 400;
    font-size:18px;
    line-height: 18px;
    color:#99cbcd;
    text-transform: uppercase;
    text-align: center;
}
#footer h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:14px;
    line-height: 20px;
    color:#fff;
    margin-bottom: 30px;
}
#todayInfo h3{
    font-family: 'Yanone Kaffeesatz';
    font-size:28px;
    line-height: 28px;
    color:#007d83;
    text-transform: none;
    text-align: left;
}
h4 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:25px;
    line-height: 30px;
    color:#007d83;
    text-transform: uppercase;
    margin: 0 0 15px 0;
}
#infoAbschnitt h4{
    width: 100%;
    clear: left;

}
#preise .tab-content h4 {margin:0;}
#aktionen h4 {margin: 0 0 5px 0; }
#todayInfo h4 {margin:0 0 10px 0;}
.teamBild h4 { 
    position: absolute; 
    bottom: 0; 
    left: 5px; 
    font-size:40px;
    font-weight: 400;
    color:#fff; 
    margin: 0;
    z-index: 10; 
}

h5 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:16px;
    line-height: 16px;
    text-transform: uppercase;
    margin: 0 0 15px 5px;
}
#aktionen h5{
    font-family: 'Raleway';
    font-weight: 400;
    font-size:15px;
    line-height: 15px;
    color:#99cbcd;
    text-transform:none;
    margin: 0 0 4px 0;
}
p {margin: 0 0 10px 0;}
#ueberAbschnitt p, #footer p { text-align: center;}
#aktionen p {margin:0 0 30px 0;}


/* ==================== Preisliste ==================== */
#preise .tab-content ul {margin-bottom:15px;}
.preis {float: right;}

.nav-tabs {border:none; display: table; width: auto; margin: 0 auto 20px auto;}
.nav-tabs > li {display: inline-block; float: none; margin:0 5px;}

.nav-tabs > li > a {
    margin: 0;
    border: none;
    border-radius: 0;
    padding:0;
    position: relative;
    display: block; 
    width:50px;
    height:50px;
    z-index: 1;
}

.nav-tabs > li > a svg {
    pointer-events: none;
    pointer-events: bounding-box;
}

.nav-tabs > li > a:hover {
    border: none;
    background-color: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: none;
}

.nav-tabs > li > a:hover .back,
.nav-tabs > li > a:focus .back{ fill: #99cbcd;}
.nav-tabs > li.active > a .back,
.nav-tabs > li.active > a:hover .back,
.nav-tabs > li.active > a:focus .back {  fill: #007d83;}

.back{fill:#555; transition: all 0.2s ease-in-out; pointer-events: bounding-box;}
.hair{fill:#fff; pointer-events: bounding-box;}
.legende {    
    font-family: 'Yanone Kaffeesatz';
    font-size:14px;
    font-weight: 300;
}
.legende ul li {
    float:left;
    margin-right: 15px;}


/* ==================== Aktionen ==================== */
#aktionen {text-align: center;}

/* ==================== Kontakt ==================== */
#map { width:100%; height:250px; margin:0; padding:0; float:left;}
#map {font-size:13px;}
#map p {margin:0 0 5px 0;}
#map p:last-child {margin:0;}
#map h5 {font-size:18px; line-height: 1; color:#99cbcd; margin: 2px 0 7px 0;}

#kontakt .container { position: absolute; left:50%; margin-left:-585px; z-index: 100;}
.route {
    background: rgb(0, 125, 131); /* The Fallback */
    background: rgba(0, 125, 131, 0.5); 
    margin-top:15px;
}
.route a {display: block;padding:7px 0 8px 0; text-align: center;text-transform: uppercase;  font-family: 'Yanone Kaffeesatz';
    font-weight: 300; font-size:20px; color:#fff; line-height: 1; transition: all 0.2s ease-in-out;}
.route a:hover,
.route a:focus { background: rgb(0, 125, 131);}



/* ==================== Footer ==================== */
#footer {width:100%; float: left; font-size: 14px; line-height: 20px;}
#footerTop a{color:#fff;}
#footerTop a, #footerTop a:focus, #footerTop a:visited  {color:#fff;}
#footerTop a:hover, #footerTop a:active {color:#99cbcd; text-decoration: underline;} 
#footerBottom {padding-top: 7px; padding-bottom: 7px;}
#footerBottom ul  {float: right;}
#footerBottom ul li {float:left; margin:0 3px; font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:14px;
    line-height: 1;}
#footerBottom ul li:last-child {margin-right:0;}
#footerBottom ul li a {
    font-family: 'Yanone Kaffeesatz';
    font-weight: 300;
    font-size:14px;
    line-height: 1;
    text-transform: uppercase;
}

#social {margin:10px auto 0 auto; width: 36px; height:36px;}
#social a {display: block; width: 36px; height:36px;}
/*#social object{ pointer-events: none;}*/
#social a path {fill:#fff; transition: all 0.2s ease-in-out}
#social a:hover path,
#social a:focus path {fill:#99cbcd;}

.divider {
    height:2px;
    width:100%;
    border-bottom: 1px solid #2c8f94;
    border-top:1px solid #1e7679;
    margin:15px 0;
}





/* ==================== Modal ==================== */

.modal {  
	font-size: 13px; 
	line-height:1.5; 
}
.modal p {margin:0 0 5px 0;}
.modal-header {
    border:none;
    padding:10px 15px 5px 15px;
}
.modal-header h4.modal-title {margin: 0; line-height: 1;}
.modal h5 {
    font-size:18px;
    line-height: 1;
    color:#99cbcd;
    margin: 0 0 2px 0;
}
.modal p + h5 {margin-top:15px;}

h4#refs {line-height: 1; margin: 30px 0 0 0; font-size: 20px;}




@media (max-width: 1199px) {
    #kontakt .container {margin-left:-485px;}
}

@media (max-width: 991px) {
    html, body, input, button, select, textarea {  
	   font-size: 14px; 
    } 
    #kontakt .container {margin-left:-375px;}
}


@media (max-width: 767px) {
    html, body, input, button, select, textarea {font-size: 13px; }
    .section {padding-top:30px; padding-bottom: 30px;}    
    
    #header {background-color: #fff;}
    #logo {margin:15px auto 0 auto; max-width: 150px;}

    #today {top:auto; bottom: 0; background-color: #fff; padding:8px 0 5px 0;}
    #todayInfo { border:none; padding:0;}
    
    
    h1, h2 {
        font-size:40px;
        line-height: 40px;
        margin-bottom: 30px;
    }    

    #footer h2 {
        font-size:40px;
        line-height: 40px;
    }
    h3 {
        font-size:15px;
        line-height: 15px;
    }
    #todayInfo h3 {
        display: inline-block;
        text-transform: uppercase;
        font-size:20px;
        line-height: 20px;
        letter-spacing: 1px;
    }
    h4 {clear: both;}
    #todayInfo h4 {
        margin: 0;
        display: inline-block;
        font-size:20px;
        line-height: 20px;
    }
    
    
    #infoAbschnitt .row > div {margin-bottom: 30px;}
    #infoAbschnitt .row > div > .row > div {margin-bottom:0;}
    #team .row > div {margin-bottom: 30px;}
    #team .row > div:first-child,
    #team .row > div:last-child {margin-bottom: 0;}
    
    #footer {width:100%; float: left; font-size: 12px; line-height: 18px;}
    
    #kontakt .container {margin-left:0; left:0; right: 0;}
    
    .legende ul li {
    float:none;
    margin-right: 0;}
    
    dl {margin: 0;}
}

@media (min-width: 768px) and (max-width: 1199px){
    dt, .w20 dt {display: block; width: 100%;}
    dd {margin-left: 0; clear: both;}
    .navbar-nav > li {
        font-size:17px;
        line-height: 17px;
    }   
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width: 767px) , only screen and (min-device-pixel-ratio : 1.5)and (max-width: 767px) {
  #big { 
    background-image: url(../img/bg_abschnitt_mob.jpg); 
    background-size: cover; 
}
}

#fourOfour {
    margin-top: 80px; 
    text-align: center;
}
#fourOfour p {font-size:18px;}
#fourOfour h2 {
    font-size: 50px;
    line-height: 50px;
}