#what > p {
    margin-bottom:30px;
}

#what > div.list {
    position:relative;
    padding-top:195px;
}

#what > div.list > article > div.title {
    position:absolute;
    top:0;
    left:0;
    width:20%;
    box-sizing:border-box;
    border-right:1px solid transparent;
}

#what > div.list > article > div.title > a {
    display:block;
    height:164px;
    font-size:14px;
    background:rgba(255,255,255,0.3);
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    transition-property:all;
}

#what > div.list > article > div.title > a:hover,
#what > div.list > article > div.title > a.selected {
    background-color:#A31916;
}

#what > div.list > article > div.title > a > span.icon {
    position:absolute;
    top:50px;
    left:50%;
    display:block;
    width:50px;
    height:50px;
    background:no-repeat 50% 0;
}

#what > div.list > article > div.title > a > h3 {
    position:absolute;
    top:84px;
    width:80%;
    left:10%;
    display:block;
    font-weight:300;
    font-size:14px;
}

#what > div.list > article > div.title > a.selected {
    pointer-events:none;
}

#what > div.list > article:last-child > div.title {
    border-right:none;
}

#what > div.list > article:nth-child(2) > div.title {
    left:20%;
}

#what > div.list > article:nth-child(3) > div.title {
    left:40%;
}

#what > div.list > article:nth-child(4) > div.title {
    left:60%;
}

#what > div.list > article:nth-child(5) > div.title {
    left:80%;
}

#what > div.list > article > p {
    -moz-column-count:2;
    -moz-column-gap:30px;
    -webkit-column-count:2;
    -webkit-column-gap:30px;
    margin:0;
    font-size:12px;
    font-family:Asap,inherit;
}

#what > div.list > article#interpreter > div.title > a > span.icon {
    width:40px;
    height:36px;
    margin-left:-20px;
    background-image:url(images/interpreter-icon.svg);
}
.no-svg #what > div.list > article#interpreter > div.title > a > span.icon { background-image:url(images/interpreter-icon.png) }

#what > div.list > article#revision > div.title > a > span.icon {
    width:31px;
    height:40px;
    margin-top:-4px;
    margin-left:-15px;
    background-image:url(images/revision-icon.svg);
}
.no-svg #what > div.list > article#revision > div.title > a > span.icon { background-image:url(images/revision-icon.png) }

#what > div.list > article#transcription > div.title > a > span.icon {
    width:33px;
    height:36px;
    margin-left:-16px;
    background-image:url(images/transcription-icon.svg);
}
.no-svg #what > div.list > article#transcription > div.title > a > span.icon { background-image:url(images/transcription-icon.png) }

#what > div.list > article#edition > div.title > a > span.icon {
    width:36px;
    height:36px;
    margin-left:-18px;
    background-image:url(images/edition-icon.svg);
}
.no-svg #what > div.list > article#edition > div.title > a > span.icon { background-image:url(images/edition-icon.png) }

#what > div.list > article#translation > div.title > a > span.icon {
    width:34px;
    height:40px;
    margin-top:-4px;
    margin-left:-20px;
    background-image:url(images/translation-icon.svg);
}
.no-svg #what > div.list > article#translation > div.title > a > span.icon { background-image:url(images/translation-icon.png) }


@media (max-width:990px) {
    
    #what > div.list > article > div.title > a > h3 {
        top:105px;
        font-size:90%;
    }
    
}


@media (max-width:850px) {
    
    #what > div.list > article > div.title > a > h3 {
        top:108px;
        font-size:80%;
    }
    
}


@media (max-width:660px) {
    

    #what > p {
        margin:0;
        margin-bottom:30px;
        font-size:12px;
        font-family:Asap,inherit;
    }
    
    #what > div.list {
        padding-top:0;
        margin-bottom:20px;
    }

    #what > div.list > article {
        margin-bottom:1px;
    }
    
    #what > div.list > article > div.title {
        position:static;
        width:auto;
        border-right:none;
    }

    #what > div.list > article > div.title > a {
        position:relative;
        display:block;
        height:auto;
        text-align:left;
    }

    #what > div.list > article > div.title > a > span.icon {
        position:absolute;
        top:50%;
        left:15px;
        margin-top:-12px;
        margin-left:0 !important;
        width:30px !important;
        height:25px !important;
        background-size: 100%;
        background-size:contain;
    }

    #what > div.list > article > div.title > a > h3 {
        margin:0;
        position:static;
        display:block;
        width:auto;
        font-size:13px;
        padding:14px 10px 14px 58px;
    }

    #what > div.list > article > div.title > a.selected {
        pointer-events:none;
    }

    #what > div.list > article:last-child > div.title {
        border-right:none;
    }

    #what > div.list > article:nth-child(2) > div.title {
        left:20%;
    }

    #what > div.list > article:nth-child(3) > div.title {
        left:40%;
    }

    #what > div.list > article:nth-child(4) > div.title {
        left:60%;
    }

    #what > div.list > article:nth-child(5) > div.title {
        left:80%;
    }
    
    #what > div.list > article#revision > div.title > a > span.icon {
        margin-top:-12px;
    }
    
    #what > div.list > article#translation > div.title > a > span.icon {
        margin-top:-12px;
    }

    #what > div.list > article > p {
        -moz-column-count:1;
        -webkit-column-count:1;
        padding:10px 15px 13px 15px;
        text-align:justify;
    }
    
}