/* Yahoo User Interface Reset */
  body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, textarea, p, blockquote, th, td, img, option{margin:0; padding:0; }
  table{border-collapse:collapse; border-spacing:0}
  fieldset, img{border:0}
  address, caption, cite, code, dfn, th, var{font-style:normal; font-weight:normal}
  ol, ul{list-style:none}
  caption, th{text-align:left}
  h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
  q:before, q:after{content:''}
  abbr, acronym{border:0}
  
  ul li{line-height: 133%;}
  
  /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 25, 2012 */
  
  @font-face {
    font-family: 'sansa_pro';
    src:  url('/css/SansaPro-Bold-webfont.woff2') format('woff2'),
          url('/css/SansaPro-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

  }
  
  @font-face {
      font-family: 'sansa_pro';
      src: url('/css/SansaPro-SemiBold-webfont.woff2') format('woff2'),
           url('/css/SansaPro-SemiBold-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }
  @font-face {
      font-family: 'sansa_pro';
      src: url('/css/SansaPro-SemiBoldItalic-webfont.woff2') format('woff2'),
           url('/css/SansaPro-SemiBoldItalic-webfont.woff') format('woff');
      font-weight: normal;
      font-style: italic;
  
  }
  
  
  
  





  
  /* ########################## */
  /*      BLOKOVÉ ELEMENTY      */
  /* ########################## */
  
  
  html{

    overflow-y: scroll;
    
  }
  
  body{          

    color: #634E44;
    background: #fcfaf8;
    font-size: 0px;
    font-family: sansa_pro,verdana,sans-serif;
    
  }
  ::selection{
    background: #6EA84F;
    color: #FCFAF8;
  }
  ::-moz-selection{
    background: #6EA84F;
    color: #FCFAF8;
  }
  
  ::-webkit-input-placeholder { color: rgba(99,78,68,.6); }
  ::-moz-placeholder { color: rgba(99,78,68,.6); } /* firefox 19+ */
  :-ms-input-placeholder { color: rgba(99,78,68,.6); } /* ie */
  input:-moz-placeholder { color: rgba(99,78,68,.6); }
  
  #top{    
    margin-top: 20px;
    padding-left: 25px;
    

    position: relative;    
  }
 
  #pn_logo{
    position: relative;    
    max-width: calc(95% - 31px);
    height: auto;
    margin-right: 10px; /* kvůli zalomení searchboxu, aby se tolik nelepil na pravý okraj loga */
  }
    
  #centrovac{
   width: 960px;
   margin: auto;
   position: relative;
   text-align: left;    
  }
  

  
  .correct{
    height: 0px;
    clear: both;
  }
  
  #pravysloupec{
    float: right;
    position: relative; /* to je kvůli glosáři a výpočtu horní pozice kliknutého hesla */
    width: 370px;
    padding: 0px 20px 10px 20px;    
    margin-top: 60px;
    
    font-size: 16px;
    line-height: 150%;
  }
  
  #pravysloupec.none{
    display: none;
  }  
  
  #pravysloupec *:first-child{
    margin-top: 0px;
  }
  
  #div404{
    background: url("/userfiles/clanky/404.png") no-repeat top right;
    min-height: 350px;
    margin-top: -100px;
    margin-right: -140px;
    padding-top: 100px;
  }  
  /* ########################## */
  /*         HORNÍ  MENU        */
  /* ########################## */
    
    /* celá lišta */
    #top_menu{            
      margin-top: 20px;
      color: #fcfaf8;
      width: 100%;      
      display: table;
      white-space: nowrap;
    }
    
    /* název kategorie */
    #top_menu li.kat{
      font-size: 16px;
      padding: 8px 0px 8px 20px;      
      background: #837364;
      transition: background 300ms linear;
      position: relative;
      cursor: default;
      display: table-cell;
      border-right: 1px solid #FCFAF8;
    }
    #top_menu li.kat:first-of-type{
      width: 20%;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      transition: border-radius 300ms linear 300ms, background 300ms linear;
    }
    #top_menu li.kat:first-of-type:hover{
      transition: border-radius 0s;
      border-bottom-left-radius: 0px;
    }
    #top_menu li.kat:last-of-type{
      border-right: none;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      transition: border-radius 300ms linear 300ms, background 300ms linear;
    }
    #top_menu li.kat:last-of-type:hover{
      transition: border-radius 0s;
      border-bottom-right-radius: 0px;
    }    
    /* název kategorie pod myší */
    #top_menu li.kat:hover{
       background: #6EA84F;
       transition: background 300ms;
       
    }    
    
    /* články v kategorii zabalené */
    #top_menu li.kat ul{
      opacity: 0;
      position: absolute;      
      z-index: -1;
      visibility: hidden;
      background: #6EA84F;
      left: 0px;      
      margin-top: 8px; /* stejně jako spodní padding názvu kategorie */
      transition: z-index 300ms step-end, opacity 300ms linear, visibility 300ms linear;
      padding: 10px 20px 20px 20px;
      border-radius: 0px 0px 8px 8px;
      min-width: 100%;
      box-sizing: border-box;
    }
    /* články v kategorii zabalené - poslední */
    #top_menu li.kat:last-child ul{
      left: auto;
      right: 0px;
    }
        
    /* články v kategorii rozbalené */
    #top_menu li.kat:hover ul{
      z-index: 5;
      visibility: visible;
      opacity: 1;      
      transition: z-index 300ms step-start, opacity 300ms linear, visibility 300ms linear;      
    }
    
    /* položky menu řádkové */
    #top_menu li.kat ul li{
      font-weight: normal;
      font-size: 14px;
      line-height: 175%;
    }
    #top_menu a:link,#top_menu a:visited{
      color: #fcfaf8;
      text-decoration: none;      
    }
    #top_menu a:hover,#top_menu a:active{      
      text-decoration: underline;
    }    
        
  /* ########################## */
  /*        MOBILNÍ MENU        */
  /* ########################## */
    
  #mobile_menu_btn{        
    cursor: pointer;
    display: none;
  }
  #mobile_menu{
    color: #fcfaf8;            
    width: 100%;    
    background: rgba(131,115,100,1);    
    position: absolute;
    top: 110px;
    left: 0px;
    z-index: 1001;       
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transition: transform 500ms ;    
  }
  #mobile_menu.active{    
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transition: transform 500ms ;
  }
  #mobile_menu_close{
      position: absolute;
      width: 15px;
      height: 15px;    
      top: 5px;
      right: 20px;
      cursor: pointer;
  }
/*
    #mobile_menu_close:after{
      content: "×" ;
      font-size: 30px;
      font-weight:  bold ;
    }
*/
  #mobile_menu li.kat > ul{
    max-height: 0px;
    overflow: hidden;
    transition: max-height 300ms;
  }
  
  #mobile_menu li.kat.active > ul{
    max-height: 300px;
    transition: max-height 300ms;
  }
  #mobile_menu li.kat:before{
    content: "\005E";
    margin-right: 10px;
    display: inline-block;
    transition: transform 500ms;
    transform: rotate(180deg);
  }
  #mobile_menu li.kat.active:before{
    transform: rotate(0deg);
    transition: transform 500ms;
  }  


  #mobile_menu > ul > li{    
    font-size: 20px;
    padding: 15px 0px 15px 25px;
    
    border-top: 1px solid silver;   
    cursor: pointer;
  }
  #mobile_menu > ul > li:hover{
    
  }
  #mobile_menu > ul > li:first-child{    
    margin-top: 15px;
    border-top: 0px;  
  } 
  #mobile_menu > ul > li:last-child{    
    margin-bottom: 15px;
    
  } 
    
  #mobile_menu > ul > li > ul > li{
    margin-top: 10px;
    margin-left: 15px;
    font-size: 16px;
    display: inline-block;
    padding: 10px;
  }  

  #mobile_menu a:link, #mobile_menu a:visited{
      color: #fcfaf8;
      text-decoration: none;      
  }
  #mobile_menu a:hover, #mobile_menu a:active{
      /* color: #6EA84F; */        
      text-decoration: underline;   
  }  
  
  #mobile_menu_underlay{
    width: 100%;
    height: 100%;
    position: fixed;
    perspective: 1000px;
    z-index: -99;
    background: #000;
    opacity: 0;    
    transition: z-index 0.5s step-end, opacity 0.5s linear;
    top: 0px;
    left: 0px;
    -webkit-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);
  }
  #mobile_menu_underlay.active{    
    z-index: 99;
    opacity: .2;
    transition: z-index 0.5s step-start, opacity 0.5s linear;
    background: #000;
  }    
  





  /* ########################## */
  /*             PATA           */
  /* ########################## */
    
  
  #pata{
    margin-bottom: 30px;         
    font-size: 13px;        
  }
  #pata > #patamenu{
    /* width: 920px; */     
    border-bottom: 1px solid #CDC6C0;
    padding: 0px 20px 20px 20px;
  }
  #pata > #patamenu > li{
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 16px;    
    color: #41281b;
  }
  #pata > #patamenu >li:last-child{
    margin-right: 0px;
  }
  #pata > #patamenu >li > ul{
    margin-top: 5px;    
  }
  
  #pata > ul >li > ul >li{
    list-style-type: none;
    margin-left: 0px;
    font-size: 13px;
  }
  
  #pata a:link,#pata a:visited{
    text-decoration: none;
    color: #634E44;
  }
  #pata a:hover,#pata a:active{    
    color: #6EA84F;
    
  }  
  #pata #copy {
     
  }
  
  #pata #copy a{
    border-bottom:  1px solid #CDC6C0;
    color: #41281b;
  }
  #pata #copy a:hover{
    border-bottom:  1px solid #6EA84F;
    color: #6EA84F;
  }  
  #pata #copy li{
    display: inline-block;
    padding: 0px 15px;
    border-right: 1px solid #CDC6C0;
    margin-top: 20px;
  }
  #pata #copy li:first-child{
    
  }
  #pata #copy li:last-child{
    border: none;
  }
  #pata #copy #copyrotate{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: rotate(180deg);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    display: inline-block;"
  }
  
  
  
  
  
  #prazirny_slider,#social_slider,#gbp_slider{
    background: #fcfaf8;
    position: fixed;
    top: 30px;
    left: -215px;
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;    
    -webkit-box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.5);    
    transition: all 300ms ;
  }
  #social_slider{
    top: 150px;
    width: 300px;
    height: 90px;
    padding: 10px 0px;      
  }

  #gbp_slider{
    background: #fcfaf8 url('/images/ui/icon_sklenka.png') no-repeat center right;
     
    width: 300px;
    height: 98px;
    top: 280px;
  }
  
  #prazirny_slider:hover, #prazirny_slider.hover,#social_slider:hover,#gbp_slider:hover{
    left: 0px;
    transition: all 300ms ;
  }
  
  
  [id^="twitter-widget"]{
    position: absolute !important; left: 50px; top: 80px;
  }
  #fb_box{
   border:none; overflow:hidden; width: 100px; height:65px; position: absolute; left: 73px;
  }

  
  

  
  

  
  /* ############################ */
  /*   OBECNÉ FORMÁTOVÁNÍ TEXTU   */
  /* ############################ */
  em{    
    font-style: italic;
  }
  strong{    
    font-weight: bold;
    color: #41281b;
  }
  sub,sup {
    line-height: 100%;
  }
  a:link,a:visited{
    color: #442C1F;
    transition: color 300ms ;    
  }
  
  a:hover,a:active{
    color: #6EA84F;
    transition: color 300ms ;
  }  
  #article a[target='_blank'],#pravysloupec a[target='_blank']{
    padding-right: 18px;
    /* display: inline-block; */
    background: url('/images/ui/icon_new_window.png') no-repeat center right;
  }
  #article .addthis_toolbox a, #shop a[target='_blank']{
    background-image: none;
    display: inline;
    padding: initial;
  }
  .addthis_sharing_toolbox {
    /* height: 47px; */ /* aby neposkakovalo vše pod ním po dotažení */
    margin-top: 20px;    
  }
  #hp_pravysloupec .addthis_sharing_toolbox {
    height: 47px; /* aby neposkakovalo vše pod ním po dotažení */        
  }  
  
  #article .addthis_sharing_toolbox:before {
    content: 'Dejte o projektu vědět svým přátelům';
    margin-bottom: 5px;
    display: block;
  }      
  strike{
    text-decoration: none;
    background: url('/images/ui/skrtnuto.png') repeat-x 0px 60%;
  }
  
  cite{
    display: block;    
    padding-bottom: 15px;
    font-size: 14px;
    font-style: italic;
  }
  
  .red{
    color: #ED6C6C;
  }
  
  h1{    
    font-size: 25px;
    font-weight: bold;
    color: #41281b;
    border-bottom: 3px solid #442C1F;
    display: inline-block;
    padding: 0px 5px 5px 0px;    
  }
 
  #article h2, #pravysloupec h2{
    color: #41281b;    
    font-size: 18px;
    font-weight: bold;
    line-height: 115%;
    border-bottom: 3px solid #6EA84F;
    padding: 0px 5px 5px 0px;    
    display: inline-block;
    margin-top: 40px;        
  }

  
  #accordion h2{
    margin: 20px 0px 0px 7px;
  }

  #glosar h2{    
    margin: 15px 0px 10px 10px;
    padding: 0 640px 5px 0px;
    color: rgba(99,78,68,.4);
    border-bottom: 1px solid  rgba(99,78,68,.4);
  }  
  
  h3.otazka, h3.hash{
    
    font-size: 18px;
    color: #41281b;
    display: block;
    margin-bottom: 0px;
    overflow: hidden; /* kvůli responzivnímu faq */
  }
  p, form{
    font-family: sansa_pro,verdana,sans-serif;
    font-size: 16px;
    line-height: 150%;
    margin-top: 20px;
    word-break: break-word; /* řeší příliš dlouhé slovo, které by roztahovalo element a ten by vyráběl hscrollbar (hlavně při responsibilitě) */
  }
  #article li{
    line-height: 150%;
    margin-top: 5px;  
  }
  
   #pravysloupec h2:first-child,p:first-child,form:first-child{
    margin-top: 0px; 
  }    
  /* ########################## */
  /*      HOMEPAGE ELEMENTY     */
  /* ########################## */
  
 
   #hp{    
    margin: 20px auto 0 auto;
    background: #f5f1eb;
    padding:  0px 20px;
    position: relative;
    border-radius: 8px;
    padding-bottom: 20px;
  }
 
  #hp_pravysloupec{
    float:right;
    margin-left:20px;
    width: 300px;    
    font-size: 16px;
  }
   
   #hp h1{
    display: none;
   }
   
  .hp_box{        
    padding-bottom: 20px;
    margin-top: 20px;
    background: #fcfaf8;  
    border-radius: 8px;       
    font-size: 16px;    
    line-height: 115%;
  }
  
  .hp_box.siroky{
    width: 600px;
    float: left;
  }
  
  #fbfeed{
    max-height: 600px;
    overflow: hidden;
  }
  #fbfeed .abstrakt{
    float: right;
    margin-top: 20px;
    margin-left: 10px;
    width: 130px;
  }
  #fbfeed p{
    /* overflow: auto; */
  }
  
  .hp_box h2{
    /* color: #41281b; */ 
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background: #eee5db;
    padding: 10px 20px;    
    font-weight: bold;
    
  }
  
  .hp_box h2.prazirny{
    padding: 0px 20px 0px 15px;
    /* max-height: 90px;
    overflow: hidden; */
  }
  
  .hp_box h2 .prazirny_hodnoceni{
    display: inline-block;    
    margin-top: 20px;
    margin-left: 10px;
    max-width: 250px    
  }
  
  .hp_box h2 img{
    vertical-align: top;
    max-width: 100%;
    height: auto;
  }

  .hp_box .avatar{
    float: left;
    margin-right: 10px;
    max-width: 60px;
  }
  
  .hp_box h3{
    color: #41281b; 
    font-weight: bold;
    padding: 0px 20px;
    margin-top: 20px;

  } 

  .hp_box p{
    padding: 0px 20px;
    /* margin-bottom: 20px; */
  }
 
 
 
 
  #hp .shopsample{
    display: inline-block;
    padding-left: 20px;
    width: 128px;    
    line-height: 150%;
    margin-top: 20px;
    overflow: hidden;
    vertical-align: top;    
  } 
  #hp .shopsample:first-of-type{
    border-right: 2px solid #CDC6C0;
  } 
   
  #hp .shopsample img{
    max-width: 100px;
    
  }  
 
  #shop_box{
    position: absolute;
    top: 85px;
    right: -285px;
    background: url('/images/ui/arrow.png') no-repeat;
    width: 270px;
    height: 190px;
    display: table-cell;
    text-align: center;
  }
  
  #pricebutton{
    position: absolute;
    bottom: -79px;
    right: 19px;
    width: 97px;
    height: 97px;
    background: url('/images/ui/pricebutton.png') no-repeat;
    color: #fcfaf8;
    font-size: 24px;
    font-weight: bold;
    padding-top: 30px;
    box-sizing: border-box;
    
  }
 
 
 
 
   
 
  .hpbutton:link,.hpbutton:visited{
    background: #827264;
    margin-left: 3px;
    margin-top: 17px;
    display: block;
    padding: 8px 20px;
    color: #fcfaf8;
    font-size: 16px;
    border-radius: 8px;
    text-decoration: none;
    float: right;
    transition: background 300ms;
 }
 
   .hpbutton:hover,.hpbutton:active{
    background: #6EA84F;
    transition: background 300ms;
   }
 
  
  #hp_tabs{
    font-size: 16px;    
    background: #eee5db;    
    margin: 20px 0px;
    height: 230px; /* aby to neposkakovalo */
  }
  #hp_tabs .ui-tabs-nav{
    background: #FCFAF8;
    border-radius: 0px;
  }
  #hp_tabs .ui-tabs-panel  {    
     padding: 0px 20px;
  }  
  
  
  #hp_tabs .ui-tabs-panel ul {    
    display: table;
    margin: auto;
  }
  
  #hp_tabs .ui-tabs-panel li{
    display: inline-block;    
    text-align: center;    
    margin-left: 10px;    
    font-weight: bold;
  }


  #hp_tabs #espresso_napoje li {
      margin-top: 25px;
  }      
  #hp_tabs #surovina li  {
      margin-top: 15px;
  }
  #hp_tabs #filtrovana_kava li {
      margin-top: 35px;
      margin-left: 18px;
  }
  #hp_tabs #filtrovana_kava li:first-of-type:after {
      content:':';
      font-size: 80px;
      vertical-align: top;
      line-height: 95px;
  }
  #hp_tabs #filtrovana_kava li:nth-of-type(2) {
    margin-left: 0 !important;
  }  
  #hp_tabs .ui-tabs-panel li:first-child{
    margin-left: 0 !important;
  }  
  
  
        
  #hp_tabs > div > ul > li a{
     position:relative;
     display:inline-block;
  }
  
  #hp_tabs div.popis{
    height: 50px;
    
    margin: auto;
  }
  
  #hp_tabs div.popis div.praporek{
    display: inline-block;
    text-align: left;
    font-size: 14px;
    color: #634e44;
  }
  
  #hp_tabs div.listcontainer{
    display: inline-table; // pro IE10
    vertical-align: bottom;               
  }
  
  #hp_tabs a{
    text-decoration: none;
    outline: none;
  }
  
  #hp_tabs a:hover{
    // color: #6EA84F;    
  }

  

  #hp_tabs img{
   transition: all 200ms ;
   transform: scale(1.0)  translateZ(0);   
  }
  #hp_tabs img:hover{
   transform: scale(1.2)  translateZ(0);
   transition: all 200ms ;  
   
  }
  

  

  
  
  /* ########################## */
  /*      ČLÁNKOVÉ ELEMENTY     */
  /* ########################## */  
  
  #articlewrap{
    width: 920px;
    background: #f5f1eb;
    border-radius: 8px;
    margin-top: 40px;
    padding: 40px;
    padding-right: 0px;
    
  }
  
  #article{    
    float: left;
    width: 510px;
    font-size: 16px;
    line-height: 150%;
  }
  #article.download{
    width: 900px;
    padding-right: 20px;    
  }
  
  #article textarea.code{
    font-family: monospace;
    font-size: 80%;
    width: 100%;
    height: 160px;
  }
  #article table{
      margin-bottom: 20px;
  }

  #article.download .dlimg{    
    height: auto;
    max-width: 50%;
    float: left;  
  }
  
  #article.download .dlul{    
    float: right;
    width: 45%;
    margin-top: 0px;  
  }  
  #article.download .dlul li{
    list-style: none;  
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    
  }

  #article ul, #article ol, #pravysloupec ul, #pravysloupec ol{    
    margin-top: 20px;
  }
  /* fix na mezery za zanořenými seznamy */ 
   #article li ul, #article li ol, #pravysloupec li ul, #pravysloupec li ol{    
    padding-bottom: 0px;
  }
   
  #article ul li, #pravysloupec ul li{
    list-style-type: disc;
    margin-left: 19px;
    font-size: 16px
  }
  
  #article ol li, #pravysloupec ol li{
    list-style-type: decimal;
    margin-left: 25px;
  } 
  
  #promo img {
    margin-top: 5px;
    margin-right: 10px;
  }
  
  .embed-container { 
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%; 
    margin-top: 20px;
    }
  .embed-container iframe, .embed-container object, .embed-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%; 
   }

   div[data-oembed-url]{
     margin-top: 20px;
   }


  .clankovagalerie{
    font-size: 0px;    
  }
  .clankovagalerie + p{ /* galerie se v RTE vkládá do paragrafu, ale to není správně a P tam pak přebývá, tak mu aspoň zresetuju odsazení */
    padding: 0px;
    margin: 0px;
  }
  
  .thumbnail{    
    display: inline-block;
    margin: 3px;
    line-height: 0;
    vertical-align: top;
  }
  img.responsive{
    max-width: 100%;
    margin: 0px auto;
  }  
  
  p.imagecaption{
    margin-top: 5px;
    font-size: 90%;
    text-align: center;
    font-style: italic;
  }
  /*
  .thumbnail:hover{      
    line-height: 0; 
    display: inline-block;
    vertical-align: top;
  }
*/
  /* ########################## */
  /*            FAQ             */
  /* ########################## */  
  
  #faq-detail{
    cursor: pointer;
  }  
  
  #article.faq{
    
    width: 530px;
  }
  #article.faq h1{
    margin-left: 7px;
  }
  #article.faq .odpoved p:first-of-type{
    margin-top: 10px;
  }
  #pravysloupec.faq{
    width:  350px;
  }
  
  /* ########################## */
  /*           GLOSÁŘ           */
  /* ########################## */    
  
  #glosar {
    margin-top: 20px;
  }
  #article.glosar{
    width: 650px;
  }
  #article.glosar a[href^='#']{
    text-transform: lowercase;
  }
  #article.glosar p a[href^='#'] {
    background: url('/images/ui/icon_hash.png') no-repeat center left;    
    padding-left: 10px;
    display: inline-block;
  }
  
  
  #article.glosar div.termin p{
    margin-top: 10px;
    
  }
  #article.glosar div.termin h3{
    transition: color 300ms ;
    cursor: pointer;
  } 
  #article.glosar div.termin h3:hover{    
        color: #6EA84F;
        transition: color 300ms ;
  }   
  #article.glosar div.termin{
    background: rgba(255,255,255,0);
    padding: 20px;
    transition: all 300ms;
    border-radius: 4px;
  }  
  
  #article.glosar div.termin.aktivni{
    background: rgba(255,255,255,1);
  }

  #article.glosar div.termin.aktivni{
    background: rgba(255,255,255,1);
  }
  #article.glosar div.termin.aktivni h3{
    color: #6EA84F;
  }
  
  #pravysloupec.glosar{
    width: 230px;
    margin-top: 40px;
  }
  
  #pravysloupec.glosar p{
    margin: 0px;
  }
  
  /* ########################## */
  /*        SHOP ELEMENTY       */
  /* ########################## */  
  #shop{
    margin-top: 20px;
  }
  
  #shop .nahled{
    width: 100px;
    float: left;
    margin-right: 15px;
  }
  #shop .artikl{
    border-bottom: 2px solid #FFFFFF;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
    overflow: auto; 
  }
  #shop .artikl:last-of-type{
    border: none;
  }
  #shop .popis{
    overflow: auto;
  }
  #shop .koupit{        
    text-align: right;
  }
  #shop .pocet{
    width: 32px;
    margin-right: 5px;
  }
  #cart{
    width: 100%;  
    margin-bottom: 15px;
  }
  #cart tr{
    vertical-align: top;
  }
  p[id^="odstavec_"]{
    display:none;
  }
  #shop p{
    margin-top: 0px;
  }
  #shop button{
    float: left !important;    
  }
  #shop button img{
    margin-bottom: -4px;
  }
  #shop input[type="submit"]{
    margin-top: 2px;
  }
  
  #pravysloupec input,#pravysloupec textarea{
    margin-top: 10px;
    
  }
  #pravysloupec select{    
    margin-top: 10px;
    width: 100%;
    border-radius: 4px;
  }
  select#ulozenka,select#dpd,textarea#adresa{
    display: none;
  }
  #pravysloupec select#predvolba{
    width: 76px;
    margin-right: 4px;
  }
  #pravysloupec input#telefon{
    width: calc(100% - 80px);
  }
  
  #pravysloupec input#jmeno{
    width: calc(50% - 4px);
    margin-right: 4px;
  }  
  
  #pravysloupec input#prijmeni{
    width: calc(50% );
  }   
  /* ########################## */
  /*         FORMULÁŘE          */
  /* ########################## */
   textarea{
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    background: #FFFFFF;
    height: 300px;
    border: 1px solid #CEC7C1;    
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-family: sansa_pro,verdana,sans-serif;
    font-size: 16px;
    line-height: 150%;
    color: #634E44;
  }
  select,option{
    padding: 4px;    
    font-size: 16px;
    color: #634E44;    
    font-family: sansa_pro,verdana,sans-serif;
    border-color: #CEC7C1;
  }
  

  
   input[type="text"],input[type="number"],input[type="email"]{
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid #CEC7C1;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-family: sansa_pro,verdana,sans-serif;
    font-size: 16px;
    color: #634E44;    
  }
  
  #quicksearch{
    width: 285px;
    padding: 7px 28px 7px 8px;
    border-radius: 8px;
    border: 1px solid #cac2ba;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: transparent url("/images/ui/search_icon_v3.png") no-repeat 99% 45%;
    outline: none;
    font-family: sansa_pro,verdana,sans-serif;
    line-height: 100%;
    color: #634E44; 
    
  }
  #quicksearch.otevreno{
    border-bottom: 1px solid transparent;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  
  
  input[type="submit"],input[type="button"],button{
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #fff;
    padding: 5px 10px 4px 10px; 
    margin-top: 20px;   
    background: rgb(110,168,79);
    font-family: sansa_pro,verdana,sans-serif;
    font-size: 16px;        
    float: right;
    border: 0px;
    /* kulaté rohy */
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px;
    border-radius: 4px;
    /* gradientní stíny */
    background-image: linear-gradient(top, rgb(133,182,109) 6%, rgb(110,168,79) 53%);
    background-image: -o-linear-gradient(top, rgb(133,182,109) 6%, rgb(110,168,79) 53%);
    background-image: -moz-linear-gradient(top, rgb(133,182,109) 6%, rgb(110,168,79) 53%);
    background-image: -webkit-linear-gradient(top, rgb(133,182,109) 6%, rgb(110,168,79) 53%);
    background-image: -ms-linear-gradient(top, rgb(133,182,109) 6%, rgb(110,168,79) 53%);    
    background-image: -webkit-gradient(
    	linear,
    	left top,
    	left bottom,
    	color-stop(0.06, rgb(133,182,109)),
    	color-stop(0.53, rgb(110,168,79))
    );
    /* stín textu */
    text-shadow: 0px 1px 1px #537e3b;
    /* kulaté boxu */
    filter: dropshadow(color=#537e3b, offx=0, offy=1);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(83, 126, 59, 1);
    box-shadow: 0px 1px 1px 0px rgba(83, 126, 59, 1);    
  }
  
  #odeslano{
    display: none;
  }
  
  
  
  
  
  
  
  
  
  /* ########################## */
  /*    PLUGINY A 3RD PARTY     */
  /* ########################## */  
  
  .htmlplayer_button{    
    width: 42px;
    text-align: center;
    border-radius: 5px;        
    display: inline-block;
    background-color: #6EA84F;
    color: #fff;
    cursor: pointer;
    line-height: 25px;
  }

  /* Extra nastavení colorboxu */
  #colorbox{  
      font-family: sansa_pro,verdana,sans-serif;
      font-size: 16px;
  }
  
  #cboxTitle{
    color: #634E44; 
  }

  #colorbox button{
    border: 0;
    box-shadow: none;
  }

  .highlight { background-color: #f9f38d; }
  
  /* obecné stylování UI widgetů */
  .ui-widget{
    text-align: left;
    font-size: 12px;
  }
  
  .ui-widget { font-family: sansa_pro,verdana,sans-serif; font-size: 1.1em/*{fsDefault}*/; }
  .ui-widget .ui-widget { font-size: 1em;  }
  .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { /* font-family: Verdana,Arial,sans-serif; font-size: 1em; */}
  .ui-widget-content {  border: 1px solid #cac2ba/*{borderColorContent}*/; border-top: 0px; background: #FCFAF8; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
  .ui-widget-content a { color: #41281B/*{fcContent}*/; cursor: pointer;}
  .ui-widget-content a:hover { color: #6EA84F/*{fcContent}*/; cursor: pointer;}
  .ui-widget-header {  }
  .ui-widget-header a { /*color: #222222{fcHeader}*/; }
  .ui-helper-clearfix:before,
  .ui-helper-clearfix:after {
  	content: "";
  	display: table;
  	border-collapse: collapse;
  }
  .ui-helper-clearfix:after {
  	clear: both;
  }
  .ui-helper-clearfix {
  	min-height: 0; /* support: IE7 */
  }
  
  /* stylování FAQ akordeonu */
  .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: 10px 20px; zoom: 1; outline: none; background: #E1DDDA ;margin-top: 25px;font-family: sansa_pro,verdana,sans-serif;}
  .ui-accordion .ui-accordion-icons { /*padding-left: 2.2em; */ }
  .ui-accordion .ui-accordion-noicons { /* padding-left: .7em; */}
  .ui-accordion .ui-accordion-icons .ui-accordion-icons { /* padding-left: 2.2em; */}
  .ui-accordion .ui-accordion-header .ui-accordion-header-icon {position: absolute; left: .5em; top: 50%; margin-top: -8px;}
  .ui-accordion .ui-accordion-content { padding: 0px 20px 20px 20px; border: 0; overflow: auto; zoom: 1; background: #fff;}
  .ui-accordion-header-active { background: #fff !important; color: #6EA84F !important; } 
  .ui-accordion-header.ui-state-hover {
    background: #fff !important;
  }
  
  
  /* HP taby */

  .ui-tabs{
    border: none;
  }
  .ui-tabs-nav .ui-state-default{
    float: left;    
    background: #827264;
    margin-right: 3px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: background 300ms ;
  }
  .ui-tabs-nav .ui-tabs-active{
    transition: background 0ms !important;
  }
  
  .ui-tabs-nav .ui-state-default:not(.ui-tabs-active):hover{
    transition: background 300ms ;
    background: #6EA84F;
  }
  
  .ui-tabs-nav .ui-state-default a{
    display: block;
    height: 100%;
    padding: 8px 20px;
    color: #fcfaf8;
  }
  
  .ui-tabs-nav .ui-tabs-active{
    background: #eee5db;
    transition: background 300ms;
  }  
  .ui-tabs-nav .ui-tabs-active a{
    color: #3c2414;  
  } 
  
  .ui-tabs-panel{
    border: none;
    background: #eee5db;
    border-top-right-radius: 8px;
    display: none;
  }
      
  /* autocomplete */
  .ui-autocomplete {
    	position: absolute;
    	top: 0; /* #8656 */
    	cursor: default;
      width: 273px !important;
  }
  .ui-menu { list-style:none; padding: 5px; margin: 0; display:block; outline: none; }
  .ui-menu .ui-menu { margin-top: -3px; position: absolute; }
  .ui-menu .ui-menu-item { transition:  .3s ;margin: 0; padding: 4px 2px; zoom: 1; width: 100%; font-size: 14px; cursor: pointer;}
  .ui-menu .ui-menu-item:hover { color: #6EA84F;}
  .ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
  .ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
  .ui-menu .ui-state-focus,
  .ui-menu .ui-state-active { font-weight: normal; color: #6EA84F;  transition:  .3s ; text-decoration: underline;}
  .ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
  .ui-menu .ui-state-disabled a { cursor: default; }
  

  /* Corner radius */
  .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 8px/*{cornerRadius}*/; -webkit-border-top-left-radius: 8px/*{cornerRadius}*/; -khtml-border-top-left-radius: 8px/*{cornerRadius}*/; border-top-left-radius: 8px/*{cornerRadius}*/; }
  .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 8px/*{cornerRadius}*/; -webkit-border-top-right-radius: 8px/*{cornerRadius}*/; -khtml-border-top-right-radius: 8px/*{cornerRadius}*/; border-top-right-radius: 8px/*{cornerRadius}*/; }
  .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 8px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 8px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 8px/*{cornerRadius}*/; border-bottom-left-radius: 8px/*{cornerRadius}*/; }
  .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 8px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 8px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 8px/*{cornerRadius}*/; border-bottom-right-radius: 8px/*{cornerRadius}*/; }
  
  
 
  
  
  
  
  
  
  
  
  
  

  /* Scrollbary */
  
  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{    
    background-color: rgba(99,78,68,.90);
  }
  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(99,78,68,.85);}
	
  .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		background-color: rgba(99,78,68,0.1);		
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: rgba(99,78,68,0.75);		
	}
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(99,78,68,0.9); }  








  
  /* ########################## */
  /*       RESPONSIBILITA       */
  /* ########################## */  
    
  @media (max-width: 1540px){
    #shop_box{
     display: none;    
    }
  }
  
  
  @media (max-width: 979px){
    
    #centrovac,#hp,#articlewrap{
      width: auto;
    }

    #articlewrap{
      padding: 20px;
      margin-top: 15px;
    }
    #hp_pravysloupec{
      width: auto;
      margin: 0px;
    }
    #hp_tabs{
      height: auto;
    }
    .hp_box.siroky{
      width: auto;
    }
    #article{
      width: auto;
      float: none;
    }
    #article.glosar{
      width: auto;
    }
    #article.download{
    width: auto;
    }
    #div404{   
      margin-right: 0px;
    }
    #pata{
      padding: 0px 20px;
    } 
    #hp .shopsample{
      width: auto;
      max-width: 200px;
      padding-right: 8px;
    }
  }
  
  @media (max-width: 840px){

    #pravysloupec:not(.shop),#pravysloupec.glosar,#pravysloupec.faq{
      width: 30%;
    }      
    #pravysloupec.shop{
      float: none;
      width: auto;
      margin-top: 0px;
      padding: 0 0 20px 0;
    }
    
  }
  
  @media (max-width: 825px){
  
    #top_menu li.kat{
      font-size: 14px;
    }
    #centrovac a.hpbutton{
      display: none;
    }
    .hp_box h2 .prazirny_hodnoceni{
      display: block;
      width: auto;
      margin-top: 0px;   
      max-width: 100%;   
    } 
    .hp_box h2.prazirny{
      padding-bottom: 20px;
    }
    
    #pata #copy li{
      border: none !important;
      float: none  !important;
      display: block !important;
    }
    
  }  
    
 
  
  @media (max-width: 600px){
    #top{
      padding: 20px 20px 0px 20px;
      margin: 0px;
    }
    #top_menu{
      display: none;
    }
    #article.download .dlul{    
      float: none;
      width: auto;  
    }  
    #article.download .dlimg{
      float: none;
      max-width: 100%;  
    }
    #mobile_menu_btn{
      display: inline-block;
      vertical-align: bottom;
      margin-bottom: 15px;
      margin-top: 20px;
      
      
    }
    #patamenu{
      display: none;
    }
    #quicksearch{
      width: 100%;
      position: relative;
      float: none;
      bottom: auto;
      right: auto;
      margin-top: 20px;
      
      display: inline-block;
    }
    
    
    .ui-autocomplete{
      width: calc(100% - 52px) !important;
    }
    #hp_tabs{
      display: none;
    }
    
    #article.faq{
     width:  auto;
    }
  
    #div404{
      background: url("/userfiles/clanky/404.png") no-repeat right 40px;
      min-height: 350px;
      margin-top: 0px;
      margin-right: 0px;
      padding-top: 0px;
      background-size: contain;
      
    }    
    #fbfeed{
      max-height: initial !important;
      padding-right: 20px;
    }
  }  
  
  @media (max-width: 490px){
    #pravysloupec:not(.shop){
      display: none;
    }
    #glosar{
      height: auto !important;
    }
    #article.shop img.nahled{
      width: 50px;
    }
    #article.shop p{
      overflow: visible;
    }
    #hp .shopsample:first-of-type{
      border-right: none;
    }
  } 
  
  @media (max-width: 360px){
    .ui-autocomplete{
      width: calc(100% - 32px) !important;
    }    
    #top{
      padding: 10px 10px 0px 10px;      
    }   
    
    #hp{
      padding: 0px 10px 10px 10px;
    }
    #promo img:nth-of-type(3) {
      display: none;
    }
      
  }