/*
 Theme Name: Ekko Child
 Theme URI: http://www.ekko-wp.com/
 Description: Ekko Child Theme
 Author: nifty 
 Author URI: https://www.nifty.gr/
 Template: ekko
 Version: 1.0.0
*/

:root {
  --main-bg-color: #fff;
  --main-text-color: #012169;
  --secondary-bg-color: #012169;
  --secondary-text-color: #fff;
  --shadow-color: #c5c6c7;
}

/* Style the industries sidebar */
#industries-menu-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  /* background: rgba(0, 0, 0, 0.8); */
  background-color: #000;
  z-index: 9999;
  box-shadow: 0 0.2em 0.4em #000;
  box-sizing: border-box;
  height: 100vh;
}
/* Expore industries button */
#industries-menu-explore-btn {
  display: none;
}

#industries-menu-close-btn {
  display: none;
  position: absolute;
  top: 48px;
  right: 32px;
  padding: 0;
  cursor: pointer;
  font-size: 1.75em;
  color: #fff;
  background-color: transparent;
  border: none;
  z-index: 9999;
  outline: none;
}

#industries-menu-close-btn:hover {
  transform: scale(1.1);
}

#industries-menu-close-btn:active {
  transform: scale(1.2);
}

.industries-menu-nav {
  height: 100%;
}

.industries-menu-nav ul {
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 1.25em 0;
}

.industries-menu-nav li {
  text-align: center;
}

.industries-menu-nav a {
  width: 12em;
  padding: 0.8em 1.2em;
  font-size: 0.75em;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.075em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.industries-menu-nav a img {
  margin-bottom: 0.625em;
  width: 2em;
  height: auto;
}

.industries-menu-nav a:hover {
  text-shadow: 0 0 0.2em #fff;
}

.industries-menu-nav a:hover img {
  /* transform: scale(1.2); */
  filter: sepia(1) saturate(10000%) hue-rotate(0deg) brightness(2.2);
}

.industries-menu-nav a:active {
  text-shadow: 0 0 0.1em #fff;
}

.industries-menu-nav a:active img {
  filter: sepia(1) saturate(10000%) hue-rotate(0deg) brightness(2.2);
}

/* max-height: 740 */

#main-wrapper > nav {
  margin-right: 144px !important;
}

#wrapper {
  margin-right: 144px !important;
}
/* Main menu item underline effect */
ul.nav.navbar-nav > li:not(:first-child) a::after {
  content: "";
  transition: 0.2s all ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  left: 50%;
  height: 2px;
  width: 0;
  bottom: 20px;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #012169;
}

ul.nav.navbar-nav > li:not(:first-child) a:hover::after {
  width: calc(100% - 30px) !important;
  color: #fff !important;
}

.transparent-main-nav-bar > li:not(:first-child) a::after {
  background-color: #fff !important;
}


.navbar-shrink ul.nav.navbar-nav > li:not(:first-child) a::after {
  background-color: #012169 !important;
}

/* Top Header bar */
.topbar.tb-border-design > div {
  width: 100% !important;
}

#home > .container {
  width: 100% !important;
}

#footer {
  margin-right: 144px !important;
}

@keyframes slideUp {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}

@keyframes slideDown {
  0% {
    top: 0;
  }

  99% {
    top: calc(99% - 88px);
  }
  100% {
    top: auto;
  }
}

@media (max-width: 1119px) and (min-width: 960) and (min-height: 740px) {
}

@media (min-width: 1200px) {
  .dropdown-menu {
    min-width: 920px !important;
  }
}

@media (min-width: 960px) {
	/* Main nav bar */
	nav:not(.navbar-shrink) #menu-main-menu.transparent-main-nav-bar > .menu-item:not(:first-child) > 	a:hover {
 	color: #fff !important;
	}
	
  /* Dropdown Menu */
  .mega-menu.dropdown {
    position: relative !important;
  }

  .dropdown-menu {
    display: grid !important;
    grid-template-columns: repeat(3, auto) !important;
    padding: 40px !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transform: translate(-40%, 0%);
    left: 50% !important;
    right: inherit !important;
    min-width: 760px !important;
  }

  .dropdown-menu::before {
    width: initial !important;
  }	
}

@media (max-width: 1079px), (max-height: 739px) {
  #industries-menu-sidebar {
    top: auto;
    left: 0;
    bottom: 0;
    padding: 1.25em;
    height: initial;
    background-color: #fff;
    box-shadow: 0 0.2em 0.6em #dff;
    animation: slideDown 0.6s forwards;
  }

  .industries-menu-open {
    background-color: rgba(0, 0, 0, 0.9) !important;
    animation: slideUp 0.6s forwards !important;
  }

  #industries-menu-explore-btn {
    display: block;
    margin: 0 auto;
  }

  .industries-menu-open #industries-menu-explore-btn {
    display: none;
  }

  .industries-menu-open #industries-menu-close-btn {
    display: block;
  }

  .industries-menu-nav {
    display: none;
  }

  .industries-menu-open .industries-menu-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #menu-industries-navigation-menu {
    margin: 1.75em auto;
    padding: 1.75em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1.75em;
    align-items: start;
    justify-items: center;
    justify-content: space-between;
    align-content: space-between;
    height: auto;
  }

  .industries-menu-nav a {
    font-size: 1em;
    width: auto;
    max-width: 14em;
  }

  .industries-menu-nav a img {
    height: 3em !important;
    width: auto;
    margin-bottom: 0.75em;
  }

  #main-wrapper > nav {
    margin-right: initial !important;
  }

  #wrapper {
    margin-right: initial !important;
  }

  #footer {
    margin-right: initial !important;
    margin-bottom: 88px !important;
  }

  /* Back to top btn */
  .back-to-top.active {
    bottom: 128px !important;
  }
}

@media (max-width: 699px), (max-height: 539px) {
  #menu-industries-navigation-menu {
    gap: initial;
  }

  .industries-menu-nav a img {
    height: 2.4em !important;
    width: auto;
  }
}

@media (max-width: 519px) {
  #menu-industries-navigation-menu {
    margin: 1.25em auto;
  }
  .industries-menu-nav a {
    font-size: 0.875em;
  }
}

@media (max-width: 469px) {
  .industries-menu-nav a {
    font-size: 0.75em;
  }
}

@media (max-height: 469px) {
  #menu-industries-navigation-menu {
    margin: 1.25em auto;
  }

  .industries-menu-nav a {
    font-size: 0.875em;
    padding: 0.625em;
  }
  .industries-menu-nav a img {
    margin-bottom: 0.625em;
    height: 2.4em !important;
  }
}

@media (max-height: 389px) {
  #industries-menu-sidebar {
    padding: 0.75em;
  }

  #menu-industries-navigation-menu {
    padding: 0em;
    margin: 0.75em 0 0 0;
  }
  .industries-menu-nav a {
    font-size: 0.75em;
  }
  .industries-menu-nav a img {
    margin-bottom: 0.4em;
    height: 2.2em !important;
  }
}

@media (max-width: 489px) and (max-height: 369px) {
  #industries-menu-close-btn {
    top: 32px;
    right: 18px;
    font: 1.5em;
  }

  .industries-menu-nav a {
    font-size: 0.5em;
  }
  .industries-menu-nav a img {
    height: 1.8em !important;
  }
}