/*the container must be positioned relative:*/
  .auto {
    position: relative;
    display: inline-block;
  }
  
  .auto-items {
    position: relative;
    border: 1px solid #080808;
    color: #0c0c0c;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    width: 200px;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }
  
  .auto-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #98d3e8; 
    border-bottom: 1px solid #d4d4d4; 
  }
  
  /*when hovering an item:*/
  .auto-items div:hover {
    background-color: #c0def5; 
  }
  
  /*when navigating through the items using the arrow keys:*/
  .auto-active {
    background-color: DodgerBlue !important; 
    color: #d20b0b; 
  }

#menu-bar {
    width:100%;
    height:80px;
    background-color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:100;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.6);
    -moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.6);
    box-shadow:0px 0px 20px 0px rgba(0,0,0,0.6)
    }

#bump-down {
    width:100%;height:80px;
    display:block
    }

#banner-container{width:100%;height:auto;
    min-height:70vh;
    margin-top:80px
    }

div.stickProg {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 10px;
  font-size: 20px;
}

.min-70vh {
    height:auto;
    min-height:70vh
    }
.min-50vh {
    height:auto;
    min-height:50vh
    }
.min-40vh {
    height:auto;
    min-height:40vh
    }
.min-45vh {
    height:auto;
    min-height:45vh
    }
.min-200px {
    height:auto;
    min-height:200px
    }
.card-button-hover {
    opacity:1;
    border:0
    }
.card-button-hover:hover {
    opacity:0.8;
    border:0
    }

#slideout {
    color:#fff;
    position:fixed;
    bottom:0;
    right:50px;
    z-index:10000;
    width:200px;
    max-width:100%;
    padding:12px 0;
    text-align:center;
    background:#7f2245;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    transition-duration:0.3s;
    border-radius:5px 5px 0 0}

#slideout_inner{color:#fff;
    position:fixed;
    right:50px;
    bottom:-250px;
    background:#7f2245;
    width:300px;
    max-width:100%;
    padding:25px;
    height:200px;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    transition-duration:0.3s;
    border-radius:5px 0 0 0
    }

#slideout:hover {
    bottom:250px
    }

#slideout:hover

#slideout_inner {
    bottom:0}
.whf-button-wht {
    color:#7f2245;
    background-color:#fff;
    border-radius:10px;
    border:2px solid #7f2245}
.whf-button-wht:hover {
    color:#fff;
    background-color:#7f2245;
    border-radius:10px;
    border:2px solid #fff
    }

#page-footer {
    width:100%;
    min-height:30vh;
    background-color:#666
    }
.whf-plumb {
    color:#7f2245 !important
    }
.whf-blue {
    color:#162169 !important
    }
.white{
    color:#fff !important
    }
.whf-plumb-bg {
    background-color:#7f2245 !important
    }
.whf-blue-bg {
    background-color:#162169 !important
    }
.white-extended *{
    color:#fff;
    font-family:'PT Sans', sans-serif
    }
.uk-icon-button-lg {
    box-sizing:border-box;
    width:60px;
    height:60px;
    border-radius:500px;
    background:#f8f8f8; 
    color:#999;
    vertical-align:middle;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    transition:0.1s ease-in-out;
    transition-property:color, background-color
    }
.uk-icon-button-lg:hover,
.uk-icon-button-lg:focus {
    background-color:#ebebeb;
    color:#666;
    outline:none
    }
.uk-icon-button-lg:active,.uk-active>
.uk-icon-button-lg {
    background-color:#dfdfdf;
    color:#666}
.sq-image {
    width:100%;
    padding-top:100%
    }
.move-it-move-it {
    margin-top:-60px;
    z-index:2
    }
.sq-number {
    width:40px;
    height:40px;
    background-color:#802043;
    color:white;
    margin-right:5px;
    padding:0;
    display:inline-block
    }
    
figure {
    padding:10px;
    border-radius:5px
    }
figcaption {
    margin:10px 0 0 0;font-size:0.775rem;
    line-height:1;
    font-family:'PT Sans', sans-serif;
    color:#666
    }

#dates-table {
  border-collapse: collapse;
}
th, td {  
  border: 1px solid #000;
}

#banner-ruby {
    height:45;
    min-height:200px;
    margin-bottom:20px;
    width:100%;
    padding:0;
    background: linear-gradient (45deg, #fff 0%, #000 100%)
    }
    
.overlay-ruby {
    background:url("paper.png") center bottom/contain no-repeat
    }

@media (max-width: 959px)
    {.overlay-ruby {
        background:url("/images/paper.png") center bottom/contain no-repeat,linear-gradient
        (45deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.5) 100%)
    }
}

.flash-text,
.flash-text *,
.flash-text>* {
    font-size:1rem;
    line-height:1.5;
    margin:2px 0;
    font-weight:normal;
    font-family:sans-serif
    }

#addressUpdate {
  display:none;
}

#addressUpdate {
    display:none;
  }

#addressBAD {
  display:none;
}

#addressGood {
  display:none;
}



#postoffice-box {
    display:none;
  }

#submitButton {
  display:none;
}

#apptAddress {
  display:none;
}

#next {
    display:none;
  }

#auto {
  display:none;
}

#loading {
  display:none;
}

body {
  font: 16px;
  background: #feffff;
}

.autocomplete-container {
  /*the container must be positioned relative:*/
  position: relative;
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
}

.autocomplete-container input {
  width: calc(90% - 43px);
  outline: none;
  
  border: 1px solid rgb(89, 103, 159);
  padding: 10px;
  padding-right: 31px;
  font-size: 16px;
}

.autocomplete-items {
  position: relative;
  border: 1px solid rgb(252, 253, 255);
  box-shadow: 0px 2px 10px 2px rgba(33, 72, 177, 0.979);
  border-top: none;
  z-index: 99;
  white-space: nowrap;
  /*position the autocomplete items to be the same width as the container:*/
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  
  background-color: #338dcd;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: rgb(249, 249, 255);
}

.autocomplete-items .autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: rgb(255, 255, 255);
}

.clear-button {
  color: rgb(231, 16, 16);
  cursor: pointer;
  position: absolute;
  right: 100px;
  top: 0;

  height: 100%;
  display: none;
  align-items: center;
}

.clear-button.visible {
  display: flex;
}


.clear-button:hover {
  color: rgba(234, 220, 220, 0.6);
}

.shadowing {
    display: none;
    position: fixed;
    top: 0%;left: 0%;
    width: 100%;
    height: 100%; 
    background-color: rgb(211, 211, 211); 
    z-index:10;
    opacity:0.5; 
    filter: alpha(opacity=50);}

#box {
    display: none;
    position: fixed;
    top: 15%;
    bottom: 10%;
    left: 20%;
    width: 60%;
    height: 80%;
    padding: 0;
    margin:0;
    overflow-y: auto;
    border: 1px solid black;
    background-image: url('/images/devils tower.jpg');
    background-color: rgb(255, 253, 253);
    
    z-index: 11; 
    overflow: hidden;
}   

#loading {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 20%;
}

.box {
  display: none;
  position: fixed;
  top: 15%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  width: 90%;
  border-radius: 10px;
  height: 80%;
  padding: 0;
  margin:0;
  border: 1px solid black;
  background-color: rgb(238, 230, 230);
  z-index: 11; 
  overflow-y: auto;
}   

#boxclose {
    float:right;
    position:absolute; 
    top: 0; 
    right: 0px; 
    background-repeat:no-repeat;    
    background-color:#CCC; 
    border:1px solid black; 
    width:30px;
    height:30px;
    margin-right:0px;
    }

#boxcontent {
    position:absolute;
    top:23px;
    left:0;
    right:0;
    bottom:0;
    margin:0 0 0 0;
    padding: 8px;
    border-radius: 10px;
    overflow: hidden;
    overflow-y: auto;
    width:100%;
    height:120%;   
}

#fake_button {
  color: #ffffff;
  background-color: #2d63c8;
  font-size: 20px;
  border-radius: 10px;
  padding: 30px 10px;
  cursor: pointer;
}

button {
    color: #ffffff;
    background-color: #2d63c8;
    font-size: 20px;
    border-radius: 10px;
    padding: 30px 10px;
    cursor: pointer;
}

button:hover {
    color: #2d63c8;
    background-color: #ffffff;
}

  /*Loading icon beating heart*/
  #heart {
    position: fixed;
    display: none;
    color: black;
  }
  
  .heart { 
    background: red; 
    position: fixed; 
    height: 100px; 
    width: 100px; 
    top: 50%;
    left: 50%;
    /* Animation */
    transform: rotate(-45deg) scale(1); 
    animation: pulse 1.5s linear infinite; 
  } 

  .heart::after { 
    background:inherit; 
    border-radius: 50%; /* To make circle */
    content:''; 
    position: absolute; 
    /* top: -100px;*/
    top: -50%; /* Inherit properties of parent */
    /* left: -100px; */
    left:0; 
    height: 100px; 
    width: 100px; 
  } 
  .heart::before { 
    background: inherit; 
    border-radius: 50%; /* Lobes of the heart */
    content:''; 
    position: fixed; 
    top: 0; 
    right: -50%; /* Inherit properties of parent */
    height: 100px;/*100px; */
    width: 100px; 
  } 
  
  @keyframes pulse{ 
    
    0% { 
      transform: rotate(-45deg) scale(2); 
      opacity: .8;
    }
    10% { 
      transform: rotate(-45deg) scale(1.8);
      opacity: .7; 
    } 
    20% { 
      transform: rotate(-45deg) scale(1.6); 
      opacity: .6;
    } 
    30% { 
      transform: rotate(-45deg) scale(1.4); 
      opacity: .5;
    } 
    40% { 
      transform: rotate(-45deg) scale(1.2); 
      opacity: .4;
    } 
    50% { 
      transform: rotate(-45deg) scale(1.4); 
      opacity: .5;
    }
    60% { 
      transform: rotate(-45deg) scale(1.6); 
      opacity: .6;
    } 
    70% { 
      transform: rotate(-45deg) scale(1.8); 
      opacity: .7;
    }
    100% { 
      transform: rotate(-45deg) scale(2); 
      opacity: .8; 
    } 
  } 

  .tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.far {
margin-right: 5px;
color: #00F;
 padding: 7px;
}

#dashed {
  width: 100%;
  border: 4px dashed #E8C55F;
  border-width: 1;
  border-radius: 5%;
  padding: 8px;
}

article, article address, table.meta, table.inventory { margin: 0 0 3em; }
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }

article address { float: left; font-size: 125%; font-weight: bold; }

/* table meta & balance */

table.meta, table.balance { float: right; width: 36%; }
table.meta:after, table.balance:after { clear: both; content: ""; display: table; }

/* table meta */

table.meta th { width: 40%; }
table.meta td { width: 60%; }

/* table items */

table.inventory { clear: both; width: 100%; }
table.inventory th { font-weight: bold; text-align: center; }

table.inventory td:nth-child(1) { width: 26%; }
table.inventory td:nth-child(2) { width: 38%; }
table.inventory td:nth-child(3) { text-align: right; width: 12%; }
table.inventory td:nth-child(4) { text-align: right; width: 12%; }
table.inventory td:nth-child(5) { text-align: right; width: 12%; }

/* table balance */

table.balance th, table.balance td { width: 50%; }
table.balance td { text-align: right; }

/* aside */

aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
aside h1 { border-color: #999; border-bottom-style: solid; }

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  height: 65%; 
  overflow-x: auto; 
  overflow-wrap: break-word;
  padding-bottom: 2%;
  bottom: 0;
  max-width: 400px;
  right: 15px;
  background-color: rgba(204, 204, 204, 0.938);
  border: 3px solid #f1f1f1;
  z-index: 9;
  overflow: hidden;
}

/* Add styles to the form container */
.form-container {
  max-width: 350px;
  height: 65%;
  padding: 10px;
  position: relative;
  background-color: white;
  overflow-y: hidden;
}
.chat-messages {
  position: absolute;
  overflow-y: scroll;
  height: 80%;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #fefdfd;
  resize: none;
  max-height: 90px;
  overflow-wrap: normal;
  overflow-y: scroll;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}
/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: auto;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.minimize-chat {
  background: none;
  margin-left: 80%;
  margin-top: 0%;
  max-height: 50px;
  max-width: 50px;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

/*Make Buttons Fancy Again!
Real talk though, this fancy-fies any buttons it's applied to. */
.fancy-btn {
text-decoration: none;
border: 1px solid rgb(146, 148, 248);
position: relative;
overflow: hidden;
}

.fancy-btn:hover {
box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
}

.fancy-btn:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  120deg,
  transparent,
  rgba(146, 148, 248, 0.4),
  transparent
);
transition: all 650ms;
}

.fancy-btn:hover:before {
left: 100%;
}

/* multiselect styles for recipe generator*/
.list1,
.list2 {
  list-style-type: none;
  width: 40%;
  max-height: 30%;
  overflow-x: auto;
  float: left;
  margin-right: 40px;
  padding-top: 10px;

}

.list1 .item,
.list2 .item {
  border: 1px solid gray;
  padding: 10px;
  margin-right: 30px;
  margin-left: 10px;
  margin-bottom: 5px;
  color: green;
}

.sortable-placeholder {
  border: 1px dotted #e6e6e6;
  height: 10px;
  color: #fff;
}

.select-box{
  width: 300px;
  min-height: 50%;
  overflow-y: auto;
  border: 2px black solid; 
} 

.float-child{
  width: 90%;
  float: left;
  padding: 20px;
}

#exclude_foods{
  position: absolute;
  margin-left: 15%;
}

#allergens{
  position: absolute;
  margin-left: 15%;
}

#recipe{
  position: absolute;
  height: 60%;
  margin-left: 30%;
  overflow-y: auto;
}

* {
  box-sizing: border-box;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

html,
body {
  min-height: 100%;
  height: 100%;
  background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);
  background-size: cover;
  background-position: top center;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  font-weight: 200;
  &.modal-active {
    overflow: hidden;
  }
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  /*margin-top: 5%;
  margin-bottom: 5%;*/
  top: 0;
  left: 0;
  border-radius: 10%;
  transform: scale(0);
  z-index: 1;

  &.one {
    transform: scaleY(0.01) scaleX(0);
    animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    .modal-background {
      .modal {
        max-height: 600px;
        transform: scale(0);
        overflow-y: auto;
        animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    &.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal-background {
        .modal {
          animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
      }
    }
  }
  &.two {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        opacity: 0;
        animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    + .content {
      animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    &.out {
      animation: quickScaleDown 0s 0.5s linear forwards;
      .modal-background {
        animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
      }
      + .content {
        animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
  }
  &.three {
    z-index: 0;
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0.6);
      .modal {
        animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    + .content {
      z-index: 1;
      animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    &.out {
      .modal-background {
        .modal {
          animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
      }
      + .content {
        animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
      }
    }
  }
  &.four {
    z-index: 0;
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0.7);
      .modal {
        animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    + .content {
      z-index: 1;
      animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    &.out {
      .modal-background {
        .modal {
          animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            forwards;
        }
      }
      + .content {
        animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
      }
    }
  }
  &.five {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        transform: translateX(-1500px);
        animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    &.out {
      animation: quickScaleDown 0s 0.5s linear forwards;
      .modal-background {
        animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            forwards;
        }
      }
    }
  }
  &.six {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        background-color: transparent;
        animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
        h2,
        p {
          opacity: 0;
          position: relative;
          animation: modalContentFadeIn 0.5s 1s
            cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
        .modal-svg {
          rect {
            animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
              forwards;
          }
        }
      }
    }
    &.out {
      animation: quickScaleDown 0s 0.5s linear forwards;
      .modal-background {
        animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            forwards;
          h2,
          p {
            animation: modalContentFadeOut 0.5s
              cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          }
          .modal-svg {
            rect {
              animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
                forwards;
            }
          }
        }
      }
    }
  }
  &.seven {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        height: 75px;
        width: 75px;
        border-radius: 75px;
        overflow: hidden;
        animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
        h2,
        p {
          opacity: 0;
          position: relative;
          animation: modalContentFadeIn 0.5s 1.4s linear forwards;
        }
      }
    }
    &.out {
      animation: slowFade 0.5s 1.5s linear forwards;
      .modal-background {
        background-color: rgba(0, 0, 0, 0.7);
        animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          border-radius: 3px;
          height: 162px;
          width: 227px;
          animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          h2,
          p {
            animation: modalContentFadeOut 0.5s 0.5
              cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          }
        }
      }
    }

  }
  .modal-background {
    display: table-cell;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    vertical-align: middle;
    .modal {
      background: white;
      padding: 50px;
      display: inline-block;
      border-radius: 3px;
      font-weight: 300;
      position: relative;
      h2 {
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 15px;
      }
      p {
        font-size: 18px;
        line-height: 22px;
      }
      .modal-svg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 3px;
        rect {
          stroke: #fff;
          stroke-width: 2px;
          stroke-dasharray: 778;
          stroke-dashoffset: 778;
        }
      }
    }
  }
}

.content {
  min-height: 100%;
  height: 100%;
  background: white;
  position: relative;
  z-index: 0;
  h1 {
    padding: 75px 0 30px 0;
    text-align: center;
    font-size: 30px;
    line-height: 30px;
  }
  .buttons {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    .button {
      display: inline-block;
      text-align: center;
      padding: 10px 15px;
      margin: 10px;
      background: red;
      font-size: 18px;
      background-color: #efefef;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      &:hover {
        color: white;
        background: #009bd5;
      }
    }
  }
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}

@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}

@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}

@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes slideUpLarge {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideDownLarge {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(150px);
  }
}

@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}

@keyframes modalFadeOut {
  0% {
    background-color: white;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

body {
  margin: 0;
}

#balloon-container {
  z-index: 9;
  height: 100vh;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  transition: opacity 500ms;
}

.balloon {
  height: 125px;
  width: 105px;
  border-radius: 75% 75% 70% 70%;
  position: relative;
}

.balloon:before {
  content: "";
  height: 75px;
  width: 1px;
  padding: 1px;
  background-color: #FDFD96;
  display: block;
  position: absolute;
  top: 125px;
  left: 0;
  right: 0;
  margin: auto;
}

.balloon:after {
    content: "▲";
    text-align: center;
    display: block;
    position: absolute;
    color: inherit;
    top: 120px;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes float {
  from {transform: translateY(100vh);
  opacity: 1;}
  to {transform: translateY(-300vh);
  opacity: 0;}
}