@media (min-width: 1025px)
{
	.modal
	{
		  display: none;
	      position: fixed;
	      z-index: 1;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: auto;
	      background-color: rgb(0, 0, 0);
	      background-color: rgba(0, 0, 0, 0.7);
	      padding-top: 60px;
	}
      .modalmessage   /* my code */
      {
		  display: block;
	      position: absolute;
	      z-index: 1;
	      margin: auto;
	      left: 400px;
	      top: 200px;
	      height: auto;
	      overflow: auto;
	      padding: 100px; /* my code */
	      width: 500px;
		  border: 2px solid black;
		  background-color: white;
		  text-align: justify;
		  text-align-last: justify;
      }
	  .modalmessage1
	  {
		  display: block;
		  position: absolute;
		  z-index: 1;
		  margin: auto;
		  left: 500px;
		  top: 480px;
		  height: auto;
		  overflow: auto;
		  padding-left: 100px;
		  font-weight: bold;
	  }
      .close
      {
		  top: 25px;
	      right: 35px;
	      color: white;
	      position: absolute;
	      font-size: 35px;
	      font-weight: bold;
	      /* my code here */
	      width: 40px;
	      height: 40px;
	      border: 2px solid white;
	      border-radius: 50%;
	      background-color: gray;
	      text-align: center; /* to keep the cross at the center of the circle */
      }
      .close:hover, .close:focus
      {
		  color: red;
	      cursor: pointer;
      }
      .animate
      {
		  -webkit-animation: animatezoom 0.6s;
	      animation: animatezoom 0.6s;
      }
      @-webkit-keyframes animatezoom
      {
		  from {-webkit-transform: scale(0)}
	      to {-webkit-transform: scale(1)}
      }
      @keyframes animatezoom
      {
		  from {transform: scale(0)}
	      to {transform: scale(1)}
      }
}

@media (min-width: 768px) and (max-width: 1024px)
{
	  .modal
      {
		  display: none;
	      position: fixed;
	      z-index: 1;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: auto;
	      background-color: rgb(0, 0, 0);
	      background-color: rgba(0, 0, 0, 0.7);
	      padding-top: 60px;
      }
      /*.modalcontent
      {
		  background-color: #fefefe;
	      margin: 5% auto 15% auto;
	      width: 50%;
      }*/
      .modalmessage   /* my code */
      {
		  display: block;
	      position: absolute;
	      z-index: 1;
	      margin: auto;
	      left: 175px;
	      top: 300px;
	      height: 300px;
	      overflow: auto;
	      padding: 100px; /* my code */
	      width: 300px;
		  background-color: white;
		  border: 2px solid black;
      }
      .close
      {
		  top: 25px;
	      right: 35px;
	      color: white;
	      position: absolute;
	      font-size: 35px;
	      font-weight: bold;
	      /* my code here */
	      width: 40px;
	      height: 40px;
	      border: 2px solid white;
	      border-radius: 50%;
	      background-color: gray;
	      text-align: center; /* to keep the cross at the center of the circle */
      }
      .close:hover, .close:focus
      {
		  color: red;
	      cursor: pointer;
      }
      .animate
      {
		  -webkit-animation: animatezoom 0.6s;
	      animation: animatezoom 0.6s;
      }
      @-webkit-keyframes animatezoom
      {
		  from {-webkit-transform: scale(0)}
	      to {-webkit-transform: scale(1)}
      }
      @keyframes animatezoom
      {
		  from {transform: scale(0)}
	      to {transform: scale(1)}
      }
}

@media (max-width: 767px)
{
	  .modal
      {
		  display: none;
	      position: fixed;
	      z-index: 1;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: auto;
	      background-color: rgb(0, 0, 0);
	      background-color: rgba(0, 0, 0, 0.7);
	      padding-top: 60px;
      }
/*      .modalcontent
      {
		  background-color: #fefefe;
	      margin: 5% auto 15% auto;
	      width: 50%;
      }*/
      .modalmessage   /* my code */
      {
		  display: block;
	      position: absolute;
	      z-index: 1;
	      margin: auto;
	      left: 30px;
	      top: 100px;
	      height: auto;
	      overflow: auto;
	      padding: 50px; /* my code */
	      width: 200px;
		  background-color: white;
		  border: 2px solid black;
      }
      .close
      {
		  top: 25px;
	      right: 35px;
	      color: white;
	      position: absolute;
	      font-size: 35px;
	      font-weight: bold;
	      /* my code here */
	      width: 40px;
	      height: 40px;
	      border: 2px solid white;
	      border-radius: 50%;
	      background-color: gray;
	      text-align: center; /* to keep the cross at the center of the circle */
      }
      .close:hover, .close:focus
      {
		  color: red;
	      cursor: pointer;
      }
      .animate
      {
		  -webkit-animation: animatezoom 0.6s;
	      animation: animatezoom 0.6s;
      }
      @-webkit-keyframes animatezoom
      {
		  from {-webkit-transform: scale(0)}
	      to {-webkit-transform: scale(1)}
      }
      @keyframes animatezoom
      {
		  from {transform: scale(0)}
	      to {transform: scale(1)}
      }
}