/* css media quieries for Chaion */





/* ---- HEADER ----- */

@media screen and (max-width: 1190px) {


.header { border-bottom: solid 2px rgba(250,250,250,.15);
          height: auto;
         }

.header .center_col._1 { padding: 15px 0px; }

.header_buttons_row,
.header_links_row { display: none; }



.menu_button { display: block; }

.header_logo { top: 4px; }

.header_logo img { width: 100px; }



} /* end of max 1190px*/

/* min 1680 px for very large screen*/
@media screen and (min-width: 1680px) {
  ._fb2:before, ._fb2:after{
    padding-top:10%;
  }
  ._fb2 > .center_col {
    padding-top:10%;
  }
  .footer:after, .footer:before{
    padding-top:14%;
    margin:-15% 0 -10% 0;
    top:10px;
  }
  ._fb3{
    padding-bottom:20%;
  }
  .footer{
    margin-top:-19%;
  }
  .footer > .center_col{
    padding-top:10%;
    top:100px;
  }
}


/* ---- HOME ----- */

@media screen and (max-width: 700px) {


/* introduction */
._fb1 { padding-top: 30%; }


.chaion_icon img { height: 100px; }

._main_intro { font-size: 16px;
               line-height: 25px;
               max-width: 300px;
               margin-left: auto;
               margin-right: auto;
                }


._main_intro img { top: 6px;
                   width: 60px;
                 }




._fb1:before { background-position: center 450px; }



#bg_lines { top: 250px;
            display: none;
            }


._fb1:after { background-image: url('graphics/bg/bg-lines-both.svg');
              background-position: center 350px;
             }



} /* end of media query */


/* --- @@ who we are --- */

@media screen and (max-width: 700px) {

._fb1 ._bc_2 { max-width: none;
               width: 120%;
               height: auto;
               margin-top: 10%;
               padding: 35% 0px;
              }



._fb1 ._bc_2:before { background-size: auto 100%;
                      background-position: center top;
                     }



._about { color: white;
          font-size: 15px;
          width: 83%;
          margin-left: auto;
          margin-right: auto;
          margin-top: 25px;
          line-height: 24px;
          }



._small { line-height: 27px; }




} /* end of medi query */



@media screen and (max-width: 960px) and (min-width: 551px) {


._fb1 ._bc_2 { padding: 15% 0px; }


._fb1 ._bc_2:before { background-size: auto 100%;
                      background-position: center top;
                     }

} /* end of media query */




@media screen and (max-width: 959px) and (min-width: 701px) {


._fb1 ._bc_2:after { width: 100%;
                     top: 34px;
                     left: 0.05%;
                    }


} /* end of media query */


/*  -- @@ roadmap
------------------------------
*/
@media screen and (max-width: 600px) {


.timeline_col_wrap { padding-bottom: 30%;
                     z-index: 3;
                   }

.timeline_col_wrap:before { left: 0%;
                            margin-left: 0px;
                           }


.timeline_col_wrap:after { left: 0px; }


.time_col { width: auto;
            left: 0px;
            margin-top: 15%;
            margin-bottom: 0px;
           }


.time_col:first-of-type { margin-top: 0px; }

.time_col:nth-of-type(odd) {  }

.time_col:nth-of-type(even) { left: 0%;
                              text-align: left;
                              padding-left: 10%;
                             }



.time_col:after { display: none; }





.time_col:nth-of-type(odd):before { left: -6px; }

.time_col:nth-of-type(even):before { left: -6px; }




.time_col ._title { font-size: 16px; }


.time_col ._thin { font-size: 12px; }


._extra_padd_bottom  { padding-bottom: 70px; }



} /* end of max 600px

/*  -- what we offer -- */

@media screen and (max-width: 900px) {


._fb2 { padding: 20% 0px 40% 0px;
        margin-top: -100px;
        }

._fb2 > .center_col { width: 100%; }


.tabs_wrap { border-bottom: solid 0px lightgrey;
             white-space: nowrap;
             display: block;
             max-width: 100%;
             height: auto;
             }


.tab { width: 100%;
       padding: 0px 0px 0px 0px;
       display: inline-block;
       text-align: center;
       display: none;
       }


._on_tab:before { display: none; }


._on_tab { display: flex; }


._on_tab span { top: -2px; }



/* tab content */
.col_wrap { overflow: hidden; }


.tab_content_col { margin-top: 5%;
                   min-width: 100%;
                   width: 100%;
                 }



.col_cards_wrap { padding: 10% 0px; }

.card_scroll_wrapper { max-width: none;
                       width: 70%;
                       margin: 0 auto;
                       overflow: visible;
                       font-size: 0px;
                       white-space: nowrap;
                       left: 0%;
                      }



.card_row { display: inline-block;
            width: 100%;
            border-radius: 8px;
            background: white;
            vertical-align: middle;
            white-space: normal;
            -webkit-transition: .25s ease;
            -moz-transition: .25s ease;
            overflow: hidden;
            transfrom: scale(.8,.8);
             }


.card_row:first-of-type { margin-left: -100%; }



._on_card { z-index: 1;
            margin-left: 0%;
            margin-right: 0%;
            transfrom: scale(1,1);
           }


._on_card:first-of-type { left: 0%;
                          margin-right: -20%;
                         }


.card_pic { height: 140px;
            width: 100%;
            background: lightgrey;
          }


.card_pic img { height: 100%;
                width: 100%;
                object-fit: cover;
                }


.card_details_col { padding: 10% 5%; }



.card_text { opacity: 0.77;
             font-size: 10px;
             color: #475479;
             line-height: 18px;
            }


} /* end of max 600px */


@media screen and (max-width: 950px) and (min-width: 601px) {


._fb2 { padding: 20% 0px 30% 0px;
        margin-top: -130px;
        }



.card_pic { height: 190px; }


} /* end of media query */


@media screen and (max-width: 1000px) {


/* toggle buttons */
.toggle_col { height: 40px;
              width: 100px;
              position: relative;
              top: 0px;
              margin-top: 5%;
              left: 50%;
              margin-left: -50px;
            }


.toggle_button { height: 40px;
                 width: 40px;
              }


} /* end of media query */




@media screen and (max-width: 360px) {





} /* end of media query */

/*  -- @@ meet the team  */
@media screen and (max-width: 600px) {

._fb3 { margin-top: -100px; }

} /* end of media query */


@media screen and (max-width: 950px) and (min-width: 601px) {

._fb3 { margin-top: -140px; }


 } /* end of media query */



@media screen and (max-width: 500px) {

._fb3 ._bc_2 { padding-bottom: 10%;
               width: 100%;
               left: 0%;
             }


.team_member_row { height: 253px;
                   width: 100%;
                   overflow: hidden;
                   margin-top: 0%;
                  }


.team_member_row:nth-of-type(-n+3) { margin-top: 0%; }







} /* end of media query */




@media screen and (min-width: 501px) and (max-width: 700px) {

.team_member_row { height: 253px;
                   width: 48%;
                   overflow: hidden;
                   margin-top: 2.5%;
                  }


.team_member_row:nth-of-type(-n+3) { margin-top: 2.5%; }


.team_member_row:nth-of-type(-n+2) { margin-top: 0px; }


} /* end of media query */


/* -- recent news */
@media screen and (max-width: 900px) {


 @media screen and ( max-width: 400px ){

    .news_col { margin-top: 10%; }

 } /* end of media query */


._fb3 > .center_col  { width: 100%; }


.news_row { height: auto;
            width: 100%;
            padding: 15% 0px;
          }



.news_row:nth-of-type(-n+3) { margin-top: 0px; }




.article_title { font-size: 18px; }



} /* end of media query



/* -- Footer */

@media screen and (max-width: 920px) {

.footer { padding: 200px 0px;
          margin-top: -320px;
         }

.footer:after,
.footer:before { background-size: auto 100%; }



.footer > .center_col { z-index: 1;
                        top: 155px;
                       }



.foot_links_col { margin-top: 2.5%;
                  justify-content: space-between;
                  flex-wrap: wrap;
                 }

.foot_link { margin-left: 0px;
             width: 45%;
             margin-top: 5%;
            }



.foot_text_col { margin-top: 5%; }



} /* end of media query */




@media screen and (max-width: 1090px) and (min-width: 921px)  {




 .footer { padding: 200px 0px;
           margin-top: -230px;
          }


.footer:after,
.footer:before { background-size: auto 100%; }


 .footer > .center_col { top: 130px;}



} /* end of media query */



@media screen and (min-width: 1450px) and (max-width:1680px) {

.footer { padding: 0px;
          height: 494px;
         }

.footer > .center_col { top: 50%;
                        margin-top: 36px;
                      }


} /* end of media query */

/* -- pop up modal -- */
@media screen and (max-width: 600px) {

.modal { padding: 10% 0px; }

.modal_icon { height: 60px; }

.modal_icon._round { width: 60px; }

.modal_text { font-size: 11px;
              line-height: 19px;
             }

.modal_date,
.modal_title { font-size: 13px; }

.card_button_wrap { width: 110px; }

.card_button_wrap div { width: 100%; }

.card_button_wrap div:not(:first-of-type) { margin-top: 5%; }

.card_button_wrap div img { height: auto;
                            width: 100%;
                           }


} /* end of media query */


/* ---- BANNER ----- */
@media screen and (max-width: 600px) {


._banner_space { top: 50px; }

.fixed_banner { height: 50px; }

.left_banner_block img { display: none; }

.left_banner_block { font-size: 10px;
                     padding-right: 25px;
                     }

.left_banner_block div { margin-left: 0px; }

.fixed_banner:before { content: "";
                       height: 100%;
                       width: 40%;
                       background-position: left top;
                       }

.banner_button { font-size: 10px;
                 height: 26px;
                 width: 106px;
                 margin-right: 25px;
                }


} /* end of media query */

/*iPhone 6*/
/*@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio : 2) and ( orientation: portrait){
    .partners_col_flex_column{
        flex-direction: column;
    }
    .partners_col_flex_column > .partner_logo{
        margin-top: 40px;
        margin-left: 0;
    }
    .partners_col_flex_column > .partner_logo:first-child{
        margin-top: 0;
    }
}*/
/*web*/
@media only screen and (max-width: 960px) {
    .partners_col_flex_column{
        flex-direction: column;
    }
    .partners_col_flex_column > .partner_logo{
        margin-top: 40px;
        margin-left: 0;
    }
    .partners_col_flex_column > .partner_logo:first-child{
        margin-top: 0;
    }
}