/* CSS Document */

html {
  BACKGROUND-COLOR: #fff;
}

body {
  TEXT-ALIGN: center;
  font-family: 'Tw Cen MT', 'Franklin Gothic Book', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
  margin:0em;
}

#content {
  MARGIN: auto;
  DISPLAY: block; 
  FLOAT: none;   
  WIDTH: 100%;
  TEXT-ALIGN: left;
}

#header {
  POSITION: absolute; 
  DISPLAY: block;
  width: 100%;
}

.header-logo {
  text-transform: uppercase;
  font-stretch: condensed;
  color: #fff;
}

.header-logo-small {display: none;}

.header-social {
  margin-top:0.5em;
  margin-right:8em;
  float: right; 
  display: block;
  position: absolute;
}

#menu {
  width: 100%;
  margin-bottom:4em;
  text-align: center;
}
  
.menu-item {
  margin-top:1.4em;
  word-spacing:1.8em;
  font-size:1.5em;
  font-stretch: condensed;
  text-transform: uppercase;
}

.menu-item a {color: #000; text-decoration: none;}
.menu-item a:hover {color: #4889be;}


#main {
  POSITION: relative;
  float: left;
  display: block;
  width:100%;
  text-align: left; 
}

#main .obsah {
  float: left;
  display: block;
  width: 77.5%;
  margin-right:10%;
  margin-left:10%;
  padding:2em 1em 3em 1em;
  margin-bottom:2em;
  text-align: left;
}

#main .obsah b {
  color: #000;
  font-size:1em;
}

#main .obsah img {
  margin-left:2em;
}

#main .obsah p {
  margin-left:4em;
  margin-right:4em;
  color: #000;
  font-size:1.2em;
  line-height: 1.5em;
}

/* PROMO */

#main .promo {
  float: left;
  display: block;
  width: 77.5%;
  margin-right:10%;
  margin-left:10%;
  background-color: #f8f8ee;
  padding:2em 1em 3em 1em;
  margin-bottom:2em;
  text-align: center;
}

#main .promo b {
  color: #4889be;
  text-transform: uppercase;
  font-size:1.2em;
}

#main .promo img {
  margin-left:2em;
}

#main .promo p {
  margin-left:4em;
  margin-right:4em;
  color: #000;
  font-size:1.2em;
  line-height: 1.5em;
}

/* PRIPRAVUJEME */

#main .pripravujeme {
  float: left;
  display: block;
  width: 77.5%;
  margin-right:10%;
  margin-left:10%;
  background-color: #e1edf6;
  padding:2em 1em 3em 1em;
  margin-bottom:2em;
  text-align: left;
}

#main .pripravujeme b {
  color: #4889be;
  text-transform: uppercase;
  font-size:1.2em;
}

#main .pripravujeme img {
  margin-left:2em;
}

#main .pripravujeme p {
  margin-left:4em;
  margin-right:4em;
  color: #000;
  font-size:1.2em;
  line-height: 1.5em;
}

#main .pripravujeme .sale {font-size: 2em;}
#main .sale {font-size: 1.5em;}

.koupit a {background-color:#FF4A4A; color:#fff; font-weight: bold; text-decoration: none; padding: 15px 28px; border-radius: 12px;}
.koupit a:hover {background-color:#4889be; color:#fff; font-weight: bold;}


#main .right {
  float: right;
  display: block;
  width: 28%;
  margin-right:10%;
  background-color: #252525;
  border: 2px #2B2B2B solid;
  padding:1em;
}

#main .right p {
  margin-right:1.5em;
  margin-left:1.5em;
  color: #fff;
  line-height: 1.5em;  
}

#main .left {
  float: left;
  display: block;
  width: 43%;
  margin-left:10%;
  background-color: #252525;
  border: 2px #2B2B2B solid;
  padding:1em;
}

#main .left b {
  color: #20969A;
  text-transform: uppercase;
  font-size:1em;
}

#main .left img {
  margin-right:0.3em;
}

#main .left p {
  margin-right:1.5em;
  margin-left:1.5em;
  color: #fff;
  line-height: 1.5em;  
}



#footer  {
  POSITION: relative; 
  MARGIN-TOP: 1em; 
  DISPLAY: block; 
  float: left;
  HEIGHT: 4em;
  width: 100%;
}

.footer {
  padding-top:0em;
}

#footer p {
  color: #BBBBBB;
  font-size: 0.85em;
} 

.footer-social {text-align:center;}

A {COLOR: #4889be; TEXT-DECORATION: underline; font-weight: normal;}
A:hover {COLOR: #000; TEXT-DECORATION: none; font-weight: normal;}

p {
  font-size: 1em; 
  color: #fff; 
  line-height: 1.5em;
  FONT-FAMILY: 'Franklin Gothic Book', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
}

h1 {
  color: #000;
  font-size: 2.1em;
  font-weight: normal;
  text-align: center;
  margin-bottom:1em;
}

h2 {
  margin-top:0.5em;
  color: #4889be;
  text-align: center;
  font-stretch: condensed;
  text-transform: uppercase; 
}

img {border:0px;}

em {color: #000;}

/* HAMBURGER MENU */

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 */

#ham_menuToggle a {text-decoration: none; color: #fff; transition: color 0.3s ease;}
#ham_menuToggle a:hover {color: #FF8B8B;}

#ham_menuToggle {
  display: block;
  position: relative;
  top: -70px;
  left: 40px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  float: left;
}

#ham_menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#ham_menuToggle span{ 
  display: block;
  width: 35px;
  height: 5px;
  margin-bottom: 6px;
  position: relative;
  background: #4889be;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#ham_menuToggle span:first-child {transform-origin: 0% 0%;}
#ham_menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}

/* Transform all the slices of hamburger into a crossmark. */
#ham_menuToggle input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #fff;}
/* But let's hide the middle one. */
#ham_menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
/* Ohyeah and the last one should go the other direction */
#ham_menuToggle input:checked ~ span:nth-last-child(2) {opacity: 1; transform: rotate(-45deg) translate(0, -1px);}

/* Make this absolute positioned at the top left of the screen */
#ham_menu {
  position: absolute;
  width: 180px;
  margin: -100px 0 0 -50px;
  padding: 110px 20px 20px 50px;
  background: #4889be;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */ 
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#ham_menu li {padding: 7px 0px; font-size: 20px; border-bottom:1px #156F72 solid; text-align:center;}
#ham_menu li ul li {font-size:14px;}

/* And let's fade it in from the left */
#ham_menuToggle input:checked ~ ul { transform: scale(1.0, 1.0); opacity: 1;}


  @media only screen and (max-width: 920px) {
    body {width: auto; min-width: 300px;}
    #main {width:100%;}   
    .menu-item {margin-left:2em;}
    .header-logo {display: none;}
    .header-logo-small {display: block;}
    .header-social {margin-right:3em;}
    #main .obsah {width: 85%; margin-right:5%; margin-left:5%; padding:2em 1em;}
    #main .obsah img {margin-right:0em; margin-bottom:1em;}
    #main .promo {width: 85%; margin-right:5%; margin-left:5%; padding:2em 1em;}
    #main .promo img {margin-right:0em; margin-left:1em;}
    #main .promo p {margin-left:2em; margin-right:2em;} 
    #main .pripravujeme {width: 85%; margin-right:5%; margin-left:5%; padding:2em 1em;}
    #main .left {width:85%; margin-right:5%; margin-left:5%; padding:2em 1em; float: left; display: block;  margin-bottom:2em;}
    #main .right {display: none;}
}

  @media only screen and (max-width: 690px) {
    body {width: auto; min-width: 300px;}
    #main {width:100%;}   
    .menu-item {display: none;}
    #main .obsah {width: 100%; margin-right:0%; margin-left:0%; padding:0em;}
    #main .obsah p {margin-left:2em; margin-right:2em; font-size:1em; line-height: 1.4em;}
    #main .obsah img {margin-right:1em;}
    #main .promo {width: 100%; margin-right:0%; margin-left:0%; padding:0 0 1em 0;}
    #main .promo p {font-size:1em; line-height: 1.4em; text-align:left;}
    #main .pripravujeme {width: 100%; margin-right:0%; margin-left:0%; padding:2em 0 2em 0;}
    #main .pripravujeme p {font-size:1em; line-height: 1.4em; text-align:left;}
    .mobile {display:block; width:100%;}
}


@media (min-width: 691px) {
  #ham_menuToggle {display: none;}
}