@media only screen
and (min-device-width : 569px)
{

table
{
font-size:100%;
}

td
{
font-size:100%;
}

select
{
font-size:100%;
}

button
{
font-size:80%;
}

canvas
{
border: none;
width: 1000;
height: 1000;
}

input
{
font-size:100%;
}

input.timeslider
{
width: 750px;
}

input.note
{
width: 350px;
}

label > input:checked + span
{
border:2px solid #000;
}

label > input
{
display: none;
}

label > span
{
padding-left: 20px;
border:2px solid #fff;
}

}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
{

table
{
font-size:100%;
}

td
{
font-size:300%;
}

select
{
font-size:100%;
}

button
{
font-size:100%;
}

canvas
{
border: none;
width: 1000;
height: 700;
}

input
{
font-size:100%;
}

input.radio
{
height: 30px;
width: 30px;
}

input.timeslider
{
width: 350px;
}

input.timeslider::-webkit-slider-thumb
{
height: 60px;
width: 60px;
}

span.markers
{
font-size:300%;
}

input.note
{
size: 100px;
}

label > input:checked + span
{
border:2px solid #000;
}

label > input
{
display: none;
}

label > span
{
padding-left: 80px;
border:2px solid #fff;
}

span.nobreak
{
  display: inline-block;
}

}