.container {
    max-width: 1200px;
    width: 100%;
}

p{font-family: 'Roboto', sans-serif;}
h2{font-family:'texgyrepagella', sans-serif;}

/* home page */
.overlay-1{ background-color: #96CEB4;}
.overlay-2{ background-color:#FFCC5C;}
.overlay-3{ background-color: #d73a34;}
.overlay-4{ background-color: #000000;}

.preview-article-header h2 a, 
.open-full-post a ,
.case,
.preview-text-content p,
.open-full-post span,
.open-full-post:before{color:#fff;}

#slide1 h2 a, 
#slide1 .preview-text-content p, 
#slide1 .case,
#slide1 .open-full-post span,
#slide1 .open-full-post:before,
#slide2 h2 a, 
#slide2 .preview-text-content p, 
#slide2 .case,
#slide2 .open-full-post span,
#slide2 .open-full-post:before{color: #000;}

#slide1 .sub_title {color: #1f2217;}
#slide2 .sub_title {color: #982900;}
#slide3 .sub_title {color: #fff;}
#slide4 .sub_title {color: #ffe103;}
/* end home page */

@media (max-width: 575.98px) {
    #atail-brands {
        background: 0 0;    margin: 20vw 0;
    }
    .breadcrumb{font-size: 12px;line-height: 18px;}
    #nescafe .cs-section-heading, #gshock .cs-section-heading ,#fans .cs-section-heading,#wires .cs-section-heading ,#savetiger .cs-section-heading {font-size: 16px;}
    .open-full-post {  margin-left: 100px;  padding: 0;}
    .icon{left: 5% !important;}
    #pr-intro h2{font-size: 23px;line-height: 25px;}
    #pr-intro .cs-section-heading{font-size: 18px;}
    #fbb .pr-next{width: 100%; padding: 0;}
    #fbb .pr-intro{width: 100%;}
    #gshock .pr-intro{width: 100%;}
    #gshock .pr-next { width: 100%; padding: 0;}
    #fans .pr-intro{width: 100%;}
    #fans .pr-next { width: 100%; padding: 0;}
    #wires .pr-intro{width: 100%;}
    #wires .pr-next { width: 100%; padding: 0;}
    #nescafe .pr-intro{width: 100%;}
    #nescafe .pr-next { width: 100%; padding: 0;}
    #savetiger .pr-intro{width: 100%;}
    #savetiger .pr-next { width: 100%; padding: 0;}
    #slideshow_image0{
    background: url("../img/project-preview/banner-21@3x.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-y: center;
    }

    #slideshow_image0:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/glamtram@3x.png");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }

    #slideshow_image1{
    background: url("../img/project-preview/gshock-banner@3x.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-y: center;
    }

    #slideshow_image1:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/gshock-banner-hover@3x.png");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }

    #slideshow_image2{
    background: url("../img/project-preview/nescafe-banner@3x.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-y: center;
    }

    #slideshow_image2:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/nescafe-banner_device@3x.png");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    } 

    #slideshow_image4{
    background: url("../img/project-preview/havells_wire_fron@3x.png") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-y: center;
    }

    #slideshow_image4:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/havells_wire@3x.png");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    } 


    #content .open-full-post{float: right;
        width: 100%;
        position: absolute;
        left: 40vw;}
    #peopleLeft .small, .peopleRight .small{font-size: 35px;line-height: 35px;}
    #people-banner{padding: 0;}
    #main-heading > span {  font-size: 18px;   line-height: 25px; }
    .pro-txt .viewpr {position: relative;}
    #atail-logo-portrait1 { top: 30vw; left: 4vw;}
    #atail-logo-portrait1 .streettalk{width: 150%;position: absolute;left:6vw;top: 0;}
    .atail-logo-portrait img {top: 30vw; position: absolute; margin-left: 3vw;}
    #project-preview-arrow{left:100px;bottom: 15%;}
    #project-preview-arrow-wrapper{width: 100%;}

}



@media (min-width: 576px) and (max-width: 767.98px) {
    #navigation-email2 {
        margin-left: 30%;
    }

    #slideshow_image1{
    background: url("../img/project-preview/gshock-banner@2x.png") no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }

    #slideshow_image1:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/gshock-banner-hover@2x.png");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }

    #slideshow_image2{
    background: url("../img/project-preview/nescafe-banner_old@2x.png") no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }
    #slideshow_image2:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/neslay-device@2x.jpg");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    } 

    #slideshow_image0{
    background: url("../img/project-preview/banner-2@2x.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }

    #slideshow_image0:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/glamtram@2x.png");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }
    

    #slideshow_image4{
    background: url("../img/project-preview/havells_wire@2x.png") no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }

    #slideshow_image4:hover {
    display: block;
    position: absolute;
    background-image:url("../img/project-preview/wire-device@2x.jpg");
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    } 
}   
@media only screen and (max-width: 767px){
    #sliderbanner {
    width: 100%;
    margin: 0;
    padding: 0;
    background-size: 100% 74%;
}
.project-content {
    width: 90% !important;
    margin: 0 auto;
    padding: 0;
}
.sliderbanner .pr-banner {
    position: relative;
    bottom: 0px;
    padding-top: 30px;
}
.single-post .navigate {
    position: relative;
    bottom: 0;
}
.navigate .colL {
    margin: 0;
    padding: 0;
    width: 50%;
    float: left;
}
.backBtn a {
    padding: 0 0 10px 30px;
}
.backBtn span, .nextBtn span {
    position: relative;
    top: 6px;
}
.backBtn span, .nextBtn span {
    position: relative;
    top: 6px;
}
.single-post .navigate .colR {
    width: 50%;
}
.nextBtn a {
    padding: 0 30px 10px 0;
}
}
@media (max-width: 1023px){
.navigate {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 20px;
}
}

body, .blog-count-likes, .blog-count-comments, .comment-reply-link, .comment-edit-link {
    font-family: 'texgyrepagella', "sans-serif";
    font-style: normal;
    font-weight: 300;
}

html {
    font-size: 16px;
}

body, td {
    line-height: 1.7;
    color: #565656;
}

body {
    letter-spacing: -0.46999999999999975px;
    background: #fff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, th, .tagcloud a, input, label, button, input, textarea, a.button, select, a, .project-count, .blog-date, .blog-category-link, .atail-post-comments-title, .atail-proj-date-text, .atail-proj-date-value, .post-content-footer-title, .small-title, .widget_archive, .widget_categories, .atail-multitext, .atail-multitext-text, .blog-author, .page-numbers, figure .description-title, .project-preview-arrow span, ol li:before, nav:before, nav.row:before, ol ul li:before, .atail-widget-heading {
    font-style: normal;
    font-weight: 700;
    font-family: 'texgyrepagella', "sans-serif";
}

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .blog-info a, label, thead, .atail-widget-heading {
    color: #4d4f54;;
}

h1 {
    letter-spacing: -1.8px;
}

h2 {
    letter-spacing: -1.5px;
}

h3 {
    letter-spacing: -1.2px;
}

h4 {
    letter-spacing: -0.85px;
}

h5 {
    letter-spacing: -0.7px;
}

h6 {
    letter-spacing: -0.58px;
}

a, .post-content-info > a, .post-content-likes .blog-count-likes, .post-content-likes .blog-count-comments, .all-atail-projects-category > ul a, .blog-author, .side-content a {
    color: #fff;
    fill: #272829;
}

/* menu */
.landing_menu li:last-child{margin-top:30%;}
#icon:hover { opacity: 1;}
.inner-menu #icon:hover { opacity: 1;}
.nav-email{color: #777;}
.nav-email:hover{color: #FFBB02;}
.main{border: solid 20px #525453;width: 100%; height: 100%; background-color: #5D5F5E; position: fixed;top: 0px;left: -100%;overflow: hidden; z-index: 9;}
.menu1{opacity:0; transition: all 1.7s;}
.menu_click {
    position: relative;
    top: 42%;
}
.menu1 ul{ list-style: none; font-size: 30px; color: #fff;line-height: 60px;
  letter-spacing: 5px;position: absolute;
    top: 9vw;
    left: 0vw;
    /* transform: translateY(-50%); */
    z-index: 9999;cursor: pointer; font-family: texgyrepagella, sans-serif;}
.menu1 ul li a{color:#B9BFBB;text-decoration: none; font-family: "texgyrepagella", sans-serif;}
.menu1 ul li a:hover{color:#FFBB02;}
#icon{ padding: 8px 10px;  border-radius: 50%;  position: fixed; top: 4%; left: 2%; cursor: pointer; z-index: 99; opacity: .7;}
#close .fa-bars {
    font-size: 20px;
    color: #000;
    text-align: center;
    margin-left: 3px;
}
#open{-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.inner-menu #icon{ opacity: .5;}
.inner-menu #open {
    color: #fff;
    background: #000;
    border-radius: 50%;
   padding: 8px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}
#open,#close{line-height: 16px;font-weight:normal;font-family: streetregular, sans-serif;font-size: 15px; color: #fff;letter-spacing: 3px;font-weight:bold;
pointer-events: none; transition: all .5s; -webkit-backface-visibility: hidden;}
#close{padding: 12px;position: absolute; 
  opacity: 0;top: 0px;left: 70px;font-size: xx-large;background: #fff;
    border-radius: 50%;}
#line{width: 3px;height: 50px; background-color: #fff;position: relative;top: 10px;left: 10px;transition: all .5s;}
#menu li.active a{ color: #fff;}
.navigation-email a{text-decoration:none;font-family: 'Roboto', sans-serif; font-weight: normal;color: #fff; line-height: 1.5;font-size: .6rem;letter-spacing: 1px;bottom: 0;
}
.navigation-email2 a{text-decoration:none;font-family: 'Roboto', sans-serif; font-weight: normal;color: #fff; line-height: 1.5;font-size: .6rem;letter-spacing: 1px;}
.navigation-email { margin-left: 9%;}
.navigation-email2 { margin-left: 8%;}
.streettalk {display: inline-block;
    margin: 0 auto;
    position: absolute;
    z-index: 3;
    top: 7vw;
    left: 2vw;
    width: 50%;
}
#atail-logo-portrait {
    left: 0vw;
    position: relative;
}
.copyright { position: relative; color: #fff;    font-family: 'Roboto', sans-serif;}
.atail-logo-portrait .streettalk{width: 60%;/* top:10vw; */}
.land-footer { position: inherit; width: 50%;bottom: 20px;}
.landing_page a{text-decoration:none;font-family: arial, sans-serif; font-weight: normal;color: #fff; line-height: 1.5;font-size: .6rem;    letter-spacing: 1px;}
.navigation-email a:hover{text-decoration: none;}
.copyright-con {bottom: 0;position: expression(fixed);
    left: 26vw;line-height: 22px; position: fixed; display: block; width: 100%;height: 42px;transform-origin: center; z-index: 3;}
.copyright a, .copyright-con p{color:#fff;text-decoration: none; font-size: .7rem;}

.inner-menu .hovicon.effect-1:after{
    top: -5px;
    left: -5px;
    padding: 5px;
  }

.hovicon {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}
.hovicon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.hovicon:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.hovicon.effect-1 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-1:after {
    top: -6px;
    left: -5px;
    padding: 5px;
    box-shadow: 0 0 0 2px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}
.inner-menu .hovicon.effect-1:after{box-shadow: 0 0 0 2px #000;} 
.inner-menu #close:after {
    box-shadow: 0 0 0 2px #fff !important;
}
/* Effect 1a */
 .hovicon.effect-1.sub-a:hover {
    color: #fff;
}
.hovicon.effect-1.sub-a:hover i {
    color: #fff;
}
.hovicon.effect-1.sub-a:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


#close .fa-bars{font-size: 22px;}
.fa-bars:hover{color: #fff;}

.copyright-con-menu{bottom: 0px;left: 27%;line-height: 22px; position: absolute; display: block; width: 100%;height: 45px;transform-origin: center; z-index: 3;}
.copyright-con-menu .copyright {
    text-decoration: none;
    font-family: 'Muli', sans-serif;
    font-weight: normal;
    color: #ababab;
    line-height: 0;
    font-size: .5rem;
    letter-spacing: 1px;
    position: absolute;
    display: inline-block;
    bottom: -8px;
    left: 0;
}
h2.hashtag_s {
    font-size: 2vw !important;
}
.box_main {
    width: 47%;
    height: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 40px 0px 40px 20px;
    position: fixed;
    display: block;
    z-index: 2;
}
.navig{top: 3vw;
    position: absolute;
    color: #B9BFBB;
    font-size: 13px;}
.navig:after {
    position: absolute;
    top: 60%;
    left: 112px;
    display: inline-block;
    width: 75%;
    height: 1px;
    content: '';
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    vertical-align: middle;
    /* opacity: .3; */
    border-top: 1px solid;
    color: #B9BFBB;
}


/* end menu */
/* inner-bar */
.top-bar{width: 10%;margin:4% auto;border-top:4px solid #FFBB02;}
.atail-slider h1 a:hover, .atail-slider-item .blog-author span:hover, .atail-slider-item .blog-date span:hover, a:hover, .side-content a:hover, .blog-category a:hover, a.blog-date:hover, .content-info-date a:hover, .post-content-info > a.blog-category-link:hover, .post-content-likes .blog-count-likes:hover, .post-content-tags a[rel="tag"]:hover, .post-sidebar .widget li a:hover {
    color: #fff;
}

.comment-navigation > h2,
a.next.page-numbers,
a.prev.page-numbers,
.comment-navigation .nav-previous,
.comment-navigation .nav-next {
    display: none;
}


@media (max-width: 575.98px) {
    .navigation-email a{position: absolute;}
    #why-section-overview h2, .awardSection h1{font-size: 1.4rem;}
    .box { height: 100vw;}
    #awards-list li{margin-right: 0px;font-size: 20px;width: 40%;}
    #awards-list li img{width: 30vw;margin-bottom: 0px;}
    .landing_menu li:last-child{margin-top:16%;}
    .overlay{z-index: 0;}
    #filtr-container .column{width:100%;}
    .boxsize {height: 250px;}
    #navigate{bottom: 0;}
    #navigate .colL{width: auto;}
    #navigate .colR{width: auto;}
    #navigate .backBtn, #navigate .nextBtn{font-size: 10px;}
    #navigate .backBtn{ padding: 0; float: left;}
    #navigate .nextBtn{ padding: 0; float: right;}

    .atail-header-opened .container-fluid .show-nav > button > span:before, .atail-header-opened .show-nav > button > span:after {
        background-color: #FFF;
    }
    #atail-logo-portrait .streettalk {  position: absolute;   left: 6vw;   width: 48%; top: 4vw; }
    .navigation-email{margin-left: 5vw;    height: 100px;}
    #navigation-email2 { margin-left: 5vw;}
    #nohover_logo .streettalk { width: 100%; top: -3px; }
    /* #menu ul{    position: absolute; bottom: 38px;  left: 10vw;  top: 60vw;} */
    #menu ul{    position: relative; bottom: 38px;  left: 5vw;  top: 70vw;}
    #menu ul li{font-size: 1.5rem;line-height: 2px;}
    #nohover_logo{width: 200%;}
    #atail-logo-portrait a img{position: absolute;top: 30vw;margin-left: 0;}
    #nohover_logo a img{margin-left: 0; position: absolute;top: 30vw;}
    .copyright-con1, .copyright-footer{  display: none;}
    .full-post-mobile-info { background-color: #363b46;;     color: #FFF;  }
    .figure-extended h1{width: 100%;margin:0;font-size: 1.4rem;}
    .clients h1{font-size: 1.4rem;}
    #preview-text-content p{font-size: 1.1rem;color: #565656;width: 100%;}
    #team_sec{margin-right: 0;  margin-left: 0;}

}
#slide1 .nav-email, #slide2 .nav-email , #slide1 .copyright,  #slide2 .copyright {color:#000;left:2%;}



input, textarea {
    font-weight: 400;
}

ul > li:before {
    background-color: #565656;
}

ul ol li:before, ol ul li:before, ol li:before {
    color: #565656;
}

.atail-post-comments-wrapper {
    border-top: 1px solid #edf5f8;
    border-bottom: 1px solid #edf5f8;
    border-right: 1px solid #edf5f8;
}

.atail-post-navigation a:hover {
    background-color: #eef0f6;
}

.atail-project-image:before {
    background-color: #363b46;;
}

.atail-slider h1 a, .atail-slider h2 a, .atail-slider h3 a, .atail-slider h4 a, .atail-slider h5 a, .atail-slider h6 a, .atail-slider h2 a:hover, .atail-slider h3 a:hover, .atail-slider h4 a:hover, .atail-slider h5 a:hover, .atail-slider h6 a:hover, .atail-slider-item .blog-author span, .atail-slider-item .blog-date span, .blog-promo-box > .promo-box > .small-title, .blog-promo-box > .promo-box > p, .atail-project-nav:not(.atail-no-thumbnail) h4, .figure-extended h1 {
    color: #FFF;
}

.atail-slider-item, .slider-animate-box .animate-box-left, .slider-animate-box .animate-box-right, .atail-post-title:not(.atail-no-thumbnail) {
    background-color: #222527;
}

.slider-next-slide svg, .slider-prev-slide svg, .full-post-prev-slide svg, .full-post-next-slide svg {
    fill: #4d4f54;
}

.full-post-animate-box .animate-box-left, .full-post-animate-box .animate-box-right {
    background-color: #222527;
}

/* a.button:link, button, input[type^="submit"], input[type^="button"], button:not([data-action^="close-nav"]) {
    background-color: #1957f3;
    color: #FFF;
} */

/* a.button:hover, button:hover, input[type^="submit"]:hover, input[type^="button"]:hover, button:not([data-action^="close-nav"]):hover {
    background-color: #1d4dc7;
    color: #FFF;
} */

button.no-button {
    background-color: transparent;
    color: #4d4f54;
}

button.no-button:hover {
    background-color: transparent;
    color: #4d4f54;
}

.left-side, .right-side, .atail-small-line, .single-project .jssocials-share, .jssocials-share-count-box .jssocials-share-count, .post-content-header .jssocials-share, .grid-bg > div, .atail-brands {
    border-color: #edf5f8;
}

@media (min-width: 992px) {
    .animate-box-top > div, .animate-box-bot > div {
        border-right: 1px solid #edf5f8;
    }
}

.atail-post-navigation > div {
    border-top: 1px solid #edf5f8;
    border-bottom: 1px solid #edf5f8;
}

.atail-post-line {
    background-color: #edf5f8;
}

.atail-post-navigation a {
    border-right: 1px solid #edf5f8;
}

.widget .widget-title .small-title:after {
    background-color: #a9acb5;
}

.widget .widget-title:before, .widget .widget-title:after {
    background-color: #a9acb5;
}

.atail-preloader {
    background-color: #00H;
}

.atail-dot {
    background-color: #00H;
}

.atail-preloader .atail-dot {
    background-color: #FFF;
}

.tagcloud a {
    border-color: #1957f3;
    color: #1957f3;
}

.atail-dark-footer .tagcloud a {
    color: #FFF;
    border-color: #FFF;
}

.atail-dark-footer .tagcloud a:hover {
    background-color: #1957f3;
    border-color: #1957f3;
}

.tagcloud a:hover {
    background-color: #1957f3;
    border-color: #1957f3;
}

#today {
    background-color: #1957f3;
    color: #FFF;
}

.blog-promo-box {
    background-position: center center;
    background-size: cover;
}

.widget_recent_entries span, .widget_atail_recent_posts_widget span {
    color: #a9acb5;
}

.atail-dark-footer .widget input[type="text"], .atail-dark-footer .widget input[type="search"], .atail-dark-footer .widget input[type="email"], .atail-dark-footer .wpcf7-form-control, .atail-dark-footer .wpcf7-form-control:focus {
    border-color: #4d4f54;
    background-color: transparent;
    color: #FFF;
}

.post-sidebar .yikes-easy-mc-form input[type=text], .post-sidebar .yikes-easy-mc-form input[type=url], .post-sidebar .yikes-easy-mc-form input[type=email], .post-sidebar .yikes-easy-mc-form input[type=number], .post-sidebar .yikes-easy-mc-form select, .post-sidebar .wpcf7-form-control:not(input[type^="checkbox"]) {
    border: 1px solid #eef0f6;
    color: #565656;
    max-width: 100%;
    width: 100%;
}

.post-sidebar .wpcf7-form-control[type^="submit"] {
    color: #FFF;
}

.widget_calendar table td {
    background-color: #eef0f6;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

.post-sidebar .widget li, .post-sidebar .widget li a {
    color: #4d4f54;
}

.post-sidebar .widget li:before {
    background-color: #4d4f54;
}

.widget {
    color: #4d4f54;
}

.widget_calendar table tbody td.pad {
    background-color: transparent;
}

.widget.widget_archive ul li {
    color: #a9acb5;
}

.widget_calendar table caption, div.cs-select .cs-options ul li, div.cs-select {
    font-family:'texgyrepagella', "sans-serif";
}

form textarea, form input {
    color: #565656;
}

.post-sidebar .yikes-easy-mc-form input[type=text]:focus, .post-sidebar .yikes-easy-mc-form input[type=url]:focus, .post-sidebar .yikes-easy-mc-form input[type=email]:focus, .post-sidebar .yikes-easy-mc-form input[type=number]:focus, .post-sidebar .yikes-easy-mc-form select:focus, .post-sidebar .wpcf7-form-control:focus, .atail-comment-form input:focus, .atail-comment-form textarea:focus {
    border: 1px solid #565656;
}

.wpcf7-quiz-label {
    background-color: #FFF;
}

@media (max-width: 575.98px) {
    .all-projects-animate-box {
        background-color: #FFF;
    }
   
}

.atail-multitext-title, .atail-multitext-text > span {
    color: #575757;
}

.description-table .description-title, figure .description-title {
    color: #575757;
}

.atail-brands {
    background-color: #f4f4f4;
    
}

.project-count span, .project-count {
    color: #2798cf;
}

.full-post-close:before, .full-post-close:after, .close-projects-btn.close-projects-btn-loaded:before, .close-projects-btn.close-projects-btn-loaded:after, .close-projects-btn span {
    background-color: #363b46;
}

.full-post-content {
    background-color: #FFF;
}

.animate-box-top, .animate-box-bot, .post-slider-images {
    background-color: #FFF;
}

span[data-action="show-nav"] > span:before, span[data-action="show-nav"] > span:after, span[data-action="close-nav"] > span:before, span[data-action="close-nav"] > span:after, span[data-action="show-nav"] > span > span, span[data-action="close-nav"] > span > span {
    background-color: #fff;
}

.project-preview-arrow span {
    fill: #e6ecff;
    color: #fcfdff;
}

.atail-dark-footer .widget ul li:before {
    background-color: #4d4f54;
}


.all-projects-animate-box > div {
    background-color: #FFF;
}

input, textarea, form.yikes-easy-mc-form input.yikes-easy-mc-email, form.yikes-easy-mc-form input.yikes-easy-mc-text {
    border: 1px solid #eef0f6;
}

.wpcf7-form-control {
    max-width: 100%;
    width: 100%;
}

div.cs-select .cs-options ul li {
    color: #a9acb5;
}

div.cs-select, div.cs-select .cs-options ul li:hover {
    color: #565656;
}

div.cs-select, select.cs-select {
    background-color: #eef0f6;
}

div.cs-select .cs-options ul {
    border-top: 2px solid #FFF;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    margin-bottom: 2.4em;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.preview-article-header > h2 > a {
    color:#fff;
}

.preview-article-header > h2 > a:hover {
    /* color: #fff; */
    text-decoration: none;
}
.recentcomments a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
 }

.recentcomments a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-promo-box {
    background-image: url('../img/blog/photo.jpg');
}

.extended-row.services {
     background-image: url('../img/service/photo-2.png');
    margin-bottom: 0 !important;
 }

.row-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}
/* .preloader img{width: 12%; margin:0 auto;} */

.card {
  width:100%;
  height:100%;
  position: relative;
  display: inline-block;
}

/* .project-1:hover .img-top {
  display: inline;
  position: absolute;
  background-image:url("../img/project-preview/glamtram.png");
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
} */

 .card:hover .img-top {
  position: absolute;
        display: inline;
        -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
    }


.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

 .project-1 {
  width:100%;
  height:100%;
  position: relative;
  display: inline-block;

}
.project-1{
    background: url("../img/project-preview/gshock-banner.png") no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

.project-1:hover {
    display: block;
  position: absolute;
  background-image:url("../img/project-preview/casio_outdoor.png");
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

} 


.project-2 {
  width:100%;
  height:100%;
  position: relative;
  display: inline-block;

}
.project-2{
    background: url("../img/project-preview/nescafe-banner_old.png") no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;

}
.project-2:hover {
  display: block;
  position: absolute;
  background-image:url("../img/project-preview/nescafe-banner.png");
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}





.project-3 {
  width:100%;
  height:100%;
  position: relative;
  display: inline-block;

}
.project-3{
    background: url("../img/project-preview/banner-21.png") no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}
.project-3:hover {
  display: block;
  position: absolute;
  background-image:url("../img/project-preview/glamtram.png");
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

.project-4 {
  width:100%;
  height:100%;
  position: relative;
  display: inline-block;

}

.project-4:hover {
  display: block;
  position: absolute;
  background-image:url("../img/project-preview/hevells.png");
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

.project-4{
    background: url("../img/project-preview/HAVELLS_WIRE.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;

}
/* [type=radio] {
  display: none;
}

#slider {
  height: 35vw;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 60%;
  height: 100%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide1 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(20%,0,-200px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide1,
#s3:checked ~ #slide2 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-15%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#slide1 { background: url('../img/project-preview/Awrds_1.png') }
#slide2 { background: url('../img/project-preview/Awrds_2.png') }
#slide3 { background: url('../img/project-preview/Awrds_3.png') } */

/* awards */
.slider-container {
  position: relative;
  perspective: 350px;
  transform-style: preserve-3d;
  margin-right: 20%;
}

.carousel-3d-item {
  position: absolute;
  top: 50%;
  left: 40%;
  outline: 1px solid transparent;
}

#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3),
{
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
  transform: translateX(-175px) translateZ(-130px);
  opacity: .9;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
  transform: translateX(0) translateZ(0);
  opacity: 1;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
  transform: translateX(175px) translateZ(-130px);
  opacity: .9;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}
.award_price{display: none;}

.team_sec{margin-right: 12%;
    margin-left: 12%;}

#slideshow {
  margin: 80px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}
.awards h1 {
    font-size: 3.5rem;
}
.awards p {
    font-size: 1rem;
    line-height: 20px;
    font-family: "open_sansregular", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    margin: 0;
}




/* .slick-slide {
    margin: 0px 20px;
} */

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
    
}
.awards-section .slick-initialized .slick-slide{
height:100vh;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


/* projects cases*/
.filtr-container { margin: 0 auto 30px auto; padding: 0; overflow: hidden;}
.pro-image { width: 55.8%; float: left; margin: 0; padding: 0; background: #e6e6e6; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.pro-image img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%);
    transition: all 0.5s ease; width: 100%; display: -webkit-box;}
.pro-txt { width: 44%; float: left; margin: 0; padding: 0 0px 0 28px; -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-align: left;}
.pro-txt .pro-title { margin: 0 0 20px 0;padding: 0; color: #333; font-size: 16px;
    text-align: right; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.pro-txt .pro-title span {display: inline-block; margin: 0; padding: 8px 18px; background: #FFBB02; position: relative;left: 1px;}
.pro-txt .pro-des {
    margin: 0; padding: 0 15px 0 5vw; min-height: 180px; font-size: 14px; display: table;
}
.pro-txt .pro-des aside { display: table-cell; vertical-align: middle;}
.pro-txt .pro-des h3 { margin: 0; padding: 0; font-size: 18px; line-height: 22px;}
.pro-txt .viewpr { margin: 15px 0 0 0; color: #333; font-size: 12px;
    text-transform: capitalize;}
.pro-txt .viewpr span { display: block; margin-top: 5px;}

.nextarrow{
  width:100%;
  height:100%;
  position: relative;
  display: inline-block;
  cursor: pointer;
  }
  .nextarrow
 {
  display: block;
  background-image:url("../img/next.png");
  background-repeat: no-repeat;
  padding-bottom: 20%;
}

.filtr-container a {
    color: #333;
    text-decoration: none;
    display: block;
    background: #e6e6e6;
}
.filtr-container .column {
    width: 50%;
    float: left;
    margin:0;
    padding: 20px;
    font-size: 14px;
    font-family: 'texgyrepagella', "sans-serif";
    cursor: pointer;
    /* height: auto !important; */
    overflow: hidden;
    background-color: #fff;
}
.filtr-item:hover .pro-image img {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
    display: -webkit-box;
}
.filtr-container .column a:hover .pro-image, 
.filtr-container a:hover
{
    background: #ffe119;
}
.filtr-container .column a:hover .pro-image, 
.filtr-container a:hover span img
{
    background-image: url('../img/next-white.png');
}

.filtr-container .column a:hover .pro-image, 
.filtr-container a.cases-1:hover
{
    background: #e74732;
}
.filtr-container .column a:hover .pro-image, .filtr-container a.cases-2:hover {
    background: #4c240f;
}
.filtr-container .column a:hover .pro-image, .filtr-container a.cases-3:hover {
    background: #d2d25d;
}
.filtr-container .column a:hover .pro-image, .filtr-container a.cases-4:hover {
    background: #133767;
}
.filtr-container .column a:hover .pro-image, .filtr-container a.cases-5:hover {
    background: #302e2e;
}
.filtr-container .column a:hover .pro-image, .filtr-container a.cases-6:hover {
    background: #EA5E20;
}

.filtr-container .column a:hover .pro-image, .filtr-container a:hover h3{color: #fff;}
.filtr-container .column a:hover .pro-image, .filtr-container a:hover span {
    color: #fff;
}
.filtr-container .column a:hover .pro-image, .filtr-container a:hover .open-full-post:before {
    color: #fff;
}

.figure-extended .promo-box p{width: 73%;margin: 0 auto;}
/* end project cases  */

/* project inner page */
.fbb .sliderbanner{background: url(../img/fbb-glam.png) repeat-x;}
.nes .sliderbanner{background: url(../img/nes.png) repeat-x;}
.sliderbanner {
    width: 100%;
    margin: 0 0 47px 0;
    padding: 140px 0 0px 0;
    background: url(../img/cs-y-bg.png) repeat-x;
    position: relative;
}
.fan .sliderbanner { background: url(../img/fn-y-bg.png) repeat-x;}
.gshock .sliderbanner { background: url(../img/gs-y-bg.png) repeat-x;}
.wires .sliderbanner { background: url(../img/hw-y-bg.png) repeat-x;}
.save_tiger .sliderbanner { background: url(../img/st-y-bg.png) repeat-x;}

.project-content {
    width: 960px;
    margin: 0 auto;
    padding: 0;
}
.rendompr {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
    font-family: 'texgyrepagella', "sans-serif";
    line-height: 28px;
}
.rendompr .nextprLeft {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0 20px 0 0;
    position: relative;
}
.breadcrumb {
    margin: 0;
    padding: 0;
    color: #bebebe;
    font-size: 14px;
    text-transform: capitalize;
    background: 0 0;
}
.backimg {
    margin: 0;
    padding: 0 0 10px 0;
}
.backimg img{width: 5%;}
.t-breadcrumb {
    margin: 0 0 20px 0;
}
.breadcrumb a {
    color: #bebebe;
    text-decoration: none;
    font-family: 'texgyrepagella', "sans-serif";
}
.breadcrumb span {
    color: #333;
    font-family: 'texgyrepagella', "sans-serif";
}
.css-intro-section {
    margin-bottom: 40px;
}
.pr-intro {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0 50px 30px 0;
    color: #333;
    font-size: 14px;
    font-family: streetregular;
    line-height: 28px;
    position: relative;
}
.pr-intro h2 {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 50px;
    line-height: 43px;
    font-family: streetregular;
    letter-spacing: 1px;
    line-height: 50px;
}
.pr-next {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0 0 0 50px;
}
.pr-next p {
    color: #333;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    line-height: 25px;
    margin: 0;
    padding: 0;
}
.navigate .colL {
    margin: 0;
    padding: 0;
    width: 13%;
    float: left;
}
.backBtn:hover img, 
.nextBtn:hover img {
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.navigate {
    position: absolute;
    bottom: 42px;
    left: 0;
    right: 0;
}
.backBtn:hover {
    background: url(../img/backbtnH.png) repeat-y top left;
}
.backBtn {
    background: url(../img/backbtn.png) repeat-y top left;
    padding: 0 0 20px 30px;
}
.backBtn, .nextBtn {
    margin: 0;
    /* padding: 0; */
    display: inline-block;
    color: #333;
    font-size: 20px;
    line-height: 20px;
    font-family: "PoppinsBold_0", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.backBtn a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 0 0 20px 30px;
}
.backBtn span.number {
    padding: 0 0 0 7px;
}
.backBtn span, .nextBtn span {
    position: relative;
    top: 10px;
}
.backBtn span, .nextBtn span {
    margin: 0;
    padding: 0;
    display: block;
}
.backBtn img, .nextBtn img {
    -moz-opacity: .5;
    opacity: .50;
    filter: alpha(opacity=50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.single-post .navigate .colR {
    float: right;
}
.navigate .colR {
    margin: 0;
    padding: 0;
    width: 13%;
    float: right;
    text-align: right;
}
.nextBtn {
    background: url(../img/nextbtn.png) repeat-y top right;
    padding: 0 30px 20px 0;
}
.nextBtn:hover {
    background: url(../img/nextbtnH.png) repeat-y top right;
}
.nextBtn a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 0 30px 20px 0;
}
.nextBtn span.number {
    padding: 0 7px 0 0;
}
.backBtn span, .nextBtn span {
    position: relative;
    top: 10px;
}

/* navigation */
#case-study-page .navigate {
    position: absolute;
    bottom: 42px;
    left: 0;
    right: 0;
}
.navigate {
    padding: 0;
    /* width: 1285px; */
    margin: 0 auto;
}
.cs-info-section {
    margin-bottom: 42px;
}
.cs-section-heading {
    
    font-family: 'texgyrepagella',Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #333333;
    margin: 0 0 25px 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#.strategy-video .cs-section-heading {
    
    font-family: 'texgyrepagella',Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #333333;
    margin: 0 0 25px 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* .fbb .cs-section-heading:after{background-color: #ED1C24;} */
.cs-section-heading:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 3px;
    width: 2%;
    /* background-color: #fee119; */
}
.cs-info-section p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    margin: 0;
}
.result-video {
    position: relative;
    padding-bottom: 50%;
    padding-top: 56px;
    height: 0;
    overflow: hidden;
}
.result-video iframe, .result-video object, .result-video embed {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
}
#result ul#social-media-result {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#result ul#social-media-result li {
    width: 317px;
    display: inline-block;
    vertical-align: top;
}
#result ul#social-media-result li div {
   /*  border-right: 1px solid #a6a6a6; */
    padding: 16px 0;
    height: 148px;
}
#result ul#social-media-result li div h1 {
   font-family: 'texgyrepagella', "sans-serif";
    font-size: 60px;
    color: #333333;
    line-height: 52px;
}
#result ul#social-media-result li div h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #333333;
    letter-spacing: 1px;
}
#result ul#result-list {
    margin: 50px 0 0 0;
    padding: 0;
    list-style: none;
    font-family: streetregular;
    font-size: 14px;
    font-weight: normal;
    color: #333333;
}
#result-list ul {
    list-style: none;
}
#result ul#result-list ul li {
    background: url(../img/y-square.png) no-repeat;
    padding-left: 11px;
    margin-bottom: 13px;
    letter-spacing: 1px;
    
}
.clear {
    clear: both;
}

/* loading */
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

.animated-header {
  background: #000;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  overflow: hidden;
}

.animated-header:before {
  animation: show-background 60s .5s cubic-bezier(0,1,.5,1) forwards;
  background: url(https://cssanimation.rocks/images/random/space2.jpg) repeat center;
  background-size: cover;
  content: "";
  opacity: 0;
  height: 125vh;
  position: absolute;
  left: -10%;
  top: -10%;
  width: 125vw;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #aaa;
  font-size: 48px;
  display: none;
}

.js-loading .loading {
  display: block;
}

/* .earth {
  width: 200px;
  height: 200px;
  position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
} */

.moon {
  animation: spin 30s linear infinite;
  width: 50px;
  height: 50px;
  position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
  transform-origin: 200px 200px;
}

.earth img, .moon img {
  animation: show-on-load 1s .5s cubic-bezier(0,1.6,.6,1) forwards;
  /* border-radius: 50%; */
  opacity: 0;
  width: 100%;
  box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
}

.moon img {
  animation: fade-in 2s 1s cubic-bezier(0,1.5,1,1) forwards, spin 30s linear reverse infinite;
}

@keyframes spin {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes show-background {
  0% {
    opacity: 0;
    transform: none;
  }
  30% {
    opacity: .5;
  }
  100% {
    opacity: .5;
    transform: scale(.8)
  }
}

@keyframes show-on-load {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}
.slide-img img{-webkit-filter: drop-shadow(5px 5px 5px #222 );
    filter: drop-shadow(5px 5px 5px #222);}

/* team page */
/* .ImgixImage img {
    width: 60%;
} */
.name-bar{
  border-top: 4px solid #FFBB02;
  width: 15%;
}
.team_deg {
    margin-bottom: 5%;
}
.title {
    letter-spacing: 1px;
}
.post {
    letter-spacing: 1px;
}
.people_bottom{padding:5% 0 0 0;}

/* sitemap */
.people-banner {
    width: 100%;
    margin: 0;
    padding: 82px 0 0 0;
    background: #ffe119;
}
.site-map-title-col {
    padding: 65px 0 50px 0 !important;
    width: 100%;
    text-align: center;
}
.peopleLeft {
    text-transform: uppercase;
}
.peoplebox p a{color: #000;text-decoration: underline;}
.peopleLeft .small, .peopleRight .small {
    font-size: 70px;
    line-height: 70px;
    padding-right: 8px;
    color: #000;
}
.simemap-links p a{font-family: streetregular; font-weight: normal;}
.peoplebox.simemap-links {
    padding: 10%;
}

/* footer */
footer{padding: 1% 0 1% 0;background-color: #000;}
footer .nav-email{text-decoration: none; font-size: .8rem;letter-spacing: .05em;}
footer .copyright{text-decoration: none;font-size: .7rem; color: #777;font-family: 'texgyrepagella', "sans-serif";}
footer .copyright a{color: #777;}
footer .copyright a:hover{color: #FFBB02;}
.footer-social a {font-size: 20px; padding: 5px;color: #777;}
.footer-social a:hover {color:#FFBB02;}
hr {border-bottom: .2px solid #4d4f54;}

.layer-footer {
    bottom: 0;
    position: absolute;
    width: 50%;
}
/* .copyright-footer {
    bottom: 0;
    left: 26vw;
    line-height: 20px;
    position: fixed;
  } */
/* csr */
    .agency-block {
    background-color: #ededed;
}
.agency-block-alt {
    background-color: #cbcbcb;
}
.no-pad {
    padding: 0 !important;
}
.agency-block img {
    display: inline-block;
    /* margin-top: 20px;
    margin-bottom: 20px; */
}
.agency-title {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.agency-title h3 {
    opacity: 0;
    font-size: 16px;
    line-height: 23px;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.agency-panel a:hover{color: #FFE44A;}
.agency-title:hover {
    background-color: #FFE44A;
}
.agency-title:hover {
    cursor: url(img/next-arrow.png) 40 40, crosshair;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.agency-title:hover h3 {
    opacity: 1;
}
.valign {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.white-bg {
    background: #ffffff;
}
.pad-bottom-half {
    padding-bottom: 60px;
    padding-top: 10%;
}
.intro-08 h1 {
    font-size: 36px;
    line-height: 48px;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.main-heading > span {
    border-color: #FFE44A;
}
.main-heading > span {
    font-size: 36px;
    line-height: 72px;
    border-bottom: solid 3px;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-color: #FFE44A;
}
.main-heading > span > em {
    font-style: normal;
}
.font3 {
    font-family: 'Raleway', sans-serif;
}
.font4 {
    font-family: 'Montserrat', serif;
}
.black {
    color: #121212;
}
/* end csr */
/* vimeo */
.headers h1{display: none !important;}
.home_menu > li:last-child {
    margin-top: 27%;
    position: relative;
}

@media only screen and (min-width: 1440px) {

}