/* css document */

.containerSkew {
    transform: skew(-46deg);
    position: relative;
    overflow: hidden;
    background-color: rgba(255,255,255,0);
    z-index: 10;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 2px solid rgba(255,160,6,1);
    cursor: pointer;
}

.containerSkew  img   {
    transform: skewX(46deg);
    position: relative;
    cursor: pointer;
    filter: grayscale(100%);
    transition: 0.2s ease;
}

.containerSkew:hover  img   {
    filter: grayscale(0%);
}

.titleSkewBox   {
    position: relative;
    display: hidden;
    opacity: 0;
    top: -71.5%;
    left: 0%;
    width: 100%;
    height: 5%;
    background-image: url('media/homeIcon/portraitTitle.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.2s;
    transition-timing-function: ease;
}