/******************************************************************
NORMALIZE
******************************************************************/

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/******************************************************************
BASE
******************************************************************/

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.clearfix:before, .cf:before, .clearfix:after, .cf:after {
    content: " ";
    display: table;
}

.clearfix:after, .cf:after {
    clear: both;
}

.clearfix, .cf {
    *zoom: 1;
}

html {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
*, *:before, *:after {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
}

.italic{
    font-style: italic;
}

/******************************************************************
HEADINGS
******************************************************************/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  text-rendering: optimizelegibility;
}

h1, .h1 {
  font-size: 2.5em;
  line-height: 1.333em; 
}

h2, .h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 0.375em; 
}

h3, .h3 {
  font-size: 1.125em; 
}

h4, .h4 {
  font-size: 1.1em;
  font-weight: 700; 
}

h5, .h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px; 
}

/******************************************************************
BASE STYLES
******************************************************************/

body {
    font-size: .9em;
    line-height: 1.4;
    font-family: "futura-pt", Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #616161;
}

/****************************************************************************
PRELOADER
****************************************************************************/

body {
  overflow: hidden;
}

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}

#loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  -webkit-animation: rotating 1s linear infinite;
}

@-moz-keyframes rotating {
    0%{
        -moz-transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating {
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotating {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/******************************************************************
BASE STYLES
******************************************************************/


#content{
    padding: 0;
    margin: 0 auto;
}

.menu{

}

/******************************************************************
HERO
******************************************************************/

#hero{
    background: #4f627e;
    background: url(../img/bg.jpg) center center;
    -o-background-size: cover;
       background-size: cover;
    text-align: center;
    height:180px;
}


#logo{
    max-width: 100px;
    height: auto;
    position: relative;
    top: 50%;
    -webkit-transform:translateY(-50%);
            -moz-transform:translateY(-50%);
              -o-transform:translateY(-50%);
         -ms-transform:translateY(-50%);
        transform:translateY(-50%);
}

#video{
    display: none;
}

/******************************************************************
MENU NAVIGATION
******************************************************************/

.menu-nav{
    display: none;
}

/******************************************************************
MENU, CORE
******************************************************************/

.toggle{
    display: block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    color: #f37021;
    position: relative;
    border:1px solid #eee;
    font-size: 1em;
    margin: 0;
    padding: 1em 2em;
    border-top: 0;
    font-weight: 300;
    -moz-transition:background .25s ease;
    -o-transition:background .25s ease;
    transition: background .25s ease;
}

.toggle:hover,
.menu-section.active .toggle{
    background: #f5f5f5;
}

.toggle i{
    position: absolute;
    top: 50%;
    line-height: 0;
    right: 2em;
    font-size: 12px;
    color: #28A2D6;
    transition:-webkit-transform .25s ease;
    -moz-transition:transform .25s ease, -moz-transform .25s ease;
    -o-transition:transform .25s ease, -o-transform .25s ease;
    transition:transform .25s ease;
    transition:transform .25s ease, -webkit-transform .25s ease, -moz-transform .25s ease, -o-transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
}

.menu-section.active .toggle{
     background: #eee;
}

.menu-section.active .toggle i{
    -webkit-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
              -o-transform:rotate(180deg);
         -ms-transform:rotate(180deg);
        transform:rotate(180deg);
}

.menu-section ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* showing + hiding */

.menu-inner{
    display: none;
    padding: 1em 2em;
    border-bottom: 1px solid #eee;
}

/* menu item styles */

.menu-section li:before, .menu-section li:after, .menu-section li div:before, .menu-section li div:after {
    content: " ";
    display: table;
}

.menu-section li:after, .menu-section li div:after{
    clear: both;
}

.menu-section li, .menu-section li div {
    *zoom: 1;
}

/******************************************************************
MENU, STYLES
******************************************************************/

/* menu item styles */

.menu-section li{
    display: block;
    margin-top: 1em;
}

.menu-section li div{
    border-bottom: 1px dotted #ddd;
    line-height: 1;
    margin-bottom: 5px;
}

.item, .price{
    position: relative;
    display: inline-block;
    top: 1px;
    background: #fff;
    line-height: 1;
    padding-right: 10px;
}

.item{
    font-weight: 500;
}

.price{
    float: right;
    padding-right: 0px;
    padding-left: 10px;
}

.desc{
    font-style: italic;
    color: #ddd
}

/******************************************************************
CONTACT
******************************************************************/

.contact{
    text-align: center;
    color: #fff;
    background: #f37021;
    margin: 0;
    font-size:.925em;
}

.address,
.opening-hours-toggle,
.opening-hours ul li{
    display: block;
    padding: 1em .5em;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.email,
.phone{
    padding: 1em;
    display: block;
    float: left;
    border-right: 1px solid rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-left: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.email{
    width: 60%
}

.phone{
    width: 40%;
}

.opening-hours ul{
    margin: 0;
    padding:0;
    list-style-type: none;
    background: #CE5B16;
    display: none;
}

.opening-hours ul li span{
    margin-right: 1em;
    font-weight: 500;
}

.opening-hours ul li:first-child{
    border-top:0;
}

.opening-hours ul li:last-child{
    border-bottom:0;
}

.opening-hours-toggle{
    text-decoration: none;
}

.opening-hours-toggle i{
    margin-left: 1em;
    transition:-webkit-transform .25s ease;
    -moz-transition:transform .25s ease, -moz-transform .25s ease;
    -o-transition:transform .25s ease, -o-transform .25s ease;
    transition:transform .25s ease;
    transition:transform .25s ease, -webkit-transform .25s ease, -moz-transform .25s ease, -o-transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
}

.opening-hours-toggle.active i{
    text-decoration: none;
    -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
              -o-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
        transform: rotate(180deg);
}

.contact a{
    color: inherit;
}

.menu-inner ul{
    margin-bottom: 2em;
}

.italic{
    font-size: 14px;
    color: #ccc;
}

html.lt-ie9 #video{
    display: none;
}

/******************************************************************
TABLET
******************************************************************/

@media only screen and (min-width: 768px) {


    body {
        font-size: 1em;
        line-height: 1.8;
    }

    .toggle{
        padding: 1.2em 3.2em;
        font-size: 1.25em;
        font-weight: 300;
    }

    .menu-inner{
        padding: 2em 4em;
    }

    .menu-inner ul{
        padding-bottom: .5em;
    }

    html.csscolumns .menu-inner ul{
        -webkit-columns: 2;
        -moz-columns: 2;
             columns: 2;
        -webkit-column-gap:4em;
        -moz-column-gap:4em;
             column-gap:4em;
    }

    html.csscolumns .menu-inner ul li{
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column; 
    }

    .menu-inner ul li{
        margin: 0;
        padding: 1em 0;
    }

    .half-list li {
        width: auto;
        margin: 0;
        float: none;
    }

    .toggle i{
        right: 4em;
    }

    #hero{
        height:400px;
    }

    #logo{
        max-width: 200px;
    }

    .contact{
        font-size:1em;
    }

    .email{
        width: 50%
    }

    .phone{
        width: 50%;
    }


}

/******************************************************************
DESKTOP
******************************************************************/

@media only screen and (min-width: 1024px) {

    #hero:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;

        /* pattern */

        background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: -o-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        -o-background-size: 3px 3px;
           background-size: 3px 3px;
    }

    #logo, .menu-nav, .contact{
        z-index: 200;
    }

    /* hide mobile business */

    .toggle{
        display: block;
        background: none!important;
        padding: 0;
        margin: 0;
        margin-bottom: 0;
        font-size: 2em;
        cursor: auto;
        pointer-events:none;
        border:none;
    }

    .menu-section .toggle i{
        display: none;
    }

    .menu-inner{
        padding-left: 0;
        padding-right: 0;
        display: block!important;
        margin-bottom: 0;
    }


    /******************************************************************
    LIL' OLD RESETS
    ******************************************************************/

    .menu{
        margin: 0 auto;
    }

    .item{
        font-weight: 300;
    }

    .menu-inner{
        border-bottom: 0;
    }

    .menu-inner ul {
        padding-bottom: 0;
    }

    html.csscolumns .menu-inner ul{
        -webkit-columns: auto;
        -moz-columns: auto;
             columns: auto;
        -webkit-column-gap:0;
        -moz-column-gap:0;
             column-gap:0;
    }

    .menu-inner .half-list li{
        float: left;
        width: 45%;
        margin-right: 10%;
        margin-top: 0;
        margin-bottom: 1em;
    }

    .menu-inner .half-list li:nth-child(2n+2){
        margin-right: 0;
    }

    /******************************************************************
    CORE LAYOUT
    ******************************************************************/

    html, body, #container{
        min-height: 100%;
        height: 100%;
    }

    #hero{
        width: 60%;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        background: #4f627e;
        background: url(../img/bg.jpg) center center;
        -o-background-size: cover;
           background-size: cover;
        text-align: center;
    }

    #content{
        margin-left: 60%;
        width: 40%;
        min-height: 100%;
        padding: 4em;
    }

    .menu-nav, #content{
        padding-top: 8em;
    }

    .menu{
        max-width: 580px;
    }

    /******************************************************************
    HERO
    ******************************************************************/

    #logo{
        margin: 0;
        max-width: 320px;
        height: auto;
        position: relative;
        top: 50%;
        margin-left: -20%;
        -webkit-transform: translateY(-50%);
             -moz-transform: translateY(-50%);
               -o-transform: translateY(-50%);
             -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    }

    #video { 
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -webkit-transform: translateX(-50%) translateY(-50%);
             -moz-transform: translateX(-50%) translateY(-50%);
               -o-transform: translateX(-50%) translateY(-50%);
             -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        background: #fff;
        -o-background-size: cover;
           background-size: cover;
    }

    #hero{
        overflow: hidden;
        padding: 0;
    }

    /******************************************************************
    MENU NAVIGATION
    ******************************************************************/

    .menu-nav{
        height: 100%;
        background: #ec6700;
        position: absolute;
        top: 0;
        right: 0;
        background: #222;
        background: rgba(0,0,0,0.5);
        text-align: left;
        display: block;
        text-align: right;
    }

    .menu-nav ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .menu-nav li{
        display: block;
        position: relative;
    }

    .menu-nav li a{
        display: block;
        padding: .5em 2em;
        position: relative;
        text-decoration: none;
        color: #fff;
        color: rgba(255,255,255,0.5);
        -moz-transition:color .25s ease, background .25s ease;
        -o-transition:color .25s ease, background .25s ease;
        transition: color .25s ease, background .25s ease;
    }

    .menu-nav li:hover a{
        color: #fff;
    }

    .menu-nav li a.active{
        color: #fff;
        background: #f37021;
    }


    /******************************************************************
    MENU
    ******************************************************************/

    .menu-section{
        margin-bottom: 4em;
    }

    .toggle{
        margin-bottom: 0;
    }

    .desc{
        font-size: 14px;
        color: #ccc;
    }

    /******************************************************************
    CONTACT DETAILS
    ******************************************************************/

    .contact{
        padding: 0;
        position: fixed;
        margin: 0;
        padding: 0;
        border:none;
        top: 1em;
        left: 1em;
        text-align: left;
        margin: 0;
        background: #222;
        background: rgba(0,0,0,0.25);
        border-left: .5em solid #ec6700;
    }

    .email{
        width: 100%;
    }

    .phone{
        width: 100%;
    }

    .opening-hours ul{
        background: none;
        background: #212121;
        background: rgba(0,0,0,0.15)
    }

    .address,
    .opening-hours-toggle,
    .opening-hours ul li,
    .email,
    .phone{
        padding: .5em 1em;
    }

}


/******************************************************************
LARGER SCREENS
******************************************************************/

.contact{
    z-index: 9999!important;
}
@media only screen and (min-width: 1440px) {

    .toggle{
        font-size: 3em;
    }

    .menu-nav li a {
        display: block;
        padding: 1em 4em;
    }

    #logo{
        max-width: 100%;
    }

}

/* misc fixes */