/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
/*
Farben:
Hintergrund hell     #E9F7F5
Hintergrund mittel   #C7ECE7
Hintergrund dunkel   #90D9CF
Links                #28BEBB
Menü hover/aktiv     #28BEBB 

Schriftarten:
font-family:'Titillium Web';
*/



/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/TitilliumWeb/titillium-web-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/TitilliumWeb/titillium-web-v17-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/TitilliumWeb/titillium-web-v17-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/TitilliumWeb/titillium-web-v17-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/TitilliumWeb/titillium-web-v17-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/TitilliumWeb/titillium-web-v17-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/TitilliumWeb/titillium-web-v17-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/TitilliumWeb/titillium-web-v17-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}






/* web font tuning */
body {
    font-family: 'Titillium Web',Helvetica,Arial,sans-serif;
 	font-style: normal;
  	font-weight: 400;
	letter-spacing: 0.05rem;
}
.blockquote {
    font-family: 'Titillium Web',Helvetica,Arial,sans-serif;
	font-style: italic;

}
h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-weight: 400;
}
h2, h3 {
	letter-spacing: 0rem;
}
.btn, .lead {
	font-weight: 400;
}

.navbar-default .nav li a {
    font-weight: 600;
	letter-spacing: 0.01rem;
}
@media (min-width:768px) and (max-width:912px) {   
    .navbar-default .navbar-nav a{font-size: 1.4rem;}
}



/* general styles */
html, body {
	height: 100%;
	width: 100%;
}

body {
	font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
	overflow-x: hidden;
}

p {
    margin: 0 0 1rem;
}

h2 {
    font-size: 20px;
    font-size: 2rem;
    color: #474747;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
h3 {
    font-size: 17px;
    font-size: 1.7rem;
    color: #474747;
	margin-top: 3rem;
	margin-bottom: 1rem;
}
#datenschutz h4,
#datenschutz h5 {
    margin-top: 2rem;
}
#datenschutz h1, #datenschutz h2, #datenschutz h3, #datenschutz h4, #datenschutz h5, #datenschutz h6 {
	font-weight: 600;
}
a{
    color: #333;
    text-decoration: underline;
    outline: 0;
}
a:hover,
a:focus,
a:active,
a.active{
    outline: 0;
    color: #28BEBB;
}

ul, ol {
	padding-left: 1em;
	margin-bottom: 0;
}
li {
	padding-bottom: 1rem;
}

img {
    height: auto;
    width: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 1em;
}



.navbar-default .nav li a {
    color: #474747;
    text-decoration: none;
	text-transform: uppercase;
}
.quicklinks {
	text-transform: uppercase;
	text-decoration: none;
}
.quicklinks a {
    text-decoration: none;
}
.list-inline > li {
    display: inline-block;
    padding-right: 10px;
    padding-left: 5px;
	padding-bottom: 1rem;
}
.keinUmbruch {
    white-space: nowrap;
}
.highlight {
    color: #28BEBB;
}
.highlightBG {
    background-color: #90D9CF;
    color: #fff;
}
.check {
    background-color: yellow;
}

/* padded section */
.pad-section {
  padding: 90px 0 50px;
}
.pad-section img {
  width: 100%;
}
.glyphicon {
    display: inline-block;
    color: #fff;
    font-size: 50px;
    width: 100px;
    height: 100px;
    line-height: 93px;
    border: 5px solid #fff;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}
.glyphicon:hover {
    color: #28BEBB;
    border-color: #28BEBB;
}
.navbar-brand {
    height: auto;
	padding: 0;
}

/* vertical-centered text */
.text-vcenter {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.text-vcenter h1 {
	font-size: 4.5em;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
    color: #28bebb;
}

/* Sektions allgemein*/
.panel {
	opacity: 0.7;
    border-color: #C7ECE7;
	border-radius: 0;
	padding: 20px;
}
.panel-heading {
    padding: 0;
}
.panel-body {
    padding: 0;
}

.lead {
    font-size: 100%;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 0;
}


#start,
#podologieInfo,
#petraStaussInfo {
	position: relative;
	display: table;
	height: 600px;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* Sektions speziell*/
#start {
  background: url(../bilder/petraStaussPodologie_Zeichnung.jpg) no-repeat 10% 10% fixed; 
  height: 100%;

}
.logo {
    padding-top: 70px;
}

#podologie {
  background-color: #E9F7F5;
}
#podologieInfo {
  background: url(../bilder/petraStaussPodologie_Aquarell.jpg) no-repeat center center fixed; 
}
#petraStaussInfo {
  background: url(../bilder/petraStaussPodologie_Praxis_BG.jpg) no-repeat center top fixed; 
}
#petraStaussInfo .panel {
    opacity: 0.8;
}
#praxis {
  background-color: #E9F7F5;
}
#petraStauss img,
#praxis img {
  margin-top: 4rem;
}
#anwendungen {
	  background: url(../bilder/petraStaussPodologie_Zeichnung.jpg) no-repeat 70% top fixed; 
}
#anwendungen .panel {
	background-color: #E9F7F5;
	opacity: 0.85;
}
#preise {
	background-color: #E9F7F5;
}
#preise .panel {
	background: none;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#preise table {
	/* border-bottom: 1px solid #90D9CF; */
	margin-top: -16px;
}
#preise th {
	background-color: #90D9CF;
}
#preise th,
#preise td {
	padding: 10px 3px;
}
#preise td.small {
	padding-top: 0
}
#preise th:nth-child(2), #preise td:nth-child(2) {
    text-align: right;
    width: 100px;
}
#preise th:nth-child(3), #preise td:nth-child(3) {
    text-align: right;
    width: 130px;
}
#preise th:first-child,
#preise td:first-child {
	padding-left: 20px;
}
#preise th:last-child,
#preise td:last-child {
	padding-right: 20px;
}
#preise .strip2 {
	background-color: #C7ECE7;
}
#kontakt,
#kontaktInfo {
	background-color: #C7ECE7;
}
#kontakt.pad-section {
	padding-bottom: 60px;
}
#drdsgvo_map {
	  height: 400px;
}
#kontaktInfo.pad-section {
	    padding: 60px 0 40px;
}
.kontaktLinks {
	    padding-top: 1rem;
}

address {
    line-height: 1.7;
	margin-bottom: 0;
}
#adresse {
  background-color: #90D9CF;
  padding: 1.2rem 0 .2rem;
}
#footerLinks {
  background-color: #C7ECE7;
  padding: 1.2rem 0 .2rem;
}

#impressum,
#copyright,
#datenschutz {
  background: url(../bilder/petraStaussPodologie_Zeichnung.jpg) no-repeat 15% bottom fixed; 
  background-color: #fff;
  height: 100%;
}



.navigation {
	background-color: #E9F7F5;
}
.navbar-default {
	background-color: #90D9CF;
	border: none;
	padding-top: 8px;
}
.navbar-default .navbar-brand {
	display: none;
	width: 150px;
	margin: 22px 0 0 14px;
	padding: 0;
	background-image: url("../bilder/logos/petraStaussPodologie_PetraStauss_hover.png");
	background-size: 100%;
	background-repeat: no-repeat;
}
.navbar-default.navbar-shrink .navbar-brand {
	display:block;
}
.navbar-default .navbar-brand img:hover{
    opacity: 0;
}

.navbar-default .navbar-toggle {
    border: none;
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: #28BEBB;
}
.navbar-toggle .icon-bar {
    width: 40px;
    height: 6px;
}
.navbar-default .navbar-toggle:focus {
    background-color: #E9F7F5;
}
.navbar-default .navbar-toggle:hover {
    background-color: #C7ECE7;
}

.navbar-default .navbar-nav > .active > a{
    color: #28bebb;
    background-color: transparent;
}
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #28bebb;
    background-color: transparent;
    cursor: auto;
}
.nav > li {
    background: none;
}

.navbar-fixed-top {
	top: 0px;
}
.navbar-fixed-top.navbar-shrink {
	top: 0px;
}

.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
	outline:0;
}

.btn-xl{
	color: #fff;
	background-color: #28BEBB;
	border-color: #90D9CF;
	font-size: 16px;
	padding: 5px 10px;
	text-decoration: none;
}
.btn-xl:hover,
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
	color: #333;
	background-color: #90D9CF;
	border-color: #28BEBB;
}
.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{
	background-image: none;
}
.btn-xl.disabled,.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active{
	background-color: #90D9CF;
	border-color: #90D9CF;
}

.service-modal .modal-content {
	border-radius:0;
	background-color: transparent;
	background-clip:border-box;
	-webkit-box-shadow:none;
	box-shadow:none;
	border:0;
	min-height:100%;
	padding:50px 0;
}
.service-modal .modal-body {
    background-color: #fff;
    background-color: rgba(255, 255, 255, .65);
}
.service-modal .close-modal {
	position:absolute;
	width:75px;
	height:75px;
	background-color:transparent;
	top: 25px;
	right: -25px;
	cursor:pointer
}
.service-modal .close-modal:hover {
	opacity:.5
}
.service-modal .close-modal .lr {
	height:40px;
	width:2px;
	background-color:#555;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	z-index:1051
}
.service-modal .close-modal .lr .rl {
	height:40px;
	width:2px;
	background-color:#555;
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	z-index:1052
}
.service-modal .modal-backdrop {
	opacity:0;
	display:none
}
.service-modal .btn {
	margin-top:35px
}


@media (min-width:420px) {
    .nav > li {
	  	margin: 15px 40px;
    }
	.navbar-default .navbar-brand {
		width: 160px;
		margin: 25px 0 0 20px;
	}

	.panel {
		padding: 35px;
	}
	#preise th,
	#preise td {
		padding: 10px 6px;
	}
	#preise th:first-child,
	#preise td:first-child {
		padding-left: 35px;
	}
	#preise th:last-child,
	#preise td:last-child {
		padding-right: 35px;
	}
	#preise th:nth-child(2), #preise td:nth-child(2) {
		width: 120px;
	}
}


@media (min-width:460px) {
    .btn-xl{
	    font-size: 18px;
	    padding: 10px 20px;
    }

}



@media (min-width:500px) {

	body {
		font-size: 15px;
		font-size: 1.5rem;
	}
	h2 {
		font-size: 22px;
		font-size: 2.2rem;
	}
	h3 {
		font-size: 19px;
		font-size: 1.9rem;
	}

	.pad-section {
	  padding: 120px 0;
	}
	#start.pad-section {
		padding: 150px 0;
	}
	.lead {
		font-size: 120%;
	}
	.glyphicon {
		font-size: 65px;
		width: 110px;
		height: 110px;
		line-height: 104px;
	}

	#google_map {
	  height: 500px;
	}

}



@media (max-width:767px) {
	
    .container > .navbar-header {
	  	margin-right: 0;
	  	margin-left: 0;
    }
    .navbar-toggle {
	  	padding: 9px;
	  	margin-right: 0;
	  	margin-bottom: 0;
    }
    .nav > li {
	  	margin: 8px;
		padding: 0;
    }
    .navbar-nav {
	  	margin: 0 -15px 10px;
    }
    .navbar-default .navbar-collapse {
	  	margin: 20px 0 3px;
    }    
    .navbar-default .navbar-nav a{
	  	font-size: 1.4em;
    }

}

@media (min-width:600px) {
	#preise th:nth-child(2), #preise td:nth-child(2) {
		width: 160px;
	}
}

@media (min-width:768px) {

    .navbar-default {
		padding-top: 20px;
	 	 -webkit-transition:padding .3s;
	  	-moz-transition:padding .3s;
	  	transition:padding .3s;
	  	border:0
    }
    .navbar-default .navbar-brand {
	  	display:block;
		margin: 20px 0 0;
    }
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
	    margin: 23px 0 0 6px
    }
	.navbar-nav>li>a {
		padding: 15px 10px
	}
    .navigation ul {
		margin-top: 20px
    }
    .navbar-nav>li {
	  	margin: 0;
		padding: 0;
    }
	.panel {
		padding: 50px;
	}
	#preise table {
		/*  border: 1px solid #90D9CF; */
		margin-top: -32px
	}
	#preise th,
	#preise td {
		padding: 18px 12px;
	}
	#preise th:first-child,
	#preise td:first-child {
		padding-left: 50px;
	}
	#preise th:last-child,
	#preise td:last-child {
		padding-right: 50px;
	}
	#preise th:nth-child(2), #preise td:nth-child(2) {
		width: 190px;
	}
	#start.pad-section {
		padding: 180px 0;
	}
	#google_map {
	  height: 600px;
	}
	#kontaktInfo.pad-section {
		padding: 60px 0 50px;
	}

    .service-modal .modal-content {
	  padding: 80px 0;
    }
	.service-modal .close-modal {
		top:50px;
		right: 10px;
	}

}



@media (min-width:912px) {
	body {
		font-size: 16px;
		font-size: 1.6rem;
	}
	h2 {
		font-size: 26px;
		font-size: 2.6rem;
	}
	h3 {
		font-size: 21px;
		font-size: 2.1rem;
	}
	.navbar-nav>li>a {
		padding: 15px
	}
	.navbar-default .nav li a {
		font-size: 15px;
		font-size: 1.5rem;
	}
   .navbar-default .navbar-brand {
	  width: 170px
    }
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
	    margin: 24px 0 0 8px
    }

    .service-modal .close-modal .lr,
    .service-modal .close-modal .lr .rl {
	    height:50px
    }

}


@media (min-width:912px) and (max-width:1199px) {
    .container {
	  width: 890px;
    }
}



@media (min-width:1200px) {
	body {
		font-size: 18px;
		font-size: 1.8rem;
	}
	h2 {
		font-size: 30px;
		font-size: 3rem;
	}
	h3 {
		font-size: 23px;
		font-size: 2.3rem;
	}

    .navbar-default {
		padding-top: 25px;
    }
	.navbar-default .nav li a {
		font-size: 16px;
		font-size: 1.6rem;
	}
    .navbar-default .navbar-brand {
	  width: 180px;
    }
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
	    margin: 19px 0 0 11px;
    }

	#start.pad-section {
		padding: 200px 0;
	}
	#kontaktInfo.pad-section {
		padding: 60px 0;
	}

    footer ul.quicklinks > li {
	  padding-right: 20px;
	  padding-left: 20px;
    }
    
    .service-modal .close-modal .lr,
    .service-modal .close-modal .lr .rl {
	    height:60px;
    }   

	#preise th:nth-child(2), #preise td:nth-child(2) {
		text-align: right;
		width: 300px;
	}
}


::-moz-selection {
	text-shadow:none;
	background-color:#90D9CF;
}
::selection {
	text-shadow:none;
	background-color:#90D9CF;
}
img::selection {
	background:0 0;
}
img::-moz-selection {
	background:0 0;
}
body {
	webkit-tap-highlight-color:#90D9CF
}


/* wegen Fehler bei ipad mit Hintergrundbildern und background-attachment: fixed*/
.ipad #start,
.ipad #podologieInfo,
.ipad #petraStaussInfo,
.ipad #anwendungen {
  	background-attachment: scroll;
}