/* modal.css source */
/* The Modal (background) */

.JSmodal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 100; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* 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 Content */

.JSmodal-content {
 position: relative;
 background-color: #00bceb;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 360px;
 margin-top: 200px;
 border-radius: 5px;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s;
 text-align: center;
}

/* 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}
}

/* The Close Button */
.JSclose {
 color: #fff;
 float: right;
 font-size: 28px;
 font-weight: bold;
 margin-top: -10px;
}
.JSclose:hover,
.JSclose:focus {
 color: #1e4471;
 text-decoration: none;
 cursor: pointer;
}

input#JSid {
 margin-bottom: -10px;
 padding: 10px 20px;
 border-radius: 3px;
 background-color: #fff;
 width: 85%;
 margin: 0 auto;
 border: 0;
 color: #1e4471;
}

.JSmodal-content button {
 font-size: 18px;
 font-family: 'CiscoSans', Arial;
 padding: 5px 20px 6px;
 border-radius: 100px;
 line-height: 1.37em;
 margin-bottom: 0;
 min-width: 140px;
 text-align: center;
 font-weight: 400;
 margin-top: 10px;
 background-color: #1e4471;
 border: 0;
 color: #fff;
 margin: 0 auto;
 transition: 0.2s all;
}

.JSmodal-content p {
 color: #fff;
 font-weight: 400;
 margin-top: 20px;
 font-size: 1rem;
}

.JSmodal-content button:hover {
 background: #fff;
 color: #1e4471;
}