/* You can add global styles to this file, and also import other style files */
html, body {
   font-family: proximaNovaLt;
   color: var(--default-color);
   position: relative;
   width: 100%;
   background-color: #ffffff;
   -webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px #E9E9E9;
}
::-webkit-scrollbar-thumb {
   background-color: #d4d4d4;
   outline: 1px solid #d4d4d4;
}
.pageTabs::-webkit-scrollbar {
   width: 0;
   height: 0;
}
/*....... Fonts ......*/
.proximaNovaSb {
   font-family: proximaNovaSb;
}
.proximaNovaLt {
   font-family: proximaNovaLt;
}
.sapientsansbold {
   font-family: sapientsansbold;
}
.sapientsansblack {
   font-family: sapientsansblack;
}
.sapientsansmedium {
   font-family: sapientsansmedium;
}
.sapientsansregular {
   font-family: sapientsansregular;
}
.padding-b-70{
   padding-bottom: 70px;
}
.appWrapper {
   position: relative;
   padding-top: 75px;
}
.description {
   line-height: 28px;
}
.contentBox {
   width: 1200px;
   margin: 0 auto;
}
/*..... header ......*/
header {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   z-index: 500;
   padding: 22px 0;
   color: #000000;
   /*color: #eeeeee;*/
   transition: all 500ms;
   background: #FFFFFF;
   /*color: #D8D8D8;*/
}
header::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 0;
   background: #ffffff;
   transition: all 500ms;
   left: 0;
   top: 0;
   z-index: 5;
}
header .contentBox {
   z-index: 10;
   position: relative;
}
header a {
   color: #000000;
   transition: all 500ms;
}
header .logoMain {
   font-size: 19px;
}
header .logo {
   width: 32px;
   position: relative;
}
header .logo img {
   transition: all 500ms;
}
header .logo .whiteLogo {
   opacity: 1;
}
header .logo .blackLogo {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
}
header.animate,
header.black {
   color: #000000;
   box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.1);
}
header.black {
   box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.05);
   background: #ffffff;
}
header.animate::before {
   height: 100%;
}
header.animate a,
header.black a {
   color: #000000;
}
header.animate .logo .whiteLogo,
header.black .logo .whiteLogo {
   opacity: 0;
}
header.animate .logo .blackLogo,
header.black .logo .blackLogo {
   opacity: 1;
}
header nav {

}
header nav .navBox{
   position: relative;
   margin-right: 10px;
}
header nav .navBox:last-child{
   margin-right: 0;
}
header nav a {
   position: relative;
   padding: 8px 20px;
   display: block;
}
header nav a.active{
   /*border-radius: 15px;*/
}
header nav a.active ,
header nav a:hover {
   background: #8590ac;
   color: #ffffff;
}
header nav .subNav {
   position: absolute;
   background: #8590ac;
   font-size: 13px;
   left: 0;
   top: 100%;
   opacity: 0;
   visibility: hidden;
   transform: translate3d(40px, 0, 0);
   transition: all 300ms;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
header nav .navBox:hover .subNav {
   opacity: 1;
   visibility: visible;
   transform: translate3d(0, 0, 0);
}
header nav .subNav li{
   padding: 0 20px;
   transition: all 300ms ease;
}
header nav .subNav li:hover{
   background: #6b738a;
}
header nav .subNav a{
   display: block;
   padding: 15px 0;
   color: var(--white-color);
   white-space: nowrap;
   border-bottom: 1px solid #ececec;
   border-radius: 0;
}
header nav .subNav a:hover{
   background: transparent;
}
header nav .subNav li:last-of-type a{
   border-bottom: none;
}
.appMenuBtn {
   height: 18px;
   width: 25px;
   position: relative;
   display: none;
}
.appMenuBtn::after {
   content: "";
   width: 200%;
   height: 200%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate3d(-50%, -50%, 0);
}
.appMenuBtn li {
   height: 2px;
   width: 100%;
   background: var(--default-color);
   /*background: var(--white-color);*/
   position: absolute;
   left: 0;
   transition: all 500ms;
}
header.animate .appMenuBtn li,
header.black .appMenuBtn li {
   background: var(--default-color);
}
.appMenuBtn li.top {
   top: 0;
}
.appMenuBtn li.mid {
   top: 50%;
   transform: translate3d(0, -50%, 0);
   transition: all 0ms;
}
.appMenuBtn li.low {
   bottom: 0;
}
.appMenuBtn.animate li.top {
   top: 50%;
   transform: translate3d(0, -50%, 0) rotate(45deg);
}
.appMenuBtn.animate li.mid {
   opacity: 0;
}
.appMenuBtn.animate li.low {
   top: 50%;
   transform: translate3d(0, -50%, 0) rotate(-45deg);
}
.menuSec {
   width: 0;
   height: 0;
   right: 0;
   top: 0;
   background: #ffffff;
   position: fixed;
   z-index: 200;
   border-radius: 100% 0 0 100%;
   transition: all 500ms;
   visibility: hidden;
   display: none;
}
.menuSec.show {
   width: 200%;
   height: 200vh;
   border-radius: 0;
   visibility: visible;
}
.menuSec .menuCont {
   right: 0;
   width: 100vw;
   height: calc(100vh - 60px);
   top: 60px;
   /*background: #efefef;*/
   position: absolute;
   box-sizing: border-box;
   padding: 30px;
   overflow: hidden;
}
.menuSec .menuCont .menuList {
   width: 100%;
   height: 100%;
   overflow: auto;
   transform: translate3d(0, 80px, 0);
   opacity: 0;
}
.menuSec.show .menuCont .menuList {
   transition: all 300ms;
   transition-delay: 300ms;
   transform: translate3d(0, 0, 0);
   opacity: 1;
}
.menuSec .menuCont .menuList li {
   margin-bottom: 40px;
}
.menuSec .menuCont .menuList li > div {
   margin-bottom: 15px;
}
.menuSec .menuCont .menuList li > a.active {
   color: var(--highlight);
}
.bannerTitle {
   position: absolute;
   /*width: 100%;*/
   text-align: left;
   left: 80px;
   z-index: 150;
   /*top: 50%;*/
   /*transform: translate3d(0, -50%, 0);*/
   color: #ffffff;
   font-size: 55px;
   right: 80px;
}
.homeBanner.to-win .bannerTitle {
   left: 57%;
   top: 30%;
}
.homeBanner.incedo-banner .bannerTitle ,
.homeBanner.re-define .bannerTitle {
   left: 22%;
   top: 26%;
}
.homeBanner.to-give .bannerTitle {
   left: 60%;
   top: 32%;
}
.homeBanner.mission-holdings.largeTitle{
   display: flex;
   align-items: center;
}
.homeBanner.mission-holdings .bannerTitle {
   top: 32%;
   /* width: 600px; */
   width: 70%;
   left: 50%;
   transform: translate3d(-50%, 0, 0);
   text-align: center;
}
.homeBanner.mission-holdings.largeTitle .bannerTitle {
   top: auto !important;
   position: relative;
   width: 70%;
   text-align: center;
}
.bannerTitle .highlightWord {
   display: inline-block;
   line-height: 45px;
}
.bannerTitle .mainText {
   font-size: 55px;
   line-height: 50px;
   text-transform: uppercase;
}
.bannerTitle .subText {
   font-size: 18px;
   margin-top: 15px;
   letter-spacing: 0.2px;
}
.bannerTitle .banner-link {
   color: #80B7FF;
   display: inline-block;
   padding: 5px 10px;
   border-radius: 15px;
   font-size: 13px;
   background: #000000;
   position: relative;
   left: 0;
   top: 100%;
   white-space: nowrap;
   vertical-align: top;
}
.pageSection {
   padding: 90px 0;
   width: 100%;
   position: relative;
}
.page-sub-section {
   padding: 60px 0;
   width: 100%;
   position: relative;
}
.sectionTitle {
   font-size: 22px;
   position: relative;
   font-family: proximaNovaSb;
}
.slick-dotted.slick-slider{
   margin-bottom: 0 !important;
}
.slick-dots{
   right: 0;
   bottom: 40px !important;
   left: 0;
   width: 100% !important;
   z-index: 100;
}
.slick-dots li{
   display: inline-block !important;
   margin: 0 15px !important;
}
.slick-dots li button{
   margin: 0 auto !important;
}
.slick-dots li button::before {
   content: "" !important;
   background: #ffffff;
   border-radius: 50%;
   width: 12px !important;
   height: 12px !important;
   opacity: 0.4 !important;
   transition: all 300ms ease;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.slick-dots li.slick-active button:before {
   opacity: 1 !important;
}
.isInterest {
   background: rgba(0, 0, 0, 0.90);
   color: #ffffff;
   padding: 20px 0;
   /*position: absolute;*/
   width: 100%;
   /*bottom: 0;*/
   /*z-index: 100;*/
}
.isInterest .btn {
   /*background: #EFA068;*/
   background-image: linear-gradient(99deg, rgba(21,255,181,0.49531687675070024) 0%, rgba(0,114,218,1) 100%);;
   color: #000000;
   width: 110px;
}
/*....... Inner pages ........*/
.pageBanner{
   width: 100%;
   height: 75vh;
}
.about-mission{
   background: url('about-mission.jpg') no-repeat center;
   background-size: cover;
}
.leadership{
   background: url('leadershipBanner.jpg') no-repeat center;
   background-size: cover;
}
.capitals{
   background: url('capitals-banner.jpg') no-repeat center;
   background-size: cover;
}
.philanthropy{
   background: url('philanthropy-banner.jpg') no-repeat center;
   background-size: cover;
}
.missionCapital{
   background: url('mission-capital.jpg') no-repeat center;
   background-size: cover;
}
.news{
   background: url('news.jpg') no-repeat center;
   background-size: cover;
}
.contacts{
   background: url('conatct-banner.jpg') no-repeat center;
   background-size: cover;
}
.pageTabs{
   padding: 30px 50px;
   white-space: nowrap;
   overflow: auto;
}
.pageTabs a{
   padding: 12px 25px;
   border-radius: 22px;
}
.pageTabs a:not(:last-of-type){
   margin-right: 10px;
}
.pageTabs a.active{
   background: #178BB4;
   background-image: linear-gradient(99deg, rgba(21,255,181,0.49531687675070024) 0%, rgba(0,114,218,1) 100%);
   color: #ffffff;
}
.brand-details-list{

}
.brand-details-list > li{
   padding: 50px 0;
   border-top: 1px solid var(--border-color);
}
.brand-details-list .brand-icon{
   width: 150px;
}
.brand-details-list .brand-icon.wid-120{
   width: 120px;
}
.brand-details-list .brand-icon.wid-100{
   width: 100px;
}
.team-list{

}
.team-list li{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}
.team-list .person-pic{
   width: 300px;
   /*text-align: center;*/
}
.team-list .person-pic *{
   text-align: left;
}
.team-list .person-pic .pic{
   width: 100%;
   display: inline-block;
   vertical-align: top;
}
.logo-list .person-pic .pic{
   width: 130px;
}
.logo-list .person-pic .pic.width-full{
   width: 100%;
}
.logo-list .person-pic .pic.width-180{
   width: 180px;
}
.logo-list .person-pic .pic.width-220{
   width: 220px;
}
.team-list .social-media .icon{
   width: 22px;
}
.team-list .person-details{
   width: calc(100% - 350px);
}
.points{

}
.points li{
   position: relative;
   padding-left: 20px;
   margin-bottom: 5px;
}
.points:not(.no-dots) li::after{
   content: "";
   position: absolute;
   left: 0;
   top: 8px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--light-color);
   font-size: 15px;
}
.points.looking-for li{
   padding-left: 0;
   margin-bottom: 12px;
}
footer {
   background: #000000;
   /*background-image: linear-gradient(to left, rgba(71, 37, 175, 1), rgb(24, 96, 191));*/
   color: #ffffff;
   padding: 90px 0;
}
footer .footer-links-sec {

}
footer .footerLinks {
   width: calc(100% - 150px);
}
footer a {
   color: #e3e3e3;
   position: relative;
}
footer a::after {
   content: "";
   position: absolute;
   left: 0;
   top: 100%;
   width: 0;
   height: 1px;
   background: #e3e3e3;
   margin-top: 3px;
   transition: all 400ms ease;
}
footer a.highlight-color::after {
   background: var(--highlight);
}
footer a:hover::after {
   width: 100%;
}
footer .footerLogo {
   width: 30px;
   display: block;
}
footer .footerNav {
   width: 33.33%;
   margin-bottom: 70px;
}
footer .footerNav > div:not(:last-of-type) {
   margin-bottom: 20px;
}
footer .countries {

}
footer .countries .icon {
   width: 30px;
}

body {
   margin: 0;
   padding: 0;
}

:root {
   --default-fonts: 'Helvetica';
   --form-fonts: 'Helvetica';
   --default-color: #000000;
   --highlight: #1588c0;
   --light-color: #959595;
   --white-color: #FFFFFF;
   --tag-color: #697699;
   --errorColor: #DA4444;
   --low: #69b91a;
   --mid: #ff7e00;
   --high: #ee423d;
   --formColor: #505150;
   --formBack: #efefef;
   --tagColor: #697699;
   --border-color: #979797;
   --border-color-light: #d7d7d7;
   --light-grey: #80808010;
   --light-orange: #FF7E0030;
   --transition-time-500: 500ms;
   --transition-time-300: 300ms;
   --transition-time-200: 200ms;
   --form-item-height-45: 45px;
   --form-item-height-40: 40px;
   --form-item-height-35: 35px;
   --item-radius-5: 5px;
   --item-radius-8: 8px;
   --shadow-color: rgba(0, 0, 0, 0.2);
   --shadow-light-color: #e8e8e8;

}

/*....... Colors ......*/

.highlight-color {
   color: var(--highlight) !important;
}

.light-color {
   color: var(--light-color) !important;
}

.light-background {
   background: var(--light-grey) !important;
}

.white-color {
   color: #e8e7e7 !important;
}

.tagColor {
   color: var(--tag-color) !important;
}

.formColor {
   color: var(--formColor) !important;
}

.formBack {
   background-color: var(--formBack) !important;
}

.errorColor {
   color: var(--errorColor) !important;
}

.low {
   color: var(--low) !important;
}

.mid {
   color: var(--mid) !important;
}

.high {
   color: var(--high) !important;
}

/*..... Default Settings ......*/

* {
   outline: none;
}

a {
   text-decoration: none;
   outline: none;
   color: var(--default-color);
}

a:hover {
   text-decoration: none;
}

.autoImg {
   width: 100%;
   height: auto;
   display: block;
}

ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

input,
textarea {
   border: none;
   font-family: var(--form-fonts);
   color: var(--formColor);
   background: var(--formBack);
}

input::placeholder {
   color: var(--formColor);
   opacity: 0.7;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Firefox */

input[type=number] {
   -moz-appearance: textfield;
}

label {
   display: block;
   cursor: pointer;
}

/*........ User base classes ........*/

.relative {
   position: relative;
}

.cursorPointer {
   cursor: pointer;
}

/*........ Icon ........*/

.icon {
   width: 20px;
}

.icon.circular {
   border-radius: 50%;
   overflow: hidden;
}

.icon.wid-10 {
   width: 10px !important;
}

.icon.wid-12 {
   width: 12px !important;
}

.icon.wid-15 {
   width: 15px !important;
}

.icon.wid-18 {
   width: 18px !important;
}

.icon.wid-25 {
   width: 35px !important;
}

.icon.wid-30 {
   width: 30px !important;
}

.icon.wid-35 {
   width: 35px !important;
}

.icon.wid-40 {
   width: 40px !important;
}

.icon.wid-50 {
   width: 50px !important;
}

.icon.wid-60 {
   width: 60px !important;
}

.icon.wid-70 {
   width: 70px !important;
}

.icon.wid-80 {
   width: 80px !important;
}

.icon.wid-100 {
   width: 100px !important;
}

.icon img {
   width: 100%;
   height: auto;
   display: block;
}

/*........ Loader Box ........*/

.loader-box {
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 1100;
}

.loader-box.absolute {
   position: absolute;
}

/*....... Sizes ......*/

.width-block {
   width: 100% !important;
}

.width-block-90 {
   width: 90% !important;
}

.width-block-80 {
   width: 80% !important;
}

.width-block-75 {
   width: 75% !important;
}

.width-block-60 {
   width: 60% !important;
}

.width-block-50 {
   width: 50% !important;
}

.width-block-40 {
   width: 40% !important;
}

.width-block-30 {
   width: 30% !important;
}

.width-block-25 {
   width: 25% !important;
}

.width-block-20 {
   width: 20% !important;
}

.width-block-10 {
   width: 10% !important;
}

.width-1300 {
   width: 1300px !important;
}

.width-1200 {
   width: 1200px !important;
}

.width-1100 {
   width: 1100px !important;
}

.width-1000 {
   width: 1000px !important;
}

.width-900 {
   width: 900px !important;
}

.width-800 {
   width: 800px !important;
}

.width-700 {
   width: 700px !important;
}

.width-600 {
   width: 600px !important;
}

.width-500 {
   width: 500px !important;
}

.width-400 {
   width: 400px !important;
}

.width-300 {
   width: 300px !important;
}

.width-250 {
   width: 250px !important;
}

.width-225 {
   width: 225px !important;
}

.width-200 {
   width: 200px !important;
}

.width-150 {
   width: 150px !important;
}

.width-100 {
   width: 100px !important;
}

.width-auto {
   width: auto !important;
}

/*....... Font sizes ......*/

.font-40 {
   font-size: 40px !important;
}

.font-36 {
   font-size: 36px !important;
}

.font-34 {
   font-size: 34px !important;
}

.font-32 {
   font-size: 32px !important;
}

.font-30 {
   font-size: 30px !important;
}

.font-28 {
   font-size: 28px !important;
}

.font-26 {
   font-size: 26px !important;
}

.font-24 {
   font-size: 24px !important;
}

.font-22 {
   font-size: 22px !important;
}

.font-20 {
   font-size: 20px !important;
}

.font-18 {
   font-size: 18px !important;
}

.font-17 {
   font-size: 17px !important;
}

.font-16 {
   font-size: 16px !important;
}

.font-15 {
   font-size: 15px !important;
}

.font-14 {
   font-size: 14px !important;
}

.font-13 {
   font-size: 13px !important;
}

.font-12 {
   font-size: 12px !important;
}

.font-11 {
   font-size: 11px !important;
}

.font-10 {
   font-size: 10px !important;
}

/*....... Borders ......*/

.no-border {
   border: none !important;
}

.border-all-sides {
   border: 1px solid var(--border-color);
}

.border-bottom {
   border-bottom: 1px solid var(--border-color);
}

.border-left {
   border-left: 1px solid var(--border-color);
}

.border-right {
   border-right: 1px solid var(--border-color);
}

.border-top {
   border-top: 1px solid var(--border-color);
}

/*....... Padding ......*/

.padding-30 {
   padding: 30px;
}

.padding-25 {
   padding: 25px;
}

.padding-20 {
   padding: 20px;
}

.padding-15 {
   padding: 15px;
}

.padding-10 {
   padding: 10px;
}

.padding-5 {
   padding: 5px;
}

.padding-lr-30 {
   padding-left: 30px;
   padding-right: 30px;
}

.padding-lr-25 {
   padding-left: 25px;
   padding-right: 25px;
}

.padding-lr-20 {
   padding-left: 20px;
   padding-right: 20px;
}

.padding-lr-15 {
   padding-left: 15px;
   padding-right: 15px;
}

.padding-lr-10 {
   padding-left: 10px;
   padding-right: 10px;
}

.padding-lr-5 {
   padding-left: 5px;
   padding-right: 5px;
}

.padding-tb-30 {
   padding-top: 30px;
   padding-bottom: 30px;
}

.padding-tb-25 {
   padding-top: 25px;
   padding-bottom: 25px;
}

.padding-tb-20 {
   padding-top: 20px;
   padding-bottom: 20px;
}

.padding-tb-15 {
   padding-top: 15px;
   padding-bottom: 15px;
}

.padding-tb-10 {
   padding-top: 10px;
   padding-bottom: 10px;
}

.padding-tb-5 {
   padding-top: 5px;
   padding-bottom: 5px;
}

.padding-r-30 {
   padding-right: 30px;
}

.padding-r-25 {
   padding-right: 25px;
}

.padding-r-20 {
   padding-right: 20px;
}

.padding-r-15 {
   padding-right: 15px;
}

.padding-r-10 {
   padding-right: 10px;
}

.padding-r-5 {
   padding-right: 5px;
}

.padding-l-30 {
   padding-left: 30px;
}

.padding-l-25 {
   padding-left: 25px;
}

.padding-l-20 {
   padding-left: 20px;
}

.padding-l-15 {
   padding-left: 15px;
}

.padding-l-10 {
   padding-left: 10px;
}

.padding-l-5 {
   padding-left: 5px;
}

.padding-t-30 {
   padding-top: 30px;
}

.padding-t-25 {
   padding-top: 25px;
}

.padding-t-20 {
   padding-top: 20px;
}

.padding-t-15 {
   padding-top: 15px;
}

.padding-t-10 {
   padding-top: 10px;
}

.padding-t-5 {
   padding-top: 5px;
}

.padding-b-60 {
   padding-bottom: 60px;
}

.padding-b-50 {
   padding-bottom: 50px;
}

.padding-b-40 {
   padding-bottom: 40px;
}

.padding-b-30 {
   padding-bottom: 30px;
}

.padding-b-25 {
   padding-bottom: 25px;
}

.padding-b-20 {
   padding-bottom: 20px;
}

.padding-b-15 {
   padding-bottom: 15px;
}

.padding-b-10 {
   padding-bottom: 10px;
}

.padding-b-5 {
   padding-bottom: 5px;
}

.no-padding {
   padding: 0;
}

/*....... Margin ......*/

.margin-30 {
   margin: 30px;
}

.margin-25 {
   margin: 25px;
}

.margin-20 {
   margin: 20px;
}

.margin-15 {
   margin: 15px;
}

.margin-10 {
   margin: 10px;
}

.margin-5 {
   margin: 5px;
}

.margin-lr-30 {
   margin-left: 30px;
   margin-right: 30px;
}

.margin-lr-25 {
   margin-left: 25px;
   margin-right: 25px;
}

.margin-lr-20 {
   margin-left: 20px;
   margin-right: 20px;
}

.margin-lr-15 {
   margin-left: 15px;
   margin-right: 15px;
}

.margin-lr-10 {
   margin-left: 10px;
   margin-right: 10px;
}

.margin-lr-5 {
   margin-left: 5px;
   margin-right: 5px;
}

.margin-tb-30 {
   margin-top: 30px;
   margin-bottom: 30px;
}

.margin-tb-25 {
   margin-top: 25px;
   margin-bottom: 25px;
}

.margin-tb-20 {
   margin-top: 20px;
   margin-bottom: 20px;
}

.margin-tb-15 {
   margin-top: 15px;
   margin-bottom: 15px;
}

.margin-tb-10 {
   margin-top: 10px;
   margin-bottom: 10px;
}

.margin-tb-5 {
   margin-top: 5px;
   margin-bottom: 5px;
}

.margin-b-60 {
   margin-bottom: 60px;
}

.margin-b-50 {
   margin-bottom: 50px;
}

.margin-b-40 {
   margin-bottom: 40px;
}

.margin-b-30 {
   margin-bottom: 30px;
}

.margin-b-25 {
   margin-bottom: 25px;
}

.margin-b-20 {
   margin-bottom: 20px;
}

.margin-b-15 {
   margin-bottom: 15px;
}

.margin-b-10 {
   margin-bottom: 10px;
}

.margin-b-5 {
   margin-bottom: 5px;
}

.margin-b-3 {
   margin-bottom: 3px;
}

.margin-t-30 {
   margin-top: 30px;
}

.margin-t-25 {
   margin-top: 25px;
}

.margin-t-20 {
   margin-top: 20px;
}

.margin-t-15 {
   margin-top: 15px;
}

.margin-t-10 {
   margin-top: 10px;
}

.margin-t-5 {
   margin-top: 5px;
}

.margin-l-30 {
   margin-left: 30px;
}

.margin-l-25 {
   margin-left: 25px;
}

.margin-l-20 {
   margin-left: 20px;
}

.margin-l-15 {
   margin-left: 15px;
}

.margin-l-10 {
   margin-left: 10px;
}

.margin-l-5 {
   margin-left: 5px;
}

.margin-r-30 {
   margin-right: 30px;
}

.margin-r-25 {
   margin-right: 25px;
}

.margin-r-20 {
   margin-right: 20px;
}

.margin-r-15 {
   margin-right: 15px;
}

.margin-r-10 {
   margin-right: 10px;
}

.margin-r-5 {
   margin-right: 5px;
}

.no-margin {
   margin: 0;
}

.margin-auto {
   margin: auto;
}

.margin-0-auto {
   margin: 0 auto;
}

/*....... Alignment ......*/

.text-align-left {
   text-align: left;
}

.text-align-center {
   text-align: center;
}

.text-align-right {
   text-align: right;
}

.text-normal {
   text-transform: none !important;
}

.text-capitalize {
   text-transform: capitalize;
}

.text-uppercase {
   text-transform: uppercase;
}

.text-lowercase {
   text-transform: lowercase;
}

.text-overflow-hidden {
   overflow: hidden;
}

.text-ellipsis {
   overflow: hidden;
   white-space: nowrap;
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
}

.text-no-wrap {
   white-space: nowrap !important;
}

.text-normal-wrap {
   white-space: normal !important;
}

.float-left {
   float: left;
}

.float-right {
   float: right;
}

.clear {
   clear: both;
   display: block;
}

.block {
   display: block;
}

.inline-block {
   display: inline-block;
}

.inline-middle-block {
   display: inline-block;
   vertical-align: middle;
}

.inline-top-block {
   display: inline-block;
   vertical-align: top;
}

.inline-bottom-block {
   display: inline-block;
   vertical-align: bottom;
}

/*....... Flex ......*/

.flex {
   display: flex;
   align-items: center;
}

.flex-wrap {
   flex-wrap: wrap;
}

.flex.hr-left {
   justify-content: flex-start;
}

.flex.hr-center {
   justify-content: center;
}

.flex.hr-right {
   justify-content: flex-end;
}

.flex.hr-space-between {
   justify-content: space-between;
}

.flex.hr-space-around {
   justify-content: space-around;
}

.flex.hr-space-evenly {
   justify-content: space-evenly;
}

.flex.vr-top {
   align-content: flex-start;
}

.flex.vr-center {
   align-content: center;
}

.flex.vr-bottom {
   align-content: flex-end;
}

.flex.vr-stretch {
   align-content: stretch;
}

.flex.vr-space-between {
   align-content: space-between;
}

.flex.vr-space-around {
   align-content: space-around;
}

.flex.align-top {
   align-items: flex-start;
}

.flex.align-center {
   align-items: center;
}

.flex.align-end {
   align-items: flex-end;
}

.flex.align-stretch {
   align-items: stretch;
}

.flex.align-baseline {
   align-items: baseline;
}

/*....... Text Classes ......*/

.bold {
   font-weight: bold;
}

.italic {
   font-style: italic;
}

.line-15 {
   line-height: 15px;
}

.line-18 {
   line-height: 18px;
}

.line-20 {
   line-height: 20px;
}

.line-22 {
   line-height: 22px;
}

.line-25 {
   line-height: 25px;
}

.line-28 {
   line-height: 28px;
}

.line-30 {
   line-height: 30px;
}

.line-35 {
   line-height: 35px;
}

.line-40 {
   line-height: 40px;
}

/*....... Radio ......*/

.radio {
   position: relative;
   background: var(--formBack);
   height: 26px;
   width: 26px;
   border-radius: 50%;
}

.radio.size-30 {
   height: 30px;
   width: 30px;
}

.radio input[type="radio"] {
   display: block;
   height: 100%;
   width: 100%;
   margin: 0;
   opacity: 0;
   position: absolute;
   z-index: 5;
   cursor: pointer;
   box-sizing: content-box;
   border-radius: 50%;
   top: 0;
   left: 0;
}

.radio .box {
   cursor: pointer;
   position: relative;
   top: 50%;
   left: 50%;
   width: 45%;
   height: 45%;
   background: var(--highlight);
   transform: translate3d(-50%, -50%, 0) scale(0);
   z-index: 1;
   border-radius: 50%;
   transition: all ease-in var(--transition-time-200);
}

.radio input[type="radio"]:checked + .box {
   transform: translate3d(-50%, -50%, 0) scale(1);
}

/*....... Checkbox ......*/

.checkbox {
   position: relative;
   height: 26px;
   width: 26px;
}

.checkbox.size-30 {
   height: 30px;
   width: 30px;
}

.checkbox input[type="checkbox"] {
   height: 100%;
   width: 100%;
   display: block;
   opacity: 0;
   position: absolute;
   z-index: 5;
   cursor: pointer;
   box-sizing: content-box;
   margin: 0;
   padding: 0;
   top: 0;
   left: 0;
}

.checkbox .box {
   height: 100%;
   width: 100%;
   background: var(--formBack);
   cursor: pointer;
   position: relative;
   z-index: 2;
   transition: all ease-in 150ms;
}

.checkbox.circular .box {
   border-radius: 50%;
}

.checkbox .box:after {
   height: 100%;
   width: 100%;
   max-width: 0;
   left: 0;
   top: 0;
   position: absolute;
   z-index: 3;
   content: "";
   background: url('check-icon.png') no-repeat center;
   background-size: 40%;
   transition: all ease-in var(--transition-time-200);
}

.checkbox input[type="checkbox"]:checked + .box {
   background: var(--highlight) !important;
}

.checkbox input[type="checkbox"]:checked + .box:after {
   max-width: 100%;
}

/*....... drop-down ......*/

.drop-down {
   width: 150px;
   position: relative;
}

.drop-down .head {
   background: var(--formBack) url('drop-down.png') no-repeat right 17px center;
   background-size: 14px;
   box-sizing: border-box;
   white-space: nowrap;
   cursor: pointer;
}

.drop-down.disabled .head,
.drop-down.disabled .head .head-title {
   cursor: not-allowed;
   background-image: none;
}

.drop-down.trans .head {
   background-color: transparent;
   border: none;
}

.round-corner-8 .drop-down .head,
.drop-down.round-corner-8 .head {
   border-radius: var(--item-radius-8);
}

.round-corner-5 .drop-down .head,
.drop-down.round-corner-5 .head {
   border-radius: var(--item-radius-5);
}

.drop-down.open .head {
   box-shadow: 0 -1px 5px var(--shadow-light-color);
   border-bottom: 0;
   border-radius: var(--item-radius-8) var(--item-radius-8) 0 0;
}

.drop-down .head-title {
   width: 100%;
   font-size: 14px;
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   background: transparent;
   border: none !important;
   cursor: pointer;
   padding: 0 35px 0 20px;
   box-sizing: border-box;
}

.drop-down .head-title:not([type="text"]) {
   line-height: var(--form-item-height-45);
}

.drop-down .head-title[type="text"] {
   height: var(--form-item-height-45);
}

.item-height-40 .drop-down .head-title:not([type="text"]),
.drop-down.item-height-40 .head-title:not([type="text"]) {
   line-height: var(--form-item-height-40);
}

.item-height-40 .drop-down .head-title[type="text"],
.drop-down.item-height-40 .head-title[type="text"] {
   height: var(--form-item-height-40);
}

.item-height-35 .drop-down .head-title:not([type="text"]),
.drop-down.item-height-35 .head-title:not([type="text"]) {
   line-height: var(--form-item-height-35);
}

.item-height-35 .drop-down .head-title[type="text"],
.drop-down.item-height-35 .head-title[type="text"] {
   height: var(--form-item-height-35);
}

.drop-down .list {
   position: absolute;
   left: 0;
   top: 100%;
   width: 100%;
   display: none;
   z-index: 100;
   max-height: 200px;
   overflow: auto;
   background: var(--white-color);
   box-sizing: border-box;
   color: var(--default-color);
}

.drop-down.open .list {
   box-shadow: 0 1px 5px var(--shadow-light-color);
   border-radius: 0 0 var(--item-radius-8) var(--item-radius-8);
   border-top: 0;
}

.drop-down .list li {
   border-top: 1px solid var(--border-color-light);
   cursor: pointer;
   padding: 10px 20px;
   box-sizing: border-box;
   text-transform: capitalize;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.multi-select .list li .list-name {
   width: calc(100% - 35px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   box-sizing: border-box;
}

/*....... search-box ......*/

.search-box {
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
}

.search-box input {
   background: var(--formBack) url('search.png') no-repeat right 12px center;
   background-size: 18px;
   display: block;
   width: 100%;
   box-sizing: border-box;
   height: var(--form-item-height-45);
   padding: 8px 80px 8px 20px;
   color: var(--formColor);
   font-size: 14px;
}

.search-box.search-icon-left input {
   background-position: left 12px center;
   padding: 8px 20px 8px 40px;
}

.search-box .search-btn {
   cursor: pointer;
   position: absolute;
   right: 10px;
   top: 6px;
   width: 40px;
   background: var(--highlight) url('search.png') no-repeat center;
   background-size: 14px;
   bottom: 6px;
   border-radius: 7px;
}

.search-box .clear-btn {
   background: url('cross.png') no-repeat center;
   right: 50px;
   width: 30px;
   height: 100%;
   background-size: 25px;
   border: none;
   animation-name: fadeInUp;
   animation-duration: 400ms;
   position: absolute;
   top: 0;
   cursor: pointer;
}

/*........ Notification .........*/

.notifications {
   background: var(--white-color);
   bottom: 0;
   box-shadow: 0 9px 10px var(--shadow-light-color);
   box-sizing: border-box;
   overflow: auto;
   position: absolute;
   right: 0;
   top: 70px;
   width: 320px;
   z-index: 100;
}

.notifications .notificationList {
   height: 100%;
   overflow: auto;

}

.notifications .notificationList > li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 20px;
   border-bottom: 1px solid var(--border-color-light);
}

.notifications .notificationList li .icon {
   width: 45px;
}

.notifications .notificationList li .content {
   width: calc(100% - 60px);
}

/*....... Form ......*/

.form {
   position: relative;
}

.inputBox {

}

.form > li {
   margin-bottom: 25px;
   box-sizing: border-box;
}

.form li input:not([type="checkbox"]):not([type="radio"]),
.form li textarea,
.inputBox input:not([type="checkbox"]):not([type="radio"]),
.inputBox textarea {
   width: 100%;
   box-sizing: border-box;
   height: var(--form-item-height-45);
   padding: 5px 20px;
   background: var(--formBack);
   font-size: 14px;
   color: var(--formColor);
   transition: all 150ms ease;
}

.form.item-height-40 li input:not([type="checkbox"]):not([type="radio"]),
.inputBox.item-height-40 input:not([type="checkbox"]):not([type="radio"]) {
   height: var(--form-item-height-40);
}

.form.item-height-35 li input:not([type="checkbox"]):not([type="radio"]),
.inputBox.item-height-35 input:not([type="checkbox"]):not([type="radio"]) {
   height: var(--form-item-height-35);
}

.form.round-corner-5 li input:not([type="checkbox"]):not([type="radio"]),
.form.round-corner-5 li textarea,
.inputBox.round-corner-5 input:not([type="checkbox"]):not([type="radio"]),
.inputBox.round-corner-5 textarea {
   border-radius: var(--item-radius-5);
}

.form.round-corner-8 li input:not([type="checkbox"]):not([type="radio"]),
.form.round-corner-8 li textarea,
.inputBox.round-corner-8 input:not([type="checkbox"]):not([type="radio"]),
.inputBox.round-corner-8 textarea {
   border-radius: var(--item-radius-8);
}

.form li.date input,
.inputBox.date input {
   padding: 5px 35px 5px 20px !important;
   background: var(--formBack) url('calendarIcon.png') no-repeat right 10px center !important;
   background-size: 20px !important;
}

.form li textarea,
.inputBox textarea {
   height: 110px;
   resize: vertical;
   padding: 15px 20px;
   line-height: normal;
   font-family: var(--default-fonts);
}

.form li .tag,
.inputBox .tag {
   margin-bottom: 5px;
   font-size: 14px;
   color: var(--tagColor);
   text-transform: capitalize;
   position: relative;
}

.form li.required .tag::after,
.inputBox.required .tag::after {
   content: '*';
   color: var(--errorColor);
   position: absolute;
   right: 8px;
   top: 0;
   font-size: 21px;
}

.form li .description,
.inputBox .description {
   font-size: 13px;
   color: var(--tagColor);
   margin-top: 3px;
}

.form .error {
   font-size: 13px;
   color: var(--errorColor);
   margin-top: 3px;
}

.form li .drop-down {
   width: 100% !important;
}

.form li .drop-down .head-title {
   background: transparent !important;
}

/*....... Columns ......*/

.col-2,
.col-3,
.col-4,
.col-5,
.col-6 {
   display: flex;
   align-items: stretch;
   flex-wrap: wrap;
}

.col-2.align-center,
.col-3.align-center,
.col-4.align-center,
.col-5.align-center,
.col-6.align-center {
   align-items: center;
}

.col-2 > *,
.col-3 > *,
.col-4 > *,
.col-5 > *,
.col-6 > * {
   margin-right: 30px;
}

.col-2 > * {
   width: calc(50% - 15px);
}

.col-3 > * {
   width: calc(33.33% - 20px);
}

.col-4 > * {
   width: calc(25% - 23px);
}

.col-5 > * {
   width: calc(20% - 24px);
}

.col-6 > * {
   width: calc(16.66% - 25px);
}

.col-2 > *:nth-of-type(2n + 2),
.col-3 > *:nth-of-type(3n + 3),
.col-4 > *:nth-of-type(4n + 4),
.col-5 > *:nth-of-type(5n + 5),
.col-6 > *:nth-of-type(6n + 6) {
   margin-right: 0 !important;
}

/*....... Toggle Button ......*/

.toggle-btn {
   width: 85px;
   height: 30px;
   background: var(--formBack);
   position: relative;
   border-radius: 8px;
   cursor: pointer;
   display: flex;
}

.toggle-btn.round-corners {
   border-radius: 15px;
}

.toggle-btn .options {
   height: 100%;
   width: 50%;
   line-height: 30px;
   border-radius: 8px;
   text-align: center;
   color: var(--light-color);
   z-index: 10;
   position: relative;
   transition: all 200ms ease;
}

.toggle-btn .toggle {
   height: 100%;
   width: 50%;
   line-height: 30px;
   position: absolute;
   background: #bd1414;
   left: 0;
   top: 0;
   border-radius: 8px;
   z-index: 5;
   transform: translate3d(0, 0, 0);
   transition: all 200ms ease;
}

.toggle-btn.round-corners .toggle {
   border-radius: 15px;
}

.toggle-btn.both-true .toggle {
   background: #31a53f;
}

.toggle-btn.on .toggle {
   transform: translate3d(100%, 0, 0);
   background: #31a53f;
}

.toggle-btn.off .options.on {
   color: var(--light-color);
}

.toggle-btn.on .options.off {
   color: var(--light-color);
}

/*....... Back Button ......*/

.backBtn {
   width: 40px;
   height: 40px;
   display: inline-block;
   background: var(--highlight) url('chevron-left.png') no-repeat center;
   background-size: 15px;
   border-radius: 50%;
   cursor: pointer;
}

/*....... Data Table ......*/

.data-table {

}

.data-table .table-row {
   display: flex;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
   position: relative;
   padding: 0 10px;
}

.data-table.align-stretch .table-row {
   align-items: stretch;
}

.data-table.selectable .table-row:not(.header) {
   cursor: pointer;
}

.data-table.row-border .table-row:not(:last-of-type) {
   border-bottom: 1px solid var(--border-color);
}

.data-table.odd-even-row .table-row:nth-child(odd) {
   background: var(--light-grey);
}

.data-table.end-to-end-row .table-row {
   padding: 0;
}

.data-table .table-row.selected {
   background: var(--light-orange) !important;
}

.data-table .table-row > li {
   width: 20%;
   padding: 15px 10px;
   text-overflow: ellipsis;
   box-sizing: border-box;
}

.data-table.end-to-end-row .table-row > li:first-of-type {
   padding-left: 0;
}

.data-table.end-to-end-row .table-row > li:last-of-type {
   padding-right: 0;
}

/*....... Pagination ......*/

.pagination {
   display: flex;
   justify-content: center;
}

.pagination li {
   font-size: 15px;
   line-height: 35px;
   width: 35px;
   text-align: center;
   border-radius: 50%;
   margin-right: 10px;
   cursor: pointer;
   transition: all 150ms ease;
   position: relative;
   z-index: 1;
}

.pagination li:hover {
   color: var(--highlight);
}

.pagination li::after {
   border-radius: 50%;
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: var(--highlight);
   z-index: -1;
   transform: scale(0);
}

.pagination li:last-of-type {
   margin-right: 0;
}

.pagination li.active {
   color: #ffffff;
}

.pagination li.active::after {
   transform: scale(1);
   transition: all 300ms ease;
}

.pagination li.blur {
   opacity: 0.3;
   cursor: not-allowed;
}

.pagination li.prev,
.pagination li.next {
   background: url('left-arrow-blue.png') no-repeat center;
   background-size: 20px;
}

.pagination li.next {
   background-image: url('right-arrow-blue.png');
}

.pagination li.left-jump,
.pagination li.right-jump {
   background: url('left-dArrow-blue.png') no-repeat center;
   background-size: 20px;
}

.pagination li.right-jump {
   background-image: url('right-dArrow-blue.png');
}

/*....... Popup ......*/

.background {
   background-color: #FFFFFF70;
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 500;
   top: 0;
   left: 0;
   display: none;
}

.popup {
   z-index: 1000;
   box-shadow: 0 0 10px var(--shadow-color);
   display: none;
   padding: 40px 60px;
   top: 50%;
   left: 50%;
   background: var(--white-color);
   position: fixed;
   box-sizing: border-box;
   transform: translate3d(-50%, -50%, 0);
   width: 700px;
}

.popup.absolute {
   position: absolute;
   top: 80px;
   transform: translate3d(-50%, 0, 0);
}

.popup.round-corner {
   border-radius: 15px;
}

.popup.round-corner-5 {
   border-radius: var(--item-radius-5);
}

.popup.round-corner-8 {
   border-radius: var(--item-radius-8);
}

.popup .x {
   color: transparent;
   cursor: pointer;
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 100;
   width: 40px;
   height: 40px;
   background: url('cross.png') no-repeat center;
   background-size: 30px;
}

.message-popup {
   z-index: 1100;
   box-shadow: 0 0 10px var(--shadow-color);
   background: var(--white-color);
   /*visibility: hidden;*/
   padding: 40px 60px;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
   position: fixed;
   box-sizing: border-box;
   animation: message-popup-animation 500ms ease;
}

.message-popup.round-corner {
   border-radius: 15px;
}

.message-popup.round-corner-5 {
   border-radius: var(--item-radius-5);
}

.message-popup.round-corner-8 {
   border-radius: var(--item-radius-8);
}

.message-popup.absolute {
   position: absolute;
}

@keyframes message-popup-animation {
   from {
      opacity: 0;
      transform: translate3d(-50%, 500px, 0);
   }

   to {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0);
   }
}

/*........ Button .....*/

.btn {
   /*background: var(--highlight);*/
   background-image: linear-gradient(99deg, rgba(21,255,181,0.49531687675070024) 0%, rgba(0,114,218,1) 100%);;
   box-sizing: border-box;
   color: #ffffff;
   font-size: 14px;
   cursor: pointer;
   display: inline-block;
   min-width: 85px;
   padding: 0 20px;
   text-align: center;
   border: none;
   height: var(--form-item-height-45);
   line-height: var(--form-item-height-45);
   position: relative;
   transition: all 150ms ease;
   text-transform: capitalize;
}

.btn.round-corner{
   border-radius: 25px;
}

.btn.round-corner-5 {
   border-radius: var(--item-radius-5);
}

.btn.round-corner-8 {
   border-radius: var(--item-radius-8);
}

.btn .icon {
   width: 20px;
}

.btn .btnLoader {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: var(--highlight);
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
}

.btn.item-height-40 {
   height: var(--form-item-height-40);
   line-height: var(--form-item-height-40);
}

.btn.item-height-35 {
   height: var(--form-item-height-35);
   line-height: var(--form-item-height-35);
}

.btn.outline {
   background: transparent;
   border: 1px solid var(--highlight);
   color: var(--highlight);
}

.btn.trans {
   background: transparent;
   color: var(--highlight);
}

.btn.cancel {
   background: var(--light-color);
}

.btn.disabled,
.btn:disabled {
   cursor: not-allowed;
   opacity: 0.5;
}

/*........ Divide List .....*/

.separator {
   display: flex;
}

.separator > * {
   padding: 0 12px;
   position: relative;
}

.separator > *:after {
   content: "|";
   position: absolute;
   right: -1px;
   top: 50%;
   color: var(--light-color);
   transform: translate3d(0, -50%, 0);
}

.separator > *:first-of-type {
   padding-left: 0;
}

.separator > *:last-of-type {
   padding-right: 0;
}

.separator > *:last-of-type:after {
   display: none;
}

/*........ Thumbnail List .....*/

.thumbnail-list {

}

.thumbnail-list > li {
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
}

.thumbnail-list.border-list > li:not(:last-of-type) {
   border-bottom: 1px solid var(--border-color);
}

.thumbnail-list > li .icon {
   width: 50px;
}

.thumbnail-list > li .details {
   width: calc(100% - 65px);
}

/*........ Tab .....*/

.tabs {
   display: flex;
   align-items: center;
}

.tabs > * {
   padding: 0 20px;
   line-height: var(--form-item-height-45);
   cursor: pointer;
   color: var(--light-color);
   margin-right: 10px;
   min-width: 50px;
   text-align: center;
   position: relative;
   z-index: 5;
   transition: all 150ms ease;
}

.tabs.item-height-40 > * {
   line-height: var(--form-item-height-40);
}

.tabs.item-height-35 > * {
   line-height: var(--form-item-height-35);
}

.tabs > *:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   transform: scale(0);
}

.tabs:not(.underline) > *:after {
   background: var(--highlight);
}

.tabs > *:last-of-type {
   margin-right: 10px;
}

.tabs .icon {
   display: inline-block;
   vertical-align: middle;
   height: auto;
   width: 28px;
}

.tabs > *.active {
   color: var(--white-color) !important;
}

.tabs.underline > *.active {
   color: var(--highlight) !important;
}

.tabs > *:hover {
   color: var(--highlight);
}

.tabs > *.active:after {
   transform: scale(1);
   transition: all 300ms ease;
}

.tabs.underline > *.active::after {
   background: transparent !important;
   border-bottom: 3px solid var(--highlight);
}

.tabs.underline > * {
   line-height: 40px;
}

/*........ Tab .....*/

.progress-bar {
   width: 100%;
   margin: 10px 0;
   height: 15px;
   background: var(--light-color);
   border-radius: 10px;
   position: relative;
}

.progress-bar.item-height-12 {
   height: 12px;
}

.progress-bar.item-height-10 {
   height: 10px;
}

.progress-bar.item-height-5 {
   height: 5px;
}

.progress-bar.item-height-3 {
   height: 3px;
}

.progress-bar .uploaded {
   background: #f29d16;
   height: 100%;
   border-radius: 10px;
   width: 50%;
}

.progress-bar .percent {
   position: absolute;
   right: 10px;
   font-size: 10px;
   top: 1px;
}

/*........ accordion .....*/

.accordion-sec {

}

.accordion-sec .accordion-head {
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   padding: 10px 20px;
   align-items: center;
   line-height: 30px;
   background: var(--light-grey);
}

.accordion-sec .accordion-head .head-content {
   width: calc(100% - 40px);
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.accordion-sec .accordion-head .expand-btn {
   cursor: pointer;
   font-size: 25px;
   width: 30px;
   height: 30px;
   position: relative;
}

.accordion-sec .accordion-head .plus-minus-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translate3d(0, -50%, 0);
   height: 2px;
   width: 15px;
   background: var(--light-color);
}

.accordion-sec .accordion-head .plus-minus-icon::after {
   position: absolute;
   content: "";
   height: 100%;
   width: 100%;
   background: inherit;
   left: 0;
   top: 0;
   transform: rotate(90deg);
   transition: all 200ms ease;
}

.accordion-sec.open .accordion-head .plus-minus-icon::after ,
.accordion-sec.expand .accordion-head .plus-minus-icon::after {
   transform: rotate(0deg);
}

.accordion-sec > .accordion-head .rotate-icon {
   position: absolute;
   right: 0;
   top: 50%;
   width: 17px;
   height: 17px;
   transform: translate3d(0, -50%, 0) rotate(0deg);
   transition: all 200ms ease;
   display: inline-block;
   background: url('drop-down.png') no-repeat center;
   background-size: 100%;
}

.accordion-sec.expand > .accordion-head .rotate-icon ,
.accordion-sec.open > .accordion-head .rotate-icon {
   transform: translate3d(0, -50%, 0) rotate(180deg);
}

.accordion-sec .accordion-content {
   padding: 20px;
   display: none;
   background: var(--light-orange);
}

.accordion-sec.open > .accordion-content {
   display: block;
}

/*...... hoverMe ........*/

.tooltip-cont {
   position: relative;
}

.app-tooltip{
   position: absolute;
   right: 100%;
   top: 50%;
   transform: translate3d(-20px, -50%, 0);
   box-shadow: 0 0 3px var(--shadow-color);
   white-space: nowrap;
   visibility: hidden;
   z-index: 100;
   border-radius: 3px;
}

.app-tooltip.wrap{
   white-space: normal;
}

.tooltip-cont:hover .app-tooltip{
   visibility: visible;
   transform: translate3d(-10px, -50%, 0);
   transition: all 200ms ease;
}

.app-tooltip::after {
   position: absolute;
   content: '';
   left: 100%;
   top: 50%;
   width: 12px;
   height: 12px;
   background: var(--light-color);
   transform: rotate(45deg) translate3d(-12px, 0, 0);
   box-shadow: 0 0 3px var(--shadow-color);
   margin-top: 3px;
   z-index: -1;
}

.app-tooltip .content{
   background: var(--light-color);
   color: #ffffff;
   font-size: 12px;
   padding: 5px 10px;
   border-radius: 3px;
   text-transform: capitalize;
   line-height: normal;
   min-height: 24px;
   box-sizing: border-box;
}

.app-tooltip.top-position{
   right: auto;
   bottom: 100%;
   top: auto;
   transform: translate3d(-50%, 0, 0);
   left: 50%;
}

.tooltip-cont:hover .app-tooltip.top-position{
   transform: translate3d(-50%, -10px, 0);
}

.app-tooltip.top-position::after {
   left: 50%;
   top: 100%;
   margin-left: 3px;
}

.app-tooltip.right-position{
   right: auto;
   left: 100%;
   transform: translate3d(20px, -50%, 0);
}

.tooltip-cont:hover .app-tooltip.right-position{
   transform: translate3d(10px, -50%, 0);
}

.app-tooltip.right-position::after {
   left: auto;
   transform: rotate(45deg) translate3d(-5px, 0, 0);
   box-shadow: 0 0 3px var(--shadow-color);
   margin-top: -3px;
}

.app-tooltip.bottom-position{
   right: auto;
   top: auto;
   transform: translate3d(-50%, 0, 0);
   left: 50%;
}

.tooltip-cont:hover .app-tooltip.bottom-position{
   transform: translate3d(-50%, 10px, 0);
}

.app-tooltip.bottom-position::after {
   left: 50%;
   top: auto;
   margin-left: 3px;
   bottom: 100%;
   margin-bottom: -15px;
}

.app-tooltip.round-corner-5,
.app-tooltip.round-corner-5 .content{
   border-radius: var(--item-radius-5);
}

.app-tooltip.round-corner-8,
.app-tooltip.round-corner-8 .content{
   border-radius: var(--item-radius-8);
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 7, 2021 */

@font-face {
  font-family: 'proximaNovaSb';
  src: url('ProximaNova-Semibold.woff2') format('woff2'),
  url('ProximaNova-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'proximaNovaLt';
  src: url('ProximaNova-Light.woff2') format('woff2'),
  url('ProximaNova-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'sapientsansbold';
    src: url('sapisb_-webfont.woff2') format('woff2'),
         url('sapisb_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sapientsansblack';
    src: url('sapisbl-webfont.woff2') format('woff2'),
         url('sapisbl-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sapientsansmedium';
    src: url('sapism_-webfont.woff2') format('woff2'),
         url('sapism_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sapientsansregular';
    src: url('sapisrg-webfont.woff2') format('woff2'),
         url('sapisrg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@media all and (min-width: 1100px) and (max-width: 1300px) {
   header {
      /*background: #ff00004a;*/
   }
   header nav a {
      padding: 8px 15px;
   }
   .contentBox {
      width: 1000px !important;
   }

   .mapBox agm-map {
      height: 600px !important;
   }

   .press-section .press-icon.height-30{
      height: 25px !important;
   }
}


@media all and (min-width: 900px) and (max-width: 1099px) {
   header {
      /*background: #ff00004a;*/
   }

   .bannerTitle .mainText {
      font-size: 50px;
   }

   .sectionTitle {
      font-size: 20px;
   }
}


@media all and (max-width: 1099px) {

   .appWrapper {
      padding-top: 58px;
   }
   header {
      padding: 25px 0;
   }

   .appNav {
      display: none !important;
   }

   .menuSec {
      display: block !important;
   }

   header .appMenuBtn {
      display: block;
   }

   .contentBox {
      width: 100%;
      padding: 0 50px;
      box-sizing: border-box;
   }

   .homeBanner,
   .pageBanner {
      height: 70vh !important;
   }

   .sliderSec .homeSlider li.slide {
      height: 50vh !important;
   }
   .sliderSec .homeSlider li.slide .sliderContent {
      width: 100% !important;
   }
   .press-content li {
      width: 100% !important;
      margin-right: 0 !important;
   }
   .mapBox agm-map {
      height: 600px !important;
   }

   .capitalsTabsMain {
      text-align: center;
   }

   .capitalsTabs .partnershipTabs {
      border-left: none;
      padding-left: 0;
   }

   .pageTabs,
   .capitalsTabs{
      justify-content: left !important;
   }
   .team-list .person-pic {
      text-align: left !important;
   }

   .press-content {
      display: block;
   }

   .press-content li {
      width: 100%;
      padding: 30px 0;
      border-bottom: 1px solid var(--border-color);
   }

   .press-content li:first-of-type {
      padding-top: 0;
   }

   .press-content li:last-of-type {
      padding-bottom: 0;
      border-bottom: none;
   }
   .press-section .press-icon {
      height: 30px !important;
   }
   .press-section .press-icon.height-30{
      height: 25px !important;
   }
   .press-section .press-icon.height-50{
      height: 45px !important;
   }
   .press-section .press-icon.height-80{
      height: 80px !important;
   }
   .press-content li .margin-b-30 {
      margin-bottom: 20px;
   }


   .team-list li {
      display: block !important;
   }

   .team-list .person-pic {
      margin-bottom: 30px;
   }

   .team-list .person-details {
      width: 100% !important;
   }


   .locationsSec {
      padding: 0 !important;
   }

   .locations {
      padding: 0 50px !important;
      margin-bottom: 0 !important;
      display: block !important;
   }

   .locations li {
      padding: 30px 0 !important;
      width: 100% !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-color);
   }

   .locations li:last-of-type {
      border-bottom: none;
   }

   .locations li .locationDetails {
      width: calc(100% - 100px);
   }

   .locations li .countryName {
      margin-bottom: 10px !important;
   }

   .locations li .address {
      margin-bottom: 10px !important;
   }

   .locations li .phoneEmail {
      margin-bottom: 10px !important;
      display: block !important;
   }

   .locations li .address br,
   .locations li .phoneEmail br {
      display: none;
   }

   .locations li .address span {

   }

   .locations li .phoneEmail span {
      margin-left: 20px;
   }

   .emailSec {
      margin: 0 50px !important;
      padding: 0 !important;
   }

   .emailSec .email {
      padding: 30px 0 !important;
   }

   .mapBox agm-map {
      height: 700px !important;
   }

   footer .footerNav {
      width: 50%;
   }
   footer .copyRightSec {
      display: block;
   }
   footer .width-block-50 {
      width: 100% !important;
   }
   footer .copyRightSec .copyRightTxt{
      text-align: left;
      margin-top: 50px;
   }

}


@media all and (min-width: 700px) and (max-width: 899px) {
   header {
      /*background: #ff00004a;*/
   }

   .pageSection {
      padding: 70px 0 !important;
   }


   .bannerTitle .mainText {
      font-size: 45px;
   }

   .bannerTitle .subText {
      font-size: 18px;
   }

   .sectionTitle {
      font-size: 20px;
   }

   .font-20 {
      font-size: 18px !important;
   }

   .font-24 {
      font-size: 22px !important;
   }

   .font-26 {
      font-size: 24px !important;
   }
   .font-28 {
      font-size: 24px !important;
   }

   .homeBanner.to-give .bannerTitle {
      left: 50% !important;
   }
}


@media all  and (max-width: 899px) {
   .investors-sec {
      display: block !important;
   }
   .investors-sec .investors{
      width: 100% !important;
   }
   .investors.public,
   .investors.private{
      padding: 0 !important;
      border: none;
   }
   .investors.public{
      margin-bottom: 70px;
   }
   /*.investors .investors-list li {*/
   /*   display: block !important;*/
   /*}*/
   /*.investors .investors-list li .investor-icon{*/
   /*   margin-bottom: 20px;*/
   /*}*/
   .footerLinks {
      flex-wrap: wrap;
   }
   footer .footerLinks {
      width: calc(100% - 100px) !important;
   }
   .footerLinks li:not(.footerNav) {
      width: 100%;
   }

   .footerLinks .footerNav {
      width: 50%;
      box-sizing: border-box;
      padding-right: 20px;
   }

   .footerLinks li:not(.footerNav) {
      margin-bottom: 40px;
   }

   .footerLinks .footerNav {
      margin-bottom: 60px;
   }

   .copyRightSec .copyRightTxt {
      margin-bottom: 30px;
   }

   .copyRightSec {
      flex-wrap: wrap;
      /*justify-content: center;*/
   }

   .copyRightSec .copyRightTxt {
      width: 100%;
      /*text-align: center;*/
   }
}


@media all  and (max-width: 699px) {
   .appWrapper {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
   }
   ::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
      background: transparent;
   }
   .homeBanner,
   .pageBanner {
      height: 60vh !important;
   }
   .homeBanner .bannerTitle{
      left: 50px !important;
      right: 50px !important;
      text-align: center;
   }
   .brand-details-list .brand-head{
      display: block;
   }
   .about-mission {
      background-position: left 4% center;
   }
   .page-sub-section {
      padding: 40px 0;
   }

   .investors .investors-list {
      display: block !important;
   }

   .investors .investors-list li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 0;
      border-bottom: 1px solid var(--border-color);
      text-align: center;
   }
   .investors .investors-list li:first-of-type{
      padding-top: 0;
   }

   .investors .investors-list li:last-of-type{
      padding-bottom: 0;
   }

   .investors .investors-list .investor-icon{
      margin-bottom: 0 !important;
   }
}


@media all and (max-width: 699px) {
   header {
      /*background: #ff00004a;*/
   }

   header .logo {
      width: 28px !important;
   }

   header .logoTxt {
      font-size: 18px;
   }


   .pageSection {
      padding: 70px 0 !important;
   }
   .bannerTitle .mainText {
      font-size: 40px;
      line-height: 40px;
   }
   .homeBanner.mission-holdings .bannerTitle {
      width: auto;
      transform: translate3d(0, 0, 0);
   }

   .homeBanner.mission-holdings.largeTitle .bannerTitle{
      width: 90%;
      transform: translate3d(-10px, 0, 0px);
   }
   .bannerTitle .subText {
      font-size: 16px;
      margin-top: 10px;
   }

   .sectionTitle {
      font-size: 20px;
   }

   .font-20 {
      font-size: 17px !important;
   }

   .font-24 {
      font-size: 22px !important;
   }

   .font-26 {
      font-size: 20px !important;
      line-height: 30px;
   }
   .font-28 {
      font-size: 22px !important;
      line-height: 30px;
   }

   .sliderSec .homeSlider li.slide {
      height: auto !important;
      padding: 50px 0;
   }
   .sliderSec .homeSlider li.slide .sliderContent{
      transform: translate3d(0, 0, 0) !important;
      top: 0 !important;
   }

   .slick-dots li button::before {
      width: 15px !important;
      height: 15px !important;
   }
   .press-section .press-icon {
      height: 30px !important;
   }
   .press-section .press-icon.height-30{
      height: 25px !important;
   }
   .press-section .press-icon.height-50{
      height: 45px !important;
   }
   .press-section .press-icon.height-80{
      height: 70px !important;
   }
   .image-tabs li {
      padding: 5px 30px !important;
   }
   .image-tabs li .brand-icon{
      width: 130px !important;
   }
   .pageTabs{
      justify-content: left !important;
   }
   .sliderSec .sliderContent .name{
      display: block;
   }
   footer .footerLinks {
      width: calc(100% - 80px) !important;
   }
   .footerLinks .footerNav {
      width: 100%;
      padding-right: 0;
   }
}


@media all and (max-width: 499px) {
   .font-17 {
      font-size: 15px !important;
   }

   .font-15 {
      font-size: 14px !important;
   }

   .normal {
      font-size: 15px !important;
   }
   .margin-b-50 {
      margin-bottom: 30px;
   }
   .homeBanner,
   .pageBanner {
      height: 60vh !important;
   }

   .bannerTitle {
      margin-top: -10px;
   }

   header {
      /*background: #ff00004a;*/
      padding: 20px 0;
   }

   .pageSection {
      padding: 50px 0 !important;
   }

   .contentBox {
      padding: 0 30px;
   }
   .padding-b-70 {
      padding-bottom: 30px;
   }
   .menuSec .menuCont {
      padding: 30px;
   }

   .bannerTitle .mainText {
      font-size: 30px;
   }
   .bannerTitle .mainText .margin-b-30 {
      margin-bottom: 15px !important;
   }
   .homeBanner .bannerTitle {
      left: 30px !important;
      right: 30px !important;
   }
   .sectionTitle {
      font-size: 18px;
   }
   .bannerTitle .subText {
      font-size: 18px !important;
      line-height: 24px;
   }
   .font-26 {
      font-size: 18px !important;
      line-height: 26px;
   }
   .font-24 {
      font-size: 18px !important;
   }

   .press-section .press-icon {
      height: 25px !important;
   }
   .press-section .press-icon.height-30 {
      height: 20px !important;
   }
   .press-section .press-icon.height-50 {
      height: 40px !important;
   }

   .brand-details-list > li {
      padding: 30px 0;
   }

   .brand-details-list .brand-head {
      display: block !important;
   }

   .brand-details-list .brand-head a {
      margin-top: 10px;
      display: inline-block;
   }

   .brand-details-list .brand-icon {
      width: 130px;
   }
   .team-list .person-pic {
      width: 200px !important;
      margin-bottom: 20px;
   }
   .looking-for-list .person-pic {
      width: 40px !important;
   }
   .logo-list .person-pic .pic {
      width: 110px !important;
   }
   .logo-list .person-pic .pic.width-full {
      width: 220px !important;
   }
   .logo-list .person-pic .pic.width-220 {
      width: 160px !important;
   }
   .logo-list .person-pic .pic.width-180 {
      width: 140px !important;
   }
   .brand-details-list .brand-icon.wid-100 {
      width: 75px !important;
   }
   .investors.public {
      margin-bottom: 40px;
   }
   .investors .investors-list li {
      padding: 20px 0 !important;
   }
   .investors .investors-list .investor-icon {
      height: 65px !important;
   }
   .investors .investors-list .investor-icon.nse {
      height: 50px !important;
   }
   .investors .investors-list .investor-icon.height-35 {
      height: 30px !important;
   }
   .investors .investors-list .investor-icon.height-40 {
      height: 40px !important;
   }

   .sliderSec .sliderContent {
      padding: 0 40px 0 30px;
   }
   .sliderSec .sliderContent br{
      display: none;
   }
   .slick-dots {
      bottom: 20px !important;
   }
   .slick-dots li:not(:last-of-type) {
      margin: 0 10px !important;
   }
   .slick-dots li button::before {
      width: 10px !important;
      height: 10px !important;
   }
   .press-section .press-icon {
      margin-bottom: 15px !important;
   }
   .image-tabs li {
      padding: 5px 20px !important;
   }
   .image-tabs li .brand-icon {
      width: 110px !important;
   }

   .pageTabs{
      padding: 30px;
   }
   .pageTabs a {
      padding: 12px 20px;
      margin: 0 !important;
   }
   .dividerSec{
      padding: 25px 0 !important;
   }

   .locations {
      padding: 0 30px !important;
   }

   .locations li {
      padding: 25px 0 !important;
      display: block;
   }

   .locations li .locationIcon {
      width: 50px !important;
      margin-bottom: 10px !important;
   }

   .locations li .locationDetails {
      width: 100% !important;
   }

   .locations li .phoneEmail span {
      display: block;
      margin-left: 0;
   }

   .mapBox agm-map {
      height: 900px !important;
   }

   footer .countries {
      justify-content: space-between;
      width: 100%;
   }
   footer .footer-links-sec {
      display: block;
   }
   footer .footerLogo {
      margin-bottom: 30px;
   }
   .footerLinks .footerNav {
      margin-bottom: 40px;
   }
   footer .countries .icon {
      margin: 0 auto;
   }

   footer .countries > div {
      display: inline-block !important;
      margin-left: 0 !important;
   }

   footer .countries > div:first-of-type {
      margin-left: 0 !important;
   }

   footer .countries > div a {
      margin-left: 0 !important;
      margin-top: 10px;
      display: inline-block;
      font-size: 14px !important;
   }
}


@media all  and (max-width: 350px) {

   .homeBanner .bannerTitle {
      top: 18% !important;
   }
   .mapBox agm-map {
      height: 850px !important;
   }
}

@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/


.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}


.animated.hinge {
  animation-duration: 2s;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}


.bounce {
  animation-name: bounce;
}


@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}


.flash {
  animation-name: flash;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */


@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}


.pulse {
  animation-name: pulse;
}


@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}


.shake {
  animation-name: shake;
}


@keyframes swing {
  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}


.swing {
  transform-origin: top center;
  animation-name: swing;
}


@keyframes tada {
  0% {
    transform: scale(1);
  }

  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}


.tada {
  animation-name: tada;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */


@keyframes wobble {
  0% {
    transform: translateX(0%);
  }

  15% {
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    transform: translateX(0%);
  }
}


.wobble {
  animation-name: wobble;
}


@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}


.bounceIn {
  animation-name: bounceIn;
}


@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}


.bounceInDown {
  animation-name: bounceInDown;
}


@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(30px);
  }

  80% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
  }
}


.bounceInLeft {
  animation-name: bounceInLeft;
}


@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(-30px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}


.bounceInRight {
  animation-name: bounceInRight;
}


@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(-30px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}


.bounceInUp {
  animation-name: bounceInUp;
}


@keyframes bounceOut {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(.3);
  }
}


.bounceOut {
  animation-name: bounceOut;
}


@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}


.bounceOutDown {
  animation-name: bounceOutDown;
}


@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}


.bounceOutLeft {
  animation-name: bounceOutLeft;
}


@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}


.bounceOutRight {
  animation-name: bounceOutRight;
}


@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}


.bounceOutUp {
  animation-name: bounceOutUp;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.fadeIn {
  animation-name: fadeIn;
}


@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.fadeInDown {
  animation-name: fadeInDown;
}


@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.fadeInDownBig {
  animation-name: fadeInDownBig;
}


@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.fadeInLeft {
  animation-name: fadeInLeft;
}


@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}


@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.fadeInRight {
  animation-name: fadeInRight;
}


@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.fadeInRightBig {
  animation-name: fadeInRightBig;
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.fadeInUp {
  animation-name: fadeInUp;
}


@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.fadeInUpBig {
  animation-name: fadeInUpBig;
}


@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


.fadeOut {
  animation-name: fadeOut;
}


@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}


.fadeOutDown {
  animation-name: fadeOutDown;
}


@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}


.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}


@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}


.fadeOutLeft {
  animation-name: fadeOutLeft;
}


@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}


.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}


@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}


.fadeOutRight {
  animation-name: fadeOutRight;
}


@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}


.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}


@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}


.fadeOutUp {
  animation-name: fadeOutUp;
}


@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}


.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}


@keyframes flip {
  0% {
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    animation-timing-function: ease-in;
  }

  100% {
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    animation-timing-function: ease-in;
  }
}


.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  animation-name: flip;
}


@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}


.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInX;
}


@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}


.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInY;
}


@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}


.flipOutX {
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}


@keyframes flipOutY {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}


.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}


@keyframes lightSpeedIn {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}


.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}


@keyframes lightSpeedOut {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}


.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}


@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}


.rotateIn {
  animation-name: rotateIn;
}


@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}


.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}


@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}


.rotateInDownRight {
  animation-name: rotateInDownRight;
}


@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}


.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}


@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}


.rotateInUpRight {
  animation-name: rotateInUpRight;
}


@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}


.rotateOut {
  animation-name: rotateOut;
}


@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}


.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}


@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}


.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}


@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}


.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}


@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}


.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}


@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    transform: translateY(0);
  }
}


.slideInDown {
  animation-name: slideInDown;
}


@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    transform: translateX(0);
  }
}


.slideInLeft {
  animation-name: slideInLeft;
}


@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    transform: translateX(0);
  }
}


.slideInRight {
  animation-name: slideInRight;
}


@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}


.slideOutLeft {
  animation-name: slideOutLeft;
}


@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}


.slideOutRight {
  animation-name: slideOutRight;
}


@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}


.slideOutUp {
  animation-name: slideOutUp;
}


@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}


.hinge {
  animation-name: hinge;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */


@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}


.rollIn {
  animation-name: rollIn;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */


@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}


.rollOut {
  animation-name: rollOut;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}
.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}
.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('slick.eot');
    src: url('slick.eot?#iefix') format('embedded-opentype'), url('slick.woff') format('woff'), url('slick.ttf') format('truetype'), url('slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}
.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}
.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


/*# sourceMappingURL=styles.css.map*/