:root {
  --blue: #3D5A6C;
  --grey: #9CAFB7;
  --wheat: #EAD2AC;
  --pink: #FE938C;
  --red: #EF6461;
}


* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Oxygen";
}

h1 {
	margin-bottom: 30px;
}

h2 {
	margin-bottom: 30px;
	font-size: 2.5rem;
	font-weight: 400;
}

h3 {
	margin-bottom: 20px;
	font-size: 2rem;
	font-weight: 400;
	color: #4a4a4a;
}

h4 {
	margin-bottom: 20px;
	font-size: 1.2rem;
	font-weight: 400;
	color: #4a4a4a;
}

.big {
	color: #d5ad70b0;
	font-size: 5.5rem;
	line-height: 6rem;
	font-weight: 300;
	font-family: "Oxygen";
}

h3 {
	
}

ul {
	margin-bottom: 50px;
}

p {
	margin-bottom: 20px;
	line-height: 1.7rem;
	font-size: 1rem;
	letter-spacing: 0.3px;
	font-weight: 300;
	color: #4a4a4a;
}

.nodesktop {display: none;}

p.subline {
	margin-bottom: 35px;
	line-height: 2.5rem;
	font-size: 1.5rem;
	letter-spacing: 0.5px;
	font-weight: 300;
	color: #4a4a4a;
}

	
p.subline.back {
	background: rgb(61 90 108 / 70%);
	color: #FFF !important;
	padding: 0 20px;
	border-radius: 3px;
	display: inline-block;
}

div.liste ul {
	
}

.wrapper div.liste li {
	margin-bottom: 30px;
	list-style: none;
	background: url(./_images/list-style-icon.svg) 15px 14px / 10px no-repeat;
}

div.liste li:nth-child(even) {
	border-radius: 4px;
	padding: 15px 0 10px 40px;
	background: rgba(255, 255, 255, 0.6) url(./_images/list-style-icon.svg) 15px 25px / 10px no-repeat;
}

div.liste li span {
	border-radius: 4px;
	background: var(--blue);
	padding: 0px 10px;
	display: inline-table;
	color: #FFF;
	font-size: 1rem;
	margin-bottom: 4px;
}

div.liste h3 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: normal;
	margin: 5px 0;
	color: var(--blue);
	width: 70%;
}

div.liste img {
	display: block;
	width: 250px;
	margin-bottom: 30px;
	float: right;
	margin-right: 20px;
	margin-top: 6px;
}

div.liste li p {
	color: var(--grey);
	font-weight: normal;
}

.flex {
	display: flex;
	justify-content: space-between;
}

.flex.gap div {
	width: 30%;
}

ul li {
	font-size: 1.15rem;
	line-height	: 1.7rem;
}

.imageright {
	width: 40%;
	border-radius: 4px;
	position: absolute;
	right: -15px;
	transform: rotate(3deg);
}

h3.hr {
	margin-top: 60px;
}

.hr::before {
	position: absolute;
	display: block;
	width: 40px;
	height: 4px;
	background: var(--grey);
	content: "";
	margin: -16px 0 0 0;
}

/* Body */

.topbar {
	background: var(--blue); text-align: right; 	padding: 7px 10vw 7px; letter-spacing: 1px; font-size: 0.75rem; color: #FFF;
}

.topbar a {
	color: #FFF;
}

.wrapper {
	margin: 0;
	padding-top: 90px;
}		

.wrapper .section {
	padding: 180px 10vw;
}

.wrapper .section.one {
	background: var(--grey);
	padding-top: 280px;
	position: relative;
}

.wrapper .section.two {
	background: rgba(234, 210, 172, 0.2) url(./_images/bg-sectionOne.svg) left top / 200px no-repeat;
}

.wrapper .section.three {
	background: rgba(234, 210, 172, 0.4) url(./_images/bg-sectionTwo.svg) left top / 300px no-repeat;
}
		
.wrapper .section.four {
	background: rgba(234, 210, 172, 0.6) url(./_images/bg-sectionFour.svg) left top / 300px no-repeat;
}		

.wrapper .section.banderole {
	background: rgba(0, 0, 0, 0.8);
}		


/* --- */

body.home  .section.one {
	background-color: var(--grey);
	background-size: 70%;
	background: url(./_images/ErichVyskocil-Startseite.webp) top right / 70% no-repeat;
	background-size: cover;
	position: relative;
	z-index: 0;
}

body.home  .section.one:before {
	content: "";
	background: linear-gradient(90deg, #d4dcdf 30%, rgba(119,146,187,0) 70%);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.textleft {
	padding-left: 0vw;
	position: relative;
	z-index: 3;
	width: 50%;
}

.textright {
	padding-left: 50%;
	position: relative;
	z-index: 3;
	width: 50%;
}

.textleft img, .textright img {
	width: 100%;
}

body .section.one h1, body .section.one p, body .section.one span {
	z-index: 2 !important;
	position: relative;
	color: #3D5A6C;
}

body  .section.one:before {
	position: relative;
	z-index: 0;
}

body .section.banderole.zitat {
	color: #D4AA6F;
	background: #FFF;
	text-align: center;
	padding-top: 110px;
	padding-bottom: 110px ;
}

/* Zitat*/

.banderole.zitat p {
	font-size: 1.5rem;
	font-style: italic;
	line-height: 2.4rem;
}

.banderole.zitat p.quotationTop {
	background: transparent url(_icons/quotationTop.svg) no-repeat;
	background-size: 50px;
	width: 50px;
	height: 50px;
	display: block;
	margin: 10px auto 20px;
}

.banderole.zitat p.quotationBottom {
	background: transparent url(_icons/quotationBottom.svg) no-repeat;
	background-size: 50px;
	width: 50px;
	height: 50px;
	display: block;
	margin: 20px auto 10px;
}

.banderole.zitat strong, .banderole.tv strong {
	color: #333;
	font-size: 1.1rem;
	font-style: normal;
}

/* Ãœber mich */

body.uebermich  .section.one {
	background-color: var(--grey);
	background-size: 70%;
	background: url(./_images/DSC02453-Bearbeitet_WEB.webp) top right / 100% no-repeat;
	background-size: cover;
}

body.uebermich  .section.one:before {
	content: "";
	background: linear-gradient(90deg, #d4dcdf 30%, rgba(119,146,187,0) 70%);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.aerzte  .section.one {
	background-color: var(--grey);
	background-size: 70%;
	background: url(./_images/fortbildungen.jpg) top right / 80% no-repeat;
	background-size: cover;
}


body.wahlarzt  .section.one {
	background-color: var(--grey);
	background-size: 70%;
	background: url(./_images/DSC02587-Bearbeitet_WEB.jpg) 0% 0% / 130% no-repeat;
}

body.wahlarzt  .section.one:before {
	content: "";
	background: linear-gradient(90deg, #d4dcdf 30%, rgba(119,146,187,0) 70%);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.erwachsene  .section.one {
	background-color: var(--grey);
	background-size: 70%;
	background: url(./_images/shutterstock_1177919173-operationen-erwachsene.webp) 30% 0 / 110% no-repeat;
	background-size: cover;
}

body.hno  .section.one {
	background-color: var(--grey);
	background-size: 70%;
	background: url(./_images/hno.jpg) top center / 70% no-repeat;
	background-size: cover;
}

body .section.one:before {
	content: "";
	background: linear-gradient(90deg, #d4dcdf 30%, rgba(119,146,187,0) 70%);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* Header */

header {text-align: left; background: transparent; height: 98px; position: fixed; z-index: 101; width: 100%; transition: all 0.2s;}
	header .logolink {margin: 0 auto 0; width: 120px; height: 50px; cursor: pointer; position: relative; z-index: 100;}
	header .logo {background: transparent url(_images/arkidwhite.svg) center center no-repeat; width: 85px; background-size: 75px; height: 50px; float: left;}
	header .logo:hover {opacity: 0.7; cursor: pointer;}

	header nav  {
		text-align: left;
		font-family: "Asap", serif;
		justify-content: stretch !important;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		background: rgb(61,90,108);
		background: linear-gradient(-90deg, rgba(61,90,108,1) 0%, rgba(156,175,183,1) 100%);
		height: 68px;
		padding: 0 10vw
	}
	
	header nav a:link, header nav a:visited, header nav span, header ul li  {
		color: #FFF;
		font-weight: normal;
		position: relative;
		text-transform: uppercase;
		font-size: 0.85rem;
		letter-spacing: 2px;
		padding: 25px 0px;
		line-height: 1.3rem;
		transition: background-color 0.5s ease;
		flex-grow: 1;
		text-align: center;
		width: 14vw;
	}
	
	header nav a:hover, header ul li:hover {
		background: var(--blue);
	}
	
	header nav a:first-child {
		box-shadow: none;
		border: none;
	}

header nav a:last-child {
	background: var(--pink);
}

header nav a:last-child:hover {
	background: #1F3A4D;
}
	
		header nav span {opacity: 0.5; font-size: 0.9rem;}
		header nav a.lang:link, header nav a.lang:visited {background: rgba(255, 255, 255, 1); color: #132042; padding: 3px 6px 3px 8px; border-radius: 3px; margin-top: -2px; font-size: 0.8rem;}
		header nav a.lang:hover {background: #250C52; color: #FFF;}
		header nav a.lang:after, header nav a.lang:after{border: none;}


header ul {
}

header ul li {
	list-style: none;
}

header ul li:hover .submenu {
	display: block;
	text-align: left;
}

.submenu {
	display: none;
	margin-top: 20px;
	margin-bottom: -25px;
}


.submenu a:link, .submenu a:visited {
	padding: 10px 15px;
	display: block;
	text-align: left;
	box-sizing: border-box;
	line-height: 1.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.submenu a:hover, header nav .submenu a:hover:last-child{
	background: #DDD;
	color:  #3D5A6C;
}
		
header nav .submenu a:last-child {
	background: transparent;
	border-radius: 0;
}		
		
		
a {
	text-decoration: none;
}
		
a.button:link, a.button:visited {
	display: inline-block;
	background: #d5ad70b0 url(./_images/erichArrow.svg) 10px 50% / 30px no-repeat;
	color: #FFF;
	border-radius: 2px;
	margin-top: 20px;
	font-size: 1.2rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 500;
	border: none;
	padding: 11px 25px 11px 50px;
	box-shadow: 0 10px 15px rgb(255 255 255 / 50%);
	margin-right: 15px;
	transition: background .5s;
}
		
a.button:hover {
	color: #FFF;
	background: #a67f44b0 url(./_images/erichArrow.svg) 10px 50% / 30px no-repeat;
}
	
	
.videowrapper {
	float: none;
	clear: both;
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}		

.wrapper ul li {
	background: url(./_images/list-style-icon.svg) 0 10px / 10px no-repeat;
	padding-left: 40px;
	list-style: none;
	line-height: 2.4rem;
	font-size: 1.3rem;
	color: var(--blue);
}	
		
/* Segments Left and Right */

.segment-second {
	width: 45%;
}

.segment-third {
	width: 30%;
}

.segment-second a:link, .segment-second a:visited, .segment-third a:link, .segment-third a:visited {
	border-radius: 2px;
	display: block;
	width: 100%;
	padding: 20% 20% 20% 10%;
	box-sizing: border-box;
	background: linear-gradient(-90deg, rgba(61,90,108,1) 0%, rgba(156,175,183,1) 100%);
	color: #FFF;
}

.segment-second	 a:hover, .segment-third a:hover {
	background: var(--pink);
}

.segment-second:first-child a, .segment-third:first-child a {
	background-image: linear-gradient(-90deg, rgba(61,90,108,1) 0%, rgba(156,175,183,0.3) 100%), url(./_images/opErwachsene.webp);
	background-size: 100%, 120%;
	background-position: 0 0, 130px 30px;
	background-repeat: no-repeat;
}

.segment-second:last-child a, .segment-third:nth-child(2) a {
	background-image: linear-gradient(-90deg, rgba(61,90,108,1) 0%, rgba(156,175,183,0.3) 100%), url(./_images/opKinder.webp);
	background-size: 100%;
	background-position: 0 0, 200px 0;
	background-repeat: no-repeat;
}

.segment-second h3	, .segment-third h3, .segment-second p	, .segment-third p {
	color: #FFF;
}
		
/* Gallery */

.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}		
	
		
		
/* FOOTER */

footer {
	background: var(--blue) url(./_images/bg-footer.svg) left top / 200px no-repeat;
	padding: 150px 10vw 100px;
	color: #FFF;
}		

footer .flex  div {
	width: 30%;
}

footer h3 {
	font-size: 1.6rem;
	font-weight: 300;
	font-family: "Oxygen";
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.5);
}

footer p {
	color: #FFF;
	line-height: 1.8rem;
	font-size: 1rem;
}

footer .copyright {
	width: 100%;
	text-align: center;
	margin-top: 100px;
}

footer .copyright p {
	font-size: 0.9rem;
}

footer .copyright a:link, footer .copyright a:visited {
	color: rgba(255, 255, 255, 0.6);
}

footer .copyright a:hover {
	color: rgba(255, 255, 255, 1);
}

#menuToggle {
	display: none;
}

	
	@media only screen and (min-width: 861px) and (max-width: 1300px) {
		
		body.home .section.one {	
			background: url(./_images/ErichVyskocil-Startseite.webp) top right / 150% no-repeat;
		}
	
	}
	
	@media only screen and (min-width: 1301px) and (max-width: 2600px) {
	
	body.wahlarzt  .section.one {
		background-color: var(--grey);
		background-size: 70%;
		background: url(./_images/DSC02587-Bearbeitet_WEB.jpg) top right / 75% no-repeat;
	}
	
	body.aerzte .section.one {
		background: url(./_images/fortbildungen.jpg) center right / 76% no-repeat;
	}
	
	}
	
	
	@media only screen and (max-width: 860px) {
		
	.nodesktop {display: unset;}	
		
	.wrapper {
		margin-top: -27px;
		padding-top: 0;
	}	
		
	.textleft {
		width: 100%;
	}	
		
	.textright {
		padding-left: 0;
		width: 100%;
	}	
		
	.flex {
		display: block;
	}	
		
	.big {
		font-size: 2.5rem;
		line-height: 3rem;
		word-wrap: break-word;
	}
	
	p.subline {
		font-size: 1.3rem;
		line-height: 2rem;
	}
	
	a.button:link, a.button:visited {
		background: #d5ad70b0 url(./_images/erichArrow.svg) 97% 50% / 30px no-repeat;
		padding: 9px 40px 9px 15px;
	}
	
	footer .flex  div {
		width: 100%;
		margin-bottom: 60px;
	}
	
	.wrapper .section {
		padding: 150px 10vw;
	}
	
	body .section.one:before {
		background: linear-gradient(65deg, #d4dcdf 10%, rgba(119,146,187,0) 60%);
	}
	
	body.home .section.one {
		background: url(./_images/ErichVyskocil-Startseite.webp) 50% 0% / 180% no-repeat;
		background-size: cover;
	}
	
	body.uebermich .section.one {
	background: url(./_images/DSC02453-Bearbeitet_WEB.webp) 60% 0%  / 235% no-repeat;
	background-size: cover;
	}
	
	body.aerzte  .section.one {
		background: url(./_images/fortbildungen.jpg) top center / 200% no-repeat;
		background-size: cover;
	}
	
	body.hno .section.one {
		background: url(./_images/hno.jpg) top center / 160% no-repeat;
		background-size: cover;
	}
	
	body.wahlarzt .section.one {
		background: url(./_images/DSC02587-Bearbeitet_WEB.jpg) top left / 190% no-repeat;
		background-size: cover;
	}
	
	body.erwachsene  .section.one, body.erwachsene  .section.one, body.erwachsene  .section.one, body.erwachsene  .section.one {
		background: url(./_images/shutterstock_1177919173-operationen-erwachsene.webp) 60% 0% / 340% no-repeat;
		background-size: cover;
	}
	
	body .section.one:before {
		background: linear-gradient(35deg, #D4DCDF 0%, rgba(247 250 255 / 50%) 70%) !important;
	}

	
	nav.menu, header.fadeinTwo {
		display: none;
	}
	
	.segment-second, .segment-third {
		width: 100%;
		margin-bottom: 40px;
	}
	


	
	#menuToggle {
	  display: block;
	  position: relative;
	  top: 50px;
	  left: 50px;
	  z-index: 100;
	  -webkit-user-select: none;
	  user-select: none;
	}
	
	#menuToggle a {
	  text-decoration: none;
	  color: #FFF;
	  transition: color 0.3s ease;
	}
	
	#menuToggle a:hover {
	  color: tomato;
	}
	
	#menuToggle input {
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  cursor: pointer;
	  opacity: 0; /* hide this */
	  z-index: 101; /* and place it over the hamburger */
	  -webkit-touch-callout: none;
	}
	
	/*
	 * Just a quick hamburger
	 */
	#menuToggle span {
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;
	  background: #000;
	  border-radius: 3px;
	  z-index: 1;
	  transform-origin: 4px 0px;
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}
	
	#menuToggle span:first-child {
	  transform-origin: 0% 0%;
	}
	
	#menuToggle span:nth-last-child(2) {
	  transform-origin: 0% 100%;
	}
	
	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span {
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #232323;
	}
	
	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3) {
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2) {
	  transform: rotate(-45deg) translate(0, -1px);
	}
	
	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu {
	  position: absolute;
	  width: 100%;
	  margin: -100px 0 0 -70px;
	  padding: 50px;
	  z-index: 10;
	  background: #ededed;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */
	  transform-origin: 0% 0%;
	  transform: translate(-100%, 0);
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	  background: linear-gradient(-90deg, rgba(61,90,108,1) 0%, rgba(156,175,183,1) 100%);
	}
	
	#menu li {
	  padding: 5px 0;
	  font-size: 1.1rem;
	}
	
	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul {
	  transform: none;
	}
	
	.sub {
		list-style: none;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.sub i {
		background: var(--blue);
		color: #FFF;
		font-size: 0.8rem;
		display: table;
		border-radius: 4px;
		padding: 0 10px;
		font-style: initial;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	
	.sub_2 {
		font-size: 1rem;
		margin-bottom: 20px;
	}
	
	.sub a {
		display: block;
		margin-top: 8px;
	}
	
	.sub_2 a {
		padding-left: 27px;
		background: transparent url(./_images/erichArrow.svg) 0 9px / 24px no-repeat;
		font-size: 1rem;
	}
	
	
	h1, h2, h3 {
		word-break: break-word;
	}
	
	.imageright {
		width: 100%;
		margin: 0 auto;
		position: relative;
		right: none;
		margin: 20px 0 40px;
	}
	
	div.liste h3 {
		width: 100%;
	}
	
	div.liste img {
		float: none;
		margin-top: 25px;
	}
	
	.segment-second:first-child a, .segment-third:first-child a {
		background-size: 100%, 140%;
	}
	
	.segment-second:last-child a, .segment-third:nth-child(2) a {
		background-size: 100%, 130%;
	}
	
	body .section.banderole.zitat.logos img {
		width: 60%;
		margin-bottom: 40px;
	}
	
}
	
	
	@media only screen and (min-width: 1600px) {
		
		.wrapper .section {
			padding: 180px 15vw;
		}
		
		
	}