.aln-top-pub {
    display: none;
}

.aln-create-right-pub {
    height: 400px;
    border-radius: 24px;
    text-align: center;
    color: #A79DEA;
    margin-bottom: 20px;
    max-width: 262px;
    background-size:cover;
}

.aln-create-right-pub .pub-description {
    background-color: rgba(255, 255, 255, .6);
    height: 400px;
    color: #222f3c;
    padding: 10px;
    width: 30%;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    border-radius: 24px;
}

.pub-description.first {
    background-color: rgba(255, 255, 255, .9);
    width: 100%;
}

.aln-create-right-pub:hover .pub-description {
    transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    background-color: rgba(255, 255, 255, .9);
    width: 100%;
}

.aln-create-right-pub .pub-description i {
    transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    color: #2a3947;
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

.aln-create-right-pub:hover .pub-description i,
.aln-create-right-pub .pub-description.first i {
    transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    color: #DE69BE;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

.aln-create-right-pub .pub-description div{
    transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
    opacity: 0;
    height: 300px;
    overflow: auto;

}

.aln-create-right-pub:hover .pub-description div,
.aln-create-right-pub .pub-description.first div{
    transition: all 1s ease 0.5s;
    -ms-transition: all 1s ease 0.5s;
    -webkit-transition: all 1s ease 0.5s;
    opacity: 1;
}