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

Body {
	font-family: Montserrat;
	font-kerning: normal;
	color:#585858;
	margin: 0px;
}

#wrapper {
	width:100%;
	margin:0px;
	padding:0px;
}

h1 {
	font-family: Saira Semi Condensed;
	font-size: 60px;
	font-kerning: normal;
	color: #585858;
	margin-block-start: 0;
	margin-block-end: 0;
}

a {
	color:white;
	font-weight: 600;
	font-kerning: normal;
	text-decoration: none;
	background-color: #FF4E00;
	background-image: url("images/btn-arrow-down.svg");
	background-repeat: no-repeat;
	background-position:93% 50%;
	padding:16px 46px 16px 18px;
	margin:0px 0px 100px 0px;
	transition: background-color 0.5s;
}

a:hover {
	background-color:#271E1A;
}


#menu {
	width: 100%;
	height:130px;
	max-height:130px;
	display: block;
	margin: 0;
	padding: 0;
}

/* LOGO */

#logo-container {
	display: block;
	width:320px;
	height:130px;
	color: white;
	background-color:#FF4E00;
	margin: 0 0 0 7%;
	padding:0;
	float: left;
	text-align: center;
}

#logo-container a {
	padding: 0;
	margin:0;
}
	
.firma {
	font-family: Saira Semi Condensed;
	font-weight:700;
	font-size:39px;
	margin:0;
	padding:20px 0 0 0;
}
	
.nazwisko {
	font-family:Montserrat;
	font-weight: 600;
	font-size:13px;
	font-kerning: normal;
	text-transform: uppercase;
	letter-spacing: 3.8px;
	margin:0px;
	padding:0 0 0 3px;
}

/* MENU */

#menubar {
	display: block;
	float: left;
	width:30%;
	margin: 50px 0px 0px 10%;
	padding: 0;
	text-transform: uppercase;
}

	#menubar a {
		display: inline;
		font-weight: 600;
		color:black;
		background-color: transparent;
		text-decoration: none;
		margin:0 10% 0 0;
		padding:0;
}

	#menubar a:hover {
		color:#FF4E00;
}

/* MOBILE MENU */

.mobile-menu {
	display:none;
	float:right;
	margin: 40px 40px 0 0;
	position: relative;
	cursor: pointer;
}

.dropdown {
	display:none;
	position:absolute;
	z-index: 1;
	right:0px;
}

.dropdown a {
	display: block;
	background-color: #FF4E00;
	font-size:1.5em;
	margin-bottom: 5px;
	width: 300px;
	padding: 20px;
}

.dropdown a:active {
	background-color: #271E1A;
}

.mobile-menu:hover .dropdown {
	display:block;
}


/* LANGUAGE SELECTION */

#langbar {
	display: block;
	float:right;
	margin-top:20px;
	padding:0px 50px 0px 0px;
}

	#langbar ul {
	list-style-type: none;
}

	#langbar li {
		display:inline-block;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
		max-width: 42px;
	}

	#langbar .current {
		color:white;
		background-image: url("images/langbar-on.png");
		background-repeat: no-repeat;
		padding: 15px;
	}

	#langbar li a:link {
		color:#585858;
		background-color:transparent;
		background-image: url("images/langbar-off.png");
		background-repeat: no-repeat;
		background-position: top center;
		padding: 15px;
		transition: background-image 0.5s;
	}

	#langbar li a:hover {
		background-image:url("images/langbar-hover.png");
	}

/* HEADER */

.header {
	clear:both;
	width:100%;
	height:750px;
	background-position:50% 40%;
	background-size: cover;
	background-repeat: no-repeat;
}

#header-foto {
	background-image:url("images/header-foto.jpg");
}

.header .claim {
	font-family: Saira Semi Condensed;
	font-weight:700;
	font-size: 80px;
	color: white;
	filter:drop-shadow(2px 2px 20px rgb(0,0,0,0.2));
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 9% 0% 0% 7%;
	line-height: 80px;
}

.header .location {
	font-size: 16px;
	font-weight: 600;
	color:white;
	text-transform: uppercase;
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 2% 0% 2% 7%;
}

.header .phone {
	font-family: Saira Semi Condensed;
	font-weight: 700;
	font-size: 70px;
	color:white;
	background-color: #FF4E00;
	padding: 5px 20px 5px 20px;
	margin-left: 7%;
	width:520px;
	filter:drop-shadow(2px 2px 20px rgb(0,0,0,0.3));
	margin-block-start: 0;
	margin-block-end: 0;
}

/* USLUGI - INDEX */

#uslugi {
	display: block;
	clear: both;
	width:100%;
	height: auto;
}

#uslugi h1 {
	padding: 3% 0% 2% 7%;
}

#uslugi ul {
	display: block;
	float:left;
	height:auto;
	padding: 0% 0% 3% 7%;
	margin:0px 0px 0px 20px;
	font-size: 1em;
	font-weight: 500;
	list-style: disc;
}

#uslugi li {
	line-height: 1em;
	padding: 0px 0px 15px 0px;
}

#uslugi .cta {
	clear: both;
	padding: 0% 0% 6% 7%;
}

/* USLUGI - LISTA USŁUG */

#lista-uslug {
	clear: both;
	padding:2% 0 0 7%;
}

.usluga {
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
	float:left;
	width: 45%;
	min-width: 400px;
	height: 200px;
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	transition: background-size 0.5s;
}

.usluga:hover {
	background-size:110%;
	background-positon: 50% 50%;
}

#usluga-autoholowanie {
	background-image:url("images/coverphoto-autoholowanie.jpg");
}

#usluga-autolaweta {
	background-image:url("images/coverphoto-autolaweta.jpg");
}

#usluga-holowanie {
	background-image:url("images/coverphoto-holowanie.jpg");
}

#usluga-ciezarowe {
	background-image:url("images/coverphoto-ciezarowe.jpg");
}

#usluga-tiry {
	background-image:url("images/coverphoto-tiry.jpg");
}

.usluga h1 {
	font-family: Saira Semi Condensed;
	font-size: 30px;
	line-height: 30px;
	color:white;
	padding: 35px 0px 0px 40px;
	filter:drop-shadow(2px 2px 20px rgb(0,0,0,0.2));
}

.usluga h2 {
	font-size: 1em;
	margin:10px 0px 0px 40px;
	letter-spacing: 2px;
	font-weight: 400;
	color:white;
}

.usluga a {
	float:right;
	margin:0px;
	position: absolute;
	bottom:0px;
	right: 0px;
}


.phone {
	font-family: Saira Semi Condensed;
	font-weight: 700;
	font-size: 60px;
	color:white;
	background-color: #FF4E00;
	padding: 10px 0px 20px 20px;
	width:520px;
}

/* LAYOUT BOXES */

.row {
	width:100%;
	min-height:620px;
	clear: both;
}

.text-box-dark {
	display: block;
	float: left;
	width: 50%;
	height: inherit;
	min-height: 620px;
	background-color: #585858;
}

.text-box-dark p {
	color: white;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5em;
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 0% 15% 5% 15%;
}

.text-box-dark .no-header {
	padding: 15% 15% 5% 15%;
}

.text-box-dark h1 {
	color:white;
	padding: 0%;
	padding: 10% 15% 5% 15%;
}

.text-box-light {
	display: block;
	float: left;
	width: 50%;
	height: auto;
}

.text-box-light p {
	color: #585858;
	font-weight: 400;
	line-height: 22px;
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 0% 15% 5% 15%;
}

.text-box-light h1 {
	padding: 10% 15% 0% 15%;
	line-height: 60px;
}

.text-box-light h2 {
	font-size: 1em;
	padding: 0 0 5% 15%;
	letter-spacing: 2px;
	font-weight: 400;
	color:#585858;
}

.text-box-light h3 {
	font-family: Saira Semi Condensed;
	font-size: 30px;
	line-height: 34px;
	padding: 12% 0 5% 15%;
	color: #585858;
	margin-block-start: 0;
	margin-block-end: 0;
}

.text-box-light .cta-uslugi {
	padding: 0% 0% 0% 15%;
}

.noheader {
	padding: 15% 15% 5% 15%;
}

/* .text-box-left a {
	margin:100px 0% 10% 17%;
	background-position:150px 20px;
	padding:16px 66px 16px 18px;
} */

.text-box-light .pierdolenie {
	font-size: 13px;
	padding-top: 15%;
}

.text-box-light .pierdolenie-znaglowkiem {
	font-size:13px;
	padding-top:0;
}

.foto-box {
	display:block;
	width:50%;
	min-height: 620px;
	height:inherit;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-clip: content-box;
	background-size: cover;
	float:left;
	text-align: center;
	align-content: center;
}

.foto-box .phone {
	font-family: Saira Semi Condensed;
	font-weight: 700;
	font-size: 50px;
	color:white;
	background-color: #FF4E00;
	padding:0 0 0 0;
	margin-block-start:0;
	margin-block-end:0;
	width:100%;
	margin: 30% 0 0 0;
	opacity: 0.9;
}

#main-ofirmie-foto1 {
	background-image: url("images/DSC03871.jpg");
}

#main-ofirmie-foto2 {
	background-image:url("images/ThinkstockPhotos-486708324.jpg");
}

#ofirmie-foto1 {
	background-image: url("images/o-firmie-foto1.jpg");
	background-size: 100%;
	background-position: 50% 30%;
}

#ofirmie-foto2 {
	background-image: url("images/o-firmie-foto2.jpg");
	background-size: 100%;
	background-position: 50% 30%;
}

#autoholowanie-foto1 {
	background-image:url("images/uslugi-autoholowanie-foto1.jpg");
	background-position: 50% 50%;
	background-size: 115%;
	background-repeat: no-repeat;
}

#autoholowanie-foto2 {
	background-image:url("images/uslugi-autoholowanie-foto2.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#autoholowanie-foto3 {
	background-image:url("images/foto-telefon.jpg");
	background-position: 50% 50%;
	background-size: 130%;
	background-repeat: no-repeat;
}

#autolaweta-foto1 {
	background-image:url("images/uslugi-autolaweta-foto1.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#autolaweta-foto2 {
	background-image:url("images/uslugi-autolaweta-foto2.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#autolaweta-foto3 {
	background-image:url("images/foto-telefon.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#tiry-foto1 {
	background-image:url("images/uslugi-tiry-foto3.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#tiry-foto2 {
	background-image:url("images/uslugi-tiry-foto2.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#tiry-foto3 {
	background-image:url("images/foto-telefon.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#holowanie-foto1 {
	background-image:url("images/uslugi-holowanie-foto1.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#holowanie-foto2 {
	background-image:url("images/uslugi-holowanie-foto2.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#holowanie-foto3 {
	background-image:url("images/foto-telefon.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#ciezarowe-foto1 {
	background-image:url("images/uslugi-ciezarowe-foto1.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#ciezarowe-foto2 {
	background-image:url("images/uslugi-ciezarowe-foto2.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

#ciezarowe-foto3 {
	background-image:url("images/foto-telefon.jpg");
	background-size: 130%;
	background-repeat: no-repeat;
}

/* OPINIE */

.opinie {
	padding: 5% 0% 6% 7%;
	float:left;
}

.opinia {
	width:22%;
	min-width: 400px;
	margin-right: 30px;
	float:left;
}

.opinie p {
	font-size: 1em;
	font-weight: 500;
	font-kerning: normal;
	line-height: 1.3em;
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 15% 0% 10% 0%;
}

.opinie .osoba {
	font-size: 0.8em;
	font-weight: 600;
	font-kerning: normal;
	letter-spacing: 1px;
	line-height: 1.2em;
	text-align: left;
	border-top: solid 4px #FF4E00;
	width:30%;
	padding-top: 3%;
}

/* KONTAKT */

#kontakt {
	display: block;
	float:left;
	width:50%;
}

#kontakt h1 {
	padding: 0 0 0 14%;
}

#kontakt p {
	padding: 0 0 0 14%;
	font-size: 14px;
	font-weight: 500;
	font-kerning: normal;
	line-height: 20px;
}

#kontakt a {
	display: inline;
	background:none;
	color:#FF4E00;
	padding: 0;
	margin:0;
}

#kontakt a:hover {
	text-decoration: underline;
}

#mapa {
	float:left;
	display: block;
	width:50%;
	min-height: 620px;
	background-image: url("images/mapa.png");
	background-position: 50% 50%;
	background-size: 110%;
}

#logosy {
	clear:both;
	width:100%;
	text-align: center;
	padding:0px 0px 40px 0px;
}

#logosy img {
	margin: 30px;
	width: 100px;
	height: 100px;
}

#logosy h1 {
	padding:60px 0px 0px 0px;
	margin:0px;
}

#logosy h2 {
	margin:0px;
	padding:40px 0px 20px 0px;
}

#footer {
	clear: both;
	width: 100%;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
	background-color: #585858;
	color:white;
	padding: 40px 0 40px 0;
}


@media screen and (max-width: 1080px) {
  #langbar {
    display: none;
  }
	
	#menubar {
		display: none;
	}
	
	.mobile-menu {
		display:inline-block;
	}
	
	.header {
		height:1300px;
	}
	
	.header .claim {
		font-size:140px;
		line-height:150px;
		padding-top: 25%;
	}
	
	.header .location {
		font-size:30px;
		padding-right: 10%;
	}
	
	.header .phone {
		font-size:105px;
		width:800px;
	}
	
	/* OSTYLOWANIE BOXÓW Z CONTENTEM */
	
	.foto-box {
		width:100%;
	}
	
	.text-box-dark {
		width:100%;
	}
	
	.text-box-dark p {
		font-size:0.8em;
		font-weight: 400;
		line-height: 1.2em;
		padding: 0% 10% 5% 10%;
	}
	
	.text-box-dark .no-header {
		padding: 5% 10% 5% 10%;
	}
	
	.text-box-dark h1 {
		color:white;
		padding: 0%;
		padding: 4% 10% 3% 10%;
}
	
	.text-box-dark .cta-ofirmie {
		padding: 4% 0% 12% 10%;
	}
	
	.text-box-light {
		width:100%;
	}
	
	.text-box-light h1 {
		font-size: 6em;
		line-height: 1em;
		padding: 25% 0% 0% 10%;
	}
	
	.text-box-light h2 {
		font-size: 1em;
		padding: 0% 0% 5% 10%;
	}

	.text-box-light h3 {
		font-family: Saira Semi Condensed;
		font-size: 3em;
		line-height: 1em;
		padding: 12% 10% 5% 10%;
		color: #585858;
		margin-block-start: 0;
		margin-block-end: 0;
	}
	
	.text-box-light p {
		color: #585858;
		font-size: 1em;
		font-weight: 400;
		line-height: 1em;
		padding: 0% 10% 5% 10%;
	}

	
	.text-box-light .pierdolenie {
		font-size: 0.8em;
		line-height: 0.8em;
	}

	.text-box-light .pierdolenie-znaglowkiem {
		font-size:0.8em;
		padding-top:0;
	}
	
	.text-box-light .cta-uslugi {
		padding: 10% 0% 0% 10%;
	}
	
	.text-box-light a {
		font-size:0.8em;
		padding-right: 75px;
	}
	
	.header a {
		font-size:30px;
	}

	#uslugi ul {
		font-size: 1.8em;
		padding: 0% 0% 0% 9%;
	}
	
	#uslugi li {
		line-height: 1.5em;
	}
	
	#uslugi .cta {
		clear: both;
		padding: 5% 0% 7% 7%;
	}
	
	#uslugi a {
		font-size:30px;
	}
	
	.usluga {
		width: 93%;
		height: 270px;
	}
	
	h1 {
		font-size:100px;
	}
	
	
	/* OPINIE O FIRMIE */
	
	.opinie {
		padding: 5% 5% 6% 7%;
		float:left;
	}
	
	.opinia {
		width:100%;
		margin:0;
		float:left;
	}
	
	.opinie p {
		font-size: 24px;
		font-weight: 500;
		font-kerning: normal;
		line-height: 1.6em;
		margin-block-start: 0;
		margin-block-end: 0;
		padding: 5% 0% 3% 0%;
	}
	
	.opinie .osoba {
		font-size: 1em;
		font-weight: 600;
		font-kerning: normal;
		letter-spacing: 1px;
		line-height: 1.2em;
		text-align: left;
		border-top: solid 4px #FF4E00;
		width:30%;
		padding-top: 3%;
	}
	
	/* OSTYLOWANIE KAFLI - LISTA USŁUG */
	
	.usluga h1 {
		font-family: Saira Semi Condensed;
		font-size: 3em;
		line-height: 1em;
		color:white;
		padding: 35px 0px 0px 40px;
		filter:drop-shadow(2px 2px 20px rgb(0,0,0,0.2));
	}
	.usluga h2 {
		font-size: 1em;
		margin:10px 0px 0px 40px;
		letter-spacing: 2px;
		font-weight: 400;
		color:white;
	}
	
	.usluga a {
		font-size: 1.5em;
		float:right;
		margin:0px;
		position: absolute;
		bottom:0px;
		right: 0px;
	}
	
	.foto-box .phone {
		font-family: Saira Semi Condensed;
		font-weight: 700;
		font-size: 5em;
		color:white;
		background-color: #FF4E00;
		padding: 10px 0px 20px 20px;
	}
}