.modal-dialog {
  padding-top: 8%;
}
.modal-content {
	border-top: 10px solid #012f5c;
	border-bottom: 10px solid #012f5c;
	width:400px;
	padding:10px;
	box-shadow:0 0 5px 0 rgba(0,0,0,.75);
	z-index:9999;
	margin: 0 auto;
}


.pure-css-bootstrap-modal {
      position: absolute; /* Don't take any space. */
    }
    .pure-css-bootstrap-modal label.close {
      /* Reset */
      padding: 0;
      margin: 0;
    }
    
	.modal-dialog{
		width: 700px;
		margin: 50px auto;
	}
	
    #modal-switch {
      display: none;
    }
    /* MODAL */
    .modal {
      display: block;
    }
    #modal-switch:not(:checked) ~ .modal {
      /*
      In Bootstrap Model is hidden by `display: none`.
      Unfortunately I couldn't get this option to work with css transitions
      (they are disabled when `display: none` is present).
      We need other way to hide the modal, e.g. with `max-width`.
      */
      max-width: 0;
    }
    #modal-switch:checked ~ .fade,
    #modal-switch:checked ~ .modal .fade
    {
      opacity: 1;
    }
    /* BACKDROP */
    .modal-backdrop {
      margin: 0;
    }
    #modal-switch:not(:checked) ~ .modal .modal-backdrop
    {
      display: none;
    }
    #modal-switch:checked ~ .modal .modal-backdrop
    {
      filter: alpha(opacity=50);
      opacity: 0.5;
    }
    /* DIALOG */
    #modal-switch ~ .modal .modal-dialog {
      transition: transform .3s ease-out;
      transform: translate(0, -50%);
    }
    #modal-switch:checked ~ .modal .modal-dialog {
      transform: translate(0, 10%);
      z-index: 1050;
    }


@media screen and (max-width: 320px) {
		.modal-dialog{
		width: 300px;
		margin: 50px auto;
	}
}
@media screen and (max-width: 360px) {
		.modal-dialog{
		width: 300px;
		margin: 50px auto;
	}
}