/* font reset etc.. */
 
@font-face {
 font-family: regular;
 src: url("../font/Barlow-Regular.otf") 
}

 


span, div, a, h1, h2, h3, h4, p, html, form, body, dl,ul, img, object 
{margin: 0; border: 0; padding: 0; text-decoration: none;    color:#303030; list-style-type: none; font-family:regular; font-size:14px;}

/*


h2 { font-size:16px; }
 
#top {width: 100%; background: #ff0; padding:   20px 0; }


#mm { }
#mm ul { }
#mm li { display: inline;}

*/
a.logo {   max-width:250px; height:120px; margin: 10px auto 0;  display:block; overflow:hidden;  background:url(../gfx/logo.png) no-repeat; text-indent:-9999px; z-index:1;  }



*{
  margin:0;
	padding: 0;
	outline: none;
	border: none;
	-webkit-box-sizing: border-box;
}
*:before,
*:after{
	-webkit-box-sizing: border-box;
}
.clearfix { background:url(../gfx/top_gfx.png)  repeat; -webkit-box-shadow: 0px 10px 17px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 17px -6px rgba(0,0,0,0.75);
box-shadow: 0px 10px 17px -6px rgba(0,0,0,0.75);
  *zoom: 1;
}
html{
	font-family: regular;
	font-size: 12px;
}
body{
	background:url(../gfx/tlo.jpg) repeat-x; background-color: #f0f8ff; background-size: 100%; 
	 
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container{
	width: 80%;
	margin: 0 auto;
}
header{
	width: 100%;
	height: auto;
	 
	position:absolute;
}
.header-left,
.header-right{
	position: relative;
	color: #000;
	float: left; 
}
.header-left{
	width: 30%;
}
.header-right label{
	position: absolute;
	top: -3.7em;
	right: 0;
	cursor: pointer;
}
.header-right span{
	position: relative;
	width: 2em;
	height: 2em;
	background: rgba(255,255,255,.3);
	-webkit-transition: all .3s ease;
}
.header-right span:hover{
	background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
	content: '';
	position: absolute;
	width: 2em;
	height: .5em;
	top: 4px;
	left: 0;
	background: black;
}
.header-right span:after{
	top: 14px;
}
.header-right{
	width: 70%;
	text-align: right;
}
#open{
	display: none;
}
h1{    
	   text-align: left; margin-top: 30px; font-size: 1.8em;
}

h2{    
	  
}
a{
	text-decoration: none;
	
}
nav>a{
	position: relative;
	display: inline-block;
	font-size: 18px;
	line-height: 40px;
	padding: 48px 1em;
	-webkit-transition: all .3s ease;
}
nav>a:hover{
	 
	color: #416054;
}
.hidden-desktop{
	display: none;
}
section{
	width: 100%;
	height: auto;
	background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);
}
.section-left,
.section-right{
	float: left;
}
.section-left{
	width: 70%;
	padding: 3em 0;
}
.section-right{
	width: 30%;
}
.section-title,
.section-tagline{
	color: white;
	font-weight: 300;
	margin: 0;
	padding: 0;
	-webkit-transition: all .4s ease;
}
.section-title{
	font-size: 4em;
	margin-bottom: .3em;
	text-shadow: 0 3px 0px black,
				 0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
	font-size: 1em;
}
.learn-more{
	display: table;
	margin: 3em auto 0;
	padding: 1em 6em;
	cursor: pointer;
	border-radius: 3px;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
	background: #EAAF00;
	background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
	font-size: 1.2em;
}
.learn-more:hover{
	background: #EAAF00;
}
.learn-more:active{
	box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}




#separator {height: 550px; position:static; padding-top: 130px;  }

#ban_l {width: 60%;   position:static; float: left;  }
#ban_l p { text-align: center; padding-top: 120px; position: relative; font-size: 25px; color: #fff; text-shadow: 0px 0px 4px #000; text-transform: uppercase; font-weight: bold;  }


#ban_l p span { font-size:15px;}

#ban_r {width: 25%;   position:static; float: left;   }

#tabs {height: 310px; width: 255px; background-color: rgba(0, 0, 0, 0.5);  margin: 22px 25px 0 35px; padding: 15px;}
#tabs label {color: #fff;}
#tabs h2 { text-align: center;  font-size: 15px; color: #fff; text-shadow: 0px 0px 8px #000000;  }






#content {  background: #fff;  width:100%; overflow: hidden; background: #f0f8ff;-webkit-box-shadow: inset 0px 10px 13px -12px rgba(0,0,0,0.55);
-moz-box-shadow: inset 0px 10px 13px -12px rgba(0,0,0,0.55);
box-shadow: inset 0px 10px 13px -12px rgba(0,0,0,0.55); }
#content p {  font-size: 15px; margin-top: 34px;}

#content ul,li { color: #fff;   font-size: 15px; margin-left: 9px; }

 
.obrazek {width: auto;
text-align: center;
overflow: hidden;
margin: -120px;
position: absolute;
color: #fff; font-size: 20px;}

#content_1 { margin: 0 auto;   max-width:1100px;  }
#content_1 p {   font-size: 15px; margin-top: 34px;}

#content_stopka { margin: 0 auto;   max-width:1100px;    }
#content_stopka p {    font-size: 15px; margin: 0 auto;}


#content_1.white {background: #fff; }
#content_1 p.white {background: #fff; }
#content_1 h1.white {background: #fff; }



#wrap_1 {  max-width: 1100px; overflow: hidden; padding: 0 0 40px 0;}
#wrap_3 {width: 33%; float: left;}
#wrap_stopka {width: 30%; float: left; border-right: 1px solid #000; margin:15px 0 0 0; padding:10px;  height: 150px;}
#wrap_stopka h1 {text-align: left; margin: 0;}
#wrap_stopka p { font-size: 18px; font-weight: bold;}
#wrap_stopka a { font-size: 18px; font-weight: bold;}

p.copy {width: 100%; text-align: center; overflow: hidden; margin: 0 auto; padding: 0 0 20px 0; }


#c_left {width:30%; float: left;}
#c_right {width:70%; float: right;}

#main_wrap_galery { margin:0 auto; max-width:1100px; padding:15px 0 0 10px; display:block; overflow:hidden;     }
 
.gfx { vertical-align: middle;  margin:0; padding: 1px 0 0 15px; border-left: 1px solid #000; height: 33px; }
.gfx1 { padding: 28px 0 28px 7px; }

.hovereffect-3 p {font-size: 20px; color: #fff; margin:2px auto 0; position: absolute;}


.hvr-sink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}

.ramka {border: 2px solid #fff;-webkit-box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
-moz-box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);}



.hovereffect-3 {
	width: 320px;
	height: 193px;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default; margin: 20px;
	border: 2px solid #fff;
-webkit-box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
-moz-box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
}
.hovereffect-3 .overlay {
	width: 100%;
	height: 100%;
	
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
	transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
}
.hovereffect-3 img {
	display: block;
	position: relative;
	-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
	transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
}
.hovereffect-3 h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	background: rgba(0, 0, 0, 0.6);
	-webkit-transform: translatey(-100px);
	-ms-transform: translatey(-100px);
	transform: translatey(-100px);
	-webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
	transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
	padding: 10px;
}
.hovereffect-3 a.info {
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	background-color: transparent;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 7px 14px;
}
.hovereffect-3 a.info:hover {
	box-shadow: 0 0 5px #fff;
}
.hovereffect-3:hover img {
	-ms-transform: scale(1.3);
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
.hovereffect-3:hover .overlay {
	opacity: 1;
	filter: alpha(opacity=100);
}
.hovereffect-3:hover h2 {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-transform: translatey(0);
	-webkit-transform: translatey(0);
	transform: translatey(0);
}
.hovereffect-3:hover a.info {
	opacity: 1;
	filter: alpha(opacity=100);
}
.hovereffect-3:hover a.info {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}

.lewy { float: left; margin: 0 40px 0 30px; border: 2px solid #fff; -webkit-box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
-moz-box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78);
box-shadow: 20px 26px 54px -26px rgba(0,0,0,0.78); }
.prawy { float: right; margin: 0 40px 0 30px;  }






@media   (max-width: 1690px) {

body{
	background:url(../gfx/tlo1.jpg)  repeat-x ; background-size: 100%; background-color: #f0f8ff;
}
}


@media (max-width: 1410px) {
	
 
	.gfx {  margin:0; padding: 1px 0 0 8px;  }
	.gfx1 { padding: 28px 0 28px 3px; }}



@media   (max-width: 1100px) {
	 
	
	#ban_l {width: 100%;}
    #ban_r{display: none;}
	 
	nav>a{ font-size: 16px; }
	#content_1 { margin: 0 20px;}
	 
}

@media (max-width: 1080px){
#main_wrap_galery { max-width:800px;}	
	#separator { padding-top: 100px; height: 450px;}
	#ban_l {width: 90%; padding-left: 10%; }
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	
	
	nav>a{
		 background: #525252;
	}
	
	.box{
		width: 49%;
		margin-bottom: 5%;
	}

	ul li:nth-child(3) .box{
		clear: both;
	}

	ul li:nth-child(2n) .box{
		margin-right: 0;
		clear: right;
	}
}




/* Small monitor */
@media (max-width: 920px){
	 
	nav>a{
		 background: aliceblue;
	}
	
	#wrap_stopka {width: 95%; border-right: none; border-bottom: 1px solid #fff; height: auto; text-align: center; margin-bottom: 25px; padding-bottom: 25px; }
	
	#wrap_stopka h1 {text-align: center; margin: 0;}
	
	nav>a{
		padding: 15px 1.5em;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
	}
	.section-right{
		padding: 0 0 2em;
	}
	.section-title{
		font-size: 4em;
		margin-bottom: .2em;
	}
	.section-tagline{
		font-size: 15px;
	}
	.learn-more{
		margin: 0 auto;
	}
}

@media (max-width: 892px){
	
	
	body{
	background:url(../gfx/tlo_400.jpg)  repeat-x ; background-size: 100%; background-color: #f0f8ff;
}
	
	.hovereffect-3 { width: 320px; margin: 20px auto; float: none;}
	
	
	
#main_wrap_galery { max-width:100%; padding: 0; margin: 0 auto; padding: 20px;} 	

#content_1 img { width: 100%; margin: 0 auto; float: none;  } 	
	#c_left {width:100%; float: none;text-align: center;}
	#c_right {width:100%; float: none;}
	
	.ramka { width: 100%; margin: 0 auto; float: none;  } 
}

 
@media (max-width: 400px){

	.hovereffect-3 { width: 100%; margin: 0 auto; float: none;} }
 


	
	
	
	/* Landscape phone to portrait tablet 
	h1{
		 
	}
	.header-left,
	.header-right{
		width: 100%;
		text-align: center;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
		padding: 2em 0;
	}
	.section-right{
		padding: 1em 0 2em;
	}
	.section-title{
		font-size: 3em;
		margin-bottom: .2em;
	}
	.section-tagline{
		font-size: 15px;
	}
	.learn-more{
		margin: 0 auto;
	}
	
}
 */
/* Landscape phones and down */
@media (max-width: 970px) {
	
	
	
	
	.container{
		width: 90%; 
	}
	nav{
		height: 0;
		overflow: hidden;
		-webkit-transition: all .3s ease;
	}
	input[type="checkbox"]:checked + nav{
		height: 255px;
	}
	nav>a{
		padding: 0 1em;
		display: block;
		border-bottom: solid 1px rgba(255,255,255,.1);
	}
	h1{
		 
	}
	.header-left,
	.header-right{
		width: 100%;
		text-align: center;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
		padding: 1em 0;
	}
	.section-right{
		text-align: center;
		padding: 1em 0 2em;
	}
	.section-title{
		font-size: 2.4em;
		margin-bottom: 0;
	}
	.section-tagline{
		font-size: 1em;
	}
	.learn-more{
		display: table;
		margin: 0 auto;
	}
	.hidden-desktop{
		display: block;
	}
}


@media only screen and (max-width: 440px) { 
	body{
	background:url(../gfx/tlo_300.jpg)  repeat-x ; background-size: 100%; background-color: #f0f8ff;
}
	 
}