html, body {margin: 0px; padding: 0px; overflow-x: hidden;
    /*height: 100%;*/
    font-size: 16px;
}
html {height: 100%;}
body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    font-size: 16px;
    -webkit-overflow-scrolling: touch;
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}

@font-face {
    font-family: "Codec Pro Variable";
    src: url("../fonts/CodecProVariableGX.woff2") format('woff2-variations');
    font-style: normal;
}

a {color: #ff3333; text-decoration: underline;}
a:hover {cursor: pointer;}
a:hover, a:focus, a:active {outline: none; color: #ff3333; text-decoration: none}
a img {border: 0px;}
a > .fa {padding: 0 5px;}
b, strong {font-weight: 600;}

.fa.icon-big {font-size: 1.5em;}

span.hilight--green {background-image: linear-gradient(transparent 62%,#18c5c3 62%,#18c5c3 82%,transparent 82%);}
span.hilight--red {background-image: linear-gradient(transparent 62%, #ff6464 62%, #ff6464 82%, transparent 82%);}

hr {border: 0; border-bottom: 1px solid #cccccc; height: 1px}
hr.dotted {border: 0; border-bottom: 8px dotted #d8d8d8; height: 1px}

/* GLOBANI NASTAVENI PRVKU --------------------------------------------------------*/
h1, h2, h3, h4, h5 {font-family: 'Titillium Web', 'Roboto', sans-serif; line-height: 1.2}
h1 {font-size: 50px; margin: 1.5em 0 .5em; font-weight: 700; /*color: #0066a5;*/}
h2 {font-size: 38px; margin: 1.5em 0 .5em; font-weight: 700}
h3 {font-size: 30px; margin: 1.5em 0 .5em; font-weight: 700}
h4 {font-size: 24px; margin: 1.5em 0 .5em; font-weight: 700}
h5 {font-size: 20px; margin: 1.5em 0 .5em; font-weight: 700}

h1:first-of-type {margin-top: 0 !important;} /*removes margin of each element which is first child of an subelement*/

/* Muzeme nahradit za .text-content - doplnil sem to do vsech DIVs kde je obsah */
.col-md-8.col-md-offset-2 div.text-block:first-child {margin-top: 0 !important;}

/****** MARGIN MAGIC ******/
/* First/last direct childs remove margins */
.text-block>h1:first-child,
.text-block>h2:first-child,
.text-block>h3:first-child,
.text-block>h4:first-child,
.text-block>h5:first-child,
.text-block>h6:first-child,
.text-block>ol:first-child,
.text-block>ul:first-child,
.text-block>p:first-child {margin-top: 0}

/* Note: */
/* |= is CSS2 and does not matches dash "-" eg. "col-" */
/* ^= is CSS3 and can match even dash */
/*.text-block div[class|="col"] h1:first-child,
.text-block div[class|="col"] h2:first-child,
.text-block div[class|="col"] h3:first-child,
.text-block div[class|="col"] h4:first-child,
.text-block div[class|="col"] h5:first-child,
.text-block div[class|="col"] h6:first-child,
.text-block div[class|="col"] ol:first-child,
.text-block div[class|="col"] ul:first-child,
.text-block div[class|="col"] p:first-child {margin-top: 0;}*/
/* better with margins on all devices than no margins on mobile */

.text-block>h1:last-child,
.text-block>h2:last-child,
.text-block>h3:last-child,
.text-block>h4:last-child,
.text-block>h5:last-child,
.text-block>h6:last-child,
.text-block>ol:last-child,
.text-block>ul:last-child,
.text-block>p:last-child {margin-bottom: 0}

/*.text-block div[class|="col"] h1:last-child,
.text-block div[class|="col"] h2:last-child,
.text-block div[class|="col"] h3:last-child,
.text-block div[class|="col"] h4:last-child,
.text-block div[class|="col"] h5:last-child,
.text-block div[class|="col"] h6:last-child,
.text-block div[class|="col"] ol:last-child,
.text-block div[class|="col"] ul:last-child,
.text-block div[class|="col"] p:last-child {margin-bottom: 0;}*/
/* better with margins on all devices than no margins on mobile */

/* Too junior version of this code. Needs more testing :) */
/*@media (max-width: 991px) {
    .text-block div[class|="col"] ~ div[class|="col"] {margin-top: 15px;}
}*/


/* Add margins to floating images by tinymce */
img[style~="left;"]  {margin:0 1em 1em 0;}
img[style~="right;"]  {margin:0 0 1em 1em;}
.img-label {margin: -20px 0 10px; display: block; padding: 12px; line-height: 1.2; font-size: 15px; font-style: italic;
    /*background: rgb(0, 0, 0); color: white;*/
    clear: both;
}
/*.img-label::before {content: '—'; margin-right: 5px;}
.img-label::after {content: '—'; margin-left: 5px;}*/

/* responsive images */
img.responsive {max-width: 100%; height: auto;}

/* responsive iframes - bootstrap has its own embed-responsive embed-responsive-16by9 embed-responsive-4by3 embed-responsive-item classes*/
div.responsive-container {position: relative; overflow: hidden; padding-top: 56.25%; /* 16:9 ration */} /*embed-responsive embed-responsive-16by9*/
div.responsive-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;} /*embed-responsive-item*/

/* Form basics */
form {margin: 0px; padding: 0px;}
fieldset {margin: 0px; padding: 0px; border: 0px;}
legend {padding: 0; font-weight: 700; margin: 1em 0;}
legend:before, legend:after {content: " — ";}
input, textarea, select, button {font-size: 16px; font-family: inherit; border-radius: 3px; background: #f7f7f7;}
input.form-control, textarea.form-control, select.form-control {font-size: 16px; font-family: inherit; border-radius: 3px; background: #f7f7f7; color: #9e9e9e;}
label {font-weight: normal;}

input.placeholder {color: #777}
::-webkit-input-placeholder {color: #777;}
:-moz-placeholder {color: #777;}
::-moz-placeholder {color: #777;}
:-ms-input-placeholder {color: #777;}
textarea {display: block; resize:vertical; height: 90px; background-color: #e9e9e9; border: 0; width: 100%;
    box-sizing: border-box; padding: 7px 12px; margin: .2em 0;}
select {box-sizing: border-box; margin: 0; padding: 7px 12px; border: 0; background-color: #e9e9e9;}
select option {background-color: #e9e9e9;}

/* box sizing for some elements */
table, tr, th, td, input {box-sizing: border-box;}

/* UL formats*/
ul, ol {margin: 1em 0}
ul li, ol li {margin: 0.5em 0}

ul.layout {margin: 0; padding: 0; list-style: none;}
ul.layout li {margin: 0; padding: 0;}

/* list with check marks */
ul.check {margin: 1em 0; padding: 0; list-style: none;}
ul.check li {list-style-position: inside; margin-left: 41px; text-indent: -41px;}
ul.check li:before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../images/check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 20px;
    position: relative;
    top: 5px;
}

/* list with cross marks */
ul.cross {margin: 1em 0; padding: 0; list-style: none;}
ul.cross li {list-style-position: inside; margin-left: 41px; text-indent: -41px;}
ul.cross li:before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../images/cross.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 20px;
    position: relative;
    top: 5px;
}

/* list with great numbers marks */
ol.great {margin: 1em 0; padding: 0; list-style: none; counter-reset: my-great-counter;}
ol.great li {counter-increment: my-great-counter; list-style-position: inside; margin: 1.2em 0; margin-left: 50px; text-indent: 0; position: relative;}
ol.great li:before {
    content: counter(my-great-counter);
    display: inline-block;
    width: 38px;
    text-align: right;
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
    font-family: 'Titillium Web', 'Roboto', sans-serif;
    position: absolute;
    left: -50px;
    top: -6px;
    color: hsl(210 80% 50%);
    /*text-shadow: 0 0 30px #1980e6;*/
}

.nowrap {white-space: nowrap}

/* Paragrapgs and perex by tinymce */
p {margin: 1.5em 0 1.5em;}
p.perex, blockquote {margin: 1em 0; font-size: 22px; line-height: 1.4;}
p span[style] {line-height: 1.4}
p.cite {font-style: italic; background-color: #eee; padding: 1em; position: relative; padding-right: 50px}
p.cite::before {font-family: 'FontAwesome', sans-serif; content: "\f10e"; float: right; font-size: 28px; color: #bbb;
    position: absolute; top: 0px; right: 15px;}
p.cite.medium {font-style: italic; padding: 1em 1.5em; position: relative; background-color: transparent;
    /* border: 1px dashed #d2d2d2; */ border-left: 4px solid #0288D1; margin-left: -1.5em;
}
p.cite.medium::before {content: none}
p.cite.great {font-style: italic; padding: 1em 2em; position: relative; padding-right: 50px; font-size: 1.5em; color: #888; background-color: transparent;}
@media screen and (max-width: 767px) {
    p.cite.medium {margin-left: -0.5em;}
    p.cite.great {padding-left: .75em; font-size: 1.4em; padding-right: 40px;}
}

/* Conditional BR elements */
@media screen and (min-width: 768px) {
    br.mobile-only {display: none;}
}
@media screen and (min-width: 992px) {
    br.mobile-tablet-only {display: none;}
}
@media screen and (max-width: 767px) {
    br.mobile-hide {display: none;}
}
@media screen and (max-width: 991px) {
    br.mobile-tablet-hide {display: none;}
}

/* Bacis tables */
table {font-size: 1em; border-collapse: collapse; border-spacing: 1px;}
table tr {}
table td {border: 1px solid #aaa; padding: .3em .5em}
table thead td, table th {padding: .4em .5em .3em; background-color: #ddd; border: 1px solid #aaa; border-bottom: 2px solid #333 !important;
    font-weight: 700; color: black}
table tbody td {}

/* Lined table */
table.lines {}
table.lines tr {}
table.lines td {border: 0; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa;}
table.lines thead td, table.lines th {background-color: #eee; border: 0; border-bottom: 1px solid #aaa !important;
    font-weight: 700; color: black}
table.lines tbody td {}

table.price {border: 0; border-collapse: collapse; margin: 0.5em 0;}
table.price tr th, table.price tr td {text-align: left; padding: 0.4em 0.5em; border: 1px solid #aaa;}
table.price tr th {font-weight: bold; font-size: 1.2em; color: #333; background-color: #b6db30;
    text-shadow: 0px 1px 0px #d9f76f;}
table.price tr td {vertical-align: top;}
table.price tr:nth-child(odd) td {background-color: rgba(200,200,200,0.2)}
table.price tr:nth-child(even) td {background-color: rgba(255,255,255,0.5)}
table.price tr:last-child td {background-color: rgba(200,200,200,0.5); font-size: 1.2em}

/* Layout table */
table.layout {border-spacing: 0; border: 0; width: 100%;}
table.layout td, table.layout th {padding: 0; padding-bottom: 5px; padding-top: 5px; vertical-align: top; background-color: transparent; font-weight: normal; border: 0 !important;}
/* special for lqd web */
table.layout td h3:first-of-type{margin-top: 5px;}
table.layout img {margin-right: 15px;}

/****** CMS LAYOUT TEMPLATES ******/
/* Extended block layout +MQ */
div.block-extended {position: relative; margin: 1.5em 0;}
@media (min-width: 856px) {
    .col-md-8.col-md-offset-2 div.block-extended {margin-left: -50px; margin-right: -50px;}
}

/* Wide block layout +MQ */
div.block-wide {position: relative; /*border: 1px dashed #3496c3; border-left:0; border-right:0;*/ margin: 1.5em 0;}
@media (min-width: 856px) {
    .col-md-8.col-md-offset-2 div.block-wide {margin-left: -50px; margin-right: -50px;}
}
@media (min-width: 992px) {
    .col-md-8.col-md-offset-2 div.block-wide {margin-left: -160px; margin-right: -160px;}
}
@media (min-width: 1200px) {
    .col-md-8.col-md-offset-2 div.block-wide {margin-left: -195px; margin-right: -195px;}
}

/* Extra Wide block layout +MQ */
div.block-extrawide {position: relative; margin: 1.5em 0;}
@media (min-width: 856px) {
    .col-md-8.col-md-offset-2 div.block-extrawide {margin-left: -50px; margin-right: -50px;}
    .col-md-12 div.block-extrawide {margin-left: -50px; margin-right: -50px;} /*opět -50px...divný, ale je to správně*/
}
@media (min-width: 992px) {
    .col-md-8.col-md-offset-2 div.block-extrawide {margin-left: -160px; margin-right: -160px;}
    .col-md-12 div.block-extrawide {margin-left: 2px; margin-right: 2px;} /*pouze drobná korekce*/
}
@media (min-width: 1200px) {
    .col-md-8.col-md-offset-2 div.block-extrawide {margin-left: -195px; margin-right: -195px;}
    .col-md-12 div.block-extrawide {margin-left: 0; margin-right: 0;}
}
@media (min-width: 1450px) {
    .col-md-8.col-md-offset-2 div.block-extrawide {margin-left: -315px; margin-right: -315px;}
    .col-md-12 div.block-extrawide {margin-left: -120px; margin-right: -120px;}
}
@media (min-width: 1700px) {
    .col-md-8.col-md-offset-2 div.block-extrawide {margin-left: -400px; margin-right: -400px;}
    .col-md-12 div.block-extrawide {margin-left: -205px; margin-right: -205px;}
}

/* Ordinary coloring styles */
div.block-dark {background-color: #444; padding: 1em; color: white; margin: 1.5em 0;}
div.block-grey {background-color: #eee; padding: 1em; color: black; margin: 1.5em 0;}

/*********************************************************/
/*********************************************************/

/* Specials for form */
form.defform {}
form.defform table.layout {}
form.defform table.layout td {padding: 3px 0}
form.defform input {width: 100%}
form.defform textarea {width: 100%; height: 250px;}

div.clear {display: block; font-size: 0px; line-height: 0; height: 0px; overflow: hidden; clear: both;}
div.line {border-top: 1px solid #ccc; margin: 16px 0; height: 1px; font-size: 1px; line-height: 1}

.alert {border: 0; border-radius: 0; font-size: 18px;}
.alert-success {color: #FFF; background-color: #74ad1b; opacity: 0.8;}

/*BUTTONS*/
button.button, a.button, input.button, input[type="submit"], input[type="button"] {
    border: 0px; border-radius: 3px; background-color: #ff3333; color: #FFF; 
    font-family: 'Titillium Web', 'Roboto', sans-serif; font-weight: 700;
    display: inline-block; text-decoration: none; cursor: pointer; 
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    transition: color .25s, background-color .25s, box-shadow .25s
}
button.button:hover, a.button:hover, input.button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #e00;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
}
.button.button-small {padding: 5px 18px; font-size: 18px;}
.button.button-big {padding: 12px 22px; font-size: 18px;}
.button.button-header {padding: 15px 25px; font-size: 22px;}
.button.button-blue {background-color: #30a3ba;}
.button.button-blue:hover {background-color: #1b8ba0;}
.button.button-ghost {text-transform: uppercase; font-family: Roboto; font-size: 14px; font-weight: bold; border-bottom: 1px solid #ff3333; 
    border-radius: 0; text-decoration: none; background: none; color: #f33; box-shadow: none; padding: 0.6em 1em;
    transition: color .25s, border-color .25s, background-color .25s}
.button.button-ghost:hover {background: none; box-shadow: none; color: #333; border-color: #333; border-bottom: 1px solid;}

/* Stinovani komen obrazku referenci v textu kdyz jsou na rozklik*/
.shadow-hover {
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); display: inline-block; position: relative;
    -webkit-transition: box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.shadow-hover:hover {
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.15);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.shadow-hover:hover:before {
    background-color: rgba(0, 152, 255, 0.22); display: block; position: absolute; 
    content: " "; width: 100%; height: 100%;
}

/* COVERS*/
.cover-inner {margin-left: 9%; margin-right: 9%; padding: 8em 0; color: white;}
.cover-inner h1:first-child, .cover-inner h2:first-child, .cover-inner h3:first-child {margin-top: 0}
.cover-inner h1 {font-size: 60px;}
.cover-inner p:last-child {margin-bottom: 0}

/*CONTACT FORM*/
.contact-form {margin: 2.5em 0 1em}
.contact-form .form-control, .contact-form .form-control:focus {border: 1px solid #c1c1c1; color: #000; box-shadow: none;}
.contact-form input.form-control {height: 38px;}
.contact-form .info {font-size: 14px; position: relative; top: 36px;}
.contact-form .info i.fa{padding-right: 5px;}
.contact-form .link-to-contacts {text-align: right;}
.contact-form .link-to-contacts a {position: relative; top: 10px; white-space: nowrap;}
.contact-form .link-to-contacts a i.fa {padding-left: 5px;}
.jak-tvorime-weby #contact-form {display: none;}
hr.contct-form-line {transform: rotateZ(2deg);}

/*TESTIMONIALS*/
.person {height: 340px; margin-bottom: 1rem; text-align: center;}
.person .image {text-align: center; position: relative; margin-right: auto; margin-left: auto; max-width: 230px; }
/*.person .image:before {
    transition: background-color .2s; background-color: transparent; 
    content: ''; position: absolute; border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%;
}
.person .image:hover:before {background-color: rgba(47, 129, 189, 0.35);}
.person .image:hover .overcontent {border-top: 1px solid white; display: block; position: absolute; top: 75%; left: 25%; width: 50%;}
.person .image:hover .overcontent:after {
    content: ''; position: absolute; top: -6px; left: 103px; display: block; height: 11px; width: 11px; 
    border-left: 1px solid white; border-bottom: 1px solid white; transform: rotate(225deg);
}*/
.person .image img {border-radius: 50%; box-shadow: 0 0.5em 1em rgba(0,0,0,0.1);}
.person.detail .image {max-width: 260px;}
.person .name {margin-bottom: 0.2rem; margin-top: 1em; text-align: center;}
.person .name small {font-size: 19px; font-weight: bold; color: #40444b; margin-bottom: 0.2rem; margin-top: 1em; text-align: center;}
/*.person .name a {font-size: 22px; font-weight: bold; color: #40444b; margin-bottom: 0.2rem; margin-top: 1em; text-align: center; text-decoration: none;}
.person .name a:hover {text-decoration: underline;}*/
.person .position {font-style: italic; color: hsl(218, 8%, 47%)}
.person .social a {font-size: 14px; padding-right: 5px; color: #000;}
.person .social i.fa {font-size: 16px;}
.person .text {font-size: 14px; padding: 1rem 0;}

/*tabs2accordion*/
.tabs {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.tabs label {z-index: 10; -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; display: block; font-size: 20px; color: #ff3333; padding: 4px 23px; margin-bottom: 0; cursor: pointer;
    /*border-bottom: 3px solid #cccccc;*/
}
.tabs label:first-of-type {padding-left: 15px; padding-right: 15px;}
.tabs div.content {-webkit-box-ordinal-group: 100; -webkit-order: 99; -ms-flex-order: 99; order: 99; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; max-height: 0;height: auto; overflow: hidden;}
.tabs input[type="radio"]:checked + label {background: #FFF; border-bottom: 5px solid #ff3333;}
.tabs input[type="radio"] + label:hover {color: black;}
.tabs input[type="radio"]:checked + label + div.content {max-height: 100%; border-top: 3px solid #ccc; margin-top: -3px;}
.tabs label i.fa {display: none;}

/*MASONRY*/
.masonry {column-count: 2; column-gap: 2em; -moz-column-gap: 2em; -webkit-column-gap: 2em;}
.masonry .item {background-color: #eee; display: inline-block; margin: 0 0 2em; width: 100%; border: 1px solid #ccc; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;}
.masonry .item img {width: 100%;-webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);}

@media only screen and (max-width: 479px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

/*Layout*/
#bg-wrapper {/*background-image: url('../images/bg.png'); background-position: center top; background-repeat: no-repeat;*/}
#bg-wrapper.index {/*background-image: url('../images/bg-index.png');*/}
#bg-wrapper.blog {/*background-image: url('../images/bg-blog-mobile.png');*/}
/*#bg-wrapper {background-image: url("../images/bg-dev.jpg"); background-position: center top; background-repeat: no-repeat; height: 100%;}*/
/*#bg-wrapper.index {background-image: url("../images/bg-index-dev.jpg"); height: 100%}*/
.blog #content {background: none}

#bg-wrapper #header-wrapper {
    background-image: url('../images/bgnew18.png'); 
    background-position: center 4%; background-size: cover;
    /*background-position: left 10%; background-size: 200%;*/
    margin-bottom: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    position: relative;
}

#bg-wrapper.index #header-wrapper {
    background-image: url('../images/bg_hp_cover.jpg');
    background-color: hsl(188, 100%, 50%);
    background-position: center top; background-size: cover;
    background-blend-mode: multiply;
    box-shadow: none;
}

#inner-content-wrapper {
    /*background-image: url('../images/mrizka.png'); 
    background-repeat: repeat; background-position: center;*/
}

div.trans--arrow {text-align: center; height: 0; position: relative;}
div.trans--arrow::before {
    content: ""; display: block; position: absolute;
    width: 4px; height: 100px;
    top: -40%; left: 50%;
    margin-left: -2px; margin-top: -55px;
    background-color: #f33;
}
div.trans--arrow::after {
    content: ""; display: block; position: absolute; left: 50%;
    width: 16px; height: 16px;
    margin-left: -8px; margin-top: 30px;
    border-left: 4px solid #f33;
    border-bottom: 4px solid #f33;
    transform: rotate(-45deg);
}

header#index {height: 633px; margin-bottom: 2em;}
header#page {height: 135px;}
header#blog {/*height: 440px;*/ margin-bottom: 2em;}

header .top {margin-top: 46px;}
header .top .right {padding-right: 6px;}

header .header-text {color: #FFF; text-align: center; margin-top: 135px;}
header .header-text h1 {color: #FFF; font-size: 68px; font-weight: 700; margin-bottom: 50px;}
header .header-text p.perex {font-size: 22px; margin: 0 9em; margin-top: 2em;}
header .header-text a {color: white;}
header .header-text a:hover {color: white;}

header#blog .header-text {margin: 100px 0 40px;}
header#blog .header-text h1 {font-size: 60px; text-transform: none;}

#menu{
    z-index: 9999;
}
#menu ol, #menu ul, #menu li {list-style:  none; padding: 0; margin: 0}

@media only screen and (min-width: 768px) {
    #menu {
        margin-top: 4px;
    }

    #menu .menu {
        display: inline-block !important;
        float: right;
    }

    #menu ul.menu > li, #menu .menu > ul > li {
        display: inline-block;
        position: relative;
        float: left;
        margin: 8px 10px;
        border-bottom: 3px solid transparent;
    }

    #menu ul.menu ul li, #menu ul.menu ul ul li {
        padding-right: 0;
        margin-right: 0;
        background: #FFF;
        float: none;
        position: relative;
        width: 100%;
    }

    /*#menu .menu li:hover a.no-content-page {*/
        /*cursor: default;*/
    /*}*/

    #menu .menu li a {
        color: #FFF;
        display: inline-block;
        padding: 5px 5px;
        position: relative;
        text-decoration: none;
        border-bottom: 3px solid transparent;
    }

    #menu .menu > li.has-submenu > a {
        /*padding-right: 0;*/
    }

    #menu .menu > li.has-submenu > a.open-submenu {
        padding-left: 0;
    }

    #menu .menu > li > a:hover {
        border-bottom: 3px solid #ff3333;
    }

    #menu .menu li a i.fa {
        padding-right: 0;
        padding-left: 0;
    }

    /*submenu items*/
    #menu ul.menu ul a, #menu .menu ul ul a {
        font-size: 15px;
        padding: 8px 10px;
        line-height: 20px;
        width: auto;
        min-width: 230px;
        -moz-transition: color 0.3s, background-color 0.3s;
        -webkit-transition: color 0.3s, background-color 0.3s;
        transition: color 0.3s, background-color 0.3s;
        border-bottom: 1px solid #E0E0E0;
        text-align: left;
        border-left: none !important;
        position: relative;
        overflow: hidden;
        vertical-align: top;
        color: #000;
    }

    #menu ul.menu ul li:last-child a, #menu .menu ul ul li:last-child a {
        border-bottom: none;
    }

    #menu ul.menu li:hover > ul, #menu .menu ul li:hover > ul,
    #menu ul.menu li:focus > ul, #menu .menu ul li:focus > ul {
        visibility: visible;
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    #menu .menu .sub-menu, #menu .menu .children {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 9999;
        -webkit-transition: all 0.27s ease-in-out;
        -moz-transition: all 0.27s ease-in-out;
        -o-transition: all 0.27s ease-in-out;
        transition: all 0.27s ease-in-out;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        -ms-transform: rotateX(-90deg);
        -o-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
        border-top: 5px solid transparent;
        margin-top: 0;
    }

    #menu .menu .sub-menu li a:hover {
        color: #ff3333;
        background-color: #eee;
    }

    #menu ul.menu > li:hover > a,
    #menu ul.menu > li.active > a {
        border-bottom: 3px solid #ff3333;
    }

    #menu ul.menu > li > ul.sub-menu > li.active > a {
        color: #ff3333;
    }
}

/*********************************/
/* CONTENT BG & PADDING SETTINGS */
#content {
    padding: 1.4em 0 3.5em;
    background: url('../images/grid-symetric.png');
    background-repeat: repeat-x;
    background-position: 0 -93px;
}
#bg-wrapper.index #content {
    padding-top: 0;
    background: none;
}

#bg-wrapper.index #inner-content-wrapper {
    padding-top: 7em;
    /*background: url('../images/mrizka.png');
    background-position: center -8px;*/
    background: repeating-linear-gradient(135deg, #fbfbfb, #f3f3f3 16.666667%);
}

#bg-wrapper.index #inner-knowhow-wrapper {
    background: url('../images/bg_blog.jpg');
    background-position: center bottom;
}

#bg-wrapper.index #inner-knowhow-video-wrapper {
    background: url('../images/bg_know_how.jpg');
    background-position: center top;
}

.inverse-text-color {color: white;}
.inverse-text-color a {color: white}
.simple-margin {margin: .5em 0}
.no-margin {margin: 0}

#content .navigator {color: #777777; font-size: 14px; margin-bottom: 33px; margin-top: 10px;}
#content .navigator a{color: #777777;}
#content .heading {font-size: 36px; margin-bottom: 1.3em;}
#content .heading-center {font-size: 32px; margin-bottom: 1.3em; text-align: center;}

#content .services {margin-bottom: 2.5em;}
#content .services h2, #content .products h2 {margin-top: .5em; margin-bottom: 1em;}
#content .products {margin-bottom: 5.5em;}

.service {text-align: center; padding: 0 36px;}
.service a {display: block; text-decoration: none}
.service a h3, .service a h4 {text-decoration: underline; margin-top: 1em}
.service a:hover h3, .service a:hover h4 {text-decoration: none;}
.service a:hover img {-webkit-transform: translate(0, -10px); transform: translate(0, -10px);}
.service p {color: #333; font-size: 18px}
.service .image {width: 80px; height: 80px; margin: 0 auto}
.service .image img {max-width:100%; max-height:100%; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;}

#content .special-inquiry {background-color: #f3f3f3; padding: 10px; text-align: center;color: #333333; font-size: 18px; margin-bottom: 2em;}
#content .special-inquiry .button {margin-left: 18px;}
#content .special-inquiry #contact-form {display: none; text-align: left;}

.why-us-bg-container {background: url('../images/why-us-bg.jpg'); background-size: cover; background-position: center;}
#content .why-us {padding: 7em 3em 5em; color: white}
#content .why-us h2 {margin-top: 0;}
#content .why-us .reason {margin-bottom: 2em; }
#content .why-us .reason .title {font-size: 20px; font-weight: bold; margin-bottom: 5px;}
#content .why-us .reason .text {line-height: 1.4;}
#content .why-us #contact-form {display: none; text-align: left;}

#content .blog {margin-bottom: 1.5em;}
#content .blog h2 {margin-bottom: 1.5em;}
#content .blog .heading {margin-bottom: 1em;}

#content .article {margin-bottom: 2em;}
#content .article:nth-child(odd) {position: relative; left: -3em;}
#content .article:nth-child(even) {position: relative; right: -3em;}
#inner-knowhow-wrapper .article:nth-child(odd),
#content .other-articles .article:nth-child(odd) {position: relative; left: 0;}
#inner-knowhow-wrapper .article:nth-child(even),
#content .other-articles .article:nth-child(even)  {position: relative; right: 0;}

#content .article img {
    box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2); margin-bottom: 1em; 
    -webkit-transition: box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
#content .article img:hover {
    box-shadow: 0px 5px 25px 0 rgba(0, 0, 0, 0.2); 
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
}
#content .article .photo {margin-bottom: 20px;}
#content .article .photo img {width: 70%;}
#content .article .title {font-size: 24px; line-height: 1.3; margin-bottom: .5em;}
#content .article .date {font-size: 14px; color: #b2b2b2; margin-top: 7px; margin-bottom: 10px;}
#content .article .date i.fa {margin-right: 10px;}
#content .article .text {line-height: 1.4;}



#content .jobs {margin-bottom: 0.5em;}
#content .jobs .heading {margin-bottom: 17px;}
#content .jobs .heading i.fa {padding-left: 15px; font-size: 28px;}
#content .jobs .sub-heading {font-size: 20px; margin-bottom: 1.1em;}
#content .jobs .sub-heading p {margin: 0;}
#content .jobs .sub-heading i.fa {padding-left: 5px;}
#content .jobs .article {margin-bottom: 2em;}
#content .jobs .article .title {font-size: 20px; line-height: 1.3; margin-bottom: 13px;}
#content .jobs .article .text {line-height: 1.4; margin-bottom: 1.1em;}#content .jobs {margin-bottom: 0.5em;}

#content .jobs-career {margin: 3em 0;}
#content .jobs-career .article {text-align: center; padding: 1.5em; background-color: white; border-radius: 2em; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); left: 0;}
#content .jobs-career .article:after {content: " "; position: absolute; left: 50%; margin-left: -25px; top: 0em; width: 50px; height: 5px; background-color: #ff0000;}
#content .jobs-career .article h4 {margin-top: 1em;}
a.ar-right {padding-right:1.5em; position: relative;}
a.ar-right:after {content: "\2193"; position: absolute; right: 0; font-family: initial; transition: .3s transform;}
a.ar-right:hover:after {transform: translateX(100%)}
    
#content .clients {margin-bottom: 1em;}
#content .clients img {margin-bottom: 1em;}
#content .clients .heading {margin-bottom: 0.7em;}

#content .facebook {margin-bottom: 2em;}

/* LQD color boxes */
.color-block {padding: 2em; margin-top: 1.5em; margin-bottom: 1.5em; border-radius: 5px;}
.color-block.blue {background-color: rgba(51,185,255, 0.2); box-shadow: 0 20px 40px hsla(200, 56%, 35%, 0.1); color: hsla(200, 56%, 20%, 1);}
.color-block.grey {background-color: rgba(117, 117, 117, 0.15); box-shadow: 0 20px 40px hsla(0, 0%, 25%, 0.1); color: black;}
.color-block.yellow {background-color: rgba(255,181,0, 0.2); box-shadow: 0 20px 40px hsla(42, 100%, 30%, 0.1); color: hsla(42, 100%, 10%, 1);}
.color-block.green {background-color: rgba(13, 242, 47, 0.2); box-shadow: 0 20px 40px hsla(128, 88%, 30%, 0.1); color: hsla(128, 88%, 15%, 1);}
.color-block.dark {
    padding: 4em; margin-top: 2.5em; margin-bottom: 2.5em; border-radius: 0;
    background-color: rgb(40, 40, 40); color: #e6e6e6; color: hsl(0, 0%, 90%);
}
.color-block.dark strong, .color-block.dark b {color: white}
.color-block.dark h1, .color-block.dark h2, .color-block.dark h3, .color-block.dark h4, .color-block.dark h5 {color: white}
.color-block.dark a.button.button-ghost:hover {color: #fff; border-color: #fff;}

.inverse-text-color .button.button-ghost {color: #fff; border-color: #fff;}
.inverse-text-color .button.button-ghost:hover {color: #333; border-color: #333;}

#content aside .color-block {padding: 1.5em 1.5em;}
#content aside .color-block h5 {font-size: 22px; margin-top: 1em; font-weight: 700;}


#sidebar {padding: 1.5em 0 1em 2em;}
#sidebar h4 {margin: 0em 0 0.6em 0;}

.references-sidebar {border-left: 1px solid black; padding: 0 100px 0 60px; margin-top: 1em;}
.references-sidebar .number {font-size: 3.5rem; font-weight: bold; text-align: center; line-height: 1.3;}
.references-sidebar .number-text {text-align: center; line-height: 1.3; font-weight: bold;}

.reference-detail-sidebar {border-left: 1px solid black; padding-left: 30px; margin-top: 1em;}

/*.references .tabs-widget .content {padding: 2em 0 0;}*/
/*.references .tabs-widget .content .reference {margin-bottom: 2em;}*/

/*.references .reference-wrapper {margin-top: 2em;}*/
.reference-row-wrapper {margin-top: 1.5em; margin-bottom: 1.5em; padding: 0 10px}

.references .reference .image-cover {color: #FFF;}
.references .reference .image-cover .title {
    font-size: 28px; line-height: 1.2; padding: 0 1em;
    position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);
}
.references .reference .image-cover .title .case-study {}
.references .reference .image-cover .title .case-study span {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    padding: 5px 7px 3px; display: inline-block; border-radius: 1px; 
    background-color: white; color: black;
}
.references .reference .mobile-title {text-align: center; font-size: 20px; margin-bottom: 2em;}
/*.references .reference .mobile-title a {color: black;}*/

.references .reference .image-cover div.link {position: absolute; top: 85%; left: 50%; transform: translate(-50%, -15%);}
.references .reference .image-cover div.link:hover span{text-decoration: underline;}
.references .reference .image {position: relative; margin-bottom: 1.5em;}
.references .reference .image img {/*border: 1px solid #ddd;*/ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);}
.references .reference .image .image-cover {
    position: absolute; top: 0; left: 0; cursor: pointer; width: 100%; height: 100%; 
    text-align: center; /*display: none;*/ background-color: rgba(47, 129, 189, 0.85);
    visibility: hidden; opacity: 0;
    -webkit-transition: visibility 0s, opacity 0.2s ease-in-out;
    transition: visibility 0s, opacity 0.2s ease-in-out;
}
.references .reference .image:hover .image-cover {
    visibility: visible; opacity: 1; /*display: block;*/
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
}

/* Obalovy element pro text v detailu reference */
.reference-text table {display: block; padding: 1em; margin: 3em 0; background-color: white; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); border-radius: 5px}
.reference-text table a {/*text-decoration: none; background-color: white;*/}
.reference-text table a:hover {color: black}
.reference-text tbody {display: block;}
.reference-text tr {display: flex; flex-direction: row;}
.reference-text tr:first-child td {font-size: 12px; font-weight: 700; color: #849898; text-transform: uppercase; white-space: nowrap;}
.reference-text td {display: block; border: 0; padding: 5px 10px; flex: 1 0 25%; font-size: 20px; font-weight: 700;}

/* Galerie v referencich */
.reference-container {
    /*border-top: 4px solid transparent;
    border-image-source: linear-gradient(to right, #1b71ae 25%, #1bd480 50%,#1b71ae 75%);
    border-image-slice: 10;*/
    /*background: linear-gradient(135deg, #68c1ff 0%, #81ffc6 100%);*/
    background-color: #f3f3f3;
    margin: 2em 0; 
}
.reference-gallery {
    display: flex; 
    justify-content: center; 
    padding: 2em 0; 
}
.reference-gallery .item {flex-grow: 1; flex-basis: 20%; margin: 1% 1%; text-align: center}
.reference-gallery .item.doublespace {flex-grow: 2; flex-basis: 40%;}


/* Carousel v referencich */
span.arrow-left, span.arrow-right {position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -15px;}
span.arrow-left {left: 50%;}
span.arrow-right {right: 50%;}
@media screen and (min-width: 768px) {
    span.arrow-left {width: 30px; height: 30px; margin-top: -15px; font-size: 30px; margin-left: -10px;}
    span.arrow-right {width: 30px; height: 30px; margin-top: -15px; margin-right: -10px;}
}
span.arrow-left:after, span.arrow-right:after {
    content: ""; position: absolute; transform-origin: center;
    width: 30px; height: 30px; top: 50%; margin-top: -15px;
    border: 4px solid #ccc; border-left: 0; border-bottom: 0;
}
span.arrow-left:after {left: 3%; transform: rotateZ(-135deg);}
span.arrow-right:after {right: 3%; transform: rotateZ(45deg);}
.carousel-control {
    background-color: transparent; text-shadow: none;
    top: 50%; width: 50px; height: 70px; margin-top: -35px;
    filter: none; opacity: 1;
    transition: transform 0.2s ease-in-out;
}
.carousel-control.left, .carousel-control.right {background-image: none}
.carousel-control.left {left: -70px}
.carousel-control.right {right: -70px}

.carousel-control:focus, .carousel-control:hover {filter: none; opacity: 1; outline: 0;}
.carousel-control:hover span.arrow-left:after, .carousel-control:hover span.arrow-right:after {border-color: #f33}

.carousel-control.left:hover {transform: translateX(-8px);}
.carousel-control.right:hover {transform: translateX(8px);}



/*div#masonry {*/
    /*display: -ms-flexbox;*/
    /*-ms-flex-direction: column;*/
    /*-ms-flex-wrap: wrap;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*flex-wrap: wrap;*/
    /*height: 100vw;*/
    /*font-size: 0;*/
    /*width: 800px;*/
/*}*/
/*div#masonry img {*/
    /*width: 50%;*/
/*}*/

.blog-articles {}
.blog-articles .article {margin-bottom: 1.5em;}
.blog-articles .article img {box-shadow: 0px 5px 25px 0 rgba(0, 0, 0, 0.2);}
.blog-articles .article h4 {margin-top: 5px;}
.blog-articles .article .date {color: #b2b2b2; margin-top: 7px; font-size: 14px;}
.blog-articles .article p {margin-top: 7px; }
.blog-articles .article .date i.fa {margin-right: 10px;}.blog-articles {}
.article span.modified {color: #0091d8;}

.blog-detail .perex {
    font-size: 24px;
    /*margin: 1em -70px;*/ 
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}
.blog-detail .date {color: #b2b2b2;}
.blog-detail .social-box {background-color: rgba(117, 117, 117, 0.1); padding: 1em; text-align: center; margin-bottom: 1.5em; margin-top: 3em;}
.blog-detail .social-box .text {font-size: 24px; margin-bottom: 15px;}
.blog-detail .other-articles {margin-bottom: 1em;;}
#content .other-articles .article {padding-right: 0}
.blog-detail .other-articles .previous a, 
.blog-detail .other-articles .next a {
    font-size: 15px;
}
.blog-detail .other-articles .previous {text-align: left}
.blog-detail .other-articles .next {text-align: right}
.blog-detail .other-articles .navlabel {margin-bottom: 6px}
.blog-detail .other-articles .navlabel a {font-size: 15px; line-height: 1.2;}
.blog-detail .other-articles .name a {font-size: 19px; line-height: 1.2;}
.blog-detail .author {margin-bottom: 2em;}
.blog-detail .author .name {font-size: 19px; margin-bottom: 0.5em; }
.blog-detail .author .summary {font-size: 15px; margin-bottom: 10px;}
.blog-detail .author img {}
.blog-detail a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
}


.sidebar-articles .article {margin-bottom: 1.5em;}
.sidebar-articles .article .name a {font-size: 20px; line-height: 1.2;}
.sidebar-articles .article .date {font-size: 14px; color: #b2b2b2; margin-top: 10px;}
.sidebar-articles .article p {font-size: 14px; margin-top: 5px;}

/* Gallery widget */
.gallery .image {margin-bottom: 1em; text-align: center;}
.gallery .image-cover {position: relative; display: inline-block;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -webkit-transition: box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.gallery .image-cover:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.gallery .image-cover .title .fa {display: none;}
.gallery .image-cover .title:before {
    content: ""; display: none; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    width:50px; height:50px;
    background: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),rgba(0,0,0,.15);
    background-position:center;
    background-size: 50% 2px,2px 50%; /*thickness = 2px, length = 50% (25px)*/
    background-repeat: no-repeat;

}
.gallery .image-cover:hover:before {
    content: "";
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    text-align: center;
    background-color: rgba(47, 129, 189, 0.85);
}
.gallery .image-cover:hover .title:before {display: block;}

/* SHOWCASE gallery style */
.gallery.showcase .row div[class|=col] {padding-right: 8px; padding-left: 8px;} /* Reduce padding at small devs */
@media (min-width: 856px) {
    .gallery.showcase {margin-left: -40px; margin-right: -40px;}
}
@media (min-width: 992px) {
    .gallery.showcase {margin-left: 0px; margin-right: 0px;}
}
@media (min-width: 1200px) {
    .gallery.showcase {margin-left: 0px; margin-right: 0px;}
    .gallery.showcase .row div[class|=col] {padding-right: 15px; padding-left: 15px;} /* Enable now an up */
}
@media (min-width: 1366px) {
    .gallery.showcase {margin-left: -70px; margin-right: -70px;}
}
@media (min-width: 1440px) {
    .gallery.showcase {margin-left: -110px; margin-right: -110px;}
}
/*@media (min-width: 1536px) {
    .gallery.showcase {margin-left: -160px; margin-right: -160px;}
}
@media (min-width: 1680px) {
    .gallery.showcase {margin-left: -200px; margin-right: -200px;}
}*/
.gallery.showcase .image-cover {margin-bottom: .5em;}


/*about us*/
.join-us {margin-bottom: 2em;}
.join-us .text {padding-bottom: 1em;}
.join-us .text h2 {margin: 0;}
.join-us .text p {font-size: 20px; margin: 1em 0 1em !important; line-height: 1.4;}
.join-us #contact-form {display: none; text-align: left;}

.sidebar-offers .offer {margin-bottom: 1.5em;}
.sidebar-offers .offer .name a {font-size: 20px; line-height: 1.2;}
.sidebar-offers .offer p {margin: 12px 0;}


footer {
    padding: 1em 0 0; 
    color: #b9b9b9; 
    background-color: #151b25; 
    min-height: 80px;
    grid-row-start: 2;
    grid-row-end: 3;
}
footer a, footer a:hover, footer a:focus, footer a:active {color: #999999;}
footer .title {font-size: 20px; margin-bottom: 0.5em; text-transform: uppercase;}
footer .text {font-size: 14px; color: #999999;}
footer .bottom-text {font-size: 14px; color: #666666; font-style: italic;}
footer ul {list-style-type: none; padding-left: 0;}
footer .social-foot {margin-top: .5em; font-style: italic; font-size: 15px; text-align: right;}

.faq {
    border-bottom: 1px solid #eee;
}

.faq-item-wrapper {
    display: flex;
    display: -ms-flex;
    flex-direction: column;
}

.faq-item {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    padding: 1em 1em 1em 0;
    border-top: 1px solid #eee;
    text-decoration: none;
}

.faq-question {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
}

.faq-item[aria-expanded="true"] .faq-question:before, 
.faq-item[aria-expanded="true"] .faq-question:after {
    transform: rotate(45deg);
    transition: .5s;
}

.faq-item[aria-expanded="false"] .faq-question:before, 
.faq-item[aria-expanded="false"] .faq-question:after {
    transition: .5s;
}

.faq-item:hover {
    text-decoration: none !important;
}

.faq-item:hover .faq-question {
    color: #2e86de;
}

.faq-question {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.faq-question:before {
    content: '';
    position: absolute;
    right: 16px;
    background-color: #2e86de;
    width: 16px;
    height: 2px;
}

.faq-question:after {
    content: '';
    position: absolute;
    right: 23px;
    background-color: #2e86de;
    width: 2px;
    height: 16px;
}

.faq-answer {
    padding-bottom: 20px;
    /*margin-top: -20px; */
}


/******************************************************/
/******************************************************/
/*MEDIA QUERIES*/
@media screen and (max-width: 1440px) {
    .cover-inner {padding: 4em 0;}
    .cover-inner h1 {font-size: 50px;}
}

@media screen and (max-width: 1199px) {
    #bg-wrapper #header-wrapper {background-position: center top;}

    header .header-text {white-space: normal; margin-top: 125px;}
    header .header-text p.perex {margin: 1em 5em;}

    #content .service {padding: 0 8px;}

    .references-sidebar {padding: 0 25px;}

    #content .article:nth-child(odd) {position: relative; left: 0;}
    #content .article:nth-child(even) {position: relative; right: 0;}
}


@media screen and (max-width: 991px) {
    #menu {
        margin-top: -5px;
    }
    #menu ul.menu > li {
        margin: 8px 6px;
    }
    #menu .menu > li:last-child {
        margin-right: 0;
    }
    #menu .menu > li:first-child {
         margin-left: 0;
    }

    #bg-wrapper #header-wrapper {background-position: center top;}

    .cover-inner {padding: 6em 0;}

    header .header-text {margin-top: 145px;}
    header .header-text h1 {font-size: 50px;}
    header .header-text p.perex {margin: 1em 0;}

    header#page {height: 125px;}

    header#blog .header-text h1 {font-size:  45px;}
    .blog-detail .perex {margin: 1em 0;}

    #content .service {padding: 0; margin-bottom: 2.5em;}
    #content .services {margin-bottom: 0;}
    #content .products {margin-bottom: 0;}
    #content .blog {margin-bottom: 0.5em;}

    /* smaller padding and margin on mobile */
    .color-block.dark {padding: 2em; margin-top: 1.5em; margin-bottom: 1.5em; margin-left: -15px; margin-right: -15px;}

    #sidebar {padding: 2em 0;}
    .references-sidebar {padding: 0em 20px;}
    .reference-detail-sidebar {border: none; padding-left: 0px; margin-bottom: 2em;}
    .references .reference .image {margin-bottom: 0.5em;}
    footer .social-foot {text-align: left;}
}

@media screen and (max-width: 991px) and (min-width: 768px){

}

@media screen and (max-width: 767px) {
    header .top { margin-top: 15px;}

    #bg-wrapper.index #header-wrapper {background-image: url('../images/bg_hp_cover_mobile.jpg');}
    #bg-wrapper #header-wrapper {background-image: url('../images/bgnewmobile18.png');}

    #bg-wrapper {/*background-image: url('../images/bg-mobile.png');*/}
    #bg-wrapper.blog {/*background-image: url('../images/bgnewmobile18.png');*/}

    header#page {height: 75px;}
    /*header#blog {height: 400px;}*/
    header#blog .header-text {margin-top: 100px;}

    header .header-text {margin-top: 145px;}
    header .header-text p.perex {font-size: 20px;}

    .cover-inner h1 {font-size: 40px;}

    #content .navigator {margin-bottom: 25px;}
    h1 {font-size: 40px;}
    h2 {font-size: 30px;}
    h3 {font-size: 24px;}
    h4 {font-size: 20px;}
    h5 {font-size: 18px;}
    h1.h1-small {font-size: 43px;}
    h1.h1-smaller {font-size: 40px;}
    p.perex { font-size: 20px;}
    #content .heading {font-size: 1.875rem;}
    #content .heading-center {font-size: 1.875rem; line-height: 1.2}
    #content .why-us {text-align: center; padding: 2.5em 1.2em 1.6em}
    #content .why-us .heading {line-height: 1.2;}
    #content .why-us .reason {margin-bottom: 2.5em;}
    #content .special-inquiry {padding: 15px;}
    #content .special-inquiry .button {margin-left: 0px; margin-top: 0.8em;}
    #content .heading-center {margin-bottom: 1.1em;}
    #content .products {margin-bottom: 0;}
    #content .blog .article {padding-right: 0;}

    /* Obalovy element pro text v detailu reference */
    .reference-text tbody {display: flex; flex-direction: row;}
    .reference-text tr {display: flex; flex-direction: column;}
    .reference-text tr:first-child td {margin-top: 8px;}
    .reference-text td {flex: 0 0 auto; min-height: 32px;}

    /*#sidebar {padding-top: 0;}*/
    .references-sidebar {border: none; padding: 0; margin-bottom: 2em;}
    .references .tabs-widget .content {padding: 0;}

    .reference-gallery {flex-flow: row wrap; justify-content: flex-start;}
    .reference-gallery .item {flex-grow: 0; flex-basis: 45%; margin: 1.5% 2.5%;}
    .reference-gallery .item.doublespace {flex-basis: 45%;}

    .join-us img {margin-bottom: 1.5em;}

    .references .reference .image {
        max-width: 402px;
        box-sizing: inherit;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery .image {
        box-sizing: inherit;
        margin-left: auto;
        margin-right: auto;
    }

    /*TESTIMONIALS*/
    .person {text-align: center;}
    .person img{display: inline;}


    footer .box {margin-bottom: 1.5em;}
    footer .title {font-size: 1rem;}
    footer .bottom-text {margin-top: 1em;}

    /*TABS*/
    .tabs div.content, .tabs label {-webkit-box-ordinal-group: NaN; -webkit-order: initial; -ms-flex-order: initial; order: initial;}
    .tabs div.content {background: #fff; padding: 0 15px;}
    .tabs input[type="radio"]:checked + label + div.content {border-top: 0;}
    .tabs div.content h3 {margin-top: 0.5em;}
    .tabs label {
        width: 100%;
        margin-right: 0;
        background: rgba(51,185,255,0.2);
        /* color: #000; */
        padding: 10px 15px;
        margin-bottom: 5px;
        /* border-bottom: 3px solid #f1f1f1; */
        /*border-radius: 3px;*/
        border: 1px solid #b5d0de;
    }
    /*.tabs label {width: 100%; margin-right: 0; background: rgba(51,185,255,0.2); color: #000; padding: 10px 15px; margin-bottom: 0px; border-bottom: 3px solid #f1f1f1;}*/
    .tabs input[type="radio"]:checked + label {
        background: #000000;
        border: 1px solid #000000;
        color: white;}
    .tabs label:first-of-type {padding-left: 15px; padding-right: 15px;}

    .tabs label i.fa {
        float: right;
        position: relative;
        top: 7px;
        font-size: 20px;
        color: black;
        display: inline-block;
    }
    .tabs input[type="radio"]:checked + label i.fa {
        color: #FFF;
    }

    .blog-detail .author .name {
        text-align: center;
    }
    .blog-detail .author img {
        width: 44%;
        margin: 0 auto 1em;
    }

    .contact-form .info {position: inherit; top: 0px;}

    .reference_logo_2col img {width: 50%; height: auto;}
}

/*@media screen and (max-width: 767px) and (min-width: 640px){*/
    /*.references .reference .text {margin-top: 2.5em; padding: 0 2em;}*/
/*}*/

@media screen and (max-width: 479px) {
    header .header-text {margin-top: 130px;}
    header .header-text h1 {font-size: 48px; line-height: 1.2; letter-spacing: 0px}
    header .header-text .light {font-size: 1.75rem; line-height: 1.2; margin-bottom: 1.5em;}

    header#blog .header-text h1 {font-size: 40px; letter-spacing: 0px}
    
    #content .special-inquiry {margin-left: -15px; margin-right: -15px;}
    .contact-form .link-to-contacts {width: 100%; text-align: left;}
}

@media screen and (max-width: 380px) {
    header .header-text {margin-top: 100px;}
    header .header-text h1 {font-size: 42px; line-height: 1.2; letter-spacing: 0px}
}

@media screen and (max-width: 340px) {
    header .header-text {margin-top: 100px;}
    header .header-text h1 {font-size: 38px; line-height: 1.2; letter-spacing: 0px}
}

@media screen and (max-width: 320px) {
    header .header-text {margin-top: 80px;}
}

@media screen and (max-width: 639px) {
    .reference-wrapper {width: 100%;}
}

@media screen and (max-width: 767px) {
    #menu .menu {float: left; width: 100%; padding: 0;}
    #menu ul.menu li {display: block; float: none; border-bottom: 1px solid #DEDEDE; margin: 0;}
    #menu ul.menu li:last-of-type {border-bottom: none;}
    #menu ul.menu li:first-of-type {border-top: 1px solid #dedede;}
    #menu ul.menu li a {color: #000; text-decoration: none; display: inline-block; width: 100%; padding: 10px 0 10px 15px;}
    #menu ul.menu > li > a.open-submenu {padding: 10px 0;}
    #menu ul.menu > li:first-of-type{border-top: none;}
    #menu .menu > li:first-child a {padding-left: 15px;}
    #menu .menu li a.no-content-page {width: 85%;}
    #menu ul.menu li a.open-submenu {display: inline-block; background-color: #efefef; width: 15%; float: right; text-align: center;}
    #menu ul.menu li a.open-submenu i.fa.open{-webkit-transform: rotate(180deg);}
    #menu ul.menu li.active > a {color: #ff3333; font-weight: bold;}

    a[href="#menu"] {float: right; margin-top: 9px; color: #FFF;}
    a[href="#menu"] i.fa {font-size: 21px;}
    a[href="#menu"] span.menu-label {top: -3px; font-size: 14px; position: relative;}

    #menu {
        position: fixed;
        top: 0;
        height: 100%;
        z-index: 99999;
        width: 280px;
        overflow-y: auto;
        background: white;
        margin: 0;
        overflow-x: hidden;
        left: 0;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transform: translateX(-300px);
        -webkit-transform: translateX(-300px);
        -moz-transform: translateX(-300px);
        /*transform: translateZ(1000px);*/
        -webkit-transform: translate3d(-300px, 0, 1000px);
        -webkit-transform-style:flat;
        /*transform-style: preserve-3d;*/
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.50);
    }

    #menu:target {left: 300px;}

    a[href="#index"] {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        text-decoration: none;
        top: 0;
        left: 0;
        font-size: 1.4em;
        color: #313131;
        padding: 10px;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        right: 0;
        z-index: 99999;
        transition: all 0.5s;
        font-size: 0;
        color: transparent;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    a[href="#index"]::before {
        font-family: Verdana, Geneva, sans-serif;
        content: '×'; /* hex code \00D7 */
        font-weight: bold;
        background: white;
        position: absolute;
        display: block;
        color: black;
        font-size: 16px;
        width: 24px;
        height: 24px;
        line-height: 23px;
        text-align: center;
    }

    #menu:target+a[href="#index"] {left: 300px; /* Safari 1.x */ -khtml-opacity: 1; opacity: 1; visibility: visible;}

    #menu ul.sub-menu {padding: 0px 0 0px 0px; display: block;}
    #menu ul.sub-menu li a {padding-left: 25px;}
    #menu ul.menu li a:focus {background: #efefef; color: #ff3333; font-weight: bold;}

    .blog-detail .other-articles .previous {margin-bottom: 1.5em;}
    .blog-detail .other-articles .next {text-align: left;}

}
/* END CSS */