/*
  Theme Name: Hero
*/

.hero {
    padding-top: 48px
}

.hero-paragraph {
    margin-bottom: 32px
}

.hero-illustration {
    display: none;
    position: relative
}

.hero-bg, .hero-square, .hero-dots, .hero-line {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.hero-bg {
    top: -160px;
    left: 28px
}

.hero-square-1 {
    top: -156px;
    left: 150px
}

.hero-square-2 {
    top: -42px;
    left: 600px
}

.hero-square-3 {
    top: 46px;
    left: 74px
}

.hero-square-4 {
    top: 0;
    left: 250px
}

.hero-square-5 {
    top: 108px;
    left: 633px
}

.hero-square-6 {
    top: 140px;
    left: 185px
}

.hero-square-7 {
    top: 336px;
    left: 600px
}

.hero-square-8 {
    top: 350px;
    left: 193px
}

.hero-dots-1 {
    top: -107px;
    left: 397px
}

.hero-dots-2 {
    top: 65px;
    left: 202px
}

.hero-dots-3 {
    top: 396px;
    left: 53px
}

.hero-line-1 {
    top: 318px;
    left: 229px
}

@media (min-width: 641px) {
    .hero {
        padding-top: 80px
    }

    .hero-inner {
        display: flex
    }

    .hero-copy {
        padding-right: 48px;
        min-width: 512px;
        width: 512px
    }

    .hero-illustration {
        display: block;
        width: 528px
    }
}

@media (max-width: 640px) {
    .hero-form {
        margin: 0 auto
    }
}