#watkinsNav li {
    position: relative;
    text-align: center;
}

#watkinsNav .dropdown-item.active, .dropdown-item:active {
    color: #663091;
    text-decoration: none;
    background-color: yellow;
  	width: 100%;
}

#watkinsNav a:hover, a:active, a:visited, a:focus, a.active, a.focus {
    text-shadow: -1px -1px 0px rgba(255,255,255,0.5), -2px -3px 20px rgb(255 255 255 / 75%), 2px -3px 20px rgb(255 255 255 / 75%), -2px 3px 20px rgb(255 255 255 / 75%), 2px 3px 20px rgb(255 255 255 / 75%);
}

#watkinsNav .nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

img.watkins_solutions_logo {
    filter: drop-shadow(-1px -1px 0 rgba(255,255,255,0.6)) drop-shadow(2px 3px 19px lightgreen);
    margin-left: 15px;
}

a.nav-link.watkins_solutions_home_link {
    filter: drop-shadow(-1px -1px 0px rgba(255,255,255,0.5)) drop-shadow(2px 3px 20px rgb(255 255 255 / 75%)) drop-shadow(-2px 3px 20px rgb(255 255 255 / 75%)) drop-shadow(2px -3px 20px rgb(255 255 255 / 75%)) drop-shadow(-2px -3px 20px rgb(255 255 255 / 75%));
}

.watkins_solutions_home_link, .watkins_solutions_home_link.active {
    background-image: url("../images/watkins_solutions_text-menu.png");
    background-repeat: no-repeat;
  	background-position: left 15px;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.0001em;
    width: 270px;
    margin-right: 5px;
}

.watkins_solutions_logo, .watkins_solutions_home_link {
  -webkit-animation: bounce 2s;
  animation: bounce 2s;
}

.watkins_solutions_logo:hover, .watkins_solutions_home_link:hover {
    -webkit-animation: tada 1s;
    animation: tada 1s; 
}

.menu_topbar .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-top: 20px;
}

.menu_topbar {
  width: 100%;
}

.menu_topbar a.nav-link {
    color: white;
  	text-transform: uppercase;
  	font-size: 1rem;
  	font-weight: bold;
  	/* text-shadow: -1px -1px 0px rgba(255,255,255,0.5), -2px -3px 40px rgb(255 255 255 / 75%), 2px -3px 20px rgb(255 255 255 / 75%), -2px 3px 40px rgb(255 255 255 / 75%), 2px 3px 40px rgb(255 255 255 / 75%); */
}

.menu_topbar a.active, .menu_topbar a.current, .menu_topbar a.nav-link:hover {
    color: #8035b4 !important;
    text-transform: uppercase;
}

ul.navbar-nav {
    padding: 5px 15px;
}


.bg-light {
    background: rgba(255,255,255,0.5) !important;
    /* border-radius: 0 0 20px 20px; */
    box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
    border-top: solid 2px rgba(255,255,255,0.6);
    border-bottom: solid 3px rgba(0,0,0,1);
}

.horizontal_menu .navbar li:not(:last-of-type) {
    border-right: 1px solid var(--bs-purple);
}

.horizontal_menu .navbar li a:hover, .websites_category .navbar li a.hover, .websites_category .navbar li a:active, .websites_category .navbar li a.actor {
    color: var(--bs-purple);
}
.horizontal_menu .navbar li a, .websites_category .navbar li a:visited {
    color: var(--bs-green);
}
.horizontal_menu .navbar li {
    font-weight: bold;
    padding: 0 20px;
}
.horizontal_menu .navbar {
    text-shadow: none;
    border-radius: 12px;
}

.websites_category {
    margin: 20px 0;
}

/* Sidebar Menus */

.services_side_menu li {
    padding: 0 5px;
}

.services_side_menu li:hover, .services_side_menu li:focus, .services_side_menu li:active, .services_side_menu li.active, .services_side_menu li.focus {
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
}
.services_side_menu a:hover, .services_side_menu a:focus, .services_side_menu a:active, .services_side_menu a.active, .services_side_menu a.focus {
    color: var(--bs-green);
}
.services_side_menu .nav, .services_side_menu .navbar-nav {
    background: none;
}
.services_side_menu a {
    color: var(--bs-purple);
    text-shadow: none;
    font-weight: bold;
}
.services_side_menu {
    background: rgba(255,255,255,0.5);
    margin: 25px 0;
    border-radius: 12px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-top: solid 2px rgba(255,255,255,0.6);
    border-left: solid 2px rgba(255,255,255,0.6);
}

.services_side_menu .navbar-nav {
    padding: 0;
    background: none;
    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
}

.services_side_menu .accordion, .services_side_menu .accordion-item, .services_side_menu .accordion-header, .services_side_menu .accordion-button {
    background: none !important;
    background-color: transparent !important;
}

/* END of Sidebar Menus */

/* Extra Small devices (phones 575px and down) */
@media only screen and (max-width: 575px) {
	
}

/* Small devices (phones, tablets, 991px and down) */
@media only screen and (max-width: 991px) {
	
/* Navigation */
  
.navbar-brand {
    width: 75%;
  }

/* END of Navigation */
	
}

/* XL and SMALLER devices (phones, tablets, 1399px and down) */
@media only screen and (max-width: 1399px) {

/* Navigation */

button.navbar-toggler {
  border-top: solid 1px rgba(255,255,255,0.6);
  border-left: solid 1px rgba(255,255,255,0.6);
  background-color: rgba(255,255,255,0.4);
}

#watkinsNav .nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}
  
#watkinsNav li a {
  color: #275338;
  font-weight: bold;
}

#watkinsNav li.active, #watkinsNav li:hover {
  background: rgba(255,255,255,0.5);
}
  
#watkinsNav li a.active, #watkinsNav li a:hover {
  color: #275338;
  text-shadow: none;
}
  
#watkinsNav li+li {
  border-top: 2px solid white;
}
  
#watkinsNav li ul li+li {
  border-top: 1px solid white;
}
  
.navbar, .navbar-brand {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
  
.navbar-nav {
  padding: 35px 15px !important;
  background: rgba(255,255,255,0.6);
  border-top: 3px ridge rgba(255,255,255,0.8);
  border-left: 3px ridge rgba(255,255,255,0.8);
  border-bottom: 3px ridge rgba(39,83,56,1);
  border-right: 3px ridge rgba(102,48,145,1);
  border-radius: 12px;
  width: 90%;
  margin: 0 5%;
}
  
.navbar-nav li {
  text-align: left !important;
  width: 100%;
  margin: 0 auto;
  text-shadow: none;
  padding-left: calc((100% - 200px) / 2) !important;
  line-height: 2em !important;
}
  
.navbar-nav li ul {
  background: none;
  text-align: left;
  border: none;
}
  
.navbar-nav li ul li {
  padding-left: 0 !important;
  font-weight: bold;
  font-size: 1.25rem;
}
  
.menu_topbar a.nav-link {
  font-size: 1.5rem;
}
  
.top_nav_container {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}
  
.bg-light {
  background: none !important;
  box-shadow: none;
  border-top: none;
  border-bottom: none;
}
  
.menu_logo {
  width: 100px;
  height: auto;
  margin: 10px;
  -webkit-animation: bounce 2s;
  animation: bounce 2s;
}
  
.menu_logo:hover {
  -webkit-animation: bounce 2s;
  animation: bounce 2s;
}
  
.navbar-toggler {
  margin-right: 10px;
}

/* END of Navigation */
	
}

/* sm Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) {
	
}

/* md Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
.menu_logo {
  width: auto;
  height: auto;
}
	
}

/* lg Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
/* Navigation */

#watkinsNav .navbar-nav li + li {
  	padding: 0 5px;
}
  
#watkinsNav li {
    position: relative;
    text-align: center;
}

/* END of Navigation */
	
}

/* xl Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
/* Navigation */

.menu_topbar a.nav-link {
  	font-size: 1.15rem;
}

/* END of Navigation */
	
}

/* xxl Extra extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
	
/* Navigation */

#watkinsNav .dropdown-item {
    display: block;
    width: 200px;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: #275338;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-shadow: none;
}

#watkinsNav .dropdown-item a {
    color: #275338 !important;
    text-shadow: none !important;
  	width 100% !important;
  	text-align: center;
}
  
#watkinsNav .dropdown-item a:hover, .dropdown-item a.active {
    color: #663091 !important;
    text-shadow: none !important;
  	font-weight: bold;
}
  
#watkinsNav li li {
    position: relative;
    text-align: center;
    width: 100%;
    padding: 0;
}
  
#watkinsNav li li {
    color: #275338 !important;
  	text-shadow: none !important;
}
  
#watkinsNav li li:hover, #watkinsNav li li.active {
    color: #663091 !important;
}
  
#watkinsNav li li a {
    color: #275338 !important;
  	text-shadow: none !important;
  	width: 100% !important;
}
  
#watkinsNav li li a:hover, #watkinsNav li li a.active {
    color: #663091 !important;
    background-color: yellow !important;
    font-weight: bold;
}
  
#watkinsNav li a:hover::before, #watkinsNav li a.active::before, #watkinsNav li a.current::before {
  	display: grid;
  	font-family: "Font Awesome 5 Free";
  	font-weight: 900;
  	/* content: "\f007"; */
    text-align: center;
    background-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    font-size: 1.5em;
    width: 2em;
    height: 2em;
    position: absolute;
    left: calc(50% - 1em);
    top: -52px;
    border-left: solid 2px #275338;
    border-top: solid 2px #275338;
    align-content: center;
    color: #275338;
    text-shadow: none;
    animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 500ms; /* don't forget to set a duration! */
}
  
#watkinsNav li a.home_link:hover::before, #watkinsNav li a.home_link.active::before, #watkinsNav li a.home_link.current::before {
  	content: "\e3af";
}
  
  
#watkinsNav a:hover, a.active, a.current {
    margin-left: -1em;
    margin-right: 1em;
}
  
#watkinsNav li li a:hover, li li a.active, li li a.current {
    margin-left: 0em;
    margin-right: 0em;
}

#watkinsNav a:hover span, a.active span, a.current span {
    visibility: hidden;
}
  
#watkinsNav li a.about_link:hover::before, #watkinsNav li a.about_link.active::before, #watkinsNav li a.about_link.current::before {
  	content: "\e59d";
}
  
#watkinsNav li a.services_link:hover::before, #watkinsNav li a.services_link.active::before, #watkinsNav li a.services_link.current::before {
  	content: "\f12e";
}
  
#watkinsNav li a.quote_link:hover::before, #watkinsNav li a.quote_link.active::before, #watkinsNav li a.quote_link.current::before {
  	content: "\f651";
}
  
#watkinsNav li a.contact_link:hover::before, #watkinsNav li a.contact_link.active::before, #watkinsNav li a.contact_link.current::before {
  	content: "\f27a";
}
  
#watkinsNav li a.login_link:hover::before, #watkinsNav li a.login_link.active::before, #watkinsNav li a.login_link.current::before {
  	content: "\f084";
}
  
/* #watkinsNav li a.cart_link:hover::before, #watkinsNav li a.cart_link.active::before, #watkinsNav li a.cart_link.current::before {
  	content: "\f07a";
} */
  
#watkinsNav li a.cart_link:hover::before, #watkinsNav li a.cart_link.active::before, #watkinsNav li a.cart_link.current::before {
  	content: "\f0e3";
}
  
#watkinsNav li::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 5px;
    background: linear-gradient(90deg, rgba(102,48,145,1) 50%, rgba(39,83,56,1) 50%);
    left: 0;
    bottom: -37px;
    border-radius: 8px 8px 0 0;
    border-top: none;
    border-left: none;
  	transition: 500ms;
}
  
#watkinsNav li:hover::after, #watkinsNav li.current::after, #watkinsNav li.active::after {
    width: 100%;
    border-top: solid 1px rgba(255,255,255,0.7);
    border-left: solid 1px rgba(255,255,255,0.7);
}
  
#watkinsNav li li:hover::after, #watkinsNav li li.current::after, #watkinsNav li li.active::after {
    width: 0%;
    border-top: none;
    border-left: none;
}

/* END of Navigation */
	
}