.form-btn{
    transform: rotate(90deg);
    background: #ff9800;
    /*background: -webkit-linear-gradient(45deg, #56ab2f, #82B724);
    background: -o-linear-gradient(45deg, #56ab2f, #82B724);
    background: -moz-linear-gradient(45deg, #56ab2f, #82B724);
    background: linear-gradient(45deg, #56ab2f, #82B724); */   
    overflow: hidden; 
    padding: 10px 20px;
    top:350px;
    right: -55px;           
    color: #fff;
    overflow: hidden;
    z-index: 999;
    cursor: pointer;    
    position: fixed;
    text-decoration: none;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;  
}
/*writing-mode: vertical-rl;
text-orientation: upright;*/
.form-btn:hover{
    color: #fff;
    background: #82B724;
    text-decoration: none; 
    transition: 0.2s  all ease;
    -webkit-transition: 0.2s  all ease;
}
.form-btn i{
 transform: rotate(-90deg);
}


.form-close{
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 10px;
    padding-top: 10px;
}

.form-group 			  { 
  position:relative; 
  margin-bottom:15px; 
}
input{

  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 1px solid #d4d4d4;
  background: transparent;
  color: #fff;
}
input:focus 		{ outline:none; }

textarea{

  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 1px solid #d4d4d4;
  background: transparent;
  color: #fff;
}
textarea:focus 		{ outline:none; }

select{

  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 1px solid #d4d4d4;
  background: transparent;
  color: #fff;
}
select:focus 		{ outline:none; }

option{
	color: #000;
}
input::-webkit-input-placeholder { color: rgba(255,255,255,0.8);}
input:-moz-placeholder { color: rgba(255,255,255,0.8);}
input::-moz-placeholder { color: rgba(255,255,255,0.8);}
input:-ms-input-placeholder { color: rgba(255,255,255,0.8);}

textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.8);}
textarea:-moz-placeholder { color: rgba(255,255,255,0.8);}
textarea::-moz-placeholder { color: rgba(255,255,255,0.8);}
textarea:-ms-input-placeholder { color: rgba(255,255,255,0.8);}
/* LABEL ======================================= */
label 				 {
  color:#fff; 
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label		{
  top:-20px;
  font-size:14px;
  color:#d4d4d4;
}

/* active state */
textarea:focus ~ label, textarea:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#fff;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#fff; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}
/* active state */
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* active state */
textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes textareatHighlighter {
	from { background:#d4d4d4; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes textareaHighlighter {
	from { background:#d4d4d4; }
  to 	{ width:0; background:transparent; }
}
@keyframes textareaHighlighter {
	from { background:#d4d4d4; }
  to 	{ width:0; background:transparent; }
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#d4d4d4; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#d4d4d4; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#d4d4d4; }
  to 	{ width:0; background:transparent; }
}

@media screen and (max-width: 600px){
 .form-btn {
display: none;
 }

}