@font-face {
    font-family: 'Conv_Geomanist-Bold';
    src: url("../fonts/Geomanist-Bold.eot");
    src: local("Γÿ║"), url("../fonts/Geomanist-Bold.woff") format("woff"), url("../fonts/Geomanist-Bold.ttf") format("truetype"), url("../fonts/Geomanist-Bold.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Conv_Geomanist-Book';
    src: url("../fonts/Geomanist-Book.eot");
    src: local("Γÿ║"), url("../fonts/Geomanist-Book.woff") format("woff"), url("../fonts/Geomanist-Book.ttf") format("truetype"), url("../fonts/Geomanist-Book.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Conv_Geomanist-Light';
    src: url("../fonts/Geomanist-Light.eot");
    src: local("Γÿ║"), url("../fonts/Geomanist-Light.woff") format("woff"), url("../fonts/Geomanist-Light.ttf") format("truetype"), url("../fonts/Geomanist-Light.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'geomanistregular';
    src: url('../fonts/geomanist-regular-webfont.eot');
    src: url('../fonts/geomanist-regular-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geomanist-regular-webfont.html') format('woff2'),
         url('../fonts/geomanist-regular-webfont.woff') format('woff'),
         url('../fonts/geomanist-regular-webfont.ttf') format('truetype'),
         url('../fonts/geomanist-regular-webfont.svg#geomanistregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    margin: 0;
    padding: 0
}

* {
    box-sizing: border-box
}

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

.clearfix {
    content: '';
    display: block;
    clear: both
}

 
.content {
    width: 100%;
    margin: 0 auto;
    float: left
}
#header-outer[data-box-shadow="small"]{
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;

}
#header-outer{
      transition:0.3s ease-in;
}
#header-outer.nav-up {
    top: -120px;
}#header-outer.nav-down {
    top: 0;
}
.header {
    float: left;
    width: 100%;
    padding: 0 3%;
}


.header-left {
    float: left;
    padding: 0;
    line-height: 0;
     padding: 20px 0;
}

.header-left img {
    width: 156px
}

.header-right {
    float: right;
    width: calc(100%-300px);
    padding: 0
}

.menubar {
    width: 100%;
    text-align: right
}
a.arrowRightPurple{
    position: relative; padding-left: 15px !important; 
    font-family: "Conv_Geomanist-Book";
    text-decoration: underline !important;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
}
.arrowRightPurple:after {  content: ""; width: 0; height: 0; position: absolute; top: 3px; left: 0;     border-top: 5px solid transparent;
      border-left: 7px solid #1e539c;
      border-bottom: 5px solid transparent; }

#header-outer{ padding: 0 !important }

.menubar ul {
    list-style-type: none;
    margin: 0
}

.menubar ul li {
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-family: "geomanistregular";
    position: relative;
}
.menubar ul ul { position: absolute; width: 100%; display: none; top: 80%; left: 0; padding: 0; text-align: left; background:#fff; border:solid 1px #ccc; }
.menubar ul li:hover  ul { display: block; } 
.menubar ul ul li {display: block; padding: 0 10px; }
.menubar ul ul li a{ padding: 10px 0; margin: 0 }
.menubar > ul > li:last-child > a:before{
    padding: 15px 0px;
    width: 0;
    text-align: center;
 
    color: #5ED0EB;
    border: 0;
    border: 1px 
    outline-color: #5ED0EB;
}

.menubar > ul > li:last-child > a{
    border:1px solid #000;
    padding: 9px 0px;
    width: 120px;
    text-align: center;
    margin-right: 0;
    transition:0.3s ease-in;
}
.menubar ul li a {
    text-decoration: none;
    color: #000000;
    margin: 0 20px;
    font-size: 14px;
    border: 1px solid #ffffff00;
    position: relative;
    display: block;
    letter-spacing: 1.5px;
    padding: 31px 0
}

.bar-icon {
    display: none
}

.wrapper {
    float: left;
    width: 100%;
    overflow: hidden
}

.about {
    margin: 85px auto 0px;
    text-align: center;
    padding: 30px 70px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width: 100%;
    position: relative
}

.about-left {
    float: left;
    width: 320px;
    padding: 0 25px
}

.about-right {
    float: right;
    width: calc(100% - 320px);
    padding: 0 25px
}

.about-head-section {
    padding: 20px;
    text-align: center;
    margin: 0 auto
}

.about-head-section h4 img {
    vertical-align: middle
}

.about-head-section h4 {
    font-family: "geomanistregular";
    font-size: 14px;
    line-height: 14px;
    color: #000;
    margin: 0px auto 21px;
    text-align: left;

}

.about-head-section h2 {
    font-size: 55px;
    line-height: 50px;
    color: "#212121";
    font-weight: 700;
    margin: 0 auto;
    text-align: left;
    font-family: "Conv_Geomanist-Bold"
}

.about-content-section {
    padding: 20px 10px;
    text-align: left;
    z-index: 2;
    position: relative
}

.about-content-section h3 {
    font-size: 35px; line-height: 1.1;
    padding: 0;
    margin: 0;
    font-family: "geomanistregular"
}

.about-content-section p {
    font-size: 16px;
    line-height: 24px;
    color: "#212121";
    font-weight: 100;
    margin: 37px auto 21px;
    font-family: "geomanistregular"
}

.about-content-section span {
    font-size: 14px;
    line-height: 14px;
    color: #000;
    vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-family: "geomanistregular"
}

.about-content-section img {
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0
}

.serviceWrap {
    margin: 85px auto 0px;
    text-align: center;
    padding: 30px 0px 30px 70px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width: 100%;
    position: relative
}

.serviceWrap-left {
    float: left;
    width: 320px;
    padding: 0 25px;
    z-index: 2;
    position: relative
}

.serviceWrap-right {
    float: right;
    width: calc(100% - 320px);
    padding: 0 0px 0 25px;
}

.serviceWrap-head-section {
    padding: 20px;
    text-align: center;
    margin: 0 auto
}

.serviceWrap-head-section h4 img {
    vertical-align: middle
}

.serviceWrap-head-section h4 {
    font-family: "geomanistregular";
    font-size: 14px;
    line-height: 14px;
    color: #000;
    margin:0 auto 21px;
    text-align: left;

}

.serviceWrap-head-section h2 {
    font-size: 55px;
    line-height: 50px;
    color: "#212121";
    font-weight: 700;
    margin: 0 auto;
    text-align: left;
    font-family: "Conv_Geomanist-Bold"
}

.serviceWrap-content-section {
    padding: 20px 10px;
    text-align: left;
    z-index: 2;
    position: relative
}

.serviceWrap-content-section h3 {
    font-family: "geomanistregular";
    font-size: 35px;
    padding: 0;
    margin: 0;
    font-family: "geomanistregular"
}

.serviceWrap-content-section p {
    font-size: 16px;
    line-height: 24px;
    color: "#212121";
    font-weight: 100;
    margin: 37px auto 21px;
    font-family: "geomanistregular"
}

.serviceWrap-content-section span {
    font-size: 14px;
    line-height: 14px;
    color: #000;
    vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-family: "geomanistregular"
}

.serviceWrap-content-section img {
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0
}

.service-slider {
    z-index: 2
}

.client {
    margin: 85px auto 0px;
    text-align: center;
    padding: 30px 70px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width: 100%;
    position: relative; z-index: 2
}

.client-left {
    float: left;
    width: 320px;
    padding: 0 25px
}

.client-right {
    float: right;
     width: calc(100% - 320px);
    padding: 0 25px
}

.client-head-section {
    padding: 20px;
    text-align: center;
    margin: 0 auto
}

.client-head-section h4 img {
    vertical-align: middle
}

.client-head-section h4 {
    font-family: "geomanistregular";
    font-size: 14px;
    line-height: 14px;
    color: #000;
    margin: 0px auto 21px;
    text-align: left
}

.client-head-section h2 {
    font-size: 55px;
    line-height: 50px;
    color: "#212121";
    font-weight: 700;
    margin: 0 auto;
    text-align: left;
    font-family: "Conv_Geomanist-Bold"
}

.client-content-section {
    padding: 20px 10px;
    text-align: left;
    z-index: 2;
    position: relative
}

.client-content-section h3 {
    font-family: "geomanistregular";
    font-size: 35px;
    line-height: 1.1;
    padding: 0;
    margin: 0
}

.client-content-section p {
    font-size: 16px;
    line-height: 24px;
    color: "#212121";
    font-weight: 100;
    margin: 37px auto 21px;
    font-family: "geomanistregular"
}

.client-content-section span {
    font-size: 14px;
    line-height: 14px;
    color: #000;
    vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-family: "geomanistregular"
}

.client-content-section img {
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0
}

.creationInhouse {
    margin: 85px auto 0px;
    text-align: center;
    padding: 30px 70px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width: 100%;
    position: relative
}

.creationInhouse-left {
    float: left;
    width: 20%;
    padding: 0 25px
}

.creationInhouse-right {
    float: right;
    width: 80%;
    padding: 0 25px
}

.creationInhouse-head-section {
    padding: 20px;
    text-align: center;
    margin: 0 auto
}

.creationInhouse-head-section h4 img {
    vertical-align: middle
}

.creationInhouse-head-section h4 {
    font-family: "geomanistregular";
    font-size: 14px;
    line-height: 14px;
    color: #000;
    margin: 16px auto 21px;
    text-align: left
}

.creationInhouse-head-section h2 {
    font-size: 55px;
    line-height: 50px;
    color: "#212121";
    font-weight: 700;
    margin: 0 auto;
    text-align: left;
    font-family: "Conv_Geomanist-Bold"
}

.creationInhouse-content-section {
    padding: 20px;
    text-align: left;
    z-index: 2;
    position: relative
}

.creationInhouse-content-section h3 {
    font-family: "geomanistregular";
    font-size: 35px;
    padding: 0;
    margin: 0
}

.creationInhouse-content-section p {
    font-size: 16px;
    line-height: 24px;
    color: "#212121";
    font-weight: 100;
    margin: 37px auto 21px;
    font-family: "geomanistregular"
}

.creationInhouse-content-section span {
    font-size: 14px;
    line-height: 14px;
    color: #000;
    vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-family: "geomanistregular"
}

.creationInhouse-content-section img {
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0
}

.footer {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px 14px;
    float: left
}

.footer-content {
    width: 100%;
    float: left;
    padding: 0;
    border-top: 1px solid grey;
    margin-bottom: 15px;
}

.footer-left {
    width: 50%;
    float: left;
    margin: 50px 0 10px
}

.footer-text {
    vertical-align: text-bottom;
    padding: 5px 0;
    font-family: "geomanistregular";
    font-size: 12px;
    line-height: 12px
}

.footer-left h4 {
    font-weight: bolder;
    font-size: 26px;
    line-height: 26px;
    margin: 11px 0 6px;
    vertical-align: top;
    font-family: "geomanistregular";
    color: #000000;
}


.footer-left img {
    width: 25px;
    vertical-align: middle
}

.footer-text span {
    vertical-align: middle;
    font-weight: 600;
    padding-left: 10px
}

.footer-right {
    width: 50%;
    float: right;
    margin: 50px 0 10px
}

.footer-list {
    text-align: right;
    vertical-align: top
}

.footer-list span {
    font-weight: 600
}

.footer-list .footer-last-list i {
    font-size: 6px;
    vertical-align: middle;
    padding: 4px
}

.footer-list span font {
    color: grey;
    font-weight: 100
}

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

.footer-list ul li {
    display: inline-block;
    padding: 10px 10px
}

.footer-list ul li a {
    color: #000000
}

.footer-last-list ul {
    list-style-type: none;
    padding: 0
}

.footer-last-list ul li {
    display: inline-block;
    padding: 0;
    vertical-align: middle;
    font-family: "geomanistregular";
    font-size: 12px;
    line-height: 12px;font-weight: bold;
}

.foot-list li:last-child {color: #9C9C9C; font-weight: normal;    padding-left: 15px;font-family: "Conv_Geomanist-Light"; line-height: 2;}
.foot-list li:last-child > span > img{width: 20px;}
.service {
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    /*cursor: pointer*/
}
/*.serviceFlex{
    display: flex;
    flex-wrap: wrap;
}*/
.service-inner {
    padding: 20px 20px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    width: 250px;
    margin: 0;
    /*height: 100%;*/
    height: 255px;
}

.service .service-h3 h3{
    text-align: center;
    font-size: 14px;
    padding: 0;
    font-family: "geomanistregular";
    line-height: 20px;
    color: #000;
    padding: 0 10px
}

.slick-slide img {
    margin: 0;
    width: 70%;
    padding: 0px;
    display: inline-block;
}

.client-inner {
    width: 100%;
    padding: 12px 0;
    margin: 0 auto
}
.client-inner .row .col-md-12{ display: flex; flex-wrap: wrap;  }
.client-logo {
  
}

.col-md-12 {
    width: 100%;
    float: left
}

.col-md-2 {
    width: 19.99%;
    float: left
}

.menubar ul ul li a:before{ padding: 10px 0 }
.menubar ul li a:before {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0;
    /* border-bottom: 2px solid #000000; */
    color: #000;
    /* background-color: #fff; */
    content: attr(data-hover);
    -webkit-transition: ease-in-out 0.3s;
    -moz-transition: ease-in-out 0.3s;
    transition: ease-in-out 0.3s;
    white-space: nowrap;
    text-decoration: none;
    color: #000000;
    padding:31px 0;
    letter-spacing: 1.5px
}

.menubar ul li a:hover:before {
    width: 100%
}

.menubar ul li:nth-child(5n+1) a:before {
    color: #f01038;
    /* border-bottom: 2px solid #f01038;
    outline-color: #FBD933 */
}

.menubar ul li:nth-child(5n+2) a:before {
    color: #E93E33;
    /* border-bottom: 2px solid #E93E33;
    outline-color: #E93E33 */
}

.menubar ul li:nth-child(5n+3) a:before {
    color: #7147E6;
    /* border-bottom: 2px solid #7147E6;
    outline-color: #7147E6 */
}

.menubar ul li:nth-child(5n+4) a:before {
    color: #7AF4AF;
    /* border-bottom: 2px solid #7AF4AF;
    outline-color: #7AF4AF */
}

.menubar ul li:nth-child(5n+5) a:before {
    color: #5ED0EB;
    /* border-bottom: 2px solid #5ED0EB;
    outline-color: #5ED0EB */
}
.menubar > ul > li:last-child > a:before { display: none }

.menubar > ul > li:last-child:hover > a {background-color: #000000; color: #ffffff;}

.ditto {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(40%, -30%) rotate(-50deg) scale(0.7);
    z-index: 1
}

.ditto svg {
    width: 600px;
    height: 480px
}

.ditto svg path {
  
    fill: #f01038
}

 

.ditto2 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-25%, 10%) rotate(240deg) scale(0.9);
    z-index: 1
}

.ditto2 svg {
    width: 600px;
    height: 480px
}

.ditto2 svg path {
   /* animation: ditto2 5s linear infinite;
    -moz-animation: ditto2 5s linear infinite;*/
    fill: #7148E6
}
 

.client-logo img {
    transition: 0.3s ease-in-out;
    max-width: 100%;
    width: 160px;
    height: 160px;
    object-fit: contain;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.client-logo img:hover {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    
}

.bannerMainWrap {
    float: left;
    width: 100%;
    position: relative;
    height: calc(100vh - 85px)
}

.bannerMainWrap .listingBanner {
    float: left;
    width: 100%;
    list-style-type: none;
    display: block;
    padding: 0;
    height: 100%;
    margin: 0
}

.bannerMainWrap .listingBanner li {
    display: inline-block;
    width: 100%;
    height: 100%
}

.bannerMainWrap .listingBanner li .innerBannerContent {
    float: left;
    max-width: 33%;
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0
}

.bannerMainWrap .listingBanner li .innerBannerContent p {
    font-family: "geomanistregular";
    font-size: 14px;
    line-height: 14px;
    padding: 20px 0px;
    color: #000;
    margin: 0
}

.bannerMainWrap .listingBanner li .innerBannerContent h2 {
    font-size: 75px;
    line-height: 76px;
    font-family: "Conv_Geomanist-Bold";
    color: "#212121";
    padding: 10px 0px 20px;
    margin: 0;
}
.bannerMainWrap .listingBanner li .innerBannerContent span:last-child {
    width: 300px;
    display: block;
}
.bannerMainWrap .listingBanner li .innerBannerContent span {
    font-size: 14px;
    line-height: 24px;
    color: #000;
    font-family: "geomanistregular";
    padding: 20px 0px
}

.bannerMainWrap .listingBanner li .innerBannerContent span img {
    vertical-align: middle
}

.bannerMainWrap .bannerSvgAni {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.bannerMainWrap .bannerSvgAni image{ width: 100% }

.bannerMainWrap .bannerSvgAni svg {
    width: 70vh;
    margin: 0 auto
}

.bannerMainWrap .bannerSvgAni svg .circle {
    display: none
}

.bannerMainWrap .slideNumbers {
    float: left;
    width: auto;
    position: absolute;
    bottom: 8%;
    padding: 20px 3%;
}

.bannerMainWrap .slideNumbers span {
    font-size: 14px;
    line-height: 14px;
    font-family: "geomanistregular";
    margin: 0 5px;
    color: #000
}

.bannerMainWrap .toScrolltext {
    float: left;
    width: auto;
    position: absolute;
    bottom: 80px;
    padding: 10px 50px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
    transition: ease-in-out 2s
}

.bannerMainWrap .toScrolltext span {
    font-size: 12px;
    line-height: 12px;
    font-family: "geomanistregular";
    margin: 0 5px;
    color: #000;
    text-transform: capitalize
}

.bannerMainWrap .toScrolltext span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 2px solid #000;
    width: 40px;
    height: 1px
}

.bannerMainWrap .bannerSocial {
    width: auto;
    float: left;
    position: absolute;
    bottom: 8%;
    right: 0;
    padding: 10px 2.3%;
}

.bannerMainWrap .bannerSocial ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.bannerMainWrap .bannerSocial ul li {
    display: inline-block;
    padding: 10px
}

.bannerMainWrap .bannerSocial ul li a {
    color: #000000
}

#nav-icon .fa-times {
    display: none
}

.arrow svg {
    width: 25px;
    height: 38px
}

.arrow {
    display: inline-block;
    cursor: pointer;
    line-height: 0;
    position: absolute;
    bottom: -100px
}
.startBtnanimation .arrow:first-child { animation: leftBnrArrow 3s forwards; bottom: 50%}
.startBtnanimation .arrow:last-child { animation: rightBnrArrow 3s forwards; bottom: 50%}

.arrow:first-child {
    left: 3%;
    transform: rotate(180deg);
   
}
.logoSliderHeader{float: left; position: relative; height: 88px; margin-left: 34px;}
/*.logoSlider{ position: absolute; top: 50%;transform: translateY(-50%); }*/
.logoSliderHeader  > div {position: absolute; line-height: 0; top: 50%;  left: 0; transform: translateY(-50%) rotateX(180deg); backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;     transition: ease-in-out 0.6s;  }
.logoSliderHeader  > div.active {transform: translateY(-50%) rotateX(0deg);  }
/*.logoSliderHeader  > div img{vertical-align: middle;}*/
.footer-left h4:hover .schbangColors{transition: ease-in-out 0.6s; animation: colorChange 1s infinite}
/*.schbangColors{ color: #000000;}*/
.crossLogo{
    position: absolute;
    right: 100%; margin-right: 13px;
    top: 50%;
    width: 12px;height: 12px; line-height: 0; margin-top: -6px; 
    transition: transform ease-in-out 0.3s;
}
.crossLogo img{
    width:100%;
}
.logoSliderHeader .clientHeadLogo{width: 45px;filter: grayscale(1);}
@keyframes colorChange {
    0%{
        color: #5ED0EB;
    }
    20%{
        color: #E93E34;
    }
    40%{
        color: #1e539c;
    }
    60%{
        color: #FBD832;
    }
    80%{
        color: #7BF4AF;
    }
    100%{
        color: #5ED0EB;
    }
}
@keyframes leftBnrArrow {
    0% {
        bottom: -100px;
        transform: rotate(180deg);
         left: calc(50% - 25px);
    }
    50% {
        bottom: 50%;
        transform: rotate(0deg)
    }
    100% {
        bottom: 50%;
         
    }
}

.arrow:last-child {
    left:calc(97% - 25px);
    
}

@keyframes rightBnrArrow {
    0% {
        bottom: -100px;
        transform: rotate(0deg);
         left: calc(50% - 25px);
    }
    50% {
        bottom: 50%;
        transform: rotate(180deg)
    }
    100% {
        bottom: 50%;
        
    }
}

.aAni {
    animation: aAni .3s linear forwards
}

@keyframes aAni {
    0% {
        d: path("m 607.228,533.166 c -0.64,0 -1.28,-0.244 -1.768,-0.732 -0.977,-0.976 -0.977,-2.56 0,-3.536 L 632.29135,501.122 605.46,473.346 c -0.977,-0.976 -0.977,-2.559 0,-3.535 0.976,-0.977 2.56,-0.977 3.536,0 l 29.544,29.543 c 0.977,0.976 0.977,2.56 0,3.536 l -29.544,29.544 c -0.488,0.488 -1.128,0.732 -1.768,0.732 z")
    }
    40% {
        d: path("m 607.228,533.166 c -0.64,0 -1.28,-0.244 -1.768,-0.732 -0.977,-0.976 -0.977,-2.56 0,-3.536 l -7.53957,-27.776 7.53957,-27.776 c -0.977,-0.976 -0.977,-2.559 0,-3.535 0.976,-0.977 2.56,-0.977 3.536,0 l 29.544,29.543 c 0.977,0.976 0.977,2.56 0,3.536 l -29.544,29.544 c -0.488,0.488 -1.128,0.732 -1.768,0.732 z")
    }
    80% {
        d: path("m 607.228,533.166 c -0.64,0 -1.28,-0.244 -1.768,-0.732 -0.977,-0.976 -0.977,-2.56 0,-3.536 l 5.00117,-27.776 -5.00117,-27.776 c -0.977,-0.976 -0.977,-2.559 0,-3.535 0.976,-0.977 2.56,-0.977 3.536,0 l 29.544,29.543 c 0.977,0.976 0.977,2.56 0,3.536 l -29.544,29.544 c -0.488,0.488 -1.128,0.732 -1.768,0.732 z")
    }
    100% {
        d: path("m 607.228,533.166 c -0.64,0 -1.28,-0.244 -1.768,-0.732 -0.977,-0.976 -0.977,-2.56 0,-3.536 l 0.0468,-27.776 -0.0468,-27.776 c -0.977,-0.976 -0.977,-2.559 0,-3.535 0.976,-0.977 2.56,-0.977 3.536,0 l 29.544,29.543 c 0.977,0.976 0.977,2.56 0,3.536 l -29.544,29.544 c -0.488,0.488 -1.128,0.732 -1.768,0.732 z")
    }
}

.rAni {
    animation: rAni .3s linear forwards
}

@keyframes rAni {
    0% {
        d: path("m 607.228,533.166 c -0.64,0 -1.28,-0.244 -1.768,-0.732 -0.977,-0.976 -0.977,-2.56 0,-3.536 l 0.0468,-27.776 -0.0468,-27.776 c -0.977,-0.976 -0.977,-2.559 0,-3.535 0.976,-0.977 2.56,-0.977 3.536,0 l 29.544,29.543 c 0.977,0.976 0.977,2.56 0,3.536 l -29.544,29.544 c -0.488,0.488 -1.128,0.732 -1.768,0.732 z")
    }
    100% {
        d: path("m 607.228,533.166 c -0.64,0 -1.28,-0.244 -1.768,-0.732 -0.977,-0.976 -0.977,-2.56 0,-3.536 L 632.29135,501.122 605.46,473.346 c -0.977,-0.976 -0.977,-2.559 0,-3.535 0.976,-0.977 2.56,-0.977 3.536,0 l 29.544,29.543 c 0.977,0.976 0.977,2.56 0,3.536 l -29.544,29.544 c -0.488,0.488 -1.128,0.732 -1.768,0.732 z")
    }
}
.ui-loader{display: none !important}
/* .center {
    position: absolute;
    left: 50%;
    top: 50%
} */

@-webkit-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translate(-50%, 0)
    }
    40% {
        -webkit-transform: translate(-50%, -30px)
    }
    60% {
        -webkit-transform: translate(-50%, -15px)
    }
}

@-moz-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translate(-50%, 0)
    }
    40% {
        -moz-transform: translate(-50%, -30px)
    }
    60% {
        -moz-transform: translate(-50%, -15px)
    }
}

@-o-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -o-transform: translate(-50%, 0)
    }
    40% {
        -o-transform: translate(-50%, -30px)
    }
    60% {
        -o-transform: translate(-50%, -15px)
    }
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0)
    }
    40% {
        transform: translate(-50%, -30px)
    }
    60% {
        transform: translate(-50%, -20px)
    }
    100% {
        transform: translate(-50%, 0px)
    }
}

.portfolio-filters-inline[data-alignment="left"] .container > ul{
    padding-left: 0;
}


/*mobile*/

@media (max-width:1442px){
.bannerMainWrap .listingBanner li .innerBannerContent h2{
    font-size: 55px;
    line-height: 56px;
    margin: 0 0 15px;
}
.bannerMainWrap .listingBanner li .innerBannerContent p{
    margin: 0;
}
/*.bannerMainWrap .bannerSvgAni svg {
    width: 500px;
}*/
.client-logo{
    padding: 20px 10px;
}


}
@media (max-width:1026px){
    .client-logo img{
        height: 90px;
    }
}


@media (max-width:768px){
body{
     margin:0;
     padding: 0;
}
.portfolio-wrap  .element{overflow: hidden;}
 .container{
     margin: 0 auto;
     width:100%;
     padding: 0;
     float: none;
}

 .content{
     width:100%;
     margin:0 auto;
     float: none;
}
 .header{
     float: left;
     width:100%;
     padding:0px;
}
.bannerMainWrap{
    margin-top: 20px;
}
 .header-left{
    float: left;
    padding: 10px 15px;
    text-align: center;
    width: auto;
}
 .header-right{
    float: right;
    width: auto;
    padding-right: 10px;
}
.bar-icon{
    display: block;
    color: #000000;
    text-align: right;
    margin: 0px auto;
    line-height: 0;
}
.bar-icon i{
    cursor: pointer;
}
.portfolio-filters-inline .container > ul a{
    padding-left: 0;
}
.menubar{
    width: 100%;
    text-align: center;
    /*display: none;*/
    z-index: 999;
    min-height: 100vh;
    position: absolute;
    background-color: #fff;
    padding: 0;
    margin: 10px auto 0;
    color: #ffffff;
    right: 100%;
    transition: ease-in-out 0.8s;
}
.menubar > ul > li:last-child > a {width: 100%}
.menubar ul ul,.menubar ul li:hover ul{display: block; position: static; text-align: center; border: 0; }
.menubar > ul > li:nth-child(2) > a {display: none}
.menubar ul li a{-webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0);}
.menubar ul li a:focus, .menubar ul li a:focus-within, .menubar ul li a:active{
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}
.menubar ul li:focus, .menubar ul li:focus-within, .menubar ul li:active{
    outline: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: rgba(0,0,0,0);
}
.menu-active{
    right: 0;
}
.menubar ul li{
    width: 100%;
    -webkit-tap-highlight-color:transparent;
}
.posFixed{
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
 .menubar ul{
     list-style-type: none;
     padding: 0;
}

.header-left img {
    width: 121px;
}
 .menubar ul li{
     display: block;
     padding: 0px 10px;
     font-weight: 700;
     cursor: pointer;
     color: #ffffff;
}
.menubar ul li a{
     text-decoration: none;
     
   
     padding: 10px;
     margin: 0 auto;
      border:1px solid transparent;
}

.menubar ul li a:before{
    padding: 10px 0;
    margin: 0 auto;
    content: none;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#000;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}

.bannerSocial ul li a [class*="fa-"]{
    width: 22px;
    height: 2px;
}
/*about start*/
.about{
    margin:0 auto;
    text-align: center;
    padding: 50px 6px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width:100%;
}
.about-left{
    float: none;
    width:100%;
    position: relative;
    z-index: 2;
}
.about-right{
    float:none;
    width: 100%;
    padding:0 ;
}
.about-head-section{
        padding: 0px 0;
    text-align: center;
    margin: 0;
}
.about-head-section h4 img{
    vertical-align: middle;
}
.about-head-section h4{
      font-size: 14px;
    margin: 5px auto;
}
.about-head-section h2{
    font-size: 38px;
    font-weight: 700;
    margin: 0 auto;
}
.about-content-section{
    padding: 20px;
   
}
.about-content-section h3{
        font-size: 16px; line-height:1.3;
    padding: 0;
    margin: 0;
}
.about-content-section p{
    font-size: 15px;
    font-weight: 100;
    margin: 18px auto;
}
.about-content-section span{
        vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-size: 14px;
    }
.about-content-section img{
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
}
/*about end*/


.serviceWrap{
    margin:0 auto;
    text-align: center;
    padding: 50px 6px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width:100%;
}
.serviceWrap-left{
    float: none;
    width:100%;
}
.serviceWrap-right{
    float:none;
    width: 100%;
    padding:0 ;
}
.serviceWrap-head-section{
        padding: 0px 0;
    text-align: center;
    margin: 0;
}
.serviceWrap-head-section h4 img{
    vertical-align: middle;
}
.serviceWrap-head-section h4{
      font-size: 14px;
    margin: 5px auto;
}
.serviceWrap-head-section h2{
    font-size: 38px;
    font-weight: 700;
    margin: 0 auto;
}
.serviceWrap-content-section{
    padding: 20px;
   
}
.serviceWrap-content-section h3{
        font-size: 16px; line-height:1.3;
    padding: 0;
    margin: 0;
}
.serviceWrap-content-section p{
    font-size: 15px;
    font-weight: 100;
    margin: 18px auto;
}
.serviceWrap-content-section span{
        vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-size: 14px;
    }
.serviceWrap-content-section img{
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
}


.client{
    margin:0 auto;
    text-align: center;
    padding: 50px 6px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width:100%;
}
.client-left{
    float: none;
    width:100%;
}
.client-right{
    float:none;
    width: 100%;
    padding:0 ;
}
.client-head-section{
        padding: 0px 0;
    text-align: center;
    margin: 0;
}
.client-head-section h4 img{
    vertical-align: middle;
}
.client-head-section h4{
      font-size: 14px;
    margin: 5px auto;
}
.client-head-section h2{
    font-size: 38px;
    font-weight: 700;
    margin: 0 auto;
}
.client-content-section{
    padding: 20px;
     
}
.client-content-section h3{
        font-size: 16px; line-height:1.3;
    padding: 0;
    margin: 0;
}
.client-content-section p{
    font-size: 15px;
    font-weight: 100;
    margin: 18px auto;
}
.client-content-section span{
        vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-size: 14px;
    }
.client-content-section img{
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
}
.client-logo img{
    width: 150px;
    height: 150px;
}

.creationInhouse{
    margin:0 auto;
    text-align: center;
    padding: 6px;
    font-size: 20px;
    font-weight: 700;
    float: left;
    width:100%;
}
.creationInhouse-left{
    float: none;
    width:100%;
}
.creationInhouse-right{
    float:none;
    width: 100%;
    padding:0 ;
}
.creationInhouse-head-section{
        padding: 20px 0;
    text-align: center;
    margin: 0;
}
.creationInhouse-head-section h4 img{
    vertical-align: middle;
}
.creationInhouse-head-section h4{
      font-size: 14px;
    margin: 5px auto;
}
.creationInhouse-head-section h2{
    font-size: 38px;
    font-weight: 700;
    margin: 0 auto;
}
.creationInhouse-content-section{
    padding: 20px;
    text-align: justify;
}
.creationInhouse-content-section h3{
        font-size: 16px;
    padding: 0;
    margin: 0;
}
.creationInhouse-content-section p{
    font-size: 15px;
    font-weight: 100;
    margin: 18px auto;
}
.creationInhouse-content-section span{
        vertical-align: middle;
    margin: 0;
    text-align: left;
    padding: 0;
    font-size: 14px;
    }
.creationInhouse-content-section img{
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
}


/*client start*/
.col-md-2{
    width:49%;
    float: left;
    display: inline-block;
    
}
/*client end*/
/*footer start*/
.footer {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    float: none;
}
.footer-content {
    width: 100%;
    float: left;
    padding: 0;
    border-top: 1px solid grey;
    margin-bottom: 50px;
}
.footer-left {
    width: 100%;
    float: none;
        margin: 20px 0 10px;
}
.footer-left h4 {
    text-align: center;
        margin: 0 auto;
            font-size: 18px;
}
.footer-right {
    width: 100%;
    float: none;
    margin: 20px 0 10px;
}
.footer-list {
    text-align: center;
        margin: 10px auto;
        padding: 0;
}
.footer-list ul {
    padding: 0;
        margin: 0;
}
.footer-list ul li {
    display: inline-block;
    padding: 0px 10px;
}
.footer-text{
        text-align: center;
    margin: 5px auto;
    padding: 0;
}
.footer-last-list ul li {
    display: inline-block;
    padding: 3px 0;
    vertical-align: middle;
}
/*footer end*/
/*slick slider*/
.service{
    margin: 0 auto;
    text-align: center;
    padding:10px;
}
.service-inner {
    padding: 19px 4px 0;
    border: 1px solid grey;
    border-radius: 8px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    min-height: 270px;
}
.slick-slide .service-inner img{
    max-width: 180px;
    margin: 0 auto;
}
/*slick slider*/
.ditto{
    transform: translate(40%, -20%) rotate(200deg) scale(0.5);
}
.ditto2{
    transform: translate(-40%, -20%) rotate(160deg) scale(0.6);
}
.client-logo{
    padding: 20px 10px;
    text-align: center;
}

.bannerMainWrap .bannerSvgAni{
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}
.bannerMainWrap .bannerSvgAni svg{
    width: 50vh;
}
.bannerMainWrap .listingBanner li .innerBannerContent{
    max-width: 80%;
    transform: translateY(0%);
}
.bannerMainWrap .listingBanner li .innerBannerContent h2{
    font-size: 35px;
    line-height: 40px;
    padding: 0px 0px;
    margin: 10px 0;
}
.bannerMainWrap .listingBanner li .innerBannerContent p{
    font-size: 12px;
    line-height: 15px;
    padding: 0px 0px;
}
.toScrolltext{
    display: none;
}
.footer-left h4 .schbangColors{
    transition: ease-in-out 0.6s;
    animation: colorChange 3s infinite;
}
.crossLogo{
    transform: translate(-20%, -50%);
}

}


@media (max-width:570px){
    .bannerMainWrap .bannerSvgAni svg{ width: 60vw; }
    .logoSliderHeader{ height: 48px; margin-left: 14px; }
    #header-outer{padding-bottom: 6px !important}
    .bannerMainWrap .bannerSvgAni { position: static;    text-align: center; transform: translate(0,0); }
    .bannerMainWrap .listingBanner li .innerBannerContent { position: static; transform: translate(0,0); width: 100%; padding: 0 40px; max-width: 100% }
    .bannerMainWrap .listingBanner li .innerBannerContent h2{font-size: 32px; line-height: 1.2}
    .bannerMainWrap .listingBanner li .innerBannerContent span {padding: 10px 0}
    .bannerMainWrap .slideNumbers,.bannerMainWrap .bannerSocial{bottom: 80px; padding: 25px 3%;}
    .about-content-section p,.serviceWrap-content-section p, .client-content-section p {display: none}
    .about-content-section h3,.serviceWrap-content-section h3, .client-content-section h3 {font-weight: normal; margin-bottom: 15px;}
    .ditto2 { top: 390px;  }
    #portfolio-extra .swiper-slide .image-bg { background-size: contain; -webkit-background-size: contain}
}
@media (max-width: 330px){
    .bannerMainWrap .slideNumbers, .bannerMainWrap .bannerSocial {
        bottom: 0;
    }
}
/*.bannerMainWrap{
    height: calc(100vh - 140px);
}*/


/*#nav-bars {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-bars span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: #000000;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-bars span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-bars span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-bars span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-bars.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-bars.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-bars.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}
*/

}
/*game*/
.gameWrap {
  background-color: black;
}

#pacman {
  height: 470px;
  width: 382px;
  border-radius: 5px;
  margin: 20px auto;
}

#shim {
  font-family: 'Permanent Marker', cursive;
  position: absolute;
  visibility: hidden
}
 

/*prashant 22-10-2019*/
.footer-left,.footer-right {width: 20%; padding: 0px 10px;}

.wrapfoot {width: 17%; float: left; margin: 35px 0px 10px;padding: 0px 10px;}

.wrapfoot:last-child(5) {width: 20% !important; float: left; margin: 35px 0px 10px;}


.footer-content .wrapfoot ul {padding: 0; margin: 0;}
.footer-content .wrapfoot ul li a > h6 {color: #000000; font-size: 16px; line-height: 1; margin-bottom: 20px; display: block; margin-top: 30px;}
.footer-content .wrapfoot ul li a {color: #000000; font-size: 12px; line-height: 1; margin-bottom: 14px; display: block;}
.footer-content .wrapfoot p {color: #000000; font-size: 12px; line-height: 1.4; margin-bottom: 14px; display: block; padding: 2px 0px; margin: 3px 0px;}
.newswrap {width: 30%; padding: 0px 10px; float: right;}
.footer-content .wrapfoot span .minimal-form-input {padding: 0;}
.footer-content .wrapfoot span .coustcta {margin-top: 20px; padding: 10px 20px; border-radius: 0 !important; border: 2px solid #000000!important;; font-size: 10px; 
    text-transform: capitalize !important; font-weight: 600; background-color: #fff !important; color: #000; transition: all 0.6s;}
.footer-content .wrapfoot span .coustcta:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}



.footermidwrap {width: 60%; float: left; display: block;}


@media (max-width:768px){
    .footer-left, .footer-right {width:100%}
    .wrapfoot {width: 50%;margin: 10px 50px 10px;}
    .footer-right {width: 100%; float: left;}
    .newswrap {width: 100% !important; margin: 10px 0px 50px;}
    .footer-content .wrapfoot ul li a > h6 {margin-top: 0;}
    .footermidwrap {width: 100%;}
    
    
    
    
    
    
}
.canvasWrapp{ width: 100%; height:calc(100% + 90px); margin-top: -90px; position: fixed;}
.canvasWrapp canvas { height: calc(100% - 90px) !important; width: 100%; margin-top: 90px;;}
.arrowRightPurple + .arrowRightPurple { margin-left: 15px;;}
/* 
body{cursor:url("../img/new-home-images/cursor.png"),auto; }
body a:hover, body button:hover, .arrow:hover {cursor:url("../img/new-home-images/cursor.png"),auto;}  */


/*Prashant 7-11-2019 popup css*/
.coustoverlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; z-index: 9999; display: none;}

.popupConten {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 800px;
    -webkit-transform: translate(-50%,-50%);
    cursor: pointer;
    z-index: 9999999;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.popupVideo {
    padding-top: 55%;
    position: relative;
    width: 100%;
}
.popupVideo iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


.menubar ul ul li {
    display: flex;
    white-space: nowrap;
}


.custom-breadcums ul.newsroom_cats {
    padding: 0;
}
.custom-breadcums ul.newsroom_cats li {
    display: inline-block;  
}
.custom-breadcums ul.newsroom_cats li a {
    color: #999;
    padding: 0px 10px;
    margin: 7px 0px;
    font-size: 12px;
    line-height: 14px;
    display: inline-block;
}
.custom-breadcums ul.newsroom_cats li a.active {
    color: #000;
}

.blogs-inline-cats .inner-wrap h1 {
    margin: 0px;
    line-height: 1;
}

@media (max-width:768px){
    .menubar ul ul li {display: block;}
}


@media (min-width:768px){
    .bannerMainWrap .listingBanner li .innerBannerContent {max-width: 30%;}
    .bannerMainWrap .listingBanner li .innerBannerContent h2 {font-size: 70px; line-height: 70px;}
}