/******************************************************************************************
+ Web Fonts Settings
*******************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css");
/******************************************************************************************
+ Typography Settings
*******************************************************************************************/
:root {
--main-color:#a91533;
--main-text:'Poppins', sans-serif;
--sec-color:#06203b;
--vibrant-color:#ffcc02;
}
body {
color: #677881;
position: relative;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {font-weight: 400; font-family: var(--main-text); letter-spacing: -.6px; font-family: 'Poppins', sans-serif;}
p,
ul,
ol,
pre,
table,
blockquote {
margin-top: 0em;
margin-bottom: .6em;
line-height: 1.8;
font-weight: 400;
color: #677881;
text-align: justify;
}
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: 0; transition: 150ms linear; font-weight: 600; font-size: 0.9em; padding:.6em 1em;}
.btn-site {color: #222; position: relative; font-size: 1em; min-width: 120px; background-size: 300% 100%; border:none; transition: all 200ms ease-in-out; background-color: transparent; position: relative; margin-left: 3em; padding-left: 0.5em; margin-top: 1.2em;}
.btn-site:before {content: 'C'; position: absolute; left: -50px; font-size: 5em; color: var(--main-color); font-weight: 100; top: -35px;}
.btn-site:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; position: absolute; left: -26px; color: #78909c; transition: 150ms linear;}
.btn-site:hover, .btn-site:focus {color: var(--main-color); background-color:transparent;border-radius: 4px; border-color: transparent;}
.btn-site:hover:before {opacity: 0;}
.btn-site:hover:after {color: var(--main-color); transform: scale(1.07); left: -7px;}
.btn-site.outline {color: inherit; background-color: transparent; border-color: #fff;}
/** .btn-site:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; margin-left: 10px; line-height: inherit;} **/
.btn-site.main {background-color: var(--main-color)}
.btn-site.secondary {background-color: var(--sec-color)}
.btn-site.trim {padding: .5em 1em; min-width: 90px; font-size: 1em}
.form-control {border-color: var(--sec-color)}
.bg-light {background-color: #f5f5f5 !important;}
.bg-main {background-color: var(--main-color)}
.bg-sec {background-color: var(--sec-color)}
.color-main {color: var(--main-color)}
.color-sec, .txt-main {color: var(--sec-color)}
/******************************************************************************************
+ Header
*******************************************************************************************/
header.navbar {position: relative; left: 0; right: 0; top: 0; z-index:15; padding-top: 20px; padding-bottom: 20px; background-color: #fff; justify-content: space-between; box-shadow: 0 1px 8px rgb(0 0 0 / 10%)}
.home header.navbar{position: absolute; box-shadow: none;}
.navbar-dark .navbar-nav .nav-link {color:#333}
header nav {width: 100%}
header .container {flex-direction: column;}
.navbar-dark .navbar-brand {position: relative; z-index: 2}
.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, .header-body .dropdown-menu a, .header-topbar .dropdown .dropdown-menu a {color: #fff2c8;  padding: 7px 5px 7px 7px; border-bottom: 1px solid rgba(255,255,255,0.3); 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-nav .dropdown-toggle::after {content: 'chevron_right'; font-family: "Material Icons"; border:none; vertical-align: middle; transition: 100ms linear;}
.drawer-nav .show .dropdown-toggle::after {transform: rotate(90deg);}
.drawer-hamburger {display: none}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {background-color: var(--sec-color)}
header.shrink, .home header.shrink.navbar {position: fixed; 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.index-header .navbar-dark .navbar-nav .nav-link {color: #333;}
header.shrink .navbar-brand img {max-width: 90px}
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}
header.shrink .navbar-dark .navbar-nav .nav-link {color: #333}
header.shrink .navbar-dark .navbar-nav .active .nav-link {color: #fff}
.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 img {max-width: 120px; transition: 200ms linear;}
#main-menu li a {color: #333;}
#main-menu>li>a {font-size: 1.15em}
#main-menu>li>a:hover {color: var(--main-color)}
#main-menu li ul li a {position: relative; margin:0 0 5px;}
.sub-arrow {position: absolute; right: 0}
.fa-search {
color: #333;
cursor: pointer;
font-size: 1.25em;
}
#closeIcon {
font-size: 16px;
left: -20px;
position: relative;
color: var(--main-color);
display: none;
text-decoration: none;
top: 0px;
font-weight: 600;
}
#search {
border-radius: 25px;
border-width: 1px;
border-style: solid;
background-color: #fff;
display: none;
font-size: 14px;
margin: 0 0 0 0;
padding: 15px 20px 15px 15px;
width: 25px;
height: 25px;
outline: none;
}
/******************************************************************************************
+ Main
*******************************************************************************************/
main:before {
content: "";
position: fixed;
background-color: rgba(0, 0, 0, 0.1);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transform: translateY(3em);
opacity: 0;
visibility: hidden;
transition: 300ms;
}
main.menu-toggled:before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
section h1 {
margin-bottom: 0.4em;
font-size: 2rem;
line-height: 2.6rem;
color: #333;
font-weight: 400;
}
section h2, .modal h2 {
color: var(--main-color);
margin-bottom: .7em;
font-size: 3.8em;
font-weight: 300;
text-transform: uppercase;
position: relative;
}
section h2.has-shadow {display: inline-block; left:2%;}
section h2.has-shadow:after {content: ''; background-color: #eeefef; width: 110%; height: 30px; position: absolute; bottom: 4px; left: -5%; z-index: -1;}
section h3, .modal h3 {
color: var(--sec-color);
font-weight: 500;
font-size: 1.5em;
margin-bottom: .7em;
line-height: 1.32
}
section h4, .modal h4 {
color: #333;
font-weight: 600;
font-size: 1.2em;
margin-bottom: .6em;
}
section h4:not(:first-child) {margin-top: 1.6em}
section h5 {color: #333; font-weight: 500; margin-top: 1.6em; font-size: 1.15em}
section img {
max-width: 100%;
}
section {
padding-top: 3em;
padding-bottom: 3em;
position: relative;
}
section, figure {background-repeat: no-repeat; background-size: cover;}
.has-bg {background-size: cover; background-position: center; background-repeat: no-repeat;}
.has-bg.repeat-bg {background-repeat: repeat; background-size: auto}
section.section-dark h2, section.section-dark h3, section.section-dark *, .section-dark * {color: #fff}
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}
.main-color {color: var(--main-color)}
.index-hero {padding-top: 7.2em; padding-bottom: 0; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover;}
.index-hero .container-fluid {position: relative; padding-left: 0; padding-right: 0}
.index-hero .img-holder {max-width: 80vw; display: flex;justify-content: flex-end; margin-left: 20vw; margin-top: 2em}
.index-hero .caption-holder {padding-left: 15px; padding-right: 15px; max-width: 900px; position: absolute; z-index: 1; top:35%; left: 0; right: 0; margin:auto; text-align: center;}
.index-hero .caption-holder h1, .index-hero .caption-holder .inner>p {font-size:3.7em; color: #fff; line-height: 180px}
.index-hero .caption-holder p {color: #fff; font-size: 1.4em}
.index-hero .caption-holder p.author {font-size: 1.55em;}
.index-hero .inner-wrapper {position: relative; overflow: hidden; height: 160px;}
.index-hero .inner { height:160px; margin-bottom: 20px; -webkit-transition:-webkit-transform 0.3s ease; -webkit-backface-visibility:hidden; }
.index-hero .inner p { margin:0; padding:0; height:160px;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /**background-image:-webkit-linear-gradient(#FA2300,#E1037C);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; **/ }
.index-hero .cta-wrapper {margin-top: 1em; border:1px solid #333; padding:0.7em; border-radius: 30px; display: flex; justify-content: space-between; align-items: center;}
h4.modal-title {margin-bottom: 0; font-weight: 500;}
.main-hero {min-height: 480px; background-position: center; background-size: cover; background-repeat: no-repeat; padding-top: 125px; padding-bottom: 0}
.main-hero .flex-item {width: 50%}
.main-hero {display: flex; align-items: center; justify-content: center;}
.main-hero .caption-holder {position: relative; z-index: 1; text-align: center; max-width: 750px;}
.main-hero .caption-holder h1 {color: #fff; font-size: 3.6em; font-weight: 300}
.main-hero .caption-holder p.author {font-size: 1.2em;}
.main-hero:after {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background-color: rgba(0,0,0,.05)}
.modal .close:focus {outline: none;}
footer {background-color: #f4f4f4; padding-top: 1em; padding-bottom: 1em; z-index: 1; position: relative; border-top: 1px solid rgba(0,0,0,0.1)}
footer a, footer * {color: var(--sec-color)}
footer h4, footer h4 a {color: var(--sec-color); font-size: 1.2em; text-transform: uppercase;}
footer h4 a {font-size: 1em; }
footer .sitemap {list-style: none; margin:0; padding:0;}
footer .sitemap li:not(:first-child) {margin-left: 1.6em;}
footer .footer-body>.d-flex {flex-wrap: nowrap; justify-content: space-between;}
footer .footer-body .sitemap {font-size: 1.2em;}
footer .footer-foot .sitemap:last-child li+li {margin-left: 10px;}
footer .footer-body, footer .footer-foot {margin-top: 2.4em;}
footer .footer-foot {padding-top: 3.2em; border-top: 1px solid rgba(255,255,255,0.3)}
footer .footer-foot ul.sitemap li + li:before{content: ''; width: 1px; height: 11px; background-color: #fff; display: inline-block; margin-right: 10px;}
footer .list-social {list-style: none; padding: 0}
footer .list-social li+li {margin-left: 1.2em}
footer .list-social a {font-size: 1.6em}
footer .list-social i {color: var(--sec-color)}
footer a:hover, footer a:hover i {color: var(--main-color);}
section .subsection:first-child {padding-top: 6em}
section .subsection {padding-top: 4em; padding-bottom: 4em}
section address {font-weight: 400;}
footer .footer-logo img {max-width: 120px;}
.waves {position:absolute;width: 100%;height:150px;margin-bottom:-7px; /*Fix for safari gap*/min-height:100px;max-height:150px;bottom: 0; left: 0; right: 0; z-index: 1}
.parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
#indexServices .item {width: 33.33%;}
#indexServices .item a {display: block; padding:2em; position: relative;min-height: 400px; display: flex;justify-content: center; align-items: center;}
#indexServices .item .caption {border:1px solid rgba(255,255,255,0); overflow: hidden; text-align: center; padding:4em 2em; min-height: 380px; width: 100%; display: flex; justify-content: center; transition: 100ms linear;}
#indexServices .item .caption-inner {display: flex; justify-content: center; align-items: center; flex-direction: column;}
#indexServices .item h3 {margin:0; color: #fff}
#indexServices .item:hover {background: rgb(24,30,166);
background: linear-gradient(90deg, rgba(24,30,166,0.7035189075630253) 21%, rgba(36,214,224,0.700717787114846) 92%);}
#indexServices .item:hover .caption {border-color: rgba(255,255,255,0.8)}
#indexServices .item p {color: #fff}
#indexServices .item p, #indexServices .item .btn {visibility: hidden; opacity: 0; position: absolute; transform: scale(0) translateY(3em); margin:0; max-height: 0; transition: max-height 400ms linear;}
#indexServices .item:hover p, #indexServices .item:hover .btn {visibility: visible; opacity: 1; position: relative; margin-top: 1em; transform: scale(1) translateY(0); max-height: 350px;}
#indexServices .item+.item {border-left:1px solid #ddd;}
#indexServices .bg-img {position: absolute; width: 100%; height: 100%; z-index: 0; top: 0; opacity: 0.9;}
#indexServices .bg-img:before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 4}
#indexServices .bg-img .defaultImg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-position: center; background-size: cover;}
#indexServices .bg-img .cat-img {z-index: 1; background-position: center; background-size: cover; width: 100%; height: 100%; transition: 500ms linear;}
#indexServices .bg-img.newImg .placeit {position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%}
#indexServices .list-services {position: relative; z-index: 1}
.section-header.has-btn {display: flex; justify-content: space-between; flex-wrap: wrap;}
.section-header.has-btn .btn{align-self: flex-start;}
.list-news .item>a{display: flex; flex-wrap: nowrap; align-items: center; padding:1.5em; position: relative;}
.list-news .item>a:after {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;background: #fff;z-index: 0; transition: all 300ms linear;}
.list-news .item>a>* {position: relative;z-index: 1}
.list-news .item .post-date {font-size: 2.1em; background-color: var(--main-color); color: #fff; text-align: center; min-width: 100px; line-height: 1.2; padding:.6em .8em;}
.list-news .item .post-date span {display: block; font-size: .6em}
.list-news .item+.item {margin-top: 1em;}
.list-news .item .post-title {margin:0; padding-left: 1.3em; color: #333; font-weight: 400; line-height: 1.6; padding-right: 1em}
.list-news .item:hover a:after {animation: bgcolor-change 3000ms linear infinite alternate both;}
.list-news .item:hover>a .post-date {background-color: #fff; color: #333}
.list-news .item:hover>a .post-title {color: #fff}
#indexMap .box{background-color: #fff; padding:4em;max-width: 850px; margin:auto;}
#indexMap {background-size: auto; background-position: top center}
#indexMap .box h2 {color: var(--sec-color); font-size: 3.5em; font-weight: 600}
.list-events .item {position: relative;}
.list-events a {display: block;}
.list-events .img-holder {position: relative; z-index: 0; height: 430px; width: 100%;}
.list-events .caption-holder { position: absolute; bottom: 0; left:0; width: 100%; z-index: 1; padding:2em 2.5em; background: rgba(23,30,166,.84); color: #fff; transition: 2000ms linear;}
.list-events .caption-holder>* {color: inherit;}
.list-events .caption-holder h3 {margin:.4em 0 0 0;}
.list-events .caption-holder p {opacity: 0; max-height: 0; visibility: hidden;margin-bottom: 0; transition: opacity 300ms linear;}
.list-events .item:hover .caption-holder p {opacity: 1; max-height: 200px; visibility: visible; margin-top: .8em}
.list-events .item:hover .caption-holder {background: rgb(24,30,166); background: linear-gradient(151deg, rgba(24,30,166,0.88) 0%, rgba(36,214,224,0.88) 100%)}
.counter-stats .counter-item {font-size: 1.1em;}
.counter-stats .counter-item span {font-size: 2em; color: var(--sec-color); font-weight: 600;}
.counter-stats .counter-item span.counter {color: var(--main-color); margin-left: 10px; font-size:3.3em}
.counter-stats .counter-item p {line-height: 1.4}
.circle_percent {font-size:200px; width:1em; height:1em; position: relative; background: #eee; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_inner {position: absolute; left: 0; top: 0; width: 1em; height: 1em; clip:rect(0 1em 1em .5em);}
.round_per {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: var(--sec-color); clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:1.05s;}
.percent_more .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: var(--sec-color); content:'';}
.circle_inbox {position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #fff; z-index:3; border-radius: 50%;}
.percent_text {position: absolute; font-size: 52px; left: 50%; top: 60%; transform: translate(-50%,-50%); z-index: 3; font-weight: 600; color: var(--main-color)}
.circle_percent p {position: absolute; top: 42px ; left: 0; right: 0; margin: auto; font-size: 24px; z-index: 9; color: #000;font-weight: 600; text-align: center;color: var(--main-color)}
#secCharimanDesk .container{margin-top: -350px; z-index: 1; position: relative;}
#aboutIntro .container {padding-bottom: 300px; z-index: 0; position: relative;}
.list-style-1 {margin-left: -.8em; margin-right: .8em; display: flex;}
.list-style-1 .item{background-color: #fff; padding-left: 0; padding-right: 0; flex-basis: 33.3%; margin-left: .8em; margin-right: .8em;box-shadow: 0 1px 28px 8px rgba(0,0,0,0.04)}
.list-style-1 .item h3 {color: #333;}
.list-style-1 .item .caption-holder, .list-style-1 .item .img-holder {padding:1em;}
#secMilestones #sync2 {max-width: 70%; margin:auto;}
#secMilestones #sync2 .item {padding:0 0 20px;position: relative; cursor: pointer; text-align: center;}
#secMilestones #sync2 .item span {text-align: center;}
#secMilestones #sync2 .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(--main-color)}
#secMilestones #sync2 .current .item:before, #secMilestones #sync2 .owl-item:hover .item:before {background-color: var(--sec-color); transform: scale(1.15);}
#secMilestones #sync2 .current .item span {color: var(--sec-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 img{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{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 .owl-carousel .owl-nav {top: 30%;}
#sidemenu.affix-top, #sidemenu.affix { position: static; }
#sidemenu.affix-bottom { position: relative; }
.has-sidebar .page-layout {position: relative; display: flex; flex-wrap: nowrap;}
.has-sidebar .sidebar {position: relative; width: 360px; min-width: 360px; padding-right: 4em;}
#sidebarMenu .card-header {background-color: #070c77;color: #fff}
#sidebarMenu .card-header a {color: inherit; position: relative; display: block;}
#sidebarMenu .card-header a:after {content: '+';position: absolute; right: -7px; top: 0px;}
#sidebarMenu .card-body {background-color: #f5f5f5; padding:0;}
#sidebarMenu .card-body ul {list-style: none; padding: 0; margin: 0;}
#sidebarMenu .card-body li+li {border-top: 1px solid rgba(0,0,0,0.1)}
#sidebarMenu .card-body ul>li>a {display: block; padding:.8em 3em .8em .8em; line-height: 1.3; color: #333; position: relative;}
#sidebarMenu .card-body ul>li:not(.active)>a:hover {color: var(--main-color); background-color: #e6e6e6 }
#sidebarMenu .card-body ul>.active>a {font-weight: 600;}
#sidebarMenu .card-body ul>.active>a:after {content: 'arrow_forward'; position: absolute; top: 13px; right: 13px;font-family:"Material Icons";}
#sidebarMenu {width: 300px;}
.feature-post {display: flex;  padding:4.5em 3em; align-items: center; animation: bgcolor-change 3000ms linear infinite alternate both;}
.feature-post .post-img { flex-basis: 50%; padding-right: 2%;  }
.feature-post .post-thumb {flex-basis: 50%; padding-left: 2%; display: flex; flex-direction: column;}
.feature-post .post-thumb>div+div{margin-top: .8em;}
.feature-post .post-list-category a, .feature-post .post-title a, .feature-post .post-excerpt p, .post-list-category a, .list-posts h3 a {color: #fff;}
.feature-post .post-list-category, .list-posts .post-list-category {display: flex;}
.feature-post .post-list-category a, .list-posts .post-list-category a {position: relative;}
.feature-post .post-list-category a:not(:last-child), .post-list-category a:not(:last-child) {margin-right: 20px}
.feature-post .post-list-category a:not(:last-child):after, .post-list-category a:not(:last-child):after {content: ''; width: 1px ; height: 10px ; background-color: #fff; display: block; position: absolute; top: 6px ; right: -10px ;}
.list-posts {display: flex; flex-wrap: wrap; margin:0 -.6em}
.list-posts .item {flex-basis: 33.33%; padding-left: .6em; padding-right: .6em; margin:.6em 0;}
.list-posts .item .item-holder {position: relative;}
.list-posts .caption-holder {position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(23,30,166,0.8); z-index: 1; padding:1.3em 2em;}
.list-posts .caption-holder h3 {margin:.3em 0 0 0; font-size: 1.35em;}
.list-posts .img-holder {height: 320px; width: 100%; background-size: cover; background-position: center; position: relative; z-index: 0}
.author-holder {display: flex; align-items: center}
.author-holder .img-holder {overflow: hidden; width: 64px; height: 64px; border-radius: 50%;}
.author-holder .caption-holder {margin-left: .8em;}
#mainBlogSingle .main-content h2, #mainBlogSingle .main-content h3, #mainBlogSingle .main-content h4 {color: #333;}
#mainBlogSingle .main-content h2 {font-size: 1.8em;}
#mainBlogSingle .main-content h3 {font-size: 1.4em;}
#mainBlogSingle .main-content h4 {font-size: 1.2em;}
#indexIntro .row:first-child {min-height: 650px; }
#indexIntro .inner-box, #indexNews .inner-box {padding:4em 15%;}
.inner-box-padding {padding:4em 15%;}
.column-four .item {flex-basis: 25%;}
#indexApproach .list-approach a {display: block; position: relative;}
#indexApproach .list-approach .img-holder {border-radius: 3px; overflow: hidden;position: relative; transition: all 300ms ease-in; box-shadow: 1px 1px 15px rgba(0,0,0,0)}
#indexApproach .list-approach .img-holder:before {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.15); position: absolute; z-index: 0; top: 0; left: 0; transition: all 200ms ease-in;}
#indexApproach .list-approach .caption-holder {position: absolute; bottom: 0; display: flex;justify-content: center; align-items: center; width: 100%; flex-direction: column; color: #fff; transition: all 150ms linear; transform: translateY(1.5em); z-index: 3}
#indexApproach .list-approach .caption-holder .title {font-size: 1.6em;}
#indexApproach .list-approach .caption-holder .btn {opacity: 0; }
#indexApproach .list-approach a:hover .img-holder {transform: scale(1.1); box-shadow: 1px 1px 15px rgba(0,0,0,0.4)}
#indexApproach .list-approach a:hover .img-holder:before {background-color: rgba(0,0,0,0.3); z-index: 2}
#indexApproach .list-approach a:hover .caption-holder {transform: translateY(-1em);}
#indexApproach .list-approach a:hover .caption-holder .btn {opacity: 1; color: #fff; transition-delay: 100ms;}
#indexApproach .list-approach a:hover .caption-holder .btn:after {color: #fff;}
#indexNews .list-index-news .item:not(:first-child){margin-top: 1.1em; border-top: 1px solid #ddd; padding-top: 1.5em}
#indexNews .list-index-news h3 a{color: var(--sec-color)}
#indexNews .list-index-news h3 a:hover, #indexNews .list-index-news h3 a:focus{color: var(--main-color)}
form input.form-control, form textarea.form-control {background-color: transparent; border-radius: 0; border:none; border-bottom: 1px solid var(--sec-color)}
form input[type="submit"] {margin: 0; background-color: var(--main-color); color: #fff; border-radius: 3px;}
.subsec-who-we-are .row, .subsec-careers .row, .subsec-contact-us .row {min-height: 900px;}
.list-team-members {display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;}
.list-team-members .item {flex-basis: 25%; padding:0 15px; margin-bottom: 2.5em;}
.list-team-members .caption-holder {min-height: 95px; margin-top: 1em;}
.list-team-members .member-name, #modalTeam .modal-member-title {font-size: 1.15em; font-weight: 600; color: #333;}
#modalTeam .modal-inner img {max-width: 100%;}
#modalTeam .modal-member-detail {min-height: 200px;}
.modal .btn-close {position: absolute; top: 0; right: 15px;}
p.lead {font-size: 1.65em; color: #333; line-height: 1.6}
section ul {padding-left: 20px;}
.list-career-positon .item+.item {border-top: 1px solid rgba(0,0,0,0.3); margin-top: 1.6em; padding-top: 1.6em;}
.list-career-positon .item a {display: flex; justify-content: space-between; align-items: center; padding:1em 0;}
.list-career-positon .item .caption-holder {flex-grow: 1;padding-right: 2em; font-size: 1.2em; color: var(--sec-color)}
.list-career-positon .item .btn-site:before {transition: 50ms linear;}
.list-career-positon .item:hover .caption-holder {color: var(--main-color)}
.list-career-positon .item:hover .btn-site {color: var(--main-color)}
.list-career-positon .item:hover .btn-site:after {color: var(--main-color); left: -10px;}
.list-career-positon .item:hover .btn-site:before {transform: translateX(-10px); opacity: 0}
.list-career-positon .item .btn-site {margin-top: 0;}
.list-team-members .item {animation: fadeInUp 300ms ease both}
.list-team-members .item:nth-child(2) {animation-delay: 200ms}
.list-team-members .item:nth-child(3) {animation-delay: 350ms}
.list-team-members .item:nth-child(4) {animation-delay: 500ms}
.list-team-members .item:nth-child(5) {animation-delay: 600ms}
.list-team-members .item:nth-child(6) {animation-delay: 750ms}
.list-team-members .item:nth-child(7) {animation-delay: 900ms}
.list-team-members .item:nth-child(8) {animation-delay: 1050ms}
.list-team-members .item:nth-child(9) {animation-delay: 1200ms}
/******************************************************************************************
+ Plugin - Smartmenus
*******************************************************************************************/
@media (max-width: 1024px) {
.drawer--left .drawer-nav {background-color: var(--main-color); padding: 1.5em; }
#main-menu>li>a {margin:1.2em 0 .6em;}
}
@media (min-width: 1025px) {
#main-menu>li.active>a {color: #333}
#main-menu>li.active>a:after {position: absolute; bottom: -5px; left: 0; right: 0; margin:auto; background-color: var(--main-color); width: 70%; height: 2px; content: '';}
.shrink #main-menu>li.active>a:after {bottom: -16px; height: 4px;}
#main-nav {position: static; width: auto; left: 0; display: flex; height: auto; background-color: transparent; align-items: center; overflow: visible;}
#main-nav #main-menu {display: flex;}
#main-menu li ul {position: absolute; background-color: #fff; padding:0; min-width: 230px !important;}
#main-menu>li+li>a {margin-left: 1em;}
#main-menu .sub-arrow {display: none;}
#main-menu li ul li a:hover {background-color: var(--main-color); color: #fff}
#main-menu li ul li a {padding:0.35em 1em;}
}
#main-menu {
clear: both;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@media (min-width: 768px) {
#main-menu {
float: right;
clear: none;
}
}
#main-menu,
#main-menu > .has-mega-menu {
position: static !important;
}
#main-menu .mega-menu {
margin-left: auto !important;
margin-right: auto !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100vw !important;
top: 80px !important;
background-color: #f0f0f0; padding:0;
}
.shrink #main-menu .mega-menu {top: 56px !important;}
#main-menu > .has-mega-menu .scroll-up,
#main-menu > .has-mega-menu .scroll-down {
margin-left: 0 !important;
}
#main-menu .mega-menu > li {
overflow: auto;
}
#main-menu .mega-menu {
color: #353451;
}
#main-menu .mega-menu ul {
position: static;
display: block;
margin: 0.83em 0;
border: 0;
padding: 0;
width: auto;
background: transparent;
box-shadow: none;
list-style: none;
}
/* Mobile menu toggle button */
.main-menu-btn {
float: right;
margin: 5px 10px;
position: relative;
display: inline-block;
width: 29px;
height: 29px;
text-indent: 29px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
position: absolute;
top: 50%;
left: 2px;
height: 2px;
width: 24px;
background: #555;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.main-menu-btn-icon:before {
content: '';
top: -7px;
left: 0;
}
.main-menu-btn-icon:after {
content: '';
top: 7px;
left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
height: 0;
background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-nav #main-menu, #main-menu-state:not(:checked) ~ #main-nav .site-tools {
display: none;
}
#main-menu-state:checked ~ #main-nav #main-menu, #main-menu-state:checked ~ #main-nav .site-tools {
display: block;
}
@media (min-width: 991px) {
.main-menu-btn {
position: absolute;
top: -99999px;
}
#main-menu-state:not(:checked) ~ #main-nav #main-menu, #main-menu-state:not(:checked) ~ #main-nav .site-tools {
display: flex;
}
}
.mega-menu-inner {display: flex;align-items: center;}
.mega-menu-inner .section-intro {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; align-items: flex-start; color: #fff; padding:6em 4em;align-self: stretch; width: 38%; background-image: url(../images/bg-section-intro.png); background-position: right top; background-size: cover; background-repeat: no-repeat;}
.mega-menu-inner .section-intro>* {color: inherit;}
.mega-menu-inner .section-links {display: flex; justify-content: flex-start; padding:6em 4em; background-color: #f0f0f0; width: 62%;}
.mega-menu-inner .section-links .item-column {flex-basis: 320px;}
.mega-menu-inner .section-links .item-column+.item-column {margin-left: 2em;}
.mega-menu-inner .section-links .item-column h3 {font-weight: 600; text-transform: uppercase; text-decoration: none;}
#main-menu .section-links a {display:inline; background-image: linear-gradient(to bottom, transparent 20%, #24d6e0 21%); background-position: 0 10px; background-repeat: no-repeat; background-size: 0% 6px;transition: background-size 0.5s ease-in-out 0.2s;}
#main-menu .section-links li+li {margin-top: .3em;}
#main-menu .section-links li a:hover {background-size: 100% 7px; transition-delay: 0s;}
#main-menu .section-links h3 {font-size: 1.15em;}
@media (max-width:911px) {
.mega-menu-inner {flex-direction: column}
.mega-menu-inner>.section-intro {display: none;}
.mega-menu-inner>.section-links {width: 100%; padding:1em 0; flex-direction: column; background-color: #fff; }
.mega-menu-inner .section-links .item-column {flex-basis: 100%}
.mega-menu-inner .section-links .item-column+.item-column {margin-left: 0}
}
/******************************************************************************************
+ 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-container { width: 100%; height: 720px;}
/**
.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}
.swiper-container .bg:before, .main-hero .bg:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0;left: 0; background: rgb(255,255,255);
background: linear-gradient(217deg, rgba(255,255,255,0.0404035364145658) 2%, rgba(255,255,255,0.8309917717086834) 100%);}
.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 .caption, .main-hero .caption {max-width: 650px; margin-bottom: 1.5em; color: #fff; padding:3em 3.2em; position: relative; z-index: 2; margin-left: 0;opacity: 1; -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0);}
.swiper-container .caption h2, .swiper-container .caption p, .main-hero .caption h2 {color: inherit; position: relative; z-index: 1}
.swiper-container .caption h2, .main-hero .caption h2 {font-size: 3.2em; font-weight: 300; margin-bottom: 0; color: var(--main-color)}
.swiper-container .caption h2, .swiper-container .caption p, .main-hero h2, .main-hero p {margin-bottom: 0}
.swiper-container .caption p {margin-top: .8em; color: var(--sec-color); font-size: 1.1em;}
.swiper-container .caption .btn {margin-top: 1.6em; position: relative; z-index: 1}
.swiper-container .swiper-slide {display:flex; justify-content: flex-start; align-items: end;}
.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; border:none; background-color: #fff; opacity: 1; border-radius: 50%; width: 8px; height: 8px; position: relative;}
.swiper-pagination-bullet svg {display: none;}
.swiper-pagination-bullet:not(:first-child) {margin-left: 50px !important}
.swiper-pagination-bullet:not(:first-child):before {content: ''; width: 60px; background-color: #fff; height: 1px; position: absolute; left: -55px; top: 50%;}
.swiper-pagination-bullet-active {background-color: #fff; border-color: #fff;}
.swiper-pagination-bullet-active:after {content: ''; width: 18px; height: 18px; transition:100ms linear; border-radius: 50%; position: absolute; top: -5px; left: -5px; background-color: rgba(255,255,255,0.6); z-index: -1;}
.swiper-container-horizontal>.swiper-pagination-bullets {bottom: 8em; text-align: left; left: 5em;}
.swiper-button-next, .swiper-button-prev {height: 14px; width: 75px; margin: 0; color: var(--main-color); transform: scale(0.9); opacity: .7; transition: 100ms ease-in}
.swiper-button-prev {left: -10px}
.swiper-button-next {right: -10px;}
.swiper-button-next:hover, .swiper-button-prev:hover {opacity: 1; transform: scale(1);}
#index-banner {height: 720px;}
#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.1em; font-weight: 400; color: var(--sec-color);}
.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; transition-delay: 600ms;}
.swiper-slide-active .caption {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; transition-delay: 800ms}
.swiper-slide-active .btn {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: 0.5s ease 0.7s; transition-delay: 800ms}
.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:3em 0 0;}
.owl-dots button.owl-dot {background-color: var(--main-color); display: block; width: 8px; height: 8px; border-radius: 50%; position: relative; outline: none; box-shadow: none;}
.owl-dots button.owl-dot:not(:first-child) {margin-left: 50px;}
.owl-dots button.owl-dot+button.owl-dot:before {content: ''; width: 60px ; background-color: var(--main-color); height: 1px ; position: absolute; left: -55px ; top: 50%;}
.owl-dots .active {background-color: var(--main-color); }
.owl-dots .active:after {content: ''; width: 18px ; height: 18px ; transition: 100ms linear; border-radius: 50%; position: absolute; top: -5px ; left: -5px ; background-color: rgba(16,23,163,0.3); z-index: -1;}
/******************************************************************************************
+ 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; }
.aniviewImg {width: 100%;height: auto;position: relative;z-index: 1;opacity: 1;transition-delay: 0s;overflow: hidden;}
.aniviewImg::before {content: "";position: absolute;z-index: 2;display: block;width: 100%;height: 100%;top: 0;left: 0;transition-delay: 0s;transition: transform 0.2s ease 0.2s;background-color: rgba(255, 255, 255, 1);}
.aniviewImg::after { content: ""; position: absolute; top: 0; left: 0; z-index: 3; display: block; width: 250%; height: 100%; transform: translateX(-100%); transition: transform 0.9s ease-out 0.2s; background-color: rgba(255, 255, 255, 1);}
.aniviewImg > img {width: 100%;}
.aniviewImg.animated::before {transform: translateX(100%);}
.aniviewImg.animated::after {transform: translateX(100%);}
.animMenuRevealImg {-webkit-animation-name: animMenuRevealImg; animation-name: animMenuRevealImg;}
.animMenuRevealImgUp {-webkit-animation-name: animMenuRevealImgUp; animation-name: animMenuRevealImgUp;}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft }
.bgcolor-change { -webkit-animation: bgcolor-change 2s linear infinite alternate both; animation: bgcolor-change 2s linear infinite alternate both; }
.fadeInRight{ -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
@keyframes dash { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
@-webkit-keyframes fadeInA { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInA { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@-webkit-keyframes fadeInUp { from { opacity: 0; } to { opacity: 1; }}
@keyframes fadeInUp { from { opacity: 0; } to { opacity: 1; }}
@-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);}}
@-webkit-keyframes fadeInLeft { 0% { -webkit-transform:translateX(-2.5rem); transform:translateX(-2.5rem); opacity:0 } to { -webkit-transform:translateX(0); transform:translateX(0); opacity:1 } }
@keyframes fadeInLeft { 0% { -webkit-transform:translateX(-2.5rem); transform:translateX(-2.5rem); opacity:0 } to { -webkit-transform:translateX(0); transform:translateX(0); opacity:1 } }
@-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(2.5rem, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(2.5rem, 0, 0); transform: translate3d(2.5rem, 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 move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }
@-webkit-keyframes bake-pie{from{-webkit-transform:rotate(0deg) translate3d(0,0,0);transform:rotate(0deg) translate3d(0,0,0)}}
@keyframes bake-pie{from{-webkit-transform:rotate(0deg) translate3d(0,0,0);transform:rotate(0deg) translate3d(0,0,0)}}
@-webkit-keyframes bgcolor-change { 0% { background-color: rgba(23,30,166,1); } 100% { background-color: rgba(34,138,218,1) } }
@keyframes bgcolor-change { 0% { background-color: rgba(23,30,166,1); } 100% { background-color: rgba(34,138,218,1) } }
@-webkit-keyframes animMenuReveal { 0% { width: 0vw; } 100% { width: 100vw; } }
@keyframes animMenuReveal { 0% { width: 0vw; } 100% { width: 100vw; } }
@-webkit-keyframes animMenuRevealLinks { 0% { width: 100%; } 100% { width: 0%; } }
@keyframes animMenuRevealLinks { 0% { width: 100%; } 100% { width: 0%; } }
@-webkit-keyframes animMenuClose { 0% { width: 100vw; padding: 8em 3em 3em; } 100% { width: 0vw; padding: 8em 0 0; } }
@keyframes animMenuClose { 0% { width: 100vw; padding: 8em 3em 3em; } 100% { width: 0vw; padding: 8em 0 0; } }
@-webkit-keyframes animMenuCloseLinks { 0% { width: 0%; } 100% { width: 110%; } }
@keyframes animMenuCloseLinks { 0% { width: 0%; } 100% { width: 110%; } }
@-webkit-keyframes animMenuRevealImg { 0% {width: 0; } 100% { width: 720px; } }
@keyframes animMenuRevealImg { 0% { width: 0; } 100% { width: 720px; } }
@-webkit-keyframes animMenuRevealImgLeft { 0% {height: 0; } 100% { height: 25px; } }
@keyframes animMenuRevealImgLeft { 0% { height: 0; } 100% { height: 25px; } }
@-webkit-keyframes animMenuCloseImg { 0% { width: 720px; } 100% { width: 0; } }
@keyframes animMenuCloseImg { 0% { width: 720px; } 100% { width: 0; } }
@-webkit-keyframes animScrollingContactTextLeft { 0% { transform: translate(-20%, -100%); } 100% { transform: translate(-40%, -100%); } }
@keyframes animScrollingContactTextLeft { 0% { transform: translate(-20%, -100%); } 100% { transform: translate(-40%, -100%); } }




.swiper { width: 100%; height: 720px;}
/**
.swiper .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 .bg, .main-hero .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-position: center; background-size: cover}
.swiper .bg:before, .main-hero .bg:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0;left: 0; background: rgb(255,255,255);
    background: linear-gradient(217deg, rgba(255,255,255,0.0404035364145658) 2%, rgba(255,255,255,0.8309917717086834) 100%);}
.main-hero .bg {z-index: 0}
.swiper .overlay, .main-hero .overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0}
.swiper .caption, .main-hero .caption {max-width: 650px; margin-bottom: 1.5em; color: #fff; padding:3em 3.2em; position: relative; z-index: 2; margin-left: 0;opacity: 1; -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0);}
.swiper .caption h2, .swiper .caption p, .main-hero .caption h2 {color: inherit; position: relative; z-index: 1}
.swiper .caption h2, .main-hero .caption h2 {font-size: 3.2em; font-weight: 300; margin-bottom: 0; color: var(--main-color)}
.swiper .caption h2, .swiper .caption p, .main-hero h2, .main-hero p {margin-bottom: 0}
.swiper .caption p {margin-top: .8em; color: var(--sec-color); font-size: 1.1em;}
.swiper .caption .btn {margin-top: 1.6em; position: relative; z-index: 1}
.swiper .swiper-slide {display:flex; justify-content: flex-start; align-items: end;}
.swiper .btn-site.outline {background-color: transparent; border-color: #fff; color: #fff}
.swiper .btn-site.outline:focus, .swiper .btn-site.outline:hover {background-color: #b81f26; border-color: #b81f26}
.swiper-pagination-bullet {margin:0; border:none; background-color: #fff; opacity: 1; border-radius: 50%; width: 8px; height: 8px; position: relative;}
.swiper-pagination-bullet svg {display: none;}
.swiper-pagination-bullet:not(:first-child) {margin-left: 50px !important}
.swiper-pagination-bullet:not(:first-child):before {content: ''; width: 60px; background-color: #fff; height: 1px; position: absolute; left: -55px; top: 50%;}
.swiper-pagination-bullet-active {background-color: #fff; border-color: #fff;}
.swiper-pagination-bullet-active:after {content: ''; width: 18px; height: 18px; transition:100ms linear; border-radius: 50%; position: absolute; top: -5px; left: -5px; background-color: rgba(255,255,255,0.6); z-index: -1;}
.swiper-horizontal>.swiper-pagination-bullets {bottom: 8em; text-align: left; left: 5em;}

.swiper-button-next, .swiper-button-prev {

    height: 48px;
    width: 75px;
    margin: 0;
    color: var(--main-color);
    transform: scale(0.9);
    opacity: .7;
    transition: 100ms ease-in;
}

.swiper-button-prev { left: -10px; }
.swiper-button-next { right: -10px; }

.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1;
    transform: scale(1);
}


.swiper-button-next svg,
.swiper-button-prev svg {
    height: 100%;
    width: auto;
}