/*
Template Name: fibre
Theme URL: http://www.egotype.com/fibre/
Description: Landing Page
Author: Egotype
Author URL: http://www.egotype.com
Version: 1.0
Tags: Landing Page, HTML5, CSS3, Bootstrap, Jquery, Marketing Landing page,
App Landing page, WebApp Landing page
*/

/* ___________________________________________

                   CONTENT
   ___________________________________________ */

/*   01. General Styles                        */
/*   02. Typography                            */
/*   03. Backgrounds                           */
/*   04. Buttons, Links                        */
/*   05. Forms                                 */
/*   06. Panel                                 */
/*   07. Carousel, Loader                      */
/*   08. Spacing & Alignment                   */
/*   09. Navigation Header                     */
/*   10. Hero Section                          */
/*   11. Function Section                      */
/*   12. Features Section                      */
/*   13. Download Section                      */
/*   14. Pricing Section                       */
/*   15. Video Section                         */
/*   16. Testimonials Section                  */
/*   17. Newsletter Section                    */
/*   18. Facts Section                         */

/* _____________________________________

   01. General Styles
   _____________________________________ */

html, body {
  position: relative;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
}

.light-version {
  color: #444;
}

.dark-version {
  color: #bfbfbf;
}

/* ----------------------------------
   Bootstrap Fix: IE10
   in Windows 8 & Windows Phone 8
   ---------------------------------- */

@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* _____________________________________

   02. Typography
   _____________________________________ */

h1, .h1,
h2, .h2,
p, .lead {
  margin-top: 0;
  margin-bottom: 25px;
}

h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
  margin-bottom: 10px;
}

h1, .h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: #515151;
}

h2, .h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    color: #515151;
}

h3, .h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

h4, .h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

h5, .h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

h6, .h6 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

h1:last-child, .h1:last-child,
h2:last-child, .h2:last-child,
h3:last-child, .h3:last-child,
h4:last-child, .h4:last-child,
h5:last-child, .h5:last-child,
h6:last-child, .h6:last-child,
p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 800;
}

.medium {
    font-weight: 600;
}

/* ----------------------------------
   Font Colors
   ---------------------------------- */

.text-color {
  color: #2197F4;
}

.text-orange {
    color: #FF7E3E;
}

.text-blue {
    color: #43AED0;
}

.text-yellow {
    color: #F4BF21;
}

.text-green {
    color: #69A036;
}

.text-dark {
  color: #444;
}

.text-silver {
  color: #bfbfbf;
}

.text-white {
  color: #fff;
}

/* ----------------------------------
   Icons
   ---------------------------------- */

.icon-sm {
  padding: 10px 0;
}

.icon-sm .icon {
  font-size: 32px;
}

.icon-md {
  padding: 15px 0;
}

.icon-md .icon {
  font-size: 48px;
}

.icon-lg {
  padding: 20px 0;
}

.icon-lg .icon {
  font-size: 80px;
}

.icon-color {
  color: #2197F4;
}

.icon-left {
    float: left;
    top: 32px;
    left: 48px;
    position: absolute;
}

@media only screen and (max-width: 991px) {
    .icon-left {
        float: unset;
        top: unset;
        left: unset;
        position: unset;
    }
}

/* ----------------------------------
   Tooltip
   ---------------------------------- */

.tooltip {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tooltip-inner {
  display: block;
  text-align: left;
  white-space: pre-line;
}

/* _____________________________________

   03. Backgrounds
   _____________________________________ */

.bg-color {
  background-color: #2197F4;
}

.bg-color-light {
  background-color: #F7F7F7;
}

.bg-color-dark {
  background-color: #379bbc;
}

.bg-white {
  background-color: #fff;
}

.bg-light {
  background-color: #f7f7f7;
}

.bg-lightgrey {
  background-color: #f4f4f4;
}

.bg-silver {
  background-color: #bfbfbf;
}

.bg-grey {
  background-color: #4f4f4f;
}

.bg-darkgrey {
  background-color: #494949;
}

.bg-dark {
  background-color: #444444;
}

.bg-black {
  background-color: #000;
}

/* _____________________________________

   04. Buttons, Links
   _____________________________________ */

a:hover {
  text-decoration: none;
}

a.link-color,
i.link-color {
  color: #2197F4;
  text-decoration: none;
  outline: 0;
}

a.link-color:hover,
a.link-color:active,
a.link-color:focus,
i.link-color:hover,
i.link-color:active,
i.link-color:focus {
  color: #379bbc;
  text-decoration: none;
}

a.link-white,
i.link-white,
a.link-white:link {
  color: #fff;
}

i.link-white:hover,
a.link-white:hover {
  color: #d9d9d9;
}

a.link-silver,
a.link-silver:link {
  color: #bfbfbf;
}

a.link-silver:hover {
  color: #a8a8a8;
}

a.link-dark,
a.link-dark:link {
  color: #444;
}

a.link-dark:hover {
  color: #222;
}

.btn,
a.btn {
    display: inline-block;
    margin: 5px !important;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 13px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 27px;
    border: none;
    transition: background .3s ease-in-out;
}

.btn:first-child {
  margin-left: 0 !important;
}

.btn:last-child {
  margin-right: 0 !important;
}

.btn:active,
a.btn:active {
  box-shadow: none;
}

.btn-xs,
a.btn-xs {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  border: none;
  border-radius: 9px;
}

.btn-sm,
a.btn-sm {
  padding: 4px 20px;
  font-size: 14px;
  border: none;
  border-radius: 15px;
}

.btn-lg,
a.btn-lg {
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 21px;
}

.btn i {
  margin-right: 10px;
}

.btn[type="submit"] i {
  margin: 0;
}

/* ----------------------------------
   Buttons Circle
   ---------------------------------- */

.btn-circle {
  display: block;
  height: 34px;
  width: 34px;
  margin: 0;
  text-align: center;
  line-height: 32px;
  transition: background .3s ease-in-out;
  border-radius: 50%;
  border: none;
}

.btn-circle-xs {
  width: 17px;
  height: 17px;
  font-size: 10px;
  line-height: 17px;
}

.btn-circle-sm {
  height: 30px;
  width: 30px;
  font-size: 14px;
  line-height: 30px;
}

.btn-circle-lg {
  height: 42px;
  width: 42px;
  font-size: 16px;
  line-height: 38px;
}

/* ----------------------------------
   Social Buttons
   ---------------------------------- */

ul.social {
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.social > li {
  float: left;
  margin: 5px;
}

.social > li > a {
  margin: 0;
}

.social > li:first-child {
  margin-left: 0;
}

.social > li:last-child {
  margin-right: 0;
}

.text-center .social > li:first-child {
  margin-left: 5px;
}

.text-center .social > li:last-child {
  margin-right: 5px;
}

/* ----------------------------------
   Top Button
   ---------------------------------- */

.btn-top {
  position: fixed;
  bottom: 80px;
  right: 0;
  z-index: 500;
  display: none;
  margin-right: 20px;
  font-size: 24px;
  line-height: 40px;
  cursor: pointer;
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.btn-top:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}

/* ----------------------------------
   Buttons Color
   ---------------------------------- */

.btn-color,
.inverse a.btn-color {
  color: #fff !important;
  background-color: #2197F4;
}

.btn-color-orange {
    background-color: #FF7E3E;
    color: #fff !important;
}

    .btn-color-orange:hover,
    .btn-color-orange:active,
    .btn-color-orange:focus {
        background-color: #E15C1A !important;
    }

.btn-color-blue {
    background-color: #43AED0;
    color: #fff !important;
}

    .btn-color-blue:hover,
    .btn-color-blue:active,
    .btn-color-blue:focus {
        background-color: #016A8B !important;
    }

.btn-color-yellow {
    background-color: #F4BF21;
    color: #fff !important;
}

    .btn-color-yellow:hover,
    .btn-color-yellow:active,
    .btn-color-yellow:focus {
        background-color: #DA8F00 !important;
    }

.btn-color-green {
    background-color: #69A036;
    color: #fff !important;
}

    .btn-color-green:hover,
    .btn-color-green:active,
    .btn-color-green:focus {
        background-color: #40780B !important;
    }

.btn-color-red {
    background-color: #D60016;
    color: #fff !important;
}

    .btn-color-red:hover,
    .btn-color-red:active,
    .btn-color-red:focus {
        background-color: #AC0011 !important;
    }

.btn-color:hover,
.btn-color:active,
.btn-color:focus {
  background-color: #379bbc !important;
}

.btn-border-color,
a.btn-border-color {
  color: #2197F4 !important;
  background-color: white;
  border: 1px solid #2197F4;
}

.btn-border-orange,
a.btn-border-orange {
    color: #FF7E3E !important;
    background-color: transparent;
    border: 1px solid #FF7E3E;
}

.btn-border-blue,
a.btn-border-blue {
    color: #43AED0 !important;
    background-color: transparent;
    border: 1px solid #43AED0;
}

.btn-border-yellow,
a.btn-border-yellow {
    color: #F4BF21 !important;
    background-color: transparent;
    border: 1px solid #F4BF21;
}

.btn-border-green,
a.btn-border-green {
    color: #69A036 !important;
    background-color: transparent;
    border: 1px solid #69A036;
}

.btn-whitebg {
    background-color:white!important;
}

.btn-border-color:hover,
.btn-border-color:active,
.btn-border-color:focus {
  color: #379bbc !important;
  border: 1px solid #379bbc;
}

.input-group .btn-border-color:hover,
.input-group .btn-border-color:active,
.input-group .btn-border-color:focus {
  border: 1px solid #6b7b8a;
}


/* ----------------------------------
   Buttons Link
   ---------------------------------- */

.btn-link {
    background-color: transparent;
    color: #2197F4;
    padding-left: 15px !important;
    padding-right: 20px !important;
}

    .btn-link:hover,
    .btn-link:active,
    .btn-link:focus {
        background-color: #2197F4;
        color:white;
        text-decoration:none;
    }

        .btn-link:hover i {
            color:white;
        }
        /* ----------------------------------
   Buttons White
   ---------------------------------- */
        .btn-white,
        .inverse a.btn-white {
            color: #444 !important;
            background-color: #fff;
        }

.btn-white:hover,
.btn-white:active,
.btn-white:focus {
  background-color: #d9d9d9;
}

.btn-border-white,
a.btn-border-white {
  color: #fff !important;
  background-color: transparent;
  border: 1px solid #fff;
}

.btn-border-white:hover,
.btn-border-white:active,
.btn-border-white:focus {
  color: #d9d9d9 !important;
  border: 1px solid #d9d9d9;
}

.input-group .btn-border-white:hover,
.input-group .btn-border-white:active,
.input-group .btn-border-white:focus {
  border: 1px solid #fff;
}

/* ----------------------------------
   Buttons Silver
   ---------------------------------- */

.btn-silver,
.inverse a.btn-silver {
  color: #fff !important;
  background-color: #bfbfbf;
}

.btn-silver:hover,
.btn-silver:active,
.btn-silver:focus {
  background-color: #a8a8a8;
}

.btn-border-silver,
a.btn-border-silver {
  color: #bfbfbf !important;
  background-color: transparent;
  border: 1px solid #bfbfbf;
}

.btn-border-silver:hover,
.btn-border-silver:active,
.btn-border-silver:focus {
  color: #a8a8a8 !important;
  border: 1px solid #a8a8a8;
}

.input-group .btn-border-silver:hover,
.input-group .btn-border-silver:active,
.input-group .btn-border-silver:focus {
  border: 1px solid #bfbfbf;
}

/* ----------------------------------
   Buttons Grey
   ---------------------------------- */

.btn-grey,
.inverse a.btn-grey {
  color: #fff !important;
  background-color: #4f4f4f;
}

.btn-grey:hover,
.btn-grey:active,
.btn-grey:focus {
  background-color: #434343;
}

.btn-border-grey,
a.btn-border-grey {
  color: #4f4f4f !important;
  background-color: transparent;
  border: 1px solid #4f4f4f;
}

.btn-border-grey:hover,
.btn-border-grey:active,
.btn-border-grey:focus {
  color: #4f4f4f !important;
  border: 1px solid #434343;
}

.input-group .btn-border-grey:hover,
.input-group .btn-border-grey:active,
.input-group .btn-border-grey:focus {
  border: 1px solid #474747;
}

/* _____________________________________

   05. Forms
   _____________________________________ */

.form-control {
    padding: 22px 12px;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: none;
    appearance: none;
    outline: 0;
}

textarea.form-control {
  border-radius: 10px;
  resize: none;
}

.input-group .form-control:first-child {
  border-right: none;
}

.input-group-btn:last-child > .btn {
  border-left: none;
}

.input-group .btn {
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 !important;
  color: #2197F4 !important;
}

.form-control:focus,
.form-control:focus + .input-group-btn .btn {
  border-color: #2197F4;
  box-shadow: none;
  outline: none;
}

.error .form-control,
.error .btn {
  border-color: #2197F4 !important;
}

/* ----------------------------------
   Form White
   ---------------------------------- */

.form-control-white {
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
}

.form-control.form-control-silver::-moz-placeholder {
  color: #fff;
}

.form-control.form-control-silver:-ms-input-placeholder {
  color: #fff;
}

.form-control.form-control-silver::-webkit-input-placeholder {
  color: #fff;
}

/* ----------------------------------
   Form Silver
   ---------------------------------- */

.form-control-silver {
    color: #000;
    background-color: #fff;
    border: 1px solid #D7D7D7;
}

.form-control.form-control-silver::-moz-placeholder {
    color: #D7D7D7;
}

.form-control.form-control-silver:-ms-input-placeholder {
    color: #D7D7D7;
}

.form-control.form-control-silver::-webkit-input-placeholder {
    color: #D7D7D7;
}

/* ----------------------------------
   Validation Message
   ---------------------------------- */

#message-newsletter,
#message-contact {
  display: none;
}

.message {
  color: #2197F4;
  margin: 0 auto;
}

.message-icon {
  display: block;
  height: 30px;
  width: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #2197F4;
  border-radius: 50%;
}

.message span {
  display: inline-block;
}

.message-text {
  margin: 10px 5px;
  font-weight: 600;
}

/* _____________________________________

   06. Panel
   _____________________________________ */

.panel {
  border: none;
  border-radius: 5px;
}

.panel-color {
  border-color: #2197F4;
}

.panel-group .panel {
  margin-bottom: 7px;
  border-radius: 5px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border: none;
}

.panel-heading {
  padding: 10px 15px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
}

.panel.active > .panel-heading {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #fff;
}

.panel-color > .panel-heading {
  color: #fff;
  background-color: #2197F4;
}

.panel-color.active > .panel-heading {
  color: #2197F4;
}

.panel-body {
  padding-top: 3px;
}

.panel-title {
  font-weight: 400;
  line-height: 30px;
}

.panel-title .icon {
  float: right;
  font-size: 30px;
  line-height: 10px;
  width: 25px;
  height: 30px;
}

/* _____________________________________

   07. Slider, Carousel, Loader
   _____________________________________ */

.rs-dot .tp-bullet {
  height: 4px;
  width: 4px;
  background-color: #bfbfbf;
  border-radius: 2px;
}

.light-version .rs-dot .tp-bullet.selected {
  background-color: #999;
}

.dark-version .rs-dot .tp-bullet.selected,
.dark-version .rs-dot .tp-bullet:hover {
  background-color: #2197F4;
}

.tp-bannertimer {
  background-color: #2197F4;
  height: 2px;
  top: 100%;
  margin-top: -2px;
}

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 20px;
}

.owl-theme .owl-dots {
  text-align: center;
}

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  vertical-align: middle;
}

.owl-theme .owl-dots .owl-dot span {
  display: block;
  height: 10px;
  width: 10px;
  margin: 4px 3px;
  background-color: #bfbfbf;
  border-radius: 5px;
  transition: opacity 200ms ease;
}

.light-version .owl-theme .owl-dots .owl-dot.active span,
.light-version .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #2197F4;
    height: 18px;
    width: 18px;
    border-radius: 10px;
}

.dark-version .owl-theme .owl-dots .owl-dot.active span,
.dark-version .owl-theme .owl-dots .owl-dot:hover span {
  background-color: #2197F4;
}

/* ----------------------------------
   Loader
   ---------------------------------- */

.loader {
  position: fixed;
  z-index: 1200;
  display: table;
  height: 100%;
  width: 100%;
}

.loader-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.ball-pulse-color > div {
  background-color: #2197F4;
}

/* _____________________________________

   08. Spacing, Alignment, Helperclasses
   _____________________________________ */

.hor-middle {
  margin: 0 auto;
}

.vert-middle-sm,
.vert-middle-md,
.vert-middle-lg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-p-lg {
  padding: 55px 0 60px;
}

.section-p-md {
  padding: 40px 0;
}

.section-p-sm {
  padding: 20px 0;
}

.wrapper-v-lg {
  padding-top: 16px;
  padding-bottom: 16px;
}

.wrapper-v-md {
  padding-top: 10px;
  padding-bottom: 10px;
}

.wrapper-v-sm {
  padding-top: 5px;
  padding-bottom: 5px;
}

.logo-wrapper {
  margin-left: 4px;
  vertical-align: text-top;
}

.block-line .block {
  display: inline-block;
  padding: 0 6px;
  margin-bottom: 0;
  vertical-align: middle;
}

.block-line .block:first-child {
  padding-left: 0;
}

.block-line .block:last-child {
  padding-right: 0;
}

.separator {
  margin: 0 5px
}

.ov-hidden {
  overflow: hidden;
}

.pos-relative {
  position: relative;
}

.section-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.opacity-90 {
  filter: alpha(opacity=90);
  opacity: 0.9;
}

/* _____________________________________

   09. Navigation Header
   _____________________________________ */

.navbar {
  padding: 18px 5px 18px 5px;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}

.navbar-brand {
  padding: 4px 15px;
  height: auto;
}

.logo-wg span {
  background: url("../images/logo-silver.png") no-repeat center;
}

.logo-color span {
  background: url("../images/logo-blue.png") no-repeat center;
}

.navbar-brand span {
  display: block;
  background-size: auto 28px;
  height: 28px;
  width: 190px;
}

.navbar-nav > li > a {
  padding: 10px 15px;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent;
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  background-color: #eee;
  filter: alpha(opacity=100);
  opacity: 1;
}

.navbar-toggle {
  padding: 5px 15px 3px;
  margin-right: 15px;
  border: none;
}

.navbar ul.social {
  display: inherit;
  padding: 0 15px;
}

/* ----------------------------------
   Navbar Transparent / Scroll Color
   ---------------------------------- */

.navbar.navbar-light {
    background-color: #fff;
    transition: all 0.5s ease-in-out;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

.navbar.navbar-dark {
  background-color: #444;
  transition: all 0.5s ease-in-out;
}

.light-nav .navbar-nav > li > a {
  color: #444;
}

.dark-nav .navbar-nav > li > a,
.dark-nav-colored-hero .navbar-dark .navbar-nav > li > a {
  color: #bfbfbf;
}

.dark-nav-colored-hero .navbar-nav > li > a {
  color: #fff;
}

/* ----------------------------------
   Navbar Icon
   ---------------------------------- */

.navbar-icon {
  position: relative;
  height: 20px;
  width: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: .5s ease-in-out;

}

.navbar-icon span {
  position: absolute;
  left: 0;
  display: block;
  height: 2px;
  width: 100%;
  background-color: #2197F4;
  border-radius: 9px;
  filter: alpha(opacity=100);
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.navbar-icon span:nth-child(1) {
  top: 0;
}

.navbar-icon span:nth-child(2) {
  top: 8px;
}

.navbar-icon span:nth-child(3) {
  top: 16px;
}

.navbar-icon.open span:nth-child(1) {
  top: 8px;
  transform: rotate(135deg);
}

.navbar-icon.open span:nth-child(2) {
  left: -40px;
  filter: alpha(opacity=0);
  opacity: 0;
}

.navbar-icon.open span:nth-child(3) {
  top: 8px;
  transform: rotate(-135deg);
}

/* _____________________________________

   10. Hero Section
   _____________________________________ */

.hero-p-v1 {
  padding-top: 208px;
  padding-bottom: 150px;
}

.hero-p-v2 {
  padding-top: 190px;
  padding-bottom: 114px;
}

.hero-p-v3 {
  padding-top: 180px;
}

.hero-image {
  background: url("../images/hero-image-bg.jpg") no-repeat center;
  background-size: cover;
}

.hero-video {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1000;
}

.hero-video img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}

.loaded img {
  filter: alpha(opacity=0);
  opacity: 0;
}

.img-top-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

.img-top-top {
  position: absolute;
  top: 200px;
  right: 0;
  width: 100%;
}

/* _____________________________________

   11. Function Section
   _____________________________________ */

.function-device-shadow {
  /*background: url("../images/function-1-device-shadow.png") no-repeat center;
  background-size: cover;*/
}

.image-watch {
  height: 300px
}

.image-watch img {
  position: absolute;
  top: 15%;
  width: 130%;
}

/* _____________________________________

   12. Features Section
   _____________________________________ */

.features-left {
  text-align: right;
}

.features-right {
  text-align: left;
}

/* _____________________________________

   13. Download Section
   _____________________________________ */

.download-device-shadow {
  background: url("../images/download-device-shadow.png") no-repeat center;
  background-size: cover;
}

/* _____________________________________

   14. Pricing Section
   _____________________________________ */

.price-marker {
  display: table;
  height: 100px;
  width: 100px;
  margin: 25px auto;
  color: #fff;
  background-color: #2197F4;
  border-radius: 50%;
}

.price-plan {
  padding: 30px 0 20px 0;
  border: 1px solid;
  border-radius: 5px;
}

.dark-version .price-plan {
  border-color: #666;
  box-shadow: 1px 1px 1px 0 #5f5f5f;
}

.light-version .price-plan {
  border-color: #eee;
  box-shadow: 1px 1px 1px 0 #f4f4f4;
}

.price {
  display: table-cell;
  margin: 0;
  font-size: 32px;
  line-height: 0.6;
  vertical-align: middle;
}

.price-cent {
  font-size: 50%;
  vertical-align: super;
}

.price-period {
  font-size: 14px;
  white-space: nowrap;
}

.price-details {
  padding-left: 0;
  list-style-type: none;
}

.price-details li {
  margin-bottom: 20px;
}

/* _____________________________________

   15. Video Section
   _____________________________________ */

.video-wrapper {
  position: relative;
  height: 0;
  max-width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 20px;
  overflow: hidden;
}

.video-wrapper {
  cursor: pointer;
}

.video-wrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.video-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  filter: alpha(opacity=35);
  opacity: 0.2;
}

.playbutton {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -63px;
  cursor: pointer;
}

/* _____________________________________

   16. Testimonials Section
   _____________________________________ */

.speech-bubble {
    position: relative;
    padding: 30px 50px;
    border-radius: 5px;
    width: calc(100% - 1px);
}

.speech-bubble p {
  margin-bottom: 2px;
}

.speech-bubble:after {
  position: absolute;
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
  margin-left: -15px;
  border: 15px solid;
  content: " ";
  pointer-events: none;
}

    .speech-bubble:before {
        position: absolute;
        top: 100%;
        left: 50%;
        height: 0;
        width: 0;
        margin-left: -16px;
        border: 16px solid; /* šířka borderu musí být větší oproti :after o tolik, kolik má být border celého speech bubble */
        content: " ";
        pointer-events: none;
    }

.speech-bubble-color {
  color: #fff;
  background-color: #2197F4;
}

.speech-bubble-color:after {
  border-color: #2197F4 transparent transparent;
}

.speech-bubble-light {
    color: #444;
    background-color: #ffffff;
    border: 1px solid #2197f482;
}

.speech-bubble-light:after {
  border-color: #ffffff transparent transparent;
}

    .speech-bubble-light:before {
        border-color: #2197f482 transparent transparent;
    }

.speech-bubble-orange {
    color: #444;
    background-color: #FFF8F5;
    border: 1px solid #FF7E3E;
}

    .speech-bubble-orange:after {
        border-color: #FFF8F5 transparent transparent;
    }

    .speech-bubble-orange:before {
        border-color: #FF7E3E transparent transparent;
    }

.speech-bubble-blue {
    color: #444;
    background-color: #DDF7FF;
    border: 1px solid #43AED0;
}

    .speech-bubble-blue:after {
        border-color: #DDF7FF transparent transparent;
    }

    .speech-bubble-blue:before {
        border-color: #43AED0 transparent transparent;
    }

.speech-bubble-yellow {
    color: #444;
    background-color: #FFF5D8;
    border: 1px solid #F4BF21;
}

    .speech-bubble-yellow:after {
        border-color: #FFF5D8 transparent transparent;
    }

    .speech-bubble-yellow:before {
        border-color: #F4BF21 transparent transparent;
    }

.speech-bubble-green {
    color: #444;
    background-color: #e5edde;
    border: 1px solid #69A036;
}

    .speech-bubble-green:after {
        border-color: #e5edde transparent transparent;
    }

    .speech-bubble-green:before {
        border-color: #69A036 transparent transparent;
    }

.testimonial-details h4 {
    margin-bottom: 0;
}

.testimonial-details p {
  margin-bottom: 10px;
}

.testimonial-img {
    width: 125px;
    height: 125px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.testimonial-details ul.social {
  display: inline-table;
}

.testimonial-slider.owl-carousel .owl-item img {
  display: inline;
  width: auto;
}

/* _____________________________________

   17. Newsletter Section
   _____________________________________ */

.newsletter-image {
  background: url("../images/newsletter-image-bg.jpg") center no-repeat #fcfcfc;
  background-size: cover;
}

/* _____________________________________

   18. Facts Section
   _____________________________________ */

.chart-value {
  font-size: 36px;
  line-height: 3.3;
}

.chart-unit {
  margin-left: 3px;
  font-size: 24px;
}

.circles-valueStroke {
  stroke: #2197F4;
}

.light-version .circles-maxValueStroke {
  stroke: #eee;
}

.dark-version .circles-maxValueStroke {
  stroke: #555;
}

.p-0 {
    padding:0;
}

.pr-5 {
    padding-right:5px;
}

.pr-50 {
    padding-right: 50px;
}

.pl-5 {
    padding-left: 5px;
}
.pl-10 {
    padding-left: 10px;
}

.px-10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.px-5 {
    padding-left: 5px!important;
    padding-right: 5px!important;
}


.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-100 {
    padding-top: 100px;
}

.p-20 {
    padding: 20px;
}

.my-20 {
    margin-bottom:20px;
    margin-top:20px;
}

.mx-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-0 {
    margin-bottom: 0px;
}

.product-list li {
    padding-bottom: 10px;
    padding-left: 10px;
}

    .product-list li::marker {
        font-size: 2em;
        color: #D8D8D8;
        content: "\f111";
        /* padding-top: 20px; */
        font: normal normal normal 14px/1 FontAwesome;
    }

    /* Pokud je ve výčtu odkaz na podstránku, změní se odrážka na jinou ikonu */
    .product-list li:has(a)::marker {
        content: "\f054";
        font: normal normal normal 16px/1 FontAwesome;
    }
        .product-list-orange li:has(a)::marker {
            color: #FF7E3E;
        }

        .product-list-yellow li:has(a)::marker {
            color: #F4BF21;
        }

        .product-list-green li:has(a)::marker {
            color: #69A036;
        }

        .product-list-blue li:has(a)::marker {
            color: #43AED0;
        }

    ul.product-list {
        padding-inline-start: 15px;
    }

.panel-title {
    font-size:20px;
}

.panel.active {
    filter: drop-shadow(0px 0px 5px #00000031);
}

.panel-group .panel {
    border-radius: 5px;
}

.gold {
    color: #FFBA2D
}

label {
    font-weight:400;
}

.reverse-column {
    display: flex;
    flex-direction: row-reverse;
}

@media only screen and (max-width: 767px) {
    .clear {
        clear: both;
    }
    .left-1 {
        margin-left:4.1333%;
    }
    .certificate-container {
        height: 150px;
        max-width:140px;
    }
}

.logo-references {
    border-radius: 10px;
    filter: drop-shadow(0px 0px 5px #00000031);
    padding:5px 10px;
    background: white;
    margin-bottom: 5px;
    max-width:100px;
    margin-left:auto;
    margin-right:auto;
}



.certificate-square {
    width: 50%;
}

.certificate-rectangle {
    width: 50%;
}

.certificate-rectangle, .certificate-square {
    margin: auto;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    display: table-row;
}

.sfa-video, .tpm-video, .ai-video {
    width: 100%;
    border-radius: 10px;
    -webkit-box-shadow: 0px 15px 26px -12px rgba(0,0,0,0.74);
    box-shadow: 0px 15px 26px -12px rgba(0,0,0,0.74)
}

.pamica-video-short {
    box-shadow:unset;
    -webkit-box-shadow: unset;
}

video::-webkit-media-controls-panel {
    background: unset;
}


@media only screen and (min-width: 767px) {
    .certificate-square {
        width: 14.35897436%;
    }

    .certificate-rectangle {
        width: 18.97435897%;
    }

    .pb-l-100{
        padding-bottom:100px;
    }
    .pr-l-50 {
        padding-right:50px;
    }
}


.hide-it {
    display: none;
}

.selected-value {
    font-size: 12px;
}



input[type="range"] {
    margin: auto;
}

.text-smaller {
    font-size:small;
}

.text-small {
    font-size:10px;
}

#third-step table {
    width: 100%;
}

.tr-highlight {
    background: #84f966;
}

.tr-highlight-low {
    background: #b1fb9e;
}

.tr-highlight-lowest {
    background: #d1fbc6;
}

    #email::placeholder {
        color: lightgrey;
    }

    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

.image-icon {
    max-width: 100px;
    margin: auto;
    padding-bottom:20px;
}

.icon-list li {
    padding-bottom: 16px;
    padding-left: 10px;
}

    .icon-list li::marker {
        content: "\f058";
        font: normal normal normal 16px/1 FontAwesome;
    }

.icon-list-hero li {
    padding-bottom: 16px;
    padding-left: 10px;
}

    .icon-list-hero li::marker {
        content: "\f058";
        font: normal normal normal 22px/1 FontAwesome;
    }

.icon-list-orange li::marker {
    color: #FF7E3E;
}

.icon-list-blue li::marker {
    color: #43AED0;
}

.icon-list-yellow li::marker {
    color: #F4BF21;
}

.icon-list-green li::marker {
    color: #69A036;
}

.icon-list-ident {
    padding-inline-start: 40px !important;
}

ul.icon-list-hero {
    padding-inline-start: 20px;
}

.number-list li {
    padding-bottom: 10px;
    padding-left: 10px;
    line-height: 1.8em;
}

   /* .number-list li::marker {
        color: #FF7E3E;
        content: "\f058";
        font: normal normal normal 16px/1 FontAwesome;
        padding-right: 20px;
    }*/

ol.number-list {
    padding-inline-start: 15px;
}

.orange-bg {
    background-color: #FF7E3E;
}

.blue-bg {
    background-color: #43AED0;
}

.yellow-bg {
    background-color: #F4BF21;
}

.green-bg {
    background-color: #69A036;
}

@media only screen and (max-width: 767px) {
    .hide-for-small {
        display:none;
    }
}

#first-step {
    padding-top:130px;
    padding-bottom:50px;
    min-height:80vh;
}

#second-step {
    padding-top: 100px;
    padding-bottom: 50px;
    min-height: 80vh;
}

#third-step {
    padding-top: 130px;
    padding-bottom: 50px;
    min-height: 80vh;
}

#funnel {
    padding-top: 100px;
    padding-bottom: 50px;
    min-height: 80vh;
}

.underline {
    text-decoration: underline;
}

.sfa-slider, .yellow-slider, .blue-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #f7f7f7;
    outline: none;
    opacity: 0.85;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

    .sfa-slider:hover, .yellow-slider:hover, .blue-slider:hover {
        opacity: 1; 
    }

    .sfa-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer;
        background: #FF7E3E; 
        cursor: pointer; 
    }

    .sfa-slider::-moz-range-thumb {
        width: 15px;
        height: 15px; 
        background: #FF7E3E; 
        cursor: pointer; 
    }

    .yellow-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer;
        background: #F4BF21;
        cursor: pointer;
    }

    .yellow-slider::-moz-range-thumb {
        width: 15px;
        height: 15px;
        background: #F4BF21;
        cursor: pointer;
    }

    .blue-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer;
        background: #43AED0;
        cursor: pointer;
    }

    .blue-slider::-moz-range-thumb {
        width: 15px;
        height: 15px;
        background: #43AED0;
        cursor: pointer;
    }

input#sfa-email, input#alr-email-input {
    border-radius: 27px;
    border: 1px solid #FF7E3E;
    padding: 15px;
    text-align: center;
}

input#tpm-email, input#porady-email, input#gamification-email, input#automaticke-kampane-zakaznici-email {
    border-radius: 27px;
    border: 1px solid #F4BF21;
    padding: 15px;
    text-align: center;
}

input#hrportal-email {
    border-radius: 27px;
    border: 1px solid #43AED0;
    padding: 15px;
    text-align: center;
}

#sfa-savings th {
    text-align: center;
}

.border-radius-10 {
    border-radius:10px;
}

.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 66.25%;  
}

/*Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.inline-link {
    color: #2197F4;
}

.inline-link:hover {
    color: #23527c;
    text-decoration:underline;
    cursor:pointer;
}

.info-box {
    border: 1px solid #43AED0;
    background-color: #DDF7FF;
    padding: 25px;
}


/* Zde začínají styly pro getmore.cz dotazník pro akvizice */
div.survey-navigation-inner-panel {
    width: 135px !important;
}

div.survey-question {
    margin-bottom: 80px;
}

@media screen and (max-width: 992px) {
    div.survey-question {
        margin-bottom: 45px;
    }
}

div.survey-form-custom-title {
    display: none;
}

button.btn.btn-primary.btn-sm.m-t-10.waves-effect {
    display: inline-block;
    margin: 5px !important;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 27px;
    border: none;
    transition: background .3s ease-in-out;
    background: #2197F4;
    text-transform: none;
}

.card-body .btn-list {
    text-align: center;
}

.card {
    border-radius: 10px;
}

    .card:has(.btn-list) {
        background: none;
        box-shadow: none;
    }

/* Text otázky */
label div {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* Nadpisy */
.card .survey-question h2, .card .card-header h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    color: #515151;
}

    .card .survey-question h2 {
        text-align:center;
    }
/* Text možností v radiobuttonlistu */
.radiobuttonlist:has(label) span {
    font-size: 18px;
}
/* KONEC stylů pro getmore.cz dotazník */


/* Konverzkové tlačítko pro SFA 5 kroku... */
a.button1 {
    display: inline-block;
    padding: 0.35em 1.2em;
    border: none;
    margin: 0 0.3em 0.3em 0;
    border-radius: 27px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    font-weight: 400;
    line-height: 27px;
}

a.button1-orange {
    color: #FF7E3E;
    background-color: #FFFFFF;
}

    a.button1-orange:hover {
        background-color: #E15C1A;
        color:#FFFFFF;
    }

a.button1-yellow {
    color: black;
    background-color: #FFFFFF;
}
    a.button1-yellow:hover {
        background-color: #DA8F00;
        color: #FFFFFF;
    }

a.button1-colorbg-orange:hover {
    background-color: #E15C1A !important;
}
a.button1-colorbg-orange {
    background-color: #FF7E3E;
    color:#FFFFFF;
}

a.button1-colorbg-yellow:hover {
    background-color: #DA8F00 !important;
}

a.button1-colorbg-yellow {
    background-color: #F4BF21;
    color: #FFFFFF;
}

    @media all and (max-width:30em) {
        a .button1 {
        display: block;
        margin: 0.4em auto;
    }
}

/* Konec Konverzkových tlačítek */

.breadcrumb-div {
    font-size:12px;
    padding-top:10px;
}
.breadcrumb-p {
    font-size:12px;
}

/* Gamification + acos calculator */

#gamification-benefits button, #automaticke-kampane-zakaznici-savings button {
    font-size: 12px;
    background: none;
    padding: 0;
    border: none;
    color: #F4BF21;
}

    #gamification-benefits button:hover,, #automaticke-kampane-zakaznici-savings button:hover{
        color: #E15C1A;
    }

#gamification-benefits table, th, td {
    border: 3px solid #f7f7f7;
}

#automaticke-kampane-zakaznici-savings button table, th, td {
    border: 3px solid #f7f7f7;
}

#gamification-benefits tr, #automaticke-kampane-zakaznici-savings tr {
    height: 3.5em;
}

#gamification-benefits .yellow-slider, #automaticke-kampane-zakaznici-savings .yellow-slider {
    height: 5px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /*Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 30px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 65%; /* Could be more or less, depending on screen size */
    height: 65%; /* Could be more or less, depending on screen size */
}

    .modal-content h3 {
        font-size: 1.8rem;
        font-weight: 600;
        font-style: normal;
        color: #333132;
        line-height: 1.13889;
    }

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }


@media screen and (max-width: 900px) {
    .modal-content {
        height: 95%;
        width: 97%;
        padding:15px;
    }
    .modal-content .row {
        margin-right:0;
        margin-left:0;
    }

        .modal-content h2 {
            font-size: 2rem;
            margin-bottom:0;
        }

        .modal .py-20 {
            padding:5px;
        }

    .modal label {
        font-size: 1.7rem;
    }

    #gamification-benefits th {
        font-weight: 500;
    }

    #gamification-benefits {
        font-size: 90%;
    }
}

#videoModal .modal-content {
    background:none;
    box-shadow:unset;
    border:unset;
    width:45%;
}

.hrp-panel {
    border-radius:30px;
}

.margin-auto {
    margin: auto;
}

.insight-note {
    display: block;
    margin-top: 0.5em;
    font-style: italic;
    color: #555;
    padding-left: 10px;
    border-left: 3px solid #ccc;
}

.insight-note--right {
    border-left: none;
    border-right: 3px solid #ccc;
    padding-left: 0;
    padding-right: 10px;
    text-align: right;
}

.video-wrapper-overlay {
    max-width: 100%;
    height: auto;
    position: relative; /* důležité pro absolutní pozici tlačítka */
}

.video-overlay-btn {
    transition: all 0.3s ease;
    position: absolute;
    width: 160px;
    top: 5%;
    left: 78%;
    transform: translate(-50%, -50%);
    z-index: 999999999;
    opacity: 0.85;
    padding: 10px;
    /*padding-top: 12px;*/
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    white-space: nowrap; /* zabrání zalamování textu */
    cursor: pointer;
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    transform: translateY(1px);
}

.icon {
    line-height: 1;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    transition: transform 0.4s ease, color 0.3s ease;
    display: inline-block;
}

.video-overlay-btn.animate-icon .icon {
    transform: rotate(360deg);
    color: #ffc107;
}

.btn-text-placeholder {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
}
:root {
    /* Barvy */
    --color-chat-left-bg: white;
    --color-chat-right-bg: #3a86ff;
    --color-chat-right-text: white;
    /* Stíny */
    --shadow-heavy: 0 15px 26px -12px rgba(0, 0, 0, 0.74);
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.15);
    /* Velikosti */
    --chat-bubble-max-width: min(250px, 80vw);
    --chat-bubble-float-max-width: min(220px, 70vw);
}

/* --- Obecné kontejnery --- */
.image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 60%;
}

.avatar-video, .agent-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-heavy);
    will-change: transform, opacity;
}

.agent-video {
    box-shadow: none;
}

/* --- Chat bubliny --- */
.chat-bubble {
    position: absolute;
    max-width: var(--chat-bubble-max-width);
    padding-block: 8px;
    padding-inline: 12px;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    color: #333;
}


/* Pseudo-element pro šipku u bublin - společný základ */
.chat-bubble::after {
    content: "";
    position: absolute;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

    /* Bublina vlevo */
    .chat-bubble.left {
        bottom: 2%;
        left: 5%;
        background: var(--color-chat-left-bg);
    }

        .chat-bubble.left::after {
            left: -7px;
            border-right: 10px solid var(--color-chat-left-bg);
        }

    /* Bublina vpravo */
    .chat-bubble.right {
        bottom: 30%;
        right: 5%;
        background: var(--color-chat-right-bg);
        color: var(--color-chat-right-text);
        text-align: left;
    }

        .chat-bubble.right::after {
            right: -5px;
            top: 8px;
            border-left: 10px solid var(--color-chat-right-bg);
        }
.chat-bubble-small {
    max-width: 165px;
    left: 25%;
    bottom: 20%;
    background: var(--color-chat-left-bg);
}
    .chat-bubble-small::after {
        left: -7px;
        border-right: 10px solid var(--color-chat-left-bg);
    }


/* --- Dynamické jméno --- */
.dynamic-name {
    font-weight: bold;
    transition: color 0.3s ease;
}

/* --- Floating name box --- */
.floating-name-box {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #379bbc;
    color: white;
    padding: 20px 20px 15px 20px;
    border-radius: 25px;
    box-shadow: var(--shadow-medium);
    max-width: 300px;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 9999;
}

    .floating-name-box input {
        margin-top: 8px;
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #4f4f4f;
        border-radius: 25px;
        font-size: 18px;
        display: none;
        transition: opacity 0.3s ease;
        color: black;
    }

    .floating-name-box.expanded input {
        display: block;
    }

    .floating-name-box label {
        font-weight: 400;
        font-size: 18px;
    }

/* --- Hero image a pozadí --- */
#hero-image {
    position: relative;
    overflow: hidden;
}

.plexus-background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Pod contentem, nad overlayem pokud není průhledný */
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#plexus {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Pozadí bublin --- */
.chat-bubble-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    padding-inline: 350px;
}

/* Obsah sekce nad pozadím */
#q1 .container {
    position: relative;
    z-index: 2;
}

/* --- Plovoucí bubliny --- */
.chat-bubble-float {
    position: absolute;
    max-width: var(--chat-bubble-float-max-width);
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    border-radius: 20px;
    box-shadow: var(--shadow-light);
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.4);
    opacity: 0.5;
    animation: floatAnim linear infinite;
    backdrop-filter: blur(2px);
    pointer-events: none;
    transition: transform 0.3s ease;
    text-align: left;
    line-height: 1.3;
    word-wrap: break-word;
}

    .chat-bubble-float::after {
        content: "";
        position: absolute;
        top: 12px;
        left: -7px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid rgba(255, 255, 255, 0.08);
    }

/* --- Animace plovoucí bubliny --- */
@keyframes floatAnim {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-20px) translateX(8px) scale(1.03);
        opacity: 0.6;
    }

    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.4;
    }
}

/* --- Overlay obrázek přes video --- */
.video-overlay-image {
    position: absolute;
    top: -5%;
    left: 5%;
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
    max-width: 60%;
    pointer-events: none;
    z-index: 3;
    transition: transform 1s ease, opacity 1s ease;
    background: white;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
    will-change: opacity, transform;
}

    .video-overlay-image.visible {
        opacity: 0.8;
        transform: translateX(-50%) translateY(0);
    }

/* --- Specifika pro Q2 --- */
#q2 .image-wrapper {
    position: relative;
    overflow: visible;
}

.multi-overlay-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    max-width: 200px;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}

#overlayImg1 {
    top: -35px;
    left: 20%;
}

#overlayImg2 {
    top: 20px;
    left: 25%;
}

#overlayImg3 {
    top: 75px;
    left: 30%;
}

.multi-overlay-img.visible {
    opacity: 1;
}


.checklist {
    list-style: none;
    padding-left: 0;
}

    .checklist li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 12px;
    }

        .checklist li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: #28a745; /* zelená barva, můžeš upravit */
            font-weight: bold;
        }

.steps-horizontal {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.step-box {
    box-sizing: border-box;
    padding: 20px 30px 20px 20px;
    border-left: 1px solid #FF7E3E;
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.step-text {
    flex-grow: 1;
}

.step-box::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #FF7E3E;
    z-index: 1;
    transform: translateY(-20%);
}

@media (max-width: 767px) {
    .steps-horizontal {
        flex-wrap: wrap;
        padding-left: 10px;
        padding-right: 10px;
    }

    .step-box {
        flex: 1 1 100%;
        border-left: none;
        padding-left: 0;
        margin-bottom: 30px;
        position: static;
    }

        .step-box::before,
        .step-box:not(:last-child)::after {
            display: none;
        }

        .step-box:not(:last-child) {
            border-bottom: 1px solid #FF7E3E;
            padding-bottom: 20px;
        }
}


/* --- Arrows background --- */
.arrows-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform, opacity;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    background-color: #E1E1E1;
}

    .arrow svg {
        width: 20px;
        height: 20px;
        stroke: white;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }


    /* styly pro GETMORE CONNNECTED SOLUTIONS */

    /* === Karta pro všechny boxy === */
#getmore-schema .card {
    background: white;
    border: 1px solid #2197F4;
    border-radius: 27px;
    padding: 0.2rem 0.5rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    background-color: white;
    color: #2197F4;
    cursor: pointer;
}

    #getmore-schema .card:hover {
        color: #379bbc !important;
        border: 1px solid #379bbc;
    }

    /* === Speciální hlavičkové boxy: Mobilní přístup, AI v Pohodě / Pamice, Účetní / PAM archív === */
    #getmore-schema .card-header-box {
        max-width: 250px;
        margin: auto;
        margin-bottom:25px;
    }

    /* === Wrapper pro Mobilní přístup + AI v pohodě === */
#getmore-schema .mobile-access-group {
    background-color: #fbfeff;
    /*border: 1px solid #cfd8dc;*/
    border-radius: 5px;
    padding: 25px;
    padding-bottom: 10px;
}

    /* === Root (AI v Pohodě / Pamice + archiv) === */
#getmore-schema .root-group {
    background-color: #f5fafd;
    /*border: 1px solid #b0bec5;*/
    border-radius: 5px;
    padding: 25px;
    padding-bottom: 10px;
    margin-bottom: -1px;
    border-bottom-width: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

    /* === Archivní skupina === */
#getmore-schema .archive-group {
    background-color: #eaf5fd;
    /*border: 1px solid #90a4ae;*/
    border-radius: 5px;
    padding: 25px;
    padding-bottom: 10px;
    margin-bottom: -1px;
    border-bottom-width: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

    /* === Sloupce ve skupinách === */
    #getmore-schema .group-columns {
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
    }

#getmore-schema .group-column {
    flex: 1 1 100px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #dceefc;
    /*border: 1px solid #00c2cb;*/
    border-radius: 5px;
    padding: 20px 20px 10px 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#getmore-schema .active-box {
    border-color: #2197F4 !important;
    background: #2197F4;
    color: white;
    position: relative;
}

    #getmore-schema .active-box:hover {
        color: white!important;
        background: #379bbc;
    }

    #getmore-schema .active-box::after {
        content: "Jste zde";
        position: absolute;
        top: -10px;
        right: -10px;
        background: #D60016;
        color: white;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
        border-radius: 27px;
        font-weight: 600;
    }

#getmore-schema .under-construction-box {
    position: relative;
    background-color: #fef9e7; /* jemně žlutý podklad, můžeš změnit */
    border: 1px dashed #f1c40f; /* odlišné orámování */
    cursor: not-allowed;
    color:#4f4f4f;
}

.under-construction-box::after {
    content: "Připravujeme";
    position: absolute;
    top: -8px;
    right: -25px;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 27px;
    font-weight: 600;
    background: #f39c12;
    color: #fff;
    
}


#getmore-schema .disabled-box {
    border-color: #BDBDBD !important;
    background: #FFF;
    color: black;
    cursor: auto;
    position: relative;
}

    #getmore-schema .disabled-box:hover {
        border-color: #BDBDBD !important;
        background: #FFF !important;
        color: black !important;
    }

    #getmore-schema .disabled-box::after {
        content: "STORMWARE";
        position: absolute;
        bottom: -10px;
        right: -10px;
        background: #7D7D7D;
        color: white;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
        border-radius: 27px;
        font-weight: 600;
    }

    .faq-section {
    max-width: 800px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
}

.faq-item {
    border-left: 3px solid #ddd;
    padding: 15px 20px;
    margin-bottom: 10px;
    position: relative;
    background: #f9f9f9;
    cursor: pointer;
    transition: background 0.2s;
}

.faq-item:hover {
    background: #f1f1f1;
}

.faq-question {
    font-weight: bold;
    position: relative;
    padding-right: 25px;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-weight: normal;
    transition: transform 0.2s;
}

.faq-item.open .faq-question::after {
    content: "–";
}

.faq-answer {
    display: none;
    margin-top: 10px;
    color: #444;
}

.faq-item.open .faq-answer {
    display: block;
}

.popup-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    transition: opacity 0.3s ease;
}

    .popup-modal.hidden {
        display: none;
    }

.popup-content {
    background-color: white;
    padding: 2.8rem;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
}

.popup-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 5rem;
    cursor: pointer;
}

.bubble-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

    .bubble-wrapper img {
        width: 100%;
        height: auto;
        display: block;
    }

.bubble {
    position: absolute;
    background-color: rgba(33, 151, 244, 0.7);
    color: white;
    padding: 15px 15px 15px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 85%;
    z-index: 2;
    line-height: 1.2;
}

/* Individuální pozice */
.bubble-smernice {
    top: 30%;
    left: 5%;
}

.bubble-skoleni {
    top: 10%;
    right: 10%;
}

.bubble-notifikace {
    bottom: 18%;
    left: 15%;
}

@media (max-width: 768px) {
    .bubble-wrapper img {
        height: 250px; /* nebo jiná výška dle návrhu */
        object-fit: contain;
        width: 100%;
    }

    .bubble {
        background-color: rgba(33, 151, 244, 0.8);
        box-shadow: none;
        margin: auto;
    }

    .bubble-smernice {
        top: 45%;
        left: 15%;
    }

    .bubble-skoleni {
        top: 30%;
        right: 15%;
    }

    .bubble-notifikace {
        bottom: 8%;
        left: 20%;
    }

    .hide-for-mobile {
        display:none;
    }
}


/* === Responsivita === */
    @media (max-width: 768px) {
        #getmore-schema .group-columns {
        flex-direction: column;
    }
}



.timeline {
    position: relative;
    padding-left: 50px;
}

    .timeline:before {
        content: '';
        position: absolute;
        left: 39px;
        top: 0;
        width: 2px;
        height: 100%;
        background: #27293d;
    }

    .timeline .timeline-container {
        position: relative;
        margin-bottom: 1.5rem;
    }

        .timeline .timeline-container .timeline-icon {
            position: absolute;
            left: -17px;
            top: 13px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            text-align: center;
            font-size: 2rem;
            background: #BDBDBD;
        }

            .timeline .timeline-container .timeline-icon i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .timeline .timeline-container .timeline-icon img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

        .timeline .timeline-container .timeline-body {
            border-radius: 3px;
            padding: 5px 5px 5px;
            box-shadow: 1px 3px 9px rgba(0, 0, 0, .1);
        }

            .timeline .timeline-container .timeline-body:before {
                content: '';
                background: inherit;
                width: 20px;
                height: 20px;
                display: block;
                position: absolute;
                left: -10px;
                transform: rotate(45deg);
                border-radius: 0 0 0 2px;
            }

            .timeline .timeline-container .timeline-body .timeline-title {
                margin-bottom: 1.4rem;
            }

                .timeline .timeline-container .timeline-body .timeline-title .badge {
                    background: #BDBDBD;
                    padding: 4px 8px;
                    border-radius: 3px;
                    font-size: 12px;
                    font-weight: bold;
                }

            .timeline .timeline-container .timeline-body .timeline-subtitle {
                font-weight: 300;
                font-style: italic;
                opacity: 0.4;
                margin-top: 16px;
                font-size: 11px;
            }

        .timeline .timeline-container.primary .badge, .timeline .timeline-container.primary .timeline-icon {
            background: #2CA02C !important;
        }

        .timeline .timeline-container.info .badge, .timeline .timeline-container.info .timeline-icon {
            background: #11cdef !important;
        }

        .timeline .timeline-container.success .badge, .timeline .timeline-container.success .timeline-icon {
            background: #00bf9a !important;
        }

        .timeline .timeline-container.warning .badge, .timeline .timeline-container.warning .timeline-icon {
            background: #FF7F0E !important;
        }

        .timeline .timeline-container.danger .badge, .timeline .timeline-container.danger .timeline-icon {
            background: #D60016 !important;
        }

.danger-note:after {
    content: ' - od tohoto data vám hrozí plné pokuty!';
    font-size: 16px;
    color: #D60016;
    font-weight: 800;
}

.card-alr {
    border: 1px solid lightgrey;
    padding: 10px;
    border-radius: 5px;
}

.pretty-link {
    text-decoration:underline;
    font-weight:600;
}

.italic {
    font-style: italic;
}