@media only screen and (min-width: 1px) {
    .theater_container {
        position: relative;
        text-align: center;
        width: 100%;
        height: 700px;
        border: 1px solid #ccc;
        background: #f8f6f6;
        padding: 20px;
      }
      .theater1_screen {
        height: 40px;
        width: 100%;
        background: #000;
        border: 1px dotted #222;
        display: inline-block;
        position: relative;
      }
      .theater1_row {
        width: 100%;
        height: 70px;
        border: 1px dotted #ccc;
        display: inline-block;
        position: relative;
      }


      .container_lead {
        display: block;
        position: relative;
        padding-left: 0px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
      }
      .container_lead input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }
      .checkmark {
        position: absolute;
        background-color: #999;
      }
      .container:hover input ~ .checkmark {
        background-color: #999;
      }
      .container input:checked ~ .checkmark {
        background-color: #f8931f;
      }
      .container input:disabled ~ .checkmark {
        background-color: #9b2a31;
        cursor: not-allowed;
      }
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }
      .container_lead input:checked ~ .checkmark:after {
        display: block;
      }
    


      .s1_1 {
        width: 4%;
        height:35px;
        left: 3%;
        top: 34px;
      }
      .s1_2 {
        width: 4%;
        height:35px;
        left: 8%;
        top: 34px;
      }
      .s1_3 {
        width: 4%;
        height:35px;
        left: 13%;
        top: 34px;
      }
      .s1_4 {
        width: 4%;
        height:35px;
        left: 18%;
        top: 34px;
      }
      .s1_5 {
        width: 4%;
        height:35px;
        left: 28%;
        top: 34px;
      }
      .s1_6 {
        width: 4%;
        height:35px;
        left: 33%;
        top: 34px;
      }
      .s1_7 {
        width: 4%;
        height:35px;
        left: 38%;
        top: 34px;
      }
      .s1_8 {
        width: 4%;
        height:35px;
        left: 43%;
        top: 34px;
      }
      .s1_9 {
        width: 4%;
        height:35px;
        left: 55%;
        top: 34px;
      }
      .s1_10 {
        width: 4%;
        height:35px;
        left: 60%;
        top: 34px;
      }
      .s1_11 {
        width: 4%;
        height:35px;
        left: 65%;
        top: 34px;
      }
      .s1_12 {
        width: 4%;
        height:35px;
        left: 70%;
        top: 34px;
      }
      .s1_13 {
        width: 4%;
        height:35px;
        left: 80%;
        top: 35px;
      }
      .s1_14 {
        width: 4%;
        height:35px;
        left: 85%;
        top: 35px;
      }
      .s1_15 {
        width: 4%;
        height:35px;
        left: 90%;
        top: 35px;
      }
      .s1_16 {
        width: 4%;
        height:35px;
        left: 95%;
        top: 35px;
      }






      .s2_1 {
        width: 4%;
        height:35px;
        left: 0%;
        top: 34px;
      }
      .s2_2 {
        width: 4%;
        height:35px;
        left: 5%;
        top: 34px;
      }
      .s2_3 {
        width: 4%;
        height:35px;
        left: 10%;
        top: 34px;
      }
      .s2_4 {
        width: 4%;
        height:35px;
        left: 15%;
        top: 34px;
      }
      .s2_5 {
        width: 4%;
        height:35px;
        left: 20%;
        top: 34px;
      }
      .s2_6 {
        width: 4%;
        height:35px;
        left: 25%;
        top: 34px;
      }
      .s2_7 {
        width: 4%;
        height:35px;
        left: 30%;
        top: 34px;
      }
      .s2_8 {
        width: 4%;
        height:35px;
        left: 35%;
        top: 34px;
      }
      .s2_9 {
        width: 4%;
        height:35px;
        left: 40%;
        top: 34px;
      }
      .s2_10 {
        width: 4%;
        height:35px;
        left: 45%;
        top: 34px;
      }
      .s2_11 {
        width: 4%;
        height:35px;
        left: 50%;
        top: 34px;
      }
      .s2_12 {
        width: 4%;
        height:35px;
        left: 55%;
        top: 34px;
      }
      .s2_13 {
        width: 4%;
        height:35px;
        left: 60%;
        top: 35px;
      }
      .s2_14 {
        width: 4%;
        height:35px;
        left: 65%;
        top: 35px;
      }
      .s2_15 {
        width: 4%;
        height:35px;
        left: 70%;
        top: 35px;
      }
      .s2_16 {
        width: 4%;
        height:35px;
        left: 75%;
        top: 35px;
      }
      .s2_17 {
        width: 4%;
        height:35px;
        left: 80%;
        top: 35px;
      }
      .s2_18 {
        width: 4%;
        height:35px;
        left: 85%;
        top: 35px;
      }
      .s2_19 {
        width: 4%;
        height:35px;
        left: 90%;
        top: 35px;
      }
      .s2_20 {
        width: 4%;
        height:35px;
        left: 95%;
        top: 35px;
      }
}











@media only screen and (min-width: 768px) {
    .theater_container {
        position: relative;
        text-align: center;
        width: 100%;
        height: 700px;
        border: 1px solid #ccc;
        background: #f8f6f6;
        padding: 20px;
      }
      .theater1_screen {
        height: 40px;
        width: 100%;
        background: #444;
        border: 1px dotted #222;
        display: inline-block;
        position: relative;
      }
      .theater1_row {
        width: 100%;
        height: 70px;
        border: 1px dotted #ccc;
        display: inline-block;
        position: relative;
      }


      .container_lead {
        display: block;
        position: relative;
        padding-left: 0px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
      }
      .container_lead input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }
      .checkmark {
        position: absolute;
        background-color: #999;
      }
      .container:hover input ~ .checkmark {
        background-color: #999;
      }
      .container input:checked ~ .checkmark {
        background-color: #f8931f;
      }
      .container input:disabled ~ .checkmark {
        background-color: #9b2a31;
        cursor: not-allowed;
      }
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }
      .container_lead input:checked ~ .checkmark:after {
        display: block;
      }
    


      .s1_1 {
        width: 4%;
        height:35px;
        left: 3%;
        top: 34px;
      }
      .s1_2 {
        width: 4%;
        height:35px;
        left: 8%;
        top: 34px;
      }
      .s1_3 {
        width: 4%;
        height:35px;
        left: 13%;
        top: 34px;
      }
      .s1_4 {
        width: 4%;
        height:35px;
        left: 18%;
        top: 34px;
      }
      .s1_5 {
        width: 4%;
        height:35px;
        left: 28%;
        top: 34px;
      }
      .s1_6 {
        width: 4%;
        height:35px;
        left: 33%;
        top: 34px;
      }
      .s1_7 {
        width: 4%;
        height:35px;
        left: 38%;
        top: 34px;
      }
      .s1_8 {
        width: 4%;
        height:35px;
        left: 43%;
        top: 34px;
      }
      .s1_9 {
        width: 4%;
        height:35px;
        left: 55%;
        top: 34px;
      }
      .s1_10 {
        width: 4%;
        height:35px;
        left: 60%;
        top: 34px;
      }
      .s1_11 {
        width: 4%;
        height:35px;
        left: 65%;
        top: 34px;
      }
      .s1_12 {
        width: 4%;
        height:35px;
        left: 70%;
        top: 34px;
      }
      .s1_13 {
        width: 4%;
        height:35px;
        left: 80%;
        top: 35px;
      }
      .s1_14 {
        width: 4%;
        height:35px;
        left: 85%;
        top: 35px;
      }
      .s1_15 {
        width: 4%;
        height:35px;
        left: 90%;
        top: 35px;
      }
      .s1_16 {
        width: 4%;
        height:35px;
        left: 95%;
        top: 35px;
      }






      .s2_1 {
        width: 4%;
        height:35px;
        left: 0%;
        top: 34px;
      }
      .s2_2 {
        width: 4%;
        height:35px;
        left: 5%;
        top: 34px;
      }
      .s2_3 {
        width: 4%;
        height:35px;
        left: 10%;
        top: 34px;
      }
      .s2_4 {
        width: 4%;
        height:35px;
        left: 15%;
        top: 34px;
      }
      .s2_5 {
        width: 4%;
        height:35px;
        left: 20%;
        top: 34px;
      }
      .s2_6 {
        width: 4%;
        height:35px;
        left: 25%;
        top: 34px;
      }
      .s2_7 {
        width: 4%;
        height:35px;
        left: 30%;
        top: 34px;
      }
      .s2_8 {
        width: 4%;
        height:35px;
        left: 35%;
        top: 34px;
      }
      .s2_9 {
        width: 4%;
        height:35px;
        left: 40%;
        top: 34px;
      }
      .s2_10 {
        width: 4%;
        height:35px;
        left: 45%;
        top: 34px;
      }
      .s2_11 {
        width: 4%;
        height:35px;
        left: 50%;
        top: 34px;
      }
      .s2_12 {
        width: 4%;
        height:35px;
        left: 55%;
        top: 34px;
      }
      .s2_13 {
        width: 4%;
        height:35px;
        left: 60%;
        top: 35px;
      }
      .s2_14 {
        width: 4%;
        height:35px;
        left: 65%;
        top: 35px;
      }
      .s2_15 {
        width: 4%;
        height:35px;
        left: 70%;
        top: 35px;
      }
      .s2_16 {
        width: 4%;
        height:35px;
        left: 75%;
        top: 35px;
      }
      .s2_17 {
        width: 4%;
        height:35px;
        left: 80%;
        top: 35px;
      }
      .s2_18 {
        width: 4%;
        height:35px;
        left: 85%;
        top: 35px;
      }
      .s2_19 {
        width: 4%;
        height:35px;
        left: 90%;
        top: 35px;
      }
      .s2_20 {
        width: 4%;
        height:35px;
        left: 95%;
        top: 35px;
      }


}