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

/* vollkorn-sc-regular - latin */
@font-face {
  font-family: 'Vollkorn SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/vollkorn-sc-v1-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Vollkorn SC Regular'), local('VollkornSC-Regular'),
       url('../fonts/vollkorn-sc-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/vollkorn-sc-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/vollkorn-sc-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/vollkorn-sc-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/vollkorn-sc-v1-latin-regular.svg#VollkornSC') format('svg'); /* Legacy iOS */
}

body {
	font-family: Helvetica, Roboto, Arial, sans-serif;
	background-color: #EBF5F3;
}

.no-js .title-bar {
	display: none;
	background-color:none;
}
	
.sheet {
	background-color: #FFF;
	padding-bottom: 1rem;	
}
	
#ms-header h1 {
	font-family: 'Vollkorn SC', serif;
	color: #339999;
	margin-top: 1.5rem;
	margin-bottom: 0;
	font-size: 4rem;
}

#ms-header p {
	font-family: 'Vollkorn', serif;
	font-size:2rem;
	color:#35acec;
}

h2, h3 {
	font-family: 'Vollkorn', serif;
	color:#339999;
}

strong {
	color:#339999;
}

h2 {
	font-size:1.8rem;
}

h3 {
	font-size:1.5rem;
}

img {
	margin-bottom:3rem;
}

.logo {
    background-image: url(../img/logo-ms-uns-kinderwunsch.png);
    background-size: contain;
	background-repeat: no-repeat;
	min-height:190px;
	background-position:1rem 0rem;	
    display: block;
}

.logo2 {
    background-image: url(../img/logos-st-josef-hospital.png);
    background-size: contain;	
	max-height:122px;
	background-repeat: no-repeat;
	background-position:1rem 0rem;
    display: block;
}

.callout {
	background-color: #EFF8F7;
}


ul.vmenu a:hover, ul.vmenu a.active:hover {
    color: #fff;
	background-color:#339999;
}

ul.vmenu, ul.vmenu ul {
    list-style: none;
	margin-left:0;
}

ul.vmenu > li > a {
    color: #587E93;
    padding: 0 1rem 0 1rem;
    min-height: 2rem;
    line-height: 2rem;
}

ul.vmenu > li > ul > li > a {
    color: #587E93;
    padding: 0 1rem 0 3rem;
    min-height: 2rem;
    line-height: 2rem;
}

ul.vmenu > li > ul > li > ul > li > a {
    color: #587E93;
    padding: 0 1rem 0 4rem;
    min-height: 2rem;
    line-height: 2rem;
}


ul.vmenu a {
	display:block;
}

ul.vmenu a.active {
	background-color: #DBF2F2;
}

ul.vmenu ul a.active {
	background-color: #F3F7F8;
	display: block;
}

ul.vmenu ul ul a.active {
	background-color: #F9FBFB;
	display: block;
}

ul.vmenu > li {
    border-bottom: dotted 2px #C9D7DE;
}

.fltrt {
	float:right;
	margin-left:1rem;
	margin-bottom:1rem;
}

.fltlt {
	float:left;
	margin-right:1rem;
	margin-bottom:1rem;
}

.accordion-title {
	background-color: #F9FBFB;	
    position: relative;
    display: block;
    padding: 1.25rem 1rem;
    border: 1px solid #CDE0EA;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 230, 230);
    border-bottom: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: #339999;
}

.accordion-title:hover, .accordion-title:focus {
	background-color: #339999;
	color: #fff;
}

a {
	color: #277878;
}

a:hover, a:focus {
	color: #339999;
}

@media only screen and (max-width: 39.99em) {
	#main-menu {
		position:fixed !important;
		top:40px !important;
		left:0 !important;
		width:100%;
		display:block;
		z-index:9;
	}
		
	.topnavigation {
		margin-top: 0 !important;
		width: 100%;
	}	
	
	.title-bar {
		background-color: #587E93;
	}

	.no-js .title-bar {
		display:block;	
	}
	
	.vmenu {
		background-color: #9FB8C6;
	}
	
	ul.vmenu > li > a {
		color: #fff;
		font-size:1.2rem;
	}	

	ul.vmenu a.active {
		background-color: #2F83B0;
	}	

	ul.vmenu a:hover, ul.vmenu a.active:hover {
		color: #fff;
		background-color:#52a4d1;
	}
	
	.no-padding-for-small {
		padding-left:0 !important;
		padding-right:0 !important;
	}
	
	ul#main-menu {
		margin-bottom:0;
	}
	
	img {
		margin-bottom:1rem;
		width:100%;
	}
	
	#logo {
		background-image: url(../img/logo-ms-uns-kinderwunsch.png);
		background-size: contain;
		background-repeat: no-repeat;
	
		background-position:1rem 0rem;	
		display: block;		
		position: fixed;
		top: 5px;
		right: 5px;
		width: 75px;
		height: 50px;
		z-index:99;
	}	
	
}

@media screen and (min-width: 40em) {
	
	body {
		background-image: url('../img/bg-bottom.jpg');
		background-repeat: repeat;
		background-attachment: scroll;
		background-position: top left;
		background-position-x: left;
		background-position-y: top;	
	}
	
	.page {
		position: relative;
		padding-top:0;
		background-image: url('../img/bg.jpg');
		background-repeat: repeat-x;
		background-position: top left;
		background-attachment: scroll;
		width: 100%;
		min-height: 100%;
	}
	
	.sheet {
		padding: 1rem;
		padding-bottom: 2rem;		
		background-image: url('../img/bg-header.jpg');	
		background-repeat: repeat-x;
		background-position: top left;
		background-attachment: scroll;	
		-moz-box-shadow:    5px 4px 4px #74838f;
		-webkit-box-shadow: 5px 4px 4px #74838f;
		box-shadow:         5px 4px 4px #74838f;	
	}
	
	#ms-header {
		min-height:170px;		
	}
	
	#ms-header h1 {
		margin-top: 0rem;
		margin-bottom: 0;
		font-size:2.8rem;		
	}
	
	#ms-header p {
	font-family: 'Vollkorn', serif;
	font-size: 1.6rem;
	color: #35acec;
	color: #83D6D6;
	}
		
	
	.callout {
	background-color: #EFF8F7;
	border-radius: 8px;
	margin: 0 0 1rem 0;
	}
		
	ul.vmenu, ul.vmenu ul {
		margin-right: 0.5rem;	
	}	
}

@media screen and (min-width: 64em) {
	.page {
		padding-top:2rem;
		margin-bottom:2rem;
	}
		
	.sheet {
		border-radius: 20px;
		padding: 3rem;
	}
	
	#ms-header h1 {
		margin-top: 1.5rem;
		margin-bottom: 0;
		font-size:4rem;		
	}
	
	#ms-header p {
		font-size:2rem;
	}
	
	ul.vmenu, ul.vmenu ul {
		margin-right: 1.875rem;	
	}		

}