body{
    font-family: roboto, helvetica, roboto, calibri, arial, sans-serif;
    background: #fafafa;
    background-image: url('../images/samsu-ad.jpg');
    background-size: 30%;
}

.section{
    margin-bottom: 30px;
}
.limit{
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}

a.btn.mobile-show{
    display:none;
}

.productListing{
    background: rgba(255,255,255,0.9);
    margin:20px 0;
}

.smProducts{
    display: flex;
}

.productName{
    font-size: 1.2em;
    font-weight: bold;
}

.smProducts > div{
    text-align: center;
}

.infoCol{
    width: 60%;
    float: left;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(255,255,255,0.9);
    margin:20px 0;
}
.productInfo{
    width:50%;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}

.delInfo{
    width: 49%;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}

.orderCol{
    width: 39%;
    float: right;
    box-sizing: border-box;
    padding: 20px 40px;
}
.orderCol form{
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    box-sizing: border-box;
    padding: 20px 35px;
    background: #fff;
    position: relative;
}
.productImage{
    max-width: 90%;
}
.overlay{
    background: #fff;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    height: 100%;
    z-index: 3;
    box-sizing: border-box;
    padding: 50px 20px 0 20px;
    text-align: center;
    display: none;
}
.orderTotal span{
    color: yellow;
}

.orderComplete{
    position: relative;
    z-index: 4;
    margin-top: 40px;
    display: none;
}

.productPopUp{
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff;
    min-width: 400px;
    max-width: 60%;
    z-index: 6;
    box-sizing: border-box;
    padding: 30px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    display: none;
    max-height: 100%;
    overflow-y: scroll;
}

.productPopUp h6{
    font-weight: bold;
}
.spinner {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #333;
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    border-radius: 100%;  
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
    display: none;
  }

  @-webkit-keyframes sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
      -webkit-transform: scale(1.0);
      opacity: 0;
    }
  }
  
  @keyframes sk-scaleout {
    0% { 
      -webkit-transform: scale(0);
      transform: scale(0);
    } 100% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
      opacity: 0;
    }
  }


  @media screen and (max-width: 740px){
      body{
          background-size: 40%;
      }

      .productInfo, .orderCol, .infoCol, .delInfo{
          float: none;
          width: auto;
      }
      .orderCol{
          padding: 20px 0;
      }
      .orderCol form{
          width: 100%;
      }
      .productInfo{
        text-align: center;
    }
    .productPopUp{
        min-width: auto;
        max-width: 100%;
        z-index: 6;
        box-sizing: border-box;
        padding: 30px;
        box-shadow: 0 0 3px rgba(0,0,0,0.2);
        display: none;
        max-height: 100%;
        overflow-y: scroll;
    }

    .smProducts{
        display: block;
    }

    .smProducts > div{
        margin-bottom: 2em;
    }
    .mobile-show{
        display: inline-block;
    }
    
    .inner-product-list{
        display:none;
    }
    .limit{
        padding: 0 20px;
    }
  }