.overlay {
        background-color: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        top:0px;
        bottom:0px;
        left:0px;
        margin: auto;
        right:0px;
        z-index: 999998;
        display:none;
        position: fixed;
      }


@media only screen and (min-width: 480px) {
      .modelBox {
        width:40%;
        height: auto;
        margin:0px auto;
        background-color:#fff;
        left: 0px;
        right: 0px;
        top: 10%;
        margin: auto;
        position:fixed;
        opacity:1;
      }

.close{
        width: 100%;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        opacity: 1 !important;
        text-shadow: none;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        right: 0px;
        background-color: #000;
        text-align: center;
      }

       .close:hover{
        width: 100%;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        opacity: 1 !important;
        text-shadow: none;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        right: 0px;
        background-color: #333;
        text-align: center;
      }


.close:focus{
        width: 100%;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        opacity: 1 !important;
        text-shadow: none;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        right: 0px;
        background-color: #333;
        text-align: center;
      }

}

@media only screen and (max-width: 479px) {
      .modelBox {
        width:80%;
        height: auto;
        margin:0px auto;
        background-color:#fff;
        left: 0px;
        right: 0px;
        top: 10%;
        margin: auto;
        position:fixed;
        opacity:1;
      }


      .close{
      	font-size: 1em !important;
        width: 100%;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        opacity: 1 !important;
        text-shadow: none;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        right: 0px;
        background-color: #000;
        text-align: center;
      }

       .close:hover{
       	font-size: 1em !important;
        width: 100%;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        opacity: 1 !important;
        text-shadow: none;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        right: 0px;
        background-color: #333;
        text-align: center;
      }


.close:focus{
	font-size: 1em !important;
        width: 100%;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        opacity: 1 !important;
        text-shadow: none;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        right: 0px;
        background-color: #333;
        text-align: center;
      }
}