:root {
    --primary-color: #0076c0;
    --tpi-red: #c51633;
    --transition-time: 650ms;
    --mega-menu-bgcolor: #fff;
    --mega-menu-hover-bgcolor: #efefef;
    --menu-lvl2-hover-bgcolor: #3f3f3f;
}

.whatsmybreakpoint {
    display: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    font-family: "Museo Sans",
        "Univers",
        "Calibri",
        "Arial",
        sans-serif;

    margin: 0;
    min-width:320px;
    padding: 0;
}

/* override material ui */
nav.main-nav ul li {
    float: none;
    text-align:center;
}
nav.main-nav a:focus {
    outline: none;
}
.main-nav {
    color: #fff;
    text-align: center;
    height: auto;
    line-height: normal;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav ul>li>a {
    border: 1px solid transparent;
    border-bottom-color: gray;
    color: #fff;
    display: block;
    padding: .5em .25em;
    text-decoration: none;
}

.main-nav .menu-lvl1 {
    max-height:0;
    overflow:hidden;
    -webkit-transition: max-height 0.5s;
       -moz-transition: max-height 0.5s;
            transition: max-height 0.5s;
}

.main-nav .menu-lvl1.is-open {
    max-height:800px;
}

.main-nav .menu-lvl1>li.has-submenu>a:after,
.main-nav .menu-lvl2>li.has-submenu>a:after {
    content: '  \f280';
    font-family: "Ionicons";
}



.main-nav .menu-lvl1>li>a {
    background: var(--primary-color);
    white-space: nowrap;
    padding-left:1em;
    padding-right:1em;
}

.main-nav .menu-lvl2>li>a {
    background: var(--menu-lvl2-hover-bgcolor);
}

.main-nav .menu-lvl2>.heading {
    display: none;
}

.main-nav .menu-lvl2,
.main-nav .menu-slim {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    background: #fff;
}

.main-nav .menu-lvl2 {
  pointer-events: none;
}

.main-nav .menu-lvl1 li.open .menu-lvl2 {
  pointer-events: all;
}


.main-nav .menu-lvl1>li>a:hover {
    background-color: #0084db;
}

.main-nav .submenu-container>.heading {
    display: none;
}

.main-nav .menu-lvl3,
.main-nav .featured-image,
.main-nav .advert,
.main-nav p {
    display: none;
}

.main-nav .menu-lvl3:not(:last-child) {
    margin-bottom: 1em;
}

.submenu-panel {
    background: #aaa;
}

.main-nav .menu-lvl2 .has-submenu.open .submenu-panel {
    padding: 1em;
}

.main-nav .menu-lvl3>li>a {
    border-bottom-color: transparent;
    padding: 0;
    color: #333;
    font-weight:500;
}

.menu-lvl3>li.heading {
    color: var(--primary-color);
}

/* open submenu */
.main-nav .has-submenu.open .menu-lvl2 {
    opacity: 1;
    visibility: visible;
    max-height: 900000px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    z-index: 100;
}
.main-nav .has-submenu.open .menu-slim {
    opacity: 1;
    visibility: visible;
    max-height: none;
    z-index: 100;
    /* -webkit-box-shadow: none !important;
    box-shadow: none !important; */
}

.main-nav .menu-lvl2 .has-submenu.open .menu-lvl3 {
    display: block;
}

/* 
 * hamburger menu 
 */

.main-nav .nav-toggle {
 background: #0076c0;
 padding: .5em .5em .25em;
}

.main-nav .hamburger .line{
 width: 20px;
 height: 2px;
 background-color: #ecf0f1;
 display: block;
 margin: 5px 0 5px auto;
 -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
}

.main-nav .hamburger:hover{
 cursor: pointer;
}

.main-nav .hamburger.is-active .line:nth-child(2){
 opacity: 0;
}

.main-nav .hamburger.is-active .line:nth-child(1){
 -webkit-transform: translateY(4px) rotate(45deg);
     -ms-transform: translateY(4px) rotate(45deg);
      -o-transform: translateY(4px) rotate(45deg);
         transform: translateY(4px) rotate(45deg);
}

.main-nav .hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-10px) rotate(-45deg);
      -ms-transform: translateY(-10px) rotate(-45deg);
       -o-transform: translateY(-10px) rotate(-45deg);
          transform: translateY(-10px) rotate(-45deg);
}


@media only screen and (min-width:568px) and (max-width:1023px) {
    .main-nav .menu-lvl2 .has-submenu.open .submenu-panel {
        background: #fff;
        padding: 1em;
    }

    .main-nav .menu-lvl2 .has-submenu.open .submenu {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .main-nav .menu-lvl2 .has-submenu.open .submenu.equalwidths {

        align-items: flex-start;
    }

    .main-nav .menu-lvl2 .has-submenu.open .submenu .menu-lvl3:only-of-type {
        text-align: left;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 30%;
        padding-right: 1em;
        margin: 0;
    }

    .main-nav .menu-lvl2 .has-submenu.open .submenu .menu-lvl3:only-of-type li {
        padding: .25em 0;
    }

    .main-nav .menu-lvl2 .has-submenu.open .submenu .menu-lvl3:only-of-type+.featured-image {
        display: block;
        flex-basis: 70%
    }

    .main-nav .menu-lvl2 .has-submenu.open .submenu .menu-lvl3:only-of-type+.featured-image img {
        max-width: 100%;
        height: auto;
    }

    .main-nav .menu-lvl3>li>a {

        padding: .25em;

    }
    .main-nav .menu-lvl2>li>a:hover,
    .main-nav .menu-lvl3>li>a:hover {

        background: var(--mega-menu-hover-bgcolor);
	color:#58595b;

    }

}