@charset "utf-8";
/* type your own CSS Document */
/*fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
.roboto{font-family: 'Roboto', sans-serif;}
h1, h2, h3, h4, h5, h6, p, a, div, span{font-family: 'Roboto', sans-serif;transition: 0.6s;box-sizing: border-box;}

a.clickClass:hover h3{color: #f16b4e!important;}
a:hover, a:active, a:focus{text-decoration: none !important;}
p{font-size: 16px;}

html{overflow-x: hidden;}
/*html{overflow-x: hidden!important;overflow-y: scroll!important;margin-top: 0px!important; }*/
body{overflow-x: hidden!important;background-color: #ffffff;height: auto!important;}
#wpadminbar{display: none;}
.nopadd{padding: 0px;}.nomarg{margin: 0px;}
.mrgTopComn{margin-top: 8%;}.paddTopComn{padding-top: 8%;}.inlineBlock{display: inline-block;margin-left: -4px;}
.CmnButns{padding: 8px 35px ;border-radius: 50px;background: #fff;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.4);font-size: 18px;font-weight: bold;color: #000;transition: 0.6s;}
.CmnButns:hover{box-shadow: inset -1px 2px 5px 0px rgba(0,0,0,0.4);}.clear{clear: both;}.centered{margin-left: auto;margin-right: auto;}

.mainBanner .CmnButns{margin-left: 10px;}


.ScreenHeight{}.display-inline{display: inline;}.fulWdth{width: 100%;}.js_same_height_parent{}.js_same_height_child{}
.fullWidth{width: 100%;}.inlineBlock{display: inline-block;}img{display: block;}
.upCase{text-transform: uppercase;}.mtTopSet{margin-top: 8%;}.fwBold{font-weight: bold;}
.paddingOff{padding: 0px!important;}.paddRemove{padding: 0px!important;}.margTop{margin-top: 20px!important;}
.full-width{width: 100%;}.nopadding{padding: 0px;}.vertMiddle{vertical-align: middle;}

.topMainHeader{padding-top: 1%;position: fixed;z-index: 10;transition: 0.5s;}.topMainHeader.active{background: #fff;padding-bottom: 10px;}
.topMainHeader .logoCarrier img{transition: 0.6s;}
.topMainHeader .logoCarrier .logoImage{transition: 0.6s;}.topMainHeader.active .logoCarrier .logoImage{margin-top: -96px;}
.topMainHeader .logoCarrier .logoIcon{transition: 1s;opacity: 1;}.topMainHeader.active .logoCarrier .logoIcon{opacity: 0;}
.navMenu{padding-top: 5%;transition: 0.8s;}.topMainHeader.active .navMenu{padding-top: 1%;}
.navMenu a{padding: 0 2px;font-size: 16px;font-weight: 600;color: #1b1b1b;text-transform: uppercase;margin-left: 12px;position: relative;transition: 0.6s;}
.navMenu a:after{content: '';position: absolute;bottom: -5px;width: 0px;right:5px;height: 3px;background: #00c6cd;transition: 0.6s;}
.navMenu a:hover:after, .navMenu a.now:after{width: 26px;}
.navig .logoOnly{display: none;}

.menuBars{display: none;cursor: pointer;}
.menuBars{width: 30px;height: 26px; position: relative;vertical-align: middle;}
.menuBars span{width: 100%;height: 4px;background: #00afeb;position: absolute;right: 0px;transition: 0.8s;}
.menuBars span.a{top: 0px;}.menuBars span.b{top: 8px;transition: 0.4s;}.menuBars span.c{top: 16px;}
.menuBars.active span.a{top: 10px;transform: rotate(-45deg);}.menuBars.active span.b{top: 0px;left: 101%;opacity: 0;transition: 0.1s;}.menuBars.active span.c{top: 10px;transform: rotate(45deg);}

.mainBanner{}
.mainBanner .slideHead{position: absolute;width: 80%;height: 30px;top: 0;bottom: 0;margin: auto; left: 5px;font-size: 50px;font-weight: bold;}
.demoSetUp{width: 140%;margin-top: -8%;}

.knowMoreBanner{position: absolute;bottom: 10%;left: 0px;}
.homePageServices a{color: #1b1b1b;}
.homePageServices a h5{margin-top: 10px!important;font-size: 18px;}
.homePageServices .col-3{padding: 0 25px!important;}

.nextPrevSliderBut{width: 120px;padding-top: 10px;margin: 4% auto 0 auto;}
.nextPrevSliderBut span{width: 40%;margin-left: 2%;cursor: pointer;}

.startupHome, .webAnlyhm, .developmentHm, .testHm, .launchHm, .paulRandHm{margin-top: 16%;}

.paddHomTxt{padding-top: 12%;}
.svgRound{width: 50%;position: absolute;top: -20%;z-index: 0;}
.leftRound .svgRound{left: -5%;}.rightRound .svgRound{right: -5%;}
.colorSet{fill:#ccc;}

.webAnlyhm .svgRound{top: -50%;width: 44%;}
.developmentHm .svgRound{top: -40%;width: 44%;}

.roundTextCarry{color: #fff;border-radius: 50%;box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3);z-index: 0;}
.imageHmeZ{z-index: 1;}

.webAnlyhm .roundTextCarry1{left: 40%;top: -35%;transform: rotate(30deg);padding:35px 10px;width: 120px;height: 120px;background: #0096ff;font-size: 18px;line-height: 20px;}
.webAnlyhm .roundTextCarry2{right: -15%;top: 5%;transform: rotate(-30deg);padding:60px 10px;width: 140px;height: 140px;background: #00b3ee;font-size: 20px;line-height: 20px;}

.developmentHm .roundTextCarry1{left: 10%;top: -24%;transform: rotate(-30deg);padding:75px 10px;width: 180px;height: 180px;background: #00b3ee;font-size: 18px;line-height: 20px;}
.developmentHm .roundTextCarry2{left: 26%;bottom: -18%;transform: rotate(-30deg);padding:60px 10px;width: 140px;height: 140px;background: #00b3ee;font-size: 20px;line-height: 20px;}
.developmentHm .roundTextCarry3{right: 6%;top: 8%;transform: rotate(30deg);padding:35px 10px;width: 90px;height: 90px;background: #fff;color: #000; font-size: 18px;line-height: 20px;}
.developmentHm .roundTextCarry4{left: 48%;bottom: -22%;width: 40px;height: 40px;background: #00b3ee;}

.testHm .roundTextCarry1{right: -10%;top: 15%;transform: rotate(30deg);padding:70px 10px;width: 150px;height: 150px;background: #00b3ee;font-size: 20px;line-height: 22px;}
.testHm .roundTextCarry2{left: 42%;bottom: -15%;transform: rotate(-20deg);padding:50px 10px;width: 140px;height: 140px;background: #fff;color: #000; font-size: 20px;line-height: 20px;}

.launchHm .roundTextCarry1{left: 10%;top: -15%;transform: rotate(-30deg);padding:40px 10px;width: 100px;height: 100px;background: #00b3ee;font-size: 18px;line-height: 22px;}
.launchHm .roundTextCarry2{right: 12%;top: -8%;transform: rotate(-30deg);padding:30px 10px;width: 80px;height: 80px;background: #00b3ee;font-size: 18px;line-height: 22px;}
.launchHm .roundTextCarry3{left: 45%;bottom: -12%;transform: rotate(-30deg);padding:50px 10px;width: 120px;height:120px;background: #fff;color: #000; font-size: 18px;line-height: 22px;}
.launchHm .roundTextCarry4{left: 8%;top: -25%;width: 40px;height: 40px;background: #00b3ee;}
.launchHm .roundTextCarry5{left: 35%;bottom: 2%;width: 40px;height: 40px;background: #fff;}

.aboutBanner{overflow: hidden;}
.aboutBanner .text{padding-top: 35%;z-index: 1;position: relative;}
.aboutBanner .svgAnimated{width: 56%;top: 0px;right: 0px;display: block;z-index: 0;}
.misVisCarry .a:after{width: 50%;background: #f9f9f9;position: absolute;top: -5%;left: -10%;content: "";border-radius: 50%;padding-top: 50%;z-index: 0;}
.misVisCarry .a h3, .misVisCarry .a p{position: relative;z-index: 2;}
.videoTesti{padding-top: 45.66%;}.videoTesti iframe{width: 100%;height: 100%;position: absolute;top: 0px;left: 0;}
.partnerAbt{padding-bottom: 6%;}

.teamAbt{background: #f6f6f6;}
.aboutSvg .steam{animation: infinite 5s smokeabt;transition: 0.5s;opacity: 0.5;}
.aboutSvg .keyA{animation: infinite 12s AsKey1;transition: 0.5s;fill:#2a142c;}
.aboutSvg .keyB{animation: infinite 14s AsKey2;transition: 0.5s;fill:#2a142c;}
.aboutSvg .keyC{animation: infinite 10s AsKey3;transition: 0.5s;fill:#2a142c;}
.aboutSvg .keyD{animation: infinite 8s AsKey4;transition: 0.5s;fill:#2a142c;}
.aboutSvg .keyE{animation: infinite 15s AsKey5;transition: 0.5s;fill:#2a142c;}
.aboutSvg .mouse{animation: infinite 10s mouse;transition: 0.5s;fill:#2a142c;transform-origin: center;}

.servicesCarry{margin-bottom: 75px;}
.servicesCarry img{margin: 0 auto;}
.servicesCarry .cntCarry{margin-top: 8%;}

.svgAnimated.worksHead{width: 85%;margin-top: 14%;}

.arrowScrollMark{width: 25px;height: 25px;left: 0;right: 0;margin: auto;bottom: 8%;font-size: 50px;color: #5cc5e5;animation: bncng 2s infinite;}
.worksFilter .clickFilt{padding: 4px 15px;font-weight: bold;cursor: pointer;}
.worksFilter .clickFilt.active{color: #00b9fd;}
.worksFilter .clickFilt .closeFilt{overflow: hidden;width: 0px;height: 0px;display: block;border-radius: 50%;position: absolute;left: 0;right: 0;margin: auto;bottom: 80%;cursor: pointer;}
.worksFilter .clickFilt.active .closeFilt{width: 20px;height: 20px;background: #1055b4;padding: 5px;}

.worksCarry{padding-bottom: 10%;min-height: 500px;}
.worksCarry .cryDiv{vertical-align: top;transition: 0.3s;max-height:0px;height: 0px;overflow: hidden;opacity: 0;z-index: 0;margin-top: 0px;}
.worksCarry .cryDiv.active{height:auto;max-height: 1000px;opacity: 1;z-index: 1;margin-top: 8%;padding: 10px;margin-bottom: 4%;}
.worksCarry .a{width: 60%;box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.2);vertical-align: top; }
.worksCarry .b{width: 30%;vertical-align: top;text-align: left;}
.worksCarry a{margin-top: 10%;display: inline-block;text-transform: uppercase;font-size: 14px;color: #3eacf9;font-weight: bold;margin-left: 4%;position: relative;}
.worksCarry .arw{width: 20px;vertical-align: middle;margin-left: 10px;position: relative;}
.worksCarry a:after{width: 30%;background: #3eacf9;height: 3px;position: absolute;top: -8px;content: "";left: -5%;}

.worksCarry .cryDiv:nth-child(odd) .a{float: left;}.worksCarry .cryDiv:nth-child(odd) .b{float: left;padding-left: 3%;}
.worksCarry .cryDiv:nth-child(even) .a{float: right;}.worksCarry .cryDiv:nth-child(even) .b{float: right;padding-right: 3%;}
.worksCarry .cryDiv:nth-child(odd) .a .headWork{position: absolute;left: 3%;text-align: left;top: 48%;z-index: 1;background: #005ec8;padding: 2px 10px;color: #fff;box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.4);}
.worksCarry .cryDiv:nth-child(even) .a .headWork{position: absolute;right: 3%;text-align: right;top: 48%;z-index: 1;background: #005ec8;padding: 2px 10px;color: #fff;box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.4);}

.tagCarry{padding-bottom: 5px;}
.tagCarry span{margin-right: 6px;margin-bottom: 2px; padding: 3px 6px;background: #cefaff;font-size: 12px;}

.blogCarry{margin-bottom: 5%;}
.blogCarry h5{margin-top: 15px;color: #000;font-size: 18px;text-transform: uppercase;position: relative;z-index: 1;}
.blogCarry .blgDiv{margin-top: 5%;}.blogCarry .blgDiv:nth-child(2){margin-top: 8%!important;}
.blogCarry .imageDiv:after{position: absolute;width: 200px;height: 200px;background: #d1d5da;border-radius: 50%; content: "";bottom:-10px;left:0px;z-index: 0;transition: 0.4s;}
.blogCarry .imageDiv img{z-index: 1;position: relative;transition: 0.3s;transform: scale(1,1);}
.blogCarry .blgDiv a:hover .imageDiv:after{bottom:-40px;left: 15px;background: #dcebff;}
.blogCarry .blgDiv a:hover .imageDiv img{transform: scale(1.01,1.01);}
.blogCarry .dateUpd{font-size: 12px;font-weight: bold;color: #293b4f;z-index: 1;transform: rotate(-90deg);left: -27%;top: 17.5%;letter-spacing: 1px;transition: 0.5s;}
.blogCarry .blgDiv a:hover .dateUpd{top: 20%;}

footer{padding: 2% 0;box-shadow: -1px 0px 9px 0px rgba(0,0,0,0.2);overflow: hidden;}
footer .firstRow .col-9{padding-top: 3%;}
footer .socialFoot{width: 160px;display: block;margin-top: 3%;}
footer .socialFoot a{position: absolute;width: 18px;height: 20px;top: 0px;}
footer .socialFoot a.fb{left: -2px;}footer .socialFoot a.tw{left: 25px;}footer .socialFoot a.ins{left: 55px;}footer .socialFoot a.ln{left: 85px;}footer .socialFoot a.yt{left: 113px;}footer .socialFoot a.wa{left: 142px;}.thrdRow{margin-top: 4%;}
.footNav a{color: #000;margin-right: 5%;display: inline-block;text-transform: uppercase;font-weight: bold;font-size: 15px;}
footer .logoOnly{opacity: 0.05;width: 30%;left: -10%;top: 2%;}

.paddBtmCmn{padding-bottom: 20px;}
.navig br{display: none;}

@media (max-width:1200px){
    .socialFixRight{left: 2%;}
    .topMainHeader.active .logoCarrier .logoImage {margin-top: -55%;}
}  
@media (max-width:990px){
    .menuBars{display: inline-block;z-index: 20;}
    .navig{display: none;}
    .mainBanner .slideHead{font-size: 33px;line-height: 34px;}
    .paddHomTxt{padding-top:4%;}
    .roundTextCarry, .svgRound{display: none;}
    .navMenu{}
    .navig{position: fixed;width: 102%;background: #fff;z-index: 15;right: 0;top: 0;display: block;padding-top: 0px;padding-left: 5%;transition: 0.5s;
        height: 0px;overflow: hidden;text-align: left!important;}
    .navig.active{height: 100%;padding-top: 25px;}
    .navig a{width: auto;font-size: 46px;line-height: 24px;}
    .navMenu a:after{bottom: 2px;width: 0px!important;}
    .navMenu a:hover{color: #00b3ee;}
    .navig br{display: inline-block;}
    .navig .logoOnly{display: block;width: 50%;right: 0px;top: 0px;opacity: 0.05;}
    .worksCarry .a{width: 50%;box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.2);vertical-align: top; }
    .worksCarry .b{width: 50%;vertical-align: top;text-align: left;}
   }  
@media (max-width:768px){ 
    .CmnButns{padding: 5px 20px;}
    .footNav{display: none;}
    .logoFooter, .firstRow .col-1{display: none;}
    footer{padding-top: 5%;}
}  
@media (max-width:560px){ 
    .mainBanner .slideHead{font-size: 25px;line-height: 26px;}
    .aboutBanner .svgAnimated{width: 70%;}
    .svgAnimated.worksHead{position: relative!important;margin-top: 0;width: 100%;}
    .worksFilter{padding-top: 30px;}
    .worksCarry .a{width: 90%;float: none!important;;}
    .worksCarry .b{width: 95%;float: none!important;;margin-top: 5%;}
}
@media (max-width:480px){ 
      .navig a{font-size: 40px;}
     .navig .logoOnly{display: block;width: 80%;right: -25%;}
}

@keyframes smokeabt {
    0%{opacity: 0.5;transform: translate(5px, 4px);}
    50%{opacity: 0.6;transform: translate(1px, 2px);}
    80%{opacity: 0.3;transform: translate(4px, 5px);}
    100%{opacity: 0.5;transform: translate(5px, 4px);}
}
@keyframes AsKey1 {
    4%{fill:#2a142c;} 4.9%{fill:#fff;}
    5.1%{fill:#2a142c;}100%{fill:#2a142c;}
}
@keyframes AsKey2 {
    25%{fill:#2a142c;} 25.9%{fill:#fff;}
    26.1%{fill:#2a142c;}100%{fill:#2a142c;}
}
@keyframes AsKey3 {
   50%{fill:#2a142c;} 50.9%{fill:#fff;}
    51.1%{fill:#2a142c;}100%{fill:#2a142c;}
}
@keyframes AsKey4 {
    68%{fill:#2a142c;} 68.9%{fill:#fff;}
    69.1%{fill:#2a142c;}100%{fill:#2a142c;}
}
@keyframes AsKey5 {
    85%{fill:#2a142c;} 85.9%{fill:#fff;}
    86.1%{fill:#2a142c;}100%{fill:#2a142c;}
}
@keyframes mouse {
    0%{transform: rotate(0deg);} 25%{transform: rotate(2deg);}
    50%{transform: rotate(0deg);}75%{transform: rotate(-2deg);}100%{transform: rotate(0deg);}
}
@keyframes bncng {
    0%{bottom: 8%;}50%{bottom: 6%;}100%{bottom: 8%;}
}


/* scroll different */
.wrapper {}
.box {-webkit-box-flex: none;-moz-box-flex: none;box-flex: none;-webkit-flex: none;-moz-flex: none;-ms-flex: none;flex: none;
}