.flex {
    display:flex;
}
.ceny {
    white-space: nowrap;
    overflow: hidden;
    padding: 20px !important;
    position: relative !important;
    display: flex;
    box-sizing: content-box;
    margin-top: 70px !important;
}
.ceny .zarovnanie {
    width: calc(100% - 35px);
    overflow: hidden;
    display: flex;
    border: 1px solid black;
}
.advert {
    background: #feae3a;
    padding: 2px 30px;
    margin: 0px;
    min-width: 25%;
    box-sizing: border-box;
    display: inline-block;
    transition:0.4s all;
}
.field .minus {
    right:80px !important;
}
@media (max-width:1280px) {
    .advert {
        min-width:33.4%;
    }
}
@media (max-width:900px) {
    .advert {
        min-width:50%;
    }
}
@media (max-width:600px) {
    .advert {
        min-width:100%;
    }
}
.advert h2 {
    text-align: left;
    text-transform: uppercase;
    font-size: 35px;
    margin-bottom: 30px;
    font-weight: normal;
}
h3.form {
    margin-top: 20px;
    margin-bottom: 15px;
}
.text-left {
    text-align:left;
}
.mob-width-50p > div {
    width: 100%;
}
@media (max-width:900px) {
    .px900-no-flex .mob-width-50p {
        display:block !important;
    }
}
.mob-width-50p {
    width: 100%;
    display:flex;
}
.p100.field input, .p100.field textarea, .p100.field .file-container {
    width: calc(100% - 35px);
}
.file-container input {
    width:100% !important;
    opacity:0;
}
.file-container{
    padding:0px !important;
    display:inline-block;
    height: 44px;
    width: calc(100% - 37px) !important;
}
.file .file-container::after {
    cursor:default;
}
.p100.field .require {
    margin-left: calc(100% - 42px);
    margin-top: -5px;
}
.mob-width-50p > div select, .mob-width-50p > div input {
    width: calc(100% - 35px);
}
.mob-width-50p .field:first-of-type {
    padding-right: 25px;
}
.mob-width-50p-submit.field.submit input {
    width: 300px;
}
.field.submit.mob-width-50p-submit {
    text-align:center;
    padding-right: 34px;
}
.field.submit.mob-width-50p-submit div:first-of-type {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}
.advert h1 {
    text-align: right;
    font-weight: normal;
    font-size: 46px;
}
.bigger-child-h1 > h1 {
    padding-top: 13px;
}
.back-black {
    background: #3a3a3a;
}
.back-white {
    background: white;
}
.back-gray {
    background: #b3b3b3;
}
.color-white {
    color:white;
}
.field label {
    display: block;
    font-size: 16px;
    position: relative;
    top: 9px;
}
.obj .field {
    padding:0px;
}
.body-sent > .non-content, .body-sent header, .body-sent footer {
    filter:blur(10px);
}
.sent {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sent > div {
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 25px 50px 35px;
    box-shadow: 0px 0px 8px black;
}
.sent > div > div:first-of-type {
    font-size: 40px;
}
.sent > div > div:last-of-type {
    text-align: center;
    margin-top: 30px;
}
.sent a {
    background: orange;
    color: black;
    text-decoration: none;
    font-weight: bold;
    padding: 7px 36px;
    /* margin: auto; */
    display: inline-block;
}
.sent i {
    color: orange;
    font-size: 60px;
    position: relative;
    top: 6px;
    margin-right: 10px;
}
.light-orange {
    background:#ffdeae;  
}
.field select, .field input, .field textarea, .field .file-container {
    border: 1px solid #3a3a3a;
    padding: 5px;
    font-size: 25px;
    font-family: OpenSans;
    width: 300px;
    background:white;
    position:relative;
    padding-left: 10px;
    /* text-align: center; */
    -o-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.field small {
    display:block;
    font-size: 13px;
    margin-top: -7px;
    margin-bottom: 0px;
}
.field small.submit {
    display: block;
    font-size: 13px;
    margin-top: -22px;
    margin-bottom: -8px;
}
.mob-width-50p .field .select, .mob-width-50p .field .checkbox {
    margin-top:12px;
}
.mob-width-50p .field select {
    top: 5px;
}
.mob-width-50p .field.select label, .mob-width-50p .field.checkbox label {
    top: 14px;
}
.mob-width-50p .field.select .info, .mob-width-50p .field.checkbox .info {
    margin-top:16px;
}
.field input::-webkit-file-upload-button {
    visibility: hidden;
}
.field input[type='file']::before {
    content: ' ';
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    width: 99%;
    height: 33px;
    background: white;
}
.field .file-container::after, .field .select, .field .plus, .field .minus {
    content: '\f067';
    display: inline-block;
    z-index: 1;
    font-family: "Font Awesome 5 Free";
    background: #3a3a3a;
    position: relative;
    font-weight: 700;
    font-size: 20px;
    width: 32px;
    height: 32px;
    align-items: center; 
    justify-content: center;
    display: inline-flex;
    color: white;
    right: 6px;
    top: 6px;
    position: absolute;
}
.field .file-container::after {
    pointer-events:none;
}
.field textarea {
    height: 160px;
    resize:none;
}
.field .require {
    position: absolute;
    width: 10px;
    height: 10px;
    display: inline-block;
    z-index: 3;
    margin-left: 292px;
    margin-top: -4px;
    background: red;
    border: 1px solid black;
}
.field.textarea .error {
    height: 143px;
    display: inline-flex;
    align-items: center;
    padding-bottom: 10px;
}
.field.textarea .error span {
    margin-top: 52px;
}
.field .minus::before {
    content: '\f068';
    font-family: "Font Awesome 5 Free";
}
.field .plus::before {
    content: '\f067';
    font-family: "Font Awesome 5 Free";
}
.field .select::after {
    content: '\f078';
    font-family: "Font Awesome 5 Free";
}
.field .select, .field .minus, .field .plus {
    pointer-events: none;
    right: 42px;
    top: auto;
    margin-left: -39px;
    margin-top: 7px;
    cursor:pointer;
}
.mob-width-50p .field:first-of-type .select {
    right:67px;
}
.field .minus, .field .plus {
    cursor:default;
    pointer-events: all;
}
.field input[type='submit'] {
    background: #3a3a3a;
    color: white; 
    margin-top: 30px;
    width: auto;
    padding: 5px 25px 5px 23px;
    cursor: pointer;
}
.field .info {
    display: inline-block;
    margin-top: 11px;
    margin-left: 9px;
    position: absolute;
    height:24px;
    cursor: pointer;
}
.field .info::after {
    font-family: "Font Awesome 5 Free";
    content: '\f059';
    font-size: 25px;
    color: #b3b3b3;
    transition: 0.4s all;
    position: relative;
    top: -6px;
}
.field .info div {
    pointer-events:none;
    opacity:0;
    position:absolute;
    width: 280px;
    min-height: 38px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    background: #3a3a3a;
    margin-left: -309px;
    margin-top: -11px;
    flex-flow:column;
    color: white;
    transition:0.4s all;
    line-height: 19px;
    padding:10px 10px;
    padding-top: 9px;
    padding-bottom: 11px;
}
.field {
    padding: 2px 0px;
    position:relative;
}
.spacer {
    padding-top: 13px;
}
.field select[disabled] {
    background: #efefef;
    color: black;
    opacity: 1;
}
.field .error {
    position: absolute;
    color: white;
    background: #e00000;
    width: calc(100% - 47px);
    margin-left: 1px;
    z-index: 2;
    margin-top: 1px;
    height: 40px;
    text-align: left;
    padding-left: 10px;
    display: inline-block;
    font-weight: bold;
    padding-top: 5px;
}
.field .error span {
    background: white;
    color: #e00000;
    display: inline-block;
    position: absolute;
    width: 32px;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    height: 32px;
    display: inline-flex;
    right: 6px;
    z-index: 7;
    top: 6px;
}
.field.hidden-choose input::after {
    z-index:0;
}
.no-require {
    display:none;
}
.liner {
    height: 1px;
    width: 100%;
    max-width: 400px;
    background: black;
    margin: auto; 
    margin-top: 40px;
    margin-bottom: 19px;
}
.field .file_name {
    position: absolute;
    margin-left: 13px;
    z-index: 1;
    font-size: 25px;
    overflow: hidden;
    margin-top: 6px;
    display: inline-block;
    white-space: nowrap;
    max-width: calc(-95px + 100%);
    pointer-events: none;
    text-overflow: ellipsis;
}
.field.date input[disabled] {
    text-align:center;
    background: #feae3a;
    color: #3a3a3a;
    font-weight: bold;
}
.info span {
    text-align: center;
}
.field.number input[readonly] {
    background: #efefef;
    color: black;
    cursor:default;
}
.field.submit {
    margin-top:30px;
}
.field.submit input {
    padding: 3px 25px 5px 23px; 
    transition:0.4s all;
    margin-top:0px;
}
.field.submit input:hover {
    background:#191919;
}
.field .info div::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 14px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #3a3a3a;
    clear: both;
}
.field.textarea .info div {
    min-height: 60px;
}
.field .info sup {
    margin-top:-8px;
    display:inline-block;
}
.field .info:hover div {
    opacity:1;
}
.field .info:hover::after {
    color: #3a3a3a;
}
.field .minus {
    margin-left:-77px;
}
.field input::-webkit-inner-spin-button {
    -o-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.title h2.slovak {
    letter-spacing: 5px;
}
.logo-text h2.slovak {
    letter-spacing: 23px;
    margin-right: -13px;
}
.logo-text h3.slovak {
    padding-left: 2px;
}
body, html {
    padding:0px;
    margin:0px;
    font-family:arial;
   }
   .content {
    display: flex;
    align-items: center;
    padding-top: 72px;
    height: calc(100% - 113px);
    background:#f3f3f3;
    position:relative;
    background: linear-gradient(180deg, rgb(220, 220, 220) 0%, rgba(255,255,255,1) 100%);
   }
   .middle img {
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 72px;
    bottom: 0px;
    width: 50vmin;
   }
   .layout-2-3-from-3 p {
    padding-bottom:0px !important;
   }
   .middle {
    display: inline-block;
    width: 100%;
    text-align: center;
   }
   .logo img {
    padding: 12px 0px 3px 0px;
    height:50px;
   }
   .logo {
    display:inline-block;
   }
   header {
    background: #3a3a3a;
    /*border-bottom: 2px solid #3a3a3a;*/
    box-shadow: 0px 0px 8px rgba(0,0,0,1);
    position: absolute;
    right: 0px;
    left: 0px;
    font-family: 'OpenSans';
    z-index: 100;
   }
   .menu {
    display:inline-block;
    float:right;
    list-style-type: none;
    margin: 0px;
   }
   nav {
    float: right;
    display:inline-block;
   }
   nav input[type=checkbox] {
    position:absolute;
    left:-9999px;
    right:-9999px;
    display: none;
   }
   nav input[type=checkbox]:checked ~ ul {
    display:block;
   }
   nav input[type=checkbox]:checked ~ img {
    display:block;
   }
   .menu li {
    display: inline-block;
   }
   .full-height {
    height: 100%;
    display: flex;
    align-items: center;
   }
   .menu a {
    color: white;
    padding: 26px 24px 22px 24px;
    display: inline-block;
    font-weight: 200;
    text-decoration: none;
    position:relative;
    text-transform: uppercase;
   }
   .body-sent {
       overflow:hidden;
   }
   .con .field select, .con .field input, .con .field textarea {
    width: calc(100% - 35px);
   }
   .con .field .require {
    margin-left: calc(100% - 43px);
   }
   .con .field textarea {
    height: 250px;
   }
   .con .field label {
    text-align: center;
    width: calc(100% - 35px);  
   }
   .con .field {
       position:relative;
   }
   .con .field.submit {
    text-align: center;
    width: calc(100% - 35px);
   }
   .con .field.submit input {
       width:300px;
   }
   .con .field .error {
    width: calc(100% - 47px);
   }
   .con .field.textarea .error {
    height: 233px;
   }
   .con .field.textarea .error span {
    margin-top: 99px;
   }
   .con .field.textarea .info div {
    min-height:40px;
   }
   .ok {
    text-align: center;
    margin-bottom: 15px;
   }
   .con .ok {
    width: calc(100% - 35px);
   }
   .obj .ok, .calc .ok {
    margin-bottom: 8px;
    margin-top: 15px;
   }
   .ok h3 {
    background: #008c00;
    padding: 6px 20px;
    display: inline-block;
    margin: 0px;
    font-size: 23px;
    color: white;
    border-radius: 15px;
   }
   .mobile-menu {
    float: right;
    color: white;
    box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.7215686274509804);
    font-size: 22px;
    width: 36px;
    height: 36px;
    margin-top: 16px;
    cursor:pointer;
    justify-content: center;
    align-items: center; 
    border: 1px solid #e5e5e5;
    border-radius: 100%;
    display:none;
    background: rgba(255, 255, 255, 0.1);
   }
   .letter {
    margin: auto;
    max-width:1200px;
    position:relative;
    padding:0px 20px;
   }
   header .letter {
    padding-left:0px;
   }
   .letter .logo a {
       color:inherit;
       text-decoration:none;
        padding-left: 20px;
        display: inline-block;
        padding-bottom: 5px;
   }
   .letter .title a {
       color:inherit;
       text-decoration:none;
   }
   .letter .title h1 a {
    padding-left: 16px;
    padding-right: 22px;
    padding-top: 7px;
   }
   .letter .title h2 a {
    padding-bottom: 12px;
    padding-right: 20px;
    padding-left: 16px;
   }
   .title {
    display: inline-block;
    text-transform: uppercase;
    color: white;
    /*padding-left: 14px;*/
    padding-left: 0px;
    margin-left: -3px;
   }
   .title h1 {
    margin: 0px;
    font-weight: 100;
    position: relative;
    top: -1px;
   }
   .title h2 {
    margin: 0px;
    font-size: 13px;
    position: relative;
    font-weight: 100;
    top: -11px;
    letter-spacing: 1.6px;
   }
   .title h2 span {
    color: #f3a73a;
   }
   .tech::before {
    content: ' ';
    height: 0px;
    border-radius: 1px;
    width: 3px;
    transform: rotate(28deg);
    background: #feae3a;
    display: inline-block;
    position: absolute;
    margin-left: -9px;
    margin-top: -5px;
    transition:all 0.3s;
    margin-top:9px;
    margin-bottom:9px;
    transition-timing-function: ease-out;
   }
   .tech::after {
    content: ' ';
    height: 0px;
    border-radius: 1px;
    width: 3px;
    transform: rotate(28deg);
    background: #feae3a;
    display: inline-block;
    position: absolute;
    margin-top: -5px;
    margin-left: -17px;
    transition:all 0.3s;
    margin-top:9px;
    margin-bottom:9px;
    transition-timing-function: ease-out;
   }
   .menu a:hover .tech::before, .tech.open::before,
   .menu a.active .tech::before,
   footer a:hover .tech::before,
   footer a.active .tech::before {
    height:19px;
    margin-top:1px;
    margin-bottom:0px;
   }
   .menu a:hover .tech::after, .tech.open::after,
   .menu a.active .tech::after,
   footer a:hover .tech::after,
   footer a.active .tech::after {
    height:19px;
    margin-top:1px;
    margin-bottom:0px;
   }
   .stick {
    width: 6vmin;
    background: #ffffff;
    margin: auto;
    z-index: 5;
    position: relative;
    border-radius: 0.9vmin;
    display: inline-block;
    border: 1.6vmin solid #f3f3f3;
    transition: 0.4s all;
    left: 0vmin;
    transform: rotate(30deg);
    height: 41.0vmin;
   }
   .stick:nth-of-type(2n) {
    margin-left: -9.2vmin;
   }
   .stick .color {
    height: 100%;
    border-radius: 0.7vmin;
    z-index: 7;
    position: relative;
    width: 100%;
   }
   .stick:nth-of-type(2n) .color {
    background:#feaf3c;
   }
   .stick:nth-of-type(2n-1) .color {
    background:#3a3a3a;
   }
   .stick:nth-of-type(3) {
    margin-left: 9.6vmin;
    z-index: 4;
   } 
   .animate {
    display: inline-flex;
    transition: padding 0.4s;
    position: relative;
    z-index:5;
    border-radius: 1vmin;
    padding: 2vmin 15vmin 2vmin 14vmin;
    animation: 0s ease-out 0s 1 smaller forwards;
   }
   .main {
    display:inline-block;
    position:relative;
    z-index:4;
    transform: scale(0.7) translateY(-26vmin);
   }
   .logo-text {
    font-family: 'OpenSans';
    text-transform: uppercase;
    display: inline-block;
    /* font-weight: 100; */
    color: #3a3a3a;
    transform: translateY(-188px);
   }
   .logo-text h1 {
    font-size: 124px;
    font-weight: 100;
    margin: 0px;
    margin-bottom: -35px;
    letter-spacing: -4px;
   }
   .logo-text h2 {
    margin: 0px;
    font-size: 31px;
    font-weight: 100;
    padding-bottom: 8px;
    letter-spacing: 11px;
    padding-left: 12px;
   }
   .logo-text small {
    font-size: inherit;
    color: #feae3a;
   }
   .logo-text h3 {
    margin: 0px;
    font-weight: 100;
    padding-top: 7px;
    letter-spacing: 1.7px;
    border-top: 1px solid black;
    width: 235px;
    text-align: center;
    margin-left: 5px;
    font-size: 18px;
}
   .square {
    box-shadow: 0px 0px 10px #777777 !important;
    animation: 0.4s ease-out 3s 1 small-out forwards;
    display:none;
   }
   .square, .square-1, .square-2, .square-3, .square-4 {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;    
    box-shadow: 0px 0px 10px #b5b5b5;
    border-radius: 100%;
    background:white;
    border: 1px solid #3a3a3a;
   }
   .square-1, .square-2, .square-3, .square-4 {
    animation: none;
    transform: none;
    right: auto;
    bottom: auto;
    overflow: hidden;    
    top: calc(50% - 286px);
    left: calc(50% - 523px);
    transition:0.4s all;
    transform:scale(0);
    /*animation: 0s ease-out 0s 1 show-opacity forwards, 0.5s ease-out 0.9s 1 position-1 forwards;*/
   }
   .square-3 {
    top: calc(50% - -35px);
    left: calc(50% - 337px);
    animation:0.4s ease-out 0.4s 1 pop2 forwards;
   }
   .square-2 {
    left: auto;
    right: calc(50% - 524px);
    top: calc(50% - 286px);
    animation:0.4s ease-out 0.3s 1 pop2 forwards;
   }
   .square-4 {
    left: auto;
    right: calc(50% - 340px);
    top: calc(50% - -35px);
    animation:0.4s ease-out 0.1s 1 pop2 forwards;
   }
   .square-1 {
    animation:0.4s ease-out 0.2s 1 pop2 forwards;
   }
   .square-1 a, .square-2 a, .square-3 a, .square-4 a {
    display:inline-block;
    padding: 30px;
   }
   .square-1 a img {
    width: 262px;
   }
   .square-2 a img {
    width: 262px;
   }
   .square-4 a img {
    width: 262px;
   }
   .square-3 a img {
    width: 262px;
   }
   .square-1 a img.hover, .square-2 a img.hover, .square-3 a img.hover, .square-4 a img.hover {
    opacity:0;
    position:absolute;
    transition:0.4s all;
   }
   .square-1 a:hover img.hover, .square-2 a:hover img.hover, .square-3 a:hover img.hover, .square-4 a:hover img.hover {
    opacity:1;
   }
   .square-1:hover, .square-2:hover, .square-3:hover, .square-4:hover {
    box-shadow: 0px 0px 10px black;
    /*transform:scale(1.1) !important;*/
   }
   .animate .text {
    position: absolute;
    font-family: 'OpenSans';
    text-transform: uppercase;
    font-size: 3vmin;
    transform: rotate(-90deg); 
    bottom: 9vmin;
    z-index: 6;
    height: auto;
    letter-spacing: 3.2vmin;
    z-index: 1;
    opacity:0;
    transition: left 0.4s;
    left:-7vmin;
    animation: 0.4s ease-out 0.4s 1 showText forwards;
   }
   .animate .stick:last-child .text {
    left: -18vmin;
    bottom: 20vmin;
    z-index: 6;
    animation: 0.4s ease-out 0.4s 1 moveText forwards;
   }
   .animate .stick:nth-of-type(2n-1) {
    margin-top: 2.0vmin;
    height: 37vmin;
    animation: 0.4s ease-out 0.4s 1 rotateStick forwards;
    
   }
   .text span {
    color:#feaf3c;
   }
   .square-1 h1, .square-2 h1, .square-3 h1, .square-4 h1 {
    position: absolute;
    background: #d9dada;
    border: 1px solid #3a3a3a;
    color: #3a3a3a;
    font-family: 'OpenSans';
    padding: 0vmin 50px;
    white-space: nowrap;
    /* box-shadow: 0px 0px 5px #b5b5b5; */
    transform: rotate(-56deg);
    left: -115px;
    top: 53px;
    padding-left: 100px;
    padding-right: 100px;
    font-size: 22px;
    transition:0.4s all;
    z-index:4;
    background:#feaf3c;
   }
   .square-1:hover h1, .square-2:hover h1, .square-3:hover h1, .square-4:hover h1 { 
    background:#feaf3c;
   }
   .square-2 h1, .square-4 h1  {
    transform: rotate(-56deg);
    left: -115px;
    top: 57px;
   }
   .square-3 h1 {
    transform: rotate(-56deg);
    left: -86px !important;
    top: 52px !important;
    padding-left: 100px;
    padding-right: 100px;
    top: auto;
    left: auto;
   }
   .square-4 h1 {
    left: -102px;
    top: 52px;
    padding-left: 100px;
    padding-right: 100px;
    }
   footer {
    position: fixed;
    bottom: 0px;
    background: #3a3a3a;
    width: 100%;
    z-index: 10;
    color: white;
    text-align: center;
    box-shadow: 0px 0px 8px rgba(0,0,0,1);
    padding: 1vmin;
    font-family: 'OpenSans';
   }
   footer i {
    padding-right: 5px;
    transition:0.3s all;
   }
   footer a:hover i, footer a.active i {
       color:#f3a73a;
   }
   footer a span {
        transition:0.3s all;
   }
   footer a:hover span, footer a.active span {
       color:#f3a73a;
   }
   footer a {
    color: white;
    font-family: 'OpenSans';
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    display:inline-block;
    width:25%;
   }
   footer .letter {
    display:flex;
   }
   .mobile-triangle {
    position: absolute;
    top: 53px;
    right: 21px;
    z-index: 6;
    display:none;
   }

   
.layout-1-from-3 {
    width:33.3%;
    position:relative;
    padding-right:20px;
}
.layout-2-3-from-3 {
    width:66.7%;
    position:relative;
    padding-left: 20px;
}
.layout {
    display:flex;
}
.layout-2-3-from-3 p {
    position: relative;
    top: -4px;
}

.options  {
    display:flex;
    margin-bottom: 90px;
}
.options i {
    margin-right: 5px;
    font-size: 26px;
    position: relative;
    top: 1px;
}
.options a {
    width: calc(50% - 20px);
    margin-right: 20px;
    color: #3a3a3a;
    background: #d2d2d2;
    text-decoration: none;
    text-align: center;
    padding: 13px 20px;
    font-weight: bold;
    font-size: 23px;
    text-transform: uppercase;
    transition: 0.2s all;
}
.options a:last-of-type {
    margin-left: 20px;
    margin-right: 0px;
}
.options a:hover {
    background:#3a3a3a;
    color: #d2d2d2;
}

.letter.non-index {
    margin-top:0px;  
}
.carousel {
    white-space: nowrap;
    overflow:hidden;
    position: relative;
    display:flex;
    width:100%;
}
.carousel img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition:0.4s all;
    transition-timing-function: ease-in-out;
    position:relative;
    left:0px;
}
.carousel img:not(:first-of-type) {
    position:absolute;
    left:100%;
}
.carousel .desc {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
}
.carousel .inline {
    display: inline-block;
    margin: auto;
    text-align: center;
    background: rgba(58, 58, 58, 0.8);
    color: white;
    padding: 15px 55px;
    font-family: 'OpenSans';
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}
.carousel h1 {
    text-transform:uppercase;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 38px;
    text-shadow: 0px 0px 3px black;
    padding-left: 39px;
}
.carousel h2 {
    font-weight: 100;
    font-size: 20px;
    letter-spacing: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-shadow: 0px 0px 2px black;
}
.non-main header {
    position: sticky;
    top: 0px;
}
.inline .tech::after, .inline .tech::before, h3.form .tech::after, h3.form .tech::before {
    height: 41px;
    margin-top: 8px;
    margin-bottom: 0px;
    width: 5px;
    border-radius: 2px;
    margin-left: -20px;
    box-shadow: 0px 0px 2px black;
}
.inline .tech::before, h3.form .tech::before {
    margin-left: -34px;
}
h3.form .tech.open {
    position: relative;
    top: -9px;
}
h3.form {
    background: rgba(0,0,0,0.1);
    padding-top: 17px;
    padding-bottom: 20px;
    padding-left: 32px;
}
.non-main .non-content .non-letter {
    background: linear-gradient(180deg, rgb(220, 220, 220) 0%, rgba(255,255,255,1) 100%);
    padding:80px 10px 120px 10px;
    font-family:'OpenSans';
    font-size:20px;
    line-height: 35px;
}
.progress-bar {
    height:5px;
    background:#3a3a3a;
}
.progress-bar .active {
    height:5px;
    background:#feae3a;
    display:inline-block;
    width:0%;
}
.non-content p {
    margin:0px;
    padding-bottom:40px;
    text-align:justify;
    line-height: 186%;
}
.non-content h3 {
    font-size: 35px;
    font-weight: 400;
}
.non-content table {
    width:100%;
}
.non-content td {
    font-size:20px;
    padding:10px 20px;
}
.non-content tr:nth-of-type(2n) td {
    
}
.non-content tr:nth-of-type(2n+1) td {
    background:#d2d2d2;
}
.non-content tr td:first-of-type {
    text-align: left;
}
.non-content tr td:last-of-type {
    text-align: right;
}
.layout sup {
    font-size: 12px;
}
.non-content tr:hover td {
    background: rgba(254, 174, 58, 0.57);
    cursor: default;
}
.layout-1-from-4 {
    width:25%;
    position:relative;
}
.layout-1-from-4:not(:first-of-type) {
    padding-left:20px;
}
.layout-1-from-4:not(:last-of-type) {
    padding-right:20px;
}
.layout img {
    width:100%;
    transition:0.4s all;
}
h3:nth-of-type(2) {
    margin-top:70px;
}
.layout a {
    display: inline-block;
    border:20px solid #d2d2d2;
    transition:0.2s all;
    overflow:hidden;
}
.layout a:hover {
    border:20px solid #3a3a3a;
}
.layout a:hover img {
    transform:scale(1.3);
}
.pswp__caption__center {
    text-align:center !important;
}

.kontakt > div {
    width:292px;
    height:292px;
}
.kontakt > div .top {
    background:#d2d2d2 ;
    border: 1px solid black;
    color: #3a3a3a;
    font-size: 56px;
    text-align: center;
    border-radius: 262px;
    width: 292px;
    height: 292px;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -221px;
    padding-bottom: 20px;
    transition:all 0.4s;
}
.kontakt > div:hover .top {
    background: #fbac3a;
}
.kontakt > div h2 {
    font-family: OpenSans;
    font-size: 33px;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 34px;
}
.kontakt > div .ico {
    text-align: center;
    font-family: OpenSans;
    font-size: 18px;
}
.kontakt > div .dic {
    font-family: OpenSans;
    font-size: 18px;
    text-align: center;
}
.kontakt > div .street {
    font-family: OpenSans;
    font-size: 23px;
    text-align: center;
    margin-top: 44px;
}
.kontakt > div .town {
    font-family: OpenSans;
    font-size: 23px;
    text-align:center;
}
.kontakt > div .country {
    font-family: OpenSans;
    font-size: 23px;
    text-align: center;
}
.kontakt > div .phone {
    font-size: 35px;
    margin-top: 52px;
    margin-left: -2px;
    text-align: center;
    font-family: OpenSans;
    font-weight: bold;
}
.kontakt > div .mail {
    font-size: 30px;
    margin-top: 50px;
    margin-left: -2px;
    text-align: center;
    font-family: OpenSans;
    font-weight: bold;
}
.kontakt > div a {
    color:inherit;
    text-decoration:none;
    padding:0px;
}
.person {
    display: inline-block;
    width: 300px;
    background: white;
    border: 1px solid black;
    height: 300px;
    border-radius: 197px;
    overflow: hidden;
    position: relative;
}
.person h2 {
    text-align: center;
    font-size: 23px;
    letter-spacing: -1px;
    margin-top: 11px;
    margin-bottom: 0px;
}
.person h3 {
    margin-top: -7px;
    font-size: 16px;
    text-align: center;
}
.top-person {
    justify-content:center;
    display:flex;
}
.person .other {
    border-radius: 100%;
    width: 200%;
    height: 200%;
    margin-top: -86px;
    margin-left: -50%;
    background: white;
    padding-top: 0px;
    position: absolute;
}
.person:hover .top {
    background:#feae3a;
}
.person .top i {
    position: relative;
    top: -24px;
}
.person .top {
    font-size: 116px;
    background: #b5b5b5;
    text-align: center;
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    transition:0.4s all;
}
.width-50p {
    width:50%;
    text-align:center;
}
.width-50p:first-of-type {
    padding-right: 15px;
}
.width-50p:last-of-type {
    padding-left: 15px;
}














   @font-face {
    font-family: "OpenSans";
    src: url("../font/OpenSansCondensed-Light.ttf");
   }
   @keyframes rotateStick {
    100% {
     transform: rotate(0deg);
     left:-9.3vmin;
    }
   }
   @keyframes showText {
    100% {
     opacity:1;
     left: -2.5vmin;
    }
   }
   @keyframes moveText {
    100% {
     opacity:1;
     left:-13.5vmin;
    } 
   }
   @keyframes show {
    100% {
     transform:scale(1);
    } 
   }
   @keyframes smaller {
    100% {
     transform:scale(0.8);
    } 
   }
   @keyframes small-out {
    100% {
     transform:scale(0);
    } 
   }
   @keyframes position-1 {
    100% {
     top: calc(50% - 37vmin);
     left: calc(50% - 56vmin);
    } 
   }
   @keyframes position-2 {
    100% {
        right: calc(50% - 56vmin);
        top: calc(50% - 32vmin);
    } 
   }
   @keyframes position-3 {
    100% {
        left: calc(50% - 53vmin);
        top: calc(50% + 8vmin);
    } 
   }
   @keyframes position-4 {
    100% {
        right: calc(50% - 53vmin);
        top: calc(50% + 8vmin);
    } 
   }
   @keyframes show-opacity {
    100% {
        opacity:1;
    } 
   }
   @keyframes pop {
    0% {
     transform:scale(1);
    } 
    50% {
     transform:scale(1.2);
    } 
    100% {
     transform:scale(1);
    } 
   }
   @keyframes pop2 {
    0% {
     transform:scale(0);
    } 
    75% {
     transform:scale(1.0);
    } 
    100% {
     transform:scale(0.8);
    } 
   }
   @keyframes pop3 {
    100% {
     transform:scale(1.0);
    } 
   }

   /* PRISPOSOBENIE STRANKY 1. VARIANT */
   @media (max-width:1280px) {
       .kontakt > div {
           width:262px;
           height:262px;
       }
       .kontakt > div .top {
           width:262px;
           height:262px;
           margin-top:-192px;
       }
       .kontakt > div h2 {
            margin-top: 22px;
       }
       .kontakt > div .phone {
            margin-top: 37px;
       }
       .kontakt > div .mail {
        margin-top: 39px;
       }
       .kontakt > div .street {
        margin-top: 28px;
       }
       .logo-text {
        transform: translateY(-168px);
       }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
        width: 210px;
    }
    .square-2 {
        right: calc(50% - 476px);
        top: calc(50% - 246px);
    }
    .square-1 {
        top: calc(50% - 246px);
        left: calc(50% - 464px);
    }
    .square-4 {
        right: calc(50% - 296px);
        top: calc(50% - -43px);
    }
    .square-3 {
        left: calc(50% - 300px);
        top: calc(50% - -43px);
    }
    .letter {
        max-width:1060px;
    }
    .layout-1-from-3 {
        width:50%;
    }
    .layout-2-3-from-3 {
        width:50%;
    }
   }

   @media (max-width:1100px), (max-height:800px)  {
    .kontakt > div {
        width:232px;
        height:232px;
    }
    .kontakt > div .top {
        width:232px;
        height:232px;
        margin-top: -175px;
        font-size: 42px;
    }
    .kontakt > div h2 {
        margin-top: 15px;
        font-size: 30px;
    }
    .kontakt > div .street {
        margin-top: 23px;
    }
    .kontakt > div .phone {
        margin-top: 35px;
        font-size: 30px;
    }
    .kontakt > div .mail {
        margin-top: 37px;
        font-size: 28px;
        margin-left: 1px;
    }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
     width:170px;
    }
    .square-2 {
        right: calc(50% - 381px);
        top: calc(50% - 195px);
    }
    .square-1 {
        top: calc(50% - 195px);
        left: calc(50% - 377px);
    }
    .square-4 {
        right: calc(50% - 245px);
        top: calc(50% - -40px);
    }
    .square-3 {
        left: calc(50% - 247px);
        top: calc(50% - -40px);
    }
    .logo-text {
        transform: translateY(-132px) scale(0.8);
    }
    .square-1 h1, .square-2 h1, .square-3 h1, .square-4 h1 {
        left: -125px;
        top: 39px;
    }
    .square-4 h1 {
        left: -113px;
        top: 38px;
    }
    .square-3 h1 {
        left: -95px !important;
        top: 36px !important;
    }
    .letter {
        max-width:860px;
    }
    .layout-1-from-4:nth-of-type(2n+1) {
        width:calc(50% - 20px);
        padding-right:40px;
        padding-left:0px;
        padding-bottom:40px;
    }
    .layout-1-from-4:nth-of-type(2n) {
        width:calc(50% - 20px);
        padding-right:0px;
        padding-left:0px;
        padding-bottom:40px;
    }
    .layout-1-from-4:nth-last-child(1), .layout-1-from-4:nth-last-child(2) {
        padding-bottom:0px;
    }
    .layout.wrap {
        flex-wrap: wrap;
    }
   }

   @media (max-width:1300px) and (min-width:700px) {
    .non-content p {
        font-size:26px !important;
    }
    .inline .tech::after, .inline .tech::before {
        margin-top: 5px;
    }
    .layout-1-from-3 td {
        padding: 17px 20px;
    }
    .layout-2-3-from-3 br {
        display:none;
    }
   }
   @media (max-width:1300px) and (min-width:1000px) {
   .non-main .non-content .non-letter {
       padding: 50px 10px 100px 10px;
     }
   }
   @media (max-width:999px) and (min-width:700px) {
   .non-main .non-content .non-letter {
       padding: 50px 10px 110px 10px;
     }
   }
   @media (max-width:699px) and (min-width:500px) {
    .non-content p {
        font-size:23px !important;
    }
    .non-main .non-content .non-letter {
        padding: 50px 10px 140px 10px;
    }
   }
   @media (max-width:499px) and (min-width:300px) {
    .non-main .non-content .non-letter {
        padding: 50px 10px 140px 10px;
    }
    .non-content td {
        font-size:18px;
    }
    .non-main .non-content .non-letter {
        padding: 50px 10px 60px 10px;
    }
   }

   @media (max-width:900px) {
    .top-person .person {
        margin-right:0px;
        transform: scale(0.8);
    }
    .kontakt > div {
        width:202px;
        height:202px;
    }
    .kontakt > div .top {
        width:202px;
        height:202px;
        margin-top: -145px;
        font-size: 42px;
    }
    .kontakt > div .ico {
        font-size: 15px;
    }
    .kontakt > div .dic {
        font-size: 15px;
    }
    .kontakt > div h2 {
        margin-top: 12px;
        font-size: 27px;
        margin-bottom: 5px;
    }
    .kontakt > div .street {
        margin-top: 19px;
        font-size: 20px;
    }
    .kontakt > div .country {
        font-size: 20px;
    }
    .kontakt > div .town {
        font-size: 20px;
    }
    .kontakt > div .phone {
        margin-top: 27px;
        font-size: 25px;
    }
    .kontakt > div .mail {
        margin-top: 26px;
        font-size: 25px;
        margin-left: 1px;
    }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
     width:130px;
    }
    .square-2 {
        right: calc(50% - 318px);
        top: calc(50% - 159px);
    }
    .square-1 {
        top: calc(50% - 159px);
        left: calc(50% - 313px);
    }
    .square-4 {
        right: calc(50% - 202px);
        top: calc(50% - -41px);
    }
    .square-3 {
        left: calc(50% - 206px);
        top: calc(50% - -41px);
    }
    .square-1 h1, .square-2 h1, .square-3 h1, .square-4 h1 {
        left: -119px;
        top: 34px;
        font-size: 18px;
    }
    .square-4 h1 {
        left: -107px;
        top: 31px;
    }
    .square-3 h1 {
        left: -95px !important;
        top: 33px !important;
    }
    .letter {
        max-width:690px;
    }
    .logo-text {
        transform: translateY(-113px) scale(0.7);
    }
   }

   @media (max-width:660px), (max-width:800px) and (min-height:650px) {
      .top-person .person {
        transform:scale(0.75);
       }
    .kontakt:nth-of-type(2) > div, .kontakt:nth-of-type(4) > div {
        width: 170px;
        height: 170px;
    }
    .kontakt:nth-of-type(3) > div {
        width: 130px;
        height: 130px;
    }
    .kontakt:nth-of-type(5) > div {
        width: 130px;
        height: 130px;
    }
    .kontakt > div .top {
        width:100%;
        height:100%;
    }
    .kontakt:nth-of-type(2) > div .top {
        margin-top: -131px;
        font-size: 30px;
        padding-bottom: 12px;
    }
    .kontakt:nth-of-type(4) > div .top {
        margin-top: -131px;
        font-size: 30px;
        padding-bottom: 12px;
    }
    .kontakt:nth-of-type(3) > div .top {
        margin-top: -101px;
        font-size: 24px;
        padding-bottom: 9px;
    }
    .kontakt:nth-of-type(5) > div .top {
        margin-top: -101px;
        font-size: 24px;
        padding-bottom: 11px;
    }
    .kontakt > div .phone {
        margin-top: 30px;
        font-size: 21px;
    }
    .kontakt > div .mail {
        margin-top: 23px;
        font-size: 16px;
        margin-left: 1px;
    }
    .kontakt > div h2 {
        margin-top: 13px;
        font-size: 23px;
    }
    .kontakt > div .street {
        margin-top: 11px;
        font-size: 15px;
    }
    .kontakt > div .town {
        font-size: 15px;
    }
    .kontakt > div .country {
        font-size: 15px;
    }

    .logo-text h3.slovak {
        padding-left:0px;
    }
    .logo-text h2.slovak {
        letter-spacing: 16px;
        margin-right: -8px;
    }
    .content {
        height: calc(100% - 126px);
    }
    .mobile-menu {
        display:flex;
    }
    .menu {
        position: absolute;
        right: 20px;
        top: 89px;
        background: #e5e5e5;
        padding: 1px;
        /* padding-left: 30px; */
        /* padding-right: 30px; */
        z-index: 5;
        border-radius: 10px 2px 10px 10px;
        overflow: hidden;
        box-shadow: 0px 0px 3px white;
        display:none;
    }
    .menu li {
        display: block;
        text-align: center;
        background: #3a3a3a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .menu li:first-of-type {
        border-radius:10px 2px 0px 0px;
    }
    .menu li:last-of-type {
        border-radius:0px 0px 10px 10px;
    }
    .menu a {
        color: white;
        padding: 26px 25px 22px 24px;
        display: block;
        font-weight: 200;
        text-decoration: none;
        position: relative;
        text-transform: uppercase;
        padding-left: 70px;
        padding-right: 70px;
    }
    .menu a.active {
        /*color:#feaf3c;*/
    }
    .menu a:hover {
        background:rgba(255,255,255,0.2);
    }
    .menu .tech {
        /*display:none;*/
    }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
     width:110px;
    }
    .square-4 a img {
        width:90px;
    }
    .square-2 a {
        padding:10px;
    }
    .square-2 a img {
        width:110px;
    }
    .square-4 a {
        padding:20px;
    }
    .square-2 {
        right: calc(50% - 13px);
        top: calc(50% - 211px);
    }
    .square-1 {
        top: calc(50% - 195px);
        left: calc(50% - 37px);
        z-index:1;
    }
    .square-4 {
        right: calc(50% - 124px);
        top: calc(50% - -152px);
    }
    .square-3 {
        left: calc(50% + -130px);
        top: calc(50% - -95px);
    }
    .square-1 h1, .square-2 h1, .square-3 h1, .square-4 h1 {
        font-size: 18px;
    }
    .square-1 h1 {
        left: -120px;
        top: 30px;
    }
    .square-2 h1 {
        left: -116px;
        top: 24px;
        font-size: 15px;
    }
    .square-3 h1 {
        left: -152px !important;
        top: 25px !important;
        padding-left: 150px;
        padding-right: 150px;
    }
    .square-4 h1 {
        left: -111px;
        top: 18px;
        font-size: 15px;
    }
    .logo-text {
     transform: scale(0.7) translateY(-19px);
    }
    .logo-text h3 {
        padding-top: 7px;
        letter-spacing: 0.8px;
        border-top: 1px solid black;
        width: 174px;
        margin-left: 9px;
        font-size: 15px;
    }
    .logo-text h2 {
     font-size: 25px;
     padding-bottom: 8px;
     letter-spacing: 8px;
     padding-left: 12px;
    }
    .logo-text h1 {
     font-size: 94px;
     margin-bottom: -26px;
     letter-spacing: -4px;
    }

    footer a span {
        /*display:none;*/
        font-size:11px;
    }
    footer a i {
        padding:5px;
        display: block !important;
        font-size: 19px;
        padding-bottom: 5px;
    }
   }

   @media (max-width:800px) and (min-height:800px) {
    .kontakt:nth-of-type(2) > div, .kontakt:nth-of-type(4) > div {
        width: 220px;
        height: 220px;
    }
    .kontakt:nth-of-type(3) > div {
        width: 170px;
        height: 170px;
    }
    .kontakt:nth-of-type(5) > div {
        width: 180px;
        height: 180px;
    }
    .kontakt > div .top {
        width:100%;
        height:100%;
    }
    .kontakt:nth-of-type(2) > div .top {
        margin-top: -163px;
    }
    .kontakt:nth-of-type(4) > div .top {
        margin-top: -163px;
    }
    .kontakt:nth-of-type(3) > div .top {
        margin-top: -127px;
        font-size: 30px;
    }
    .kontakt:nth-of-type(5) > div .top {
        margin-top: -134px;
        font-size: 35px;
    }
    .kontakt > div .phone {
        margin-top: 36px;
        font-size: 27px;
    }
    .kontakt > div .mail {
        margin-top: 26px;
        font-size: 21px;
        margin-left: 1px;
    }
    .kontakt > div h2 {
        margin-top: 18px;
    }
    .kontakt > div .street {
        margin-top: 13px;
        font-size: 18px;
    }
    .kontakt > div .town {
        font-size: 18px;
    }
    .kontakt > div .country {
        font-size: 18px;
    }
    .logo-text {
        transform: scale(1) translateY(-19px);
    }
    .square-1 {
        top: calc(50% - 262px);
        left: calc(50% - 37px);
    }
    .square-2 {
        right: calc(50% - 19px);
        top: calc(50% - 279px);
    }
    .square-3 {
        left: calc(50% + -171px);
        top: calc(50% - -107px);
    }
    .square-4 {
        right: calc(50% - 175px);
        top: calc(50% - -173px);
    }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
        width: 160px;
    }
    .square-2 a img {
        width: 150px;
    }
    .square-4 a img {
        width: 140px;
    }
    .square-1 h1 {
        left: -120px;
        top: 38px;
        font-size: 20px;
    }
    .square-2 h1 {
        left: -116px;
        top: 31px;
        font-size: 17px;
    }
    .square-3 h1 {
        left: -142px !important;
        top: 36px !important;
        font-size: 20px;
    }
    .square-4 h1 {
        left: -111px;
        top: 28px;
        font-size: 17px;
    }
   }

   @media (max-width:800px) and (min-height:950px) {
    .kontakt > div {
        width:250px;
        height:250px;
    }
    .kontakt:nth-of-type(2) > div, .kontakt:nth-of-type(4) > div {
        width:300px;
        height:300px;
    }
    .kontakt > div .top {
        width: 100%;
        height: 100%;
        margin-top: calc(-100% + 81px);
        font-size: 63px;
    }
    .kontakt:nth-of-type(3) > div .top, .kontakt:nth-of-type(5) > div .top {
        width: 100%;
        height: 100%;
        margin-top: calc(-100% + 56px);
        font-size: 43px;
    }
    .kontakt > div .phone {
        margin-top: 44px;
        font-size: 37px;
    }
    .kontakt > div .mail {
        margin-top: 42px;
        font-size: 30px;
        margin-left: 2px;
    }
    .kontakt > div h2 {
        margin-top: 24px;
        font-size: 37px;
        margin-bottom: 11px;
    }
    .kontakt > div .ico, .kontakt > div .dic {
        font-size: 20px;
    }
    .kontakt > div .street {
        margin-top: 29px;
        font-size: 22px;
    }
    .kontakt > div .town, .kontakt > div .country {
        font-size: 22px;
    }
    .logo-text {
        transform: scale(1) translateY(-19px);
    }
    .square-1 {
        top: calc(50% - 348px);
        left: calc(50% - 60px);
    }
    .square-2 {
        right: calc(50% - 32px);
        top: calc(50% - 371px);
    }
    .square-3 {
        left: calc(50% + -233px);
        top: calc(50% - -107px);
    }
    .square-4 {
        right: calc(50% - 236px);
        top: calc(50% - -196px);
    }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
        width: 250px;
    }
    .square-2 a img {
        width: 230px;
    }
    .square-4 a img {
        width: 210px;
    }
    .square-1 h1 {
        left: -120px;
        top: 51px;
        font-size: 22px;
    }
    .square-2 h1 {
        left: -116px;
        top: 44px;
        font-size: 20px;
    }
    .square-3 h1 {
        left: -133px !important;
        top: 57px !important;
        font-size: 20px;
        font-size: 22px;
    }
    .square-4 h1 {
        left: -106px;
        top: 41px;
        font-size: 20px;
    }
   }

   
   @media (max-width:800px) and (min-height:500px) and (max-height:650px) {
    .logo-text {
        transform: scale(0.7) translateY(-19px);
    }
    .square-1 {
        top: calc(50% - 167px);
        left: calc(50% - 29px);
    }
    .square-2 {
        right: calc(50% - 12px);
        top: calc(50% - 175px);
    }
    .square-3 {
        left: calc(50% + -122px);
        top: calc(50% - -87px);
    }
    .square-4 {
        right: calc(50% - 114px);
        top: calc(50% - -118px);
    }
    .square-1 a, .square-2 a, .square-3 a, .square-4 a {
        padding:20px;
    }
    .square-1 a img, .square-2 a img, .square-3 a img, .square-4 a img {
        width: 110px;
    }
    .square-2 a img {
        width: 95px;
    }
    .square-2 a {
        padding: 15px;
    }
    .square-4 a img {
        width: 90px;
    }
    .square-1 h1 {
        left: -118px !important;
        top: 25px !important;
        font-size: 15px;
    }
    .square-2 h1 {
        left: -113px;
        top: 24px;
        font-size: 13px;
    }
    .square-3 h1 {
        left: -138px !important;
        top: 27px !important;
        font-size: 15px;
    }
    .square-4 h1 {
        left: -100px;
        top: 23px;
        font-size: 13px;
    }
   }

   /* widescreen */
   @media (max-height:500px) {
    .kontakt > div {
        width:130px;
        height:130px;
    }
    .kontakt:nth-of-type(2) > div, .kontakt:nth-of-type(4) > div {
        width:190px;
        height:190px;
    }
    .kontakt > div .top {
        width: 100%;
        height: 100%;
        margin-top: calc(-100% + 49px);
        font-size: 40px;
        padding-bottom: 10px;
    }
    .kontakt:nth-of-type(3) > div .top, .kontakt:nth-of-type(5) > div .top {
        width: 100%;
        height: 100%;
        margin-top: calc(-100% + 37px);
        font-size: 31px;
    }
    .kontakt > div .phone {
        margin-top: 35px;
        font-size: 26px;
    }
    .kontakt > div .mail {
        margin-top: 19px;
        font-size: 16px;
        margin-left: 1px;
    }
    .kontakt > div h2 {
        margin-top: 15px;
        font-size: 26px;
        margin-bottom: 7px;
    }
    .kontakt > div .ico, .kontakt > div .dic {
        font-size: 16px;
    }
    .kontakt > div .street {
        margin-top: 11px;
        font-size: 14px;
    }
    .kontakt > div .town, .kontakt > div .country {
        font-size: 14px;
    }
    .mobile-menu {
     margin-top: 10px;
    }
    .title {
        height: 39px;
        position: relative;
        top: 1px;
        transform: scale(0.65);
        padding-left: 0px;
        margin-left: -20px;
    }
    .title h1 {
     margin-top: -8px;
    }
    .logo img {
        padding: 6px 0px 0px 0px;
        height: 29px;
    }
    .logo a {
        position: relative;
        top: -13px;
    }
    header {
     height: 42px;
    }
    .menu a {
     padding: 10px 22px 10px 22px;
    }
    .content {
        padding-top: 42px;
        height: calc(100% - 42px);
    }
    .logo-text {
        transform: scale(0.6);
        position: relative;
        top: -12px;
    }
    .square-1 h1 {
        left: -108px;
        top: 37px;
        font-size: 17px;
    }
    .square-2 h1 {
        left: -110px;
        top: 27px;
        font-size: 15px;
    }
    .square-3 h1 {
        left: -84px !important;
        top: 34px !important;
        font-size: 17px;
    }
    .square-4 h1 {
        left: -101px;
        top: 24px;
        font-size: 15px;
    }

    .square-1 {
        top: calc(50% - 60px);
        left: calc(50% - 262px);
        z-index:1;
    }
    .square-1 a img {
        width:130px;
    }
    .square-1 a {
        padding: 30px;
    }

    .square-2 {
        right: calc(50% + 203px);
        top: calc(50% - 80px);
    }
    .square-2 a img {
        width:110px;
    }
    .square-2 a {
        padding: 10px;
    }

    .square-3 {
        left: calc(50% - -72px);
        top: calc(50% - 60px);
    }
    .square-3 a img {
        width:130px;
    }
    .square-3 a {
        padding: 30px;
    }

    .square-4 {
        right: calc(50% + -336px);
        top: calc(50% - 80px);
    }
    .square-4 a img {
        width:110px;
    }
    .square-4 a {
        padding: 10px;
    }

    footer {
        display:none;
    }
    .non-main footer {
        display:block;
        position: static;
        padding:0px;
        padding-top:1vmin;
        padding-bottom:1vmin;
    }
    .non-main footer a span {
        /*display:none;*/
    }
    .non-main footer a i {
        font-size:20px;
        padding:5px;
    }
    .non-main .non-content .non-letter {
        padding: 50px 10px 50px 10px;
    }

   }
   @media (max-width:650px) {
       .top-person {
           display:block;
       }
       .top-person .width-50p {
           display:block;
           padding:0px;
           width:100%;
       }
       .top-person .width-50p:first-of-type {
           margin-bottom:50px;
       }
       .top-person .person {
           transform:scale(1);
       }
    .layout {
        flex-wrap: wrap;
    }
    .layout-1-from-3 {
        width:100%;
        padding-right:0px;
        padding-bottom:60px;
    }
    .layout-2-3-from-3 {
        width:100%;
        padding-left:0px;
    }
    .layout-2-3-from-3 p br {
        display:none;
    }
    /*.layout-2-3-from-3 p b {
        display:block;
        padding-bottom:10px;
    }*/
    .layout-1-from-4 {
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        padding-bottom: 30px !important;
    }
   }
   @media (max-height:500px) and (min-height:300px) {
    .content {
        height: calc(100% - 85px);
    }
    footer {
        display:block;
    }
    footer a span {
        /*display:none;*/
        position: relative;
        top: -4px;
    }
    footer a i {
        font-size:25px;
        padding:5px;
    }
   }

   @media (max-width:650px), (max-height:500px) {
    .carousel img {
        height:300px;
    }
    .carousel .inline {
        padding: 2px 15px;
    }
    .carousel h1 {
        text-transform: uppercase;
        color: white;
        font-weight: bold;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 22px;
        text-shadow: 0px 0px 3px black;
        padding-left: 33px;
    }
    .carousel h2 {
        display:none;
   }
   .carousel .tech:after {
        height: 27px;
        margin-top: 1px;
        margin-bottom: 0px;
        width: 4px;
        border-radius: 2px;
        margin-left: -15px;
        box-shadow: 0px 0px 2px black;
   }
   .carousel .tech:before {
        height: 27px;
        margin-top: 1px;
        margin-bottom: 0px;
        width: 4px;
        border-radius: 2px;
        margin-left: -27px;
        box-shadow: 0px 0px 2px black;
   }
   .non-content p {
       font-size:22px !important;
   }
   .non-content p br {
       display:none;
   }
   .layout-1-from-3 td {
        padding: 10px 20px;
    }
    table tr td:first-of-type {
        padding:20px;
        padding-right:0px;
    }
    table tr td:last-of-type {
        padding:20px;
        padding-left:0px;
    }
    .options a {
        font-size: 13px;
        padding-bottom: 15px;
    }
    .options a i {
        display: block;
        padding-bottom: 10px;
        font-size: 59px;
        margin-right: 0px;
        margin-top: 10px;
    }
}
   
@media (max-height:870px) {
 .carousel img {
     height:570px;
 }
}
@media (max-height:820px) {
 .carousel img {
     height:520px;
 }
}
@media (max-height:770px) {
 .carousel img {
     height:470px;
 }
}
@media (max-height:720px) {
 .carousel img {
     height:420px;
 }
}
@media (max-height:670px) {
 .carousel img {
     height:370px;
 }
}
@media (max-height:620px) {
 .carousel img {
     height:320px;
 }
}
@media (max-height:570px) {
 .carousel img {
     height:270px;
 }
}
@media (max-height:520px) {
 .carousel img {
     height:220px;
 }
}

@media (max-width:770px) {
    .calc .flex .width-50p:first-of-type {
        width: 100%;
        padding-right: 0px;
    }
    .calc .flex .width-50p:last-of-type {
        width: 100%;
        margin-top: 70px;
        padding-left: 0px;
    }
    .calc .flex {
        display: block;
    }
}

   /* safari font fix */
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .square-1 h1, .square-2 h1, .square-3 h1, .square-4 h1, .options a { 
            letter-spacing:-1px;
        }
    }
}