/*www.agrafnet.pl - projektowanie stron www */
 

/* font reset etc.. */

@font-face {
 font-family: regular;
 src: url("font/CooprLt.ttf") /* TTF file for CSS3 browsers */
}

 
span, div, a, h1, h2, h3, h4, p, html, form, body, dl, img, object {margin: 0; border: 0; padding: 0; text-decoration: none; color: #787878; list-style-type: none; font-family:regular; font-size:18px;  line-height:25px; }
div {display:block;}
h1 { font-size:30px; font-family: regular; font-weight:lighter; width:100%; display:block;   float:left; margin:10px 0 15px 0; color:#787878; border-bottom: 1px #e7e7e7 solid; }
h2 { font-size:25px; font-family: regular; font-weight:lighter; }
p, a, ul, li {font-family: arial; }
 

body { background:url(img/main_bg.png); }

a.logo { margin:13px 0 0 15px; width:201px; height:146px; display:block; overflow:hidden;   background:url(img/logo.png) no-repeat; text-indent:-9999px; z-index:20; position:absolute;}
a.ph { font-family: regular; float: right; font-size: 35px; margin: 75px 15px 0 0;}


#container { width:100%; margin:100px 0 0 0; position:relative; z-index:1; }

#belka_gora { width:100%; float:left; display:block; height:180px;  background:url(img/top.png) repeat-x;  position: absolute; top:0; z-index:10; }
#belka_gora_wrap {width:1100px; height:215px; margin:0 auto; position:relative; z-index:10;   }


#baner_wraper { width:100%; height:530px; display:block;  position:relative; margin:  auto 0 auto; background:#0CF;  }


#menu_belka {width:100%; float:left; height:100px; background:url(img/menu_bg_wrap.png) repeat-x;}
#menu_wrap { width:1100px; margin:0 auto; position:relative; padding:7px 0 0 0; z-index:25; text-align:center;   height:50px; }
#menu {  position:relative; z-index:25; }

#menu li {list-style-type: none; margin: 0 auto; float: left;  padding:0 0 0 15px; font-size:22px; display: list-item; font-family: regular;  }
#menu li a {display: block;  color:#4e4e4e; text-decoration: none; padding: 12px 10px 7px; font-size:22px;  font-family: regular;}
#menu li a:hover {   color: #fff; background:#333;  }
#menu li li a { width: 160px; color:#fff; } 
#menu li ul {overflow: hidden; display: none; background:#062151 ; color:#fff;}
#menu li li a:hover { border-bottom: none;  color: #9a0000;}
#menu li:hover ul {position: absolute; padding: 0 15px 0 0; display: block; width: 160px; border-bottom: none; z-index:10; }
 

#menu *:hover {transition: 0.3s ease-in;}



.testimonials {background:#e8f8f8; padding:20px; display:block; overflow:hidden; position:relative; margin: 20px 0; -webkit-border-radius: 5px;}

#layout_wraper { line-height:20px; width:1100px;   display:block; overflow:hidden; position:relative; z-index:1; margin:0 auto;     
 }

 
#content { margin: 0 auto; position:relative; padding: 20px; display:block; overflow:hidden; max-width:1310px; background:#fff; -webkit-box-shadow: 0px 0px 5px 8px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 0px 5px 8px rgba(0,0,0,0.08);
box-shadow: 0px 0px 5px 8px rgba(0,0,0,0.08);}
 
#content ul{}
#content li { list-style-type: circle; margin: 0 0 0 20px;}



#stopka { width:100%; float:left; display:block; height:110px;  background:url(img/foot.png) repeat-x; overflow:hidden;}
#stopka_wrap { width:1050px; margin: 0 auto;}
#stopka_wrap p { color:#000; line-height:10px; width:50%; float:left; display:block; font-size:10px; }
#stopka_wrap a { color:#000; font-size:12px; }
#stopka_wrap span { color:#000;  font-size:5px; }




.foto_podklad { margin:10px;    color:#fff; display:block; overflow:hidden; float:left; text-align:center; width:150px; border: 5px solid #787878; height: 100px;   }
.foto_podklad a {  float:left; overflow:hidden;}
.foto_podklad img {   display:block; overflow:hidden; margin:0; }
.foto_podklad p { color:#fff;  }





#slideshow { margin:auto; position:static; display:block; top:0px; z-index:8;  }

#kontaktowy { width: 350px; float:left;  margin:10px;}

.img-responsive {display: block; width: 100%; height: auto; }

#slideshow IMG { 
	display: block;
    width: 100%;
    height: auto;
	position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0; 
}

#slideshow IMG.active {

    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


#m_box1 { width:588px; height:236px; display:block; overflow:hidden; float:left; background:url(img/box1.gif) no-repeat; }
#m_box1 p { width:380px; text-align:justify; color:#333; margin:20px 0 0 20px; float:left; line-height:25px;}
#m_box1 a {  float:right; margin:160px 20px 0  0;}

#m_box2 { width:588px; height:236px; display:block; overflow:hidden; float:left; background:url(img/box2.gif) no-repeat; }
#m_box2 p { width:320px; text-align:justify; color:#333; margin:20px 0 0 20px; float:left; line-height:25px;}
#m_box2 a {  float:right; margin:160px 20px 0  0;}

#div50 { width:50%; float: left; overflow: hidden; }







@media only screen and (max-width: 1100px) {
		#content { margin: 0 20px; }
	  
	#belka_gora_wrap {width:100%;}	
	#menu_wrap { width:100%; }
	 
	#layout_wraper { width:100%; }
	#stopka_wrap { width:90%; }
	

}
@media only screen and (max-width: 600px) {
	
	#div50 { width:100%; text-align: center;   }

	
		#menu_belka {height: 200px; background:url(img/menu_bg_m.png) ;}
	#menu li {float: none; width: 70%; }
	
	
	
	#belka_gora {   height:115px;} 	
a.logo { margin: 25px auto;     position: relative; }
a.ph { display: none;}	
	
	
.img-responsive {  height:180px; }

	#slideshow IMG {width: 100%; height: 180px;}
	
}

@media only screen and (max-width: 400px) {
#slideshow IMG {width: 100%; }
	img{ width: 100%;}
}