﻿/* Menu mobile - slideout, offcanvas, top-nav, mobilmenu. Load only on mobile/tablet (wp_is_mobile). */

#generate-slideout-menu{width:100%; height:100vh; overflow:hidden;}
#generate-slideout-menu .inside-navigation{
	width: 100%;
	margin: 0 0 0 auto;
	padding: 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}
/* Luk-knap: SVG (sort cirkel + hvidt X) Ã¸verst til hÃ¸jre */
/* Kurv-ikon Ã¸verst til venstre i mobilmenu */
#generate-slideout-menu .slideout-cart-link {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 21;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #161615;
	line-height: 1;
}
#generate-slideout-menu .slideout-cart-link:hover,
#generate-slideout-menu .slideout-cart-link:focus {
	color: #161615;
	opacity: 0.85;
}
#generate-slideout-menu .slideout-cart-link svg {
	width: 40px;
	height: 40px;
	max-width: 40px;
	display: block;
}
#generate-slideout-menu .slideout-cart-link svg path {
	fill: currentColor;
}

#generate-slideout-menu .slideout-close-top {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 20;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
}
#generate-slideout-menu .slideout-close-top svg {
	width: 38.628px;
	height: 38.628px;
	display: block;
}
#generate-slideout-menu .slideout-close-top .slideout-close-circle {
	fill: #161615;
}
#generate-slideout-menu .main-nav {
	overflow: hidden;
	position: relative;
	margin-top: 50px;
	margin-bottom: 20px;
	flex: 1 1 0%;
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Sikr at .main-nav fÃ¥r reel hÃ¸jde nÃ¥r slideout er Ã¥ben (sÃ¥ absolutte undermenuer har noget at fylde) */
#generate-slideout-menu.is-open .inside-navigation {
	min-height: 100%;
}
#generate-slideout-menu.is-open .main-nav {
	flex: 1 1 0%;
	min-height: min(200px, 50vh);
	height: 100%;
}
/* VÃ¦r sikker pÃ¥ at hovedmenu-ul altid vises i slideout (uafh. .toggled) */
#generate-slideout-menu .main-nav > ul,
#generate-slideout-menu.is-open .main-nav > ul,
body.nav-is-toggled #generate-slideout-menu .main-nav > ul {
	display: block !important;
}
/* Top-level menu fylder og scrolles nÃ¥r ingen undermenu er Ã¥ben */
#generate-slideout-menu .main-nav > .slideout-menu,
#generate-slideout-menu .main-nav > ul {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
/* NÃ¥r en undermenu er Ã¥ben: ul skal have hÃ¸jde sÃ¥ den absolutte li/submenu har noget at fylde */
#generate-slideout-menu.is-open:has(.sub-menu.toggled-on) .main-nav > ul {
	height: 100%;
	min-height: 0;
}
/* Undermenuer Ã¥bner i lag: fuld overlay, skubber ikke indhold (tving synlighed uafh. tema) */
#generate-slideout-menu .main-nav .sub-menu,
#generate-slideout-menu .main-nav ul ul.sub-menu,
#generate-slideout-menu .main-nav ul ul {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
#generate-slideout-menu .main-nav .sub-menu.toggled-on {
	transform: translateX(100%);
	visibility: hidden;
	z-index: 10;
	background-color: #ECE6E1;
	transition: transform 0.3s ease, visibility 0.3s;
	display: block !important;
}
/* Synligt undermenu-lag: vis nÃ¥r submenu har toggled-on (uafh. om li har sfHover) */
#generate-slideout-menu .main-nav li.sfHover > .sub-menu.toggled-on,
#generate-slideout-menu .main-nav .slideout-menu > li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on {
	transform: translateX(0);
	visibility: visible;
	display: block !important;
	opacity: 1;
}
/* Tving synlighed nÃ¥r slideout er Ã¥ben â€“ gÃ¦lder desktop og mobil (sfHover + :has sÃ¥ det virker uden sfHover) */
#generate-slideout-menu.is-open .main-nav > ul > li.sfHover > ul.sub-menu.toggled-on,
#generate-slideout-menu.is-open .main-nav > ul > li:has(> .sub-menu.toggled-on) > ul.sub-menu.toggled-on,
#generate-slideout-menu.is-open .main-nav > ul > li.sfHover > ul.sub-menu.toggled-on li,
#generate-slideout-menu.is-open .main-nav > ul > li:has(> .sub-menu.toggled-on) > ul.sub-menu.toggled-on li,
#generate-slideout-menu.is-open .main-nav > ul > li.sfHover > ul.sub-menu.toggled-on a,
#generate-slideout-menu.is-open .main-nav > ul > li:has(> .sub-menu.toggled-on) > ul.sub-menu.toggled-on a {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}
#generate-slideout-menu.is-open .main-nav > ul > li.sfHover > ul.sub-menu.toggled-on,
#generate-slideout-menu.is-open .main-nav > ul > li:has(> .sub-menu.toggled-on) > ul.sub-menu.toggled-on {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 10;
	background-color: #ECE6E1;
	overflow-y: auto;
}
#generate-slideout-menu.is-open .main-nav > ul > li.sfHover > ul.sub-menu.toggled-on li,
#generate-slideout-menu.is-open .main-nav > ul > li:has(> .sub-menu.toggled-on) > ul.sub-menu.toggled-on li {
	display: list-item !important;
}
/* Indhold i Ã¥ben undermenu skal vÃ¦re synligt */
#generate-slideout-menu .main-nav li.sfHover > .sub-menu.toggled-on,
#generate-slideout-menu .main-nav li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on,
#generate-slideout-menu .main-nav li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on li,
#generate-slideout-menu .main-nav li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on a {
	visibility: visible !important;
}
#generate-slideout-menu .main-nav li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on li {
	display: list-item !important;
}
#generate-slideout-menu .main-nav li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on a {
	display: block !important;
}
/* NÃ¥r en undermenu er Ã¥ben: kun det aktive lag vises (bruger toggled-on sÃ¥ det virker uafh. sfHover) */
@supports selector(:has(*)) {
	#generate-slideout-menu .main-nav .slideout-menu:has(> li > .sub-menu.toggled-on) > li:not(:has(> .sub-menu.toggled-on)) {
		display: none !important;
	}
}
/* Flere lag: i enhver Ã¥ben undermenu der selv har en Ã¥ben undermenu â€“ skjul sÃ¸skende (kun vis det punkt der har nÃ¦ste lag) */
#generate-slideout-menu .main-nav .sub-menu.toggled-on:has(.sub-menu.toggled-on) > li:not(:has(> .sub-menu.toggled-on)) {
	display: none !important;
}
#generate-slideout-menu .main-nav .sub-menu.toggled-on:has(.sub-menu.toggled-on) > li:has(> .sub-menu.toggled-on) {
	display: list-item !important;
}
/* Alle niveauer: li med Ã¥ben undermenu fylder som overlay (ikke kun top-level) */
#generate-slideout-menu .main-nav li.sfHover > .sub-menu.toggled-on,
#generate-slideout-menu .main-nav li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on {
	transform: translateX(0);
	visibility: visible;
	display: block !important;
	opacity: 1;
}
#generate-slideout-menu .main-nav .sub-menu li.sfHover,
#generate-slideout-menu .main-nav .sub-menu li:has(> .sub-menu.toggled-on) {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 5;
	background-color: #ECE6E1;
	list-style: none;
}
#generate-slideout-menu .main-nav .sub-menu li:has(> .sub-menu.toggled-on) > .sub-menu.toggled-on {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 10;
	overflow-y: auto;
	background-color: #ECE6E1;
}
/* Fallback nÃ¥r :has() ikke understÃ¸ttes (klassen sÃ¦ttes via JS i footer) */
#generate-slideout-menu .main-nav.slideout-submenu-open .slideout-menu > li:not(.sfHover):not(.slideout-layer-open) {
	display: none !important;
}
#generate-slideout-menu .main-nav.slideout-submenu-open .slideout-menu > li.slideout-layer-open > .sub-menu.toggled-on {
	transform: translateX(0);
	visibility: visible;
	display: block !important;
}
#generate-slideout-menu .main-nav .slideout-menu > li.sfHover,
#generate-slideout-menu .main-nav .slideout-menu > li:has(> .sub-menu.toggled-on),
#generate-slideout-menu .main-nav .slideout-menu > li.slideout-layer-open,
#generate-slideout-menu.is-open .main-nav > ul > li.sfHover,
#generate-slideout-menu.is-open .main-nav > ul > li:has(> .sub-menu.toggled-on) {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 5;
	background-color: #ECE6E1;
}
/* Kun nÃ¥r der ER en Ã¥ben undermenu: skjul andre top-level-punkter (ellers vis normal menu) */
#generate-slideout-menu.is-open:has(.sub-menu.toggled-on) .main-nav > ul > li:not(.sfHover):not(:has(> .sub-menu.toggled-on)) {
	display: none !important;
}
#generate-slideout-menu.is-open:has(.sub-menu.toggled-on) .main-nav > ul > li.sfHover,
#generate-slideout-menu.is-open:has(.sub-menu.toggled-on) .main-nav > ul > li:has(> .sub-menu.toggled-on) {
	display: block !important;
}
/* Body SDS logo: fast 80px fra bunden, altid synlig (ogsÃ¥ pÃ¥ undermenuer) */
#generate-slideout-menu .inside-navigation {
	position: relative;
}
#generate-slideout-menu .slideout-logo {
	position: absolute;
	bottom: 80px;
	left: 0;
	right: 0;
	z-index: 100;
	flex-shrink: 0;
	text-align: center;
	padding: 0;
	pointer-events: none;
}
#generate-slideout-menu .slideout-logo svg {
	height: 20px;
	width: auto;
	max-width: 115px;
	vertical-align: middle;
}

/* Mobilmenu: alle a-links 10px padding. Undermenuer samme kant som hovedmenu (ingen ekstra indryk). */
#generate-slideout-menu .main-nav a {
	padding: 12px !important;
  font-size:24px !important;
}
#generate-slideout-menu .menu-item-has-children > a {
	padding-right: calc(var(--slideout-toggle-size, 33px) + 12px) !important;
}

/* Undermenu-pil: baggrund #ECE6E1 (ikke hvid). Aktiv (Ã¥ben) kan beholde orange. */
#generate-slideout-menu .dropdown-menu-toggle {
	background-color: #ECE6E1 !important;
}
#generate-slideout-menu .sfHover > a:link > .dropdown-menu-toggle {
	background: var(--orange) !important;
	color: #fff;
}

/* Kun pÃ¥ enheder under 1024px bred */
@media (max-width: 1023px) {
	#generate-slideout-menu .notMobile {
		display: none !important;
	}
  #generate-slideout-menu .menu-item a {
    border-bottom: solid 1px #CEC7C0;
}
}

/* Mobilmenu: kun tilbage-pil indsat (GP har egne undermenu-pile); tilbage < pÃ¥ undermenuer */
#generate-slideout-menu .sub-menu.toggled-on .nav-back-link,
#generate-slideout-menu .toggled-on .backButtonMenu a {
  display: flex;
  align-items: center;
  font-weight: 600;
}
#generate-slideout-menu .sub-menu.toggled-on .nav-back-link::before,
#generate-slideout-menu .toggled-on .backButtonMenu a::before {
  content: "< ";
  margin-right: 0.35em;
} 



/* offcanvas
===============================*/
.offcanvas {
  position: fixed;
  max-width: 100%;
  width: 300px;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: var(--base-3);
  font-size: 0.9em;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* enables momentum scrolling in iOS overflow elements */
}
.offcanvas li {
  list-style: none;
}
/* Menu Movement */
.offcanvas-left {
  -webkit-transform: translate3d(-300px, 0, 0);
  -moz-transform: translate3d(-300px, 0, 0);
  -ms-transform: translate3d(-300px, 0, 0);
  -o-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
}
.offcanvas-open,.offcanvas[aria-expanded=true] {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.container-push,.push-push {
  -webkit-transform: translate3d(300px, 0, 0);
  -moz-transform: translate3d(300px, 0, 0);
  -ms-transform: translate3d(300px, 0, 0);
  -o-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
/* Menu Transitions */
.offcanvas,#container,.push,.offcanvas-submenu ul {
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  -moz-transition: -moz-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  -o-transition: -o-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
/* Site Overlay */
.site-overlay {
  display: none;
}
.site-overlay[aria-expanded=true] {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-animation: fade 500ms;
  -moz-animation: fade 500ms;
  -o-animation: fade 500ms;
  animation: fade 500ms;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .offcanvas {
    font-size: 1em;
  }
}
@media screen and (min-width: 1200px) {
  .offcanvas {
    display: none;
  }
}
/* offcanvas dropdown */
.offcanvas-submenu ul {
  position: absolute;
  max-width: 100%;
  width: 300px;
  height: 100%;
  top: 0;
  z-index: 10000;
  background: #fafafa;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(-300px, 0, 0);
  -moz-transform: translate3d(-300px, 0, 0);
  -ms-transform: translate3d(-300px, 0, 0);
  -o-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
}
.offcanvas-submenu.open ul {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.offcanvan-dropdown-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.offcanvan-dropdown-links a,.offcanvan-dropdown-links button {
  width: 100%;
  border: none;
}
.offcanvan-dropdown-links button {
  font-size: 30px;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #ccc;
}
.close-dropdown {
  display: block;
  text-align: left;
  width: 100%;
  padding: 9px 30px;
  font-size: 30px;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #ccc;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 1200px) {
	
  #mobilmenu .menu-header-menu-container {
    margin-top: 70px;
  }
  #mobilmenu .menu-header-menu-container ul.menu li a {
    padding: 8px 45px;
    line-height: 1.35em;
    display: block;
    color: var(--sort);
    font-weight: 600;
    font-size: 30px;
  }
  #mobilmenu .menu-header-menu-container ul.menu li:after {
    display: none;
  }
  #mobilmenu .menu-header-menu-container ul.menu > li {
    margin: 0;
    padding: 0;
  }
  #mobilmenu .menu-header-menu-container ul.menu ul li a {
    padding: 0px 45px;
    padding-left: 40px;
    font-weight: normal;
    font-size: 20px;
    padding: 8px 45px;
    line-height: 1.35em;
  }
  #mobilmenu .menu-header-menu-container ul.menu ul li a:before {
    content: "";
    position: absolute;
    top: 22px;
    left: 10px;
    width: 20px;
    height: 1px;
    background: var(--sort);
  }
  .slideout-navigation button.slideout-exit {
    position: absolute;
    width: 68px !important;
    height: 68px;
    top: 0px;
    right: 0px;
    -webkit-appearance: none;
    background: none;
    border: none;
    outline: none;
  }
}

/* EN TOP MENU MOBIL */
@media screen and (max-width: 1280px) {
  .top-nav__small.top-nav__small-phones-only .menu-header-topper-menu-english-container ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
#menu-header-topper-menu {
  display: flex;
  list-style: none;
}
#menu-header-topper-menu li a {
  color: #0a0a0a;
}
#menu-header-topper-menu li a:hover {
  color: var(--accent);
  text-decoration: none;
}
/*#menu-header-topper-menu-1 li:not(:last-child):after {
  content: "\002022";
  padding: 0 10px;
}*/
.top-nav__small {
  display: flex;
  justify-self: flex-end;
  padding: 10px 0;
  margin-left: auto;
  margin-right: 100px;
  /*div{
		a{
			color: @altlinkcolor;
	
			&:hover{
				color: @ctacolor;
				text-decoration: none;
			}
		}
		&:not(:last-child):after {
			content: "\002022";
			padding: 0 10px;
		}
	}*/
}
.top-nav__big {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 38px;
}
.top-nav__big__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #BCBBB8;
  padding: 0px 15px;
  color: var(--sort);
  transition: all 0.25s;
  /*
		&::before{
			font-family: "bodysds-icons";
			content: "\bd903";
			color: var(--sort);
			font-size: 22px;
			font-weight: 300;
			margin-right: 4px;
		}
		*/
}
.top-nav__big__item:hover {
  background-color: #c6c5c2;
  color: var(--sort);
  text-decoration: none;
}
.top-nav__big__item--orange {
  background-color: var(--accent);
  color: var(--base-3);
}
.top-nav__big__item--orange .top-nav__big__item__icon svg {
  fill: var(--base-3);
  margin-right: 4px;
  width: 22px;
  height: 100%;
}
.top-nav__big__item--orange:hover {
  background-color: hsl(13, 58%, 62%);
  color: var(--base-3);
  text-decoration: none;
}
.top-nav__big__item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.top-nav__big__item__icon svg {
  fill: var(--sort);
  margin-right: 4px;
  width: 22px;
  height: 100%;
}
.top-nav__big__item__icon__count {
  position: absolute;
  top: -6px;
  left: -6px;
}
.top-nav__big__item__icon__count__inner,.top-nav__big__item__icon__count > div {
  display: grid;
  place-items: center;
}
.top-nav__big__item__icon__count__inner span,.top-nav__big__item__icon__count > div span {
  width: 18px;
  height: 18px;
  background-color: var(--sort);
  color: var(--base-3);
  border-radius: 50%;
  text-align: center;
}
.top-nav__big__item__text {
  font-weight: bold;
}
.top-nav__big__item--cart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #BCBBB8;
  padding: 0px 0px;
  color: var(--sort);
  width: 85px;
}
.top-nav__big__item--cart:hover #cart-contents {
  opacity: 1;
  pointer-events: all;
}
.top-nav__big__item--cart > a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #BCBBB8;
  padding: 0px 15px;
  color: var(--sort);
  height: 100%;
  transition: all 0.25s;
}

/*

BodySDS top nav responsive

*/
@media screen and (max-width:  1200px ) {
  .top-nav-wrapper {
    display: none;
  }
}
/*

Body SDS top nav search

*/
.top-nav-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  background-color: rgba(233, 229, 224, 0.9);
  z-index: 9999;
}
.top-nav-search__menu {
  display: flex;
  flex-direction: row;
  background-color: #616161;
  width: 100%;
  justify-content: flex-end;
}
.top-nav-search__menu__button {
  color: var(--base-3);
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  text-decoration: none;
  width: 100px;
  text-align: center;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
}
.top-nav-search__menu__button > div {
  height: 26px;
  width: 26px;
  margin-bottom: 2px;
}
.top-nav-search__menu__button > div svg {
  fill: var(--base-3);
}
.top-nav-search__menu__button--booking {
  background-color: var(--accent);
}
.top-nav-search__menu__button--close > div {
  height: 20px;
  width: 20px;
  margin-top: 6px;
}
.top-nav-search__menu__button--close > div svg {
  fill: var(--base-3);
}
.top-nav-search__menu__button:hover {
  background-color: var(--accent);
  color: var(--base-3);
  text-decoration: none;
}
.top-nav-search__content {
  width: 75%;
  max-width: 1065px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-nav-search__content__headline {
  letter-spacing: 1px;
  text-transform: uppercase;
  /*font-family: "ProximaNova-Light", sans-serif;*/
  margin: 30px 0 20px;
  font-size: 23px;
}
.top-nav-search__content__form {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.top-nav-search__content__form__input {
  width: 100%;
  background-color: #eaeaea;
  color: var(--sort);
  font-size: 25px;
  padding: 15px 40px;
  border: none;
}
.top-nav-search__content__form__button {
  width: 15%;
  height: 73px;
  border: 0;
  padding: 0;
  font-size: 20px;
  text-transform: uppercase;
  background-color: #838080;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  color: var(--base-3);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  
}
.top-nav-search__content__form__button div {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.top-nav-search__content__form__button div svg {
  fill: var(--base-3);
}
.top-nav-search__content__results {
  width: 100%;
  background-color: var(--base-3);
}
.top-nav-search__content__results > div {
  overflow-y: scroll;
}
.top-nav-search__content__results > div > div {
  padding: 20px 40px;
}
.top-nav-search__content__results__headline {
  text-align: center;
  margin: 0;
  padding: 30px 0;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--sort);
  
  letter-spacing: 2px;
}
.top-nav-search__content__results__item {
  border-bottom: #e8e7e7 1px solid;
  padding: 15px 0px;
}
.top-nav-search__content__results__item__title {
  letter-spacing: 1px;
  text-transform: uppercase;
  /*font-family: "ProximaNova-Light", sans-serif;*/
  font-weight: normal;
  color: var(--sort);
}
.top-nav-search__content__results__item__title:hover {
  color: var(--accent);
  text-decoration: none;
}
.top-nav-search__content__results__item__excerpt {
  margin-bottom: 20px;
}
@media screen and (max-width:  768px ) {
  .top-nav-search__content {
    width: 90%;
  }
  .top-nav-search__content__form__button {
    width: 25%;
  }
}
