@font-face {
	font-family: Encode Normal;
	src: url('fonts/encode_normal.ttf');
}

@font-face {
	font-family: Encode Medium;
	src: url('fonts/encode_medium.ttf');
}

@font-face {
	font-family: Encode Bold;
	src: url('fonts/encode_bold.ttf');
}

@font-face {
  font-family: 'Font Awesome';
  src: url('fonts/FontAwesome/fontawesome-webfont.eot?v=4.2.0');
  src: url('fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/FontAwesome/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/FontAwesome/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/FontAwesome/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
}

@font-face {
	font-family: Bullets;
	src: url('fonts/bullets.ttf');
}

@font-face {
	font-family: 'ForoRounded';
	src: url('fonts/ForoRounded/2C8B1E_0_0.woff');
	src: url('fonts/ForoRounded/2C8B1E_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/ForoRounded/2C8B1E_0_0.woff2') format('woff2'),url('fonts/ForoRounded/2C8B1E_0_0.woff') format('woff'),url('fonts/ForoRounded/2C8B1E_0_0.ttf') format('truetype');
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: #FFFFFF; 
}

::-webkit-scrollbar-thumb {
    background-color: #DADADA; 
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden; /* sprawdzic dla Safari */
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#contentContainer {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#wrapper {
	width: 400%;
	height: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	transition: all .5s ease-in-out;
}

.content {
	float: left;
	width: 25%;
	height: 100%;
	white-space: normal;
	text-align: center;
	padding-top: 70px;
}

div.middle-content {
	position: absolute;
	top: 6.7%;
	padding: 4% 5%;
	width: 100%;
	height: 86.6%;
	overflow: auto;
}

	div.middle-content p {
		margin: 0;
		margin-bottom: 5vh;
		font-family: Encode Normal;
		font-size: 2.8vh;
		color: #323232;
		text-align:justify;
		line-height: 5vh;
	}
	
		div.middle-content p a:link {
			font-family: ForoRounded;
			color: #323232;
			text-decoration: none;
			letter-spacing: 0.15vw;
		}
		
		div.middle-content p a:visited  {
			color: #323232;
		}
		
		div.middle-content p a:hover {
			background-color: #DADADA;
		}
		
		div.middle-content p a:active {
			color: #323232;
		}
		
div.bottom-content {
	position: absolute;
	top: 6.7%;
	padding: 4% 5%;
	width: 100%;
	height: 76.6%;
	overflow: auto;
	
}

	div.bottom-content p {
		font-family: Encode Normal;
		font-size: 2.8vh;
		color: #323232;
		text-align: justify;
		line-height: 4.1vh;
		margin: 0;
	}
	
		div.bottom-content p a:link {
			font-family: ForoRounded;
			color: #323232;
			text-decoration: none;
			letter-spacing: 0.15vw;
		}
		
		div.bottom-content p a:visited  {
			color: #323232;
		}
		
		div.bottom-content p a:hover {
			background-color: #DADADA;
		}
		
		div.bottom-content p a:active {
			color: #323232;
		}
	
img.float-right {
	float: right;
	margin-top: 0.5%;
	margin-left: 4%;
	margin-bottom: 0;
	height: 35vmin;
	width: 35vmin;
	shape-outside: circle();
	-webkit-shape-outside: circle();
	shape-margin: 0;
}

div.oferta {
	display: flex;
	justify-content: space-between;
}

div.zawartosc {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 45%;
	height: 100%;
}

	div.zawartosc .podstawowe {
		background: url("images/o_podstawowe.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .zabawy {
		background: url("images/o_zabawy.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .kontakt {
		background: url("images/o_kontakt.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .pielegnacja {
		background: url("images/o_pielegnacja.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .podawanie {
		background: url("images/o_podawanie.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .wizyty {
		background: url("images/o_wizyty.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .spacery {
		background: url("images/o_spacery.jpg") no-repeat left center;
		background-size: auto 100%;
	}
	
	div.zawartosc .dodatkowo {
		background: url("images/o_dodatkowo.jpg") no-repeat left center;
		background-size: auto 100%;
	}

	div.zawartosc div.punkt {
		display: table;
		height: 19%;
		width: 100%;
	}
	
		div.zawartosc div.punkt p {
			display: table-cell;
			vertical-align: middle; 
			text-align: left;
			padding-left: 7.5vw;
			font-family: Encode Medium;
			font-size: 2.5vh;
			color: #4D4D4D;
			line-height: 3.2vh;
		}
		
			div.zawartosc div.punkt p span {
				display: block;
				font-family: Encode Bold;
				font-size: 2.8vh;
				color: #323232;
			}
		
		
	
div.cennik {
	display: flex;
	justify-content: space-around;
}
	
div.ceny {
	position: relative;
	width: 20%;
	height: 100%;
}

	.dojazd {
		background: url("images/dojazd.jpg") no-repeat center top;
		background-size: auto 42%;
	}
	
		.ust_doj {
			padding: 4% 0;
		}
	
	.wizyta {
		background: url("images/opieka.jpg") no-repeat center top;
		background-size: auto 42%;
	}
	
		.ust_wiz {
			padding: 3% 0;
		}
	
	.akcesoria {
		background: url("images/akcesoria.jpg") no-repeat center top;
		background-size: auto 42%;
	}
	
		.ust_akc {
			bottom: 8% !important;
			height: 50% !important;
			border-bottom: none !important;
		}
		
		.ust_akc2 {
			padding-bottom: 5% !important;
		}
	
	div.ceny div.tresc {
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 58%;
		width: 100%;
		border-top: 0.5vh solid #378023;
		border-bottom: 0.5vh solid #378023;
	}
	
		div.ceny div.tresc h2 {
			display: inline-block;
			font-family: Encode Bold;
			font-size: 4.5vh;
			font-weight: normal;
			color: #323232;
			margin: auto;
		}
		
			div.ceny div.tresc h2 span {
				display: block;
				font-family: Encode Medium;
				font-size: 2.5vh;
				color: #4D4D4D;
			}
			
			div.ceny div.tresc h2 span.big {
				display: block;
				font-family: Encode Medium;
				font-size: 3.4vh;
				color: #4D4D4D;
				margin-bottom: 1vh;
			}
			
			div.ceny div.tresc p.kot2 {
				display: inline-block;
				font-family: Encode Medium;
				font-size: 3.4vh;
				color: #4D4D4D;
				text-align: center;
				line-height: 3.5vh;
				padding: 0 5%;
				margin: auto;
			}
			
				div.ceny div.tresc p.kot2 span {
					display: block;
					font-family: Encode Bold;
					font-size: 3.1vh;
					color: #323232;
				}
				
			div.ceny div.tresc p.kot3 {
				display: inline-block;
				font-family: Encode Medium;
				font-size: 3.1vh;
				color: #4D4D4D;
				text-align: center;
				line-height: 3.4vh;
				padding: 0 5%;
				margin: auto;
			}
			
				div.ceny div.tresc p.kot3 span {
					display: block;
					font-family: Encode Bold;
					font-size: 2.8vh;
					color: #323232;
				}
		
		div.ceny div.tresc p {
			display: inline-block;
			font-family: Encode Medium;
			font-size: 2.8vh;
			color: #4D4D4D;
			text-align: center;
			line-height: 4vh;
			padding: 0 5%;
			margin: auto;
		}
		
			div.ceny div.tresc p span {
				display: block;
				font-family: Encode Bold;
				font-size: 3.1vh;
				color: #4D4D4D;
				margin-top: 5%;
			}
			
		div.ceny div.tresc p.akc {
			display: inline-block;
			font-family: Encode Normal;
			font-size: 2.5vh;
			color: #4D4D4D;
			text-align: center;
			line-height: 3.3vh;
			padding: 0 5%;
			margin: auto;
		}
		
			div.ceny div.tresc p.akc span {
				display: block;
				font-family: Encode Bold;
				font-size: 2.8vh;
				color: #323232;
			}
			
		div.ceny div.info {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 8%;
			width: 100%;
			display: inline-block;
			font-family: Encode Normal;
			font-size: 1.9vh;
			color: #FFFFFF;
			text-align: center;
			line-height: 2vh;
			margin: 0;
			padding: 1.2% 5%;
			background-color: #378023;
			border-radius: 3vh;
		}

div.referencje {
	display: flex;
	justify-content: space-around;
}

div.opinia {
	height: 100%;
	width: 24%;
}

	div.referencje .small {
		width: 24%;
	}

	div.referencje .big {
		width: 58%;
	}

	div.opinia img.foto_middle {
		height: 25%;
	}
	
	div.opinia img.foto_bottom {
		height: 29%;
	}

	div.opinia h2 {
		display: block;
		margin: 1.5vh 0;
		width: 100%;
		font-family: Encode Medium;
		font-size: 3.4vh;
		font-weight: normal;
		color: #323232;
	}
	
	div.opinia p.tresc {
		width: 100%;
		margin-bottom: 0;
		font-family: ForoRounded;
		color: #4D4D4D;
		font-size: 2.5vh;
		text-align: justify;
		line-height: 3.6vh;
	}
	
	div.opinia p.podpis {
		display: inline-block;
		width: 100%;
		margin: 0;
		font-family: Encode Medium;
		color: #4D4D4D;
		font-size: 2.5vh;
		text-align: right;
	}
	
div.zgloszenia {
	display: flex;
	justify-content: space-around;
}

div.zgloszenia_opis {
	height: 100%;
	width: 80%;
}
	
	div.zgloszenia_opis img.foto{
		height: 35%;
	}
	
	div.zgloszenia_opis h2 {
		display: block;
		margin: 1.5vh 0;
		width: 100%;
		font-family: Encode Medium;
		font-size: 3.4vh;
		font-weight: normal;
		color: #323232;
	}
	
	div.zgloszenia_opis ol {
		list-style-type: decimal;
		width: 100%;
		margin-bottom: 0;
		font-family: ForoRounded;
		color: #4D4D4D;
		font-size: 2.5vh;
		text-align: justify;
		line-height: 5.5vh;
	}
	
div.certyfikaty {
	display: flex;
	justify-content: space-between;
}

div.certyfikat {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	width: 50%;
	height: 100%;
	padding: 0;
	margin: 0;
}
	
	div.certyfikat a {
		display: block;
		height: 65%;
	}
	
		div.certyfikat a.coape {
			background: url("images/COAPE.jpg") no-repeat center center;
			background-size: auto 100%;
		}
	
		div.certyfikat a.dyplom {
			background: url("images/dyplom.jpg") no-repeat center center;
			background-size: auto 100%;
		}
	
	div.certyfikat p {
		font-family: ForoRounded;
		color: #323232;
		font-size: 2.6vh;
		text-align: center;
		text-transform: uppercase;
	}
	
	div.certyfikat span{
		font-size: 3.1vh;
		text-transform: uppercase;
	}
	
#headerTOPA {
	position: absolute;
	top: 0px;
	width: 50%;
	height: 16.7%;
	background-color: rgba(0,0,0,0.75);
	color: #FFFFFF;
	padding: 0px 5%;
	font-family: Encode Medium;
	transition: top .5s ease-in-out;
}

#headerTOPB {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
	width: 50%;
	height: 16.7%;
	background-color: rgba(0,0,0,0.75);
	color: #FFFFFF;
	padding: 0px 5%;
	font-family: Encode Medium;
	transition: top .5s ease-in-out;
}

img.logo {
	max-height: 55%;
	vertical-align: middle;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	img.logo {
		max-height: 45%;
	}
}

span.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

p.paragraf {
	float: left;
	font-size: 12px;
	text-align: center;
	display: inline-block;
	width: 50%;
	margin-top: 30px;
	line-height: 2.85vh;
	color: rgb(85,105,110);
}

p.DaneAdresowe {
	display: inline-block;
	text-align: right;
	vertical-align: middle;
	margin: 0;
	line-height: 2.85vh;
}

span.ImieNazwisko {
	font-size: 3vh;
}

span.Telefon {
	font-size: 2vh;
}

span.E-mail {
	font-size: 2vh;
}				

#itemOne {
	position: relative;
	background: url("images/cat1.jpg") no-repeat center bottom;
	background-size: 100% 100%;
	background-size: cover;
}

#itemTwo {
	position: relative;
	background: url("images/cat2.jpg") no-repeat center center;
	background-size: 100% 100%;
	background-size: cover;
}

#itemThree {
	position: relative;
	background: url("images/cat3.jpg") no-repeat center bottom;
	background-size: 100% 100%;
	background-size: cover;
}

#itemFour {
	position: relative;
	background: url("images/cat4.jpg") no-repeat center center;
	background-size: 100% 100%;
	background-size: cover;
}

#itemFive {
	position: relative;
	background-color: white;
}

#itemSix {
	position: relative;
	background-color: white;
}

#itemSeven {
	position: relative;
	background-color: white;
}

#itemEight {
	position: relative;
	background-color: white;
}

#itemNine {
	position: relative;
	background-color: white;
}

#itemTen {
	position: relative;
	background-color: white;
}

#itemEleven {
	position: relative;
	background-color: white;
}

#itemTwelve {
	position: relative;
	background-color: white;
}

#itemThirteen {
	position: relative;
	background-color: white;
}

#itemFourteen {
	position: relative;
	background-color: white;
}

#itemFifteen {
	position: relative;
	background-color: white;
}

#itemSixteen {
	position: relative;
	background-color: white;
}

#itemSeventeen {
	position: relative;
	background-color: white;
}

#itemEighteen {
	position: relative;
	background-color: white;
}

#itemNineteen {
	position: relative;
	background-color: white;
}

#itemTwenty {
	position: relative;
	background-color: white;
}

#itemTwentyone {
	position: relative;
	background-color: white;
}

#itemTwentytwo {
	position: relative;
	background-color: white;
}

#itemTwentythree {
	position: relative;
	background-color: white;
}

#itemTwentyfour {
	position: relative;
	background-color: white;
}

div.navLinks {
	border: 0px solid yellow;
	position: absolute;
	bottom: 38%;
	width: 100%;
	height: 5%;
	text-align: center;
}

	div.navLinks ul {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

		div.navLinks ul li {
			display: inline-block;
			list-style: none;
			background-color: rgba(255,255,255,0.3);
			border-radius: 50%;
			margin: 0.75% 0.4%;
			padding: 0.75vh;
		}

			div.navLinks ul li.active {
				background-color: rgba(255,255,255,0.8);
			}

.pandemia {
	position: absolute;
	top: 16.7%;
	width: 100%;
	background-color: rgba(136,41,47,0.75);
	font-size: 2.2vh;
	color: #FFFFFF;
	padding: 1.2vh 0;
	font-family: Encode Medium;
}

div.header1a {
	position: absolute;
	bottom: 0px;
	width: 15%;
	height: 27.8%;
	background-color: rgba(0,0,0,0.6);
	color: #FFFFFF;
	text-align: center;
}

	div.header1a a {
		display: inline-block;
		padding: 8vh 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
		background: none;
		color: #FFFFFF;
		font-size: 4vmin;
		font-family: Font Awesome;
		cursor: pointer;
	}
	
		div.header1a a.inactive {
			color: rgba(255,255,255,0.25);
			cursor: default;
		}

div.header1b {
	position: absolute;
	bottom: 0px;
	left: 15%;
	width: 70%;
	height: 27.8%;
	background-color: rgba(0,0,0,0.6);
	color: #FFFFFF;
	text-align: center;
}

	div.header1b h1 {
		margin-top: 1%;
		margin-bottom: 0.1%;
		font-size: 7.2vmin;
		font-family: Encode Medium;
		font-weight: normal;
	}

	div.header1b h2 {
		margin: 0;
		font-size: 3.4vmin;
		font-family: Encode Normal;
		font-weight: normal;
	}

div.header1c {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 15%;
	height: 27.8%;
	background-color: rgba(0,0,0,0.6);
	color: #FFFFFF;
	text-align: center;
}

	div.header1c a {
		display: inline-block;
		padding: 8vh 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
		background: none;
		color: #FFFFFF;
		font-size: 4vmin;
		font-family: Font Awesome;
		cursor: pointer;
	}
	
		div.header1c a.inactive {
			color: rgba(255,255,255,0.25);
			cursor: default;
		}

div.header2 {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 6.7%;
	background-color: rgba(0,0,0,0.6);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}

div.header3a {
	position: absolute;
	top: 0px;
	width: 5%;
	height: 6.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}

div.header3b {
	position: absolute;
	top: 0px;
	left: 5%;
	width: 90%;
	height: 6.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}

	div.header3b h2 {
		display: inline-block;
		margin: 0;
		padding: 1.2vh 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
		background: none;
		color: #FFFFFF;
		font-size: 2.8vh;
		font-family: Encode Medium;
		font-weight: normal;
	}	

div.header3c {
	position: absolute;
	top: 0px;
	right: 0;
	width: 5%;
	height: 6.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}

div.header4a {
	position: absolute;
	bottom: 0px;
	width: 5%;
	height: 6.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}

div.header4b {
	position: absolute;
	bottom: 0px;
	left: 5%;
	width: 90%;
	height: 6.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}

	div.header4b h2 {
		display: inline-block;
		margin: 0;
		padding: 1.2vh 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
		background: none;
		color: #FFFFFF;
		font-size: 2.8vh;
		font-family: Encode Medium;
		font-weight: normal;
	}	

div.header4c {
	position: absolute;
	bottom: 0px;
	right: 0;
	width: 5%;
	height: 6.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 0px;
	font-family: Encode Medium;
}		

div.FOOTER-A {
	position: absolute;
	bottom: 0px;
	text-align: left;
	width: 50%;
	height: 16.7%;
	background-color: rgba(0,0,0,1);
	padding: 0px 5%;
}

div.FOOTER-B {
	position: absolute;
	bottom: 0px;
	right: 0px;
	text-align: right;
	width: 50%;
	height: 16.7%;
	background-color: rgba(0,0,0,1);
	color: #FFFFFF;
	padding: 0px 5%;
	font-family: Encode Medium;
}

.button-big {
	display: inline-block;
	padding-top: 1.2vh;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background: none;
	color: #FFFFFF;
	font-size: 2.8vh;
	font-family: Encode Medium;
	cursor: pointer;
}

	.button-big:hover {
		text-decoration: none;
	}

.button-small {
	display: inline-block;
	padding: 1.2vh 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background: none;
	color: #FFFFFF;
	font-size: 4vmin;
	font-family: Font Awesome;
	cursor: pointer;
}

	.button-small:hover {
		text-decoration: none;
	}