/* -------------------------------- 

Primary style


/* -------------------------------- 

Main Components 

-------------------------------- */

.flexBox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.mobProduct {
    display: none;
}

.thumbDiv {
    position: absolute;
    height: 100%;
    overflow: hidden;
    transition: .9s all ease;
    background: #fff;
    opacity: 1;
    width: 100%;
}

.thumbDiv:hover {
    transition: .9s all ease;
    background: rgba(0, 0, 0, 0.1);
}

.cd-title {
    transform: scaleY(1);
    transition: .3s all ease-out;
}

.activeBg.va-slice .thumbDiv {
    width: 0;
    transition: .9s all ease;
}

.wid70 {
    width: 65%;
}

.largeDivShow {
    position: absolute;
    width: 0%;
    height: 100%;
    transition: 06s all ease;
    background-size: cover !important;
}

.projects-container .cd-single-project .projHeading,
.projects-container .cd-single-project .projectpara {
    color: #5f5d5d;
}

.projects-container .cd-single-project .projHeading {
    font-size: 24px;
}

.projects-container .cd-single-project .projectpara {
    font-size: 14px;
    color: #5f5d5d;
}

.projects-container .cd-close.fullopen {
    display: none;
}

.projHeading {
    font-family: 'avenir_black';
    font-size: 84px;
    line-height: 0.8;
    margin-bottom: 10px;
}

.projHeading.f20 {
    font-size: 16px;
    color: #727171;
    font-family: 'open_sansregular';
    transition: all 0.5s linear;
}

.va-slice:hover .projHeading.f20 {
    color: #fff;
}

.va-slice:hover .para.white {
    transform: scale(1.5) translateX(23px);
    transition: all 0.3s ease-in-out 0.1s;
    color: #fff;
    font-family: 'avenir_black';
}

.activeBg.va-slice .para.white {
    transform: none;
    font-family: 'open_sansregular';
    transition: none;
}

.liWrap ul {
    margin: 0;
    flex-wrap: wrap;
}

.liWrap ul li a {
    font-size: 14px;
    padding: 0 5px;
}

.projectpara {
    font-family: 'open_sansregular';
    font-size: 14px;
    color: #434343;
}


/* -------------------------------- 

Primary style


/* -------------------------------- 

Main Components 

-------------------------------- */

.projects-container {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.projects-container::before {
    content: 'mobile';
    display: none;
}

.projects-container .cd-single-project {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

.projects-container .cd-single-project::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 25vh;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-transition: opacity 0.5s, height 0.4s;
    -moz-transition: opacity 0.5s, height 0.4s;
    transition: opacity 0.5s, height 0.4s;
}

.projects-container .cd-single-project::before {
    display: none;
}

.projects-container .cd-single-project:nth-of-type(2) {
    top: 25vh;
}

.projects-container .cd-single-project:nth-of-type(3) {
    top: 50vh;
}

.projects-container .cd-single-project:nth-of-type(4) {
    top: 75vh;
}

.projects-container .cd-single-project.is-loaded {
    /* move items in the viewport when background images have been loaded */
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.projects-container .cd-single-project.is-full-width {
    /* selected item */
    top: 0;
    height: auto;
    z-index: 1;
    cursor: auto;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.projects-container .cd-single-project.is-full-width::after {
    height: 100vh;
}


/* krathi css */

.projectDetail {
    margin-top: 15px;
}

.projctCategory {
    margin-top: 20px;
}

.projectList span,
.projectList span a {
    color: #fff;
    padding-left: 10px;
}

.projectList span a {
    border-bottom: 1px solid #fff;
    padding: 0;
}

.projectList span a:hover {
    color: #000;
    border-bottom: 1px solid #000;
}

.projects-container .cd-single-project.is-full-width:hover {
    transform: none;
    -webkit-transform: none;
}

.projects-container ul.projectList {
    margin-top: 30px;
    height: auto;
    margin-bottom: 62px;
    padding: 0;
}

.projects-container ul.projectList li {
    margin-bottom: 25px;
}

.projects-container ul.projectList li:last-child {
    margin-bottom: 0;
}

.exploreBtn {
    background: url(../../images/explorearrow.png) 85% 25% no-repeat;
    color: #fff;
    width: 100%;
    padding: 0 50px 10px 0;
    border-bottom: 1px solid #fff;
    font-size: 14px;
    transition: all 0.5s ease-in;
    text-align: center;
    display: inline;
    vertical-align: middle;
    position: relative;
}

.mCS_img_loaded {
    margin: 0 0 30px 0;
}

.exploreBtn:hover {
    background: url(../../images/explorearrow.png) 100% 25% no-repeat;
}

.prevScroll {
    position: absolute;
    top: 0;
    background: #ffac09;
    width: 50px;
    height: 100%;
    color: #fff;
    font-size: 14px;
    left: 0;
}

.prevScroll span {
    transform: rotate(-90deg);
    display: block;
    top: 50%;
    position: relative;
}

.nextScroll {
    position: absolute;
    top: 0;
    background: #ffac09;
    width: 50px;
    height: 100%;
    color: #fff;
    font-size: 14px;
    right: 0;
}

.nextScroll span {
    transform: rotate(-90deg);
    display: block;
    top: 50%;
    position: relative;
}

.circle.flexBox {
    align-items: center;
    margin-top: 30px;
    opacity: 0;
}

.circle span {
    color: #fff;
    font-size: 14px;
    padding-right: 35px;
}

.projectcontent {
    width: 49%;
    padding-left: 40px;
    padding-top: 40px;
    position: relative;
    opacity: 1;
    transition: .8s all ease;
}

.opacityF .projectcontent {
    opacity: 1;
    transition: .9s all ease;
}

.projctImage {
    width: 80%;
}

.clientHowerDiv {
    position: absolute;
    height: 100%;
    opacity: 1;
}

.projects-container .cd-single-project:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 1s ease;
}

@media only screen and (min-width:1024px) {
    .projects-container::before {
        /* never visible - this is used in jQuery to check the current MQ */
        content: 'desktop';
    }
    .projects-container .cd-single-project {
        width: calc(12.5vw - 10px);
        height: 100%;
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: width 1s;
        -moz-transition: width 1s;
        transition: width 1s;
        margin: 0 10px;
    }
    .projects-container .cd-single-project:nth-of-type(2) {
        top: 0;
        left: 12vw;
    }
    .projects-container .cd-single-project:nth-of-type(3) {
        top: 0;
        left: 24vw;
    }
    .projects-container .cd-single-project:nth-of-type(4) {
        top: 0;
        left: 36vw;
    }
    .projects-container .cd-single-project:nth-of-type(5) {
        top: 0;
        left: 48vw;
    }
    .projects-container .cd-single-project:nth-of-type(6) {
        top: 0;
        left: 60vw;
    }
    .projects-container .cd-single-project:nth-of-type(7) {
        top: 0;
        left: 72vw;
    }
    .projects-container .cd-single-project::after {
        height: 100vh;
        width: 100%;
        opacity: 0;
    }
    .projects-container .cd-single-project.is-loaded {
        /* show items when background images have been loaded */
        opacity: 1;
    }
    .projects-container .cd-single-project.is-loaded::after {
        opacity: 1;
        background-position: right center;
        background-size: auto;
        background-attachment: unset;
    }
    .projects-container .cd-single-project.is-full-width {
        /* selected item */
        left: 0vw;
        width: 100%;
        -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
        -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
        transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
    }
}

@media only screen and (min-width:1170px) {
    .projects-container .cd-single-project::after {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transition: -webkit-transform 0.8s, opacity 0.5s;
        -moz-transition: -moz-transform 0.8s, opacity 0.5s;
        transition: transform 0.8s, opacity 0.5s;
    }
    .projects-container .cd-single-project.is-loaded::after {
        opacity: 0;
    }
    .projects-container .cd-single-project.active.is-loaded::after {
        opacity: 1;
    }
    .projects-container .cd-single-project:hover::after,
    .projects-container .cd-single-project.is-full-width.is-loaded::after {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .projects-container .cd-single-project.active .projHeading,
    .projects-container .cd-single-project.active .projectpara {
        color: #ffffff;
    }
    .projects-container .cd-single-project.active .projHeading {
        font-size: 84px;
    }
    .projects-container .cd-single-project.active .projectpara {
        font-size: 18px;
    }
    .projects-container .cd-single-project:hover .projHeading,
    .projects-container .cd-single-project:hover .projectpara {
        color: #ffffff;
    }
    .projects-container .cd-single-project:hover .projHeading {
        font-size: 84px;
    }
    .projects-container .cd-single-project:hover .projectpara {
        font-size: 18px;
    }
}

.cd-title {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 12.5vh;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.is-full-width .cd-title {
    top: 50vh;
    -webkit-transition: opacity 0s, top 0.4s;
    -moz-transition: opacity 0s, top 0.4s;
    transition: opacity 0s, top 0.4s;
    opacity: 0;
}

@media only screen and (min-width:1024px) {
    .cd-title {
        top: 50vh;
        width: calc(12vw - 10px);
        opacity: 1;
        padding: 0 10px;
    }
    .is-loaded .cd-title {
        opacity: 1;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s;
        -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s;
        transition: transform 0.6s, opacity 0.6s, left 0.4s;
    }
    .is-loaded.is-full-width .cd-title {
        left: 37.5vw;
        -webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s;
        -moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s;
        transition: transform 0.6s, opacity 0s, left 0.4s;
        opacity: 0;
    }
    .cd-title p {
        display: block;
    }
}

.cd-project-info {
    clear: both;
    visibility: hidden;
    opacity: 0;
    padding: 100px 50px;
    cursor: auto;
    color: #3f538e;
    -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
    -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
    transition: opacity 0.4s 0s, visibility 0s 0.4s;
    position: relative;
    z-index: 1;
}

.is-full-width .cd-project-info {
    visibility: visible;
    opacity: 1;
    height: 100vh;
}

.cd-project-info p {
    width: 100%;
    line-height: 2;
    color: #fff;
}

.projects-container .cd-close {
    display: block;
    z-index: 1;
    width: 44px;
    height: 44px;
    overflow: hidden;
    color: #000;
    font-size: 37px;
    border: 1px solid #000;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    visibility: hidden;
    -webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s;
    -moz-transition: -moz-transform 1s 0s, visibility 0s 1s;
    transition: transform 1s 0s, visibility 0s 1s;
    text-decoration: none;
}

.projects-container .cd-close {
    position: absolute;
    top: 30px;
    right: 2%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.projects-container .cd-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%) scale(0);
    -moz-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    -o-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
}

.project-is-open .cd-close,
.project-is-open .cd-scroll {
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
    -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
    transition: transform 0.4s 0s, visibility 0s 0s;
}

.project-is-open .cd-scroll {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
    -webkit-animation: cd-translate 1.2s 0.4s;
    -moz-animation: cd-translate 1.2s 0.4s;
    animation: cd-translate 1.2s 0.4s;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    animation-iteration-count: 2;
}

.no-touch .project-is-open .cd-close:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.no-touch .project-is-open .cd-scroll:hover {
    -webkit-transform: translateX(-50%) scale(1.2);
    -moz-transform: translateX(-50%) scale(1.2);
    -ms-transform: translateX(-50%) scale(1.2);
    -o-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2);
}

@-webkit-keyframes cd-translate {
    0% {
        -webkit-transform: translateX(-50%) scale(1);
    }
    50% {
        -webkit-transform: translateY(10px) translateX(-50%) scale(1);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
    }
}

@-moz-keyframes cd-translate {
    0% {
        -moz-transform: translateX(-50%) scale(1);
    }
    50% {
        -moz-transform: translateY(10px) translateX(-50%) scale(1);
    }
    100% {
        -moz-transform: translateX(-50%) scale(1);
    }
}

@keyframes cd-translate {
    0% {
        -webkit-transform: translateX(-50%) scale(1);
        -moz-transform: translateX(-50%) scale(1);
        -ms-transform: translateX(-50%) scale(1);
        -o-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
    50% {
        -webkit-transform: translateY(10px) translateX(-50%) scale(1);
        -moz-transform: translateY(10px) translateX(-50%) scale(1);
        -ms-transform: translateY(10px) translateX(-50%) scale(1);
        -o-transform: translateY(10px) translateX(-50%) scale(1);
        transform: translateY(10px) translateX(-50%) scale(1);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        -moz-transform: translateX(-50%) scale(1);
        -ms-transform: translateX(-50%) scale(1);
        -o-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}

@media only screen and (max-width:1024px) {
    .cd-project-info {
        position: relative;
        z-index: 1;
    }
    .projects-container .cd-single-project .projHeading,
    .projects-container .cd-single-project .projectpara {
        color: #ffffff;
    }
    .projects-container .cd-single-project .projHeading {
        font-size: 84px;
    }
    .projects-container .cd-single-project .projectpara {
        font-size: 18px;
    }
    .projectcontent {
        width: 50%;
    }
    .projects-container .cd-single-project.is-loaded::after {
        background-position: center center;
    }
    .cd-title {
        left: 20px;
    }
}

@media only screen and (max-width:767px) {
    .projectcontent {
        width: 80%;
        margin: 0 auto;
        padding-top: 100px;
        padding-left: 0;
    }
    .wid70 {
        width: 100%;
    }
    .mobProduct {
        display: none;
        width: 100%;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .mobProduct img {
        width: 200px;
    }
    .deskLogo {
        display: none;
    }
    .va-slice:hover .projHeading.f20 {
        color: #fff;
    }
    .va-slice:hover .para.white {
        transform: none;
        transition: none;
        color: #fff;
        font-family: 'open_sansregular';
    }
    .thumbDiv {
        width: 100%;
    }
    .thumbDiv:hover {
        background: #fff;
    }
    .projects-container .cd-close.dk {
        display: none;
    }
    .cd-project-info {
        padding: 0 30px 120px 30px;
        margin-top: 0;
        transition: none;
        -webkit-transition: none;
        transform: none;
        -webkit-transform: none;
    }
    .projctCategory {
        margin-top: 30px;
    }
    .exploreBtn {
        display: none;
    }
    .projects-container {
        height: auto;
        width: auto;
        position: relative;
        overflow: auto;
    }
    .projects-container ul {
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }
    .projects-container .cd-single-project {
        position: relative;
        height: auto;
        overflow: auto;
        transition: none;
        -webkit-transition: none;
        transform: none;
        -webkit-transform: none;
    }
    .cd-title {
        position: relative;
        transform: none;
        -webkit-transform: none;
        left: 0;
        top: 0;
        margin: 25px 20px;
        width: 90%;
        z-index: 3;
    }
    .cd-title.down {
        background: url(../../images/arrow-down-white.svg) right center no-repeat;
        background-size: 10%;
    }
    .cd-title.up {
        background: url(../../images/arrow-up-white.svg) right center no-repeat;
    }
    .cd-title.up .projHeading.f20 {
        visibility: hidden;
    }
    .projects-container .cd-single-project.is-full-width {
        position: relative;
        width: 100%;
        transition: none;
        -webkit-transition: none;
        transform: none;
        -webkit-transform: none;
        padding: 30px 0 0;
    }
    .projects-container .cd-close {
        top: 10px;
    }
    .projHeading.f20 {
        font-family: 'avenir_black';
        color: #ffff;
        padding: 0 0 0 10px;
    }
    .va-content .moblogo {
        position: absolute;
        left: 20px;
        top: 0px;
        opacity: 1;
        width: 100px;
        display: block;
    }
    .projectDetail {
        margin-top: 0;
    }
    .projectDetail p {
        color: #fff;
    }
    .is-full-width .cd-title {
        opacity: 1;
        background: none;
    }
    .is-full-width .cd-project-info {
        height: auto;
    }
    .is-full-width .moblogo {
        opacity: 1;
        display: block;
    }
    .projects-container .cd-single-project .projHeading {
        font-size: 20px;
        color: black;
    }
    .projects-container .cd-single-project .projectpara {
        font-size: 14px;
        color: black;
    }
    .projects-container .cd-single-project::after {
        background-color: #458d2e;
        background-image: none;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
    }
    .projects-container .cd-single-project.is-loaded {
        transform: none;
        -webkit-transform: none;
    }
    .cd-project-info {
        opacity: 1;
        visibility: visible;
        display: none;
    }
    .projects-container .cd-close.mbile {
        top: -138px;
        width: 35px;
        height: 35px;
        font-size: 30px;
    }
    .is-full-width .cd-title {
        top: 0;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
        width: 100%;
        padding: 10px 0 0;
        opacity: 1;
    }
    .projects-container .cd-single-project.is-full-width .projHeading {
        color: #fff;
        font-size: 25px;
    }
    .projects-container .cd-single-project.is-full-width .projectpara {
        color: #fff;
        font-size: 20px;
    }
    .is-full-width .cd-project-info {
        display: block;
    }
    .projects-container .cd-single-project::after {
        height: 0;
    }
    .projects-container .cd-single-project:nth-of-type(n) {
        top: 0;
        border-top: 2px solid #dad7d7;
        border-left: 0;
        border-right: 0;
        overflow: hidden;
        left: 0 !important;
        background-image: none !important;
    }
    .projects-container ul.projectList .cd-single-project {
        margin-bottom: 10px;
        width: 100%;
    }
    .projects-container ul.projectList {
        margin-bottom: 30px;
        padding-left: 0;
    }
    .cd-project-info p.round {
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 7px 10px;
        width: max-content;
    }
    .projects-container .fullopen {
        display: none;
        transform: none;
        visibility: visible;
    }
    .circle.flexBox {
        align-items: center;
        margin-top: 30px;
        opacity: 1;
        position: relative;
        z-index: 2;
        margin-bottom: 30px;
    }
    .loader {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }
    .loader span {
        padding-right: 10px;
    }
}