/******************************************************************
Site Name: kranlich-photo.at
Author: WEHR & WEHR, www.wehrundwehr.at

Stylesheet: Main Stylesheet
******************************************************************/

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
a {
    background: transparent;
	
}
a:active, a:focus, a:hover {
    outline: 0;
}

b, strong, .strong {
    font-weight: 400;
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
p { 
	padding:0;
	margin:0;
}
pre {
    margin: 0;
	white-space: pre-wrap;
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
q:before, q:after {
    content: '';
    content: none;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
dl, menu, ol, ul {
    margin: 0;
}
menu {
    padding: 0 0 0 40px;
}
ol, ul {
    padding: 0;
    list-style-type: none;
}
nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}
img {
    border: 0;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
	outline:none;
	border:none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/*******************************************************************/

p{
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
h1, h2, h3, h4, h5, h6, a {
		-ms-hyphens: none;
		-webkit-hyphens: none;
		-moz-hyphens: none;
		hyphens: none;
	}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*********************
BASE (MOBILE) SIZE

/*********************
GENERAL STYLES
*********************/

html, body {
	max-width: 100%;
	height: 100%;
}

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

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


body {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    color: #00475a;
    background: #fff;
}
#container{
	min-height: 100%;
	margin: 0 auto;
	width:100%;
}
.cf{
    clear: both;
}


hr {
    border: none;
    display: block;
    height: 1px;
    margin: 2em 0;
}
input, textarea{
	-o-transition: .2s;
	-ms-transition: .2s;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	transition: .2s;
}
a, a:visited {
    color: inherit;
    text-decoration: none;
	font-feature-settings: "liga" 0;
}
a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: #a11f27;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	font-family: 'Roboto', sans-serif;
    text-rendering: optimizelegibility;
	margin: 0;
	font-feature-settings: "liga" 0;
	font-weight: normal;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none;
}
h1, .h1 {
    color: #a11f27;
    font-size: 1.5em;
    font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .15em;
	line-height: 1.3em;
	margin-bottom: 1em;
}
h2, .h2 {
	color: #a11f27;
	font-size: 1em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .15em;
	line-height: 1.3em;
	margin-bottom: 1em;
}
h3, .h3 {
    font-size: .75em;
	color: #000;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .15em;
}
h4, .h4 {
    color: #ff5700;
	font-size: 1.6em;
	line-height: 1.2em;
	margin-bottom:.3em;
	margin-top:0;
}
h5, .h5 {
	color: #000;
    font-size: 1.6em;
	line-height: 1.2em;
	margin-bottom:.3em;
	margin-top:1em;
}

/*********************
HEADER STYLES
*********************/

.header-container, .header-small-container, .main-menu-container{
	-o-transition: .2s;
	-ms-transition: .2s;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	transition: .2s;
}
.header-container, .header-small-container{
	position: relative;
	width: 100%;
}
.logo{
	margin-top: 10px;
	background: url('../images/ikp-logo.png') center top/141px 100% no-repeat;
	height: 140px;
	text-indent: -9999px;
	display: block;
}
.flower-left, .flower-right{
	display:none;
	position: absolute;
	top: 0;
}
.img-slider img, .img-slider-small img{
	width:100%;
	height:auto;
	display:block;
}
.img-slider, .img-slider-small{
	z-index: 0;
}
.shadow-border-top, .shadow-border-bottom{
	height: 25px;
	width: 100%;
	background: url("../images/shadowline.png") center top/895px auto no-repeat;
	position: absolute;
	z-index: 10;
}
.shadow-border-bottom{
	z-index: 11;
	transform:scaleY(-1);
	margin-top:-25px;
	
}

.hashdown{
	position: absolute;
	height: 20px;
	bottom: 0;
	left:0;
	display: inline-block;
	background: transparent;
	z-index:1;
	text-align:left;
	padding-bottom:0;
	margin:0;
	border-bottom:none;
}
.lefthashdown {
	background: #FFF;
	width: 50%;
	height: 100%;
	padding: 0;
	margin: 0;
	display: inline-block;
}
.righthashdown {
	background: #FFF;
	width: 50%;
	height: 100%;
	padding: 0;
	margin: 0;
	display: inline-block;
}
.centerhashdown{
	background: transparent url("../images/centerhasharrow.png") 0 0/63px 100%;
	width: 63px;
	height: 100%;
	display: inline-block;
}

/*********************
NAVIGATION STYLES
*********************/


.close {
    background: url(../images/close.png) no-repeat;
	display: none;
	z-index: 30;
	top: 0;
}
.open {
    background: url(../images/menu.png) no-repeat;
	background-color: #fff;
	border-radius: 40px;
	border:solid 1px #00475a;
    display: inline-block;
	z-index: 31;
	top: 1em;
}
.close, .open{
	background-size: 39px 39px;
	width: 39px;
	height: 39px;
	text-indent: -999em;
	position: absolute;
	left: 2em;
	
}
.main-menu-container{
	/*margin: 25px 0 25px; /*master slider script nimmt weder margin noch padding mit in die menu-height */
	height:155px;
	font-size:1.2em;
	text-decoration: none;
	z-index: 20;
}
.main-menu{
	-o-transition: .2s;
	-ms-transition: .2s;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	transition: .2s;
	position: absolute;
	top:-10px;
	left:-500px;
	/*padding:2em 1em;*/
	font-weight: 400;
	z-index: 21;
	background-color: #edf4f7;
	box-shadow: 5px 0 10px rgba(0,0,0,.5);
	height: 100vh;
}
.kontakt-link, .about-link, .top-nav{
	padding-left: 2em;
	padding-right:3em;
}
.top-nav{
	padding-top: 2em;
	padding-bottom:1em;
}
.kontakt-link{
	position: absolute;
	bottom: 2em;                   
}
.about-link{
	position: absolute;
	bottom: 3.5em;                   
}

.top-nav, .footer-nav{
	display: block;
	letter-spacing: .16em;
}
.top-nav li{
    padding-top: 0.5em;
}
.top-nav .menu-item {
    color: #a11f27;
}
.top-nav > .menu-item {
    padding-bottom:0;
}

.footer {
	color: #a8d0db;
	background: #00475a;
	width: 100%;
}
.footer-nav{
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 5% 1.2em;
	padding: 32px 0;
	border-bottom: solid 1px #708e96;
}
.footer-nav .menu-item {
	text-align: center;
	padding-bottom: .5em;
}
.footer-text{
	font-size: .65em;
	text-align: center;
	padding: 2em 0;
}
.footerlogo{
    display: inline-block;
	margin:0 auto;
    background: url('../images/ikp-footer-logo.png') center top/232px auto no-repeat;
	width: 100%;
	height: 171px;	
    text-indent: -9999px;
}
.footer-flower-left, .footer-flower-right{
	display:none;
}

.footer-links {
    display: block;
    font-size: .8em;
	text-align: center;
}
.footer-links li{
    display:inline-block;
    margin: .2em 5px;
}
.footer a:hover, .footer a:focus, .footer a:visited:hover, .footer a:visited:focus {
    color: #a8d0db;
}

/*********************
POSTS & CONTENT STYLES
*********************/

#scrollto_target{
	height:0;
}
.content-container{
	width: 90%;
	margin: 1em auto;
	padding: 0 0 60px;
}
.maincontent{
	vertical-align: top;
	width:100%;
}
.maincontent h1{
	text-align: center;
}
.maincontent p, .maincontent h1{
	margin-bottom:1em;
}
.maincontent p{
	font-size: 1em;
	color: #00475a;
	line-height: 1.7em;
	font-weight: 300;
}
.maincontent a{
	font-weight: 400;
}
.maincontent ul li{
	font-size: 1em;
	line-height: 1.2em;
	padding-bottom:.3em;
	font-weight: 400;
}
.maincontent ul li a{
	font-style: normal;    	
}
.maincontent ul li:before{
	font-family: FontAwesome;
	content:'\f061';
	display: inline-block;
	padding-right: 0.5em;
	font-size: 0.8em;
	color: #a11f27;
	font-style: normal;
	margin-left: -1.4em;
}
.maincontent .noarrow{
	color:#a11f27;
}
.maincontent .noarrow li:before{
	content:'\f024';
	padding-right: 0.5em;
	color:#a11f27;
}
.maincontent ul{
	padding-left:1.3em;
	margin: 1em 0 1.2em;
}
.text{
	margin:0 auto;
	width:100%;
}

/* Images */

.size-content-full, .size-content-side, .size-galery-thumb{
	width:100%;
	height:auto;
}
.alignleft, .alignright{
	float: none;
	margin: 0 0 1em 0;
}
.home-galery .wp-block-group__inner-container{
	display: block;
	margin-bottom: 0;
	text-align: center;
}
.home-galery .wp-caption{
	display: block;
	width: 100% !important;
	margin-bottom: 2em;
}
.home-galery .wp-caption-text{
	font-size:1.5em;
	font-weight: 400;
	letter-spacing: .15em;
	line-height:1em;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
	margin-top:-2em;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
	letter-spacing: .2em;
	color: #fff;
	font-size: 20px;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  	width: 100%;
}
.home-galery{
	margin: 0;
}

/** KONTAKTFORMULAR **/

.kontaktform .wpcf7{
	margin-bottom:4em;
}
.kontaktform input, .kontaktform textarea{
	border:none;
	border-bottom: 1px solid #a11f27;
	background-color: #a8d0db;
	margin-top:7px;
	margin-bottom:.5em;
	width: 100%;
	height: 2.9em;
	padding: 10px 15px;
	box-sizing: border-box;
	font-size:.85em;
	opacity: .75;
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder{
	color:#00475a;
}
.kontaktform textarea{
	height:140px;
	margin-top:1em;
}
.kontaktform p{
	margin:0;
}
.kontakt-senden{
	font-family: inherit;
	font-size: 1em;
	color: #fff;
	background: #00475a;
	width: 165px;
	height:45px;
	padding: 0;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .15em;
	font-weight: 400;
}
.nachricht-note{
	font-size: .75em;
	width:100%;
	float: none;
	margin-bottom: 1em;
	text-align: center;
}
.senden-container p{
	text-align: center;
}

div.wpcf7 .ajax-loader {
    padding: 0;
    margin: 15px 0 0 10px;
    position: absolute;
}
.pflichtfeld{
	font-size: 0.7em;
	display: inline-block;
}
.inv-recaptcha-holder{
	display:none;
}
.senden-container{
	height: 3em;
	display: flex;
	justify-content: space-between;
	margin-top:1em;
}

/* Error messsages */
span.wpcf7-not-valid-tip, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
  color: #fff;
  font-size: 0.9em;
  display: block;
  background: red;
  padding: 8px 15px;
  margin-bottom: 1em;
  border: none;
}

div.wpcf7-validation-errors {
	background: #ff423a;
	color: #fff;
	font-size: 0.9em;
	font-style: italic;
	border: none;
	margin: 1em 0 2em 0;
}
div.wpcf7-mail-sent-ok {
	background: #fff;
	color: #000;
	margin: 2em 0;
}
div.wpcf7-response-output {
	font-size: 0.9em;
	font-style: italic;
	padding: 8px 15px;
}
.kontaktform .wpcf7-response-output, .maincontent .wpcf7-response-output{
	margin-top:1em;
}
div.wpcf7 img.ajax-loader {
	float: none;
}
input.success, input.is-valid, textarea.success, textarea.is-valid{
	color: #e6efc2;
	border-color: #e6efc2;
	background-color: white;
}
input.error, input.is-invalid, textarea.error, textarea.is-invalid{
	color: #fbe3e4;
	border-color: #fbe3e4;
	background-color: white;
}




/************ Start BREAKPOINTS ************/
@media only screen and (max-height: 421px) {
	.main-menu-container{
		height: 50px;
	}
	.logo{
		background-position: center -102px;
	}
}

@media only screen and (min-width: 550px) {
	
	.flower-left, .flower-right{
		display:block;
		height:140px;
		width:140px;
	}
	.flower-left{
		left:0;
		background: url("../images/header-img-left.png") 0 0/140px auto no-repeat;
	}
	.flower-right{
		right:0;
		background: url("../images/header-img-right.png") 0 0/140px auto no-repeat;
	}
	.footer-flower-and-logo-container{
		display: flex;
		justify-content: space-between;
	}
	.footer-flower-left, .footer-flower-right{
		display: inline-block;
		height:177px;
		width:185px;
	}
	.footer-flower-left{
		background: url("../images/footer-img-left.png") left top/130px auto no-repeat;
	}
	.footer-flower-right{
		background: url("../images/footer-img-right.png") right top/130px auto no-repeat;
	}
    .footerlogo{
		background-size: 180px auto;
		width: 50%;
    }
	.home-galery .wp-block-group__inner-container{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom:4vw;
	}
	.home-galery img{
		width:420px;
	}
	.home-galery .wp-caption{
		display: inline-block;
		width: 30% !important;
		margin-bottom: 0;
	}
	.home-galery .wp-caption-text {
		font-size: 4vw;
	}
	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  		width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2);
	}
	.nachricht-note{
		width:60%;
		float: left;
		text-align: left;
	}
	.kontakt-senden{
		float:right;
	}
}

@media only screen and (min-width: 991px) { /* show Menu */
	
	.main-menu{
		position:relative;
		top:0;
		left:0;
		padding:0 5%;
		background-color: #fff;
		height: initial;
		box-shadow: none;
	}
	.close, .open {
        display: none;
    }
	.hashdown {
		display: inline-block;
	}
	.main-menu-container{
		font-size: .7em;
		height:210px;
		width: 100%;
	}
	.main-menu, .footer-nav{
		text-align: center;
	}
	.top-nav{
		display:inline-block;
		padding: 33px 47px 0;
	}
	.top-nav .current-menu-item{
		border-bottom: solid 1px #a11f27;
	}
    .top-nav > li, .footer-nav > li {
		display: inline-block;
		margin-left: 1em;
		padding-top: 0;
		text-transform: uppercase;
	}
	.top-nav > li:first-child, .footer-nav > li:first-child{
		padding-left:0;
	}
	.about-link, .kontakt-link{
		position:relative;
		display:inline-block;
		padding:0;
		bottom:0;
	}
	.about-link a:after, .kontakt-link a:before{
		content: "";
		width: 43px;
		height: 22px;
		background: url('../images/menu-img.png') 10px 0/33px auto no-repeat;
		display: inline-block;
		vertical-align: middle;
	}
	.kontakt-link a:before{
		transform:scaleX(-1);
	}
	/* Footer */
	.footer-nav{
        font-size: .75em;
	}
	.footer-nav .menu-item {
		text-align: center;
		padding-bottom: 0;
	}
	.footer-text{
		display: inline-block;
		float:right;
		margin-right:5%;
		padding-top: 5px;
	}
    .footer-links {
		display: inline-block;
        font-size: .65em;
		margin: 0 0 60px 5%;
    }
	.footer-links-nav{
		display:flex;
	}
    .footer-links li{
        display: inline-block;
        border-left: #708e96 solid 1px;
        padding:0 1em;
        margin:0;
    }
    .footer-links li:first-child{
        border:0;
        padding-left:0
    }
	
	/* Content */
	.content-container{
		margin: 0 auto;
		width: 930px;
		min-height: 500px;
	}
	.maincontent{
		margin: 0 auto;
		width:845px;
	}
	.maincontent p{
		line-height: 1.55em;
	}
	
	.text{
		width:630px;
	}
	.kontakt, .about, .standard{
		padding-top:50px;
	}
	/* Images */
	/*.size-galery-thumb{
		width: 250px;
		height: auto;
	}*/
	.size-content-side{
		width: 395px;
		height: auto;
	}
	.alignleft{
		float: left;
		margin: 0 2em 1em -150px;
	}
	.alignright{
		float: right;
		margin: 0 -150px 1em 2em;
	}
	.home-galery{
		margin-bottom:48px;
	}
	.home-galery .wp-caption{
		width: 250px !important;
	}
	.home-galery .wp-caption-text {
		font-size: 1.5em;
	}
	figcaption{
		font-size: .8em;
		text-align: center;
	}
	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
		letter-spacing: .2em;
		color: #fff;
		font-size: 35px;
	}
	

	
	
	/* Kontaktform */
	
	.kontaktform form{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.kontaktform input{
		width:411px;
/* 		display:inline-block; */
	}
	.name-form{
/* 		float:left; */
	}
	.email-form{
/* 		float:right; */
	}
	
	span.your-email span.wpcf7-not-valid-tip{
/* 		float: right;
		width: 381px; */
	}
}

@media only screen and (min-width: 1200px) {
	
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	#container{
		width: 100%;	
		height:100%;
		position: relative;
	}
	.flower-left, .flower-right{
		height:201px;
		width:193px;
	}
	.flower-left{
		background: url("../images/header-img-left.png") 0 0/193px auto no-repeat;
	}
	.flower-right{
		background: url("../images/header-img-right.png") 0 0/193px auto no-repeat;
	}
	.logo{
		margin-top:25px;
		background: url('../images/ikp-logo.png') center top/199px 100% no-repeat;
		height: 196px;
	}

	.main-menu-container{
		font-size: .8em;
		height:276px;
	}

	
	
	
	
}

/******** Content *********/




/*********************
PRINT STYLESHEET
*********************/
@media print {
   
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }

    a, a:visited {
        color: #000 !important;
        text-decoration: underline;
    }

    a:after, a:visited:after {
        content: " (" attr(href) ")";
    }

    a abbr[title]:after, a:visited abbr[title]:after {
        content: " (" attr(title) ")";
    }

}