.lasso--welcome {

    * { .box-sizing(border-box); }

    max-width:600px;
    margin:20px auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @bg:        white;
    @accent:    darken(@bg,5);
    @border:    darken(@bg, 15);
    @link:      #007aab;
    @success:   #4DA34D;
    @error:     #d9534f;
    @info:      lighten(@link,25);

    p {
        font-size:15px;
    }

    // initial welcome steps
    .lasso--welcome__steps {
        padding:0;
        list-style-type:none;
        margin:0 auto;

        li {
            padding:25px;
            background: @bg;
            border:1px solid @border;
            border-radius:5px;
            text-align: center;
            position: relative;
            margin-top:-25px;
            margin-bottom: 100px;

            &:before {
                font-family: Dashicons;
                color:white;
                padding: 14px 27px 15px 14px;
                width: 22px;
                font-size: 36px;
                border-radius: 100%;
                text-align: center;
                position: absolute;
                top: -33px;
                left: 0;
                right: 0;
                margin: 0 auto;
                height: 34px;
                line-height: 37px;
            }

            &.info:before {
                content: '\f348';
                background: @info;
            }
            &.success:before {
                content: '\f147';
                background: @success;
            }
            &.error:before {
                content: '\f227';
                background:@error;
            }
            p{
                margin-bottom: 0;
            }

            h3 {
                margin-bottom: 5px;
            }
        }
    }

    .lasso--welcome__top{
        .clearfix();
        text-align: center;

        img {
            max-width:150px;
            margin:0 auto;
            border-radius:3px;
        }

        h1 + p {
            font-style: italic;
        }

        margin-bottom:100px;
    }

    // social
    .lasso--welcome__social {
        list-style: none;
        margin:0;
        padding:7px 0;
        .clearfix();
        border-top:1px solid @border;
        border-bottom:1px solid @border;

        li {
            display: inline-block;
            line-height: 1;
            margin:0;
        }

        a {
            padding:2px 6px;
            display: block;
            text-decoration: none;
            color:inherit;
            line-height: 1.5;
            font-weight: bold;

            &:hover {
                color:@link;
                text-decoration: none;
            }

            i {
                font-size:16px;
                top:2px;
                line-height: 19px;
                color:@link;
            }
        }
    }
}

