/*
  Theme Name: Eastridge Entertainment Precinct
  Author: Stephen Arias, Lucas Jordan
  Description: Styles for Eastridge Entertainment Precinct for KFT
  Version: 0.0.1
  Copyright: Raremedia Pty Ltd (Andrew Davidson)'
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Default Nav Structure
# Site Navigation - LHS
# Group Navigation - RHS
# Mobile Responsive Menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
    # Default Nav Structure
--------------------------------------------------------------*/

.nav-bar {
    background-color: rgba(0, 0, 0, 0.4);
    min-height:76px;
}

#nav-primary {
    width: 100%;
    height: auto;
}
.nav {
    position: relative;
}

 ul.nav {
    list-style: none;
    list-style-type: none;
    display: block;
    position: relative;
    padding: 0;
    margin: 0px;
}

.nav li {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
}

.nav li > a {
    display:block;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color:#fff;
    text-decoration: none;
}

/*--------------------------------------------------------------
    # Site Navigation - LHS
--------------------------------------------------------------*/
.nav-site {
    float:left;
    display: block;
    position: relative;
    width: 100%;
}
.nav-site ul {
    margin: 14px 22px;
}
.responsive-menu {
    display: none;
    position: relative;
    padding-left: 1.25em;
    cursor: pointer;
    margin: 0;
    width: 60px;
    height: 60px;
    pointer-events: auto;
}
.responsive-menu:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 25px;
    width: 1.2em;
    height: 0.15em;
    background: #ffffff;
    box-shadow:
    0 0.36em 0 0 #ffffff,
    0 0.7em 0 0 #ffffff;
}
.responsive-right {
    display: none;
    position: absolute;
    right: 15px;
    top: 20px;
    padding: 0;
    margin: 0;
    z-index: 999;
}
.responsive-right a,
.responsive-right a:link,
.responsive-right a:visited,
.responsive-right a:hover,
.responsive-right a:focus,
.responsive-right a:active {
    text-decoration: none;
    border: none;
    outline: none;
    padding: 6px 12px;
    margin: 0;
    border: solid 1px #FF0000;
    color: #ff0000;
}
.nav-site .nav {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}
.nav-site .nav li {
    display: inline-block;
    position: relative;
}
.nav-site li.item a,
.nav-site li.item a:link,
.nav-site li.item a:visited  {
    font-size: 15px;
    margin: 0;
    padding: 12px 14px 0px;
    color: #ffffff !important;
}

.nav-site li.item a span,
.nav-site li.item a:link span,
.nav-site li.item a:visited span
 {
    padding-bottom: 7px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color:transparent;
}

.nav-site li.item a.active span,
.nav-site li.item a:hover span{
    opacity: .8;
    border-bottom-color:#fff;
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
  }
.nav-site .carne-grill .button.outline {
    border: 1px solid #ff0000;
}
.nav-site .precinct-bar .button.outline {
    border: 1px solid #a87543;
}
.nav-site .bosses-boots .button.outline {
    border: 1px solid #e59a00;
}
.nav-site .carne-grill a.button:hover,
.nav-site .carne-grill button.button:hover,
.nav-site .carne-grill input.button:hover,
.nav-site .carne-grill a.button:focus,
.nav-site .carne-grill button.button:focus,
.nav-site .carne-grill input.button:focus,
.nav-site .carne-grill a.button:active,
.nav-site .carne-grill button.button:active,
.nav-site .carne-grill input.button:active {
    background-color: rgba(225, 0, 4, 1);
}

.nav-site .precinct-bar a.button:hover,
.nav-site .precinct-bar button.button:hover,
.nav-site .precinct-bar input.button:hover,
.nav-site .precinct-bar a.button:focus,
.nav-site .precinct-bar button.button:focus,
.nav-site .precinct-bar input.button:focus,
.nav-site .precinct-bar a.button:active,
.nav-site .precinct-bar button.button:active,
.nav-site .precinct-bar input.button:active {
    background-color: rgba(226, 137, 32, 1);
}

.nav-site .bosses-boots a.button:hover,
.nav-site .bosses-boots button.button:hover,
.nav-site .bosses-boots input.button:hover,
.nav-site .bosses-boots a.button:focus,
.nav-site .bosses-boots button.button:focus,
.nav-site .bosses-boots input.button:focus,
.nav-site .bosses-boots a.button:active,
.nav-site .bosses-boots button.button:active,
.nav-site .bosses-boots input.button:active {
    background-color: rgba(241, 90, 36, 1);
}


/*--------------------------------------------------------------
    # Group Navigation - RHS
--------------------------------------------------------------*/
.nav-secondary {
    display: block;
    position: fixed;
    right: 0;
    height: auto;
    z-index: 110;
}
.nav-group {
    float:right;
    margin-right: 5px;
}
.nav-group li {
    display: inline-block;
    position: relative;
    width: 118px;
    height: 65px;
    background-color: rgba( 0, 0, 0, 0.2 );
    margin-top:5px;
    margin-left:5px;
}
.nav-group .logo-box {
    width: 118px;
    height: 65px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: auto;
    z-index: -1;
}
.nav-group li svg {
    opacity: 0.4;
}
.nav-group #CarneGrillLogoSmall {
    width: 84px;
    height: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: auto;
}
.nav-group #precinctBarLogoSmall {
    width: 77px;
    height: 46px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: auto;
}
.nav-group #bossesBootsLogoSmall {
    width: 82px;
    height: 56px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: auto;
}
.nav-group li.active {
    background-color: rgba( 0, 0, 0, 0 );
    z-index: 112;
}
.nav-group li.active svg {
    opacity: 1;
}
#carne-grill .nav-group .progressBar {
    fill: none;
}
/* #secondary view progress bar stroke colour */
#carne-grill #logo-progress-outline {
    stroke: #ff0000;
}
#precinct-bar #logo-progress-outline {
    stroke: #a87543;
}
#bosses-boots #logo-progress-outline {
    stroke: #e59a00;
}
.nav-2, .nav-3 {
    display: none;
}
/*--------------------------------------------------------------
    # Mobile Responsive Menu
--------------------------------------------------------------*/
@media only screen and ( min-width: 1010px ) and (max-width : 1142px) {
    .nav-secondary {
        width: 38%;
        left: 62%;
    }
    .nav-site li.item a, .nav-site li.item a:link, .nav-site li.item a:visited {
        padding: 12px 12px 0px;
    }
}
@media only screen and ( min-width: 931px ) and (max-width : 1009px) {
    .nav-secondary {
        width: 41%;
        left: 59%;
    }
    .nav-site li.item a, .nav-site li.item a:link, .nav-site li.item a:visited {
        padding: 12px 5px 0px;
    }
}
/* Mobile Responsive Layout for below 930 */
@media only screen and (max-width : 1024px) {
    /* General Mobile Responsive Styles */

    header{
        pointer-events: none;
        z-index: 900;
        display: block;
        position: fixed;
        bottom: 0;
    }
    header a {
        pointer-events: auto;
    }
    header.nav-bar {
        background-color: transparent;
        z-index: 900;
    }
    #nav-primary {
        height: 100%;
        pointer-events: none;
        z-index: 900;
    }
    header .responsive-menu, .responsive-right {
        display: block;
    }
    header .responsive-menu {
        margin: 0;
    }

    /* Nav bar size LHS becomes hamburger menu @ bottom of page */
    header .nav-site {
        display: block;
        width: 100%;
        min-height: 60px;
        position: absolute;
        bottom: 370px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        margin: 0;
        float: none;
        background-color: rgba( 0, 0, 0, 0.8 );
        pointer-events: all;
        cursor: pointer;
        z-index: 900;
    }
    header .nav-site:focus { outline: none; }
    header .nav-site .nav {
        display: none;
        position: absolute;
        top: -294px;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        background-color: rgba( 0, 0, 0, 0.9 );
        pointer-events: none;
        border-bottom:1px solid #333;
    }
    header .nav-site .nav.open {
        display: block;
        z-index: -1;
    }
    header .nav-site .nav li {
        display: block;
        width: 100%;
        padding: 0;
        margin: 6px 0 6px 0;
        pointer-events: none;
    }
    header .nav-site .nav li,
    header .nav-site .nav-1 .item-01,
    header .nav-site .nav-2 .item-01,
    header .nav-site .nav-3 .item-01 {
        border: none;
        outline: none;
    }
    header .nav-site .nav  .button.outline {
        background-color: transparent;
        border: none;
    }
    header .nav-site .nav .item-bookonline,
    header .nav-site .nav .item-enquiry {
        display:none;
    }
    .nav-site li.item a,
    .nav-site li.item a:link,
    .nav-site li.item a:visited {
        padding: 6px 0px 4px;
    }
    .nav-site li.item a.active span,
    .nav-site li.item a:hover span {
        border-bottom: solid 1px transparent;
    }
    .nav-site li.item a > span,
    .nav-site li.item a:link > span,
    .nav-site li.item a:visited > span,
    .nav-site li.item a:hover > span,
    .nav-site li.item a:focus > span,
    .nav-site li.item a:active > span{
        display: block;
        border-bottom-width: 1px;
        color:#fff;
    }
    .nav-site li.item a:hover > span,
    .nav-site li.item a:focus > span,
    .nav-site li.item a:active > span{
        display: block;
        border-bottom: solid 1px #fff;
    }
    /* Navbar group ( SVG Site icons ) becomes top bar navigation */
    .nav-secondary {
        display: block;
        position: fixed;
        float: none;
        width: 100%;
        left: 0;
        z-index: 110;
        pointer-events: none;
    }
    .nav-secondary a,
    .nav-secondary a:link {
        pointer-events: all;
    }
    .nav-group {
        display: block;
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
        background-color: rgba( 0, 0, 0, 0.8 );
    }
    .nav-group li {
        background-color: transparent;
    }
    .nav-group .nav li:not( :first-of-type ) {
        float: right;
        width: 94px;
        height: 50px;
        margin: 12px 5px 0 0 !important;
    }
    .nav-group .nav li:not( :first-of-type ) .logo-box {
        width: 92px;
        height: 50px;
    }
    .nav-group .nav li:not( :first-of-type ) #bossesBootsLogoSmall {
        width: 67px;
        height: 41px;
    }
    .nav-group .nav li:not( :first-of-type ) #precinctBarLogoSmall {
        width: 62px;
        height: 31px;
    }
    .nav-group .nav li:not( :first-of-type ) #CarneGrillLogoSmall {
        width: 69px;
        height: 35px;
    }
    .page .nav-bar{
        display: none;
        visibility: hidden;
    }
    .nav-group li svg {
        opacity: 0.6;
    }
}
/* NOTE: !Important this media query and property is used to tell JS when we want our mobile responsive to kick in */
@media only screen and (max-width : 1024px) {
    .responsive-menu {
        padding-right: 1px;
    }
    .responsive-right a {
        color:#fff !important;
    }
}
@media only screen and (max-width : 380px) {
    .nav-group .nav li:not( :first-of-type ) {
        width: 88px;
    }
    .nav-group .nav li:not( :first-of-type ) .logo-box {
        width: 86px;
    }
}