* { padding: 0; margin: 0; }

html, body {
	font-family: 'Montserrat', sans-serif;
	width: 90%;
	height: 100%;
	font-size:16px;
	line-height:1.5;
	color: black;
	margin: 0 auto;
	background-color: #cdeba7; 
}

.backpic {
   background-image: url('_images/flat-lay-arrangement-with-safety-equipment.jpg');
   background-size: cover;
   height: 600px;
   max-width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: bottom;
}
.backpic > p {
    color: white;
    padding: 0 0 20px 20px;
	font-size:18px;
	text-align: left;
}

a {outline: none; text-decoration: none; color: #4682b4;}
a:hover {text-decoration: none; color: #FF270F;}

h6 {color: #3A9E08; padding: 0 10px 0 10px; margin-top: 40px; margin-left: 25px; margin-bottom: 15px; padding-top: 40px; padding-left: 25px; padding-bottom: 15px;}
a:h6 {color: #D95555;}

h3 {color: #ff7521;}
h1, h2 {color: #ff7521; text-align: center;}
h4 {text-align: center;}

a:h2 {color: #D95555;}

.dol {margin-bottom: 10px;}

.wypunkt {display: inline-block;}
img.wypunkt {padding-right: 3px; object-fit:none; display: inline-block;}

.page {
	margin: 0 auto;
}

.container {width:90%;max-width:1050px;margin:0 auto;}

.three-column {width: 100%; display: flex; margin: 0 auto; column-gap: 2%;}
.two-column {width: 100%; overflow: hidden; margin: 0 auto;}
.two-column-top {width: 100%; overflow: hidden}
a {color: #354458;}

.colum {width:48%; background: #E8F0E8; padding: 1%; overflow:hidden; background: #fef1aa; border-radius: 7px;}
.colum-clear {width:31%; background: #E8F0E8; padding: 1%; overflow:hidden;}
.colum-foot {width: 45%; overflow: hidden; display: inline-flex; flex-direction: column; align-content: flex-start;}
.colum-ja {width: 45%; background: #62859f; padding: 2%; overflow: hidden; display: inline-flex; flex-direction: column; align-content: center; border-radius: 7px; color: #E8F0E8;}
.two-lewa {width: 68%; overflow: hidden; display: inline-block; position: relative;}
.two-prawa {width: 30%; overflow: hidden; display: inline-block; position: relative;}

#wrapper {
	margin: 0 auto -150px;
	min-height: 100%;
	position: relative;
	width:90%;
	max-width:1150px;
}

form.formularz {width: 100%; background: #62859f; padding: 2%; overflow: hidden; border-radius:7px; margin: 0 auto;}
form.formularz span {float: left; text-transform: none; margin-bottom: 15px;}

.forminp {padding:10px; margin-bottom: 10px; display: inline-block; font-size: 14px; width: 30%; border: none; position: relative; float: left;}
.forminptx {padding:10px; margin: 10px; display: inline-block; width: 40%; font-size: 16px; position: relative;}
.messa {padding:15px; margin-bottom:10px; margin: 0 auto; width:97%; font-size:14px;}
.button {width:240px; border-radius: 7px; background-color: white; color:#02639a; font-size:16px; padding: 10px 0; float: none; cursor: pointer; border: none; display: inline-block; position: relative;}
.button:hover {background-color: orange; color: navy;}

.g-recaptcha {
	float: right;
}

ul.punkt1 {list-style: disc inside;}
ul.punkt2 {list-style: circle; padding-left: 35px;}
ul.punkt3 {list-style: disc inside; padding-left: 35px;}
ul.punkt4 {list-style: circle; padding-left: 45px;}

footer {width: 100%; clear:both; color:navy; background:#bccbd6; padding: 20px 15px 15px 30px; margin: 0 10px 25px 0; text-decoration:none;}
footer p {color: #FF9900; text-align:right; padding-right:15px; padding-top: 10px; font-size:14px;}
footer a {color: green;}

a.przycisk {
	display: block;
	margin: 0 auto;
	cursor: pointer;
	width: 64%;
	position: relative;
	top: 30px;
	padding: 10px 10px;
	background-color: white;
	color: navy;
	font-size: 14;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius: 7px;
	border: none;
}  
a.przycisk:hover {
	background: navy;
	color: white;
	position: relative;
} 

a.przyciskmail {
	display: block;
	margin: 0 auto;
	cursor: pointer;
	width: 50%;
	position: relative;
	padding: 10px 10px;
	background-color: white;
	color: navy;
	font-size: 14;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius: 7px;
	border: none;
}  

a.przyciskstopa {
	display: block;
	cursor: pointer;
	width: 50%;
	position: relative;
	padding: 3px 3px;
	background-color: #E8F0E8;
	color: navy;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	border: none;
	margin: 2px;
}  

a.przyciskstopa:hover {
	background: navy;
	color: #E8F0E8;
	position: relative;
}

fieldset {width: 240px; border: 0;}
label {display: block; margin: 10px 0; overflow: hidden;}
input {float: right; width: 150px; margin: 0 0 0 5px;}
button {display: block; width: 30px; margin: 20px auto 0 auto;}

img {border: 0px; max-width:100%; height: auto;}
img.down {vertical-align: bottom;}
img.pics {
	float: none;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 7px;
	padding: 15px;
	width: 30%;
	float: left; 
}

img.pics1 {
	clear: both;
	display: relative;
	top: 5px;
	border-radius: 7px;
	padding-left: 5px;
	width: 90%;
}

img.pics-small {
	width: 100%;
}

img.logo {
	width: 20%;
}

.picto {
	width: 35%;
}

.kontener {
	position: relative; /* obrazek będzie się zmieniał rozmiar wraz ze stroną */
	text-align: left; /* wyśrodkowanie obrazka */
	color: white; /* kolor tekstu */
	font-size: 12px;
}

.wnetrze {  >>tekst zawsze będzie na środku
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(5%, -140%);
}

@media (min-width: 800 px) {
	#wrapper{width:100%;}
	.page {width:1050px;}
	//.page{width:1180px;}
}

@media (max-width: 800px){
	#wrapper {width:90%;}
	.page {width:90%;}
	h1 {font-size: 4.5vw;}
	h2 {font-size: 3.4vh;}
	h3 {font-size: 2.8vh;}
	p, h4 {font-size: 2.8vmin;}
	.backpic {height: 300px; align-items: flex-start;}
	img.pics-small {height: 300px; align-items: flex-start;}
	img.logo {width:50%;}
	.three-column, .two-column, .two-column-top {display: block;}
	.colum {width:100%;}
	.colum-clear, .colum-foot, .colum-ja, .two-lewa, .two-prawa {width: 100%; margin-bottom: 10px;}
	.forminp, .button {display: block; padding-bottom: 5px;}
	.forminp, .messa {width: 90%;}
	.button {margin-bottom: 5px;}
	.forminptx {display: block; width:100%; float:left;}
	.picto {padding-top: 5px;}