.Alert {
    background: var(--color-blue);
    bottom: 0;
    color: var(--color-initial);
    display: block;
    font-size: 1.2rem;
    left: 0;
    padding: 1.5rem;
    position: fixed;
    right: 0;
    z-index: 2
}

.Alert .Button {
    background: var(--color-initial);
    border: .1rem solid var(--color-intial);
    color: var(--color-blue);
    display: block;
    font-size: 1.1rem;
    height: 3.4rem;
    line-height: 3.4rem;
    margin: 1rem auto 0;
    padding-left: 1.4rem;
    padding-right: 1.4rem
}

.Page.alert {
    padding-bottom: 11rem
}

@media(min-width: 60rem) {
    .Alert .Button {
        display:inline-block;
        margin: 0 0 0 1rem
    }

    .Page.alert {
        padding-bottom: 6.4rem
    }
}

.Blockquote {
    border-left: .6rem solid var(--color-tertiary);
    font-size: 1.4rem;
    font-style: italic;
    margin: 0;
    margin-bottom: var(--margin-bottom);
    padding: 1rem 1.5rem;
    text-align: left
}

.Blockquote :last-child {
    margin-bottom: 0
}

.Button,button {
    background-color: var(--color-blue);
    border: .1rem solid var(--color-blue);
    color: var(--color-initial);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: var(--font-regular);
    height: 4.4rem;
    letter-spacing: 0;
    line-height: 4.4rem;
    margin-bottom: var(--margin-bottom);
    text-transform: uppercase
}

.Button:hover,button:hover {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-initial)
}

.Button[disabled],button[disabled] {
    cursor: default;
    opacity: .5
}

.Button[disabled]:hover,button[disabled]:hover {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary)
}

.Button.Button--outline,button.Button--outline {
    background-color: transparent;
    color: var(--color-blue)
}

.Button.Button--outline:hover,button.Button--outline:hover {
    background-color: transparent;
    border-color: var(--color-tertiary);
    color: var(--color-tertiary)
}

.Button.Button--outline[disabled]:hover,button.Button--outline[disabled]:hover {
    border-color: inherit;
    color: var(--color-blue)
}

.Button.Button--clear,button.Button--clear {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-blue)
}

.Button.Button--clear:hover,button.Button--clear:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-tertiary)
}

.Button.Button--clear[disabled]:hover,button.Button--clear[disabled]:hover {
    color: var(--color-tertiary)
}

.Button+.Button,button+.Button {
    margin-left: 1.5rem
}

.container {
    margin: 0 auto;
    max-width: 108rem;
    width: 100%
}

.Copyright {
    padding-top: 3rem
}

.Copyright span {
    display: block
}

.Copyright span:nth-child(2) {
    display: none
}

@media(min-width: 60rem) {
    .Copyright {
        float:left;
        padding-top: 0
    }

    .Copyright span,.Copyright span:nth-child(2) {
        display: inline
    }
}

.Dialog {
    -webkit-animation: dialog .6s cubic-bezier(.3,0,.1,1.4) 1 forwards;
    -moz-animation: dialog .6s cubic-bezier(.3,0,.1,1.4) 1 forwards;
    animation: dialog .6s cubic-bezier(.3,0,.1,1.4) 1 forwards;
    background: rgba(0,0,0,.05);
    color: var(--font-black);
    display: inline-block;
    border: none;
    border-radius: .3rem;
    bottom: 3rem;
    left: 3rem;
    opacity: 1;
    padding: 3rem;
    position: fixed;
    right: auto;
    will-change: transform,opacity;
    z-index: 2
}

@-webkit-keyframes dialog {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-moz-keyframes dialog {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes dialog {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.Dropdown {
    left: 50%;
    padding: 1.5rem;
    position: absolute;
    top: 125%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .4s ease,top .4s ease;
    -moz-transition: opacity .4s ease,top .4s ease;
    transition: opacity .4s ease,top .4s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 1
}

.Dropdown__list {
    background: var(--color-initial);
    border: .1rem solid var(--color-tertiary);
    border-radius: .4rem;
    display: block;
    -webkit-filter: drop-shadow(0 0 .6rem rgba(0,0,0,.1));
    filter: drop-shadow(0 0 .6rem rgba(0,0,0,.1));
    list-style: none;
    min-width: 13.4rem
}

.Dropdown__item.List__item,.Dropdown__list {
    margin: 0;
    padding: 0
}

.Dropdown__item:first-child .Link {
    border-radius: .4rem .4rem 0 0
}

.Dropdown__item:first-child .Link:hover:after {
    border-bottom-color: var(--color-tertiary)
}

.Dropdown__item:first-child .Link:after,.Dropdown__item:first-child .Link:before {
    border: 1rem solid transparent;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    right: 1.7rem;
    top: 0;
    width: 0
}

.Dropdown__item:first-child .Link:after {
    border-bottom-color: var(--color-initial);
    -webkit-transform: translate(-50%,-100%);
    -moz-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%)
}

.Dropdown__item:first-child .Link:before {
    border-bottom-color: var(--color-tertiary);
    -webkit-transform: translate(-50%,-102%);
    -moz-transform: translate(-50%,-102%);
    transform: translate(-50%,-102%)
}

.Dropdown__item:last-child .Dropdown__link {
    border-bottom-width: 0;
    border-radius: 0 0 .4rem .4rem
}

.Dropdown__item .Link {
    border-bottom: .1rem solid var(--color-tertiary);
    color: var(--color-primary);
    display: block;
    font-size: 1.2rem;
    line-height: 2;
    padding: 1rem 2rem;
    position: relative;
    text-align: center;
    text-decoration: none
}

.Dropdown__item .Link:hover {
    background: var(--color-tertiary);
    border-bottom-color: var(--color-tertiary);
    color: var(--color-initial)
}

.Editor {
    background: var(--color-initial);
    border: .1rem solid var(--color-primary);
    border-radius: .4rem;
    height: 45.5rem;
    margin: 1.7rem auto 4rem;
    overflow: hidden;
    padding: 5.5rem 0 0;
    position: relative;
    width: 100%;
    text-align: center
}

.Editor__buttons {
    background: var(--color-primary);
    width: 1rem;
    height: 1rem;
    border-radius: 1.3rem;
    position: absolute;
    top: 2.3rem;
    left: 4.5rem
}

.Editor__buttons:after,.Editor__buttons:before {
    content: "";
    display: block;
    background: var(--color-primary);
    width: 1rem;
    height: 1rem;
    border-radius: 1.3rem;
    position: absolute;
    left: -2rem
}

.Editor__buttons:before {
    left: 2rem
}

.Editor__content {
    height: 100%;
    overflow: hidden;
    position: relative
}

.Editor__content * {
    background: transparent;
    height: 100%
}

.Editor__content :focus {
    background: transparent
}

.Editor__tabs {
    border-top: .1rem solid var(--color-primary);
    border-bottom: .1rem solid var(--color-primary);
    height: 5.5rem;
    text-align: left
}

.Editor__tabs:before {
    background: var(--color-initial);
    border-right: .1rem solid var(--color-primary);
    content: "form.html";
    display: inline-block;
    height: -webkit-calc(100% + .1rem);
    height: -moz-calc(100% + .1rem);
    height: calc(100% + .1rem);
    height: 5.4rem;
    font-size: 1.3rem;
    line-height: 2.5;
    font-weight: var(--font-black);
    padding: 1rem 2rem;
    position: relative;
    text-align: center
}

.Feature {
    grid-column-gap: 1.5rem;
    -webkit-column-gap: 1.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    font-size: 1.4rem;
    text-align: left
}

.Feature__title {
    font-size: 1.6rem;
    font-weight: var(--font-black);
    text-transform: capitalize
}

.Feature__item {
    display: block;
    padding-bottom: 2.5rem;
    width: 100%
}

.Feature__description {
    margin: 0
}

@media(min-width: 60rem) {
    .Feature {
        -webkit-column-count:3;
        -moz-column-count: 3;
        column-count: 3
    }

    .Feature__item {
        padding-right: 4rem;
        padding-bottom: 0;
        min-height: 20rem
    }
}

form {
    margin-bottom: var(--margin-bottom)
}

input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea {
    background-color: var(--color-secondary);
    border: none;
    border-radius: var(--border-radius);
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: var(--font-black);
    min-width: 100%;
    padding: 1rem 1.5rem;
    position: relative;
    width: 100%;
    height: 5rem;
    margin-bottom: 2.5rem
}

input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary)
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#555" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
    padding-right: 3rem
}

select:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#555" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
}

textarea {
    min-height: 10rem;
    padding: 1.5rem;
    resize: none
}

label {
    font-size: 1.6rem;
    font-weight: var(--font-black);
    padding: 1rem 0;
    position: relative;
    text-align: left
}

input[type=checkbox]+label {
    display: inline-block;
    font-weight: var(--font-regular);
    margin-left: .5rem
}

fieldset {
    border: 0!important;
    margin: 0!important;
    margin-bottom: var(--margin-bottom);
    padding: 0!important
}

.Footer {
    color: var(--color-white);
    display: block;
    font-size: 1.4rem;
    max-width: 100%;
    padding: 5.4rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.Footer * {
    margin-bottom: 0
}

.Footer .Link {
    color: var(--color-primary)
}

.Footer .Link .Icon {
    fill: var(--color-primary)
}

.Footer .Link:hover {
    color: var(--color-tertiary)
}

.Footer .Link:hover .Icon {
    fill: var(--color-tertiary)
}

@media(min-width: 60rem) {
    .Footer {
        padding-bottom:6.8rem
    }
}

.Header {
    left: 0;
    max-height: 7.2rem;
    max-width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2
}

.Header>* {
    -moz-box-align: center;
    align-items: center;
    display: -moz-box;
    display: flex;
    -moz-box-pack: justify;
    justify-content: space-between
}

.Header .Logo {
    height: 7.2rem;
    width: 11.2rem
}

.Header .Navigation {
    right: -1rem
}

.Hero .Button {
    font-size: 1.4rem;
    height: 5.6rem;
    line-height: 5.5rem;
    margin-top: 2rem;
    padding-left: 6rem;
    padding-right: 6rem
}

.Hero__title {
    display: block;
    font-size: 4rem;
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 3rem;
    min-height: 15.6rem
}

.Hero__description {
    line-height: 2
}

@media(min-width: 60rem) {
    .Hero {
        margin-top:6.4rem
    }

    .Hero__title {
        margin-left: auto;
        margin-right: auto;
        min-height: 10.4rem
    }

    .Hero__shuffling {
        display: block
    }
}

.Icon:not(:root) {
    overflow: visible
}

picture {
    margin-bottom: var(--margin-bottom)
}

.Line {
    border-top-color: var(--color-tertiary)
}

.Link {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: var(--font-regular)
}

.Link .Icon {
    fill: var(--color-primary)
}

.Link:hover {
    color: var(--color-tertiary)
}

.Link:hover .Icon {
    fill: var(--color-tertiary)
}

.List {
    list-style: none
}

.List,.List__item {
    margin-bottom: var(--margin-bottom)
}

.Logo {
    cursor: pointer;
    display: inline-block;
    overflow: hidden
}

.Logo:hover {
    fill: var(--color-secondary)
}

.Logo--full {
    display: inline-block;
    height: 6.2rem;
    margin-top: -1rem
}

.Logo--full .Icon {
    height: 8.2rem
}

.Logo--full .Icon:first-child {
    height: 3rem;
    -webkit-transform: translateY(-2.6rem);
    -moz-transform: translateY(-2.6rem);
    transform: translateY(-2.6rem)
}

.Main {
    padding-top: 7.2rem
}

.Navigation {
    font-size: 1.4rem;
    max-width: 20rem;
    position: relative
}

.Navigation:before {
    content: "new";
    background: var(--color-blue);
    border-radius: var(--border-radius);
    color: var(--color-initial);
    display: none;
    font-size: 85%;
    font-weight: var(--font-black);
    line-height: 1;
    padding: .2rem .5rem .35rem;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: lowercase;
    top: 50%;
    -webkit-transform: translate(110%,-50%);
    -moz-transform: translate(110%,-50%);
    transform: translate(110%,-50%);
    vertical-align: baseline;
    white-space: nowrap
}

.Navigation>* {
    padding: 0 2rem 0 0
}

.Navigation span.Link {
    padding-right: 1.75rem;
    position: relative
}

.Navigation span.Link:after {
    content: "";
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;
    border-top: .4rem solid var(--color-primary);
    height: 0;
    opacity: .75;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(.3rem,-50%);
    -moz-transform: translate(.3rem,-50%);
    transform: translate(.3rem,-50%);
    width: 0
}

.Navigation span.Link:hover {
    position: relative
}

.Navigation span.Link:hover:after {
    content: "";
    border-top-color: var(--color-tertiary)
}

.Navigation span.Link:hover .Dropdown {
    opacity: 1;
    top: 95%;
    visibility: visible
}

.Navigation span.Link .Icon {
    height: 1.8rem;
    margin-left: 1rem;
    -webkit-transform: translateY(.4rem);
    -moz-transform: translateY(.4rem);
    transform: translateY(.4rem)
}

@media(min-width: 60rem) {
    .Navigation {
        max-width:100%
    }

    .Navigation>* {
        display: inline-block;
        margin-left: 1.2rem;
        padding: 0 1rem
    }

    .Navigation:before {
        display: inline-block
    }

    .Navigation span.Link:last-child {
        border-left: .1rem solid var(--color-primary)
    }
}

.Phone {
    text-align: center;
    margin: 1.7rem auto;
    position: relative;
    width: 34rem;
    height: 70.4rem;
    padding: 5.5rem .8rem 8.1rem;
    border-radius: 1.9rem;
    background: #fff;
    border: .1rem solid var(--color-primary)
}

.Phone__speaker {
    border-radius: 1.4rem;
    width: 7rem;
    height: .4rem;
    top: 2.6rem;
    left: 15.5rem
}

.Phone__camera,.Phone__speaker {
    background: var(--color-primary);
    position: absolute
}

.Phone__camera {
    width: 1rem;
    height: 1rem;
    border-radius: 1.3rem;
    top: 2.3rem;
    left: 13.2rem
}

.Phone__content {
    border: .1rem solid var(--color-primary);
    height: 57rem;
    padding: 1.5rem 1rem
}

.Phone__button {
    background: var(--color-primary);
    width: 5.1rem;
    height: 5.1rem;
    border-radius: 5.5rem;
    position: absolute;
    top: 63.8rem;
    left: 13.9rem;
    cursor: pointer;
    -webkit-transition: background-color .5s;
    -moz-transition: background-color .5s;
    transition: background-color .5s
}

.row {
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

@media(min-width: 60rem) {
    .row {
        -moz-box-orient:horizontal;
        -moz-box-direction: normal;
        flex-direction: row
    }
}

.Section {
    display: block;
    padding-bottom: calc(20%);
    padding-top: calc(20%);
    max-height: 100%;
}

#share {
    max-width: none
}

.Share .Button {
    border-radius: .4rem;
    display: inline-block;
    line-height: 2.4;
    height: 2.2rem;
    margin: 0 .4rem;
    text-align: center;
    width: 5rem
}

.Share .Icon {
    fill: var(--color-initial);
    height: 1.5rem
}

.Share__list {
    margin-top: 2rem
}

.Share__item {
    display: inline
}

.Share__item:first-child .Button {
    margin-left: 0
}

.Share__item:last-child .Button {
    margin-right: 0
}

@media(min-width: 60rem) {
    .Share .Button {
        margin:0 1rem
    }

    .Share__item--whatsapp {
        display: none
    }
}

.Sitemap {
    padding: 3rem 3rem 0
}

.Sitemap .Link {
    display: inline-block;
    padding: 0 1rem
}

@media(min-width: 60rem) {
    .Sitemap {
        padding:0;
        text-align: left
    }

    .Sitemap .Link {
        margin-right: 1.2rem;
        padding: 0
    }
}

.Social .Icon {
    height: 2rem
}

.Social .Link {
    padding: 1rem
}

@media(min-width: 60rem) {
    .Social {
        float:right
    }

    .Social .Link {
        display: inline-block;
        margin-left: 1.2rem;
        padding: 0
    }
}

.Subscribe {
    text-align: left
}

.Subscribe label {
    padding: 0;
    margin: 0
}

.Subscribe .column.column-40 {
    max-width: 100%
}

.Subscribe__form {
    padding-top: 2rem
}

.Subscribe__form .Button {
    height: 5rem;
    margin: 0 auto;
    width: 13rem
}

@media(min-width: 60rem) {
    .Subscribe .column-40 {
        max-width:auto;
        width: -webkit-calc(100% - 2rem);
        width: -moz-calc(100% - 2rem);
        width: calc(100% - 2rem)
    }

    .Subscribe__form {
        margin-left: -2rem;
        padding: 0
    }

    .Subscribe__form .Button {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .Subscribe__form .Field {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        width: 100%
    }

    .Subscribe__form .Field__text {
        margin: 0
    }
}

.Tab {
    text-align: left
}

.Tab__head {
    border-bottom: .1rem solid var(--color-primary);
    overflow-x: scroll;
    margin: 0;
    max-width: 100%;
    white-space: nowrap
}

.Tab__head>* {
    margin: 0
}

.Tab__link {
    cursor: pointer;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: var(--font-black);
    margin: 0;
    padding: 1rem 2rem
}

.Tab__link:hover {
    color: var(--color-tertiary)
}

.Tab__link.Tab--active {
    border-bottom: .5rem solid var(--color-primary)
}

.Tab__link.Tab--active:hover {
    color: var(--color-primary)
}

.Tab__body {
    text-align: left!important;
    font-size: 1.5rem;
    line-height: 1.7
}

.Tab__content {
    display: none
}

.Tab__content.Tab--active {
    display: block
}

.Usage .Usage__button {
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    transform: translateY(-1rem)
}

.Usage .column.column-67 {
    max-width: 100%
}

.Usage .Field__textarea {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    min-height: 17.5rem;
    overflow: scroll;
    padding: 2.5rem 2rem;
    resize: none;
    white-space: nowrap
}

.Usage__preview form :last-child {
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    transform: translateY(-1rem)
}

@media(min-width: 60rem) {
    .Usage {
        text-align:left
    }
}

.Verification {
    text-align: center
}

.Verification__recaptcha {
    margin: 0 auto;
    width: 30.4rem
}

.Custom {
    display: -moz-box;
    display: flex;
    -moz-box-pack: center;
    justify-content: center
}

.Custom :last-child {
    margin-bottom: 0
}

.Custom .Icon {
    display: block;
    height: 3.4rem;
    margin: 0 auto 1.5rem
}

.Custom__hero {
    align-self: auto;
    display: block;
    max-width: 60rem;
    position: absolute;
    padding: 0 4rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

.Custom__footer {
    bottom: 0;
    font-size: 1.2rem;
    left: 0;
    padding: 1.5rem 0;
    position: fixed;
    right: 0
}

:root {
    --border-radius: .3rem;
    --color-initial: #fff;
    --color-primary: #606c76;
    --color-secondary: #f8f8f8;
    --color-tertiary: #e8e8e8;
    --color-quaternary: #dedede;
    --color-shadow: rgba(--color-primary,.15);
    --color-blue: #86addb;
    --font-thin: 300;
    --font-regular: 400;
    --font-bold: 500;
    --font-bolder: 600;
    --font-black: 700;
    --font-primary: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-secondary: "Lucida Console",Monaco,monospace;
    --margin-bottom: 1.0rem
}

body {
    background: var(--color-initial);
    color: var(--color-primary);
    fill: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: var(--font-regular);
    line-height: 1.8;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    text-align: center
}

:last-child {
    margin-bottom: 0
}

:focus {
    outline: 0
}

code {
    background: var(--color-secondary);
    font-size: 100%
}

pre {
    border: 0;
    margin-bottom: var(--margin-bottom);
    overflow-y: hidden
}

pre,pre code {
    border-radius: var(--border-radius)
}

pre code {
    background: var(--color-secondary);
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: var(--font-black);
    margin: 0;
    padding: 2.5rem 2rem
}

h1,h2,h3,h4,h5,h6,strong {
    font-weight: var(--font-bold)
}

p {
    margin-bottom: var(--margin-bottom)
}


.share-dialog .share-icon{
    fill: #fff;
    height: 4rem;
    margin: 2rem;
}

.mail{
    margin: 2rem;
}
ul{
    float: left;
    list-style: none;
}
li{
    text-align: left;
}
a{
    color: #fff;
}