@charset "utf-8";

html {font-family: 'Montserrat', sans-serif;}

body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	color: #000000;
}

section {
	width: 100%;
	display: block;
	overflow: hidden;
	}

.row {
	margin: 0 auto;
	width: 100%;
	max-width: 90vw;
}

.flex {
	display: flex; 
	flex-flow: row;
	}


h1 {font-weight: 700; font-size: 34px;}
h2 {font-weight: 700; font-size: 30px;}
h3 {font-weight: 600; font-size: 24px;}
h4 {font-weight: 600; font-size: 20px;}
p {font-weight: 300; font-size: 18px; line-height: 1.4em;}
strong {font-weight: 600;}

.white {color: #ffffff;}
.blue {color: #0069b4;}
.dark-blue {color: #0d5384;}


.white-bg {background-color: #ffffff;}
.blue-bg {background-color: #0069b4;}
.gradient-bg {background: rgb(13,83,132); background: linear-gradient(180deg, rgba(13,83,132,1) 0%, rgba(0,105,180,1) 100%);}

.shadow {
-webkit-box-shadow: 0px 11px 16px -13px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 16px -13px rgba(0,0,0,0.75);
box-shadow: 0px 11px 16px -13px rgba(0,0,0,0.75);
}

.text-center {text-align: center;}

.btn {
	background: rgb(13,83,132);
	background: linear-gradient(0deg, rgba(13,83,132,1) 0%, rgba(0,105,180,1) 100%);
	color: #ffffff;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	border-radius: 5px;
	bordder: solid 1px #ffffff;
	width: fit-content;
	margin-top: 15px;
	text-decoration: none;
}
.btn:after {content:'»'; font-size: 20px; margin-left:6px;}
.btn:hover {
	background: rgb(13,83,132);
	background: linear-gradient(180deg, rgba(13,83,132,1) 0%, rgba(0,105,180,1) 100%);
}

.top {padding:20px 0; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.top .logo {}
.top .menu  {}
.top .menu a {font-size: 18px; color: #696969; margin: 10px; text-decoration: none;}
.top .menu a:hover {color: #0069b4;}
.top .menu a:after {content:'|'; margin-left: 15px;}
.top .menu a:last-child:after {display: none;}

.top .menu a.selected{
    text-decoration: underline;
    color: rgb(8 92 152);
}

.fixed {position: fixed;}

.first { 
	background: url(images/first-bg-2.jpg) no-repeat top center;
	background-size: cover;
	 background-attachment: fixed;
	 height: 600px;
	 display: flex;
	 align-items: flex-end;
}
.first .napis {display: block; padding: 1em; background: rgba(0, 0, 0, 0.5); border: solid 1px #ffffff; margin: 1em auto 6em auto; width: max-content; }
.first .napis h1 {font-weight: 400; font-size: 34px; text-transform: uppercase; color: #ffffff; width: fit-content; }


.kontakt { 
	background: url(images/kontakt-bg-2.jpg) no-repeat top right;
	background-size: cover;
	 background-attachment: fixed;
	 height: 600px;
	 display: flex;
	 align-items: flex-end;
}
.kontakt .napis {display: block; padding: 1em; background: rgba(0, 0, 0, 0.5); border: solid 1px #ffffff; margin: 1em auto 6em 0; width: max-content; }
.kontakt .napis h1 {font-weight: 400; font-size: 34px; text-transform: uppercase; color: #ffffff; width: fit-content; }
.kontakt-info {padding-top:2em; padding-bottom: 2em;}
.kontakt-info .flex {align-items: center;}
.kontakt-info .flex div {width: calc(100% / 3);}
.kontakt-info a {text-decoration: none; color: #000; font-weight: 500;}
.kontakt-info a:hover {text-decoration: underline;}
.onas { 
	background: url(images/o-nas-bg-2.jpg) no-repeat bottom right;
	background-size: cover;
	 background-attachment: fixed;
	 height: 600px;
	 display: flex;
	 align-items: flex-end;
}
.onas .napis {display: block; padding: 1em; background: rgba(0, 0, 0, 0.5); border: solid 1px #ffffff; margin: 1em auto 6em 0; width: max-content; }
.onas .napis h1 {font-weight: 400; font-size: 34px; text-transform: uppercase; color: #ffffff; width: fit-content; }
.dell-img {max-width: 450px; margin:0 0 0 1em;}



.dell {
	background: url(images/dell-bg.jpg) no-repeat top center;
	background-size: cover;
	height: 600px;
}
.dell .flex {height: 100%; align-items: center;}
.dell .flex div {width: 50%;}
.dell img {max-width: 100%; margin:0 auto;}

.uslugi {padding: 3em 0; background: url(images/info-bg.jpg) no-repeat top center; background-size: cover;}
.uslugi .usluga {padding: 2em; margin: 20px 2em; border: solid 1px #909090;}

.box {padding: 2em; background: rgba(255,255,255,0.5);}

.footer .flex {align-items: center;}
.footer .flex div{margin: 1em .5em 0 .5em; padding: .5em; width: calc(100% / 5);}
.footer p {color: #ffffff; font-size: 12px; font-weight: 400;}
.footer p a{color: #ffffff; text-decoration: none;}
.footer .legal{color: #ffffff; opacity: 0.6; font-size: 12px;}
.footer .socials {display: flex; flex-flow: row; width: fit-content !important; padding: 0px !important; margin: 10px 15px !important;}
.footer .socials a {}
.footer .socials a:first-of-type {margin-right:10px;}
/* duże ekrany */
@media screen and (min-width: 1200px){
	.first, .kontakt, .onas  {padding-top: 5em;}
	.row {max-width: 1180px;}
}

@media screen and (min-width: 769px) and (max-width: 1199px){
	.first, .kontakt, .onas {padding-top: 5em;}
	.row {
		max-width: 90vw;
		}
}
/* małe ekrany */
@media screen and (max-width: 768px){
	.row {max-width: 98%;}
	.flex {flex-flow: column; height: fit-content !important;}
    .top {
        flex-direction: column;
        justify-content: center;
    }
	.top .logo {margin: 0 0 15px 0; display: block; text-align: center;}
	.top .menu { margin:0; text-align: center; flex-flow: row; width: fit-content;}
	.top .menu a {display: block;}
	.top .menu a:after {display: none;}
	.first,
	.dell,
	.kontakt,
	.onas {
		height: auto;
		min-height: 150px;
		background-attachment: inherit;}
	
	.fixed {position: relative;}
	.first .napis,
	.kontakt .napis,
	.onas .napis  {margin: 4em auto 4em auto; max-width: 90%;}
	.first .napis h1,
	.kontakt .napis h1,
	.onas .napis h1 {text-align: center; font-size: 22px;}
	.dell {padding-bottom: 2em;}
	.dell img {display: block;}
	.dell .flex div {width: 100%;}
	.footer {padding: 2em 2em .5em 2em; box-sizing: border-box; overflow: hidden;}
	.footer .flex div {width: 100%;margin: 0; padding: 0em;}
	.kontakt {background: url(images/kontakt-bg-small.jpg) no-repeat top center; background-size: cover; background-attachment: fixed;}
	.dell-img { margin:20px auto;}
	.kontakt-info .flex div {width:100%;}
	.kontakt-info .flex div img {margin: 5px auto; display: block;}
	img {max-width: 90%;}
	.dell-img  {max-width: 100% !important;}
}