/*
Theme Name: mauerle
Version: 1.0
Year: 2022
*/

/* table of contents

1. import fonts

2. global styles

3. typography

4. components

5.  layout

*/

/* =============
	import fonts
	============ */
	
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/roboto-v29-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/roboto-v29-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-v29-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./fonts/roboto-v29-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/roboto-v29-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/source-sans-pro-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/source-sans-pro-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/source-sans-pro-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/source-sans-pro-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./fonts/source-sans-pro-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/source-sans-pro-v18-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}


/* ==============
	global styles
	============= */

	
body,html{
	margin:0;
	padding:0;
	font-family:'Roboto',sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:1.5;
	hyphens:none;
	letter-spacing:0.25px;	
	color:#333;
	margin-left:auto;
	margin-right:auto;
	max-width:100vw;
	overflow-x:hidden;
}

.container {
	max-width:86%;
}

.primary {
	color:#27aab4!important;
	
}

.bg-primary {
	background:#27aab4!important; 	
	color:#fff!important;	
}

.bg-primary a, .bg-primary a:focus, .bg-primary a:hover {
	color:#fff!important;
	text-decoration:none;
}

.secondary {
	color:#1A6F75!important;
}

.bg-secondary {
	background:#1A6F75!important;
	color:#fff;
}

.btn.bg-secondary:hover  {	
	background:#27aab4!important;
	border-color:#27aab4!important;
	color:#fff;
}


/* ==========
	typgraphy
	========= */

	
h1 {
	text-transform:uppercase;	
	font-size:26px;
	letter-spacing:0.15px;
	color:#56698f;
	line-height:1.5;
	font-weight:600;
	margin-bottom:10px;
	color:#1A6F75;
}

h2 {
	font-size:20px;	
	font-weight:600;
}

h3 {
	color:#7688a1!important
}

p {
	font-family:'Roboto',sans-serif;
	font-size:17px;
	color:#000;
	line-height:1.5;
}
	
	
/* ===========
	components
	========== */

.ubermenu-skin-minimal
{
	font-size:16px;
	height:120px;		
}

.ubermenu-skin-minimal .ubermenu-nav {	
	height:100%;
	padding:15px 0;
}

.ubermenu .ubermenu-item.ubermenu-item-level-0 {
	height:100%;
	line-height:100%;
	margin:0 6px;
}

.ubermenu-skin-minimal .ubermenu-current-menu-item {	
	background:#1A6F75;
	border-bottom-left-radius:20px;
	border-top-right-radius:20px;	
}

.ubermenu-skin-minimal .ubermenu-item:hover {	
	background:rgba(230,233,236,0.5);
	border-bottom-left-radius:20px;
	border-top-right-radius:20px;	
}

.ubermenu-skin-minimal .ubermenu-item:hover a{	
	color:#333!important;	
}

.ubermenu-skin-minimal .ubermenu-current-menu-item {	
	background:#1A6F75;
	border-bottom-left-radius:20px;
	border-top-right-radius:20px;	
}

.ubermenu-skin-minimal .ubermenu-current-menu-item a{	
	color:#fff!important;	
}

.ubermenu-skin-minimal .ubermenu-item-level-0 > .ubermenu-target {
	height:100%;
	line-height:60px;
	vertical-align:middle;
	text-transform:uppercase;
}

nav {	
	padding:10px 0;
}

#logo {
	height:120px;
	padding:15px 0;
	margin:10px 0;
	width:auto;	
}

.hero {
	max-width:86%;
	height:72vh;
	margin:0 7%;
	background-position:50% 44%;
	background-repeat:no-repeat!important;
	background-size:cover!important;	
	z-index:3;
	border-bottom-left-radius:6vw;
	border-top-right-radius:6vw;
}

.hero-home {		
	background:url('/wp-content/uploads/2022/11/mauerle-hero-xl-v8.jpg');	
}

.hero-services {		
	background:url('/wp-content/uploads/2022/08/services-v2.jpg');		
}

.hero-praxis {
	background:url('/wp-content/uploads/2022/08/hno-deggendorf-praxis-2.jpg');		
	background-position:50% 56%!important;
}

.hero-team {
	background:url('/wp-content/uploads/2022/08/hno-deggendorf-team-2.jpg');		
}

.hero-maeuerle {
	background:url('/wp-content/uploads/2022/08/hno-deggendorf-dr-maeuerle.jpg');		
}

.hero-kontakt {
	background:url('/wp-content/uploads/2022/11/hno-deggendorf-kontakt-4.jpg');		
}

#hero .img-full {
	width:100%;	
	height:calc(100vh - 120px);
}

.btn-bordered {
	min-width:150px;
	border-top-left-radius:0px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:0px;
	border-top-right-radius:12px;
}

ul.list {	
	position:relative;
	list-style-type: none;
	padding-left:2rem;
	line-height:2;
	
}

.list li:before {
	font-family:"Font Awesome 6 Pro";
	font-weight:300;
	content:'\f324';	
	color:#27aab4;
	padding-right:1em;
	display: inline-block;
	position:absolute;
	left:0;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

a.phone {
	text-decoration:none;
}

#services {	
	padding:5vh 0 3vh 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;

}

.service-item {
	position:relative;
	width:300px;		
	overflow:hidden;
	margin-bottom:15px;
	border-radius:50%;
}

.service-img__overlay {	
	position:absolute;
    left: 0;    
    top: 0;
	opacity: 0;
	height:100%;
	width:100%;
    transition: opacity .25s;
    z-index: -1;	
}

.service-item:hover .service-img__overlay {
	background:#27aab4;
	opacity:.5;
	z-index:2;
}

.service-text {
	text-align:center;
	font-size:20px;
}

#hero-slider {	
	width:100%;	
	padding:0 7%;
}

.bx-wrapper {
	position:relative;
	padding:0;
	margin:0 auto;
	border:none!important;
	box-shadow:none!important;
	touch-action:pan-y;
	margin-bottom:20px!important;
}

.hero-slider-wrapper {
	width:100%;
}

.bx-viewport {
	border-bottom-left-radius:6vw;
	border-top-right-radius:6vw;	
}

/* ==========
	layout
	========= */

header {	
	height:140px;	
	width:100vw;		
    background-color: rgba(255,255,255,.92)!important;			
}


#page {
	position:relative;	
}

footer {
	margin:10px 0 45px 0;
	padding:60px 45px 45px 45px;
	background:#27aab4;
	border-bottom-left-radius:5vw;
	border-top-right-radius:5vw;
	color:#fff;
}

footer p, footer a {
	color:#fff;
	text-decoration:none;
}

footer h6 {
	font-weight:bold;
}

#content-wrapper a {
	color:#1A6F75!important;
	text-decoration:none;
	font-weight:bold;
}

#content-wrapper a:hover, #content-wrapper a:focus {
	color:#27aab4!important;
	text-decoration:none;
}

.section {
	padding:40px 0;	
}

.welcome .col-lg {
	max-width:50%;	
}

.welcome .col-lg:nth-child(1) {
	padding-right:25px;
}
.welcome .col-lg:nth-child(2) {
	padding-left:25px;
}

.welcome.reverse .col-lg:nth-child(1)  {
	order:2;
	padding-left:25px;
}

.welcome.reverse .col-lg:nth-child(2) {
	order:1;
	padding-right:25px;
}

.content-box {	
	border-bottom-left-radius:6vw;
	border-top-right-radius:6vw;
	margin-bottom:45px;
}

.content-box-alt {	
	border-top-left-radius:6vw;
	border-top-right-radius:6vw;
	border-bottom-right-radius:6vw;
	margin-bottom:45px;
}

.content-box-alt2 {	
	border-top-left-radius:6vw;
	border-bottom-left-radius:6vw;
	border-bottom-right-radius:6vw;	
}

.content-box-body {
	padding:10% 15%;
}

.bg-grey {
	background:rgba(230,233,236,0.5);
}

.content-box-image {
	border-top-right-radius:6vw;
	border-bottom-left-radius:6vw;	
}

.content-box-image img, .content-box-image iframe{
	width:100%;
	height:100%;
	object-fit:cover;			
	border-top-right-radius:6vw;
	border-bottom-left-radius:6vw;	
}

.img-box-theke {
	background:url('/wp-content/uploads/2022/08/theke-lg-v2.jpg');
	background-position:50% 50%;
	background-size:cover;	
	height:450px;
}

#content__main {	
	background:#fff;
}

.responsiveContainer {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#vendor, #js {
	display:none;
}

ul p {
	margin-bottom:0;
}

.day {
	display:inline-block;
	text-align:left;
	width:45px;
	line-height:1.75;
}
.time {
	display:inline-block;
	text-align:left;
	width:110px;
	line-height:1.75;
}

.responsiveContainer {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#vendor, #js {
	display:none;
}

.pt-50 {
	padding-top:50px;	
}

.bx-viewport {
	max-height:1000px;
}

/* ==============
	mobile styles
	============= */
@media(max-width:991px) {
	
	.bx-viewport {
	max-height:40vh;
}
	
	#hero-slider {		
	margin-top:150px;
	}
	body {
		max-width:100vw;
		overflow-x:hidden;
	}
	header {
		display:none;
	}
	p {
		font-size:15px;
	}
	
	.section {
		padding:0 0 20px 0;
	}
	
	.container {
	padding-left:15px;
	padding-right:15px;
	max-width:calc(100vw - 30px);
	text-align:left!important;
		
}
	.text-center {
		padding-left:0;
		padding-right:0;
	}
	ul.list {
		line-height:1.75;
	}
	
	footer {
		margin:0 0 15px 0;
		padding:20px;
	}
	#shiftnav-toggle-main .shiftnav-main-toggle-content {
		padding: 10px;
	}
	#shiftnav-toggle-main .shiftnav-toggle-burger, #shiftnav-toggle-main.shiftnav-toggle-main-entire-bar:before {
		padding:20px 20px;
	}
	
	#shiftnav-toggle-main.shiftnav-toggle-edge-right {
		height:60px;
	}

	#hero-slider {
		margin-top:15px;
		margin-bottom:45px;
		margin-left:auto;
		margin-right:auto;
		padding:0 15px;
	}
	
.hero-home, .hero-services, .hero-maeuerle, .hero-team, .hero-kontakt {		
	display:none;
}
		
h1,h2,.h3 {
	font-size:19px;
}
	h1 {
		margin-top:10px;}
h4 {
	font-size:16px;
	font-weight:bold;
}
	h5 {
		font-size:16px;
	}

.hero-section-mobile {
	padding:15px 0;
}
	#services {
		padding:25px 0;
	}
	.service-box {
		margin:15px 0;
	}
	.service-item {
		width:200px;
	}
	
#phone{
		position:fixed;
		bottom:0;
		left:0;
		height:56px;
		width:56px;
		background:#1A6F75;
		color:#fff;
		font-size:22px;
		padding:16px 10px;
		border-radius:0 56px 0 0;
		opacity:1
	}
	#phone i {
		transform: rotate(12deg);
	}
	.shiftnav.shiftnav-shiftnav-main {
		padding:45px 25px 15px 10px;
	}
	
	.shiftnav:after {
		box-shadow: 0 5px 0 10px rgb(0 0 0 / 40%);
	}
	.shiftnav-depth-0 > .shiftnav-target {		
		border-bottom:1px solid #eee;		
	}
	
	.shiftnav-depth-0.shiftnav-active > .shiftnav-target {
		border-bottom:none!important;
		color:#56698f!important;
	}
	
	.shiftnav-depth-0 ul.shiftnav-menu li.menu-item>.shiftnav-target, .shiftnav-depth-0 ul.shiftnav-menu li.shiftnav-retract>.shiftnav-target {
		font-size:16px;
	}
	.shiftnav ul.shiftnav-menu li.menu-item.shiftnav-active>ul.sub-menu {
		margin:0 20px;
		background:#dedede;		
		color:#333;
		margin-bottom:15px;
	}
	.sub-menu .shiftnav-target {
		font-size:14px!important;	
		color:#333;
	}
	.shiftnav ul.shiftnav-menu li.menu-item>.shiftnav-target, .shiftnav ul.shiftnav-menu li.shiftnav-retract>.shiftnav-target {
		padding:8px 12px;
	}
	.col-lg:nth-child(1) {
		order:2!important;
		padding:0!important;
		max-width:100%!important;
		margin-bottom:0;
		padding:0!important;
	}	
	.col-lg:nth-child(2) {
		order: 1!important;
		padding:0!important;
		max-width:100%!important;
		margin-bottom:20px;
	}	
	.col-lg:nth-child(1).not-reorder {
		order:1!important;	
		margin-bottom:20px!important;
	}
	.col-lg:nth-child(2).not-reorder {
		order:2!important;	
		margin-bottom:20px!important;
	}
	
	.content-box-body {
	padding:8vw 6vw;
}
	.mt-5 {
		margin-top:5px!important;
	}
	.content-box-alt {
		margin-bottom:20px;
	}
	#services {
		padding:0;
	}
	.service-item {
		width:32vw;
		max-width:300px;
		margin:0 4vw;
	}
	.service-text {
		font-size:16px;
	}	
		.shiftnav .btn.btn-bordered {			
			padding:12px 24px;
	}
.shiftnav.shiftnav-skin-light ul.shiftnav-menu li.menu-item > .shiftnav-target {
	background:#fff;
	padding:15px;
	text-transform:uppercase;
}
	.shiftnav.shiftnav-skin-light ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target, .shiftnav.shiftnav-skin-light ul.shiftnav-menu li.menu-item ul.sub-menu .current-menu-item > .shiftnav-target {
		background:rgba(230,233,236,0.5);
		color:#333;
	}

	
	
}
@media (max-width:369px) {
	.hero-section-mobile {
	padding:8px 0;
}
	#hero-sm .hero-icon {
	font-size:30px;
	max-width:30px;
	padding-left:5x;
}
	#hero-sprechzeiten {
	font-size:10px;	
	padding-right:5px
}
}

@media (min-width:577px) {
	#phone {
		display:none;
	}
}

@media (min-width:992px) AND (max-width:1199px) {
	.ubermenu-skin-minimal {
		font-size:15px;
	}
	.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
		padding:15px 10px;
	}
}

@media (min-width:992px) {
	.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target {
		padding-top:12px;
		padding-bottom:12px;
		font-size:16px;
	}
}

@media (min-width:992px) AND (max-width:1600px) {
	
	.welcome .col-lg:nth-child(1) {	
	padding-right:20px;
}

.welcome .col-lg:nth-child(2) {	
	padding-left:20px;
}
	
}