
.modal-header .close {
	position: absolute;
	top: 15px;
	top: 15px;
	right: 15px;
	color: #000;
	font-size: 60px;
  width: 0.3em; height: 0.3em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg id='Icons' height='512' viewBox='0 0 64 64' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.59 59.41a2 2 0 0 0 2.83 0l24.58-24.58 24.59 24.58a2 2 0 0 0 2.83-2.83l-24.59-24.58 24.58-24.59a2 2 0 0 0 -2.83-2.83l-24.58 24.59-24.59-24.58a2 2 0 0 0 -2.82 2.82l24.58 24.59-24.58 24.59a2 2 0 0 0 0 2.82z'/%3E%3C/svg%3E");
}
.modal-header .close span {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

button {
  margin: 5px;
  display: inline-block;
}

h1 {
   font-family: 'Oswald';
   color: #fff;
}

span {
   color: #4fe;
}

h2 {
   letter-spacing: -2px;
   font-weight: 600;
}

h3 {
   font-weight: 200;
   color: #fb4;
   font-size: 19px;
}

.button-- {
   float: left;
   position: relative;
   padding: 0;
}

.modal-content {
   position: relative;
   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: 0;
   outline: 0;
   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
   box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.btn {
   border-radius: 0px !important;
}




.modal-open {
   overflow: hidden
}

.modal-open .modal {
   overflow-x: hidden;
   overflow-y: auto
}

.modal {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1050;
   display: none;
   overflow: hidden;
   outline: 0
}

.modal-dialog {
   position: relative;
   width: auto;
   margin: .5rem;
   pointer-events: none
}

.modal.fade .modal-dialog {
   transition: -webkit-transform .3s ease-out;
   transition: transform .3s ease-out;
   transition: transform .3s ease-out, -webkit-transform .3s ease-out;
   -webkit-transform: translate(0, 5%);
   transform: translate(0, 5%)
}

@media screen and (prefers-reduced-motion: reduce) {
   .modal.fade .modal-dialog {
      transition: none
   }
}

.modal.show .modal-dialog {
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0)
}

.modal-dialog-centered {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   min-height: calc(100% - (.5rem * 2))
}

.modal-dialog-centered::before {
   display: block;
   height: calc(100vh - (.5rem * 2));
   content: ""
}

.modal-content {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: .3rem;
   outline: 0
}

.modal-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 9999;
   background-color: #000
}

.modal-backdrop.fade {
   opacity: 0
}

.modal-backdrop.show {
   opacity: .5
}

.modal-header {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: start;
   align-items: flex-start;
   -ms-flex-pack: justify;
   justify-content: space-between;
   padding: 1rem;
   border-bottom: 1px solid #e9ecef;
   border-top-left-radius: .3rem;
   border-top-right-radius: .3rem
}

.modal-header .close {
   padding: 1rem;
   margin: -1rem -1rem -1rem auto
}

.modal-title {
   margin-bottom: 0;
   line-height: 1.5
}

.modal-body {
   position: relative;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   padding: 1rem
}

.modal-footer {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: end;
   justify-content: flex-end;
   padding: 1rem;
   border-top: 1px solid #e9ecef
}

.modal-footer > :not(:first-child) {
   margin-left: .25rem
}

.modal-footer > :not(:last-child) {
   margin-right: .25rem
}

.modal-scrollbar-measure {
   position: absolute;
   top: -9999px;
   width: 50px;
   height: 50px;
   overflow: scroll
}

@media (min-width: 576px) {
   .modal-dialog {
      max-width: 500px;
      margin: 1.75rem auto
   }

   .modal-dialog-centered {
      min-height: calc(100% - (1.75rem * 2))
   }

   .modal-dialog-centered::before {
      height: calc(100vh - (1.75rem * 2))
   }

   .modal-sm {
      max-width: 300px
   }
}

@media (min-width: 992px) {
   .modal-lg {
      max-width: 800px
   }
}