/* components */

.reservations, .button{
    a{
       background:$color-white;
       color:$color-blue;
       text-transform:uppercase;
       transition:all 300ms linear;
       font-size:18px;
       font-weight:normal;
       font-family: "mozaic-geo-variable", sans-serif;
       font-variation-settings: "wght" 500;
       display:inline-block;
       padding:20px 80px;
       margin-left:auto;
       margin-right:auto;
       margin-top:30px;
       letter-spacing:2px;

       @media screen and (max-width:700px){
           padding:20px 20px;
       }

       &:hover{
           background:$color-blue;
           color:$color-white;
           cursor:pointer;
       }
   }
   &.blue{
       a{
           background:$color-blue;
           color:$color-white;
           &:hover{
               background:$color-gold;
               color:$color-white;
           }
       }
   }
   &.gold{
    a{
        background:$color-gold;
        color:$color-white;
        &:hover{
            background:$color-blue;
            color:$color-white;
        }
    }
   }

}

.newsletter{
    a{
       background:#FFF;
       color:#064163;
       text-transform:uppercase;
       transition:all 300ms linear;
       font-size:18px;
       font-weight:normal;
       font-family: "mozaic-geo-variable", sans-serif;
       font-variation-settings: "wght" 500;
       display:inline-block;
       padding:20px 80px;
       margin-left:auto;
       margin-right:auto;
       margin-top:30px;
       letter-spacing:2px;

       @media screen and (max-width:$phone){
           padding:20px 20px;
       }
    }
}


.socialBtn{
    border-radius: 50%;
    border:1px solid $color-white;
    background: $color-blue;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    font-size:20px;
    display:inline-block;
    transition:all 300ms linear;
    margin-right:5px;
    &:before{
        font-family: "FontAwesome";
        color: $color-white;
    }
    &:hover{
        background-color:$color-white;
        &:before{
            color:$color-blue;
        }
    }

}
.facebookBtn:before{
    content: "\f09a";

}
.instagramBtn:before{
    content: "\f16d"; /* add instagram icon */
}
.homeBtn:before{
    content: "\f015";

}
.mailBtn:before{
    content: "\f0e0"; /* add instagram icon */
}
.phoneBtn:before{
    content: "\f095"; /* add instagram icon */
}

/* seven rooms */
#sr-res-root.sr-lg.sr-dark{
    border-radius:0!important;
    text-transform:uppercase!important;
    background-color:$color-blue!important;
    transition: all 300ms linear!important;
    display: inline-block!important;
    padding: 22px 0!important;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-top: 30px!important;
    
    box-sizing:unset!important;
    width:380px!important;
    height:auto!important;
    span{
        max-width:100%!important;
        font-size: 18px!important;
        font-weight: normal!important;
        font-family: "mozaic-geo-variable", sans-serif!important;
        font-variation-settings: "wght" 500!important;
        letter-spacing: 2px!important;
    }
    i.sr-fa.sr-fa-logo{
        display:none!important;
    }
    &:hover{
        background-color:$color-gold!important;
    }
    &.blue{
        color:$color-white!important;
        &:hover{
            background-color:$color-gold!important;
        }
    } 
    &.white{
        background-color:$color-white!important;
        color:$color-blue!important;
        &:hover{
            background-color:$color-gold!important;
            color:$color-white!important; 
            cursor:pointer!important;
        }
    }
    @media screen and (max-width:$phone){
        max-width:265px!important;
        width:265px!important;
    }
}