* {outline: none !important; box-sizing: border-box; cursor: default}
html {font-size: 16px}

body {font-family: 'colab', arial, sans-serif; line-height: 1; background-color: #000; color: #fff}
  body.home {background: #000 url(../images/back-home.jpg) 0 0 no-repeat; background-size: cover}
  body.coorparoo {background: #000 url(../images/back-coorparoo.jpg) 50% 0 no-repeat; background-size: cover}
  body.rosalie {background: #000 url(../images/back-rosalie.jpg) 50% 0 no-repeat; background-size: cover}
  body.menu {background: #000 url(../images/back-menu.jpg) 50% 0 no-repeat; background-size: cover}
  body.news {background: #000 url(../images/back-news.jpg) 50% 0 no-repeat; background-size: cover}
  body.specials {background: #000 url(../images/back-specials.jpg) 50% 0 no-repeat; background-size: cover}
  body.story {background: #000 url(../images/back-story.jpg) 50% 0 no-repeat; background-size: cover}
  body.contact {background: #000 url(../images/back-contact.jpg) 50% 0 no-repeat; background-size: cover}
  
  body {background-attachment: fixed !important}


a {text-decoration: none; cursor: pointer; color: #FFB400}
  a * {cursor: pointer}
p, address,
dl {font-size: 1rem; line-height: 1.3rem; margin-bottom: 15px; letter-spacing: 0.25px}
p:last-child {margin-bottom: 0 !important}

ul {margin: 0 0 15px 15px; padding: 0}
  ul li {margin: 0 0 0 0; padding: 0; list-style: disc; line-height: 1.4rem}

ol {margin: 0 0 15px 15px; padding: 0}
  ol li {margin: 0 0 0 0; padding: 0; list-style: decimal; line-height: 1.4rem}

ul.no-list {margin: 0; padding: 0}
  ul.no-list li {margin: 0; padding: 0; background: none; list-style: none}


p:last-child, ul:last-child,
ol:last-child {margin-bottom: 0}

strong {font-weight: bold}
em {font-style: italic}

h1, h2, h3, h4, h5 {text-transform: uppercase; font-family: 'osaka'}
h1 {font-size: 3.3rem; line-height: 1.625remrem; margin: 0 0 10px 0; font-weight: normal; font-family: 'colab'; background-color: #000; background-color: rgba(0, 0, 0, 0.7); padding: 15px; width: 45%}
h2 {font-size: 2rem; line-height: 2rem; margin: 35px 0 10px 0}
h3 {font-size: 1.43rem; line-height: 1.43rem; margin: 25px 0 10px 0}
h4 {font-size: 1.2rem; line-height: 1.2rem; margin: 25px 0 10px 0}

h2:first-child, h3:first-child,
h4:first-child, h5:first-child {margin-top: 0}

.gmap {width: 100%; background-color: #000; height: 300px}

form {}
  form label {display: none}
  form input,
  form textarea {height: 30px; padding: 0 5px; font-size: 1rem; transition: border 1s; width: 100%; cursor: text}
  form textarea {padding: 5px; resize: none}
  form input:focus,
  form textarea:focus {}
  
.sections {overflow: hidden}
  .sections > .section {float: left; padding: 0 0 0 0; margin: 0 4% 30px 0}
  
  .sections > .section-1-1 {width: 100%; float: none; margin-right: 0}
  .sections > .section-1-2 {width: 48%}
  .sections > .section-1-3 {width: 30.6%}
  .sections > .section-2-3 {width: 65.2%}
  .sections > .section-1-4 {width: 22%}
  .sections > .section-3-4 {width: 74%}
  
  .sections .section-last {margin-right: 0}
  
  .image {}
    .image a {display: block; position: relative}
      .image img {width: 100%; display: block; height: auto}
      .image .caption {position: absolute; display: block; background-color: #000; background-color: rgba(0, 0, 0, 0.8); color: #FFB400; text-transform: uppercase; text-align: center; font-size: 1.6rem; padding: 10px 0; font-family: 'osaka'; bottom: 0; left: 0; width: 100%}
      
/* PAGE DEFAULT SIZES */
  #header #header-inner,
  .page-title,
  .main,
  #footer-inner {max-width: 1200px; padding: 0 10px; margin: 0 auto}
  
#header {padding: 40px 0}
.home #header {padding: 80px 0 60px 0}
  #header #header-inner {overflow: hidden}
    #header .logo {float: left; padding: 0; background: none; margin: 0; width: auto}
      #header .logo a {display: block; float: left; margin-right: 30px}
      #header .logo a.image {padding: 15px; background-color: rgba(0, 0, 0, 0.7)}
        #header .logo a img {}
    
    a.cta {padding: 10px; background-color: #000; background-color: rgba(0, 0, 0, 0.6); margin-right: 15px; color: #fff; padding-left: 50px}
    a.cta {float: left}
    a.cta-coorparoo {margin-right: 0}
      a.cta span.cta-header {display: block; font-family: 'osaka'; margin-bottom: 10px}
      a.cta span.cta-phone {display: block; font-weight: bold}
    
    a.cta-coorparoo {background: rgba(0, 0, 0, 0.6) url(../images/char-white.png) 10px 50% no-repeat; margin-right: 0 !important}
    a.cta-rosalie {background: rgba(0, 0, 0, 0.6) url(../images/char-3-white.png) 10px 50% no-repeat}
    
    #navigation {float: right}
      #navigation-inner {}
        #navigation ul#menu-main-menu {overflow: hidden; padding-top: 30px}
          #navigation ul#menu-main-menu > li {float: left; margin-right: 10px}
            #navigation ul#menu-main-menu > li > a {display: block; text-transform: uppercase; padding: 0 15px; height: 30px; line-height: 30px; background-color: #000; background-color: rgba(0, 0, 0, 0.8); color: #fff; transition: color 0.5s; font-size: 1.6em; font-family: 'osaka'}
            #navigation ul#menu-main-menu > li:hover > a {color: #FFB400}
            #navigation ul#menu-main-menu > li.current-menu-item > a,
            #navigation ul#menu-main-menu > li.current_page_ancestor > a {color: #FFB400; font-size: 1.8em}
        
        
.page-title {}
  .page-title h1 {}

.main {margin-bottom: 100px}
.home .main {margin-bottom: 0}
  .main-inner {margin: 0 auto; clear: both; margin-bottom: 80px}
  .main-inner:after {content: ""; display: table; clear: both}
  
  .left-column {float: left; width: 45%; padding: 30px; background-color: #000; background-color: rgba(0, 0, 0, 0.7)}
  body.home .left-column {width: 65%; padding: 30px}
  body.menu .left-column {width: 40%; background: none; padding: 0}
  body.specials .left-column {width: 100%; float: none; padding: 0; background: none}
  body.news .left-column {width: 100%}
  body.single .left-column {width: 45%}
  
  .right-column {width: 45%; float: right}
  body.home .right-column {width: 30%; padding: 0}
  body.menu .right-column {width: 55%}
  
  .right-column-text {padding: 30px; background-color: #000; background-color: rgba(0, 0, 0, 0.7)}
  .story .right-column-images {margin-top: -93px}
  
    body.menu h1 {width: 40%}
    body.specials h1 {width: 100%}
    body.news h1 {width: 100%}
    body.single h1 {width: 45%}

.menu-container {}
  .menu-container h2 {color: #FFB400}
    .menu-container h2 span {font-size: 1rem; line-height: 2rem; color: #ccc}
  
  .menu-container > ul {}
    .menu-container > ul > li {overflow: hidden; margin: 0 0 20px 0; padding: 5px 10px}
    .menu-container > ul > li:nth-child(2n) {background-color: #fff; background-color: rgba(255, 255, 255, 0.1)}
      .menu-container > ul > li .menu-content {float: left; width: 70%; margin-right: 5%}
        .menu-container > ul > li p {margin: 0 0 5px 0}
      .menu-container > ul > li .menu-price {float: left; width: 25%; text-align: right}
        .menu-container > ul > li .menu-price ul {}
          .menu-container > ul > li .menu-price ul li {margin-bottom: 10px}
          .menu-container > ul > li .menu-price ul li:last-child {margin-bottom: 0}
            .menu-container > ul > li .menu-price ul li span.var-name {font-weight: bold; font-size: 0.8rem; line-height: 0.8rem}
            .menu-container > ul > li .menu-price ul li span {display: block; text-align: right}

    a.menu-download-dinein,
    a.menu-download-takeaway {display: block; color: #fff; font-family: 'osaka'; background: rgba(0, 0, 0, 0.7) url(../images/char-white.png) 20% 50% no-repeat; margin-bottom: 15px; height: 60px; line-height: 60px; text-align: center}
    a.menu-download-takeaway {background: rgba(0, 0, 0, 0.7) url(../images/char-2-white.png) 20% 50% no-repeat}
    p.price-change {display: block; color: #fff; font-family: 'osaka'; background: rgba(0, 0, 0, 0.7); margin-bottom: 15px; line-height: 1; text-align: center; padding: 20px;}


    body.menu .left-column {}
      body.menu .left-column .menu-links-container {padding: 30px; background-color: rgba(0, 0, 0, 0.7)}
        body.menu .left-column .menu-links-container ul {margin: 0; padding: 0}
          body.menu .left-column .menu-links-container li {margin: 0; padding: 0; background: none; list-style: none}
            body.menu .left-column .menu-links-container li a {display: block; color: #fff; text-decoration: none; padding: 10px}
            body.menu .left-column .menu-links-container li:nth-child(2n) a {background-color: #fff; background-color: rgba(255, 255, 255, 0.1)}
            body.menu .left-column .menu-links-container li:hover a,
            body.menu .left-column .menu-links-container li.active a {color: #FFB400}
          
          body.menu .left-column .menu-links-container li a span {display: none}

.chilli-container {display: inline-block; overflow: hidden; vertical-align: middle}
.chilli {float: left; display: block; height: 16px; width: 16px; margin-right: 2px; background: transparent url(../images/icon-chilli.png) 0 0 no-repeat; text-indent: -9999em}

.special-item {}
  .special-item .special-item-inner {padding: 30px; background-color: #000; background-color: rgba(0, 0, 0, 0.7)}
    .special-item .section-content {background-color: #fff; background-color: rgba(255, 255, 255, 0.5); padding: 20px}


.footer-banner {background-color: #000; background-color: rgba(0, 0, 0, 0.8); padding: 50px 0; width: 100%; overflow: hidden}
  .footer-banner-inner {position: relative; left: 50%}
    .footer-banner ul {margin: 0; padding: 0; height: 100%; overflow: hidden}
      .footer-banner ul li {margin: 0 60px 0 0; padding: 0; background: none; list-style: none; width: 300px; float: left}
      .footer-banner ul li:last-child {margin: 0}
        .footer-banner ul li a {display: block; width: 100%; height: 100%}
          .footer-banner ul li a img {display: block; width: 100%; height: auto; margin: 0}

#footer {background-color: #000; background-color: rgba(0, 0, 0, 0.9); padding: 0 0 30px 0}
  #footer-inner {}
  #footer * {color: #fff}
  
  #footer input,
  #footer textarea {}

    .menu-main-menu-container {margin-bottom: 30px}
      .menu-main-menu-container ul {overflow: hidden}
        .menu-main-menu-container ul li {float: left; margin-right: 10px}
          .menu-main-menu-container ul li a {display: block; text-transform: uppercase; padding: 0 15px; height: 30px; line-height: 30px; background-color: #000; background-color: rgba(0, 0, 0, 0.8); color: #fff; transition: color 0.5s; font-size: 1.6em; font-family: 'osaka'}
          .menu-main-menu-container ul li:hover a {color: #FFB400 !important}
          .menu-main-menu-container ul li.current-menu-item a,
          .menu-main-menu-container ul li.current_page_ancestor a {color: #FFB400 !important; font-size: 1.8em}

.arrow-top {display: block; position: fixed; width: 40px; height: 40px; bottom: 20px; right: 20px; background: transparent url(../images/arrow-top.png) 0 0 no-repeat; background-size: 40px 40px; text-indent: -9999em; text-decoration: none; z-index: 2000}

/* CUSTOM */
  .sections-home {}
    .sections-home .image a {filter: grayscale(0); transition: filter 0.5s}
    .sections-home .image a:hover {filter: grayscale(100%)}


.hidden {display: none !important}
.align-left {text-align: left}
.align-center {text-align: center}
.align-right {text-align: right}
.margin-bottom {margin-bottom: 20px}