/* Animation */

.clearfix:before,
.clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.animate_ho {overflow-y: hidden; display: inline-block; width: 164px; height: 164px;}
.animate_a0 { position: absolute; top: 0; left: 0;   }
.animate_a0 .animate_inner{ height: 164px; width: 164px; position: relative; top: 0; left: 0; }

.animate  { color:  inherit; font-size: inherit; font-family: inherit;}
.animate .animate_inner { color:  inherit; font-size: inherit; font-family: inherit;}
.animate .letter_up { color:  inherit; font-size: inherit; font-family: inherit;}
.animate_text_fade_up { opacity: 0;}
.image-container { width: 164px; height: 164px; position: relative;}
.animate_box_expand_w { width: 0;  overflow: hidden;display: inline-block;  }
.animate_box_expand_h { height: 0; overflow: hidden; display: block;}
.animate_box_expand_wh { width: 0px; height: 0px; overflow: hidden; display: inline-block; }
.animate_box_expand .animate_inner {  display: inline-block; }

#animate_w2 { width: auto; }
#animate_bg1 { bottom: 100%;}
#animate_t1 { width: 100%; height: 0 !important;}
#animate_t1.active  { width: 100%; height: 100% !important;}
#animate_t1 .animate_inner * { opacity: 0 !important;  transition:all 0.9s; }
#animate_t1.active  .animate_inner * { opacity: 1 !important;}
#animate_t1 .animate_inner { width: 100%;}
.timeline .section-block-inner .timeline_item { opacity: 0; }
/*#animate_b4 { position: absolute; top: 0; left: 0; }
#animate_b4 .animate_inner{ height: 164px; width: 164px; position: relative; top: 0; left: 0; }

#animate_b7 { position: absolute; top: 0; left: 0; }
#animate_b7 .animate_inner{ height: 164px; width: 164px; position: relative; top: 0; left: 0; }*/
        
/*#animate_c1 > .animate_inner { display: flex; justify-content: space-between; padding:38px 50px 60px;}*/    
#animate_c4 > .animate_inner { width: 459px; text-align: center;}
#animate_p2 .animate_inner { text-align: left;}
#animate_p2 .animate_inner .section-title { text-align: left; float: left;}
.case-study .section-row:first-child  {background: red;}
#animate_p3 .animate_inner { min-width: 500px;}
#animate_c3  { width: 100%;}
#animate_c3 .animate_inner { width: 100%;}

code{display:inline-block; /*color:var(--white) !important;*/ z-index:2;}
/*code:before{content:''; width:0; background-color:var(--blue2); position:absolute; top:0; right:-6px; bottom:0; left:-6px; z-index:-1; transition:all 0.5s;}
code.active:before{width:calc(100% + 12px);}*/

.fade-up{opacity:0; margin-top:100px; margin-bottom:-100px; transition:all 0.5s;}
.fade-up.active{opacity:1; margin-top:0; margin-bottom:0;}

.early-fade-up{opacity:0; margin-top:100px; margin-bottom:-100px; transition:all 0.5s;}
.early-fade-up.active{opacity:1; margin-top:0; margin-bottom:0;}

.fade-down{opacity:0; margin-top:-100px; margin-bottom:100px; transition:all 0.5s;}

.fade-down.active{opacity:1; margin-top:0; margin-bottom:0;}

.separator.grow{width:0; transition:all 0.5s;}
.separator.grow.active{width:404px;}

.grey-bg.grow{bottom:100%; transition:all 0.75s;}
.grey-bg.grow.active{bottom:0;}

section.quote .grow:after{width:0; transition:all 0.5s;}
section.quote .grow.active:after{width:100%;}

section.team .grow:after{width:0; transition:all 0.5s;}
section.team .grow.active:after{width:100%;}

/*.logo2 { opacity: 0;}*/

@media screen and (max-width:680px) {
    .separator.grow.active{width:202px;}
}