/*!
 *  Stunnplate nav.css
 *  Version: 1
 */
/*
 *  Last Updated: 11/11/15
 *  By: Adam
 *  
 *  Notes:
 *  Flex nav layout
 *
 *  Dependencies:
 *  core/default.1.1.css; - Requires Show/Hide Media Queries
 * 
 */

/*-------------------------------------------------------*/
/*- MAIN MENU                                           -*/
/*-------------------------------------------------------*/

.flex-nav {
  /*height:100%;*/
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content:flex-start;
      -ms-flex-pack:start;
          justify-content:flex-start;
  padding:0 16px;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
}


/*.flex-nav > div {align-self:center;}*/
.flex-nav > nav {
    /*align-self:center;*/
    -webkit-flex-grow:1;
        -ms-flex-positive:1;
            flex-grow:1;

   display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content:flex-end;
      -ms-flex-pack:end;
          justify-content:flex-end;}

.flex-nav .logo {
  margin-right:auto;
  padding:0 0 0 16px;
  line-height:0;
}
.flex-nav .logo a {padding:0; display:inline-block;}

.flex-ul {
    display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content:flex-end;
      -ms-flex-pack:end;
          justify-content:flex-end;
  
}

#menu-button{
    flex 0 0 auto;
    -webkit-align-self:center;
    flex 0 0 auto;
        -ms-flex-item-align:center;
    flex 0 0 auto;
            align-self:center;
 /*   width:48px;
    height:48px;*/
    position:relative;
}
/*#menu-button span {display:block; top:0; bottom:0; left:0; right:0; font-size:0; color:white; padding:0; line-height:0; position:absolute;}
#menu-button span span {height:4px; width:30px; margin:-2px auto 0 auto; background:white; top:50%; position:absolute; display:block; overflow:visible;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;}

#menu-button > span:before,
#menu-button > span:after {content:""; width:30px; height:4px; background:white; position:absolute; left:50%; margin-left:-15px;
    transition-duration: 200ms;
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#menu-button > span:before {top:12px;}
#menu-button > span:after {bottom:12px;}

#menu-button.close span span {opacity:0;}
#menu-button.close > span:before {top:22px; -webkit-transform:rotate(45deg) translateZ(0); transform:rotate(45deg) translateZ(0); -ms-transform:rotate(45deg);}
#menu-button.close > span:after {bottom:22px; -webkit-transform:rotate(-45deg) translateZ(0); transform:rotate(-45deg) translateZ(0); -ms-transform:rotate(-45deg);}*/

/*#menu-button a {display:block; top:0; bottom:0; left:0; right:0; font-size:0; color:white; padding:0; line-height:0;}*/

#nav {background-color:transparent; padding:0; margin:0;}

nav ul.container {margin-bottom:0;}

nav ul {
    margin: 0;
    padding: 0; 
    width:100%;
}

nav ul li {
    -mob-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    max-height:none;
    overflow:hidden;
}

nav a {
    display: block;
    /*margin-bottom: 10px;*/
    padding: 16px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    /*color: white;*/
    /*background: #CCCCCC;*/
}

nav a:hover,
nav a:visited {
    /*color: white;*/
}

nav a:hover {
    text-decoration: underline;
}



/*-------------------------------------------------------*/
/*- MEDIA QUERIES                                       -*/
/*-------------------------------------------------------*/

/*-------------------------------------------------------*/
/*- 1170 Desk Wide                                      -*/
/*-------------------------------------------------------*/

@media only screen and (max-width: 1170px) {

    nav {
        
        /*width: 38%;*/
    }

}
/*-------------------------------------------------------*/
/*- 830                                                 -*/
/*-------------------------------------------------------*/
@media only screen and (max-width: 830px) { 

}

/*-------------------------------------------------------*/
/*- 768 Tab Portrait                                    -*/
/*-------------------------------------------------------*/
@media only screen and (max-width: 768px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    .flex-nav {-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
    .flex-nav .logo {-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}
    .flex-ul {-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column;}
    .flex-ul li {-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}

    nav a {
/*        float: left;
        width: 27%;
        margin: 0 1.7%;
        padding: 25px 2%;
        margin-bottom: 0;*/
    }

    nav li {display:inline-block;  width:100%;}

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }

}

/*-------------------------------------------------------*/
/*- 720                                                 -*/
/*-------------------------------------------------------*/
@media only screen and (max-width: 720px) {
    
}

/*-------------------------------------------------------*/
/*- 630                                                 -*/
/*-------------------------------------------------------*/
@media only screen and (max-width: 630px) {

}

/*-------------------------------------------------------*/
/*- 767 Mobile                                          -*/
/*-------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    nav ul li{max-height:0px;
    -mob-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;}}
    nav ul.open li{max-height:100px;}
}