#index{
    margin: 100px 0;
}
#index h1{
    margin-bottom: 2em;
    text-align: center;
    font-weight: 600;
    letter-spacing: .1em;
}
#index p.greeting{
    margin: -2em 0 4em;
    text-align: center;
}
#index p.greeting span{
    margin: 0 .5em;
    font-weight: 600;
    letter-spacing: .05em;
}
#index ul{
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
#index ul + ul{
    margin-top: -1px;
}
#index ul.noborder{
    margin-top: 20px;
    border: none;
}
#index ul li + li{
    border-top: 1px solid #eee;
}
#index ul li a{
    padding: 1.5em 20px;
    display: block;
    text-decoration: none;
    color: #111;
    text-align: center;
    transition: background .2s;
    position: relative;
}

#index ul li a::after{
    content: "\e5cc";
    font-family: "material icons";
    font-size: .875rem;
    color: #999;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(0,-50%);
    transition: right .4s;
}
#index ul li a span{}
#index ul li a span::before{}
#index ul li a.button{
    max-width: 240px;
    margin: 8px auto;
    padding: 1em 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: all .2s;
    color: #111;
}
#index ul li a.button::after{
    display: none;
}
#index ul li a.button span{}
#index ul li a.button span::before{}
#index{}
#index{}
#index{}


@media (pointer: fine){
    #index ul li a:hover{
        background: rgba(0,0,0,.05);
    }
    #index ul li a:hover::after{
        right: 4px;
    }
    #index ul li a.button:hover{
        border-color: #ccc;
        box-shadow: 0 2px 4px rgba(0,0,0,.1);
    }
        
}
@media screen and (min-width: 1024px){}
@media screen and (max-width: 1023.98px){}
@media screen and (min-width: 768px){}
@media screen and (max-width: 767.98px){
    #index{
        margin: 0 0 60px;
    }
}