/*
*********************
   Left Tabs
*********************
*/

/* Style the buttons inside the tab */
.left-tabs-link {
    border: none;
    background-color: transparent;
    color: rgba(255,255,255,0.5);
    padding: 5px 10px;
    width: 100%;
    outline: none !important;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    margin: 10px 0;
	transition: all .3s ease-out;
}

.left-tabs-link::before {
    content: '';
    background:url("../images/circle-fill.svg");
    background-repeat:no-repeat;
    background-size:contain;
    width: 10px;
    height: 10px;
    display: inline-block;
    opacity: 0.5;
}

/* @media (max-width: 1600px) {
    .left-tabs-link p{
        font-size:16px;
    }
} */

@media (max-width: 992px) {
    .left-tabs-link {
        width: auto;
    }
}

/* Change background color of buttons on hover */
.left-tabs-link:hover {
  background-color: transparent;
  border: none;
  color: rgba(255,255,255,1);
}

.left-tabs-link:hover::before {
    opacity:1;
}

/* Color for viewed tabs */
.left-tabs-link.viewed, .left-tabs-link.first {
    background-color: transparent;
    border: none;
    color: rgba(255,255,255,1);
}

.left-tabs-link.viewed::before, .left-tabs-link.first::before {
opacity:1;
}

.left-tabs-link.active {
    background-color: transparent;
    border: none;
    color: rgba(255,255,255,1);
  }

.left-tabs-link.active::before {
    opacity:1;
}

/* Style the tab content */
.left-tabs-content {
    opacity: 0;
    height: auto;
    overflow: hidden;
}

.left-tabs-content__active {
    opacity: 1;
    height: auto;
    background-color: transparent;
    color: #ffffff;
    animation-name: tab2anima;
    animation-duration: 0.65s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

@media (max-width: 992px) {

    .left-tabs-content {
        min-height: auto !important;
        height: 0 !important;
    }
    .left-tabs-content__active {
        min-height: auto !important;
        height: auto !important;
    }

}

@media(max-width: 768px) {
    .left-tabs-link::before {
        width: 30px;
        height: 30px;
    }

    .left-tabs-link {
        padding: 5px 27px;
    }

    .left-tabs-link.active::before {
        width: 50px;
        height: 50px;
    }
}

@media(max-width: 430px) {
    .left-tabs-link::before {
        width: 20px;
        height: 20px;
    }

    .left-tabs-link {
        padding: 5px 15px;
    }

    .left-tabs-link.active::before {
        width: 30px;
        height: 30px;
    }
}

/*Specify keyframe positions of said class*/
@keyframes tab2anima {
	0% {opacity: 0;transform: translateY(80px);}
	100% {opacity: 1; transform: translateY(0px);}
}

/*Specify keyframe positions of said class*/
@keyframes tab2anima {
	0% {opacity: 0;transform: translateY(0px);}
	100% {opacity: 1; transform: translateY(0px);}
}