@charset "utf-8";

/*	MOBILE FIRST & PROGRESSIVE ENHANCEMENT */

/* 	CSS RESET
	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain) */
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, 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, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
/*	HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;}
body{
	line-height: 1;}
ol, ul{
	list-style: none;}
blockquote, q{
	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{
	content: '';
	content: none;}
table{
	border-collapse: collapse;
	border-spacing: 0;}	

/*	GLOBAL STYLES - optimzed for old browsers, small devices, and print */
body{
	background-color: #efddce;
	font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	font-size: 16px; /* default font-size is 16px in most browsers; ~100.01% */;
	color: #80665a;
	font-weight: normal;
	text-align: center;
	line-height: 1.3em;
}
a{
	color: #80665a;
	text-decoration: none;
	font-weight: bold;
}
a:hover{ 
	text-decoration: underline;}
#page{ 
	position: relative;
	margin: 0 auto;
	width: 95%;
	max-width: 960px;
	text-align: left;}
.header{
	height: 88px;}		
#logo{
	display: block;
	background-image: url(../image/logo_large_v4.png);
    background-size: 320px 59px;
  	background-repeat: no-repeat; 
	background-position: 0px 0px;
	width: 320px;
	height: 59px;
	margin-top: 19px;
	margin-bottom: 10px;
	position: absolute;
 	top: 0px;
	margin-left: -160px;
	left: 50%;}
.icontext{
	display: none;}
.section{
	margin-top: 4em;
	margin-bottom: 2em;}	
h1{ 
	font-size: 1.4em;
	line-height: 1.3em; 
	font-weight: bold;	
	margin: 1em 0em 0.5em 0em;}
h2{ 
	font-size: 1.2em;
	line-height: 1.3em; 	 
	font-weight: bold;
	margin: 1em 0em 0.5em 0em;}	
h3{ 
	font-size: 1.0em;
	line-height: 1.3em; 	 
	font-weight: bold;
	margin: 1em 0em 0.5em 0em;}	
p{
	margin: 0em 0em 1em 0em;}
ol{
	margin: 0em 0em 1em 0em;
	padding-left: 2.4em;
	list-style-position: outside;
	list-style-type: decimal;}	
ol li{
    display: list-item;}	 
ol li ol{
	margin: 0em 0em 0em 0em;
    list-style-type: lower-alpha;}
.nav{
	text-transform: uppercase;
	position: absolute;
	top: 88px;
	width: 100%;
	display: block;
	letter-spacing: 0.1em;
}
.nav ul{
    border-top: 1px solid #80665a; 	
	border-bottom: 1px solid #80665a;
	text-align: center;}
.nav ul li{
	display: -moz-inline-stack; /* Firefox 2 */
    display: inline-block; /* > CSS 2.1 */
    *zoom: 1; /* hasLayout for  IE6 & IE7 */
    *display: inline; /* for IE6 & IE7 */
	padding: 0.4em 0.5em; 
	margin: 0.0em 0.0em;}
.nav ul li ul{
	display: none;}	
#active_nav_item{ 
	font-weight: bold;
	text-decoration: underline;	} 
.socialmedia{
	display: block;
	border-top: 1px solid #80665a; }
.socialmedia ul{
	line-height: 0em;}	
.socialmedia ul li{
	display: -moz-inline-stack; /* Firefox 2 */
    display: inline-block; /* > CSS 2.1 */
    *zoom: 1; /* hasLayout for  IE6 & IE7 */
    *display: inline; /* for IE6 & IE7 */
	padding-right: 0.4em;
	padding-top: 0.4em; 
	padding-bottom: 0.4em;}
.facebook{
	display: block;
	background-image: url(../image/facebook_logo_v2.png);
    background-size: 32px 32px;
  	background-repeat: no-repeat; 
	width: 32px;
	height: 32px;}
.instagram{
	display: block;
	background-image: url(../image/instagram_logo.png);
    background-size: 32px 32px;
  	background-repeat: no-repeat; 
	width: 32px;
	height: 32px;}
.footer{ 
	color: #80665a;
	border-top: 1px solid #80665a;}	
.footer ul li{
	float: left;
	text-align: left;
	padding: 0.4em 1em 0.4em 0em;}
.footer ul li:last-child{
	float: none;
	text-align: right;
	padding-right: 0em;}
#active_footer_item { 
	font-weight: bold;
	text-decoration: underline;	}	
.clear-fix{ 
	clear: both;}
.noscript p{
	text-align: center;
	color: #80665a;}
.noscript img{
	display: block;
	border: 1px solid #80665a;}
table.preisliste{
	width: 100%;	
	border-collapse: collapse;
   	margin-bottom: 1.2em;}
table.preisliste th{
	text-align: left;
	font-weight: bold;
	background: #b69a8c;
	color: #F9F8F7; }
table.preisliste td{
	text-align: left;
	background: inherit;}
table.preisliste th, table.preisliste td{
 	padding: 0.2em 0.6em 0.2em 0.3em;
	vertical-align: top;
	border: 1px solid #80665a;}
table.preisliste th.preis, table.preisliste td.preis{
	text-align: right;}	
table.preisliste td.beschreibung ul{
	list-style-type: circle;
	list-style-position: outisde;
	padding-left: 1.0em;}	
#ueber_mich{
	}
#ueber_mich_foto{ 
	text-align: right;
	float: right;
	margin-left: 1.2em;
	margin-bottom: 0.6em;}
#ueber_mich_foto img{ 
	width: 100%;
	max-width: 400px;
	border: solid 1px #80665a; }
#studio_beschreibung{
	}
#studio_foto{ 
	text-align: right;
	float: right;
	margin-left: 1.2em;
	margin-bottom: 0.6em;}
#studio_foto img{ 
	width: 100%;
	max-width: 400px;
	border: solid 1px #80665a; }
.kacheln{
	text-align: left;  }
.kacheln a:hover{
	text-decoration: none;}	
.portfolio{
	display: -moz-inline-stack; /* Firefox 2 */
    display: inline-block; /* > CSS 2.1 */
    *zoom: 1; /* hasLayout for  IE6 & IE7 */
    *display: inline; /* for IE6 & IE7 */
	text-align: left;
	margin: 8px;
	position: relative;
  	background-repeat: no-repeat; 
	width: 280px;
	height: 210px;
    background-size: 280px 210px;
	background-position: 0px 0px;
	border: 1px solid #808080;
	cursor: pointer;}	
.portfolio h2{
	position: absolute;
	bottom: 0px;
	width: 260px;
	margin: 0px;
	padding: 7px 10px 17px 10px;
	text-align: left;
	background-color: #808080;
	color: #ffffff;}
.portfolio.kinder{
    background-image: url("../image/thumb_kinder.jpg");}
.portfolio.babys{
    background-image: url("../image/thumb_baby.jpg");}	
.portfolio.schwangerschaft{
    background-image: url("../image/thumb_schwangerschaft.jpg");}	
.portfolio.familie{
    background-image: url("../image/thumb_familie.jpg");}	
.portfolio.portrait{
    background-image: url("../image/thumb_portrait.jpg");}
.portfolio.hunde{
    background-image: url("../image/thumb_hunde.jpg");}


@media only screen {
	.kacheln a:hover{
		opacity: 0.5;}
	.portfolio{
		border: 5px solid #ffffff;
		box-shadow: 
			4px 4px 4px rgba(0,0,0,0.2),
			-4px 4px 4px rgba(0,0,0,0.2),
			4px -4px 4px rgba(0,0,0,0.2),
			-4px -4px 4px rgba(0,0,0,0.2);}
	.portfolio h2{					
		color: #ffffff;
		background-color: rgba(0,0,0,0.5);
		border-top: 0px;}
}

/* 	SMALL SCREENS */
@media only screen and (max-width:480px){
	body{
		font-size: 15px;}
	#logo{
		background-image: url(../image/logo_small_v4.png);
		background-size: 240px 44px; 
	    width: 240px;
		height: 44px;
		margin-top: 19px;
		margin-bottom: 10px;
		margin-left: -120px;
		left: 50%;}
	.header{
		height: 73px;
		border-bottom: 1px solid #80665a}
	.section{
		margin-top: 1em;}
   	.nav{
   		position: static;}
   	.nav ul {
   	    border: 1px solid #80665a; 	
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
    	background-color: #f9f8f7;
		margin: 0em;
		padding: 0em;}
	.nav ul li{
		margin: 0em;
		padding: 0em;
		text-align: left;
		display: block;
		border: 0em;
    	border-bottom: 1px solid #80665a;}
	.nav ul li:last-child{
		border-bottom: 0em;}   	
    .nav ul li a{
		display: block;
    	color: #80665a; 
    	padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 0.7em;
		margin-right: 0.7em;
		background: url(../image/nav_icon.png) no-repeat right;
		background-size: 8px 14px;}	
   	.footer{
   		border-top: 1px solid #80665a;}
   	.socialmedia{
   		border-top: 1px solid #80665a;
   		margin-top: 2.0em;}
	.facebook{
		background-image: url(../image/facebook_logo_v2.png);}
	.instagram{
		background-image: url(../image/instagram_logo.png);}
	ol{
		padding-left: 0.6em; 
		margin-left: 0.6em; }  		
	table.preisliste, table.preisliste thead, table.preisliste tbody, table.preisliste th, table.preisliste td, table.preisliste tr{
		display: block;
		width:100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float:left;
		clear:left;} /* IE9 trick */
	table.preisliste thead{
		display: none;}
	table.preisliste th, table.preisliste td{
 		padding: 0.3em 0em;}
	table.preisliste th{
		display: none;}
	table.preisliste td{
		border: none;
		background: inherit;}
	table.preisliste tr{
        border-bottom: 1px solid #e1e1e1;
        padding-bottom: 0.7em;
        padding-top: 0.7em;}
	table.preisliste td.paket{
		font-weight: bold;
		font-size: 1.0em;}
	table.preisliste td.preis:before{
        content: "Preis: ";}
	table.preisliste tr:nth-child(even), table.preisliste tr.even{
		background: #efddce;}    		
	table.preisliste td.preis{}
	table.preisliste th.preis, table.preisliste td.preis{
		text-align: left;}	
	#ueber_mich_foto{ 
		text-align: left;
		float: none;
		margin-left: 0em;
		margin-bottom: 0em;}
	#studio_foto{ 
		text-align: left;
		float: none;
		margin-left: 0em;
		margin-bottom: 0em;}
	.portfolio{
		width: 210px;
		height: 158px;
	    background-size: 210px 158px;}	
	.portfolio h2{
		width: 190px;}
	.portfolio.kinder{
    	background-image: url("../image/thumb_kinder@0,75x.jpg");}
	.portfolio.babys{
    	background-image: url("../image/thumb_baby@0,75x.jpg");}	
	.portfolio.schwangerschaft{
	    background-image: url("../image/thumb_schwangerschaft@0,75x.jpg");}	
	.portfolio.familie{
	    background-image: url("../image/thumb_familie@0,75x.jpg");}	
	.portfolio.portrait{
    	background-image: url("../image/thumb_portrait@0,75x.jpg");}  
	.portfolio.hunde{
    	background-image: url("../image/thumb_hunde@0,75x.jpg");}  
    	
}

/* 	MEDIUM SCREENS */
@media only screen and (min-width:481px) and (max-width:767px){
	#ueber_mich_foto{ 
		width: 60%;}
	#studio_foto{ 
		width: 60%;}					
}

/* 	LARGE SCREENS */
@media only screen and (min-width:768px){
	.nav ul li.hover, .nav ul li:hover {
		position: relative;
		z-index: 899;}
	.nav ul li:hover > ul{
		visibility: visible;}
	.nav ul li ul{
		border: 0px;
		margin: 0px;
		padding: 0px;
    	background-color: #efddce;
		display: block;
		visibility: hidden;
		position: absolute;
		top: 100%;
		left: -50%;
	    width: 10em;}
	.nav ul li ul li{
		font-weight: normal;
    	display: list-item;
		font-size: 0.8em;
		line-height: 1.2em;
		border-bottom: 1px solid #80665a; 
		border-right: 1px solid #80665a; 
	    border-left: 1px solid #80665a;}
}

/* RETINA SUPPORT */
@media 
	only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (max-width:480px) and (   min--moz-device-pixel-ratio: 1.5),
	only screen and (max-width:480px) and (     -o-min-device-pixel-ratio: 3/2),
	only screen and (max-width:480px) and (        min-device-pixel-ratio: 1.5),
	only screen and (max-width:480px) and (                min-resolution: 144dpi),
	only screen and (max-width:480px) and (                min-resolution: 1.5dppx)){
		#logo{
			background-image: url(../image/logo_small_v4@2x.png);}
		.portfolio.kinder{
		    background-image: url("../image/thumb_kinder@1,5x.jpg");}
		.portfolio.babys{
		    background-image: url("../image/thumb_baby@1,5x.jpg");}	
		.portfolio.schwangerschaft{
		    background-image: url("../image/thumb_schwangerschaft@1,5x.jpg");}	
		.portfolio.familie{
		    background-image: url("../image/thumb_familie@1,5x.jpg");}	
		.portfolio.portrait{
		    background-image: url("../image/thumb_portrait@1,5x.jpg");} 
		.portfolio.hunde{
		    background-image: url("../image/thumb_hunde@1,5x.jpg");} 		     
		.nav ul li a{
			background-image: url(../image/nav_icon@2x.png);}
		.facebook{
			background-image: url(../image/facebook_logo_v2@2x.png);}
		.instagram{
			background-image: url(../image/instagram_logo@2x.png);}
}

@media 
	only screen and (min-width:481px) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-width:481px) and (   min--moz-device-pixel-ratio: 1.5),
	only screen and (min-width:481px) and (     -o-min-device-pixel-ratio: 3/2),
	only screen and (min-width:481px) and (        min-device-pixel-ratio: 1.5),
	only screen and (min-width:481px) and (                min-resolution: 144dpi),
	only screen and (min-width:481px) and (                min-resolution: 1.5dppx){
		#logo{
			background-image: url(../image/logo_large_v4@2x.png);}
		.portfolio.kinder{
		    background-image: url("../image/thumb_kinder@2x.jpg");}
		.portfolio.babys{
		    background-image: url("../image/thumb_baby@2x.jpg");}	
		.portfolio.schwangerschaft{
		    background-image: url("../image/thumb_schwangerschaft@2x.jpg");}	
		.portfolio.familie{
		    background-image: url("../image/thumb_familie@2x.jpg");}	
		.portfolio.portrait{
		    background-image: url("../image/thumb_portrait@2x.jpg");}
		.portfolio.hunde{
		    background-image: url("../image/thumb_hunde@2x.jpg");}
		.facebook{
			background-image: url(../image/facebook_logo_v2@2x.png);}
		.instagram{
			background-image: url(../image/instagram_logo@2x.png);}
			
}