.block {
   max-width: 100%;
   width: 100%;
   height: auto;
   float: left;
   z-index: 10;
   background: transparent;
   overflow: hidden;
 }
 
 .block > div {
   display: block;
   position: relative;
   background: transparent;
   color: #fff;
 }

 .block > div input + label {
   cursor: pointer;
   display: block;
   padding: 7.5px 30px;
   background: rgba(186,188,189,0.7);
   -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
   transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
   color: #fff;
   font-size: 24px;
   text-transform: uppercase;
 }
 
 @media (max-width:768px){
    .block > div input + label {
        cursor: pointer;
        display: block;
        padding: 7.5px 28px;
        background: rgba(186,188,189,0.7);
        -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
        transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
        color: #fff;
        font-size: 20px;
        text-transform: uppercase;
    }
 }
 
  @media (max-width:480px){
    .block > div input + label {
        cursor: pointer;
        display: block;
        padding: 7.5px 24px;
        background: rgba(186,188,189,0.7);
        -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
        transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
        color: #fff;
        font-size: 18px;
        text-transform: uppercase;
    }
 }
 
 @media (max-width:320px){
    .block > div input + label {
        cursor: pointer;
        display: block;
        padding: 7.5px 20px;
        background: rgba(186,188,189,0.7);
        -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
        transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        text-align: center;
    }
 }
 
 .block > div input ~ div {
   visibility: hidden;
   max-height: 0;
   padding: 0;
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;
   transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;
 }
.block > div input ~ div p { 
    padding: 0 15px;
}

 .block > div input:checked + label {
   background: rgba(0,184,255,0.5);
   -webkit-transition: background-color 0s ease-in-out 0s;
   transition: background-color 0s ease-in-out 0s;
   color: #fff;
 }

 .block > div input:checked ~ div {
   display: block;
   opacity: 1;
   visibility: visible;
   max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
   padding: 5px 15px;
   -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
   transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
 }
 
 @media only screen and (max-width:768px){
    .block > div input:checked ~ div {
        display: block;
        opacity: 1;
        visibility: visible;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        padding: 5px 15px;
        -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
        transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
    }
 } 
 
 @media only screen and (max-width:480px){
    .block > div input:checked ~ div {
        display: block;
        opacity: 1;
        visibility: visible;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        padding: 5px 15px;
        -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
        transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
    }
 }  
 
 @media only screen and (max-width:320px){
    .block > div input:checked ~ div {
        display: block;
        opacity: 1;
        visibility: visible;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        padding: 5px 15px;
        -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
        transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
    }
 }
 
 .block ul, .block li {
    font-size: 20px;
 }