/* Colors */
:root {
    --primary-color: #aa0031;
    --secondary-color: #002e52;
    --accent-color: #cdccc8;
    --text-light: #ffffff;
    --text-dark: #1a1a1a;
    --success-color: #2ecc71;
    --warning-color: #ffa500;
    --danger-color: #d91e18;
}

.menunav {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.homepage-banner {
    background-image: url(/images/banner.jpg);
    color: var(--text-light);
    padding: 10rem 2rem;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 50%;
}
.mini-banner {
    padding: 5rem 2rem;
}
.homepage-banner > h1 {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.hxhide{
	display:none;
}

.btnAct{
	min-width: 6rem;
}

@-webkit-keyframes animate-positive{
    0% { width: 0%; }
}
@keyframes animate-positive{
    0% { width: 0%; }
}
#map {
    height: 20rem;
    width: 100%;
}
#world-map {
    margin: auto;
    width: 80%;
    height: 30vw;
}
#selected-tags, #unselected-tags {
    width: 12vw;
    height: 9vw;
}

div.hide {
    -webkit-text-security: disc;
}

.autocomplete-suggestions {
    border: 0.05rem solid #ddd;
    max-height: 12rem;
    overflow-y: auto;
    position: absolute;
    background-color: #fff;
    z-index: 1000;
}
.autocomplete-suggestions div {
    padding: 0.5rem;
    cursor: pointer;
}
.autocomplete-suggestions div:hover {
    background-color: #f0f0f0;
}

/****************** Slider *******************/
.carousel-group{padding-bottom:3rem !important;padding-left:4rem !important}
.post-slide{border-width:0.1rem 0.1rem 0.3rem;border-style:solid;background-color:var(--accent-color);border-color:var(--primary-color) #f0f0f0 #f0f0f0;border-radius:0.5rem;margin:0 0.75rem;width:16rem;min-height:8rem}
.post-slide .post-category{border-bottom:0.1rem solid #f5f5f5;margin:0;text-align:center;padding:0.5rem;font-size:1rem;letter-spacing:0.2rem;text-transform:capitalize}
.post-slide .post-category>a{text-transform:uppercase;color:var(--primary-color);transition:all .2s ease 0s}
.post-slide .post-category>a:hover{color:#373a3f}
.post-slide .post-review{overflow:hidden;padding:0.5rem}
.post-slide .post-bar{width:3rem;height:3rem;border-radius:50%;background:var(--primary-color);float:left;line-height:1.75rem;text-align:center;margin-right:0.5rem}
.post-slide .post-bar>.month{display:block;color:#fff;font-size:0.75rem;text-transform:capitalize}
.post-slide .post-bar>.date{color:#fff;display:block;font-size:1.25rem;font-weight:700;line-height:0.5rem}
.post-slide .post-title{line-height:1.5rem;margin:0 0 0 0}
.post-slide .post-title>a{font-size:1.5rem;line-height:1.5rem;color:var(--secondary-color);transition:all .2s ease 0s}
.post-slide .post-title>a:hover{color:var(--primary-color)}
.post-slide .post-title>a:link{text-decoration:none}
.carousel-control-prev-icon, .carousel-control-next-icon{background-color:black;background-size:1.5rem 1.5rem}
.custom-carousel-control{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;background-color:transparent;border:none;z-index:5}
.carousel-control-prev.custom-carousel-control{left:-1.5rem}
.carousel-control-next.custom-carousel-control{right: -1.5rem}
.custom-carousel-control:hover{background-color:rgba(0, 0, 0, 0.1)}

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
    #world-map {
        margin: auto;
        width: 100%;
        height: 75vw;
    }
    #selected-tags, #unselected-tags {
        width: 100vw;
        height: 50vw;
    }
    .homepage-banner {
        padding: 1rem 1rem;
    }
    .homepage-banner > h1 {
        font-size: 2rem;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}