@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
    box-sizing: border-box
}

*,
::after,
::before,
:after,
:before {
    box-sizing: inherit
}

@font-face {
    font-family: "Croissant One";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/CroissantOne-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/CroissantOne-Regular.woff) format("woff"), url(../fonts/CroissantOne-Regular.ttf) format("truetype"), url("../fonts/CroissantOne-Regular.svg#Croissant One") format("svg")
}

body,
html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-position: center top;
    background-repeat: repeat-y
}

a,
body {
    color: #007caa
}

body {
    overflow-x: hidden;
    background-image: url(../images/wallpaper-mobile.png)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    body {
        background-image: url(../images/wallpaper-mobile@2x.png);
        background-size: 1340px auto
    }
}

@media only screen and (min-width:800px) {
    html {
        background-image: url(../images/wallpaper-fade-inner.png)
    }
    body {
        background-image: url(../images/wallpaper-outer.png)
    }
    .container {
        max-width: 33.75rem;
        margin-left: auto;
        margin-right: auto
    }
    .container::after {
        clear: both;
        content: "";
        display: table
    }
}

@media only screen and (min-width:800px) and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:800px) and (-moz-min-device-pixel-ratio:1.5),
only screen and (min-width:800px) and (-o-min-device-pixel-ratio:3/2),
only screen and (min-width:800px) and (min-device-pixel-ratio:1.5) {
    html {
        background-image: url(../images/wallpaper-fade-inner@2x.png);
        background-size: 710px auto
    }
    body {
        background-image: url(../images/wallpaper-outer@2x.png);
        background-size: 2200px auto
    }
}

.container {
    max-width: 16.875rem;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 0
}

.container::after {
    clear: both;
    content: "";
    display: table
}

@media only screen and (min-height:640px) {
    .container {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding: 0
    }
}

.header .brand {
    display: block;
    margin: 0 auto 1.25rem;
    padding-top: .4rem;
    width: 13.75rem;
    max-width: 70%
}

@media only screen and (min-width:800px) {
  .header .brand {
    margin: 0 auto 2rem;
    padding: 0;
    max-width: 100%
  }
}

.header .brand img {
    width: 100%;
    height: auto
}

.main {
    text-align: center;
    font-family: "Croissant One", Georgia, Times, serif;
    text-shadow: #dedede 1px 1px 0
}

.main p {
    margin: 0;
    line-height: 1.6;
    font-size: 1.125rem
}

.bar,
.main hr {
    background: #007caa
}

.main hr {
    border: 0;
    width: 70%;
    margin: 1.4rem auto;
    height: 1px
}

.main .hours,
.main .menu-btn,
.main .reservations {
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif
}

.main .reservations {
    margin: 1rem 0 0;
    text-align: center
}

.main .menu-btn,
.main .reservations a {
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700
}

.main .reservations a {
    padding: .625rem 1.25rem;
    border: 1px solid #007caa;
    display: inline-block;
    font-size: 1.125rem
}

.main .hours {
    margin: 0 0 1rem;
    font-size: 1rem;
}

@media only screen and (min-width:800px) {
  .main .hours {
    font-size: 1.125rem;
  }
}

.main .menus-list {
  position: relative;
}

.main .menus {
  // display: inline-block;
}

.main .menu-btn {
    display: block;
    margin: 0 0 .25rem 0;
    font-size: 1.2rem
}

@media only screen and (min-width:800px) {
  .main .menu-btn {
    font-size: 1.5rem
  }
}

.main .menus-list:after,
.main .menus-list:before {
    display: block;
    position: absolute;
    content: url(../images/curl.svg);
    top: 50%
}

.main .menus-list:before {
    left: 1.25rem;
    transform: translateY(-50%)
}

@media only screen and (min-width:800px) {
  .main .menus-list:before {
    left: 0;
  }
}

.main .menus-list:after {
    right: 1.25rem;
    transform: translateY(-50%) scaleX(-1)
}

@media only screen and (min-width:800px) {
  .main .menus-list:after {
    right: 0;
  }
}

.footer .email,
.footer .phone {
    text-align: center;
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif
}

.footer .phone {
    margin-bottom: .5rem;
    font-size: 1rem
}

@media only screen and (min-width:800px) {
  .main .phone {
    font-size: 1.125rem;
  }
}

.footer .email {
    margin-top: 0
}

.footer .social {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.footer .social li {
    display: inline-block;
    margin: 0 .5rem
}

.footer .social a {
    display: block;
    opacity: .2
}

.footer .social a:hover {
    opacity: .5
}

.footer .social img {
    display: block;
    width: 2.125rem;
    height: auto
}

a {
    text-decoration: none;
    transition: all .35s
}

a:hover {
    color: #0092c9
}

.bar {
    margin: 1rem 0 0;
    height: 20px
}