/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v29-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v29-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v29-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v29-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v29-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v29-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v29-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v29-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v29-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v29-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v29-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v29-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/quicksand-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/quicksand-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v30-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}

/* quicksand-500 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/quicksand-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/quicksand-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v30-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
}

body { padding: 0; margin: 0; background: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 32px; color: #373737; text-decoration: none; text-align: left; }
h1 { padding: 0; margin: 0 0 21px 0; font-family: 'Open Sans', sans-serif; font-size: 36px; line-height: 53px; font-weight: 400; color: #373737; text-align: center; }
h2 { padding: 0; margin: 0 0 24px 0; font-family: 'Open Sans', sans-serif; font-size: 26px; line-height: 43px; font-weight: 400; color: #373737; }
h2 span { display: block; font-size: 18px; margin: -5px 0 0 0; }
h3 { padding: 0; margin: 0 0 21px 0; font-family: 'Open Sans', sans-serif; font-size: 21px; line-height: 38px; font-weight: 400; color: #373737; }
a, .blue { color: #970101; text-decoration: none; }
p { padding: 0; margin: 0 0 24px 0; }
ul { margin: 0 0 24px 0; padding: 0 0 0 17px; }
.clearer { clear: both; }
.contentclearersmall { height: 24px; clear: both; }
.contentclearer { height: 60px; clear: both; }
#mobilebutton { display: none; }

#header { width: 100%; padding: 0; margin: 0; }
#header.home { background: url(img/header_02_01.jpg) no-repeat center; }
#header.sub { background: url(img/subheader_01.jpg) no-repeat center; }
#header.schwangerenvorsorge { background: url(img/schwangerenvorsorge.jpg) no-repeat center; }
#header.krebsvorsorge { background: url(img/krebsvorsorge.jpg) no-repeat center; }
#header.verhuetung { background: url(img/verhuetung.jpg) no-repeat center; }
#header.spirale { background: url(img/verhuetung_spirale.jpg) no-repeat center; }
#header.kinderwunsch { background: url(img/kinderwunsch.jpg) no-repeat center; }
#header.dysplasiesprechstunde { background: url(img/dysplasiesprechstunde.jpg) no-repeat center; }
#header.wechseljahrsbeschwerden { background: url(img/wechseljahrsbeschwerden.jpg) no-repeat center; }
#header.brustsprechstunde { background: url(img/brustsprechstunde.jpg) no-repeat center; }
#header.ambulante_operationen { background: url(img/ambulante_operationen.jpg) no-repeat center; }
#header.akupunktur { background: url(img/akupunktur.jpg) no-repeat center; }
#topcontainer { position: fixed; z-index: 1000; width: 100%; padding: 0; margin: 0; background: url(img/bg_top.png) repeat; }
#top { width: 1100px; padding: 0; margin-left: auto; margin-right: auto; text-align: right; }
#hide { position: absolute; margin: 300px 0 0 280px; z-index: 100; }
#hide1 { position: absolute; margin: 300px 0 0 180px; z-index: 100; }
#hide2 { position: absolute; margin: 300px 0 0 380px; z-index: 100; }
#logo { position: absolute; float: left; margin: 12px 0 0 30px; }
#navi { float: right; margin: 126px 0 32px 0; font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
#navi ul { list-style-type: none; margin: 0; padding: 0; }
#navi .naviitem { float: left; margin: 0 0 0 40px; }
#navi .naviitem a { color: #373737; }
#navi .active, #navi .active a, #navi .naviitem a:hover { color: #970101; }
#navi .naviitem ul { position: absolute; z-index: 100; top: 150px; padding: 42px 0 0 0; margin: 0 0 0 -77px; left: -999em; font-size: 16px; letter-spacing: 0.05em; text-transform: none; text-align: center; }
#navi .naviitem ul li { padding: 2px 15px 0px 15px; margin: 0 0 1px 0; background: transparent url(img/bg_top.png) repeat; border-bottom: 1px solid #efefef; }
#navi .naviitem ul li a.subactive, #navi .naviitem ul li a:hover { color: #970101; }
#navi .naviitem ul li a, #navi .naviitem ul ul li a { color: #373737; }
#navi ul li:hover ul ul, #navi ul li:hover ul ul ul, #navi ul li.sfhover ul ul, #navi ul li.sfhover ul ul ul { left: -999em; }
#navi ul li:hover ul, #navi ul li li:hover ul, #navi ul li li li:hover ul, #navi ul li.sfhover ul, #navi ul li li.sfhover ul, #navi ul li li li.sfhover ul { left: auto; }
#navi select { display: none; }
#slogan { width: 1100px; padding: 767px 0 107px 0; margin-left: auto; margin-right: auto; }
#slogan h1 { margin: 0; font-size: 38px; line-height: 38px; color: #970101; letter-spacing: 0.05em; text-shadow: 2px 2px 0px #fff; text-transform: uppercase; text-align: right; }
#slogan h1 span { font-size: 24px; text-transform: none; }
#headerspace { padding: 300px 0 0 0; }
#teasercontainer { width: 100%; padding: 0; margin: 0; background: url(img/bg_teaser_01.png) repeat; }
#teaser { width: 1100px; padding: 0; margin-left: auto; margin-right: auto; }
.teaser { float: left; padding: 41px 0 46px 0; width: 50%; font-family: 'Quicksand', sans-serif; font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: 0.05em; color: #fff; text-align: center; }
.teaser span { font-size: 16px; }

#newscontainer { width: 100%; padding: 0; margin: 0; background: #e6eef4; }
#news { width: 1100px; padding: 0; margin-left: auto; margin-right: auto; }
.news { float: left; width: 47.5%; margin: 0 5% 0 0; padding: 60px 0 46px 0; text-align: center; }

#content { width: 1100px; padding: 60px 0 62px 0; margin-left: auto; margin-right: auto; text-align: left; }
#content.center, #content .center { text-align: center; }
#content.home h1 { font-size: 21px; line-height: 38px; }
#content ul { list-style: square; }
#content p span { color: #4273a0; margin: 0 4px; }
#content img { max-width: 100%; height: auto; margin: 0 0 24px 0; }
.quote { font-size: 28px; line-height: 36px; font-weight: 300; font-style: italic; margin: 20px 0 30px 0; }
.quote span { font-size: 21px; font-weight: 400; font-style: normal; }
.line { width: 100%; height: 2px; background: #efefef url(img/line.png) no-repeat center; margin: 0 0 36px 0; }

.column { float: left; width: 47.5%; margin: 0 5% 0 0; }
.columnsmall { float: left; width: 30%; margin: 0 5% 0 0; }
.note { float: left; width: 25%; padding: 3% 2%; margin: 0 5% 0 0; background: #4273a0; color: #fff; }
.note h2, .note p { color: #fff; }
.note a { color: #fff; text-decoration: underline; }
.button { padding: 10px 20px; margin: 0 0 30px 0; border: 1px solid #373737; border-radius: 15px; }
.columncontact { float: left; width: 33%; margin: 0; }
.hours { margin: 0 0 59px 0; }
.hours h2, .hours h3 { margin: 0 0 33px 90px; }
.hours p { margin: 0 39px 12px 60px; padding: 0 0 12px 0; border-bottom: 1px solid #373737; }
.last { margin: 0; }
#gallery { }
#gallery img { float: left; margin: 20px; }

#highlight { width: 100%; padding: 265px 0 0 0; margin: 0; background: url(img/highlight.jpg) no-repeat center top; }
#highlightcontainer { width: 100%; padding: 0; margin: 0; background: url(img/bg_top.png) repeat; }
#highlighttext { width: 1100px; padding: 63px 0 62px 0; margin-left: auto; margin-right: auto; text-align: left; }

#map { width: 100%; padding: 0; margin: 0 0 -10px 0; }

#footercontainer { width: 100%; padding: 0; margin: 0; background: #970101; }
#footer { position: relative; width: 1100px; padding: 70px 0 0 0; margin-left: auto; margin-right: auto; color: #fff; line-height: 28px; }
#footer h3 { color: #fff; margin: 0 0 33px 0; }
#footer a { color: #fff; text-decoration: underline; }
#footer .hours h3 { margin: 0 0 33px 60px; }
#footer .hours p { border-bottom: 1px solid #8b7971; }
#social { position: absolute; top:-5px; }
.date { height: 39px; margin: 0 0 5px 0; padding: 10px 0 0 65px; background: url(img/icon_online_termin.png) no-repeat left; }
#footernavi { padding: 22px 0 40px 0; border-top: 1px solid #8b7971; color: #c5b7b1; text-align: right; }
#footernavi a { color: #c5b7b1; }



/* Responsive */

@media only screen and (max-width: 1100px) {
#mobilebutton { display: block; position: fixed; z-index: 80; bottom: 0; width: 100%; background: #373737; text-align: center; padding: 5px 0; }
#header.home { background: url(img/header_02_01.jpg) no-repeat center top; background-size: 180% auto; }
#header.sub { background: url(img/subheader_01.jpg) no-repeat center top; background-size: 200% auto; }
#header.schwangerenvorsorge { background: url(img/schwangerenvorsorge.jpg) no-repeat center top; background-size: 200% auto; }
#header.krebsvorsorge { background: url(img/krebsvorsorge.jpg) no-repeat center top; background-size: 200% auto; }
#header.verhuetung { background: url(img/verhuetung.jpg) no-repeat center top; background-size: 200% auto; }
#header.kinderwunsch { background: url(img/kinderwunsch.jpg) no-repeat center top; background-size: 200% auto; }
#header.dysplasiesprechstunde { background: url(img/dysplasiesprechstunde.jpg) no-repeat center top; background-size: 200% auto; }
#header.wechseljahrsbeschwerden { background: url(img/wechseljahrsbeschwerden.jpg) no-repeat center top; background-size: 200% auto; }
#header.brustsprechstunde { background: url(img/brustsprechstunde.jpg) no-repeat center top; background-size: 200% auto; }
#header.ambulante_operationen { background: url(img/ambulante_operationen.jpg) no-repeat center top; background-size: 200% auto; }
#header.akupunktur { background: url(img/akupunktur.jpg) no-repeat center top; background-size: 200% auto; }
#topcontainer { position: static; }
#top { width: 100%; margin: 0; text-align: left; }
#hide { margin: 300px 25% 0 25%; }
#logo { margin: 15px 0 0 30px; }
#navi { margin: 119px 0 32px 0; }
#navi .naviitem { margin: 0 30px 0 0; }
#navi .naviitem ul { top: 143px; }
#slogan { width: 100%; padding: 50% 0 5% 0; margin: 0; }
#slogan h1 { margin: 0 30px; }
#headerspace { padding: 30% 0 0 0; }
#teasercontainer { background: #970101; }
#teaser { width: 100%; margin: 0; }
.teaser { width: 40%; margin: 0 5%; }
#news { width: 100%; margin: 0; }
.news { width: 40%; margin: 0 5%; }
#content { width: 90%; margin: 0 5%; }
.note { width: 26%; }
.columncontact { width: 30%; margin: 0 5% 0 0; }
.hours { margin: 0 0 59px 0; }
.hours h2 { margin: 0 0 33px 0; }
.hours p { margin: 0 39px 12px 0; }
.last { margin: 0; }
#highlight { padding: 20% 0 0 0; background-size: 180% auto; }
#highlighttext { width: 90%; padding: 63px 5% 62px 5%; margin: 0; }
#footer { width: 90%; margin: 0 5%; padding: 70px 0; }
#footer .hours h3 { margin: 0 0 33px 0; }
}

@media only screen and (max-width: 1030px) {
#navi { margin: 104px 0 17px 30px; }
#navi .naviitem { display: none; }
#navi select { display: block; text-align: center; background: transparent url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; color: #373737; padding: 10px 15px; border: 0; font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0.2em; text-transform: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
#navi select option { padding: 10px 0; }
#hide { margin: 300px 20% 0 20%; }
#content { padding: 30px 0 32px 0; }
}

@media only screen and (max-width: 960px) {
#hide { margin: 260px 20% 0 20%; }
#hide img { max-width: 100%; height: auto; }
.note { width: 41%; }
.columncontact { width: 50%; margin: 0; }
#footer .columncontact, .hours { clear: both; float: none; width: 100%; margin: 0 0 40px 0; }
.hours p { margin: 0 0 12px 0; }
.date { display: inline-block; }
#footer { text-align: center; padding: 40px 0 60px 0; }
#footernavi { padding: 0 0 40px 0; border-top: none; text-align: center; }
}

@media only screen and (max-width: 850px) {
body { line-height: 30px; }
h1 { font-size: 30px; line-height: 39px; }
h2 { font-size: 22px; line-height: 31px; }
h2 span { font-size: 16px; margin: 10px 0 0 0; }
h3 { font-size: 19px; line-height: 28px; }
#slogan h1 { font-size: 34px; line-height: 34px; }
#slogan h1 span { font-size: 20px; }
.quote { font-size: 26px; line-height: 34px; }
.quote span { display: block; margin: 5px 0 0 0; font-size: 19px; line-height: 28px; }
#content.home h1 { font-size: 19px; line-height: 28px; }
.columnsmall { float: none; width: 100%; margin: 0; }
#highlightcontainer { background: #fff; }
#highlighttext { padding: 33px 5% 32px 5%; }
}

@media only screen and (max-width: 700px) {
#logo img { width: auto; height: 160px; }
#navi { margin: 69px 0 0 30px; }
#hide { margin: 200px 15% 0 15%; }
#slogan h1 { font-size: 30px; line-height: 30px; }
#slogan h1 span { font-size: 16px; }
.teaser { font-size: 20px; line-height: 28px; }
.column { float: none; width: 100%; margin: 0; }
.note { float: none; width: 92%; padding: 6% 4% 4% 4%; margin: 0 0 30px 0; }
.columncontact { float: none; width: 100%; margin: 0; }
.hours { margin: 40px 0; }
}

@media only screen and (max-width: 600px) {
#logo img { height: 120px; }
#navi { margin: 46px 0 0 30px; }
#navi select { width: 100%; }
#hide { margin: 160px 10% 0 10%; }
.teaser { float: none; width: 90%; padding: 31px 0 36px 0; margin: 0 5%; font-size: 18px; line-height: 26px; }
.teaser span { font-size: 14px; }
#teaser .last { padding: 0 0 36px 0; margin: -20px 5% 0 5%; }
.news { float: none; width: 90%; margin: 0 5%; }
#news .last { margin: -80px 5% 0 5%; }
}

@media only screen and (max-width: 500px) {
#topcontainer { background: #fff; }
#top { text-align: center; }
#hide { margin: 230px 10% 0 10%; }
#logo { position: static; float: none; margin: 15px 0 0 -40px; }
#navi { float: none; margin: 0; border-top: 1px solid #efefef; }
#header.home { background: url(img/header_02_01.jpg) no-repeat center; background-size: 180% auto; }
#header.sub { background: url(img/subheader_01.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.schwangerenvorsorge { background: url(img/schwangerenvorsorge.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.krebsvorsorge { background: url(img/krebsvorsorge.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.verhuetung { background: url(img/verhuetung.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.kinderwunsch { background: url(img/kinderwunsch.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.dysplasiesprechstunde { background: url(img/dysplasiesprechstunde.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.wechseljahrsbeschwerden { background: url(img/wechseljahrsbeschwerden.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.brustsprechstunde { background: url(img/brustsprechstunde.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.ambulante_operationen { background: url(img/ambulante_operationen.jpg) no-repeat center bottom; background-size: 180% auto; }
#header.akupunktur { background: url(img/akupunktur.jpg) no-repeat center bottom; background-size: 180% auto; }
#slogan { padding: 50% 0 20% 0; }
#slogan h1 { display: none; }
.date { text-align: left; }
#footer { padding: 60px 0; }
}

@media only screen and (max-width: 400px) {
h1 { font-size: 22px; line-height: 31px; }
}