body {
    font-family: coresansnr, 'comic sans ms';
    font-weight: 200;
    
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
    /* setting to enable kerning and ligatures in text smaller than 20px */
    text-rendering: optimizeLegibility;
    /* prevent moblie from changing font sizes on re-orindention */
    -webkit-text-size-adjust: 100%;
    
   
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    
    background-color: white;
    
    padding-bottom: 10px;   

}
.fractions { font-feature-settings: "frac"; }

@media (min-width: 1025px){
    nav{  
        padding:  0 75px 0 103px;
    }
    nav.showmenu {  
        padding-top: 109px;
    }

    @keyframes fadeOut {
    0% {
       opacity: 1;
        height:2000%;
         padding-top: 109px;
        
    }
    40% {
        opacity: 1;
        height:2000%;
         padding-top: 109px;
    }
      99% {
        height:2000%;
        padding-top: 109px;
    }

    100% {
        opacity: 0;
        height:0;
        padding-top: 0px;
    }
}


    @-webkit-keyframes fadeOut {
    0% {
       opacity: 1;
        height:2000%;
         padding-top: 109px;
        
    }
    40% {
        opacity: 1;
        height:2000%;
         padding-top: 109px;
    }
      99% {
        height:2000%;
        padding-top: 109px;
    }

    100% {
        opacity: 0;
        height:0;
        padding-top: 0px;
    }
}

     .menulist{
        overflow-x: hidden;

    }
    .menutrigger{
        width:23px;
        height:23px;
        font-size: 12px;
        text-align: center;
        line-height:23px;
        left:75px;
        top:109px;
        transition: opacity 0.1s ease-out;
        background-color: #585858;
    }
    
    .breadarrow{
        font-family: fontawesome, 'comic sans ms';
        font-size: 12px !important;
        line-height: 23px;
            display: inline-block;
        text-align: center;
        width:13px;
    }
    
    .detailsarrow{
        font-family: fontawesome, 'comic sans ms' !important;
        font-size: 12px !important;
        line-height: 23px !important;
        display: inline-block !important;
        text-align: center !important;
        width:10px;
    }

    .container{
        height:100%;
        max-width: 1500px;
        margin: 0 75px 0 75px;
        padding-top: 110px;
        position: relative;
    }
    .breadspacer{
        display: inline-block;
        float:left;
        width:28px;
        height:24px;
    }
    .breadcrumb{
        margin-left: 22px;
        padding-left: 5px;
        overflow-x: hidden;
        float: left;
    }
    
    a:link{
        font-size: 15px;
        line-height: 22px;
    }

    a:visited{
        font-size: 15px;
        line-height: 22px;
    }
    
    a:hover{
        font-size: 15px;
        line-height: 22px;
    }

    a:active{
        font-size: 15px;
        line-height: 22px;
    }
    
    
    h1{     
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 80px;  

    }
          .line{
        width:100%;
         border-top: solid 1px #f4f4f4;
        clear:both;
        height:10px;
    }
    
        .intro {
         text-align: left;
        width:72%;
      float:left;
          font-size: 23px;
        line-height: 138%;
        font-weight: 200;
    }
    
    .noscroll{
        overflow: hidden;
        padding-right: 15px;
        
    }
            /*footer*/
    .shareblock{
        font-weight: 300;
        width: 26%;
        float: right;
        height:23px;
        font-size: 15px;
        line-height: 24px;
        transform: translateY(-1px);
        text-align: right;
        color:#b2b2b2;
    
    }
  
    
    .shareblock span{
        font-size: 15px;
        display: inline-block;
       
           transform: translateY(-6px);
      
      }
    .share:link{
        display:inline-block;
        opacity: 1;
        width:23px;
        height:23px;
        transition: opacity 0.1s ease-out;
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 10%;
     margin-left: 4px;
  float:right;
    }
    .share:hover{
        opacity: 1;
        width:23px;
        height:23px;
        text-decoration:none;
        border-bottom: solid 0px rgba(0, 0, 0, 0.2);
        transition: background-color 0.2s ease-in;
    }
    .share:active{
        opacity: 1;
    }

}

@media (min-width: 1600px){
    .container{
        margin: 0 auto 0 auto;
    }
    .menutriggerContainer{
         margin: 0 auto 0 auto;
                height:100%;
        max-width: 1500px;

        position: relative;
    }
        .menutrigger{

        left:0px;
            transform: translateX(3px);

    }
       .menulist{  
      
               margin: 0 auto 0 auto;
        max-width: 1460px;
    }
    .menutriggeron{
        transform:translateX(8px);
    }
    
     .breadspacer{

        width:32px;

    }
    
      .breadcrumb{
        margin-left: 27px;
   
    }
  
 

}

/*tablet ipad 3-4 target 768x1024 */
@media (min-width: 601px) and (max-width:1024px){
    nav {  
        padding:  0 10% 0 10%;
        }
    nav.showmenu {  
        padding-top: 109px;
    }    
    
 
       @keyframes fadeOut {
    0% {
       opacity: 1;
        height:2000%;
         padding-top: 109px;
        
    }
    40% {
        opacity: 1;
        height:2000%;
         padding-top: 109px;
    }
      99% {
        height:2000%;
        padding-top: 109px;
    }

    100% {
        opacity: 0;
        height:0;
        padding-top: 0px;
    }
}


    @-webkit-keyframes fadeOut {
    0% {
       opacity: 1;
        height:2000%;
         padding-top: 109px;
        
    }
    40% {
        opacity: 1;
        height:2000%;
         padding-top: 109px;
    }
      99% {
        height:2000%;
        padding-top: 109px;
    }

    100% {
        opacity: 0;
        height:0;
        padding-top: 0px;
    }
    }
    

   .breadarrow{
        font-family: fontawesome, 'comic sans ms';
        font-size: 13px ;
        line-height: 23px;
        display: inline-block;
        text-align: center;
        width:13px;
    }
    .detailsarrow{
        font-family: fontawesome, 'comic sans ms' !important;;
        font-size: 13px !important;
        line-height: 23px !important;;
        display: inline-block !important;;
        text-align: center !important;
        width:13px;
    }
    .menulist{
        margin-left: 25px;
        padding-left: 5px;
        overflow-x: hidden;
    }
    .menutrigger{
        width:25px;
        height:25px;
        font-size: 12px;
        text-align: center;
        line-height:25px;
        left:10%;
        top:113px;
    }
  
    .container{
        height:auto;
        width:80%;
        margin: 0 auto;
        position: relative;
        padding-top: 110px;
    }
     .breadspacer{
        display: inline-block;
        float:left;
        width:30px;
        height:30px;
    }
    
    .breadcrumb{padding-left: 30px;}
    
    a:link{
        font-size: 17px;
        line-height: 32px;
    }

    a:visited{
        font-size: 17px;
        line-height: 32px;
    }
    
    a:hover{
        font-size: 17px;
        line-height: 32px;
    }

    a:active{
        font-size: 17px;
        line-height: 32px;
    }
     p a:link{
        font-weight:200;
    }
     p a:visited{
        font-weight:200;
    }
     p a:hover{
        font-weight:200;
    }
     p a:active{
        font-weight:200;
    }
    h1{
        font-size: 17px;
        line-height: 32px;
        margin-bottom: 60px;
       
    }
        .intro {
        text-align: left;

        margin-bottom: 40px;
      
        width:90%;
        float:left;
        padding-top: 2px;
        clear:both;
            font-size: 19px;
        line-height: 150%;
        font-weight: 200;
    }

    .noscroll{
        overflow: hidden;
        padding-right: 15px;
    }
    .categorylink {display: none !important;}
     /*footer*/
    .shareblock{
        font-weight: 300;
        float:right;
        transform: translateY(3px);
        -webkit-transform: translateY(3px);
        font-size: 15px;
        line-height: 24px;
       text-align: right;
        color:#b2b2b2;
    }
      .shareblock span{
        font-size: 17px;
        display: inline-block;
        height:17px;
    }
    .share:link{
        display:inline-block;
        opacity: 1;
        width:25px;
        height:25px;
        transition: opacity 0.1s ease-out;
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 10%;
         float:right;
        margin-left: 5px;
    }

  
}
    

/*mobile */
@media (max-width:600px){ 
    nav {  
        padding: 0 8% 0 8%;
    }
    nav.showmenu {  
        padding-top: 77px;
    }
   .breadarrow{
        font-family: fontawesome, 'comic sans ms';
        font-size: 12px;
        display: inline-block;
        text-align: center;
        width:10px;
    }
    @keyframes fadeOut {
    0% {
       opacity: 1;
        height:2000%;
         padding-top: 77px;
        
    }
    40% {
        opacity: 1;
        height:2000%;
         padding-top: 77px;
    }
    99% {
        height:2000%;
        padding-top: 77px;
    }

    100% {
        opacity: 0;
        height:0;
        padding-top: 0px;
    }
   
    }

    @-webkit-keyframes fadeOut {
    0% {
       opacity: 1;
        height:2000%;
         padding-top: 77px;
        
    }
    40% {
        opacity: 1;
        height:2000%;
         padding-top: 77px;
    }
    99% {
        height:2000%;
        padding-top: 77px;
    }

    100% {
        opacity: 0;
        height:0;
        padding-top: 0px;
    }
    }
  
     .menulist{
        margin-left: 30px;
        padding-left: 5px;
        overflow-x: hidden;
    }

    .menutrigger{
        width:30px;
        height:30px;
        font-size: 12px;
        text-align: left;
        line-height:30px;
        left:8%;
        top:73px;
    }
  
 
      .breadspacer{
        display: inline-block;
        float:left;
        width:37px;
        height:37px;
    
    }
    .container{
        height:auto;
        width:84%;
        margin: 0 auto;
        position: relative;
        padding-top: 77px;
        overflow: hidden;
        padding-bottom: 80px;
    }
      
    .breadcrumb{
        clear:both;
        margin-left: 30px;
        padding-left: 7px;
        overflow-x: hidden;
        float: left;
    }
     a:link{
        font-size: 15px;
        line-height: 22px;
    }

    a:visited{
        font-size: 15px;
        line-height: 22px;
    }
    
    a:hover{
        font-size: 15px;
        line-height: 22px;
    }

    a:active{
        font-size: 15px;
        line-height: 22px;
    }
    
    p a:link{
        font-weight:200;
    }
     p a:visited{
        font-weight:200;
    }
     p a:hover{
        font-weight:200;
    }
     p a:active{
        font-weight:200;
    }
    h1{ 
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 51px;
    }
.intro {
        clear:both;
            font-size: 17px;
        line-height: 24px;
        font-weight: 200;
        text-align: left;
        width: 100%;
         border-top: solid 1px #f4f4f4;
          border-bottom: solid 1px #f4f4f4;
        padding: 24px 0 24px 0;
    }
    .categorylink {display: none !important;}
    
    .noscroll{
        width:100%;
        position: fixed;
        overflow:hidden;
    }
    .detailsarrow{
        font-family: fontawesome, 'comic sans ms' !important;;
        font-size: 13px !important;
        line-height: 23px !important;
        text-align: center !important;
        width:13px;
        display:inline-block;
    }
     /*footer*/
    .shareblock{
        font-weight: 300;
        width:auto;
        height:30px;
        position: absolute;
        bottom:40px;
        left:0px;
            font-size: 15px;
        line-height: 24px;
       text-align: right;
        color:#b2b2b2;
  
    }

    .share:link{
        display:inline-block;
          opacity: 1;
        width:30px;
        height:30px;
        transition: opacity 0.1s ease-out;
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 10%;
        float:right;
        margin-left: 5px;
        
    }
    body{
        padding-bottom: 100px;
    }

}

/**************************DEFAULT SETTINGS */


/* TOUCH REPLACEMENTS FOR HOVER */
body.touchon a:link{opacity: 1}
body.touchon a:visited{}
body.touchon a:hover{opacity: 1; border-bottom: none;
    }
body.touchon a:active{opacity: 0.2 !important;}


body.touchon nav a:hover{border-bottom: none; }
body.touchon nav a:active{opacity: 1;}

body.touchon .facebook{
    background-color: hsla(221, 0%, 41%, 0.3); 
}
body.touchon .facebook:active{
    background-color: #3B5998; 
}
  
body.touchon .googleplus{
    background-color: hsla(5, 0%, 57%, 0.3);
}
body.touchon .googleplus:active{
    background-color: rgba(222, 83, 70, 1);
}
  
body.touchon .twitter{
    background-color: hsla(203, 0%, 53%, 0.3);
}
body.touchon .twitter:active{
    background-color: rgba(29, 161, 242, 1);
}
     
body.touchon .pinterest{
    background-color: hsla(353, 0%, 39%, 0.3);
}
body.touchon .pinterest:active{
    background-color: #BD081C;
}
    
body.touchon .tumblr{
    background-color: hsla(217, 0%, 29%, 0.3);
}
body.touchon .tumblr:active{
    background-color: #39475D;
}
  
body.touchon .flipboard{
    background-color: hsla(358, 0%, 51%, 0.3);
}
body.touchon .flipboard:active{
    background-color: #E31F26;
}



body.touchon .menutrigger:hover{
    opacity: 1 !important;
}
body.touchon .menutrigger:active{
       opacity: 1 !important;
}


       
   
   
  

/* END TOUCH REPLACEMENTS */


/* DEFAULT ROLLOVERS */


 .facebook{
    background-color: hsla(221, 0%, 41%, 0.3);
    background-image: url(../images/social-media/icons/facebook-icon.png);
}
.facebook:hover{
    background-color: #3B5998; 
    }
.googleplus{
    background-color: hsla(5, 0%, 57%, 0.3);
    background-image: url(../images/social-media/icons/google-plus-icon.png);
}
.googleplus:hover{
    background-color: #DE5346; 
    }
.twitter{
    background-color: hsla(203, 0%, 53%, 0.3);
    background-image: url(../images/social-media/icons/twitter-icon.png);
}
.twitter:hover{
    background-color: rgba(29, 161, 242, 1);
}
.pinterest{
    background-color: hsla(353, 0%, 39%, 0.3);
    background-image: url(../images/social-media/icons/pinterest-icon.png);
}
.pinterest:hover{
    background-color: #BD081C;
}
    
.tumblr{
    background-color: hsla(217, 0%, 29%, 0.3);
    background-image: url(../images/social-media/icons/tumblr-icon.png);
}
.tumblr:hover{
    background-color: #39475D;
}
    
.flipboard{
    background-color: hsla(358, 0%, 51%, 0.3);
    background-image: url(../images/social-media/icons/flipboard-icon.png);
}
.flipboard:hover{
    background-color: #E31F26;
}


strong, b{
    font-weight: 300;
}
.fractionSpan {
    font-feature-settings: 'frac' 1;
    -moz-font-feature-setting: 'frac=1';
}
.hide-imgs{display:none;}
   

a:link{
    font-weight: 300;
    opacity: 1;
    text-decoration:none;
    border-bottom: solid 1px rgba(0, 0, 0, 0);
    transition: opacity 0.1s ease-out, border 0.1s ease-out;
}

a:visited{
    font-weight: 300;
    opacity: 1;
    text-decoration:none;
    border-bottom: solid 1px rgba(0, 0, 0, 0);
}
a:hover{
    font-weight: 300;
    opacity: 0.8;
    text-decoration:none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s ease-in, border 0.2s ease-in;
}

a:active{
    font-weight: 300;
    opacity: 1;
    text-decoration:none;
    border-bottom: solid 1px rgba(0, 0, 0, 0);
}



nav a:hover{ 
     border-bottom: solid 1px rgba(255, 255, 255, 0.2);

    }




li {
    list-style-type:none;
    height:100%;
    opacity:0;
    float:left;
}










/* hamburg style see responsive opacity: 0.3; styles */ 
.menutrigger {
    position: absolute;
    font-family: 'fontawesome';
    cursor: pointer;
    text-align: center;
    cursor: pointer;
    border-radius: 10%;
   z-index: 500;
    display: inline;
    transition: color 0.4s ease-out;
    -webkit-animation: startLoad 1s;
    animation: startLoad 1s;
 background-color: #717171;
}
.menutriggerafterload{
        -webkit-animation: fromFullNavtoOff 1s !important;
     animation: fromFullNavtoOff 1s !important;
}


.menutrigger:hover{
        opacity: 1 !important;
        transition: background-color 0.2s ease-in;
    }

.navonexist + .menutrigger {
    opacity:0;
    transition: opacity 0.3s ease-out;
}

/*gets done when page load AND when full screen nav bar gets shown*/
@-webkit-keyframes toFullScreenNav {
 0% {
        z-index: 500;

    }


    100% {
         z-index: 500;
  
    }
}
@keyframes toFullScreenNav {
 0% {
        z-index: 500;

    }


    100% {
         z-index: 500;
  
    }
}
/*gets called when closing full scren nav bar*/
@-webkit-keyframes startLoad {
     0% {
        z-index: 0;

        
    }
      90% {
         z-index: 0;
        
    }
      91% {
         z-index: 0;
        
    }
 

    100% {
         z-index: 500;
  
    }
}
@keyframes startLoad {
     0% {
        z-index: 0;

        
    }
      90% {
         z-index: 0;
        
    }
      91% {
         z-index: 0;
        
    }
 

    100% {
         z-index: 500;
  
    }
}
@-webkit-keyframes fromFullNavtoOff {
     0% {
        z-index: 500;

        
    }
    10% {
         z-index: 500;
        
    }
    11% {
         z-index: 1;
  
    }
    
    91% {
         z-index: 1;
  
    }
    92% {
         z-index: 500;
  
    }

    100% {
         z-index: 500;
  
    }
}
@keyframes fromFullNavtoOff {
     0% {
        z-index: 500;

        
    }
    10% {
         z-index: 500;
        
    }
    11% {
         z-index: 1;
  
    }
    
    91% {
         z-index: 1;
  
    }
    92% {
         z-index: 500;
  
    }

    100% {
         z-index: 500;
  
    }
}



/* when on this style is attached to body, removes scrolling */ 

/* nav on */ 
nav.showmenu .menulist {
    opacity:1;
    
}



/* *********** PAGE EXIST VIA NAV BAR SCREEN */

/* nav on */ 
.menutriggeron {
    background-color: rgba(255, 255, 255, 0.64) !important;
     -webkit-animation: toFullScreenNav 2.5s  !important;
    animation: toFullScreenNav 2.5s  !important;
   
}
/* these are the hamburg icons*/ 
/* menuon is when full screen navbar is showing */
/* the three lines will be the section colour set in .php */
/* the background will be alpha white */
.menuon  {
     display:block;
    position: absolute;
    top:0px;
    right:0px;
    opacity: 0;
    width:100%;
    height:52px;
 
}
.menutriggeron .menuon {
   opacity: 1;
  
}
/* this is shown when all page content is shown */
.menuoff  {
    display:block;
    position: absolute;
    top:0px;
    right:0px;
    width:100%;
    height:40px;
   opacity: 1;
      transition: opacity 1s;
   
    transition-delay: 0.3s;
}
.menutriggeron .menuoff {
     opacity:0;
    transition-delay: 0s;
    transition: opacity 0s;
}





/*used for start and end of page animatin*/




/*  PAGE TRANSITIONS ****************************/

/* SCREEN BLOCKS FADE IN AND OUT
/* 1 - ONLOAD
    1a nav barscreen fadein 
    START VALUES: */
/* navigation screen off */    
    nav {
      position: absolute;
        z-index: 500;
        width:100%;
        height: 2000%;
        transition: background-color 0.4s ease-out;
    }
  
    /* TRIGger for AMINATION IN navbar.js inialise_nav() function ADDS .navonload */
    .navonload{
        animation: fadeOut 1.2s cubic-bezier(.3,.72,0,.95);
        -webkit-animation: fadeOut 1.2s cubic-bezier(.3,.72,0,.95);
        opacity:0;
        /* has to be 0 else blocks any mouse events*/
        height: 0px;
    }

/*fade in hamburg 
.navonload + .menutrigger {
    opacity:0.5;
    transition: opacity 0.8s cubic-bezier(.3,.72,0,.95);
}
*/
/*2 ON HAMBURG CLICK TO SHOW NAVBAR SCREEN 
    START VALUES: ARE in .navonload class */
    /* trig is in showhidemenu() function which toggles the .showmenu class */
    nav.showmenu {  
        animation: fadeIn1 0.6s cubic-bezier(.3,.72,0,.95);
        -webkit-animation-duration: 0.6s;
        -webkit-animation-name: fadeIn1;
        -webkit-animation-timing-function: cubic-bezier(.3,.72,0,.95);
        -webkit-animation-fill-mode: forwards;
        height:2000%;
        opacity:0.96;
        overflow: hidden;
    
    }
/* 2A ON HAMBURG CLICK TO CLOSE NAVBAR SCREEN 
    START VALUES: ARE in .nav.showmenu  class */
    /* trig is in showhidemenu() function which toggles (ie removes) the .showmenu class */

/* 3 PAGE EXIST FROM BREADCRUMB
    start values are in .navonload*/
    /* trig is in breadcrumbendpage() function which add  the .navonexist class */
   .navonexist{
        animation: fadeIn 0.8s cubic-bezier(.3,.72,0,.95);
       -webkit-animation-duration: 0.8s;
       -webkit-animation-name: fadeIn;
       -webkit-animation-timing-function: cubic-bezier(.3,.72,0,.95);
       -webkit-animation-fill-mode: forwards;
        opacity:1;
        height:2000%;
    }

/* 4 PAGE EXIST FROM NAV screen*/
    /* from changesection() function */
    /* we make nav screen go solid by adding changing opacity directly on html element */
    /* also, change screen to destination section colour using changesection1..4 styles*/
    nav.changesection1 {
        background-color: rgb(0, 0, 0) !important;
        transition: background-color 0.4s ease-in;
    }
    nav.changesection2 {
        background-color: rgb(1, 159, 98) !important;
        transition: background-color 0.4s ease-in;
    }
    nav.changesection3 {
        background-color: rgb(4, 97, 155) !important;
        transition: background-color 0.4s ease-in;
    }
    nav.changesection4 {
        background-color: rgb(62, 62, 62) !important;
        transition: background-color 0.4s ease-in;
    }


    .menuchangesection1 {
       color: rgb(96, 96, 96) !important;
    
    }
    .menuchangesection2 {
        color: rgb(1, 159, 98) !important;
      
    }
    .menuchangesection3 {
       color: rgb(4, 97, 155) !important;
       
    }
    .menuchangesection4 {
        color: rgb(62, 62, 62) !important;
        
    }

    nav.restoresection1 {
       background-color: rgb(96, 96, 96) !important;
    
    }
    nav.restoresection2 {
        background-color: rgb(1, 159, 98) !important;
      
    }
    nav.restoresection3 {
       background-color: rgb(4, 97, 155) !important;
       
    }
    nav.restoresection4 {
        background-color: rgb(62, 62, 62) !important;
        
    }

/* 5 PAGE EXIST FROM A CATEGORY CARD and search*/
    /* from search is in walkscategory.js*/
    /* in endpagefake function which adds .navonexist 
.navonexist + .menutrigger{
    opacity:0;
}
*/

/*  BREADCRUMB & NAV LINKS ANIM *************************/

/* 1 - ONLOAD
    /* breadcrumbs spring out */
    /* controled from a div wrapper with main class of .breadcrumb */
  /* start values in class .breadonload are removed in inialise_nav() function */

   /* end values are */
    li{
        opacity:1;
        /*time taken when page loads */
        transition: transform 0.65s cubic-bezier(0.07, 0.34, 0.15, 1), opacity 0.65s cubic-bezier(0.07, 0.34, 0.15, 1);
        transition: -webkit-transform 0.65s cubic-bezier(0.07, 0.34, 0.15, 1),opacity 0.65s cubic-bezier(0.07, 0.34, 0.15, 1);


    }
  /* end values are */
   h1{
  
        font-weight: 300;
      
        display: inline-block;
        float:left;
        /* time taken for page load */
         -ms-transform: translateX(0px);
        transform: translateX(0px);
       -webkit-transform: translateX(0px);
        transition: transform 0.65s cubic-bezier(0.07, 0.34, 0.15, 1), opacity 0.65s cubic-bezier(0.07, 0.34, 0.15, 1);
        transition: -webkit-transform 0.65s cubic-bezier(0.07, 0.34, 0.15, 1), opacity 0.65s cubic-bezier(0.07, 0.34, 0.15, 1);
    
    }

    /* start values are */
    .breadonload li{
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        opacity:0;
    }
   
  
    /*the title of page */


/*2 ON HAMBURG CLICK TO SHOW NAVBAR SCREEN
/* 2a breadcrumb will fold up */
/* in showhidemenu() .breadonload class is toggled*/
/* these reverse dircetion AND is qucker */
/*no delay on first*/


 .breadonload + h1{
        -ms-transform: translateX(-30px) !important;
    transform: translateX(-30px) !important;
     -webkit-transform: translateX(-30px) !important;
    opacity:0 !important;
        transition: transform 0.25s ease-in, opacity 0.25s ease-in;
        transition: -webkit-transform 0.25s ease-in, opacity 0.25s ease-in;
 
      
    }
/*2b NAVBAR LINKS APPEAR DUE TO */
  /* trig in showhidemenu() function which toggles the .showmenu class, THIS THEN AFFECTS our ul list of links */
 /* nav on, show make links appear */ 
/*start values:*/
    nav li {
        /* default styles, ie nav screen is off */ 
        opacity: 0;
        -ms-transform: translateX(-50px);
        transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        /*time for animation when hamburg is clicked*/
        transition: transform 0.35s cubic-bezier(0.07, 0.34, 0.15, 1),opacity 0.25s cubic-bezier(0.07, 0.34, 0.15, 1);
          transition: -webkit-transform 0.35s cubic-bezier(0.07, 0.34, 0.15, 1), opacity 0.25s cubic-bezier(0.07, 0.34, 0.15, 1);
    }
    nav li:nth-of-type(1) {
        transition-delay: 0.18s;
    }

    nav li:nth-of-type(2) {
        transition-delay: 0.12s;
    }
    nav li:nth-of-type(3) {
        transition-delay: 0.06s;
    }
    nav li:nth-of-type(4) {
        transition-delay: 0s;
    }

    /* end values */
    nav.showmenu li {
        opacity: 1;
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
         transition: transform 0.65s cubic-bezier(0.07, 0.34, 0.15, 1),opacity 0.65s cubic-bezier(0.07, 0.34, 0.15, 1);
         transition: -webkit-transform 0.65s cubic-bezier(0.07, 0.34, 0.15, 1), opacity 0.65s cubic-bezier(0.07, 0.34, 0.15, 1);
        
    }



   nav.showmenu li:nth-of-type(1) {
        transition-delay: 0.25s;
    }

    nav.showmenu li:nth-of-type(2) {
        transition-delay: 0.35s;
    }
    nav.showmenu li:nth-of-type(3) {
        transition-delay: 0.45s;
    }
    nav.showmenu li:nth-of-type(4) {
        transition-delay: 0.55s;
    }



/*3 ON NAV SCREEN EXIST CLICK*/
  /* trig in showhidemenu() function which toggles OFF the .showmenu class, reverting back to original values THIS THEN AFFECTS our ul list of links */
/* nav links should fold up BUT CANT GET TO WORK!!*/


/*4 EXIST PAGE ON NAV SCREEN LINKS */
/* NAV LINKS SHOULD FOLD UP */
/* have clicked a section link so make links fold up */ 
nav.changesection1 li,nav.changesection2 li,nav.changesection3 li,nav.changesection4 li {
   opacity: 0;
    -ms-transform:translateX(-30px);
    transform:translateX(-30px);
    -webkit-transform:translateX(-30px);
    /*these timings for when main nav link is clicked when nav screen is up */
       transition: transform 0.2s ease-out, opacity 0.2s ease-out;
      transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
}

nav.changesection1 li:nth-of-type(1),nav.changesection2 li:nth-of-type(1),nav.changesection3 li:nth-of-type(1),nav.changesection4 li:nth-of-type(1) {
    transition-delay: 0.4s;
}

nav.changesection1 li:nth-of-type(2),nav.changesection2 li:nth-of-type(2),nav.changesection3 li:nth-of-type(2),nav.changesection4 li:nth-of-type(2){
    transition-delay: 0.3s;
}
nav.changesection1 li:nth-of-type(3),nav.changesection2 li:nth-of-type(3),nav.changesection3 li:nth-of-type(3),nav.changesection4 li:nth-of-type(3) {
    transition-delay: 0.2s;
}
nav.changesection1 li:nth-of-type(4),nav.changesection2 li:nth-of-type(4),nav.changesection3 li:nth-of-type(4),nav.changesection4 li:nth-of-type(4) {
    transition-delay: 0.1s;
}



 

@keyframes fadeIn {
     0% {
       opacity: 0;
        height:2000%;
        
    }
  

   
  

    100% {
        opacity: 1;
        height:2000%;
    }
}
@keyframes fadeIn1 {
     0% {
       opacity: 0;
        height:2000%;
        
    }
  
  

    100% {
        opacity: 0.96;
        height:2000%;
    }
}





@-webkit-keyframes fadeIn {
     0% {
       opacity: 0;
        height:2000%;
        
    }
  

  

    100% {
        opacity: 1;
        height:2000%;
    }
}
@-webkit-keyframes fadeIn1 {
     0% {
       opacity: 0;
        height:2000%;
        
    }


    100% {
        opacity: 0.96;
        height:2000%;
    }
}




#debug{
    position: fixed;
    top:0px;
    left:0px;
    width:800px;
    height:30px;
    font-size: 14px;
    color: white;
    background: black;
}
/* DISPLAYING CODE BLOCKS */
code, pre{    
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 90%;
    font-weight: 400;
    line-height: 21px;
     color:#525252;
}
.htmlcode_block{
    padding: 20px;
    border-radius: 2px;
    background-color: #f8f9fa; 
 overflow: auto;
    width:100%;
    margin-bottom: 12px;
}
.htmlcode_comment{
    color: #999;
}
a.demoButton:link{
    display: inline-block;
    border: solid 1px #333;
    border-radius: 2px;
    margin: 5px 0 5px 0;
    text-align: center;
    width:120px;
    height:40px;
    line-height: 40px;
}
a.demoButton:visited{

}
a.demoButton:hover{

}
a.demoButton:active{

}