*{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
:focus{
    outline:0
}
img{
    border:none;
    width:100%;
    display:block
}
html{
    font-size:62.5%
}
html,body{
    height:100%;
    -webkit-text-size-adjust:none
}
body{
    background:#eef7f9;
    font-family:Tahoma, Arial sans-serif;
    font-size:1.6rem;
    color:#545a63;
    min-width:320px;
    line-height:1.2
}
ol,ul{
    list-style:none
}
a{
    text-decoration:none
}
.header{
    background:#fff;
    font-size:3.3rem;
    font-weight:700;
    padding:1.5rem;
    text-align:center;
    -webkit-box-shadow:0 0.5px 0 0 #c2c4c9;
    box-shadow:0 0.5px 0 0 #c2c4c9
}
.header span{
    color:#3e9fee
}
.user-list{
    max-width:760px;
    margin:0 auto
}
.user-item{
    background:#fff;
    -webkit-box-shadow:0 2px 8px 0 rgba(159,169,197,0.25);
    box-shadow:0 2px 8px 0 rgba(159,169,197,0.25);
    border-radius:4px;
    margin:1.5rem 1rem;
    overflow:hidden;
    height:15rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    cursor:pointer
}
.user-pic{
    position:relative;
    cursor:pointer;
    width:15rem;
    -ms-flex-negative:0;
    flex-shrink:0;
    transition:opacity 0.2s linear
}
.user-pic:hover{
    opacity:0.8
}
.user-pic:after{
    content:'';
    position:absolute;
    right:0.5rem;
    bottom:0.5rem;
    width:27px;
    height:27px;
    background:url('../images/icons.png') center -1px no-repeat
}
.user-info{
    margin:0 1rem;
    width:100%;
    position:relative
}
.user-name{
    margin:1rem 0;
    font-size:2.5rem;
    font-weight:700
}
.user-text{
    color:rgb(84,90,99)
}
.user-nav{
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    position:absolute;
    bottom:1rem
}
.icon-user-plus,.icon-comments,.icon-chat{
    opacity:0.8
}
.user-nav .icon{
    margin:0.5rem 1rem;
    cursor:pointer;
    height:36px;
    background-image:url('../images/icons.png');
    background-repeat:no-repeat
}
.user-nav .distance{
    color:#3e9fee;
    font-weight:bold
}
.user-nav .distance i{
    float:left
}
.user-nav .distance p{
    overflow:hidden;
    text-align:center;
    line-height:1;
    margin-top:7px
}
.user-nav .distance p span{
    display:block
}
.user-nav .icon-map-marker{
    background-position:center -50px;
    width:28px
}
.user-nav .icon-user-plus{
    background-position:center -113px;
    width:36px
}
.user-nav .icon-comments{
    background-position:center -177px;
    width:34px
}
.icon-chat{
    background-position:center -241px;
    width:34px
}
.steps{
    display:none;
    background:#fff;
    max-width:500px;
    width:95%;
    margin:2rem auto;
    padding:2rem;
    border:1px solid #ccc
}
.step{
    display:none
}
.step:first-child{
    display:block
}
.step-title{
    margin-bottom:1.5rem;
    text-align:center
}
.step-title h2{
    font-size:2.4rem;
    color:#3e9fee
}
.step-title h3{
    font-size:1.8rem;
    font-weight:normal;
    color:#666
}
.options{
    max-width:300px;
    margin:0 auto
}
.options li{
    margin-bottom:7px;
    font-weight:bold
}
.options li input{
    vertical-align:middle;
    margin-right:1rem
}
.options li span{
    overflow:hidden;
    line-height:1
}
.btn-block{
    padding-top:1.5rem;
    text-align:center
}
.btn{
    background:#3e9fee;
    display:inline-block;
    width:80%;
    max-width:180px;
    padding:1rem 2rem;
    margin:1rem 0;
    color:#fff;
    font-size:1.8rem;
    font-weight:bold;
    text-transform:uppercase;
    border-radius:3px
}
.btn:hover{
    background:#53a3e4
}
.btn-no{
    background:#666
}
.btn-no:hover{
    background:#777
}
.btn-start{
    max-width:320px
}
@media (max-width:960px){
    html{
        font-size:55%
    }
}
@media (max-width:600px){
    html{
        font-size:50%
    }
    .user-list{
        max-width:400px
    }
    .user-pic{
        width:100%
    }
    .user-item{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-flow:column nowrap;
        flex-flow:column nowrap;
        height:auto
    }
    .user-info{
        width:auto
    }
    .user-nav{
        width:100%;
        text-align:center;
        margin:1rem 0;
        position:static
    }
    .user-nav{
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center
    }
    .user-tel{
        font-size:3rem
    }
}