@charset "utf-8";

#header {margin-bottom:1.5rem; box-shadow:#e3e3e3 0 0 0.5rem 0;}
#header .main {position:relative; padding:1rem 0; background-color:#f3f3f3; border-bottom:#e7e7e7 solid 1px;}
#header .main .container-fluid {display:flex; align-items:center;}
#header .main .btn {height:2.4rem; padding:0 1rem; line-height:2.4rem; font-size:0.875rem; font-weight:500;}
#header .main .btn.square {width:2.4rem; padding:0;}
#header .main .logo {margin-right:1rem; border-radius:0.25rem; flex-shrink:0; overflow:hidden;}
#header .main .logo img {display:block; height:2.4rem;}
#header .main .left {margin:0 2rem 0 3rem; overflow:hidden; text-overflow:ellipsis;}
#header .main .left a {margin:0 1rem; font-size:1rem; font-weight:500; color:#3E455B; white-space:nowrap;}
#header .main .left a:hover {color:#ED1C24;}

#header .main .toggles {white-space:nowrap;}
#header .main .toggles .btn {display:none; margin-right:1rem;}
#header .main .toggles .btn:last-child {margin-right:0;}
#header .main .toggles .btn:before {font-family:"Font Awesome 5 Pro";}
#header .main .toggles .menu-toggle:before {content:"\f0c9";}
#header .main .toggles .search-toggle:before {content:"\f002";}

#header .main .search {width:20rem; margin:0 1rem 0 auto;}
#header .main .search form {position:relative;}
#header .main .search input {padding-right:2rem; text-align:center;}
#header .main .search button {position:absolute; top:50%; right:0; width:2rem; height:1.5rem; line-height:1.5rem; margin-top:-0.75rem; border:none; background-color:transparent; text-align:center; font-weight:600; color:#575757; cursor:pointer;}
#header .main .search button:before {font-family:"Font Awesome 5 Pro";}
#header .main .search .submit {}
#header .main .search .submit:before {content:"\f002";}
#header .main .search .hide {display:none; right:-3rem;}
#header .main .search .hide:before {content:"\f00d";}
#header .main .right {white-space:nowrap;}
#header .main .right .btn {margin-left:1rem;}
#header .main .right .btn.avatar {width:2.25rem; height:2.25rem; padding:0; border:none; border-radius:0.25rem; overflow:hidden;}
#header .main .right .btn.avatar img {display:block; width:100%;}
#header .main .right .btn.notifications:before {font-family:"Font Awesome 5 Pro"; content:"\f0f3"; font-size:1rem;}
#header .main .right .btn.create:before {font-family:"Font Awesome 5 Pro"; content:"\f067"; font-size:1rem;}
#header .categories {padding:0; border-bottom:#e7e7e7 solid 1px;}
#header .categories .container-fluid {position:relative;}
#header .categories .overlay {display:none; position:absolute; top:100%; left:0; right:0; background-color:#ffffff; border:#dedede solid 1px; box-shadow:#f3f3f3 0.5rem 0.5rem 3rem; opacity:0; z-index:30; transition:all 0.3s;}
#header .categories .overlay.active {display:block; opacity:1;}
#header .categories .others {float:right; width:2.5rem; height:2.5rem; text-align:center; font-size:1.5rem; font-weight:600; color:#ed1c24; cursor:pointer;}
#header .categories .others:hover {color:#3E455B;}
#header .categories .others:before {font-family:"Font Awesome 5 Pro"; vertical-align:middle; content:"\f150";}
#header .categories .others.active:before {content:"\f151";}
#header .categories .horizontal ul {margin:0; padding:0; list-style:none; display:flex; justify-content:space-between; overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch;}
#header .categories .horizontal ul li {flex-shrink:0;}
#header .categories .horizontal ul li a {display:inline-block; padding:0.5rem 1rem; border-top:transparent solid 2px; border-bottom:transparent solid 2px; font-size:0.875rem; color:#797979; white-space:nowrap;}
#header .categories .horizontal ul li a:hover {border-bottom-color:#ed1c24; color:#3E455B;}
#header .categories .horizontal ul li a.active {border-bottom-color:#ed1c24; color:#3E455B;}


#header .categories .navigator {display:flex;}
#header .categories .navigator .primary {width:25%; min-width:10rem;}
#header .categories .navigator .primary ul {list-style:none; margin:0; padding:0; border-left:#dedede solid 1px;}
#header .categories .navigator .primary ul li {margin:0; padding:0; border-bottom:#dedede solid 1px;}
#header .categories .navigator .primary ul li a {display:block; padding:0.5rem 1rem; font-size:1rem; color:#797979; border-left:transparent solid 0.5rem; border-right:transparent solid 0.5rem;}
#header .categories .navigator .primary ul li a:hover {background-color:#f3f3f3; color:#3E455B; border-left-color:#cc0000;}
#header .categories .navigator .primary ul li a.active {color:#3E455B; border-left-color:#cc0000;}
#header .categories .navigator .secondary {width:75%; padding:1rem;}
#header .categories .navigator .secondary .cont {display:none;}
#header .categories .navigator .secondary .cont.active {display:block;}
#header .categories .navigator .secondary ul {list-style:none; margin:0; padding:0;}
#header .categories .navigator .secondary ul li {margin:0 0 0.5rem;}
#header .categories .navigator .secondary ul li a {color:#3E455B; font-weight:500;}
#header .categories .navigator .secondary ul li a:hover {color:#cc0000;}
#header .categories .navigator .secondary ul li a.active {color:#cc0000;}
#header .categories .navigator .secondary ul li ul {}
#header .categories .navigator .secondary ul li ul li {display:inline-block; margin:0 1rem 0 0;}
#header .categories .navigator .secondary ul li ul li a {font-size:0.875rem; font-weight:300; color:#797979;}


@media all and (max-width: 1099px) {
	#header .main .search {width:14rem;}
}

@media all and (max-width: 900px) {
	#header .main .left {display:none; position:absolute; top:100%; left:0; width:100%; margin:0; padding:1rem; background-color:#3E455B; text-align:center; z-index:30;}
	#header .main .left a {display:block; padding:1rem; margin:0; color:#ffffff;}
	#header .main .left a:hover {background-color:#ffffff; color:#3E455B;}
	#header .main .toggles .menu-toggle {display:inline-block;}
	#header .main .search {margin-right:0;}
}

@media all and (max-width: 500px) {
	#header .main .search {display:none; position:absolute; top:0; left:0; bottom:0; width:100%; padding:1rem; background-color:#e3e3e3;}
	#header .main .search form {width:calc(100% - 3rem);}
	#header .main .search .hide {display:block;}
	#header .main .toggles {margin-right:auto;}
	#header .main .toggles .search-toggle {display:inline-block;}
}