Custom Modal Used

css/comm.css

@@ -3,10 +3,80 @@
     Author     : Amir <amirsanni@gmail.com>
 */
 
+.text-center{
+    text-align: center;
+}
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: auto; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Header */
+.modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+/* Modal Body */
+.modal-body {
+    position: relative;
+    padding: 15px;
+}
+
+/* Modal Content */
+.modal-content {        
+    position: relative;
+    width: auto;
+    margin: 10px;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+        background-clip: padding-box;
+    border: 1px solid #999;
+    border: 1px solid rgba(0, 0, 0, .2);
+    border-radius: 6px;
+    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+}
+
+@media (min-width: 768px) {
+  .modal-content {
+    width: 600px;
+    margin: 30px auto;
+  }
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top: -300px; opacity: 0} 
+    to {top: 0; opacity: 1}
+}
+
+@keyframes animatetop {
+    from {top: -300px; opacity: 0}
+    to {top: 0; opacity: 1}
+}
+
 .margin-top-20{
     margin-top: 20px;
 }
 
+.margin-top-50{
+    margin-top: 50px;
+}
+
 .pointer{
     cursor: pointer;
 }