/**
    CSS for gensbol theme

    https://meriden-fluid-demo.squarespace.com/?nochrome=true

    Flowers SVG
    https://www.svgrepo.com/collection/flower-patterns-flat-vectors/


Farver til den mørke orange…Jeg har vsært ved at vurdere, hvordan de vil se ud på siden

DE5D2D
E15A2B
#FF5733 
D23914


*/

:root {
  --text-color : black;
  --light-background: #FBECDC;
  --dark-background: #ff9c6e;
  --heading-color: #DE5D2D;
  --page-width: 1090px;
  --heading-base: 10%;
}

.layout-container {
  max-width: var(--page-width);
  margin: 0 auto;
}

br.clearer {
  clear: both;
}

/* Basic fonts */
input,
select,
body {
  font-family: "Playfair Display";
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 120%;
  background-color: var(--light-background);
}

#block-gensbol-branding a {
  font-size: calc(var(--heading-base) * 45);
  color: var(--heading-color);
  color: var(--light-background);
  font-weight: 500;
  text-decoration: none;
  line-height: 5rem;
  display: block;
  margin: 2rem 0 2rem 2rem;
}

#block-hovedmenu ul {
  float: right;
  margin-right: 1rem;
}

#block-hovedmenu ul li {
  display: inline;
  list-style: none;
  background-color: white;
  margin-right: 1rem;
  padding: 0.3rem 0.6rem;
  transition: all ease-in-out 0.5s;
}

#block-hovedmenu ul li:hover {
  background-color: var(--heading-color);
  color: white;
}

#block-hovedmenu ul li:hover a.is-active,
#block-hovedmenu ul li:hover a {
  color: white;
}

#block-hovedmenu ul li a.is-active {
  color: var(--heading-color);
}


#block-hovedmenu a {
  text-decoration: none;
}

img {
  max-width: 95vw;
}

header[role=banner] {
  background-image: url(/themes/custom/gensbol/images/2600-backdrop.jpg);
  position: absolute;
  width: 100vw;
  margin: 0 auto;
  left: 0;
  height: 200px;
  background-size: cover;
}

main[role=main] {
  padding-top: 240px;
}

/* Colors */

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-weight: 800;
  margin: 0;
}

h2 {
  font-size: calc(var(--heading-base) * 20);
}

h3 {
  font-size: calc(var(--heading-base) * 18);
}

h4 {
  font-size: calc(var(--heading-base) * 15);
}

a, a:link, a:visited {
  color: var(--text-color);
}

.detect-viewport.node-1 img {
  width: auto;
  transition: none;
}

.detect-viewport.node-1,
.in-viewport.detect-viewport.node-1 {
  transition: none;
}

.detect-viewport.node-2 {
  background-color: white;
  padding: 1rem;
  margin: 2rem 0;
}

/* Admin pages, forms */

input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  background-color: white;
  border: var(--dark-background) 1px solid;
}

input[type="checkbox"]:checked {
  background-image: url('./../images/checkmark.svg');
  background-size: 12px 12px;
  color: white;
}

form input.button,
form button {
  background-color: var(--heading-color);
  color: white;
  border: 0;
  border-radius: 1.25rem;
  padding: 0.5rem 1rem;
  font-weight: bold;
  transition: all ease-in-out 0.5s;
  margin: 1rem 0 2rem 0;
}

dl dt {
  margin-top: 1rem;
  font-weight: bold;
}

form input.button:hover,
form button:hover {
  box-shadow: #333 2px 2px 2px;
}

#block-webformular,
#block-webform {
  width: 50%;
  margin: 0 auto;
  background-color: var(--dark-background);
  padding: 1rem;
}

#block-webformular #edit-actions,
#block-webform #edit-actions {
  text-align: center;
}

#block-webformular .form-item,
#block-webform .form-item {
  background-color: transparent;
  padding: 0;
  border: 0;
  margin: 0 0 0.5rem 0;
}

textarea, input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


textarea,
#block-webformular .form-item textarea,
#block-webform .form-item textarea {
  /* width: 520px; */
  font-family: "Playfair Display";
  font-size: 100%;
  padding: 0.5rem;
}

textarea,
#block-webformular .form-item textarea,
#block-webform .form-item textarea,
#block-webformular .form-item input,
#block-webform .form-item input {
  max-width: 95%;
  padding: 0.2rem;
  border: 0;
}

textarea,
#block-webformular .form-item textarea,
#block-webform .form-item textarea {
  max-width: calc(95% - 12%);
}

.form-required::after {
  content: ' *';
  color: red;
}

.form-item label {
  width: 170px;
  display: inline-block;
  vertical-align: top;
}

.form-item label.option {
  width: auto;
}

.js-form-type-textarea > div {
  display: inline-block;
}

.form-item {
  padding:0.5rem;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}

input[type="checkbox"] {
  transform: scale(1.5);
}

.form-item.js-form-type-checkbox {
  padding: 0;
  background-color: transparent;
  border: 0;
}

.dropbutton-widget {
  border: 1px solid black;
  background-color: white;
  padding: 2px;
}

.views-displays.form-wrapper {
  font-size: 1rem;
}

.tabbed ol li {
  display: inline;
  margin: 0 1rem 0 0;
}

.tabbed ul li {
  display: inline;
  list-style: none;
  margin: 0 1rem 0 0;
  padding: 0 1rem;
  border: 1px solid black;
  border-bottom: 0;
  background-color: var(--dark-background);
}

.tabbed ul li a {
  text-decoration: none;
}

.tabbed .is-active {
  font-weight: bold;
}

.tabbed ul {
  border-bottom: 1px solid black;
}

/* Animate on scroll */
.in-viewport {
  transition: all ease-in-out 2s;
  /* background-color: peachpuff; */
}

.detect-viewport {
  clear: both;
}

ol li {
  list-style:num inside;
  padding-left: 1rem;
}

ol li::marker {
  margin-right: 1rem;
}

.detect-viewport ul li {
  background-color: var(--heading-color);
  color: white;
  font-weight: bold;
  /* max-width: 100px; */
  /* text-align: center; */
  padding: 0.5rem 2rem;
  /* border-radius: 1.5rem; */
  margin: 0.5rem 4rem;
  list-style: none;
  transition: all ease-in-out .5s;
}

.detect-viewport ul li:nth-child(2) {
  transition: all ease-in-out 1s;
}

.detect-viewport ul li:nth-child(3) {
  transition: all ease-in-out 1.5s;
}

.in-viewport ul li {
  margin-left: 0;
}

.detect-viewport .views-field-field-image {
  float: left;
  margin-right: 2rem;
  /* background-color: var(--dark-background); */
  /* width: 420px; */
}

.detect-viewport img {
  width: 0%;
  transition: all ease-in-out .5s;
  object-fit: cover;
}

.detect-viewport.in-viewport img {
  width: 200px; /* 420px; */
  height: 220px;
}

.node-3 ul {
  margin-left: 400px;
}

#block-views-block-front-page-tiles-block-1 div {
  display: flex;
  justify-content: space-between;
  width: var(--page-width);
  margin: 1rem 0;
}

#block-views-block-front-page-tiles-block-1 img {
  float: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table tr th {
  background-color: var(--dark-background);
  text-align: left;
}

table tr th,
table tr td {
  vertical-align: top;
  border: 1px solid var(--dark-background);
  padding: 0.5rem;
}

ul.pager__items li {
  display: inline;
  list-style: none;
  margin: 0 1rem;
}

div[data-drupal-messages] {
  background-color: white;
  padding: 0.5rem;
}

article[role=article] img {
  float: right;
  margin-left: 2rem;
}

/* Cookies */
#sliding-popup,
#sliding-popup button,
.sliding-popup-bottom {
  font-size: 1rem;
  font-family: "Playfair Display";
}

.eu-cookie-compliance-content h2,
.eu-cookie-compliance-message h2 {
  font-size: 1.5rem;
}
.eu-cookie-compliance-content p,
.eu-cookie-compliance-message p {
  font-size: 1rem;
  display: block;
}

eu-cookie-compliance-content p,
.eu-cookie-compliance-message p {
  font-weight: normal;
}

.eu-cookie-compliance-content button {
  font-family: "Playfair Display";
  font-size: 1rem;
  font-weight: bold;
}

#sliding-popup > div {
  border-top: 2px solid #999;
  padding: 1rem;
}