/* APOLLO + */
/* -- oprava :focus */
:focus-visible,
a:hover:focus-visible:not(:active) {
  outline: none !important;
}

/* -- fix modal */


/* -- clanky layout */
.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.ai-center {
  align-items: center;
}

.ai-end {
  align-items: flex-end;
}

.row.d-flex > * {
  flex-shrink: 0;
  max-width: 100%;
}

.d-flex > div[class^="col-"] {
  flex: 0 0 auto;
}

.b-radius {
  border-radius: 20px;
  overflow: hidden;
}

/* LOXONE PAGE */
.loxone-clanek video {width: 100%; height: auto;}
.loxone-clanek video.mobile {display: none;}
.loxone-clanek .green-blok {background-color: var(--loxone);padding: 20px;margin-top: 30px;}
.loxone.loxone-blok .row > div {margin-bottom: 40px;}
.white-box {padding: 20px; background-color: #fff;height: 100%;}
.white-box h3 {color: var(--black);margin-bottom: 20px;}

/* -- animace textu */
.loxone-anim {position: absolute;width: 100%;text-align: center;margin: 0;color: #fff !important;display: block;top: 40%;font-size: 40px;}
.loxone-anim img {display: block; margin: 20px auto !important;}
#spin {color:var(--loxone);}
#spin:after {content:"";animation: spin 6s linear infinite;}

@keyframes spin {
  0% {content:"inteligentní";}
  50% {content:"bezpečné";}
  100% {content:"efektivní";}
}

@media (min-width: 768px){
  .loxone-anim {top: 25%; font-size: 30px !important;}  
}

@media (min-width: 992px){
  .loxone-anim {top: 25%;}
}

@media (min-width: 1200px){
  .loxone-anim {top: 30%;}
}

@media (max-width: 767px){
  .loxone-clanek video.desktop {display: none;}
  .loxone-clanek video.mobile {display: block;}
  .loxone-anim {top: 30%; font-size: 30px;}
  .loxone-anim img {width: 150px;}  
}

@media (max-width: 467px){
  .loxone-anim {font-size: 20px;}
  .loxone-anim img {width: 120px;}  
}