1  /* The Modal (background) */
 2  
 3  .modal {
 4      display: none;
 5      /* Hidden by default */
 6      position: fixed;
 7      /* Stay in place */
 8      z-index: 1;
 9      /* Sit on top */
10      left: 0;
11      top: 0;
12      width: 100%;
13      /* Full width */
14      height: 100%;
15      /* Full height */
16      overflow: auto;
17      /* Enable scroll if needed */
18      background-color: rgb(0, 0, 0);
19      /* Fallback color */
20      background-color: rgba(0, 0, 0, 0.4);
21      /* Black w/ opacity */
22      padding-top: 30px;
23  }
24  
25  /* Modal Content/Box */
26  .modal-content {
27      background-color: #fefefe;
28      margin: 10% auto;
29      /* 15% from the top and centered */
30      border: 1px solid #888;
31      width: 80%;
32      /* Could be more or less, depending on screen size */
33  }
34  
35  /* The Close Button */
36  .close {
37      /* Position it in the top right corner outside of the modal */
38      position: absolute;
39      right: 25px;
40      top: 0;
41      color: #000;
42      font-size: 35px;
43      font-weight: bold;
44  }
45  
46  /* Close button on hover */
47  .close:hover,
48  .close:focus {
49      color: red;
50      cursor: pointer;
51  }
52  
53  /* Add Zoom Animation */
54  .animate {
55      -webkit-animation: animatezoom 0.6s;
56      animation: animatezoom 0.6s
57  }
58  
59  @-webkit-keyframes animatezoom {
60      from {
61          -webkit-transform: scale(0)
62      }
63  
64      to {
65          -webkit-transform: scale(1)
66      }
67  }
68  
69  @keyframes animatezoom {
70      from {
71          transform: scale(0)
72      }
73  
74      to {
75          transform: scale(1)
76      }
77  }