/*
Theme Name: Urologicum
Theme URI: https://www.gmk.de/
Author: GMK
Author URI: https://www.gmk.de/
Description: Eigens entwickeltes Template für das Urologicum Bayreuth
Template: twentyseventeen
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: urologicum
*/

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

/* roboto-condensed-700 - 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: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/roboto-condensed-v27-latin-700.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/roboto-condensed-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/roboto-condensed-v27-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/roboto-condensed-v27-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('assets/fonts/roboto-condensed-v27-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('assets/fonts/roboto-condensed-v27-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* General */
html, body {margin: 0; padding: 0; width: 100vw; overflow-x: hidden;}
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Condensed', sans-serif; font-weight: 400;}
p, a, li, div, span {font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 16px;}
a, a:active, a:focus {outline: none;}
hr {border-top: 2px solid #164193; border-right: none; border-bottom: none; border-left: none; margin: 30px 0; max-width: 150px;}
.container-small {width: 100%; max-width: 950px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;}
.container {width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;}
strong {font-weight:700;}

#text-5 {margin-top:10px;}

/* Header */
#uro-header {width: 100vw; height: 100vh; background: #fff;}
.header-top {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 999; padding: 30px 0; transition: all .5s;}
.header-top.scroll-header {-webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);}
.header-top-left {width: 50%; float: left; margin-top: 1px;}
.header-top-right {width: 50%; float: left;}
.header-top-right img {height: 21px; width: auto; float: right; cursor: pointer;}
.header-top-left a {color: #164193; text-decoration: none; text-transform: uppercase; margin-right: 10px;}
.header-content {height: calc(100vh - 88px); padding-bottom: 80px; box-sizing: border-box; margin-top: 88px;}
.header-content-left {width: 50%; float: left; height: 100%;}
.header-content-right {width: 50%; float: left; height: calc(100vh - 168px); background: url(/wp-content/uploads/2018/12/urologicum-header-neu.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative;}
.header-content-left-container {margin-top: 100px;}
.header-content-left-container h1 {font-size: 24px; color: #164193; text-transform: uppercase; padding-left: 25px;}
.header-left-content-divider {height: 5px; width: 150px; background: #164193; margin-bottom: 25px;}
.uro-logo {max-width: 380px; padding-left: 25px;}
.scroll-down {text-align: center; margin-top: 143px; cursor: pointer;}
.scroll-down img {height: 20px; width: auto;}
.uro-phone {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 9999; cursor: zoom-out;}
.uro-whatsapp {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 9999; cursor: zoom-out;}
.uro-fax {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 9999; cursor: zoom-out;}
.info-inner {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px; -webkit-box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); background: #fff; width: 90%; max-width: 300px; font-size: 16px; text-transform: uppercase; cursor: default; box-sizing: border-box;}
.info-inner span {font-size: 30px; color: #164193;}
.info-inner .modal-info {font-size: 16px; text-transform: none;}
.header-info-box {width: 100%; max-width: 375px; box-sizing: border-box; padding-left: 25px; margin-top: 50px;}
.header-info-box li {list-style-type: none;margin-bottom:15px;}
.header-info-box p {margin: 0; color: #164193; margin-bottom: 10px;}
.header-info-box .textwidget {width: 100%; box-sizing: border-box; background: #eee; padding: 20px;}
.header-info-box img {width: 100%; height: auto; margin-top: 10px; display: block;}
.header-info-box strong {font-size: 18px; display: block;}
.header-info-box *:last-child {margin-bottom: 0;}

/* Menu */
.uro-menu-background {display: none; width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9999; background: rgba(0,0,0,0.3);}
.uro-menu {width: 100%; max-width: 400px; position: fixed; right: -400px; top: 0; height: 100vh; background: #fff; padding: 30px; box-sizing: border-box; transition: all .3s; z-index: 99999;}
.uro-menu.active {right: 0; -webkit-box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2);}
.uro-menu-top {width: 100%; float: left;}
.uro-menu-top-left, .uro-menu-top-right {float: left; width: 50%;}
.menu-close-img {max-width: 25px; height: auto; margin-top: 5px; cursor: pointer;}
.uro-menu-content {width: 100%; float: left; margin-top: 40px;}
#top-menu {padding: 0; margin: 0; list-style-type: none;}
#top-menu li {border-bottom: 2px solid #164193; float: left; width: 100%;}
#top-menu li:last-child {border-bottom: none;}
#top-menu li a {text-decoration: none; text-transform: uppercase; color: #164193; width: 100%; box-sizing: border-box; padding: 10px; transition: all .3s; float: left;}
#top-menu li a:hover {padding-left: 15px;}

/* Content */
section {position: relative; width: 100%; margin-top: 50px; float: left; z-index: 2;}
section h3 {color: #164193; margin-top: 0; text-transform: uppercase;}
section p {color: #164193;}
section ul {list-style-type: none; padding-left: 25px;}
section li {color: #164193; text-indent: -15px;}
section li:before {content: '-'; margin-right: 10px;}
section p:last-child {margin-bottom: 0;}
#sec-praxis::before {position: absolute; content: ''; background: #164193; width: 7000px; height: 230px; top: -80px; left: -2500px; z-index: -1;}
.section-content-left-image {width: 40%; float: left; height: auto; opacity: 0; transform: translateX(-50px); transition: all 1s; position: relative;}
.section-content-left-image.reveal {opacity: 1; transform: translateX(0);}
.section-content-left-image img {width: 100%; height: auto;}
.section-content-right-text {width: 60%; opacity: 0; float: left; background: #fff; padding: 30px; box-sizing: border-box; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); transform: translate(-10px, 70px); transition: all 1s;}
.section-content-right-text.reveal {opacity: 1; transform: translate(-60px, 70px);}
.section-content-right-image {width: 40%; float: right; height: auto; opacity: 0; transform: translateX(50px); transition: all 1s; position: relative;}
.section-content-right-image.reveal {opacity: 1; transform: translateX(0);}
.section-content-right-image img {width: 100%; height: auto;}
.section-content-left-text {width: 60%; opacity: 0; float: left; background: #fff; padding: 30px; box-sizing: border-box; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); transform: translate(10px, 70px); transition: all 1s;}
.section-content-left-text.reveal {opacity: 1; transform: translate(60px, 70px);}
#sec-vorteil {margin-top: 100px; float: left;}
.section-vorteil-inner {opacity: 0; transform: translate(-50px, -50px); background: #164193; padding: 30px; box-sizing: border-box; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); float: left; transition: all 1s;}
.section-vorteil-inner p a {background:transparent;border:2px solid #fff;padding:12px 25px;text-decoration: none;color:#fff;display:inline-block;margin-right:5px;transition:all 0.4s;}
.section-vorteil-inner p a:hover {background:#fff;color:#164193;}
.section-vorteil-inner.reveal {opacity: 1; transform: translate(0, -50px);}
#sec-vorteil h3, #sec-vorteil p {color: #fff; float: left; width: 100%; margin-top: 0;}
.uro-button {background: #fff; color: #164193; text-decoration: none; padding: 10px 15px; text-transform: uppercase; float: left; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); transition: all .3s; border: 1px solid #fff;}
.uro-button:hover {background: #164193; color: #fff;}
.impressum, .datenschutz {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 9999; cursor: zoom-out;}
.rechtlich-inner {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px; -webkit-box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 0px 15px 0px rgba(0,0,0,0.2); background: #fff; width: 90%; max-width: 700px; height: 70vh; cursor: default; overflow-y: scroll; box-sizing: border-box;}
.rechtlich-inner h4 {color: #164193; margin-top: 0; text-transform: uppercase;}
.rechtlich-inner p, .rechtlich-inner a {color: #164193;}
.section-vorteil-image {width: 90%; margin: 0 auto; transform: translateX(50px); transition: all 1s; opacity: 0; position: relative;}
.section-vorteil-image.reveal {opacity: 1; transform: translateX(0);}
.section-vorteil-image img {width: 100%; height: auto;}
.image-info {box-sizing: border-box; color: #164193; text-transform: uppercase;}
.section-vorteil-image .image-info {position: absolute; top: 50px; right: 0;}
.section-content-left-image .image-info {position: absolute; bottom: 30px; left: 0;}
.section-content-right-image .image-info {position: absolute; bottom: 30px; right: 0;}
.header-content-right .image-info {position: absolute; bottom: 30px; left: 0; font-size: 24px;}

/* Footer */
footer h3 {color: #164193; margin-top: 0; text-transform: uppercase;}
footer p {color: #164193;}
footer a {color: #164193; text-decoration: none;}
#uro-footer {float: left; margin-top: 50px; width: 100%; height: auto; background: url(/wp-content/uploads/2018/10/urologicum-footer.jpg) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; margin-bottom: 75px; position: relative;}
.footer-left {background: #fff; padding: 30px; box-sizing: border-box; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); width: 60%; float: left; transform: translateY(50px);}
.footer-left-inner li {list-style-type: none;}
.footer-left-inner-left {width: calc(60% - 1px); float: left; padding-right: 20px; box-sizing: border-box;}
.footer-left-inner-left p a {background: transparent;border: 2px solid #164193;padding: 8px 15px;text-decoration: none;color: #164193;display: inline-block;margin-bottom: 5px;transition: all 0.4s;margin-top:7px;}
.footer-left-inner-left p a:hover {background: #164193;border: 2px solid #164193;color: #fff;}
.footer-left-inner-right {width: calc(40% - 1px); float: left; padding-left: 20px; box-sizing: border-box;}
.footer-divider {width: 2px; float: left; background: #164193; height: 200px; margin-top: 40px;}
.footer-right {width: 40%; float: left;}
#to-top {position: absolute; right: calc((100vw - 970px) / 2); bottom: -25px; width: 30px; height: 30px; background: #164193; padding: 10px; border-radius: 50px; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); cursor: pointer; transition: all .3s; border: 1px solid #164193;}
#to-top:hover {border: 1px solid #fff;}
#to-top img {width: 100%; height: auto; margin-top: 4px;}
.gmk-footer img {height: 13px; width: auto; animation-name: pulsieren; animation-duration: 1s; animation-iteration-count: infinite;}
.hint {font-size:12px;color:#164193;margin-top:5px;}
@keyframes pulsieren {
  from {transform: scale(1);}
  to {transform: scale(1.1);}
}
@-webkit-keyframes pulsieren {
  from {transform: scale(1);}
  to {transform: scale(1.1);}
}
@-moz-keyframes pulsieren {
  from {transform: scale(1);}
  to {transform: scale(1.1);}
}

/* 404 */
.error404 .header-content {display: none;}
.error404 #uro-header {height: auto;}
.error-outer {margin-top: 150px;}
.error-inner {width: 100%; float: left;}
.error-left {width: 50%; float: left; padding-right: 30px; box-sizing: border-box;}
.error-right {width: 50%; float: left; padding-left: 30px; box-sizing: border-box;}
.error-logo {max-width: 300px; height: auto;}
.error-left h2 {font-size: 24px; color: #164193; text-transform: uppercase;}
.error-left p {color: #164193;}
.error-button {background: #164193; color: #fff; text-decoration: none; padding: 10px 15px; text-transform: uppercase; float: left; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); transition: all .3s; border: 1px solid #164193;}
.error-button:hover {background: #fff; color: #164193;}

/* Cookie Hint */
button#catapultCookie {text-decoration: none; padding: 10px 15px !important; text-transform: uppercase; float: left; -webkit-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: -5px 5px 15px 0px rgba(0,0,0,0.2); transition: all .3s; border: 1px solid #fff !important; border-radius: 0 !important; font-weight: 400; font-size: 16px;     font-family: 'Roboto Condensed', sans-serif;}
button#catapultCookie:hover {background: #164193; color: #fff;}


#sec-praxis p a {background:transparent;border:2px solid #164193;padding:12px 25px;text-decoration: none;color:#164193;display:inline-block;margin-right:5px;transition:all 0.4s;}
#sec-praxis p a:hover {background:#164193;color:#fff;}

.secondimage {
  opacity: 0;
  position:absolute;
  left:0;
  top:0;
  z-index: 1;
}

.firstimage {
  z-index: 2;
  position:relative;
}

.firstimage,
.secondimage {
  transition:all 0.6s;
}

.imagecontainer {
  position:relative;
  background:#fff;
}



/* Setze den Anfangszustand von beiden Bildern */
.firstimage, .secondimage {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Setze die .secondimage standardmäßig unsichtbar */
.secondimage {
  opacity: 0;
}

/* Beim Hover auf .firstimage wird es ausgeblendet und .secondimage eingeblendet */
.firstimage:hover {
  opacity: 0; /* Fade out .firstimage */
}

.firstimage:hover + .secondimage {
  opacity: 1; /* Fade in .secondimage */
}


/* Subpages */
.logosubpage {
  width:150px;
  position:relative;
  display:inline-block;
  margin-right:20px;
}

.logosubpage img {
  width:100%;
  height:auto;
  display:block;
}

.logosubpage a {
  display: block;
}

.page-id-31 #uro-header,
.page-id-33 #uro-header {
  height:auto;
}
.page-id-31 .entry-content,
.page-id-33 .entry-content {
  width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    margin-top:110px;
}

.page-id-31 .entry-content *,
.page-id-33 .entry-content * {
  color:#164193
}

.page-id-31 .entry-header,
.page-id-33 .entry-header {
  display:none;
}

.page-id-31 .header-top-left,
.page-id-33 .header-top-left {
  width: 50%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.page-id-31 .container-small,
.page-id-33 .container-small {
  max-width:980px;
}


/* Responsive */
@media screen and (max-width: 960px) {
  .uro-logo {max-width: 300px;}
  .header-content-left-container h1 {font-size: 20px;}
  #to-top {right: 15px;}
  .footer-left {width: 80%;}
}

@media screen and (max-width: 750px) {
  .header-top-left {width: 80%;}
  .header-top-right {width: 20%; float: right;}
  .header-content {padding-bottom: 0; position: relative;}
  .header-content-left {width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99; background: rgba(255,255,255,0.6);}
  .header-content-right {width: 100%;}
  .header-content-right .image-info {display: none;}
  .scroll-down {margin-top: 50px;}
  .uro-logo, .header-content-left-container h1 {padding-left: 50px;}
  .header-left-content-divider {width: 180px;}
  section {margin-top: 80px;}
  .section-content-right-text {transform: translate(-10px, 30px);}
  .section-content-right-text.reveal {transform: translate(-40px, 30px);}
  .section-content-left-text {transform: translate(10px, 30px);}
  .section-content-left-text.reveal {transform: translate(40px, 30px);}
  #sec-praxis {margin-top: 30px;}
  #sec-praxis::before {height: 200px; top: -50px;}
  .footer-left {width: 100%;}
  #to-top {right: 35px;}
  .error-right {display: none;}
  .error-left {padding-right: 0; width: 100%;}
  .section-vorteil-inner p a {margin-right:0px;margin-bottom:10px;}
}

@media screen and (max-width: 600px) {
  .section-content-left-image, .section-content-right-image {width: 90%; float: none; margin: 0 auto; height: auto; overflow: hidden;}
  .section-content-right-image img, .section-content-left-image img {transform: translateY(-70px);}
  .section-content-right-text {width: 100%; transform: translate(30px, 0);}
  .section-content-right-text.reveal {transform: translate(0, -50px);}
  .section-content-left-text {width: 100%; transform: translate(-30px, 0);}
  .section-content-left-text.reveal {transform: translate(0, -90px);}
  section {margin-top: 30px;}
  #sec-vorteil {margin-top: 30px;}
  .section-vorteil-inner {transform: translateX(30px);}
  .footer-divider {display: none;}
  .footer-left-inner-left {width: 100%; margin-bottom: 20px; border-bottom: 2px solid #164193; padding-right: 0;}
  .footer-left-inner-right {width: 100%; padding-left: 0;}
  .section-content-right-image .image-info, .section-content-left-image .image-info {bottom: 80px;}
  #sec-leistungen img, #sec-praxis img {transform: none;}
  .section-vorteil-inner.reveal {transform: translate(0, -10px);}
  .header-info-box {margin-top: 20px;}
  .header-info-box hr {margin: 10px 0;}
  .header-info-box + .scroll-down {display: none;}
}

@media screen and (max-width: 500px) {
  .header-top-left a {font-size: 14px;}
  .header-top {padding: 20px 0;}
  .uro-logo {max-width: 220px;}
  .header-left-content-divider {height: 3px; width: 120px; margin-bottom: 20px;}
  .uro-logo, .header-content-left-container h1 {padding-left: 25px;}
  .header-content-left-container h1 {font-size: 18px;}
  .section-content-right-text, .section-content-left-text, .section-vorteil-inner, .footer-left, .rechtlich-inner {padding: 20px;}
  .error-outer {margin-top: 100px;}
  .header-info-box {padding-right: 25px;}
  .header-content-left-container {margin-top: 50px;}
}