* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: rgba(0, 0, 0, 0.2);
}

#fp-nav.fp-right {
    right: 0.5px;
}

.carousel-indicators button {
    border-radius: 100%;
    width        : 0.5rem !important;
    height       : 0.5rem !important;
}

.carousel,
.slide,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img,
.carousel .carousel-control {
    border-radius: 1rem !important;
    overflow     : hidden;
}

.section {
    display    : flex;
    align-items: center;
    text-align : center;
}

.card {
    margin       : 0 auto;
    height       : 66vh;
    width        : 46.8vh;
    border-radius: 1rem;
}

.one {
    background-color: #85FFBD;
    background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}

.two {
    background-color: #ffb78d;
    background-image: linear-gradient(62deg, #ffb78d 0%, #ffda92 100%);
}

.three {
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

.four {
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
}

.five {
    background-color: #f7dc77;
    background-image: linear-gradient(45deg, #f7dc77 0%, #f09db4 100%);
}

.six {
    background-color: #FAACA8;
    background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
}

.seven {
    background-color: #25c4ff;
    background-image: linear-gradient(135deg, #25c4ff 0%, #4effaf 100%);
}

.save-the-date {
    background-image   : url('./imgs/cards/save-the-date-empty.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}
.info-male {
    background-image   : url('./imgs/cards/info-empty-male.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.info {
    background-image   : url('./imgs/cards/info-empty.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.party {
    background-image   : url('./imgs/cards/party-empty.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.party-male {
    background-image   : url('./imgs/cards/party-empty-male.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.payment {
    background-image   : url('./imgs/cards/payment-map.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}
.payment-hoang {
    background-image   : url('./imgs/cards/payment-map-male.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.gallery-countdown {
    background-image   : url('./imgs/cards/gallery-countdown.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.response {
    background-image   : url('./imgs/cards/response.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}
.responseMale {
    background-image   : url('./imgs/cards/response-male.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

.thank-you {
    background-image   : url('./imgs/cards/thank-you.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}

#quyenhm {
    width            : 100%;
    font-size        : 4vh;
    font-family      : "Great Vibes";
    position         : absolute;
    top              : 40vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#quyenhm p {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
}

#thaolnp {
    width            : 100%;
    font-size        : 4vh;
    font-family      : "Great Vibes";
    position         : absolute;
    top              : 50vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#thaolnp p {
    background: linear-gradient(-45deg, #e73c7e, #23a6d5, #23d5ab, #ee7752);
}

.text-gradient {
    background-size        : 400% 400% !important;
    animation              : gradient 15s ease infinite;
    color                  : transparent;
    background-clip        : text;
    font-weight            : 900;
    -webkit-background-clip: text !important;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#thuyMap {
    width            : 100%;
    font-size        : 3.75rem;
    color            : rgba(255, 194, 37, 1);
    font-family      : "Great Vibes";
    position         : absolute;
    top              : 25.5vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}
#hoangMap {
    width            : 100%;
    font-size        : 3.75rem;
    color            : rgba(255, 194, 37, 1);
    font-family      : "Great Vibes";
    position         : absolute;
    top              : 25.5vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#guest-name {
    margin-top : 5vh;
    font-size  : 3.5vh;
    color      : rgb(17, 18, 18);
    font-family: 'Birthstone', cursive;
}

#guest-name-male {
    margin-top : 5vh;
    font-size  : 3.5vh;
    color      : rgb(17, 18, 18);
    font-family: 'Birthstone', cursive;
}

#gallery {
    border-radius    : 1rem;
    height           : 23.4vh;
    width            : 41.6vh !important;
    position         : absolute;
    top              : 11vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#countdown {
    height           : 22.95vh;
    width            : 40.8vh;
    position         : absolute;
    top              : 48vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.time {
    font-family: "Blacker Sans Text";
    color      : #225983;
    padding    : 0;
}

.time .number {
    vertical-align: bottom;
    font-family   : Montserrat;
    font-size     : 3.5vh;
    font-weight   : 700;
    height        : 6vh;
    line-height   : 6vh;
}

.time .unit {
    font-size: 1.3vh;
}

#secs {
    font-size: 2.5vh;
}

.btn-grad {
    font-size       : 1.3vh;
    margin-top      : 2em;
    transition      : 0.5s;
    background-size : 200% auto;
    color           : white;
    box-shadow      : 0 0 10px #eee;
    border-radius   : 0.4rem;
    background-image: linear-gradient(135deg, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
}

.btn-grad:hover {
    background-position: right center;
    color              : white;
}

.btn-grad * {
    color: white;
}

.btn:focus,
.btn:active {
    box-shadow: 0 0 10px #12D8FA;
}

#map {
    overflow         : hidden;
    border-radius    : 1rem;
    height           : 19vh;
    width            : 41.6vh;
    position         : absolute;
    top              : 36vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}
#mapHoang {
    overflow         : hidden;
    border-radius    : 1rem;
    height           : 19vh;
    width            : 41.6vh;
    position         : absolute;
    top              : 36vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#contact {
    margin-top: 11vh;
}

#contact-hoang {
    margin-top: 11vh;
}

.avatar {
    display        : inline-block;
    border-radius  : 50%;
    width          : 12vh;
    height         : 12vh;
    color          : white;
    overflow       : hidden;
    padding-top    : 8vh;
    background-size: cover;

}

.avatar-text {
    padding   : 0.5vh 0 1vh;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
}

#response {
    border-radius    : 1rem;
    height           : 45vh;
    width            : 38vh;
    position         : absolute;
    top              : 11vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#responseHoang {
    border-radius    : 1rem;
    height           : 45vh;
    width            : 38vh;
    position         : absolute;
    top              : 11vh;
    left             : 50%;
    transform        : translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#btnMusic {
    font-size       : 3vh;
    position        : fixed;
    bottom          : 3vh;
    right           : 3vh;
    border-radius   : 50%;
    border          : none;
    width           : 8vh;
    height          : 8vh;
    background-image: linear-gradient(45deg, #F7BB97 10%, #DD5E89 100%);
    color           : white;


    animation: changeFontSize 15s ease infinite;
}


@keyframes changeFontSize {
    0% {
        font-size: 3vh;
    }

    50% {
        font-size: 3.5vh;
    }

    100% {
        font-size: 2.5vh;
    }
}