* { box-sizing: border-box; }

body { margin: 0; padding:0; }





#graf	{
	width:100%;
	height:65vh;
	position:relative;
	
}


.covertext	{	/*tekst na zdjeciu glownym */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: 'Raleway', sans-serif;
	text-align:center;
	font-weight:900; 
 	font-size: 28px;
	line-height:36px;
	background-color:rgba(0, 0, 0, 0.6);
	padding:30px;
	border:#FFF solid 1px;
}


#phototext	{ /*tekst na fotografiach w kolumnach */
	padding-top:8px;
	padding-bottom:8px;
	padding-left: 40px;
	padding-right: 40px;
	background-color:#2888a2;
	display:block;
	position:absolute;
	bottom:30px;
	font-family: 'Raleway', sans-serif;
	text-align:center;
	font-weight:900; 
 	font-size: 20px;
	color:#FFF;	
	line-height:36px;
	text-transform: uppercase;}

.iOS-hide	{visibility:hidden}


	
@supports (-webkit-overflow-scrolling: touch)	{
.iOS-hide	{visibility:hidden}

}

.photoC	{height:100%; width:100%; object-fit:cover;}
	

.right {	right: 0px;} /* naprzemienność pasków na zdjeciach */
.container	{width:100%;} 
.column		{width: 50%;}
.text		{	justify-content: center; /*właciwosci column z trescia - centrowanie */ 
				align-items: center; 
				padding-top: 50px;
				padding-bottom:50px;
				display:block;}
.foto		{min-height:50vh; position:relative} /*właciwosci column ze zdjeciami */ 	
.textbox	{	width:33%;	/* 3 kolumy na poczatku i stopka */ 	
				margin-top: 10px;
				margin-bottom: 10px;}


.flex		{display: flex;}
.normal		{display: flex;}
.reverse	{display: flex;}


.tML	{padding-left: 40px;}
.tMR	{padding-right: 40px;}	
.ML		{padding-left: 40px;}
.MR		{padding-right: 40px;}
.GPL	{padding-left:10%}
.GPR	{padding-right:10%}



.white	{color:#FFF}
.black	{color:#000}
.marin	{color:#0e252e}
.marine	{background-color:#0e252e}
.blue	{background-color:#2887a1}



.logo	{margin-left:10%;margin-top:20px}
	

/*kolumny */


.trucks	{	display: flex;
			flex-wrap:wrap;
			justify-content: space-between;	}
			
.truck	{	flex-basis:50%;
			max-width:350px;}
.fotoM	{  
			width: 65%;
			height:auto;
			margin: auto;
			display:block; }			
			
			
.icos	{ 	display:flex;
			flex-direction: column;
			}
			
.ico	{			
			}



.fotoI	{  	float:left;
	}
	
.city	{	background-image:url(img/city.png);
			background-repeat:no-repeat;
			background-position:bottom
}




	


/* MENU */



#topbar	{
	background-color: #0e252e;
	width:100%;
	height: 130px;
	position:relative;}

#menu2	{
	height:58px;
	position:absolute;
	bottom:0px;
	right:10%;
	background-color:#2887a1;
	z-index:5;}

.topnav {
 	overflow: hidden;
  	background-color:#0e252e;
  	z-index:3;
  	font-family: 'Raleway', sans-serif;
	text-align:center;
	font-weight:900; 
 	font-size: 28px;
	color:#FFF;	
	text-transform: uppercase;}

.topnav a {
  display: block;
  color: white;
  text-align: center;
  padding: 15px 15px 15px 15px;
  text-decoration: none;
  font-size: 18px;
  float:right;}

.topnav a:hover {
   color: white;
   background-color:#2887a1;}

.active {
  background-color: red;
  color: white;}




/* text */

.txt	{
	font-family: 'Raleway', sans-serif;
 	font-weight:400; 
 	font-size: 15px;
	line-height:22px;
}

.head
{ 	font-weight:900; 
 	font-size: 36px;
	line-height:18px;
	text-transform: uppercase;
}


.head2	{ 	
	font-weight:900; 
 	font-size: 28px;
	text-transform: uppercase;}

.lead {
 	font-weight:300; 
 	font-size: 28px;
	line-height:34px;}

.punktor	{	
	padding-left: 30px;
	background-image:url(img/punktor.png);
	background-repeat:no-repeat;
	}

.center	{	text-align:center}
.bold	{ 	font-weight:700; }
.light	{ 	font-weight:100; }
.bolder	{ 	font-weight:900; text-transform:uppercase }

a:link.doc { 
 	font-weight:900; 
 	font-size: 18px;
	text-transform:uppercase;
	color:#FFF;
	text-decoration:none;
	padding-bottom: 5px;
	margin-bottom: 5px;}
a:visited.doc	 {color: #FFF;}
a:hover.doc		 {color: #2887a1;}
a:active.doc	 {color: #2887a1;}


.ftr	{
	font-family: 'Roboto', sans-serif;
 	font-weight:300; 
 	font-size: 16px;
	line-height:22px;
}

a:link.stopka { 
	font-family: 'Roboto', sans-serif;
 	font-weight:300; 
	line-height:22px;
 	font-size: 16px;
	color:#aaedff;
	text-decoration:none;
	padding-bottom: 5px;
	margin-bottom: 5px;}
a:visited.stopka	{color: #aaedff;}
a:hover.stopka		{color: #FFF;}
a:active.stopka		{color: #FFF;}




@media screen and (min-width: 1000px)	{

#menuToggle	{	visibility:hidden}

}


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

	
#menu2	{visibility:hidden}

.column		{   width: 100%;}
.normal		{	flex-direction: column}
.reverse	{	flex-direction: column-reverse}

.tML	{padding-left: 0px;}
.tMR	{padding-right: 0px;}
.ML		{padding-left: 20px;}
.MR		{padding-right: 20px;}
.GPL	{padding-left:20px;}
.GPR	{padding-right:20px;}


.logo	{margin-left:0px;margin-top:25px}


#topbar	{  display: flex;  justify-content: center; }

.textbox	{
	width:100%;
	margin-top: 20px;
	margin-bottom: 20px;
	}
	




}


/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */


#menuToggle
{
  	display: block;
  	position: absolute;
	top: 60px;
    left: 20px;
	z-index: 1;
    -webkit-user-select: none;
  	user-select: none;
}

#menuToggle input
{
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;
	cursor: pointer;
    opacity: 0; /* hide this */
  	z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background:#2887a1; /*kolor kamburgera*/
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child{  transform-origin: 0% 0%;}

#menuToggle span:nth-last-child(2){  transform-origin: 0% 100%;}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #FFF; /* kolor krzyszyka */
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3){  opacity: 0;  transform: rotate(0deg) scale(0.2, 0.2);}

#menuToggle input:checked ~ span:nth-last-child(2) {  transform: rotate(-45deg) translate(0, -1px);}


#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #1c3c49; /* kolor tla menu */
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 24px;
  font-family: 'Raleway', sans-serif;
  font-weight:900; 
  font-size: 22px;
  text-transform:uppercase;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}