/*====================================
    RESPONSIVE CSS
=====================================*/


@media all and (max-width: 1244px) {

    /* hide red cude */
    #website_wrp #left .logo:before,
    #website_wrp #left .hr:before ,
    #top .head_navigation .wraper_inner .menu:after,
    #top .head_navigation .wraper_inner .hr:after,
    #top .section_navigation .wraper_inner .hr:after,
    #bottom .wraper .wraper_inner:before ,
    #bottom .wraper .wraper_inner:after {
        display: none;
    }

    /* hide border */
    #website_wrp,
    #top .head_navigation .menu {
        border-right: none;
    }
    #website_wrp #left {
        border-left: none;
    }

    /* red cubes */
    #contentArea > .cube_rt:after ,
    #contentArea > .cube_rb:after ,
    header .cube_rt:after ,
    header .cube_rb:after {
        display: none;
    }


}

/*  fotobank
----------------------------------------------*/


@media all and (max-width:1200px) {
    .page_foto .columns.foto_detail {
         -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media all and (max-width:1100px) {
    .page_foto .list .doc {
        padding: 22px 18px;
    }

    .page_foto .photo-first ,
    .page_foto .photo-top .photo-calendar {
        padding: 26px 33px;
    }
}



@media all and (max-width:990px) {
    .page_foto .photo-top .photo-calendar {
        display: none;
    }
    .page_foto .list.columns .doc.photo-calendar {
        display: inline-block;
    }

    .page_foto .photo-first {
        width:unset;
        border:0;
    }
    .page_foto .photo-first img {
        width: 100%;
    }
}


@media all and (max-width:880px) {
    .page_foto .columns ,
    .page_foto .columns.foto_detail {
         -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}


@media all and (max-width:768px) {
    .page_foto .columns ,
    .page_foto .columns.foto_detail {
         -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .page_foto .photo-preview{
        display: none;
    }
}


@media all and (max-width:680px) {
    .page_foto .columns ,
    .page_foto .columns.foto_detail {
         -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .page_foto .list .doc {
        width: 99.99%;
    }

}

@media all and (max-width:550px) {
    .page_foto .photo-big {
        float: unset;
        width: 100%;
    }
}

@media all and (max-width:360px) {
    fieldset.search-form ,
    fieldset.search-form input[type=search] {
        width: 188px;
    }
    .page_foto .list .doc {
        padding: 6px 10px;
    }
}

/*
@media all and (min-width:990px) {
    .page_foto .photo-top .photo-calendar {
        display: block;
    }
    .page_foto .list.columns .doc.photo-calendar {
        display: none;
    }
}
*/


/*  columns
----------------------------------------------*/

/* three column */
@media all and (min-width:950px) {
    .page_content_list.page_markets .list .doc {
        min-height: 500px;
    }
}


/* two column */
@media all and (max-width:950px) {

    .columns {
         -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .page_content_list .list .doc {
        /*width: 50%;*/
        width: 99.99%;
    }

    .columns.columns2 ,
    .page_video .list  {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
        .columns.columns2 .doc ,
        .page_video .list .doc {
            width: 99.99%;
            min-height: unset;
        }
}




/* one column */
@media all and (max-width:690px) {
    .page_content_list .list,
    .page_reference .list ,
    .page_qna .list ,
    .page_video .list {
        height:  unset;
        max-height: unset;
    }
    .page_content_list .list .doc,
    .page_documents .documents .doc ,
    .page_reference .list .doc ,
    .page_qna .list .doc ,
    .page_video .list .doc {
        width: 99.99%;
        min-height: unset;
        padding: 18px 22px;
    }
    .columns {
         -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}










/*
*   MOBILE
*/
@media all and (max-width:767px) {
    .dns-mobile { display: none !important; }

    nav#left { display: none; }
    #website_wrp #workArea {
        padding-left: 0;
    }
    .wraper_inner {
        padding-left: 0;
        padding-bottom: 75px;
    }
    header .wraper_inner {
        padding-bottom: 0;
    }

    .head_navigation { display: none; }

    .burger-block { height: 52px; background-color: white; padding: 10px; }
    .burger-block .burger {
        background: url('../images/burger.png');
        width: 28px;
        height: 30px;
        cursor: pointer;
    }
    header .burger-block .burger.active { background: url('../images/burger_active.png'); }
    header .burger-block .search { float: right; margin-top: 3px; padding-left: 0; }
    .top_navigation { display: none; background-color: white; }
    .top_navigation .menu { padding: 5px 0; min-width: 0; }
    .top_navigation .menu .item {
        text-align: right;
        padding-top: 4px;
        padding-bottom: 6px;
        float: right;
        display: inline-block;
        clear: both;
    }
    .show-mobile .social {
        text-align: right;
        padding-left: 0;
        padding-right: 5px;
        /*margin-top: 0; */
        min-width: 0;
        position: absolute;
        bottom: 50px;
        right: 0px;
    }
    .show-mobile .social .item { display: inline-block; width: 25px; height: 25px; float: none; text-align: center; }
    .show-mobile #subscription { width: 185px; padding-right: 5px; float: right; margin-bottom: 20px; min-width: 0; }
    .show-mobile #subscription input[type="email"] { width: 153px; }
    .show-mobile #subscription input[type="submit"] { left: 127px; }
    .show-mobile .sitemap {
        padding-right: 13px;
        color: #6b6b6b;
        font-size: 14px;
        position: absolute;
        bottom: 15px;
        right: -2px;
    }
    .show-mobile .sitemap a { text-decoration: none; color: #6f6f6f;}

    .show-mobile .sitehome {
        padding-right: 13px;
        color: #6b6b6b;
        font-size: 14px;
        position: absolute;
        bottom: 15px;
        left: 14px;
    }
    .show-mobile .sitehome a { text-decoration: none; color: #6f6f6f;}
    .show-mobile .sitehome a:hover { color: #ed1c24; }


    #contentArea { padding: 15px; }

    /* red cubes */
    #contentArea > .cube_lt:before,
    #contentArea > .cube_rt:after ,
    #contentArea > .cube_lb:before,
    #contentArea > .cube_rb:after ,
    header .cube_lt:before ,
    header .cube_rt:after ,
    header .cube_lb:before ,
    header .cube_rb:after {
        display: none;
    }

    .search-sort { white-space: normal; }

    /* main page */
    .page_main #workArea {display: none; }

    .page_main #mobilemain {
        display: block;
        margin-top: 95px;
    }
        .page_main #mobilemain .logotext {
            position: unset;
            top: unset;
            left:unset;
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
            height: unset;
            background: none;
            margin: 20px 20px 30px 20px;
        }
        .page_main #mobilemain .logo {
            position: unset;
            top: unset;
            left:unset;
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
            height: unset;
            background: none;
            margin: 20px 14px;
        }
        .page_main #mobilemain #sitemap {
            display: none;
        }
        .page_main #mobilemain #copyright {
            width: 40%;
            margin: 10px 0 48px auto;
            padding: 0 20px 0 0;
        }
        .page_main #mobilemain .menu {
            margin: 18px;
            width: unset;
            min-width: unset;
            display: block;
        }
            .page_main #mobilemain .menu .item {
                display: block;
                margin-bottom: 7px;
                width: unset;
            }
                .page_main #mobilemain .menu .item a {
                    text-decoration: none;
                    font-size: 18px;
                }



    /* DOCS */
    .page_content .document.with-anotation .section
    {
        margin-left:0;
    }
    #contentArea .document  .index {
        float: none;
        width: auto;
        position: static;
        left: unset;
        top: unset;
        /*padding: 0;*/
    }
    .page_document .document .preview,
    .page_document .document .section {
        margin-left: 0;
        border-top: 1px #ccc dashed;
        border-left: none;
    }

    .page_document .document .preview {
        background: none;
    }

    .page_content .document .anotation-image {
        max-width: 270px;
    }

    #contentArea .img {
        margin-left: 0;
        margin-right: 0px;
        padding: 0;
    }

    /* Contacts */
    .page_contacts #workArea h1:nth-of-type(1) { margin-left: 0; }
    .page_contacts #geomap { position: static; width: auto; margin-bottom: 20px; }
    .page_contacts dl,
    .page_contacts  #workArea h2,
    .page_contacts  #workArea h3 { margin-left: 0; }

    /* Main */

    .page_main #website_wrp #workArea {
        padding-left: 0;
    }

    /* sub-section */
    .sub-section {
        border-left: none;
        margin-top: 150px;

        width: -webkit-calc(100% + 27px);

        width: calc(100% + 27px);
        margin-left: -15px;
    }
        .sub-section:last-of-type {
            margin-top: none;
        }
        .sub-section .sub-title {
            left: 33px;
            top: -178px;
            width: unset;
            border-top:none;
        }
}








/*
*   TABLET
*/
@media all and (min-width:768px) and (max-width:1023px) {
    .dns-pda { display: none !important; }
    .burger-block { display: none !important; }
    .show-mobile { display: none !important; }

    /* Docs */
    .page_content .document.with-anotation > .section
    {
        margin-left:0;
    }

    #contentArea .document .index {
        float: none;
        width: auto;
        position: static;
        left: unset;
        top: unset;
        padding: 0;
    }
    .page_document .document > .preview,
    .page_document .document > .section {
        margin-left: 0;
        border-top: 1px #ccc dashed;
        border-left: none;
    }

    .page_content .document .anotation-image {
        max-width: 270px;
    }

    /* Contacts */
    .page_contacts #workArea h1:nth-of-type(1) { margin-left: 0; }
    .page_contacts #geomap { position: static; width: auto; margin-bottom: 20px; }
    .page_contacts dl,
    .page_contacts  #workArea h2,
    .page_contacts  #workArea h3 { margin-left: 0; }

    #contentArea .img {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0;
    }


    /* sub-section */
    .sub-section {
        border-left: none;
        margin-top: 150px;
    }
        .sub-section:last-of-type {
            margin-top: none;
        }
        .sub-section .sub-title {
            left: 0px;
            top: -178px;
            border-top:none;
        }

}

/*
*   PC SMALL
*/
@media all and (min-width:1024px) and (max-width:1279px) {
    .dns-pc-small { display: none !important; }
    .burger-block { display: none !important; }
    .show-mobile { display: none !important; }
}

/*
*   PC BIG
*/
@media all and (min-width:1280px) {
    .dns-pc-big { display: none !important; }
    .burger-block { display: none !important; }
    .show-mobile { display: none !important; }
}
/*********************** gif/video /***********************/
@media screen and (min-width: 765px) {
  .market_video{display: block;}
  .market_gif{display: none;}
}
@media screen and (max-width: 765px) {
  .market_video{display: none;}
  .market_gif{display: block;}
}



/********************* bat and man ***********************/
.batterfly_container .batterfly_gif,
.batterfly_container .chel_video {
  max-width: 640px;
  width: 100%;
  height: auto; }

@media screen and (min-width: 640px) {
  .chel_video {
    display: block; }
  .batterfly_gif {
    display: none; } }

@media screen and (max-width: 640px) {
  .chel_video {
    display: none; }
  .batterfly_gif {
    display: block; } }
/*************************** css matrix and life loop ************************/
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@keyframes item1_anim {
  from {
    transform: rotateY(90deg); }
  to {
    transform: rotateY(0deg); } }

@keyframes item1_flag_anim {
  from {
    transform: translate(0, 26px);
    opacity: 0; }
  5% {
    opacity: 1; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes item1_doc_anim {
  from {
    transform: translate(0, -15px);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes item1_arrow_anim {
  from {
    transform: translate(0, -22px);
    opacity: 0; }
  5% {
    opacity: 1; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes item1_bottom_text_anim {
  from {
    transform: translate(0, calc( 100% + 22px));
    opacity: 0; }
  to {
    transform: translate(0, 100%);
    opacity: 1; } }

@keyframes item1_top_text_anim {
  from {
    transform: translate(0, calc( -100% - 22px));
    opacity: 0; }
  to {
    transform: translate(0, -100%);
    opacity: 1; } }

@keyframes item2_anim {
  from {
    transform: translate(-150%, 0); }
  to {
    transform: translate(0, 0); } }

@keyframes step_anim {
  from {
    opacity: 0;
    transform: translate(-50px, 0); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes overlay_anim {
  from {
    transform: translate(-500px, 0) rotate(-45deg); }
  to {
    transform: translate(1600px, 0) rotate(-45deg); } }

@keyframes circle_anim {
  from {
    transform: scale(0) rotate(45deg); }
  to {
    transform: scale(1) rotate(0deg); } }

@keyframes left_block_anim {
  from {
    transform: translate(-100px, 0);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes right_block_anim {
  from {
    transform: translate(100px, 0);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes top_block_anim {
  from {
    transform: translate(0, -100px);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes bottom_block_anim {
  from {
    transform: translate(0, 100px);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes hor_text_anim {
  from {
    width: 0; }
  to {
    width: 173px; } }

@keyframes vertical_text_anim {
  from {
    width: 0; }
  to {
    width: 143px; } }

@keyframes arrow_matrix_anim {
  from {
    width: 0; }
  to {
    width: 116px; } }

@keyframes block_line_anim {
  from {
    height: 0; }
  to {
    height: 40px; } }

@keyframes scope_cont_anim {
  from {
    width: 0; }
  to {
    width: 280px; } }

@keyframes scope_text_anim {
  from {
    transform: translate(-50%, -50px);
    opacity: 0; }
  to {
    transform: translate(-50%, 0);
    opacity: 1; } }

@keyframes block_dashed_anim1 {
  from {
    width: 0; }
  to {
    width: 86px; } }

@keyframes block_dashed_anim2 {
  from {
    height: 0; }
  to {
    height: 143px; } }

@keyframes block_dashed_anim3 {
  from {
    width: 0; }
  to {
    width: 347px; } }

@keyframes block_dashed_anim4 {
  from {
    height: 0; }
  to {
    height: 71px; } }

@keyframes block_dashed_anim5 {
  from {
    width: 0; }
  to {
    width: 434px; } }

@keyframes block_dashed_anim6 {
  from {
    height: 0; }
  to {
    height: 215px; } }

@keyframes block_dashed_anim7 {
  from {
    width: 0; }
  to {
    width: 87px; } }

@keyframes block_dashed_anim8 {
  from {
    height: 0; }
  to {
    height: 107px; } }

@keyframes block_dashed_anim9 {
  from {
    width: 0; }
  to {
    width: 87px; } }

@keyframes block_dashed_anim10 {
  from {
    height: 0; }
  to {
    height: 107px; } }

@keyframes block_dashed_anim12 {
  from {
    height: 0; }
  to {
    height: 143px; } }

/*********************************** block 4  ***************************************/
@keyframes block_dashed_anim15 {
  from {
    width: 0; }
  to {
    width: 203px; } }

@keyframes block_dashed_anim16 {
  from {
    height: 0; }
  to {
    height: 215px; } }

@keyframes block_dashed_anim17 {
  from {
    width: 0; }
  to {
    width: 56px; } }

@keyframes block_dashed_anim18 {
  from {
    height: 0; }
  to {
    height: 179px; } }

@keyframes block_dashed_anim19 {
  from {
    width: 0; }
  to {
    width: 143px; } }

@keyframes block_dashed_anim20 {
  from {
    height: 0; }
  to {
    height: 36px; } }

@keyframes text_span_anim {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes info_block_anim {
  from {
    opacity: 0;
    transform: translate(0, 100px); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }

.matrix_container {
  position: relative;
  overflow: hidden;
  max-width: 1237px;
  margin: 0 auto; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 300%;
  z-index: 100;
  background-color: white;
  -ms-transform: translate(-2200px, 0) rotate(-45deg);
      transform: translate(-2200px, 0) rotate(-45deg);
  animation: overlay_anim 2s ease;
  animation-delay: 0s;
  animation-fill-mode: forwards; }

.matrix {
  border-top: 1px solid #cacaca;
  border-left: 1px solid #cacaca;
  position: relative;
  height: 360px;
  width: 870px;
  font-size: 0;
  margin: 220px auto 450px; }
  .matrix_item {
    border-bottom: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
    width: 86px;
    height: 35px;
    display: inline-block; }
  .matrix .left_block, .matrix .right_block {
    width: 180px;
    height: 100%;
    position: absolute;
    top: 0; }
  .matrix .left_block {
    left: -200px;
    background: url(../images/left.svg) center no-repeat;
    animation: left_block_anim   .6s ease;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    -ms-transform: translate(-100px, 0);
        transform: translate(-100px, 0);
    opacity: 0; }
  .matrix .right_block {
    right: -200px;
    background: url(../images/right.svg) center no-repeat;
    animation: right_block_anim .6s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    -ms-transform: translate(100px, 0);
        transform: translate(100px, 0);
    opacity: 0; }
  .matrix .top_block, .matrix .bottom_block {
    width: calc(100% + 25px);
    height: 180px;
    position: absolute; }
  .matrix .top_block {
    top: -160px;
    left: 10px;
    background: url(../images/top.svg) center no-repeat;
    animation: top_block_anim .6s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    -ms-transform: translate(100px, 0);
        transform: translate(100px, 0);
    opacity: 0; }
    .matrix .top_block .top_line {
      position: absolute;
      height: 0px;
      width: 6px;
      bottom: 62px;
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
      background: url(../images/line.svg) center bottom no-repeat;
      background-size: 6px 40px;
      animation: block_line_anim .9s ease;
      animation-fill-mode: forwards;
      animation-delay: 1.6s; }
      .matrix .top_block .top_line.item1 {
        left: 22px; }
      .matrix .top_block .top_line.item2 {
        left: 198px; }
      .matrix .top_block .top_line.item3 {
        left: 375px; }
      .matrix .top_block .top_line.item4 {
        left: 550px; }
      .matrix .top_block .top_line.item5 {
        left: 727px; }
    .matrix .top_block .scope_container {
      overflow: hidden;
      width: 0;
      height: 12px;
      position: absolute;
      left: 134px;
      bottom: 145px;
      animation: scope_cont_anim .5s ease;
      animation-fill-mode: forwards;
      animation-delay: 1.9s;
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
    .matrix .top_block .scope {
      background: url(../images/scope.svg) center center no-repeat;
      background-size: 280px 12px;
      width: 280px;
      height: 12px;
      position: absolute;
      left: 50%;
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
  .matrix .scope_text {
    background: url(../images/scope_text.svg) center center no-repeat;
    background-size: 180px 12px;
    width: 280px;
    height: 12px;
    position: absolute;
    left: 133px;
    -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    opacity: 0;
    animation: scope_text_anim .8s ease;
    animation-fill-mode: forwards;
    animation-delay: 2.2s; }
  .matrix .bottom_block {
    width: calc(100% - 12px);
    bottom: -160px;
    left: 10px;
    background: url(../images/bottom.svg) center no-repeat;
    animation: bottom_block_anim .6s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    -ms-transform: translate(100px, 0);
        transform: translate(100px, 0);
    opacity: 0; }
    .matrix .bottom_block .bottom_line {
      position: absolute;
      height: 0px;
      width: 6px;
      top: 52px;
      background: url(../images/line.svg) center bottom no-repeat;
      background-size: 6px 40px;
      animation: block_line_anim .9s ease;
      animation-fill-mode: forwards;
      animation-delay: 1.6s; }
      .matrix .bottom_block .bottom_line.item1 {
        left: 26px; }
      .matrix .bottom_block .bottom_line.item2 {
        left: 203px; }
      .matrix .bottom_block .bottom_line.item3 {
        left: 380px; }
      .matrix .bottom_block .bottom_line.item4 {
        left: 555px; }
      .matrix .bottom_block .bottom_line.item5 {
        left: 731px; }
  .matrix .top_text, .matrix .bottom_text {
    color: white;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    width: 0;
    animation: hor_text_anim .3s ease;
    animation-delay: 1.6s;
    animation-fill-mode: forwards; }
  .matrix .bottom_text {
    background-color: #797a7f;
    bottom: 10px; }
  .matrix .top_text {
    background-color: #000000;
    top: 10px; }
  .matrix .left_text {
    color: white;
    background: #ef6640;
    line-height: 20px;
    font-size: 15px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 20px;
    -ms-transform-origin: top left 0px;
        transform-origin: top left 0px;
    -ms-transform: rotate(-90deg) translate(-50%, 0);
        transform: rotate(-90deg) translate(-50%, 0);
    width: 0px;
    animation: vertical_text_anim .3s ease;
    animation-delay: 1.6s;
    animation-fill-mode: forwards; }
  .matrix .right_text {
    color: white;
    background: #a8a8a8;
    line-height: 20px;
    font-size: 15px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: calc(100% - 35px);
    -ms-transform-origin: top left 0px;
        transform-origin: top left 0px;
    -ms-transform: rotate(-90deg) translate(-50%, 0);
        transform: rotate(-90deg) translate(-50%, 0);
    width: 0px;
    animation: vertical_text_anim .3s ease;
    animation-delay: 1.6s;
    animation-fill-mode: forwards; }
  .matrix .arrow {
    overflow: hidden;
    width: 0px;
    position: absolute;
    height: 21px;
    position: absolute;
    animation: arrow_matrix_anim .6s ease;
    animation-fill-mode: forwards; }
    .matrix .arrow_item {
      position: absolute;
      top: 50%;
      left: 0;
      background: black;
      height: 1px;
      width: 104px; }
      .matrix .arrow_item:before {
        position: absolute;
        right: -4px;
        top: -5px;
        content: '';
        width: 0px;
        height: 0;
        border-top: 5px solid transparent;
        border-left: 4px solid black;
        border-bottom: 5px solid transparent;
        z-index: 20; }
    .matrix .arrow.item1 {
      top: -12px;
      left: 0;
      animation-delay: .5s; }
    .matrix .arrow.item2 {
      -ms-transform-origin: center left 0px;
          transform-origin: center left 0px;
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
      left: 0px;
      top: -11px;
      animation-delay: .5s; }
      .matrix .arrow.item2 .arrow_item {
        background: #ef6640; }
        .matrix .arrow.item2 .arrow_item:before {
          border-left-color: #ef6640; }
    .matrix .arrow.item3 {
      bottom: -9px;
      left: 0;
      animation-delay: .7s; }
      .matrix .arrow.item3 .arrow_item {
        background: #797a7f; }
        .matrix .arrow.item3 .arrow_item:before {
          border-left-color: #797a7f; }
    .matrix .arrow.item4 {
      -ms-transform-origin: center left 0px;
          transform-origin: center left 0px;
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
      left: -1px;
      bottom: -10px;
      animation-delay: .7s; }
      .matrix .arrow.item4 .arrow_item {
        background: #ef6640; }
        .matrix .arrow.item4 .arrow_item:before {
          border-left-color: #ef6640; }
    .matrix .arrow.item5 {
      top: -10px;
      right: 0;
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
      animation-delay: .9s; }
      .matrix .arrow.item5 .arrow_item {
        background: black; }
        .matrix .arrow.item5 .arrow_item:before {
          border-left-color: black; }
    .matrix .arrow.item6 {
      -ms-transform-origin: center left 0px;
          transform-origin: center left 0px;
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
      left: calc(100% + 1px);
      top: -10px;
      animation-delay: .9s; }
      .matrix .arrow.item6 .arrow_item {
        background: #a8a8a8; }
        .matrix .arrow.item6 .arrow_item:before {
          border-left-color: #a8a8a8; }
    .matrix .arrow.item7 {
      bottom: -10px;
      left: calc(100% - 1px);
      -ms-transform-origin: center left 0px;
          transform-origin: center left 0px;
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
      animation-delay: 1.1s; }
      .matrix .arrow.item7 .arrow_item {
        background: #a8a8a8; }
        .matrix .arrow.item7 .arrow_item:before {
          border-left-color: #a8a8a8; }
    .matrix .arrow.item8 {
      -ms-transform-origin: center left 0px;
          transform-origin: center left 0px;
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
      left: 100%;
      bottom: -11px;
      animation-delay: 1.1s; }
      .matrix .arrow.item8 .arrow_item {
        background: #797a7f; }
        .matrix .arrow.item8 .arrow_item:before {
          border-left-color: #797a7f; }
  .matrix .circle {
    height: 29px;
    width: 29px;
    position: absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: circle_anim .6s ease;
    animation-fill-mode: forwards;
    -ms-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg); }
    .matrix .circle.circle_top_left {
      background-image: url(../images/circle-2.svg);
      top: -45px;
      left: -45px;
      animation-delay: .7s; }
    .matrix .circle.circle_bottom_left {
      background-image: url(../images/circle-3.svg);
      bottom: -45px;
      left: -45px;
      animation-delay: .5s; }
    .matrix .circle.circle_top_right {
      background-image: url(../images/circle-1.svg);
      top: -45px;
      right: -45px;
      animation-delay: .9s; }
    .matrix .circle.circle_bottom_right {
      background-image: url(../images/circle-4.svg);
      bottom: -45px;
      right: -45px;
      animation-delay: 1.1s; }
  .matrix .block_dashed {
    position: absolute;
    height: 0;
    width: 0; }
    .matrix .block_dashed.item1 {
      animation: block_dashed_anim1 .3s ease;
      animation-fill-mode: forwards;
      left: 86px;
      top: 71px;
      border-top: 1px dashed black;
      animation-delay: 1.0s; }
    .matrix .block_dashed.item2 {
      animation: block_dashed_anim2 .3s ease;
      animation-fill-mode: forwards;
      left: 173px;
      top: 71px;
      border-left: 1px dashed black;
      animation-delay: 1.3s; }
    .matrix .block_dashed.item3 {
      animation: block_dashed_anim3 .3s ease;
      animation-fill-mode: forwards;
      left: 173px;
      top: 215px;
      border-top: 1px dashed black;
      animation-delay: 1.6s; }
    .matrix .block_dashed.item4 {
      animation: block_dashed_anim4 .3s ease;
      animation-fill-mode: forwards;
      left: 521px;
      top: 215px;
      border-left: 1px dashed black;
      animation-delay: 1.9s; }
    .matrix .block_dashed.item5 {
      animation: block_dashed_anim5 .3s ease;
      animation-fill-mode: forwards;
      right: 347px;
      top: 287px;
      border-top: 1px dashed black;
      animation-delay: 2.2s; }
    .matrix .block_dashed.item6 {
      animation: block_dashed_anim6 0.3s ease;
      animation-fill-mode: forwards;
      left: 86px;
      bottom: 71px;
      border-left: 1px dashed black;
      animation-delay: 2.5s; }
    .matrix .block_dashed.item7 {
      animation: block_dashed_anim7 .4s ease;
      animation-fill-mode: forwards;
      left: 260px;
      top: 71px;
      border-top: 1px dashed black;
      animation-delay: 1.3s; }
    .matrix .block_dashed.item8 {
      animation: block_dashed_anim8 .4s ease;
      animation-fill-mode: forwards;
      left: 347px;
      top: 71px;
      border-left: 1px dashed black;
      animation-delay: 1.7s; }
    .matrix .block_dashed.item9 {
      animation: block_dashed_anim9 .4s ease;
      animation-fill-mode: forwards;
      right: 521px;
      top: 179px;
      border-top: 1px dashed black;
      animation-delay: 2.1s; }
    .matrix .block_dashed.item10 {
      animation: block_dashed_anim10 .4s ease;
      animation-fill-mode: forwards;
      left: 260px;
      bottom: 179px;
      border-left: 1px dashed black;
      animation-delay: 2.5s; }
    .matrix .block_dashed.item11 {
      animation: block_dashed_anim7 .4s ease;
      animation-fill-mode: forwards;
      left: 551px;
      top: 143px;
      border-top: 1px dashed black;
      animation-delay: 1.3s; }
    .matrix .block_dashed.item12 {
      animation: block_dashed_anim12 .4s ease;
      animation-fill-mode: forwards;
      left: 638px;
      top: 143px;
      border-left: 1px dashed black;
      animation-delay: 1.7s; }
    .matrix .block_dashed.item13 {
      animation: block_dashed_anim9 .4s ease;
      animation-fill-mode: forwards;
      right: 233px;
      top: 287px;
      border-top: 1px dashed black;
      animation-delay: 2.1s; }
    .matrix .block_dashed.item14 {
      animation: block_dashed_anim12 .4s ease;
      animation-fill-mode: forwards;
      left: 551px;
      bottom: 73px;
      border-left: 1px dashed black;
      animation-delay: 2.5s; }
    .matrix .block_dashed.item15 {
      animation: block_dashed_anim15 .4s ease;
      animation-fill-mode: forwards;
      left: 551px;
      top: 71px;
      border-top: 1px dashed black;
      animation-delay: 1.3s; }
    .matrix .block_dashed.item16 {
      animation: block_dashed_anim16 .4s ease;
      animation-fill-mode: forwards;
      left: 752px;
      top: 71px;
      border-left: 1px dashed black;
      animation-delay: 1.7s; }
    .matrix .block_dashed.item17 {
      animation: block_dashed_anim17 .4s ease;
      animation-fill-mode: forwards;
      right: 116px;
      top: 287px;
      border-top: 1px dashed black;
      animation-delay: 2.1s; }
    .matrix .block_dashed.item18 {
      animation: block_dashed_anim18 .4s ease;
      animation-fill-mode: forwards;
      left: 695px;
      bottom: 73px;
      border-left: 1px dashed black;
      animation-delay: 2.5s; }
    .matrix .block_dashed.item19 {
      animation: block_dashed_anim19 .4s ease;
      animation-fill-mode: forwards;
      right: 173px;
      top: 107px;
      border-top: 1px dashed black;
      animation-delay: 2.9s; }
    .matrix .block_dashed.item20 {
      animation: block_dashed_anim20 .3s ease;
      animation-fill-mode: forwards;
      left: 551px;
      bottom: 251px;
      border-left: 1px dashed black;
      animation-delay: 3.2s; }
  .matrix .text_span {
    font-size: 11px;
    color: #555555;
    position: absolute;
    animation: text_span_anim .7s ease;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 3.0s; }
    .matrix .text_span.item1 {
      left: 86px;
      bottom: 107px;
      width: 434px;
      height: 15px;
      vertical-align: bottom;
      text-align: center; }
    .matrix .text_span.item2 {
      left: 589px;
      top: 71px;
      line-height: 36px; }
    .matrix .text_span.item3 {
      left: 569px;
      top: 201px;
      line-height: 15px;
      width: 60px; }
    .matrix .text_span.item4 {
      left: 281px;
      top: 90px;
      width: 66px;
      line-height: 15px; }
    .matrix .text_span.rotate {
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
      -ms-transform-origin: top left 0px;
          transform-origin: top left 0px; }
    .matrix .text_span.small {
      background: rgba(255, 255, 255, 0.7); }
    .matrix .text_span.item5 {
      text-align: right;
      width: 70px;
      top: 125px;
      left: 40px; }
    .matrix .text_span.item6 {
      width: 70px;
      bottom: 25px;
      left: 40px; }
    .matrix .text_span.item7 {
      width: 70px;
      top: 115px;
      right: 30px; }
    .matrix .text_span.item8 {
      width: 90px;
      top: 305px;
      right: 10px; }
    .matrix .text_span.item9 {
      top: 20px;
      left: 40px; }
    .matrix .text_span.item10 {
      bottom: 15px;
      left: 40px; }
    .matrix .text_span.item11 {
      top: 20px;
      right: 40px; }
    .matrix .text_span.item12 {
      bottom: 15px;
      right: 40px; }
  .matrix .info_block {
    animation: .6s info_block_anim ease;
    animation-fill-mode: forwards;
    opacity: 0; }
  .matrix .info_block1 {
    left: 0;
    bottom: -300px;
    width: 140px;
    height: 130px;
    position: absolute;
    background: url(../images/info_block1.svg) center center no-repeat;
    background-size: 140px 130px;
    animation-delay: 2.5s; }
  .matrix .info_arrow {
    width: 33px;
    height: 12px;
    position: absolute;
    left: 150px;
    bottom: -257px;
    background: url(../images/info_arrow.svg) center center no-repeat;
    background-size: 33px 12px;
    animation-delay: 2.7s; }
  .matrix .info_block2 {
    left: 205px;
    bottom: -300px;
    width: 110px;
    height: 100px;
    position: absolute;
    background: url(../images/info_block2.svg) center center no-repeat;
    background-size: 110px 100px;
    animation-delay: 2.9s; }
  .matrix .info_block3 {
    left: 405px;
    bottom: -300px;
    width: 180px;
    height: 100px;
    position: absolute;
    background: url(../images/info_block3.svg) center center no-repeat;
    background-size: 180px 100px;
    animation-delay: 3.1s; }
  .matrix .info_block4 {
    left: 705px;
    bottom: -300px;
    width: 180px;
    height: 100px;
    position: absolute;
    background: url(../images/info_block4.svg) center center no-repeat;
    background-size: 180px 100px;
    animation-delay: 3.3s; }

.matrix_video {
  width: 100vw;
  height: auto; }

.matrix_gif {
  width: 100vw;
  height: auto; }

@media screen and (min-width: 1280px) {
  .container_matrix {
    display: block; }
  .img.matrix_img {
    display: none; } }

@media screen and (max-width: 1280px) {
  .container_matrix {
    display: none; }
  .img.matrix_img {
    display: block; } }

/*@media screen and (max-width: 640px) {
  .matrix_container {
    display: none; }
  .matrix_video {
    display: none; }
  .img.matrix_img{
    display: block; } }*/

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.batterfly_container .batterfly_gif,
.batterfly_container .batterfly_video {
  max-width: 640px;
  width: 100%;
  height: auto; }

@media screen and (min-width: 640px) {
  .batterfly_video {
    display: block; }
  .batterfly_gif {
    display: none; } }

@media screen and (max-width: 640px) {
  .batterfly_video {
    display: none; }
  .batterfly_gif {
    display: block; } }

.img_life_loop {

  overflow: hidden;

  padding: 120px 0;
  //margin-left: 15px;
  //margin-left: -316px;
  font-size: 0;
  -ms-transform-origin: center left 0px;
      transform-origin: center left 0px;
  animation: item1_anim  .6s ease;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  transform: rotateY(90deg);
  min-width: 980px;; }
.cont_life_loop * {
  box-sizing: content-box;
}.cont_life_loop {
  margin-left: -316px;
}
  .img_life_loop_item {
    display: inline-block;
    height: 26px;
    border: 2px solid #ffd092;
    position: relative;
    background-color: white;
    border-right: none;
    font-size: 14px;
    line-height: 26px;
    vertical-align: top;
    padding: 0 20px 0 20px;
    -ms-transform-origin: center left 0px;
        transform-origin: center left 0px;
    padding: 0; }
    .img_life_loop_item .text {
      background-color: white;
      padding: 0 20px 0 20px;
      display: inline-block;
      z-index: 10;
      position: relative; }
    .img_life_loop_item .num {
      color: #ff161f; }
    .img_life_loop_item .top_text, .img_life_loop_item .bottom_text {
      position: absolute;
      width: 90px;
      right: -45px;
      -ms-transform: translate(50%, 0);
          transform: translate(50%, 0);
      text-align: center;
      display: inline-block;
      line-height: 14px; }
    .img_life_loop_item .bottom_text {
      bottom: -50px;
      animation: item1_bottom_text_anim .7s ease;
      animation-fill-mode: forwards;
      -ms-transform: translate(0, calc( 100% - 22px));
          transform: translate(0, calc( 100% - 22px));
      opacity: 0; }
    .img_life_loop_item .top_text {
      top: -40px;
      animation: item1_top_text_anim .7s ease;
      animation-fill-mode: forwards;
      -ms-transform: translate(0, calc( -100% - 22px));
          transform: translate(0, calc( -100% - 22px));
      opacity: 0; }
    .img_life_loop_item .flag {
      width: 15px;
      height: 26px;
      background: url(../images/flag.svg) center no-repeat;
      background-size: contain;
      position: absolute;
      right: -12px;
      top: -28px;
      z-index: -1;
      opacity: 0;
      animation: item1_flag_anim .7s ease;
      animation-fill-mode: forwards;
      -ms-transform: translate(0, 26px);
          transform: translate(0, 26px); }
    .img_life_loop_item .arrow {
      width: 10px;
      height: 23px;
      background: url(../images/arrow.svg) center no-repeat;
      position: absolute;
      right: -5px;
      bottom: -23px;
      animation: item1_arrow_anim .7s ease;
      animation-fill-mode: forwards;
      -ms-transform: translate(0, -22px);
          transform: translate(0, -22px);
      opacity: 0; }
    .img_life_loop_item .doc {
      width: 16px;
      height: 27px;
      background: url(../images/doc.svg) center no-repeat;
      position: absolute;
      right: -9px;
      bottom: -50px;
      animation: item1_doc_anim .7s ease;
      animation-fill-mode: forwards;
      -ms-transform: translate(0, -15px);
          transform: translate(0, -15px);
      opacity: 0; }
    .img_life_loop_item:before {
      position: absolute;
      right: -12px;
      top: -2px;
      content: '';
      width: 0px;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 12px solid #ffd092;
      border-bottom: 15px solid transparent;
      z-index: 20; }
    .img_life_loop_item:after {
      position: absolute;
      right: -10px;
      top: 0px;
      content: '';
      width: 0px;
      height: 0;
      border-top: 13px solid transparent;
      border-left: 10px solid white;
      border-bottom: 13px solid transparent;
      z-index: 21; }
    .img_life_loop_item .steps {
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      width: 200px;
      font-size: 0;
      line-height: 13px; }
      .img_life_loop_item .steps .step {
        height: 16px;
        border: 2px solid #40cdd9;
        border-right: 0;
        position: relative;
        line-height: 16px;
        padding: 0 10px;
        font-size: 14px;
        display: block;
        width: 48px;
        margin-top: 2px;
        opacity: 0;
        animation: step_anim  1s ease;
        animation-fill-mode: forwards; }
        .img_life_loop_item .steps .step.step1 {
          animation-delay: 4.5s; }
        .img_life_loop_item .steps .step.step2 {
          animation-delay: 4.8s; }
        .img_life_loop_item .steps .step.step3 {
          animation-delay: 5.1s; }
        .img_life_loop_item .steps .step:before {
          position: absolute;
          right: -12px;
          top: -2px;
          content: '';
          width: 0px;
          height: 0;
          border-top: 10px solid transparent;
          border-left: 12px solid #40cdd9;
          border-bottom: 10px solid transparent;
          z-index: 20; }
        .img_life_loop_item .steps .step:after {
          position: absolute;
          right: -10px;
          top: 0px;
          content: '';
          width: 0px;
          height: 0;
          border-top: 8px solid transparent;
          border-left: 10px solid white;
          border-bottom: 8px solid transparent;
          z-index: 21; }
        .img_life_loop_item .steps .step.step2 {
          margin-left: 52px; }
        .img_life_loop_item .steps .step.step3 {
          margin-left: 118px; }
    .img_life_loop_item.item1 {
      z-index: 10;
      border-color: #e3e3e3; }
      .img_life_loop_item.item1 .text {
        padding-left: 10px; }
      .img_life_loop_item.item1:before {
        border-left-color: #e3e3e3; }
      .img_life_loop_item.item1 .flag {
        animation-delay: 2.6s; }
      .img_life_loop_item.item1 .doc {
        animation-delay: 2.7s; }
      .img_life_loop_item.item1 .arrow {
        animation-delay: 3s; }
      .img_life_loop_item.item1 .bottom_text {
        animation-delay: 3s; }
      .img_life_loop_item.item1 .top_text {
        animation-delay: 3s; }
    .img_life_loop_item.item2 {
      z-index: 9;
      animation: item2_anim  1s ease;
      animation-delay: 3s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); }
      .img_life_loop_item.item2 .flag {
        animation-delay: 3.6s; }
      .img_life_loop_item.item2 .doc {
        animation-delay: 3.7s; }
      .img_life_loop_item.item2 .arrow {
        animation-delay: 4s; }
      .img_life_loop_item.item2 .bottom_text {
        animation-delay: 4s; }
      .img_life_loop_item.item2 .top_text {
        animation-delay: 4s; }
    .img_life_loop_item.item3 {
      z-index: 8;
      animation: item2_anim  1s ease;
      animation-delay: 3.5s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); }
      .img_life_loop_item.item3 .flag {
        animation-delay: 4s; }
      .img_life_loop_item.item3 .doc {
        animation-delay: 4.2s; }
      .img_life_loop_item.item3 .arrow {
        animation-delay: 4.6s; }
      .img_life_loop_item.item3 .bottom_text {
        animation-delay: 4.6s; }
      .img_life_loop_item.item3 .top_text {
        animation-delay: 4.6s; }
    .img_life_loop_item.item4 {
      z-index: 7;
      animation: item2_anim  1s ease;
      animation-delay: 4s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); }
      .img_life_loop_item.item4 .flag {
        animation-delay: 4.6s; }
      .img_life_loop_item.item4 .doc {
        animation-delay: 4.7s; }
      .img_life_loop_item.item4 .arrow {
        animation-delay: 5s; }
      .img_life_loop_item.item4 .bottom_text {
        animation-delay: 5s; }
      .img_life_loop_item.item4 .top_text {
        animation-delay: 5s; }
    .img_life_loop_item.item5 {
      z-index: 6;
      border-color: #40cdd9;
      animation: item2_anim  1s ease;
      animation-delay: 4.5s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); }
      .img_life_loop_item.item5:before {
        border-left-color: #40cdd9; }
    .img_life_loop_item.item6 {
      z-index: 5;
      border-color: #40cdd9;
      animation: item2_anim  .6s ease;
      animation-delay: 5s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); }
      .img_life_loop_item.item6:before {
        border-left-color: #40cdd9; }
      .img_life_loop_item.item6 .flag {
        animation-delay: 5.2s; }
      .img_life_loop_item.item6 .doc {
        animation-delay: 5.2s; }
      .img_life_loop_item.item6 .arrow {
        animation-delay: 5.5s; }
      .img_life_loop_item.item6 .bottom_text {
        animation-delay: 5.5s; }
      .img_life_loop_item.item6 .top_text {
        animation-delay: 5.5s; }
    .img_life_loop_item.item7 {
      z-index: 4;
      border-color: #e3e3e3;
      animation: item2_anim  .6s ease;
      animation-delay: 5.5s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); }
      .img_life_loop_item.item7:before {
        border-left-color: #e3e3e3; }

.cont_life_loop .life_loop_info {
  font-size: 14px;
  text-align: center; }
  .cont_life_loop .life_loop_info_item {
    display: inline-block;
    animation: step_anim  1s ease;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    opacity: 0; }
    .cont_life_loop  .life_loop_info_item .info_block {
      display: inline-block;
      border: 2px solid #40cdd9;
      border-right: 0;
      line-height: 18px;
      padding: 0 15px;
      position: relative;
      height: 16px;
      vertical-align: middle;
      margin-right: 15px; }
      .cont_life_loop  .life_loop_info_item .info_block:before {
        position: absolute;
        right: -12px;
        top: -2px;
        content: '';
        width: 0px;
        height: 0;
        border-top: 10px solid transparent;
        border-left: 12px solid #40cdd9;
        border-bottom: 10px solid transparent;
        z-index: 20; }
      .cont_life_loop  .life_loop_info_item .info_block:after {
        position: absolute;
        right: -10px;
        top: 0px;
        content: '';
        width: 0px;
        height: 0;
        border-top: 8px solid transparent;
        border-left: 10px solid white;
        border-bottom: 8px solid transparent;
        z-index: 21; }
    .cont_life_loop  .life_loop_info_item .info_text {
      vertical-align: middle;
      display: inline-block;
      line-height: 18px; }
    .cont_life_loop  .life_loop_info_item.item1 {
      animation-delay: 5s; }
      .cont_life_loop  .life_loop_info_item.item1 .info_block {
        border-color: #ffd092; }
        .cont_life_loop  .life_loop_info_item.item1 .info_block:before {
          border-left-color: #ffd092; }
      .cont_life_loop .life_loop_info_item.item1 .info_text {
        margin-right: 20px; }
    .cont_life_loop  .life_loop_info_item.item2 {
      animation-delay: 4.5s; }
@media screen and (min-width: 1220px) {
  .cont_life_loop {
    display: block; }
  #contentArea .img.life_loop  {
    display: none; } }

@media screen and (max-width: 1220px) {
  .cont_life_loop {
    display: none; }
  #contentArea .img.life_loop  {
    display: block; } }
.container_matrix *{
  box-sizing: content-box;
}
.container_matrix {
  overflow: hidden;
  margin-left: -340px;
  position: relative;
  left: 15px;
}


/* NEW SCHEME */

@media screen and (min-width: 1220px) {
	.cont_life_loop2 { display: block; }
}

@media screen and (max-width: 1220px) {
	.cont_life_loop2 { display: none; }
}

@keyframes item1_anim_new {
  from {
    opacity:0; }
  to {
    opacity:1; } 
}
	
@keyframes item1_arrow_anim_new {
  from {
    height:0;
    opacity: 0; }
  5% {
	opacity: 1; }	
  to {
    height: 47px;
    opacity: 1; } 
}
@keyframes item2_anim_new {
  from {
    transform: translate(-150%, 0);
	opacity: 0; 
  }
  to {
    transform: translate(0, 0); 
	opacity: 1;
  } 
}
@keyframes item2_arrow_anim {
  from {
    width: 0;
	transform: translate(-30px, 0);
    opacity: 0; }
  5% {
	opacity: 1; }
  to {
    transform: translate(0, 0);
	width: 22px;
    opacity: 1; } 
}
@keyframes item3_arrow_anim_new {
  from {
    height: 0;
    opacity: 0; }
  5% {
	opacity: 1; }	
  to {
    height: 60px;
    opacity: 1; } 
}
@keyframes item3_arrow2_anim_new {
  from {
    height: 0;
    opacity: 0; }
  5% {
	opacity: 1; }	
  to {
    height: 40px;
    opacity: 1; } 
}
@keyframes item9_arrow2_anim_new {
  from {
    height: 0;
    opacity: 0; }
  5% {
	opacity: 1; }	
  to {
    height: 46px;
    opacity: 1; } 
}
@keyframes item5_anim_new {
  from {
    opacity:0; }
  to {
    opacity:1; } 
}
@keyframes item5_line_anim {
  from {
    bottom: -48px;
	height: 0;
    opacity: 0; }
  5% {
	opacity: 1;  
  }
  to {
    bottom: -178px;
	height: 130px;
    opacity: 1; 
  } 
}	
@keyframes item5_bottom_arrow_anim {
  from {
	width: 0;
    opacity: 0; }
  5% {
	opacity: 1;  
  }
  to {
    width: 180px;
    opacity: 1; 
  } 
}	
@keyframes item6_anim {
  from {
    transform: translate(-110%, 0); }
  to {
    transform: translate(0, 0); } }
	
	
	
.cont_life_loop2 .life_loop_info{
	position: absolute;
	top: 430px;
	left: 0;
	width: 250px;
	height: 170px;
	display: block;
	text-align: center;
	z-index:800;
	border: 1px solid #7f7f7f;
}
.cont_life_loop2 .life_loop_info .text{
	font-weight: bold;
}
.cont_life_loop2  .life_loop_info_item .info_block {
    display: block;
    border: 2px solid #ffd092;
    line-height: 18px;
    padding: 0 15px;
    position: relative;
    height: 20px;
    vertical-align: middle;
    margin-left: 15px; 
	margin-top: 5px;
	float: left;
	
}
.cont_life_loop2  .life_loop_info_item .info_block.item { border-right: 0; }
.cont_life_loop2  .life_loop_info_item .info_block.item:before {
	position: absolute;
	right: -12px;
	top: -2px;
	content: '';
	width: 0px;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 12px solid #ffd092;
	border-bottom: 10px solid transparent;
	z-index: 20; 
}
.cont_life_loop2  .life_loop_info_item.item2 .info_block {
    border-color: #40cdd9;
}
.cont_life_loop2  .life_loop_info_item.item2 .info_block.item:before {
    border-left: 12px solid #40cdd9;
}
.cont_life_loop2 .life_loop_info_item .info_block.item:after {
	position: absolute;
	right: -10px;
	top: 0px;
	content: '';
	width: 0px;
	height: 0;
	border-top: 8px solid transparent;
	border-left: 10px solid white;
	border-bottom: 8px solid transparent;
	z-index: 21; 
}
.cont_life_loop2 .life_loop_info_item .info_block.round {
	width: 45px;
	padding-right:3px;
	margin-right:3px;
	margin-top: 18px;
}
.cont_life_loop2 .life_loop_info_item .info_block.arrow2 {
	opacity: 1;
	height: 2px;
	border: 0;
	border-bottom: 2px solid #7f7f7f;
	top: 12px;
	right: none;
	left: 0;
	width: 45px;
}
.cont_life_loop2  .life_loop_info_item .info_text {
      vertical-align: middle;
      display: inline-block;
      line-height: 18px; 
	  margin-left: 50px;
}


	  

.cont_life_loop2 {
	position: relative;
	width: 987px;
	height: 630px;
	margin-left: -316px;
	font-size: 14px;
	line-height: 26px;
	overflow: hidden; 	
}

.cont_life_loop2 .img_life_loop2 {
	height: 550px;
	overflow: hidden;
}
.cont_life_loop2 .img_life_loop_item {
	height: 55px;
	margin-left: -6px;
	border-right: none;
}
.cont_life_loop2 .img_life_loop_item:before {
	border-top: 28px solid transparent;
    border-left: 12px solid #ffd092;
    border-bottom: 27px solid transparent;
}
.cont_life_loop2 .img_life_loop_item:after {
	border-top: 25px solid transparent;
    border-left: 10px solid white;
    border-bottom: 24px solid transparent;
}
.img_life_loop_item .doc {
	right: 0;
	left: 45%;
	bottom: -40px;
}
.img_life_loop_item .bottom_text { left: 10px; right: 10px; width: auto; bottom: -40px }
.cont_life_loop2 .img_life_loop2 .item1{
	position: absolute;
	top: 157px;
	left: -122px;
	width: 300px;
	display: block;
	text-align: center;
	transform: rotate(270deg);
	font-weight: bold;
	opacity:0;
	z-index: 1000;
	background-color: white;
}
.cont_life_loop2 .img_life_loop2 .item-group{
	position: absolute;
	top: 35px;
	left: 75px;
	width: 400px;
	height: 220px;
	display: block;
	text-align: center;
	opacity: 0;
	z-index:8
}  
	  
.cont_life_loop2 .img_life_loop2 .item-group .text{
	font-weight: bold;
	line-height: 14px;
	padding: 2px 37px;
}
.cont_life_loop2 .img_life_loop2 .item-group .items{
	padding-top:40px;
}
.cont_life_loop2 .new-project {	border: 2px solid #ffd092; }

.cont_life_loop2 .appruved-project {	border: 2px solid #40cdd9; border-right: none; }
.cont_life_loop2 .appruved-project:before { border-left: 12px solid #40cdd9; }

.cont_life_loop2 .post-project {	border: 2px solid #e3e3e3; border-right: none; }
.cont_life_loop2 .post-project:before { border-left: 12px solid #e3e3e3; }

.cont_life_loop2 .round {
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	width: 82px;
	margin-left:8px;
	font-size: 12px;
}
.cont_life_loop2 .round .text {
	padding: 4px 6px;
	background: none;
	line-height: 12px !important;
	vertical-align: center;
	height: 51px;
}
.cont_life_loop2 .round:after { content: none; }
.cont_life_loop2 .round:before {	content: none; }
.cont_life_loop2 .round.bground { background-color: #fff9f1 }

.cont_life_loop2  .img_life_loop_item .flag {
	left: -3px;
	right: 0;
}
.cont_life_loop2  .img_life_loop_item .top_text {
	vertical-align: top;
	text-align: left;
	top: -10px;
	right:0;
	left: 15px;
	width: 110px;
	font-size:11px;
}
.cont_life_loop2  .img_life_loop_item .bottom_text {
	font-size:11px;
}
.cont_life_loop2 .img_life_loop2 .item-group2{
	position: absolute;
	top: 280px;
	left: 69px;
	width: 550px;
	height: 57px;
	display: block;
	text-align: center;
}

.cont_life_loop2 .img_life_loop2 .item12{
	position: absolute;
	top: 484px;
	left: 523px;
	text-align: center;
}

.cont_life_loop2 .arrow2 { width: 30px; height: 1px; position: absolute; border-bottom: 2px solid #7f7f7f; top: 25px; right: -30px; z-index: 500; opacity: 0;  }
.cont_life_loop2 .arrow2:after { content: ""; position: absolute; width:0; height:0; border-bottom: 7px solid #7f7f7f; border-left: 7px solid transparent; transform: rotate(315deg); top: -2px; right: -1px; }

.cont_life_loop2 .v-arrow { display:block; width: 2px; height: 30px; position: absolute; border-right: 2px solid #7f7f7f; top: 25px; right: -30px; z-index: 500; opacity: 0;  }
.cont_life_loop2 .v-arrow:after { content: ""; position: absolute; width:0; height:0; border-bottom: 7px solid #7f7f7f; border-left: 7px solid transparent; transform: rotate(45deg); bottom: -1px; right: -4px; }

.cont_life_loop2 .v-arrow2 { display:block; width: 2px; height: 40px; position: absolute; border-right: 2px solid #7f7f7f; bottom: -130px; right: -27px; z-index: 500; opacity: 0;  }
.cont_life_loop2 .v-arrow2:after { content: ""; position: absolute; width:0; height:0; border-top: 7px solid #7f7f7f; border-left: 7px solid transparent; transform: rotate(-45deg); top: -1px; right: -4px; }

.cont_life_loop2 .img_life_loop2 .item1  .v-arrow { top: 47px; right: 90px; height: 47px; }
.cont_life_loop2 .img_life_loop2 .item1  .v-arrow.bottom { right: 268px; }

.cont_life_loop2 .img_life_loop2 .item2  .top_text { width: 145px; }

.cont_life_loop2 .img_life_loop2 .item3  .v-arrow { top: 120px; right: 65px; height: 60px; }
.cont_life_loop2 .img_life_loop2 .item3  .bottom_text { left: 22px; }
.cont_life_loop2 .img_life_loop2 .item3  .top_text { width: 145px; }
.cont_life_loop2 .img_life_loop2 .item3  .doc { left: 50%; }

.cont_life_loop2 .img_life_loop2 .item-group2 .arrow2 { width: 30px; height: 1px; position: absolute; border-bottom: 2px solid #7f7f7f; top: 25px; right: -20px; z-index: 500; }
.cont_life_loop2 .img_life_loop2 .item-group2 .arrow2:after { content: ""; position: absolute; width:0; height:0; border-bottom: 7px solid #7f7f7f; border-left: 7px solid transparent; transform: rotate(315deg); top: -2px; right: -1px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .text { line-height: 14px; }

.cont_life_loop2 .img_life_loop2 .item-group2 .item4 .arrow2   {  right: -28px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item5   {  transform: none; opacity: 0; margin-left:17px }
.cont_life_loop2 .img_life_loop2 .item-group2 .item5  .bottom_text {  left: 0; right: -5px; bottom: -28px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item5  .flag {  left: -13px; bottom: -46px; top: auto; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item5  .line2 { position: absolute; width: 2px; height: 130px; border-right: 2px solid #7f7f7f; opacity: 0; left: 5%; bottom: -178px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item5  .arrow2.bottom { top: auto; bottom: -178px; width: 152px; right: auto; left: 7%; }

.cont_life_loop2 .img_life_loop2 .item-group2 .item6 .text { padding-top: 7px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item6  .bottom_text {  left: 0; right: -20px; bottom: -28px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item6  .flag {  left: -13px; bottom: -46px; top: auto; }

.cont_life_loop2 .img_life_loop2 .item-group2 .item7  .v-arrow { top: 48px; right: 35px; }
.cont_life_loop2 .img_life_loop2 .item-group2 .item7  .text { padding: 20px 6px;}
.cont_life_loop2 .img_life_loop2 .item-group2 .item7  .flag {  left: -13px; bottom: -46px; top: auto; }

/*.cont_life_loop2 .img_life_loop2 .item-group3 .item8  .text { padding: 0 70px;}*/
.cont_life_loop2 .img_life_loop2 .item-group3 .item8  .bottom_text { bottom: -10px;}
.cont_life_loop2 .img_life_loop2 .item-group3 .item8  .v-arrow { top: 53px; right: -7px; }

.cont_life_loop2 .img_life_loop2 .item-group3 .item9  .bottom_text { bottom: -10px; left: 40px;}
.cont_life_loop2 .img_life_loop2 .item-group3 .item9  .doc { bottom: -35px; left: 30px;}
.cont_life_loop2 .img_life_loop2 .item-group3 .item9  .v-arrow2 { bottom: -51px; right: 118px; height:46px; }

.cont_life_loop2 .img_life_loop2 .item-group3 .item10  .bottom_text { bottom: -10px; left: 40px;}
.cont_life_loop2 .img_life_loop2 .item-group3 .item10  .doc { bottom: -35px; left: 18px;}


.cont_life_loop2 .img_life_loop2 .item-group3 .img_life_loop_item .text { padding-top: 18px; }
.cont_life_loop2 .img_life_loop2 .item-group3 .item11 .text { padding-top: 11px; }


.cont_life_loop2 .img_life_loop2 .item12  {  transform: none; opacity: 0; }
.cont_life_loop2 .img_life_loop2 .item12 .text { padding-top: 7px; }

.cont_life_loop2 .img_life_loop2 .item-group3{
	position: absolute;
	top: 380px;
	left: 395px;
	width: 610px;
	height: 57px;
	display: block;
	text-align: center;
}
.cont_life_loop2 .img_life_loop2 .item-group3 .img_life_loop_item { width: 138px; }
.cont_life_loop2 .item-group3 .text { line-height: 14px; font-weight: bold; padding-left: 10px; padding-right: 10px;  }
.cont_life_loop2 .item-group3 .img_life_loop_item .flag { left: 13px; }
.cont_life_loop2 .item-group3 .img_life_loop_item .top_text { left: 28px; }

.cont_life_loop2 .item-group3  .item{
	border-color: #e3e3e3;
}




.cont_life_loop2  .img_life_loop2 .item1 {
  animation: item1_anim_new  .6s ease;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  transform: rotate(270deg);
}
.cont_life_loop2  .img_life_loop2 .item-group {
  animation: item1_anim_new  .6s ease;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
.cont_life_loop2  .img_life_loop2 .item1 .v-arrow {
  animation: item1_arrow_anim_new 1s ease;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;
}
.cont_life_loop2  .img_life_loop_item.item2 {
      z-index: 9;
      animation: item2_anim_new  1s ease;
      animation-delay: 3s;
      animation-fill-mode: forwards;
      -ms-transform: translate(-1000px, 0);
          transform: translate(-1000px, 0); 
}
.cont_life_loop2  .img_life_loop_item.item2 .flag {
animation-delay: 3.6s; }
.cont_life_loop2  .img_life_loop_item.item2 .doc {
animation-delay: 3.7s; }
.cont_life_loop2  .img_life_loop_item.item2 .arrow {
animation-delay: 4s; }
.cont_life_loop2  .img_life_loop_item.item2 .bottom_text {
animation-delay: 4s; }
.cont_life_loop2  .img_life_loop_item.item2 .top_text {
animation-delay: 4s; }

.cont_life_loop2  .img_life_loop2 .item-group2 .arrow2 {
  animation: item2_arrow_anim 1s ease;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;
}

.cont_life_loop2  .img_life_loop_item.item3 {
  z-index: 8;
  animation: item2_anim_new  1s ease;
  animation-delay: 4.5s;
  animation-fill-mode: forwards;
  -ms-transform: translate(-1000px, 0);
	  transform: translate(-1000px, 0); 
}
.cont_life_loop2 .img_life_loop_item.item3 .flag {
	animation-delay: 5s; }
.cont_life_loop2 .img_life_loop_item.item3 .doc {
	animation-delay: 5.2s; }
.cont_life_loop2 .img_life_loop_item.item3 .v-arrow {
	animation: item3_arrow_anim_new .5s ease;
	animation-delay: 5.2s; 
	animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item3 .v-arrow2 {
	animation: item3_arrow2_anim_new .5s ease;
	animation-delay: 7.2s; 
	animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item3 .bottom_text {
	animation-delay: 5.6s; }
.cont_life_loop2 .img_life_loop_item.item3 .top_text {
	animation-delay: 5.6s; }

.cont_life_loop2 .img_life_loop_item.item4 {
  z-index: 7;
  animation: item2_anim_new  1s ease;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  -ms-transform: translate(-1000px, 0);
	  transform: translate(-1000px, 0); 
}
.cont_life_loop2 .img_life_loop_item.item4 .flag {
	animation-delay: 3.6s; }
.cont_life_loop2 .img_life_loop_item.item4 .doc {
	animation-delay: 3.7s; }
.cont_life_loop2 .img_life_loop_item.item4 .arrow2 {
	animation-delay: 5s; }
.cont_life_loop2 .img_life_loop_item.item4 .bottom_text {
	animation-delay: 4s; }
.cont_life_loop2 .img_life_loop_item.item4 .top_text {
	animation-delay: 4s; }	
	
.cont_life_loop2 .img_life_loop_item.item5 {
	z-index: 6;
	animation: item1_anim_new  1s ease;
	animation-delay: 5.5s;
	animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item5 .line2 {
	animation: item5_line_anim .5s ease-in;
	animation-delay: 8s; 
	animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item5 .arrow2 {
	animation-delay: 6s; }
.cont_life_loop2 .img_life_loop_item.item5 .arrow2.bottom {
	animation: item5_bottom_arrow_anim .5s ease-out;
	animation-delay: 8.5s; 
	animation-fill-mode: forwards;
}

.cont_life_loop2 .img_life_loop_item.item6 {
	z-index: 5;
	animation: item6_anim  1s ease;
	animation-delay: 6.5s;
	animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item6 .arrow2 {
	animation-delay: 6.8s; }

.cont_life_loop2 .img_life_loop_item.item7 {
	z-index: 4;
	animation: item6_anim  1s ease;
	animation-delay: 7.5s;
	animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item7 .v-arrow {
	animation: item1_arrow_anim_new 1s ease;
	animation-delay: 8s;
	animation-fill-mode: forwards; }	
	
.cont_life_loop2 .img_life_loop_item.item8 {
  z-index: 7;
  animation: item2_anim_new  1s ease;
  animation-delay: 7s;
  animation-fill-mode: forwards;
  -ms-transform: translate(-1000px, 0);
	  transform: translate(-1000px, 0); 
}	
.cont_life_loop2 .img_life_loop_item.item8 .v-arrow {
	animation: item1_arrow_anim_new 1s ease;
	animation-delay: 8.5s;
	animation-fill-mode: forwards; }
.cont_life_loop2 .img_life_loop_item.item9 {
  z-index: 6;
  animation: item2_anim_new  1s ease;
  animation-delay: 8s;
  animation-fill-mode: forwards;
  -ms-transform: translate(-1000px, 0);
	  transform: translate(-1000px, 0); 
}	
.cont_life_loop2 .img_life_loop_item.item9 .doc {
	animation-delay: 8.8s; }
.cont_life_loop2 .img_life_loop_item.item9 .bottom_text {
	animation-delay: 9s; }
.cont_life_loop2  .img_life_loop_item.item9 .flag {
animation-delay: 9.6s; }
.cont_life_loop2  .img_life_loop_item.item9 .top_text {
animation-delay: 10s; }
.cont_life_loop2 .img_life_loop_item.item10 {
  z-index: 5;
  animation: item2_anim_new  1s ease;
  animation-delay: 9.5s;
  animation-fill-mode: forwards;
  -ms-transform: translate(-1000px, 0);
	  transform: translate(-1000px, 0); 
}
.cont_life_loop2  .img_life_loop_item.item10 .flag {
animation-delay: 10.1s; }
.cont_life_loop2  .img_life_loop_item.item10 .top_text {
animation-delay: 10.4s; }
.cont_life_loop2 .img_life_loop_item.item10 .doc {
	animation-delay: 10.8s; }
.cont_life_loop2 .img_life_loop_item.item10 .bottom_text {
	animation-delay: 11s; }
.cont_life_loop2 .img_life_loop_item.item11 {
  z-index: 4;
  animation: item2_anim_new  1s ease;
  animation-delay: 10.5s;
  animation-fill-mode: forwards;
  -ms-transform: translate(-1000px, 0);
	  transform: translate(-1000px, 0); 
}
.cont_life_loop2  .img_life_loop_item.item11 .flag {
	animation-delay: 11.1s; }
.cont_life_loop2  .img_life_loop_item.item11 .top_text {
	animation-delay: 11.4s; }
.cont_life_loop2 .img_life_loop_item.item12 {
  z-index: 3;
  animation: item1_anim_new  1s ease;
  animation-delay: 9s;
  animation-fill-mode: forwards;
}
.cont_life_loop2 .img_life_loop_item.item9 .v-arrow2 {
	animation: item9_arrow2_anim_new .5s ease;
	animation-delay: 9.5s; 
	animation-fill-mode: forwards;
}