#rc-main section#portfolio.rc-section {
    height: auto;
}

/* cover */
.rc-portfolio__container__content-cover {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;

}

.rc-portfolio__container__content-cover h2,
.rc-portfolio__container__content-cover p {
    color: var(--hexcolor-2);
}

.rc-portfolio__container__content-cover p {
    font-weight: bold;
    text-align: left;
}

/* level 1 */
.rc-portfolio--container--content {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.rc-portfolio__work--container,
.rc-portfolio__work--container--content {
    position: relative;
    height: 100vw;
    overflow: hidden;
}

.rc-portfolio__work--container--content.rc-portfolio__work-level-1--container--content,
.rc-portfolio__work--container--content.rc-portfolio__work-level-2--container--content,
.rc-portfolio__work--container--content.rc-portfolio__work-level-2--container--content.rc-portfolio__work-level-3--container--content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-portfolio__work--container--content {
    position: relative;
}

.rc-portfolio__work--container--content.rc-portfolio__work-level-1--container--content img {
    width: 100%;
}

.rc-portfolio__work--title-text {
    /*background-color: rgba(255,195,0,.9);*/
    background-color: rgba(24, 25, 26, .9);
    width: 90%;
    height: 70px;
    padding: 0 10px;
    position: absolute;
    bottom: 10px;
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-end;
    align-content: flex-end;
}

.rc-portfolio__work--title-text h3 {
    color: var(--hexcolor-2);
    font-size: 1.05em;
    line-height: .75em;
}

.rc-portfolio__work--title-text p {
    margin-top: 0;
    font-size: .85em;
    color: var(--hexcolor-lightgray);
    line-height: 1.5em;
    text-transform: uppercase;
}

.rc-portfolio__work--title-text p.rc-portfolio__work--tags {
    font-size: .77em;
    line-height: .5em;
    text-transform: lowercase;
}

/* level 2 */
.rc-portfolio__work--container.rc-portfolio__work-level-2--container,
.rc-portfolio__work--container--content.rc-portfolio__work-level-2--container--content {
    height: 90vw;
}

/* level 3 */
.rc-portfolio__work--container.rc-portfolio__work-level-3--container,
.rc-portfolio__work--container--content.rc-portfolio__work-level-3--container--content {
    height: 80vw;
}

.rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text.rc-portfolio__work-level-3--title-text {
    height: 55px;
}
.rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text.rc-portfolio__work-level-3--title-text h3 {
    margin-top: -3px;
    line-height: 1.5em;
}

/* carousel */
.rc-portfolio__work--container--carrousel {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;

}

.rc-portfolio__work--container--carrousel .cover-portfolio {
    width: 500%;
    min-width: 500%;
    transform: translateX(40%);
    animation: carousel 14s ease-in-out alternate infinite;
}

.rc-portfolio__work--container--carrousel > .cover-portfolio-animation-delay-a {
    animation-delay: 1.2s;
}

.rc-portfolio__work--container--carrousel > .cover-portfolio-animation-delay-b {
    animation-delay: 1.35s;
}

.rc-portfolio__work--container--carrousel > .cover-portfolio-animation-delay-c {
    animation-delay: 1.5s;
}

.rc-portfolio__work--container--carrousel > .cover-portfolio-animation-delay-d {
    animation-delay: 1.75s;
}

.rc-portfolio__work--container--carrousel > .cover-portfolio-animation-delay-e {
    animation-delay: 1.90s;
}

@keyframes carousel {
    0%, 11% {
        transform: translateX(40%);
    }
    12%, 37% {
        transform: translateX(20%)
    }
    38%, 62% {
        transform: translateX(0%)
    }
    63%, 87% {
        transform: translateX(-20%)
    }
    88%, 100% {
        transform: translateX(-40%)
    }
}

.rc-portfolio__work--title-text--carrousel h3 {
    padding: 14px 0;
}


@media (min-width: 1024px) {
    
    /* level 1 */ 
    .rc-portfolio__work--container {
        width: calc(100% / 2);
        height: 47vw;
    }

    .rc-portfolio__work--title-text.rc-portfolio__work-level-1--title-text {
        width: 95.125%;
    }
    
    /* level 2 */ 
    .rc-portfolio__work--container.rc-portfolio__work-level-2--container {
        width: calc(100% / 3);
        height: 32vw;
    }
    
    .rc-portfolio__work--container.rc-portfolio__work-level-2--container img,
    .rc-portfolio__work--container--content.rc-portfolio__work-level-2--container--content img {
        max-width: 100%;
    }
    
    .rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text {
        width: 92.5%;
    }
    
    /* level 3 */
    .rc-portfolio__work--container.rc-portfolio__work-level-2--container.rc-portfolio__work-level-3--container {
        width: calc(100% / 4);
        height: 24vw;
    }
    
    .rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text.rc-portfolio__work-level-3--title-text {
        width: 90%;
    }
    
    .rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text.rc-portfolio__work-level-3--title-text h3 {
        padding-bottom: 6px;
        font-size: 1.1em;
        line-height: .8;
    }
    
    .rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text.rc-portfolio__work-level-3--title-text h3,
    .rc-portfolio__work--title-text.rc-portfolio__work-level-2--title-text.rc-portfolio__work-level-3--title-text p {
        text-align: right;
    }
    
}

@media (min-width: 1200px) {
    #rc-main section.rc-section .rc-section-content.rc-portfolio__container__content {
        width: 900px;
    }

    .rc-portfolio__container__content a img {
        margin-left: 20px;
    }

}

@media (min-width: 2150px) {
    .rc-portfolio__work--container.rc-portfolio__work-level-1--container img {
        min-width: 100%;
    }

    .rc-portfolio__work--container--carrousel img.cover-portfolio {
        width: 500%;
        min-width: 500%;
        transform: translateX(40%);
        animation: carousel 14s ease-in-out alternate infinite;
    }

}