html, body {height:100%; margin-top:1px;background-image: url(../kostra/img/bg.jpg); text-align: center; font-family: 'Roboto', sans-serif;}
* {font-family: 'Roboto', sans-serif;}

p {
  text-align:justify;
}

h1 {
  font-family: Arial;
  margin-bottom: 15px;

  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: #9E1C20;
}

h2 {
  margin-top: 5px;
  margin-bottom: 2px;

  font-size: 15px;
  font-weight: bold;
}

h3 {
  margin-top: 5px;
  margin-bottom: 2px;
  padding-top: 5px;
  font-size: 17px;
  font-weight: bold;
}

h4 {
  margin-top: 5px;
  margin-bottom: 2px;

  font-size: 11px;
  font-weight: bold;
}

a {
	color: #9e1c20;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #fdc010;
}

#verdikt {
	text-align: center;
	padding: 3px;
  color: #e95d0f;
	border: 1px #3D3D3D solid;
	font-size: 11px;
	font-weight: bold;
  margin-top: 10px;
}

#verdikt img{
  border:0px;
  width: 24px;
  height: 24px;
  margin-right: 30px;
}
.vypln {
  width: 100%;
  height: 1px;
  clear: both;
}

#up {
  margin: 0px;
  padding: 0px;
  height: 0px;
}

#cover {
  width: 980px;
  font-size:16px;
  font-family: "Arial Narrow", Arial, sans-serif;
  background-color: #ffffff;
  display: block;
  position: relative;
  margin: 0 auto;
  text-align: left;
}

#left {
  float: left;
  width: 178px;
  max-width: 178px;
}

#toplist {
  margin-top: 30px;
  width: 100%;
  text-align: center;
  display: none;
}


#right {
  float: right;
  width: 178px;
  max-width: 178px;
}

#top {
  float: left;
  width: 100%;
  height: 177px;
}

#middle{
  width: 624px;
  float: left;
}

#main {
  width: 600px;
  background-color: #fff;
  display: block;
  margin-top: 0px;
  margin-left: 8px;
}

#bot {
  clear: both;
  width: 980px;
  text-align: right;
  font-size: 80%;
}

#menu_container {
  background-color: #0882BE;
  width: 98.5%;
  max-height: 37px;
  min-height: 37px;
  display: block;
  margin-top: 5px;
  margin-left: 1.5%;
  padding: 0px;
  font-size: 15px;
  text-decoration: none;
  overflow: visible;
  -moz-border-radius: 5px;
  border-radius: 5px;

}

#core {
  margin: 20px 10px 0px 10px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

#new, #new * {box-sizing: border-box;}
#new {margin: 0 -10px 0 0;}
.flex {display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap;}
#rozcestnik {align-items: stretch; color: #472017;}
    #rozcestnik h2 {font-weight: 900; text-transform: uppercase; font-size: 25px; color: #472017;}
    #rozcestnik a {font-weight: 500; color: #8D6A62; text-decoration: underline;}
    #rozcestnik a:hover {color: #9B2523;}
.sekce {width: 32%; border: 1px solid #472017; border-radius: 3px; padding: 15px 15px 15px 20px; margin: 15px 0;}
.sekce:hover {border: 1px solid #066492; -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2); box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);}
    .sekce ul {padding: 0; margin: 20px 0;}
    .sekce li {position: relative; list-style: none; padding-left: 20px; font-size: 14px; padding: 3px 0 3px 20px;}
    .sekce li:before {content: "\2192"; position: absolute; left: 0; font-size: 14px;}
    .sekce li:hover:before {color: #9B2523;}
    
#benefits {background: #ebf5fa; border-radius: 5px; padding: 25px 0; color: #472017; margin: 50px 0 40px;}
    .benefit {position: relative; width: 33%; text-align: center; color: #8D6A62; font-size: 30px; padding: 0 10px;}
    .benefit:last-of-type span {color: #472017; text-transform: uppercase; font-size: 23px; padding: 10px 15px 6px; display: block; font-weight: 700;}
    .benefit::after {position: absolute; content: " "; background: #707070; height: 100%; width: 1px; right: 0; top: 0;}
    .benefit:last-of-type::after{display: none; content: "";}
    .benefit .img {position: absolute; width: 50px; height: 50px; border-radius: 25px; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid #0882BE; top: -50px; left: 0; right: 0; margin: 0 auto;}
    .benefit {font-weight: 500;}
    .benefit b {font-size: 60px; color: #472017; font-weight: 900;}
    .benefit em {font-size: 12px; opacity: 0.75; text-style: none; font-style: normal; display: block; color: #8D6A62; text-transform: none;}
    
#team {background: #faf1d4; padding: 35px 17px; border-radius: 5px;}   
    #team h2 {color: #8D6A62; font-size: 17px; text-align: center; text-transform: uppercase; margin: 0 0 30px 0;}
    #team .flex { align-items: stretch;}
    .member {width: 33%; padding: 0 18px 40px; text-align: center; position: relative;}
    .member:nth-of-type(2) {}
        .member p {font-size: 11px; color: #8D6A62; text-align: center; line-height: 16px;} 
        .member h3 {color: #472017; font-size: 15px; text-transform: uppercase; margin: 15px 0 10px; font-weight: 900;}
        .member .more {position: absolute; width: 150px; height: 30px; background: #fff; border-radius: 3px; text-align: center; line-height: 30px; font-size: 11px; color: #9B2523; left: 0; right: 0; margin: 0 auto; bottom: 0; font-weight: 400;}
        .member .more:hover {color: #fff; background: #add6eb;  -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2); box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);}
        
#mostwanted {}   
#mostwanted .flex {align-items: stretch;}
 #mostwanted h2 {color: #8D6A62; font-size: 15px; text-align: center; text-transform: uppercase; margin: 30px 0 25px;}
    #mostwanted .produkt {border: 1px solid #8D6A62; width: 32%; border-radius: 3px; padding: 0 0 50px; position: relative; margin: 0 0 20px;}
        #mostwanted .img {width: 100%; height: 165px; display: block;}
            #mostwanted .img img {width: 100%; height: 100%; object-fit: cover; object-position: top;}
        #mostwanted .obsah {padding: 15px 10px 10px; display: block;}
            #mostwanted .obsah strong {font-size: 13px; color: #8D6A62; display: block; text-transform: uppercase;}
            #mostwanted .obsah p {font-size: 10px; color: #707070; display: block; text-align: left; font-weight: 400; line-height: 15px;}
                #mostwanted .more {position: absolute; width: 120px; height: 30px; background: #faf1d4; border-radius: 3px; text-align: center; line-height: 30px; font-size: 11px; color: #9B2523; left: 0; right: 0; margin: 0 auto; bottom: 17px; font-weight: 400;}
                #mostwanted .produkt:hover .more {color: #fff; background: #9B2523;  -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2); box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);}