@font-face {
    font-family:'t24';
    src:url(../fonts/t26.otf);
}
/*body,p,div,h1,h2,h3 {
font-family: 't24'!important;
}*/
    .grid__item {
        background-color: #DDDDDD;
    }

    .angelica-name .link {
        overflow: hidden;
    }
    .angelica-name span, .angelica-name p, .angelica-name a {
        font-family: 't24'!important;
        text-transform: uppercase;
        line-height: 1;
        font-style: normal;
        font-weight: normal;
    }
    .angelica-name p {
        margin: 0
    }
    .angelica-black-color {
        color: #1e1a1b;
    }
    .angelica-grey-color {
        color: #777;
        font-size: 0.6em;
    }
    .angelica-name .angelica-grey-color, .angelica-name .angelica-black-color {
        font-weight: normal;
    }

    /* angelica name 1 */
    .link--kukuri::before {
        color: #1E1A1B;
    }
    .angelica-grey-color:hover {
        color: #777;
    }

    .link--kukuri::after {
        top: 80%;
    }

    .angelica-name-1>a:hover .link--kukuri::before {
        width: 100%;
    }
    .angelica-name-1 .link--kukuri::before {
        text-align: left;
    }
    .angelica-name-1>a:hover .link--kukuri::after {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
    .angelica-name-1 span {
        display: block;
    }

    /* angelica name 2 */
    .link--takiri span {
        color: #1e1a1b;
    }
    .link--takiri {
        font-size: 8em;
    }
    .angelica-name-2 .angelica-black-color {
        font-size: 1em;
    }
    .angelica-name-2 p {
        margin: 0;
        font-style: normal;
        text-transform: uppercase;
    }
    .angelica-name-2 p:nth-child(2)  {
        font-size: .6em;
    }
    .angelica-name-2 .angelica-black-color {
        color: #1e1a1b;
    }
    /* angelica-name-3 */
    .link--nukun::after {
        background: #1e1a1b;
    }
    .link--surinami {
        font-size: 8em;
    }
    .angelica-name-3 span {
        display: block;
    }
    .angelica-name-3 .link--surinami>span>span:nth-child(2){
        font-size: .6em;
    }
    .angelica-name-3 .link--surinami>span::after {
        bottom: 0;
        left: 0;
        font-size: .6em;
    }
    .angelica-name-3 .link--surinami {
        padding:0 .3em;
    }
    .angelica-name-3 .link--surinami:hover .angelica-black-color, .angelica-name-3 .link--surinami:hover .angelica-grey-color  {
        color: transparent;
        -webkit-transition: color 0.5s;
        transition: color 0.5s;
    }

    /* angelica-name-4 */
    .angelica-name-4 .angelica-grey-color  {
        transition: all .5s;
    }
    .angelica-name-4 .link--nukun:hover .angelica-grey-color {
        color: #1e1a1b;
    }
    .angelica-name-4 span {
        display: block;
    }
    .angelica-name-4 span:nth-child(2) {
        font-size: .6em;
    }
    .angelica-name-4 .link--nukun-span {
        color: #1e1a1b;
    }


    /* name-5 */
    .link--kumya {
        font-size: 8em;
    }
    .link--kumya span::before {
        font-size: .8em;
    }

    /* angelica-name-6 */
    .link--manko .link--manko-span {
        color: #1e1a1b;
    }
    .angelica-name-6 span {
        display: block;
    }



    /* 7 */
    .link--yaku {
        font-size: 8em;
    }
    .link--yaku span {
        font-size: 1em;
        color: #777;
    }
    .angelica-letter-container {
        font-size: .6em;
    }

    /*
    ----------------------
    angelica-name-8
    ----------------------
     */
    .angelica-name-8 .link--mallki span {
        opacity: 0;
        height: 100%;
        transition: all .8s;
    }
    .angelica-name-8 .link--mallki:hover span {
        opacity: 1;
    }
    .angelica-name-8 .link--mallki div{
        transition: all .8s;
    }
    .angelica-name-8 .link--mallki:hover div{
        opacity: 0;
    }
    .link--mallki span::before {
        font-size: .8em;
    }

    /*
    ----------------------
    angelica-name-9
    ----------------------
     */
    .link--ilin span:nth-child(1) {
        color:#1e1a1b;
    }
    .link--ilin span:nth-child(2) {
        color:#777;
        font-size: 0.6em;
    }
    .link--ilin:hover span:last-of-type::before, .link--ilin span:first-of-type::before {
        -webkit-transform: translate3d(0,-270%,0);
        transform: translate3d(0,-270%,0);
    }
    .link--kumya>span span:last-of-type {
        font-size: .6em;
    }