body{
    background-color: #f4f4f4 !important;
}

*{
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

form, input, label{
    font-family: "Nunito", sans-serif !important;
}

.font-nunito{
    font-family: "Nunito", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}

.square{
    background-color: #3b3a38;
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.squareBoxShadow{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#header:hover .headerText{
    opacity: 1;
}

#header i{
    font-size: 1.2em;
}

#header a{
    color: #b6ae8f;
}

.hrHeader{
    background-color: #3b3a38;
    height: 50px;
    width: 1px;
}

.hrHeader2{
    background-color: #3b3a38;
    height: 25px;
    width: 1px;
}

.headerText{
    left: 150%;
    opacity: 0;
    transition: 0.15s opacity;
    color: #d6c8b4;
}

#button-cross{
    font-size: 2em;
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 1 !important;
}

#button-cross i{
    color: white;
}

/* Services */

.service-img{
    transition: box-shadow 0.2s, transform 0.2s;
}

.service-img:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    transform: scale(1.05);
}

/* Gallery */

.frame{
    object-fit: cover;
    min-width: 350px;
    min-height: 350px;
    max-width: 350px;
    max-height: 350px;
    transition: filter 0.2s;
}

.frame:hover{
    filter: brightness(1.2);
}

/* animation */

#home-text{
    transition: transform 0.5s;
}

#home-text:hover{
    transform: scale(1.05);
}

#home-arrow{
    transform: translatey(0px);
    animation: float 2.5s ease-in-out infinite;
}

#insta-button{
    transition: background-color 0.2s, color 0.2s;
}

#insta-button:hover{
    background-color: white;
    color: #ddb6a3;
}

#buttonMoreGallery{
    transition: transform 0.5s;
}

#buttonMoreGallery:hover{
    transform: scale(1.05);
}

#buttonLessGallery{
    transition: transform 0.5s;
}

#buttonLessGallery:hover{
    transform: scale(1.05);
}

/* keyframe */

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-10px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes homeSalon {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-10px);
    }
    100% {
        transform: translatey(0px);
    }
}