/* General styles
--------------------------------------------------------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);

:root {
    --alert: rgba(255, 230, 0, 0.25);
    --dark: rgba(22, 0, 34, 1.00);
    --dark-5: rgba(22, 0, 34, .05);
    --dark-10: rgba(8, 5, 10, 0.1);
    --dark-60: rgba(22, 0, 34, .60);
    --dark-90: rgba(22, 0, 34, .90);
    --light: #fff;
    --light-10: rgba(255, 255, 255, 0.1);
    --light-20: rgba(255, 255, 255, 0.2);
    --light-70: rgba(255, 255, 255, 0.7);
    --light-90: rgba(255, 255, 255, 0.9);
    --success-background: rgba(0, 186, 7, 0.15);
    --success-foreground: rgba(49, 123, 52, 1);
    --error-background: rgba(253, 20, 20, 0.15);
    --error-foreground: rgba(183, 58, 58, 1);
}

* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    color: var(--dark);
    font-family: Poppins, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 160%;
    margin: 0;
    outline: 0;
    padding: 0;
    text-decoration: none;
    touch-action: manipulation;
}

body {
    background-color: var(--light);
}

main {
    padding: 5rem 0;
    position: relative;
}

.cover {
    background-color: var(--light);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 5;
    pointer-events: none;
    bottom: 0;
}

.wrapper-narrow,
.wrapper-wide {
    clear: both;
    margin: auto;
    padding: 0 1.5rem;
    width: 100%;
}

.wrapper-wide {
    max-width: 80rem;
}

.wrapper-narrow {
    max-width: 48rem;
}

/* Text
------------------------------------------/*/
p {
    color: var(--dark-90);
    margin-top: 1em;
}

b {
    font-weight: 600;
}

.center {
    text-align: center;
}

.big,
.big b {
    font-size: 1.3rem;
    letter-spacing: .01em;
    line-height: 150%;
    margin-bottom: 1em;
}

h2,
h3,
h4,
h5 {
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 110%;
    margin: 1.5em 0 .5em;
}

h1 {
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -.007em;
    line-height: 105%;
    margin: 1.5em 0 1em;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.5rem;
}

#faq {
    margin-bottom: 1.5em;
}

ol,
ul {
    margin: 1em 0 1em 1em;
}

li {
    color: var(--dark-90);
    margin-bottom: .5em;
}

.alert {
    background-color: var(--alert);
    border-radius: 1em;
    margin-top: 2em;
    padding: .2em 1.5em 1em;
}

.error {
    color: var(--error-foreground);
    background-color: var(--error-background);
    border-radius: 2em;
    margin-top: 1em;
    padding: 1em 2em 1em 2em;
}

.success {
    color: var(--success-foreground);
    background-color: var(--success-background);
    border-radius: 2em;
    margin-top: 1em;
    padding: 1em 2em 1em 2em;
}

::selection {
    background: #00f9ec71;
}

.kb {
    background-color: var(--dark-5);
    border: 1px solid var(--dark-5);
    border-bottom: 1px solid var(--dark-10);
    border-radius: .4em;
    display: inline-block;
    font-weight: 600;
    min-width: 2.1em;
    padding: .1em 0;
    text-align: center;
    box-shadow: 0 1px 1px var(--dark-5);
}

/* Media
------------------------------------------/*/
figure {
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
}

img,
video {
    width: 100%;
    border-radius: 1em;
}

figcaption {
    font-size: .8rem;
    opacity: .6;
    padding: .5em;
}

figcaption b {
    font-size: .8rem;
    font-weight: 600;
}

/* Header & Navigation
------------------------------------------/*/
header {
    background-color: var(--light);
    position: fixed;
    width: 100%;
    z-index: 100;
    padding: .8em 0;
    transition: all .3s .15s;
    background-color: var(--light);
}

#logo {
    background: url(../img/main/sip-logo.png) no-repeat center center;
    background-size: 36px;
    border: none;
    color: transparent;
    display: inline-block;
    height: 42px;
    left: 0;
    position: absolute;
    width: 42px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: unset !important;
}

header ul {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.menu {
    clear: both;
    max-height: 0;
    overflow: hidden;
    transition: max-height .15s ease-out;
}

.menu-btn {
    display: none;
}

.menu-btn:checked~.menu {
    max-height: 300em;
}

.menu-btn:checked~.menu-icon .navicon:after {
    top: 0;
    transform: rotate(135deg);
}

.menu-btn:checked~.menu-icon .navicon:before {
    top: 0;
    transform: rotate(-135deg);
}

.menu-icon {
    cursor: pointer;
    float: right;
    padding: 20px 15px;
    position: relative;
    user-select: none;
}

.menu-icon .navicon {
    background-color: transparent;
    border-radius: 10px;
    display: block;
    height: 2px;
    position: relative;
    right: 11px;
    text-align: center;
    width: 24px;
}

.menu-icon .navicon:after {
    top: -5px;
}

.menu-icon .navicon:before {
    top: 5px;
}

.navicon:after {
    background-color: var(--dark);
    border-radius: 1px;
    content: "";
    height: 100%;
    position: absolute;
    transition: all .15s ease-out;
    width: 100%;
}

.navicon:before {
    background-color: var(--dark);
    border-radius: 1px;
    content: "";
    height: 100%;
    position: absolute;
    transition: all .15s ease-out;
    width: 100%;
}

header nav {
    position: relative;
}

header ul {
    list-style-type: none;
    text-align: center;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

header li {
    margin: 0;
    padding: 0;
}

header li a {
    display: inline-block;
    padding: .5em 1em;
    border-bottom: none;
    font-weight: 500;
    text-decoration: none;
}

header li a:hover {
    color: var(--dark);
    opacity: .5;
}

/* Footer
------------------------------------------/*/
footer {
    padding: 2.5rem 0;
    box-shadow: 0 -1px 0 0 var(--dark-5);
}

footer ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 2em;
    padding: 0;
}

footer li {
    list-style-type: none;
    margin-bottom: 0;
    padding: 0;
    width: 50%;
}

footer a {
    border-bottom: none;
    display: inline-block;
    font-size: .9em;
    font-weight: 400;
    padding: .2em 1em .2em 0;
    text-decoration: none;
}

footer a:hover {
    border-bottom: none;
    display: inline-block;
    font-size: .9em;
    font-weight: 400;
    padding: .2em 1em .2em 0;
    color: var(--dark-60);
}

#secondary-footer {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
}

#secondary-footer p {
    background: url(../img/main/sip-logo.png) no-repeat top left;
    background-size: 16px;
    font-size: .8rem;
    margin: 0;
    padding: 1.9em 0 0;
}

#footer-social {
    display: flex;
    flex-direction: row;
}

#footer-social a {
    background: (32px);
    border: 1px solid var(--dark-10);
    border-radius: 3rem;
    font-size: 0;
    height: 44px;
    opacity: .6;
    width: 44px;
}

#footer-social a:hover {
    opacity: 1;
}

#footer-twitter {
    background: url(../img/main/twitter-black.svg) no-repeat center;
    background-size: 32px;
}

#footer-mastodon {
    background: url(../img/main/mastodon-black.svg) no-repeat center;
    background-size: 32px;
    margin-left: .5rem;
}

/* CTAs & Inputs
------------------------------------------/*/
a {
    color: var(--dark);
    font-weight: 500;
    text-decoration: underline;
}

a:hover {
    color: var(--dark);
}

.blank {
    background: url(../img/main/blank-arrow.svg) no-repeat right center;
}

.blank:hover {
    background: url(../img/main/blank-arrow.svg) no-repeat right center;
}

.cta {
    background: url(../img/main/arrow-right-transparent.svg) no-repeat right 1em center;
    border: 2px solid var(--dark);
    border-radius: 100rem;
    color: var(--dark);
    display: inline-block;
    font-weight: 500;
    opacity: 1;
    padding: .4em 2em;
    text-align: center;
    transition: all .15s;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
}

@media (hover: hover) {
    .cta:hover {
        background: url(../img/main/arrow-right-black.svg) no-repeat right .9em center;
        border: 2px solid var(--dark);
        color: var(--dark);
        opacity: 1;
        padding: .4em 2.3em .4em 1.7em;
    }
}

.primary {
    background: url(../img/main/arrow-down-transparent.svg) no-repeat right 1em center, var(--dark);
    border: none;
    color: var(--light);
    padding: .5em 2em;
}

.primary-2 {
    background: url(../img/main/arrow-right-transparent.svg) no-repeat right 1em center, var(--dark);
    border: none;
    color: var(--light);
    padding: .5em 2em;
}

@media (hover: hover) {
    .primary:hover {
        background: url(../img/main/arrow-down-white.svg) no-repeat right .9em center, var(--dark);
        border: none;
        color: var(--light);
        padding: .5em 2.3em .5em 1.7em;
    }

    .primary-2:hover {
        background: url(../img/main/arrow-right-white.svg) no-repeat right .9em center, var(--dark);
        border: none;
        color: var(--light);
        padding: .5em 2.3em .5em 1.7em;
    }
}

.primary-light {
    background: var(--light);
    color: var(--dark);
    padding: .8em;
    border: none;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

@media (hover: hover) {
    .primary-light:hover {
        background: var(--light-90);
        padding: .8em;
        border: none;
    }
}

.download {
    background: url(../img/main/arrow-down-transparent.svg) no-repeat right 1em center;
}

@media (hover: hover) {
    .download:hover {
        background: url(../img/main/arrow-down-black.svg) no-repeat right 1em center;
    }
}

.large {
    background: url(../img/main/arrow-down-transparent.svg) no-repeat right 1.3em center, var(--dark);
    background-size: 20px;
    font-size: 1.2rem;
    padding: .8em 2.5em;
}

@media (hover: hover) {
    .large:hover {
        background: url(../img/main/arrow-down-white.svg) no-repeat right 1.2em center, var(--dark);
        background-size: 20px;
        padding: .8em 2.9em .8em 2.1em;
    }
}

.full-width {
    display: block;
}

form {
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0 0;
}

input {
    background: var(--dark-5);
    border: 1px solid var(--dark-5);
    border-radius: 4em;
    padding: .7em 1.5em;
    transition: .15s;
    width: 100%;
    font: 2rem;
    font-size: 1em;
}

input:hover {
    background: var(--dark-5);
    border: 1px solid var(--dark-10);
}

input:focus {
    background: var(--light);
}

/* FAQs
------------------------------------------/*/
.question {
    border-bottom: 1px solid var(--dark-5);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.question:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.question p:first-child {
    color: var(--dark);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 130%;
}

/* About
------------------------------------------/*/
.team {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid var(--dark-5);
    margin-top: 5rem;
}

.team-member {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

.team-member ul {
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: center;
    list-style: none;
    margin: 1em;
}

.team-member li {
    margin: 0;
    padding: 0;
    color: transparent;
}

.team-member li a {
    border-radius: 100px;
    display: block;
    height: 50px;
    margin: 0;
    width: 50px;
    border: none;
    font-size: 0;
}

.team-member li a:hover {
    background-color: var(--dark);
}

.dribbble {
    background: url(../img/main/dribbble.svg) no-repeat center;
    background-size: 50px;
    background-color: #ea4c89;
}

.github {
    background: url(../img/main/github.svg) no-repeat center;
    background-size: 50px;
    background-color: grey;
}

.linkedin {
    background: url(../img/main/linkedin.svg) no-repeat center;
    background-size: 50px;
    background-color: #0d66c2;
}

.stackoverflow {
    background: url(../img/main/stackoverflow.svg) no-repeat center;
    background-size: 50px;
    background-color: #f2740e;
}

.twitter {
    background: url(../img/main/twitter.svg) no-repeat center;
    background-size: 50px;
    background-color: #1d9dea;
}

/* Downloading
------------------------------------------/*/
#downloading {
    text-align: center;
    padding: 15vh 0;
}

#downloading h1 {
    margin: 1.5em 0 0;
    background: url(../img/main/sip-icon.png) no-repeat top center;
    background-size: 128px;
    padding: 4.5em 0 0;
    font-size: 2rem;
}

/* Updates
------------------------------------------/*/
.update {
    border-bottom: 1px solid var(--dark-5);
    margin-bottom: 4rem;
    padding: 0 0 3rem;
}

.update:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.update aside {
    padding: 2rem;
    border-radius: 3rem;
    box-shadow: 0 0 0 0px var(--light), 0 0 0 0 var(--dark-5), 0 0 0 1px var(--dark-10);
    transition: box-shadow .15s;
}

.update aside:hover {
    box-shadow: 0 0 0 1px var(--light), 0 0 0 2px var(--dark-5), 0 0 30px var(--dark-5);
}

.update aside h2 {
    margin: 0;
}

.update aside ul {
    list-style: none;
    margin: 1em 0;
}

.update aside li {
    font-size: .9rem;
    margin: 0;
    padding: .2em 0;
}

.update article ul {
    margin-left: .5em;
}

.update article li {
    background: url(../img/main/bullet.svg) no-repeat left top .55em;
    background-size: 8px;
    list-style: none;
    margin-bottom: .5em;
    padding-left: 1.2em;
}

/* Home
------------------------------------------/*/
.home section {
    padding: 10vh 0;
}

#hero-section {
    text-align: center;
    background-color: var(--light);
    z-index: 10;
    position: relative;

}

#hero-section h1 {
    margin: 0 0 .4em;
}

h1 div {
    font-weight: inherit;
    line-height: inherit;
    display: inline-block;
    letter-spacing: inherit;
}

#hero-section .big {
    margin: 0 auto 2.5em;
}

.features-section .wrapper-wide {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.light * {
    color: var(--light);
}

#credit-card {
    border-radius: 5em;
    color: #29af00;
    display: block;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 1em;
    mix-blend-mode: multiply;
}

.feature-content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    max-width: 30rem;
}

.feature-content h2 {
    margin: 0;
    padding-top: 3em;
}

.feature-content p {
    margin: 0;
    padding: 0;
}

.feature-cta {
    margin-top: 1.5rem;
    font-size: .9rem;
}

.light .feature-cta {
    background: url(../img/main/arrow-right-transparent.svg) no-repeat right 1em center;
    border: 2px solid var(--light);
    color: var(--light);
}

.light .feature-cta:hover {
    background: url(../img/main/arrow-right-white.svg) no-repeat right .9em center;
    border: 2px solid var(--light);
    color: var(--light);
}

/* UI Slideshow
------------------------------------------/*/
#ui-slideshow {
    margin: 0;
    padding: 0;
}

.ui-slideshow {
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}

#ui-slideshow-bg {
    background: #13001f;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -40;
}

.ui-slides {
    display: flex;
    flex-direction: column;
}

.ui-slideshow figure {
    height: 65vw;
    margin: 0;
    max-height: 645px;
    position: relative;
    flex-direction: row;
}

.ui-slideshow img {
    border-radius: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    width: auto;
}

.ui-blur,
#main-window-ui,
#menu-bar-ui {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 1.3vw;
    box-shadow: 0 8px 40px #0f001a79, 0 0 0 1px #0f001a10, inset 0 .5px .5px white;
}

#double-size {
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
    border-radius: 2vw;
    box-shadow: 0 16px 80px #0f001a79, 0 0 0 2px #0f001a10, inset 0 1px 1px white;
    margin: 3rem auto -2rem;
}

#menu-bar-ui {
    position: absolute;
    top: -.9rem;
    right: 1rem;
}

#color-dock-ui {
    max-height: 245px;
    max-width: 245px;
    position: absolute;
    right: -1rem;
    bottom: -2rem;
}

.text {
    margin: 0 0 .5rem;
    padding: 0 1rem;
}

.text * {
    color: white;
    text-align: left;
}

.text h2 {
    margin-top: 2rem;
}

.text p {
    font-size: .8em;
}

#ui-pagination {
    padding: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5rem;
    height: 40px;
    width: 172px;
    margin: 1rem;
    display: flex;
    justify-content: space-between;
    mix-blend-mode: screen;
}

.ui-dot {
    border-radius: 5rem;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    width: 56px;
    margin: 0;
    padding: 0;
    transition: all .15s;
}

.first-dot {
    background: url(../img/home/slideshow-pagination/menu-bar-light.svg) no-repeat center;
}

.second-dot {
    background: url(../img/home/slideshow-pagination/window-app-light.svg) no-repeat center;
}

.last-dot {
    background: url(../img/home/slideshow-pagination/color-dock-light.svg) no-repeat center;
}

@media (hover: hover) {
    .ui-dot:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.first-dot.active {
    background-color: var(--light);
    background-image: url(../img/home/slideshow-pagination/menu-bar-dark.svg);
}

.second-dot.active {
    background-color: var(--light);
    background-image: url(../img/home/slideshow-pagination/window-app-dark.svg);
}

.last-dot.active {
    background-color: var(--light);
    background-image: url(../img/home/slideshow-pagination/color-dock-dark.svg);
}

/* Clients
------------------------------------------/*/
#clients-section {
    text-align: center;
}

#clients-section ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: space-between;
    list-style-type: none;
    margin: 2rem 0 0;
}

#clients-section li {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: var(--light-20);
    background-size: 40px;
    border-radius: 1rem;
    color: transparent;
    width: calc((25%) - 1px);
    margin: 0;
    min-height: 80px;
}

#google {
    background: url(../img/clients/google.svg) no-repeat center;
}

#disney {
    background: url(../img/clients/disney.svg) no-repeat center;
}

#adobe {
    background: url(../img/clients/adobe.svg) no-repeat center;
}

#netflix {
    background: url(../img/clients/netflix.svg) no-repeat center;
}

#dropbox {
    background: url(../img/clients/dropbox.svg) no-repeat center;
}

#apple {
    background: url(../img/clients/apple.svg) no-repeat center;
}

#meta {
    background: url(../img/clients/meta.svg) no-repeat center;
}

#airbnb {
    background: url(../img/clients/airbnb.svg) no-repeat center;
}

#ibm {
    background: url(../img/clients/ibm.svg) no-repeat center;
}

#twitter {
    background: url(../img/clients/twitter.svg) no-repeat center;
}

#amazon {
    background: url(../img/clients/amazon.svg) no-repeat center;
}

#pinterest {
    background: url(../img/clients/pinterest.svg) no-repeat center;
}

/* Picker
------------------------------------------/*/
#picker-section {
    position: relative;
    overflow: hidden;
}

#picker-section-bg-2 {
    width: 100%;
    height: 100%;
    background: rgba(43, 0, 63, 1.00);
    position: absolute;
    z-index: -200;
    top: 0;
    left: 0;
}

#picker-animation {
    width: 100%;
    max-width: 420px;
    height: auto;
}

#picker-section h2 {
    background: url(../img/home/picker-icon.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 48px;
}

@-moz-document url-prefix() {
    #picker-section-bg {
        background: rgba(37, 0, 54, 1.00);
    }
}

/* Editor Slideshow
------------------------------------------/*/
#editor-section {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

#editor-section .feature-content {
    width: 100%;
    max-width: 100%;
    align-items: center;
}

#editor-section .feature-content h2 {
    padding-top: .5em;
}

#editor-section figure {
    height: 65vw;
    max-height: 645px;
    position: relative;
    margin: 2rem auto;
}

#editor-section img {
    height: 100%;
    width: auto;
    padding: 0;
}

#editor-details {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#editor-details p {
    background: url(../img/features/palettes.svg) no-repeat left top 5px;
    background-size: 24px;
    text-align: left;
    font-size: .9rem;
    padding-left: 40px;
}

#editor-details p:first-child {
    background: url(../img/features/editor.svg) no-repeat left top 5px;
    background-size: 24px;
}

#editor-details p:last-child {
    background: url(../img/features/collaboration.svg) no-repeat left top 5px;
    background-size: 24px;
}

#editor-pagination {
    padding: 0;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5rem;
    height: 40px;
    width: 114px;
    display: flex;
    justify-content: space-between;
    margin: 2rem auto 0;
    mix-blend-mode: multiply;
}

.editor-dot {
    border-radius: 5rem;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    margin: 0;
    padding: 0;
    transition: all .1s;
    width: 56px;
}

@media (hover: hover) {
    .editor-dot:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.first-dot-2 {
    background: url(../img/home/slideshow-pagination/menu-bar-dark.svg) no-repeat center;
}

.second-dot-2 {
    background: url(../img/home/slideshow-pagination/window-app-dark.svg) no-repeat center;
}

.first-dot-2.active {
    background: url(../img/home/slideshow-pagination/menu-bar-light.svg) no-repeat center;
    background-color: var(--dark);
}

.second-dot-2.active {
    background: url(../img/home/slideshow-pagination/window-app-light.svg) no-repeat center;
    background-color: var(--dark);
}

/* Custom Formats
-----------------------------------------------------/*/
#custom-formats-section {
    position: relative;
    overflow: hidden;
}

#custom-formats-section h2 {
    background: url(../img/home/custom-formats-icon.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 48px;
}

#custom-formats-section-bg {
    width: 100%;
    height: 100%;
    background: #6c0094;
    position: absolute;
    z-index: -40;
    top: 0;
    left: 0;
}

/* Contrast Checker
------------------------------------------/*/
#contrast-checker-section figure {
    max-width: 443px;
}

#contrast-checker-section .wrapper-wide {
    justify-content: space-between;
}

#contrast-checker-section h2 {
    background: url(../img/home/contrast-checker-icon.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 48px;
}

/* Smart formats
------------------------------------------/*/
#smart-formats-section-bg {
    background: #09002b;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -40;
}

#smart-formats-section {
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
}

#smart-formats-section figure {
    position: relative;
}

#smart-formats-animation {
    position: absolute;
    top: 3rem;
    left: 0;
    z-index: 10;
}

#smart-formats-section .feature-content {
    max-width: 47rem;
    text-align: center;
    width: 100%;
}

#smart-formats-section a {
    margin: 1.5rem auto 0;
}

#smart-formats-section h2 {
    background: url(../img/home/smart-formats.icon.svg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 48px;
    min-width: 100%;
}

/* New in 3.0
------------------------------------------/*/
#new-in-3-section {
    position: relative;
    overflow: hidden;
    flex-direction: column;
}

#new-in-3-section .feature-content {
    width: 100%;
    max-width: 47rem;
    text-align: center;
}

#new-in-3-section h2 {
    min-width: 100%;
    padding: 0;
}

.item1 {
    grid-area: window;
}

.item1 h3 {
    background: url(../img/features/window-app.svg) no-repeat center top;
}

.item2 {
    grid-area: palettes;
}

.item2 h3 {
    background: url(../img/features/palettes.svg) no-repeat center top;
}

.item3 {
    grid-area: picker;
}

.item3 h3 {
    background: url(../img/features/picker.svg) no-repeat center top;
}

.item4 {
    grid-area: new;
    mix-blend-mode: multiply;
}

.item5 {
    grid-area: descriptions;
}

.item5 h3 {
    background: url(../img/features/descriptions.svg) no-repeat center top;
}

.item6 {
    grid-area: shortcuts;
}

.item6 h3 {
    background: url(../img/features/shortcuts.svg) no-repeat center top;
}

.item7 {
    grid-area: collaboration;
}

.item7 h3 {
    background: url(../img/features/collaboration.svg) no-repeat center top;
}

#highlights {
    margin: 3rem auto 0;
    padding: 0;
    list-style: none;
    text-align: center;
    display: grid;
    column-gap: 1px;
    row-gap: 1px;
    grid-template-areas: 'window palettes' 'picker descriptions' 'shortcuts collaboration';
    grid-template-columns: 50% 50%;
    width: 100%;
}

#highlights li {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: #f1f1f18c;
    border-radius: 2rem;
    justify-self: stretch;
    margin: 0;
    padding: 3.5vh 1em;
}

#highlights h3 {
    background-size: 34px;
    font-size: 1.2rem;
    margin: 0;
    padding-top: 2.5em;
}

#highlights p {
    font-size: .8rem;
    margin-top: .5em;
    line-height: 140%;
}

.item4 {
    display: none;
}

/* Buy Section
------------------------------------------/*/
#buy-section {
    margin: 0;
    padding: 0;
    text-align: center;
}

#buy-section-bg {
    background: var(--dark);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -400;
}

#trigger {
    height: 1px;
    margin: 0;
    padding: 0;
    transform: translateY(-5rem);
    width: 1px;
}

.buy-section {
    align-items: center;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5em;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    padding: 3rem 0 4rem;
    position: relative;
}

.buy-section h2 {
    background: url(../img/main/sip-icon.png) no-repeat top center;
    background-size: 128px;
    margin: 0;
    padding-top: 5em;
}

.buy-section p {
    margin: 0;
    padding: 0;
}

#buy-buttons {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 2rem;
    max-width: 17rem;
    width: 100%;
}

#buy-buttons .cta {
    background: #4df3ff;
    color: var(--dark);
    padding: .8em;
    font-size: 1.2em;
}

#buy-buttons .cta:hover {
    background: var(--light);
}

#setapp {
    background: url(../img/main/setapp.svg) no-repeat center left 1.5em;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 100em;
    padding: calc(1em - 2px);
    padding-left: 2.5em;
    text-decoration: none;
    transition: all .15s;
}

#setapp:hover {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var (var(--light))
}

/* Color Wheel
------------------------------------------/*/
#bg-position {
    mix-blend-mode: hard-light;
    position: sticky;
    z-index: -20;
    bottom: 5rem;
    background-color: red;
    height: 0;
}

#color-wheel-wrapper {
    height: 128px;
    width: 128px;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    transform: translatey(3rem);
    transition: all .8s cubic-bezier(.46, .03, .24, 1);
    width: 100%;
}

#color-wheel {
    background: conic-gradient(from 45deg at 50% 50%,
            #00F0FF 0deg,
            #c300ff00 90deg,
            rgb(255, 0, 0) 170deg,
            rgb(255, 145, 0) 230deg,
            #a200ff 360deg);
    border-radius: 100%;
    height: 100vw;
    width: 100vw;
    transition: all .8s cubic-bezier(.46, .03, .24, 1);
    z-index: -30;
    position: absolute;
}

#bg-position-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
    overflow: hidden;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: hard-light;
}

#color-wheel-2 {
    background: conic-gradient(from 45deg at 45% 60%,
            #00eeff 0deg,
            #c300ff 160deg,
            rgba(0, 0, 0, 0) 300deg);
    height: 140%;
    width: 110%;
    transition: all .8s cubic-bezier(.46, .03, .24, 1);
    z-index: -30;
    position: absolute;
}

/* Pricing
--------------------------------------------------------------------------------/*/



#pricing section:first-child {
    padding: 0 0 3vh;
    position: relative;
    z-index: 10;
}

#pricing section {
    padding: 3vh 0;
}

#pricing h1 {
    text-align: center;
}

.all-packs {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pack {
    display: block;
    width: 100%;
    max-width: 25rem;
    padding: 2rem;
    background-color: var(--dark-5);
    min-width: 17em;
    border-radius: 3.5rem;
    transition: all .8s cubic-bezier(.46, .03, .24, 1);
}

.pack h2 {
    font-size: 3rem;
    margin: .6em 0 0;
    padding: 0;
    line-height: 50%;
}

.pack h2 span {
    font-size: 1rem;
}

.pack ul {
    list-style: none;
    margin: 2rem 0 2.5rem;
}

.pack li {
    background: url(../img/main/check-black.svg) no-repeat left top .25rem;
    margin-bottom: .7rem;
    padding-left: 1.8rem;
}

.pack p {
    margin: .5em 0 0;
}

.pack p span {
    opacity: 1;
    /*opacity: .5;*/
}

.pack p:first-child {
    margin: 0;
    display: inline;
    border-radius: 2em;
    padding: .3em 1em .4em;
    font-size: .8rem;
    color: var(--dark);
    background-color: var(--dark-10);
    font-weight: 500;
}

.buy {
    color: var(--light);
    transition: box-shadow 4s ease-in-out;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    min-width: 18rem;
    position: relative;
    overflow: hidden;
}

.buy h2,
.buy p,
.buy span,
.buy li,
.buy b {
    color: var(--light);
}

.buy li {
    background: url(../img/main/check-white.svg) no-repeat left top .25rem;
}

.buy input {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: var(--light-20);
    border: none;
    color: var(--light);
}

.buy input:hover {
    box-shadow: inset 0 0 2px var(--light);
}

.buy input:focus {
    background-color: var(--dark-10);
    box-shadow: inset 0 0 2px var(--light);
}

.buy input::placeholder {
    color: var(--light);
}

/*Stepper ------------------------------------------------------------------------------------------------*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield !important;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-moz-inner-spin-button,
input[type='number']::-moz-outer-spin-button {
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

.number-input {
    position: relative;
    padding: 0 4em;
    display: block;
}

.pack input {
    font-size: 1.5rem;
    padding: .3rem;
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
}

.number-input button {
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    height: 3rem;
    width: 3rem;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background-color: transparent;
    transition: all .2s ease-out;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: inset 0 0 0 2px var(--light-70);
}

@media (hover: hover) {
    .number-input button:hover {
        background-color: var(--light-10);
        box-shadow: inset 0 0 0 30px var(--light-20);
    }
}

.number-input button:active {
    background-color: var(--light-10);
    transform: scale(.9);
}

.number-input button:first-child {
    left: 0;
    top: 0;
}

.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input button:before,
.number-input button:after {
    background-color: var(--light);
    border-radius: 1px;
    content: '';
    display: inline-block;
    height: 2px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1rem;
}

/* testimonials
-----------------------------------------------------/*/
.all-tweets {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin: 5vh auto 0;
}

.all-tweets a {
    max-width: 25em;
    text-decoration: none;
}

.tweet:before {
    content: "\201C";
    font-size: 4em;
    left: 50%;
    margin-right: .5em;
    opacity: .2;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
}

.tweet {
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: center;
    padding: .4em 0 0;
    position: relative;
}

.tweet p {
    text-align: center;
}

.bottom {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}

author {
    font-weight: 600;
    line-height: 130%;
    margin: 0;
    padding: .1em 0 0;
}

author span {
    font-size: .8em;
    opacity: .5;
}

.pic {
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    position: relative;
}

.pic-bg {
    width: 3rem;
    height: 3rem;
    background: conic-gradient(from 45deg,
            #23b8a4 0deg,
            #f15f25 160deg,
            rgba(0, 0, 0, 0) 300deg);
    mix-blend-mode: hard-light;
    border-radius: 50%;
    transform: scale(1.5);
    z-index: -10;
    position: absolute;
}

#una {
    background: url(https://pbs.twimg.com/profile_images/1587634978308997121/u7009cGe_400x400.jpg) no-repeat center;
    background-size: 3.1rem;
}

#sara-soueidan {
    background: url(https://pbs.twimg.com/profile_images/1591035025406976006/rP-X_rNl_400x400.jpg) no-repeat center;
    background-size: 3.1rem;
}

#addy-osmani {
    background: url(https://pbs.twimg.com/profile_images/1658922603367788544/h0aqRgmr_400x400.jpg) no-repeat center;
    background-size: 3.1rem;
}

/* Reasons to buy
-----------------------------------------------------/*/
.reasons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    margin: 5vh auto 0;
    max-width: 58rem;
    padding: 0;
    text-align: center;
}

.reasons li {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: var(--dark-5);
    background-position: center top 2em;
    background-repeat: no-repeat;
    border-radius: 2rem;
    font-size: .9em;
    list-style: none;
    margin: 0;
    padding: 4.5rem 1em 2em;
    width: calc(50% - 1px);
}

.picker {
    background-image: url(../img/features/picker.svg);
}

.editor {
    background-image: url(../img/features/editor.svg);
}

.palettes {
    background-image: url(../img/features/palettes.svg);
}

.collaboration {
    background-image: url(../img/features/collaboration.svg);
}

.shortcuts {
    background-image: url(../img/features/shortcuts.svg);
}

.descriptions {
    background-image: url(../img/features/descriptions.svg);
}

.custom-formats {
    background-image: url(../img/features/custom-formats.svg);
}

.smart-formats {
    background-image: url(../img/features/smart-formats.svg);
}

.contrast {
    background-image: url(../img/features/contrast.svg);
}

.color-dock {
    background-image: url(../img/features/color-dock.svg);
}

.menu-bar {
    background-image: url(../img/features/menu-bar.svg);
}

.window-app {
    background-image: url(../img/features/window-app.svg);
}

/* RESPONSIVESS
/* < 600
--------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 600px) {
    #hero-section h1 {
        font-size: 9vw;
    }

    .reasons li {
        background-position: center top 2.5em;
        padding: 5rem 1em 2.5em;
        width: calc(33% - 1px);
    }
}

/* < 755px
--------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 755px) {
    main {
        padding: 5rem 0 8rem;
        position: relative;
    }

    .wrapper-narrow,
    .wrapper-wide {
        padding: 0 2.5rem;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 2.1rem;
    }

    .big,
    .big b {
        font-size: 1.5rem;
    }

    header ul {
        justify-content: center;
        flex-direction: row;
    }

    nav .cta {
        position: absolute;
        right: 0;
        top: 0;
    }

    header nav {
        padding-right: 20%;
    }

    header nav ul {
        height: 100%;
    }

    .menu {
        clear: none;
        max-height: none;
    }

    .menu-icon {
        display: none;
    }

    .team-member {
        flex-direction: row;
    }

    .team-member div {
        width: 50%;
    }

    form {
        flex-direction: row;
    }

    input[type="submit"] {
        width: 30%;
    }

    input {
        display: block;
        width: 70%;
    }

    .update {
        display: flex;
        flex-direction: row;
        gap: 5vw;
        align-items: flex-start;
    }

    .update aside {
        min-width: calc(15em + 7vw);
        position: sticky;
        top: 8.5rem
    }

    .update article {
        margin-top: -2em;
    }

    footer nav {
        display: flex;
        justify-content: space-between;
    }

    footer li {
        width: 33%;
    }

    #secondary-footer {
        flex-direction: column;
        justify-content: flex-start;
        gap: .5rem;
        width: 35%;
    }

    /* Downloading
------------------------------------------/*/
    #downloading h1 {
        background: url(../img/main/sip-icon.png) no-repeat top center;
        background-size: 256px;
        padding: 5em 0 0;
        font-size: 3.5rem;
    }

    /* Home
------------------------------------------/*/
    .feature-content h2 {
        font-size: 2.5em;
        padding: 2.5em 0 .5em;
    }

    /* UI Slideshow
------------------------------------------/*/
    .ui-slideshow {
        max-height: 700px;
        border-radius: 3rem;
    }

    .ui-slides {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .ui-slideshow figure {
        display: inline-block;
        max-width: 50%;
    }

    .text {
        width: 50%;
        margin-top: 2rem;
        padding: 0 5%;
    }

    .text h2 {
        margin: 0;
        padding: 0;
        font-size: 2.5rem;
    }

    .text p {
        font-size: 1.2em;
    }

    #main-window-section {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    #main-window-section figure {
        max-width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    #main-window-section figure img {
        width: 100%;
        max-width: 1122px;
        height: auto;
    }

    #main-window-section .text {
        display: flex;
        width: 100%;
        max-width: 100%;
        align-items: flex-end;
        margin-top: -1rem;
    }

    #main-window-section h2 {
        width: 50%;
        max-width: 27rem;
    }

    #main-window-section .text p {
        width: 50%;
        max-width: 30em;
        margin: 0;
    }

    #main-window-ui,
    #menu-bar-ui,
    #color-dock-ui {
        position: relative;
    }

    #menu-bar-ui {
        position: absolute;
        top: -7.4rem;
        right: 2rem;
    }

    #color-dock-ui {
        position: absolute;
        top: 8rem;
        right: -1rem;
    }

    #ui-pagination {
        order: -1;
        margin-left: 5%;
        margin-top: 3rem;
    }

    /* Clients
------------------------------------------/*/
    #clients-section li {
        width: calc((100%/6) - 1px);
        background-size: 48px;
    }

    /* Editor Slideshow
------------------------------------------/*/
    #editor-details {
        flex-direction: row;
        gap: 3.5vw;
    }

    #editor-details p {
        font-size: 1rem;
    }

    /* New in 3.0
------------------------------------------/*/
    #highlights {
        grid-template-areas: 'window window palettes' 'picker new descriptions' 'shortcuts collaboration collaboration';
        grid-template-columns: 33% 34% 33%;
        margin-top: 4rem;
        max-width: 57rem;
    }

    #highlights li {
        border-radius: 2.5rem;
        padding: 2rem;
    }

    .item4 {
        background-color: #160022 !important;
        color: var(--light) !important;
        display: inline;
    }

    .item4 * {
        color: var(--light);
        font-weight: 400;
    }

    .item4 h3 {
        background-image: none !important;
        line-height: 30%;
        padding-top: 2em !important;
        font-size: 1.2em !important;
    }

    .item4 span {
        font-size: 4rem;
        margin: 0;
        padding: 0;
        font-weight: 600;
        letter-spacing: -.05em;
    }

    #highlights h3 {
        background-size: 44px;
        font-size: 1.5rem;
        padding-top: 2.5em;
    }

    #highlights p {
        font-size: 1rem;
    }

    #new-in-3-section-bg {
        width: 70rem;
        height: 70rem;
        bottom: -40rem;
        position: fixed;
    }

    /* Buy Section
------------------------------------------/*/
    .buy-section {
        border-radius: 3rem;
    }

    .buy-section h2 {
        background-size: 256px;
        margin: 0;
        padding-top: 8em;
    }

    /* Color Wheel
------------------------------------------/*/
    #color-wheel-wrapper {
        height: 256px;
        width: 256px;
        transform: translatey(23rem);
    }

    /* Picker Section
------------------------------------------/*/
    #pricing section {
        padding: 3vh 0;
    }

    #picker-section-bg-1 {
        bottom: -1rem;
    }

    /* Pricing
------------------------------------------/*/
    .all-tweets {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 4%;
    }

    .all-tweets a {
        max-width: calc(33% - 4%);
    }

    .pack p,
    .pack li {
        font-size: 1rem;
    }

    /* Reasons to buy
-----------------------------------------------------/*/
    .reasons li {
        background-position: center top 3em;
        padding: 5.5rem 1em 3em;
        width: calc(25% - 1px);
        font-size: 1em;
    }

    #color-wheel-2 {
        transform: scale(1.2);
    }
}

/* < 950
--------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 950px) {
    header nav {
        padding-right: 0;
    }

    .update {
        gap: 8vw;
    }

    footer li {
        width: 25%;
    }

    #secondary-footer {
        flex-direction: row;
        justify-content: space-between;
        width: 20rem;
    }

    .ui-blur,
    #main-window-ui,
    #menu-bar-ui {
        border-radius: .6rem;
    }

    #double-size {
        border-radius: 1.2rem;
        margin: 5rem auto -2rem;
        width: 700px;
    }

    /* Home
------------------------------------------/*/
    #hero-section h1 {
        font-size: 5.5rem;
    }

    .features-section .wrapper-wide {
        flex-direction: row;
    }

    .feature-content {
        width: 50%;
    }

    /* Picker
------------------------------------------/*/
    #picker-section h2 {
        background: url(../img/home/picker-icon.svg);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 60px;
    }

    #picker-section .wrapper-wide {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }

    #picker-section-bg-1 {
        top: 50%;
        right: 0;
        transform: translate(-75vw, -50%);
    }

    /* Custom Formats
------------------------------------------/*/
    #custom-formats-section .feature-content {
        min-width: 24rem;
        margin-right: 5vw;
    }

    #custom-formats-section h2 {
        background: url(../img/home/custom-formats-icon.svg);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 60px;
    }

    #custom-formats-section img {
        width: 150%;
        max-width: 1052px;
    }

    #custom-formats-section-bg-2 {
        width: 100vw;
        height: 100vw;
        top: -50vw;
    }

    /* Contrast Checker
-----------------------------------------------------/*/
    #contrast-checker-section .feature-content {
        min-width: 24rem;
        margin-right: 5vw;
    }

    #contrast-checker-section h2 {
        background: url(../img/home/contrast-checker-icon.svg);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 60px;
    }

    /* Smart formats
-----------------------------------------------------/*/
    #smart-formats-section h2 {
        background: url(../img/home/smart-formats.icon.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 60px;
    }

    #smart-formats-animation {
        top: 5.1rem;
    }

    /* New in 3.0
-----------------------------------------------------/*/
    #highlights li {
        border-radius: 3rem;
        padding: 2.5rem 2rem;
    }

    /* Clients
------------------------------------------/*/
    #clients-section ul {
        margin-top: 3em;
    }

    #clients-section li {
        width: calc((100%/12) - 1px);
        height: auto;
        aspect-ratio: 1;
    }

    /* Pricing
------------------------------------------/*/
    .all-packs {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1%;
    }

    .pack {
        padding: 4%;
        border-radius: 4rem;
        flex-basis: 30%;
    }

    .buy {
        flex-basis: 40%;
    }

    .pack:nth-child(2) {
        order: -1;
    }
}

/* < 1300
--------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 1300px) {

    p,
    .cta,
    input {
        font-size: 1.1rem;
    }

    .update {
        gap: 6.5rem;
    }

    .update aside {
        min-width: 21rem;
    }

    /* Home
------------------------------------------/*/
    #hero-section h1 {
        font-size: 5.5rem;
    }

    /* custom Formats
------------------------------------------/*/
    #custom-formats-section-bg-2 {
        width: 90rem;
        height: 90rem;
        top: -45rem;
    }

    #color-wheel {
        width: 90rem;
        max-width: 99vw;
        height: 90rem;
        max-height: 99vw;
    }

    #picker-section-bg-1 {
        top: 50%;
        right: 0;
        transform: translate(-70vw, -50%);
    }

    /* Color Wheel
------------------------------------------/*/
}

/* < Animation
--------------------------------------------------------------------------------------------------------------------------------*/
.animate {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animate-2 {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animate-3 {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Delays
------------------------------------------/*/
.zero {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

.one {
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.two {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.three {
    -webkit-animation-delay: .55s;
    -moz-animation-delay: 0.55s;
    animation-delay: 0.55s;
}

.four {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.five {
    -webkit-animation-delay: .65s;
    -moz-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

.six {
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    animation-delay: 1.3s;
}

/* Fade In Up
------------------------------------------/*/
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, .2em, 0);
        transform: translate3d(0, .2em, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, .2em, 0);
        transform: translate3d(0, .2em, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* Fade in
------------------------------------------/*/
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/* Fade In Down
------------------------------------------/*/
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -1em, 0);
        transform: translate3d(0, -1em, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -1em, 0);
        transform: translate3d(0, -1em, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/* Fade Out
------------------------------------------/*/
@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}