* {
    padding: 0;
    margin: 0;
}
html, body{
    width:100%;
    height:100%;
}
body{
    /*background-color: #b7d6cd;
    background-position:center;*/
    margin: 0 auto;
    background:#95c8ce;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    /*background-color: #b7d6cd;
    background-position:center;*/
    position: absolute;
}
.logo{
    width:6%;
    height:auto;
    position: absolute;
    margin: 2%;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.logo:hover{
    width:10%;
}
.logo.full{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.container{
    width:100%;
    height:100%;
    overflow:hidden;
}
.title{
    font-size: 3.815vw;
    position:relative;
    margin:0 auto;
    height:7%;
    width:70%;
    text-align:center;
    top: 10%;
    cursor: pointer;
}
.form-container{
    width: 80px;
    height: 80px;
    position:relative;
    margin: 5% auto;
    top: 10%;
    background-color: #ffa542;
    overflow:hidden;
    border-radius: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -webkit-transition: width 400ms cubic-bezier(0.895, 0.030, 0.685, 0.220) 200ms, height 400ms cubic-bezier(0.47,0,0.745,0.715), border-radius 400ms linear; 
        -moz-transition: width 400ms cubic-bezier(0.895, 0.030, 0.685, 0.220) 200ms, height 400ms cubic-bezier(0.47,0,0.745,0.715), border-radius 400ms linear; 
            -o-transition: width 400ms cubic-bezier(0.895, 0.030, 0.685, 0.220) 200ms, height 400ms cubic-bezier(0.47,0,0.745,0.715), border-radius 400ms linear; 
                transition: width 400ms cubic-bezier(0.895, 0.030, 0.685, 0.220) 200ms, height 400ms cubic-bezier(0.47,0,0.745,0.715), border-radius 400ms linear; /* easeInQuart */
}
.form-container.expand{
    width: 60%;
    height: 60%;
    border-radius: 10%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30), 0 6px 6px rgba(0, 0, 0, 0.17);
    cursor: auto;
}
.form{
    opacity:0;
    visibility: hidden;
    font-weight: 400;
    width: 70%;
    height: 70%;
    left: 15%;
    position: absolute;
    top:15%;
    overflow-y: scroll;
}
.form-container.expand .form{
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 400ms linear 700ms;
    -o-transition: opacity 400ms linear 700ms;
    transition: opacity 400ms linear 700ms;
}
.form-container.expand .submit{
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 400ms ease-in 200ms;
    -o-transition: opacity 400ms ease-in 200ms;
    transition: opacity 400ms ease-in 200ms;
}
#pencil{
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 40px;
    line-height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    color: white;
    cursor:pointer;
    -webkit-transition: transform 600ms;
    -o-transition: transform 600ms;
    transition: transform 600ms;
}
.facebook.form-container{
    background-color: #3b5998
}
#facebook, #youtube{
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 40px;
    line-height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    color: white;
    cursor:pointer;
    -webkit-transition: transform 500ms;
    -o-transition: transform 500ms;
    transition: transform 500ms;
}
.youtube.form-container{
    background-color: #bb0000;
}
.rotate{
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.form-group {
    overflow: scroll;
}

h2.heading {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 300;
  text-align: left;
  color: #506982;
  border-bottom: 1px solid #506982;
  padding-bottom: 3px;
  margin-bottom: 20px;
}

.controls {
  text-align: left;
  position: relative;
}
.controls input[type="text"],
.controls input[type="email"],
.controls input[type="tel"],
.controls textarea,
.submit,
.controls select {
  padding: 2%;
  font-size: 14px;
  border: 1px solid #c6c6c6;
  width: 95%;
  color: #888;
  font-size: 16px;
  font-weight: 300;
  background-color: #fff;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 2%;
}
.controls input[type="text"]:focus, .controls input[type="text"]:hover,
.controls input[type="email"]:focus,
.controls input[type="email"]:hover,
.controls input[type="tel"]:focus,
.controls input[type="tel"]:hover,
.controls textarea:focus,
.controls textarea:hover,
.submit:focus,
.submit:hover,
.controls select:focus,
.controls select:hover {
  outline: none;
  border-color: #9FB1C1;
}
.controls input[type="text"]:focus + label, .controls input[type="text"]:hover + label,
.controls input[type="email"]:focus + label,
.controls input[type="email"]:hover + label,
.controls input[type="tel"]:focus + label,
.controls input[type="tel"]:hover + label,
.controls textarea:focus + label,
.controls textarea:hover + label,
.submit:focus + label,
.submit:hover + label,
.controls select:focus + label,
.controls select:hover + label {
  color: #077ABC;
  cursor: text;
}
.controls .fa-sort {
  position: absolute;
  right: 10px;
  top: 17px;
  color: #999;
}
.controls select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.controls label {
  position: absolute;
  left: 8px;
  top: 12px;
  color: #999;
  font-size: 16px;
  display: inline-block;
  padding: 4px 10px;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
  -moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
  -o-transition: color 0.3s, top 0.3s, background-color 0.8s;
  -webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
  transition: color 0.3s, top 0.3s, background-color 0.8s;
}
.controls label.active {
  top: -11px;
  color: #555;
  background-color: white;
  border-radius: 10%;
}
.controls textarea {
  resize: none;
  height: 200px;
}
.submit {
  cursor: pointer;
  background-color: #07B3A1;
  border: none;
  color: #fff;
  padding: 12px 0;
  width: 70%;
  position:absolute;
  left: 15%;
  height: 10%;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.submit:hover {
  background-color: #08ccb7;
}
.form-submitted .form-group {
    -webkit-transform: translateX(150%);
    -ms-transform: translateX(150%);
    -o-transform: translateX(150%);
    transform: translateX(150%);
    -webkit-transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    -o-transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;  
}
.form-submitted .form-group:nth-child(1) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.form-submitted .form-group:nth-child(2) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.form-submitted .form-group:nth-child(3) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.form-submitted .form-group:nth-child(4) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.form-submitted .form-group:nth-child(5) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.post{
    text-align:center;
    top:40%;
    position:relative;
    height:20%;
    visibility: hidden;
    opacity:0;
}
.expand.form-submitted .post{
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease-in 0.5s;
    -o-transition: all 0.5s ease-in 0.5s;
    transition: all 0.5s ease-in 0.5s;
}
.expand.form-submitted{
    height:20%;
    width:30%;
}
.form-container:hover{
    -webkit-animation: wobble 0.3s forwards 0.5s linear infinite;
    -o-animation: wobble 0.3s forwards 0.5s linear infinite;
    animation: wobble 0.3s forwards 0.5s linear infinite;
}
.form-container.expand:hover{
    -webkit-animation: none;
    -o-animation: none;
    animation: none;
}

@-webkit-keyframes wobble {
    0% { -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
    50% { -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
    transform: translateY(-5%); }
    100%{-webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);}
}
@-o-keyframes wobble {
    0% { -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
    50% { -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
    transform: translateY(-5%); }
    100%{-webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);}
}
@-moz-keyframes wobble {
    0% { -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
    50% { -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
    transform: translateY(-5%); }
    100%{-webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);}
}
@keyframes wobble {
    0% { -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
    50% { -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
    transform: translateY(-5%); }
    100%{-webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);}
}