/*.team__member {*/
/*    cursor: pointer;*/
/*}*/

.team__member--details {
    position: absolute;
    bottom: 1em;
    left: 1em;

    display: flex;
    flex-wrap: wrap;
    width: 90%; /* fallback if needed */
    width: calc(100% - 2em);

    font-size: 2rem;
    line-height: 1em;
    color: white;
    text-transform: uppercase;
}

.member__details {
    margin-right: 0.5em;
}

.member__details--hidden {
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
}

.details--firstname {}

.details--middlename {}

.details--surname {}

.details--department {
    font-size: 60%;
    display: block;
}

.team__member--visual:hover .decoration--rectangle,
.team__member--visual:hover .member__details--hidden {
    opacity: 1;
}

.decoration--rectangle {
    position: absolute;
    border: 2px solid red;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
}

.rectangle--1 {
    top: 10px;
    left: 0;
    width: calc(100% - 10px);
    height: calc(100% - 30px);
}

.rectangle--2 {
    top: 2px;
    left: 10px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.member__border--fallback .decoration--rectangle {
    border-color: white;
}

.member__border--hr .decoration--rectangle {
    border-color: black;
}

.member__border--technologia .decoration--rectangle  {
    border-color: green;
}

.team__link--red .member__details,
.list--projects .project .i__visual.team__member > a.team__link--red:after {
    color: #e81818 !important;
}

.team__link--light-blue .member__details,
.list--projects .project .i__visual.team__member >.team__link--light-blue:after {
    color: #18e8e8 !important;
}

.team__link--blue .member__details,
.list--projects .project  .i__visual.team__member > a.team__link--blue:after {
    color: #1717cc !important;
}

.team__link--yellow .member__details,
.list--projects .project .i__visual.team__member > a.team__link--yellow:after {
    color: #fae232 !important;
}

.team__link--black .member__details,
.list--projects .project .i__visual.team__member > a.team__link--black:after{
    color: #000000 !important;
}

.team__link--pink .member__details,
.list--projects .project .i__visual.team__member > a.team__link--pink:after{
    color: #e816e7 !important;
}

.team__link--green .member__details,
.list--projects .project .i__visual.team__member > a.team__link--green:after {
    color: #00ff00 !important;
}

.team__link--white .member__details,
.list--projects .project .i__visual.team__member > a.team__link--white:after {
    color: #ffffff !important;
}

.list--projects .project {
    min-height: auto;
}

.list--projects .project .i__visual {
    min-height: auto;
    margin-bottom: 0.715em;
    position: relative;
}

@media screen and (max-width: 640px) {
    .decoration--rectangle {
        opacity: 1;
        transition: unset;
    }
    .member__details--hidden {
        opacity: 1;
        transition: opacity 0.5s, visibility 0.5s;
    }
}

@media screen and (max-width: 640px) {
    .decoration--rectangle {
        opacity: 1;
        transition: unset;
    }
    .member__details--hidden {
        opacity: 1;
        transition: opacity 0.5s, visibility 0.5s;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1780px) {
    .list--projects .project .i__visual.team__member > a:after {
        font-size: 6rem;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1100px) {

    .hb180-companysite-team .item.project {
        width: 16em;
        min-height: 16em;
    }

    .hb180-companysite-team .i__visual.team__member--visual {
        min-height: 16em;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1200px) {
    .hb180-companysite-team .item.project {
        width: 17em;
        min-height: 17em;
    }

    .hb180-companysite-team .i__visual.team__member--visual {
        min-height: 17em;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1330px) {
    .hb180-companysite-team .item.project {
        width: 17em;
        min-height: 17em;
    }

    .hb180-companysite-team .i__visual.team__member--visual {
        min-height: 17em;
    }
}

@media screen and (min-width: 1331px) and (max-width: 1500px) {

    .hb180-companysite-team .item.project {
        width: 20em;
        min-height: 20em;
    }

    .hb180-companysite-team .i__visual.team__member--visual {
        min-height: 20em;
    }
}

@media screen and (min-width: 1501px) and (max-width: 1600px) {

    .hb180-companysite-team .item.project {
        width: 23em;
        min-height: 20em;
    }

    .hb180-companysite-team .i__visual.team__member--visual {
        min-height: 20em;
    }
}


@media screen and (min-width: 1601px) and (max-width: 1780px) {

    .hb180-companysite-team .item.project {
        width: 25em;
        min-height: 25em;
    }

    .hb180-companysite-team .i__visual.team__member--visual {
        min-height: 25em;
    }
}