body
{
}

        /*
Pure CSS Navigation v1.8
by Adam Culpepper | @adamculpepper
https://github.com/adamculpepper/pure-css-navigation
*/

        /* Customizable styles */
        .pure-css-nav > nav ul li a {
            color: #555;
        }

        .pure-css-nav > nav > ul > li {
            margin-right: 1px;
        }

        /* Level 1 */
        .pure-css-nav > nav ul li {
            background-color: rgba(0, 0, 0, 0.05);
        }

            .pure-css-nav > nav ul li a {
                font-size: 1.1rem; /*line-height:50px;*/
                padding: 13px 20px;   
            }

        /* Level 2 and beyond */
        .pure-css-nav > nav ul ul {
            background-color: #FEDA75;
        }

            .pure-css-nav > nav ul ul li a {
                font-size: 1.1rem; /*line-height:35px;*/
                padding: 8px 20px;
            }

        /* Hover colors */
        .pure-css-nav > nav ul li:hover,
        .pure-css-nav > nav ul li li:hover > a:first-child:nth-last-child(2),
        .pure-css-nav > nav > ul > li:hover > a:first-child:nth-last-child(2) {
            background-color: #FEBD14;
        }

        /* Font icon arrow colors */
        .pure-css-nav > nav > ul > li > a:first-child:nth-last-child(2):after {
            color: rgba(0, 0, 0, 0.30);
        }

        .pure-css-nav > nav > ul > li:hover > a:first-child:nth-last-child(2):after {
            color: rgba(0, 0, 0, 0.60);
        }

        .pure-css-nav > nav ul li li > a:first-child:nth-last-child(2):after {
            color: rgba(0, 0, 0, 0.30);
        }

        .pure-css-nav > nav ul li li:hover > a:first-child:nth-last-child(2):after {
            color: rgba(0, 0, 0, 0.60);
        }

        /* Mobile Navigation overlay */
        .pure-css-nav.mobile-nav input:checked + label + nav {
            background-color: rgba(255, 255, 255, 0.9);
        }

        /* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
        .pure-css-nav > nav {
            width: 100%;
        }

            .pure-css-nav > nav ul,
            .pure-css-nav > nav li {
                margin: 0;
                padding: 0;
                list-style: none;
            }

                .pure-css-nav > nav li:hover {
                    cursor: pointer;
                }

            .pure-css-nav > nav a {
                text-decoration: none;
            }

            /* Level 1 */
            .pure-css-nav > nav ul {
                display: flex;
                flex-wrap: wrap;
            }

                .pure-css-nav > nav ul li {
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: left;
                }

                    .pure-css-nav > nav ul li:hover {
                        overflow: visible;
                    }

                .pure-css-nav > nav ul > li {
                    position: relative;
                }

                .pure-css-nav > nav ul li a {
                    display: block;
                    /*height: 16px;*/
                    /*height: 100%; agustoday tinggi menu*/
                }

                /* Level 2 */
                .pure-css-nav > nav ul ul {
                    visibility: hidden;
                    opacity: 0;
                    position: absolute;
                    z-index: 1;
                    display: block;
                }

                .pure-css-nav > nav ul li:hover > ul {
                    visibility: visible;
                    opacity: 1;
                }

                /* Level 3 */
                .pure-css-nav > nav ul ul ul {
                    top: 0;
                    left: 100%;
                }

                .pure-css-nav > nav ul ul ul {
                    margin-top: 5px;
                }

                /* ---------- */

                /* Transitions */
                .pure-css-nav > nav ul,
                .pure-css-nav > nav ul li,
                .pure-css-nav > nav ul li a,
                .pure-css-nav > nav ul li a:first-child:nth-last-child(2):after {
                    transition: all 200ms linear;
                }

        .pure-css-nav.mobile-nav {
            transition: all 0.5s linear;
        }







        /* ---------- */

        /* Arrow styles */
        .pure-css-nav > nav ul li a {
            display: flex;
            align-items: center;
        }

            .pure-css-nav > nav ul li a:first-child:nth-last-child(2):after {
                content: '';
                display: inline-block;
                width: 10px;
                height: 5px;
                margin-left: 10px;
                opacity: 0.50;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 10px 5px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath opacity='.5' d='M1 1v1h1v1h1v1h1v1h2V4h1V3h1V2h1V1h1V0H0v1z'/%3E%3Cpath d='M2 1v1h1v1h1v1h2V3h1V2h1V1h1V0H1v1z'/%3E%3C/svg%3E");
            }

        .pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):before,
        .pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):after {
            content: '';
        }

        .pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):before {
            order: 1;
            margin-left: 10px;
        }

        .pure-css-nav > nav ul ul li a:first-child:nth-last-child(2):after {
            order: 2;
            margin-left: auto;
        }

        /* ---------- */

        /* FontAwesome Icon arrow support */
        .pure-css-nav.nav-font-icons ul li a:first-child:nth-last-child(2):after {
            content: '\f078'; /* arrow: down */
            font-family: 'FontAwesome';
            opacity: 1;
            width: auto;
            height: auto;
            background: none;
        }

        .pure-css-nav.nav-font-icons ul ul li > a:first-child:nth-last-child(2):after {
            content: '\f054';
        }
        /* arrow: right */

        /* ---------- */

        /* Justify Navigation (first level equal widths) */
        .pure-css-nav.nav-justified > nav > ul {
            width: 100%;
        }

            .pure-css-nav.nav-justified > nav > ul > li {
                flex: 1 1 auto;
            }

                .pure-css-nav.nav-justified > nav > ul > li > a {
                    justify-content: center;
                }

        /* ---------- */

        /* Vertical Navigation */
        .pure-css-nav.nav-vertical nav > ul {
            display: block;
            width: 200px;
        }

            .pure-css-nav.nav-vertical nav > ul li a:first-child:nth-last-child(2):after {
                margin-left: auto;
            }

            .pure-css-nav.nav-vertical nav > ul ul {
                left: 100%;
                top: 0;
                margin-top: 5px;
            }

            .pure-css-nav.nav-vertical nav > ul > li {
                margin-bottom: 1px;
            }

        /* ---------- */

        /* Mobile Navigation */
        .pure-css-nav.mobile-nav input {
            display: none;
        }

            .pure-css-nav.mobile-nav input + label {
                margin-bottom: 0;
                z-index: 999;
            }

                .pure-css-nav.mobile-nav input + label + nav > ul > li {
                    margin-right: 1px;
                }

            .pure-css-nav.mobile-nav input:checked + label {
                position: absolute;
                top: 8px;
                right: 10px;
            }

                .pure-css-nav.mobile-nav input:checked + label i:before {
                    content: '\f00d';
                }










        /* ---------- */

        /* Responsive Breakpoints - down */

        /* Extra Small (xs) and down */
        @media (max-width:575px) {
        }

        /* Small (sm) and down */
        @media (max-width:767px) {
        }

        /* Medium (md) and down */
        @media (max-width:991px) {
            .pure-css-nav.mobile-nav > nav {
                display: none;
            }

            .pure-css-nav.mobile-nav input:checked + label + nav {
                display: block;
            }







            /* Mobile Navigation > Animations */
            .pure-css-nav.mobile-nav input:checked + label + nav {
                animation: mobile-nav-slide-in 0.5s;
            }

            .pure-css-nav.mobile-nav.pure-css-nav-animation-ready input:not(:checked) + label + nav {
                animation: mobile-nav-slide-out 5s;
                animation-play-state: paused !important;
            }




            .pure-css-nav.mobile-nav input:checked + label i:before {
                animation: fade-icon-close 0.5s;
            }

            @keyframes mobile-nav-slide-in {
                0% {
                    left: -100%;
                    opacity: 0;
                    visibility: visible; /*transition-timing-function: linear;*/
                }

                100% {
                    left: 0;
                    opacity: 1;
                }
            }

            @keyframes mobile-nav-slide-out {
                0% {
                    left: 0;
                    opacity: 1;
                    visibility: visible;
                }

                100% {
                    left: -100%;
                    opacity: 0;
                    visibility: hidden;
                }
            }



            @keyframes fade-icon-close {
                0% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }


            /* Mobile Navigation > Vertical Navigation */
            .pure-css-nav.mobile-nav input:checked + label + nav > ul {
                display: block;
                width: 300px;
                max-width: 100%;
                height: 100%;
            }

                .pure-css-nav.mobile-nav input:checked + label + nav > ul li a:first-child:nth-last-child(2):after {
                    margin-left: auto;
                }

                .pure-css-nav.mobile-nav input:checked + label + nav > ul ul {
                    left: 0;
                    top: 100%;
                    width: 100%;
                }

                .pure-css-nav.mobile-nav input:checked + label + nav > ul > li {
                    margin-bottom: 1px;
                }

                .pure-css-nav.mobile-nav input:checked + label + nav > ul li:hover > ul {
                    position: relative;
                    margin-left: 10px;
                    border-left: 3px solid #999;
                }

            .pure-css-nav.mobile-nav input:checked + label + nav ul ul ul {
                margin-top: 0;
            }

            .pure-css-nav.mobile-nav input:checked + label i:before {
                animation: anim1 2s;
            }





            @keyframes anim1 {
                from {
                    color: red;
                    background: green;
                }
            }


            .pure-css-nav.mobile-nav input + label + nav {
                background-color: rgba(255, 0, 255, 0.9) !important;
            }
            /* temp */
            .pure-css-nav.mobile-nav input + label + nav {
                display: block;
                margin: 0 -100%;
                margin: 0 calc(50% - 50vw);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 99;
                width: 100%;
                height: 100%;
            }



            .pure-css-nav.mobile-nav input:checked + label + nav {
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 99;
                width: 100%;
                height: 100%;
            }



            .pure-css-nav.mobile-nav input:checked + label + nav {
                visibility: visible;
                opacity: 1;
            }

            .pure-css-nav.mobile-nav input:not(:checked) + label + nav {
                visibility: hidden;
                opacity: 0;
            }




            /*
.pure-css-nav.mobile-nav *,
.pure-css-nav.mobile-nav *:before,
.pure-css-nav.mobile-nav *:after {animation-play-state:paused!important;}
*/







            .pure-css-nav.mobile-nav:not(:hover) * {
                -webkit-transition: none !important;
                -moz-transition: none !important;
                -ms-transition: none !important;
                -o-transition: none !important;
                border: 2px solid red;
            }
        }

        /* Large (lg) and down */
        @media (max-width:1199px) {
        }

        /* ---------- */

        /* Responsive Breakpoints - up */

        /* Small (sm) and up */
        @media (min-width:576px) {
        }

        /* Medium (md) and up */
        @media (min-width:768px) {
        }

        /* Large (lg) and up */
        @media (min-width:992px) {
            .pure-css-nav.mobile-nav input:not(:checked),
            .pure-css-nav.mobile-nav input:not(:checked) + label {
                display: none;
            }
        }

        /* Extra Large (xl) and up */
        @media (min-width:1200px) {
        }

        .pure-css-nav a:not([href]),
        .pure-css-nav a[href='']:hover,
        .pure-css-nav a[href='#']:hover,
        .pure-css-nav a[href='']:active,
        .pure-css-nav a[href='#']:active {
            pointer-events: none;
        }





        /*
multi-layer mobile nav
https://codepen.io/tiffachoo/pen/yzZRXK



try not covering the whole window - just the slide out
*/

        
/* Style the search box inside the navigation bar */
/*.pure-css-nav input[type=text] {
  float: right;
  padding: 2px;
  border: none;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 16px;
  font-size: 15px;
}*/


.header-agustoday {
  /*padding: 10px 16px;*/
  background: #FECE43;
  color: #f1f1f1;  
  height: 36px;
}


.pure-css-nav-agustoday > nav {
    width: 100%;
    border:none;
}

.pure-css-nav-agustoday > nav ul,
.pure-css-nav-agustoday > nav li {
    margin: 0;
    padding: 0px 14px;
    line-height:30px;
    list-style: none;
}

.pure-css-nav-agustoday > nav ul li {
    float:left
}
.pure-css-nav-agustoday > nav li:hover {
    cursor: pointer;
}

.pure-css-nav-agustoday > nav a {
text-decoration: none;
}

/* Level 1 */
.pure-css-nav-agustoday > nav ul {
/*display: flex;*/
/*flex-wrap: wrap;*/
}

.pure-css-nav-agustoday > nav ul li {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

.pure-css-nav-agustoday > nav ul li:hover {
    overflow: visible;
}

.pure-css-nav-agustoday > nav ul > li {
    position: relative;
}

.pure-css-nav-agustoday > nav ul li a {
    display: block;
    height: 34px;
}


        /* Customizable styles */
        .pure-css-nav-agustoday > nav ul li a {
            color: #555;
        }

        .pure-css-nav-agustoday > nav > ul > li {
            margin-right: 1px;
        }

        /* Level 1 */
        .pure-css-nav-agustoday > nav ul li {
            /*background-color: rgba(0, 0, 0, 0.05);*/
        }

            .pure-css-nav-agustoday > nav ul li a {
                font-size: 1.1rem; 
                /*line-height:30px;
                padding: 2px 12px;*/
            }

        /* Hover colors */
        .pure-css-nav-agustoday > nav ul li:hover,
        .pure-css-nav-agustoday > nav ul li li:hover > a:first-child:nth-last-child(2),
        .pure-css-nav-agustoday > nav > ul > li:hover > a:first-child:nth-last-child(2) {
            /*background-color: #ddd;*/
        }

/*.pure-css-nav-agustoday li.doremifa a{padding:2px; float:right;}*/
.pure-css-nav-agustoday li.doremifa a img{width:28px; height:28px}
.pure-css-nav-agustoday li.doremifa {float:right; padding:0px 4px; margin-top:3px}

        /*.doremifa{float:right;margin-left:8px;border-radius:3px}*/

/*.viennatop-wrapper{background:#23242a;position:relative;overflow:hidden;padding:10px 0px 10px 0;border-bottom:1px solid #3f414a;z-index:4}.header-wrapper2{margin:0 auto;padding:0}.top-menus{display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent}.top-menus ul{width:100%;padding:0;margin:0;text-align:left}
                                                                                                                                                                                                                                                                                         .top-menus li{font-size: 16px;list-style-type:none;float:left;padding:0;margin:0}
.top-menus li a{position:relative;color:#ddd;display:block;margin:0;padding:10px 15px;line-height:100%;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.top-menus ul li a:active,.top-menus ul li.highlight a{text-decoration:none}
.top-menus ul li a:hover{color:#fff;background:#3f414a;text-decoration:none}
.top-menus li.doremifa{float:right;margin-left:8px;border-radius:3px}
.top-menus li.doremifa a{padding:0;width:32px;height:32px;line-height:32px;text-align:center}
.top-menus li.doremifa a i{text-align:center;color:#fff}
.top-menus li.doremifa a:hover i{color:#fff}
.top-menus li.doremifa.join{background:#f29400}
.top-menus li.doremifa a i,.top-menus li.doremifa a:hover i{color:#fff}.top-menus a#pull{display:none}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#2b2d33;border:1px solid #666;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#ddd}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:#3e8e41}*/