h2{
	font-family: 'Lato', sans-serif;
	font-weight: bolder;
	font-size: 2.25em;
	text-transform: uppercase; 
	color: #005b7f;
	border-bottom: 1px solid #37b3f6;
	display: inline-block;
	margin-top: 2em;
	margin-bottom: 2em;
	padding-bottom: 0.25em;}

#container{
	position: relative;}

nav{
	position: fixed;
	width: 100%;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.5);
	transition: background-color 1s;
	z-index: 2;}
nav > div { 
	max-width: 1160px;
	height: 100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between; 
	align-items: center;}
nav > div #logo{
	width: 172px;
	height: 51px;
	background-image: url('img/logo-vba-biale.png');
	background-position: left center;
	background-repeat: no-repeat;
	transition: background-image 1s;}

nav a{
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 1.25em;
	text-transform: uppercase; 
	color: white;}
nav a:hover{
	color: white;
	text-decoration: none;}
nav a#kontakt{
	color: white;
	background-color: #ed5056;
	padding: 0.5em 3em;
	border-radius: 1em;}

nav.scrolled{
	background-color: rgba(168, 168, 168, 0.9);
	border-bottom: 5px solid #37b3f6;
	transition: background-color 1s;}
nav.scrolled > div #logo{
	background-image: url('img/logo-vba-niebieskie.png');
	transition: background-image 1s;} 

header{
	color: white;
	height: 741px;
	background-image: url('img/background-image.jpg');
	background-size: cover;                      
    background-repeat: no-repeat;
    background-position: right center; }

header.narrow{
	padding-top: 90px;
	height: 350px;}

header,
header div.ikony{
	display: flex;
	justify-content: center; 
	align-items: center;}

header div.ikony{
	width: 750px;}

header div.haslo,
header div.ikona{
	min-height: 150px;
	padding-top: 125px;
	width: 250px;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.25em;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;	
	background-position: top center;
	background-repeat: no-repeat;
	margin: 1em;}

header div.haslo{
	padding-top: 0px;
	width: auto;
	font-weight: bold;
	border-right: 20px solid #ed5056;}
header div.haslo p{
	margin: 0;
	padding: 0;
	line-height: 1.2em;
	text-align: right;
	padding-right: 20px;}

header div.haslo p:nth-child(1){ font-size: 46px; }
header div.haslo p:nth-child(2){ font-size: 48.5px; }
header div.haslo p:nth-child(3){ font-size: 24.5px; }
header div.haslo p:nth-child(4){ font-size: 30px; }

header div.ikony div:nth-child(1) { background-image: url('img/ikona-biala-doradztwo.png'); }
header div.ikony div:nth-child(2) { background-image: url('img/ikona-biala-informatyka.png'); }
header div.ikony div:nth-child(3) { background-image: url('img/ikona-biala-integracja.png'); }

header div img{
	margin-right: 10px;}

#uslugi{
	max-width: 1160px;
	margin: 0 auto;
	position: relative;
	z-index:1;}
#uslugi-outer{
	background-color: white;
	padding-bottom: 0em;}

#uslugi ul li{
	margin: 0;
	padding-top: 75px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 1.25em;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	width: 190px;
	border-right: 1px solid #37b3f6;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 1;}

#uslugi ul li:last-child{
	border-right-width: 0px;}

#uslugi ul li:nth-child(1) { background-image: url('img/ikona-doradztwo-informatyczne.png'); }
#uslugi ul li:nth-child(2) { background-image: url('img/ikona-doradztwo-biznesowe.png'); }
#uslugi ul li:nth-child(3) { background-image: url('img/ikona-zarzadzanie-projektami.png'); }
#uslugi ul li:nth-child(4) { background-image: url('img/ikona-integracja-it.png'); }
#uslugi ul li:nth-child(5) { background-image: url('img/ikona-hurtownie-danych.png'); }
#uslugi ul li:nth-child(6) { background-image: url('img/ikona-rozwiazania-dedykowane.png'); }

#tooltip{
	position: relative;
	max-width: 1160px;
	background-color: white;
	background-image: url('img/ramka-trojkat.png');
	background-repeat: no-repeat;
	background-position: -1440px 0px;
	padding-top: 32px;}
#tooltip > div{
	min-height: 120px;
	display:none;
	padding: 1em;
	text-align: justify;}
#tooltip > div:nth-child(1){
	display: block;}


#nasi-klienci-outer{
	background-color: #f4f4f4;
	padding-bottom: 2em;}
#nasi-klienci{
	max-width: 1160px;
	margin: 0 auto;}

#nasi-klienci ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: flex-start;
	padding: 0;}
#nasi-klienci ul li{
	margin: 1.75em;
	text-align: center;}
#nasi-klienci ul li img+img{
	display:none;}
#nasi-klienci ul li:hover img{
	display:none;}
#nasi-klienci ul li:hover img+img{
	display:inline;}

#nasze-rozwiazania{
	background-color: white;
	padding-bottom: 2em;}
#nasze-rozwiazania{
	max-width: 1160px;
	margin: 0 auto;}
#nasze-rozwiazania ul li{
	margin: 0;
	padding-top: 75px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	width: 190px;
	border-right: 1px solid #37b3f6;
	background-position: top center;
	background-repeat: no-repeat;}
#nasze-rozwiazania ul li:last-child{
	border-right-width: 0px;}

#nasze-rozwiazania ul li:nth-child(1) { background-image: url('img/ikona-rail.png'); }
#nasze-rozwiazania ul li:nth-child(2) { background-image: url('img/ikona-energy.png'); }
#nasze-rozwiazania ul li:nth-child(3) { background-image: url('img/ikona-logistics.png'); }
#nasze-rozwiazania ul li:nth-child(4) { background-image: url('img/ikona-telcom.png'); }
#nasze-rozwiazania ul li:nth-child(5) { background-image: url('img/ikona-reporting.png'); }
#nasze-rozwiazania ul li:nth-child(6) { background-image: url('img/ikona-export.png'); }

#b-r-outer{
	background-color: #f4f4f4;
	padding-bottom: 2em;}
#b-r{
	max-width: 1160px;
	margin: 0 auto;}
#b-r ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: flex-start;
	padding: 0;}
#b-r ul li{
	margin: 0.75em;
	text-align: center;}
#b-r ul li img+img{
	display:none;}
#b-r ul li:hover img{
	display:none;}
#b-r ul li:hover img+img{
	display:inline;}

#certyfikaty-outer{
	background-color: white;
	padding-bottom: 2em;}
#certyfikaty{
	max-width: 1160px;
	margin: 0 auto;}
#certyfikaty ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: flex-start;
	padding: 0;}
#certyfikaty ul li{
	margin: 0.75em;
	text-align: center;}
#certyfikaty ul li img+img{
	display:none;}
#certyfikaty ul li:hover img{
	display:none;}
#certyfikaty ul li:hover img+img{
	display:inline;}

footer {
	color: white;
	background-color: #959595;}
footer a{
	color: white;
	text-decoration: none;}
footer>div{
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between; 
	align-items: center;}
footer div ul li{
	color: white;
	padding: 1em 2em;
	display: inline-block;}
footer div ul li p{
	line-height: 0.75em;}

#kreski-gora{
	width: 494px;
	height: 973px;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url('img/kreski-gora.png');
	z-index: 0;}
#kreski-dol{
	width: 426px;
	height: 811px;
	position: absolute;
	right: 0;
	bottom: 0;
	background-image: url('img/kreski-dol.png');
	z-index: 0;}


@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi)
	{


		nav{
			height: 160px;
			font-size: 1.25em;}
		nav > div {
			font-size: 1.25em;}
		nav > div a#kontakt{
			position: absolute;
			right: 0;
			bottom: 10px;}


		header {
			/*width: 1000px;*/
			padding-top: 150px;
			flex-direction: column;}
		header.narrow{
			padding-top: 150px;
			height: 741px;}
		header div.ikona{
			font-size: 2.75em;}


		#uslugi{
			padding: 0 2em;}
		#uslugi ul{
			width: 90%;
			margin: 0 auto;}
		#uslugi ul li{
			width: 33%;
			font-size: 1.75em;
			border-bottom: 1px solid #37b3f6;
			padding-top: 95px;
			padding-bottom: 1em;
			background-position: center 20px;}
		#uslugi ul li:nth-child(3),
		#uslugi ul li:nth-child(6){
			border-right-width: 0;}
		#uslugi ul li:nth-child(4),
		#uslugi ul li:nth-child(5),		
		#uslugi ul li:nth-child(6){
			border-bottom-width:0;}




		#nasi-klienci{
			padding: 0 2em;}

		#nasi-klienci ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			padding: 1em 2em;}
		#nasi-klienci ul li{
			width: 33.33%;
			margin: 1em 0em;}




		#nasze-rozwiazania{
			padding: 0 2em;}
		#nasze-rozwiazania ul{
			width: 90%;
			margin: 0 auto 2em auto;}
		#nasze-rozwiazania ul li{
			width: 33%;
			font-size: 1.75em;
			border-bottom: 1px solid #37b3f6;
			padding-top: 95px;
			padding-bottom: 1em;
			background-position: center 20px;}
		#nasze-rozwiazania ul li:nth-child(3),
		#nasze-rozwiazania ul li:nth-child(6){
			border-right-width: 0;}
		#nasze-rozwiazania ul li:nth-child(4),
		#nasze-rozwiazania ul li:nth-child(5),		
		#nasze-rozwiazania ul li:nth-child(6){
			border-bottom-width:0;}


		#b-r{
			padding: 0 2em;}
		#b-r ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			padding: 1em 2em;}
		#b-r ul li{
			width: 33.33%;
			margin: 1em 0em;}

		#certyfikaty{
			padding: 0 2em;}
		#certyfikaty ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			padding: 1em 2em;}
		#certyfikaty ul li{
			width: 33.33%;
			margin: 1em 0em;}



		#tooltip{
			font-size: 2.5em;}
		footer{
			font-size: 1.75em;
			padding: 0 1em;}

		#myModal h4.modal-title{
			font-size: 1.75em;}
		#myModal div.modal-content{
			font-size: 2em;}
		#myModal div.modal-content input,
		#myModal div.modal-content button{
			font-size: 1.25em;}

		
	}