.dim-grey {
    background-color: #333333;
}

.grey {
    background-color: #555555;
}

.dark-gray {
    background-color: #777777;
}

.silver {
    background-color: #999999;
}

.chaveron-container {    
    position: relative;
    text-align: center;
}

.chaveron-container {    
    color: #333;
}

.chaveron {        
    clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 100% 70%, 50% 100%, 0 70%, 0 33%);        
    cursor: pointer;    
    transition: 0.3s;
}

.card-body {
    background-color: #fff;
}

.arrow-chaveron {
    clip-path: polygon(50% 23%, 100% 0, 100% 66%, 50% 100%, 0 66%, 0 0);
    cursor: pointer;    
    margin-bottom: 0;
    margin-top: 0;    
    transition: 0.3s;
}

.chaveron:hover {
    background-color: #FF781F;     
    color: #333;
    height: 135px;
    width: 115px;   
}

.arrow-chaveron:hover {
    background-color: #FF781F;        
}

.centered {
    color: #fff;
    font-size: .66rem;
    position: absolute;
    top: 47%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: 0.5s;
}

.vertical-line {
    border-left: 1.5px solid rgb(194, 194, 194);
    bottom: 40px;
    height: 350px;
    position: relative;
}

.horizontal-line {
    border-left: 1.5px solid #333;
    background-color: rgb(194, 194, 194);
    width: 100%;
}

.hidden { 
    display: none;
    font-size: .80rem;
}

.relative-bottom {
    bottom: 25px;
    position: relative;
}

.relative-bottom-big {
    bottom: 50px;
    position: relative;
}

.tilt-in-fwd-tr {
    -webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.tilt-in-fwd-tr-2 {
    -webkit-animation: tilt-in-fwd-tr 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: tilt-in-fwd-tr 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.tilt-in-fwd-tr-3 {
    -webkit-animation: tilt-in-fwd-tr 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: tilt-in-fwd-tr 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.tilt-in-fwd-tr-4 {
    -webkit-animation: tilt-in-fwd-tr 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: tilt-in-fwd-tr 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/*Animation for category chaveron*/
@-webkit-keyframes tilt-in-fwd-tr {
    0% {
        -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }

}
    
@keyframes tilt-in-fwd-tr {
    0% {
        -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}

.flip-in-hor-bottom {
    -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes flip-in-hor-bottom {
    0% {
        -webkit-transform: rotateX(80deg);
                transform: rotateX(80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        opacity: 1;
    }
    }
    @keyframes flip-in-hor-bottom {
    0% {
        -webkit-transform: rotateX(80deg);
                transform: rotateX(80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        opacity: 1;
    }
}