/* HEADER */
#header{padding:4px 50px;background:0 0;box-shadow:inherit;z-index:99999;position:relative}
.nav { display: flex; justify-content: space-between; align-items: center;}
nav ul li { list-style: none;}
.nav ul { margin-bottom: 0; padding-left: 0;    width: 90%;    align-items: center;}
.nav ul li.logo a{font-size: 36px; font-family: "Dancing Script", cursive; color: #fff; font-weight: 600; letter-spacing: 0.5px; text-decoration: none;}
.nav ul li.search  a{font-size: 30px;color: #fff; font-weight: 100; letter-spacing: 0.5px; text-decoration: none; margin-right:20px;}
.nav ul li a i { font-size:20px;}
.nav ul li.location a{font-size: 30px;color: #fff; font-weight: 100; letter-spacing: 0.5px; text-decoration: none;}
.nav ul li.logo a:focus-visible {outline: none;}
.scroll-header{position:fixed!important;top:0;width:100%;z-index:9999999;left:0;right:0;transition:.3s}
/* MENU */
#menu{background:#000;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;text-align:center;top:0;transition:all .9s ease-in-out;visibility:hidden;width:100%;z-index:1100}
/* Menu open state */
#menu.open{opacity:1;visibility:visible}
#menu.open li{animation-duration:1s;animation-fill-mode:both;animation-name:fadeInUp}
/* Animation delays for each menu item */
#menu.open li:nth-child(1) { animation-delay: 0.1s; }
#menu.open li:nth-child(2) { animation-delay: 0.2s; }
#menu.open li:nth-child(3) { animation-delay: 0.3s; }
#menu.open li:nth-child(4) { animation-delay: 0.4s; }
#menu.open li:nth-child(5) { animation-delay: 0.5s; }
#menu.open li:nth-child(6) { animation-delay: 0.6s; }
#menu.open li:nth-child(7) { animation-delay: 0.7s; }
#menu.open li:nth-child(8) { animation-delay: 0.8s; }
#menu.open li:nth-child(9) { animation-delay: 0.9s; }
#menu.open li:nth-child(10) { animation-delay: 1s; }
/* Hover opacity effect */
#menu ul:hover a{opacity:.5}
#menu ul a{transform:translateZ(0);transition:opacity .3s ease-in-out}
#menu ul a:hover{opacity:1}
/* Main navigation styling */
#menu .main-nav{position:relative;top:50%;transform:translateY(-50%)}
#menu .main-nav ul{list-style:none;margin:0;padding:0}
#menu .main-nav a{color:#fff;display:block;font-size:24px;font-weight:300;padding:1rem 1rem 1rem 3rem;text-decoration:none;text-transform:capitalize;text-align:left}
#menu .main-nav a:first-child{padding-top:0}
/* Menu footer */
#menu .menu-footer{padding:2rem;bottom:0;left:0;position:absolute;right:0}
#menu .menu-footer ul{display:inline-block;list-style:none;margin:0;padding:0}
#menu .menu-footer ul li{display:inline;margin:0 1rem}
#menu .menu-footer a{color:#fff;text-decoration:none;text-transform:uppercase}
/* TOGGLE BUTTON */
.toggle-menu{background-color:transparent;border:none;cursor:pointer;float:right;height:50px;outline:0;padding:0;pointer-events:initial;position:relative;vertical-align:middle;width:100px;z-index:1110;margin-left:auto;display:flex;justify-content:center;align-items:center}
nav .menuText{color:#fff;margin-left:70px;margin-top:5px;font-size:15px}
nav .closeText{color:#fff;display:none;margin-left:70px;margin-top:5px}
nav button { background: inherit; border: none;}
nav .toggle-menu.active .menuText { color: #fff; display: none;}
nav .toggle-menu.active .closeText { color: #fff; display: inline-block;    font-size: 15px;}
.toggle-menu span,.toggle-menu span::after,.toggle-menu span::before{background-color:#fff;content:"";display:block;height:1.5px;position:absolute;width:26px;left:calc(50% - 13px);transform-origin:50% 50%;transition:background-color .2s ease-in-out,top .2s .2s ease-out,transform .2s linear}
.toggle-menu span{width:36px;left:calc(50% - 23px)}
.toggle-menu span::before{width:40px;left:calc(50% - 22px)}
.toggle-menu span::after{width:26px;left:calc(50% - 8px)}
.toggle-menu.active span,.toggle-menu.active span::after,.toggle-menu.active span::before{width:26px!important;left:calc(50% - 13px)!important}
.toggle-menu span{top:calc(50% - 1.5px)}
.toggle-menu span::before{top:7px}
.toggle-menu span::after{top:-7px}
/* Active (cross) state */
.toggle-menu.active span{background-color:transparent;transition:background .2s ease-out}
.toggle-menu.active span::after,.toggle-menu.active span::before{transition:top .2s ease-out,transform .2s .2s ease-out}
.toggle-menu.active span::before{top:0;transform:rotate(45deg)}
.toggle-menu.active span::after{top:0;transform:rotate(-45deg)}
/* Fade-in animation */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.searchpopUp{background:#748fb2;width:100%;padding:20px 0;position:absolute;top:-150%;left:0;z-index:9999999;height:100%;display:flex;justify-content:center;align-items:center;border-bottom:solid 1px #f7f7f7;transition:all .3s cubic-bezier(0,0,.38,1);height:54px}
.searchpopUp .input-group{width:550px}
.searchpopUp.searchpopUpOpen{top:0;transition:all .3s cubic-bezier(0,0,.38,1)}
.serachBoxeInput{width:100%;position:relative}
.serachBoxeInput input{border-radius:0;height:40px;padding:3px 20px;border-radius:25px}
.serachBoxeInput button[type=submit]{position:absolute;right:0;top:0;background:#060c14;border:none;height:100%;width:40px;color:#fff;border-radius:0 25px 25px 0}
#closeSearch{position:absolute;right:10px;top:10px;color:#fff;text-decoration:none}
.serachBoxeInput button[type=submit] img{width:20px}
.categories-in-view .scroll-header {background-color:#000 !important;}
@media (max-width:767px) {
#header{padding:0 30px 10px 15px}
#header .logo img {width: 130px;}
}
@media only screen and (max-width: 500px) {
#searchpopUp form{width:80%}
.searchpopUp .input-group{width:100%}
}