@font-face {
  font-family: 'm-bold';
  src: url('../inc/MyriadPro-Bold.eot');
  src: url('../inc/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),url('../inc/MyriadPro-Bold.woff2') format('woff2'),url('../inc/MyriadPro-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'm-boldcond';
  src: url('../inc/MyriadPro-BoldCond.eot');
  src: url('../inc/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),url('../inc/MyriadPro-BoldCond.woff2') format('woff2'),url('../inc/MyriadPro-BoldCond.ttf') format('truetype');
}

@font-face {
  font-family: 'm-cond';
  src: url('../inc/MyriadPro-Cond.eot');
  src: url('../inc/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),url('../inc/MyriadPro-Cond.woff2') format('woff2'),url('../inc/MyriadPro-Cond.ttf') format('truetype');
}

@font-face {
  font-family: 'm-regular';
  src: url('../inc/MyriadPro-Regular.eot');
  src: url('../inc/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),url('../inc/MyriadPro-Regular.woff2') format('woff2'),url('../inc/MyriadPro-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'm-semibold';
  src: url('../inc/MyriadPro-Semibold.eot');
  src: url('../inc/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),url('../inc/MyriadPro-Semibold.woff2') format('woff2'),url('../inc/MyriadPro-Semibold.ttf') format('truetype');
}




body {
    --ctext: #443a27;
    --cbila: #ffffff;
    --cseda: #eeeeee;
    --cseda2: #aaaaaa;
    --ccerna: #000000;
    --cstin: #111111;
    --cmodra: #0b4c84;
    --ccervena: #ec1a2b;
    font-family: m-regular, Calibri, Arial;
    color: var(--ctext);
    font-size: 1em;
    margin: 0px;
    padding: 0px;
    text-align: left;
    background: #ffffff;
    min-width: 800px;
    --body: calc(100%);
    width: var(--body);  
    line-height: 1.5em;
}

a 		{color: var(--cmodra); text-decoration: none; }
a:hover 	{color: var(--ccervena); text-decoration: none;}
:focus		{outline: 0;}


.cistic {
  clear: both;
  font-size: 1px;
  height: 0px;
}

.cistic-middle {
  clear: both;
  font-size: 1px;
  height: 10px;
}

.cistic-big {
  clear: both;
  font-size: 1px;
  height: 20px;
}

.cistic-big2 {
  clear: both;
  font-size: 1px;
  height: 40px;
}

.cistic-big3 {
  clear: both;
  font-size: 1px;
  height: 80px;
}

/* --- zakladni html prvky ---*/
p 		{text-align: left; line-height: 1.1em; padding: 0px 0px 5px 0px;}
hr              {height: 0px; margin: 10px 0px 10px 0px; border: 0px; padding: 0px 0px 0px 0px; border-top: 1px solid #000000;}

.div-bad {
        padding: 1%;
        box-shadow: inset 0px 0px 0px 3px red;
        background: white;
        color: black;
        width: 98%;
}
.div-good {
        padding: 1%;
        box-shadow: inset 0px 0px 0px 3px #94c3aa;
        background: white;
        color: black;
        width: 98%;
        margin-bottom: 40px;
} 

body .div-good p {
    padding: 0px;
    margin: 0px;
}


ul ol li			  {color: white; list-style-type: none; margin: 0px; padding: 0px; text-align: left;}

.menu1               {list-style-type: none; margin: 0px; padding: 0px 0px 0px 0px; float: right;}
.menu1 li            {padding: 0px 0px 0px 0px; margin: 0px 10px 0px 10px; float: left; transition: all ease 0.7s;}
body .a-menu             {font-size: 20px; font-family: m-semibold; margin: 0px; color: var(--ccervena); text-align: left; float: left; height: 20px; padding: 40px 0px 40px 0px;  text-decoration: none; transition: all ease 0.7s;  }
body .a-menu:hover, body .a-menu-selected:hover       {text-decoration: none; color: #000000;}
body .a-menu-selected    {font-size: 20px; font-family: m-semibold; margin: 0px; color: var(--ccervena); text-align: left; float: left; padding: 40px 0px 40px 0px;  text-decoration: none; transition: all ease 0.7s; text-decoration: none; color: #000000; }

body .podmenu           { list-style-type: none; margin: 70px 0px 0px 0px; width: 180px; padding: 10px; position: absolute; visibility: hidden; background: var(--ccervena); z-index: 100; transition: all ease 0s;}
body .podmenu li        {text-align: left; float: left; width: 180px; padding: 0px; margin: 0px; transition: all ease 0s; height: auto; z-index: 100; }
body .podmenu a         {color: #ffffff; width: 160px; padding: 10px; margin: 0px; height: auto; float: left; text-align: left; background: none; border: none; transition: all ease 0s; background: none;  }
body .podmenuborder         {border-top: 1px solid #ce544b; }
body .podmenu a:hover	{color: var(--ccervena); text-decoration: none;  border: none; background: #ffffff;}

.menu0		  {font-weight: normal; list-style-type: none; margin: 0px; padding: 0px 0px 0px 0px;}
.menu0 li	  {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left;}
.menu0 a	  {font-weight: normal; font-size: 20px; margin: 0px 10px 0px 10px; text-align: left; padding: 30px 0px 50px 0px; height: 30px; text-decoration: none; float: left; transition: all ease 0.7s; }
.menu0 a:hover	  {font-weight: normal; text-decoration: none; }
.menu0 a.selected {font-weight: normal; text-decoration: none; }

#div-podmenu-carky ol       {color: white; list-style-type: none; margin: 0px; padding: 0px; text-align: left;}
#div-podmenu-carky .podmenu {font-size: 24px; list-style-type: none; margin: 0px 0px 0px 0px; width: 100%; position: fixed; visibility: hidden; z-index: 30; }
#div-podmenu-carky li       {font-size: 24px; text-align: left; float: left; width: 50%; padding: 0px; margin: 0px;}
#div-podmenu-carky a        {font-size: 24px; width: 92%; padding: 20px 4% 20px 4%; margin: 0px; height: auto; float: left; text-align: center; background: none; border: none; transition: all ease 0.7s; font-weight: bold;}
#div-podmenu-carky a:hover  {font-size: 24px; text-decoration: none;  border: none; text-decoration: none;}

#podmenu_carky0 li a {color: var(--ccervena); background: var(--cbila); }
#podmenu_carky0 li a:hover {background: var(--ccervena); color: var(--cbila); }
#podmenu_carky1 li a {color: var(--cbila); background: var(--czelena); }
#podmenu_carky1 li a:hover {background: var(--cbila); color: var(--czelena); }
#podmenu_carky2 li a {color: var(--cbila); background: var(--cmodra); }
#podmenu_carky2 li a:hover {background: var(--cbila); color: var(--cmodra); }

.odsazeni-left {
    margin-left: 30px;
}

.odsazeni-right-homepage {
    margin-right: 20px;
}

.odsazeni-top {
    margin-top: 5px;
}

.div-menu-carky {
    float: right;
    width: 40px;
    height: 40px;
    margin: 30px 0px 0px 0px;
    display: none;
    transition: all ease 0.7s;
}

.a-menu0 {
  background: url('../img/bcg_carky.png') center center no-repeat;
  background-size: contain;
    width: 40px;
    height: 40px;  
    float: left;
}

.a-menu0b {
  background: url('../img/bcg_carky2.png') center center #ffffff no-repeat;
  background-size: contain;
    width: 40px;
    height: 40px;  
    float: left;
}

#a-menu0 {
  width: 40px;
  height: 40px;
  float: right;
  cursor: pointer;
  transition: all ease 0.7s;
}




#div-podmenu-holder {
  float: left;
  position: absolute;
  margin: 40px 0px 0px 0px;
}

.div-podmenu-holder {
  position: relative;
  margin-top: 40px;
}

sub, sup    {vertical-align: baseline; position: relative;}
sub         {top: 0.4em;}
sup         {bottom: 0.4em;}

table {
  border-collapse: collapse;
}

h1				{padding: 0px 0px 10px 0px; font-weight: normal; margin: 0px 0px 0px 0px; font-size: 36px; line-height: 40px; letter-spacing: 2px; }
h2				{padding: 0px 0px 10px 0px; font-weight: normal; margin: 0px 0px 0px 0px; line-height: 36px; font-size: 30px; }
h3				{padding: 0px 0px 10px 0px; font-weight: normal; margin: 0px 0px 0px 0px; font-size: 24px; line-height: 30px;}
h4				{padding: 0px 0px 10px 0px; font-weight: normal; margin: 0px 0px 0px 0px; font-size: 24px; }
h5				{padding: 0px 0px 10px 0px; font-weight: normal; margin: 0px 0px 0px 0px; font-size: 22px; }

/* --- formulare --- */
textarea, input, select     {font-family: m-regular,Calibri, Arial, Open Sans, Calibri,Trebuchet,Tahoma,Verdana,sans-serif; font-size: 1em; padding: 4px;}
form                        {padding: 0px; margin: 0px;}

/* --- globalni tridy --- */
.smaller		{font-size: 0.9em;}
.small 			{font-size: 0.8em;}

.right 			{text-align: right;}
.center			{text-align: center;}
.left			{text-align: left;}
.block			{text-align: justify;}
.toleft			{float: left;}
.toright		{float: right;}
.hidden			{display: none;}
.bold, strong			{font-weight: bold; }
.underline		{text-decoration: underline;}

.big {font-size: 2em;}
.bigger {font-size: 1.2em;}






#div-body {
        width: 100%;
        float: left;

}

.div-main {
        margin: auto;
        padding: 0px 20px 0px 20px;
        --div_main: clamp(840px,(100% - 40px),1400px);
        width: var(--div_main);
}

#div-podmenu-carky {
    padding: 0px;
    margin: 0px;
    float: left;
    position: absolute;
    top: 100px;
    z-index: 30;
    width: var(--div_main);
    background: var(--cbila);
    display: none;
    box-shadow: 0px 0px 20px var(--cseda);
    border-radius: 5px;
    overflow: hidden;
}

#div-top {
    width: 100%;
    height: 100px;
    float: left;
    background: var(--cseda);
    color: var(--ccerna);        
}

.div-main10 {
        float: left;
        padding: 0px;
        position: relative;
        left: -10px;
        width: calc(100% + 20px);
}

.div-main20 {
        float: left;
        padding: 0px;
        position: relative;
        left: -20px;
        width: calc(100% + 40px);
}

#div-logo {
    width: 289px;
    height: 60px;
    float: left;
    margin-top: 20px;
    cursor: pointer;
    background: url("../img/bcg_logo.png") center center no-repeat;
    background-size: contain;
    transition: all ease 0.7s;
}

#div-logo:hover {
    transform: scale(1.05);
}

#div-slogan {
    float: left;
    font-size: 30px;
    letter-spacing: 3px;
    padding: 40px 0px 0px 40px;
    font-family: m-cond;
}


.div-hp-rozcestnik {
    width: calc(50% - 82px);
    padding: 20px;
    margin: 0px 20px 40px 20px;
    float: left;
    border: 1px solid var(--cmodra);
    border-radius: 10px;
    transition: all ease 0.7s;
    cursor: pointer;
}

.div-hp-rozcestnik:hover {
    transform: scale(1.05);
}

.div-hp-rozcestnik1 {
    width: 100%;
    height: 200px;
    float: left;
    margin-bottom: 40px;
}

.div-hp-rozcestnik2 {
    width: 100%;
    float: left;
    height: 80px;
    font-size: 36px;
    text-align: center;
    color: var(--cmodra);
    line-height: 40px;
}


@media only screen and (min-width: 1101px) {
    .div-menu-carky {
        display: none;
    }     
    #div-menu {
        display: block;
    }              
    #div-podmenu-carky {
        display: none;
    }        
}

@media only screen and (max-width: 1100px) {
    .div-menu-carky {
        display: block;
    }     
    #div-menu {
        display: none;
    }           
    .div-hp-rozcestnik {
        width: calc(100% - 82px);    
    }
}

#div-menu {
    float: right;
    transition: all ease 0.7s;
}

.div-navigace {
    width: 100%;
    padding: 20px 0px 20px 0px;
    background: var(--cseda);
    float: left;
    border-top: 1px dotted var(--cseda2);
}

.tabulka {
    width: 100%;
}

body .tabulka td {
    padding: 3px 5px 3px 5px;
    text-align: center;
    border: 1px solid var(--cseda2);
}

.tr1 {
    background: var(--cbila);
}

.tr2 {
    background: var(--cseda);
}


.div-body {
    width: calc(100% - 40px);
    float: left;
    padding-left: 20px;
}

.hlavicka {
    color: var(--cbila);
    background: var(--cmodra);
    position: sticky;
    top: 0;
}

#div-scroll {
      width: 50px;
      height: 50px;
      background: url("../img/scroll1.png") no-repeat;
      position: fixed;
      bottom: 20px;
      right: 20px;
      cursor: pointer;
}

#div-scroll:hover {
      background: url("../img/scroll2.png") no-repeat;
}

@media only screen and (max-width: 1500px) {
    .tabulka td {
        font-size: 12px;
    }     
}

.div-clanky1 {
    width: 100%;
    height: 200px;
    float: left;
    border-radius: 10px;
    margin-bottom: 20px;
}

.div-clanky2 {
    width: 100%;
    height: 180px;
    margin-bottom: 20px;
    float: left;
    overflow: hidden;
}

.div-clanky4 {
    width: 100%;
    height: 40px;
    float: left;
}

.div-clanky3 {
    width: 100%;
    height: 420px;
    float: left;
    overflow: hidden;
}

.div-clanky {
    --div_clanky: calc(25% - 82px);
    width: var(--div_clanky);
    float: left;
    border-radius: 10px;
    margin: 0px 0px 40px 40px;
    padding: 20px;
    cursor: pointer;
    transition: all ease 0.7s;
    background: var(--cbila);
    border: 1px solid var(--cmodra);
}

.div-clanky:hover {
    transform: scale(1.05);
}

@media only screen and (max-width: 1000px) {
    .div-clanky {
        --div_clanky: calc(50% - 80px);
        width: var(--div_clanky);
    }
}

.div-predchozi {
    min-width: 100px;
    width: 15%;
    height: 25px;
    float: left;
    cursor: pointer;
    background: url("../img/bcg_strankovani_left.png") 0px 0px no-repeat;
    padding: 2px 0px 0px 25px;
    font-size: 14px;
    color: #aaaaaa;
    text-align: left;
    transition: all ease 0.7s;
}

.div-nasledujici {
    min-width: 100px;
    width: 15%;
    height: 25px;
    float: right;
    cursor: pointer;
    background: url("../img/bcg_strankovani_right.png") right 0px no-repeat;
    padding: 2px 25px 0px 0px;
    font-size: 14px;
    color: #aaaaaa;    
    text-align: right;
    transition: all ease 0.7s;
}

.div-predchozi:hover, .div-nasledujici:hover {
    color: #222221;
}

.div-strankovani-inner {
    float: left;
    text-align: center; 
    width: 60%; 
}


.ssubmit2b {
    width: 30px;
    height: 30px;
    background: none;
    margin: 0px 0px 0px 0px;
    border: none;
    cursor: pointer; 
    background: var(--cmodra);
    color: var(--cbila);
    border-radius: 30px;
    text-align: center;
    transition: all ease 0.7s;      
    padding-top: 3px;
}

.ssubmit2, .ssubmit2b:hover {
    width: 30px;
    height: 30px;
    background: var(--ccervena);
    color: var(--cbila);
    margin: 0px 0px 0px 0px;
    border: none;
    cursor: pointer;   
    text-align: center;
    border-radius: 30px;  
    padding-top: 3px;
}

.div-sloupce {
    column-gap: 40px;
    width: 100%;
    float: left;
}

.div-sloupce2 {
    column-count: 2;
}

.div-sloupce3 {
    column-count: 3;
}

.div-sloupce4 {
    column-count: 4;
}

.div-sloupce5 {
    column-count: 5;
}

.div-img-okraj5f {
        --div_img_okraj5f: calc(25% - 10px);
        width: var(--div_img_okraj5f);
        height: 250px;
        float: left;
        padding: 0px;  
        transition: all ease 0.7s; 
        opacity: 0.8;
        margin: 0px 5px 10px 5px;
        border-radius: 10px;
}

@media only screen and (max-width: 900px) {
    .div-img-okraj5f { 
        --div_img_okraj5f: calc(50% - 10px);
        width: var(--div_img_okraj5f);
    }    
}

@media only screen and (min-width: 900px) and (max-width: 1100px) {
    .div-img-okraj5f { 
        --div_img_okraj5f: calc(33.3333333% - 10px);
        width: var(--div_img_okraj5f);
    }    
}

.div-img-okraj5f:hover {
        opacity: 1;
}

.div-img-inner5f {
        width: 100%;
        height: 250px;
        float: left;
        overflow: hidden;
        border-radius: 5px;

}


.div-img-inner5f img {
        width: 100%;
        height: 250px;
        float: left;
}

.div-blok-file {
    float: left;
    padding: 10px 20px 10px 20px;
    background: var(--cbila);
    margin: 0px 5px 10px 5px;
    --div_blok_file: calc(33.333333% - 52px);
    width: var(--div_blok_file);
    height: 50px;
    border: 1px solid var(--cmodra);
    border-radius: 10px; 
}

body .div-blok-file a, body .div-blok-file a:hover {
    text-decoration: none;
    padding: 18px 0px 15px 60px;
    --div_blok_file: calc(100% - 80px);    
    width: var(--div_blok_file);
    float: left;
    height: 20px;    
}

.div-input {
    width: calc(25% - 20px);
    float: left;
    padding: 5px 20px 0px 0px;
    height: 27px;
    text-align: right;
    margin-bottom: 10px;
}

.input2 {
    width: calc(75% - 22px);
    float: left;
    padding: 10px;
    height: 10px;
    border: 1px solid var(--cmodra);
    transition: all ease 0.7s; 
    background: var(--cbila);
    color: var(--cmodra);
    margin-bottom: 10px;
}

.input3 {
    width: calc(37.5% - 22px);
    float: left;
    padding: 10px;
    height: 10px;
    border: 1px solid var(--cmodra);
    transition: all ease 0.7s; 
    background: var(--cbila);
    color: var(--cmodra);
    margin-bottom: 10px;
}

.select2 {
    width: calc(75% - 2px);
    float: left;
    height: 32px;
    border: 1px solid var(--cmodra);
    transition: all ease 0.7s; 
    background: var(--cbila);
    color: var(--cmodra);
    margin-bottom: 10px;
}

.input2:focus, .input2:hover, .select2:focus, .select2:hover, .input3:focus, .input3:hover {
    border: 1px solid var(--ccervena);
    color: var(--ccervena);
}

.povinne {
      box-shadow: inset -4px 0px 0px #f66a1b;
}

.dialog-message1 {
    width: 50px;
    float: left;
    margin-top: 20px;
}


.dialog-message2 {
    width: 450px;
    float: right;
    margin-top: 20px;
}

.ico {
    cursor: pointer;
    transition: all ease 0.7s;
}

.ico:hover {
    transform: rotate(180deg);
}

.p-otazka {
    width: calc(100% - 20px);
    padding: 10px;
    float: left;
    background: var(--cseda);
    margin: 40px 0px 20px 0px; 
}

.form-input {
    width: calc(100% - 22px);
    padding: 10px;
    float: left;
    transition: all ease 0.7s;
    border: 1px solid var(--cseda2);
}

.form-textarea {
    width: calc(100% - 22px);
    max-width: calc(100% - 22px);
    min-width: calc(100% - 22px);    
    height: 100px;
    padding: 10px;
    float: left;
    transition: all ease 0.7s;
    border: 1px solid var(--cseda2);
}

.form-select {
    width: calc(100% - 2px);
    padding: 10px;
    float: left;
    transition: all ease 0.7s;
    border: 1px solid var(--cseda2);    
}

.form-input:hover, .form-input:focus, .form-select:hover, .form-select:focus, .form-textarea:hover, .form-textarea:focus {
    border: 1px solid var(--ccerna);
}

label {
    float: left;
    padding: 0px 0px 0px 10px;
    cursor: pointer;
    width: calc(100% - 50px);
    line-height: 1.5em;
}

.radio, .checkbox {
    float: left;
    cursor: pointer;
}


input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  margin: 0px 10px 0px 0px;
  width: 1.1em;
  height: 1.1em;
  border: none;
  border-radius: 0.1em;
  cursor: pointer;
  display: grid;
  float: left;
  position: relative;
  top: 3px;  
  place-content: center;    
}

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  margin: 0px 10px 0px 0px;
  width: 1.15em;
  height: 1.15em;
  border: none;
  border-radius: 0.1em;
  cursor: pointer;
  display: grid;
  float: left;
  position: relative;
  top: 3px;  
  place-content: center;   
  border-radius: 50px;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background: #9be1f7;
}

input[type="radio"]::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background: #9be1f7;
  border-radius: 50px;
}

input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
  transform: scale(1);
}

.label-checkbox, .radio {
    padding-top: 5px;
}

.submit {
    color: var(--cbila);
    padding: 20px 40px 20px 40px;
    width: calc(100%);
    cursor: pointer;
    border: none;
    transition: all ease 0.7s;    
    background: var(--cmodra);
    font-size: 1.2em;
    float: left;
}

.submit:hover {
    background: var(--ccervena);
}

.div-sloupec {
    width: calc(33.33333% - 20px);
    float: left;
    padding-right: 20px;
}

@media only screen and (max-width: 1000px) {
    .div-sloupec {
        width: calc(100%);
    }     
}