/* cmsms stylesheet: vespamorava modified: čtvrtek 27. listopadu 2025 8:58:35 */
/* 
1) Písmo a body
2) Hlavička stránky
3) Obsah stránky
4) Patička stránky
5) Odkazy stránky
6) Nadpisy stránky
7) Horní menu
8) Cookies blok
9) Přizpůsobení rozlišení
10) Přizpůsobení rozlišení animace
*/


/* --------   1) písmo a body   --------   */
html {
    scroll-behavior: smooth !important;
}
body {
font-family: Helvetica Neue, Arial, sans-serif;
width: 100%;
margin: -8px 0px 0px 0px;
background: #fff;
}

/* --------   2) hlavička stránky   --------   */

header{
width: 100%;
height: 100px;
float: left;
}
#headbox{
display: block;
transition: top 0.3s;
background: #fff;
position: fixed;
top: 0;
width: 100%;
height: 130px;
transition: top 0.3s; 
z-index: 999;
border-top: 5px solid red;
}
.menubox{
width: 98%;
height: 130px;
margin: auto;
background: #b7b7b7;
}
.head-title{
height: 30px;
width: 100%;
float: left;
background: #fff;
}
.head-title-text{
margin-left: 12px;
font-size: 16px;
margin-top: 5px;
}
.head-title-box{
width: 100%;
height: 100%;
float: left;
}
.head-title-link{
width: 160px;
height: 100%;
float: left;
position: relative;
z-index: 5;
}
.logo{
width: 400px;
float: left;
}
.brand {
float: left;
width: 100%;
}
.brand img{
height: 100%; 
width: 100%;
margin-top: 15px;
margin-left: 2px;
}

/* --------   3) Obsah stránky   --------   */
.content{
width: 100%;
height: 100%;
float: left;
background: #fff;
margin-bottom: 30px;
}
.contentbox{
width: 98%;
height: 100%;
margin: auto;
padding-top: 50px;
}
.slider{
width: 100%;
height: 100%;
float: left;
margin-left: 0px;
position: relative;
z-index: 3;
}
.sliderbox{
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: 3;
margin-top: -10px;
}
.clearer{
clear: both;
}
.contentbox p{
line-height: 2;
font-size: 15px;
}
.contentbox label{
margin-right: 20px;
}
.cont-left{
width: 65%;
height: 100%;
float: left;
}
.cont-right{
width: 35%;
height: 100%;
float: left;
}
.model-content{
width: 100%;
height: 100%;
float: left;
background: #e7e7e7;
}
.model-content2{
width: 100%;
height: 100%;
float: left;
background: #40b4e5;
color: #fff;
}
.model-content-left{
width: 48%;
min-height: 200px;
float: left;
}
.model-content-left p{
padding: 0px 50px 30px 50px;
text-align: center;
}
.model-content-right{
width: 48%;
min-height: 200px;
float: left;
}
.model-content-right p{
padding: 0px 50px 0px 50px;
text-align: center;
}
.kontaktbox{
width: 100%;
height: 100%;
float: left;
background: #f1f1f1;
}
.kontaktbox table{
line-height: 1.2;
font-size: 15px;
padding-left: 20px;
}
.kontaktbox hr{
width: 80%;
margin: auto;
margin-top: 20px;
}
.kontakt-left{
width: 30%;
height: 100%;
float: left;
line-height: 1;
}
.kontakt-right{
width: 70%;
height: 100%;
float: left;
}
td.kontakt-napis{
font-size: 12px;
}
object {
width: 100%;
min-height: 480px;
float: left;
}
.no-hr hr{
border: none;
}
.prislusenstvi-vespa{
width: 100%;
height: 100%;
float: left;
background: #6bcaac;
}
.prislusenstvi-piaggio{
width: 100%;
height: 100%;
float: left;
background: #007fdc;
}
.prislusenstvi-aprilia{
width: 100%;
height: 100%;
float: left;
background: red;
}
.pr-left{
width: 50%;
height: 100%;
float: left;
}
.pr-right{
width: 50%;
height: 100%;
float: left;
}
.pr-logo{
width: 100%;
height: 100%;
float: left;
}
.prislusenstvi .pr-logo img{
width: 50%;    
display: block;
margin: 0 auto;
padding-top: 30px;
}
.prislusenstvi img{
width: 70%;    
display: block;
margin: 0 auto;
}
.pr-text{
width: 100%;
height: 100%;
float: left;
}
.dily{
width: 100%;
height: 100%;
float: left;
margin-bottom: 20px;
}
.dily-left{
width: 30%;
height: 100%;
float: left;
}
.dily-center{
width: 40%;
height: 100%;
float: left;
padding-top: 30px;
}
.dily-right{
width: 30%;
height: 100%;
float: left;
}
.dily-left img{
float: right;
}
.dily-right img{
float: left;
}

/* --------   3a) OS - cenik, kontakt tabulka -------- */
.kontakt table{
width: 100%;
margin: auto;
border-collapse: collapse; 
text-align: center;
text-align: left;
font-size: 14px;
table-layout: fixed;
margin-bottom: 40px;
}
tr.r3{
background: #312783; 
height: 40px; 
font-weight: bold; 
color: #fff;
}
.kontakt table tr{
border-bottom: 1px solid grey;
}
.kontakt table img{
width: 25%;
}
.kontakt table td{
height: 40px;
padding-left: 20px;
}
.kontakt table th{
padding-left: 20px;
}

.cenik table{
width: 100%;
margin: auto;
border-collapse: collapse; 
text-align: center;
text-align: left;
font-size: 14px;
table-layout: fixed;
margin-bottom: 40px;
}
tr.r1{
background: #6bcaac; 
height: 40px; 
font-weight: bold; 
color: #fff;
}
tr.r2{
background: #007fdc; 
height: 40px; 
font-weight: bold; 
color: #fff;
}
.cenik table tr{
border-bottom: 1px solid grey;
}
.cenik table img{
width: 25%;
}
.cenik table td{
height: 40px;
padding-left: 20px;
}
.cenik table th{
padding-left: 20px;
}

/* --------   3b) OS - model kategorie -------- */
#model-rada{
width: 100%;
float: left;
}
.model-category{
width: 32%;
height: 100%;
float: left;
margin-right: 15px;
padding-bottom: 50px;
}
.model-category-name{
text-align: center;
text-transform: uppercase;
}
.model-category-image{
width: 100%;
height: 100%;
float: left;
}
.model-category-image img{
width: 100%;
height: 100%;
float: left;
}
label {
float: left; 
width: 100%; 
height: 30px; 
background: #fff;
color: #000;
font-weight: bold;
cursor:pointer;
border: 1px solid #dedede;
margin-bottom: 10px;
padding-top: 13px;
}
.label-nadpis{
padding-left: 30px;
}
input.inpa{display:none;}
input.inpa:checked+#model-rada{display:block;}
input.inpa+#model-rada{display:none;}
input.inpa2{display:none;}
input.inpa2:checked+#model-rada{display:block;}
input.inpa2+#model-rada{display:none;}
input.inpa3{display:none;}
input.inpa3:checked+#model-rada{display:block;}
input.inpa3+#model-rada{display:none;}
input.inpa4{display:none;}
input.inpa4:checked+#model-rada{display:block;}
input.inpa4+#model-rada{display:none;}
input.inpa5{display:none;}
input.inpa5:checked+#model-rada{display:block;}
input.inpa5+#model-rada{display:none;}

/* --------   3b) OS - model -------- */
.model{
width: 100%;
height: 100%;
float: left;

}
.model-left, .model-right{
width: 50%;
height: 100%;
float: left;
}
.seznam p{
font-size: 18px;
margin-left: 50px;
margin-top: 50px;
}
.seznam ul{
font-size: 18px;
margin-left: 50px;
margin-top: 50px;
line-height: 1.7;
}
.seznam2 p{
font-size: 18px;
margin-left: 50px;
margin-top: 50px;
}
.seznam2 ul{
font-size: 18px;
margin-left: 50px;
margin-top: 50px;
line-height: 1.7;
}
.model-left img{
width: 100%;
float: left;
}
.model-right-popis{
margin: 0px 20px 0px 20px;
}
.model-barva{
width: 100%;
height: 100%;
float: left;
padding: 30px 0px 30px 0px;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
.model-barva-text{
float: left;
margin-right: 30px;
}
.model-barva-blue, .model-barva-verde, .model-barva-grigio, .model-barva-red, .model-barva-azzuro, .model-barva-giallo, .model-barva-nero, .model-barva-cromo, .model-barva-rosso, .model-barva-beige, .model-barva-sean, .model-barva-bianco, .model-barva-orange{
width: 20px;
height: 20px;
float: left;
margin-right: 30px;
}
.model-technicke-informace{
width: 100%;
height: 100%;
float: left;
}
.mti-left{
width: 50%;
height: 100%;
float: left;
}
.mti-right{
width: 50%;
height: 100%;
float: left;
}
.model-technicke-informace p{
padding: 0px 20px 0px 20px;
}
p.model-zakladni-text{
text-align: center;
font-style: italic;
background: #f7f7f7;
padding: 20px 50px 20px 50px;
}
p.cena-nadpis{
line-height: 0px;
}
p.cena{
font-size: 50px;
line-height: 5px;
}
p.tech-info-nadpis{
line-height: 0px;
}
p.tech-info-text{
font-size: 25px;
}

/* --------   3c) OS - novinky -------- */
.uvod-modely{
width: 100%;
height: 100%;
float: left;
position: relative;
}
.uvod-model{
width: 23%;
height: 100%;
float: left;
margin: 10px 10px 0px 0px;
background: #f1f1f1;
}
.uvod-model-image img{
width: 100%;
height: 100%;
float: left;
}
.uvod-model-link{
width: 100%;
height: 100%;
float: left;
}
.uvod-bazar{
width: 100%;
height: 100%;
float: left;
background: #f7f7f7;
padding-bottom: 50px;
}
.NewsSummary{
width: 100%;
float: left;
margin-bottom: 20px;
}
.NewsSummary2{
width: 70%;
margin: auto;
margin-bottom: 20px;
}
.NewsSummarySummary{
width: 100%;
float: left;
}
.NewsSummarySummary img{
width: 100%;
}
.NewsSummaryMorelink{
width: 100%;
float: left;
text-align: right;
}
.NewsSummaryMorelink2{
width: 100%;
float: left;
text-align: right;
}
#NewsPostDetailSummary img{
width: 100%;
}
#NewsPostDetailSummary p{
text-align: center;
}
.news-detail{
width: 100%;
height: 100%;
float: left;
background: #F1f1f1;
padding-bottom: 20px;
}
.news-detail-box{
width: 95%;
margin: 0px 20px 0px 20px;
float: left;
line-height: 1.7;
}
.bazar-gallery{
width: 100%;
float: left;
padding-bottom: 20px;
}
.bazar-image {
width: 30%;
float: left;
margin-right: 10px;
}
.bazar-image img{
width: 100%;
}
figure {
width: 100%;
height: 100%;
background: #fff;
overflow: hidden;
margin: 0;
padding: 0;
}
figure:hover+span {
opacity: 1;
}
.summary-image figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.summary-image figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.bazar-image figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.bazar-image figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}

/* --------   3c) OS - dotaz - formulář   --------   */
.dotazbox{
width: 100%;
height: 100%;
float: left;
}
.dotaz{
width: 100%;
min-height: 300px;
margin: auto;
margin-bottom: 30px;
margin-top: 20px;
}
.formbox{
width: 100%; 
height: 100%; 
margin: auto;
font-size: 14px;
}
.fpol{
width: 100%; 
height: 100%; 
float: left; 
margin: 0px 0px 0px 0px;
}
.ftitle{
width: 200px; 
min-height: 37px; 
float: left; 
text-align: left; 
font-weight: bold;
margin-left: 30px;
}
.finput{
width: 75%; 
height: 100%; 
float: left; 
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: red;
color: #fff;
margin-top: 60px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #f86868;
color: #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input{
width: 100%;
border: 1px solid #ccc;
margin: 0px 0 5px;
line-height: 1.5;
color: #000;
height: 30px;
padding: 0 30px 0 20px;
}
#contact input[type="checkbox"] {
width: 20px;
height: 20px;
float: left;
}
#contact textarea{
width: 100%;
height: 50px;
border: 1px solid #ccc;
}

/* --------   4) Patička stránky   --------   */
footer{
width: 100%;
height: 100%;
float: left;
}
.fbox{
width: 98%;
height:170px;
margin: auto;
border-top: 1px solid #e6e6e6;
}
.fcontact{
width: 100%;
height: 100%;
float: left;
text-align: center;
font-size: 13px;
line-height: 1;
}
.fcontact img{
width: 27px;;
}
.copyright{
width: 98%;
height: 90px;
margin: auto;
border-top: 1px solid #e6e6e6;
text-align: center;
color: grey;
font-size: 11px;
}
.copyright-text{
width: 100%;
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
}

/* --------   5) Odkazy stránky   --------   */
.head-title-link a:link {text-decoration: none; font-size: 14px; color: #333;}
.head-title-link a:hover { font-size: 14px; color: red;}
.head-title-link a:visited {text-decoration: none; font-size: 14px; color: #333;}
.head-title-link a:visited:hover{font-size: 14px; color: red;}

a.bann :link {animation-name: none; position: static;}
a.bann :hover {animation-name: none; position: static;}
a.bann :visited {animation-name: none; position: static;}
a.bann :visited:hover{animation-name: none; position: static;}

.contentbox a:link{color: #fff; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block; width: 100%;
position: relative;
animation-name: odkaz;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.contentbox a:hover{color: #a1deac; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block;width: 100%;
position: relative;
animation-name: odkaz;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.contentbox a:visited{color: #fff; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block;width: 100%;
position: relative;
animation-name: odkaz;
animation-iteration-count: infinite;
}
@keyframes odkaz {
 0%   {background: #e56c79;}
 50%  {background: #c72031;}
 100% {background: #e56c79;}
}


.sliderbox a:link{color: #fff; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block; width: 100%;
position: relative;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
border: 2px solid white;
}
.sliderbox a:hover{color: #a1deac; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block;width: 100%;
position: relative;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
border: 2px solid white;
}
.sliderbox a:visited{color: #fff; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block;width: 100%;
position: relative;
animation-name: slide;
animation-iteration-count: infinite;
border: 2px solid white;
}
@keyframes slide {
 0%   {background: rgba(255,255,255,0.2);color: #e56c79;}
 50%  {background: rgba(255,255,255,0.9);color: #e56c79;}
 100% {background: rgba(255,255,255,0.2);color: #e56c79;}
}


.caption a:visited{color: #fff; font-size: 13px; padding: 10px 0px; text-align: center; text-decoration: none; display: inline-block;width: 100%;
position: relative;
animation-name: odkaz2;
animation-iteration-count: infinite;
}
@keyframes odkaz2 {
 0%   {background: #fff;}

 100% {background: #000;}
}
.model-category a:link{text-align: center; width: 100%;}
.model-category a:hover{text-align: center; width: 100%;}
.model-category a:visited{text-align: center; width: 100%;}

.model-barva-blue a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #3a26a6;}
.model-barva-blue a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #3a26a6;}
.model-barva-blue a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #3a26a6;}

.model-barva-verde a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #61d7b1;}
.model-barva-verde a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black; padding: 0px; background: #61d7b1;}
.model-barva-verde a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #61d7b1;}

.model-barva-grigio a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #7481a0;}
.model-barva-grigio a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #7481a0;}
.model-barva-grigio a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #7481a0;}

.model-barva-red a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #bc000f;}
.model-barva-red a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #bc000f;}
.model-barva-red a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #bc000f;}

.model-barva-azzuro a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #3f8ded;}
.model-barva-azzuro a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #3f8ded;}
.model-barva-azzuro a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #3f8ded;}

.model-barva-giallo a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #f2ff00;}
.model-barva-giallo a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #f2ff00;}
.model-barva-giallo a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #f2ff00;}

.model-barva-nero a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #000000;}
.model-barva-nero a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #000000;}
.model-barva-nero a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #000000;}

.model-barva-cromo a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #d1d2d9;}
.model-barva-cromo a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #d1d2d9;}
.model-barva-cromo a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #d1d2d9;}

.model-barva-rosso a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #be0000;}
.model-barva-rosso a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #be0000;}
.model-barva-rosso a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #be0000;}

.model-barva-beige a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #decc79;}
.model-barva-beige a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #decc79;}
.model-barva-beige a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #decc79;}

.model-barva-sean a:link{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #c7c400;}
.model-barva-sean a:hover{animation: none; width: 18px; height: 18px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #c7c400;}
.model-barva-sean a:visited{animation: none; width: 20px; height: 20px; text-decoration: none; border-radius: 10px; padding: 0px; background: #c7c400;}

.model-barva-bianco a:link{animation: none; width: 19px; height: 19px; text-decoration: none; border-radius: 10px; padding: 0px; background: #ffffff; border: 1px solid grey;}
.model-barva-bianco a:hover{animation: none; width: 17px; height: 17px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #ffffff;}
.model-barva-bianco a:visited{animation: none; width: 19px; height: 19px; text-decoration: none; border-radius: 10px; padding: 0px; background: #ffffff; border: 1px solid grey;}

.model-barva-orange a:link{animation: none; width: 19px; height: 19px; text-decoration: none; border-radius: 10px; padding: 0px; background: #ff6600; border: 1px solid grey;}
.model-barva-orange a:hover{animation: none; width: 17px; height: 17px; text-decoration: none; border-radius: 10px; border: 2px solid black;padding: 0px; background: #ff6600;}
.model-barva-orange a:visited{animation: none; width: 19px; height: 19px; text-decoration: none; border-radius: 10px; padding: 0px; background: #ff6600; border: 1px solid grey;}

.prislusenstvi a:link{animation-name: none; background: none; padding: 0px; color: #fff;}
.prislusenstvi a:hover{animation-name: none; background: none; padding: 0px;color: #fff;text-decoration: underline;}
.prislusenstvi a:visited{animation-name: none; background: none; padding: 0px;color: #fff;}

.bazar-gallery a:link{animation-name: none; background: none; padding: 0px; }
.bazar-gallery a:hover{animation-name: none; background: none; padding: 0px;}
.bazar-gallery a:visited{animation-name: none; background: none; padding: 0px;}

.copyright a:link{text-decoration: none; color: grey;}
.copyright a:hover{text-decoration: none; color: #a1deac;}
.copyright a:visited{text-decoration: none; color: grey;}

.kontaktbox a:link{animation-name: none; background: none; padding: 0px; color: #000;border: none; background: none;}
.kontaktbox a:hover{animation-name: none; background: none; padding: 0px;border: none; background: none;}
.kontaktbox a:visited{animation-name: none; background: none; padding: 0px;color: #000;border: none; background: none;}


/* --------   6) Nadpisy stránky   --------   */
h1{
color: #565656; font-size: 16px; text-decoration: none; font-weight: bold;
line-height: 2;
}
#NewsPostDetailContent h1{
font-size: 30px;
text-align: center;
line-height: 1;
color: #40b4e5;
font-style: italic;
}
.contentbox h1{
font-size:30px;
text-align: center;
color: #40b4e5;
line-height:1.5;
font-style: italic;
text-transform: uppercase;
}
h2{
font-size: 23px;
text-align: center;
line-height: 2;
color: #40b4e5;
font-style: italic;
}
.model-content h2{
font-size: 18px;
text-align: center;
line-height: 1;
font-style: italic;
padding-top: 30px;
}
.model-content2 h2{
font-size: 18px;
text-align: center;
line-height: 1;
color: #fff;
font-style: italic;
padding-top: 30px;
}
.NewsSummary h2{
font-size: 23px;
text-align: center;
line-height: 1;
color: #40b4e5;
font-style: italic;
}
.NewsSummary2 h2{
font-size: 23px;
text-align: center;
line-height:0.8;
color: #40b4e5;
font-style: italic;
}
.prislusenstvi h2{
font-size: 35px;
text-align: center;
line-height: 1.5;
color: #fff;
font-style: italic;
}
.kontaktbox h2{
font-size: 23px;
text-align: left;
line-height:0.8;
color: #40b4e5;
font-style: italic;
}
h3{
font-size: 16px;
text-align: center;
line-height: 1.2;
color: #000;
font-style: italic;
}


/* --------   7) Horní menu   --------   */
.nav-bar {
height: 100px;
width: 100%;
position: relative;
z-index: 4;
}
.nav-container {
max-width: 100%;
margin: 0 auto;
} 
nav {
float: right;
width: 780px;
height: 100px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
}
nav ul li {
float: left;
position: relative;
height: 100px;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 20px 5px 0px 5px;
line-height: 60px;
color: #fff;
text-decoration: none;

}
nav ul li a:hover,
nav ul li a:visited:hover {
color: red;
text-decoration: none;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: -5px;
content: ' ▾';
}
nav ul li p{
display: block;
padding: 0 8px;
line-height: 70px;
background: #fff;
color: #5a1a74;
text-decoration: none;
}
nav ul li ul li {
min-width: 250px;
background: red;
color: #000;
font-size: 13px;
height: 100%;
}
nav ul li ul li a {
padding: 15px;
line-height: 10px;
background: #b7b7b7;
color: #fff;
}
nav ul li ul li a:hover,
nav ul li ul li a:hover {
color: red;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
nav ul li ul li a:visited{
background: #b7b7b7;
color: #fff;
}
nav ul li ul li a:visited:hover{
background: #b7b7b7;
color: red;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
}
.droppom{
margin-left: -100px;
}

/* --------   7b) HM - mobilni verze   --------   */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
height: 70px;
width: 70px;
}
.nav-list li:hover .nav-dropdown{
display: block;
z-index: 1;
}

@media only screen and (max-width: 1250px) {
.nav-mobile {
display: block;
}
.menubox{
width: 100%;
height: 70px;
}
.logo{
height: 70px;
}
.headup{
display: none;
}
nav {
width: 100%;
padding: 0px 0 15px;
height: 70px;
}
.nav-bar{
background: rgba(255,255,255,0.8);
}
nav ul {
display: none;
background: #fff;
}
nav ul li {
float: none;
height: 80%;
}
nav ul li a {
margin-top: 0px;
padding: 15px;
font-size: 16px; 
text-align: center;
}
nav ul li a, nav ul li a:visited{
line-height: 12px;
background: #fff;
color: red;
text-decoration: none;
border-bottom: 1px solid #c5c5c5;
}
nav ul li ul li {
height: 100%;
line-height: 17px;
}
nav ul li ul li a:link {
background: #f5f5f5;
color: red;
}
nav ul li ul li a:hover {
background: #dedede;
color: red;
}
nav ul li ul li a:visited {
background: #f5f5f5;
color: red;
}

.nav-dropdown {
position: static;
}
.brand {
width: 50px; height: 70px;
}
.brand img {
height: 50px; margin-top: 15px;
}
}

@media screen and (min-width: 1250px) {
.nav-list {
display: block !important;
}
}

/* --------   7c) HM - hamburger   --------   */
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.hover span {
color: red;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}


/* --------   8) Cookies blok   --------   */
.cookieConsentContainer {
z-index: 3;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: #f3d900;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
} 
.cookieConsentContainer .cookieDesc a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: #000000;
box-sizing: border-box; 
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover { 
cursor: pointer;
background: #bda900;
}

/* --------   8b) CB - mobilní verze  --------   */
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100%  !important;
}
}


/* --------   9a) přizpůsobení rozlišení (mobil) --------   */
@media (min-width: 100px) and (max-width: 1250px)  {
header{
height: 70px;
}
.head-title{
display: none;
}
.brand img{
height: 60px; 
margin-top: 5px;
margin-left: 10px;
}
#headbox{
height: 70px;
}
.nav-bar {
background: #979797;
height: 70px;
}
.contentbox{
padding-top: 20px;
}
.cont-left{
width: 100%;
}
.cont-right{
width: 100%;
}
.kontakt-left, .kontakt-right{
width: 100%;
margin-bottom: 30px;
}
.kontaktbox table{
margin: auto;
padding-left: 0;
width: 250px;
}
.pr-left, .pr-right{
width: 100%;
height: 100%;
float: left;
}
.pr-left img{
width: 100%;
}
.pr-right img{
width: 100%;
}
.prislusenstvi-vespa .pr-right img{
display: none;
}
.prislusenstvi-piaggio .pr-left img{
display: none;
}
.dily-left, .dily-right{
display: none;
}
.dily-center{
width: 100%;
padding: 0;
}

/* ---   ceník   --- */
.cenik table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}  
.cenik table tr {
border-bottom: 1px solid #dedede;
display: block;
margin-bottom: .625em;
margin-bottom: 10px;
padding-bottom: 10px;
line-height: 1.7;
}  
.cenik table td {
display: block;
text-align: right;
height: 100%;
}  
.cenik table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
}
.cenik table td:last-child {
border-bottom: 0;
}

/* ---   novinky   --- */
.uvod-model{
width: 100%;
height: 100%;
float: left;
margin: 10px 0px 0px 0px;
}
.seznam, .seznam2{
display: none;
}
.NewsSummary2{
width: 100%;
float: left;
margin-bottom: 20px;
}
.bazar-image {
width: 100%;
float: left;
margin-right: 0px;
}
h2{
line-height: 1.5;
text-align: center;
}
.sliderbox a:link{width: 100%; font-size: 18px; padding: 10px 0px 10px 0px;}
.sliderbox a:hover{width: 100%;font-size: 18px;padding: 10px 0px 10px 0px;}
.sliderbox a:visited{width: 100%;font-size: 18px;padding: 10px 0px 10px 0px;
}
.contentbox a:link{width: 100%; font-size: 18px; padding: 10px 0px 10px 0px;}
.contentbox a:hover{width: 100%;font-size: 18px;padding: 10px 0px 10px 0px;}
.contentbox a:visited{width: 100%;font-size: 18px;padding: 10px 0px 10px 0px;
}
.model a:link{width: 100%; font-size: 18px; padding: 0px 0px 0px 0px;}
.model a:hover{width: 100%;font-size: 18px;padding: 0px 0px 0px 0px;}
.model a:visited{width: 100%;font-size: 18px;padding: 0px 0px 0px 0px;
}

/* ---   formular   --- */
.dotazbox{
width: 100%;
float: left;
}
.finput, .ftitle{
width: 100%;
text-align: center;
float: none;
margin: auto;
min-height: 15px;
}
#contact input{
width: 100%;
padding: 0px 0px 0px 0px;
margin: 10px 0px 10px 0px;
}
#contact input[type="checkbox"]{
margin: auto;
float: none;
}
/* ---   model   --- */
.model-category{
width: 70%;
height: 100%;
float: none;
margin-right: 0px;
margin: auto;
padding-bottom: 10px;
}
.model-content-left{
width: 100%;
min-height: 150px;
float: left;
padding: 0px;
}
.model-content-right{
width: 100%;
min-height: 100%;
float: left;
padding: 0px;
}
.model-left, .model-right, .mti-left, .mti-right{
width: 100%;
height: 100%;
float: left;
text-align: center;
}
.model-left-image{
max-width: 100%;
float: none;
margin: auto;
}
.model-left-image img{
width: 100%;
}
.model-barva{
width: 180px;
height: 70px;
line-height: 2;
float: none;
margin: auto;
}
.model-barva-blue, .model-barva-verde, .model-barva-grigio, .model-barva-red, .model-barva-azzuro, .model-barva-giallo, .model-barva-nero, .model-barva-cromo, .model-barva-rosso, .model-barva-beige, .model-barva-sean, .model-barva-bianco{
margin-right: 16px;
}
.model-barva-text{
width: 100%;
margin-right: 0px;
text-align: center;
}

/* --------   9c) přizpůsobení rozlišení HD a 2,5K --------   */
@media (min-width: 1700px) and (max-width: 2600px)  {
nav {
width: 1200px;
}
nav ul{
font-size: 18px;
}
nav ul li ul li {
font-size: 18px;
}
.contentbox a:link{ font-size: 18px;}
.contentbox a:hover{ font-size: 18px;}
.contentbox a:visited{ font-size: 18px;
}
.head-title-link a:link{ font-size: 18px;}
.head-title-link a:hover{ font-size: 18px;}
.head-title-link a:visited{ font-size: 18px;
}
.content p{
font-size: 16px;
}
p.tech-info-nadpis{
font-size: 15px;
}
p.tech-info-text{
font-size: 22px;
}
.formbox {
font-size: 16px;
}
.kontaktbox table {
font-size: 16px;
line-height: 1.5;
}
.cenik table {
font-size: 16px;
}
#pjAcceptCookieBar p{
font-size: 14px;
}
.model-content2 h2{
font-size: 30px;
}
.NewsSummary h2{
font-size: 30px;
}
h3{
font-size: 22px;
}

/* --------   10) přizpůsobení rozlišení animace (mobil) --------   */
@media (min-width: 300px) and (max-width: 499px)  {
.slideshow, .slider {
min-height: 200px;
}
}
@media (min-width: 500px) and (max-width: 599px)  {
.slideshow, .slider {
min-height: 250px;
}
}
@media (min-width: 600px) and (max-width: 699px)  {
.slideshow, .slider {
min-height: 300px;
}
}
@media (min-width: 700px) and (max-width: 799px)  {
.slideshow, .slider {
min-height: 350px;
}
}
@media (min-width: 800px) and (max-width: 899px)  {
.slideshow, .slider {
min-height: 400px;
}
}
@media (min-width: 900px) and (max-width: 999px)  {
.slideshow, .slider {
min-height: 450px;
}
}
@media (min-width: 1000px) and (max-width: 1099px)  {
.slideshow, .slider {
min-height: 480px;
}
}
@media (min-width: 1100px) and (max-width: 1199px)  {
.slideshow, .slider {
min-height: 510px;
}
}
@media (min-width: 1200px) and (max-width: 1299px)  {
.slideshow, .slider {
min-height: 550px;
}
}
@media (min-width: 1590px) and (max-width: 1700px)  {
.slideshow, .slider {
min-height: 700px;
}
}
@media (min-width: 1701px) and (max-width: 1900px)  {
.slideshow, .slider {
min-height: 800px;
}
}
@media (min-width: 1901px) and (max-width: 2100px)  {
.slideshow, .slider {
min-height: 900px;
}
}
@media (min-width: 2101px) and (max-width: 2600px)  {
.slideshow, .slider {
min-height: 1000px;
}
}