/* Design by Věra Pechová https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru */

body {margin: 0; padding: 0;width: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 100)), url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/navod-jak-zhubnout-pozadi-nove.jpg?v=100) center 0 no-repeat;
  background-attachment: fixed;
  background-position: center top; 
  background-repeat: no-repeat;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover; 
  background-size: cover;
  font-family: "Open Sans"; font-size: 18px; color: #000000;line-height: 30px;}
  
/*------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12 {margin: 0 auto; font-weight: bold;font-size: 100%;}
p, ol, ul {line-height: 100%;}
p {}
ol {}
ul {}
li {}

img {max-width: 100%; height: auto;box-sizing: border-box;}
iframe, canvas, video, svg {max-width:100%;box-sizing: border-box;height: auto;}

.pomer-stran {position: relative; height: 0; /* poměr stran 16:9 */ padding-top: 56.25%;}
.pomer-stran > * {position: absolute;top: 0; left: 0; right: 0; bottom: 0;width: 100%; height: 100%;}

#wrapper {float: center; width: 100%; height: auto;}

#header1 {float: center; width: 100%; height: auto; margin: auto; margin-top: 58px; padding: 0;}

/* nastavení page a content*/
#page {float: center; width: 100%; height: auto; margin: 0 auto; padding: 0px 0px 0px 0px; background: none;}
#content {float: left; width: 100%; height: auto; margin: 0; padding:0; font-size: 18px; line-height: 28px; text-align: left; background-color: #ffffff;}
.content {float: left; width: 95%; height: auto; padding:15px 2.5% 15px 2.5%; font-size:18px; line-height:28px; text-align: left; display: block; /* content se zobrazí */}
.contentleft {float: left; width: 100%; height: auto;}
.contentright {float: right; width: 100%; height: auto; border-radius: 28px;background-color:#fbf6b8; color: #000000;}

.zahlavi {font-size: 18px; line-height: 28px; color: #66870c; font-weight: bold;} /* zelená pro záhlaví a zápatí */

#content h1 {text-transform: none; text-align: center; font-size: 35px; line-height: 45px; font-weight: 800; color: #000000; text-decoration: none;}
#content h2 {text-transform: none; text-align: center; font-size: 25px; line-height: 35px; font-weight:bold; color: #000000; text-decoration: none;}
#content h3 {text-transform: none; text-align: center; font-size: 25px; line-height: 35px; font-weight: bold; color: #d31818; text-decoration: none;}
#content h4 {text-transform: none; text-align: center; font-size: 25px; line-height: 35px; font-weight: bold; color: #7fa617;  text-decoration: none;}
#content h5 {text-transform: none; text-align: center; font-size: 25px; line-height: 35px; font-weight: bold; color: #d31818; text-decoration: none;}

#content h6 {text-transform: none; text-align: center; font-size: 35px; line-height: 45px; font-weight: bold; color: #7fa617; text-decoration: none;}
#content h7 {text-transform: none; text-align: center; font-size: 1.4em; line-height: 1.6em; font-weight: bold; color: #1d8ad6; text-decoration: none;}
#content h8 {text-transform: none; text-align: center; font-size: 35px; line-height: 35px; font-weight: bold; color: #66b003; text-decoration: underline;}
#content h9 {text-transform: none; text-align: center; font-size: 35px; line-height: 35px; font-weight: bold; color: #66870c; text-decoration: underline;}
#content h10 {text-transform: none; text-align: center; font-size: 1.4em; line-height: 1.6em; font-weight: bold; color: #8ac40d; text-decoration: none;}
#content h11 {text-transform: none; text-align: center; font-size: 1.4em; line-height: 1.6em; font-weight: bold; color: #fd9104; text-decoration: none;}
#content h12 {text-transform: none; text-align: center; font-size: 30px; line-height: 40px; font-weight: 800; color: #d31818; text-decoration: none;}

.title {padding-top: 30px;}
a {font-weight: bold; color: #1f92e2; text-decoration: underline;}
#content a:hover {font-weight: bold; color:#d31818;text-decoration: underline;}

/* nastavení pro odpočet - ten má šířku min. 317px, ale je trošinku více vpravo, proto widht: 330px */ 
.odpocetcenter {width:330px; height:auto; float:center; margin:auto; padding: 10px 0 0 0; display:block;}

/* nastavení pro reference jako karty vedle sebe včetně bubliny + arrow šipka z bubliny */ 
#reference ul  {list-style: none; margin: 0; padding: 0; text-align: left;}
#reference ul li {width: 90%; height: auto; margin: 15px 2.5% 15px 2.5%;display: inline-block;}

.arrow {border: 1px solid #8ac40d; border-radius: 10px;background:  #f8f8f8;font-style:italic;font-size:17px;line-height:22px;color: #111111;padding: 20px;text-align: center;width: auto;}
.arrow--3 {position: relative;}
.arrow--3:after, .arrow--3:before {border: solid transparent;content: " ";display: block;height: 0;position: absolute;pointer-events: none;width: 0;top: 100%;}
.arrow--3:after {border-color: rgba(255, 255, 255, 0);border-top-color: #f8f8f8;left: 70px;margin-left: -13px;border-width: 13px;}
.arrow--3:before {border-color: rgba(255, 255, 255, 0);border-top-color: #8ac40d;left: 70px;margin-left: -14px;border-width: 14px;}

 /* nastavení buttonu pro kliknutí "objednat" */ 
#buttonobjednat {float: center; padding: 0; margin:0; width:auto; height: auto;}
#buttonobjednat a {width: auto; background-color: #1d8ad6; display: inline-block; border-radius: 10px; border-style: outset;font-family: Open Sans; 
font-size: 17px; color: #ffffff; font-weight: bold; line-height: 46px; text-align: center; text-decoration:none;box-shadow:3px 3px 3px 3px rgba(0,0,0,0.3); 
cursor:pointer; text-shadow: 0 5px 5px rgba(0,0,0,0.3); -webkit-text-size-adjust: none;}
#buttonobjednat a:hover {width: auto;height: auto; color: #fdf598; font-weight: bold; background-color: #a71313; text-decoration:none;}

.fajfkazelena ul {margin: 0px; padding: 20px 20px 0 20px; list-style: none; text-align: left;}
.fajfkazelena ul li {margin: 0; padding-left: 40px; font-size: 20px; line-height: 28px; font-weight: bold; color:#111111;
background: url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/cenik-fajfka.svg?v=100);
background-repeat: no-repeat;
background-size: 28px auto;}
.fajfkazelena li {line-height: normal;}

.fajfkazelenapodrobne {margin:0 0 10px 0; font-weight:normal;font-style:normal;font-size: 17px;line-height:24px;}

/* nastavení registračního popup formuláře */ 
.fajfkypopup ul {margin: 0px; padding: 15px 0px 10px 5px; list-style: none; line-height: 25px; text-align: left; font-size: 18px;color:#111111;}
.fajfkypopup ul li {margin: 10px; padding-left: 32px; background: url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/fajfka-popup.png?v=100) no-repeat; 
font-size: 18px; line-height: 25px; font-weight: bold; text-decoration: none; color:#111111;}
.fajfkypopup li {line-height: normal;}

.Submitpopup {width:100%; height:auto;}
.Submitpopup input {width:100%; float:center; background-color: #a71313; display: inline-block; border-radius: 2px; border-style: outset; font-family: Open Sans; font-size: 30px; 
color: #fdf598; font-weight: 800; line-height: 60px; text-align: center; text-decoration:none; -webkit-text-size-adjust: none; box-shadow: 0 5px 5px rgba(0,0,0,0.3); cursor:pointer;}
.Submitpopup input:hover {background-color:#1d8ad6;color:#ffffff;}
.inputemail {width:95%;line-height: 35px; font-size:18px;padding: 0 0 0 10px;border: 2px solid;}



/* nastavení footer */ 
/* background: #f1f1f1; se stínem background-color:#e5e5e5;*/
#footer-wrapper {z-index: 20; width: 100%; height: auto; margin: 0 0 0 -50%; position: relative; bottom: 0%; left: 50%; display: block; background-color: #f1f1f1; clear: both;}  
#footer {float: center; width: 95%; height: auto; margin: 0; padding: 20px 2.5% 20px 2.5%; font-size: 17px; line-height: 27px; font-weight: normal; color: #8ac40d;}  
#footer a {font-size: 17px; font-weight: normal; text-decoration: none; color: #8ac40d;}
#footer a:hover {text-decoration: underline;}

#footer .footer-odkazy {width: 290px; height: auto; float: center; text-align:center; margin: auto; padding-left:0px; display: block;}
#footer .footer-left {width: 290px; height: auto; float: center; text-align:center; margin: auto; padding-left:0px; display: block;}
#footer .footer-middle {width: 290px; height: auto; float: center; text-align:center; margin: auto; padding-left:0px; display: block;}
#footer .footer-right {width: 255px; height: auto; float: center; text-align:center; font-size: 14px; line-height:20px; margin: auto; padding:15px 0 0 0; display: block;} 
#footer .footer-right a {font-size: 14px;text-decoration: underline;} 
                        
#footer .footer {width: 100%; height: auto; float: center; text-align:center; font-size: 14px; margin:auto; padding:15px 0 0 0; display: block; clear: both;}
#footer .footer a {font-size: 14px;text-decoration: underline;}  


/* -------------------------------------------------------- KONEC  NASTAVENÍ   PRO MOBILNÍ NASTAVENÍ -------------------------------------------------------------- */

/* ------------------------------------------------------------------------------- od 599px ---------------------*/
@media screen and (min-width: 599px) and (max-width: 766px) {
#header1  {width: 600px; height: 171px; background: url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/jak-zhubnout-header-600-nove-logo.png?v=100) center 0 no-repeat;}

/* nastavení page a content*/
#page {width: 600px;}
#content {width: 600px;}
.content {width: 560px; padding:20px 20px 20px 20px;}
.contentleft {float: left; width: 215px; height: auto;padding:0px 0px 0px 0px;}
.contentright {float: left; width: 345px; height: auto;padding:10px 0px 0px 0px;}

/* nastavení footer */ 
#footer {width: 100%; padding: 20px 0 15px 0;}  
#footer .footer-odkazy {float: left; text-align:left;  display: inline-block;}
#footer .footer-left {float: left; text-align:left; padding-left:14px; display: block;}
#footer .footer-middle {float: left; text-align:left; padding-left:14px; display: block;}
#footer .footer-right {float: right; text-align:left; padding:0px 14px 0px 12px; display: inline;}
#footer .footer {padding:10px 0px 0px 0px;}
}

/* ------------------------------------------------------------------------------- od 767px ---------------------*/
@media screen and (min-width: 767px) and (max-width: 958px) {
#header1  {width: 760px; height: 217px; background: url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/jak-zhubnout-header-760-nove-logo.png?v=100) center 0 no-repeat;}

/* nastavení page a content*/
#page {width: 760px;}
#content {width: 760px;}
.content {width: 700px; padding:20px 30px 20px 30px; }
.contentleft {float: left; width: 300px; height: auto;padding:0px 0px 0px 0px;}
.contentright {float: left; width: 400px; height: auto;padding:20px 0px 0px 0px;}

/* nastavení footer */ 
#footer {width: 100%; padding: 20px 0 15px 0;}  
#footer .footer-odkazy {float: left; text-align:left;  display: inline-block;}
#footer .footer-left {float: left; text-align:left; padding-left:63px; display: block;}
#footer .footer-middle {float: left; text-align:left; padding-left:63px; display: block;}
#footer .footer-right {float: right; text-align:left; padding:0px 63px 0px 33px; display: inline;}
#footer .footer {padding:10px 0px 0px 0px;}
}

/* ------------------------------------------------------------------------------- od 959px ---------------------*/
@media screen and (min-width: 959px) and (max-width: 1098px) {
#header1  {width: 960px; height: 274px; background: url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/jak-zhubnout-header-960-nove-logo.png?v=100) center 0 no-repeat;}

/* nastavení page a content*/
#page {width: 960px;}
#content {width: 960px;}
.content {width: 860px; padding:20px 50px 20px 50px;}
.contentleft {float: left; width: 520px; padding:10px 0px 10px 0px;}
.contentright {float: left; width: 450px; padding: 25px 10px 10px 20px; }

/* nastavení footer */ 
#footer {width: 100%; padding: 20px 0 15px 0;}  
#footer .footer-odkazy {width: 635px; float: left; text-align:left;  display: inline-block;}
#footer .footer-left {float: left; text-align:left; padding-left:35px; display: inline;}
#footer .footer-middle {float: left; text-align:left; padding-left:20px; display: inline;}
#footer .footer-right {float: right; text-align:left; padding:0px 35px 0px 34px; display: inline;}
#footer .footer {padding:10px 0px 0px 0px;}
}

/* ------------------------------------------------------------------------------- od 1099px ---------------------*/
@media screen and (min-width: 1099px) {
#header1  {width: 1100px; height: 300px; background: url(https://navodjakzhubnout.cz/jidelnicek-na-hubnuti-na-miru/images/jak-zhubnout-header-1100-nove-logo.png?v=100) center 0 no-repeat;}

/* nastavení page a content*/
#page {width: 1100px;}
#content {width: 1100px;}
.content {width: 1000px; padding:20px 50px 20px 50px;}
.contentleft {float: left; width: 500px; padding:0px 20px 10px 0px;}
.contentright {float: right; width: 450px; padding: 10px 15px 10px 15px; }

#content h5 {text-transform: none; text-align: center; font-size: 30px; line-height: 45px; font-weight: bold; color: #d31818; text-decoration: none;}

/* nastavení pro reference jako karty vedle sebe včetně bubliny */ 
#reference ul li {width:450px; height: auto; margin: 20px 2.3% 20px 2.3%; display: inline-block;}

/* nastavení variant v ceníku */ 


/* nastavení buttonu pro kliknutí "objednat" */ 
#buttonobjednat {float: center; padding: 0; margin:0; width:auto; height: auto;}
#buttonobjednat a {width: auto; background-color: #1d8ad6; display: inline-block; border-radius: 10px; border-style: outset;font-family: Open Sans; 
font-size: 28px; color: #ffffff; font-weight: 800; line-height: 70px; text-align: center; text-decoration:none;box-shadow: 0 5px 5px rgba(0,0,0,0.3); 
cursor:pointer; text-shadow: 0 5px 5px rgba(0,0,0,0.3); -webkit-text-size-adjust: none;}
#buttonobjednat a:hover {width: auto;height: auto; color: #fdf598; font-weight: 800; background-color: #a71313; text-decoration:none;}

/* nastavení footer */ 
#footer {width: 100%; padding: 20px 0 15px 0;}  
#footer .footer-odkazy {width: 720px; float: left; text-align:left;  display: inline-block;}
#footer .footer-left {float: left; text-align:left; padding-left:90px; display: inline;}
#footer .footer-middle {float: left; text-align:left; padding-left:50px; display: inline;}
#footer .footer-right {float: right; text-align:left; padding:0px 90px 0px 34px; display: inline;}
#footer .footer {padding:10px 0px 0px 0px;}
}