@import './_variables';
@import './_components';
@import './_header';
@import './_footer';
@import './_about';
@import './_privatedining';
@import './_mobilemenu';
@import './_banners';

html{
	
	color:#FFF;
	margin:0;

}
body{
	margin:0;
	font-family:'mozaic-geo-variable';
}
a{
	color:#FFF;
	text-decoration:none;
    transition:color 300ms linear; 
    &:hover{ 
        color:#000;
    }
}
h1, h2, h3{
	font-size:28px;
	font-weight:normal;
	font-family: "mozaic-geo-variable", sans-serif;
	font-variation-settings: "wght" 500;
	letter-spacing:3px;
	text-transform:uppercase;
	padding-bottom:0;
	line-height:36px
}
h2{
    font-size:26px;
}
h3{
    font-size:15px;
    line-height:18px;
    margin-top:0;
}
p{
    font-size:18px;
    line-height:1.5em;
}

.fullwidth__ribbon{
    background:$color-blue;
    display:flex;
    justify-content: center;
    align-items:center;
    height:100px;
    p{
        font-size:16px;
        text-transform:uppercase;
        letter-spacing:1px;
    }
}
.section{
    color:$color-blue;
    .container{
        max-width:800px;
        width:80%;
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
        margin-bottom:80px;
        text-align: center;

        .contact-info{
            text-transform:uppercase;
            margin-bottom:100px;
            letter-spacing:1px;
            .pipe{
                margin: 0 20px;
            }
            a{
                color:$color-blue;
                &:hover{
                    color:$color-gold;
                }
            }
            @media screen and (max-width:$tablet_small_landscape){
                margin-bottom:30px;
                line-height:30px;
            }
        }
        .reservations{
            margin-bottom:80px;
            @media screen and (max-width:$tablet_small_landscape){
                margin-bottom:40px;
            }
        }
    }

}

#map{
    width: 100%;
    height: 500px;
    @media screen and (max-width:$tablet_small_landscape){
        height:400px;
    }
    @media screen and (max-width:$phone){
        height:300px;
    }
}


@media screen and (max-width:$tablet_small_landscape){
	.blockUnder1024{
		display:block;
	}
    .hideUnder1024{
		display:none;
	}
}
@media screen and (max-width:$tablet_small_portrait){
	.hideUnder980{
		display:none;
	}
}
@media screen and (max-width:$phone){
	.blockUnder700, .blockOnPhone{
		display:block;
	}
    .hideOnPhone{
        display:none;
    }
}
