/* 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, #202020);
        background: -moz-linear-gradient(transparent, #202020);
        background: -ms-linear-gradient(transparent, #202020);
        background: -o-linear-gradient(transparent, #202020);
        background: linear-gradient(transparent, #202020);

        color: #FFF;
        padding: 0px;
        padding: 20px;

        font-size: 25px;
        font-size: 22px;
        font-size: 3.5vh;
    }

    .boxInner #divMemebrs {
        clear: both;
        position: absolute;
        width:50%;
        height:50%;
        top: 25%;
        left: 25%;
        text-align:center;
        color: #ffffff;
    }

    .boxInner #divMemebrs #pPERGOLA {
        font-size: 22px;
        color: #ffffff;
        line-height: 20px;
    }

    .boxInner #divMemebrs #pDIY {
        color: #ffffff;
        font-size: 62px;
        line-height: 45px;
        text-align: left;
        padding-top: 8px;
        padding-bottom: 3px;
    }

    .boxInner #divMemebrs #pCALCULATOR {
        background-color: #ffffff;
        font-size: 15px;
        /*font-weight: bold;*/
        border: none;
        color: #23aaec;
        padding: 0px;
        margin:0px;
        padding-top: 4px;
    }