Fixed form css (Blogger)

fixed-form.css

/*! Fixed-Form v1.0.0 */
/* Form icons */
@font-face {
  font-family: "fixed-form";
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAsAAAAABlwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAVwAAAGEGbz6dEZGVE0AAAJkAAAAGgAAABx41SUoR0RFRgAAAoAAAAAdAAAAIAAwAARPUy8yAAACoAAAAEcAAABgUB5etGNtYXAAAALoAAAAQAAAAUoB2QJVaGVhZAAAAygAAAApAAAANg21w1VoaGVhAAADVAAAABgAAAAkBC8CA2htdHgAAANsAAAACgAAAAoEFQAAbWF4cAAAA3gAAAAGAAAABgADUABuYW1lAAADgAAAANwAAAGhNkYitHBvc3QAAARcAAAAEAAAACAAAwABeJxNkEFLAlEQx+fpvlxssRQ3ijZvEh36BJ2ibh6TTh0UWkPSWqSkW4GYT2ff6oodA+sQ2D2PXYJuQgePQR+gD/AePMHWiIqBmR/zH/5/GAKaBoSQ+ULxwj7cLJxWykBCQGBbroVkKiyXNdcgaITR0FJRWNlLTBF/wYggyhvZoxbwBQtg0YJu3AoGOUuANrMxIA6rkHbyjl3ZdEr5E9su54ulv7R/uQCkQRiECQlV3mPSlb7JOHMb2EDWajb1iaMeaJ2xOtbcmnfdbeqCHohXcatQveA6xYYb3HPmsXaLtzhy9LHDvY7+9iGW9uls5X0X577ntV1fH8sMdbvMr3f0mBjIpJlTyWFEZDNmVWX7AeR+4LFqPvVRDSZZRDEYnqO4ElOkapwzUR2L1O7nswqkOxG06vAexVGgTTZMMUI1EltUTFXaRJFW1g6NyV4SzeBxl9jHOc+IfgGX2qTKeJxjYGBgZACCM7aLzoPoa94HdWA0AEoNBpgAAHicY2BkYGDgA2IJBhBgYmAEQhDJAuYxAAAEYAA1AAAAeJxjYGZiYJzAwMrAwejDmMbAwOAOpb8ySDK0MDAwMbByMsAAIwMSCEhzTWFwYEhiSGZ88P8Bgx4TkhrG10BCAQgZAdhMCngAeJxjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYgKzk///BKpJA9P/5UPVAwMjGgODQDDAy0dwKCgAA3HIHLHicY2BkYGAA4u/+u3bH89t8ZeBmYgCBa94HdZBpJgawOAeEAgAjjAiUAAAAeJxjYGRgYGIAAj0wCWIzMqACJgAF0AA5AgAAAAIAAAAAFQAAAABQAAADAAB4nIWOMU4DMRBF3yabiARKRG0amsgr70pRpBwgFXVOkN1oC9aSkyIVx+AGnIKeY3AATsF3GKBBiqWR33x//xnghhcK8imYc2c8omRhPOaBZ+NSnjfjCdd8GE+ZF9lZlDMpt/zwiCvujcc8EoxLeV6NJ5r6bjyV/klHz4mWHV4cSTxB15/ane9iyvwrntuN2oHj+U7s9dPRUGmaY636L+/7ZSmlltergmilsDgcNzHtW9dUwa3d31w1S183vgn1istLbvWYOMiWt3NKzxuxbdOhj4Orq3A55At60j8feJxjYGZABowMaAAAAI4ABQ==) format("woff");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  font-family: "fixed-form" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="form-"]:before,
[class*=" form-"]:before {
  font-family: "fixed-form" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.form-paper-plane:before {
  content: "\62";
}
.form-email:before {
  content: "\63";
}
/* Btn Control */
.fixed-form__control {
    padding: 1.2em;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer
}
.fixed-form__control::after {
    cursor: default;
    z-index: 9800;
    background: rgba(85, 83, 81, .75);
    visibility: hidden;
    content: "";
    opacity: 0;
    width: 100%;
    transition: opacity .5s, visibility .5s
}
.fixed-form__control::after,
.fixed-form__outsite {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
}
.fixed-form__control.is-active::after {
    visibility: visible;
    opacity: 1
}
.fixed-form__button,
.fixed-form__control,
.fixed-form__header {
    display: flex;
    align-items: center		
}
/* Form outsite */
.fixed-form__outsite {
    padding: 1em;
    width: 300px;
    z-index: 9999;
    overflow-y: auto;
    font-size: 14px;
    transform: translateX(-100%);
    transition: transform .5s cubic-bezier(.6, -.4, .2, .9)
}
.fixed-form__body,
.fixed-form__header,
.fixed-form__footer p {
    padding: 15px 18px
}
.fixed-form__outsite.is-active {
    transform: translateX(0)
}
.fixed-form__container {
    background: #fff;
    box-shadow: 0 0 0 7px rgba(0, 0, 0, .03)
}
/* Form header */
.fixed-form__header {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: 1.25em;
    justify-content: space-between
}
.fixed-form__header i::before {
    font-size: 32px;
    display: block
}
/* Form input */
.fixed-form__input {
    padding: 1em;
    margin-bottom: 1em;
    width: 100%;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .03);
    max-width: 100%;
    outline: transparent 0;
    transition: border .3s, box-shadown .3s
}
.fixed-form__input:active,
.fixed-form__input:focus {outline: transparent 0;}
.fixed-form__textarea {
    min-height: 100px;
    resize: none
}
[id*=contact-form-submit] {
    border: 0 transparent;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    width: 100%;
    text-align: center;
    padding: 1em;
    font-weight: 700;
    border-radius: 3px;
    justify-content: center;
    transition: opacity .3s
}
.fixed-form__control i::before,
[id*=contact-form-submit] i::before {
    margin-right: .5rem;
    font-size: 1.2em
}
[id*=contact-form-submit]:hover {
    opacity: .8
}
/* Form message */
.fixed-form__message {
    padding-bottom: 24px;
}
.contact-form-error-message,
.contact-form-success-message,
.fixed-form__footer img {
    display: none
}

/* Scroll */
.fixed-form__outsite::-webkit-scrollbar {width: 3px}
.fixed-form__outsite::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, .1)}
.fixed-form__outsite::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .3)}
.fixed-form__footer p {border-top: 1px solid rgba(0, 0, 0, .05);}

@media (min-width: 768px) {
	.fixed-form__outsite {
    	padding: 2.8em;
    	width: 400px
	}
	.fixed-form__body,
	.fixed-form__header,
	.fixed-form__footer p {
    	padding: 20px 24px;
	}
}
/*options*/
.fixed-form__outsite {
    color: #4d6761; /*text color*/
	background: #e5e0dc; /*bg color*/
	line-height: 1.4;
}
.fixed-form__control,
[id*=contact-form-submit] {
	background: #3a9691; /*buttons color*/
}
.fixed-form__input:active, .fixed-form__input:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .03), 0 0 1px #3a9691; /*focus color (shadown)*/
    border-color: #3a9691; /*focus color (border)*/
}