/******************************************************************************************
   + Focus style
*******************************************************************************************/
.btn:focus {
  outline: none;
  box-shadow: none;
}

#side-nav #mainNav li a:focus {
  color: #b81f26;
}
.btn-search:focus {
  color: #fff;
}

.navbar-top>ul>li>a:focus {background-color: #000}
#site-nav #mainNav .nav-item > a {color: var(--main-color)}
/******************************************************************************************
   + Mobile & Tablet
*******************************************************************************************/
@media (max-width: 1024px) {

  .navbar {
    padding: 10px 15px 8px;
  }
  .btn-mobile-menu {
    display: block;
    position: relative;
    top: 1px;
    right: 0;
  }
  .navbar-nav {
    padding: 15px 15px 15px 30px;
  }
  .navbar-brand img {
    max-width: 140px;
  }
  .social-links {
    margin-right: 0;
  }

  .right-wrapper {
    padding-right: 0;
    display: flex;
    flex-wrap: nowrap;
  }
  #site-nav {
    position: fixed;
    z-index: 1060;
    bottom: 0;
    top: 0;
    width: 240px;
    background: #f6f6f6;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-300px);
    left: 0;
  }
  #site-nav.visible {
    transform: translateX(0);
  }
  #site-nav .main-nav {
    padding-top: 80px;
    padding-bottom: 0;
    text-align: right;
  }
  #site-nav .main-nav li {
    display: block;
    margin-bottom: 2.4em;
  }
  #site-nav.visible #mainNav .nav-item.active > a:after {
    animation: fadeInLeft 300ms ease both;
    animation-delay: 300ms;
  }
  .navbar-brand {
    padding: 0;
  }
  .right-wrapper {
    position: relative;
  }
  section.is-parallax,
  .is-parallax {
    background-attachment: scroll;
  }
  section.has-parallax, section.has-parallax-group .bg {background-attachment: scroll;}
  .search-wrapper form {
    max-width: 90vw;
  }
}

/******************************************************************************************
   + Mobile & Tablet Portrait
*******************************************************************************************/
@media (max-width: 991px) {
  section h1, section h2, .modal h2 {font-size: 1.8em}
  footer .footer-part-1 .sitemap.column-2 li {width: 33.33%;}
  .list-style-2 {flex-direction: row; flex-wrap: wrap;}
  .list-style-2 .item {flex-basis: 49%;}
  .main-hero h2 {font-size: 1.6em;}
  #mainNav .dropdown-menu li a {white-space: pre-line;}
  .card-flow .bg {opacity: .4;}
  .card-flow .caption {color: #fff !important}
  .card-flow .caption * {color: #fff !important}
  .card-flow .caption-holder:after {opacity: .5;}
  .card-flow .caption-holder .btn-site {background-color: #fff !important; color: #000 !important; border-color:#fff !important;}
  .list-components {flex-wrap: wrap;}
  .list-components .flex-item {width: 50%; flex-basis: 50%}
  .footer-body>.d-flex {flex-direction: column;}
  .counter-stats .item {flex-basis: 50%; min-width: 50%; margin-top: 20px; min-height: auto; padding:0; justify-content: center}
  .flex-divider .flex-item {flex:0 1 25%; padding-right: 3%;}
  .flex-divider .flex-item + .flex-item {padding-left: 2%}
  .flex-divider .flex-item:nth-child(odd)::after {content: ''; position: absolute; top: 0; right: 20%; height: 100%; width: 1px; background-color: #eee}
  .flex-divider .flex-item{flex:1 1 100%;}
  #sidemenu {display: none;}
  .site-tools {flex-direction: column; align-items: flex-start;}
  .site-tools>div:not(:first-child) {margin-top: 8px;}
  .navbar-top .quick-links a>span {display: none;}
}

/******************************************************************************************
   + Mobile Only
*******************************************************************************************/
@media only screen and (max-width: 767px) {
  .hidden-xs {
    display: none;
  }
  .visible-xs {
    display: block;
  }
  .main-hero, .main-hero.p-0 {margin-top: 48px !important;}
  main {padding-top: 0;}
  #list-dowloads .flex-item {flex-basis: 100%; text-align: center;}
  section.sub-page {padding-top: 5em}
  section.sub-page.has-sub-menu {padding-bottom: 0em}
  .navbar-top {position: fixed; top: 0; left: 0; right: 0}
  .navbar-top>ul {width: 100%}
  .navbar-top>ul>li>a {min-width: inherit; font-size: .7em; padding-top:4px; padding-bottom: 4px}
  .navbar-top .link-career a {flex-grow: 1}
  .navbar-brand img {padding-bottom: 0;}
  header .w-100 {margin-top: 35px}
  header.shrink .w-100 {margin-top: 20px}
  section.has-parallax .caption {margin:1em; max-width: 28vw}
  section.has-parallax .caption h3{font-size: 1em}
  header .flex-grow-1 {align-self: center;}
  .footer-body .d-flex {flex-wrap: wrap;}
  .main-hero .d-flex {flex-wrap: wrap}
  .main-hero .d-flex>div{flex-basis: 100%}
  section .sub-section:first-child {padding-top: 3em}
  section.no-hero .sub-section:first-child {padding-top: 9em}
  .list-articles .flex-item-wrapper, .list-news .flex-item, .list-team .flex-item {flex-basis: 100%}
  .navbar-top>ul {justify-content: flex-end; margin:8px;}
  .navbar-top>ul>.flex-fill {flex:0 1 auto !important;}
  .navbar-top>ul {background-color: var(--main-color); margin:0; min-height: 32px;}
  .navbar-brand img {padding-top: 0}
  .navbar-top {overflow: hidden;}
  .navbar-top .quick-links {padding: 0 5px}
  .navbar-top .quick-links a {font-size: 9px; padding:0 5px 0 5px}
  .navbar-top .quick-links li:before {display: none;}
  .menu-wrapper>.site-tools {display: none;}
  .flex-divider, .footer-bottom .d-flex {flex-direction: column;}
  .flex-divider {flex-direction: row}
  .list-testimonials {max-width: 90%}
  .list-team {margin-left: 0; margin-right: 0;}
  .list-team .flex-item {padding-left: 0; padding-right: 0;}
  .list-team .flex-item+.flex-item {margin-top: 50px;}
  #secMilestones #sync2 {max-width: 100%;}
  #secMilestones #sync1 .owl-item.center .img-holder img {transform: scale(1);}
  .tab-header, .list-carousel-news .flex-item, .list-awards .item, .list-awards .item .caption-holder, #secMilestones #sync1 .event-item {flex-direction: column;}
  .list-carousel-news .news-item .img-holder {min-height: 210px; padding-top: 0%}
  .owl-carousel .owl-nav {transform: none; top: 19%}
  #mainNewsCarousel .owl-dots {bottom: 2.5%}
  .tab-pane .list-news .post-title {min-height: auto; padding-right: 5%}
  .tab-pane .list-news .flex-item {margin:15px 0;}
  .list-awards .caption-holder {align-items: flex-start; padding:0;}
  #secMilestones #sync1 .event-item {margin-right: 15px; overflow: visible;display: block;}
  #secMilestones #sync1 .owl-item.active .event-item:hover {min-height: auto;}
  #secMilestones #sync1 .event-item .img-holder {height: 400px; visibility: visible; opacity: 1; transition: 200ms linear; flex-basis: 100%; width: 100%;}
  #secMilestones #sync1 .event-item .img-holder:before {display: none;}
  #secMilestones #sync1 .event-item .img-holder .bg, #secMilestones #sync1 .owl-item.active .event-item:hover .img-holder {height: 400px; width: 100%;}
  #solutionAdvantages .list-icons {align-items: center; margin:0;}
  #solutionAdvantages .flex-item {padding-left: 0; padding-right: 0; max-width: inherit;}
  #solutionAdvantages h3 {min-height: auto;}
  #solutionAdvantages .img-holder {margin:auto;}
}

/******************************************************************************************
   + Tablet Portrait above
*******************************************************************************************/
@media only screen and (min-width: 768px) {
  section.sub-page {min-height: 600px}
  header .flex-grow-1 {align-self: flex-start;}
  .btn-mobile-menu { position: absolute; top: 48px; right: 8px; }
}

/******************************************************************************************
   + Tablet only
*******************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

/******************************************************************************************
   + Tablet Portrait only
*******************************************************************************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .list-clients .item {text-align: center;}
}

/******************************************************************************************
   + Tablet Landscape only
*******************************************************************************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/******************************************************************************************
   + Tablet Landscape above
*******************************************************************************************/
@media screen and (min-width: 992px) {
  #site-nav {flex-direction: column; align-items: flex-end}
  .site-tools {align-items: center}
  body {font-size: 16px;}
  p, ul, ol, pre, table, blockquote {line-height: 1.9; margin-bottom: 1.3em;}
  section, section.no-hero {padding-top: 5em; padding-bottom: 5em}
  #site-nav #mainNav>li:not(:first-child) {margin-left: .5em;}
  .main-hero .d-flex {padding-top: 20em; padding-bottom: 20em}
  .main-hero img {position: absolute; max-width: 55vw; left: -8%; top: 18%}
  .footer-body .sitemap a, .footer-body address {white-space: nowrap}
  .footer-body address {font-size: .9em}
  .footer-body .flex-item+.flex-item {margin-left: 10%;}
  .list-clients .item{flex-basis: 33%}
  #indexIntro {background-position: bottom right}
  .subsection-cta, .subsection-cta.py-5 {padding-top: 6em; padding-bottom: 6em;}
  #ourStats .flex-divider {flex-wrap: nowrap; justify-content:space-between; align-items:flex-start;}
  .flex-divider .flex-item {flex:0 1 20%; padding-right: 3%;}
  .flex-divider .flex-item + .flex-item {padding-left: 2%}
  .flex-divider .flex-item:not(:last-child)::after {content: ''; position: absolute; top: 0; right: 3%; height: 100%; width: 1px; background-color: #b5b6b8}
  .btn-back-to-top {display: block;}
  #secCompanyProfile .mt-md-n5 {margin-top: -10rem !important}
}

/******************************************************************************************
   + Desktop
*******************************************************************************************/
@media screen and (min-width: 1024px) {
  nav.navbar {
    box-shadow: none;
    background-color: rgba(155, 155, 155, 0.7);
    padding-left: 0; padding-right: 0;
  }
  nav.navbar.shrink {
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
  }
  nav.navbar.shrink .navbar-brand {
    padding: 1em 1em 1em 0;
  }
  nav.navbar.shrink .navbar-brand img {
    max-width: 200px;
  }
  .navbar-top {margin-bottom: 15px;}
  .navbar.shrink .navbar-top {margin-top:0; margin-bottom: 0;}
  #mainNav .nav-item a:hover,
  #mainNav .nav-item a:focus {
    color: #005ca8;
  }
  #mainNav .nav-item:last-child a {
    padding-right: 0;
  }
  footer .footer-part-1 .sitemap.column-industies {max-width: 530px;}
  footer .footer-part-1 .sitemap.column-countries {max-width: 405px; min-width: 405px;}
  .sub-arrow {display: none !important}
  #site-nav #mainNav .nav-item.active > a:after {position: absolute; content: ''; bottom:-5px; left: 0; right: 0; background-color: var(--sec-color); height: 3px; width: 20px; margin: auto;}
  .list-clients .item{flex-basis: 20%; margin:1.5em 0;}
}

/******************************************************************************************
   + Desktop (to exclude ipad landscape)
*******************************************************************************************/
@media screen and (min-width: 1025px) {
  header.navbar {padding-left: 0; padding-right: 0;}
  header {background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); align-items: flex-start !important; padding:0; padding-bottom: 0}
  header.shrink {background-color: #fff; box-shadow: 0 2px 24px rgba(0,0,0,0.08); height:auto}
  header.shrink .navbar-brand {padding-top: 8px; padding-bottom: 8px;}
  header.shrink .navbar-top {visibility: hidden; opacity: 0; transform: translateY(-2em); height: 0}
  header.shrink #site-nav {margin-top: 0}
  .navbar-brand {
    padding: 0 0;
  }
  .navbar-collapse {
    justify-content: flex-end;
  }
  #site-nav {margin-top: 10px; margin-bottom: 10px;}
  #site-nav #mainNav .nav-item>ul {
    opacity: 0;
    transform: translateY(15px);
    visibility: hidden;
    background-color: #fff;
    display: block !important;
    transition: 200ms ease-in;
    padding:0;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    border-radius: 0;
    position: absolute;
    border:none;
    font-size: 1em;
    min-width: 200px;
  }
  #site-nav #mainNav .nav-item>ul.show {
    opacity: 0;
    transform: translateY(0);
    visibility: hidden;
    margin-top: -1px;
  }
  #mainNav .dropdown.show .dropdown-menu.show, .language-selector .dropdown-menu.show, .navbar-top .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
  }
  /** #site-nav #mainNav>li>ul>li, .navbar-top .dropdown-menu li {} **/
  #site-nav #mainNav li li a, .language-selector .dropdown-menu a, .navbar-top .dropdown-menu li a {color: #000; padding:5px 8px; display: block; padding-right: 40px; position: relative; font-size: 1em; line-height: 1.2;}
  .language-selector .dropdown-menu a {font-size:1rem;}
  #site-nav #mainNav .nav-item > a {padding:.2em .5em}
  #site-nav #mainNav .nav-item.active > a { color: var(--main-color)}
  header .right-wrapper .list-inline li:last-child {margin-right: 0;}
  .menu-wrapper {display: flex; width: 100%;}
  .navbar-expand-lg>.container {display: block;}
  header .top-bar-wrapper {align-items: flex-start;}
  #site-nav {display:flex; justify-content: center; align-items: flex-end; width: 100%;}
  .list-portfolio .flex-item a {min-height: 250px; display: flex;align-items: center; justify-content: center; max-height: 250px}
  .list-portfolio .flex-item .caption-holder {visibility:hidden; opacity:0; position: absolute; background-color: rgba(238,122,16,0.8); top: 0; bottom: 0; left: 0; right: 0; padding:2em; margin-top: 0; display: flex; align-items: start; justify-content: center; flex-direction: column; }
  .list-portfolio .flex-item .caption-holder .title {color: #fff; text-align: left}
  .list-portfolio .flex-item .btn {color: #fff; border-color: #fff}
  .list-team .team-foot-note .btn-site {opacity: .5; transform: translateY(3em);}
  .list-products-preview {flex-wrap: nowrap; display: flex}
  .list-products-preview .flex-item {flex-basis: 33.33%; min-width: 33.33%; min-height: 450px;align-items: flex-end; display: flex; margin-bottom: 0; overflow: hidden; padding:1.3em}
  .list-products-preview .bg {opacity: 1;}
  .list-products-preview .bg:before {content: ''; background-color: rgba(0,0,0,0.8);position: absolute; left: 0; right: 0; bottom: 0; height: 5em}
  .list-products-preview .caption h5 {color: #fff}
  .list-products-preview .caption p, .list-products-preview .caption table, .list-products-preview .caption ul {font-size: 0.85em;}
  .list-products-preview .additional-info {opacity: 0; height: 0; display: flex; flex-direction: column; flex-wrap: wrap; width: inherit; align-items: flex-start;}
  .list-products-preview .flex-item:hover {align-items: flex-start;}
  .list-products-preview .flex-item:hover .additional-info {opacity: 1; height: auto}
  .list-products-preview .flex-item:hover .bg {opacity: .25;}
  .list-products-preview .flex-item:hover .bg:before {height: 100%; background-color: rgba(156, 155, 155, 0.8)}
  .list-products-preview .flex-item:hover h5 {color: #b81f26}
  .list-products-preview.for-forex .flex-item {min-height: 650px;}
  .list-products .caption {font-size: 0.85em; }
  .list-products .flex-item {flex-basis: 28%; margin-left: 2%; margin-right: 2%; min-height: 270px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;}
  .list-products .flex-item .caption-inner {opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(184,31,38,1); color: #fff !important; padding:.7em 1.5em; transform: translateX(2em); transition: 200ms linear;}
  .list-products .flex-item .caption-inner>* {color: inherit;}
  .list-products .flex-item:hover .caption-inner {transform: translateX(0); opacity: 1; visibility: visible;}
  .list-products .img-holder {text-align: center; margin: 0;}
  .list-products .flex-item .caption-inner ul li:before {color: #fff}
  .list-products .flex-item .aniview {display: flex; align-self: center; justify-content: center; flex-wrap: wrap; flex-direction: column; min-height: 270px;}
  .list-products .img-holder {min-width: 22em; }
  .list-products.for-future .flex-item {flex-basis: 20%; margin:0; border:2px solid transparent;}
  .list-products.for-future .flex-item:hover {border-color: #b81f26; min-height: 200px}
  #index-iot-component .hot-spots {display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  #index-iot-component .hot-spots .spot {background-color: #fff; position: absolute; border:5px solid var(--main-color); width: 24px; height: 24px; transition: 50ms linear; cursor: pointer; border-radius: 50%; box-shadow: 0 2px 18px rgba(0,0,0,0.18)}
  #index-iot-component .hot-spots .spot:nth-child(even) {border-color: var(--sec-color)}
  .popover-header {color: var(--main-color) !important; background-color: transparent; border:none;}
  .popover-body { color:#333;}
  .popover { border: none}
  .bs-popover-auto[x-placement^=top]>.arrow::before, .bs-popover-top>.arrow::before {border-color: transparent;}
  #index-iot-component .hot-spots .spot:hover {transform: scale(1.25);}
  .list-show-hover-column {flex-wrap: nowrap; justify-content: center; align-items: center;}
  .list-show-hover-column .item {transition: 200ms linear; overflow: hidden;}
  .list-show-hover-column .item .caption {width: 0; opacity: 0; visibility: hidden; max-width: 220px; padding:0;}
  .list-show-hover-column .item:hover .caption { width: auto; opacity: 1; visibility: visible; padding:20px;}
  .inner-gap {padding-left: 4%; padding-right: 4%}
  .inner-gap .inner-gap {padding: 3% 5%}
  #secSolutions .col-md-4, #relatedProduct .col-md-3, #relatedProduct .col-md-4 { transition: 250ms ease-out }
  #secSolutions .caption-holder, #relatedProduct .caption-holder {position: absolute; bottom: 0; left: 0; right: 0; left: 0; right: 0; padding:2em 2.5em; text-align: center;}
  #secSolutions .caption-holder:after, #relatedProduct .caption-holder:after { position: absolute; z-index: 0; background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.5) 21%, rgba(0,0,0,0) 92%); content: ''; bottom: 0; left: 15px; right: 15px; height: 9em;}
  #relatedProduct .item-body .caption-holder:after {left: 0; right: 0;}
  #secSolutions .caption-holder p, #relatedProduct .caption-holder p {color: #fff; margin-bottom: 0; position: relative; z-index: 1}
  #secSolutions .footer-holder, #relatedProduct .footer-holder {position: absolute; bottom: -41px;left: 0; right: 0; margin:0 15px;}
  #secSolutions .footer-holder .btn, #relatedProduct .footer-holder .btn {display: flex; justify-content: space-between; align-items: center; opacity: 0; visibility: hidden; transform: translateY(1em); transition: 150ms ease-in}
  #secSolutions .col-md-4:hover, #relatedProduct .col-md-3:hover, #relatedProduct .col-md-4:hover {transform: scale(1.02);}
  #secSolutions .col-md-4:hover .footer-holder .btn, #relatedProduct .col-md-3:hover .footer-holder .btn, #relatedProduct .col-md-4:hover .footer-holder .btn {opacity: 1; visibility: visible; transform: translateY(0);}
  .list-carousel-news .news-item .img-holder{min-height: 500px; flex-basis: 60%}
  .list-carousel-news .news-item .caption-holder {flex-basis: 40%;padding:3em;}
  #relatedProduct h3 {color: #fff;position: relative; z-index: 1;}
  .float-menu a {width: 46px; height: 46px; line-height: 46px; font-size: 18px;}
  .float-menu a i{font-size: 21px}
  .float-menu a span {font-size: 15px;}
}

/******************************************************************************************
   + Hover style
*******************************************************************************************/
@media (min-width: 1025px) {
  .page-link:hover {color: #b81f26}
  .list-portfolio .flex-item .btn:hover {color: #fff; border-color: #b81f26}
  .list-portfolio .flex-item:hover .caption-holder {visibility: visible; opacity: 1;}
  .btn-site.outline:hover {background-color: #b81f26; color: #fff; border-color: #b81f26}
  .card-flow:hover .bg {opacity: .15;}
  .card-flow:hover h3, .card-flow:hover p {color: #fff}
  .card-flow:hover .caption-holder:after {opacity: 0;}
  .card-flow:hover .btn-site.outline {color: #231f20; border-color: #fff; background-color: #fff}
  #site-nav #mainNav>li>ul>li:hover, .navbar-top .dropdown-menu li {background-color: var(--sec-color); color: #fff}
  #site-nav #mainNav>li>ul>li:hover a, .navbar-top .dropdown-menu li a {color: #fff}
  #site-nav #mainNav li a:hover {color: #333}
  #site-nav #mainNav li:hover ul {display: block; opacity: 1; visibility: visible; transform: translateY(0)}
  #site-nav #mainNav li li a:hover {color: #b81f26}
  .list-team .team-img img:hover {border-color: #b81f26}
  .list-team .item:hover .team-foot-note .btn-site {opacity: 1; transform: translateY(0);}
  .navbar-top>ul>li>a:hover {background-color: var(--sec-color) !important; background:none; color: #333}
.navbar-top>ul>li>a:hover {background-color: #000}
.sitemap  a:hover, .site-info-links  a:hover, .nav-pills .nav-link:hover {color: var(--main-color)}
.social-links a:hover {background-color: var(--sec-color)}
.tab-pane .list-news .flex-item:hover {border-bottom-color: var(--main-color); box-shadow: 0 0 30px rgba(0,0,0,0.1); transform: scale(1.01);}

}

@media (min-width: 1280px) {
  #site-nav {flex-direction: row; align-items: center;}
}


/******************************************************************************************
   + Most Common use desktop
/*******************************************************************************************/
@media screen and (min-width: 1366px) {
  section {padding-top: 6em; padding-bottom: 6em}
  section.no-hero {padding-top: 10em}
  .container {max-width: 1200px;}
  #solutionAdvantages .flex-item { padding-left: 3%; padding-right: 3%; min-width: 350px; max-width: 350px;}
}

/******************************************************************************************
   + large Screen
*******************************************************************************************/
@media screen and (min-width: 1600px) {
  section {padding-top: 7em; padding-bottom: 7em}
  .container {max-width: 1300px;}
}

/******************************************************************************************
   + IE Fixed
*******************************************************************************************/

@media screen\0 {
}

/* Firefox Fixed */
@-moz-document url-prefix() {
}