body {
	font-size: 100%;
}

p, a {
	font-size: 16px;
	font-family: 'Andada', sans-serif;
	line-height: 20px; 
}

h1, h2, h3 {
	font-family: 'Alegreya Sans SC', sans-serif;
}

h1 {
	font-size: 32px;
	line-height: 20px;
}

h2 {
	font-size: 26px;
	line-height: 22px;
}

h3 {
	font-size: 22px;
	line-height: 17px;
}


.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

p.blank {
	color: #FFFFFF;
}

.active-about-nav {
	border-top: 1px solid #a52188;
	border-left: 1px solid #a52188;
	border-right: 1px solid #a52188;
	border-bottom: 0px !important;
	background-color: #FFFFFF !important;
	color: #000000 !important;
}

.no-active-about-nav-r {
	border-top: 1px solid #a52188;
	border-right: 1px solid #a52188;
	border-bottom: 1px solid #a52188;
	background-color: #a52188;
	color: #FFFFFF;
}

.no-active-about-nav-l {
	border-top: 1px solid #a52188;
	border-left: 1px solid #a52188;
	border-bottom: 1px solid #a52188;
	background-color: #a52188;
	color: #FFFFFF;
}

div.left-news {
	left: 0;
}

div.right-news {
	right: 0;
}

/* Mobile First */

.center-container {
	width: 98%;
	margin: 0 auto;
}

header {
	height: 60px;
	border-bottom: solid 3px #f3742c; 
}
	nav.normal-menu {
		display: none;
	}

	img.logo {
		width: 175px;
		height: 46px;
		padding-top: 7px;
		margin: 0px auto;
		display: block;
	}

	img.hamburger {
		position: absolute;
		top: 15px;
		right: 25px;
		z-index: 99;
	}

	nav.mobile-menu ul {
		display: none;
		position: absolute;
		width: 100%;
		height: 50px; 
		background-color: #FFFFFF;
		top: 63px;
		z-index: 99;
	}

		nav.mobile-menu ul li {
			height: 50px;
			text-align: center;
			
		}

			nav.mobile-menu ul li a {
				width: 100%;
				height: 34px;
				display: block;
				padding-top: 17px;
				color: #666666;
			}

				nav.mobile-menu ul li a:hover {
					background-color: #f3742c;
					color: #FFFFFF; 
				}


.slider {
	width: 100%;
	height: 300px;
	border-bottom: solid 3px #f3742c;
}

	img.left-arrow-slider, img.right-arrow-slider, div.slide {
		display: none;
	}

	div.mobile-slider {
		width: 100%;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		background-image: url("../img/slide_mobile.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

		div.mobile-slider h2 {
			color: #FFFFFF;
			text-align: center;
		} 
		
		div.mobile-slider a {
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			display: block;
			width: 70px;
			padding: 5px 15px;
			position: absolute;
			bottom: 40px;
			left: 0;
			right: 0;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
		}

		div.mobile-slider a:hover {
			background-color: #f3742c;
		}

.news {
	height: 610px;
	width: 100%;
	position: relative;
	border-bottom: solid 3px #f3742c;
}
	img.left-arrow-news, img.right-arrow-news {
		display: none;
	}

	img.up-arrow-news {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		display: block;
		width: 50px;
		left: 0;
		right: 0;
		top: 0;
	}
	img.down-arrow-news {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.news h2 {
		padding-top: 60px;
		text-align: center;
	}

		.news h2 a {
			font-size: 26px;
			line-height: 22px;
			font-family: 'Alegreya Sans SC', sans-serif;
			color: #f3742c;
		}

	.news-slider {
		position: relative;
		height: 400px;
	}

	.news-slider div {
		height: 400px;
		position: absolute;
		top: 30px;
	}

		ul.main-news-box {
			height: 400px;
		}

			ul.main-news-box h3 {
				text-align: center;
			}
			
			ul.main-news-box li:nth-child(2),ul.main-news-box li:nth-child(3),ul.main-news-box li:nth-child(4) {
				padding-top: 30px;
			}

			ul.main-news-box li:nth-child(3),ul.main-news-box li:nth-child(4) {
				text-align: center;
			}

			ul.main-news-box li a {
				padding: 5px 15px;
				border: 1px solid #a52188;
				color: #a52188;
			}

			ul.main-news-box li a:hover {
				background-color: #a52188;
				color: #FFFFFF;
			}

			ul.content-news-box li {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}

			ul.content-news-box li:nth-child(1) {
				float: left;
				width: 30%;
				height: 220px;
			}

			ul.content-news-box li:nth-child(2) {
				float: left;
				width: 70%;
				padding-top: 0px;
			}

				ul.content-news-box li p {
					padding-left: 5px;

				}

.services {
	width: 100%;
    position: relative;
    background-image: url("../img/oferta_bg.jpg");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: solid 3px #f3742c;
}

	.services h2 {
		padding-top: 30px;
		text-align: center;
		color: #FFFFFF;
	}

	ul.content-services-box li img {
		display: block;
		margin: 0 auto;
		padding-top: 30px;
	}
	
	ul.content-services-box li p, ul.content-services-box li h3 {
		text-align: center;
		color: #FFFFFF;
		padding-top: 30px;
	}

	ul.content-services-box li a {
		margin: 30px auto;
		display: block;
		text-align: center;
		padding: 5px 15px;
		border: 1px solid #FFFFFF; 
		width: 100px;
		color: #FFFFFF;
	}

	ul.content-services-box li a:hover {
		color: #FFFFFF;
		background-color: #f3742c;
	}

	ul.content-services-box li a:nth-child(last) {
		margin-bottom: 30px;
	}

	ul.content-services-box li a.mail_services {
		border: 0;
		display: inline;
		margin: 0;
		padding: 0;
		color: #f3742c;
	}

	ul.content-services-box li a.mail_services:hover {
		background-color: transparent !important;
	}

	ul.content-services-box li:nth-child(3) p {
		padding-bottom: 30px;
	}

div.about-container, nav.about-menu, h2.desktop, ul.main-about-box {
	display: none;
}

.about h2 {
	padding-top: 30px;
	text-align: center;
}

.about h3 {
	padding-top: 30px;
	text-align: center;
}

.about p {
	padding-top: 30px;
	text-align: center;
}

footer a {
	color: #f3742c;
}

footer a:hover {
	font-weight: bold;
}

ul.main-footer-box li:nth-child(4) {
	display: none;
}

ul.main-footer-box {
	padding-top: 30px;
}
ul.main-footer-box li {
	padding-bottom: 30px;
}	
	ul.content-footer-box li {
		text-align: center;
		padding-bottom: 0px !important;
	}

	ul.content-footer-box li h3 {
		padding-top: 30px;
		text-align: center;
	}

	ul.content-footer-box li:nth-child(4) {
		display: block !important;
	}

	ul.main-footer-box li:nth-child(2) ul.content-footer-box li:nth-child(6), 
	ul.main-footer-box li:nth-child(2) ul.content-footer-box li:nth-child(12) {
		padding-bottom: 30px !important;
	}

aside {
	text-align: center;
	background-color: #f3742c;
}

	aside a {
		color: #FFFFFF;
	}


@media only screen and (min-width: 323px) {
	.news{
		height: 580px;
	}
}

@media only screen and (min-width: 375px) {
	.center-container {
		width: 96%;
	}

	div.mobile-slider a {
		bottom: 50px;
	}
}

@media only screen and (min-width: 425px) {

	.center-container {
		width: 94%;
	}
	.slider {
		height: 350px;
	}

	div.mobile-slider {
		height: 350px;
	}

	div.mobile-slider a {
		bottom: 60px;
	}

	.services h2 {
		padding-top: 50px;
	}

	ul.content-services-box li img {
		padding-top: 50px;
	}

	ul.main-services-box li:nth-child(3) ul.content-services-box li:nth-child(4) a {
		margin: 50px auto;
	}
}

@media only screen and (min-width: 768px) {
	.news {
		height: 530px;
	}

	ul.content-news-box li:nth-child(1) {
		height: 170px;
	}

	ul.main-news-box h3 {
		padding-top: 15px;
	}

	ul.content-news-box li:nth-child(2) {
		padding-top: 30px;
	}

	ul.content-services-box li h3 {
		padding-top: 50px;
	}

	ul.content-services-box li p {
		padding-top: 50px;
	}

	ul.content-services-box li a {
		margin: 50px auto;
	}

	ul.content-services-box li:nth-child(3) p {
		padding-bottom: 50px;
	}

	img.icon-hurtownia, 
	img.icon-zoologiczny {
		padding-top: 0px !important;
	}

	ul.main-about-box {
		display: inline-block;
		margin-top: 50px;
		border-top: solid 3px #f3742c;
		border-bottom: solid 3px #f3742c;
	}

	ul.main-about-box li {
		width: 33.33%;
		float: left;
		height: 180px;
	}

	.about h2 {
		padding-top: 40px;
	}

	.about p {
		padding-top: 50px;
	}

	ul.main-about-box li:nth-child(1) ul li {
		background-image: url("../img/jakosc.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ul.main-about-box li:nth-child(2) ul li {
		background-image: url("../img/terminowosc.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ul.main-about-box li:nth-child(3) ul li {
		background-image: url("../img/dostepnosc.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ul.main-about-box li:nth-child(4) ul li {
		background-image: url("../img/roznorodnosc.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ul.main-about-box li:nth-child(5) ul li{
		background-image: url("../img/pomoc.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ul.main-about-box li:nth-child(6) ul li {
		background-image: url("../img/konkurencyjnosc.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	ul.content-about-box li {
		width: 100%;
	}

	ul.main-about-box li:hover {
		background-image: none !important;
		background-color: #f3742c !important;
		animation-name: about-animation;
		animation-duration: 1s;
		cursor: pointer;
	}

	@keyframes about-animation {
		0% {	
			background-color: #f3742c;
			opacity: 0;
		}
		100% {
			background-color: #f3742c;
			opacity: 1.0;
		}
	}

	ul.content-about-box li h3 {
		padding-top: 30px;
		color: #FFFFFF;
	}

	ul.content-about-box li p {
		color: #FFFFFF;
		padding-top: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}

	h2.desktop {
		display: block;
	}

	nav.about-menu {
		display: inline-block;
		width: 100%;
		margin-top: 50px;
	}
	
	nav.about-menu ul {
		width: 100%;
	}
	nav.about-menu ul li {
		width: 24%;
		float: left;
	}
	
	nav.about-menu ul li p {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	nav.about-menu ul li:nth-child(1),
	nav.about-menu ul li:nth-child(4) {
		border-bottom: 1px solid #a52188;
	}

	nav.about-menu ul li:nth-child(2):hover,
	nav.about-menu ul li:nth-child(3):hover {
		cursor: pointer;
	}

	nav.about-menu ul li:nth-child(1) p,
	nav.about-menu ul li:nth-child(4) p {
		padding-bottom: 16px;
	}

	div.about-container {
		display: block;
		border-bottom: solid 1px #a52188;
		position: relative;
		height: 380px;
	}

	div.about-container div {
		position: absolute;
		width: 100%;
	}

	div.about-container div:nth-child(1) p {
		padding: 40px 50px 50px 50px;
	}

	div.about-container div:nth-child(1) ul {
		width: 100%;
	}

	div.about-container div:nth-child(1) ul li {
		width: 33.33%;
		float: left;
		height: 150px;
	}

	div.about-container div:nth-child(1) ul li:nth-child(1) {
		background-image: url("../img/about1.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	div.about-container div:nth-child(1) ul li:nth-child(2) {
		background-image: url("../img/about3.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	div.about-container div:nth-child(1) ul li:nth-child(3) {
		background-image: url("../img/about2.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	div.about-container div:nth-child(1) span {
		color: #f3742c;
		font-weight: bold;
	}

	div.about-container div:nth-child(1) a {
		color: #f3742c;
	}

	ul.main-brand-box {
		width: 100%;
		margin: 30px auto;
		display: inline-block;
	}

	ul.main-brand-box li {
		width: 33.33%;
		float: left;
		height: 100px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative; 
	}

	ul.main-brand-box li h3 {
		padding-top: 0;
	}
	
	ul.main-brand-box li:nth-child(odd) {
		background-color: #a52188;
		color: #FFFFFF; 
	}

	ul.main-footer-box li {
		width: 33.33%;
		float: left;
		padding-bottom: 50px;
	}

	ul.content-footer-box li {
		width: 100%;
		float: none;
	}

	ul.content-footer-box li h3 {
		padding-bottom: 30px;
	}

}	

@media only screen and (min-width: 880px) {
	.center-container {
		width: 90%;
	}

	nav.mobile-menu {
		display: none;
	}

	header {
		height: 80px;
		white-space: nowrap;
	}

	img.logo {
		margin: 0 0 0 30px;
		width: 244px;
		height: 64px;
		padding-top: 8px;
		display: inline;
	}

	img.hamburger {
		display: none;
	}

	nav.normal-menu {
		display: inline-block;
		vertical-align: top;
		width: 60%;
		float: right;
	}

	nav.normal-menu ul {
		width: 100%;
	}

	nav.normal-menu ul li {
		float: left;
		height: 80px;
		width: 25%;
		text-align: center;
		text-transform: uppercase;
	}

	nav.normal-menu ul li a {
		color: #000000;
		display: block;
		width: 100%;
		height: 48px;
		padding-top: 32px;
	}

	nav.normal-menu ul li a:hover {
		background-color: #a52188;
		color: #FFFFFF;
	}

	.slider {
		height: 500px;
		position: relative;
	}

	div.slide {
		position: absolute !important;
		top: 0px;
		width: 100%;
	}

	div.slide h2 {
		color: #FFFFFF;
		padding-left: 40px;
		padding-right: 40px;
		text-align: center;
	}

	div.slide a {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		display: block;
		width: 70px;
		padding: 5px 15px;
		position: absolute;
		bottom: 100px;
		left: 0;
		right: 0;
		border: 1px solid #FFFFFF;
		color: #FFFFFF;
	}

	div.slide a:hover {
		background-color: #f3742c;
	}

	div.slide1 {
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		background-image: url("../img/slide1.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	div.slide2 {
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		background-image: url("../img/slide6.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	div.slide3 {
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		background-image: url("../img/slide5.jpg");
		background-repeat: no-repeat;
		background-position: 50%;
		
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	img.left-arrow-slider,
	img.right-arrow-slider {
		display: inline-block;
		position: absolute;
		z-index: 99;
		top: 207px;
		cursor: pointer;
	}

	img.left-arrow-slider {
		left: 15px;
	}

	img.right-arrow-slider {
		right: 15px;
	}

	div.mobile-slider {
		display: none;
	}

}

@media only screen and (min-width: 1024px) {
	img.up-arrow-news,
	img.down-arrow-news {
		display: none;
	}

	img.left-arrow-news,
	img.right-arrow-news {
		display: block;
		position: absolute;
		top: 230px;
		cursor: pointer;
		opacity: 0.1;
	}

	img.left-arrow-news:hover,
	img.right-arrow-news:hover {
		opacity: 1;
	}

	img.right-arrow-news {
		right: 0;
	}

	img.left-arrow-news {
		left: 0;
	}

	.news-slider div {
		width: 50%;
		float: left;
	}

	ul.main-news-box li {
		padding-top: 0px;
	}

	ul.main-services-box {
		padding-top: 50px;
	}

	ul.main-services-box li {
		width: 33.33%;
		float: left;
	}

	ul.content-services-box li {
		width: 100%;
		float: none;
	}

	img.icon-wedkarski {
		padding-top: 0px !important;
	}

	ul.content-services-box li p {
		padding-left: 15px;
		padding-right: 15px;
	}
	ul.content-services-box li:nth-child(3) {
		height: 200px;
	}

	ul.main-about-box li {
		height: 220px;
	}

	ul.content-about-box h3 {
		padding-top: 50px;
	}
}

@media only screen and (min-width: 1440px) {
	.center-container {
		width: 1200px;
	}
}