*{padding:0;margin:0}.nav{background-color:#00000096;display:flex;justify-content:space-between}.nav ul{display:none;display:flex;margin:0 100px;align-items:center;transition:all 1s}.nav ul input{width:20px;height:30px;justify-content:center;border:1px solid black;border-radius:6px;background-color:#0000003d;transition:all .5s}.nav ul input:hover,.nav ul input:focus{background-color:#000;color:#fff;width:200px}.nav ul li a{text-decoration:none;color:#fff}.nav ul li{width:70px;list-style:none;border:1px solid black;margin:10px;padding:2px 0;text-align:center;border-radius:5px;background-color:#000;position:relative;z-index:1;overflow:hidden}.nav ul li:before{content:"";position:absolute;background-color:#ffa600;top:0;bottom:0;left:0;right:0;z-index:-1;transform:scaleX(0);transition:all .7s ease-out;transform-origin:left}.nav ul li:hover:before{transform:scaleX(3)}.c-icon{display:none}@media (max-width:600px){.nav{background-color:#00000096;display:flex;flex-direction:row}.nav ul{flex-direction:column}.c-icon{display:block;font-size:40px;position:absolute;top:10px;left:20px;z-index:10}.nav-toggle-true{display:none!important}.nav-toggle-false{display:flex}}