.situation,.description{
    width: 100%;
    color:rgb(64, 48, 1) ;
margin-top: 10px;    
margin-left: 10px;
display: flex;
flex-direction: column;

}


input#equipementshow,input#equipementshow1, input#equipementhide,input#equipementhide1 {
    display:none;
}

div#content, div#content1{
    
    display: flex;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
    align-items: center;
}
 

input#equipementshow:checked ~ .equipementshow:before,input#equipementshow1:checked ~ .equipementshow1:before  {
   
    content: ""
}

input#equipementshow:checked ~ .equipementhide:before,input#equipementshow1:checked ~ .equipementhide1:before {
    color:white;
    background-color:rgb(64, 48, 1);
    width: 100%;
    height: 80px;
    font-size: 3vw;
    font-weight: 600;
    display: flex;  
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

input#equipementshow:checked ~ .equipementhide:before   {
     content: "EQUIPEMENT"
}

input#equipementshow1:checked ~ .equipementhide1:before {
  
    content: "SITUATION"
}
input#equipementhide:checked ~ .equipementhide:before,input#equipementhide1:checked ~ .equipementhide1:before {
    
    content: ""
}

input#equipementhide:checked ~ .equipementshow:before,input#equipementhide1:checked ~ .equipementshow1:before {

    color:white;
    background-color:rgb(64, 48, 1);
    width: 100%;
    height: 80px;
    font-size: 3vw;
    font-weight: 600;
    display: flex;  
    align-items: center;
    flex-direction: column;
    justify-content: center; 
    cursor: pointer;
  
}
input#equipementhide:checked ~ .equipementshow:before{
      content: "EQUIPEMENT"
}
input#equipementhide1:checked ~ .equipementshow1:before {
    content: "SITUATION"
}

input#equipementshow:checked ~ div#content, input#equipementshow1:checked ~ div#content1{
   color:rgb(64, 48, 1);
    opacity: 1;
    font-size: 100%;
    height: auto;
}

input#equipementhide:checked ~ div#content, input#equipementhide1:checked ~ div#content1{
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}



/* extra */
#content, #content1{   
   
    font-size: 1.5vw;
    font-weight: lighter;
    display: flex;
    flex-direction: column;
  padding-top: 2%;  
}