.modal-wrapper{

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    z-index: 999999;

    left: 0;

    background: rgba(8, 8, 8, 0.75);

    visibility: hidden;

    opacity: 0;

    -webkit-transition: all 0.25s ease-in-out;

    -moz-transition: all 0.25s ease-in-out;

    -o-transition: all 0.25s ease-in-out;

    transition: all 0.25s ease-in-out;

  }

  

  .modal-wrapper.open{

    opacity:1;

    visibility:visible;

  }

  

  .modalnew{

    width: 600px;
    padding: 6px;
    border-radius: 5px;

    max-height: 500px;

    overflow: scroll;

    display: block;

    margin-top: -300px;

    margin-left: -300px;

    position: relative;

    top: 50%;

    left: 50%;

    background: #fff;

    opacity: 1;

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -o-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out;

  }

  

  .modal-wrapper.open .modal{

    margin-top:-200px;

    opacity:1;

  }

  

 

  

  .btn-close{
    position:absolute;
    width:22px;

    height:26px;
    right: 10px;
    top: 6px;

    display:block;

    float:right;

  }

  

  .btn-close::before, .btn-close::after{

    content:'';

    width:20px;

    height:4px;

    display:block;

    background:#000;

  }

  

  .btn-close::before{

    margin-top:14px;

    -webkit-transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    -o-transform:rotate(45deg);

    transform:rotate(45deg);

  }

  

  .btn-close::after{

    margin-top:-4px;

    -webkit-transform:rotate(-45deg);

    -moz-transform:rotate(-45deg);

    -o-transform:rotate(-45deg);

    transform:rotate(-45deg);

  }

  @media only screen and (min-width : 480px) and (max-width : 767px) {
    .modalnew{ width:90%; left: 0px; right: 0px; margin: 0px auto; margin-top:0px; top: 15px;
    }
  }
 @media only screen and (max-width:767px){
  .modalnew{ width:90%; left: 0px; right: 0px; margin: 0px auto; top: 20px; max-height: 400px;}
 }