/*!
Theme Name: Valborg 2021
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: valborg-2021
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Valborg 2021 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.25;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  font-family: TeXGyreHeros, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.25;
  word-break: normal;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  /* text-align: end; */
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 auto;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* 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: #fff;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/*CUSTOM CSS*/
@import url(https://use.typekit.net/lpf5mnn.css);

@font-face {
  font-family: "Uppsala Display";
  src:
    url("fonts/Uppsala-Display.woff2") format("woff2"),
    url("fonts/Uppsala-Display.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TeX Gyre Heros";
  src:
    url("fonts/TeXGyreHeros-Regular.woff2") format("woff2"),
    url("fonts/TeXGyreHeros-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TeX Gyre Heros";
  src:
    url("fonts/TeXGyreHeros-Bold.woff2") format("woff2"),
    url("fonts/TeXGyreHeros-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.customize-support .top {
  top: 32px;
}

/* Basic styling options - Margins, fonts etc --------------------------------*/
h1 {
  font-family: "Uppsala Display", sans-serif;
  text-transform: uppercase;
  font-size: 45px;
  font-weight: 700;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  text-align: left;
  line-height: 1;
}
h2 {
  font-family: "Uppsala Display", sans-serif;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 500;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  text-align: left;
}
h3 {
  font-family: "Uppsala Display", sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 500;
  text-align: left;
}

h2.hero-top-title {
  font-size: 30px;
  font-weight: 500;
}
h3.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
}

h3.footer-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #000;
}

p {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}
#main {
  margin: 0 auto;
}

ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.wrapper {
  margin: 0 auto;
}

/* Links -------------------------------------------- */
a {
  color: black;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  text-decoration: dashed;
}

a:focus {
  outline: thin dotted;
}

a:hover {
  text-decoration: underline;
  color: #818181;
}

/* Front-page puffs/cards & buttons-------------------------------------------- */

.card-img-top {
  width: 100%;
  height: 27rem;
  object-fit: cover;
  opacity: 1;
}
.puff-button-front {
  width: 100%;
}
.puff-button,
.single-nav-button {
  background-color: #ffe6e6;
  font-family: "TeX Gyre Heros", sans-serif;
  font-weight: 700;
  max-width: 100%;
  font-size: 24px;
  color: #6c0808;
  padding: 0.5rem 2rem;
  text-transform: uppercase;
  border-radius: 0px;
  text-align: left;
}
.puff-button:hover,
.single-nav-button:hover {
  background-color: #6c0808;
  color: #ffe6e6;
}

.single-nav-button p {
  margin: 0 auto;
}
.meta-nav {
  text-decoration: 2px underline #fff;
}
.puff-footer-button {
  margin-top: -10%;
  position: relative;
}
.puff-header-image {
  border: 5px solid rgb(255, 255, 255);
  background-color: #ffe6e6;
  max-width: 50px;
  margin-bottom: -10%;
  z-index: 1;
  position: relative;
  border: 5px solid rgb(255, 255, 255);
  background-color: #ffe6e6;
  max-width: 80px;
}

.img-thumbnail {
  padding: 0.5rem;
}
.puff-container {
  padding-bottom: 10px;
}

.puff-card {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -ms-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
  transition: opacity 0.5s ease-in;
}

.puff-card .puff-card-active {
  opacity: 0;
}

.puff-card:hover {
  animation: shake 2s;
  animation-iteration-count: 1;
}

.puff-row {
  margin-bottom: 5%;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(3px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Page titles  -------------------------------------------- */

/* .rotated-div > span{
	padding-top: 20px;
	display: inline-block;
	font-size: 45px;
	font-weight: 500;
	-webkit-transform: rotate(357deg);
	-moz-transform: rotate(357deg);
	-ms-transform: rotate(357deg);
	-o-transform: rotate(357deg);
	transform: rotate(357deg);
	margin-bottom: 30px;

} */
.lastWord {
  color: #ffe6e6;
  font-weight: bold;
  display: inline-block;
}

/* .firstword {
	color: #ffe6e6;
	font-weight: bold;
	-webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #fff;
  font-size: 64px;
} */
#page-title h1.front-page span {
  color: #ffe6e6;
}

span.entry-subtitle {
  display: block;
  font-size: 1.5rem;
  text-transform: none;
}
.entry-header {
  margin: 4% 0 2%;
}
/* Hero blocks -------------------------------------------- */

.hero-container {
  background: url(images/bg-rutor.jpg);
}

.hero-container p {
  font-size: 1.5em;
  line-height: 1.25em;
}

.simple-hero-container {
  background: url(images/bg-rutor.jpg);
}

.simple-page-end-hero {
  background: url(images/bg-boende.jpg);
}

.green {
  background: rgba(177, 215, 76, 0.5);
  height: 100%;
}
.black {
  background: rgba(18, 19, 16, 0.5);
  height: 100%;
}
.none {
  background: none;
}

.jumbotron,
.jumbotron-simple {
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 550px;
}

.front-page-end-hero {
  background-attachment: fixed;
}

/* Header and navigation -------------------------------------------- */

:root {
  --top-header-height: 80px;
}

#page {
  padding-top: var(--top-header-height);
}

.site-header {
  background-color: rgb(255, 230, 230);
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 7;
}

.admin-bar .site-header {
  top: 32px;
}

.admin-bar .overlay {
  top: calc(var(--top-header-height) + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }

  .admin-bar .overlay {
    top: calc(var(--top-header-height) + 46px);
  }
}

.top-header {
  min-height: var(--top-header-height);
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
}

.top-header-home-link {
  display: inline-block;
  text-decoration: none;
  color: rgb(108, 8, 8);
  font-family: "Uppsala Display", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.6rem);
  letter-spacing: 0.04em;
  line-height: 1;
}

.top-header-home-link:hover,
.top-header-home-link:focus {
  color: rgb(108, 8, 8);
}

body.menu-open .top-header-home-link {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header-container {
  background-color: #ffe6e6;
  background-size: cover;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 3;
  left: 0;
  top: var(--top-header-height);
  background-color: rgb(0, 0, 0); /* Black fallback color */
  background-color: rgba(255, 230, 230, 1); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay.active {
  border-bottom: 3px solid #fff;
}
/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  /* -webkit-transform:translateZ(0); */
  top: 20%; /* 25% from the top */
  width: 100%; /* 100% width */
}
.overlay .sub-menu {
  font-size: 20px;
}
.overlay .sub-menu a {
  font-size: 20px;
}
/* The navigation links inside the overlay */
.overlay a {
  padding: 10px 40px;
  text-decoration: none;
  font-size: 30px;
  color: #000;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
  text-align: left;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: #818181;
}
.overlay .language-switcher {
  padding: 10px 40px;
  font-size: 30px;
  text-align: left;
  white-space: nowrap;
}
.overlay .language-switcher a {
  display: inline;
  padding: 0;
  font-size: inherit;
}
.close-nav {
  font-size: 20px;
  cursor: pointer;
  float: none;
  color: #000;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  z-index: 6;
  right: auto;
  top: auto;
  background-color: rgba(255, 230, 230, 1);
  transition: 0.5s;
  padding: 5px 16px;
  font-weight: 600; /* tillägg */
}

.close-nav .menu-icon line {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.menu-icon {
  vertical-align: text-top;
}

.close-nav.active-menu {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 9;
}

.admin-bar .close-nav.active-menu {
  top: 42px;
}

@media screen and (max-width: 782px) {
  .admin-bar .close-nav.active-menu {
    top: 56px;
  }
}

.close-nav.active-menu .menu-icon line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.close-nav.active-menu .menu-icon line:nth-child(2) {
  opacity: 0;
}

.close-nav.active-menu .menu-icon line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.close-nav.active-menu .menu-text {
  display: none;
}

.close-nav.btn:focus {
  outline: 0;
  box-shadow: none;
}
.close-nav img {
  max-width: 40px;
  margin-right: 10px;
}
.close-nav.active {
  top: auto;
}

/* Dynamic content from wordpress text-editor -------------------------------------------- */
.wp-content-container {
  margin-bottom: 5%;
}
.wp-content-container img {
  padding: 4px 5px 4px 5px;
}
.wp-content-container ul {
  list-style: none;
  margin-top: 0;
  margin-bottom: 1rem;
}
.wp-content-container ul li::before {
  font-size: 30px;
  content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #6c0808; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5rem; /* Also needed for space (tweak if needed) */
  margin-left: -0.5rem; /* Also needed for space (tweak if needed) */
  position: relative;
  top: 4px;
  margin-right: 1rem;
}
.wp-content-col {
  border-bottom: 2px solid rgba(255, 230, 230, 1);
  margin: 5px 0px 5px 0px;
  padding-bottom: 3%;
}

.wp-heading-col {
  margin: 5px 0px 5px 0px;
}
/* Sidebars and Widgets -------------------------------------------- */

.wp-sidebar-col {
  margin: 5px 0px 5px 0px;
}
.wp-lead-col,
.wp-lead-col-last {
  text-align: center;
}
.text-centered {
  margin-left: 0px !important;
  margin-bottom: 1.5rem;
}

/* Footer -------------------------------------------- */

.footer-container {
  background-color: #ffe6e6;
  color: #fff;
}

.entry-content img,
.comment-content img,
.widget img {
  max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
  height: auto;
  max-width: 80%;
}
img.size-full {
  max-width: 80%;
  width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

.iframe iframe {
  width: 100%;
  min-height: 50%;
}

/* EVENT  -----------------------*/

.event-info-container h5,
.event-info-container h4,
.event-info-container h3,
.event-info-container p {
  margin: 0 auto;
}
h4.event-category {
  font-weight: 600;
  font-size: 1rem;
  color: #6c0808 !important;
}

h4.event-category {
  font-weight: 600;
  font-size: 1rem;
  color: #6c0808 !important;
}
.event-time {
  color: #6c0808;
}

.event-location {
  color: #000;
}

h4.event-date {
  text-transform: uppercase;
  color: #6c0808 !important;
  font-size: 1.1rem;
}

.event-title {
  font-weight: 700;
  color: #6c0808;
  font-size: 1.1rem;
  text-transform: uppercase;
}

h2.no-events {
  color: #6c0808;
}

.card-deck-events {
  width: 100%;
}
.event-info-container h4 {
  color: #ffe6e6;
}

.event-date span {
  font-size: 32px;
}

.event-info-container {
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.9);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.event-header-row {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.event-search-col {
  order: 2;
  -webkit-order: 2;
}
.event-filter-col {
  order: 3;
  -webkit-order: 3;
}
.event-date-col {
  order: 1;
  -webkit-order: 1;
}

.saved-events-container {
  order: 4;
  -webkit-order: 4;
}

.save-event-container {
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
}

span#save-event-span {
  cursor: pointer;
}

.save-heart-icon {
  color: #6c0808;
  font-size: 24px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
}
.save-heart-icon.saved {
  font-weight: 600;
}

.my-saved-events .fa-heart {
  color: #6c0808;
  font-weight: 600;
}

.custom-checkbox {
  display: inline;
}

.custom-checkbox .fa-check {
  display: none;
}

.i-am-student.true .fa-check {
  display: initial;
  color: #6c0808;
  font-weight: 600;
  position: relative;
  margin-left: 0.2rem;
}
.i-am-student.true,
.my-saved-events.active {
  color: #6c0808;
  font-weight: 600;
}

i.student-card-icon,
i.my-saved-events-icon {
  position: relative;
  margin-right: 0.5rem;
}

.my-saved-events,
.i-am-student {
  margin: 2px;
}

.event-header {
  background-color: #ffe6e6;
  margin-bottom: 3%;
  padding: 1.5rem;
}
#datepicker-container {
  text-align: center;
}
#datepicker-center {
  display: inline-block;
  margin: 0 auto;
}

.date-input-container {
  height: 0px;
}
.ui-datepicker-header {
  background-color: #ffe6e6 !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background-color: #ffe6e6 !important;
  border: 1px solid white !important;
}
.event-time-icon {
  background-color: #ffe6e6;
  max-width: 55px;
}

.event-time-icon:hover {
  cursor: pointer;
}

#event-date-calender {
  visibility: hidden;
  width: 0px;
}

.form-control-feedback {
  margin-top: 10px;
  margin-left: 5px;
  color: grey;
  font-size: 20px;
}

.event-card {
  padding-top: 10px;
}
.card-deck-events {
  border-bottom: 2px solid #ffe6e6;
  padding-bottom: 3%;
}
.paginationjs .paginationjs-pages li.disabled > a:hover {
  background-color: #eee;
}
.paginationjs .paginationjs-pages li.disabled > a {
  opacity: 0.8;
}
.paginationjs .paginationjs-pages li {
  border: 3px solid #fff;
}
.paginationjs .paginationjs-pages li > a {
  background-color: #ffe6e6;
  color: #fff;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}
.paginationjs .paginationjs-pages li.active > a {
  height: 40px;
  line-height: 40px;
  background: #000;
  background-color: rgb(0, 0, 0);
  color: #fff;
  font-size: 18px;
}
.paginationjs .paginationjs-pages li.active {
  border: 3px solid #fff;
}

.paginationjs .paginationjs-pages li:last-child {
  border-right: none;
}

/* SINGLE/Posts --------------------------------------------- */

/* Media options -------------------------------------------- */

@media screen and (max-width: 900px) {
  :root {
    --top-header-height: 78px;
  }

  .site-header {
    top: 0;
  }

  .admin-bar .site-header {
    top: 32px;
  }

  .admin-bar .overlay {
    top: calc(var(--top-header-height) + 32px);
  }

  .top-header,
  .site-header {
    box-sizing: border-box;
  }

  .top-header {
    width: 100%;
    overflow: hidden;
    padding: 10px 20px;
  }

  .top-header-home-link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1rem, 0.95rem + 0.8vw, 1.35rem);
    max-width: 70%;
  }

  .close-nav {
    flex: 0 0 auto;
  }

  .submenu-arrow {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.3s ease;
    font-size: 0.8em;
  }

  .submenu-arrow.open {
    transform: rotate(180deg);
  }
  .text-centered {
    margin-left: 0px !important;
  }
  .overlay.active {
    height: calc(100% - var(--top-header-height)) !important;
  }

  #toggle-menu.active-menu {
    top: auto !important;
    right: auto !important;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }

  .admin-bar .overlay {
    top: calc(var(--top-header-height) + 46px);
  }
}

@media screen and (max-width: 600px) {
  :root {
    --top-header-height: 74px;
  }

  .top-header {
    padding: 10px 18px;
  }

  .overlay a {
    font-size: 20px;
  }

  .overlay .language-switcher {
    font-size: 20px;
  }

  .overlay .sub-menu a {
    font-size: 15px;
  }
  .overlay-content {
    top: 10%;
  }
  .overlay .sub-menu {
    position: relative;
  }

  .text-centered {
    margin-left: 0px !important;
  }
}
/* @media screen and (max-width: 400px) {
} */
/* mobile */
@media screen and (min-width: 320px) {
  .puff-card {
    margin-bottom: 10%;
  }
  #event-calender_filter label {
    width: 100%;
  }
  #event-calender_wrapper .filter-box-div {
    float: none;
  }
  .card-img-top {
    max-height: 120px;
  }
  .event-card-image {
    max-height: 280px;
  }
  .card-img-overlay {
    height: 100%;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #event-calender_wrapper .filter-box-div {
    float: none;
  }
  .card-img-top {
    max-height: none;
    height: 27rem;
  }

  .event-search-col {
    order: 1;
  }
  .event-filter-col {
    order: 2;
    text-align: left !important;
  }
  .event-date-col {
    order: 3;
  }

  .saved-events-container {
    order: 4;
  }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .wp-lead-col,
  .wp-lead-col-last {
    border-right: 2px solid black;
  }

  .puff-footer-button {
    margin-top: -6%;
  }

  #event-calender_filter label {
    width: 50%;
  }

  #event-calender_wrapper .filter-box-div {
    float: right;
  }

  .dropdown-toggle {
    padding: 8px 12px;
  }
  .btn-reset-filter {
    padding: 8px 12px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .wp-lead-col-last {
    border-right: 0px;
  }

  .puff-footer-button {
    margin-top: -10%;
  }

  .puff-card {
    margin-bottom: 0%;
  }

  #event-calender_filter label {
    width: 50%;
  }
  .event-info-container {
    padding: 20px;
    margin-bottom: 40px;
  }
  .date-input-container {
    text-align: left;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .puff-footer-button {
    margin-top: -10%;
  }

  #event-calender_filter label {
    width: 50%;
  }
}

@media screen and (max-width: 400px) {
  .hero-container p {
    font-size: 1.2em;
    line-height: 1em;
  }
}

/* Remove parallax for devices without scroll */
@media (hover: none) {
  .front-page-end-hero {
    background-attachment: initial;
  }
}
/* INTERNETEXPLORER */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .puff-row {
    display: flex;
    flex-direction: row;
  }

  .puff-card {
    flex: 1 1 auto;
  }
}

.footer-logo {
  max-width: 25%;
}

.footer-copyright {
  color: #6c0808;
}

.menu-text {
  color: #6c0808;
}

.single-nav-text {
  color: #6c0808;
  text-transform: none;
  font-size: 1.25rem;
  margin: auto;
  font-weight: 500;
  text-align: center;
}
.single-nav-text:hover {
  color: #ffe6e6;
}

.single-nav-button:hover .single-nav-text {
  background-color: #6c0808;
  color: #ffe6e6;
}