.modal-dialog {
      width: 100%;
      height: 100%;
      padding: 0;
      margin:0;
}
.modal-content {
      height: 100%;
      border-radius: 0;
      color:white;
      overflow:auto;
}
 .close
    {
      color:#333 ! important;
      opacity:1.0;
    }
    .big-box
    {
      position: absolute;
      width: 50%;
      height: 50%;
      color:white;
    }
    .big-box h2
    {
      text-align: center;
      margin-top: 20%;
      padding: 20px;
      width: 100%;
      font-size: 1.8em;
      letter-spacing: 2px;
      font-weight: 700;
      text-transform: uppercase;
    cursor:pointer;
    }

    @media screen and (max-width: 46.5em)
    {
      .big-box h2
      {
        font-size:16px;
        padding-left:0px;

      }
    }

    @media screen and (max-width: 20.5em)
    {
      .big-box h2
      {
        font-size:12px;
        padding-left:0px;
        margin-top:30%;
        }
    }
    .modal-dialog {
      width: 100%;
      height: 100%;
      padding: 0;
      margin:0;
	  max-width:100% !important;
    }
    .modal-content {

      height: 100%;
      border-radius: 0;
      color:#333;
      overflow:auto;
      background: #000000f0;
    }
    .modal-title
    {
      font-size: 3em;
      font-weight: 300;
      margin: 0 0 20px 0;
    }
    .modal-content-one
    {
      background-color:yellowgreen;
    }
    .modal-content-two
    {
      background-color:#E6537D;
    }
    .modal-content-three
    {
      background-color:crimson;
    }
    .modal-content-four
    {
      background-color:lightseagreen;
    }