/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* 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 */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  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
}

#error-modal .modal-content {
  max-width: 500px;
}

#error-modal .modal-content .modal-body {
  text-align: center;
}

#error-modal .modal-content .modal-header {
  background-color: crimson;
}

/* 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 */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #2DBECD;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 10px;
  background-color: #EEE;
  clear: both;
}



.list-unstyled {
  list-style: none;
  padding: 10px;
}


.media{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:start;
-ms-flex-align:start;
align-items:flex-start;
} 

li.media {
  margin-bottom: 20px;
}

.mr-3, .mx-3{
margin-right:1rem !important;
} 


.align-self-center {
-ms-flex-item-align:center !important;
align-self:center !important;
} 

.media img{
  vertical-align:middle;
  border-style:none;

  height: 64px;
  width: 64px;
}

.media-body{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
} 

.h5, h5{
font-size:1.25rem;
} 



.mb-1, .my-1{
  margin-bottom:0.25rem !important;
} 

.mt-0, .my-0{
  margin-top:0px !important;
} 


.modal-footer .button-group {
  display: flex;
  justify-content: flex-end;
}

.btn, 
.button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;

    font-size: 1.2rem;
    margin:0 5px;
}

.btn-success, 
.btn-success:link, 
.btn-success:visited {
    color: #FFFFFF;
    background-color: #2DBECD; 
}

.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-default, 
.btn-default:link, 
.btn-default:visited {
    color: #FFFFFF;
    background-color: #AAA;
}

.slides {
  margin:1em auto;
}

.slide {
  display:none;
  width: 100%;
  font-size: 1.5rem;
  /*max-width: 620px;*/
  /*margin:1em auto;*/
}

.animate-left {
  display: block;
  position:relative;
  animation:animateleft 1s
}

@keyframes animateleft { 
  from { left :-500px; opacity:0 } to { left:0; opacity:1 }
}

.animate-right {
  display: block;
  position:relative;
  animation:animateright 1s
}

@keyframes animateright { 
  from { right :-500px; opacity:0 } to { right:0; opacity:1 }
}

.slide img.intro-art {
  width: 250px;
  float:right;
  margin:10px 15px;
}

.slide img.screencast {
  /*min-width: 50%;*/
  /*max-width: 280px;*/
  max-height: 350px;
}

.slide p {
  padding: 10px 20px;
}

.fade-in {
  display: block;
  animation:fadeIn 1s
}

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
} 

.small-note {
  font-size: 0.8rem;
}

.email-spacer {
  margin: 10px 0;
  display: block;
}