/* media */

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

    label {
        margin-top: 2px;
        border:1px solid black;
        padding:10px;
        font-size:20px;
        color:#641C19;
        letter-spacing: 1px;
        font-weight: 500;
        font-family: sans-serif;
        background-color:lightblue;
        text-transform:uppercase;
        transition: background-color .5s ease-out ;
        display: block;
        position: relative;
        cursor:pointer;
    }

    [type="radio"]:checked ~ label {
        color: #fff;
        background-color:darkblue;
        font-weight:600;
    }

    .accordion label:hover  {
        color: #fff;
        background-color:darkblue;
        font-weight:600;
    }
}


@media screen and (min-width:361px) and (max-width:600px) and (orientation:portrait) {
    label {
        margin-top: 2px;
        border:1px solid black;
        padding:10px;
        font-size:20px;
        color:#641C19;
        letter-spacing: 1px;
        font-weight: 500;
        font-family: sans-serif;
        background-color:lightgreen;
        text-transform:uppercase;
        transition: background-color .5s ease-out ;
        display: block;
        position: relative;
        cursor:pointer;
    }

    [type="radio"]:checked ~ label {
        color: #fff;
        background-color:darkgreen;
        font-weight:600;
    }

    .accordion label:hover  {
        color: #fff;
        background-color:darkgreen;
        font-weight:600;
    }
}

@media screen and (min-width:601px) and (max-width:1024px)  {
    label {
        margin-top: 2px;
        border:1px solid black;
        padding:10px;
        font-size:20px;
        color:#fff;
        letter-spacing: 1px;
        font-weight: 500;
        font-family: sans-serif;
        background-color:black;
        text-transform:uppercase;
        transition: background-color .5s ease-out ;
        display: block;
        position: relative;
        cursor:pointer;
    }

    [type="radio"]:checked ~ label {
        color: black;
        background-color:#fff;
        font-weight:600;
    }

    .accordion label:hover  {
        color: black;
        background-color:#fff;
        font-weight:600;
    }
}