.survey-container {
    display:inline-block;
    max-height:0;
    width:80%;
    position:fixed;
    bottom:0;
    right:10%;
    /* max-height transition */
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
    z-index:10;
}
  .survey-container.visible {
      max-height:300px;
  }
.survey {
    background:#fff;
    border:1px solid black;
    border-bottom:none;
    padding:10px;
}
    .survey .close {
        position:absolute;
        top:5px;
        right:10px;
        cursor:pointer;
    }
    .survey textarea {
        display:block;
        width:100%;
        resize:none;
        border:1px solid black;
    }
    .survey span {
        margin-bottom:5px;
    }
    div.input-divider {
        display:inline-block;
        background-image:linear-gradient(#999 33%, rgba(255,255,255,0) 0%);
        background-position:right;
        background-size:1px 3px;
        background-repeat:repeat-y;
        width:1px;
        height:12px;
        margin:0 8px;
    }
    .survey input[type=submit] {
        display:block;
        width:100%;
        background:#40BAD4;
        font-size:14px;
        font-weight:700;
        color:#333;
        padding:15px 0;
        text-decoration:none;
        cursor:pointer;
        text-align:center;
        border:0;
        margin-top:30px;
    }
        .survey input[type=submit]:hover {
            background:#00a0be;
            color:#282828;
        }
    .survey div span {
        display:block;
        font-weight:bold;
    }
    .survey div#feedback {
        display:none;
    }
    .survey div#thank-you {
        display:none;
        font-size:20px;
        font-weight:bold;
    }

@media only screen and (min-width:768px) {
    .survey-container {
        width:auto;
        right:20px;
    }
    .survey {
        padding:20px 35px 20px 20px;
    }
}