.bn  {border: 0}
.ba  {border: 1px solid transparent}
.bx  {border-left: 1px solid transparent; border-right: 1px solid transparent}
.by  {border-top: 1px solid transparent; border-bottom: 1px solid transparent}
.bt  {border-top: 1px solid transparent}
.br  {border-right: 1px solid transparent}
.bb  {border-bottom: 1px solid transparent}
.bl  {border-left: 1px solid transparent}
._bn {border: 0 !important}

.ba2  {border: 2px solid transparent}
.bx2  {border-left: 2px solid transparent; border-right: 2px solid transparent}
.by2  {border-top: 2px solid transparent; border-bottom: 2px solid transparent}
.bt2  {border-top: 2px solid transparent}
.br2  {border-right: 2px solid transparent}
.bb2  {border-bottom: 2px solid transparent}
.bl2  {border-left: 2px solid transparent}

.ba3  {border: 3px solid transparent}
.bx3  {border-left: 3px solid transparent; border-right: 3px solid transparent}
.by3  {border-top: 3px solid transparent; border-bottom: 3px solid transparent}
.bt3  {border-top: 3px solid transparent}
.br3  {border-right: 3px solid transparent}
.bb3  {border-bottom: 3px solid transparent}
.bl3  {border-left: 3px solid transparent}


.capital {text-transform: capitalize}
.ucase {text-transform: uppercase}

.ofh {overflow: hidden}

.ff-mont { font-family: 'Montserrat', sans-serif}
.ff-sourcesans, .ff-ssans { font-family: 'Source Sans Pro', sans-serif}
.ff-roboto { font-family: 'Roboto', sans-serif}

.cur-d {cursor: default}
.cur-p {cursor: pointer}


.transi300 {
    -webkit-transition: all 300ms ease-in-out 0ms;
    -moz-transition: all 300ms ease-in-out 0ms;
    -ms-transition: all 300ms ease-in-out 0ms;
    -o-transition: all 300ms ease-in-out 0ms;
    transition: all 300ms ease-in-out 0ms;
}

.transi400 {
    -webkit-transition: all 400ms ease-in-out 0ms;
    -moz-transition: all 400ms ease-in-out 0ms;
    -ms-transition: all 400ms ease-in-out 0ms;
    -o-transition: all 400ms ease-in-out 0ms;
    transition: all 400ms ease-in-out 0ms;
}

.transi600 {
    -webkit-transition: all 600ms ease-in-out 0ms;
    -moz-transition: all 600ms ease-in-out 0ms;
    -ms-transition: all 600ms ease-in-out 0ms;
    -o-transition: all 600ms ease-in-out 0ms;
    transition: all 600ms ease-in-out 0ms;
}

/* --------------- */


.note {
    margin: 1px auto;
    max-width: 75em;
    color: #fff;
    display: block;
    position: relative;
    font-family: inherit;
    font-size: 17px;
    line-height: normal;
    text-align: left;
    padding: 9px 30px 9px 12px;
    border: 1px solid rgba(0,0,0,0.05);
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.note .close {
    position: absolute;
    right: 11px;
    top: 11px;
    height: 18px;
    width: 18px;
    display: inline-block;
    box-sizing: border-box;
    cursor: default;
    opacity: 0.4;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+bGluZXtzdHJva2U6IzAwMH08L3N0eWxlPjxsaW5lIHgxPSIxIiB5MT0iMSIgeDI9IjciIHkyPSI3Ii8+PGxpbmUgeDE9IjciIHkxPSIxIiB4Mj0iMSIgeTI9IjciLz48L3N2Zz4=) center center;
    
    /*
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><style type="text/css">line{stroke:#000}</style><line x1="1" y1="1" x2="7" y2="7"/><line x1="7" y1="1" x2="1" y2="7"/></svg>*/
    
}

.note .close:hover {
    opacity: 1;
}