/*--------*/
/* header */
/*--------*/

.cl_header
{
  height:   4em;
  width:    100%;
  margin:   0px;
  padding:  0px;
  overflow: hidden;
}

.cl_header_wrapper
{
  display: grid;
  gap:     0em;
}

.cl_header_box_1
{
  background-color: white;
  display:          flex;
  justify-content:  left; /* left, center, right */
  height:           4em;
}

.cl_header_box_2
{
  background-color: white;
  display:          none;
  height:           4em;
}

.cl_header_box_3
{
  background-color: white;
  display:          none;
  height:           4em;
}

.cl_header_wrapper
{
  grid-template-columns: 1fr 5fr;
}

.cl_header_box_1
{
  grid-column-start: 1;
  grid-column-end:   2;
}

@media screen and (max-width: 40em)
{
  .cl_header_box_2
  {
    display: none;
  }
  .cl_header_box_3
  {
    display:           flex;
    justify-content:   right; /* left, center, right */
    grid-column-start: 2;
    grid-column-end:   3;
  }
}

@media screen and (min-width: 40em)
{
  .cl_header_box_2
  {
    display:           flex;
    justify-content:   left; /* left, center, right */
    grid-column-start: 2;
    grid-column-end:   3;
  }

  .cl_header_box_3
  {
    grid-column-start: 2;
    grid-column-end:   3;
  }
}