/*
Responsive Mobile Toggle Menu v1.0
Description: Mobile first responsive toggle menu
Author: Danielle Vautier
*/

/*Page CSS*/

.mainMenu {
    overflow:hidden;
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    float: left;
    
    }
    #toggleMenu, .toggleMenu {
    display: none;
    }
    .toggleMenu {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    }
    #toggleMenu:checked ~ .menu {
    max-height: 600px;
    opacity: 1;
    background-color: #fff;
            overflow:auto;
    }
    .menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    max-height: 0px;
    overflow-y: hidden;
    text-align: center;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }
    .menu li {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    /*display: block;*/
    width: 100%;
    }
    .menu li:hover {
    cursor: pointer;
    }
    .menu a, .menu a:visited {
    text-decoration: none;
    /*display: block;*/
    }
    .menu li:first-child {
    border-left: 0;
    }
    .menu a:hover {
    color:#fff;
    }
    label.menuTitle
    {
        text-align: right;
        font-size: 13px;
        padding: 38px 20px;
        color: #3d3e3f;
        display: block;
        font-weight: bold;
        cursor: pointer;
        float: right;
        -webkit-transition: 0.6s ease-in-out;
        -moz-transition: 0.6s ease-in-out;
        -o-transition: 0.6s ease-in-out;
        transition: 0.6s ease-in-out;
        position:relative;
    }
    .bar1, .bar2, .bar3
    {
        width: 35px;
        height: 3px;
        background-color: #02012f;
        margin: 6px 48px;
        transition: 0.4s;
    }
    .change .bar1
    {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: relative;
        top: 8px;
    }
    .change .bar2
    {
        opacity: 0;
    }
    .change .bar3
    {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: relative;
        top: -8px;
    }
     @media screen and (min-width:1200px)
     {
    label.menuTitle {
    display: none;
    }
    .menu {
    display: block!important;
    border: 0;
    overflow: visible;
    max-height: inherit;
    padding: 10px 0;
    }
    .menu li {
    width: auto;
    /*display: inline;*/
    border: 0;
    }
    .menu li:hover {
    }
    .menu li:first-child {
    border-left: 0;
    }
    .menu a, .menu a:visited {
    display: inline;
    width: auto;
    padding: 0;
    }
    }
    @media screen and (max-width:768px)
    {
        label.menuTitle
        {
            padding: 28px 20px;
        }
        .nav-shrink label.menuTitle {
            padding: 44px 20px 20px;
        }
        label.menuTitle {
            padding: 28px 1px;
        }
        .bar1, .bar2, .bar3 {
            margin: 6px 20px;
        }
    }