:root{
    --black:#4d5974;
    --red:#00486c;
    --grey:#e5e5e5;
  }

 body label{
  font-weight: 900;
  color: var(--black);
 }

  .video{
    width: 100%;
    max-width: 560px;
    height: 315px;
    padding-bottom: 10px;
    display: flex;
    margin: auto;
  }

  .img {
    max-width: 560px;
    height: 315px !important;
    object-fit: cover;
    margin: auto;
    display: flex;
    margin-top: 15px;
  }

  .menu{
    margin: 0 auto;
    padding: 2em;
    width: 100%;
  }
  label {
      display: block;
      margin: 0 0 4px 0;
      padding : 15px 15px 15px 0;
      line-height: 1;
      cursor :pointer;
      border-bottom: 1px solid var(--grey);
  }
  .question{
    position: relative;
  }
  input {
    display: none;
  }
  .menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu li {
    height: 0;
    overflow: hidden;
    transition: all 0.5s;
    font-size: 16px;
    text-align: justify;
  }
  #icon span {
    position: absolute;
    top: 11px;
    right: 11px;
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid var(--black);
    border-radius: 22px;
  }
  #icon span::before{
    display: block;
    position: absolute;
    content: '';
    top: 10px;
    left: 6px;
    width: 10px;
    height: 2px;
    background: var(--black);
  }
  #icon span::after{
    display: block;
    position: absolute;
    content: '';
    top: 6px;
    left: 10px;
    width: 2px;
    height: 10px;
    background: var(--black);
  }
  /*Open tab*/
  
  #type1:checked ~ #links1 li,
  #type2:checked ~ #links2 li,
  #type3:checked ~ #links3 li,
  #type4:checked ~ #links4 li,
  #type5:checked ~ #links5 li,
  #type6:checked ~ #links6 li,
  #type7:checked ~ #links7 li,
  #type8:checked ~ #links8 li,
  #type9:checked ~ #links9 li,
  #type10:checked ~ #links10 li{
    height: 100%;
    opacity: 1;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  /*Style open tab*/
  
  #type1:checked ~ label #icon span::after,
  #type2:checked ~ label #icon span::after,
  #type3:checked ~ label #icon span::after,
  #type4:checked ~ label #icon span::after,
  #type5:checked ~ label #icon span::after,
  #type6:checked ~ label #icon span::after,
  #type7:checked ~ label #icon span::after,
  #type8:checked ~ label #icon span::after,
  #type9:checked ~ label #icon span::after,
  #type10:checked ~ label #icon span::after{
      width: 0;
  }
  #type1:checked ~ label,
  #type2:checked ~ label,
  #type3:checked ~ label,
  #type4:checked ~ label,
  #type5:checked ~ label,
  #type6:checked ~ label,
  #type7:checked ~ label,
  #type8:checked ~ label,
  #type9:checked ~ label,
  #type10:checked ~ label{
      color: var(--red);
    border-bottom: 1px solid var(--red);
  }
  #type1:checked ~ label #icon span::before,
  #type2:checked ~ label #icon span::before,
  #type3:checked ~ label #icon span::before,
  #type4:checked ~ label #icon span::before,
  #type5:checked ~ label #icon span::before,
  #type6:checked ~ label #icon span::before,
  #type7:checked ~ label #icon span::before,
  #type8:checked ~ label #icon span::before,
  #type9:checked ~ label #icon span::before,
  #type10:checked ~ label #icon span::before{
      background: var(--red);
  }
  #type1:checked ~ label #icon span,
  #type2:checked ~ label #icon span,
  #type3:checked ~ label #icon span,
  #type4:checked ~ label #icon span,
  #type5:checked ~ label #icon span,
  #type6:checked ~ label #icon span,
  #type7:checked ~ label #icon span,
  #type8:checked ~ label #icon span,
  #type9:checked ~ label #icon span,
  #type10:checked ~ label #icon span{
    border: 1px solid var(--red);
  }