/* CSS Document */
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
img {
max-width: 120%;
height: auto;
overflow: hidden;
}
#logo {
float: left;
display: inline-block;
padding: 0%;
max-width: 20%;
}
.hidden {
display: none;
}
#topnav {
overflow: hidden;
background-color: #333;
font-family: 'bebasneueregular'
}
#topnav a {
float: right;
color: #f2f2f2;
text-align: center;
margin: 0% 0% 0% 6%;
padding: 4% 3%;
text-decoration: none;
font-size: 22px;
}
#topnav a:hover {
background-color: #acd373;
color: black;
}
#topnav a.active {
background-color: #acd373;
color: white;
}
body {
font-family: 'semplicitalight', sans-serif;
font-size:16px;
background-color:#000000;
}
p {
font-family: 'semplicitalight', sans-serif;
font-size:20px;
}
h1 {font-family: Arial, helvetica, sans-serif;
font-size:30px;
font-weight:bold; width: 500px;
color:#acd373;
margin-bottom:5px;
margin-top:20px; }
h2 {font-family: 'gotham-light', sans-serif;
font-weight:bold;
font-size:22px;
color:#d7cbbf;
text-transform:uppercase;
text-decoration: underline;
margin-top:0;}
h3 {font-family: 'gotham-light', sans-serif;
font-weight:normal;
color:#acd373;
font-size:28px;
margin-top:0;}
@font-face {
font-family: semplicitalight;
src: url(fonts/semplicitalight.otf);
font-family: gotham-light;
src: url(fonts/gotham-light.otf);
font-family: bebasneueregular;
src: url(fonts/bebasneueregular.otf);
}
figure {
width: 60vw;
height: 60vw;
margin: 10vh auto;
}
.divsection {
float: left;
max-width: 50%;
}
p
{
font-family: gotham-light;
font-size:12px;
margin-bottom:0;
color: white;
}
a.color:link {
color:#716067;
text-decoration: none;
font-family: "gotham-light";
font-size:1.0em;
}
a.color:visited {
color:#f2f2f2;
text-decoration: none;
font-family: "gotham-light";
font-size:1.0em;
}
a.color:hover {
color:#d7cbbf;
text-decoration: none;
font-family: "gotham-light";
font-size:1.0em;
background-color: #716067;
padding: 5px 5px;
}
/*Reservation Page Form*/
.form {
width:220px;
margin:0 auto;
background-color:#FFFFFF;
border:thin solid #E0D7C5;
padding:20px 5px 5px 10px;
font-family: "gotham-light";
font-size:0.8em;
}
label {
float:left;
text-align:left;
width:20%;
margin-right:5%;
}
input,textarea
{
margin-bottom:1em;
padding:0.5em 0.8em;
border:thin solid #000000; border-radius:1px;
}
input:focus, textarea:focus {
outline:0;
border-color:#acd373;
}
/*submit button style*/
input[type="submit"]
{
background-color:#acd373;
border:thin solid #ccc;
padding:0.8em;
outline:0;
color:white;
border-radius:5px;
width:100%;
}
:-moz-placeholder {
color:#E0D7C5;
}
::-webkit-input-placeholder {
color:#E0D7C5;
}
input[type="submit"]:hover,input[type="submit"]:focus {background-color:#E0D7C5;}
.center{
width:50%;
margin:0 auto;
margin-top:30px;
}
/*Single Page scroll*/
html,body {
scroll-behavior: smooth;
}
section {
width: 78vw;
height: 98vh;
padding: 2vh 20vw 0 2vw;
overflow: hidden;
}
#navtwo {
position: fixed;
top: 40vh;
right: 2vw;
}
.navtwo a:link {
display: inline-block;
width: 16px;
height: 16px;
background-color: white;
border: 3px solid white;
border-radius: 50%;
margin-bottom: 2px;
}
.navtwo a:visited {
display: inline-block;
width: 16px;
height: 16px;
border: 3px solid white;
border-radius: 50%;
margin-bottom: 2px;
}
.navtwo a:hover {
transform: scale(2);
}
/*color stuff*/
.none {
background-color: none;
}
.black {
background-color: #000;
}
.gray {
background: linear-gradient(black, #acd373);
}
.white {
background-color: #fff;
}
/* Hover Colors */
.gray-hover:hover {
background-color: #aaa;
}
/* css3 @keyframe */
@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* css3 Animations */
.fade-in {
animation-name: fade-in;
-moz-animation-name: fade-in;
-ms-animation-name: fade-in;
-o-animation-name: fade-in;
-webkit-animation-name: fade-in;
animation-duration: 4s;
-moz-animation-duration: 4s;
-o-animation-duration: 4s;
-webkit-animation-duration: 4s;
animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
-o-animation-fill-mode: backwards;
-webkit-animation-fill-mode: backwards;
}
/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
#logo {
display: block;
margin: 0 auto;
float: center;
padding: 0%;
max-width: 40%; }
#topnav {
position: absolute;
margin-top: 16%;
list-style-type: none;
overflow: visible;
background-color: #333;
height: 10%;
width: 100%;
}
}
section {
width: 78vw;
height: 98vh;
padding: 2vh 20vw 0 2vw;
overflow: hidden;
}
/*mobile*/
@media (min-width: 320px) and (max-width: 480px) {
#logo {
float: center;
display: block;
padding: 0%;
max-width: 86%;
}
#topnav {
display: none;
}
.navtwo {
display: none;
}
.divsection {
float: left;
max-width: 80%;
}
/*mobile hamburger nav*/
button#hamburger-button {
position: fixed;
font-size: 2.5em;
line-height:0.2em;
border: 2px solid #000
border-radius: 20%;
padding: 16px 4px 18px 4px;
top: 134px;
right: 16px;
z-index: 100;
cursor: pointer;
background-color: white;
}
button#hamburger-button:hover {
color: #fff;
background-color: rgba(0,0,0,0.7);
border-color: rgba(255,255,255,0.1);
}
.navmobile {
position: fixed;
background-color: white;
font-size: 4vw;
padding: 6vw 14vw;
line-height: 2.5em;
transition: transform 1s;
transform: translatex(-350px);
}
.after-click {
transform: translateX(0.5vw);
}
.hidden {
display: block;
}