diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 396b46e..1a8b71f 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -1,34 +1,36 @@
 .modal-overlay {
-  width:100%;
-  height:100%;
-  z-index:-1;
-  background-color:#000;
-  position:fixed;
-  top:0;
-  left:0;
-  margin:0;
-  padding:0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-color: #000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
   opacity: 0;
 }
 
 .modal-overlay.active{
-  z-index:100;
+  z-index: 100;
   opacity: .5;
   display: block;
   @include fastTransition-all;
 }
 
 .modal {
-  width:50%;
+  width: auto;
+  height: auto;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
   max-width: 850px;
-  margin: .5em auto;
+  min-width: 450px;
   padding: .8em 1.5em;
   border: thin #000 solid;
-  background-color:#fff;
-  z-index:101;
-  position:fixed;
-  top:-100%;
-  left:25%;
+  background-color :#fff;
+  z-index: 101;
+  position: fixed;
   overflow: hidden;
   @include fastTransition-all;
   @include mediaQuery(medium) {
@@ -37,7 +39,6 @@
 }
 
 .modal.active{
-  top: 25%;
   @include fastTransition-all;
   display: block;
 }
@@ -47,11 +48,11 @@
 }
 
 .screen-reader-offscreen {
-  position:absolute;
-  left:-999px;
-  width:1px;
-  height:1px;
-  top:auto;
+  position: absolute;
+  left: -999px;
+  width: 1px;
+  height: 1px;
+  top: auto;
 }
 .modal__content {
   border-bottom: 1px solid $lightbg__grey;