/******************************************************************************************
+ Web Fonts Settings
*******************************************************************************************/
@import url("all.min.css");

/******************************************************************************************
+ Typography Settings
*******************************************************************************************/

:root {
  --main-color:#e60027;
  --sec-color:#1c1f45;
  --dark-color:#042b00;
  --main-font:'Poppins', sans-serif;
  --border-color:#cccccb;
}

body {
  overflow-x: hidden;
  color: #333;
  position: relative;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: var(--main-font); font-weight: 600}
p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0em;
  margin-bottom: 1em;
  line-height: 1.6;
  font-weight: 400;
  color: #333;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}
b,
strong,
em,
small,
code,
modal {
  line-height: 1;
}
b,
strong,
.table > tbody > tr > th {
  font-weight: 700;
}
a,
a:active, .btn-link {
  color: var(--main-color);
  text-decoration: none;
  transition: 100ms linear;
}
a:hover,
a:focus {
  color: var(--sec-color);
  text-decoration: none;
  outline: none;
}
.container {
  width: 100%;
  max-width: 1170px;
}
.container-fluid.no-gutters {padding-left: 0; padding-right: 0}
::-moz-selection {
  background-color: var(--sec-color);
  color: #fff;
}
::selection {
  background-color: var(--sec-color);
  color: #fff;
}
.visible-xs {
  display: none;
}
.hidden {
  display: none;
}

.btn {
  border-radius: 30px;
  transition: 150ms linear;
  font-size: 0.9em;
  padding:0.8em 2.2em;
}
.txt-main {color: var(--main-color)}
.btn-site {background-color: var(--main-color); color: #fff; padding:.45em .7em .45em 2em; font-size: 1em; text-align: center; border-radius: 0; }
.btn-site:after {content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .9em; line-height: inherit; vertical-align: middle; margin-left: 2em; transition: 150ms linear !important;}
.btn-site:hover, .btn-site:focus {background-color: var(--sec-color); color: #fff;}
.btn-site.outline {color: var(--main-color); background-color: transparent; border-color: var(--main-color);}
.btn-site.white {background-color: #fff; border-color: #fff; color: #333}
.dark .btn-site.outline {color: inherit; background-color: transparent; border-color: #fff;}
.btn-site.secondary {background-color: var(--sec-color)}
.form-control {border-color: var(--sec-color);margin-bottom: 24px;}
.bg-light {background-color: #f6f6f6 !important;}
.bg-main {background-color: var(--main-color)}
.bg-sec {background-color: var(--sec-color)}
.color-main {color: var(--main-color)}
.color-sec {color: var(--sec-color)}
.btn-site.white:hover {background-color: var(--sec-color); color: #fff; border-color: var(--sec-color)}
.btn-site.trim {padding:.1em .6em .1em 1em; font-size: .9em; }
/******************************************************************************************
+ Header
*******************************************************************************************/
header.navbar {position: sticky; left: 0; right: 0; top: 0; z-index: 2; padding:0 15px 15px; background-color: #fff; justify-content: space-between; border-top: 6px solid var(--main-color)}
.header-topbar .site-tools a, .header-topbar .site-tools.search-wrapper span {color:#333}
header nav {width: 100%}
header .flex-grow-1 {align-self: flex-start;}
header.shrink .flex-grow-1 {align-self: center;}
.navbar-brand img {max-width: 170px; padding-top: 8px; padding-bottom: 8px;}
.navbar-brand.mini-logo {opacity: 0;width:0; visibility: hidden; transition: 0ms linear;}
.navbar-brand.mini-logo img {padding-top: 0; max-width: 140px; padding-bottom: 0}
.drawer-hamburger {position: absolute; left: initial !important; right: 0; top: 50%; transform: translateY(-50%);}
.drawer-overlay {z-index: 0}
.drawer-nav .drawer-menu>li>a {color: #fff; font-weight: 600; padding:10px 0;}
.drawer-nav .dropdown-menu {position: relative; box-shadow: none; padding:0; margin: 5px 0 10px; background-color: transparent; border:none; float: none}
.drawer-nav .dropdown-menu a {color: #black; background-color: transparent;}
.drawer-nav .dropdown-menu a:hover, .drawer-nav .dropdown-menu a:focus, .header-body .dropdown-menu a:focus, .header-body .dropdown-menu a:hover, .header-topbar .dropdown .dropdown-menu a:hover, .header-topbar .dropdown .dropdown-menu a:focus, .dropdown-item:focus, .dropdown-item:hover {background-color: transparent; color: #fff; border-bottom: 1px solid rgba(255,255,255,1)}
.drawer-hamburger {display: none}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {background-color: var(--main-color)}
.btn-mobile-menu{display:none;width:40px;height:21px;position:relative;right:0.5rem;z-index:1;}
.spinner-master2 *{transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}
.spinner-master2{position:relative;margin:0 auto;height:21px;width:30px;}
.spinner-master2 label{position:absolute;z-index:99;height:100%;width:100%;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);}
.spinner-master2 .spinner2{position:absolute;height:2px;width:100%;background-color:var(--main-color);}
.spinner-master2 .diagonal.part-1{position:relative;float:left;}
.spinner-master2 .horizontal{position:relative;float:left;margin-top:7px;}
.spinner-master2 .diagonal.part-2{position:relative;float:left;margin-top:6px;}
.spinner-master2.open .spinner-spin2 > .horizontal{opacity:0;}
.spinner-master2.open .spinner-spin2 > .diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px;}
.spinner-master2.open .spinner-spin2 > .diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-11px;}
header.shrink {position: fixed; background-color: #fff; box-shadow: 0 8px 12px rgba(0,0,0,0.07); height: auto; padding-bottom: 12px; padding-top: 12px}
header.shrink .header-body {padding-top: 0}
header.shrink .mini-logo {transform: translateY(0); opacity: 1; visibility: visible;}
header.shrink .navbar-brand:not(.mini-logo) {display: none;}
header.shrink .navbar-brand img {max-height: 55px}
header.shrink .header-topbar {display: none;}
header.shrink .header-body .navbar-nav>li>a {line-height: 60px; padding-top: 15px; padding-bottom: 15px}
header.shrink #nav-left .navbar-nav {justify-content: flex-end}
header.shrink #nav-right .navbar-nav {justify-content: flex-start}
header.shrink .header-body .navbar .dropdown-menu {top: 60px}
header.shrink .drawer-hamburger-icon, header.shrink .drawer-hamburger-icon:before, header.shrink .drawer-hamburger-icon:after {background-color: #333}
.drawer-open header.shrink .drawer-hamburger-icon {background-color: transparent;}
.search-active .header-topbar {z-index: 3}
.dropdown-item, .dropdown-item:hover, .dropdown-item:focus {color: #333; border:none;}
.navbar-brand {max-width: 160px;}
#main-menu li a, .site-tools a {color: black}
#main-menu>li>a, .site-tools a {font-size: 1em}
#main-menu li ul li a {position: relative; margin:0 0 5px;}
#main-menu>li.active>a {color: var(--main-color)}
.sub-arrow {vertical-align: middle;}
.navbar-top {display: flex; justify-content: flex-end; transition: 200ms linear;}
.navbar-top>ul {list-style: none; display: flex; flex-wrap: nowrap;padding:0; margin:-1px 0 0; align-items: center;}
.navbar-top>ul>li{margin-left: -1px}
.navbar-top>ul>li>a, .social-links li a {background-color: var(--main-color); border-radius: 50%; padding:6px 6px; height: 26px; width: 26px; color: #fff; font-weight: 800; display: flex; align-items: center; line-height: 1; justify-content: center;}
.navbar-top>ul>li>a>i, .social-links li a i {font-size: 14px; vertical-align: middle;}
.navbar-top .link-search>a {min-width: inherit;}
.navbar-top .link-language i, .navbar-top .link-login i, .navbar-top .link-career i {border-radius: 50%; border:1px solid #fff; margin-right: 7px; text-align: center; width: 16px; height: 16px; display: flex; align-items: center; line-height: 18px; vertical-align: middle; font-size: 14px;}
.navbar-top .link-language i {font-style: normal; font-size: 8px; padding-left: 2px}
.navbar-top .link-career i {padding-left: 0.5px}
.navbar-top .link-login i {padding-left: 0.5px}
.navbar-top .dropdown-menu.show {top: 24px;}
.navbar-nav .nav-link, .navbar-nav .nav-item {position: relative;}
.navbar-top>ul ul {list-style: none; display: flex; align-items: center; margin: 0; padding: 0}
.navbar-nav .nav-link .sub-arrow {position: absolute; right: 0}
.navbar-nav .nav-link+.dropdown-menu {border:none; background-color: transparent; font-size: inherit; padding:0 0 0 15px;margin: 0}
.navbar-nav .dropdown-menu li+li{margin-top: 4px;}
.navbar-top .quick-links {display: flex; flex-wrap: nowrap; }
.navbar-top .quick-links li {position: relative;}
.navbar-top .quick-links li:before {content: '|'; position: relative; color: #fff; position: absolute; top: 0; left: -5px;}
.navbar-top .quick-links li:first-child:before {display: none;}
.navbar-top .quick-links a {color: #fff; padding:8px 12px; font-size: 12px; background-color: var(--main-color)}
.language-selector .btn {background-color: transparent; color: #333; padding: .375rem .75rem; border:none;}
.language-selector .btn:focus, .language-selector .btn:hover, .language-selector .show>.btn:focus, .language-selector .show>.btn:hover {background-color: transparent !important;color: #333}
.language-selector img {max-width: 21px;}
.login-wrapper>a {padding:2px 10px 2px 15px;}
.login-wrapper>a.btn-site:after {margin-left: .8em}
.site-tools {display: flex; flex-wrap: nowrap; align-items: center;}
.site-tools>* {margin-left: 20px;}
#hc-nav-1 .nav-container {background-color: #fff !important; padding:30px 0 60px; height: auto}
#hc-nav-1 .nav-content {width: 90%; margin:30px auto;}
#hc-nav-1 .nav-item-link, #hc-nav-1 li.nav-close a, #hc-nav-1 .nav-back a { border:none; }
#hc-nav-1 .input-group {flex-wrap: nowrap;}
#hc-nav-1 .input-group .btn {border:none; font-size: 16px; opacity: 1; transform: none}
#hc-nav-1 .input-search {border: none; border-bottom: 1px solid #333; padding: 12px 45px 12px 12px; outline: none; box-shadow: none; font-size: 16px; flex-grow: 1}
#hc-nav-1 .input-group-append {position: absolute; bottom: 2px; right: -10px;}
#hc-nav-1 .input-search:focus {outline: none;}
#hc-nav-1 .nav-wrapper {box-shadow: none; background-color: transparent;}
.menu-wrapper>.site-tools {display: none}
#customToggleSearch {position: relative; top: 0; z-index: 1; text-align: center;}
.hc-offcanvas-nav .nav-container, .hc-offcanvas-nav .nav-wrapper, .hc-offcanvas-nav ul {background-color: transparent;}
.hc-offcanvas-nav .nav-close-button span, .hc-offcanvas-nav .nav-parent .nav-next, .hc-offcanvas-nav .nav-back span {display: none;}
.hc-offcanvas-nav .nav-content>.nav-close a:after, .modal a.btn-close:after {content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.4em; transition: 150ms linear;}
.hc-offcanvas-nav .nav-content>.nav-close {position: absolute; top: 12px; right: 12px;}
.hc-offcanvas-nav .nav-title+.nav-close a:not(.has-label) {color: #333; text-align: center; line-height: 1; height: auto; width: auto; top: 0;}
.hc-offcanvas-nav .nav-title+.nav-close a:not(.has-label):hover {background:none; color: var(--main-color)}
.hc-offcanvas-nav .nav-item-wrapper {position: relative;}
.hc-offcanvas-nav li {overflow: hidden;}

/******************************************************************************************
+ Footer
*******************************************************************************************/
footer {background-color: #e7e7e7; background-image: url(../images/bg-footer.jpg); border-bottom: 6px solid var(--main-color); background-position: center bottom; background-size: cover}
footer a, footer h4, .social-links  a {color: #333;}
.footer-top {justify-content: space-between; align-items: center; position: relative;}
footer img.logo {max-width: 180px;}
.social-links {list-style: none;}
footer .social-links li+li {margin-left: 12px;}
footer p {color: #333; margin-bottom: 0;}
footer h4 {font-size: 1.1em; color: var(--main-color)}
.footer-bottom {padding-top: 1em; padding-bottom: 1em;}
.footer-body {padding-top: 2em; padding-bottom: 0; margin-left: 0; display: flex;}
.footer-body ul.sitemap {list-style: none; padding:0; margin-top: 25px; position: relative;}
.footer-body ul.sitemap li+li {margin-top: 6px;}
.footer-body .d-flex {justify-content: space-between;}
.footer-body address {font-size: 1em; margin-top: 25px;}
.footer-bottom .d-flex {justify-content: space-between;}
.site-info-links {display: flex; list-style: none; padding:0;}
.site-info-links li+li {margin-left: 20px;}
.btn-back-to-top {position: absolute; top: 0; left: 0; right: 0; margin: auto; color: var(--main-color); display: none; width: 30px;}
.btn-back-to-top span {font-size: 2.1em}
/******************************************************************************************
+ Main
*******************************************************************************************/
section {position: relative; padding-top: 4em; padding-bottom: 4em;}
section.is-parallax, .is-parallax {background-attachment: fixed; background-position: bottom center;}
section img, .modal img {max-width: 100%;}
section h1, section h2, .modal h2 {font-size: 2.1em; font-weight: 300; }
section h1 {color: var(--main-color)}
section.no-hero h1 {font-size: 2.4em; margin-bottom: .4em;}
section h3, .modal h3 {font-size: 1.20em; font-weight: 500; color: #333; margin-bottom: 0.7em}
section h4, .modal h4 {font-size: 1.15em; font-weight: 500; color: #333; margin-bottom: 0.7em}
section figure {margin:0;}
section .sub-section {padding-top: 2em; padding-bottom: 2em}
section .sub-section:first-child {padding-top: 0;}
section .sub-section:not(:first-child) {padding-top: 3em;}
section .sub-section+.sub-section {margin-top: 2em}
.dark * {color: #fff}
.has-bg {background-size: cover; background-position: center;}
.main-hero {min-height: 460px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.main-hero .flex-item {width: 50%}
.main-hero {display: flex; align-items: flex-end;}
.main-hero .caption-holder {padding-left: calc(3% + 15px); padding-bottom: 2em}
.main-hero .caption-holder h1 {color: var(--sec-color); font-size: 3.2em; font-weight: 300}
#pagination a {color: var(--main-color)}
.page-item.active .page-link {background-color: var(--main-color); color: #fff !important; border-color:var(--main-color);}
.btn-filter {min-width: 160px; border:1px solid #ddd; border-radius: 0; text-align: left; position: relative; font-size: 1em}
.filter-menu .dropdown-menu {padding:1em; margin:0 0 0 10px; box-shadow: 0 1px 10px rgba(0,0,0,0.1);z-index: 1001}
.filter-menu .dropdown-menu a {color: var(--text-color)}
#main-contact .btn-filter {min-width:220px}
#main-contact .btn-filter:after {position:absolute; right:15px; top:50%; transform: translateY(-50%);}
#main-contact .dropdown-menu {padding:.6em}
#main-contact .dropdown-menu li:not(:last-child){margin-bottom:.4em}
#main-contact .dropdown-menu li a{color:var(--text-color)}
#main-contact .dropdown-menu .active a {font-weight:600; color:var(--main-text-color)}
#main-contact .contact-detail {min-width:400px}
.newsfeed {padding-top:15px; padding-bottom: 15px; background-color: #fff}
.marquee { overflow: hidden; }
.marquee ul, .marquee ul li { list-style: none !important; margin: 0; padding: 0; display: inline-block; line-height: 15px; margin-right: 50px !important }
.marquee ul li a { color: #000; }
.marquee ul li a:hover { color: var(--main-color); }
.marquee li .newfeed-date {border-right: 1px solid var(--main-color); margin-right: 15px; padding-right: 15px; display: inline-block;}
.marquee ul li a:hover .newfeed-date { color: #333 }
.list-services a {overflow: hidden; position: relative; display: block;}
.list-services .img-holder {height:320px; background-position: center; background-size: cover; transition: 400ms ease-out}
.list-services .flex-item:hover .img-holder {transform: scale(1.2);}
.img-holder.focus-btm {background-position: center bottom}
.list-services .caption-holder {position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; background: rgb(28,31,69);
background: linear-gradient(0deg, rgba(28,31,69,0.9) 21%, rgba(28,31,69,0) 92%); min-height: 39%; display: flex; justify-content: flex-end; text-align: center; flex-wrap: wrap; flex-direction: column; color: #fff;}
.list-services .service-title {font-style: 1.2em}
.list-services .btn {bottom:-60px;opacity: 0; visibility: hidden; position: relative; height: 0; transition: 150ms linear; margin-top: 10px;}
.list-services .flex-item:hover .btn {opacity: 1; visibility: visible; bottom: 0; height: auto; margin-top: 10px;}
#indexTargetService .img-holder {height: 380px; background-position: center; background-size: cover;}
#indexTargetService .caption-holder {position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.35) 21%, rgba(0,0,0,0) 85%); min-height: 60%; display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; flex-direction: column; color: #fff; padding:2em;}
#indexTargetService .service-title-slogan{color: var(--main-color); font-size: 0.85em; font-weight: 600;}
#indexTargetService {font-size: 1.2em}
#indexTargetService .btn { margin-top: 20px; }
.counter-stats {display: flex; flex-wrap: wrap; color: #333;}
.counter-stats {display: flex; justify-content: center; flex-wrap: wrap;color: #333; align-items: center;}
.counter-stats .flex-item {padding:15px 30px; position: relative; min-width: 215px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-start;}
.counter-stats .flex-item+.flex-item:before {width: 1px; height: 100%; background-color: #fff; content: ''; display: block; position: absolute; left: -30px; top: 0;}
.counter-stats .flex-item:first-child {padding-left:0}
.counter-stats .flex-item:last-child {padding-right:0; min-width: 290px}
.counter-stats .flex-item {padding:15px 30px;}
.counter-stats .flex-item span {display: block; font-weight: 400;}
.counter-stats .flex-item span.counter {position: relative;}
.counter-stats .flex-item span.counter {font-size: 3em; color: var(--main-color); font-weight: 300;}
.counter-stats .flex-item span.has-plus:after {font-size: .85em; vertical-align: top; content: '+'; font-weight: 400; position: relative; right: 0; top:15px; margin-left: 8px;}
.list-news {display: flex;flex-wrap: wrap; margin-left: -25px; margin-right: -25px;}
.list-news .flex-item {flex-basis: 25%; padding:25px;}
.list-news .img-holder {padding-top: 62.5%; display: block; background-position: center; background-size: cover; background-repeat: no-repeat; transition: 150ms linear;}
.list-news .caption-holder {margin:15px 0; border-top: 1px solid #8c8da1; padding-top: 15px; position: relative; overflow: hidden;}
.list-news .post-date {color: var(--main-color); font-weight: 700; font-size: 0.9em;}
.list-news .post-title {font-weight: 600; margin-top: 8px; font-size: 1.1em; line-height: 1.4}
.list-news .post-title a {color: #333}
.list-news .caption-holder:before {width: 100%; height: 3px; background-color: var(--main-color); position: absolute; top: 0; left: 0; z-index: 1; right: 0; content: ''; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: 200ms ease-in}
.list-news .flex-item:hover .caption-holder, .list-news .flex-item:hover .caption-holder .post-title a, .list-news .flex-item:hover .post-title a {border-color: var(--main-color); color: var(--main-color)}
.list-news .flex-item:hover .caption-holder:before {opacity: 1; visibility: visible; transform: translateY(0);}
.list-news .flex-item:hover .img-holder {transform: scale(1.02); box-shadow: 0 2px 25px rgba(0,0,0,0.25);}
.tab-pane .list-news .post-title {min-height: 120px;}
.tab-pane .list-news .flex-item {margin:15px; border-bottom:2px solid transparent; transition: 100ms ease-out; background-color: #fff;}
.list-testimonials {display: flex; max-width: 65%; margin:auto;}
.list-testimonials:before, .list-testimonials:after {position:absolute; content: ' " '; font-size: 46px; font-family: 'Secular One', sans-serif; color: var(--main-color)}
.list-testimonials:before {top: -5%; left: -5%; transform: rotate(180deg);}
.list-testimonials:after { bottom: -5%; right: -5% }
.list-testimonials .flex-item {margin:3em 0; text-align: center;}
.list-testimonials .testimonial-copy {padding-left: 5%; padding-right: 5%;}
#indexEnquiry .form-area {width: 100%; max-width: 650px;}
section .form-group {margin-bottom: 1.3rem}
section input.form-control, section textarea.form-control, section select.custom-select, .modal input.form-control, .modal textarea.form-control, .modal select.custom-select {border:none; border-bottom: 1px solid #b8b9ba; border-radius: 0; padding-left: 15px; background-color: transparent;}
section input.form-control::placeholder {font-size: .95em}
section input.form-control:focus, section textarea.form-control:focus, section select.custom-select:focus { outline: none; box-shadow: none; border-width: 2px; border-color: var(--sec-color) }
section input[type="submit"] {padding:12px 21px;}
section select.custom-select, section select.custom-select option:first-child{ color: #495057;}
form input[type="submit"] {padding-left: .7em}
.subsection-cta input.form-control{background-color: #fff; color: #333;}
.subsection-cta input.form-control:focus {border:none;}
.owl-thumbs {max-width: 70%; margin:auto; position: relative; z-index: 1; display: flex; justify-content: space-between; position: relative;}
.owl-thumbs .owl-thumb-item {padding:0 0 20px;position: relative; cursor: pointer; text-align: center;}
.owl-thumbs .owl-thumb-item:not(:first-child) {margin-left: 25px;}
.owl-thumbs .owl-thumb-item span {text-align: center;}
.owl-thumbs .owl-thumb-item:before {content: ''; transition: 150ms linear; position: absolute; bottom: 0; left: 0; right: 0; margin:auto; width: 18px; height: 18px; border:4px solid #fff; border-radius: 50%; background-color: var(--sec-color)}
.owl-thumbs .owl-thumb-item:not(:first-child):after {position: absolute; bottom: 7px ; left: -64px ; content: ''; width: 80px ; height: 1px ; background-color: #aaa; z-index: -1;}
.owl-thumbs .owl-thumb-item:first-child:before {margin-left: 0;}
.owl-thumbs .owl-thumb-item:last-child:before {margin-right: 0;}
.owl-thumbs .active.owl-thumb-item:before {background-color: var(--main-color); transform: scale(1.15);}
.owl-thumbs .active.owl-thumb-item {color: var(--main-color)}
#secMilestones #sync1 .caption-holder {height: 0; visibility: hidden; opacity: 0; padding:2em;}
#secMilestones #sync1 .center .caption-holder {height: auto; visibility: visible; opacity: 1;}
#secMilestones #sync1 .owl-item .img-holder img{transition: 150ms linear;}
#secMilestones #sync1 .owl-item:not(.center) .img-holder{transform: scale(0.85); filter: grayscale(1) blur(1px); opacity: .2;}
#secMilestones #sync1 .event-title {font-weight: 600;}
#secMilestones #sync1 .event-item+.event-item {margin-top: 1.2em}
#secMilestones #sync1 .owl-item:not(.center) .event-year, #secMilestones #sync1 .owl-item:not(.center) .img-holder{opacity: 0;}
#secMilestones #sync1 .event-year {position: absolute; top: 0; right: 0; background-color: var(--main-color); color: #fff; font-size: 1.1em; padding:.6em 1.5em; transition: opacity 200ms linear;}
#secMilestones #sync1 .owl-nav {top: -69px;}
#secMilestones #sync1 .img-holder {height: 500px;}
#secMilestones #sync1 .img-holder .bg {width: 100%; height: inherit; background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute;top: 0; left: 0;}
#secMilestones .owl-stage .caption-holder h3 {font-size: 1.1em; line-height: 1.4; margin:0;}
#secMilestones .owl-stage .caption-holder p {margin-bottom: .6em}
.list-team {display: flex; flex-wrap: wrap; margin:15px;}
.list-team .flex-item {flex-basis: 25%; padding-left: 3%; padding-right: 3%;}
.list-team .caption-holder {margin-top: 20px; text-align: center;}
.list-team .flex-item h3 {margin-bottom: 0;}
.list-team .flex-item .btn {opacity: 0; visibility: hidden; transform: translateY(20px);}
.list-team .flex-item:hover .btn {opacity: 1; visibility: visible; transform: translateY(0);}
.list-team .flex-item img, #modalTeam img {border-radius: 50%;}
.modal .btn-close {position: absolute; top: 2px; right: 8px;}
#secListSolutions .row-item {background-color: #e6e6e6; min-height: 400px}
#secListSolutions .equal-height-bg {align-self: stretch; background-position: center; background-size: cover;}
#secListSolutions .equal-height-caption {padding:3em;}
#secListSolutions .av-container:not(:first-child) .row-item {margin-top: 2.5em}
ul.add-link-effect li a {overflow: hidden;position: relative; color: #333}
ul.add-link-effect li a:after, .list-product-menu li a:after{content: '\f178'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; left:3px; top:0px; transition: all 50ms linear}
ul.add-link-effect li a:hover, ul.add-link-effect li a:hover:before {color: var(--main-color)}
#secSolutions .img-holder {height: 460px; background-position: center; background-size: cover; }
#secSolutions .caption-holder, #relatedProduct .caption-holder {margin-top: 20px; z-index: 1}
#relatedProduct .item-body {position: relative;}
#relatedProduct .item-body .caption-holder {padding:0;}
#relatedProduct .item-footer {position: relative; padding-top: .8em}
.list-white-box .flex-item{background-color: #fff; color: #333; width: 100%; max-width: 400px; padding:2em; margin:auto; min-height: 100px; display: flex; justify-content: center; align-items: center;}
.list-white-box .flex-item p {color: #333; margin-bottom: 0; text-align: center;}
.list-white-box .flex-item+.flex-item {margin-top: 30px;}
.list-icons, .list-imgs {display: flex; flex-wrap: wrap;}
.list-icons .flex-item, .list-imgs .flex-item {display: flex; width: 100%;}
.list-icons .flex-item .caption-holder p:last-child, .list-imgs .flex-item .caption-holder p:last-child {margin-bottom: 0}
.list-icons .flex-item+.flex-item {margin-top: 1.2em}
.list-icons .img-holder {background-color: var(--sec-color); min-width: 80px; width: 80px; height: 80px; display: flex; border-radius: 50%; justify-content: center; align-items: center;}
.list-icons .img-holder img {max-width: 36px;}
#solutionAdvantages .list-icons { margin-left: -3%; margin-right: -3%; justify-content: center; align-items: flex-start;}
#solutionAdvantages .flex-item { padding-left: 3%; padding-right: 3%; min-width: 320px; max-width: 320px; margin:2em 0; flex-direction: column;}
.list-imgs {margin-left: -20px; margin-right: -20px; justify-content: center; align-items: flex-start;}
.list-imgs .flex-item {padding-left: 20px; padding-right: 20px; min-width: 370px; max-width: 370px; margin:2em 0; flex-direction: column;}
#solutionAdvantages .img-holder {width: 180px; height: 180px;}
#solutionAdvantages .img-holder img {max-width: 100px;}
#solutionAdvantages .caption-holder {margin-top: 20px;}
#solutionAdvantages .list-icons.text-center .flex-item {text-align: center;}
#solutionAdvantages .list-icons.text-center .img-holder {margin: auto;}
#solutionAdvantages ul {text-align: left;}
#solutionAdvantages ul li+li {margin-top: 8px;}
#solutionAdvantages h3 {min-height: 70px;}
#solutionAdvantages .list-icons.list-of-three .flex-item{max-width: 33.33%; min-width: 33.33%}
#relatedProduct .img-holder {height: 260px; background-position: center; background-size: cover;}
.list-carousel-news .flex-item{display: flex;background-color: #e6e6e6}
.list-carousel-news .news-item .img-holder{min-height: 600px; display: block; flex-basis: 60%; background-size: cover; background-position: center;}
.list-carousel-news .news-item .caption-holder {flex-basis: 40%;padding:2.5em;}
#mainNewsCarousel .owl-dots{position: absolute; bottom: 0; right: 5%;}
#mainNewsCarousel .post-date {color: var(--main-color);}
#mainNewsCarousel .post-title {font-size: 1.2em; color: #333; font-weight: 600; margin-top: 3px; padding-right: 5%; display: inline-block;}
#mainNewsCarousel .post-excerpt {margin-top: 15px;}
#mainNewsCarousel .post-title:hover {color: var(--main-color)}
.pagination {margin-top: 20px; padding-top:20px;}
.pagination ul {display: flex; align-items: center; justify-content: center; list-style: none; margin:0 auto; padding:0;}
.pagination ul li a {width:21px; border-radius: 50%; line-height: 21px; background-color: var(--sec-color); color: #fff; display: block; display: flex; justify-content: center; align-items: center; font-size: .85em;}
.pagination ul li+li {margin-left: 6px;}
.pagination .active a {background-color: var(--main-color)}
.tab-header {display: flex; justify-content: space-between; align-self: center;}
.nav-pills .nav-link {color: var(--sec-color); font-size: 1.2em; padding:.5rem 2rem; border-radius: 0; border-bottom: 2px solid transparent; cursor: pointer}
.nav-pills .nav-link.active {background-color: transparent; color: var(--main-color); border-bottom-color: var(--main-color)}
.btn.dropdown-toggle {border-color: var(--main-color);}
.dropdown-toggle::after {border-color: transparent;}
.tab-pane {min-height: 450px;}
.post-content .post-date {color: var(--main-color)}
.post-content .post-title {font-size: 1.8em; color: var(--sec-color); font-weight: 500}
.list-collapse .panel .panel-title {margin:0; transition: 0ms; position: relative;}
.list-collapse .panel .panel-title:after {position: absolute; right: 15px; top: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; transition: 50ms linear}
.list-collapse .panel-heading {background-color: #fff;  border-top:1px solid #dfdfdf; position: relative; cursor: pointer; transition: 100ms linear;}
.list-collapse .panel-heading.active-acc, .list-collapse .panel-title:hover {background-color: var(--main-color);}
.list-collapse .panel-heading.active-acc .panel-title, .list-collapse .panel-title:hover>div, .list-collapse .panel-title:hover:after {color: #fff}
.list-collapse .panel-heading.active-acc .panel-title:after {transform: rotate(90deg)}
.list-collapse .panel-body {padding:15px 20px;}
#secJoinUs .title-reference, #secJoinUs .panel-title {display: flex}
#secJoinUs .title-reference {color: #666}
#secJoinUs .panel-title { font-weight: 600; font-size: 1.1em}
#secJoinUs .title-reference>div, #secJoinUs .panel-title>div {padding:20px}
#secJoinUs .title-reference .column1, #secJoinUs .panel-title .column1 {flex-basis: 55%}
#secJoinUs .title-reference .column2, #secJoinUs .panel-title .column2 {flex-basis: 30%}
#secJoinUs .title-reference .column3, #secJoinUs .panel-title .column3 {flex-basis: 15%}
#secJoinUs .section-body {min-height: 400px}
.list-awards {display: flex; margin-left: -20px; margin-right: -20px; flex-wrap: wrap}
.list-awards a {display: block;}
.list-awards .img-holder img {transition: 150ms linear; max-width: 400px; max-height: 400px; margin:auto}
.list-awards .item {padding: 3em 20px; display: flex; border-top:1px solid #ddd; border-bottom:1px solid #ddd; width: 100%; min-height: 280px}
.list-awards .img-holder {flex-basis: 40%; text-align: center;}
.list-awards .caption-holder {margin-top: 20px; color: #333; padding:20px 0 20px 20px; flex-basis: 60%; display: flex; align-items: center; justify-content: space-between;}
.list-awards .caption-holder>* {margin:20px;}
.list-awards .caption-holder .btn {white-space: nowrap; margin-right: 0}
.list-awards .awards-title {font-weight: 600; font-size: 1.3em}
.list-awards .awards-title span {display: block; color: #aaa; font-weight: 400; letter-spacing: 1px; font-size: .85em; font-style: italic; text-transform: uppercase;}
.list-awards .img-holder a:hover img {transform: scale(1.02);}
.filter-cat-results .f-cat { opacity: 0; display: none; }
.filter-cat-results .f-cat.active { opacity: 1; display: flex; -webkit-animation: fadeInA 0.2s linear; animation: fadeInA 0.2s linear;}
.list-with-big-numbers .col-md-4 .av-visible>div{display: flex; flex-wrap: nowrap;}
.list-with-big-numbers .number-holder {font-size: 6em; line-height: 1; font-weight: 300}
.list-with-big-numbers .caption-holder {margin-left: 1em;}
#ProSol .img-holder {height: 430px; display: block; background-position: center; background-size: cover; background-repeat: no-repeat;}
#ProSol .caption-holder {background-color: #fff; padding:2em 3.5em 80px 2em;}
#ProSol .item-footer {position: absolute; bottom: 0; left: 15px; right: 15px;}
#ProSol .item-footer>a {display: flex; justify-content: space-between; align-items: center;}
.list-product-menu {list-style: none; padding:0; margin:0; width: 300px; max-width: 300px;}
.list-product-menu li:not(:first-child) {margin-top: 12px;}
.list-product-menu li a {line-height: 1.4; display:block; color: #333}
.list-product-menu li a:hover, .list-product-menu li a:focus {color: var(--main-color)}
.has-sidebar .av-visible:not(:first-child) .productId {padding-top: 3.2em; border-top: 1px dashed #aaa; margin-top: 3.2em}
.figure {width: 100%;position: relative;overflow: hidden;margin: 40px auto 80px;height: 800px;}
.figure.is-visible:before {-webkit-animation: mask 1s;animation: mask 1s;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.figure.is-visible img {visibility: inherit;transform: translate3d(0, 0, 0);transition: visibility 0s 0.6s, transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0.6s;}
.figure:before {content: "";display: block;position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;background: #f1f1f1;transform: translateZ(0) scaleX(0);}
.figure:after {content: "";display: block;padding-bottom: 70%;}
.figure img {position: absolute;top: 0;left: 0;display: block;width: 100%;z-index: 1;visibility: hidden;transform: translate3d(-10%, 0, 0);}
.float-menu {position: fixed; bottom: 3%; right: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; z-index: 1}
.float-menu a {overflow: hidden; color: white; background-color: var(--main-color); width: 42px ; height: 42px ; text-align: center; line-height: 42px; font-size: 24px; transition: 150ms linear; padding-left: 5px ; padding-right: 5px ; display: none;}
.float-menu a span {font-size: 13px; display: inline-block; vertical-align: top; font-weight: 600;}
.float-menu a+a {margin-top: 2px;}
.float-menu a i {vertical-align: middle; position: relative; top: -2px;}
.video-img-wrapper {position: relative; background-color: rgba(0,0,0,0.7); cursor: pointer;}
.video-img-wrapper:before {content: '';background-image: url(../images/icon-play.png); background-size: 126px; background-position: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:auto; background-repeat: no-repeat; z-index: 1}
.video-img-wrapper img {opacity: .5; transition: 300ms}
.video-img-wrapper:hover img {opacity: .9; }
#indexFocusedIndustries .av-visible .owl-item {animation: fadeInUp 800ms ease both}
#indexFocusedIndustries .av-visible .owl-item:nth-child(1) {animation-delay: 200ms}
#indexFocusedIndustries .av-visible .owl-item:nth-child(2) {animation-delay: 300ms}
#indexFocusedIndustries .av-visible .owl-item:nth-child(3) {animation-delay: 400ms}
#indexFocusedIndustries .av-visible .owl-item:nth-child(4) {animation-delay: 500ms}
#indexFocusedIndustries .av-visible .owl-item:nth-child(5) {animation-delay: 600ms}

#indexTargetService .av-visible .col-md-4:nth-child(1) {animation-delay: 200ms; animation: fadeInLeft 800ms ease both}
#indexTargetService .av-visible .col-md-4:nth-child(2) {animation-delay: 400ms; animation: fadeInUp 800ms ease both}
#indexTargetService .av-visible .col-md-4:nth-child(3) {animation-delay: 600ms; animation: fadeInRight 800ms ease both}

#ourStats .av-visible .flex-item {animation: fadeInUp 800ms ease both}
#ourStats .av-visible .flex-item:nth-child(1) {animation-delay: 200ms}
#ourStats .av-visible .flex-item:nth-child(2) {animation-delay: 300ms}
#ourStats .av-visible .flex-item:nth-child(3) {animation-delay: 400ms}
#ourStats .av-visible .flex-item:nth-child(4) {animation-delay: 500ms}
#ourStats .av-visible .flex-item:nth-child(5) {animation-delay: 600ms}

#indexNewsTestimonial .av-visible .flex-item {animation: fadeInUp 800ms ease both}
#indexNewsTestimonial .av-visible .flex-item:nth-child(1) {animation-delay: 200ms}
#indexNewsTestimonial .av-visible .flex-item:nth-child(2) {animation-delay: 300ms}
#indexNewsTestimonial .av-visible .flex-item:nth-child(3) {animation-delay: 400ms}
#indexNewsTestimonial .av-visible .flex-item:nth-child(4) {animation-delay: 500ms}

#solutionAdvantages .av-visible .flex-item {animation: fadeInUp 800ms ease both}
#solutionAdvantages .av-visible .flex-item:nth-child(1) {animation-delay: 200ms}
#solutionAdvantages .av-visible .flex-item:nth-child(2) {animation-delay: 300ms}
#solutionAdvantages .av-visible .flex-item:nth-child(3) {animation-delay: 400ms}
#solutionAdvantages .av-visible .flex-item:nth-child(4) {animation-delay: 500ms}
#solutionAdvantages .av-visible .flex-item:nth-child(5) {animation-delay: 600ms}
#solutionAdvantages .av-visible .flex-item:nth-child(6) {animation-delay: 700ms}
#solutionAdvantages .av-visible .flex-item:nth-child(7) {animation-delay: 800ms}
#solutionAdvantages .av-visible .flex-item:nth-child(8) {animation-delay: 900ms}
#solutionAdvantages {text-align: center;}
#topimg {text-align: center}

#relatedProduct .av-visible .col-md-4 {animation: fadeInUp 800ms ease both}
#relatedProduct .av-visible .col-md-4:nth-child(1) {animation-delay: 200ms}
#relatedProduct .av-visible .col-md-4:nth-child(2) {animation-delay: 300ms}
#relatedProduct .av-visible .col-md-4:nth-child(3) {animation-delay: 400ms}
#relatedProduct .av-visible .col-md-4:nth-child(4) {animation-delay: 500ms}
#relatedProduct .av-visible .col-md-4:nth-child(5) {animation-delay: 600ms}
#relatedProduct .av-visible .col-md-4:nth-child(6) {animation-delay: 700ms}

#relatedProduct .av-visible .col-md-3 {animation: fadeInUp 800ms ease both}
#relatedProduct .av-visible .col-md-3:nth-child(1) {animation-delay: 200ms}
#relatedProduct .av-visible .col-md-3:nth-child(2) {animation-delay: 300ms}
#relatedProduct .av-visible .col-md-3:nth-child(3) {animation-delay: 400ms}
#relatedProduct .av-visible .col-md-3:nth-child(4) {animation-delay: 500ms}

#ProSol .av-visible .col-md-4 {animation: fadeInUp 800ms ease both}
#ProSol .av-visible .col-md-4:nth-child(1) {animation-delay: 200ms}
#ProSol .av-visible .col-md-4:nth-child(2) {animation-delay: 300ms}
#ProSol .av-visible .col-md-4:nth-child(3) {animation-delay: 400ms}

#secSolutions .av-visible .col-md-4 {animation: fadeInUp 800ms ease both}
#secSolutions .av-visible .col-md-4:nth-child(1) {animation-delay: 200ms}
#secSolutions .av-visible .col-md-4:nth-child(2) {animation-delay: 300ms}
#secSolutions .av-visible .col-md-4:nth-child(3) {animation-delay: 400ms}

#secMgtTeam .av-visible .flex-item {animation: fadeInUp 800ms ease both}
#secMgtTeam .av-visible .flex-item:nth-child(1) {animation-delay: 200ms}
#secMgtTeam .av-visible .flex-item:nth-child(2) {animation-delay: 300ms}
#secMgtTeam .av-visible .flex-item:nth-child(3) {animation-delay: 400ms}
#secMgtTeam .av-visible .flex-item:nth-child(4) {animation-delay: 500ms}

.list-download .item {margin:0 0 25px; border:1px solid #ddd;}
.list-download .item a {display: block; padding:1.2em; border-left:5px solid var(--main-color); position: relative; color: #333;transition: 150ms linear;}
.list-download .item a:after {position: absolute; right: 15px; top: 20px; content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #ddd}
.list-download .item a:hover {background-color: var(--main-color); color: #fff}
.list-download .item a:hover:after {color: #fff}

/******************************************************************************************
+ Plugin
*******************************************************************************************/
.sm { position: relative; z-index: 10; }
.sm, .sm *, .sm *:before, .sm *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

/** Swiper Carousel **/
.swiper-container { width: 100%; height: 640px;}
@media only screen and (max-width: 767px) {
  .swiper-container { width: 100%; height: 250px;}
}
/*.swiper-container .bg:before, .main-hero .bg:before {content:''; position: absolute; top: 0; left: 0; bottom:0; height: 100%; width: 100%; background: rgb(255,255,255);*/
/*background: linear-gradient(221deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.75) 78%);}*/
.swiper-container .bg, .main-hero .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-position: center; background-size: cover}
.main-hero .bg {z-index: 0}
.swiper-container .overlay, .main-hero .overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0}
.swiper-container .overlay:before, .main-hero .overlay:before {background-color: rgba(122,111,96,.7); content: ''; position: absolute; left: -5em; width: 5em; height: 100%;}
.swiper-container .caption, .main-hero .caption {max-width: 900px;height: 18rem; color: #fff; padding-left: 5em; padding:1em 3em 1em 5em; position: relative; z-index: 2; background: rgb(255,255,255);
background: linear-gradient(51deg, rgba(255,255,255,0.6951155462184874) 14%, rgba(255,255,255,0) 74%);}
@media only screen and (max-width: 767px) {.swiper-container .caption, .main-hero .caption {max-width: 900px; margin-top: 120px; color: #fff; padding-left: 5em; padding-left: 1em; padding:1em 1em 1em 3em; position: relative; z-index: 2; background: rgb(255,255,255);
  background: linear-gradient(51deg, rgba(255,255,255,0.6951155462184874) 14%, rgba(255,255,255,0) 74%);}}
.swiper-container .caption h2, .swiper-container .caption p, .main-hero .caption h2 {color: inherit; position: relative; z-index: 1}
.swiper-container .caption h2 {font-size: 4.5em; font-weight: 600; margin-bottom: 0; color: var(--sec-color); font-style: italic;}
@media only screen and (max-width: 767px) {.swiper-container .caption h2 {font-size: 20px; font-weight: 600; margin-bottom: 0; color: var(--sec-color); font-style: italic;}}
.swiper-container .caption h2, .swiper-container .caption p {margin-bottom: 0}
.swiper-container .caption .btn {margin-top: 1.4em; position: relative; z-index: 1}
@media only screen and (max-width: 767px) {.swiper-container .caption .btn {margin-top: 0.4em; position: relative; z-index: 1}}
.swiper-container .swiper-slide {display:flex; justify-content: flex-start; align-items: center;}
.swiper-container .btn-site.outline {background-color: transparent; border-color: #fff; color: #fff}
.swiper-container .btn-site.outline:focus, .swiper-container .btn-site.outline:hover {background-color: #b81f26; border-color: #b81f26}
.swiper-pagination-bullet {margin:0 8px; border:2px solid transparent; background-color: #fff; opacity: 1; border-radius: 0;}
.swiper-pagination-bullet svg {display: none;}
.swiper-pagination-bullet-active {background-color: var(--main-color); border-color: var(--main-color)}
.swiper-container-horizontal>.swiper-pagination-bullets {bottom: 2em}
@media only screen and (max-width: 767px) {.swiper-container-horizontal>.swiper-pagination-bullets {bottom: 2em;display: none}}
.swiper-button-next, .swiper-button-prev {height: 14px; width: 75px; margin: 0;}
.swiper-button-prev {left: -20px}
.swiper-button-next {right: -20px;}
#index-banner .swiper-button-next, #index-banner .swiper-button-prev {color: var(--main-color); font-size: 32px;}
#index-banner .swiper-button-next:after, #index-banner .swiper-button-prev:after {font-size: 32px;}
#index-banner .swiper-navi {position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; bottom: 5em;}
#index-banner .swiper-navi .swiper-button-prev {order:1;}
#index-banner .swiper-navi .swiper-pagination {order:2;}
#index-banner .swiper-navi .swiper-button-next {order:3;}
#index-banner .caption p {font-size: 1.4em; font-weight: 500; color: #333;}
@media only screen and (max-width: 767px) { #index-banner .caption p {font-size: 12px; font-weight: 500; color: #333;}}
.swiper-slide h2 {margin: 0 0 30px; opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); transition: 0.2s ease 0.2s;}
section .swiper-slide h2:after, section.main-hero h2:after {display: none;}
.swiper-slide p, .swiper-slide .timeline-year {line-height: 1.5; opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); transition: 0.2s ease 0.3s;}
.swiper-slide .btn {opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); transition: 0.2s ease 0.5s;}
.swiper-slide .overlay {opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); transition: 0.2s ease 0.3s;}
.swiper-slide-active h2 {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: 0.5s ease 0.3s;}
.swiper-slide-active p {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: 0.5s ease 0.7s;}
.swiper-slide-active .btn {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: 0.5s ease 0.3s;}

/** owl Carousel **/
.owl-carousel .owl-nav {position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%);}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {color: var(--main-color);}
.owl-carousel .owl-nav button>span {font-size: 32px;}
.owl-dots {display: flex; justify-content: center; margin:2em 0;}
.owl-dots button.owl-dot {background-color: var(--sec-color); display: block; width: 6px; height: 6px;}
.owl-dots button.owl-dot+.owl-dot {margin-left: 10px;}
.owl-dots button.active {background-color: var(--main-color)}

/** Affix **/
#sidemenu.affix-top, #sidemenu.affix { position: static; }
#sidemenu.affix-bottom { position: relative; }
@media (min-width: 768px) { #sidemenu.affix { position: fixed; top: 140px; } }

/******************************************************************************************
+ Custom Animations
*******************************************************************************************/
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.delay1 {animation-delay: 150ms;}
.delay2 {animation-delay: 300ms;}
.delay3 {animation-delay: 450ms;}
.delay4 {animation-delay: 600ms;}
.delay5 {animation-delay: 750ms;}
.delay6 {animation-delay: 900ms;}
.delay7 {animation-delay: 1050ms;}
.delay8 {animation-delay: 1200ms;}
.delay9 {animation-delay: 1350ms;}
.delay10 {animation-delay: 1500ms;}
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@-webkit-keyframes fadeInUp { from { opacity: 0; } to { opacity: 1; }}@keyframes fadeInUp { from { opacity: 0; } to { opacity: 1; }}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 2.5rem, 0); transform: translate3d(0, 2.5rem, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 2.5rem, 0); transform: translate3d(0, 2.5rem, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft }
@-webkit-keyframes fadeInLeft { 0% { -webkit-transform:translateX(-100px); transform:translateX(-100px); opacity:0 } to { -webkit-transform:translateX(0); transform:translateX(0); opacity:1 } } @keyframes fadeInLeft { 0% { -webkit-transform:translateX(-100px); transform:translateX(-100px); opacity:0 } to { -webkit-transform:translateX(0); transform:translateX(0); opacity:1 } }
.fadeInRight{ -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
@-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes slideIn { from { -webkit-filter: blur(15px); filter: blur(15px); } to { -webkit-filter: blur(0); filter: blur(0); } } @keyframes slideIn { from { -webkit-filter: blur(15px); filter: blur(15px); } to { -webkit-filter: blur(0); filter: blur(0); } }
@-webkit-keyframes slideOut { from { -webkit-filter: blur(0); filter: blur(0); } to { -webkit-filter: blur(15px); filter: blur(15px); } }@keyframes slideOut { from { -webkit-filter: blur(0); filter: blur(0); } to { -webkit-filter: blur(15px); filter: blur(15px); } }
@keyframes mask { 0% { transform-origin: left; transform: scaleX(0) translateZ(0); animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1); } 0.0001% { transform-origin: left; } 50% { transform-origin: left; transform: scaleX(1) translateZ(0); } 50.0001% { transform-origin: right; } 100% { transform-origin: right; transform: scaleX(0) translateZ(0); } }