/*start of top Banner*/
canvas {
    display: block;
    vertical-align: bottom;
}

.home-banner{ position:relative; width:100%; height:796px; display: flex;
    align-items: center;}
.banner-cont{ position:absolute; z-index:5; text-align:center; width:100%; /*top:50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%);*/}
.banner-cont p{ font-size:48px; color:#ffffff; font-family: 'celiasthin'; line-height:normal;text-shadow:1px 1px 1px rgba(0,0,0,.4);}
.banner-cont h1{ font-size:62px; color:#ffffff;font-family: 'celiasbold'; letter-spacing:-2px; margin-bottom:70px;text-shadow:1px 1px 1px rgba(0,0,0,.4);}
.banner-cont .btn-default-line{background-color: #efa820; color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.4)}
.btn-default-line:hover .btnOverlay{background-color: #e29a10;}
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0d1825;
    background-image: -webkit-gradient(linear, left bottom, right top, from(#6d327c), color-stop(#485DA6), color-stop(#00a1ba), color-stop(#00BF98), to(#36C486));
    background-image: -webkit-linear-gradient(left bottom, #5e2b6b, #384c8e, #077a8c, #03a785, #1c8255);
    background-image: -o-linear-gradient(left bottom, #5e2b6b, #384c8e, #077a8c, #03a785, #1c8255);
    background-image: linear-gradient(to right top, #5e2b6b, #384c8e, #077a8c, #03a785, #1c8255);
}
.banner-cont ul li{ display:inline-block; margin:0 10px;}
.banner-cont ul li a{ width:287px;}
.icAsignable{ width:60px; height:62px; background-color:#ffbf44; background-image:url("../img/footer_sprite.svg"); background-repeat:no-repeat; background-position: 20px -1280px; position:absolute; top:0; left:0; z-index:5;}
.banner-cont ul li:last-child a.aulbtn-deft-line{ padding:24px 30px 23px 92px;}
/*End of Top Banner*/

/*start of home portfolio*/
.home-portfolio{ background-color:#fff; padding:60px 0px; text-align:center;}
.home-portfolio .top-heading h3 span{ font-family: 'webreinventv4';}
.visibleNearby {
    width: 100%;
}
.visibleNearby .rsGCaption {
    font-size: 16px;
    line-height: 18px;
    padding: 12px 0 16px;
    background: #141414;
    width: 100%;
    position: absolute;
    float: left;
    left: auto;
    bottom: auto;
    text-align: center;
    display: none;
}
.visibleNearby .rsGCaption span {
    display: block;
    clear: both;
    color: #bbb;
    font-size: 14px;
    line-height: 22px;
}
/* Scaling transforms */

.visibleNearby .rsSlide img {
    opacity: 0.45;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    margin-top: 50px !important; box-shadow: 0px 0px 7px 0px rgba( 35, 66, 104,.2 ); -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;
}
.visibleNearby .rsActiveSlide img {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

#portofolioPopup .mCSB_container img{ margin-bottom:30px;}

/*End of home portfolio*/

/*start of home Serverice*/
.home-services{ background-color:#f3f6f9; padding:60px 0px;}

input[type="text"].capabile-Input{font-size: 22px; border:none; display: block; color: #435771;padding:10px 20px 12px 84px;width: 100%;box-sizing: border-box;height: auto;background: #fff;box-shadow: none;border-bottom: 1px solid #dfe4ea;border-radius: 0px; background-image:url("../img/footer_sprite.svg"); background-repeat:no-repeat; background-position:20px -1393px; font-family: 'celiasmedium'; background-size:auto;}

/*.input-border {
    opacity: 0;
}*/
.capabilities-search .control{ position:relative;}

.input-border:before, .input-border:after {
    box-shadow: none;
    bottom: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 0;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;
}
.input-border:before {
    border-bottom: solid 2px #368fea;
    left: 50%;
}
.input-border:after {
    border-bottom: solid 2px #368fea;
    right: 50%;
}

input[type="text"].capabile-Input:focus ~ .input-border:before, input[type="text"].capabile-Input:focus ~ .input-border:after {
    width: 50%;
}

input[type="text"].capabile-Input:focus ~ .input-border {
    opacity: 1;
    width: 100%;
}

input[type="text"].capabile-Input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #c7d1da;
}
input[type="text"].capabile-Input::-moz-placeholder { /* Firefox 19+ */
    color: #c7d1da;
}
input[type="text"].capabile-Input:-ms-input-placeholder { /* IE 10+ */
    color: #c7d1da;
}
input[type="text"].capabile-Input:-moz-placeholder { /* Firefox 18- */
    color: #c7d1da;
}

input[type="text"].capabile-Input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color:transparent;
}
input[type="text"].capabile-Input:focus::-moz-placeholder { /* Firefox 19+ */
    color:transparent;
}
input[type="text"].capabile-Input:focus:-ms-input-placeholder { /* IE 10+ */
    color:transparent;
}
input[type="text"].capabile-Input:focus:-moz-placeholder { /* Firefox 18- */
    color:transparent;
}

.capabilities-search{ margin-top:30px;}
.home-service-result ul{ list-style:none; display:flex; display:-webkit-flex; flex-wrap:wrap;}
.home-service-result ul li{ width:33.33%;   box-shadow: 0px 0px 0px 0px rgba( 38, 57, 82, 0 ); transition: all .5s ease; position:relative;}
.home-service-result ul li a{ display:block; padding:15px 28px 13px;}
.home-service-result ul li i{ width:52px; display:inline-block; background-repeat:no-repeat; position:absolute; top:28px; left:28px; background-size:auto; background-image: url(../img/common-spritr.svg); height:52px;}
.home-service-result ul li:hover{box-shadow: 0px 2px 16px 0px rgba( 38, 57, 82, .25 ); background-color:#fff;
}
.home-service-result ul li dl{ margin-left:64px; position:relative}
.home-service-result{ margin-top:40px;}


.wri-ico-serv i{background-position:0 -4850px; height:53px !important;}
.wri-chat-dev i{ height:53px !important; background-position: 0 -4744px;}
.wri-laravel-dev i {background-position:0 -4903px;height: 53px !important;}
.wri-ember-dev i {background-position:0 -4797px; height:53px !important;}


.sev-design i{background-position: 0 -411px;
    height: 44px !important;}
.sev-devlop i {background-position: 0 -370px;
    height: 41px !important;}
.sev-app-devlop i {background-position: 0 -318px;
    height: 52px !important;}
.sev-and-devlop i{ height:47px !important; background-position: 0 -271px;}
.sev-ios-devlop i { height:52px !important; background-position:0 -219px;}
.sev-wp-devlop i {background-position: 0 -179px; height:40px !important;}
.sev-jm-devlop i{ height:42px !important; background-position: 0 -137px;}
.seve-com-devlop i{ height:45px !important; background-position: 0 -92px;}
.seve-all i {}



.wri-dev-hosting i {background-position:0 -715px;}
.wri-dev-domains i {background-position:0 -1037px !important;}
.wri-dev-monitoring i{background-position:0 -1246px;}
.wri-dev-outsourcing i {background-position:0 -2027px;}
.wri-dev-partnership i {background-position:0 -1663px;}
.wri-dev-apps i {background-position:0 -1819px;}
.wri-dev-maintenance i{ background-position:0 -1923px;}

.wri-php-dev i{background-position:0 -507px;}
.wri-dev-joomla i {background-position:0 -829px;}
.wri-dev-wp i {background-position:0 -1351px;}
.wri-dev-magento i {background-position:0 -1559px;}
.wri-dev-ui i {background-position:0 -1715px;}
.wri-dev-graphic i{background-position:0 -1871px;}
.wri-angular-dev i {background-position:0 -455px;}
.wri-node-dev i {background-position:0 -1090px;}

.wri-web-dev i {background-position:0 -1194px;}
.wri-mobile-dev i {}
.wri-magento-dev i{background-position:0 -933px;}
.wri-lamp-dev i{background-position:0 -611px;}
.wri-custm-dev i {;background-position:0 -1923px;}
.wri-shop-dev i {background-position:0 -1455px;}


.wri-psd-magento i{background-position:0 -933px;}
.wri-psd-wordpress i {background-position:0 -179px; height:40px !important;}
.wri-psd-joomla i { background-position:0 -137px; height:42px !important;}
.wri-resp-html i {background-position:0 -559px;}
.wri-psd-html i {background-position:0 -663px;}
.wri-psd-email i {background-position:0 -985px;}
.wri-psd-drupal i {background-position:0 -1246px;}

.wri-resp-design i { background-position: 0 -559px;}
.wri-landing-design i {background-position:0 -1975px;}
.wri-print-design i {background-position:0 -2079px;}
.wri-theme-design i {background-position:0 0;}
.wri-logo-design i {background-position:0 -1767px;}
.wri-ecom-design i {background-position:0 -881px;}
.wri-corporate-design i {background-position:0 -2027px;}
.wri-site-design i {background-position:0 -1142px;}
.wri-ui-design i{background-position:0 -1403px;}
.wri-app-design i {background-position:0 -1611px;}


.home-service-result ul li h6{font-family: 'celiasregular'; text-transform:uppercase;}
.capabilities-search form{ position:relative;}
.service-sorting{position: absolute; right: 24px; top: 32px; width:90px;}

.service-sorting input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.sorting-dekstop .checkbox-icon {background-position:0 -1499px; right:0;}
.sorting-mobile .checkbox-icon {background-position:0 -1598px; left:0px;}
.sorting-mobile:after{ content:""; width:1px; height:22px; background-color:#dfe5ea; display:block; top:-14px; left:38px; position:absolute;}

.checkbox-icon:hover input ~ .checkbox-icon,
.checkbox-icon input:focus ~ .checkbox-icon {
opacity:.5;
}
.sorting-checkbox input:checked ~ .checkbox-icon {
opacity:1;
}

.icDribble{ background-repeat:no-repeat; background-position:-11px -11px; width:38px; height:39px; display:inline-block; margin-top: -14px; margin-left: 17px; vertical-align:middle; background-size:auto;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='60px' height='60px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-basketball'%3E%3Ccircle cx='50' cy='50' ng-attr-r='{{config.radius}}' fill='%23ea4c89' stroke='%23c32361' stroke-width='4' r='28'%3E%3C/circle%3E%3Cpath d='M50 22L50 78' stroke='%23c32361' stroke-width='4'%3E%3C/path%3E%3Cpath d='M30.20101012677667 30.201010126776673 A28 28 0 0 1 30.20101012677667 69.79898987322332' fill='none' stroke='%23c32361' stroke-width='4'%3E%3C/path%3E%3Cpath d='M69.79898987322333 30.201010126776673 A28 28 0 0 0 69.79898987322333 69.79898987322332' fill='none' stroke='%23c32361' stroke-width='4'%3E%3C/path%3E%3Cg transform='translate(0 50)'%3E%3Cg%3E%3Cpath d='M 22 0 A 28 22.4586 0 0 1 78 0' fill='none' stroke='%23c32361' stroke-width='4'%3E%3Canimate attributeName='d' calcMode='spline' values='M22 0A28 28 0 0 1 78 0;M22 0A28 0 0 0 1 78 0;M22 0A28 0 0 0 0 78 0;M22 0A28 28 0 0 0 78 0' keyTimes='0;0.499999;0.5;1' dur='0.9' keySplines='0.1 0 1 0.9;0.5 0.5 0.5 0.5;0 0.1 0.9 1' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/path%3E%3Cpath d='M 22 0 A 28 9.17549 0 0 0 78 0' fill='none' stroke='%23c32361' stroke-width='4'%3E%3Canimate attributeName='d' calcMode='spline' values='M22 0A28 28 0 0 1 78 0;M22 0A28 0 0 0 1 78 0;M22 0A28 0 0 0 0 78 0;M22 0A28 28 0 0 0 78 0' keyTimes='0;0.499999;0.5;1' dur='0.9' keySplines='0.1 0 1 0.9;0.5 0.5 0.5 0.5;0 0.1 0.9 1' begin='-0.45s' repeatCount='indefinite'%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}



/*start of home Serverice*/

/*start of home Dribbble*/
.home-dribbble{ background-color:#ffffff; padding:60px 0px;}
.home-dribbble .top-heading{ text-align:left;}
.home-dribbble-inner .swiper-slide{ width:285px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; overflow:hidden; box-shadow: 0px 0px 15px 2px rgba( 35, 66, 104,.15); opacity:.4; min-height: 479px;}
.home-dribbble-inner .swiper-slide.swiper-slide-active{ opacity:1;}
.home-dribbble-inner .swiper-slide.swiper-slide-next{ opacity:.9;}
.home-dribbble-inner .swiper-slide.swipernextNext{ opacity:.7;}
.home-dribbble-inner .swiper-container{ padding:15px 0px; margin-left:170px; }
.dribble-control{ position:absolute; width:140px; height:140px; top:50%; margin-top:-70px; left:0;}
.dribble-control > div{ width:70px; height:70px; border:1px solid #bdc7d8; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'><path%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23bdc7d8'%2F><%2Fsvg>"); background-repeat:no-repeat;background-size: 16px; background-position: center center; transition:all .2s ease;}
.dribble-control > div.swiper-button-next4{margin-left:69px;}
.dribble-control > div.swiper-button-prev4{margin-top:-1px;transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.dribble-control > div.swiper-button-disabled{ opacity:.5; cursor: auto;
    pointer-events: none;}
.home-dribbble-inner{ position:relative; margin-top:60px;}
.dribble-control > div:hover{ background-color:#bdc7d8;background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'><path%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F><%2Fsvg>");}
.drbbble-cta{ text-align:center; margin-top:50px;}



/*End of home Dribbble*/

/*start of home home Welcome*/
.homeWelcome{ background-color:#f3f6f9; padding:60px 0px;}
.whyReptinner p{ font-family: 'celiasmedium'; font-size:24px; color:#fff; line-height:normal;}
.whyReptinner span{ font-size:20px; font-family: 'celiaslight'; color:#fff; line-height:31px;}
.welcomeRept{ width: 31.623931623932%; float: left; margin-left: 2.5641025641026%;}
.welcomeRept:first-child{ margin-left:0px;}

.inner_hmblog{ position:relative;}
.whyReptinner{ text-align:center; position:absolute; width:100%;}
.whyRept{ position:relative;}
.topPos{ top:18px;}
.btmPos{ bottom:12px;}
.homeWelcomeInner{ margin-top:40px;}

/*End of home home Welcome*/






/*Start of portofolio pop up*/
#portofolioPopup{ background-color:#ffffff; width:100%; padding:15px;/* height:calc(100vh - 30px);*/ margin:15px auto; display:flex; max-height:924px;}


#portofolioPopup > div{ width:50%;}
.mfp-close-btn-in #portofolioPopup .mfp-close{ margin:21px 16px 0 0; background-color:#eff0f3; width:71px; height:71px; color:#b7b9c1; font-size:22px;font-family: 'celiasregular'; transition:all .2s ease; -moz-transition:all .2s ease; -webkit-transition:all .2s ease; }
.mfp-close-btn-in #portofolioPopup .mfp-close:hover{ background-color:#368fea; color:#fff;}
.mfp-close-btn-in #portofolioPopup .mfp-close:first-letter{ color:#ff3300; font-size:0;}
.mfp-close-btn-in #portofolioPopup .mfp-close:after{ content:"Esc";  margin-top:8px; display:inline-block;}
.popportRight{ padding:75px 65px 75px 80px;}
.popportLeft{ padding:15px 90px 0 90px; background-color:#516378; overflow:hidden; box-shadow: 0px 6px 16px 0px rgba( 0, 0, 0, .2); position:relative;}
.popportRight h2{ font-size:37px; line-height:normal;}
.popportRight p{ font-size:14px; line-height:20px; color:#233446;}
.popportRight h3{ font-size:14px; text-transform:uppercase; color:#081019; line-height:normal; letter-spacing:.5px; font-family: 'celiasbold'; margin-bottom:4px;}
.proPoprept ul{ margin:20px 0 0 0; padding:0; list-style:none;}
.proPoprept ul li{ border:1px solid #d8dadd; margin-right:3px; width:173px; height:133px; display:inline-block; margin-bottom:6px; text-align:center; padding-top:25px;}
.proPoprept ul li em{ font-style:normal; text-transform:uppercase; font-family: 'celiaslight'; font-size:12px; color:#233446; letter-spacing:.5px;}
.proPoprept{ margin-bottom:30px;}
.proPoprept ul li i{ width:44px; height:44px; display:block; margin:0 auto 15px;background-repeat:no-repeat; background-position:center center; background-size:auto;}
.proPoprept > a.clVideo{ color:#16a085; font-size:14px; display:inline-block; margin-top:30px;}
.proPoprept > a.clVideo i{    width: 34px;
    height: 34px;
    border: 1px solid #16a085;
    display: inline-block;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    position: relative;
    vertical-align: middle;
    top: -4px;
    margin-left: 5px;}
.proPoprept > a.clVideo i:after{    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #16a085;
    content: "";
    margin: 10px 0 0px 13px;}

.tab-inner{ padding:30px 0px;}


.service-sorting .checkbox-icon{ background-image:url("../img/footer_sprite.svg");}



/*End of portofolio pop up*/




@media (max-width:1600px){
    /*.home-portfolio-rept .popup-with-zoom-anim{ bottom:60px;}*/
    .home-banner{ height:680px;}

}

@media (max-width:1549px){
.home-service-result ul li{ width:50%;}

}