.communitiescards {
    margin-top: 0px;
    display: flex;
    flex-wrap: wrap;
}

.communitiescards .thumbnail-container {
    display: flex;
}
.communitiescards .communities-container {
    width: 100%;
}

.communitiescards.show-hidden .hidden-container {
    display: block;
}

.communitiescards.show-hidden .thumbnail-container.visibles,
.communitiescards.show-hidden .visible-container,
.communitiescards .hidden-container {
    display: none;
}

.communitiescards .carousel-control-prev,
.communitiescards .carousel-control-next {
    z-index: 2;
}

.communitiescards .carousel-control-prev {
    left: 0;
}

.communitiescards .carousel-control-next {
    right: 0;
}

.communitiescards .carousel-control-next,
.communitiescards .carousel-control-prev {
    width: 30px;
}

.communitiescards .controlWrapper {
    width: 30px;
    height: 30px;
    background-color: black;
    border-radius: 50%;
    padding-top: 5px;
}

.communitiescards .controlWrapper.left {
    padding-right: 2px;
}

.communitiescards .controlWrapper.right {
    padding-left: 2px;
}

.communitiescards .carousel-indicators li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    /* margin-right: 3px; */
    margin-left: 3px;
    text-indent: -999px;
    background-color: red;
    height: 1.25rem;
    width: 1.25rem;
    max-width: 1.25rem;
    background-color: #4285f4;
}

.communitiescards .indicators {
    max-height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    justify-content: flex-start;
    max-width: calc(100% - 350px);
}

.communitiescards .carousel-item.hidden {
    display: none;
}
.communitiescards .carousel-item {
    max-width: 400px;
    min-width: 400px;
}

.communitiescards .carousel-inner {
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0 6px;
}

.communitiescards .carousel-inner .carousel-item {
    transition: -webkit-transform 0.1s ease;
    transition: transform 0.1s ease;
    transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}

.communitiescards .myCommunitiesContainer {
    display: flex;
    width: 100%;
    align-items: center;
    padding-top: 6px;
}

.communitiescards .myCommunities {
    font-family: "Metropolis Bold";
    letter-spacing: 0.28px;
    text-align: left;
    color: #333333;
    font-size: 28px;
    padding-left: 30px;
    padding-right: 20px;
}

.communitiescards .carousel {
    width: 100%;
}

@media (min-width: 991px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*MD*/

/*@media (min-width: 768px) {*/

@media (min-width: 1330px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item
        + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*LG */

@media (min-width: 1901px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        transition: none;
    }
    .carousel-item-next.carousel-item-left
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 2501px) {
    /* show 5th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        transition: none;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 3101px) {
    /* show 6th item */
    .carousel-inner
        .active
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        display: block;
    }
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        transition: none;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 3801px) {
    /* show 7th item */
    .carousel-inner
        .active
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        display: block;
    }
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        transition: none;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item
        + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*LG 6th  -  if you want a carousel with 6 slides */

@media (min-width: 991px) {
    /* show 5th and 6th item */
    /*   .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    
  
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      transition: none;
    }
*/
    /*show 7th slide for animation when its a 6 slides carousel */
    /*      .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  + .carousel-item {
        position: absolute;
        top: 0;
        right: -16.666666666%;
        z-index: -1;
        display: block;
        visibility: visible;
  }
  */
    /* forward direction > */
    /*   .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
  */
    /* prev direction < last item animation fix */
    /*   .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
*/
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .communitiescards .carousel-item {
        max-width: 330px;
        min-width: 330px;
    }

    .communitycard .communitycard-card {
        max-width: 330px;
        min-width: 330px;
    }
    .communitycard .postwriter {
        min-width: 330px;
    }
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner
        .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
        + .carousel-item
        + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
    .post .userMessage {
        padding-left: 5px;
    }
    .dashboardnavigation {
        padding: 5px 0 0 0 !important;
    }
}


.dark .communitiescards .myCommunities  {
    color: rgba(255, 255, 255, 0.87)
}

.dark .communitycard .communitycard-card {
    background-color: rgba(14, 181, 254, 0.08);
}

.dark .communitycard {
    box-shadow: 0 3px 6px 0 rgba(240, 240, 240, 0.14);
}