.fa,
 .fas {
     font-family: 'FontAwesome';
     font-weight: 900;
 }




 body {
     margin: 0;
     background-color: #e9e7e8;
     -moz-osx-font-smoothing: grayscale;
     font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
     font-size: 14px;
     color: #000000;
 }

 img { image-rendering: -webkit-optimize-contrast;  
      image-rendering: auto; }  

 .box_stranky {
     box-shadow: 0 0 20px 3px #ccc;
     width: 1250px;
     margin-left: auto;
     margin-right: auto;
     background-color: white;
     height: auto;
     min-height: 1500px;
     position: absolute;
     left: 0;
     right: 0;
 }



 .slider_message {
     position: absolute;
     margin-left: 271px;
     margin-top: 207px;
     font: 13px 'Open Sans';
     color: #cccccc;
     background-color: #ffffff;
     width: 340px;
     height: 35px;
     z-index: 9;
     transition: all .2s ease;


 }



 .slider_pozice {
     width: 1250px;
     margin-left: 0px;
 }




 .user_pozice {
     position: absolute;
     top: 0px;
     right: 20px;
     display: inline-flex;
     right: 20px;
     padding: 10px;
 }


 .user_pozice_user {
     padding-left: 50px;
 }


 .user_pozice_kosik,
 .user_pozice_user,
 .user_pozice_kosik a,
 .user_pozice_user a {
     text-align: right;
     font-size: 14px;
     font-weight: 600;
     color: #efdddd;
 }

 .user_pozice_kosik a:hover,
 .user_pozice_user a:hover {
     color: #fff;
     border-bottom: 1px dotted #fff;
     text-decoration: none;
 }


 .user_pozice_kosik {
     height: 26px;
 }

 .kosik_nahled {
     display: none;
     position: absolute;
     width: 700px;
     height: auto;
     top: 25px;
     z-index: 20;
     right: 30px;
     padding: 20px;
     background-color: #fff;
     font-size: 12px;
     box-shadow: 0 0 30px 0px #ccc;
     color: #333;
     font-weight: 400;
     clip-path: inset(0px -30px -30px -30px);
 }


 .user_pozice_kosik:hover .kosik_nahled {
     position: absolute;
     display: block;
     z-index: 20;
 }


 .user_pozice_ikona {
     font-size: 20px;
     position: absolute;
     margin-left: -20px;
 }


 .kosik_nahled_ikona {
     right: 28px;
     position: absolute;
     color: #ccc;
     font-size: 30px;
     margin-top: -5px;
 }




 .expresni_dodani {
     position: absolute;
     margin-left: -35px;
     margin-top: -35px;
     height: 121px;
     width: 119px;
     display: inline-block;
     will-change: transform;
     transform-origin: top left;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }

     100% {
         transform: scale(1);
     }
 }

 .expresni_dodani.pulse {
     animation: pulse 1s ease both;
 }


 .hlavni_cenovka {
     position: relative;
     display: inline-block;
     font-size: 60px;
     color: #BC0518;
     margin-top: -10px;
 }

 .hlavni_cenovka::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -4px;
     width: 0px;
     height: 6px;
     background: url('/images/wave-underline.png') no-repeat left center;
     background-size: 180px auto;
     opacity: 1;
 }

 .hlavni_cenovka.highlight::after {
     animation: wave-reveal 1s ease forwards;
 }

 @keyframes wave-reveal {
     0% {
         width: 0px;
     }

     100% {
         width: 180px;
     }
 }


 .button_predchozi_dalsi {
     background-color: #fff;
     border: 3px solid #fff;
     color: #BC0518;
     /*  padding: 4px 0px 4px 0px;  */
     font-size: 20px;
     cursor: pointer;
     width: 50px;
     /*  text-align: left;*/
 }

 .button_predchozi_dalsi:hover {
     color: #000;
 }

 .button_predchozi_dalsi_cisla {
     background-color: #fff;
     border: 3px solid #fff;
     border-bottom: 3px solid #ccc;
     color: #777;
     padding: 10px;
     font-size: 24px;
     cursor: pointer;
     margin: 3px;
 }

 .button_predchozi_dalsi_cisla:hover {
     color: #000;
     border-bottom: 3px solid #000;

 }



 .button_kosik {
     background-color: #aaa;
     border: none;
     color: white;
     padding: 8px 10px;
     font-size: 17px;
     cursor: pointer;
     width: 40px;
 }

 .button_kosik:hover {
     /*  opacity: 0.7;*/
     filter: brightness(130%);
     transition: 0.1s;
 }


 .button_kosik_ve_vypisu {
     border: none;
     padding: 8px 15px;
     cursor: pointer;
     position: absolute;
     left: 0px;
     bottom: 3px;
     background-color: transparent;
     color: #999;
     font-size: 30px;
 }

 .button_kosik_ve_vypisu:hover {
     /*  opacity: 0.7;*/
     filter: brightness(130%);
     transition: 0.1s;
     font-size: 40px;
     left: -3px;
     bottom: -1px;
     color: #339900;
 }


 .dodavka_kosik {
     font-size: 30px;
     /*   margin-top: -15px;*/
     position: absolute;
     right: 46%;
     color: #ccc;
 }


 .shadow_detail {
     position: relative;
     padding: 30px;
     margin: 12px;
     width: 905px;
     display: block;
     box-shadow: 0 0 18px 4px #eee;
 }

 .shadow_detail_fotka {
     position: absolute;
     /*    margin-left: 5px;*/
     margin-top: 0px;
     width: 500px;
     text-align: center;

 }


 .male_fotky_v_detailu {
     width: 50px;
     height: 50px;
     border: 1px solid #ddd;
     '

 }


 .male_fotky_v_detailu:hover {
     transition: all .2s ease;
     -webkit-box-shadow: 0px 0px 10px 0px #aaa;
     box-shadow: 0px 0px 10px 0px #aaa;
 }




 .shadow_detail_popis {
     position: relative;
     margin-left: 520px;
     margin-top: 0px;
     border-left: 1px solid #ccc;
     padding-left: 20px;
     min-height: 560px;
     padding-bottom: 50px;

 }

 .shadow_detail_cenova_tabulka {
     position: relative;
     margin-left: 0px;
     margin-top: 10px;
     height: 160px;
     padding-bottom: 15px;
     
 }

 .shadow_detail_cenovka {
     position: absolute;
     color: #ccc;
     right: 0px;
     font-weight: bold;
     font-size: 24px;
     margin-top: -10px;
 }

 .shadow_detail_tabulka_cen {
     position: absolute;
     margin-top: 70px;
     left: 0px;

 }

 .shadow_detail_pocitani {
     position: relative;
     margin-left: 0px;
     margin-top: 10px;
     height: 125px;
     padding: 12px 20px 12px 20px;
     background-color: #eee;
     transition: 0.2s;
     border-radius: 5px;
 }

 .pismo_detail_pod_cenou {
      font-size: 14px;
     color: #333;
     margin-left: 60px;
     text-align: left;
     line-height: 1.36;
     display: block
 }


 .ikonka_v_detailu {
     position: absolute;
     left: 272px;
     margin-top: 460px;
     width: 250px;
     height: auto;
     z-index: 1;
 }



 .dodavka {
     position: absolute;
     margin-left: 0px;
     margin-top: 2px;
     width: 41px;
     height: 30px;
 }

 .partner {
     position: absolute;
     margin-left: 600px;
     margin-top: 37px;
     width: 120px;
     height: 120px;
 }


 .shadow_doprava {

     box-shadow: 6px 0px 8px -5px #888888;
     background-color: white;
 }

 .adresa_homepage {
     position: absolute;
     text-align: right;
     width: 750px;
     right: 20px;
     top: 95px;
     font-size: 14px;
     color: #333;
     -webkit-text-size-adjust: 100%;
 }

 .expres_ikonka {
     position: absolute;
     margin-left: -14px;
     z-index: 5;
     width: 80px;
     /*    height: 14px;*/
 }

 .vyprodej_ikonka {
     position: absolute;
     margin-left: -14px;
     margin-top: 20px;
     z-index: 5;
     width: 80px;
     /*    height: 14px;*/

 }

 .hledani_katalog {
     position: absolute;
     margin-left: 30px;
     margin-top: 0px;
     width: 600px;
     height: 35px;
 }

 .hledani_katalog_hp {
     position: absolute;
     right: 26px;
     top: 137px;
     z-index: 15;
 }

 .penbox_banner {
     width: 1250px;
     margin-left: calc(50% - 625px);
 }


 .shadow_hledani {
     border-width: 1px;
     border-style: solid;
     border-color: #888;
     color: #ccc;
     font: 14px 'Open Sans';
     font-style: normal;
     text-align: right;
     width: 450px;
     height: 25px;
     margin-left: -97px;
     padding: 1px 20px 1px 1px;
     background-color: #fff;
     -webkit-appearance: none;
     outline: 0;
 }

 .shadow_hledani:hover {
     border: 1px solid #;
     background-color: #fff;
     box-shadow: inset 10px 10px 3px -10px #999;
 }


 .hledani_katalog_button {
     position: absolute;
     border: 0px;
     right: 23px;
     top: 133px;
     width: 85px;
     height: 42px;
     font-size: 16px;
     text-align: top;
     background-color: #eee;
     color: #555;
     z-index: 15;
     border-radius: 0px 5px 5px 0px;
     margin-right: 4px;
 }





 .hledani_katalog_button_rotate {
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     margin-top: -2px;
     margin-left: 0px;
     display: inline-block;

 }

 .hledani_katalog_button:hover {
     background-color: #BC0518;
     color: #fff;

 }





.ctverecek_barva_textil:hover {
  transform: scale(1.2);
  transition: transform 0.2s;
}



 .vyber_jazyka_wrapper {
     position: absolute;
     top: 0px;
     right: 450px;
     z-index: 100;

 }

 .jazyk_label {
     font-weight: 600;
     display: block;
     padding: 10px 10px;
     cursor: pointer;

     transition: color 0.3s ease;
     color: #efdddd;
 }

 .jazyk_label:hover {
     color: #fff;
 }

 .vyber_jazyka {
     position: absolute;
     top: 40px;
     left: -25px;
     width: 160px;
     /* Trochu širší kvůli vlajkám */
     background-color: #fff;
     padding: 15px 20px;
     line-height: 2.2;
     /* Větší řádkování pro vlajky */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     border: 1px solid #eee;

     /* Skryté ve výchozím stavu */
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     border-radius: 0px 0px 7px 7px;
 }

 .vyber_jazyka a {
     font-size: 14px;
     color: #555;
     display: flex;
     /* Flex pro zarovnání vlajky a textu */
     align-items: center;
     padding: 3px 0;
     transition: color 0.2s ease, border-bottom 0.2s ease;
     text-decoration: none;
     border-bottom: 1px dotted #fff;
 }

 .vyber_jazyka a img {
     width: 20px;
     /* Velikost vlajky */
     height: 15px;
     margin-right: 8px;
     /* Mezera mezi vlajkou a textem */
     border: 1px solid #ddd;
     /* Jemný rámeček kolem vlajky */
     border-radius: 2px;
 }

 .vyber_jazyka a:hover {
     color: #000;
     border-bottom: 1px dotted #555;
     text-decoration: none;

     /* Žádný padding-left, takže text zůstane na místě */
 }

 .vyber_jazyka a:hover img {
     border-color: #999;
     /* Tmavší rámeček při hover */
 }

 /* Zobrazení menu při najetí na wrapper */
 .vyber_jazyka_wrapper:hover .vyber_jazyka {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 /* Změna ikony při otevření */
 .vyber_jazyka_wrapper:hover .jazyk_label i {
     transform: rotate(180deg);
     transition: transform 0.3s ease;
 }

 /* Neviditelný most pro plynulý přechod */
 .vyber_jazyka_wrapper::before {
     content: '';
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     height: 10px;
 }










 .pomocne_menu {
     width: 1100px;
     height: 80vh;
     background-color: #eee;
     -webkit-box-shadow: 4px 6px 0px#888888;
     box-shadow: 0 4px 6px 0px #888888;

 }




 .menu_vlevo {
     position: absolute;
     width: 40px;
     height: 170px;
     background-color: #eee;
     left: -39px;
     top: 0px;
     -webkit-box-shadow: -5px 3px 5px 0px #aaa;
     box-shadow: -5px 3px 5px 0px #aaa;
     border-radius: 5px 0px 0px 5px;
 }






 .hlavni_menu_vlevo {
     position: absolute;
     width: 220px;
     height: 100%;
     margin-left: 0px;
     top: 210px;
     border-style: solid;
     border-color: #ccc;
     border-top-width: 0px;
     border-right-width: 1px;
     border-bottom-width: 0px;
     border-left-width: 0px;
 }

 .hlavni_menu_vlevo_pozice {
     margin-left: 20px;
     margin-top: 20px;
     display: inline-block;
     line-height: 1.5;

 }


 .hlavni_ramec {
     position: relative;
     width: 1030px;
     height: 100%;
     margin-left: 220px;
     top: 0px;
 }

 .hlavni_ramec_bez_menu {
     position: relative;
     width: 1250px;
     /*    min-height: 2050px;*/
     top: 0px;
 }


 .hlavni_ramec_pozice1 {
     position: relative;
     margin-left: 20px;
     margin-top: 20px;
     min-height: 1600px;
 }

 .hlavni_ramec_pozice2 {
     position: relative;
     margin-left: 20px;
     margin-top: 20px;
     margin-right: 25px;
 }

 .hlavni_ramec_pozice3 {
     position: relative;
     width: 1050px;
     margin-left: 100px;
     margin-top: 50px;
 }

 .pozice_penbox {
     height: 2400px;
     margin-left: 50px;
     width: 1050px;
     position: relative;
     top: -120px;
 }


 #map {
     position: absolute;
     width: 500px;
     height: 500px;
     right: 0px;
     top: 60px;
 }



 .kontakt_box {
     max-width: 50%;
 }


 .linka_horizontal {
     border-style: solid;
     border-color: #ccc;
     border-top-width: 0px;
     border-right-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     height: 1px;
     width: 200px;

 }

 .linka_horizontal2 {
     border-style: solid;
     border-color: #aaa;
     border-top-width: 1px;
     border-right-width: 0px;
     border-bottom-width: 0px;
     border-left-width: 0px;
     height: 1px;
     width: 430px;
     margin-top: -8px;
     padding-bottom: 10px;

 }

 .mala_linka {
     border-style: solid;
     border-color: #ccc;
     position: relative;
     border-top-width: 0px;
     border-right-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 0px;
     top: 13px
 }


 .share {
     position: absolute;
     width: 160px;
     height: 35px;
     margin-top: 10px;
     margin-left: 0px;
     z-index: 11;
 }

 div.share div {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%)
 }

 .zoomimg {
     display: inline-block;
     width: 35px;
     height: 35px;
     background-size: 70% 70%;
     background-repeat: no-repeat;
     background-position: center center;
     transition: all .1s ease;
 }

 .zoomimg:hover {
     cursor: pointer;
     background-size: 100% 100%;
 }

 .fb {
     background-image: url(https://www.promodirect.cz/images/FB-ico.png);
 }

 .tw {
     background-image: url(https://www.promodirect.cz/images/TW-ico.png);
 }

 .goo {
     background-image: url(https://www.promodirect.cz/images/G-ico.png);
 }

 .pint {
     background-image: url(https://www.promodirect.cz/images/PIN-ico.png);
 }






 .umisteni_kalkulator {
     position: relative;
     top: 10px;
 }

 .umisteni_kalkulator i {
     font-size: 40px;
     color: #bbb;
     position: relative;
     margin-top: 5px;
     margin-left: 5px;
 }

 .umisteni_kalkulator_zadejte {
     margin-left: 55px;
     top: 0px;
     position: absolute;
 }

 .umisteni_kalkulator_spocitej {
     position: absolute;
     margin-left: 150px;
     margin-top: -45px;
 }



 .buton_objednat,
 .buton_objednat_input {

     background-color: #a1c900;
     border-radius: 7px;

     text-indent: 0px;
     border: 1px solid #b7e404;
     display: inline-block;
     color: #ffffff;
     padding: 5px;
     font-size: 25px;
     font-weight: 400;
     font-style: normal;
     /* 	line-height:36px;*/
     width: 200px;
     text-decoration: none;
     text-align: center;
     margin-bottom: 10px;
     text-transform: uppercase;
     /*  padding: 5px 5px 5px 5px;
	text-shadow:1px 2px 2px #8c1c12;*/
 }

 .buton_objednat:hover,
 .buton_objednat_input:hover {
     background-color: #8db000;
     color: #ffffff;
     text-decoration: none;
     box-shadow: 0px 0px 7px 3px #fff;

 }

 .buton_objednat:active {

     box-shadow: 0px 0px 7px 2px #cccccc;
 }


 /*  nová verze s košíkem
*/
 .buton_objednat2 {

     background-color: #a1c900;
     border-radius: 7px;
     text-indent: 0px;
     border: 1px solid #ceec54;
     display: inline-block;
     color: #ffffff;
     font-size: 16px;
     font-weight: 600;
     font-style: normal;
     line-height: 36px;
     width: 300px;
     text-decoration: none;
     text-align: left;
     padding: 0px 0px 0px 10px;
     line-height: 49px;
     text-transform: uppercase;
 }

 .buton_objednat2:hover {
     background-color: #8db000;
     color: #ffffff;
     text-decoration: none;
     box-shadow: 0px 0px 7px 3px #fff;

 }

 .buton_objednat2:active {

     box-shadow: 0px 0px 7px 2px #cccccc;
 }


 .buton_objednat2x {
     padding: 14px 30px;
     background-color: #a1c900;
     text-decoration: none;
     border-radius: 5px;
     border: 1px solid #afd710;
     transition: all 0.3s;
     text-align: center;
     min-width: 260px;
     justify-content: center;
     font-weight: 600;
     font-size: 20px;
     color: #eee;
     text-transform: uppercase;
     /* box-shadow: 0px 0px 0px 0px #fff; */
 }

 .buton_objednat2x:hover {
     background-color: #8db000;
     color: #ffffff;
     text-decoration: none;
     box-shadow: 0px 0px 17px 5px #dfdfdf;


 }



 .buton_objednat_div {
     position: absolute;
     right: 20px;
     margin-top: 0px;
     width: 260px;
     z-index: 11;
 }



 #objednat_butonek,
 #objednat_butonek_potisk {
     transition: box-shadow 0.7s ease-out;
 }

 #objednat_butonek.highlight,
 #objednat_butonek_potisk.highlight {
     box-shadow: 0 0px 20px 15px #fff;
 }



 .buton_load_more {
     background-color: #BC0518;
     color: white;
     padding: 20px 50px;
     border: none;
     cursor: pointer;
     font-size: 16px;
     border-radius: 4px;
 }


 .naposledy_zobrazene {
     background-color: white;
     z-index: 10;
     margin-left: -240px;
     background-color: #f7f7f7;
 }

 .container_link {
     text-decoration: none !important;
     display: inline-block;
     color: inherit;
 }

 .container_link:hover {
     text-decoration: none !important;
 }

 .container_link span {
     display: block;
 }


 .container_podkat2,
 .container_podkat3 {
     display: inline-flex;
     width: 245px;
     padding: 10px 5px 10px 0px;
     border: 1px solid #fff;
     font-size: 18px;
     margin: 0px 10px 25px 0px;
     box-shadow: 0 0 10px 3px #eee;
     background-color: white;
     border-radius: 5px;
 }

 .container_podkat2:hover,
 .container_podkat3:hover {
     box-shadow: 0px 0px 16px 0px #ccc;
     border: 1px solid #fff;
     transition: 0.3s ease;

 }

 .container_podkat2_ikona {
     font-size: 22px;
     color: #BC0518;
     "

 }

 .container_podkat2_titulek {
     font-size: 26px;
     color: #BC0518;
     font-family: 'Kalam';
 }



 .container_podkat2_mensi {
     display: inline-flex;
     width: 230px;
     padding: 10px 5px 10px 0px;
     border: 1px solid #fff;
     font-size: 16px;
     margin: 0px 10px 10px 0px;
     box-shadow: 0 0 8px 3px #eee;
     border-radius: 5px;
 }

 .container_podkat2_mensi:hover {
     box-shadow: 0px 0px 16px 0px #bbb;
     transition: 0.3s ease;

 }

 .container_podkat2_ikona_mensi {
     font-size: 22px;
     color: #BC0518;
     "

 }

 .container_podkat2_titulek_mensi {
     font-size: 24px;
     color: #BC0518;
 }

 .container_podkat3 {
     width: 275px;
 }


 .container_kategorie {
     padding: 5px 20px 7px 15px;
     box-shadow: 0 0 5px 2px #eee;
     border: 1px solid #ddd;
     font-size: 16px;
     margin: 0px 10px 10px 0px;
     display: inline-flex;
 }


 .container_kategorie:hover {
     -webkit-box-shadow: 0px 0px 10px 0px #aaa;
     box-shadow: 0px 0px 7px 0px #aaa;
     border: 1px solid #fff;
     transition: 0.3s ease;
 }

 .container_kategorie_fa {
     font-size: 15px;
     font-weight: 300;
     margin-top: 4px;
 }

 #inspirace_img2 {
     width: 85px;
     height: 85px;
     padding: 0px 8px 0px 5px;
 }



 h1 {
     display: inline;
     font-weight: normal;
 }


 h2 {
     display: inline;
     font-weight: normal;
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
 }



 .toast-notification {
     position: fixed;
     top: 20px;
     right: 20px;
     background: #8db000;
     color: white;
     padding: 15px 25px;
     border-radius: 5px;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
     opacity: 0;
     transform: translateX(100%);
     transition: all 0.3s ease;
     z-index: 9999;
 }

 .toast-notification.show {
     opacity: 1;
     transform: translateX(0);
 }

 .toast-notification.error {
     background: #f44336;
 }


 .cart-item-controls {
     white-space: nowrap;
 }

 .cart-item-controls button:hover {
     opacity: 0.8;
     cursor: pointer;
 }

 .cart-item-controls button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 #kosik_nahled_container.updating {
     opacity: 0.5;
     pointer-events: none;
 }




 .barevnik {
     right: 10px;
     top: 5px;
     /*         position: absolute;
        display:flex;*/
     margin-top: -45px;
     text-align: right;
     padding: 8px 0px 8px 8px;
 }



 .barevnik:hover .ctverecek_barva {
     transition: opacity 0.2s ease-in;
     opacity: 100%;
 }


 .ctverecek_barva {
     width: 23px;
     height: 23px;
     /*         margin: 1px;*/
     cursor: pointer;
     border: 3px solid #fff;
     padding: 0;
     transition: opacity 0.5s ease-out;
     transition-delay: 1s;
     opacity: 40%;

 }

 .ctverecek_barva:hover {
     border: 3px solid #aaa;

 }


 .tooltip2 {
     position: relative;
     display: inline-block;
 }

 .tooltip2 .tooltiptext2 {
     visibility: hidden;
     width: 120px;
     background-color: #999;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: -60px;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .tooltip2 .tooltiptext2::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #999 transparent transparent transparent;
 }

 .tooltip2:hover .tooltiptext2 {
     visibility: visible;
     opacity: 1;


 }










 .poptavka_small {
     position: relative;
     width: 905px;
     height: 140px;
     background-color: #ffffff;

     box-shadow: 0 5px 5px 3px #cccccc;
     border-top: 1px dashed #cccccc;
     padding: 30px;
     margin: 12px;
     top: -11px;

 }









 .poptavka_small2 {
     position: fixed;
     width: 205px;
     height: 270px;
     background-color: #ffffff;

     box-shadow: 0 5px 5px 3px #ccc;
     border-top: 1px dashed #ccc;
     padding: 15px 20px 20px 20px;
     bottom: -255px;
     right: 15px;
     z-index: 12;
     transition-property: bottom;
     transition-delay: 0.3s;
     transition-duration: 0.3s;
     /*    transition: all .3s ease; */
 }

 .poptavka_small2:hover {
     bottom: 0px;

     box-shadow: 0 5px 5px 5px #ccc;

 }


 .input_4x_form {
     /*    position:absolute;*/
     bottom: 60px;
     right: 30px;
     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 185px;
     height: 16px;

     box-shadow: inset 0 0 2px 2px #f0f0f0;
     padding: 8px;
     align-self: right;
     margin-bottom: 10px;

 }

 .input_4x_form:focus {
     background: #ffffff;
     color: #000000;
     border: 1px solid #ffffff;
     transition: all .1s ease;
 }

 .input_4x_form:hover {
     border: 1px solid #996e6e;
 }

 .input_7x_form {
     /*    position: absolute;*/
     margin-top: 25px;
     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 185px;
     height: 120px;
     resize: none;

     box-shadow: inset 0 0 3px 0px #ccc5be;
     padding: 8px;
     margin-bottom: 10px;
     background-color: #f7f4f1
 }

 .input_7x_form:focus {
     background: #ffffff;
     border: 1px solid #cccccc;
     color: #000000;

     transition: all .1s ease;
     background-color: #f7f4f1
 }

 .input_7x_form:hover {
     border: 1px solid #996e6e;
 }

 div.poptavka_small div {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
 }

 .poptavka_small_odeslat {

     background-color: #999;
     border-radius: 7px;

     text-indent: 0px;
     border: 1px solid #bbb;
     display: inline-block;
     color: #ffffff;

     font-size: 18px;
     font-weight: normal;
     font-style: normal;
     line-height: 36px;
     width: 205px;
     text-decoration: none;
     text-align: center;
     right: 30px;
     top: 130px;
     cursor: pointer;


 }



 .poptavka_small_odeslat:hover {
     background-color: #777;
     color: #ffffff;
     text-decoration: none;
 }

 .poptavka_small_odeslat:active {
     border: 1px solid #cccccc;

 }


 .button_yes {
     background: url(https://www.promodirect.cz/images/ico1.jpg);
     position: absolute;
     background-size: cover;
     background-repeat: no-repeat;
     width: 25px;
     height: 25px;
     background-position: center center;
     border-style: none;
     cursor: pointer;
     margin-left: 5px;
     margin-top: -2px;
 }

 .button_no {
     position: absolute;
     margin-left: 35px;
     width: 25px;
     height: 25px;
     margin-top: -2px;
 }

 .button_yes:hover {
     transition: 0.3s ease;
     filter: contrast(140%);
 }

 .button_no:hover {
     transition: 0.3s ease;
     filter: contrast(140%);
 }

 .fotka_v_kosiku {
     position: absolute;
     right: 45%;
     margin-top: -4px;


 }







 /* Tooltip container */
 .tooltip {
     position: relative;
     display: inline-block;
     border-bottom: 1px dotted black;
     /* If you want dots under the hoverable text */
 }

 /* Tooltip text */
 .tooltip .tooltiptext {
     visibility: hidden;
     width: 180px;
     background-color: #555;
     color: #fff;
     text-align: center;
     padding: 8px 0;
     border-radius: 6px;

     /* Position the tooltip text */
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: -60px;

     /* Fade in tooltip */
     opacity: 0;
     transition: opacity 0.3s;
 }

 /* Tooltip arrow */
 .tooltip .tooltiptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
 }

 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }



 /* Tooltip container */
 .tooltip3 {
     position: relative;
     display: inline-block;
     border-bottom: unset;
     /* If you want dots under the hoverable text */
 }

 /* Tooltip text */
 .tooltip3 .tooltiptext3 {
     visibility: hidden;
     width: 180px;
     background-color: #555;
     color: #fff;
     text-align: center;
     padding: 8px 0;
     border-radius: 6px;

     /* Position the tooltip text */
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: -60px;

     /* Fade in tooltip */
     opacity: 0;
     transition: opacity 0.3s;
 }

 /* Tooltip arrow */
 .tooltip3 .tooltiptext3::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
 }

 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip3:hover .tooltiptext3 {
     visibility: visible;
     opacity: 1;
 }


 .normal {
     font-size: 13px;
     color: #000000;
     font-weight: normal;
 }

 a {
     text-decoration: none;
     color: #333
 }

 a:hover {
     text-decoration: underline;
     color: #BC0518
 }

 ;

 form {
     margin-top: 0px;
     margin-bottom: 0px;
 }


 a.menu_horni_lista:link {
     font-size: 14px;
     color: #BC0518;
     text-decoration: none;
 }

 a.menu_horni_lista:visited {
     font-size: 14px;
     color: #BC0518;
     text-decoration: none;
 }

 a.menu_horni_lista:hover {
     font-size: 14px;
     color: #000000;
 }

 a.mail:link {
     font-size: 13px;
     color: #000000;
     border-bottom: 1px solid #bbbbbb;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail:visited {
     font-size: 13px;
     color: #000000;
     border-bottom: 1px solid #bbbbbb;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail:hover {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail:active {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px solid #BC0518;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail_kategorie:link {
     font-size: 16px;
     color: #000000;
     border-bottom: 1px solid #bbbbbb;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail_kategorie:visited {
     font-size: 16px;
     color: #000000;
     border-bottom: 1px solid #bbbbbb;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail_kategorie:hover {
     font-size: 16px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px;
 }

 a.mail_kategorie:active {
     font-size: 16px;
     color: #BC0518;
     border-bottom: 1px solid #BC0518;
     text-decoration: none;
     line-height: 17px;
 }


 a.vyhledavani:link {
     font-size: 14px;
     color: #000000;
     text-decoration: underline;
 }

 a.vyhledavani:visited {
     font-size: 14px;
     color: #000000;
     text-decoration: underline;
 }

 a.vyhledavani:hover {
     font-size: 14px;
     color: #BC0518;
     text-decoration: none;
 }

 a.vyhledavani_fialove:link {
     font-size: 14px;
     color: #666;
     text-decoration: underline;
 }

 a.vyhledavani_fialove:visited {
     font-size: 14px;
     color: #666;
     text-decoration: underline;
 }

 a.vyhledavani_fialove:hover {
     font-size: 14px;
     color: #000;
     text-decoration: none;
 }

 a.fialovy_link:link {
     font-size: 16px;
     color: #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link:visited {
     font-size: 16px;
     color: #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link:hover {
     font-size: 16px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link:active {
     font-size: 16px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_1:link {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_1:visited {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_1:hover {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_1:active {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }


 a.fialovy_link_2:link {
     font-size: 13px;
     color: #000000;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_2:visited {
     font-size: 13px;
     color: #000000;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_2:hover {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_3:link {
     font-size: 13px;
     color: #000000;
     text-decoration: none;
     border-bottom: 1px dotted #BC0518;
     line-height: 17px
 }

 a.fialovy_link_3:visited {
     font-size: 13px;
     color: #000000;
     text-decoration: none;
     line-height: 17px
 }

 a.fialovy_link_3:hover {
     font-size: 13px;
     color: #BC0518;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
     line-height: 17px
 }

 a.vypis_link:link {
     font-size: 12px;
     color: #000000;
     text-decoration: underline;
 }

 a.vypis_link:visited {
     font-size: 12px;
     color: #000000;
     text-decoration: underline;
 }

 a.vypis_link:hover {
     font-size: 12px;
     color: #BC0518;
     text-decoration: underline;
 }

 a.bily_link:link {
     font-size: 13px;
     color: #ffffff;
     text-decoration: underline;
 }

 a.bily_link:visited {
     font-size: 13px;
     color: #ffffff;
     text-decoration: underline;
 }

 a.bily_link:hover {
     font-size: 13px;
     color: #ffffff;
     border-bottom: 1px dotted #ffffff;
     text-decoration: none;
 }

 a.odkaz_administrace:link {
     font-size: 14px;
     color: #BC0518;
     text-decoration: underline;
 }

 a.odkaz_administrace:visited {
     font-size: 14px;
     color: #BC0518;
     text-decoration: underline;
 }

 a.odkaz_administrace:hover {
     font-size: 14px;
     color: #000000;
     text-decoration: none;
 }

 a.cerveny_link:link {
     font-family: 'Open Sans';
     font-weight: bold;
     font-size: 28px;
     color: #e40218;
     text-decoration: none;
     line-height: 1.1;
     letter-spacing: -1px;
 }

 a.cerveny_link:visited {
     font-size: 28px;
     color: #e40218;
     text-decoration: none;
     line-height: 1.1;
     letter-spacing: -1px;
 }

 a.cerveny_link:hover {
     font-size: 28px;
     color: #e40218;
     text-decoration: underline;
     line-height: 1.1;
     letter-spacing: -1px;
 }

 a.ceny_link:link {
     font-family: 'Open Sans';
     font-size: 24px;
     color: #000000;
     text-decoration: underline;
     line-height: 1.1;
     letter-spacing: -2px;
 }

 a.ceny_link:visited {
     font-family: 'Open Sans';
     font-size: 24px;
     color: #000000;
     text-decoration: underline;
     line-height: 1.1;
     letter-spacing: -2px;
 }

 a.ceny_link:hover {
     font-family: 'Open Sans';
     font-size: 24px;
     color: #BC0518;
     text-decoration: underline;
     line-height: 1.1;
     letter-spacing: -2px;
 }

 a.vymena_odkazu:link {
     font-size: 9px;
     color: #666666;
     text-decoration: none;
 }

 a.vymena_odkazu:visited {
     font-size: 9px;
     color: #666666;
     text-decoration: none;
 }

 a.vymena_odkazu:hover {
     font-size: 9px;
     color: #BC0518;
     text-decoration: underline;
 }

 a.vymena_odkazu1:link {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 a.vymena_odkazu1:visited {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 a.vymena_odkazu1:hover {
     font-size: 9px;
     color: #BC0518;
     text-decoration: none;
 }

 a.odkaz_sedy_12:link {
     font-size: 13px;
     color: #666666;
     text-decoration: underline;
 }

 a.odkaz_sedy_12:visited {
     font-size: 13px;
     color: #666666;
     text-decoration: underline;
 }

 a.odkaz_sedy_12:hover {
     font-size: 13px;
     color: #BC0518;
     text-decoration: none;
 }

 #vymena a:link {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 #vymena a:visited {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 #vymena a:hover {
     font-size: 9px;
     color: #BC0518;
     text-decoration: none;
 }

 #vymena {
     font-size: 9px;
     color: #BC0518
 }

 #vymena1 a:link {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 #vymena1 a:visited {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 #vymena1 a:hover {
     font-size: 9px;
     color: #BC0518;
     text-decoration: none;
 }

 #vymena1 {
     font-size: 9px;
     color: #666666
 }

 .vymena_odkazu_sede {
     font-size: 9px;
     color: #666666;
     text-decoration: underline;
 }

 .vymena_odkazu_fialove {
     font-size: 9px;
     color: #bc0518;
     text-decoration: none;
 }

 .pismo_bila {
     font-size: 13px;
     color: #ffffff;
 }

 .pismo_bila_18 {
     font-size: 18px;
     color: #ffffff;
 }

 .pismo_cerna_mala {
     font-size: 10px;
     color: #000000;
 }

 .pismo_cerna_10 {
     font-size: 12px;
     color: #000000;
 }

 .pismo_fialova {
     font-size: 16px;
     color: #BC0518;
 }

 .pismo_fialova2 {
     font-size: 14px;
     color: #BC0518;
 }

 .pismo_fialova_velka {
     font-size: 18px;
     font-weight: bold;
     color: #BC0518;
 }

 .pismo_titulek_detail {
     font-size: 22px;
     font-weight: bold;
     color: #BC0518;
 }

 .pismo_fialova_velka2 {
     font-size: 14px;
     color: #ccc;
 }

 .pismo_fialova_velka3 {
     font-size: 24px;
     font-weight: bold;
     color: #BC0518;
 }

 .pismo_fialova_24 {
     font-family: 'Open Sans';
     font-size: 28px;
     color: #BC0518;
     line-height: 1.1;
     letter-spacing: -1px;
     font-weight: bold
 }

 .pismo_fialova_16 {
     font-size: 16px;
     color: #BC0518;
 }

 .pismo_vypis {
     font-size: 12px;
     color: #000000;
 }

 .pismo_fialova_vyhledavani {
     font-size: 14px;
     color: #BC0518;
 }

 .pismo_vyhledavani {
     font-size: 12px;
     color: #000000;
 }

 .pismo_news_1 {
     font-size: 12px;
     color: #000000;
 }

 .pismo_news_2 {
     font-size: 12px;
     color: #BC0518;
 }

 .pismo_news_3 {
     font-size: 14px;
     color: #BC0518;
 }

 .pismo_cervena_12 {
     font-size: 13px;
     color: #cc0000;
 }

 .pismo_cervena_14 {
     font-size: 14px;
     color: #cc0000;
 }

 .pismo_cervena_18 {
     font-size: 18px;
     color: #cc0000;
 }

 .pismo_cervena_velka {
     font-family: 'Open Sans';
     font-weight: bold;
     ;
     font-size: 28px;
     color: #e40218;
     line-height: 1.1;
     letter-spacing: -1px;
 }

 .pismo_cervena_24 {
     font-family: 'Open Sans';
     font-weight: bold;
     ;
     font-size: 24px;
     color: #e40218;
     line-height: 1.1;
     letter-spacing: -1px;
 }

 .pismo_ceny_24 {
     font-family: 'Open Sans';
     font-weight: bold;
     font-size: 24px;
     color: #cccccc;
     line-height: 1.1;
     letter-spacing: -1px;
 }

 .pismo_sediva_24 {
     font-size: 24px;
     color: #9a9a9a;
     font-weight: bold;
     line-height: 1.1;
 }



 .input_1 {
     background-color: #ffffff;
     border: 1px solid #cccccc;
     font-size: 12px;
     color: #000000;
     width: 60px;
 }

 .input_2 {
     background-color: #ffffff;
     border: 1px solid #cccccc;
     font-size: 12px;
     color: #000000;
     width: 100px;
 }

 .input_5 {
     background-color: #ffffff;
     border: 1px solid #cccccc;
     font-size: 12px;
     color: #000000;
     width: 160px;
 }

 .input_3 {
     background-color: #BC0518;
     border: 1px solid #BC0518;
     font-size: 12px;
     color: #ffffff;
     width: 50px;
 }

 .input_4 {
     background-color: #ffffff;
     border: 1px solid #999;
     font-size: 12px;
     color: #000000;
     width: 200px;
 }

 .input_6 {
     background-color: #ffffff;
     border: 1px solid #999;
     font-size: 12px;
     color: #000000;
     width: 40px;
 }

 .input_7 {
     background-color: #ffffff;
     border: 1px solid #cccccc;
     font-size: 12px;
     color: #000000;
     width: 140px;
 }

 .input_homepage {
     background-color: #ffffff;
     border: 1px solid #000000;
     font-size: 13px;
     color: #000000;
     width: 134px;
 }

 .input_1_form {
     background-color: #ffffff;
     border: 1px solid #000000;
     font-size: 13px;
     color: #000000;
     width: 60px;
     resize: none
 }

 .input_2_form {
     background-color: #ffffff;
     border: 1px solid #000000;
     font-size: 13px;
     color: #000000;
     width: 100px;
     resize: none
 }

 .input_3_form {
     background-color: #BC0518;
     border: 1px solid #BC0518;
     font-size: 13px;
     color: #ffffff;
     width: 50px;
     resize: none
 }

 .input_4_form {
     position: absolute;
     margin-top: 10px;
     right: 30px;
     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 240px;
     height: 16px;

     box-shadow: inset 0 0 2px 2px #f0f0f0;
     padding: 8px;
     align-self: right;

 }

 .input_4_form:focus {
     background: #ffffff;
     color: #000000;
     border: 1px solid #ffffff;

     transition: all .1s ease;
 }

 .input_4_form:hover {
     border: 1px solid #996e6e;
 }

 .input_5_form {

     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 250px;
     height: 89px;
     resize: none;

     box-shadow: inset 0 0 2px 3px #f0f0f0;
     padding: 8px;
 }

 .input_5_form:focus {
     background: #ffffff;
     border: 1px solid #ffffff;
     color: #000000;

     box-shadow: 0 0 5px 3px #cccccc;
     transition: all .1s ease;
 }

 .input_5_form:hover {
     border: 1px solid #996e6e;
 }

 .input_6_form {

     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 95%;
     height: 89px;
     resize: none;

     box-shadow: inset 0 0 2px 3px #f0f0f0;
     padding: 8px;
 }

 .input_6_form:focus {
     background: #ffffff;
     border: 1px solid #ffffff;
     color: #000000;

     box-shadow: 0 0 5px 3px #cccccc;
     transition: all .1s ease;
 }

 .input_6_form:hover {
     border: 1px solid #996e6e;
 }

 .input_7_form {
     position: absolute;
     margin-top: 25px;
     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 600px;
     height: 95px;
     resize: none;

     box-shadow: inset 0 0 3px 0px #ccc5be;
     padding: 8px;
     background-color: #f7f4f1
 }

 .input_7_form:focus {
     background: #ffffff;
     border: 1px solid #cccccc;
     color: #000000;

     transition: all .1s ease;
     background-color: #f7f4f1
 }

 .input_7_form:hover {
     border: 1px solid #996e6e;
 }

 .input_8_form {
     padding: 8px;
     left: 10px;
     background-color: #ffffff;
     border: 1px solid #cccccc;

     font-size: 13px;
     color: #000000;
     width: 100px;
     resize: none;

     box-shadow: inset 0 0 1px 2px #f0f0f0;
     text-align: right;
     padding-right: 10px;
 }

 .input_8_form:hover {
     border: 1px solid #996e6e;
 }

 .input_9_form {
     font-family: 'Open Sans';
     font-size: 13px;
     border: 1px solid #cccccc;
     color: #333333;
     width: 300px;

     box-shadow: inset 0 0 2px 2px #f0f0f0;
     padding: 8px;
     /*    align-self: right;*/
 }

 .input_9_form:focus {
     background: #ffffff;
     color: #000000;
     border: 1px solid #ffffff;

     box-shadow: 0 0 5px 2px #cccccc;
     transition: all .1s ease;
 }

 .input_9_form:hover {
     border: 1px solid #996e6e;
 }

 .input_9_form_x {
     font-family: 'Open Sans';
     color: #333333;
     width: 60%;
     /*     height: 16px;*/
     background-color: #efefef;
     padding: 15px;
     border: unset;
     box-shadow: unset;
 }

 .single-image {
     font-size: 10px;
     color: #bbb;
 }

 .objednavka_formular {
     background-color: #ffffff;
     border: 1px solid #000000;
     font-size: 12px;
     color: #003366;
 }

 .formular {
     background-color: #ffffff;
     border: 1px solid #000000;
     font-size: 12px;
     color: #003366;
 }

 .obrazek_ram {
     position: absolute;
     top: 10px;
     left: 14px;
     width: 285px;
     max-height: 275px;
     display: flex;
     object-fit: contain;
 }

 .obrazek_ram img {
     width: 285px;
     height: 285px;

 }

 .margin-left-150 {
     margin-left: 150px;

 }


 .vypis_textovy_objekt {
     position: absolute;
     left: 0px;
     top: 280px;
     margin: 12px;
 }


 .obrazek_ram_detail {
     border: 1px solid #fff;
     object-fit: contain;
 }

 .vypis_ram {
     position: relative;
     margin-top: 0px;
     margin-left: 0px;
     width: 288px;
     height: 420px;
     margin: 8px;
     padding: 6px;
     border: 1px solid #ddd;
     padding: 12px;
     background-color: #fff;
     display: inline-block;

     /*
    -webkit-animation-name: ram_move_out;
    animation-name: ram_move_out;
    animation-duration: 0.3s;
*/
 }

 .vypis_ram:hover {
     transition: all .2s ease;
     box-shadow: 0px 0px 16px 0px #ddd;
     border: 1px solid #fff;
 }







 .vypis_ram:hover>.vypis_ram_sklad {
     visibility: visible;
     z-index: 16;
 }

 .vypis_ram_sklad {
     position: absolute;
     width: 276px;
     margin-left: -14px;
     margin-top: -20px;
     background-color: #fff;
     display: block;
     padding: 20px;
     z-index: -2;
     visibility: hidden;

     -webkit-box-shadow: 0px 0px 6px 0px #ccc;
     box-shadow: 0px 0px 6px 0px #ccc;

     /*    opacity: 0.9;
        min-height: 25px;
*/

     border-radius: 0px 0px 8px 8px;
 }


 .vypis_ram_sklad::after {
     content: "";
     position: absolute;
     box-shadow: #ddd 2px 2px 2px;
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     bottom: -10px;
     left: 30px;
     border-width: 10px;
     border-style: solid;
     border-color: transparent #FFF #FFF;
 }



 .homepage_ram {
     border: 1px solid #a3a2a2
 }

 .ramecek:link {
     background-color: #ffffff;
     width: 165;
 }

 .ramecek:hover {
     background-color: #eeeeee;
     width: 165;
 }

 .mapa {
     background-color: #eeeef5;
     border: 1px solid #003366;
     font-size: 12px;
     color: #003366;
 }

 .www_subnadpis {
     font-size: 12px;
     color: #9e0b0e;
 }

 .hlavni_menu_1 {
     font-size: 12px;
     color: #808080;
     font: bold;
 }

 .hlavni_menu_2 {
     font-size: 12px;
     color: #808080;
 }

 .detail_nadpis {
     font-size: 13px;
     color: #d45c21;
 }

 .detail_uvod {
     font-size: 12px;
     color: #003366;
 }

 .detail_nazev_polozky {
     font-size: 12px;
     color: #ffffff;
 }

 .detail_zarazeni {
     font-size: 12px;
     color: #808080;
 }

 a.vypis:link {
     font-size: 13px;
     color: #d45c21;
     text-decoration: none;
 }

 a.vypis:visited {
     font-size: 13px;
     color: #d45c21;
     text-decoration: none;
 }

 a.vypis:hover {
     'Open Sans';
     font-size: 13px;
     color: #003366;
 }

 .www_subnadpis {
     font-size: 12px;
     color: #9e0b0e;
 }

 .www_detail_nadpis {
     font-size: 13px;
     color: #d45c21;
 }

 .www_detail_nadpis_2 {
     font-size: 13px;
     color: #003366;
 }

 .www_detail_popis {
     font-size: 12px;
     color: #003366;
 }

 .admin_pismo {
     font-size: 12px;
     color: #003366;
 }

 .admin_nadpis {
     font-size: 13px;
     color: #d45c21;
 }

 .banner_popis {
     font-size: 12px;
     color: #808080;
 }

 .objednavka_formular_1 {
     background-color: #eeeef5;
     border: 1px solid #003366;
     font-size: 12px;
     color: #003366;
     width: 90px;
 }

 .objednavka_formular_2 {
     background-color: #eeeef5;
     border: 1px solid #003366;
     font-size: 12px;
     color: #003366;
     width: 60px;
 }

 .objednavka_pismo {
     font-size: 12px;
     color: #003366;
 }

 .odeslani_pismo {
     font-size: 13px;
     color: #003366;
 }

 .odeslani_znamemu {
     font-size: 12px;
     color: #808080;
 }

 .odeslani_znamemu_1 {
     font-size: 12px;
     color: #003366;
 }

 .LightLine {
     background-color: #FFFFFF;
 }

 .DarkLine {
     background-color: #EEEEF5;
 }

 .DarkLine2 {
     background-color: #EBF3F8;
 }

 .letenky_nadpis {
     font-size: 13px;
     color: #003366;
 }

 .letenky_pismo {
     font-size: 12px;
     color: #003366;
 }

 .administrace_formular {
     background-color: #fbc489;
     border: 1px solid #003366;
     font-size: 12px;
     color: #003366;
 }

 .administrace_pismo {
     font-size: 12px;
     color: #003366;
 }

 .vyhledavani_cislo {
     font-size: 13px;
     color: #d45c21;
 }

 .vyhledavani_nadpis {
     font-size: 12px;
     color: #003366;
 }

 .vyhledavani_nenalezeno {
     font-size: 13px;
     color: #003366;
 }

 .vyhledavani_poznamka {
     font-size: 12px;
     color: #808080;
 }

 .prezentace_mini {
     font-size: 12px;
     color: #008eb6;
 }

 .prezentace_zakladni {
     font-size: 12px;
     color: #003366;
 }

 .prezentace_rozsirena {
     font-size: 12px;
     color: #d45c21;
 }

 .prezentace_mimoradna {
     font-size: 12px;
     color: #9e0b0e;
 }

 a.prezentace_mini_link:link {
     font-size: 12px;
     color: #008eb6;
     text-decoration: none;
 }

 a.prezentace_mini_link:visited {
     font-size: 12px;
     color: #008eb6;
     text-decoration: none;
 }

 a.prezentace_mini_link:hover {
     ,
     'Open Sans';
     font-size: 12px;
     color: #008eb6;
     text-decoration: underline;
 }

 a.prezentace_zakladni_link:link {
     font-size: 12px;
     color: #003366;
     text-decoration: none;
 }

 a.prezentace_zakladni_link:visited {
     font-size: 12px;
     color: #003366;
     text-decoration: none;
 }

 a.prezentace_zakladni_link:hover {
     ,
     'Open Sans';
     font-size: 12px;
     color: #003366;
     text-decoration: underline;
 }

 a.prezentace_rozsirena_link:link {
     font-size: 12px;
     color: #d45c21;
     text-decoration: none;
 }

 a.prezentace_rozsirena_link:visited {
     font-size: 12px;
     color: #d45c21;
     text-decoration: none;
 }

 a.prezentace_rozsirena_link:hover {
     ,
     'Open Sans';
     font-size: 12px;
     color: #d45c21;
     text-decoration: underline;
 }

 a.prezentace_mimoradna_link:link {
     font-size: 12px;
     color: #9e0b0e;
     text-decoration: none;
 }

 a.prezentace_mimoradna_link:visited {
     font-size: 12px;
     color: #9e0b0e;
     text-decoration: none;
 }

 a.prezentace_mimoradna_link:hover {
     ,
     'Open Sans';
     font-size: 12px;
     color: #9e0b0e;
     text-decoration: underline;
 }

 .formular_prezentace {
     background-color: #eeeef5;
     border: 1px solid #003366;

     font-size: 12px;
     color: #003366;
     width: 190px;
 }

 .formular_prezentace_odesilani {
     background-color: #0077BD;
     border: 1px solid #ffffff;
     font-size: 12px;
     color: #ffffff;
     font: bold;
 }


 .prave_menu {
     font-size: 12px;
     color: #ffffff;
 }

 .anketa_polozky {
     s font-size: 12px;
     color: #9E0B0E;

 }

 .nadpis {


     font-size: 14px;
     color: #d45c21;
     font: bold;
 }

 .nadpis_anketa {


     font-size: 12px;
     color: #ffffff;
     font: bold;
 }

 .nadpis_tipy {


     font-size: 14px;
     color: #9E0B0E;
     font: bold;
 }

 .odrazka {


     font-size: 12px;
     color: #003366;
 }




 .formular_vyhledavani {
     background-color: #F8EADE;
     border: 1px solid #003366;

     font-size: 12px;
     color: #003366;
     width: 150px;
 }

 .formular1 {
     background-color: #9E0B0E;
     border: 1px solid #ffffff;

     font-size: 12px;
     color: #ffffff;
     font: bold;
 }

 .formular2 {
     background-color: #eeeef5;
     border: 1px solid #003366;

     font-size: 12px;
     color: #003366;
 }


 #anketa1 {
     width: 150px;
     background-color: #ffffff;
     font-size: 12px;
     padding: 7px;
 }

 #anketa1 span {
     display: block;
 }

 #anketa1 a {
     color: #808080;
     text-decoration: none;
     font-weight: bold;
 }

 #anketa1 a:hover {
     text-decoration: none;
     color: #9E0B0E;
 }

 #anketa1 img {
     border: 0px;
     margin-top: 2px;
     margin-bottom: 6px;
 }

 #anketa1 .otazka {
     font-size: 12px;
     font-weight: bold;
     margin-bottom: 7px;
     color: black;
 }

 #anketa1 .spolu {
     margin-top: 2px;
 }

 #anketa1 .perc {
     display: inline;
 }

 /*patička*/

 .volejte_tel {
     position: absolute;
     margin-left: 0px;
     margin-top: 0px;
     width: 100%;
     height: 32px;
     color: #ffffff;
     background: linear-gradient(137deg, rgba(230, 0, 23, 1) 0%, rgba(167, 3, 20, 1) 59%);
 }

 .volejte_tel_text {
     position: absolute;
     font-family: 'Open Sans', 'Helvetica Light';
     font-size: 18px;
     color: #ffffff;
     margin-top: 5px;
     margin-left: 841px;

 }

 .paticka_gradient {
     position: absolute;
     margin-left: 0px;
     width: 100%;
     height: 208px;
     bottom: -208px;
     background: #696969;
     background: -moz-linear-gradient(45deg, #373737 0%, #9d9d9d 60%, rgb(227, 227, 227) 80%, #c5c5c5 100%);
     background: -webkit-gradient(left bottom, right top, color-stop(0%, #696969), color-stop(60%, #bcbcbc), color-stop(80%, rgba(227, 227, 227, 1)), color-stop(100%, #c5c5c5));
     background: -webkit-linear-gradient(45deg, #373737 0%, #9d9d9d 60%, rgb(227, 227, 227) 80%, #c5c5c5 100%);
     background: -o-linear-gradient(45deg, #373737 0%, #9d9d9d 60%, rgb(227, 227, 227) 80%, #c5c5c5 100%);
     background: -ms-linear-gradient(45deg, #373737 0%, #9d9d9d 60%, rgb(227, 227, 227) 80%, #c5c5c5 100%);
     background: linear-gradient(45deg, #373737 0%, #9d9d9d 60%, rgb(227, 227, 227) 80%, #c5c5c5 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#696969', endColorstr='#c5c5c5', GradientType=1);

     box-shadow: 0 0 12px 0px #888888;
 }

 .paticka_logo {
     position: absolute;
     margin-top: 100px;
     margin-right: auto;
     margin-left: auto;
     height="130";
     width="127";
 }

 .nova_paticka {
     position: absolute;
     width: 830px;
     height: 120px;
     text-align: left;
     line-height: 22px;
     margin-top: 50px;
     margin-left: 135px;

     font-size: 14px;
 }

 .nova_paticka a:link {
     font-size: 13px;
     color: #fff;
 }

 .nova_paticka a:visited {
     font-size: 13px;
     color: #ededed;
 }

 .nova_paticka a:active {
     font-size: 13px;
     color: #BC0518;
 }

 .nova_paticka a:hover {
     font-size: 13px;
     color: #fff;
     border-bottom: 1px dotted #BC0518;
     text-decoration: none;
 }

 .nova_paticka ul {
     list-style-type: none;
     columns: 3;
     -webkit-margin-top: 1px;
     -webkit-columns: 3;
     -moz-columns: 3;
     list-style-position: inside;
 }

 .patka-linka {
     position: absolute;
     display: inline-block;
     border-color: #cccccc;
     border-width: 1px;
     border-style: none none none dotted;
     width: 10px;
     height: 114px;
     margin-top: 62px;
 }


 .web_pageup {
     font-size: 48px;
     position: absolute;
     right: 40px;
     bottom: 20px;
     display: block;
 }

 .web_pageup a {
     color: #ddd;
 }

 .web_pageup a:hover {
     color: #aaa;
     transition: 0.3s;
 }



 .qr_kod {
     position: absolute;
     margin-top: 85px;
     right: 30px;
     opacity: .8;
     width: 100px;
     height: 100px;
 }


 .qr_kod2 {
     position: absolute;
     bottom: 40px;
     right: 43px;
     color: #666;
 }

 .qr_kod2 span {
     font-size: 10px;
     text-transform: uppercase;
 }

 .qr_kod2 img {
     opacity: .5;
     width: 150px;
     height: 150px;
     padding-top: 5px;
 }

 .patka_social_linky {
     mix-blend-mode: multiply;
     position: absolute;
     display: inline-flex;
     width: 300px;
     bottom: 30px;
     right: 100px;
 }

 .patka_social_linky a {
     padding: 5px;
 }

 .patka_social_linky img {
     width: 50px;
     height: auto;
 }

 .patka_linky {
     position: absolute;
     top: 50px;
     left: 260px;
     line-height: 2;
     color: #222;
     width: 300px;
 }

 .patka_linky a:hover {
     text-decoration: underline dotted;
 }

 .patka_kontakt {
     position: absolute;
     right: 400px;
     top: 50px;
     line-height: 2;
     color: #222;
     width: 300px;
 }

 .patka_kontakt_telefon {
     font-size: 26px;
     color: #333;
     font-weight: 500;
 }

 .patka_kontakt_prevadzka {
     text-transform: uppercase;
     font-size: 12px;
     color: #BC0518;
 }


 .patka_fotka {
     right: 40px;
     position: absolute;
     top: 50px;
 }

 .patka_fotka img {
     width: 350px;
     height: auto;
     right: 30px;
     filter: saturate(0.2);
 }


 .patka_fotka img:hover {
     filter: saturate(1);
 }

 .patka_copyright {
     position: absolute;
     bottom: 50px;
     right: 400px;
     font-size: 12px;
     width: 300px;
     color: #666;
 }


 .paticka_gradient_nova {
     position: absolute;
     margin-left: 0px;
     width: 100%;
     height: 600px;
     bottom: -600px;
     background-color: #eee;

     box-shadow: 0 0 12px 0px #bbb;
     margin-top: 0px;
     clip-path: inset(0px -12px -12px -12px);
 }

 .logo_pd_spodni {
     position: absolute;
     z-index: 10;
     width: 250px;
     height: 160px;
     overflow: hidden;
     bottom: 00px;
     left: 35px;
     padding: 20px;

 }

 .logo_pd_spodni img {
     transform: rotate(-3deg);
     left: 40px;
     width: 200px;
     height: auto;
     bottom: -100px;
     box-shadow: 13px 0px 20px 0px #ddd;
 }



 /*inspirativni menu*/

 .obalka_pozice {
     position: absolute;
     top: 0px;
     z-index: 8;
 }

 .obalka {
     overflow: hidden;
     width: 223px;
     margin-left: -3px;
 }

 #obalka_menu {
     float: left;
     color: #BC0518;
     text-align: left;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 18px;
     width: 220px;
     background-color: #f9f9f9;
     /*  border: 2px solid #ccc;*/
     border-style: none none solid none;

     /*  text-shadow: 2px 2px 2px #000;*/
 }

 #obalka_menu:hover {
     box-shadow: 0px 0px 20px 5px #ccc;
     background-color: #fff;
     transition: 0.3s;
 }



 .subnav {
     float: left;
     overflow: hidden;
     width: 100%;
     border-bottom: 1px dotted #bbb;
 }


 .subnav .subnavbtn {
     font-size: 14px;
     border: none;
     outline: none;
     color: #666;
     padding: 10px 20px;
     background-color: inherit;
     font-weight: bold;
     margin: 0;
     width: 220px;
     text-align: left;
 }


 .navbar {
     overflow: hidden;
     background-color: #f9f9f9;
     display: none;
     width: 225px;
 }


 .subnav:hover {
     background-color: #cc0000;
     border-bottom: 1px dotted #cc0000;
     /* box-shadow: 0px 0px 7px #777; */
     box-shadow: 0px 0px 10px 3px #ccc;

     /*  text-decoration: underline;*/

 }

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

 .subnav a:hover {
     background-color: #cc0000;
 }


 .subnav:hover .subnav-content {
     display: block;
     visibility: visible;

     /* box-shadow: 3px 4px 16px 0px #bbb; */
     /*  transition: 0.5s;*/

 }

 .obalka:hover .navbar {
     display: block;
     transition: 0.2s;
 }

 .subnav-content {
     display: block;
     position: absolute;
     margin-left: 225px;
     top: 30px;
     background-color: white;
     /* border: 1px solid #ccc; */
     width: 980px;
     min-height: 700px;
     z-index: 9;
     box-shadow: 3px 4px 20px 0px #ccc;
     padding: 15px 3px 15px 25px;
     visibility: hidden;

     /*  transition-delay: 1s;*/
 }

 /*  .subnav-content a {
     float: left;
     color: #333;
     font-size: 16px;
     padding: 20px 20px;
     background-color: #fff;
 }
 */
 .subnav-content span {
     float: left;
     color: #333;
     font-size: 16px;
     padding: 20px 20px;
     background-color: #fff;
 }

 .subnav-content a:hover {
     text-decoration: none;
     background-color: #fff;
     color: #BC0518;


 }

 #sipka {
     position: absolute;
     margin-left: -35px;
     margin-top: 7px;
     opacity: 0;
     color: lightcoral;
     font-size: 25px;
 }

 .subnav:hover #sipka {
     opacity: 10;
     transition: 0.4s;
     margin-left: -15px;
 }

 .obalka:hover #sipka2 {
     color: white;
     transition: 0.4s;
 }

 .container_podkat {
     display: inline-flex;
     width: 300px;
     padding: 15px 10px;
 }

 .container_podkat:hover {
     box-shadow: 0px 0px 16px 0px #ddd;
     background: #fff;
     border-radius: 5px;
     transition: 0.3s ease;
 }

 .container_podkat:hover span {
     color: #BC0518;
 }



 #inspirace_img {
     width: 90px;
     height: 90px;

 }

 .sticky {
     position: fixed;
     top: 0;
     box-shadow: 0 0 10px 3px #aaa;
     z-index: 24;
 }



 /* Loading state pro menu */
 .navbar[data-menu-loaded="false"] {
     min-height: 50px;
 }

 .menu-loading {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #999;
 }

 /* Plynulý přechod při načtení */
 .navbar {
     transition: opacity 0.3s ease;
 }

 .navbar[data-menu-loaded="false"] {
     opacity: 0.7;
 }

 .navbar[data-menu-loaded="true"] {
     opacity: 1;
 }











 /*horní dropdown menu*/
 /* { margin: 0; padding: 0; } */

 .dropdown_position {
     position: absolute;
     z-index: 9;
     top: 196px;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
 }

 ul {
     list-style: none;
 }

 /* LEVEL ONE */

 ul.dropdown,
 ul.dropdown ul {
     margin: 0;
     padding: 0;
 }

 ul.dropdown {
     position: relative;
     font-size: 14px;
 }

 ul.dropdown li {
     font-weight: bold;
     float: left;
     zoom: 1;
     font-size: 14px;
     text-decoration: none
 }

 ul.dropdown a:hover {
     color: #000;
     text-decoration: none;
 }

 ul.dropdown a:active {
     color: #000;
     text-decoration: none;
 }

 ul.dropdown li a {
     display: block;
     padding: 4px 8px;
     color: #bc0518;
     text-decoration: none;
     border-bottom: 1px dotted #fff;
 }

 ul.dropdown li.hover,
 ul.dropdown li:hover {
     color: black;
     position: relative;
 }

 ul.dropdown ul li.hover,
 ul.dropdown ul li:hover {
     color: black;
 }

 ul.dropdown ul li a {
     color: #333
 }

 ul.dropdown ul li.hover a {
     color: #bc0518;
     text-decoration: none;
     border-bottom: 1px dotted #555;
 }

 /* LEVEL TWO */
 ul.dropdown ul li {
     font-weight: normal;
     background: #ffffff;
     color: #000;
     float: none;
     padding: 4px
 }

 ul.dropdown ul {
     width: 240px;
     visibility: hidden;
     position: absolute;
     top: 32px;
     left: 0;
     border: 0px;
     border-top: 1px;
     border-top-color: #fff;
     margin-top: -1px;
     cursor: pointer;

     box-shadow: 0px 3px 16px #ddd;
     padding-top: 0px;
     padding: 12px;
     background: #fff;

 }

 ul.dropdown ul li a {
     border-right: none;
     width: 100%;
     display: inline-block;
 }

 .oddelovac {
     padding: 3px 2px;
 }

 .menu-nadpis {
     padding-bottom: 5px;
 }




 .horni_logo {
     position: relative;
     display: block;
     width: 100%;
     height: 210px;
     background-color: #fff
 }

 .horni_logo_promo {
     position: absolute;
     transform: rotate(-3deg);
     top: -23px;
     left: 40px;
     z-index: 10;
 }

 .horni_logo_stin {
     position: absolute;
     display: block;
     box-shadow: 0px 0px 20px 10px #ccc;
     width: 225px;
     height: 190px;
     mix-blend-mode: multiply;
     background-color: #fff;
     transform: rotate(-6deg);
     left: 49px;
     top: -28px;
 }

 .horni_logo_promo img {
     /*    box-shadow: 0 0 12px 0px #888;*/
     width: 240px;
     height: auto;
 }



 .logo_a {
     position: absolute;
     display: block;
     width: 300px;
     height: 170px;
     cursor: pointer;
     z-index: 11;
 }

 .logo_a span {
     visibility: hidden;
 }

 .horni_logo_pruh1 {
     position: absolute;
     display: block;
     width: 100%;
     height: 40px;
     background: linear-gradient(137deg, rgba(230, 0, 23, 1) 0%, rgba(167, 3, 20, 1) 59%);
     top: 0px;
 }

 .horni_logo_pruh2 {
     position: absolute;
     display: block;
     width: 100%;
     height: 80px;
     background-color: #eee;
     top: 40px;
     box-shadow: 0px 0px 10px 0px #999;
     clip-path: inset(-10px 0px -10px 0px);
     mix-blend-mode: multiply;
 }

 .horni_logo_pruh3 {
     position: absolute;
     display: block;
     width: 100%;
     height: 10px;
     background-color: #fff;
     bottom: -10px;
     left: 0px;
     box-shadow: 0px 0px 10px 0px #ccc;
     mix-blend-mode: multiply;
     clip-path: inset(-15px 10px 10px 0px);
     border-radius: 50%;
 }

 .horni_logo_titulek {
     position: absolute;
     font-family: 'Open Sans';
     font-size: 40px;
     right: 20px;
     top: 40px;
     color: #666;
 }

 h1.horni_logo_titulek {
     display: inline;
     margin: 0;
     padding: 0;
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
     position: absolute;
     font-family: 'Open Sans';
     font-size: 40px;
     right: 20px;
     top: 40px;
     color: #666;
 }


 /*
.logo h1 {
 //   background: url(https://www.promodirect.cz/images/uvodni_logo_cs1250.jpg) no-repeat 0 0; 
    display:block;
    width: 1250px; 
    height: 207px; 
	margin: 0;
	padding: 0;
}
  
.logo h1 a {
    display:block;
    width: 300px; 
    height: 170px; 
    cursor: pointer;
}

.logo h1 a span {
    display:none;
}

.logo h2 {
    display:none;
}


.logo_en h1 {
    background: url(https://www.promodirect.cz/images/uvod_logo_en2.jpg) no-repeat 0 0; 
    display:block;
    width: 1050px; 
    height: 207px; 
	margin: 0;
	padding: 0;
}
  
.logo_en h1 a {
    display:block;
    width: 300px; 
    height: 170px; 
}

.logo_en h1 a span {
    display:none;
}

.logo_en h2 {
    display:none;
}


.logo_de h1 {
    background: url(https://www.promodirect.cz/images/uvod_logo_de2.jpg) no-repeat 0 0; 
    display:block;
    width: 1050px; 
    height: 207px; 
	margin: 0;
	padding: 0;
}
  
.logo_de h1 a {
    display:block;
    width: 300px; 
    height: 170px; 
}

.logo_de h1 a span {
    display:none;
}

.logo_de h2 {
    display:none;
}


.logo_sk h1 {
    background: url(https://www.promodirect.cz/images/uvod_logo_sk.jpg) no-repeat 0 0; 
    display:block;
    width: 1050px; 
    height: 207px; 
	margin: 0;
	padding: 0;
}
  
.logo_sk h1 a {
    display:block;
    width: 300px; 
    height: 170px; 
}

.logo_sk h1 a span {
    display:none;
}

.logo_sk h2 {
    display:none;
}
*/


 .katalog_rozcestnik {
     display: block;
     width: 750px;
     height: 930px;
     padding: 30px;
 }


 .katalog_rozcestnik a {
     float: left;
     padding: 9px;

 }

 .katalog_prehled_text {
     text-align: justify;
     margin-left: 50px;
     width: 650px;

 }





 .search-box {
     width: 590px;
     position: relative;
     display: inline-block;
     font-size: 14px;

 }

 .search-box input[type="text"] {
     height: 32px;
     padding: 5px 10px;
     border: 1px solid #CCC;
     font-size: 14px;
 }

 .result {
     position: absolute;
     z-index: 20;
     top: 100%;
     left: 0;

     border: 1px solid #ccc;
     border-top: none;

     background-color: #fff;
     -webkit-box-shadow: 0px 5px 10px 0px #ddd;
     box-shadow: 0px 5px 10px 0px #ddd;
     display: none;
     mix-blend-mode: multiply;


 }

 .search-box input[type="text"],
 .result {
     width: 100%;
     box-sizing: border-box;
 }

 .result p {
     margin: 0;
     padding: 7px 13px 7px 13px;
     /*        cursor: pointer;*/

 }

 .result p:hover {
     /*        background: #f2f2f2;  */
     background: #fff;
 }

 #spinner_search {
     animation-play-state: paused;

 }

 /*
    .result p:hover img {
    display:block;
    box-shadow: 0 0 10px 3px #cccccc;
    margin-left: 300px;
    margin-top: 0px;
    transition: opacity 1s ease-out;
    z-index: 25;
    
} 
 
     .result img {
      width:200px;
      height:200px;
      position:absolute;
      display:none;
      z-index:1;
      padding: 5px;
      background-color: #fff;
 }
 
 
*/



 .hidden {
     position: absolute;
     visibility: hidden;
 }




 .hp_bannery_popisky {
     /*    -moz-osx-font-smoothing: auto;*/
     position: absolute;
     font-weight: 800;
     right: 45px;
     margin-top: 310px;
     font-size: 25px;
     text-align: right;
     color: #333;
     -webkit-text-shadow: 3px 3px 4px #444;
     text-shadow: 3px 2px 4px #444;
 }

 .hp_bannery_titulek {
     /*    -moz-osx-font-smoothing: auto;*/
     position: absolute;
     font-weight: 200;
     right: 45px;
     margin-top: 260px;
     font-size: 40px;
     text-align: right;
     color: red;
     -webkit-text-shadow: 3px 3px 4px #444;
     text-shadow: 3px 2px 4px #444;
 }

 .hp_bannery_popisky_vlevo {
     /*    -moz-osx-font-smoothing: auto;*/
     /*
    position: absolute;
    font-weight: 800;
    margin-left: 30px;
    margin-top: 310px;
    font-size: 25px;
    text-align: left;
    color: #333;
    -webkit-text-shadow: 3px 3px 4px #444;
    text-shadow: 3px 2px 4px #444;
*/
 }

 .hp_bannery_titulek_vlevo {
     /*    -moz-osx-font-smoothing: auto;*/
     /*
    position: absolute;
    font-weight: 200;
    margin-left: 30px;
    margin-top: 260px;
    font-size: 40px;
    text-align: left;
    color: red;
    -webkit-text-shadow: 3px 3px 4px #444;
    text-shadow: 3px 2px 4px #444;
*/
 }

 .insta_images {
     width: 250px;
     height: 250px;
     padding: 25px;
 }


 .insta_images:hover {
     transition: all .2s ease;
     -webkit-box-shadow: 0px 0px 10px 0px #aaa;
     box-shadow: 0px 0px 10px 0px #aaa;
 }


 .pro_mobil_verze {
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
     height: 200px;
     font-size: 80px;
     padding: 16px;
     background-color: #333;
     bottom: -220px;
     text-align: center;
     color: #fff
 }


 .pro_mobil_verze button {
     background-color: #333;
     font-size: 60px;
     border: 0px;
     padding: 10px;
     color: #ddd;

 }


 .menu980 {
     position: relative;
     padding: 10px;
     width: calc(100% - 40px);
 }



 .search-box {
     width: 590px;
     position: relative;
     display: inline-block;
     font-size: 14px;

 }

 .search-box input[type="text"] {
     height: 32px;
     padding: 5px 10px;
     border: 1px solid #CCC;
     font-size: 14px;
 }

 .result {
     position: absolute;
     z-index: 20;
     top: 100%;
     left: 0;

     border: 1px solid #ccc;
     border-top: none;

     background-color: #fff;
     -webkit-box-shadow: 0px 15px 25px 10px #eee;
     box-shadow: 0px 15px 25px 10px #eee;
     display: none;

 }

 .search-box input[type="text"],
 .result {
     width: 100%;
     box-sizing: border-box;
 }

 .result p {
     margin: 0;
     padding: 7px 13px 7px 13px;
     /*        cursor: pointer;*/

 }

 .result p:hover {
     background: #f2f2f2;
 }



 .result p:hover img {
     display: block;
     box-shadow: 0 0 10px 3px #cccccc;
     margin-left: 300px;
     margin-top: 0px;
     transition: opacity 1s ease-out;
     z-index: 25;

 }

 .result img {
     width: 200px;
     height: 200px;
     position: absolute;
     display: none;
     z-index: 1;

 }




 .seo_texty {
     position: relative;
     padding: 10px;
     width: 80%;
     text-align: left;
     line-height: 1.4;
 }



 .paticka_mobil {
     display: none;
 }



 .zobrazeni_mobil {
     display: none;
 }

 .zobrazeni_desktop {
     display: unset;
 }

 .menu_barevnik {
     display: flex;
     position: relative;
     padding-bottom: 10px;
     top: -42px;
 }


 .menu_razeni {
     display: block;
     padding-bottom: 20px;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
 }


 @media(max-width:1599px) {

     .menu_razeni {
         flex-direction: column;
         align-items: flex-start;
     }

     .menu_razeni2 {
         position: absolute;
         padding-top: 17px;
         right: 0px;
     }

 }





 .menu_razeni2 {
     position: absolute;
     right: 10px;
 }

 .gender_selectory {
     position: absolute;
     right: 10px;
 }


 .paginace {
     position: relative;
     text-align: right;
     padding-right: 20px;

 }


 .poptavka_img_pozice {
     position: absolute;
     top: 450px;
     right: -220px;
     width: 450px;
     clip: rect(0px, 330px, 600px, 0px);
 }



 .url_padding {
     padding-left: 160px;
 }


 .fotka_hlubocinka {
     position: relative;
     width: 1250px;
     height: 763px;
     left: -100px;

 }

 .fotka_reference {
     border-width: 0px;
     border-style: solid;
     width: 500px;
     height: 620px
 }

 .reference_zalomeni {
     position: relative;
     right: 0px;
     float: right;
     margin-left: 40px;
     margin-bottom: 80px;
 }

 .login_ramec {
     width: 900px;
     margin-left: 75px;
 }

 .url_wide {
     width: 900px;
     margin-left: 75px;
 }



 .login_ramec_30 {
     padding: 30px;
 }

 .login_ramec_450 {
     width: 450px;
     text-align: right;
 }

 .registrace_image {
     position: absolute;
     right: 0px;
     width: 120px;
     height: 120px;
 }

 .user_ramec {
     width: 1100px;
     margin-left: 75px
 }

 .user_padding_30 {
     padding: 30px;
     line-height: 1.4;
 }

 .user_img {
     position: absolute;
     right: 0px;
     width: 120px;
     height: 120px;
 }







 .user_info {
     position: absolute;
     left: 260px;
     font-weight: bold;
     text-align: left;
 }

 .index_250 {
     margin-left: 250px
 }

 .index_750 {
     width: 750px;
     height: 320px;
     padding: 10px;
     margin-top: 10px;
     left: 10px;
     position: relative;
 }

 .index_700 {
     width: 700px;
 }

 .index_ikonka1 {
     position: absolute;
     right: -7px;
     margin-top: 48px;
     width: 250px;
     height: 54px;
 }

 .index_ikonka2 {
     position: absolute;
     right: -7px;
     margin-top: 110px;
     width: 250px;
     height: 49px;
 }
.katalog_prehled_34 {
    font-family: 'Kalam';
    font-size: 34px;
    font-weight: 700;
}

.kalam-titulek {
    font-size: 30px;
    margin-left: 10px;
    font-family: 'Kalam';
    color: #aaa;
    font-weight: 700;
}

.insta_titulek {
    margin-left: 220px;
    font-family: 'Kalam';
    font-size: 35px;
    color: #BC0518;
    font-weight: 700;
}


.input_kosik_desktop {
     text-align: right;
     width: 50px;
     padding: 9px 10px 7px;
     font-size: 13px;
     font-weight: 800;
     margin-right: 5px;
 }

 /* KOMPLETNÍ CSS PRO LIVE SEARCH */

 /* Základní styly pro search box */
 .search-box {
     position: relative;
     width: 590px;
     max-width: 100%;
 }

 /* Vysoká specifičnost pro input field aby překryl jiné CSS */
 .search-box input[type="text"]#live_search,
 .search-box input#live_search,
 input#live_search {
     width: 590px;
     padding: 9px 15px;
     border: 1px solid #ddd;
     border-radius: 6px;
     font-size: 16px;
     outline: none;
     box-sizing: border-box;
     background-color: white;
     color: #333;
     user-select: text;
     -webkit-user-select: text;
     -moz-user-select: text;
     pointer-events: auto;
     cursor: text;
     top: -4px;
     position: relative;
 }

 /* Kontejner pro výsledky - Firefox kompatibilní + smooth scrolling */
 .result {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: white;
     border: 1px solid #ddd;
     border-top: none;
     border-radius: 0 0 4px 4px;
     max-height: 70vh;
     overflow-y: auto;
     z-index: 1000;
     box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);

     /* Plynulé scrollování */
     scroll-behavior: smooth;

     /* Webkit scrollbar styling */
     scrollbar-width: thin;
     scrollbar-color: #ccc #f9f9f9;
 }

 /* Custom scrollbar pro Webkit prohlížeče */
 .result::-webkit-scrollbar {
     width: 8px;
 }

 .result::-webkit-scrollbar-track {
     background: #f9f9f9;
     border-radius: 4px;
 }

 .result::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
     transition: background 0.2s ease;
 }

 .result::-webkit-scrollbar-thumb:hover {
     background: #999;
 }

 /* Responzivní výšky pro různé velikosti obrazovky */
 @media (min-height: 900px) {
     .result {
         max-height: 600px;
     }
 }

 @media (min-height: 700px) and (max-height: 899px) {
     .result {
         max-height: 500px;
     }
 }

 @media (min-height: 500px) and (max-height: 699px) {
     .result {
         max-height: 400px;
     }
 }

 @media (max-height: 499px) {
     .result {
         max-height: 300px;
     }
 }

 /* Jednotlivé položky výsledků */
 .search-item {
     padding: 10px 15px;
     cursor: pointer;
     border-bottom: 1px solid #f0f0f0;
     transition: background-color 0.15s ease;
     display: block;
     text-decoration: none;
     color: #333;
 }

 .search-item:last-child {
     border-bottom: none;
 }

 /* Hover efekt myší - ČERNÝ TEXT */
 .search-item:hover,
 #search_result .search-item:hover {
     background-color: #f8f9fa;
     color: #333;
 }

 .search-item:hover .item-title,
 .search-item:hover .item-code,
 .search-item:hover .item-description,
 .search-item:hover strong,
 .search-item:hover span,
 #search_result .search-item:hover .item-title,
 #search_result .search-item:hover .item-code,
 #search_result .search-item:hover .item-description,
 #search_result .search-item:hover strong,
 #search_result .search-item:hover span {
     color: #333;
 }

 .search-item:hover .fa,
 .search-item:hover i {
     color: #aaa;
 }

 /* Aktivní (vybraná) položka při navigaci šipkami - BÍLÝ TEXT */
 .search-item-active,
 #search_result .search-item-active {
     background-color: #007bff;
     color: white;
 }

 .search-item-active .item-title,
 .search-item-active .item-code,
 .search-item-active .item-description,
 .search-item-active strong,
 .search-item-active span,
 #search_result .search-item-active .item-title,
 #search_result .search-item-active .item-code,
 #search_result .search-item-active .item-description,
 #search_result .search-item-active strong,
 #search_result .search-item-active span {
     color: white;
 }

 .search-item-active .fa,
 .search-item-active i {
     color: #ccc;
 }

 /* Hover má vyšší prioritu než active - přepíše modrou na šedou */
 .search-item-active:hover,
 #search_result .search-item-active:hover {
     background-color: #f8f9fa;
     color: #333;
 }

 .search-item-active:hover .item-title,
 .search-item-active:hover .item-code,
 .search-item-active:hover .item-description,
 .search-item-active:hover strong,
 .search-item-active:hover span,
 #search_result .search-item-active:hover .item-title,
 #search_result .search-item-active:hover .item-code,
 #search_result .search-item-active:hover .item-description,
 #search_result .search-item-active:hover strong,
 #search_result .search-item-active:hover span {
     color: #333;
 }

 /* Styling pro text v položkách */
 .search-item .item-title {
     font-weight: 600;
     margin-bottom: 3px;
     line-height: 1.3;
 }

 .search-item .item-description {
     font-size: 14px;
     color: #666;
     margin-bottom: 2px;
 }

 .search-item .item-code {
     font-size: 13px;
     color: #888;
     font-weight: 500;
 }

 /* Styling pro obrázky v produktech - FORCE DISPLAY BLOCK BEZ RÁMEČKŮ */
 .search-item img,
 #search_result .search-item img,
 .search-item .zobrazeni_desktop img,
 #search_result .search-item .zobrazeni_desktop img {
     display: block;
     visibility: visible;
     opacity: 1;
     border: none;
     border-radius: 4px;
     box-shadow: none;
     background-color: white;
     width: 55px;
     height: 55px;
     object-fit: cover;
     margin: 0;
     padding: 0;
     float: none;
     position: relative;
     z-index: 2;
 }

 /* Layout pro produkty s obrázky - FORCE DISPLAY BEZ RÁMEČKŮ */
 .search-item .product-layout {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .search-item .product-image,
 #search_result .search-item .product-image,
 .search-item .zobrazeni_desktop,
 #search_result .search-item .zobrazeni_desktop {
     display: flex;
     visibility: visible;
     opacity: 1;
     flex-shrink: 0;
     width: 60px;
     height: 60px;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     border-radius: 4px;
     border: none;
     position: relative;
     margin: 0;
     padding: 0;
     overflow: hidden;
 }

 .search-item .product-content {
     flex: 1;
     min-width: 0;
 }

 /* Spinner pro loading */
 #spinner_search {
     position: absolute;
     right: 20px;
     top: 1px;
     transform: translateY(-50%);
     visibility: hidden;
     font-size: 22px;
     color: #bbb;
     margin-left: -33px;
     position: absolute;
     margin-top: 3px;
 }



 /* Dodatečné CSS pro řešení konfliktů s frameworky */
 .hledani_katalog_hp .search-box {
     width: 500px;
     max-width: 100%;
     position: relative;
 }

 .hledani_katalog_hp .search-box input#live_search {
     width: 500px;
     max-width: 500px;
     min-width: 500px;
     padding: 12px 15px;
     border: 1px solid #ddd;
     border-radius: 6px;
     font-size: 16px;
     outline: none;
     box-sizing: border-box;
     background-color: white;
     color: #333;
     font-family: inherit;
     line-height: normal;
     margin: 0;
 }

 .hledani_katalog_hp {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .search-box .result {
     width: 100%;
     min-width: 500px;
 }



 /* Mobilní responsivní přepis */
 @media (max-width: 600px) {
     .hledani_katalog_hp .search-box {
         width: 100%;
     }

     .hledani_katalog_hp .search-box input#live_search {
         width: 100%;
         max-width: 100%;
         min-width: 100%;
     }

     .search-box .result {
         min-width: 100%;
     }
 }

 /* Loading indikace */
 .search-item.loading-item {
     background-color: #f8f9fa !important;
     border-bottom: 1px solid #e9ecef;
 }

 .search-item.loading-item:hover {
     background-color: #f8f9fa !important;
 }

 .search-item.no-results {
     background-color: #fff3cd !important;
     border-left: 4px solid #ffc107;
 }

 .search-item.error-item {
     background-color: #f8d7da !important;
     border-left: 4px solid #d32f2f;
 }

 /* Spinner animace */
 .fa-spin {
     animation: spin 1s infinite linear;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }


 .layout {
     width: 100%;
     height: auto;

 }



 .layout_div {
     width: 340px;
     display: inline-block;
     padding-bottom: 60px;
 }

 .layout_button {
     font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
     color: #FFF;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
     cursor: pointer;
     display: inline-block;
     background: #666;
     margin: 0 10px 0 0;
     padding: 10px 16px;
 }

 .layout_h4 {
     font-family: 'Arial', sans-serif;
     color: #333;
     font-weight: 500;
     font-size: 23px;
     margin: 0 0 15px;
     padding: 0;
 }

 .layout_grey {
     color: #A9A9A9;
 }

 .layout_titulek {

     font-size: 30px;
     font-family: 'Kalam';
     color: #aaa;
     font-weight: 700;

 }

 .layout_ram_stin img:hover {
     transition: all .2s ease;
     -webkit-box-shadow: 0px 0px 15px 0px #aaa;
     box-shadow: 0px 0px 15px 0px #aaa;
 }

 .kontakt_text {

     font-size: 16px;
     line-height: 1.5;


 }


 .kalkulace-loading {
     display: inline-block;
     margin-left: 10px;
     color: #BC0518;
 }

 #shadow_detail_pocitani_id {
     transition: all 0.3s ease;
 }

 .input_8_form:focus {
     outline: 2px solid #BC0518;
     outline-offset: 2px;
 }












 /*--- products benefits -----------------------------------------------------------------------------------------------------------------------------*/



 .product-benefits {
     width: 90%;
     margin: 0px auto;
     padding: 0 20px;
     font-family: 'Open Sans', sans-serif;
     transform: translateX(-20px);
 }

 .benefits-wrapper {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 20px;
     flex-wrap: wrap;
 }

 .benefit {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     flex: 1;
     min-width: 130px;
 }

 .benefit i {
     font-size: 60px;
     color: #ddd;
     margin-bottom: 12px;
     transition: color 0.3s ease;
 }

 .benefit:hover i {
     /*            color: #333;*/
 }

 .benefit-title {
     font-size: 15px;
     font-weight: 600;
     color: #333;
     margin: 0 0 4px 0;
 }

 .benefit-desc {
     font-size: 13px;
     color: #666;
     margin: 0;
 }

 /* Tablet */
 @media (max-width: 1024px) {
     .benefit {
         flex: 0 0 calc(33.333% - 20px);
     }
 }

 /* Mobile */
 @media (max-width: 640px) {
     .product-benefits {
         width: 100%;
         transform: unset;
         padding: 0px;
     }

     .benefits-wrapper {
         gap: 20px 10px;
         justify-content: unset;
     }

     .benefit {
         flex: 0 0 calc(50% - 10px);
         min-width: auto;
     }

     .benefit i {
         font-size: 32px;
         margin-bottom: 8px;
     }

     .benefit-title {
         font-size: 14px;
     }

     .benefit-desc {
         font-size: 12px;
     }

     .benefit-title {
         color: #555;
         margin: 0px;
     }



 }




 /*--- nová forma cenové tabulky -----------------------------------------------------------------------------------------------------------------------------*/

 #cenik_box {
     display: none;
 }

 #cenik_box_mobile {
     display: none;
 }

 #cenik_box_mobile.fade-in {
     animation: fadeIn 0.5s ease-in forwards;
 }


 /* Styly pro klikací řádky */
 .price-toggle-trigger {
     cursor: pointer;
     padding: 10px;
     background: #f5f5f5;
     border-radius: 5px;
     transition: background 0.2s;
 }

 .price-toggle-trigger:hover {
     background: #e8e8e8;
 }

 .price-toggle-line {
     display: flex;
     align-items: center;
     margin: 5px 0;
     gap: 10px;
 }

 .price-toggle-label {
     font-size: 18px;
     color: #ff0000;
     font-weight: bold;
 }

 .price-toggle-value {
     font-size: 16px;
     color: #333;
 }


 .ceny_summary {
     transform: translate(0px, 90px);
     text-align: right;
     padding: 10px 25px;
     background: #eee;
     width: 340px;
     position: absolute;
     right: 0px;
     border-radius: 5px;
     opacity: 1;
     transition: all 0.5s ease-out;
 }

 .ceny_summary.fade-out {
     opacity: 0;
     transform: translate(20px, 90px);
 }

 .ct-value {
     font-size: 17px;
     font-weight: 800;
     padding-left: 8px;
     color: #bc0518;
 }

 .ct-label {
     font-size: 16px;
     color: #333;
 }

 .ceny_summary a,
 .ceny_summary a:hover {
     text-decoration: none;
 }

 .ceny_summary:hover {
     background: #ddd;
 }


 .newtab_shadow_detail_tabulka_cen {
     font-family: Arial, sans-serif;
     position: absolute;
     width: 900px;
     bottom: 10px;
 }

 @media (min-width: 1600px) {
     .newtab_shadow_detail_tabulka_cen {
         width: 900px;
         bottom: 5px;
     }

     .ct-value {
         font-size: 22px;
     }

     .ceny_summary {
         width: 470px;
     }
 }


 @media (min-width: 1960px) {
     .newtab_shadow_detail_tabulka_cen {
         width: 1240px;
         bottom: 5px;
     }

     .ct-value {
         font-size: 22px;
     }

     .ceny_summary {
         width: 810px;
     }
 }



 .newtab_price-table-container {
     display: grid;
     grid-template-columns: 110px repeat(8, 1fr);
     align-items: center;
     padding-bottom: 10px;
 }

 /* Horní řádek s množstvím */
 .newtab_price-header-row {
     display: contents;
 }

 .newtab_price-label {
     text-align: left;
     padding: 10px 0;
 }

 .newtab_price-quantity {
     text-align: center;
     padding: 10px 0;
     position: relative;
     border-left: 1px solid #ddd;
     font-size: 16px;
 }

 .newtab_price-quantity:first-of-type {
     border-left: none;
 }


 .newtab_price-quantity {
     border-left: 1px solid #ddd;
 }

 .newtab_price-quantity:first-of-type {
     border-left: none;
 }



 .newtab_price-divider {
     grid-column: 1 / -1;
     height: 1px;
     background-color: #ddd;
     margin: 0;
 }



 /* Dolní řádek s cenami */
 .newtab_price-values-row {
     display: contents;
 }

 .newtab_price-label-bottom {
     text-align: left;
     padding: 10px 0;
 }

 .newtab_price-value {
     text-align: center;
     padding: 10px 0;
     position: relative;
 }

 /* Vertikální čáry pro ceny */
 .newtab_price-value {
     text-align: center;
     padding: 10px 0;
     position: relative;
     border-left: 1px solid #ddd;
 }

 .newtab_price-value:first-of-type {
     border-left: none;
 }


 .newtab_popisek {
     color: #888;
     font-weight: bold;
     font-size: 16px;
 }


 .newtab_price-info {
     color: #333;
     font-size: 12px;
     text-align: left;
     bottom: 13px;
     position: relative;
 }

 @media only screen and (max-width: 768px) {

     .newtab_popisek {
         font-size: 12px;
     }

     .newtab_price-table-container {
         display: grid;
         grid-template-columns: 60px repeat(8, 1fr);
     }

     .newtab_shadow_detail_tabulka_cen {
         width: 100%;
         bottom: 5px;
         position: relative;
     }

     .newtab_popisek {
         font-size: 12px;
     }

     .newtab_price-info {
         font-size: 12px;
         padding: 10px;

     }

     .newtab_price-quantity {
         font-size: 12px;
     }

     .ceny_summary {
         width: calc(100% - 50px);
         transform: none;
         padding: 10px;
         right: unset;
         left: unset;
     }

     .ceny_summary.fade-out {
         opacity: 0;
         transform: none;
     }

     .shadow_detail_cenova_tabulka {
         height: 80px;
         padding: 10px;
     }

     .ct-label {
         font-size: 14px;
     }
 }


 /* Moderní inputy */
 .modern-input {
     width: calc(100% - 32px);
     padding: 12px 14px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     transition: all 0.3s;
     background: white;
     font-family: inherit;
 }

 .modern-input:focus {
     outline: none;
     border-color: #BC0518;
     box-shadow: 0 0 0 2px rgba(188, 5, 24, 0.1);
 }

 .modern-input:hover {
     border-color: #999;
 }

 /* Textarea */
 textarea.modern-input {
     resize: vertical;
     min-height: 120px;
 }

 /* Select */
 select.modern-input {
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M10.293.293a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5A1 1 0 0 1 1.707.293L6 4.586 10.293.293z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 16px center;
     padding-right: 40px;
 }

 /* Reset pro všechny inputy včetně selectu */
 input.modern-input,
 select.modern-input,
 textarea.modern-input {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     -webkit-border-radius: 4px;
     border-radius: 4px;
 }

 /* Pro starší verze Safari */
 select.modern-input::-ms-expand {
     display: none;
 }



 #live_search.modern-input:hover,
 #live_search.modern-input:focus {
     box-shadow: 0 0 0 2px rgba(188, 5, 24, 0.25);
 }

 .video_select {
     margin-left: 12px;
     background-color: #eee;
     padding: 20px;
     width: calc(100% - 90px);
     position: relative;
 }




 /*--- ------------------------------------------------------------------------------------------------------------------------*/
 /*--- ---------------------------------------------------------------------------------------------------------------------------*/
 /*--- ------------------------------------------------------------------------------------------------------------------------*/
 /*--- pro mobily -----------------------------------------------------------------------------------------------------------------------------*/

 @media only screen and (max-width: 768px) {


     .modern-input {
         font-size: 16px;
         /* Zabraňuje zoom na iOS */
         padding: 16px;
     }


     .margin-left-150 {
         margin-left: 0px;
         padding: 10px;
     }

     .layout {
         width: unset;
         height: auto;
         padding: 10px;
     }

     .search-box {
         width: 100%;
     }

     .search-box input[type="text"]#live_search,
     .search-box input#live_search,
     input#live_search {
         min-width: 100%;
         max-width: 100%;
     }

     #search-box {
         width: 100%;
         display: flex;
         margin-top: -10px;
     }

     #live_search.modern-input {
         all: unset;
         padding: 12px 15px;
         margin: 10px;
         border-radius: 4px;
         border: 1px solid #ccc;
         width: 100%;
         transition: all 0.5s ease;
     }

     #live_search.modern-input:hover,
     #live_search.modern-input:focus {
         border: 2px solid #BC0518;
         box-shadow: 0px 0px 7px 3px #eee;

     }


     .zobrazeni_desktop {
         display: none;
     }

     .search-item {
         padding: 8px 12px;
     }

     .search-item .item-title {
         font-size: 14px;
     }

     .search-item .item-code {
         font-size: 12px;
     }



     .new_input {
         font-size: 16px;
         /* Zabrání zoomu na iOS */
         padding: 10px 12px;
         margin-bottom: 15px;
     }


     .butony_objednat_v_detailu {
         display: flex;
         gap: 10px;
         justify-content: center;
         align-items: center;
     }


     .buton_objednat,
     .buton_objednat_input {

         font-size: 14px;
         padding: 18px 0px;
         font-weight: 600;
     }




     .zobrazeni_mobil {
         display: unset;
     }

     .zobrazeni_desktop {
         display: none;
     }



     .mobil_mensi_80 {
         transform: scale(0.8);
         margin-left: -50px;
     }




     .fa,
     .fas {
         font-family: 'FontAwesome';
         font-weight: 900;
     }


     .dropdown_position {
         display: none;
     }

     /*

   .hlavni_menu_vlevo {
   display: none;
   } 
 
*/



     .kontakt_text {
         font-size: 16px;
         line-height: 1.5;

     }

     .index_250 {
         margin-left: unset;
     }

     .index_750 {
         width: unset;
         height: auto;
         padding: 25px;
         margin-top 10px;
         left: unset;
         position: relative;

     }

     .index_700 {
         width: 100%;
     }

     .index_ikonka_mobil {
         width: 100%;
         height: auto;
         max-width: 350px;
     }



     .katalog_prehled_34 {
         font-family: 'Kalam';
         font-size: 22px;
         color: #BC0518;
         font-weight: 700;
     }


     .insta_titulek {
         margin-left: 0px;
         font-family: 'Kalam';
         font-size: 4vw;
         color: #BC0518;
         font-weight: 700;
     }


     .insta_images {
         width: 40%;
         height: auto;
         padding: 3%;
     }


     .container_kategorie {
         padding: 2px 10px 5px 3px;
         font-size: 14px;
     }


     .menu980 {
         position: relative;
         padding: 10px;
         width: calc(100% - 20px);
     }


     .penbox_banner {
         width: 100%;
         margin-left: 0px;
     }

     .logo h1 {
         /*
    position:relative;
    left: 0px;
    top: 0px;
    background: url(https://www.promodirect.cz/images/uvodni_logo_mobil.jpg) no-repeat 0 0;
    background-size: 100%;
    display:block;
 	margin: 0;
	padding: 0;
    width: 100%;
*/
     }


     .url_padding {
         padding: 10px;
     }


     .poptavka_img_pozice {
         display: none;
     }

     .menu_razeni {
         text-align: left;
         position: relative;
         display: block;
         font-size: 14px;
         /*    padding-left: 10px;*/
     }

     .menu_razeni2 {
         display: flex;
         flex-wrap: wrap;
     }



     .menu_razeni_vypis {
         padding-left: 15px;
     }


     .vyber_jazyka {
         display: none;
     }


     .adresa_homepage {
         position: absolute;
         text-align: right;
         width: 60%;
         right: 20px;
         top: 4vw;
         font-size: 11px;
         color: #333;
         -webkit-text-size-adjust: 100%;
     }

     .hledani_katalog {
         position: relative;
         margin-left: 30px;
         margin-top: 0px;
         width: 100%;
         height: 35px;
     }

     .hledani_katalog_hp {
         position: absolute;
         left: 5px;
         top: 130px;
         width: calc(100% - 10px);
     }

     .hledani_katalog_button {
         visibility: hidden;
         top: -50px;
     }




     a:link {
         /*  color: #333;*/
     }

     a:visited {
         /*  color: #333;*/
     }

     a:hover {
         color: #BC0518;
     }

     a:active {
         color: #BC0518;
     }




     body {
         margin: 0;
         font-family: 'Open Sans';
         color: #333;
     }

     select {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         padding: .5em;
         background: #fff;
         border: none;
         border-radius: 0px 0px 15px 0px;
         padding: 15px;
         font-size: 16px;
         border-left: 1px solid #ddd;
         font-family: 'Open Sans'
     }

     .custom-select {
         position: relative;
         display: inline;
         width: 98%;
     }

     .custom-select:after {
         content: "";
         width: 0;
         height: 0;
         position: absolute;
         pointer-events: none;
     }

     .custom-select:after {
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         top: .3em;
         right: .75em;
         border-top: 8px solid black;
         opacity: 0.5;
     }

     select::-ms-expand {
         display: none;
     }

     .menu_vypis {
         position: relative;
         width: 100%;
         display: flex;
         box-sizing: border-box;
         padding: 5px 15px 5px 15px;


     }

     .menu_vypis_pulka {
         width: 50%;
         top: 0px;
     }

     #menu_vypis_pulka_prava select {
         float: right;
     }

     .menu_vypis img {
         max-height: 400px;
         object-fit: contain;

     }



     .kosik_vypis {
         position: relative;
         width: 100%;
         box-sizing: border-box;
         padding: 10px;
         border: 0px solid #ccc;
         border-radius: unset;
         border-bottom: 1px solid #ccc;
     }



     .tlacitka {
         width: 100%;
     }

     .tlacitka a {
         padding: 10px;
         text-decoration: none;
         border: 1px solid #bbb;
         font-size: 16px;
         display: block;
         width: calc(50% - 30px);
         background-color: #fff;
     }

     .tlacitka a:nth-of-type(1) {
         float: left;
         border-radius: 9px 0px 0px 9px;

     }

     .tlacitka a:nth-of-type(2) {
         float: right;
         border-radius: 0px 9px 9px 0px;

     }

     input {
         height: 30px;
         border-width: 0px;
         background-color: #fff;
         font-size: 16px;
         border-radius: 7px;
     }

     input[type=text] {}


     .hledani {
         width: 100%;
         height: 40px;
         display: inline-block;
         box-sizing: border-box;
         padding: 10px;
         text-align: center;
         margin-top: 70px;
     }

     .hledani input {
         width: 100%;
         box-sizing: border-box;
         padding: 12px;
         height: 40px;
         color: darkgrey;
         -webkit-appearance: none;
         box-shadow: none;
         -webkit-box-shadow: none;
         border-radius: 7px;
     }

     .hledani input:focus {
         box-shadow: none;
         -webkit-appearance: none;
         box-shadow: 0 4px 7px 0px #ddd;
         -webkit-box-shadow: 0 4px 7px 0px #ddd;
     }

     .mobile_button {
         position: absolute;
         width: 40px;
         height: 40px;
         border-width: 0px;

         right: 20px;
     }



     .box_stranky {

         box-shadow: unset;
         width: 100%;
         margin-left: unset;
         margin-right: unset;
         background-color: white;
         height: auto;
         min-height: unset;
         position: absolute;
         left: 0;
         right: 0;
         background-color: white;
         left: 0;
         right: 0;
     }




     .logo_pd_mobil {
         width: 150px;
         height 150px;
         position: absolute;
         left: 0px;
         top: -7px;
         z-index: 20;
     }





     .user_pozice {
         position: absolute;
         font-size: 12px;
         color: white;
         top: -2px;
         right: 55px;
         text-align: right;
         display: block;
         z-index: 18;
     }

     .user_pozice a {
         color: white;
         font-size: 12px;

     }

     .user_pozice a:hover {
         font-size: 12px;
         color: #fff;
         border-bottom: 1px dotted #fff;
         text-decoration: none;
     }


     .hp_adresa {
         position: absolute;
         width: 100%;
         height: 50px;
         box-sizing: border-box;
         padding: 10px;
         text-align: right;
         margin-top: 50px;
         font-size: 13px;
     }

     .hp_adresa i {
         color: darkgrey;
     }

     .topnav {
         overflow: hidden;
         background-color: #eee;
         position: relative;
         text-align: right;
         z-index: 15;
     }

     .topnav #myLinks {
         display: none;

     }

     .topnav a {
         color: #333;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 17px;
         display: block;
     }

     .topnav a.icon {
         background: lightgray;
         display: block;
         position: absolute;
         right: 0;
         top: 0;
     }

     .topnav a:hover {
         background-color: #ddd;
         color: #333;
     }

     .topnavblok {
         background-color: #BC0518;
         height: 49px;
     }


     .topnav topnav_active.a:hover {
         background-color: #BC0518;
         color: white;
     }

     .topnav i {
         color: #aaa;

     }

     .topnav button.icon {
         background: lightgray;
         display: block;
         position: absolute;
         right: 0;
         top: 0;
         padding: 14px 16px;
         font-size: 17px;
         border: none;
         color: #333;
         cursor: pointer;
     }

     .topnav button.icon:hover {
         background-color: #ddd;
         color: #333;
     }

     /* Reset stylů tlačítka, aby se chovalo jako odkaz */
     .topnav button.icon:focus {
         outline: none;
         box-shadow: none;
     }

     .topnav button.icon i {
         color: #aaa;
     }





     .mainnav_ramec {
         width: 100%;
         box-sizing: border-box;
         padding: 10px;
         margin-top: 120px;

     }


     .mainnav {
         overflow: hidden;
         position: relative;
         text-align: left;
         border: 1px;
         border-style: solid;
         border-color: #fff;

     }

     .mainnav #myLinks2 {
         display: none;

     }

     .mainnav p {
         font-size: 16px;

     }

     .mainnav a {
         color: #666;
         padding: 12px 20px;
         text-decoration: none;
         font-size: 16px;
         display: block;
         border-style: none none dotted none;
         border-width: 0px 0px 2px 0px;
         border-color: #ccc;
     }

     .mainnav p.icon {
         display: block;
         position: absolute;
         right: 20px;
         top: 0;
     }

     .mainnav a:hover {
         color: #BC0518;
     }

     .mainnav i {
         color: #BC0518;
     }





     .carousel-cell {
         width: 760px;
         /* full width */
         height: 370px;
         margin-right: 10px;
     }





     .vypis_textovy_objekt {
         position: absolute;
         left: 0px;
         top: 90px;
         margin: 12px;
         font-size: 11px;
         width: 50%;
         z-index: 11;

     }



     .vypis_ram {
         position: relative;
         margin-top: 0px;
         margin-left: 0px;
         width: calc(100% - 40px);
         height: 335px;
         margin: 10px;
         border: 1px solid #fff;
         padding: 10px 10px 4px 10px;
         background-color: #fff;
         display: inline-block;
         box-shadow: 1px 1px 8px 0px #ddd;
     }

     .vypis_ram:hover {
         transition: unset;
         -webkit-box-shadow: unset;
         box-shadow: unset;


     }



     .vypis_ram_sklad {
         position: absolute;
         width: 58%;
         /* right: 1px; */
         margin-top: -12px;
         background-color: #fff;
         display: block;
         padding: 10px;
         z-index: 10;
         font-size: 13px;
         box-sizing: border-box;



         -webkit-box-shadow: 0px 1px 6px 0px #ddd;
         box-shadow: 0px 1px 6px 0px #ddd;


         border-radius: 0px 0px 9px 9px;
         visibility: visible;
     }




     .obrazek_ram_detail {
         border: 1px solid #fff;
     }


     .obrazek_ram {
         position: absolute;
         top: 30px;
         right: 0px;
         width: 50%;
         height: 80%;
         display: block;
         object-fit: contain;
         left: unset;
         /*    border: 1px solid #666; */
     }

     .obrazek_ram img {
         width: 100%;
         height: 100%;
         object-fit: contain;
     }


     .expres_ikonka {
         position: absolute;
         margin-left: -22px;
         bottom: 60px;
         z-index: 9;
         width: 63px;
         height: 14px;
     }





     .vyprodej_ikonka {
         position: absolute;
         margin-left: -22px;
         margin-top: 220px;
         z-index: 5;
         width: 80px;
         /*    height: 14px;*/

     }




     .hlavni_ramec {
         position: relative;
         width: 100%;
         height: 100%;
         top: 0px;
         overflow: hidden;
         margin-left: 0px;

     }

     .hlavni_ramec_bez_menu {
         position: relative;
         width: 100%;
         min-height: 50vh;
         top: 0px;
     }



     .paticka_mobil {
         position: relative;
         left: 0px;
         bottom: 0px;
         height: 300px;
         width: 100%;
         background: #555;
         color: white;
         box-sizing: border-box;
         padding: 15px;
         z-index: 20;
         background-color: #555;
         display: block;
     }



     .paticka_mobil a {
         color: #ddd;
         text-decoration: none;
         font-weight: 600;
     }





     .paticka_gradient {
         display: none;

     }


     .paticka_gradient_nova {
         display: none;
     }

     .volejte_tel {
         position: absolute;
         margin-left: 0px;
         margin-top: 0px;
         width: 100%;
         height: 32px;
         color: #ffffff;
         background-color: #b62314;
         box-shadow: inset 0px -9px 14px -10px rgba(0, 0, 0, 0.75);
     }

     .volejte_tel_text {
         position: absolute;
         font-family: 'Open Sans', 'Helvetica Light';
         font-size: 18px;
         color: #ffffff;
         margin-top: 5px;
         margin-left: 841px;

     }

     .nova_paticka {
         position: absolute;
         width: 90%;
         height: 120px;
         text-align: left;
         line-height: 22px;
         margin-top: 50px;
         margin-left: 0px;

         font-size: 11px;
     }

     .qr_kod {
         display: none;
     }

     .paticka_logo {
         display: none;
     }


     .patka-linka {
         display: none;
     }


     .pismo_vypis_cenovka1 {
         font-size: 11px;
         color: #666;
     }

     .pismo_vypis_cenovka2 {
         font-size: 20px;
         font-weight: 600;
         color: #BC0518;

     }



     .hidden {
         position: absolute;
         visibility: hidden;
     }

     .mala_linka {
         border-style: solid;
         border-color: #eee;
         position: relative;
         border-top-width: 0px;
         border-right-width: 0px;
         border-bottom-width: 1px;
         border-left-width: 0px;
         width: calc(100% - 6%);
         /*    z-index: 15;*/
         top: 9px;
         left: 3%;
     }

     .pismo_fialova_velka {
         font-size: 18px;
         font-weight: bold;
         color: #BC0518;
     }

     .pismo_fialova_velka3 {
         font-size: 24px;
         font-weight: bold;
         color: #BC0518;
     }

     .pismo_fialova_velka a {
         color: #BC0518;
     }



     .pismo_fialova {
         font-size: 14px;
         color: #BC0518;
     }




     .mail {
         /*    font-weight: bold;*/
         color: #BC0518;
         text-decoration: none;
     }

     a.mail:link {
         /*    font-weight: bold;*/
         color: #BC0518;
         text-decoration: none;
     }






     .input_9_form {
         font-family: 'Open Sans';
         color: #333333;
         width: 80%;
         height: 16px;
         background-color: #efefef;
         padding: 15px;
         border: unset;
         box-shadow: unset;
     }

     .input_9_form:focus {
         background: #ffffff;
         color: #000000;
         transition: all .1s ease;
         border: unset;
         box-shadow: unset;

     }

     .input_9_form:hover {
         border: unset;
     }

     .input_9_form_select {
         font-family: 'Open Sans';
         color: #333333;
         width: 60%;
         height: 16px;
         background-color: #efefef;
         padding: 15px;
         border: unset;
         box-shadow: unset;
         height: 48px;
     }

     .input_9_form_x {
         font-family: 'Open Sans';
         color: #333333;
         width: 60%;
         height: unset;
         background-color: #efefef;
         padding: 15px;
         border: unset;
         box-shadow: unset;
     }

     .input_6_formm {

         font-size: 16px;
         border: 1px solid #cccccc;
         color: #333333;
         width: 95%;
         height: 89px;
         resize: none;

         box-shadow: inset 0 0 2px 3px #f0f0f0;
         padding: 8px;
     }

     .input_6_formm:focus {
         font-size: 16px;
         background: #ffffff;
         border: 1px solid #ffffff;
         color: #000000;

         box-shadow: 0 0 5px 3px #cccccc;
         transition: all .1s ease;
     }

     .input_6_formm:hover {
         font-size: 16px;
         border: 1px solid #996e6e;
     }

     .input_6_formm textarea {
         font-size: 16px;
     }


     .butonek {
         background-color: #999;
         border: none;
         color: white;
         padding: 16px;
         font-size: 16px;
         cursor: pointer;
         border-radius: 5px;
         width: 50px;
         margin: 5px;
     }

     .input_kosik {
         width: 23%;
         padding: 11px;
         text-align: left;
         background-color: #efefef;
     }


     .button_kosik_ve_vypisu {
         border: none;
         padding: 8px 15px;
         cursor: pointer;
         position: absolute;
         left: -6px;
         bottom: 0px;
         background-color: transparent;
         color: #339900;
         font-size: 36px;
     }




     .hlavni_ramec_pozice1 {
         position: relative;
         margin-left: 0px;
         margin-top: 0px;
     }



     .hlavni_ramec_pozice3 {
         display: block;
         width: calc(100% - 40px);
         margin-left: unset;
         margin-top: unset;
         padding: 15px;
         font-size: 14px;


     }




     .mapa_ramec {
         width: 100%;
         height: 400px;
         /* Pevná výška je důležitá */
         position: relative;
         margin-bottom: 40px;
         display: block;
     }


     #map {
         width: 100%;
         height: 100%;
         position: relative;
         /* NE absolute */
         display: block;
         top: 0px;
         right: 0px;

     }






     .kontakt_box {
         max-width: unset;
         width: unset;
         padding: 10px;
     }


     .container_podkat2 {

         display: inline-flex;
         width: calc(50% - 15px);
         padding: 10px 5px 10px 0px;
         border: unset;
         font-size: 14px;
         margin: 0px 0px 10px 5px;

     }

     @media screen and (max-width: 400px) and (orientation: portrait) {
         div.container_podkat2 {
             font-size: 13px;
         }
     }

     @media screen and (min-width: 670px) and (orientation: landscape) {
         div.container_podkat2 {
             font-size: 17px;
         }
     }


     .container_podkat2:hover {
         box-shadow: 0px 0px 10px 0px #aaa;
         border-radius: 3px;

         border: 1px solid #fff;
         transition: 0.3s ease;

     }


     .textovej_ramec_v_katalog_prehled {
         font-size: 14px;
         line-height: 1.5;
         padding: 20px 20px 20px 20px;
         width: 80%;
     }

     #inspirace_img2 {
         width: 60px;
         height: 60px;

     }


     @media screen and (max-width: 400px) and (orientation: portrait) {
         #inspirace_img2 {
             padding: 0px 5px 0px 3px;
         }
     }

     @media screen and (min-width: 670px) and (orientation: landscape) {
         #inspirace_img2 {
             padding: 0px 15px 0px 3px;
         }
     }


     h1 {
         display: inline;
         font-weight: normal;
     }


     h2 {
         display: inline;
         font-weight: normal;
     }

     .search-box input[type="text"] {
         height: 40px;
     }

     .search-box {
         width: calc(100% - 10px);
         padding-left: 5px;
         padding-right: 5px;
     }


     .menu_barevnik {
         display: block;
         position: relative;
         top: unset;
     }



     .barevnik {
         right: 0px;
         top: 0px;
         position: relative;
         display: block;
         padding: unset;
     }


     a.vyhledavani_fialove:link {
         font-size: 13px;
         color: #666;
         text-decoration: underline;
     }

     a.vyhledavani_fialove:visited {
         font-size: 13px;
         color: #666;
         text-decoration: underline;
     }

     a.vyhledavani_fialove:hover {
         font-size: 13px;
         color: #000;
         text-decoration: none;
     }

     select {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         padding: unset;
         background: #fff;
         border: none;
         border-radius: unset;
         padding: 10px;
         font-size: 14px;
         border-left: 1px solid #ddd;
         font-family: 'Open Sans'
     }

     .input_1 {
         background-color: #ffffff;
         border: 1px solid #cccccc;
         font-size: 12px;
         color: #000000;
         width: 60px;
     }

     .input_2 {
         background-color: #ffffff;
         border: 1px solid #cccccc;
         font-size: 14px;
         color: #000000;
         width: 100%;
     }

     .input_5 {
         background-color: #ffffff;
         border: 1px solid #cccccc;
         font-size: 14px;
         color: #000000;
         width: 100%;
     }

     .input_3 {
         background-color: #BC0518;
         border: 1px solid #BC0518;
         font-size: 12px;
         color: #ffffff;
         width: 50px;
     }

     .input_4 {
         background-color: #ffffff;
         border: 1px solid #999;
         font-size: 12px;
         color: #000000;
         width: 200px;
     }

     .input_6 {
         background-color: #ffffff;
         border: 1px solid #999;
         font-size: 12px;
         color: #000000;
         width: 40px;
     }

     .input_7 {
         background-color: #ffffff;
         border: 1px solid #cccccc;
         font-size: 14px;
         color: #000000;
         width: 100%;
     }


     .ctverecek_barva {
         margin: -1px;
     }

     .container_podkat2_mensi {
         display: inline-flex;
         padding: 10px 5px 10px 0px;
         border: unset;
         font-size: 14px;
         margin: 0px 0px 10px 5px;
         width: calc(50% - 15px);
     }

     .container_link {
         display: inline;
     }


     .fotka_hlubocinka {
         position: relative;
         width: 100%;
         height: unset;
         left: unset;
     }

     .fotka_reference {
         border-width: unset;
         border-style: unset;
         width: 100%;
         height: unset;
     }

     .reference_zalomeni {
         position: unset;
         right: unset;
         float: unset;
         margin-left: unset;
         margin-bottom: 80px;
     }

     .button_predchozi_dalsi_cisla {
         padding: 0px;
     }

     .login_ramec {
         width: 100%;
         margin-left: unset;
     }

     .url_wide {
         width: calc(100% - 40px);
         margin-left: unset;
         margin: 15px;
     }

     .url_wide img {
         max-width: 95%;
         height: auto;
     }


     .login_ramec_30 {
         padding: 15px;
     }

     .login_ramec_450 {
         width: 100%;
         text-align: right;
     }


     .registrace_image {
         position: absolute;
         right: 15px;
         width: 65px;
         height: 65px;
     }

     .mobil_detail_fotka {
         position: absolute;
         right: -2px;
         bottom: -4px;
         width: 180px;
         z-index: 14;
     }

     .mobil_specifikace_vyrobku {
         /* line-height: 2.2; */
     }

     .mobil_kosik_vetsi {
         position: absolute;
         font-size: 60px;
         color: #ccc;
         right: 25px;
         bottom: 20px;
     }


     .mobil_pageup {
         position: absolute;
         font-size: 60px;
         color: #ccc;
         right: 25px;
         top: -100px;
         z-index: 12;
     }


     .web_pageup {
         display: none;
     }


     .user_ramec {
         width: 100%;
         margin-left: unset;
     }

     .user_padding_30 {
         padding: 15px;
         line-height: unset;
     }

     .user_img {
         position: absolute;
         right: 15px;
         width: 65px;
         height: 65px;
     }

     .mobil_podobne_vyrobky {
         font-family: 'kalam';
         font-size: 20px;
         letter-spacing: -0.1pt;
         color: #aaa;
         font-weight: 700;
     }

     .user_info {
         position: absolute;
         left: 165px;
         font-weight: bold;
         text-align: left;
     }


     .user_st1 {
         width: 20%;
         font-size: 16px;
         text-align: left;
         display: inline-block;
         text-decoration: underline;
     }

     .user_st1a {
         width: 40%;
         font-size: 11px;
         text-align: left;
         display: inline-block;
     }

     .user_st2 {
         width: 30%;
         font-size: 11px;
         text-align: left;
         display: inline-block;
     }

     .user_st3 {
         width: 30%;
         font-size: 11px;
         text-align: right;
         display: inline-block;
     }

     .user_cara {
         position: relative;
         width: 100%;
         height: 1px;
         background-color: #ddd;
         font-size: 20px;
         margin-bottom: 3px;
         margin-top: 3px;
     }

     .user_cara2 {
         position: relative;
         width: 100%;
         height: 5px;
         background-color: #ddd;
         font-size: 20px;
         margin-bottom: 3px;
         margin-top: 3px;
     }

     .user_st4 {
         margin-left: 5px;
         width: 15%;
         font-size: 11px;
         text-align: left;
         display: inline-block;
     }

     .user_st5 {
         width: 20%;
         font-size: 11px;
         text-align: left;
         display: inline-block;
     }

     .user_st6 {
         width: 20%;
         font-size: 11px;
         text-align: right;
         display: inline-block;
     }

     .user_st7 {
         width: 20%;
         font-size: 11px;
         text-align: left;
         display: inline-block;
         text-decoration: underline
     }

     .user_st8 {
         width: 10%;
         font-size: 11px;
         text-align: left;
         display: inline-block;
     }

     .buton_objednat2 {
         background-color: #fff;
         width: 250px;
     }


     .gender_selectory {
         position: relative;
         right: unset;
     }


 }


















 /*--- vetsi monitor -----------------------------------------------------------------------------------------------------------------------------*/

 @media only screen and (min-width: 1600px) {


     .box_stranky {
         width: 1590px;
     }

     .hlavni_ramec_bez_menu {
         width: 1590px;

     }


     .hlavni_ramec {
         width: 1370px;
     }

     .hlavni_ramec_pozice3 {
         width: 1410px;
     }

     .subnav-content {

         width: 1320px;
         min-height: 700px;

     }


     .container_podkat2 {
         width: 260px;
     }

     .shadow_detail {
         width: 1240px;
     }

     .shadow_detail_popis {
         padding-left: 30px;
         margin-left: 720px;
         
     }

     .shadow_detail_fotka {
         margin-left: 85px;
     }

     .ikonka_v_detailu {
         position: absolute;
         left: 392px;
         margin-top: 460px;
         width: 250px;
         height: auto;
         /* z-index: 8; */
     }



     .poptavka_img_pozice {
         right: -190px;
         clip: rect(0px, 340px, 600px, 0px);
     }


     .insta_titulek {
         margin-left: 400px;
     }


     .slider_pozice {
         margin-left: 165px;
     }

     .index_250 {
         margin-left: 450px;
     }

     .container_podkat2_mensi {
         padding: 10px 23px 10px 0px;
     }

     .paginace {
         padding-right: 30px;
     }

     .fotka_hlubocinka {
         position: relative;
         width: 1590px;
         height: auto;
     }


     .patka_kontakt,
     .patka_copyright {
         right: 500px;
     }

     .expresni_dodani {
         position: absolute;
         margin-left: -120px;
         margin-top: -35px;
         height: 121px;
         width: 119px;
         transition: width 0.5s ease, height 0.5s ease;
     }

     .pozice_penbox {
         height: 2400px;
         margin-left: 220px;
         width: 1050px;
         position: relative;
         top: -120px;
     }

     .container_podkat3 {
         width: 283px;
     }


     .menu_razeni {
         display: flex;
         padding-bottom: 0px;
     }


     #map {
         width: 700px;
         right: 20px;
     }




 }

 /*--- jeste vetsi monitor -----------------------------------------------------------------------------------------------------------------------------*/

 @media only screen and (min-width: 1960px) {

     .box_stranky {
         width: 1930px;
     }

     .hlavni_ramec {
         width: 1710px;
     }


     .hlavni_ramec_bez_menu {
         width: 1930px;

     }

     .hlavni_ramec_pozice3 {
         width: 1746px;
     }

     .subnav-content {
         width: 1560px;
         min-height: 800px;
     }

     .subnav-content a {
         font-size: 18px;
         padding: 20px 20px;
     }


     .container_podkat {
         width: 310px;
         padding: 25px 35px;
     }

     .container_podkat2 {
         width: 260px;
     }

     .shadow_detail {
         width: 1580px;
     }

     .shadow_detail_popis {
         padding-left: 40px;
         margin-left: 720px;
     }

     .shadow_detail_fotka {
         margin-left: 85px;
     }

     .ikonka_v_detailu {
         position: absolute;
         left: 392px;
         margin-top: 460px;
         width: 250px;
         height: auto;
         /* z-index: 8; */
     }


     .poptavka_img_pozice {
         right: -164px;
         clip: rect(0px, 370px, 600px, 0px);
     }


     .insta_titulek {
         margin-left: 520px;
     }

     .container_podkat2 {
         margin: 0px 20px 25px 0px;
     }

     .slider_pozice {
         margin-left: 340px;
     }

     .index_250 {
         margin-left: 600px;
     }

     .container_podkat2_mensi {
         padding: 10px 26px 10px 8px;
     }



     .paginace {
         padding-right: 30px;
     }

     .fotka_hlubocinka {
         left: 0px;
     }



     .patka_kontakt,
     .patka_copyright {
         right: 550px;
     }

     .expresni_dodani {
         position: absolute;
         margin-left: -120px;
         margin-top: -35px;
         height: 121px;
         width: 119px
     }

     .pozice_penbox {
         height: 2400px;
         margin-left: 300px;
         width: 1050px;
         position: relative;
         top: -120px;
     }

     .container_podkat3 {
         width: 290px;
     }

     .pismo_titulek_detail {
         font-size: 26px;
     }


     .fotka_hlubocinka {
         width: 1730px;
     }



     .buton_load_more {

         font-size: 18px;

     }




 }






 /* -- new inputs -------------------------------------------------------------------------------------------------------------------------------------------------------------------  */
 /* Základní styl pro nový input/select */
 .new_input {
     padding: 8px 12px;
     font-size: 14px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
     color: #333;
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 4px;
     outline: none;
     transition: all 0.2s ease;
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     box-sizing: border-box;
 }

 /* Šipka dolů pro selecty */
 select.new_input {
     background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
     padding-right: 35px;
 }

 /* Hover efekt */
 .new_input:hover {
     border-color: #BC0518;
     background-color: #fafafa;
 }

 /* Focus efekt */
 .new_input:focus {
     border-color: #BC0518;
     box-shadow: 0 0 0 2px rgba(188, 5, 24, 0.1);
     background-color: #fff;
 }

 /* Text inputy bez šipky */
 input[type="text"].new_input,
 input[type="email"].new_input,
 input[type="search"].new_input,
 input[type="number"].new_input,
 input[type="tel"].new_input {
     background-image: none;
     padding-right: 12px;
 }

 /* Disabled stav */
 .new_input:disabled {
     background-color: #f5f5f5;
     color: #999;
     cursor: not-allowed;
     opacity: 0.7;
 }

 /* Placeholder barva */
 .new_input::placeholder {
     color: #999;
     opacity: 1;
 }

 /* Styly pro options v selectu */
 .new_input option {
     padding: 8px;
     background-color: #fff;
     color: #333;
 }

 /* Pro Safari */
 select.new_input::-ms-expand {
     display: none;
 }



 /* Pomocné třídy pro různé velikosti */
 .new_input.small {
     padding: 6px 10px;
     font-size: 13px;
 }

 .new_input.large {
     padding: 12px 16px;
     font-size: 16px;
 }

 /* Varianty */
 .new_input.error {
     border-color: #dc3545;
 }

 .new_input.error:focus {
     box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
 }

 .new_input.success {
     border-color: #28a745;
 }

 .new_input.success:focus {
     box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
 }