@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap');
@import url("../icons/bootstrap-icons.css");
@import url("color.css");

/* obecné */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
}

.navbar {
    padding: 1rem;
}

.navbar .navbar-brand {
    margin-right: 3rem;
}

.navbar .navbar-brand + .navbar-nav {
    margin-left: auto;
}

.navbar ul li a  {
    font-size: .9rem;
    letter-spacing: 1px;
    font-weight: 400;
    padding-right: 1.2rem!important;
}

main {
    margin-top: 4.5rem;
}

.bg-schema {
    background-image: url(../images/bg-schema.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

a.underlined {
    text-decoration: underline;
}

a.underlined:hover {
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    letter-spacing: .1rem;
    font-weight: 300!important;
}

h2 {
    margin-bottom: 1rem;
}

p, li {
    font-weight: 300!important;
}

img.fit {
    width: 100%;
}

.lead {
    font-size: 1.5rem;
}

.white-halfcircle::before,
.whitesmoke-halfcircle::before {
    content: "";
    display: block;
    position: relative;
    width: 4rem;
    height: 2rem;
    border-radius: 0 0 2rem 2rem;
    top: -6rem;
    left: 50%;
    margin-left: -2rem;
}

footer {
    padding-top: 7rem;
    padding-bottom: 7rem;
    background-image: url(../images/bg-schema-paticka.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

footer h5 {
    font-size: 1.1rem;
    font-weight: 400!important;
}

footer p, footer ul {
    font-size: .9rem;
}

footer ul {
    list-style-type: none;
    padding-left: 0;
}

footer p a.linkedin {
    font-size: 1.5rem;
}

footer hr {
    margin-top: 1rem;
    margin-bottom: 3rem;
    border: 0;
    border-top: 1px solid #ccc;
}

footer .copyright p {
    text-align: center;
}

footer .copyright p a:hover {
    text-decoration: none;
}

/* obecné - konec **/

/* úvod */

.homepage header {
    background:linear-gradient(45deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(../images/uvod-pozadi-2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 750px;
}

.homepage header section {
    height: 100%;
}

.homepage .jumbotron h1 {
    font-size: 2.7rem;
    margin-bottom: 2rem;
}

.homepage .jumbotron p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.verticals {
    padding: 5rem;
}

.verticals h2 {
    font-size: 2.5rem;
    text-align: center;
}

.verticals h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
}

.verticals .card {
    padding: 1rem;
    border: none;
}

.verticals .card img {
    float: left;
    margin-right: 1rem;
}

.verticals h5.card-title {
    font-size: 1.4rem;
}

.verticals h5.card-title + hr {
    width: 50px;
    opacity: 1!important;
}

.verticals .big-number {
    font-size: 4.5rem;
    font-weight: 300;
    opacity: 0.5;
}

.verticals .big-number.align-right {
    margin-left: auto;
}

.verticals .big-number.even, .verticals .big-number.odd {
    z-index: 1;
    margin-bottom: -2.2rem;
}

.verticals .big-number.even {
    margin-left: auto;
    margin-right: 1rem;
}

.verticals .big-number.odd {
    margin-right: auto;
    margin-left: 1rem;
}

.reference {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.reference h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
}

.reference h2 + p {
    font-size: 1.2rem;
}

.reference h3 {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 3rem;
}

.reference .fit img {
    width: 100%
}

.homepage .situations {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.homepage .situations h2 {
    font-size: 2rem;
}

.homepage .situations h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
}

.homepage .situations h2 + p.lead, 
.homepage .situations h2 + p.lead + p.lead {
    font-size: 1.3rem;
}

.homepage .situations img {
    max-width: 75%;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.homepage .situations .bg-points {
    background-image: url(../images/uvod-situace-pozadi.svg);
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: 65% auto;
}

.homepage .situations img + p {
    font-size: 1.1rem;
}

.homepage .carousel-reference a {
    font-size: 3rem;
    text-decoration: none;
}

.homepage .carousel-reference .carousel-inner {
    min-height: 350px;
}

.homepage .carousel-reference p {
    font-size: 1.2rem;
}

.kiss-in-numbers {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.kiss-in-numbers img {
    width: 85%;
}

.kiss-in-numbers .big-number {
    font-size: 4rem;
    font-weight: 300;
}

.kiss-in-numbers .big-number + div {
    font-size: 1.2rem;
}

.kiss-in-numbers .big-number.brown,
.kiss-in-numbers .big-number.green,
.kiss-in-numbers .big-number.purple {
    margin-top: 6rem;
}

.quick-info {
    padding: 6rem;
}

.quick-info h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.quick-info h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
}

.quick-info .white-hr {
    width: 100px;
    opacity: 1!important;
}

.advantages {
    padding: 6rem;
}

/* úvod - konec */

/* ostatní stránky */

.other-page header.kiss, .other-page header.helps, .other-page header.realization, .other-page header.about {
    height: 750px;
}

.other-page header.kiss {
    background:linear-gradient(45deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(../images/kiss-banner.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.other-page header.helps {
    background:linear-gradient(45deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(../images/kde-pomaha-banner.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.other-page header.realization {
    background:linear-gradient(45deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(../images/realizace-banner.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.other-page header.about {
    background:linear-gradient(45deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(../images/o-nas-banner.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.other-page header section {
    height: 100%;
}

.other-page .jumbotron h1 {
    font-size: 2.7rem;
    margin-bottom: 2rem;
}

.other-page .jumbotron p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.other-page .reference .small img, .other-page .reference .big img {
    border-radius: 100%;
    margin-bottom: 1rem;
}

.other-page .reference .big img {
    width: 80%;
}

.other-page .reference .small img {
    width: 40%;
}

.other-page .reference .small h3 {
    font-size: 1.1rem;
}

.other-page .reference .circles > div:first-child img,
.other-page .reference .circles > div:last-child img {
    width: 80%;
}

.other-page .reference .circles > div:first-child img {
    float: right;
}

.other-page .reference .circles > div:last-child img {
    float: left;
}

.other-page .fast-description.situations .container {
    max-width: 1000px;
}

.other-page .fast-description.situations h3 {
    font-size: 1.6rem;
}

.other-page .fast-description.situations ul li {
    font-size: 1.2rem;
    list-style-type: circle;
}

.other-page .fast-description.situations img {
    max-width: 60%;
    border-radius: 10px;
}

.other-page .fast-description.situations .row.odd > div,
.other-page .fast-description.situations .row.even > div {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.other-page .fast-description.situations .row.odd > div:last-child,
.other-page .fast-description.situations .row.even > div:first-child {
    text-align: center;
}

.other-page .fast-description.situations .row.odd.notification > div:last-child {
    background-image: url(../images/kde-pomaha-pozadi-kruh-svolavani.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
}

.other-page .fast-description.situations .row.even.protection > div:first-child {
    background-image: url(../images/kde-pomaha-pozadi-kruh-ochrana.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
}

.other-page .fast-description.situations .row.odd.nonstandard > div:last-child {
    background-image: url(../images/kde-pomaha-pozadi-kruh-nestandardni.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
}

.other-page .fast-description.situations .row.even.monitoring > div:first-child {
    background-image: url(../images/kde-pomaha-pozadi-kruh-monitoring.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
}

.other-page .fast-description .container-for-graphics {
    background-image: url(../images/kiss-pozadi-vetrnik.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 10rem;
}

.other-page .fast-description .container-for-graphics h3 {
    font-size: 1.3rem;
    font-weight: 400!important;
}

.other-page .fast-description .container-for-graphics p {
    font-size: 1.1rem;
}

.other-page .fast-description .container-for-graphics .row > div:first-child h3,
.other-page .fast-description .container-for-graphics .row > div:first-child p {
    text-align: left;
}

.other-page .fast-description .container-for-graphics .row > div:last-child {
    margin-top: 4rem;
}

.other-page .fast-description .container-for-graphics .row > div:last-child h3,
.other-page .fast-description .container-for-graphics .row > div:last-child p {
    text-align: right;
}

.other-page .fast-description .container-for-graphics .row.empty {
    height: 10rem;
}

.other-page .fast-description .video-container iframe {
    border-radius: 20px;
    width: 560px;
    height: 315px;
}

.other-page .quick-info.scenarios .container {
    max-width: 1000px;
}

.other-page .usage {
    padding: 5rem;
}

.other-page .usage h2 {
    font-size: 2.5rem;
    text-align: center;
}

.other-page .usage h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
}

.other-page .usage img {
    max-width: 250px;
    border-radius: 10px;
}

.other-page .usage div.number {
    font-size: 2.5rem;
    font-weight: 300;
    width: 5rem;
    height: 5rem;
    padding: .5rem;
    margin-bottom: .5rem;
    margin: auto;
    border-radius: 100%;
    text-align: center;
}

.other-page .usage .odd, .other-page .usage .even {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.other-page .usage .odd > div:first-child {
    padding-right: 70px;
}

.other-page .usage .odd img {
    float: right;
}

.other-page .usage .even h3, .other-page .usage .even p {
    text-align: right
}

.other-page .usage .even > div:last-child {
    padding-left: 70px;
}

.other-page .usage .odd > div:first-child {
    background-image: url(../images/kde-pomaha-pozadi-srafovane.svg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 47px auto;
}

.other-page .usage .even > div:last-child {
    background-image: url(../images/kde-pomaha-pozadi-srafovane.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 47px auto;
}

.other-page .fast-description {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.other-page .fast-description h2 {
    font-size: 2.5rem;
    text-align: center;
}

.other-page .fast-description h2 + hr, 
.other-page .fast-description.situations h3 + hr {
    width: 100px;
    opacity: 1!important;
    margin-bottom: 2rem;
}

.other-page .fast-description h2 + hr {
    margin: auto;
}

.other-page .fast-description p {
    font-size: 1.4rem;
    text-align: center;
}

.other-page .fast-description.timeline h3 {
    font-size: 1.4rem;
}

.other-page .fast-description.timeline .bg-strip {
    width: 100%;
    height: 5px;
    background-image: url(../images/realizace-pozadi-cara.svg);
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 10px auto;
    margin-bottom: 5px;
}

.other-page .fast-description.timeline p {
    font-size: 1.2rem;
}

.other-page .fast-description.timeline .odd h3, .other-page .fast-description.timeline .odd p {
    text-align: left;
}

.other-page .fast-description.timeline .even h3, .other-page .fast-description.timeline .even p {
    text-align: right;
}

.other-page .fast-description.timeline .line img {
    width: 50px;
    margin: auto;
}

.other-page .fast-description.timeline .green .line {
    background-image: url(../images/realizace-krok1-pozadi.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 2px auto;
}

.other-page .fast-description.timeline .dark-blue .line {
    background-image: url(../images/realizace-krok2-pozadi.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 2px auto;
}

.other-page .fast-description.timeline .brown .line {
    background-image: url(../images/realizace-krok3-pozadi.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 2px auto;
}

.other-page .fast-description.timeline .red .line {
    background-image: url(../images/realizace-krok4-pozadi.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 2px auto;
}

.other-page .fast-description.timeline .purple .line {
    background-image: url(../images/realizace-krok5-pozadi.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 2px auto;
}

.other-page .fast-description.timeline .orange .line {
    background-image: url(../images/realizace-krok6-pozadi.svg);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 2px auto;
}

.other-page .fast-description.timeline .icon-bg {
    border-radius: 100%;
    width: 4rem;
    height: 4rem;
    padding: .5rem;
    text-align: center;
}

.other-page .fast-description.timeline .icon-bg i {
    font-size: 2rem;
}

.other-page .fast-description.timeline .green .icon-bg,
.other-page .fast-description.timeline .brown .icon-bg,
.other-page .fast-description.timeline .purple .icon-bg {
    float: right;
}

.other-page .fast-description.timeline .dark-blue .icon-bg,
.other-page .fast-description.timeline .red .icon-bg,
.other-page .fast-description.timeline .orange .icon-bg {
    float: left;
}

.other-page .fast-description.timeline .brown .icon-bg {
    float: right;
}

.other-page .verticals .card {
    text-align: center;
}

.other-page .verticals .card i {
    font-size: 2rem;
}

.other-page .verticals .card h3 {
    font-size: 1.4rem;
    font-weight: 400!important;
}

.other-page .quick-info.background-darkblue-gradient hr + h2 {
    font-size: 1.75rem;
}

.other-page .quick-info div.icon-background {
    float: left;
    width: 5rem;
    height: 5rem;
    padding: .5rem;
    margin-right: 1rem;
    margin-bottom: .5rem;
    border-radius: 100%;
    text-align: center;
}

.other-page .quick-info div.icon-background i {
    font-size: 2.5rem;
}

.other-page .quick-info h3 {
    font-size: 1.2rem;
    font-weight: 400!important;
}

.other-page .quick-info.for-clients .row h3 + p {
    margin-bottom: 0;
}

.other-page .quick-info.for-clients .odd + div {
    margin-top: -2rem;
}

.other-page .quick-info.for-clients .odd {
    background-image: url(../images/o-nas-pozadi-liche.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100px auto;
}

.other-page .quick-info.for-clients .even {
    background-image: url(../images/o-nas-pozadi-sude.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100px auto;
}

.verticals .img-fluid {
    border-radius: 10px;
    max-width: 150px;
}

.other-page .more-about {
    padding: 5rem;
}

.other-page .more-about h2 {
    text-align: center;
}

.other-page .more-about h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
    margin-bottom: 2rem;
}

.other-page .more-about .card {
    padding: 1rem;
    text-align: center;
}

.other-page .more-about .card h3 {
    font-size: 1.2rem;
    font-weight: 400!important;
}

.other-page .more-about .card p {
    font-size: 1.1rem;
}

.other-page .more-about .card + img {
    width: 40%;
}

.other-page .more-about .communication-types .row {
    margin-bottom: 1rem;
}

.other-page .more-about .communication-types .row p {
    margin-bottom: 0;
}

.other-page .more-about .communication-types .row > div:first-child > div {
    float: right;
}

.other-page .more-about .communication-types .row > div > div {
    text-align: left;
}

.other-page .more-about .communication-types .row .card {
    width: 75%;
}

.quick-info.background-schema.text-center h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.quick-info.background-schema.text-center h3 {
    font-size: 1.8rem;
}

.quick-info.background-schema.text-center i {
    font-size: 2.2rem;
}

.quick-info.background-schema.text-center p {
    font-size: 1.2rem;
}

.image-points .bigger-text li {
    font-size: 1.3rem;
}

.other-page .fast-description .reference h2 {
    font-size: 2.5rem;
}

.other-page .reference .accordion, .other-page .reference .accordion button {
    font-size: 1.2rem;
    font-weight: 300;
}

.other-page .reference .accordion-body {
    text-align: left;
}

.other-page .advantages h2 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
    margin-bottom: 2rem;
}

.other-page .advantages .second {
    margin-bottom: -3rem;
}

.other-page .advantages .fourth {
    margin-top: -3rem;
}

.other-page .advantages .first > div:first-child,
.other-page .advantages .third > div:first-child {
    padding-right: 5rem;
}

.other-page .advantages .first > div:last-child,
.other-page .advantages .third > div:last-child {
    padding-left: 5rem;
}

.other-page .advantages .first,
.other-page .advantages .second,
.other-page .advantages .third,
.other-page .advantages .fourth,
.other-page .advantages .fifth {
    font-size: 1.1rem;
}

.other-page .advantages .first i,
.other-page .advantages .second i,
.other-page .advantages .third i,
.other-page .advantages .fourth i,
.other-page .advantages .fifth i {
    font-size: 2.5rem;
}

.other-page .advantages .first > div:first-child,
.other-page .advantages .second > div:first-child,
.other-page .advantages .third > div:first-child,
.other-page .advantages .fourth > div:first-child {
    text-align: right;
}

.other-page .advantages .first > div:first-child i,
.other-page .advantages .second > div:first-child i,
.other-page .advantages .third > div:first-child i,
.other-page .advantages .fourth > div:first-child i {
    float: right;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.other-page .advantages .first > div:last-child i,
.other-page .advantages .second > div:last-child i,
.other-page .advantages .third > div:last-child i,
.other-page .advantages .fourth > div:last-child i {
    float: left;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

.trim-address p {
    font-size: 1.2rem;
}

.map-container iframe{
	pointer-events: none;
	position: relative; /* IE needs a position other than static */
}
.map-container iframe.clicked{
	pointer-events: auto;
}

.other-page.contact {
    padding-top: 72px;
}

.other-page.contact main {
    margin-top: 0;
}

.other-page.contact h1 + hr {
    width: 100px;
    opacity: 1!important;
    margin: auto;
    margin-bottom: 2rem;
}

.other-page.contact h1 + hr + p {
    font-size: 2rem;
}

.other-page.contact h1 + hr + p span:first-of-type {
    margin-right: 5rem;
}

.other-page.contact h2 {
    font-size: 2rem;
}

.other-page.contact .contact-details {
    padding: 5rem;
}

.other-page.contact .contact-details h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.other-page.contact .contact-details h2 {
    font-size: 1.2rem;
}

.other-page.contact .visit-cards {
    background-image: url(../images/kontakt-pozadi.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100px;
    padding-bottom: 5rem;
}

.other-page.contact .visit-cards .container {
    padding-left: 5rem;
    padding-right: 5rem;
}

.other-page.contact .visit-cards .container .row > div {
    padding-left: 2rem;
    padding-right: 2rem;
}

.other-page.contact .visit-cards .card {
    text-align: center;
    padding: 4rem 1rem;
}

.other-page.contact .visit-cards .card i {
    font-size: 2.4rem;
}

.other-page.contact .visit-cards .card h3 {
    font-size: 1.4rem;
    font-weight: 400!important;
    margin-bottom: 1rem;
}

.other-page.contact .visit-cards .card h3 + p {
    font-size: 1.2rem;
}

/* ostatní stránky - konec   */

/* aktuality */

.actual .fast-description {
    margin-top: 7em;
}

.actual .card {
    padding: 1em;
}

.actual .card .ck-content.perex ul, .actual .card .ck-content.detail ul {
    list-style: default;
    list-style-type: circle;
}

.actual .card .ck-content.perex a, .actual .card .ck-content.detail a {
    text-decoration: underline;
}

.actual .card table#tbl-info td {
    padding-bottom: 1em;
    padding-right: 1em;
}

.actual .card table#tbl-info td:first-child {
    font-size: .8em;
}

.actual .card .ck-content.perex h1, .actual .card .ck-content.perex h2, .actual .card .ck-content.perex h3 {
    text-align: left;
}

.actual .card .ck-content.perex h1 {
    font-size: 1.8em;
}

.actual .card .ck-content.perex h2, .actual .card .ck-content.perex h3 {
    font-size: 1.4em;
}


.actual .card .ck-content.perex img {
    float: right;
}

.actual .card .ck-content.perex .main-text p {
    text-align: left;
    font-size: 1.2em ;
}

.actual .card .ck-content.perex .main-text p span {
    font-family: 'Roboto', sans-serif !important;
    
}

.actual .card .ck-content.detail h1, .actual .card .ck-content.detail h2, .actual .card .ck-content.detail h3 {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 1em;
}

.actual .card .ck-content.detail td {
    text-align: center;
}

.actual .card .ck-content.detail p {
    font-size: 1.2em;
    text-align: left;
}


/* aktuality - konec */

/* cookies */

.cookie-disclaimer {
    background: #000;
    color: #FFF;
    opacity: 0.9;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* height: 150px; */
    position: fixed;
}

.cookie-disclaimer .container {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.cookie-disclaimer .cookie-close {
    float: right;
    padding: 2rem;
    cursor: pointer;
}

/* cookies - konec */

/* fade-in efekt */

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% {
    opacity:0;
    }
  100% {
    opacity:1;
    }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
    }
  100% {
    opacity:1;
    }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
    }
  100% {
    opacity:1;
    }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
    }
  100% {
    opacity:1;
    }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
    }
  100% {
    opacity:1;
    }
}

/* fade-in efekt - konec */

/* carousel se snímky */

#carousel {
    position: relative;
    height: 300px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

#carousel div {
    position: absolute;
    transition: transform 1s, left 1s, opacity 1s, z-index 0s;
    opacity: 1;
}

#carousel div img {
    width: 400px;
    transition: width 1s;
}

#carousel div.hideLeft {
    left: 0%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
    }

#carousel div.hideLeft img {
    width: 200px;
}

#carousel div.hideRight {
    left: 100%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
}

#carousel div.hideRight img {
    width: 200px;
}

#carousel div.prev {
    z-index: 5;
    left: 30%;
    transform: translateY(50px) translateX(-50%);
}

#carousel div.prev img {
    width: 300px;
}

#carousel div.prevLeftSecond {
    z-index: 4;
    left: 15%;
    transform: translateY(50%) translateX(-50%);
    opacity: .7;
}

#carousel div.prevLeftSecond img {
    width: 200px;
}

#carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(0px) translateX(-50%);
}

#carousel div.next {
    z-index: 5;
    left: 70%;
    transform: translateY(50px) translateX(-50%);
}

#carousel div.next img {
    width: 300px;
}

#carousel div.nextRightSecond {
    z-index: 4;
    left: 85%;
    transform: translateY(50%) translateX(-50%);
    opacity: .7;
}

#carousel div.nextRightSecond img {
    width: 200px;
}

.buttons {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}

/* carousel se snímky - konec */

/* doladění pro různá zařízení */

@media screen and (max-width: 575px) {
    .quick-info {
        padding: 4rem 1rem;
    }
    
    .quick-info h2 + p.perex {
        font-size: 1.2rem;
    }
    
    .advantages {
        padding: 1rem;
    }
    
    .advantages::before {
        top: -1rem;
    }
    
    .other-page .more-about {
        padding: 1rem;
    }
    
}

@media screen and (max-width: 768px) {
    .navbar .navbar-brand {
        display: none;
    }
    
    ul.navbar-nav li .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    ul.navbar-nav li .dropdown-menu {
        margin-top: 0;
        border-radius: 0;
    }
    
    ul.navbar-nav li .dropdown-menu a {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    p.lead,
    .other-page .fast-description p {
        font-size: 1.2rem;
    }
    
    .homepage .verticals,
    .other-page .verticals {
        padding: 1.5rem;
    }
    
    .quick-info.background-darkblue-gradient.white-halfcircle::before {
        top: -4rem;
    }
    
    .other-page .usage {
        padding: 1.5rem;
    }
    
    .other-page.contact .contact-details {
        padding: 1.5rem;
    }
    
    .other-page.contact .visit-cards .container .row > div {
        padding-right: 0!important;
    }
    
    .homepage .verticals .container,
    .other-page.contact .visit-cards .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .other-page .fast-description .video-container iframe {
        width: 100%;
    }
    
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    nav > .container {
        max-width: 750px;
    }
}

@media screen and (max-width: 992px) {
    .homepage .jumbotron h1,
    .homepage .verticals h2,
    .other-page .jumbotron h1,
    .other-page .fast-description h2,
    .other-page .verticals h2,
    .other-page .quick-info h2,
    .other-page .usage h2 {
        font-size: 2rem;
    }
    
    .quick-info.background-darkblue-gradient h2 {
        text-align: center;
    }
    
    .quick-info .white-hr {
        display: none;
    }
    
    .quick-info .white-hr + h3 {
        text-align: center;
    }
    
    .homepage .verticals h2 + hr {
        margin-bottom: 2rem;
    }
    
    .homepage .verticals .big-number {
        display: none;
    }
    
    .homepage .carousel-reference .carousel-item img {
        max-width: 200px!important;
    }
    
    .advantages .card-text {
        margin-bottom: 3rem !important;
    }
    
    .other-page .verticals .row.mb-4 {
        margin-bottom: 0!important;
    }
    
    .other-page .verticals .card {
        margin-bottom: 1.5rem;
    }
    
    .other-page .situations .order-first-mobile,
    .other-page .visit-cards .order-first-mobile,
    .other-page .usage .order-first-mobile,
    .homepage .kiss-in-numbers .order-first-mobile {
        order: -1;
    }
    
    .kiss-in-numbers .big-number + div {
        margin-bottom: 2rem;
    }
    
    .kiss-in-numbers .big-number.brown,
    .kiss-in-numbers .big-number.green,
    .kiss-in-numbers .big-number.purple {
        margin-top: 0;
    }
    
    .other-page .usage .number {
        display: none;
    }
    
    .other-page .usage .odd > div:first-child {
        padding-right: 0;
        background-image: none;
    }
    
    .other-page .usage .even > div:last-child {
        padding-left: 0;
        background-image: none;
    }
    
    .other-page .fast-description .container-for-graphics {
        background-image: none;
        margin-bottom: 0;
    }
    
    .other-page .fast-description .container-for-graphics .row.empty {
        height: 0;
    }
    
    .other-page .fast-description .container-for-graphics .row > div:last-child {
        margin-top: 0;
    }
    
    .other-page .fast-description .container-for-graphics .row > div {
        margin-bottom: 1rem;
    }
    
    .other-page .more-about .card + img {
        margin-bottom: 2rem;
    }
    
    .other-page .more-about .communication-types .row {
        margin-bottom: 0;
    }
    
    .other-page .more-about .communication-types .row .card {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .other-page .timeline .odd, .other-page .timeline .even {
        margin-bottom: 2.5rem;
    }
    
    .other-page .timeline .line {
        display: none;
    }
    
    .other-page .usage .odd img {
        float: left;
        margin-bottom: 1rem;
    }
    
    .other-page .usage .even img {
        float: right;
        margin-bottom: 1rem;
    }
    
    .other-page .quick-info.for-clients .odd + div {
        margin-top: 0;
    }
    
    .other-page .quick-info.for-clients .row h3 + p {
        margin-bottom: 2.5rem!important;
    }
    
    .other-page .reference .circles > div:first-child img,
    .other-page .reference .circles > div:last-child img {
        float: none;
        width: 100%;
        max-width: 600px;
    }
    
    .other-page .reference .circles > div {
        text-align: center;
    }
    
    .other-page .reference .circles > div img {
        width: 100%;
        max-width: 600px;
    }
    
    .other-page .reference .circles.hide-on-mobile {
        display: none!important;
    }
    
    .other-page.contact .visit-cards {
        padding-bottom: 0!important;
    }
    
    .other-page.contact .visit-cards .card {
        margin-bottom: 1.5rem;
    }
    
    footer h5 + p {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 767px) {
   .actual .card .ck-content.perex img + * {
   clear: both;
   }
   
   .actual .card .ck-content.perex img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100%;
    height: auto;
    margin-bottom: 1em;
    }
}

@media screen and (min-width: 768px) {
   .actual .card .ck-content.perex img {
    margin-left: 2em;
    margin-bottom: 2em;
    max-width: 250px !important;
    max-height: none !important;
    }
}

@media screen and (min-width: 993px) {
    .homepage .carousel-reference .carousel-item > div > div:last-child {
        padding-left: 2rem;
    }
    
    .other-page .reference .circles.hide-on-computer {
        display: none!important;
    }

}

@media screen and (min-width: 576px) and (max-width: 992px) {
    .quick-info.background-darkblue-gradient.white-halfcircle::before {
        top: -6rem;
    }
}

@media screen and (min-width: 993px) and (max-width: 1260px) {
    .other-page .more-about .card {
        min-height: 300px;
    }
    
    .other-page .more-about .communication-types .card {
        min-height: 150px;
    }
    
    .other-page .verticals .card {
        min-height: 280px;
    }
    
    .other-page.contact .card {
        min-height: 400px;
    }
    
    .other-page .reference .circles > div:first-child + div img {
        width: 100%!important;
        max-width: 100%!important;
    }
    
}

@media screen and (max-width: 1200px) {

    .other-page .advantages .d-xl-none p {
        font-size: 1.3rem;
    }
    
    .other-page .advantages .d-xl-none p i {
        font-size: 1.6rem;
    }

}
    
@media screen and (max-width: 1400px) {

    .other-page.contact .visit-cards .container .row > div {
        padding-left: 0;
        padding-right: 0.5rem;
    }

}
    
@media screen and (min-width: 1400px) {
    .jumbotron.jumbotron-fluid.kiss, .jumbotron.jumbotron-fluid.helps, .jumbotron.jumbotron-fluid.realization, .jumbotron.jumbotron-fluid.about {
    min-height: 700px;
    }    
}