@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');

body, table, .ui.header, .ui, h1, h2, h3, h4, h5 { font-family: 'Roboto Condensed', sans-serif !important;  }
a:hover {
  text-decoration: underline;
}
body { background: #fff; }
h2 a { color: #EB212D !important; }
h2.ui.header {
   color: #000;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif !important;
  text-align: center;
}
h1 {
  font-weight: 300;
}
h1.ui.header {  font-family: 'Roboto Condensed', sans-serif !important; font-weight: 300; color: #666; margin: 0 0 2rem 0; }
html, body { font-size: 15px; font-family: 'Roboto Condensed', sans-serif !important;  }
body#main { background: #eee; font-family: 'Roboto Condensed', sans-serif !important; }

h2,h3,h4,h5 {
  color: #4183c4;
}

#top-menu {
  background: #850972;
  min-height: 40px;
    border-radius: 0;
  margin: 0 0 0 0;  
}
#top-menu .item {
  color: #ddd;  
  font-weight: 300;

}

#designBox {
  margin: -100px 0 0 0;
  background: url('img/white-bg2.png') repeat 0 0;
  padding: 30px 0 0 0;

}

.hlavni.container {

}

.sideBox, .sideBox2 {
  font-family: 'Roboto Condensed', sans-serif !important;
}
.sideBox h2, .sideBox h3, .sideBox2 h2, .sideBox2 h3 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 300;
  font-size: 1.4em;
  color: #fff;
}
.sideBox h3, .sideBox2 h3 {
  font-size: 1.1em;
  border-radius: 0; 
}
.sideBoxTit, .sideBoxTit2, .sideBoxTit3 {
  background: #850972;
  width: 100%;
  padding: 10px 15px;
  border-radius: 6px 6px 0 0;
}
.sideBoxTit a, .sideBoxTit2 a, .sideBoxTit3 a {
  color: #fff;
}
.sideBoxTit3 {
  border-radius: 0 0 0 0;
}
.sideBoxPodTit, .sideBoxPodTit2, .sideBoxPodTit22 {
  background: #D986CF;
  width: 100%;
  padding: 10px 15px;
}
.sideBoxBody, .sideBoxBody2, .sideBoxBodyMenu {
  background: #E9D6E6;
  width: 100%;
  padding: 10px 15px;
}
.sideBoxBody a, .sideBoxBody2 a, .sideBoxBodyMenu a {
  color: #333 !important;
}
.sideBoxBodyMenu {
  padding: 10px 0;
}

.sideBoxBodyMenu .item {
  padding: 4px 15px !important;
}
.sideBoxBodyMenu a:hover {
  background: #D986CF;
  color: #fff !important;
}



.sideBoxTit2 {
  background:#850972
}
.sideBoxTit3 {
  background:#850972
}
.sideBoxPodTit2 {
  background: #1EC3EC;
}
.sideBoxPodTit22 {
  background: #21ba45;
}
.sideBoxBody2 {
  background: #C2EAF4;
}
.sideBoxBody .list,.sideBoxBody2 .list {
  font-family: 'Roboto Condensed', sans-serif !important;
}

.kategorieProduktyTit {
  background: #D986CF;
  display: block;
  width: 100%;
  padding: 6px 15px !important;
  border-radius: 4px;
  color: #fff;
  font-size: 0.8em;
  font-weight: 300;
}
.kategorieProduktyTit:hover {
  color: #000;
}
.kurz {
  font-family: 'Roboto Condensed', sans-serif !important;
  background: #eee !important;
  border-radius: 6px !important;
}
.kurz .content {
  padding: 20px !important;
}
.kurz .image  {
  overflow: hidden !important;
  max-width: 160px !important;
}
.kurz .image img {
  height: 210px !important;
}
.kurz h3 {
  font-family: 'Roboto Condensed', sans-serif !important;
}


.eduBlue {
  background: #1EC3EC !important;
}
.eduBlue:hover {
  background: #00BFE5 !important;
}
#tema {
  height: 300px;
  background: #fff url('img/theme.jpg') no-repeat 50% -110px;
  overflow: hidden;

  
}
#slogan {
  color: rgba(255,255,255,1);
    font-family: 'Roboto', sans-serif;
  font-size: 2.2em;
  font-weight: 100;
  margin: 120px 0 0 0;
  /* background: rgba(0,0,0,.1); */
  display: inline-block;
  padding: 25px;
  border-radius: 5px;
}

#logo {
  width: 70%;
  margin: 0 0 0 35px;  
}

#hlavni-menu {
  background: #E9D6E6;
  border-radius: 0;
  margin: 0 0 0 0;
  font-size: 1.1em;
  border: none;

}
#hlavni-menu .item {
  color: #000 !important;
  
  font-family: 'Roboto Condensed', sans-serif;
  padding: 0 10px;
}
#hlavni-menu .item a {
  color: #850972 !important;
  font-weight: 300;
  font-family: 'Roboto Condensed', sans-serif;
  padding: 10px;
}
#hlavni-menu .menu .item a {
  padding: 10px;
}

#hlavni-menu .dropdown .menu .item {
  padding: 10px 15px !important;
}

#hlavni-menu .item:first-child {
  border: none;
}

/*** hledej ***/
#hledej .prompt {
    border-radius: 0.3rem;
    color: #850972 !important;
    background: #CB98C3;
}
#hledej input {
   color: #850972 !important;
 } 
#hledej {
  color: #850972 !important;
}
#hledej input::-webkit-input-placeholder {
  color: #850972 !important;
}

#hledej input::-moz-placeholder {
  color: #850972 !important;
}

#hledej input:-ms-input-placeholder {
  color: #850972 !important;
}
#hledej .search.icon {
  opacity: unset;
}



#hledej {
  
}


#kosik {
 

}
#kosik {
 color: #850972 !important;
}

/*** Paticka ***/
#paticka, .ui.inverted.segment, .ui.primary.inverted.segment {
    background: #850972;
    color: rgba(255, 255, 255, .9)
}

.footer {
  margin: 25px 0 0 0 !important;
}
.footer.segment {
  padding: 30px 0;
}

.yellow {
    background: #850972 !important;

}

.puvodni-cena {
 text-decoration: line-through;
}

.cena {
  font-size: 1.1em;
  color: #555;
}


.boxLevaLinka { 
  color: #555;  
  font-size: 1.2em; 
  font-weight: 300 !important; 
  line-height: 34px; 
  text-shadow: 1px 1px 1px #fff; 
  display:block;
  padding: 15px 20px 15px 45px;
  margin: 2em 2em 2em 0;
  position: relative;
  border-left: solid 4px #ccc;
}


.ui.steps .active.step.yellow {
  background: #CB98C3 !important;
}
.ui.steps .active.step.yellow a {
  color: #000 !important;
}

.active.step.yellow:after {
  background: #CB98C3 !important;
}

.kosikCena {
  font-size: 1.2em;
}
.kosikCena span {
  font-size: 1.4em;
  color: #EB212D;
}

#submenu {
  background: transparent url('img/submenuBg.png') repeat 0 0;
  
}
#submenu.ui.popup:before {
  background: #888 !important;
  display: none;
}
#submenu .item {
  
}

#submenu .item:hover {
  color: #000;
  font-weight: 600;
  text-decoration: underline;
}
#submenu .button {
    margin-bottom: 0.75em;
    margin-right: 0.75em;
    color: #000;
}


#submenu h3 {
    color: #fff;
}

#hlavni-menu a { color: #000 !important;}

.card .yellow.button {
  color: #000;
}
.card .yellow.button:hover {
  color: #fff;
  background: #000;
}

.card .ribbon.label {
  z-index: 100;

}

#paginator {
  margin: 0 0 25px 0;
}

.ui.grid>.column+.divider, .ui.grid>.row>.column+.divider {
    left: 63%;
}


#stage {
  font-weight: 100;
  font-size: 3em;
  line-height: 1.8em;
  color: #fff;
  position: absolute;
  
  height: 350px;
  position: relative;
  overflow: hidden;
  background: #000;
  opacity: 0.5;

}
#stageText {
  text-align: center;
  margin: 40px 0 0 0;
  position: relative;
}

.bb {
  font-weight: 700;
  font-size: 1.3em;
}
.ta1 {
  
}

.superShadow {
  text-shadow:     0 1px 0 hsl(174,5%,80%),
                     0 2px 0 hsl(174,5%,75%),
                     0 3px 0 hsl(174,5%,70%),
                     0 4px 0 hsl(174,5%,66%),
                     0 5px 0 hsl(174,5%,64%),
                     0 6px 0 hsl(174,5%,62%),
                     0 7px 0 hsl(174,5%,61%),
                     0 8px 0 hsl(174,5%,60%),
    
                     0 0 5px rgba(0,0,0,.05),
                    0 1px 3px rgba(0,0,0,.2),
                    0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.2),
                  0 10px 10px rgba(0,0,0,.2),
                  0 20px 20px rgba(0,0,0,.3);
}

#filtr {
  margin: 0 0 1.5rem 0;
}

.noUi-connect {
  /* background: #FEDE00; */
  border-radius: 4px;
  box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

/*** SIDE BAR ***/
  .hidden.menu {
      display: none;
    }

    #mKosik {
      display: none !important;
    }

    #hlavni-menu .toc.item {
      display: none !important;
    }

    
    @media (max-width: 993px) {
      #hlavni-menu .item,
      #hlavni-menu .menu {
        display: none;
      }
      #hlavni-menu .toc.item {
        display: flex !important;
      }

      #top-menu {
        display: none;
      }


      #kosik {
        left: 0px;
        top: 5px;
      }

      #tema {
        height: 300px;
      }

      #filtr {
        display: none !important;
      }

      #mKosik {
        display: flex !important;
      }
      #boxKosik {
        display: none;
      }

      #logo {
      width: 100%;
      margin: 20px auto;
      }

          #slogan {
        font-size: 2em;
      }

      h1.ui.header {
        font-size: 1.6em;
        margin-top: 0;
      }
        
    }

    @media (max-width: 736px) {
      #logo {
        width: 40%;
        margin: 20px auto;
      }

       #slogan {
        display: none;
      }
    }
    


    html.ios {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
  height: initial !important;
}


/*** produkt box ***/
.ui.card > .content, .ui.cards > .card > .content {
    border: none;
    border: none !important;
    margin: 0;
    padding: 1em 1em;
    font-size: 1em;
    background: #C1A5BC;      
}
.ui.card > .extra.content, .ui.cards > .card > .extra.content {
    border: none !important;
    margin: 0;
    padding: 1em 1em;
    font-size: 1em;
    background: #E9D6E6;      
}
.ui.card > .extra2.content, .ui.cards > .card > .extra2.content {
    border: none !important;
    margin: 0;
    padding: 1em 1em;
    font-size: 1em;
    background: #fff;      
}



.card h3 {
  font-weight: 300 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
}
.card .content a {
  color: #fff;
}

.ui.button {
  font-weight: 400;
}

.ui.card .image > .ribbon.label, .ui.image > .ribbon.label {
    position: absolute;
    top: unset;
    bottom: 1rem;
}


.ui.edu.label, .ui.edu.labels .label {
    background-color: #E4567A !important;
    border-color: #E4567A !important;
    color: #fff !important
}

.ui.edu.labels .label:hover, a.ui.edu.label:hover {
    background-color: #E4567A !important;
    border-color: #E11E52 !important;
    color: #fff !important
}

.ui.edu.corner.label, .ui.edu.corner.label:hover {
    background-color: transparent !important
}

.ui.edu.ribbon.label {
    border-color: #E11E52 !important;
}

.ui.table td > .ui.ribbon.label {
    left: calc(-.78571429em - 1.1em);
}


.owl-controls {
  
  }
  .owl-nav {
  
  }
  .owl-prev {
  
  }
  .owl-next {
  
  }
  .owl-dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
  }
  .owl-dot {
  }
  .owl-theme .owl-dots .owl-dot span {
      background: #fff;
      width: 12px;
      height: 12px;
  }
  .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
      background:  rgba(85, 09, 72, .8);
      width: 15px;
      height: 15px;
  }
  
  .owl-prev, .owl-next {
      position: absolute;
    top: 50%;
    transform: translateY(-50%);
      text-align: center;
      background: transparent !important;
  }
  .owl-prev i.icon, .owl-next i.icon {
      color: rgba(255, 255, 255, .75);
  }
  .owl-prev {
      left: 0px;
  }
  .owl-next {
      right: 0px;
  }
  
  .customCarousel {
      height: 250px;
  }
  .customCarousel .item {
      height: 250px;
  }

  .customCarousel .owl-titulek {
    font-family: 'Roboto Condensed', sans-serif !important; 
    font-weight: 300 !important;
    text-align: center;
    background: rgba(255,255,255,.2);
    color: #444;
    padding: 10px 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .customCarousel .item.owl-slide h2 {
    font-size: 2em;
    color: rgba(255, 255, 255, .75);
  }

  .customCarousel .owl-titulek h2 {
    font-family: 'Roboto Condensed', sans-serif !important; 
    font-weight: 300 !important;
  }
  #slider {
    position: relative;
  }
  .reklamaText {
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif !important;
    position: absolute;
    z-index: 100;

  }

  #sliderBox {
    overflow: hidden;
    border-radius: 6px 6px 6px 6px;
  }


  .kurz {
    position: relative !important;
  }
.ui.edu.label, .ui.edu.labels .label {
    background-color: #E4567A !important;
    border-color: #E4567A !important;
    color: #fff !important;
}



.ui.ribbon.label {
    position: absolute;
    left: -14px;
    top: 20px;
}

#kurzBox h1 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 400;
}

#kurzBox {
  font-family: 'Roboto Condensed', sans-serif !important;
  overflow: auto;
  clear: both;
}
#kurzBox .segment, #kurzBox p {
  font-family: 'Roboto Condensed', sans-serif !important;
}

ul { margin: 0; padding: 0; top: -12px; position: relative; list-style: none;}
li { margin: 10px 0 0 0; padding: 0; background: url('img/order.png') no-repeat 0 0; line-height: 20px; padding: 0 0 0 30px;   }

.error ul { margin: 0; padding: 0; top: 0; position: relative; list-style: none;}
.error li { margin: 10px 0 0 0; padding: 0; background: none; line-height: 20px; padding: 0 0 0 0;   }

.obsazeno {
  text-decoration: line-through;
  color: #E11E52 !important;
}
.obsazeno a {
  text-decoration: line-through;
  color: #E11E52 !important;
}
.volno {
  color: green !important;
}
.volno a {
  color: green !important;
}

/* uzivatelska karta */
.title.zruseno {
  color: red !important;
  font-style: italic !important;
  font-size: 0.9em !important;
  text-decoration: line-through !important;
}

.referenceBox {
  background: #eee;
  padding: 10px;
}

.terminySpodekStranky {
  background: #CB98C3;  
  padding: 10px;
  border-radius: 8px 8px 0 0; 
  margin: 10px 0 0 0;
}
.terminySpodekStranky h3 {
  font-size: 1.2em;
  color: #fff;
  
}

.sideBoxPodTit a {
 color: #fff;
}
.sideBoxPodTit a:hover {
  color: #fff;
  text-decoration: underline;
 }




 @media only screen and (max-width: 767px) {
  .largeOnly {
      display: none!important;
  }
}


.floatLeft, .floatLeftWrap{
	float: left;
	margin: 0 1em 0.5em 0em;	
}

.floatRight, .floatRightWrap{
	float: right;
	margin: 0 0em 0.5em 1em;	
}

.floatLeftWrap, .floatRightWrap{
	/* TODO: zatim nefunguje nikde :( */
	clear: both;
}

#container .divFloatCenter{
	position: relative;
	text-align: center;
	clear: both;
	display: block;
	width: 36em;
	height: auto;
		
}

#container .floatCenterWrap{
	display: block;
	margin: 0 auto;
	clear: both;
}

/*** accordion **/
.ui.styled.accordion .title {
  color: #000;
  border-top: solid 2px #ccc;
  
}

.ui.styled.accordion .title.zruseno {
  color: #aaa;  
}