.navbar__toggler {display: none;}

.container .container {
	max-width: 100%;
}

/* height: 768px, 600px */
@media screen and (max-width: 1199px) {

	.navbar-nav li {margin-left: 15px;}

	.logo img {height: 50px;}

	#navbar {height: 75px;}

	body {
		padding-top: 75px;
	}

	#boxes .card {
		width: 100%;
	}

	#paralaksa h1 {font-size: 35px;}

	#firma img {max-width: 73%;}
	#firma img:first-of-type {max-width: 58%;}

	#firma .hex {
		bottom: 35px;
		left: 60px;
	}

	#firma .col-4 {
		width: calc(99.99% * 5/12 - (30px - 30px * 5/12));
    	max-width: calc(99.99% * 5/12 - (30px - 30px * 5/12));
    	flex-basis: calc(99.99% * 5/12 - (30px - 30px * 5/12));
	}



}

@media screen and (max-width: 1023px) {

	.navbar__toggler {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 0;
		background: rgb(239, 76, 17);
		width: 50px;
		height: 50px;
		border-radius: 100%;
		cursor: pointer;
		transition: all .2s;
	}

	.navbar__toggler span {
		display: block;
		flex-shrink: 0;
		width: 30px;
		height: 3px;
		margin: 2px 0;
		background: #ffffff;
		transition: all .2s;
	}

	.navbar__toggler.show {
		transform: rotate(45deg);
	}

	.navbar__toggler.show span {
		margin: 0;
		position: absolute;
	}
	.navbar__toggler.show span:nth-child(2) {display: none;}
	.navbar__toggler.show span:last-child {transform: rotate(-90deg)}

	.navbar-nav {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		transition: all .2s;
		transform-origin: top;
		opacity: 0;
		transform: scaleY(0);
	}

	.navbar-nav.show {
		opacity: 1;
		transform: scaleY(1);
	}

	.navbar-nav li,
	.navbar-nav a {
		display: block;
		width: 100%;
		margin: 0;
	}

	.navbar-nav a::after {display: none;}

	.navbar-nav a {
		padding: 10px 15px;
		width: calc(100% - 30px);
		border-top: 1px solid #e2e2e2;
	}


}

@media screen and (max-width: 800px) {
	#boxes .col-4 {
		max-width: 100%;
		width: 100%;
		flex-basis: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.card_img {max-height: 50vh;}

	.card_img img {
		width: 100%;
	}

	#paralaksa h1 {
		font-size: 30px;
	}

	#firma {padding: 50px 0;}

	#firma .row {
		flex-direction: column-reverse;
	}

	#firma .col-6,
	#firma .col-4 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		margin-right: 0;
	}

	#firma img {
		max-width: 70vw;
		width: 100%;
	}

	#firma img:first-of-type {
		max-width: 50vw;
	}

	#dlaczego .col-3,
	#dlaczego .col-8,
	footer .col-4 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		margin-right: 0;
	}

	#dlaczego .col-3 {margin-bottom: 30px;}

	footer .col-4 {
		margin-bottom: 30px;
	}

	footer .cb.ic {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	footer span {margin: 15px 0;}

	#boxes {
		padding: 50px 0;
	}
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 640px) {}

@media screen and (max-width: 600px) {
	#paralaksa h1 {line-height: 1.3em;}

	#dlaczego .col-4 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		display: flex;
		align-items: center;
	}

	#dlaczego .col-4 img {margin-right: 30px;}

	.sub #main .col-4,
	.sub #main .col-6 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		margin-right: 0;
	}

	.logo-contener {
		min-width: calc(33% - 2px);
	}
}

@media screen and (max-width: 480px) {
	.sub h1, .sub .h1 {
		font-size: 38px;
		margin-top: 60px;
		line-height: 1.1em;
	}

	.four-cols a {
		max-width: calc(100% * 1/2 - (30px - 30px * 1/2));
		width: calc(100% * 1/2 - (30px - 30px * 1/2));
		flex-basis: calc(100% * 1/2 - (30px - 30px * 1/2));
		margin-right: 30px;
	}

	.four-cols a:nth-child(2n) {margin-right: 0;}

	fieldset.col-5,
	fieldset.col-7 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		margin-right: 0;
	}
}

@media screen and (max-width: 435px) {}

@media screen and (max-width: 425px) {}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 375px) {}

@media screen and (max-width: 360px) {}

@media screen and (max-width: 320px) {}