@import "skeleton.less";

/*
* FONTS
*/

@font-face {
    font-family: "Libre-Baskerville";
    src: url('../fonts/LibreBaskerville-Regular.ttf');
}
@font-face {
    font-family: "Libre-Baskerville";
    src: url("../fonts/LibreBaskerville-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Libre-Baskerville";
    src: url("../fonts/LibreBaskerville-Italic.ttf");
    font-style: italic;
}
/*
* COLORS
*/

@page-green: #cfeff1;
@green: #0fafb8;
@dark-green: #1f8aa1;
@dark-blue: #143557;
@blue: #01569a;
@light-blue: #e5eef5;
@dark-text: #3b3b3b;
@dark-grey: #686868;
@border-grey: #626262;
@outline-grey: #a4a4a4;
@grey: #a3a3a3;


/*
* GLOBAL
*/

body
{
	font-family: 'Libre-Baskerville', 'Arial', serif;
}

.wrapper-middle
{
	max-width: 970px;
}

.row
{
	margin: 0 15px;
	col
	{
		margin: 0 -15px;
	}
}

.wrapper-blue
{
	background: @page-green;
}

.green
{
	color: @green;
}

.dark-green
{
	color: @dark-green;
}

.dark-blue
{
	color: @dark-blue;
}

span
{
	font-size: 14px;
}

h1
{
	
}

h2
{
	font-size: 20px;
	color: @green;
	span
	{
		font-size: 24px;
	}
}

a
{
	text-decoration: none;
	.transition(all .2s ease-in-out);
	color: @dark-text;
	&:hover
	{
		color: @green;
		text-decoration: underline;
	}
}

p
{
	font-size: 14px;
	line-height: 24px;
	color: @dark-text;
	text-align:justify;
}


.green-line
{
	width: 100%;
	height: 8px;
	border-top: 3px solid @dark-grey;
	border-bottom: 2px solid @green;
	margin: 30px 0;
}


.blue-line
{
	width: 100%;
	height: 8px;
	border-top: 3px solid @dark-blue;
	border-bottom: 2px solid @blue;
	margin: 30px 0;
}

.center
{
	text-align: center;
}

input, textarea
{
	border: none;
	.border-radius(5px);
	color: @dark-blue;
	padding: 20px 15px;
	background: @light-blue;
	width: 100%;
	resize: none;
	font-size: 15px;
	font-family: 'Libre-Baskerville', 'Arial', sans-serif !important;
	&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
		color: @dark-blue;
		font-family: 'Libre-Baskerville', 'Arial', serif;
	}
	&::-moz-placeholder { /* Firefox 19+ */
		color: @dark-blue;
		font-family: 'Libre-Baskerville', 'Arial', serif;
	}
	&:-ms-input-placeholder { /* IE 10+ */
		color: @dark-blue;
		font-family: 'Libre-Baskerville', 'Arial', serif;
	}
	&:-moz-placeholder { /* Firefox 18- */
		color: @dark-blue;
		font-family: 'Libre-Baskerville', 'Arial', serif;
	}
}

input[type="submit"]
{
	background: @blue;
	display: inline-block;
	color: @white;
	font-size: 16px;
	padding: 10px;
}

.navigation
{
	display: none;
}

.next, .prev
{
	color: @dark-green;
}

.page-numbers.current
{
	font-size: 16px;
	color: @green;
}

.page-numbers
{
	position: relative;
	padding-left: 8px;
	padding-right: 2px;
	&:before, &:after
	{
		display: inline-block;
		content: '';
		width: 2px;
		height: 18px;
		top: 1px;
		position: absolute;
		left: 0;
		background: @border-grey;
	}
	&:after
	{
		left: 1;
		background: @outline-grey;
	}
}

.page-numbers.next, .page-numbers.prev
{
	&:before, &:after
	{
		display: none;
	}
}

.post-title
{
	margin-top: 20px;
	font-size: 20px;
	color: @dark-green;
	font-weight: bold;
}

.page-title
{
	background-image: url('../img/title-bg.png');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: @white;
	display: block;
	padding: 20px 0;
	.media-query({
		padding: 20px 0;
	},@rwd1);
	.media-query({
		padding: 54px 0;
	},@rwd2);
	margin-bottom: 50px;
	h1
	{
		font-size: 20px;
		.media-query({
			font-size: 24px;
		},@rwd1);
		.media-query({
			font-size: 30px;
		},@rwd2);
	}
}

.content-page 
{
	margin-bottom: 20px;
	p:first-letter
	{
		font-size: 30px;
		padding-left: 5px;
	}
}

.oferty
{
	text-align: center;
	margin: 0;
	margin-bottom: 50px;
	.oferta
	{
		float: none;
		display: inline-block;
		position: relative;
		width: 100% !important;
		margin-bottom: 5px;
		.media-query({
			width: 49.7% !important;
		},@rwd1);
		.media-query({
			width: 33% !important;
		},@rwd2);
		
		height: 275px;
		.overflow-wrapper
		{
			overflow: hidden;
			margin-left: 6.5px;
			width: calc(~"100% - 13px");
			height: calc(~"100% - 15px");
		}
		.bg
		{
			position: absolute;
			top: 7px;
			left: 7px;
			right: 7px;
			bottom: 7px;
			z-index: -1;
			background-repeat: no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			.transition(all .3s ease-in-out);
		}
		h2
		{
			position: relative;
			text-transform:uppercase;
			top: 50%;
			.transform(translate(0, -50%));
			.transition(all .2s ease-in-out);
			padding: 20px 0px;
			font-size: 14px;
			line-height: 22px;
			font-weight: bold;
			display: block;
			z-index: 2;
			&:after
			{
				.transition(all .2s ease-in-out);
				position: absolute;
				display: block;
				content: '';
				background: @white;
				opacity: 0.9;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}
		}
		.left-button
		{
			.transition(all .7s ease-in-out);
			background: transparent;
			.border-radius(5px);
			border: 1px solid @green;
			display: inline;
			font-family: "Archivo Narrow", sans-serif;
			position: relative;
			left: -10px;
			padding: 6px;
			bottom: -200px;
			a
			{
				color: @green;
				text-decoration: none;
				font-size: 15px;
			}
		}
		.right-button
		{
			.transition(all 1s ease-in-out);
			background: @green;
			.border-radius(5px);
			display: inline;
			position: relative;
			font-family: "Archivo Narrow", sans-serif;
			padding: 6px;
			right: -10px;
			bottom: -300px;
			a
			{
				color: @white;
				text-decoration: none;
				font-size: 15px;
			}
		}
		.content
		{
			position: relative;
			left: -1000px;
			.transition(all .5s ease-in-out);
			padding: 10px;
			margin-bottom:10px;
			p
			{
				line-height: 18px;
				font-size: 13px;
			}
			
		}
		&:hover
		{
			.bg
			{
				opacity: 0.1;
			}
			h2
			{
				top: 50px;
				&:after
				{
					opacity: 0;
				}
			}
			.content
			{
				left: 0px;
			}
			.left-button, .right-button
			{
				bottom: -0px;
			}
		}
	}
}


/*
* HEADER
*/

.blue-top-wrapper
{
	height: 40px;
	display: none;
	.media-query({
		display: block;
	},@rwd1);
	span
	{
		font-size: 13px;
		text-transform: uppercase;
		font-weight: bold;
	}
	.phone
	{
		text-align: left;
		padding-top: 12px;
		.media-query({
			text-align: right;
		},@rwd2);		
	}
	.address
	{
		text-align: right;
		.menu-langs
		{
			display: inline-block;
			margin-left: 30px;
			margin-top: 6px;
		}
		span
		{
			font-size: 13px;
			font-weight: bold;
			text-transform: uppercase;
		}
	}
	.adress-span
	{
		display: inline-block;
		height: 40px;
		padding-top:12px;
	}
	.large-8
	{
		width: 58.33333% !important;
		.media-query({
			width: 66.66666% !important;
		},@rwd2);
	}
}

.logo
{
	padding-top: 12px;
	.media-query({
		padding-top: 12px;
	},@rwd1);
	text-align: right;
	img
	{
		max-width: 290px;
		width: 100%;
		height: auto;
		margin:3px 0;
	}
}

.wrapper-menu
{
	padding-bottom: 10px;
	border-bottom: 3px solid @green;
}

.desktop-menu
{
	position: relative;
	text-align: right;
	margin-top: 43px;
	display: none;
	.media-query({
		display: block;
	},@rwd1);
	
	.header
	{
		text-align: right;
		>li
		{
			display: inline;
			margin-left: 15px;
			a
			{
				font-size: 16px;
			}
		}
	}
}

.hamburger
{
	display: block;
	position: relative;
	width: 50px;
	height: 43px;
	cursor: pointer;
	background-image: url('../img/hamburger-icon.png');
	.transition(all .3s ease-in-out);
	background-size: 100%;
	background-repeat: no-repeat;
	top: 15px;
	float: right;
	right: 20px;
	z-index: 101;
	.media-query({
		display: none;
	},@rwd1);
	&.active
	{
		background-image: url('../img/hamburger-icon-hover.png');
	}
}

.mobile-menu
{
	text-align: left;
	display: block;
	position: fixed;
	top: -100vh;
	left: 0;
	bottom: 0;
	width: 100%;
	background: @white;
	height: 100vh;
	z-index: 100;
	padding: 10px;
	overflow: hidden;
	.transition(all .3s ease-in-out);
	.media-query({
		display: none;
	},@rwd1);
	&.active
	{
		top: 0;
	}
	.logo
	{
		display: block;
		width: 50%;
		padding-top: 0;
	}
	.header
	{
		border-top: 3px solid @green;
		display: block;
		margin-top: 10px;
		padding-top: 10px;
		>li
		{
			padding: 7px;
			a
			{
				font-size: 20px;
			}
		}
	}
}


/*
* CONTENT
*/

.wrapper-slider
{
	.row
	{
		margin: 0;
		.slider
		{
			position: relative;
			margin-bottom: -2px;
			img
			{
				width: 100%;
			}
			.text
			{
				position: absolute;
				bottom: 50px;
				.media-query({
					bottom: 200px;
				},@rwd2);
				left: 50%;
				color: @white;
				.transform(translate(-50%, 0));
				font-size: 27px;
			}
			.swiper-pagination-custom
			{
				position: absolute;	
				z-index: 1;
				bottom: 10px;
				.media-query({
					bottom: 100px;
				},@rwd2);
				.swiper-pagination-bullet
				{
					.transition(all .3s ease-in-out);
					.border-radius(0);
					background-color: transparent;
					background-image: url('../img/bullet.png');
					width: 17px;
					height: 15px;
					opacity: 1;
					cursor: pointer;
				}
				.swiper-pagination-bullet-active
				{
					background-image: url('../img/bullet-active.png');
				}
			}
		}
	}
}

.pagination
{
	width: 100%;
	text-align: center;
}

.wrapper-middle.moved
{
	text-align:center;
	margin-top: 0px;
	max-width: 1020px;
	.media-query({
		margin-top: -50px;
	},@rwd2);
	z-index: 1;
	background: @white;
	position: relative;
	.block
	{
		margin-top: 30px;
		.media-query({
			margin-top: -12px;
		},@rwd2);	
		text-align: center;
		position: relative;
		p
		{
			color: @dark-blue;
			text-align:center;
		}
		&:after
		{
			display: none;
			content: '';
			background-image: linear-gradient(@dark-blue 50%, rgba(255,255,255,0) 0%);
			background-position: right;
			background-size: 1px 11px;
			background-repeat: repeat-y;
			width: 1px;
			height: 55px;
			position: absolute;
			top: -5px;
			right: 0;
			.media-query({
				display: inline;
			},@rwd1);
		}
	}
	.forth:after
	{
		display: none;
	}
	.second:after
	{
		display: none;
		.media-query({
			display: inline;
		},@rwd2);
	}
}

.inicials
{
	p:first-letter
	{
		font-size: 30px;
		padding-left: 5px;
	}
	p
	{
		padding-bottom: 30px;
		font-weight: bold;
	}
}


.sign
{
	margin-bottom: 50px;
	p
	{
		color: @green;
	}
}

.front-form
{
	font-weight: bold;
}

.wpcf7-form
{
	margin: 0 -15px;
	padding-top: 50px;
	.col
	{
		padding: 0 15px;
	}
	.large-4
	{
		width: 100%;
		float: none;
		margin-bottom: 15px;
		.media-query({
			width: 33.3333%;
			float: left;
		},@rwd1);
	}
	.large-12
	{
		width: 100%;
		margin-bottom: 15px;
	}
	.submit
	{
		text-align: right;
		input
		{
			width: calc(~"100% - 30px");
			padding: 10px 20px;
			display: inline-block;
			margin-top: 22px;
			margin: 15px 10px;
			.media-query({
				width: auto;
			},@rwd1);
		}
		.wpcf7-form-control-wrap
		{
			width: 302px;
			margin-left: 15px;
			float: left;
		}
	}
	.wpcf7-response-output
	{
		border: none;
		color: @blue;
	}
}

.cennik
{
	.cennik-table
	{
		margin-top: 20px;
		td
		{
			padding: 8px 0;
			padding-right: 7px;
			.media-query({
				padding-right: 20px;
			},@rwd1);
		}
	}
	
	p, span
	{
		font-size: 16px;
		padding: 0;
		line-height: 20px;
	}
	
	.first-line
	{
		margin-top: 10px;
		margin-bottom: 20px;
	}
	
	p {
		margin-bottom:10px;
	}
}

.kontakt
{
	p
	{
		line-height: 20px;
	}
	.kontakt-line
	{
		margin-bottom: 25px;
		span
		{
			font-size: 15px;
		}
	}
	
	.col
	{
		padding: 7px;
	}
	
	input, textarea
	{
		padding: 12px;
		max-height: 150px;
	}
	
	.large-4
	{
		margin-bottom: 5px;
	}
	
	.wpcf7-form
	{
		padding-top: 0;
	}
	
	.submit
	{
		margin: 0;
		margin-top: -25px !important;
		text-align: left;
		input
		{
			float: right;
			height: 50px;
			width: calc(~"100% - 20px");
			.media-query({
				width: auto;
			},@rwd1);
		}
	}
	
	.wpcf7-form-control-wrap
	{
		margin-left: -5px !important;
		.transform(scale(0.7));
		width: 60px !important;
	}
}

.map
{
	width: 100%;
	height: 400px;
	margin-top: 30px;
}

.post
{
	min-height: 90px;
	margin-bottom: 30px;
	a
	{
		text-decoration: none;
	}
	.image
	{
		width: 20%;
		max-width: 140px;
		max-height: 93px;
		height: auto;
		float: left;
		margin-right: 10px;
		img
		{
			width: 100%;
			height: 100%;
		}
	}
	/* Backup poprzedniego layoutu
	.image-placeholder
	{
		background: @dark-green;
		min-width: 140px;
		min-height: 93px;
		text-align: center;
		.day
		{
			color: @white;
			font-size: 60px;
			padding-top: 6px;
		}
		.month
		{
			color: @white;
			font-size: 15px;
		}
	} */
	.image-placeholder
	{
		background: @dark-green;
		min-width: 140px;
		min-height: 93px;
		text-align: center;
		.day
		{
			color: @white;
			font-size: 60px;
			padding-top: 6px;
		}
		.month
		{
			color: @white;
			font-size: 15px;
		}
	}
	.dark-green
	{
		font-weight: bold;
		font-size:1.1em !important;
		color:@dark-green;
		a{color:@dark-green;}
	}
	
	.post-date
	{
		color:#b7b7b7;
		font-size:0.9em;
		margin:5px 0 8px 0;
	
	}
	.content
	{
		float: left;
		width: 100%;
		.media-query({
			width: 100%;
		},@rwd2);
		min-height: 90px;
		p
		{
			font-size: 13.4px;
			line-height: 18px;
		}
	}
	.read-more
	{
		float: right;
		width: auto;
		padding: 6px 15px;
		font-size: 14px;
		background: @dark-green;
		color: @white;
		.border-radius(5px);
		margin-top: 15px;
	}
	
	div.text > p:first-letter
	{
		font-size: 30px;
		/* padding-left: 5px; */
		margin-top:5px;
	}
}

.single-post
{
	img
	{
		float: none;
		margin-left: 0px;
		.media-query({
			margin-left: 20px;
			float: right;
		},@rwd1);
	}
	.date
	{
		color: @grey;
		margin-bottom: 20px;
		margin-top: -10px;
		display: block;
		font-size: 12px;
	}
	.go-back
	{
		margin-top: 70px;
		a
		{
			color: @dark-green;
		}
	}
}

/*
* FOOTER
*/

footer
{
	margin-top: 30px;
	.media-query({
		margin-top: 60px;
	},@rwd1);
	font-family: 'Archivo Narrow', sans-serif;
	.wrapper-blue
	{
		height:40px;
		.hor-line
		{
			margin-left: 10px;
			display: inline-block;
			height: 50px;
			width: 2px;
		}
		.aur-text
		{
			display: inline-block;
			position: absolute;
			margin-top: 12px;
			font-size: 14px;
			line-height: 16px;
			color: @dark-blue;
			line-height: 20px;
		}
		.copyright
		{
			text-align: left;
			margin-top: 14px;
			color: @dark-blue;
			.media-query({
				text-align: right;
			},@rwd2);
			p
			{
				font-size: 12px;
			}
		}
	}
}

.offer-page 
{
	margin-bottom: 20px;
	p:first-letter
	{
		font-size: 14px;
		padding-left: 0px;
	}
	
	h3
	{
		text-transform:uppercase;
		font-weight:bold;
		margin-bottom:1.0em;
		margin-top:1.2em;
		color:@dark-green;		
	}
}

/* Modyfikacje końcowe */
.swiper-pagination-bullets {display:none !important}