@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin-ext');
@font-face{font-family:'Roboto Condensed';src:url('RobotoCondensed-Regular.ttf'), url('RobotoCondensed-Bold.ttf'), url('RobotoCondensed-BoldItalic.ttf'), url('RobotoCondensed-Italic.ttf');}
@font-face{font-family:'Titillium Black';src:url('TitilliumWeb-Black.ttf');font-weight:bold;}
/* global */
body {
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #414042;
  margin:0 auto; padding: 0;
  text-align: left;
  background-color: white;
  line-height: 1.7;
}

.outer_container { /* całość dokumentu jako takiego, praktycznie body */
  display:flex;
  flex-direction:column;
  align-items: center;
}

.container { /* kolumna, która jest nie szersza niż 1200px i zawsze jest na środku */
  width: 100%;
  max-width: 1200px;
  display:block;
  position:relative;
}

.container .cont_logo_menu { /* zawiera logo i menu; jak się zmniejsza szerokość, to się zawija */
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
}

body.small .container .cont_logo_menu { /* dla zwiniętego menu, żeby menu przeszło pod logo; zwróć uwagę, że body ma klasę .small */
  flex-direction: column;
  align-items: stretch;
}

.container .cont_logo_menu .logo_header {
 flex:0 0 auto; /* żeby się nie skalowało za bardzo */
 padding: 10px 10px 10px 0;
}

.container .cont_logo_menu .logo_header a {
  margin-right: 20px;
}

.fb_button { /* ikonki fb, twittera itd. i guziora menu są zawsze w top right corner */
  position:absolute;
  top:0;
  right:0;
}

/*//////////////////////////////////////////////////////////////////////////////////////////
// Przykład stylowania menu_top  START
//////////////////////////////////////////////////////////////////////////////////////////*/

.menu_top .nav .menu_cont_inner { /* pasek menu jako taki */
  display:flex;
  gap:2rem;
}

.menu_top .nav .item_link { /* <a> na pasku menu */
  color:black;
  font-size:16px;
}

.menu_top .nav li.has_dropdown:after { /* trójkącik przy rozwijanym menu */
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: dashed 5px;
  border-color: #181310 transparent transparent transparent;
  position: absolute;
  right: -0.8rem;
  top: 0.5rem;
}

.menu_top  ul.dropdown { /* obszar rozwijanego podmenu */
  display: flex;
  flex-direction: column;
  gap:0.0rem;

  left:0; /* pozycja wzgl. itema na pasku menu */
  top:1.6rem;

  padding:0;
  background-color: #e67817;
  outline-offset: -0.1rem;
  z-index: 999;
}

.menu_top li.hover ul.dropdown { /* normalnie ul.dropdown nie może mieć paddingu bo ten padding wystaje przy zwiniętym submenu. Ale jak już jest rozwinięte, to czemu nie? */
  padding:0.2rem;
}

.menu_top .subitem_outer { /* element w submenu */
  padding: 0.2rem 0.8rem;
  border: 1px dashed #6b6663;
  border-width: 1px 1px 0 1px;
}

.menu_top .subitem_outer:last-child {
  border-width: 1px;
}

.menu_top .subitem_outer:hover {
  background: #6b6663;
}

.menu_top .subitem_inner { /* sam napis w elemencie w submenu */
  color:white;
  font-size:16px;

  white-space:nowrap;
}


/* dla zwiniętego menu, charakteryzuje się klasą .nav.small; podobnie, body też ma wtedy klasę small: body.small, do użycia do stylowania innych elementów strony w css/app_specific.css */
.menu_top .nav.small .menu_cont_inner { /* pasek menu jako taki */
  display:flex;
  flex-direction: column;
  gap:0;
}

.menu_top .nav.small .item_link {
  flex:1 1 auto;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Przykład stylowania top_menu END
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/* a reszta jest po staremu */


.sidebar {
 float: left;
 padding-right: 10px;
 max-width: 350px;
}
.sidebar .vevent {
 font-size: 15px;
 display: block;
 padding: 10px 15px;
 background-color: #f1f1f1;
 margin: 10px 0;
 margin-right: 30px;
}
.sidebar .vevent:hover {background-color: #6b6663; color: white;}
.sidebar .vevent .kurs_miasto {display: inline-block; font-weight: bold; color: #e67817; text-transform: uppercase;}
.sidebar .vevent .kurs_daty {display: inline-block; color: #181310; margin-left: 3px; font-weight: bold; }
.sidebar .vevent:hover .kurs_daty {color: white}
.sidebar .vevent .kurs_nazwa {clear: both; display: inline-block; margin-top:5px}



.main-content {width: 830px;float: left;padding-left: 10px;}
a {outline:none; color: black; text-decoration: none;}
a.jumpDown {display: inline-block; padding: 10px 20px; background-color: #181310; outline: 1px dashed #6b6663; outline-offset: -3px; color: #ce690f; text-decoration: none; transition: color 1s ease-out; }
a.jumpDown:hover {background-color: #ce690f; color: #181310}
.opis {padding: 0 10px}
/*
header {
  margin: 0 auto;
  padding: 0;
  text-align:center;
  max-width: 1100px;
}
*/

.quick_contact {
 float: right;
}


p {text-align: justify;}


input[type=text], input[type=password] {
  background-color: white;
  margin: 5px 20px 5px 5px;
  padding:10px;
  display:inline;
  border:1px solid #e0e0e0;
}
.columns { display: inline-block;}
.content { width: 100%; margin: 0;  padding: 0;}

/* SLIDER START */
#slider { position: relative; overflow:hidden; margin: 0; width:100%; height:auto; margin-bottom: 10px;}
#slider .slides { position: relative; margin: 0; padding: 0; list-style: none; height:100%;}
#slider .slides .slide { position: relative; display: block; float: left; margin: 0; padding: 0; text-align: center; height:100%;}
#slider .slides .slide img { width:100%; height:auto; transition: all 1s ease}
/* jak są używane kontrolki do przewijania slidera*/
a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}
a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease;}
a.control_prev { border-radius: 0 2px 2px 0;}
a.control_next { right: 0; border-radius: 2px 0 0 2px;}
/* */
/* SLIDER END */


/* content glowny */
.content_main {
  margin: 0 auto;
  max-width: 1150px;
}


.toLeft {float: left;}
.toRight {float: right;}
.verMiddle {vertical-align: middle;}

.txtLeft {text-align: left;}

h1 {font-size: 30px; color: #181310; }
h2 {font-size: 20px; color: #2B1B0E; }

h3 {font-size: 24px; color: #Ce690f;  margin: 0; padding: 0px; }
h4 {font-size: 20px; color:#2B1B0E;  margin-bottom: 0; margin-top:3px; padding-bottom: 0;}
h5 {font-size: 13px; color: #515151;  margin-bottom: 5px; padding-bottom: 0; text-align:left;}
h6 {font-size: 11px; color: #909090;  margin-bottom: 0; padding-bottom: 0;}

h3.cena {font-size: 20px; color: #BC0A0A;  padding: 0 0 20px 0px;   border-bottom: 1px solid #efefef; display: block; max-width: 400px; margin-bottom: 20px;}

form {margin: 0; padding: 0;}
.formLine {margin-bottom: 5px; width: 100%; height: auto; overflow: hidden;}

.szary {color: #8B8B8B;}

/* footer */
.footer_upper {
  width: 100%;
  clear: both;
  padding-top: 20px;
  text-align: left;
  background-color: #2D2927;
  background: url('../pics/newsletter_tlo.jpg') top right repeat-x transparent;
  padding: 0;
  color: white;
  margin-top: 30px;
  height: 330px;
}
.footer_upper_cont {
  max-width: 1200px;
  margin: 0 auto;
}
.film { display: inline-block; text-align: left; margin-top: 25px; padding: 0;}
.film iframe {width: 400px; height: 250px;}
.film_opis {color: white; font-size: 13px; text-align: left;}
.newsletter_section {display: inline-block; padding: 70px 0 0 250px;vertical-align: top;}

footer {
  clear: both;
  padding-top: 10px;
  text-align: left;
  background-color: #181310;
  padding: 30px 40px;
  color: white;
  margin-top: 0px;
  border-top:1px dashed #6b6663;
}
.footer_content, .footer_upper_content {
  margin: 0 auto;
  max-width: 1200px;
}
footer img {float: left; margin-right: 20px;}

footer .menuFooter {
  display: inline-block;
  margin: 0 20px 10px 0;
  padding: 0;
}
footer .menuFooter a {
  color: #ce690f;
}
footer .menuFooter a:hover {
  color: #ce690f;
  text-decoration: none;
}
#createdBy {
  float: right;
}
#createdBy a {
  color: gray
}
#createdBy a:hover {
  color: orange;
  text-decoration: none;
}

/* std */

.doPrawej {float:right; margin:10px 5px 2px 20px;}
div.gallery  {
 float:left;
 display: inline;
 margin-right: 8px;
 width:250px;
 font-size:100%;
 color: gray;
}

#prod {clear:both; text-align:left; margin: 0; font-size:90%;}
#prod td {padding: 5px 4px;}
#prod th {padding: 5px 4px;}
.podpis {clear:both; text-align:center; margin: 0; padding:0; font-style:italic;}

div.gallery img {border:0px solid #efefef; float:left; padding: 4px 4px 4px 4px;}

div.gallery-alb  {
 float:left;
 display: inline;
 margin-right: 8px;
 width:600px;
 font-size:100%;
 color: gray;
}
div.gallery-alb img {border:0px solid #efefef; float:left; padding: 4px;}

div.gal_back  {
 text-align:right;
}

div.gal_foto  {
 text-align:center;
}

div.gal_foto img {border:0px solid #efefef;  padding: 4px; }

.tabelka {margin-top:5px; text-align:left;}

.comm_body {border-top:1px solid #efefef; margin-top:5px; padding:5px 20px; font-style:italic; }
.comm_headline {color:#aaaaaa;}
#forum td {padding: 4px; border-bottom: 1px solid #E4F2D2;}
#forum th {text-align:center;}
#forum a {text-decoration: none;}
img.foto_gal {
  border: solid 4px #FFDF4A;
}

.rewind {text-align:center;}
#table_gal td {text-align:center;vertical-align:center;}
.forum_temat {font-size:150%; font-weight: bold; border-bottom:1px solid #CADBB5; margin-bottom: 10px;}
.forum_data {float:right;font-size: 90%; font-weight: bold;}
.forum_autor {font-size: 90%; font-weight: bold;}
.forum_body {margin: 10px 40px 20px 20px;}


fieldset {border: 0; margin-bottom: 20px;}
label {display: inline-block; min-width: 100px; text-align: right}
.galeria {
  margin: 25px 0 20px 0; padding: 0; list-style: none; width: 600px;
}
.galeria li {
  display: inline; margin-right: 15px;
}
.galeria img {
  border: 4px solid #FFDF4A;
}
.fotka {border:1px solid #cdcbc7;}
.fotocenter {border:1px solid #cdcbc7; padding: 3px;}


.przyciski {width:200px; border:0;height:30px; background-color:#ffde00; font-size:14px;color:#454545;}

.przycisk {text-decoration:none; color: #454545;}
#search_form {
  display: inline;
}


#result_fader { /* styl dla potwierdzenia dodania do koszyka i schowka */
  text-align:center;
  padding:20px 40px;
  color:white;
  font-size:24px;
  background-color:#ff6600;
  border-radius:10px;
  position:fixed !important;
  top:250px;
}

.arrow_btn {
  cursor: pointer;
  float:left;
  width:35px;
  height:35px;
}

#arrow_up_btn {
  background: url('../pics/arrow-up_off.png') no-repeat;
}
#arrow_up_btn:hover {
  background: url('../pics/arrow-up.png') no-repeat;
}
#arrow_down_btn {
  background: url('../pics/arrow-down_off.png') no-repeat;
}
#arrow_down_btn:hover {
  background: url('../pics/arrow-down.png') no-repeat;
}



ul.rekl {
  list-style-type: none;
  margin:30px 0 0 0;
  padding: 0;
}

.rekl li img {
  border-radius:5px;
  margin-bottom: 5px;
  margin-right:20px;
}
select {
   background-color: white;
   padding: 5px 1px;
   border: 1px solid #e0e0e0;
   font-size: 12px;
   margin:5px;
}
.submit, .button, .submit2 {
 padding: 10px 20px;
 background-color: #181310;
 outline: 1px dashed #6b6663;
 outline-offset: -3px;
 color: #ce690f;
 text-decoration: none;
 transition: color 1s ease-out;
 display: inline-block;
 border-width:0;
}

td > .submit2 {margin: 20px 0 0 40px; text-transform: uppercase}
a.button:hover {background-color: #ce690f; color: #181310}

.front_btn {
 padding: 10px 20px;
 background-color: #DB904D;
 outline: 1px dashed #6b6663;
 outline-offset: -4px;
 color: white;
 text-decoration: none;
 transition: all 1s ease-out;
 display: inline-block;
 font-size:1rem;
 font-weight:normal;
 cursor:pointer;
 margin:20px 0 30px 0;
}

.front_btn:hover {
  background-color: #ce690f;
}


.content_pad a, fieldset {
 padding: 10px 20px;
 background-color: #ce690f;
 background-color: #DB904D;
 outline: 1px dashed #6b6663;
 outline-offset: -4px;
 color: white;
 text-decoration: none;
 transition: color 1s ease-out;
 display: inline-block;
}

.content_pad a:hover, fieldset:hover {
  background-color: #ce690f;
  transition: color 1s ease-out;
  display: inline-block;
}

.data {color: #e67817; font-weight: bold;}

.terminy_kursu {display: flex; outline: 1px dashed #383330; margin: 10px 20px; padding: 10px; outline-offset:-4px; background-color: #e0e0e0; width: auto; max-width:none;}
.terminy {display: inline-block; width: auto; margin-bottom:5px;}
.terminy th {font-weight: normal; color: black; text-align: right;}
.terminy td, .terminy th { border-bottom: 1px dashed #6b6663; padding-right: 20px;}
.terminy td:last-child {}
.terminy:hover, .terminy_kursu:hover, fieldset:hover {
   background-color: #ce690f;
}
.terminy_kursu:hover .data {color: white}

ul.terminy {padding: 20px 20px 20px 45px; }
ul.terminy li {padding: 5px;}
ul.terminy li a:hover {color: white}
.lupka {
  background: url('../pics/lupka.png') top right no-repeat #9e9e9e !important;
}
.submit a {
   color: white;
}
input, textarea, keygen, select, button {
   font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
}

textarea {width: 550px; height: 50px; border:1px solid #e0e0e0; margin:5px; display: inline-block; vertical-align: middle;}
.problemy_wych {margin-left: 100px}
a:hover.button {
  text-decoration: none;
  color: white;
}

.pager {
  margin: 10px 0;
  font-size: 110%;
}

.pager2 {
  margin: 10px 0;
  font-size: 110%;
  float: right;
  padding-top: 20px;
}
.pager2 a {
  margin-right: 20px;
}

.clearfix {
  clear: both;
}


.ListLayout {
  display: inline-block;
  vertical-align: top;
  max-width: 200px;
  min-height: 260px;
  margin: 0 25px 25px 0;
  padding: 20px;
  background-color: #f0f0f0;
  outline: 1px dashed #ce690f;
  outline-offset: -3px;
  color: #ce690f;
  text-decoration: none;
  transition: color 1s ease-out;
}
.ListLayout:hover {
  background-color: #DB904D;
}

.fotkaListLayout {
 width: 200px;
 height: 150px;
 overflow: hidden;
}

.fotkaListLayout img {
 width: 100%;
 filter: none;
 transition: all  1s ease-out;
}

.fotkaListLayout img:hover {
 width: 100%;
 filter: hue-rotate(30deg) opacity(0.5);
}

.tytulListLayout {
  line-height: 1.3;
  margin-bottom: 10px;
}
.tytulListLayout a:hover {
  text-decoration: none;
  color: black;
}

.zwiastunListLayout  {
  font-size: 80%;
  color: black;
}
.zwiastunListLayout a:hover {
  color: black;
  text-decoration: none;
}
.dataListLayout {
  color: gray;
}

#form_partner {
  font-size:15px;
}

.zdjecieFullLayout img {max-width: 500px;}

.nazwa_miasta {
  position: relative;
  top: 50%;
  left: 0%;
  transform: translate (-50%, -50%);
}

a.tytulMiastoListLayout {
  vertical-align: middle;
  display: inline-block;
  width: 190px;
  padding: 35px 25px;
  margin: 6px 4px;
  background-color: #f0f0f0;
  outline: 1px dashed gray;
  outline-offset: -4px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #181310;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: background-width 2s; /* For Safari 3.1 to 6.0 */
  transition: background-color 1s;
}
a.tytulMiastoListLayout:nth-child(even)
 {
  background-color: #e0e0e0;
  outline: 1px dashed #383330;
}
a.tytulMiastoListLayout:hover
 {
  background-color: #e67817;
  color: white;
  outline: 1px dashed white;
}


.aktListLayout {
  display: block;
  vertical-align: top;
  margin: 0 0 25px 0;
  padding: 10px;
  background-color: white;
  outline: none;
  border-bottom: 1px dashed #ce690f;
  color: #ce690f;
  text-decoration: none;
  transition: color 1s ease-out;
  height: auto;
  clear: both;
  overflow: auto;
}

.dataListLayout, .autorListLayout, .dataFullLayout, .autorFullLayout  {font-size: 90%; display: inline-block; margin-right: 10px;}

.aktFotkaListLayout {
 float: right;
 width: 200px;
 height: 150px;
 overflow: hidden;
}
.aktFotkaListLayout img {
 width: 100%;
 filter: none;
 transition: all  1s ease-out;
}

.aktFotkaListLayout img:hover {
 width: 100%;
 filter: hue-rotate(30deg) opacity(0.5);
}

.separator {
  border-bottom: 1px solid #f0f0f0;
  margin-top: 30px;

}

.oryg {
  float: left;
  margin-right: 10px;
}


@media screen and (max-width: 1215px) and (min-width : 1000px) {
 .sidebar {margin-left: 10px; width: 25%}
 .sidebar .vevent {margin-right: 10px;}
 .main-content {width: 70%; padding: 0; margin: 0 10px; }
 .film {padding: 0 30px;}
 .film iframe {}
  a.tytulMiastoListLayout {width: 150px;}
  .newsletter_section {padding: 70px 0 0 20px;}
  .footer_upper_cont {max-width: none; width: 100%; }
}

@media screen and (max-width: 999px)  {
 .sidebar h2 {color: white}
 .sidebar {width: auto; max-width: none; float: none; overflow: auto; background-color: #7b7673; padding: 0 0 10px 15px;}
 .sidebar .vevent {float: left; background-color: #6b6663; padding: 8px; margin: 5px; color: #ffffee;}
 .sidebar .vevent:hover {background-color: #7b7673;}
 .sidebar .vevent .kurs_miasto {color: #ff6600; }
 .sidebar .vevent .kurs_daty {display: block; color: white; }
 .main-content {max-width: none; width: 96%; margin-top: 20px; padding: 0 2% ;}
  a.tytulMiastoListLayout {width: 180px; }
  .film {padding: 10px 20px;}
  .film iframe {width: 320px; height: 200px; }
  .newsletter_section {padding: 70px 0 0 20px;}
  footer {width: 100%; padding: 0; font-size: 75%}
  .footer_content {padding: 10px; max-width: none; }
  .ListLayout { max-width: 170px; }
  .fotkaListLayout img {width: 166px;}
  #createdBy {float: none;}

}

@media screen and (max-width: 767px)  {
  a.tytulMiastoListLayout {width: 90%; padding: 20px;}
  .logo_header { margin: 20px 10px 0 20px; overflow: hidden; margin-top: 50px;}
  .logo_header img { height: 60px; }
  .sidebar_right {float: none; text-align:center; max-width: none;}
  .zdjecieFullLayout {max-width: none; width: 96%; }
  .zdjecieFullLayout img {max-width: none; width: 100%; margin: 0; }
  .ListLayout {
    float: none;
    max-width: none;
  }
  .footer_upper {height: auto; background-repeat: no-repeat; background-position: center; background-color: #181310}
  .newsletter_section {margin: 0; padding: 10px; display: block;}
   .problemy_wych {margin-left: 10px;}
   textarea {width: 200px; height: 50px;}
   label {display: block; text-align: left; width: 260px }
   .columns {display: block;}
   .terminy {font-size:80%}
   .menu_top .subitem_inner {white-space: break-spaces}

}

@media screen and (max-width: 400px) {
  .logo_header { margin: 0px; text-align: center; width: 94%;}
  .logo_header img {}
  .ListLayout {float: none;max-width: none;}
  .doPrawej {float: none; margin: 0;}
}


/*///////////////////////////////////////////////////////
// SelectPicker START
///////////////////////////////////////////////////////*/

.selectpicker {
  background:white;
  border:1px solid #aaa;
/*
  -webkit-box-shadow: 10px 10px 12px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 12px -2px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 12px -2px rgba(0,0,0,0.75);
*/
  padding:0;
  margin:0px;
  overflow-y: auto;
  overflow-x:hidden;
}

div.selectpicker_inp {
  background:white;
  padding: 4px 23px 0 5px;
  cursor:default;
/*  border:1px solid rgb(169, 169, 169); */
/*  -webkit-appearance: menulist; */
  align-items: center;
  text-align: start;
  border: 1px solid #e0e0e0;
  background: url(../pics/selectpicker_arrow.png) center right no-repeat white;
/*  margin-top:2px; */
}

.selectpicker .selectpicker_item, .selectpicker .selectpicker_kat {
  display:block;
  margin:0;
  margin-bottom:5px;
  border:none;
  background:none;
  font-family: "Roboto Slab", arial, sans-serif !important;
  font-size: 13px;
  font-weight:normal;
  text-decoration:none;
  color:black;
}

.selectpicker .selectpicker_kat_title {
  padding: 0 0 0 2px;
  font-weight: bold;
  cursor:default;
}

.selectpicker .selectpicker_item {
  padding: 0 0 0 12px;
  cursor:default;
}


.selectpicker .selectpicker_item.selected, .selectpicker .selectpicker_kat_title.selected {
  background:#23a4ff;
  color:white;
}

.selectpicker .selectpicker_item:hover, .selectpicker .selectpicker_kat_title:hover {
  background:#23a4ff;
  color:white !important;
}

.selectpicker .selectpicker_kat_title {
  margin-bottom:5px;
}

/*///////////////////////////////////////////////////////
// SelectPicker END
///////////////////////////////////////////////////////*/



/*///////////////////////////////////////////////////////
// MENU START
///////////////////////////////////////////////////////*/



/* wyresetowanie foundation i innych */
ul.sf_menu, ul.sf_menu ul, ul.sf_menu li, ul.sf_menu div, ul.sf_menu a, ul.sf_menu nav, ul.sf_menu section, ul.sf_menu span
{
  display:inline-block;   border:0;  margin:0;  padding:0;  text-align: left;  text-decoration: none;  text-transform: none;
  font-weight:normal;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;
}
/* defaultowe parametry dla menu */
ul.sf_menu, ul.sf_menu ul, ul.sf_menu li, ul.sf_menu div, ul.sf_menu a, ul.sf_menu nav{font-size:16px;  color:#545454; font-weight: normal;}
ul.sf_menu {  margin-top:10px;  margin-bottom: 10px;  display:block;}
ul.sf_menu .contain_to_grid { width:100%; display:block;}
ul.sf_menu .top_bar {  max-width: 920px;  margin: 0 auto;  display:block;  background: white;}
ul.sf_menu ul.title_area { /* przełącznik zwiniętego menu */  display:none;}
ul.sf_menu ul.drop_down { /* defaultowo submenu nie są widoczne */  display:none;}
ul.sf_menu .top_bar_section ul {  cursor:default; }
ul.sf_menu .top_bar_section > ul > li { /* item w main menu */
  padding-left:5px; /* odstęp między itemami w głównym menu */
  padding-right:20px; /* odstęp między itemami w głównym menu */
  position:relative;
  z-index:999;
}
ul.sf_menu .top_bar_section > ul > li:hover, ul.sf_menu .top_bar_section > ul > li.active { /* podświetlenie itemów w main menu */
  text-shadow:1px 1px #d7dce2;
  position:relative;
}

ul.sf_menu .top_bar_section > ul > li.active_menu { /* aktywny element w main menu */
  text-shadow:1px 1px #d7dce2;
  border-radius: 2px;
}

ul.sf_menu li a {  cursor:pointer;}
ul.sf_menu li.has_dropdown  {  cursor:default;  position:relative; text-shadow: none; color: #545454; font-weight: normal;}
ul.sf_menu li.has_dropdown a {  cursor:default;  position:relative; text-shadow: none; color: #545454; font-weight: normal;}
ul.sf_menu .top_bar_section > ul > li.has_dropdown > a:after { /* strzałki przy rozwijanych itemach */
  content: "";   display: inline-block;  width: 0;  height: 0;  border: dashed 5px;  border-color: #181310 transparent transparent transparent;  /* kolor strzałki */
/*  margin-right: 5px;
  margin-top: -2.5px; */
  right: -5px;
  color:red;
}

ul.sf_menu .top_bar_section ul li:hover  ul.drop_down, ul.sf_menu .top_bar_section ul li.active ul.drop_down { /* obszar rozwijanego itema */
  position:absolute;
  display: block;
  width: auto;
  overflow: visible;
  clip: auto;
  outline: 3px solid red;
  background: red;
  color: #181310;
  left:0px;
  min-width:100%;
  z-index:999;
}

ul.sf_menu .top_bar_section ul li:hover  ul.drop_down li, ul.sf_menu .top_bar_section ul li.active ul.drop_down li { /* item w podmenu */
  display:block;
  width:100%;
  background-color: pink;
}

ul.sf_menu .top_bar_section ul li:hover  ul.drop_down li:hover, ul.sf_menu .top_bar_section ul li.active ul.drop_down li:hover { /* item w podmenu */
  background:#6b6663;
  outline: 3px solid #6b6663;
  background-color: yellow;
}

ul.sf_menu .top_bar_section ul li:hover  ul.drop_down li a, ul.sf_menu .top_bar_section ul li.active ul.drop_down li a { /* tekst itema w podmenu */
  height: 100%;
  width:100%;
  line-height: 1;
  padding: 10px 15px;
  white-space: nowrap;
  border: 1px dashed #6b6663;
  border-width: 1px 1px 0 1px;
  cursor:pointer;
  color: white;
}

ul.sf_menu .top_bar_section ul li:hover  ul.drop_down li:last-child a, ul.sf_menu .top_bar_section ul li.active ul.drop_down li:last-child a { /* tekst ostatniego itema w podmenu */
  border-width: 1px 1px 1px 1px;
}

ul.sf_menu .top_bar_section ul li:hover  ul.drop_down li:hover a, ul.sf_menu .top_bar_section ul li.active ul.drop_down li:hover a { /* item w podmenu */
  background-color: #ce690f;
  color: white;
}

/*
 *
 *  end menu
 *
 * */