/*
Theme Name: Number Three One - Child
Theme URI: https://standoutmedia.dk/
Author: Standoutmedia A/S
Author URI: https://standoutmedia.dk/
Description: Et helt specielt Standoutmedia Tema
Template: number-three-one
Text Domain: number-three-child
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== CSS Variables ===== */

:root {
  /* Font sizes */
  --h1: 68px;
  --h2: 50px;
  --h3: 25px;
  --h4: 32px;
  --h5: 16px;
  --h6: 14px;
  --p: 18px;
  --hero-desc: 28px;
  --btn: 18px;
  --menu: 18px;
  --calendar-text: 18px;
  --news-date: 14px;
  --banner-text: 22px;
  --copyright: 13px;
  --slide-banner: 25px;

  /* Gaps */
  --gap-l: 90px;
  --gap-m: 55px;
  --gap-s: 30px;

  /* font families */
  --h-fam: "kepler-std", serif;
  --p-fam: "proxima-nova", sans-serif;
  --btn-fam: var(--p-fam);

  /* colors */
  --color-1: rgb(25, 45, 58);
  --color-2: #3a5669;
  --color-3: #dbf1ff;
  --color-bg: #f6f6f6;
  --color-news: #222222;
  --color-text: #000000;
  --color-h2: #182e3c;
  --color-dark: #222;
  --color-overlay: rgb(0 0 0 / 25%);

  /* transitions */
  --transition: 0.175s ease-out;

  /* Margin on the right and left of the main content sections (change 0 to 1 to match template distances)*/
  --content-margin: calc(0 * var(--gap-m));
  --slider-text-width: 1000px;

  /* Theme defined variables from PHP */
  --content-width: initial;
  --sidebar-width: initial;
  /* END Theme defined variables from PHP */
}

/* ===== END CSS Variables ===== */

/*======================================================================//
// style.css                                                            //
//======================================================================*/

body * {
  line-height: 1.2;
}

body .page-slider-section ~ main {
  margin-top: var(--gap-m);
}

body .stom-button a:not(.cta-container a) {
  font-family: var(--h-fam);
  font-size: var(--btn);
  border-radius: 25rem;
  padding: 0.25em var(--gap-s);
}

h2 {
  color: var(--color-h2);
}

body.home {
}

body h1 {
  color: white;
}

body.home:after {
  content: "";
  background-image: url(images/stort-anker.svg);
  position: absolute;
  z-index: 49;
  top: calc(100vh + 500px);
  height: 370px;
  width: calc(((100% - var(--content-width)) / 2) - var(--gap-s));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  right: 0;
}

body.home:before {
  content: "";
  background-image: url(images/stort-ror.svg);
  position: absolute;
  z-index: 49;
  top: 2000px;
  height: 510px;
  width: calc(((100% - var(--content-width)) / 2) - var(--gap-m));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  left: 0;
}

main.site-main div.entry-content p span.stom-button {
  margin-left: calc(var(--gap-s) / 2);
}

/* underside banner */

body .page-slider-section .image-aligner img:not(body.home .page-slider-section .image-aligner img) {
  max-height: calc(50vh - var(--header-height));
}

main.site-main section.dobbelt-margin {
  margin-top: calc(2 * var(--gap-l));
}

/*======================================================================//
// Hero section                                                         //
//======================================================================*/

/* .main-slider-section div.slider-text {
  background-color: transparent;
} */

div.hero-section p {
  font-size: var(--hero-desc);
  font-weight: 300;
  margin-bottom: 0;
}

body .page-slider-section.main-slider-section .slick-active img {
  animation: scaleAnimation 10s infinite alternate ease-in-out;
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

/* Slider-buttons-sektion */

body.home main#main-content {
  margin-top: 0;
}

body .section-wrap.stom-grid-section.page-slider-buttons {
  position: relative;
  height: 130px;
  margin-top: -130px;
}

body .section-wrap.stom-grid-section.page-slider-buttons:after {
  content: "";
  background-color: var(--color-1);
  opacity: 0.65;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 0;
}
.section-wrap.section-fullpage.page-slider-buttons .section {
  max-width: var(--content-width);
  padding: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements {
  gap: 0;
}
.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements .grid-element {
  position: relative;
}
.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements .grid-element:hover {
  color: var(--color-3);
  transition: ease-in-out 0.2s;
}

.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements .grid-element:after {
  content: "";
  position: absolute;
  right: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  width: 1px;
  display: block;
}

.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements .grid-element:last-of-type:after {
  display: none;
}

.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements .grid-element:first-of-type .overlay {
  padding-left: 0;
}

.section-wrap.section-fullpage.page-slider-buttons .section .grid-elements .grid-element .overlay {
  padding-left: 30px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}

.section-wrap.section-fullpage.page-slider-buttons .section .page-slider-buttons-info {
  margin-left: calc(var(--gap-s) / 2);
}

.section-wrap.section-fullpage.page-slider-buttons div.svg-rotate svg {
  transform: rotate(90deg);
}

.section-wrap.section-fullpage.page-slider-buttons h3 {
  font-size: var(--slide-banner);
  margin-bottom: 0px;
  font-weight: 300;
}

.section-wrap.section-fullpage.page-slider-buttons .page-slider-buttons-icons svg {
  margin-top: 5px;
}

.section-wrap.section-fullpage.page-slider-buttons .page-slider-buttons-info p {
  font-size: var(--h5);
  text-decoration: none;
  font-weight: 300;
}

/* END Slider-buttons-sektion */

/*======================================================================//
// Primary menu                                                         //
//======================================================================*/

#primary-menu a {
  font-size: var(--menu);
  font-weight: 300;
}

body #site-navigation ul#primary-menu li a {
  color: inherit;
}

body header .main-navigation ul.menu a {
  padding: 0.8em 1.1em;
}

body .site-branding #logo img {
  max-height: 90px;
}

body #primary-menu .menu-item-type-custom:not(.instantsearch-trigger) a {
  /*margin-left: var(--gap-s);*/
  padding: 0.8em 0.4em;
}
body #primary-menu .menu-item-type-custom:not(.instantsearch-trigger) svg {
  max-height: 16px;
  aspect-ratio: 1/1;
}

#primary-menu .menu-item-type-custom.instantsearch-trigger a {
  padding: 0.8em 0.4em;
}

#primary-menu .menu-item-type-custom.instantsearch-trigger svg {
  max-height: 16px;
  aspect-ratio: 1/1;
}

#primary-menu > .menu-item > a span.stom-menu-item-arrow {
  display: none;
}

#primary-menu ul.sub-menu a {
  font-size: var(--h5);
  padding-block: 0.6em;
  text-align: left;
  justify-content: left;
}
#primary-menu ul.sub-menu ul.sub-menu a {
  padding-block: 0.5em;
}

header .site-branding #logo {
  padding: calc(var(--gap-s) - var(--gap-s) / 3) 0;
}

/*nav#site-navigation.main-navigation {
  justify-content: flex-start;
}*/

body header .main-navigation ul.menu li:first-child a {
  padding-left: 0.8em;
}

section.section-wrap.menu-icons div.section {
  display: flex;
  gap: calc(var(--gap-s) * 2 / 3);
  align-items: center;
  justify-content: center;
  height: 100%;
}

section.section-wrap.menu-icons p {
  margin: 0;
}
section.section-wrap.menu-icons {
  height: 100%;
}

section.section-wrap.menu-icons div.section p,
section.section-wrap.menu-icons div.section a {
  display: block;
  height: 100%;
}

section.section-wrap.menu-icons div.section a {
  display: flex;
  align-items: center;
}

.extra-top-margin {
  margin-top: var(--gap-s);
}

#menu-menu-burger ul.sub-menu li.current_page_ancestor,
body #menu-menu-burger li.current-menu-parent.current_page_parent {
  background-color: rgb(93, 114, 128);
  color: white;
}
body #site-navigation.main-navigation .current-menu-ancestor > a {
  color: white;
  /*background-color: var(--color-1);*/
}
header .burger-menu-content-inner .current-menu-ancestor > a {
  color: white;
  background-color: var(--color-1);
}

/*======================================================================//
// Calendar Script                                                      //
//======================================================================*/

body .calendar table * {
  font-family: var(--p-fam);
  font-style: normal;
  font-weight: normal;
  font-size: var(--calendar-text);
}

.calendar table,
table {
  width: 100%;
}

.calendar table tbody tr td:last-child {
  display: flex;
  gap: var(--gap-m);
}

.calendar table tbody tr td:last-child span:last-child {
  margin-left: auto;
}

section.section-wrap.calendar {
  margin-top: var(--gap-s);
}

.calendar tbody tr:not(:first-child) td {
  padding-block: 5px;
}

/*======================================================================//
// News section                                                         //
//======================================================================*/

section.news .new-stom-post-content p {
  color: var(--color-news);
}

section.news .new-stom-post-date {
  color: var(--color-news);
  font-size: var(--news-date);
  margin-bottom: 3px;
}

body section.news .stom-css-grid {
  gap: var(--gap-s);
}

section.news .new-stom-posts .new-stom-post-title h4 {
  margin: 0 0 5px;
}

section.news .stom-button.new-stom-post-link {
  margin-top: auto;
}

section.news .new-stom-posts .new-stom-post-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

section.news a.link-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.news .stom-button {
  z-index: 5;
}

/*======================================================================//
// Image/text sections                                                  //
//======================================================================*/

body main .section-wrap ~ .section-wrap.no-margin-image {
  margin-top: 0;
}

body .stom-billede-sektion .stom-cols-6 {
  padding: calc(var(--gap-l) * 3) 0;
}

section.news .new-stom-post-thumb {
  margin-bottom: 10px;
  /*  margin-bottom: calc( var(--gap-s) * 0.5); */
}

section.news .new-stom-post-thumb img {
  height: auto;
}

.seagull_illustration .stom-center-box {
  position: relative;
}

.seagull_illustration .stom-center-box::before {
  content: "";
  background-image: url(images/Stor_maage.svg);
  position: absolute;
  z-index: 49;
  top: -80px;
  height: calc(var(--gap-l) * 3);
  width: calc(var(--gap-l) * 3);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.seagull_illustration.picture-left .stom-center-box::before {
  right: calc(0px - (var(--gap-l) * 3));
}
.seagull_illustration.picture-right .stom-center-box::before {
  left: calc(0px - (var(--gap-l) * 3));
  transform: scaleX(-1);
}

.stom-billede-sektion.seagull_illustration div.section {
  overflow: visible;
}

/*======================================================================//
// Boat-banner                                                          //
//======================================================================*/

#boat-banner h2 {
  color: white;
}

section#boat-banner {
  background-size: cover;
}

#boat-banner .stom-button a {
  background: white;
  color: var(--color-1);
  font-weight: 500;
}

#boat-banner p {
  font-size: var(--banner-text);
  font-weight: 300;
}

#boat-banner div.section {
  max-width: 600px;
}

#boat-banner .stom-button a:hover {
  background-color: rgb(235, 235, 235);
}

/*======================================================================//
// Footer                                                               //
//======================================================================*/

footer#colophon div.textwidget img {
  max-width: 92px;
}

body:not(.home) footer#colophon {
  margin-top: var(--gap-l);
}

footer#colophon .widget-title {
  font-family: var(--h-fam);
  font-weight: 500;
}

footer#colophon * {
  font-weight: 300;
}

body footer#colophon .textwidget .stom-info *,
body footer#colophon .textwidget .stom-info {
  font-size: var(--copyright);
  font-weight: 200;
}

footer#colophon .textwidget p {
  margin-bottom: 1em;
}

body .stom-grid-section .section .grid-elements {
  gap: calc(var(--gap-m) + (var(--gap-s) / 2));
}

footer#colophon div.socials-wrapper path {
  fill: white;
}

footer#colophon {
  margin-top: 0;
}

/*======================================================================//
// embedded-form // Udlejesalen                                         //
//======================================================================*/

.embedded-form iframe,
iframe {
  width: 100%;
}

.embedded-form,
iframe {
  margin-top: var(--gap-m);
}

/*======================================================================//
// mere-tekst-wrapper // Havneplads                                     //
//======================================================================*/

body main.site-main div.entry-content div.mere-tekst-wrapper {
  margin-top: var(--gap-s);
}

body main.site-main div.entry-content .mere-tekst-wrapper button {
  background-color: transparent;
  border: none;
  border-bottom: solid 1px var(--color-1);
  color: var(--color-1);
  font-size: var(--p);
  padding-left: 0;
}
body main.site-main div.entry-content .mere-tekst-wrapper .mere-tekst p:first-child {
  margin-top: 1.5em;
}

/*======================================================================//
// aside#secondary // sidebar                                           //
//======================================================================*/

aside#secondary.sidebar-setup-after-content {
  position: sticky;
  top: 160px;
}

body,
#page {
  overflow: unset;
}

/*======================================================================//
// .script-overview // Bestyrelsen, navneoversigter                     //
//======================================================================*/

/* .script-overview */
table tbody tr * {
  font-size: var(--p);
  font-family: var(--p-fam);
}
/* .script-overview */
table tbody tr td div {
  padding-block: 5px;
}

/* .script-overview */
table tbody tr td {
  margin-right: 5px;
}

.script-overview {
  overflow: auto;
}

/*======================================================================//
// .udvalgsoversigt //                                                  //
//======================================================================*/

main.site-main article div.entry-content .udvalgsoversigt a {
  text-decoration: none;
  /*     color: white;
 */
}
main.site-main article div.entry-content .udvalgsoversigt a:hover {
  text-decoration: underline;
}

main.site-main article div.entry-content .udvalgsoversigt {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

main.site-main article div.entry-content .udvalgsoversigt p {
  margin-bottom: 1em;
}

/* main.site-main article div.entry-content .udvalgsoversigt p:not(:first-child){
    background-color: var(--color-1);
    margin: 0;
    padding: 10px 5px;
}

main.site-main article div.entry-content .udvalgsoversigt p:not(:first-child):hover{
    background-color: var(--color-2);
} */

.extra-bottom-margin {
  margin-bottom: var(--gap-s);
}

/* .table-2-column */

main.site-main div.entry-content div.mere-tekst-wrapper.table-2-column .mere-tekst {
  display: grid;
}

main.site-main div.entry-content div.mere-tekst-wrapper.table-2-column .mere-tekst div {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  gap: var(--gap-m);
}
main.site-main div.entry-content div.mere-tekst-wrapper.table-2-column .mere-tekst div:first-child p {
  font-weight: bold;
}

/* .price-table */

.price-table {
  margin-bottom: var(--gap-s);
}

h1.entry-title,
.contact-headline h1 {
  color: var(--color-1);
}

.login-form {
  margin-bottom: var(--gap-s);
}

/* FB Section */

body section.section-wrap.fb-section {
  margin-inline: 0;
  min-height: 965px;
  position: relative;
  margin-top: 0;
  background-size: cover;
}

body main.site-main section.section-wrap.fb-section::before {
  content: "";
  position: absolute;
  background: linear-gradient(to top, transparent 90%, #fff);
  z-index: 1;
  height: 100%;
  width: 100%;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* body section.section-wrap.fb-section div.section{
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
} */


/*======================================================================//
// GF FORM //                                                  //
//======================================================================*/

button, .stom-button a, 
input[type="button"], 
input[type="reset"], input[type="submit"], 
.gform_wrapper .gform_footer input[type=submit] {
	font-family: var(--h-fam);
    font-size: var(--btn);
    border-radius: 25rem;
    padding: 0.6em 2em;
}

.gform_wrapper.gravity-theme .gfield_label {
    font-size: 18px;
    font-weight: 700;
}
.gform_wrapper.gravity-theme .gfield_checkbox label, 
.gform_wrapper.gravity-theme .gfield_radio label {
    font-size: 18px;
}
.gform_wrapper.gravity-theme .description, 
.gform_wrapper.gravity-theme .gfield_description, 
.gform_wrapper.gravity-theme .gsection_description, 
.gform_wrapper.gravity-theme .instruction {
    font-size: 18px;
}
h3.gsection_title {
	margin-bottom: 0;
}

body:not(.stom-gform-legacy) .gform_wrapper .ginput_container input, 
body:not(.stom-gform-legacy) .gform_wrapper .ginput_container select, 
body:not(.stom-gform-legacy) .gform_wrapper .ginput_container textarea {
	border-radius: 5px;
}



/*======================================================================//
// END style.css                                                        //
//======================================================================*/

/*======================================================================//
// woocommerce.css                                                      //
//======================================================================*/

/* woocommerce style goes here */

/*======================================================================//
// END woocommerce.css                                                  //
//======================================================================*/