/* DESKTOP (W > 1024)*/
@media only screen and (min-width : 1024px)  {
   /*.box {
      width: 33.3%;
      height: 50%;
      padding-bottom: 25.8%;
      padding-bottom: 33%;
      border: solid 0px red;
   }*/
}

/* TABLET (W X H) = 1024 X 768 */
@media only screen and (max-width : 1024px)  {
   /*.box {
      width: 33.3%;
      height: 50%;
      padding-bottom: 40%;
      border: dashed 0px green;
   }*/
}

/* TABLET (W X H) = 768 X 1024 */
@media only screen and (max-width : 1023px)  {
   /*.box {
      width: 50%;
      height: 33.3%;
      padding-bottom: 48.5%;
      border: dashed 0px red;
   }*/
}

@media only screen and (max-width : 700px)  {
   /*.box {
      width: 33.3%;
      height: 48%;
      padding-bottom: 31.22%;
      border: dashed 0px yellow;
   }*/
}

.print {
        display: table;
        display: table;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 120px;
        padding-bottom: 50px;
        border: solid 5px red;
    }

@media print {
    .print {
        display: table;
        display: table;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        padding-bottom: 50px;
        border: solid 1px red;
    }

    #tblResult {
        display: table;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        padding-bottom: 50px;
    }

    #report {
        margin-left: 50px;
        padding-left: 50px;
        display: table;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}



.wrap {
   margin: 0px;
}

.box {
   float: left; 
   position: relative;
   cursor: pointer;
}

.noclick {
    cursor:default;
}

.boxInner {
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   overflow: hidden;
}

.boxInner img {
    width: 99.9%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

    .boxInner .titleBox {
        /*display: none;*/
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-bottom: 0px;

        background: -webkit-linear-gradient(transparent, #777);
        background: -moz-linear-gradient(transparent, #777);
        background: -ms-linear-gradient(transparent, #777);
        background: -o-linear-gradient(transparent, #777);
        background: linear-gradient(transparent, #777);

        background: -webkit-linear-gradient(transparent, #000);
        background: -moz-linear-gradient(transparent, #000);
        background: -ms-linear-gradient(transparent, #000);
        background: -o-linear-gradient(transparent, #000);
        background: linear-gradient(transparent, #000);

        color: #FFF;
        padding: 0px;
        padding: 30px;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .boxInner #divMemebrs {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-bottom: 25px;
        text-align:center;
        color: #ffffff;
        font-size: 100%;
    }

    .boxInner #divMemebrs input {
        background-color: #ffffff;
        margin-top: 10px;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 10px;
        width: 80%;
        max-width: 300px;
        height: 40px;
        font-size: 16px;
        border: none;
        color: #777777;
        font-weight: bold;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
    }

    .boxInner #divMemebrs img {
        background-color: transparent;
        margin-top: 20%;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 60%;
        border: none;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        width: 250px;
    }

span.intro {
    display: none;
}