File: /home/alfouzantranspor/www/wp-content/themes/businessexpo/assets/css/menu.css
/*
* Author: BusinessExpo Template
* Created by: (WpFrank)
* Copyright (c) 2018, Inc.
* Date: 10 Aug, 2018
* http://wpfrank.com/
* Name: menu.css
*/
/*--------------------------------------------------
|| Text New Code meant only for screen readers ||
--------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
/* font-size: 0.875rem; */
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
;
}
.nav-link:hover .dropdown-submenu-1,
.nav-link.focus .dropdown-submenu-1 {
padding: 0.5rem 0;
width: 9rem;
height: auto;
background: #eedbff;
clip: auto;
}
nav ul li:hover>ul,
nav ul li.active>ul {
display: block;
}
/* .active styles for tab-to visibility - '.active' class added via js when tabbed-to */
/* Do not show the outline on the skip link target. */
#main-content[tabindex="-1"]:focus {
outline: none;
}
/* dropdown focus keyboard */
#custom-collapse ul li a:focus+ul.dropdown-menu,
#custom-collapse ul li.focus ul.dropdown-menu {
display: block;
}
/*-----------------------------------------------------------------
NAVIGATION
-------------------------------------------------------------------*/
.menu-full {
width: 100%;
}
.menu-1210 {
width: 1210px;
}
.search:focus {
border: 1px solid #000;
}
.logo-box {
margin-right: 15%;
text-align: left;
}
.menu-button,
.menu-button:hover,
.menu-button:active,
.menu-button:focus {
padding: 0;
background-color: transparent;
color: inherit;
border: 0;
box-shadow: none;
}
.menu-button:focus {
outline: 1px dotted #ff911a;
border: 0;
box-shadow: none;
}
.primary-menu-container .menu li a:hover {
color: #FF4081;
}
li.nav-item a {
font-size: 15px;
color: #fff;
font-weight: 500;
letter-spacing: 2px;
transition: all 10ms linear;
text-decoration: none;
}
@media (max-width: 767px) {
li.nav-item a {
color: #fff;
text-align: right;
}
}
.dropdown-menu li.nav-item a {
color: #000;
letter-spacing: 1px;
white-space: normal;
}
@media ( min-width: 768px ) {
.dropdown-menu li.nav-item a {
border-bottom: 1px solid #cccccc29;
}
}
/* .dropdown-menu li.current-menu-item a {
color: #fff;
letter-spacing: 1px;
} */
.site-menu-content {
width: 100%;
background: rgba(255, 255, 255, 0.05);
z-index: 9;
word-break: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.navigation-wrap {
width: 100%;
left: 0;
z-index: 9;
-webkit-transition : all 0.3s ease-out;
transition : all 0.3s ease-out;
background: rgba(0, 9, 15, 1);
/* border-top: 1px solid #ff408130; */
}
.overlap-enable {
position: absolute;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
@media (min-width: 767px) {
.admin-bar-enabled {
top: 32px !important;
}
}
.sticky-menu div.navigation-wrap {
background: rgba(0, 9, 15, 1);
}
.site-menu-content--sticky.sticky-menu {
position: fixed;
top: 0;
background: rgba(0, 9, 15);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .1);
transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
}
.site-menu-content--sticky.sticky-menu-in-view {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
padding: 0 21%;
}
.site-menu-content__wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
min-height: 8vh;
padding: .7rem 0;
z-index: 9999;
}
.site-menu-content__wrap .site-link {
font-family: 'Poppins', sans-serif;
}
.site-title,
.site-description {
margin: 0;
}
.site-title {
font-size: 2em;
line-height: 1.5;
font-weight: 600;
color: #fff;
margin-top: 10px;
}
.site-description {
font-size: 1em;
line-height: 1.5;
color: #fff;
}
@media (min-width: 767px) and (max-width: 1024px) {
.site-title {
line-height: 1.25;
}
.site-description {
line-height: 1.35;
}
}
.site-branding {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 81%;
margin-right: 0;
word-break: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
@media screen and (min-width: 767px) {
.site-branding {
max-width: 35%;
-ms-flex-preferred-size: 35%;
flex-basis: 35%;
/*margin-right: 1.5rem;*/
;
}
}
.site-branding .custom-logo-link,
.site-branding__title-wrap {
margin-right: .45rem;
}
.site-branding .custom-logo-link img {
display: block;
max-height: 52px;
max-width: 100px;
width: auto;
height: auto;
}
@media screen and (min-width: 767px) {
.site-branding .custom-logo-link img {
max-width: 215px;
}
}
.site-branding__title-wrap {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.main-navigation {
-webkit-box-flex: -1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: right;
margin: 0;
}
@media screen and (min-width: 767px) {
.main-navigation {
-ms-flex-preferred-size: 62%;
flex-basis: 62%;
text-align: center;
}
}
@media only screen and (max-width: 786px) {
.main-navigation>.primary-menu-container { display: none; }
}
.main-navigation>.primary-menu-container {
position: absolute;
float: right;
right: 0;
top: 81px;
max-width: 380px;
width: 350px;
height: auto;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2), -1px -1px 4px rgba(0, 0, 0, .2);
z-index: 9999;
transform: translateX(100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transition: transform .3s ease-out;
-webkit-transition: transform .3s ease-out;
-moz-transition: transform .3s ease-out;
-ms-transition: transform .3s ease-out;
-o-transition: transform .3s ease-out;
}
@media screen and (min-width: 767px) {
.main-navigation>.primary-menu-container {
overflow-x: visible;
}
}
.main-navigation .menu>li,
.main-navigation .menu>li>a {
display: block;
}
.main-navigation .menu>li {
padding: 0 1rem 0 1rem;
margin-left: 0;
}
.main-navigation .menu>li:not(:last-child)>a {
border-bottom: 1px solid #8b8e93;
}
.main-navigation .menu>li:not(.menu-item-has-children)>a {
padding: .75rem 0;
}
.main-navigation .menu>li.menu-item-has-children>a {
padding: .75rem 0 1em 1.25em;
}
@media screen and (min-width: 767px) {
.main-navigation .menu>li:not(.menu-item-has-children)>a,
.main-navigation .menu>li.menu-item-has-children>a {
padding: 0;
}
}
.main-navigation .menu>li:first-child>a {
padding-top: 1rem;
}
.main-navigation .menu>li:last-child>a {
margin-bottom: 1rem;
}
@media screen and (min-width: 767px) {
.main-navigation>.primary-menu-container {
position: static;
max-width: 100%;
width: auto;
height: auto;
overflow-y: visible;
background-color: transparent;
box-shadow: none;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
.main-navigation .menu>li {
display: inline-block;
padding: 1.5rem 1rem;
}
.main-navigation .menu>li.menu-item-has-children {
/* padding-right: 1rem;
padding-left: 1rem;
padding-bottom: 1rem; */
padding: 1.5rem 2.5em 1.5rem 1.5em ;
}
.main-navigation .menu>li>a {
display: inline;
padding: 0;
}
.main-navigation .menu>li:not(:last-child)>a {
border-bottom: 0;
}
.main-navigation .menu>li:first-child>a {
padding-top: 0;
}
.main-navigation .menu>li:last-child>a {
padding-bottom: 0;
}
}
@media only screen and (max-width: 786px) {
.main-navigation>.primary-menu-container--open {
display: block;
}
}
.main-navigation>.primary-menu-container--open {
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
@media screen and (min-width: 767px) {
.main-navigation>.primary-menu-container {
position: static;
width: auto;
background-color: transparent;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
}
.main-navigation .menu {
padding: 0;
margin: 0;
}
.main-navigation li {
list-style-type: none;
position: relative;
}
.main-navigation .menu>li .dropdown-menu>li.current-menu-ancestor>a,
.main-navigation .menu>li .dropdown-menu>li.current-menu-parent>a,
.main-navigation .menu .current-menu-ancestor>a,
.main-navigation .menu .current-menu-parent>a,
.main-navigation .menu .current-menu-item>a,
.main-navigation .menu>li>a:hover {
color: #FF4081;
}
.dropdown-menu li.current-menu-item>a{
color: #fff;
}
/* .main-navigation .menu>li .dropdown-menu>li.current-menu-item>a{
background-color: #FF4081;
} */
.main-navigation .menu>li .dropdown-menu {
border-top: 3px solid #FF4081;
font-size: .95rem;
text-align: left;
width: 100%;
position: relative;
margin: 0;
padding: 0;
background-color: #fff;
z-index: 9999;
}
@media screen and (min-width: 767px) {
.main-navigation .menu>li .dropdown-menu {
position: absolute;
/*width: 225px;*/
}
}
.main-navigation .menu>li>.dropdown-menu {
top: 68px;
left: 50%;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .15), -1px -1px 4px rgba(0, 0, 0, .15);
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.main-navigation .menu>li>.dropdown-menu li>.dropdown-menu {
border-top: 3px solid #FF4081;
top: -13px;
left: 100%;
}
.main-navigation .menu>li>.dropdown-menu li.dropdown:first-child ul.dropdown-menu {
z-index: 99999;
}
@media (max-width: 767px) {
.main-navigation .menu>li>.dropdown-menu {
top: -1px;
left: 35%;
width: 70%;
}
.main-navigation .menu>li>.dropdown-menu li>.dropdown-menu {
border-top: 3px solid #FF4081;
top: -7px;
left: 0;
width: 70%;
}
.slide-content .menu li a {
padding: 16px 30px;
}
.slide-content .menu>li .dropdown-menu li a {
text-align: left;
}
}
.main-navigation .menu>li.menu-item-has-children>.dropdown-menu,
.main-navigation .dropdown-menu>li.menu-item-has-children>.dropdown-menu {
display: block;
height: 0;
overflow: hidden;
transition: all 0s ease-in;
-webkit-transition: all 0s ease-in;
-moz-transition: all 0s ease-in;
-ms-transition: all 0s ease-in;
-o-transition: all 0s ease-in;
}
.main-navigation .menu>li.menu-item-has-children:hover,
.main-navigation .dropdown-menu>li.dropdown:hover,
.main-navigation .menu>li.menu-item-has-children:focus-within,
.main-navigation .dropdown-menu>li.dropdown:focus-within {
opacity: 1;
height: auto;
overflow: visible;
visibility: visible;
}
@media screen and (min-width: 767px) {
.main-navigation .menu>li.menu-item-has-children:hover>.dropdown-menu,
.main-navigation .dropdown-menu>li.dropdown:hover>.dropdown-menu,
.main-navigation .menu>li.menu-item-has-children:focus-within>.dropdown-menu,
.main-navigation .dropdown-menu>li.dropdown:focus-within>.dropdown-menu {
opacity: 1;
height: auto;
overflow: visible;
visibility: visible;
}
}
@media screen and (max-width: 767px) {
.main-navigation .menu>li.menu-item-has-children:hover>.dropdown-menu,
.main-navigation .dropdown-menu>li.dropdown:hover>.dropdown-menu,
.main-navigation .menu>li.menu-item-has-children:focus-within>.dropdown-menu,
.main-navigation .dropdown-menu>li.dropdown:focus-within>.dropdown-menu {
opacity: 1;
height: auto;
overflow: visible;
visibility: visible;
}
}
.main-navigation .menu>li .dropdown-menu>li,
.main-navigation .menu>li .dropdown-menu>li>a {
display: block;
}
@media screen and (min-width: 767px) {
.main-navigation .menu>li .dropdown-menu>li:not(.menu-item-has-children),
.main-navigation .menu>li .dropdown-menu>li.menu-item-has-children {
padding: 0;
}
.main-navigation .menu>li .dropdown-menu>li>a {
padding: 15px 25px;
}
}
.main-navigation .menu .dropdown-menu li:last-child>a {
padding-bottom: 1.2rem;
}
.main-navigation .menu>li .dropdown-menu>li>a:hover {
color: #fff;
background-color: #FF4081;
text-decoration: none;
}
.main-navigation .dropdown-menu li>.dropdown-menu {
left: 0;
top: 100%;
border-top: 1px solid #eee;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .3), -1px 1px 2px rgba(0, 0, 0, .1);
}
@media screen and (min-width: 767px) {
.main-navigation .dropdown-menu li>.dropdown-menu {
left: 50%;
top: 45px;
border-top: 0;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4), -1px 1px 4px rgba(0, 0, 0, .1);
}
}
.menu-toggle {
position: absolute;
right: 18px;
top: 50%;
cursor: pointer;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.main-navigation__icon {
display: block;
width: 22px;
height: 22px;
}
@media screen and (min-width: 767px) {
.menu-toggle {
display: none;
}
}
.menu-toggle>* {
pointer-events: none;
}
/* .main-navigation__icon::before,
.main-navigation__icon__middle,
.main-navigation__icon::after {
position: absolute;
width: 22px;
height: 3px;
background-color: #081d56;
transition: transform .3s ease-out;
}
.main-navigation__icon::before,
.main-navigation__icon::after {
content: "";
}
.main-navigation__icon::before {
top: 0;
left: 0;
transform-origin: 0 0;
}
.main-navigation__icon::after {
bottom: 0;
left: 0;
transform-origin: 0 100%;
} */
.main-navigation__icon__middle {
top: 9px;
left: 0;
opacity: 1;
transform-origin: 0 50%;
}
.menu-toggle--open .main-navigation__icon::before {
transform: rotate(45deg) scaleX(1.25);
-webkit-transform: rotate(45deg) scaleX(1.25);
-moz-transform: rotate(45deg) scaleX(1.25);
-ms-transform: rotate(45deg) scaleX(1.25);
-o-transform: rotate(45deg) scaleX(1.25);
}
.menu-toggle--open .main-navigation__icon .main-navigation__icon__middle {
opacity: 0;
transform: scaleX(0);
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
}
.menu-toggle--open .main-navigation__icon::after {
transform: rotate(-45deg) scaleX(1.25);
-webkit-transform: rotate(-45deg) scaleX(1.25);
-moz-transform: rotate(-45deg) scaleX(1.25);
-ms-transform: rotate(-45deg) scaleX(1.25);
-o-transform: rotate(-45deg) scaleX(1.25);
}
/* Mobile Menu */
@media (min-width : 767px) {
.open-nav-btn {
display: none;
}
.close-btn {
display: none;
}
.main-navigation__icon {
display: none;
}
}
@media screen and (max-width: 767px) {
button.open-nav-btn {
margin: 20px;
}
}
@media screen and (max-width: 767px) {
button.open-nav-btn {
font-size: 1rem;
border: 2px solid #FF4081;
background-color: transparent;
border-radius: 5px;
padding: 8px;
}
button.open-nav-btn i {
color: #FF4081;
font-size: 1.5rem;
}
.slide-content {
border-top: 3px solid #FF4081;
height: 500px;
width: 90%;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #000;
overflow-x: hidden;
transition: width 0.5s;
padding-top: 65px;
visibility: hidden;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2), -1px -1px 4px rgba(0, 0, 0, .2);
}
.slide-content a:focus,
.slide-content button:focus {
outline: 2px solid orange;
}
main a:focus,
.open-nav-btn:focus {
outline: 2px solid orange;
outline-offset: 5px;
}
.close-btn {
font-size: 15px;
color: #F5F5F5;
background-color: transparent;
border: none;
}
.slide-content a:hover,
.slide-content a:focus {
text-decoration: underline;
}
.slide-content .close-btn i {
padding: 5px 5px;
}
.slide-content .close-btn {
position: absolute;
top: 25px;
right: 15px;
background-color: #FF4081;
border-radius: 5px;
padding: 2px 8px;
font-size: 30px;
}
.slide-content .close-btn i {
color: #fff;
}
.visible {
visibility: visible;
}
main {
padding: 0 10%;
}
}
/* #Chevron
================================================== */
.chevron::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 1em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
}
.chevron.right:before {
left: 0;
transform: rotate(45deg);
}
.chevron.bottom:before {
top: 6px;
transform: rotate(135deg);
transition : all 0.3s ease-out;
}
.chevron.left:before {
left: 0.25em;
transform: rotate(-135deg);
}
.main-navigation .menu>li.menu-item-has-children:hover>a.chevron.bottom:before,
.main-navigation .menu>li.menu-item-has-children:focus-within>a.chevron.bottom:before {
top: 7px;
transform: rotate(45deg);
transition : all 0.3s ease-out;
}
@media ( min-width:767px ) {
.chevron::before {
float: right;
}
}
@media ( max-width:768px ) {
.chevron::before {
float: left;
}
.chevron.bottom:before {
top: 8px;
}
}
.chevron-child::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
float: right;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
}
.chevron-child.right:before {
left: 0;
transform: rotate(45deg);
}
.chevron-child.bottom:before {
top: 6px;
transform: rotate(135deg);
transition : all 0.3s ease-out;
}
.chevron-child.left:before {
left: 0.25em;
transform: rotate(-135deg);
}
.main-navigation .menu>li.menu-item-has-children> ul li.dropdown:hover>a.chevron-child.bottom:before,
.main-navigation .menu>li.menu-item-has-children> ul li.dropdown:focus-within>a.chevron-child.bottom:before {
top: 7px;
transform: rotate(45deg);
transition : all 0.3s ease-out;
}
@media ( max-width:768px ) {
.chevron-child::before {
left: 0;
float: right;
}
.chevron-child.bottom:before {
top: 8px;
}
}
/* #Navigation
================================================== */
.menu a {
font-size:15px;
font-weight:600;
font-family: system-ui;
}
.start-header {
opacity: 1;
transform: translateY(0);
-webkit-transition : all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.start-header.scroll-on {
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
background:#000000;
padding: 5px 0;
-webkit-transition : all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img {
height: 28px;
-webkit-transition : all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.navbar {
display:inline-block;
padding: 0;
}
.navbar-brand {
width:100%;
margin-right:0;
padding-top: 1.3125rem;
padding-bottom: 0;
font-size: .8rem;
}
.navbar-brand img {
display:inline-block;
height: 70px;
-webkit-transition : all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.navbar-toggler {
float: right;
border: none;
padding: 20px;
}
/* .navbar-toggler:active,
.navbar-toggler:focus {
outline: none;
} */
.navbar-light .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
border-bottom: 2px solid #FFFFFF;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after,
.navbar-light .navbar-toggler-icon:before {
width: 24px;
position: absolute;
height: 2px;
background-color: #FFFFFF;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
color: #FFFFFF;
padding: 30px 15px;
letter-spacing: 2px;
transition: all 200ms linear;
}
.nav-link {
position: relative;
display: inline-block;
}
.has-dropdown { position:relative }
.has-dropdown:after {
content: "\f192";
position: absolute;
right: -2px;
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 600;
font-size: 4px;
bottom: 28px;
}
@media (max-width: 991px) {
.has-dropdown:after {
bottom: auto
}
}
.nav-item:hover:after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover:after {
opacity: 0;
}
.nav-item {
line-height: 20px;
/* margin: 0px 10px; */
padding: 0;
position: relative;
transition: all 10ms linear;
}
.nav-item .dropdown-menu {
transform: translate3d(0, 10px, 0);
visibility: hidden;
max-height: 0;
display: block;
padding: 0;
margin: 0;
transition: all 10ms linear;
border-top: 3px solid;
}
.nav-item.show>.depth-0 {
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
.nav-item.show>.depth-1 {
opacity: 1;
visibility: visible;
max-height: 999px;
transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
margin: 0;
letter-spacing: 1px;
color: #FFFFFF;
background-color: #ffffff;
border: none;
border-radius: 0px;
box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
transition: all 200ms linear;
}
.dropdown-menu .nav-item {
margin:0;
background: #fff;
}
.dropdown-menu .has-dropdown:after {
content: "\f105";
right:80px;
bottom:15px;
font-size: 10px;
}
.dropdown-toggle::after {
display: none;
}
.depth-1 {
left: 100%;
top: -3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #fff;
}
@media (max-width: 991px) {
.navbar-nav .show .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@media (max-width: 991px) {
.dropdown-item:hover,
.dropdown-item:focus {
background: transparent;
}
.navbar .navbar-nav li > a {
font-size: 0.875rem;
display: block;
padding: 14px 0px 14px 0px;
border-bottom: 1px solid rgba(73, 71, 71, 0.30) !important;
}
ul.menu {
display: inline-block;
width: 100%;
margin:0
}
.navbar .navbar-nav li {
margin: 0 20px;
padding: 0;
}
}
/*Cart*/
.shopping-cart i {
color: #ffffff;
}
.shopping-cart .cart {
position:relative;
}
.shopping-cart .cart i {
border: 2px solid #000;
padding: 12px;
background-color: #000;
border-radius: 50%;
}
.shopping-cart .cart-total {
font-size: 0.688rem;
line-height: 1.7;
color: #ffffff;
text-align: center;
font-weight: 600;
position: absolute;
right: -7px;
top: 13px;
padding: 1px;
width: 1.25rem;
height: 1.25rem;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-wekbit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (max-width: 991px) {
.shopping-cart {
margin: 15px 20px
}
.shopping-cart > .cart > a .cart-total {
left: 5px;
top: -5px
}
}
@media (min-width: 991px) {
.shopping-cart {
padding-top:13px;
float: right;
margin-left: 1.5rem;
}
}
/* #Scroll down anchor
================================================== */
.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}
.scroll-down {
position: absolute;
bottom: 90px;
left: 50%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
background: rgba(255,255,255,.12);
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
}