/*!
Theme Name: Kahlenberg
Theme URI: https://www.schoenstattzentrum-wien.at/
Author: Harald Zettler
Author URI: http://www.zettler.at/
Description: Schönstadt Zentrum Wien Kahlenberg
Version: 1.0.0
Text Domain: kahlenberg

*/


/* =Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}

table {
	border-spacing: 0;
}
a img {
	border: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: #820024;
}
a:hover {
	color: #365c7e;
}

/* =Fonts
-------------------------------------------------------------- */


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

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

/* =Basic
-------------------------------------------------------------- */

body {
	background:#d9ddc9;
	font-size:1em;
	color:#585d43;
	line-height:1.3;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	font-family: 'Crimson Text', serif;
}

.headlinefont {
	font-family: 'Oswald', sans-serif;
	font-weight:300;
}
.headlinefont-bold {
	font-family: 'Oswald', sans-serif;
	font-weight:400;
}


h1, h2, h3, h4, h5, h6 {
	clear: both;
	line-height: 1.3;
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	color: #820024;
}
 
h1 {
	font-size: 2.75rem;
	padding-bottom:0.25rem;
	margin-bottom: 0.75rem;
}

h2 {
	font-size: 2rem;
	margin: 1.5rem 0 1rem 0;
	text-align:center;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-transform: uppercase;
}

h2:before, h2:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: 50%;
	height: 2px;
	content: '';
	background-color: #585d43;
}
h2:before {
	margin-left: -50%;
	text-align: right;
}

.content-full-blue h2 {color:#fff;}
.content-full-blue h2:before, .content-full-blue h2:after {
	background-color: #fff;
}

h2 span {
	padding: 0 1em;
}
h3 {
	font-size: 1.375rem;
	margin: 1rem 0 0.75rem 0;
}
h4 {
	font-size: 1.25rem;
	margin: 1rem 0 0.75rem 0;
}

h5 {
	font-size: 1.125rem;
	margin: 1rem 0 0.75rem 0;
}

hr {
	width:100%;
	border-top: 0.0625em solid #585d43;
    border-width: 0.0625em 0 0;
    clear: both;
    height: 0;
    margin: 0.5em 0 0 0;
    padding: 1em 0 0 0;
}

.center {text-align:center;}

.farbe-hg {color:#d9ddc9;}
.farbe-hgblau {color:#365c7e;}
.farbe-schrift {color:#585d43;}
.farbe-headline {color:#820024;}

/* =Struktur
-------------------------------------------------------------- */

header.site-header,
.header-image,
.header-image-home,
footer.site-footer {
	min-width:20em;
}

header.site-header {
	position: fixed;
	top:20px;
	width:100%;
	transition: .4s;
	z-index: 9;
}

.header-image {
	background: url("images/header-home.jpg") no-repeat center center;
	background-size:cover;
	width:100%;
	height:0;
	padding-bottom:15em;
	margin-bottom:2em;
}
.header-image-home {
	background: url("images/header-home.jpg") no-repeat center center;
	background-size:cover;
	width:100%;
	height:0;
	padding-bottom:25em;
}
.header-image-home2 {
	background: url("images/header-home2.jpg") no-repeat center center;
	background-size:cover;
}

@media screen and (min-width: 50em) {

	.header-image {
		padding-bottom:30%;
	}
	.header-image-home {
		padding-bottom:50%;
	}

}
@media screen and (min-width: 100em) {

	.header-image {
		padding-bottom:30em;
	}
	.header-image-home {
		padding-bottom:50em;
	}

}


.content-1200 {
	min-widht:18rem;
	width: 90%;
	margin:0 5%;
}

@media screen and (min-width: 83.33em) {

	.content-1200 {
		width: 75rem;
		margin:0 auto;
	}

}

.content-full {
	width:100%;
}
.content-full-blue {
	width:100%;
	background: #365c7e;;
	padding: 1em 0;
}

main.content {
	padding-bottom: 2em;
}

footer.site-footer {
	width:100%;
	padding:1.5em 0 8em 0;
}
footer.site-footer ul{
	overflow:hidden;
}
footer.site-footer ul li{
	float:left;
	margin:0 2em 0.25em 0;
}
footer.site-footer a {
	color:#585d43;
	font-size: 1.125em;
	text-decoration: none;
	text-transform: uppercase;
}
footer.site-footer a:hover {
	color: #820024;
}

footer.site-footer ul li:last-child a{
	display:block;
	width:2rem;
	height:2rem;
	overflow:hidden;
	text-indent: -999px;
	background: url("images/facebook.svg") no-repeat center center;
	background-size: cover;
}

/* =Navigation
-------------------------------------------------------------- */



.header-nav {
	background-color: rgba(255, 255, 255, 0.67);
	position:relative;
	top:1em;
	transition: .4s;
}
.header-nav:before, .header-nav:after  {
	background-color: rgba(255, 255, 255, 0.67);
	width:100%;
	height:3px;
	display:block;
	content:'';
	left:0;
	position:absolute;
	z-index: 3;
	transition: .4s;
}

.header-nav:before  {
	top:-7px;
}
.header-nav:after  {
	bottom:-7px;
	transition: .4s;
}


.header-nav	.content-1200 {
	display:flex;
	justify-content:space-between;
	align-items: center;
}

.logo {
	flex:0 0 15em;
	height: 5em;
	transition: .4s;
}
.logo img{
	width: 12em;
	height: 5em;
	transition: .4s;
}





.main-navigation input {
	display: none;
}

.main-navigation li a{
	color:#585d43;
	font-size: 1.125rem;
	text-decoration: none;
	text-transform: uppercase;
}
.main-navigation li a:hover {
	color: #820024;
}

.main-navigation li.current-menu-item a,
body.termin-template-default .main-navigation #menu-item-43 a,
body.post-template-default .main-navigation #menu-item-105 a {
	color: #820024;
}



@media screen and (max-width: 49.999em) {

	.main-navigation  {
		width:100%;
		height:4em;
	}

	.main-navigation label {
		position: absolute;
		top: 1.625em;
		right: 1.5em;
		height: 1.5em;
		width: 2em;
		z-index: 5;
	}
	.main-navigation input + label span {
		position: absolute;
		width: 100%;
		height: 0.25em;
		top: 50%;
		left: 0;
		display: block;
		background: #585d43;
		transition: .4s;
	}
	.main-navigation input + label span:first-child {
		top: 0;
	}
	.main-navigation input + label span:last-child {
		top: 100%;
	}

	.main-navigation body label:hover {
		cursor: pointer;
	}

	.main-navigation input:checked + label span {
		opacity: 0;
		top: 50%;
	}
	.main-navigation input:checked + label span:first-child {
		opacity: 1;
		transform: rotate(45deg);
	}
	.main-navigation input:checked + label span:last-child {
		opacity: 1;
		transform: rotate(-45deg);
	}

	.main-navigation nav {
		background: rgba(255, 255, 255, 1);
		position: absolute;
		top: 5em;
		left:0;
		width: 100%;
		display:none;
		z-index: 9;
	}

	.main-navigation input:checked ~ nav {
		display:block;
	}

	.main-navigation ul  {
		padding: 1em 0;
	}
	.main-navigation ul  li {
		padding: 0.25em 1em;
	}

	header.site-header-scroll .main-navigation nav {
		top: 4em;
	}
	header.site-header-scroll .main-navigation label {
		top: 1.25em;
	}
}


@media screen and (min-width: 50em) {

	.main-navigation ul{
		overflow:hidden;
	}
	.main-navigation ul li{
		float:left;
		margin:0.25em 0 0.25em 1.5em;
	}
	.main-navigation ul li a{
		line-height: 1;
	}

}


/* =Header Scrolling
-------------------------------------------------------------- */

header.site-header-scroll {
	top:0;
}

header.site-header-scroll .header-nav{
	top:0em;
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
	box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
}
header.site-header-scroll .logo{
	height: 4.2em;
}
header.site-header-scroll .logo img{
	width: 10em;
	height: 4.2em;
}
header.site-header-scroll .header-nav:after  {
	bottom:0;
	background-color: rgba(255, 255, 255, 0.9);
}




/* =Blöcke
-------------------------------------------------------------- */

.col{
	margin-bottom:1rem;
	width:100%;
}

@media screen and (min-width: 40em) {

	.col{
		margin-bottom:0;
	}

	.flexrow {
		display:flex;
		justify-content: space-between;
		margin-bottom:1.5rem;
	}

	.fullrow11 .col{
		width:48.4%;
	}

	.row111 .col{ width:30.2%;}
	.row11 .col{ width:47.56%; }
	.row21 .col:first-child{ width:65.1%; }
	.row21 .col:last-child{ width:30.2%; }
	.row12 .col:first-child{ width:30.2%; }
	.row12 .col:last-child{ width:65.1%; }

	.col-oben {
		align-self: flex-start;
	}
	.col-unten {
		align-self: flex-end;
	}

}

/* =Homepage
-------------------------------------------------------------- */


.home-slider-text {
	padding-top:40%;
	padding-left:10%;
	width:80%;
	font-size:1.25rem;
}
.home-slider-text-bg {
	background-color: rgba(255,255,255,0.3);
	padding:0.5em;
}
.home-slider-text h3{
	font-weight:bold;
	margin:0;
	font-size:2rem;
	text-transform: uppercase;
}


@media screen and (min-width: 40em) {

	.home-slider-text {
		padding-top:30%;
		padding-left:35%;
		width:40%;
	}

}


.home-countdown {
	display: flex;
	flex-wrap: wrap;
	top:-3em;
	width:100%;
	position: relative;
	height:8em;
}
.home-countdown-left {
	background:#d9ddc9;
	-webkit-border-radius: 1em 1em 0 0;
	border-radius: 1em 1em 0 0;
	flex: 0 0 100%;
	display: flex;
	align-items: center;
}
.home-countdown-left-icon {
	width:3em;
	height:3em;
	margin:0 1em 0 3em;
	background: url("images/kalender.svg") no-repeat center center;
	background-size: 100% 100%;
	flex: 0 0 3em;
}
.home-countdown-left-text {
	padding: 0.5em;
	line-height: 1.2;
}
.home-countdown-left-text h3{
	margin: 0;
	text-transform: uppercase;
}
.home-countdown-right {
	background:#fff;
	-webkit-border-radius: 0 0 1em 1em;
	border-radius: 0 0 1em 1em;
	border: #d9ddc9 solid 2px;
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.home-countdown-right-text {
	padding: 0 1.5em;
	line-height: 1.2;
}
.home-countdown-right-text h3{
	margin: 0;
	text-transform: uppercase;
}
.home-countdown-right-text h3 a{
	text-decoration: none;
}
.home-countdown-right-text h3 a:hover{
	text-decoration: underline;
}
.home-countdown-right-button {
	padding: 0;
	margin:1em;
}
.home-countdown-right-button a{
	display:block;
	padding: 0.5em 2em;
	margin-right:2em;
	background:#d9ddc9;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	text-decoration: none;
	color:#585d43;
}

@media screen and (min-width: 30em) {

	.home-countdown-right {
		flex-wrap: nowrap;
	}
	.home-countdown-right-button {
		margin:0;
	}

}

@media screen and (min-width: 40em) {

	.home-countdown {
		flex-wrap: nowrap;
		align-content: stretch;
	}

	.home-countdown-left {
		-webkit-border-radius: 1em 0 0 1em;
		border-radius: 1em 0 0 1em;
		flex: 0 0 30%;
	}

	.home-countdown-right {
		-webkit-border-radius: 0 1em 1em 0;
		border-radius: 0 1em 1em 0;
		flex: 0 0 70%;
	}

}


/* =Content
-------------------------------------------------------------- */

.content {
	background: #fff;
	font-size: 1.125em;
}
.content p{
	margin-bottom: 1em;
}

.breadcrumb {
	font-size:0.875rem;
	margin-bottom:0.75rem;
}
.breadcrumb a{
	color:#585d43;
}

.buchungsformular {
	width:100%;
	border-top: #d9ddc9 solid 1px;
}
.buchungsformular tr{

}
.buchungsformular td{
	padding: 0.25em 1em 0.25em 0;
	vertical-align: top;
	border-bottom: #d9ddc9 solid 1px;
}
.buchungsformular input,
.buchungsformular textarea,
.buchungsformular select {
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	border: #d9ddc9 solid 2px;
	padding:0.125em 0.5em;
	font-size:1rem;
	font-family: 'Oswald', sans-serif;
}

/* =Termine
-------------------------------------------------------------- */

.terminliste {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 1.5em 0 1em 0;
}
.terminliste li{
	width:100%;
}


.terminliste-kreis {
	width:75%;
	margin: 0 auto;
	height:0;
	padding-bottom:75%;
	position: relative;
	margin-bottom:2em;
	font-family: 'Oswald', sans-serif;
}
.terminliste-icon {
	width:100%;
	height:100%;
	background:#fff url("images/kalender.svg") no-repeat center 25%;
	background-size: 33%;
	position: absolute;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	top:0;
	left:0;
}
.terminliste-datum {
	width:100%;
	text-align: center;
	position: absolute;
	top:52%;
	color: #820024;
	font-size:8vw;
	font-weight: bold;
}
.terminliste-tag {
	width:100%;
	text-align: center;
	position: absolute;
	top:68%;
	color:#585d43;
	font-size:6vw;
}
.terminliste-text{
	color:#fff;
	text-align: center;
}
.terminliste-text h3{
	color:#fff;
}
.terminliste-text h3 a{
	text-decoration: none;
}
.terminliste-text h3 a:hover{
	text-decoration: underline;
}
.terminliste-text a{
	display:block;
	margin: 0.5em 0;
	color:#fff;
}

.terminliste2 {
	border-top: 1px solid #d9ddc9;
}
.terminliste2 li{
	width:100%;
	display:flex;
	border-bottom: 1px solid #d9ddc9;
	margin-bottom: 1rem;
}

.terminliste2 .terminliste-kreis {
	width:12em;
	padding-bottom:12em;
}

.terminliste2 .terminliste-text {
	width:80%;
}

.terminliste2 .terminliste-text,
.terminliste2 .terminliste-text h3,
.terminliste2 .terminliste-text a{
	color:#585d43;
	text-align: left;
}

.terminliste2 .terminliste-datum {
	font-size:1.25rem;
}
.terminliste2 .terminliste-tag {
	font-size:1rem;

}

.termine-nav {
	border-top: 1px solid #d9ddc9;
	margin-top: 1rem;
	padding-top: 1rem;
}
.termine-nav ul li{
	display:flex;
}
.termine-nav .terminliste3-datum {
	flex: 0 0 160px;
}


@media screen and (min-width: 30em) {

	.terminliste li{
		width:44%;
	}
	.terminliste-datum {
		font-size:3.2vw;
	}
	.terminliste-tag {
		font-size:2.5vw;
	}

}

@media screen and (min-width: 50em) {

	.terminliste li{
		width:22%;
	}

	.terminliste-datum {
		font-size:1.6vw;
	}
	.terminliste-tag {
		font-size:1.3vw;
	}



}
@media screen and (min-width: 83.33em) {

	.terminliste-datum {
		font-size:1.33rem;
	}
	.terminliste-tag {
		font-size:1.081rem;
	}

}



/* =Cookies
-------------------------------------------------------------- */


#cookie-notice .cn-button{
	color: #820024;
	background:#f8e900 !important;
	display: inline-block;
	padding:.25rem .5rem;
	border-radius:3px;
}



/* =News
-------------------------------------------------------------- */

.newsliste {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom:1.5em;
}
.newsliste li{
	width:100%;
	margin:1.5em 0;
	display:flex;
}
.newsliste-bild{
	width:55%;
}
.newsliste-bild img{
	width:95%;
	height:auto;
}
.newsliste-text{
	width:45%;
}
.newsliste-text h3{
	margin-top:0;
}
.newsliste-text h3 a{
	text-decoration: none;
}
.newsliste-datum {
	color: #820024;
	padding:0 0 1em 0;
}


@media screen and (min-width: 45em) {

	.newsliste li{
		width:48.4%;
	}

}