/*-----------------------------------------------------------------------------------

	Theme Name:  MJKRAN
	Description: MJKRAN
	Author: Marcin Łukasik
	

 */




/* 

 --------------Fonts-----------------

 */



@font-face {
  font-family: 'Open';
  src: url('fonts/OpenSans-Regular.ttf');
}


@font-face {
  font-family: 'OpenB';
  src: url('fonts/OpenSans-Bold.ttf');
}

@font-face {
  font-family: 'OpenSB';
  src: url('fonts/OpenSans-Semibold.ttf');
}

@font-face {
  font-family: 'OpenL';
  src: url('fonts/OpenSans-Light.ttf');
}


body{
	margin:0px;
	padding:0px;
	font-family: 'Open';
	scroll-behavior:smooth;
}

/* 

 --------------Header-----------------

 */
 
 header{
	width:100%; 
	position:fixed;
	top:0;
	z-index:999;
	background-color:white;
	padding-bottom:20px;
 }

.logo{
	float:left;
	clear:both;
	margin-top:5px;
	
	
}

.mobile-icon{
	display:none;
float:right;	
}

.mobile-icon img{
	width:30px;
	padding-top:10px;
}


/* 

 --------------Baner-----------------

 */

.baner{
	width:100%;
	clear:both;
	background-color:#0089bf;
	margin-top:60px;
}


.item-holder{
	width:100%;
	height:auto;
	position:relative;
}
.item-holder img{
	width:100%;
	height:auto;
	position:relative;
}

.no-padding{
	padding-left: 0;
	padding-right: 0;
}

.baner-napis{
	width:700px;
	text-shadow:2px 2px 5px rgba(0,0,0,0.7);
	position:absolute;
	z-index:97;
	text-align:center;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
	margin-top:12%;
	font-size:42px;
	color:white;
	font-weight:bold;
	  font-family: 'OpenB';
}

.baner-napis2{
	width:800px;
	text-shadow:2px 2px 5px rgba(0,0,0,0.7);
	position:absolute;
	z-index:98;
	text-align:center;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
	margin-top:16%;
	font-size:28px;
	color:white;
	 font-family: 'OpenB';
	font-weight:bold;
}

.baner-napis3{
	width:700px;
	text-shadow:2px 2px 5px rgba(0,0,0,0.7);
	position:absolute;
	z-index:99;
	text-align:center;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
	margin-top:22%;
	font-size:20px;
	color:white;
	background-color:#f15925;
	padding-top:5px;
	padding-bottom:5px;
	
}

 /* 

 --------------Menu-----------------

 */
 

.menu{
	width:100%;
	padding-top:35px;
}

.menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	
	padding-left:20px;
	float:right;
}

.menu ul li{
	float:left;
	 font-family: 'Open';
	font-size:16px;
	padding-top:8px;
	
	margin-left:5px;
	margin-right:5px;
}

.menu ul li a{
	color:#22231e;
	padding-left:7px;
	padding-right:7px;
	padding-top:3px;
	padding-bottom:4px;
	
}

.menu ul li a:hover{
	text-decoration:none;
	color:white;
	background-color:#f15925;
}


/* 

--------------Aktualności-----------------

*/
 
.aktualnosci{
	padding-top:30px;
	padding-bottom:0px;
}

.section-title{
	width:100%;
	color:#f15925;
	text-align:center;
	font-family: 'OpenB';
	font-size:38px;
	padding-bottom:35px;
}

.akt-box{
	padding-bottom:30px;
	width:100%;
}

.akt-box img{
	width:100%;
}

.akt-title{
	width:100%;
	font-family: 'OpenB';
	font-size:24px;
	padding-bottom:20px;
	color:black;
}

.akt-content{
	color:black;
}

/* 

--------------Galeria-----------------

*/

.galeria{
	background-color:black;
	padding-top:5px;
	padding-bottom:30px;
	
}

/* 

--------------Referencje-----------------

*/

.referencje{
	
	padding-top:5px;
	padding-bottom:30px;
	
}

/* 

--------------About us-----------------

*/

.about{
	background-color:black;
	padding-top:15px;
	padding-bottom:50px;
	
}

.about-box-centered{
	color:white;
	text-align:center;
	padding-left:20px;
	padding-right:20px;
}

/* 

--------------Kontakt-----------------

*/

.kontakt{
	padding-bottom:80px;
}

.form-button{
	background-color:black;
	color:white;
	text-transform:uppercase;
	border:none;
	width:80px;
	height:35px;
}
.form-button:hover{
	background-color:#111111;
}

.form-input{
	width:100%;
}



 @media screen and (max-width: 998px) {
	 
	
	 
	 .lg{

	width:200px;
}

.baner-napis2{
	margin-top:18%;
	
}

.baner-napis3{
	margin-top:25%;
	
}
 }
 
 @media screen and (max-width: 767px) {
	 header{
		 position:relative;
		 z-index:0px;
	 }
	 .logo{
		 width:100%;
	 }
	 
	 .mobile-icon{
		display:inline;
		float:right;
		
	}
	.mobile-icon img{
		padding-top:10px;
		width:40px;
		float:right;
	}
	
	.menu{
		display:none;
	width:100%;
	text-align:center;
	font-size:14px;
	text-transform:uppercase;
	font-family: 'Open';
	padding-top:20px;
	
}

.menu ul{
	list-style:none;
	float:none;
	text-align:center;
}

.menu ul li{
	padding-top:5px;
	padding-bottom:5px;
	width:100%;
	padding-left:0px;
	text-align:center;
}

.menu ul li a{
	
}


.item-holder{
	width:100%;
	height:300px;
	position:relative;
	overflow:hidden;
}
.item-holder img{
	width:100%;
	height:300px;
	position:relative;
}



.baner-napis{
	width:500px;
	text-shadow:2px 2px 5px rgba(0,0,0,0.7);
	position:absolute;
	z-index:97;
	text-align:center;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
	margin-top:3%;
	font-size:32px;
	color:white;
	font-weight:bold;
	  font-family: 'OpenB';
}

.baner-napis2{
	width:500px;
	text-shadow:2px 2px 5px rgba(0,0,0,0.7);
	position:absolute;
	z-index:98;
	text-align:center;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
	margin-top:11%;
	font-size:18px;
	color:white;
	 font-family: 'OpenB';
	font-weight:bold;
}

.baner-napis3{
	width:500px;
	text-shadow:2px 2px 5px rgba(0,0,0,0.7);
	position:absolute;
	z-index:99;
	text-align:center;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
	margin-top:22%;
	font-size:14px;
	color:white;
	background-color:#f15925;
	padding:5px;
	
	
}



 }
 
 @media screen and (max-width: 520px) {
	 .baner-napis{
	width:300px;
	margin-top:30px;
	font-size:26px;
}

.baner-napis2{
	width:300px;
	margin-top:80px;
	font-size:16px;
	
}

.baner-napis3{
	width:300px;
	margin-top:150px;
	font-size:14px;
	padding:5px;	
}
	 
	 
 }
 
 
 @media screen and (min-width: 1400px) {
	 header{
		 height:10%;
	 }
	 
	 .lg{
		 width:200px;
	 }
	 
	 .menu{
		 padding-top:20px;
	 }
	 
	 .aktualnosci{
		 padding-top:10%;
		 height:90%;
	 }
	 
	 .galeria{
		padding-top:10%;
		padding-bottom:10%;
		height:90%; 
	 }
	 
	 .referencje{
		padding-top:10%;
		height:90%; 
		padding-bottom:10%;
	 }
	 
	 .kontakt{
		 padding-top:3%;
	 }
	 
 }
 
 @media screen and (min-width: 1800px) {
	 .aktualnosci{
		 padding-top:10%;
		 height:90%;
		 padding-bottom:10%;
	 }
	 
	 .galeria{
		padding-top:10%;
		padding-bottom:20%;
		height:90%; 
	 }
	 
	 .referencje{
		padding-top:10%;
		height:90%; 
		padding-bottom:20%;
	 }
	 
	 .about{
		  padding-top:10%;
		 height:90%;
		 padding-bottom:10%;
	 }
 }