BODY {margin: 0px; font-family: "Poppins", sans-serif; color: #282828; font-size: 14px; }
A {color: inherit; text-decoration: none;}
P {line-height: 1.4; margin: 0px;}
INPUT, TEXTAREA, SELECT {padding: 0px; margin: 0px; border: 1px #ccc solid; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; font-family: inherit; font-size: inherit; color: inherit; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
INPUT:FOCUS, TEXTAREA:FOCUS, SELECT:FOCUS {}
INPUT[type=submit] {cursor: pointer;}
INPUT[type=checkbox] {cursor: pointer;}
input:focus {outline: none;}
HR {width: 100%; height: 1px; border: 0px; margin: 30px 0px; float: left; background-color: #e8e8e8;}
form {margin: 0;}
img {max-width: 100%;}

button.submit:hover,
button.submit:focus,
button.submit:active {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
}

.box {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.hidden {display: none;}
.line {width: 100%; float: left;}
.flexbox {display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
.mainFrame {width: 1450px; margin: 0px auto;}

/* TinyMCE */
.tinymceCont {width: 100%; float: left; padding: 0px 0px 15px 0px;}
.tinymceCont h1 {font-size: 30px; margin: 10px 0px 10px 0px; text-transform: uppercase;}
.tinymceCont h2 {position: relative; font-size: 26px; margin: 20px 0px 10px 0px; padding: 20px 0 0 0; color: #e30d26;}
.tinymceCont h2:before {content: ''; position: absolute; left: 0; top: 0; width: 235px; height: 2px; display: inline-block; background-color: #e30d26;}
.tinymceCont h3 {font-size: 22px; margin: 20px 0px 10px 0px;}
.tinymceCont h4 {font-size: 20px; margin: 20px 0px 10px 0px;}
.tinymceCont h5 {font-size: 20px; margin: 20px 0px 10px 0px;}
.tinymceCont h6 {font-size: 18px; margin: 20px 0px 10px 0px;}
.tinymceCont p {font-size: 18px; margin: 14px 0px 14px 0px; line-height: 1.5; font-weight: 400;}
.tinymceCont ul {width: 100%; float: left; padding: 0; margin: 10px 0; font-size: 18px; line-height: 1.6; font-weight: 400; list-style: none;}
.tinymceCont ul li {position: relative; padding: 1px 0 1px 20px; margin: 0 0 0 0;}
.tinymceCont ul li:before {content: ''; position: absolute; display: block; left: 0; top: 12px; width: 4px; height: 4px; background-color: #e30d26; border-radius: 50%;}

.tinymceCont ol {
  list-style: none;       /* skryje defaultní číslování */
  counter-reset: li;      /* reset číslování */
  padding-left: 0;
  font-weight: 400;
  font-size: 18px;
}

.tinymceCont ol li {
  counter-increment: li;  /* navýšení číslování */
  padding: 1px 0 1px 20px;
  margin: 0 0 0 0;
  text-indent: -2em;      /* posune první řádek vlevo */
}

.tinymceCont ol li::before {
  content: counter(li) ".";
  display: inline-block;
  width: 1.5em;           /* šířka prostoru pro číslo */
  text-align: right;      /* číslo zarovnáno doprava */
  margin-right: 0.5em;    /* mezera mezi číslem a textem */
}

.tinymceCont A {text-decoration: underline;}

.telefon {display: inline-block; padding: 10px 20px 10px 55px; margin: 20px 10px 0 0; background-color: #e30d26; color: #ffffff; font-size: 24px; font-weight: 700; border-radius: 20px;}
.telefon {background-size: 36px; background-image: url("/images/svg/telefon-phone.svg"); background-repeat: no-repeat; background-position: left 10px center;}

.obrazek-vlevo {float: left; margin: 0px 20px 10px 0px;}
.obrazek-vpravo {float: right; margin: 0px 0px 10px 20px;}

@media only screen
and (max-width: 650px)
{
  .obrazek-vlevo {float: none; margin: 10px auto;}
  .obrazek-vpravo {float: none; margin: 10px auto;}
}

.mt-0 {margin-top: 0px !important;}
.mt-10 {margin-top: 10px !important;}

.spinner {width: 50px; height: 50px; border: 5px solid #ccc; border-top: 5px solid #e30d26; border-radius: 50%; animation: spin 1s linear infinite; margin: 50px auto;}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.photoRamecek {position: relative;}
.photoRamecek:after {content: ''; position: absolute; left: 40px; top: 40px; width: calc(100% - 80px); height: calc(100% - 80px); border: 2px solid #fff;}

.photoAnimationLeft {transform: translateX(100%); transition: transform 2s ease-in-out;}
.photoAnimationLeft.active {transform: translateX(0);}

.photoAnimationRight {transform: translateX(-100%); transition: transform 2s ease-in-out;}
.photoAnimationRight.active {transform: translateX(0);}

.tlacitko {display: inline-block; margin: 15px 0;}
.tlacitko a {padding: 14px 32px; text-decoration: none; background-color: #e30d26; color: #ffffff; font-weight: 300; font-size: 14px; transition: all 0.5s ease; border-radius: 20px;}
.tlacitko a:hover {background-color: #c3051b;}

.tlacitko-modre {display: inline-block; margin: 15px 0;}
.tlacitko-modre a {padding: 14px 32px; text-decoration: none; background-color: #005b9a; color: #ffffff; font-weight: 300; font-size: 14px; transition: all 0.5s ease; border-radius: 20px;}
.tlacitko-modre a:hover {background-color: #1c80c6;}

/* Overlay */
#loaderOverlay {width: 100%; height: 100%; float: left; background-color: rgba(0,0,0,0.3); position: fixed; top: 0px; left: 0px; display: none; z-index: 1000;}
#loaderOverlay .inner {width: 100%; height: 100%; float: left; display: flex; justify-content: space-around; align-items: center;}
#loaderOverlay P {color: #FFF; font-size: 18px !important; font-weight: 500;}

/* Šablony pro TinyMce */

.tinymceTextBlokPhotoRight {display: flex; margin: 15px 0; justify-content: space-between; align-items: center;}
.tinymceTextBlokPhotoRight .text {width: 49%; font-size: 14px; margin: 10px 0px 10px 0px; line-height: 1.5; font-weight: 300;}
.tinymceTextBlokPhotoRight .photo {position: relative; width: auto; max-width: 49%; /*padding: 15px 0 0 15px;*/ padding: 0; display: flex; justify-content: flex-end; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
/*.tinymceTextBlokPhotoRight .photo:before {content: ''; position: absolute; z-index: 0; left: 0; top: 0; width: 140px; height: 140px; background-color: #d0202c;}*/
.tinymceTextBlokPhotoRight .photo img {position: relative; transform: translateX(100%); transition: transform 2s ease-in-out;}
.tinymceTextBlokPhotoRight .photo img.active {transform: translateX(0);}

.tinymceTextBlokPhotoLeft {display: flex; margin: 15px 0; justify-content: space-between; align-items: center;}
.tinymceTextBlokPhotoLeft .text {width: 49%; font-size: 14px; margin: 10px 0px 10px 0px; line-height: 1.5; font-weight: 300;}
.tinymceTextBlokPhotoLeft .photo {position: relative; width: 49%; /*padding: 15px 0 0 15px;*/ padding: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
/*.tinymceTextBlokPhotoLeft .photo:before {content: ''; position: absolute; z-index: 0; left: 0; top: 0; width: 140px; height: 140px; background-color: #d0202c;}*/
.tinymceTextBlokPhotoLeft .photo img {position: relative; transform: translateX(-100%); transition: transform 2s ease-in-out;}
.tinymceTextBlokPhotoLeft .photo img.active {transform: translateX(0);}

.tinymceTextBlok4Cells {display: flex; margin: 15px 0; justify-content: space-between;}
.tinymceTextBlok4Cells .text {width: calc(50% - 20px); line-height: 1.5; font-weight: 300;}
.tinymceTextBlok4Cells .text h2 {margin: 10px 0; padding: 0;}
.tinymceTextBlok4Cells .text h2:before {display: none;}
.tinymceTextBlok4Cells .right {width: calc(50% - 20px); display: flex; flex-wrap: wrap;}
.tinymceTextBlok4Cells .right .cell {width: calc(50% - 20px); margin: 10px; padding: 10px; background-color: #eaeaea; color: #d0202c; text-align: center; font-weight: 400;}
.tinymceTextBlok4Cells .right .cell {display: flex; align-items: center; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

@media only screen
and (max-width: 800px)
{
  .tinymceTextBlokPhotoRight {flex-direction: column;}
  .tinymceTextBlokPhotoRight .text {width: 100%;}
  .tinymceTextBlokPhotoRight .photo {max-width: 100%;}

  .tinymceTextBlokPhotoLeft {flex-direction: column;}
  .tinymceTextBlokPhotoLeft .text {width: 100%;}
  .tinymceTextBlokPhotoLeft .photo {max-width: 100%;}

  .tinymceTextBlok4Cells {flex-direction: column;}
  .tinymceTextBlok4Cells .text {width: 100%;}
  .tinymceTextBlok4Cells .right {width: 100%;}
}

@media only screen
and (max-width: 600px)
{
  .tinymceTextBlokPhotoRight .photo:before {display: none;}
  .tinymceTextBlokPhotoLeft .photo:before {display: none;}
}


@media only screen
and (max-width: 400px) {
  .tinymceTextBlok4Cells .right {flex-direction: column;}
  .tinymceTextBlok4Cells .right .cell {width: 100%; margin: 5px 0;}
}