*, *:before, *:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	/*
	height: 100%;
	*/
	min-height: 100%;
	background: #f5f7f9;
}

body {
	height: 100%;
	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background: #f5f7f9;
	background: -moz-linear-gradient(top,  #e3eaef 6%, #f6f8f9 35%, #e3eaef 63%, #f5f7f9 96%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#e3eaef), color-stop(35%,#f6f8f9), color-stop(63%,#e3eaef), color-stop(96%,#f5f7f9));
	background: -webkit-linear-gradient(top,  #e3eaef 6%,#f6f8f9 35%,#e3eaef 63%,#f5f7f9 96%);
	background: -o-linear-gradient(top,  #e3eaef 6%,#f6f8f9 35%,#e3eaef 63%,#f5f7f9 96%);
	background: -ms-linear-gradient(top,  #e3eaef 6%,#f6f8f9 35%,#e3eaef 63%,#f5f7f9 96%);
	background: linear-gradient(to bottom,  #e3eaef 6%,#f6f8f9 35%,#e3eaef 63%,#f5f7f9 96%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3eaef', endColorstr='#f5f7f9',GradientType=0 );

	font: 1em/1.6 'Open Sans', sans-serif;
}

#wrapper {
	background: url(../img/design/Hintergrundbild.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 80%;
	margin: 0 auto;
	min-width: 320px;	
}

/*	--------------------------------------------------------------------	*/
/*	Header incl. navigation	*/
/*	--------------------------------------------------------------------	*/
header			{margin-bottom: 50px;}
.wrapper			{width: 90%; margin: 0 auto; padding: 1em 0;}
.logo				{width: 75%; max-width: 40em;}
nav				{background: rgba(255,255,255,0.55); text-align: right; padding-right: 5%; font-size: 95%;}
nav ul			{list-style: none; padding: 0; margin: 0;}
nav a				{text-decoration: none; color: #6C6C6C; border-radius: 0.25em; display: block; padding: 0 0.2em;}
nav li			{display: inline-table; margin: 20px 0.5%;}
nav a:hover	{color: black; background: rgba(102,102,102,0.1);}

/* Highlighted menu item */
.home a.home,
.zahnpflege a.zahnpflege,
.fachkompetenzen a.fachkompetenzen,
.volumentomografie a.volumentomografie,
.praxis a.praxis,
.links a.links,
.kontakt a.kontakt	{color: #365FAC; font-weight: bold;}


/*	--------------------------------------------------------------------	*/
#content {background: white; width: 90%; margin: 0 auto; max-width: 70em; padding-bottom: 1em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}
.header-image {margin-bottom: 2em;}
aside {padding: 0; padding: 0 3%; margin-bottom: 0.5em;}
article {padding: 0; padding: 0 3%; margin-bottom: 10px;}

article.fullwidth {width: 100%;}

aside h1 {margin: 0; line-height: 1.2;}
article p {margin-top: 0;}
article h2 {font-size: 120%; margin-top: 2em;}
article h2:first-child {margin-top: 0;}

.claim-area {width: 90%; margin: 0 auto; max-width: 70em; text-align: right; margin-top: 1em;}
.claim  {width: 30%;}

.notfalldienst {font-weight: bold; margin-top: 4em;}


footer
{
	background: #58595B;
	color: rgba(255,255,255,0.5);
	padding: 0.5em 5%;
	margin-top: 3%;
	font-size: 80%;
	display: flex;
	justify-content: space-between;
}
footer a,
footer a:hover {color: white;}
.datenschutz .datenschutz {padding-left: 3rem;}
.datenschutz .datenschutz {display:none;}



#content ul {margin-top: 0; margin-left: 0;  padding-left: 1.3em;}
#content li {margin-bottom: 0.5em;}


h1 {font-weight: 300;}

img {width: 100%;}

a[href$='vCard.vcf'] {background: url(../img/vcard.png) center left no-repeat; margin-top: 1em; display: block; height: 24px; padding-left: 38px}

a:hover {color: #c00;}




.alert{/* background-color: #E30210; */ background-color: #cf3d21; color: white; margin-bottom: 3rem; padding-top: 1rem;}
.alert a {color: white;}
.alert a:visited {color: white;}


/* -------------------------------------------------------------------------	*/
/* Team */
/* -------------------------------------------------------------------------	*/
.team {margin: 0; padding: 0 !important; list-style: none;}
.team li {width: 19.5%; margin-bottom: 3em !important; display: inline-block; margin-right: 0.5%; line-height: 1.2; font-size: 65%;}
/*
.team li:nth-child(5) {margin-right: 0;}
*/
.team img {margin-bottom: 0.5em;}



/* SBB-Fahrplan */
.sbb-fahrplan {margin-bottom: 4em;}
.sbb-fahrplan img {width: auto;}


/* Mail protection */
.codedirection { unicode-bidi:bidi-override; direction: rtl; }

/* -------------------------------------------------------------------------	*/
/*	Form	*/
/*	-------------------------------------------------------------------------	*/
	textarea {resize: vertical;}
	input,
	textarea
	{
		display: block;
		width: 100%;
		border: 1px solid #ccc;
		margin: 1em 0;
		padding: 1em;
		color: #999;

		-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
				  box-sizing: border-box;

		-webkit-appearance: none;
			-moz-appearance: none;
				  appearance: none;

		-webkit-border-radius: 0;
			-moz-border-radius: 0;
				  border-radius: 0;
	}

	label {font-size: 0.75em; color: #999;}
	error {color: #c00;}

	input:focus,
	textarea:focus
	{
		border: 1px solid #ccc;
		color: #333;
		-webkit-outline: none;
			-moz-outline: none;
				  outline: none;
	}

	.js-float-label-wrapper label							{margin-left: 0.4em;}
	.js-float-label-wrapper.focused label,
	.js-float-label-wrapper.populated label			{color: #666;}	/* small label */
	.js-float-label-wrapper.focused.populated label	{color: #999;}


/* Submit Button */

input[type="submit"]{
	display: block;
	width: 100%;
	border: none;
	margin: 1em 0;
	padding: 1em;
	position: relative;
	background-color: #6d6;
	color: #fff;

	background-image: -webkit-radial-gradient( circle, transparent 0%, rgba(0,0,0,0.1) 100% );
	background-image:    -moz-radial-gradient( circle, transparent 0%, rgba(0,0,0,0.1) 100% );
	background-image:         radial-gradient( circle, transparent 0%, rgba(0,0,0,0.1) 100% );
	
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
}

input[type="submit"]:hover{
	background-color: #7e7;
}

input[type="submit"]:active{
	background-color: #5c5;
}


/* confirmation message */
.message	{border: 1px solid #666; padding: 15px 10px 15px 90px; margin-bottom: 1000px; min-height: 50px;}
.ok		{border-color: #7cba0f; color: #7cba0f; background: #eeffe7 url(../img/icons/ok.svg) 10px center no-repeat; background-size: 60px 60px;}
.error	{border-color: #cc0000; color: #cc0000; background: #ffdcdc url(../img/icons/error.svg) 10px center no-repeat; background-size: 60px 60px;}
.warning	{border-color: #ff9900; color: #ff9900; background: #ffedd2 url(../img/icons/warning.svg) 10px center no-repeat; background-size: 60px 60px;}
.comment	{border-color: #00d1ff; color: #00d1ff; background: #d4f7ff url(../img/icons/message.svg) 10px center no-repeat; background-size: 60px 60px;}




/*	-------------------------------------------------------------------------	*/


.cf:before,
.cf:after { content:""; display:table; }
.cf:after { clear:both; }


.no-svg .hide-ie-legacy {display: none;}
.svg		.show-ie-legacy {display: none;}



@media only screen and (min-width: 55em)
{
	aside {float: left; width: 40%; padding-bottom: 1em;}
	article {float: right; width: 60%;}
}


@media only screen and (max-width: 55em)
{
	#wrapper {width: 90%;}

	header {margin-bottom: 0;}
	.wrapper {padding: 0.6em 0 0.3em 0;}
	.logo {width: 100%;}
	object {display: inline;}

	nav				{text-align: center; padding-right: 0;}

	nav ul {border-top: 1px solid #ccc; }
	nav a {display: block; width: auto;}
	nav li {display: block; width: auto; border-bottom: 1px solid #ccc; line-height: 2em; margin: 0; }

	.team li {width: 32.8%;}

	.claim  {width: 50%;}

}


@media only screen and (max-width: 480px)
{
	#wrapper,
	#content {width: 100%; background-image: none; font-size: 120%;}
	#wrapper {background: #d0d0d0;}
	.claim {width: 100%; margin-bottom: 0.5em;}
	footer {margin-top: 0; font-size: 65%;}
	h1 {font-size: 140%;}
	.team li {width: 32.8%; font-size: 50%;}
}