.nav , .footer-wrap {

    * {
        text-transform: uppercase;
        font-size: 14px;
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    /*ul:before, ul:after {
    content: " "; /* 1 *//*
    display: table; /* 2 *//*
    }
    ul:after { clear: both; }*/
 }

 .footer-wrap {

    .copyright {
        display: block;
        padding: 1.6em 0 1.6em 0;
        text-align: center;
    }
    i {
        font-size: 1.8em;
    }
}

.rotateToggle {
    transform: rotateX(180deg);
    transition: all 0.6s;
}

.social-menu i{
    content: '';
    transform: scale(1.5);
}

input[type="checkbox"]#toggle_button, input[type="checkbox"]#toggle_button_bottom { display: none; }

/* ########## DESKTOP ########## */
@media only screen and (min-width: 769px) {

    .nav , .footer-wrap {

        ul li {
            display: inline-block;
            position: relative;
            float: left;
            background: none;
        }
        ul li a {
            display: inline-block;
            padding: 1.55em 1em 1.55em 1em;
            text-decoration: none;
            white-space: nowrap;
            color: deeppink;
        }
        li ul { 
            position: absolute;
            display: none;
            right: 0;
            float: none;
            background: #222;
            box-shadow: 0 3px 15px rgba(0,0,0,0.5);
        }
        li ul li { 
            width: 200px;
            border-top: 1px solid #333;
        }
        ul ul ul { 
            right: 100%;
            top: 0;
        }
        .main-menu, .second-menu {
            li:has(> a:nth-of-type(1):hover), ul li:has(> i:nth-of-type(1):hover) { background: deeppink; > a {color: white; }}
        }
        .dropup-btn {
                display: none;
        }
        .social-menu {
            li a:hover { color: white; }
        }
    }
    .nav {
        .dropdown-btn {
            float: right;
            padding: 1.55em 1em 1.55em 0em;
            
            color: white;
            transition: all 0.6s;
        }
    }
    .toggle_button { display: none;}

    .avatar > a > img {
        border-radius: 50%;
        border: 2px solid deeppink;
    }
    .avatar > a {
        padding: 0.35em 1em 0.15em 1em !important; 
    }
    .avatar > i {
        position: absolute;
        left: 32px;
        opacity: 0;
    }
}
/* ########## TABLET ########## */
@media only screen and (max-width: 768px) {
}   

/* ########## MOBILE ########## */
@media only screen and (max-width: 768px) {

    .nav , .footer-wrap {

        width: 100%;

        .main-menu {
            top: 100%;
        }
        .second-menu {
            bottom: 100%
        }
        .main-menu , .second-menu {
            position: absolute;
            display:  none;
            left: 0; right: 0;

            li {
                width: 100%; 
                border-top: 1px solid #555;
                display: inline-block;
            }
            .dropdown-btn {
                display: inline-block;
                float: right;
                border: 1px solid #555;
                text-align: center;
                width: var(--nav-size);
                padding: 1.55em 0 1.55em 0;         
                color: white;
                transition: all 0.6s;
            }
            li a {
                display: inline-block;
                width: calc(100vw - 1.55em - 1.55em - 2px - var(--nav-size));
                padding: 1.55em;
                text-decoration: none;
                color: deeppink;
            }
            li:not(.has-submenu) a {
                width: 100% !important;
            }

            > li > .rotateToggle { background-color: #333; }
            > li > ul > li > .rotateToggle { background-color: #444; }

            > li { background-color: #222; }
            > li > ul > li { background-color: #333; }
            > li > ul > li > ul > li { background-color: #444; }

            .user {
                order: -1;
            }
            ul {
                order: 1;
            }
        }
        .dropup-btn {
            display: inline-block;
            float: right;
            border: 2px solid #555;
            text-align: center;
            width: calc(var(--nav-size)*0.66);
            margin: 0.35em 0.35em 0.35em 0.35em;  
            padding: 0.15em 0 0.15em 0;         
            color: white;
            transition: all 0.6s;
        }
        .second-menu {
            display: none;

        }
        .social-menu {
            
            li {
                display: inline-block;
                position: relative;
                float: left;
                background: none;
            }
            li a {
                display: inline-block;
                padding: 1.55em 1em 1.55em 1em;
                text-decoration: none;
                white-space: nowrap;
                color: deeppink;
            }
            li a:hover {
                color: white;
            }
        }

        .toggle_button {
            width: 30px;
            height: 23px;
            position: absolute;
            display: flex;
            top: 20px;
            right: 15px;
        }
        .bar {
            height: 4px;
            width: 100%;
            background: deeppink;
            border-radius: 100px;
            position: absolute;
            display: block; 
            transition: 0.5s; 
            transform-origin: center; 
        }
        .bar:nth-child(1) { top: 0px; }
        .bar:nth-child(2) { top: 10px; }
        .bar:nth-child(3) { top: 20px; }
        #toggle_button:checked ~ ul , #toggle_button:checked ~ ul ul { display: block; }
        #toggle_button:checked + .toggle_button .bar:nth-child(1) { transform: translateY(10px) rotate(-45deg);}
        #toggle_button:checked + .toggle_button .bar:nth-child(2) { opacity:0;}
        #toggle_button:checked + .toggle_button .bar:nth-child(3) { transform: translateY(-10px) rotate(45deg);}
    }
}

/* 

https://www.youtube.com/watch?v=bk3Y4heVdFs 

Add Class to Submenue
https://stackoverflow.com/questions/56794525/wordpress-how-to-add-custom-class-to-submenu-ul-tags

jQuery Toogle Submenue
https://wordpress.stackexchange.com/questions/282816/how-to-add-a-submenu-toggle-button-inside-all-li-elements-that-have-a-submenu
https://www.youtube.com/watch?v=o9iM28t3k3Q

*/