@font-face {
    font-family: "Lato";
    src: url(/content/css/fonts/Lato-Regular.ttf) format("truetype");
}
:root {
    --custom-orange: #FF5300;
    --custom-blue: #0A4DA7;
}
a:link {
    color: initial;
    text-decoration: none;
}
body {
    font-family: Lato;
    overflow-x: hidden;
}
a .icon {
    width: 30px;
}

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
tbody tr:first-child td:last-child { border-top-right-radius: 15px; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 15px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 15px; }
tbody tr:first-child td { border-top-style: solid; }
tbody tr td:first-child { border-left-style: solid; }
tbody td { 
    border: solid 1px #CAD1DA;
    border-style: none solid solid none;
    padding: 5px 15px;
    color: var(--custom-orange);
}
tbody td:first-child, tbody td:last-child {
    text-align: center;
}
table {border-collapse: separate;border-spacing: 0;}
.top-44 {
    top: 20px;
}
.header-bg {
    height: 456px;
    background-size: cover;
    position: relative;
    background-position: center;
}
.text-blue {
    color: var(--custom-blue);
}
.text-orange {
    color: var(--custom-orange);
}
.menu {
    display: flex;
}
.contacts-title{
    font-size: 48px;
    font-weight: 700;
}
.inter-title {
    font-size: 96px;
    font-weight: 700;
}
.main {
    justify-self: center;
    display: flex;
    flex-direction: column;
}
.running-line {
    font-size: 96px;
    position: relative;
    text-transform: uppercase;
    overflow: hidden;
    font-weight: 600;
}
.running-line .line {
    flex-shrink: 0;
    margin: 0;
    padding: 10px 55px;
    min-width: 100%;
    white-space: nowrap;
    animation-name: arrows;
    animation-duration: 50s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.line::after {
    content: "";
    height: 50px;
    width: 50px;
    border-radius: 25px;
    position: absolute;
    top: 63px;
    left: -22px;
}
.line.text-blue:after {
    background-color: var(--custom-blue);
}
.line.text-orange:after {
    background-color: var(--custom-orange);
}
.btn-prod span{
    font-weight: 600;
    color: #516279;
}
.btn-prod {
    border: solid 1px #516279;
    display: inline;
    padding: 15px 40px;
    border-radius: 50px;
}
footer .socials a {
    background-color: white;
    border-radius: 30px;
    height: 46px;
    align-content: center;
    margin: 0 10px;
}
/*Index page*/
.bg-blue-trans {
    background-color: #0A4DA70F;
}
.bg-blue {
    background-color: var(--custom-blue);
}
.icon-bg {
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    height: 131px;
    width: 131px;
}
.bg-orange-trans {
    background-color: #FF53000F;
}
.icon svg {
    height: 131px;
    width: 131px;
    position: relative;
    left: 10%;
}
.main .usage {
    margin: 35px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.slideout {
    opacity: 0;
}
/* .slideout-left {
    translate: -1000px;
    transform: scale(0.5);
}
.slideout-right {
    translate: 1000px;
    transform: scale(0.5);
}
.usage .left.slideout-center {
    translate: 200px;
}
.usage .right.slideout-center {
    translate: -100px;
} */
.main .usage > div {
    transition: all .5s;
}
.main .usage > img {
    object-fit: cover;
    border-radius: 15px;
    transition: all 1s;
}
.main .usage .short-text {
    /* font-size: 45px; */
    line-height: 100%;
    font-weight: 700;
}
.main .usage .long-text {
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    margin: 40px 0;
}
main .expirience div {
    white-space: nowrap;
}
main .expirience {
    height: 100px;
}
/*End index page*/
/*Catalog page*/
.categories a {
    border: solid white 1px;
    border-radius: 15px;
    padding: 10px 20px;
    color: white;
}
.scrollable .btn.active, .tab {
    background-color: var(--custom-orange);
    color: white;
}
.categories a:hover, .categories .active, .tab:hover , .tab.active{
    background-color: white;
    color: var(--custom-orange);
}
.tab:hover svg path, .tab.active path{
    stroke: var(--custom-orange);
}
.product-small .bg, .bg {
    background-image: url(/content/img/product-bg-pro.png);
    background-size: cover;
    border-radius: 15px;
}
.product-small .bg img{
    width: 100%;
    height: 370px;
    object-fit: contain;
}
.product-small .name {
    margin: 15px 0;
    color: var(--custom-blue);
    font-weight: 700;
    height: 2rem;
}
.product-small .description {
    font-size: 14px;
    font-weight: 400;
    color: #516279;
}
.product-small svg.arrow {
    width: 44px;
    height: 44px;
    position: relative;
    top: 20px;
}
/*End Catalog page*/
/*Product page*/
.breadcrumbs a:last-child {
    color: var(--custom-orange);
}
.product .description {
    /* margin-left: 70px; */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}
.blue-rounded-bg div, .blue-rounded-bg a {
    background-color: #F1F5FA;
    color: var(--custom-blue);
    padding: 10px 20px;
    border-radius: 15px;
    margin-right: 10px;
}
.scrollable .btn {
    color: var(--custom-orange);
    border: solid 1px #CAD1DA;
    display: table;
    padding: 10px 25px;
    border-radius: 15px;
    margin-top: 20px;
}
.more {
    margin-top: 100px;
}
/*End Product page*/
/*Intractive page*/
.marker-name:hover {
    background-color: var(--custom-orange);
}
.marker-name {
    position: absolute;
    background-color: white;
    border-radius: 25px;
    /* color: white; */
    min-width: 25px;
    height: 25px;
    border: solid var(--custom-orange) 1.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
svg path:hover {
    fill: var(--custom-orange);
}
.tab.active svg {
    transform: rotate(90deg);
}
.interactive svg path, .tab svg, .marker-name {
    transition: all .5s;
}
.slick-prev:before, .slick-next:before {
    content: '';
}
.slick-slider-product .slick-dots li button:before {
    content: '';
    background-color: #7A7B7B;
    width: 16px;
    height: 16px;
    border-radius: 5px;
}
.slick-slider-product .slick-dots li.slick-active button:before {
    background-color: var(--custom-orange);
}
.slick-slider-product .slick-prev {
    left: -55px;
}
.product-modal .button {
    margin-top: 30px;
    margin-bottom: 10px;
}
.product-modal > div {
    min-width: 400px;
}
.product-modal .slick-slider .slick-prev {
    /* left: -10px; */
    top: 35%;
}
.product-modal .slick-slider .slick-next {
    /* right: -10px; */
    top: 35%;
}
.map-container {
    top: -90px;
    position: relative;
}
.tmb-wrap .tmb-wrap-table {
    height: 104%;
    border-spacing: 0px;
}
.tmb-wrap-table div {
    border-bottom-width: 0px;
}
.tmb-wrap-table div.active::after {
    /* border-color: none; */
    background-color: var(--custom-orange);
}
.tmb-wrap-table div:last-child:after {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.tmb-wrap-table div:first-child:after {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.tmb-wrap-table.s2 div::after {
    width: 50%;
}
.tmb-wrap-table.s3 div:after {
    width: 34%;
}
.tmb-wrap-table div::after {
    content: '';
    position: absolute;
    height: 10px;
    background-color: lightgray;
    bottom: -16px;
}
.swipe {
    position: absolute;
    bottom: 40px;
    left: 120px;
}
.path {
    width: 20px;
    height: 20px;
    position: absolute;
    background: rgba(149, 147, 241, 0.5);
    border-radius: 40px;
top: 2px;
    left: 50px;
    visibility: hidden;
}

.hand-icon {
    position: relative;
    background-image: url(/content/img/Hand-Touch-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    transform-origin: 52% 62%;
    background-size: contain;
}
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes swipe-hand {
    25% { transform: translate(20px) rotate(30deg); }
    50% { transform: translate(-20px) rotate(-15deg); }
    100% { transform: translate(0px) rotate(0); }
}

@keyframes swipe-dot {
  12% {
    visibility: visible;
    width: 40px;
  }
  25% {
    visibility: visible;
    transform: translate(-65px);
    width: 20px;
  }
  26% { visibility: hidden; }
}
@media (max-width:1024px){
    ul.navbar-nav li a{
        color: white;
        padding-left: 10px;
        padding-right: 10px;
    }
    ul.navbar-nav {
        background-color: var(--custom-orange);
        border-radius: 15px;
    }
}
@media (max-width:768px){
    .slideout-left, .slideout-right, .slideout-center {
        translate: 0!important;
        transform: scale(1);
    }
    main .usage img{
        height: 365px;
    }
    main .expirience {
        height: 200px;
    } 
    .product-small .name {
        height: 4rem;
    }
    .map-container {
        overflow: auto;
        top: 0;
    }
}
@media (max-width: 425px) {
    .d-xs-none, .more > div:last-child {
        display: none;
    }
    .scope-bg {
        background-position: -1270px;
    }
    .products thead th, .products tbody td { 
        font-size: 8px;
    }
    .products tbody td {
        padding: 0px 4px;
    }
    .product-small svg.arrow {
        width: 25px;
        height: 25px;
    }
    .map-container > div {
        width: 1080px;
    }
    .inter-title {
        font-size: 40px;
    }
    .marker-name div {
        font-size: 8px;
    }
    .marker-name {
        min-width: 15px;
        height: 15px;
    }
    /*Index page*/
    main .usage {
        margin-top: 40px;
    }
    main .usage .short-text {
        font-size: 24px;
    }
    header .socials, footer nav  {
        display: none!important;
    }
    .icon svg, .icon-bg {
        height: 100px;
        width: 100px;
    }
    /*End index page*/
    .product-small svg {
        width: 20px;
        height: 16px;
        right: -2%;
    }
    .product-small .name {
        height: 3rem;
        font-size: 14px;
    }
    .product-small .bg img{
        height: 140px;
    }
}
@keyframes arrows {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(-100%);
  }
}
.bg-orange {
    background-color: var(--custom-orange);
}
.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28250, 250, 250, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
    border-color: white;
}