html {
font-size: 100%;
overflow-y: scroll; min-height: 100%;
}  .wrapper {
width: 90%;
max-width: 800px;
margin: 4em auto;
text-align: center;
} .icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
fill: currentcolor;
}  .bds-modal {
position: absolute;
z-index: 10000; top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
}
.bds-modal.is-visible {
visibility: visible;
}
.modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.5);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
}
.bds-modal.is-visible .modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.modal-wrapper {
position: absolute;
z-index: 9999;
top: 6em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}
.modal-transition {
transition: all 0.3s 0.12s;
transform: translateY(-10%);
opacity: 0;
}
.bds-modal.is-visible .modal-transition {
transform: translateY(0);
opacity: 1;
}
.modal-header,
.modal-content {
padding: 1em;
}
.modal-header {
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
padding: 1em;
color: #aaa;
background: none;
border: 0;
}
.modal-close:hover {
color: #777;
}
.modal-heading {
font-size: 1.125em;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.modal-content > *:first-child {
margin-top: 0;
}
.modal-content > *:last-child {
margin-bottom: 0;
}