@charset "UTF-8";
.mynavigation {
    height: 60px;
    /*background: #262626;*/
    font-family: 'action_manregular', 'Comic Sans MS';
    /*background-color: rgba(38, 38, 38, 0.79);*/
    background-color:#1eaedb;
    /*background-color: #262626;*/
    /*background-color:rgba(98, 51, 51, 0.79)*/
}

.mynav-carbon {
    font-family: 'action_manregular', 'Comic Sans MS';
    display: inline; /*overrides block in main.css*/
    color:#fff; /*Menu colour*/
}
    .mynav-carbon:hover {
        cursor: pointer;
      
    }

    .brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    /*line-height: 70px;*/
    /*line-height: 30px;*/
    text-transform: uppercase;
    font-size: 1.4em;
    top:20px; /*This is set in mycarbon and its also here to stop jump on refresh form*/
      
}
        .brand a, .brand a:visited {
            color: #ffffff;
            text-decoration: none;
           
        }

        .brand:hover {
            cursor: pointer;
            /*background-color: #1eaedb;*/
            background-color: #2581DC;
            width: 130px;
            padding-top: 2px;
            padding-bottom: 2px;
        }

.mynav-container {
  max-width: 1000px;
  margin: 0 auto;
}

#mynavbar {
    float: right;
}
#mynavbar > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#mynavbar > ul >li {
    float: left;
    position: relative;
    padding-left:0px; /*Required as set in main.css*/
}
    #mynavbar > ul > li > a,
    #mynavbar > ul > li > a:visited {
        display: block;
        padding: 0 8px; /*was20 but resized due to number headings - Changed to 8 for bark and line height 32 */
        line-height: 32px; /*removed*/
        padding-top: 18px; /*added (18+10+12) must come to 40px*/
        padding-bottom: 10px;
        /*background: #262626;*/ /*out dah*/
        /*background-color: rgba(38, 38, 38, 0.79);*/
        background-color:#262626;
        color: #ffffff;
        text-decoration: none;
    }
        #mynavbar > ul > li > a:hover,
        #mynavbar > ul > li > a:visited:hover {
            background: #2581DC;
            color: #ffffff;
           top:20px;
        }
        #mynavbar > ul > li > a:not(:only-child):after,
        #mynavbar > ul > li > a:visited:not(:only-child):after {
            padding-left: 4px;
            content: " ▾";
        }
#mynavbar > ul > li > ul > li {
    min-width: 190px;
}
#mynavbar > ul > li > ul > li > a {
    padding: 15px;
    line-height: 20px;
}

.mynav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile mynavigation */
.mynav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  height: 60px;
  width: 60px;
}

@media only screen and (max-width: 798px) {
  .mynav-mobile {
    display: block;
  }
    #mynavbar > ul > li > a,
    #mynavbar > ul > li > a:visited {
        background: #262626;
       color: #ffffff;
        text-decoration: none;
    }
       
    /*#mynavbar {
        width: 100%;
        padding: 60px 0 15px;
    }*/
    /*Required for Story template*/
    #mynavbar {
        width: 100%;
        padding: 60px 0 0px;
        background-color: black;
    }
    #mynavbar > ul {
        display: none;
    }
    #mynavbar > ul > li {
        float: none;
    }
    #mynavbar > ul > li > a {
        /*Reduced for Mobile vertical display*/
        /*padding: 15px;*/
        padding: 10px;
        line-height: 20px;
        font-weight: 500;
    }
    #mynavbar > ul > li > ul > li > a {
        padding-left: 30px;
    }

  .mynav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
    .mynav-list {
        display: block !important;
       
    }
    
}

#mynav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#mynav-toggle span,
#mynav-toggle span:before,
#mynav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#mynav-toggle span:before {
  top: -10px;
}
#mynav-toggle span:after {
  bottom: -10px;
}
#mynav-toggle.active span {
  background-color: transparent;
}
#mynav-toggle.active span:before, #mynav-toggle.active span:after {
  top: 0;
}
#mynav-toggle.active span:before {
  transform: rotate(45deg);
}
#mynav-toggle.active span:after {
  transform: rotate(-45deg);
}

article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}