body {margin: 0px; font-family: 'Roboto Condensed', sans-serif; color: #000000; font-size: 14px; font-weight: 300; background-image: url('/images/zofitherm-bg.png'); background-position: left top 90px;}
body.noBg {background-image: unset;}
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 {box-shadow: inset 0 0 4px rgba(0,0,0,0.15);}
INPUT[type=submit] {cursor: pointer;}
INPUT[type=checkbox] {cursor: pointer;}

textarea {resize: vertical;}

HR {width: 100%; height: 1px; border: 0px; margin: 30px 0px; float: left; background-color: #e8e8e8;}
img {max-width: 100%;}

.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: 1200px; margin: 0px auto;}

/* TinyMCE */
.tinymceCont {width: 100%; float: left; padding: 0px 0px 15px 0px;}
.tinymceCont h1 {font-size: 32px; margin: 20px 0px 20px 0px; padding: 40px 0 0 0; text-align: center;}
.tinymceCont H2 {font-size: 26px; margin: 20px 0px 10px 0px; padding: 40px 0 0 0;}
.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: 16px; margin: 10px 0px 10px 0px; line-height: 1.5; font-weight: 300;}
.tinymceCont ul {width: 100%; float: left; padding: 0; margin: 10px 0; font-size: 16px; line-height: 1.6; font-weight: 300; 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: #505759; border-radius: 50%;}
.tinymceCont A {text-decoration: underline;}

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

.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);}

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

.tlacitko {display: inline-block; margin: 15px 0;}
.tlacitko a {padding: 14px 32px; border: 2px solid #8a639e; text-decoration: none; color: #8a639e; font-weight: 500; font-size: 14px; transition: all 0.5s ease;}
.tlacitko a:hover {background-color: #8a639e; color: #ffffff;}

.text-modra {color: #0094c1;}

/* 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 */

.tinymceBlokImageText {width: 100%; display: flex; justify-content: center; margin: 20px 0px;}
.tinymceBlokImageText .blokImageFrame {width: 400px; display: flex; flex-grow: 0; flex-shrink: 0; align-items: center;}
.tinymceBlokImageText .blokImageFrame IMG {width: calc(100% - 20px); margin: 20px 20px 20px 0px;}
.tinymceBlokImageText .blokTextFrame {width: 400px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
@media only screen
and (max-width: 820px)
{
  .tinymceCont .tinymceBlokImageText {flex-direction: column; align-items: center;}
  .tinymceCont .tinymceBlokImageText .blokTextFrame :first-child {margin-top: 0px;}
  .tinymceCont .tinymceBlokImageText .blokImageFrame IMG {width: 100%; margin: 20px 0px 20px 0px;}
}
@media only screen
and (max-width: 420px)
{
  .tinymceCont .tinymceBlokImageText .blokImageFrame {width: 100%;}
  .tinymceCont .tinymceBlokImageText .blokTextFrame {width: 100%;}
  .tinymceCont .tinymceBlokImageText .blokTextFrame :first-child {margin-top: 0px;}
}



.tinymceBlokTextImage {width: 100%; display: flex; justify-content: center; margin: 20px 0px;}
.tinymceBlokTextImage .blokImageFrame {width: 400px; display: flex; flex-grow: 0; flex-shrink: 0; align-items: center;}
.tinymceBlokTextImage .blokImageFrame IMG {width: calc(100% - 20px); margin: 20px 0px 20px 20px;}
.tinymceBlokTextImage .blokTextFrame {width: 400px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
@media only screen
and (max-width: 820px)
{
  .tinymceCont .tinymceBlokTextImage {flex-direction: column; align-items: center;}
  .tinymceCont .tinymceBlokTextImage .blokTextFrame {order: 2;}
  .tinymceCont .tinymceBlokTextImage .blokImageFrame {order: 1;}
  .tinymceCont .tinymceBlokTextImage .blokTextFrame :first-child {margin-top: 0px;}
  .tinymceCont .tinymceBlokTextImage .blokImageFrame IMG {width: 100%; margin: 20px 0px 20px 0px;}
}
@media only screen
and (max-width: 420px)
{
  .tinymceCont .tinymceBlokTextImage .blokImageFrame {width: 100%;}
  .tinymceCont .tinymceBlokTextImage .blokTextFrame {width: 100%;}
  .tinymceCont .tinymceBlokTextImage .blokTextFrame :first-child {margin-top: 0px;}
}



.tinymceBlok2ImageText {width: 100%; display: flex; justify-content: center; margin: 20px 0px;}
.tinymceBlok2ImageText .blokImageFrame {width: 600px; display: flex; flex-grow: 0; flex-shrink: 0; align-items: center;}
.tinymceBlok2ImageText .blokImageFrame IMG {width: calc(100% - 20px); height: auto; margin: 20px 20px 20px 0px;}
.tinymceBlok2ImageText .blokTextFrame {width: 600px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
@media only screen
and (max-width: 1220px)
{
  .tinymceCont .tinymceBlok2ImageText {flex-direction: column; align-items: center;}
  .tinymceCont .tinymceBlok2ImageText .blokTextFrame :first-child {margin-top: 0px;}
  .tinymceCont .tinymceBlok2ImageText .blokImageFrame IMG {width: 100%; margin: 20px 0px 20px 0px;}
}
@media only screen
and (max-width: 620px)
{
  .tinymceCont .tinymceBlok2ImageText .blokImageFrame {width: 100%;}
  .tinymceCont .tinymceBlok2ImageText .blokTextFrame {width: 100%;}
  .tinymceCont .tinymceBlok2ImageText .blokTextFrame :first-child {margin-top: 0px;}
}



.tinymceBlok3TextImage {width: 100%; display: flex; justify-content: center; margin: 20px 0px;}
.tinymceBlok3TextImage .blokImageFrame {width: 600px; display: flex; flex-grow: 0; flex-shrink: 0; align-items: center;}
.tinymceBlok3TextImage .blokImageFrame IMG {width: calc(100% - 20px); margin: 20px 0px 20px 20px;}
.tinymceBlok3TextImage .blokTextFrame {width: 600px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
@media only screen
and (max-width: 1220px)
{
  .tinymceCont .tinymceBlok3TextImage {flex-direction: column; align-items: center;}
  .tinymceCont .tinymceBlok3TextImage .blokTextFrame {order: 2;}
  .tinymceCont .tinymceBlok3TextImage .blokImageFrame {order: 1;}
  .tinymceCont .tinymceBlok3TextImage .blokTextFrame :first-child {margin-top: 0px;}
  .tinymceCont .tinymceBlok3TextImage .blokImageFrame IMG {width: 100%; margin: 20px 0px 20px 0px;}
}
@media only screen
and (max-width: 620px)
{
  .tinymceCont .tinymceBlok3TextImage .blokImageFrame {width: 100%;}
  .tinymceCont .tinymceBlok3TextImage .blokTextFrame {width: 100%;}
  .tinymceCont .tinymceBlok3TextImage .blokTextFrame :first-child {margin-top: 0px;}
}



.tinymceBlokImages {width: 100%; display: flex; justify-content: center; margin: 20px 0px;}
.tinymceBlokImages .blokImageFrame {width: calc(400px - 15px); display: flex; flex-grow: 0; flex-shrink: 0; align-items: center; margin: 20px 20px 20px 0px;}
.tinymceBlokImages .blokImageFrame IMG {width: 100%; height: auto;}
.tinymceBlokImages .blokImageFrame:last-child {margin-right: 0px;}
@media only screen
and (max-width: 1240px)
{
  .tinymceCont .tinymceBlokImages {}
  .tinymceCont .tinymceBlokImages .blokImageFrame {width: calc(33.33% - 15px);}
}
@media only screen
and (max-width: 600px)
{
  .tinymceCont .tinymceBlokImages {flex-direction: column; align-items: center;}
  .tinymceCont .tinymceBlokImages .blokImageFrame {width: 300px; margin-right: 0px;}
}
@media only screen
and (max-width: 420px)
{
  .tinymceCont .tinymceBlokImages .blokImageFrame {width: 100%;}
}



.tinymceBlokContactList {width: 100%; display: flex; justify-content: center; margin: 20px 0px;}
.tinymceBlokContactList .tinymceBlokContact {width: calc(500px - 10px); display: flex; flex-grow: 0; flex-shrink: 0; align-items: center; margin: 0px 20px 0px 0px;}
.tinymceBlokContactList .tinymceBlokContact .blokImageFrame {width: 200px; display: flex; flex-grow: 0; flex-shrink: 0; align-items: center; margin: 0px 20px 0px 0px;}
.tinymceBlokContactList .tinymceBlokContact .blokImageFrame IMG {width: 100%; height: auto;}
.tinymceBlokContactList .tinymceBlokContact .blokTextFrame {width: 280px; flex-grow: 0; flex-shrink: 0;}
.tinymceBlokContactList .tinymceBlokContact .blokTextFrame P {width: 100%; margin: 5px 0px 5px 0px;}
.tinymceBlokContactList .tinymceBlokContact:last-child {margin-right: 0px;}
@media only screen
and (max-width: 1040px)
{
  .tinymceBlokContactList .tinymceBlokContact {width: calc(50% - 10px);}
  .tinymceBlokContactList .tinymceBlokContact .blokImageFrame {width: 40%;}
  .tinymceBlokContactList .tinymceBlokContact .blokTextFrame {width: 60%;}
}
@media only screen
and (max-width: 700px)
{
  .tinymceBlokContactList {flex-direction: column; align-items: center;}
  .tinymceBlokContactList .tinymceBlokContact {width: 500px; margin: 0px 0px 20px 0px;}
  .tinymceBlokContactList .tinymceBlokContact .blokImageFrame {width: 40%;}
  .tinymceBlokContactList .tinymceBlokContact .blokTextFrame {width: 60%;}
}
@media only screen
and (max-width: 520px)
{
  .tinymceBlokContactList .tinymceBlokContact {width: 100%;}
}