*,
::after,
::before {
    box-sizing: border-box;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
}

.wrapper {
    max-width: 1200px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding: 32px;
}

    .wrapper .header {
        padding-top: 40px;
        padding-bottom: 32px;
    }

        .wrapper .header .logo {
            display: block;
            width: 173px;
            height: 30px;
            background: url('') no-repeat;
            background-position: 0 0;
            cursor: pointer;
        }

    .wrapper .container .flex {
        display: flex;
        align-items: center;
    }

        .wrapper .container .flex > div {
            flex: 1;
        }

            .wrapper .container .flex > div:nth-child(1) {
                max-width: 468px;
                width: 100%;
            }

    .wrapper .container h1 {
        margin: 0;
        font-family: 'AvenirNext';
        font-size: 48px;
        font-weight: 600;
        line-height: 64px;
        color: #484848;
    }

    .wrapper .container h2 {
        margin: 0;
        margin-top: 24px;
        font-family: 'AvenirNext';
        font-size: 26px;
        font-weight: 600;
        color: #484848;
    }

    .wrapper .container p {
        margin: 0;
        margin-top: 40px;
        font-family: 'AvenirNext';
        font-size: 24px;
        font-weight: 500;
        color: #7b7b7b;
    }

    .wrapper .container form {
        margin-top: 40px;
        display: flex;
        position: relative;
    }

        .wrapper .container form .icon {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url();
            background-size: contain;
            position: absolute;
            top: 14px;
            left: 16px;
        }

        .wrapper .container form input,
        .wrapper .container form button {
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            border: 0;
            display: block;
        }

        .wrapper .container form input {
            font-size: 13px;
            color: #484848;
            background-color: #eee;
            border: 2px solid #eee;
            border-radius: 4px;
            width: 100%;
            padding: 14px 16px 14px 52px;
            -webkit-transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
            transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
        }

            .wrapper .container form input:focus {
                background-color: #fff;
                border-color: #e5e5e5;
            }

            .wrapper .container form input::-webkit-input-placeholder {
                color: #484848;
            }

            .wrapper .container form input::-moz-placeholder {
                color: #484848;
            }

            .wrapper .container form input:-ms-input-placeholder {
                color: #484848;
            }

            .wrapper .container form input:-moz-placeholder {
                color: #484848;
            }

            .wrapper .container form input:focus::-webkit-input-placeholder {
                color: rgba(0, 0, 0, 0);
            }

            .wrapper .container form input:focus::-moz-placeholder {
                color: rgba(0, 0, 0, 0);
            }

            .wrapper .container form input:focus:-ms-input-placeholder {
                color: rgba(0, 0, 0, 0);
            }

            .wrapper .container form input:focus:-moz-placeholder {
                color: rgba(0, 0, 0, 0);
            }

        .wrapper .container form button {
            font-family: 'AvenirNext';
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            background-color: #ff6000;
            border-radius: 4px;
            margin-left: 16px;
            max-width: 88px;
            width: 100%;
            cursor: pointer;
            -webkit-transition: opacity .15s ease-in-out;
            transition: opacity .15s ease-in-out;
        }

            .wrapper .container form button:hover {
                opacity: .8;
            }

    .wrapper .container .flex a {
        display: flex;
        align-items: center;
        margin-top: 40px;
        font-family: 'AvenirNext';
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        color: #484848;
    }

        .wrapper .container .flex a:before {
            content: "";
            display: block;
            margin-right: 16px;
            width: 25px;
            height: 25px;
            background-image: url('');
            background-size: contain;
        }

    .wrapper .container .flex img {
        display: block;
        margin: 0;
        border: 0;
        max-width: 519px;
        width: 100%;
        padding: 0;
        float: right;
    }

    .wrapper .container .categories {
        display: flex;
        flex-wrap: wrap;
        margin: 14px -10px;
    }

        .wrapper .container .categories > div {
            flex: 0 0 20%;
            max-width: 20%;
            width: 100%;
            padding: 10px;
        }

            .wrapper .container .categories > div > a {
                font-family: 'AvenirNext';
                font-size: 15px;
                font-weight: 500;
                text-align: center;
                text-decoration: none;
                color: #484848;
                border: 1px solid #eee;
                border-radius: 8px;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                padding: 24px;
                height: 70px;
                -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            }

                .wrapper .container .categories > div > a:hover {
                    border: 2px solid #ff6000;
                    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04);
                }

@media (max-width: 1023px) {
    .wrapper .container h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .wrapper .container p {
        font-size: 18px;
    }

    .wrapper .container .categories > div {
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
    }

        .wrapper .container .categories > div > a {
            padding: 16px;
        }
}

@media (max-width: 767px) {

    .wrapper {
        padding: 16px;
    }

        .wrapper .header {
            padding-top: 16px;
        }

            .wrapper .header .logo {
                margin: 0 auto;
            }

        .wrapper .container .flex {
            flex-direction: column;
        }

            .wrapper .container .flex > div:nth-child(1) {
                order: 2;
                text-align: center;
            }

        .wrapper .container h1 {
            margin-top: 24px;
        }

        .wrapper .container h2 {
            margin-top: 40px;
            font-size: 18px;
            text-align: center;
        }

        .wrapper .container p {
            margin-top: 24px;
        }

        .wrapper .container form {
            margin: 32px 16px 0;
            flex-direction: column;
        }

            .wrapper .container form button {
                display: none;
                max-width: 100%;
                height: 48px;
                margin-top: 16px;
                margin-left: 0;
            }

                .wrapper .container form input:focus + button,
                .wrapper .container form button:hover {
                    display: block;
                }

        .wrapper .container .flex a {
            margin-top: 24px;
            justify-content: center;
        }

        .wrapper .container .flex img {
            max-width: 173px;
            padding: 0;
        }

        .wrapper .container .categories > div > a {
            padding: 8px;
        }

        .wrapper .container .flex .desktopDescription {
            display: none;
        }
}

@media (min-width:767px) {
    .wrapper .container .flex .mobileDescription {
        display: none;
    }
}