@font-face {
    font-family: "mm";
    src: url("../fonts/mm.ttf");
}
.mm{
    font-family: "mm" !important;
}
.mm-beauty{
    font-family: "mm" !important;
    line-height: 1.5;
}
.bg-color{
    background-color: #ececec;
}
p,h1,h4,.text-style,.h3,li{
    font-family: 'Oswald', sans-serif !important;
}

.full-height{
    min-height: 100vh !important;
}
.main-nav{
    color: #a70aa3 !important;
    background: rgba(255,255,255,1);
    backdrop-filter: blur(5px) saturate(180%);
}

#mainSlider .card{
    background-color: #ffffffcc;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fa-chevron-left:hover{
    color: black;
}
.fa-chevron-right:hover{
    color: black;
}
.to-play:hover{
    color:whitesmoke!important;
}


.navbar-brand img{
    width: 50px !important;
}

#about{
    background-image: url("../img/bg-about.png");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 50%;
    /*background-attachment: fixed;*/
}
.vid{
    transition: 0.3s;
}
.vid:hover{
    transform: translateY(-10px);
}

.product-card{
    transition: 0.3s;

}
.product-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.to-play{
    color: #ffffff90 !important;
}
.main-slider .carousel-item{
    background-size: cover !important;
    background-position: center !important;
}


.nav-item.active{
    border-bottom: 2px solid #a70aa3;
    animation: bb 0.5s ease-in;
}
.nav-item.active a{
    color: #a70aa3 !important;
}
.navbar-brand{
    padding:0;
}

@keyframes bb {
    from{
        border-bottom-color: transparent;
    }to{
         border-bottom-color: #343a40;
     }
}

.scroll-to-top{

    width: 50px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    animation: aa 1s ease-in-out;
    border-radius: 0.25rem;

}
@keyframes aa {
    from{
        transform: translateY(150px);
    }to{
         transform: translateY(0);
     }
}


.title-hr{
    width: 100px;
    height: 4px;
    background: #f3f3f3;
    margin:20px 0;
}
.nav-item{
    padding: 10px;
}
.about-text{
    line-height: 1.8;
}
.contact-info{
    padding: 0;
    margin: 0 0 1.5em 0;
}

.contact-icon{
    width: 50px;
    text-align: left;
}
.contact-caption{
    width: 100px;
}
.member-info a{
    width: 50px;
    text-align: center;
}