/*
CONTENTS:
1:  Basics
2:  Text
3:  Overlay
4:  Layout/Design
5:  Header
6:  Main
7:  Forms
8:  Tables
9:  Interactive
10: Other
11: Footer
*/
/*////////////////////////////////////////////////// BASICS /////////////////////////////////////////////////*/
:root {
	--heading: #087dba;
	--text: #484641;
	--primary: #edac21;
	--secondary: #087dba;
	--tertiary: #edac21;
	--shade01: #3D3930;
	--shade02: #E4E4E4;
	--shade03: #eedfe5;
	--font-family: 'Roboto', Helvetica, Arial, sans-serif 
}

html { 
	box-sizing: border-box; 
	scroll-behavior: smooth;
}

*, *:before, *:after { 
	box-sizing: inherit;
}

body  {   
	margin: 0px;
	padding-top: 110px;
	overflow-x: hidden; 
	color: var(--text); 
	font-size: 18px; 
	line-height: 1.2;
	font-weight: 400; 
	font-family: var(--font-family); 
	background-color: #fff;
}

section,
section.content {
	position: relative;
	margin: 80px auto;
}

section.primary {
	padding: 100px 0;
	background-color: var(--primary);
}

section.secondary {
	padding: 100px 0;
	background-color: var(--secondary);
}

section.tertiary {
	padding: 100px 0;
	background-color: var(--tertiary);
}

section.shade-01 {
	padding: 100px 0;
	background-color: var(--shade01);
}

section.shade-02 {
	padding: 100px 0;
	background-color: var(--shade02);
}

section.shade-03 {
	padding: 100px 0;
	background-color: var(--shade03);
}

section.shade-01 .content * {
	color: #fff;
}	

.content	{ 
	max-width: 1240px; 
	margin: auto; 
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	transition: 0.4s ease-in-out; 
}

.flex { 
	display: flex; 
	flex-wrap: wrap;
}

.showDesktop { 
	display: block 
}

.showMobile { 
	display: none 
}

/* SCROLLING ANIMATIONS -------------------------------------------------------*/
.fadeUp {
	opacity: 0;
	translate: 0 30%;
	transition: all ease-in-out 0.4s;
}

.fadeDown {
	opacity: 0;
	translate: 0 -30%;
	transition: all ease-in-out 0.4s;
}

.fadeLeft {
	opacity: 0;
	translate: 30% 0;
	transition: all ease-in-out 0.4s;
}

.fadeRight {
	opacity: 0;
	translate: -30% 0;
	transition: all ease-in-out 0.4s;
}

.fadeUp.active,
.fadeDown.active,
.fadeLeft.active,
.fadeRight.active {
	opacity: 1;
	translate: 0;
	transition: all ease-in-out 0.4s;
}

/* ANIMATIONS -----------------------------------------------------------------*/
@keyframes hover-backdrop {
	0%		 		{ top: 100%; height: 0%; }
	99.9999%	{ top: 0; height: 100%; }
	100%			{ top: 0; height: 0%;}
}

/*/////////////////////////////////////////////////// TEXT //////////////////////////////////////////////////*/
/* FONTS ----------------------------------------------------------------------*/
@font-face {
  font-family:	'Roboto';
  src:					url('../fonts/Roboto-Regular.woff2') format('woff2'),
								url('../fonts/Roboto-Regular.woff') format('woff'),
								local("?");
  font-weight:	500;
  font-style:		normal;
  font-display: swap;
}

@font-face {
  font-family:	'Roboto';
  src:					url('../fonts/Roboto-Medium.woff2') format('woff2'),
								url('../fonts/Roboto-Medium.woff') format('woff'),
								local("?");
  font-weight:	600;
  font-style:		normal;
  font-display: swap;
}

@font-face {
  font-family:	'Roboto';
  src:					url('../fonts/Roboto-Bold.woff2') format('woff2'),
								url('../fonts/Roboto-Bold.woff') format('woff'),
								local("?");
  font-weight:	700;
  font-style:		normal;
  font-display: swap;
}

/* TEXT -----------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	margin: 0.5rem 0;
  color: var(--heading);	
}

h1 {
  font-size: 4.2rem;
  font-weight: 700;
}

h2 { 
	font-size: 3.4rem;
	font-weight: 700; 
}

h3 {
	font-size: 2.6rem; 
	font-weight: 700; 
}

h4 {
	font-size: 2em; 
	font-weight: 600;
}

h5 { 
	font-size: 1.6em; 
	font-weight: 600;	
}

h6 { 
	font-size: 1.2rem; 
	font-weight: 600;	
}

ul { 	
	margin: 10px 0px 10px 10px; 	
	padding: 0px 0px 0px 10px; 
	list-style-type: square; 
}

ul.labels {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	padding: 5px;
	list-style: none;
	font-size: 0.8rem;	
}

ul.labels li {
	margin: 2px 5px;
	border: 1px solid #b5b5b5;
	border-radius: 50px;
	padding: 2px 12px;
	background: #fff;
}

ol { 
	margin: 10px 0px 10px 10px;	
	padding: 0px 0px 0px 10px;  
}

ol li {
	margin: 5px 0;
}

b, strong { 
	font-weight: 700; 
}

a {  
	text-decoration: none;
	color: var(--primary);
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
	transition: all ease-in-out 0.3s;
}

a:hover {  
	color: var(--secondary);
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
	transition: all ease-in-out 0.3s;
}

p {
	font-size: 1em;
	line-height: 1.4em;
}

hr {
  border: none;
	border-top: 1px solid #d1dfdf;
}

/* BUTTONS --------------------------------------------------------------------*/
.btn {
	display: block;
  width: fit-content;
  border: 1px solid var(--secondary);
  border-radius: 5px;  
  padding: 6px 30px 6px calc(30px + .2rem);
  cursor: pointer;
  color: #fff; 
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  text-align: center;
 	text-decoration: none;
  background: var(--heading);
  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
}

.btn:hover {
	border-color: var(--shade01);
	color: var(--shade01);
	text-decoration: none;
	background: transparent;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
}

.btn.invert {
  background: #fff;
  border-color: #fff;
  color: var(--text) !important;
}

.btn.invert:hover {
	border-color: var(--primary);
  color: #fff !important;
	background: var(--primary);  
}

/* IMAGES ---------------------------------------------------------------------*/
img {
	max-width: 100%;
}

figure, img {
	margin: 0;
}

figure {
	border-radius: 20px;
	position: relative;
	overflow: hidden;	
}

figure img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
  height: auto;
  margin: auto;
  border-radius: 20px;
	object-fit: cover;
}

figure.ratio-slim {
	width: 100%;
	padding-bottom: 50%;
}

figure.ratio-square {
	width: 100%;
	padding-bottom: 100%;
}

figure.ratio-tall {
	width: 100%;
	padding-bottom: 150%;
}

.has-caption {
	position: relative;
}

.has-caption figcaption {
	margin-bottom: 24px;
  margin-left: 24px;
  position: absolute;
  inset: auto auto 0% 0%;
}

.has-caption figcaption > * {
	color: #fff !important;
	text-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.has-caption img {
	position: initial;
	border-radius: 20px;
}

figure ul.labels {
	position: absolute;
	bottom: 5px;
	width: 100%;
}

/*///////////////////////////////////////////////// OVERLAY /////////////////////////////////////////////////*/
/* PRELOADER ------------------------------------------------------------------*/
div.preloader { 
	position: fixed; 
	z-index: 6000; 
	left: 0%; 
	top: 0%; 
	width: 100%; 
	height: 100%; 
	background: #ffffff 
}

div.preloader:before { 
	display: block; 
	position: absolute; 
	left: 50%; top: 50%; 
	width: 200px; 
	height: 200px; 
	background: url(../images/layout/preloader.svg) no-repeat center; 
	background-size: 80%; content: ''; 
	-webkit-transform: translate(-50%,-50%); 
	-moz-transform: translate(-50%,-50%); 
	transform: translate(-50%,-50%) 
}

/* TOOLBAR --------------------------------------------------------------------*/
 	.toolbar {
 		display: flex;
	 	position: fixed;
	 	top: auto;
	 	bottom: 40px;
	 	left: auto;
	 	right: 40px;
	 	z-index: 1000;
 	}

	a.show_cookiemanager, div.show_assistent, a.scrolltop, a.scrolldown {
		position: relative;
		top: auto;
	 	bottom: auto;
	 	left: auto;
	 	right: auto;
	}
	
/* COOKIE MANAGER -------------------------------------------------------------*/
a.show_cookiemanager {
	width: 45px; 
	height: 45px; 
	margin-right: 60px;
	border-radius: 50px;
	background: var(--shade02); 
	opacity: 1;
	
	& * {
		-moz-transition: all ease-in-out 0.3s;
		-webkit-transition: all ease-in-out 0.3s;
		transition: all ease-in-out 0.3s;
	}
}

a.show_cookiemanager:hover,
a.show_cookiemanager:focus { 
	background: var(--primary);
	opacity: 1;
}

a.show_cookiemanager svg path { 
	fill: none; 
	stroke: #676767; 
	stroke-width: 0.8; 
}

a.show_cookiemanager:hover svg path,
a.show_cookiemanager:focus svg path {
	stroke: #fff; 
}

/* SHOW ASSISTENT -------------------------------------------------------------*/
div.show_assistent {
	display: block;
  width: 45px;
  height: 45px;
  margin-right: 60px;
  border-radius: 50px;
  background: var(--shade02);
  opacity: 1;
  
  & * {
		-moz-transition: all ease-in-out 0.3s;
		-webkit-transition: all ease-in-out 0.3s;
		transition: all ease-in-out 0.3s;
	}
}

div.show_assistent svg {
	margin: 4px 2px;
	width: 90%;
	
 	& path, & polygon { 
	fill: #676767; 
	}
}

div.show_assistent:hover,
div.show_assistent:focus {
  background-color: var(--primary); 
  
  & svg path, & svg polygon {
		fill: #fff;
	}
}

/* SCROLL TOP/DOWN ------------------------------------------------------------*/
a.scrolltop,
a.scrolldown { 
	display: block;
	position: absolute;
	right: 0;
	width: 45px; 
	height: 45px;
	border-radius: 50px;
	background-color: var(--shade02); 
	opacity: 1;
	z-index: 100;
}

a.scrolltop svg,
a.scrolldown svg {
	display: block;
	width: 66.666%;
	margin: 8px;
	
	& path, & polygon {
		fill: #676767;
	}
}

a.scrolltop:hover,
a.scrolldown:hover {
  background-color: var(--primary); 
  
  & svg path, & svg polygon {
		fill: #fff;
	}
}

/* MODALS ---------------------------------------------------------------------*/
.simple-modal {
	display: none;
	max-width: 1240px;
	font-family: var(--font-family);
}

/*////////////////////////////////////////////// LAYOUT/DESIGN //////////////////////////////////////////////*/
/* COLUMNS --------------------------------------------------------------------*/
/*
 m = column behält Größe auch Mobil bei
 d = column behält Größe nur für Desktop und wechselt mobil zu 100% 
 Die Nummerierung sind Brüche ohne Bruchstrich, z. B.: .col1/4 = .col14 = 25%
*/
.cols {
	display: flex;
	flex-wrap: wrap;
	margin: 20px -20px;
}

.cols .col {
	margin: 0;
	padding: 20px;
	align-content: baseline;
}

.cols .col.left {
	left: 0;
	margin-left: 20px;
	margin-right: auto;
	text-align: left;	
}

.cols .col.center {
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;	
}

.cols .col.right {
	right: 0;
	margin-left: auto;
	margin-right: 20px;
	text-align: right;
}

.cols .col.m1, .cols .col.d1, .cols .col.m22, .cols .col.d22,
.cols .col.m33, .cols .col.d33, .cols .col.m44, .cols .col.d44,
.cols .col.m55, .cols .col.d55, .cols .col.m66, .cols .col.d66 {
	width: 100%;
}

.cols .col.m110, .cols .col.d110 {
	width: 10%;
}

.cols .col.m210, .cols .col.d210, .cols .col.m15, .cols .col.d15 {
	width: 20%;
}

.cols .col.m310, .cols .col.d310 {
	width: 30%;
}

.cols .col.m410, .cols .col.d410, .cols .col.m25, .cols .col.d25 {
	width: 40%;
}

.cols .col.m12, .cols .col.d12, .cols .col.m24, .cols .col.d24,
.cols .col.m36, .cols .col.d36, .cols .col.m510 .cols .col.d510 {
	width:  50%;
}

.cols .col.m610, .cols .col.d610, .cols .col.m35, .cols .col.d35 {
	width:  60%;
}

.cols .col.m710, .cols .col.d710 {
	width:  70%;
}

.cols .col.m810, .cols .col.d810, .cols .col.m45, .cols .col.d45 {
	width:  80%;
}

.cols .col.m910, .cols .col.d910 {
	width:  90%;
}

/* viertel */
.cols .col.m14, .cols .col.d14 {
	width:  25%;
}
.cols .col.m34, .cols .col.d34 {
	width:  75%;
}

/* sechstel/drittel */
.cols .col.m16, .cols .col.d16 {
	width:  16.666%;
}

.cols .col.m26, .cols .col.d26, .cols .col.m13, .cols .col.d13 {
	width:  33.333%;
}

.cols .col.m46, .cols .col.d46, .cols .col.m23, .cols .col.d23 {
	width:  66.666%;
}

.cols .col.m56, .cols .col.d56 {
	width:  83.333%;
}

.cols .col img, .cols .col video, .cols .col svg {
	max-width: 100%;
}

/* ORIENTATION ----------------------------------------------------------------*/
.left {
	left: 0;
	margin-left: 0;
	margin-right: auto;
	text-align: left;	
}

.center {
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;	
}

.right {
	right: 0;
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}

/*////////////////////////////////////////////////// header /////////////////////////////////////////////////*/
header {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

/* flipSwitch ---------------------------------------------------------------------*/
div.switch { 
	display: none; 
	position: fixed; 
	z-index: 5000; 
	top: 0;
	right: 0; 
	width: 70px; 
	height: 70px; 
	cursor: pointer; 
	background: var(--primary);
	opacity: 0.4;
	-webkit-transition: 0.3s ease-in-out; 
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out 
}

div.switch span  { 
	display: block; 
	position: absolute; 
	left: 19px; 
	width: 30px; 	
	height: 2px; 
	background: #ffffff; 
	-webkit-transition: 0.3s ease-in-out; 
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out 
}

div.switch span:nth-child(1) { 
	top: 24px; 
}

div.switch span:nth-child(2),
div.switch span:nth-child(3) { 
	top: 34px; 

}

div.switch span:nth-child(4) { 
	top: 44px; 
}

div.switch.active { 
	opacity: 1;
}

div.switch.active span:nth-child(1),
div.switch.active span:nth-child(4) { 
	top: 34px; 
	width: 0%; 
	left: 50% 
}

div.switch.active span:nth-child(2) { 
	width: 30px;
	 -webkit-transform: rotate(45deg); 
	 -moz-transform: rotate(45deg); 
	 transform: rotate(45deg) 
}

div.switch.active span:nth-child(3) { 
	width: 30px; 
	-webkit-transform: rotate(-45deg); 
	-moz-transform: rotate(-45deg); 
	transform: rotate(-45deg)
}

/* NAVIGATION -----------------------------------------------------------------*/
nav, nav > *, nav > * > * {
	transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;	
}

nav { 
	display: flex;
	flex-wrap: wrap;
	position: fixed;
	top: 0;
	left: 0; 
	width: 100%; 
	height: 110px;
	margin: 0;
	border-bottom: 1px solid #efefef;
	padding: 0 calc(50% - 620px);
	background: #ffffff;
	z-index: 1000;
}

nav:before {
	content: '';
	position: absolute;
	top: 0;
	left: 61.8%;	
	width: 50%;
	height: 100%;
	background: url('../images/layout/logo_medivitalis.svg') no-repeat;
	background-size: 120%;
	opacity: 0.1;
}

nav .logo { 
	display: block;
	align-content: center;
}

nav .logo:hover {
	opacity: 0.3;
}

nav .logo img{ 
	width: 240px;
	height: auto; 
}

nav ul { 
	display: flex;
	margin: 0 0 0 auto;
	list-style-type: none; 
}

nav ul li { 
	display: block; 
	position: relative;
	height: fit-content;
	margin: auto 20px; 
}

nav ul li a { 
	display: block;
	padding: 10px 0;
	font-size: 0.8em;
	color: var(--text);
	line-height: 18px; 
	text-transform: uppercase;
}

nav ul li a:hover,
nav ul li a:focus {
	color: #fff;
}

nav ul li a::after {
  content: '';
  position: absolute;
  top: 0%;
  left: -10%;
  right: 0;
  width: 120%;
  height: 0;
	margin: auto;  
  background-color: #edac21;
  z-index: -1;
	transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
}

nav ul li a:hover::after, 
nav ul li a:focus::after {
	top: 0%;
	height: 100%;
	transition: all ease-in-out 0.2s;
	-moz-transition: all ease-in-out 0.2s;
	-webkit-transition: all ease-in-out 0.2s;
	animation: hover-backdrop linear 0.2s;
	-moz-animation: hover-backdrop linear 0.2s;
	-webkit-animation: hover-backdrop linear 0.2s;
} 

nav.flat {
	height: 50px;
}

nav.flat .logo img {
	width: 170px;
	margin-top: 7px;
}

/*/////////////////////////////////////////////////// MAIN //////////////////////////////////////////////////*/
/* TEASER ---------------------------------------------------------------------*/
.teaser {
	margin-top: 35px;
	text-align: center;
}

.teaser ul {
	list-style: none;
}

.teaser ul li {
	padding: 5px 0;
	font-size: 1.2rem;
	line-height: 1.8rem;
}

/* CARDS ----------------------------------------------------------------------*/
.cards {/*
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 32px;  
  grid-column-gap: 32px;
  width: 90%;
  margin: auto;
  margin-bottom: 40px; */
}

.cards .card {
	/*
	display: block;
	width: 100%;
	margin: 10px 0;
	*/
	border-radius: 10px;
	padding: 0;
	align-content: center;
	background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.11);
}

.cards .card figure {
	width: 100%;
	height: 260px;
	margin: 0;
}

.cards .card figure img {
	object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  overflow: clip;
}

.cards .card div {
	display: block;
  align-content: center;
	width: 100%;
	padding: 25px;
}

.cards .card div p {
	margin-bottom: 0;
}

#usecases .bx-viewport {
	min-height: 720px !important;
  padding: 15px;
}

/*///////////////////////////////////////////////// ASSISTENT ///////////////////////////////////////////////*/
#assistent {
     display: none;
     position: fixed;
     z-index: 1000;
     right: 140px;
     bottom: 0px;
     width: 480px;
     max-height: 100%;
     overflow: auto;
     background: #fbeed2;
     scroll-behavior: smooth;
     -ms-overflow-style: none;
     scrollbar-width: none 
}
 #assistent #header {
     float: left;
     width: calc(100% - 80px);
     padding: 0px 70px 10px 0px;
     background: url(../../images/layout/assistent.svg) no-repeat right top;
     background-size: 60px;
     border-bottom: solid 2px #edac21;
     margin: 40px 40px 0px 40px;
     color: #edac21;
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
     text-align: right 
}
 #assistent #header span {
     display: block;
     font-size: 30px;
     line-height: 36px;
     text-transform: uppercase 
}
 #assistent #toggle_messages, #assistent #restart_assistant {
     display: none;
     position: relative;
     float: right;
     padding: 13px 20px 13px 20px;
     background: #edac21;
     border-radius: 5px;
     margin: 20px 40px -20px 0px;
     color: #fbeed2;
     line-height: 14px;
     cursor: pointer 
}
 #assistent #messages {
     float: left;
     width: 100%;
     padding: 20px 
}
 #assistent #messages .message {
     position: relative;
     float: left;
     width: calc(100% - 40px);
     padding: 10px;
     background: #ffffff;
     border-radius: 10px;
     margin: 20px 
}
 #assistent #messages .message:before {
     display: block;
     position: absolute;
     z-index: -1;
     right: 30px;
     bottom: -10px;
     width: 30px;
     height: 60px;
     background: #ffffff;
     -webkit-transform: rotate(-45deg) skewY(-30deg);
     -moz-transform: rotate(-45deg) skewY(-30deg);
     transform: rotate(-45deg) skewY(-30deg);
     content: '' 
}
 #assistent #messages .message label {
     display: block;
     position: relative;
     float: left;
     width: calc(100% - 20px);
     padding: 0px 0px 0px 40px;
     margin: 10px 
}
 #assistent #messages .message label input[type=radio] + b {
     display: block;
     position: absolute;
     left: 0px;
     top: -3px;
     width: 30px;
     height: 30px;
     background-color: #dfdfdf;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     border: solid 2px #dfdfdf;
     border-radius: 50% 
}
 #assistent #messages .message label input[type=radio]:checked + b {
     background-image: url(../../images/layout/radio.svg) 
}
 #assistent #messages .message label input[type=checkbox] + b {
     display: block;
     position: absolute;
     left: 0px;
     top: -3px;
     width: 30px;
     height: 30px;
     background-color: #dfdfdf;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     border: solid 2px #dfdfdf 
}
 #assistent #messages .message label input[type=checkbox]:checked + b {
     background-image: url(../../images/layout/checkbox.svg) 
}
 #assistent #messages .message select, #assistent #messages .message textarea, #assistent #messages .message input[type=date], #assistent #messages .message input[type=file], #assistent #messages .message input[type=text], #assistent #messages .message span.headline, #assistent #messages .message h4.headline {
     display: block;
     float: left;
     width: calc(100% - 20px);
     margin: 10px;
		 font-size: 1.4rem;     
}
 #assistent #messages .message h4.headline img {
     display: block;
     float: left;
     width: 100%;
     margin: 20px 0px 0px 0px 
}
 #assistent #messages .message b.cta {
     display: block;
     float: right;
     padding: 18px 40px 18px 40px;
     background: #edac21;
     border-radius: 25px;
     margin: 10px;
     color: #ffffff;
     line-height: 14px;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     -webkit-transition: 0.2s ease-in-out;
     -moz-transition: 0.2s ease-in-out;
     transition: 0.2s ease-in-out;
     cursor: pointer 
}
 #assistent #messages .message b.cta:hover {
     background: #087dba 
}
 #assistent #messages .message div.smartselect {
     float: left;
     width: calc(100% - 20px);
     margin: 10px 
}
 #assistent #messages .message div.smartselect .select2, #assistent #messages .message div.smartselect .select2 .selection, #assistent #messages .message div.smartselect .select2 .selection .select2-selection, #assistent #messages .message div.smartselect .select2 .selection .select2-selection .select2-selection__rendered {
     width: 100% !important 
}

/*/////////////////////////////////////////////////// FORMS /////////////////////////////////////////////////*/
form .texterror {
	background: #ff000030;
}

form .texterror p {
	margin: 25px;
	color: #ae1b1b;
}

form .cols {
	margin: 20px -10px;
}

form .cols .col {
	padding: 0 5px 5px 8px;
}

/* INPUTS ---------------------------------------------------------------------*/
input { 
  font-family: var(--font-family); 
	border-radius: 3px;
}

/* INPUTS TEXT ----------------------------------------------------------------*/
select, 
textarea, 
input { 
	width: 100%;
  border: solid 1px #d8d7d6;
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.2;
	font-weight: 400;
	background: #fbfbfb;
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	transition: 0.4s ease-in-out; 
	-webkit-appearance: none 
}

select:focus, 
textarea:focus, 
input:focus,
select:not([value=""]) {
	 border-color: var(--primary); 
	 outline: none; 
}

textarea.error,  
input.error, 
textarea.error ~ label, 
input.error ~ label {
	 border-color: #ff0000; 
	 color: #ff0000;
}
/* label */
select ~ label, 
textarea ~ label, 
input ~ label,
form label { 
	display: block; 
	padding: 8px 0;
	font-size: 1rem;
}

textarea { 
	overflow: auto; 
	width: 100%!important;
	min-height: 200px; 
	border-radius: 5px;
}

button,
input[type=submit] { 
	cursor: pointer;
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	transition: 0.4s ease-in-out; 
}

/* INPUTS CLICK ---------------------------------------------------------------*/
input[type=radio],
input[type=checkbox] { 
	display: none; 
}

input[type=radio] + label, 
input[type=checkbox] + label { 
	display: block;
	position: relative; 
	width: 100%; 
	margin: 0 0 25px 0;
	padding: 4px 0 0 40px;
}

input[type=radio] + label b, 
input[type=checkbox] + label b { 
	display: block; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 30px; 
	height: 30px; 
	border: solid 1px #d8d7d6; 
	border-radius: 8px;
	background-color: #ffffff; 
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: contain; 
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	transition: 0.4s ease-in-out; 
	-webkit-appearance: none 
}

input[type=radio].error + label b, 
input[type=checkbox].error + label b {
	 border-color: #ff0000 
}

input[type=radio]:checked + label b { 
	background-image: url(../../images/layout/radio.svg);
	border-color: #01041e 
}

input[type=checkbox]:checked + label b { 
	background-image: url(../../images/layout/checkbox.svg); 
	border-color: #01041e;
	border-radius: 50px;
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	transition: 0.4s ease-in-out; 
	-webkit-appearance: none 
}

/* ANAMNESE  ------------------------------------------------------------------*/
.anamnese {
	border-radius: 10px;
	background: #f1f1f0;
}

.anamnese input[type="submit"] {
	display: block;
	margin-left: auto;
}
/*////////////////////////////////////////////////// TABLES /////////////////////////////////////////////////*/
table tr th,
table tr td {
	padding: 5px;
}

table tr th {
	font-size: 1.5;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
}

table tr th b {
	font-weight: 600;
}

/*//////////////////////////////////////////////// INTERACTIVE //////////////////////////////////////////////*/
/* ACCORDION ------------------------------------------------------------------*/
.accordion .accTab	{ 
	width: 100%;
	border-bottom: 1px solid #d3d3d3; 
}

.accordion .accTitle	{ 
	display: block; 
	position: relative; 
	width: 100%;
	border: none;
	padding: 15px 45px 15px 10px;
	color: inherit;
	text-align: inherit;
  font-family: inherit;  
	font-size: 1.2rem;
	font-weight: 600;
	cursor: pointer;
	background: transparent;
	-moz-transition: 0.3s all ease-in-out; 
	-webkit-transition: 0.3s all ease-in-out; 
	transition: 0.3s all ease-in-out;
} 

.accordion .accTitle:hover,
.accordion .accTitle:focus	{
	color: var(--shade01);
	border-bottom: 1px solid var(--shade01);
	-moz-transition: 0.3s all ease-in-out; 
	-webkit-transition: 0.3s all ease-in-out; 
	transition: 0.3s all ease-in-out; 
}	

.accordion .accTitle:before,
.accordion .accTitle:after {
	content: ''; 
	display: block;  
	position: absolute; 
	top: 0;  
  bottom: 0;
  margin: auto;   
  background: var(--text);
}

.accordion .accTitle:before { 
  right: 15px;  
  width: 18px;  
  height: 2px; 
}

.accordion .accTitle:after {   
	right: 23px;  
	width: 2px;  
	height: 18px; 
	-webkit-animation: acc_icon_rotate1 0.4s forwards; 
	-moz-animation: acc_icon_rotate1 0.4s forwards; 
	animation: acc_icon_rotate1 0.4s forwards; 
}

.accordion .accTitle:hover:before,
.accordion .accTitle:focus:before,
.accordion .accTitle:hover:after,
.accordion .accTitle:focus:after,
.accordion .accTitle.active:before,
.accordion .accTitle.active:after {
	background: var(--shade01);
}	

.accordion .accTitle.active {
	border-bottom: 1px solid var(--shade01);
	color: var(--shade01);
}

.accordion .accTitle.active:after {
	-webkit-animation: acc_icon_rotate2 0.4s forwards; 
	-moz-animation: acc_icon_rotate2 0.4s forwards; 
	animation: acc_icon_rotate2 0.4s forwards; 
}

.accordion .accContent { 
	display: none; 
	width: 100%; 
	padding: 10px; 
}

@keyframes acc_icon_rotate1 {
  0% { right: 23px; transform: rotate(-90deg); }
  50% { right: 23px; transform: none; }
  100% { right: 23px; transform: none; }
}

@keyframes acc_icon_rotate2 {
  0% { right: 23px; transform: none; }
  50% { right: 23px; transform: none; }
  100% { right: 23px; transform: rotate(90deg); }
}

/* TABS ------------------------------------------------------------------------*/
.tabs ul {
	display: flex;
	width: 100%;
	margin: 0;
	border-radius: 18px;
	padding: 0;
	list-style: none;
}

.tabs ul li.tabSwitch {
	cursor: pointer;
	width: 100%;
	border-bottom: 1px solid transparent;
	padding: 30px 0;
	text-align: left;
	& h1, & h2, & h3, & h4, & h5, & h6 {
		margin: 0;
	}
}

.tabs ul li.tabSwitch:hover,
.tabs ul li.tabSwitch:focus,
.tabs ul li.tabSwitch.active {
	border-color: var(--shade01);
}

.tabs .tabContent {
	padding: 30px;
}

.tabs .tabContent div {
	padding: 10px 20px;
}

.tabs, .tabs ul, .tabs ul li.tabSwitch, .tabs ul li.tabSwitch.active {
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	transition: 0.4s ease-in-out; 
}

section.shade-01 .tabs ul li.tabSwitch:hover,
section.shade-01 .tabs ul li.tabSwitch:focus {
	border-color: #fff;
}

/* --- vertical --- */

.tabs.vertical {
	display: flex;
	width: 100%;
}

.tabs.vertical ul.tabs-switches {
	display: block;
	width: calc(50% - 20px);
}

.tabs.vertical div.tabs-content {
	width: calc(50% - 20px);
}

.tabs.vertical .tabContent {
	padding: 30px 0;
}

/* SLIDER/CAROUSELS -----------------------------------------------------------*/
.slider {
	position: relative;
}

.bx-prev,
.bx-next {
 display: block;
 position: absolute;
 top: calc(50% - 30px);
 width: 50px;
 height: 50px;
 background: #0000003d no-repeat center;
 background-size: 50%;
 border-radius: 50%;
 -webkit-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out;
}

.bx-prev {
 left: 20px;
 background-image: url(../../images/layout/left.svg);
}

.bx-next {
 right: 20px;
 background-image: url(../../images/layout/right.svg);
}

.bx-prev:hover, .bx-prev:focus,
.bx-next:hover, .bx-next:hover {
 background-color: var(--primary);
}

.bx-pager {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 position: absolute;
 z-index: 100;
 left: 0%;
 bottom: 0%;
 width: 100%;
 padding: 30px;
 margin: 0px;
 list-style-type: none 
}

.bx-pager .bx-pager-item {
 display: block;
 padding: 5px 
}

.slider .bx-pager .bx-pager-item a {
 display: block;
 width: 10px;
 height: 10px;
 background: #bce4fa;
 border-radius: 50%;
 margin: 5px;
 color: transparent;
 -webkit-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out 
}

.slider .bx-pager .bx-pager-item a:hover, .slider .bx-pager .bx-pager-item a.active {
 width: 20px;
 height: 20px;
 margin: 0px 
}


/* SLIDER TESTIMONIALS --------------------------------------------------------*/
.testimonials {
 position: relative;
 width: calc(100% - 80px);
 margin: 0 auto; 
}

.testimonials ul {
 width: 100%;
 padding: 0px;
 margin: 0px;
 list-style-type: none 
}

.testimonials ul li {
 display: block;
 position: relative;
 width: 100% 
}

.testimonials ul li blockquote {
	position: relative;
  max-width: 70%;	
	width: fit-content;
  margin: 35px auto 10px auto;
  border-radius: 10px;
  padding: 35px 45px;
  color: var(--text) !important;
  font-size: 1.5rem;
  background: #fff;
}

.testimonials ul li div {
	display: flex;
  position: absolute;	
	top: -15px;
  left: -20px;
  width: fit-content;	
	max-width: 60%;
  margin: auto;
  border-radius: 200px;
  padding: 5px 15px;
  font-size: 1.2rem;
  background: var(--primary);
}

.testimonials ul li div figure {
	width: 80px;
	height: 80px;
	margin-right: 15px;
	border-radius: 100%;
}

.testimonials ul li div figure img {
	width: 100%;
}

.testimonials ul li div b {
	align-content: center;
}

/* SHOW MORE ------------------------------------------------------------------*/
div.showMore {
	position: relative;
	width: 100%;
	padding-bottom: 72px;
}

div.showMore .shoMoButton {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: fit-content;
	margin: auto;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}

div.showMore .shoMoButton:hover {
	color: var(--primary);
	transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}

div.showMore .shoMoButton:after,
div.showMore .shoMoButton.active:after {
	content: '';
	display: block;
  width: 50px;
  height: 28px;
  margin: 0 auto;
	background-image: url(../images/icons/up.svg);
  background-size: cover;
  background-position: center;
  filter: contrast(0); 
	transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
}

div.showMore .shoMoButton:after {
	transform: rotate(180deg);
}

div.showMore .shoMoButton.active:after {
	transform: rotate(0deg);
}

div.shoMoContent { 
	display: none; 
	width: 100%; 
}

/*////////////////////////////////////////////////// OTHER //////////////////////////////////////////////////*/
/* Subpage back ----------------------------------------------------------------*/
a.back {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	width: fit-content;
}

a.back p {
	align-self: center;	
	margin: 0;	
}


/* Videos ---------------------------------------------------------------------*/

video {
	border-radius: 15px;
}

/* YouTube videos */
.video iframe {
	width: 100%;
	height: 720px;
	border: none;
	border-radius: 15px;
}

/*////////////////////////////////////////////////// FOOTER /////////////////////////////////////////////////*/
footer {
	position: relative;
	width: 100%;
	padding: 30px calc(50% - 620px) 120px calc(50% - 620px);
	background: #edac21;
	color: var(--text);
	font-size: 14px;
	overflow: hidden;	
}

footer:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 28%;
  width: 1240px;
	background: transparent url('../images/layout/logo_medivitalis_weiss.svg') no-repeat center top;
	background-size: cover;
	opacity: 0.12;
}

footer a, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
	color: var(--text);
}

footer .cols .col {
	align-content: baseline;
}

footer .cols .col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	column-count: 2;
  column-gap: 2rem;
  list-style-position: inside;
	line-height: 1.8;

}

footer a:hover {
	color: #fff;
}

footer a.logo img {
  display: block;
  max-width: 300px !important;
  margin-left: auto;
}

footer a.logo:hover {
	opacity: 0.4;
}

footer .copyright {
	display: flex;
	padding: 20px 0;
	color: #fff;
}

footer .copyright span {
	display: block;
	width: fit-content;
}

footer #wisl {
	margin-left: auto;
}