/* border: 1px solid #ff0; background-color: #ff0; */

/* Reset by Eric Meyer */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, textarea,
table, caption, tbody, tfoot, thead, tr, th, td 
{border:0;  margin:0; padding:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* stale */
h1, h2, h3, h4, h5, h6 { text-align:left;  color:#000; clear:left;  font-weight:400; text-decoration:none; font-variant: small-caps; }




/* OPACITY TRANSITION TRANSFORM */
.opacityOK 		{ opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ }
.transitionOK 	{ transition: all 0.3s linear; }   /* -webkit-transition: all 0.3s linear; - Safari */
.transformOK	{ transform:  scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari and Chrome */}




/* LAYOUT ========================================================================================================================================== */
body { background: #fff ; color:#000; font-size:15px; text-align:center; line-height:1.4; padding:0; font-family: Ubuntu, Arial, Verdana, sans-serif;}



.all		{clear:both; width:900px; padding:0; margin:0 auto; }

/* BOXY */
.box1, .box2, .box3, .box4  {margin:0 0 20px 0; padding:0;}

.box1  {float:left; width:300px; } /* outline: 1px solid #eee; */
.box2  {float:left; width:600px;}
.box3  {float:left; width:870px;}



/* ELEMENTY HTMLa  ========================================================================================================================================== */

/* OGOLNIE */
h2 {font-size:24px; line-height:1.2em; font-weight:700; color:#000; padding:30px 20px 4px;  }
h3 {font-size:22px; line-height:1.2em; font-weight:400; color:#f70; padding:8px 0px 4px;  }


p {padding:6px 20px 6px; text-align:left;}
p.pasek {border-left:6px solid #f70; border-bottom:1px solid #ccc; background-color:#f3f3f3; padding:16px 20px 8px; text-align:center; margin-top:20px; }
ul {padding:2px 30px 4px 47px; text-align:left; list-style-type: square; }
img {display: block; border: 0px; margin:0 auto;}
strong {font-weight:600; }
em {font-style:italic;}
strong em {font-style:normal; font-weight:500; color:#f70;}

.l {text-align:left;}
.p, .r {text-align:right;}
.c {clear:both; text-align:center; }
.s {font-size:90%;}
.clear {clear:both;}
.podpis {text-align:right;  font-style: italic; color:#999;}


/*  a, a img  */
a, a p, a h2 { transition: all 0.4s linear;}
a img { transition: all 0.2s linear;}
a {font-weight:normal; text-decoration:none; color:#000;}
a:hover, a:hover p, a:hover h2 {text-decoration:none; color:#f60;  }
#bot a:hover {text-decoration:none; color:#c30;  }

a:hover img {opacity:0.4; transform:  scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1);}
.img   {overflow:hidden;  width:260px; margin: 0 auto 0px; background:#f60 url('img/zoom.png') no-repeat center;}
.mb { margin-bottom:  30px;}



/* SZCZEGÓŁY  ========================================================================================================================================== */

/* TOP */
#top	{width:100%; height:420px; background: #222 url('img/top_grad.png') repeat-x top; border-bottom:2px solid #fff;  box-shadow:0px 0px 40px #666;  }  /* position: fixed; top:0px; float:left; */
#top .all {height:420px; background: transparent url('img/top_zdj.png') no-repeat bottom;}  

/* LOGO */
#logo {float:left; width:260px; height:100px; margin:0;  background:transparent url('img/logo.png') no-repeat 10px 10px; }
#logo a {display:block; width:260px;  height:100px; text-decoration:none;}
#logo h1 { width:260px; height:100px; margin:0; padding:0; text-align:right; }
#logo a h1 {text-decoration:none; font-size:8px; line-height:10px; color:#555;}

/* FLAGA */
#flaga {width:80px; height:90px; float:left; border:0px solid #666;}
#flaga a {width:80px; height:55px; padding-top:35px; display:block;}
#flaga a img { opacity:0.5; }
#flaga a:hover img {opacity:1; transform:  scale(1.0); -ms-transform: scale(1.0); -webkit-transform: scale(1.0);}



/* TOPMENU */
#menu		{float:right; width:550px; height:100px; padding:0; list-style:none; overflow: hidden;}
#menu li {float:left; display:block; width:109px; height:100px; list-style:none; margin:0; padding:0 0 0 1px; background:transparent url('img/top_kreska.png') no-repeat top left;}
#menu li a {display:block; width:109px; height:60px; padding-top:40px; overflow: hidden; transition: all 0.4s linear;}
#menu a#pl2, #menu a#pl3, #menu a#ru3 {height:70px; padding-top:30px;}
#menu li a:hover, #menu li a.on  { background-color:#000;  color:#f60;}

#menu li a {font-size:19px; line-height:1.0; color:#ddd; font-weight:700; text-align:center; text-decoration:none; font-variant: small-caps;  }

/* SOCIALMEDIA ============================================================================================*/
#socialmedia {min-width:50px; height:225px; top:110px; position:fixed; right:0; z-index:100;  border:0px solid #eee;}
#socialmedia a {color:#000; font-size:14px; line-height:35px;  white-space:nowrap; white-space:nowrap; text-decoration:none; text-align:left; overflow:hidden;}
#socialmedia a {clear:both; display:block; float:right;  width:0px; height:40px; padding:7px 0px 3px 50px; margin-bottom:15px; opacity:0.6; background-color:#eee; background-color:rgba(200,200,200,0.4); background-image: url('img/ikony.png'); background-repeat:no-repeat}
#socialmedia a:hover {background-color:#eee; width:120px;  outline:1px solid #000; opacity:1;}


#socialmedia a#soc_pl {background-position: 0px -000px;}
#socialmedia a#soc_en {background-position: 0px -100px;}
#socialmedia a#soc_ru {background-position: 0px -200px;}
#socialmedia a#soc_zh {background-position: 0px -300px;}


/* BOTTOM */
#bot	{clear:both; width:100%; padding:0px 0 20px; margin-top:40px; background: #444 url('img/bot_tlo11.png') repeat-x top; box-shadow:0px 0px 40px #666; }
#bot a p, #bot a h2, #bot a, #bot p  {color:#eee;} 
#bot a:hover p, #bot a:hover h2 {color:#f60;} 
#bot h2 {padding:10px 20px 8px; text-shadow:1px 1px 1px #000;} /* border-bottom:1px solid #666; box-shadow:0px 1px 0px #000; */
#bot p  { padding:5px 20px;  text-shadow:1px 1px 1px #000;}

#bottlo {width:100%; height:30px; margin-bottom:20px; background-color:#363636; border-top:2px solid #fff;  border-bottom:1px solid #111;  box-shadow:0px 10px 20px #333;      }


/* AVN */
#avn {clear:both; height:13px; overflow:hidden;  padding:5px;}
#avn a {color:#222; font-size:11px; line-height:11px; text-decoration:none;}
#avn a:hover {color:#999; }


/* TABLE */
table { border-collapse: separate; border-spacing: 3px;  padding:10px; margin:0 auto;   }
table td   {line-height:1.0em; border:1px solid #ccc; background-color:#f9f9f9; padding:5px 4px; text-align:left; border-radius:2px; text-align:center;}
table th   {line-height:1.0em; border:1px solid #aaa; background-color:#fda; padding:8px 4px; text-align:left; border-radius:2px; text-align:center; width:150px}
table td a {  text-decoration:none; }



/* MAPA ========================================================================================================================================== */
#mapa {float:right; width:600px;  padding-bottom:20px; overflow:hidden;}
#mapa p {padding:2px 0px 20px; text-align:center;}
#mapa iframe {display:block; width:600px; height:400px; border:none;}



/* FORMULARZE ==================================================================================================================================== */

/* FORM */
form 					{display:block; float:right; width:620px; clear:both; background:transparent; border:none; padding:2px 0px;}
form fieldset     {display:block; clear:both; background:transparent; border:1px solid #666; padding:10px; margin:20px 30px; border-radius:2px;}
form legend			{display:block; clear:both; background:#333;     border:1px solid #666; padding:10px 20px; margin-left:20px; color:#999; font-size:18px; border-radius:2px;}
form p 				{display:block; float:left; clear:both; margin:1px; padding:6px 0 0; outline:0px solid #eee;}
form p.p_radio_l	{padding-top:12px; font-weight:bold; }
form p.p_radio_i	{padding-top:0px;}
form label  		{display:block; float:left; clear:both;  width:250px; padding:4px 6px; line-height:1.0; text-align:right; color:#999; outline:0px solid #eee;}
form p.p_radio_l label {color:#555; margin-bottom:-3px;}
form label small  {font-size:11px; color:#999;}
form input.text   {display:block; float:left; height:20px; width:250px; padding:2px; background:#333; border: 1px solid #999; font-size:14px; color:#999; border-radius:2px;}
form select.select{display:block; float:left; height:25px; width:250px; padding:2px; background:#333; border: 1px solid #999; font-size:14px; border-radius:2px;}
form input.radio  {display:block; float:left; height:15px; width:15px;  margin-top:4px;}
form textarea     {display:block; float:left;              width:250px; padding:2px; background:#333; border: 1px solid #999; font-size:14px;  border-radius:2px;}
form input.submit {display:block; float:left;  width:120px;             padding:10px; background:#222; border:0;               font-size:16px; line-height:30px; margin-right:0px; color:#999; text-align:center; text-decoration:none; background: linear-gradient(#444, #111); transition: all 0.3s linear;  border-radius:4px;  box-shadow:1px 1px 4px #000;}
form input.submit:hover { background:#666; }
form input.text:focus, form textarea:focus {border: 1px solid #fff; background: #000; color:#fff;}
/* readonly */
form input.readonly   {background:none; border:none; color:#a22;}
form input.readonly:focus {background:none; border:none; color:#a22;}

p.bledy {border:2px solid red; color:red; padding:10px; margin:20px; background:#ffe; float:none; width:auto; border-radius:4px;}
p.bledy strong {color:red;}

a.przycisk {display:block; float:right; padding: 0 12px;  height:28px; line-height:24px; color:#999; text-align:center; text-decoration:none; background:#222; background: linear-gradient(#444, #111); transition: all 0.3s linear;  border-radius:4px;  box-shadow:1px 1px 4px #000;  }







/* ==================================== */
/* =========== ColorBox =============== */
/* ==================================== */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(colorbox/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}

			
/* ====================================== */
/* ========= UKŁADY RESPONSYWNE ========= */
/* ====================================== */

@media all and (max-width:899px)
/* 2 kolumny */
	{
	.all  {width:600px;}
	#menu li a {font-size:22px;  text-shadow:0px 0px 5px #000}
	}
	
@media all and (max-width:599px)
/* 2 kolumny */
	{
	.all  {width:100%;}
	.box2  {width:100%;}
	
	#menu		{float:left; width:100%; height:auto;}
	#menu li { float:none; display:block; width:auto; height:auto; list-style:none; margin:0; padding:0 0 0 px; background:transparent url('img/top_kreska.png') no-repeat top left;}
	#menu li a, #menu a#pl2, #menu a#pl3, #menu a#ru3   { text-align:left;   color:#fff; display:block; width:auto; height:auto; padding:10px 30px; overflow: hidden; margin-right:60px;}

	
	
	}