/**
 * Variables
 */
/**
 * Base styles
 */
 body,
 h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   color: #e9e9e9;
 }
 
 @media only screen and (min-width: 40em) {
   .modal-overlay {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 5;
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
     visibility: hidden;
     -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
     -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
     transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   }
   .modal-overlay.active {
     opacity: 1;
     visibility: visible;
   }
 }
 /**
  * Modal
  */
 .modal {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   position: relative;
   margin: 0 auto;
   background-color: #111111;
   width: 600px;
   max-width: 75rem;
   min-height: 20rem;
   padding: 1rem;
   border-radius: 3px;
   opacity: 0;
   overflow-y: auto;
   visibility: hidden;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transform: scale(1.2);
           transform: scale(1.2);
   -webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .modal .close-modal {
   position: absolute;
   cursor: pointer;
   top: 5px;
   right: 15px;
   opacity: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   -webkit-transition-delay: 0.3s;
           transition-delay: 0.3s;
 }
 .modal .close-modal svg {
   width: 1.75em;
   height: 1.75em;
 }
 .modal .modal-content {
   opacity: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   -webkit-transition-delay: 0.3s;
           transition-delay: 0.3s;
 }
 .modal.active {
   visibility: visible;
   opacity: 1;
   -webkit-transform: scale(1);
           transform: scale(1);
 }
 .modal.active .modal-content {
   opacity: 1;
 }
 .modal.active .close-modal {
   -webkit-transform: translateY(10px);
           transform: translateY(10px);
   opacity: 1;
 }
 
 /**
  * Mobile styling
  */
 @media only screen and (max-width: 39.9375em) {
   h1 {
     font-size: 1.5rem;
   }
 
   .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     -webkit-overflow-scrolling: touch;
     border-radius: 0;
     -webkit-transform: scale(1.1);
             transform: scale(1.1);
     padding: 0 !important;
   }
 
   .close-modal {
     right: 20px !important;
   }
 }