/* Button Shop  */
.modal-btn {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    width: auto;
    height: 50px;
    background: gray;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 40px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
    position: fixed;
    right: 15px;
    bottom: 80%;
    z-index: 100;
    animation-duration: 2s;
    border: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

/* Button Shop  */

@media screen and (max-width: 320px) {



    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: absolute;
        margin: auto;
        width: 250px;
        height: 100vh;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }


}


        .modal.left .modal-dialog,
        .modal.right .modal-dialog {
            position: absolute;
            margin: auto;
            width: 320px;
            height: 100%;
            -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
            -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
        }

        .modal.left .modal-content,
        .modal.right .modal-content {
            height: 84vh;
            width: 100%;
            padding-right: 10px;
            padding-left: 10px;
            border-left: 3px solid #114C63;
            /* overflow-y: hidden; */
        }

        .modal.left .modal-body,
        .modal.right .modal-body {
           
            padding-top: 15px;
            
            /* overflow-y: scroll; */
            
        }
      
   
        .modal.left .modal-footer,
        .modal.right .modal-footer {
            
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 10vh;
            margin: 0;
            background-color: white;  
            /* border-top: 3px solid #DA2725;  */
            border-left: 3px solid #114C63; 
        }

        /*Left*/
        .modal.left.fade .modal-dialog {
            left: -320px;
            -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
            -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
        }

        .modal.left.fade.in .modal-dialog {
            left: 0;
        }

        /*Right*/
        .modal.right.fade .modal-dialog {
            right: -320px;
            -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
            -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
        }

        .modal.right.fade.in .modal-dialog {
            right: 0;
        }

        /* ----- MODAL STYLE ----- */
        .modal-content {
            border-radius: 0;
            border: none;
        }

        .modal-header {
            /* border-bottom-color: #EEEEEE; */
            /* background-color: #FAFAFA; */
            height: auto;
            
            margin: auto;
        }


        .modal-centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }


          .fa2x{
              font-size: 18px !important;
          }