/* ##################################################
# ELEMENTS
################################################## */




/* ##################################################
# CAROUSEL BUTTON STYLING
################################################## */
.carousel .carousel-control-icon {
    background-image: none;
    background-color: transparent;
}

.carousel .carousel-control-icon:before {
    width: 20px;
    height: 20px;
    border-top: 3px solid var(--gray-500);
    border-right: 3px solid var(--gray-500);
    background-color: transparent;
}



/* ##################################################
# CAROUSEL BUTTONS ALWAYS SHOW
################################################## */
.carousel-control-prev .carousel-control-icon  {
    left: 0px!important;
}

.carousel-control-next .carousel-control-icon  {
    right: 0px!important;
}
.carousel .carousel-control, .carousel .carousel-indicators {
    opacity: 1!important;
}



/* ##################################################
# CAROUSEL SMALL STYLING
################################################## */

.desktop .carousel-small .carousel-item-type-text_and_image .carousel-image {
    position: absolute;
    left: 0px;
    max-width: 35%;
}

.desktop .carousel-small .carousel-item-type-text_and_image .carousel-text {
    position: absolute;
    left: 45%;
    max-width: 50%;
}


.mobile .carousel-small .carousel-item-type-text_and_image .carousel-image {
    position: absolute;
    top: 0px;
    left: 5%;
    max-width: 90%;
}

.mobile .carousel-small .carousel-item-type-text_and_image .carousel-text {
    position: absolute;
    top: 60%;
    left: 5%;
    max-width: 90%;
}

.mobile .carousel .item {
   height: 400px!important;
}

.mobile .carousel-item-type-text_and_image .carousel-text {
    text-align: center;
}

.carousel-item-type-text_and_image {
    background-color: transparent!important;
}

.carousel-item-type-text_and_image .carousel-text {
    color: var(--dark)!important;
}



/* ##################################################
# CARD STYLING
################################################## */

.card-title {
    font-size: 16px!important;
    font-color: var(--dark);
}
.card-footer .btn-text:before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    border-top: 2px solid var(--dark);
    border-left: 2px solid var(--dark);
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%);
}

.card-footer .btn-default,
.card-footer .btn-default:hover,
.card-footer .btn-default:active {
    content: '';
    transform: rotate(135deg);
    position: absolute;
    bottom: 30px;
    right: 10px;
    height: 12px;
    width: 12px;
    background-color: transparent;
    border: 0px solid transparent;
    color: transparent!important;
}


.card-footer .btn-default:hover .btn-text:before {
    border-top: 2px solid var(--primary);
    border-left: 2px solid var(--primary);
}

.card-body {
    background-color: var(--gray-100);
}



/*##################################################
# CUSTOM OVERRIDES
##################################################*/


.carousel-indicators li {
    background-color: var(--gray-600)
}

.carousel-item-type-text_and_image .carousel-image {
    display:block;
}


.carousel .carousel-item h1,
.carousel .carousel-item h2,
.carousel .carousel-item h3,
.carousel .carousel-item h4,
.carousel .carousel-item h5 {
    margin-bottom: .5rem!important;
    margin-top: -2rem;
}

.card-group-element-item .card-footer {
    background-color: var(--gray-100);
}