@charset "utf-8";
/* CSS Document */

/* Reset margin, padding. */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

/* Layout */

html {
	-webkit-text-size-adjust: 100%; 
}

body {
	font-family: Verdana, Lucida, sans-serif;
	font-size: 16px;
	background-color: #fffbec;
	margin: 0 auto;
}

header {
	margin: 0 auto;
	padding: 0 6%;
}

img {
	width: 100%;
	display: block;
}

nav {
	background-color: #efdccb;
	text-align: center;
	margin: 0 6%;
}

nav ul {
	list-style-type: none;
	display: inline-block;
}

nav ul li {
	float: left;
	background-color: #e6c5ab;
	padding: 5px;
	margin: 2px 2px;
	letter-spacing: 1px;
}

nav ul a li {
	color: #330414;
	text-align: center;
	text-decoration: none;
}

nav ul a li:hover {
	color: #fffbec;
	background-color: #330414;
}

main {
	clear: both;
	background-color: #fffbec;
	margin: 0 6%;
	
}

main h1 {
	color: #007a83;
	font-weight: 500;
}

main ul {
	margin: 3%;
	list-style-image: url(../images/point14.png);
}

main ul li {
	margin: 0.5em;
	color: #330414;
}

main ul li:hover {
	cursor: pointer;
}

main img {
	margin: 0 auto;
	max-width: 390px;
}

footer {
	color: #333;
	margin: 0 6% 3% 6%;
	font-size: 0.8em;
	text-align: center;
	line-height: 1.5em;
}

#mapa-dojazd {
	margin: 0 auto;
	max-width: 548px;
}

.active {
	color: #fffbec;
	background-color: #a4ccbf;
}

.zabiegi-li {
	text-decoration: underline;
}

.zabiegi-tresc {
	background-color: #ECD7C4;
	display: none;
	padding: 2%;
	font-size: 0.9em;
}

#kontakt-p {
	line-height: 1.6em;
}

.kontakt-pola {
	text-decoration: none;
}

.kontakt-nazwy {
	font-weight: bold;
	color: #330414;
}

.kontakt-numery {
	color: #007a83;
	border-bottom: 1px solid #007a83;
}

/* Media max-width 479px */

@media (max-width: 479px) {

	body {
		max-width: 479px;
	}

	#header-img-pc {
		display: none;
	} 
	
	img {
		max-width: 479px;
	}
	
	nav ul li {
		font-size: 1em;
	}

	main h1 {
		font-size: 1.1em;
		line-height: 1.3em;
		text-align: center;
	}
	
	main ul {
		font-size: 0.9em;
	}
	
	#content-text {
		line-height: 1.2em;
		background-color: #efdccb;
		padding: 3%;
	}
	
	#content-image {
		padding: 3%;
	}

	#content-image img {
		padding: 3% 0;
	}
	
	#kontakt-p {
		text-align: center;
		font-size: 0.9em;
	}
	
	.kontakt-pola {
		font-size: 0.9em;
		display: inline-block;
		border: 1px solid #330414;
		text-align: center;
		width: 92%;
		padding: 2%;
		margin: 2%;
		background-color: #e6c5ab;
	}
}

/* Media mix width 480px and max-width 767px */

@media (min-width: 480px) and (max-width: 767px) {
	
	body {
		max-width: 767px;
	}

	#header-img-pc {
		display: none;
	}
	
	nav ul li {
		font-size: 1.1em;
		width: 120px;
	}
	
	main h1 {
		font-size: 1.2em;
		line-height: 1.3em;
		text-align: center;
	}
	
	main ul {
		font-size: 1em;
	}
	
	#content-text {
		line-height: 1.2em;
		background-color: #efdccb;
		padding: 3%;
	}
	
	#content-image {
		margin: 3%;
	}

	#content-image img {
		padding: 3% 0;
	}
	
	#kontakt-p {
		text-align: center;
	}
	
	.kontakt-pola {
		display: inline-block;
		border: 1px solid #330414;
		text-align: center;
		width: 92%;
		padding: 2%;
		margin: 2%;
		background-color: #e6c5ab;
	}
}

/* Media mix width 768px and max-width 999px */

@media (min-width: 768px) and (max-width: 999px){
	
		
	body {
		max-width: 999px;
	}

	#header-img-mobile {
		display: none;
	} 
	
	nav {
		width: 53.68%;
	}
	
	nav ul li {
		font-size: 1.1em;
		width: 120px;
	}
	
	main h1 {
		font-size: 1.2em;
		line-height: 1.3em;
	}
	
	main ul {
		font-size: 1.1em;
	}

	#content-text {
		width: 55%;
		padding: 3%;
		line-height: 1.2em;
		display: inline-block;
		background-color: #efdccb;
	}
	
	#content-image {
		max-width: 31%;
		display: inline-block;
		padding-left: 3%;
		margin-top: -5.7%;
		vertical-align: top;
	}
	
	#content-image img {
		padding: 3%;
	}
}

/* Media mix width 1000px */

@media (min-width: 1000px){
	
	body {
		max-width: 1000px;
	}

	#header-img-mobile {
		display: none;
	}
	
	nav {
		width: 53.68%;
	}
	
	nav ul li {
		font-size: 1.3em;
		width: 150px;
	}
	
	main h1 {
		font-size: 1.2em;
		line-height: 1.3em;
	}
	
	main ul {
		font-size: 1.1em;
	}
	
	#content-text {
		width: 55%;
		padding: 3%;
		line-height: 1.2em;
		display: inline-block;
		background-color: #efdccb;
		
	}
	
	#content-image {
		max-width: 31%;
		display: inline-block;
		padding: 3%;
		margin-top: -8.5%;
		vertical-align: top;
	}
	
	#content-image img {
		padding: 3%;
	}
}