/* CONTACT FORM — FAIR MULTI-SELECT */
/* Override the global textarea height (~230px) so the contact form message field
   honours the rows="3" attribute. */
.block-module-contact textarea#message {
    height: auto;
    min-height: 0;
    line-height: 1.5;
}

.block-module-contact .contact-submit-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* News module: on mobile the featured (h5) and the smaller (h6) news headings should
   render at the same visual size since the layout collapses to a single column. */
@media (max-width: 767px) {
    .main-module-news .news-inner h5,
    .main-module-news .news-inner h6 {
        font-size: 20px;
        line-height: 1.3;
        font-weight: 600;
        margin: 0 0 10px;
    }
}

/* Eventpage newsletter form: the desktop layout uses inline-block with the input sized
   via calc(100% - 150px) to leave room for an inline send button, which collapses the
   input to near-zero width on narrow phones. Stack vertically on mobile and let the
   input use the full container width. */
@media (max-width: 767px) {
    .main-module-fair-newsletter {
        padding: 15px;
    }
    .main-module-fair-newsletter .form-newsletter {
        display: block;
        position: relative;
    }
    .main-module-fair-newsletter .form-newsletter input[type="email"] {
        max-width: none;
        width: 100%;
        margin: 0 0 10px;
        box-sizing: border-box;
    }
    .main-module-fair-newsletter .form-newsletter button {
        display: block;
        width: 100%;
        min-width: 0;
    }
}

.block-module-contact .fair-checkbox-list {
    margin-bottom: 20px;
    border: 1px solid #e5e1e1;
    border-radius: 4px;
    padding: 10px 14px;
    background: #fff;
}

.block-module-contact .fair-checkbox {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.block-module-contact .fair-checkbox input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
    cursor: pointer;
}

.block-module-contact .fair-checkbox label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    font-size: 14px;
}

/* CONTAINER */
#social-feed {
    overflow: hidden;
}

#social-feed > div {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* FEEDS CONTAINERS */
#social-feed div {
    border: none !important;
    border-radius: 0;
}

#social-feed div span {
    overflow: hidden;
    color: #868689;
}

.press .main-module-news .news-inner {
    min-height: 164px;
}

/* FILTERS */
#social-feed .filter-items {
    text-align: center;
    padding: 0 0 30px;
}

#social-feed .filter-label {
    border-radius: 50px;
    padding: 10px;
    border: 2px solid #F9B243;
}

/* USER NAME */
#social-feed .sboard.sb-modern2 .sb-item .sb-user .sb-utitle {
    white-space: inherit;
    font-style: normal;
    margin: 0;
    font-size: 14px;
    overflow: visible;
    text-overflow: inherit;
}

#social-feed .sb-item .sb-user {
    width: calc(100% - 59px);
    margin: 0 0 15px;
}

#social-feed .sboard.sb-modern2 .sb-item .sb-user .sb-uinfo {
    width: calc(100% - 76px);
}

/* LIKES */
#social-feed .meta.item-likes {
    display: none;
}

/* BIG SOCIAL MEDIA ICONS*/
#social-feed .sb-cicon {
    background-image: url(../img/social-icons-colored.png);
}

#social-feed div span.icon {
    opacity: 0.2;
    padding: 10px;
}

#social-feed .sb-cicon.sb-instagram {
    background-position: 56.75% 0;
}

/* FEEDS SOCIAL ICONS */
#social-feed .sb-sicon {
    border-radius: 50px;
}

#social-feed .sboard .sb-item .sb-inner .sb-title a {
    text-decoration: none !important;
    font-size: 15px !important;
    color: #a54843 !important;
}

#social-feed .sboard .sb-item .sb-inner a:hover {
    color: #a54843 !important;
}

/* LINKS */
#social-feed a {
    text-decoration: none;
}

#social-feed .sboard .sb-item .sb-inner a {
    color: #a54843;
}

#social-feed .sboard .sb-item .sb-inner a.sb-sicon {
    background-color: #a54843;
}

#social-feed .sboard .sb-item .sb-inner time {
    margin-bottom: 0;
}

/* LOAD MORE */
#social-feed .sb-loadmore {
    display: none;
}

#social-feed .sb-loadmore p {
    height: 30px;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.91667;
    font-weight: 600;
    line-height: 30px;
    padding: 0 22px;
    display: inline-block;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    color: #a54843;
    background-color: rgba(135, 8, 32, 0.08);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s
}

#social-feed .sb-loadmore p:hover {
    color: #FFFFFF;
    background-color: #a54843;
}

#social-feed .sb-loadmore,
#social-feed .sb-loadmore:hover {
    position: relative;
    background: none;
    padding: 0;
}

#social-feed .sb-loadmore:before,
#social-feed .sb-loadmore:after {
    content: '';
    display: block;
    border-top: 1px solid #e5e1e1;
    position: absolute;
    top: 14px;
    width: -moz-calc(50% - 100px);
    width: -webkit-calc(50% - 100px);
    width: calc(50% - 100px);
}

#social-feed .sb-loadmore:before {
    left: 0;
}

#social-feed .sb-loadmore:after {
    right: 0;
}


/*

.videojs-background-wrap > div {
    top: 0!important;
}



.section-result-exhibitors .module-result-exhibitors .block-exhibitors .block-exhibitors-info a.link-stand span {
	background-color: #D2CACA;
}

.section-result-exhibitors .module-result-exhibitors.result-small .block-exhibitors .block-exhibitors-info a.link-stand:hover:before {
	content: 'View stand';
    position: absolute;
    background-color: #F8B243;
    border-radius: 0px;
    box-shadow: none;
    color: #FFFFFF;
    top: -32px;
    right: -13px;
    width: 68px;
}

.section-result-exhibitors .module-result-exhibitors.result-small .block-exhibitors .block-exhibitors-info a.link-stand:hover:after {
    top: -12px;
    right: 12px;
    border-color: #F8B243 transparent transparent transparent;
}





/* MY ACCOUNT EDIT 
.check-options{
	font-weight: 600;
}
.check-options input{
    width: 0;
    height: 0;
    visibility: hidden;
}

.check-options label{
  padding: 5px 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 40px;
  height: 30px;
  padding-left: 40px;
  overflow: hidden;
  background: transparent url(../../images/checkbox-boligmesse.jpg) no-repeat left bottom !important;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 9999;
}

.check-options input[type='checkbox']:checked + label{
    background-position: left top !important;
}
.check-options.error{
	color: #d63d3d;
}


.main-module-intro-exhibit .block-exhibit-content ul li{
	color: #a54843;
	text-align: left;
	padding-left: 50px;
}
.main-module-intro-exhibit .block-exhibit-content ul li:before{
	position:absolute;
	left:15px;
	top:-5px;
}

.main-module-shedule .header-tab-shedule{
	border: none;
}

.main-module-shedule .content-shedule .item-shedule:first-of-type .item-info-shedule:before{
	top:15px;
	bottom:-15px;
}

.main-module-shedule .content-shedule{
	background-color: #fff;
	padding: 20px 0;
}

.main-module-news .news-inner a:hover h5,
.main-module-news .news-inner a:hover h6{
	color: #a54843;
	transition: all 0.5s;
}
.past-fairs.main-module-fair-list figure{
	max-height: 250px;
	overflow: hidden;
}
.main-module-fair-list.past-fairs .block-fair-list .block-fair-list-information{
	width: 100%;
}
/*

h1 {
	font-size: 96px;
}

.block-footer-action {
	float: right;
}

Page: Home 
h5 {
	line-height: 1.2;
	font-weight: 700;
}
*/

/* Page: News list 
.main-module-news.big {
	height: 400px;
	margin-bottom: 60px;
}
*/

/*
.main-module-news.big figure img {
	height: 400px;
}

h3 {
	line-height: 1.2em;
}*/

/*
.main-module-news.big .news-inner {
    padding: 20px 30px 20px 0;
}
*/


/* Page: Why Exhibit 
.row {
    margin: 50px 0;
}
*/


/*
.main-module-testimonial-single-image {
	margin-bottom: 50px;
}*/


/*
.main-section-general.section-white {
	margin-bottom: 50px;
}
*/


/*
.section-module-product-rental {
	margin-top: 50px;
}
*/


/*
.section-main-module-services .icon-custom {
	font-size: 50px;
}
*/

/*
.text-pharse {
	margin-bottom: -30px;
}
*/


/* PASADOS A SASS

/* Page: Home 

.main-module-fair .block-fair-info-date h3 {
	margin-bottom: 15px;
}



/* Page: Pre Fair 
.section-main-hero.hero-pre-fair .block-fair-info-date h4 {
	margin-bottom: 20px;
}

/* Posicionar el boton de Exhibit cerca del bloque de fecha 
.section-main-hero.hero-pre-fair .btn.btn-normal.btn-secundary {
	margin-top: 80px;
}



/* Page: Why Exhibit */
/* Saca el ancho máximo de la columna de los testimonios destacados 
.main-module-testimonial-single-image {
	max-width: none;
}

/* Para que Otto no se vaya hasta la punta 
.section-module-visitors .img-visitors {
	right: 10%;
}


.intro-fair p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}*/

.main-section-general {
    padding: 30px 0 0;
}

.section-main-hero.hero-internal {
    min-height: 350px;
    margin-bottom: 0;
}

.btn-red {
    background-color: #a54843 !important;
    color: #fff !important;
    border-radius: 15px;
}

.banner-fluid .btn.btn-primary:hover, .banner-fluid .btn.btn-primary:focus, .banner-fluid .btn.btn-primary:active {
    color: #fff !important;
}

.fair-details .exhibitor-cta {
    text-align: center;
    margin: 0 auto 30px;
}

.next-show {
    background: linear-gradient(135deg, #b85049 0%, #a54843 100%);
    padding: 48px 20px;
    text-align: center;
    color: #fff;
}

.next-show-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}

.next-show-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    margin: 0;
}

.next-show-titlelink,
.next-show-titlelink:hover,
.next-show-titlelink:focus {
    text-decoration: none;
    color: inherit;
}

.next-show-title {
    margin: 0 !important;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.next-show-date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    font-size: 18px;
    color: #fff;
}

.next-show-date i {
    font-size: 16px;
}

.next-show-cta {
    margin-top: 6px;
    background: #1a1a1a;
    color: #fff !important;
    border: 0;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.next-show-cta:hover,
.next-show-cta:focus {
    background: #fff;
    color: #a54843 !important;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .next-show {
        padding: 32px 16px;
    }

    .next-show-title {
        font-size: 28px;
    }

    .next-show-date {
        font-size: 16px;
    }
}

/* textWImage module: H2 sized down to match body-copy scale */
.main-module-news.big .news-inner h2 {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: inherit;
    margin-top: 40px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .main-module-news .news-inner {
        padding: 15px 15px 90px 15px;
    }

    .main-module-news .btn.btn-small {
        padding: 0;
        margin-left: -13px;
    }

    .main-module-news .btn.btn-small.btn-red {
        padding: 0 20px;
        margin-left: initial;
    }
}

/* All headings rendered bold */
h1, h2, h3, h4, h5 {
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

@media (max-width: 480px) {
    .main-menu .logo {
        top: 5px !important;
        transform: none !important;
    }

    .main-module-fair-list .fairs-action .btn.btn-terciary {
        float: left !important;
    }
}

/* textWImage: when section has a dark background color the text needs to flip to white */
.main-module-news.big.text-light,
.main-module-news.big.text-light .news-inner,
.main-module-news.big.text-light .news-inner h1,
.main-module-news.big.text-light .news-inner h2,
.main-module-news.big.text-light .news-inner h3,
.main-module-news.big.text-light .news-inner h4,
.main-module-news.big.text-light .news-inner h5,
.main-module-news.big.text-light .news-inner h6,
.main-module-news.big.text-light .news-inner p,
.main-module-news.big.text-light .news-inner li,
.main-module-news.big.text-light .news-inner a {
    color: #ffffff !important;
}

/* News card title: bump h6 / .module-news-title to 26px despite the element being a h6 */
.main-module-news .news-inner h6,
.main-module-news .news-inner .module-news-title {
    font-size: 26px;
    font-size: 1.625rem;
}

/* textWImage shares .main-module-news with the news card, but its body is full editorial
   content and must never be clamped. News cards keep their 2/3-line clamp. */
.main-module-news.text-wimage .news-inner > p,
.main-module-news.text-wimage .news-inner h6,
.main-module-news.text-wimage .news-inner .module-news-title {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: horizontal;
    max-height: none;
    height: auto;
    overflow: visible;
    text-overflow: clip;
}

/* textWImage paragraphs are body copy and can stack, so they need normal paragraph spacing,
   not the 40px gap the news card uses to separate body from the CTA. */
.main-module-news.text-wimage .news-inner > p {
    margin-bottom: 1em;
}

.main-module-news.text-wimage .news-inner > p:last-child {
    margin-bottom: 0;
}

/* The news card pads .news-inner with 40px/30px/100px (and 50px/55px/120px at >=1200px)
   to leave room for the absolutely-positioned "Læs mere" CTA. textWImage has no such CTA
   bottom anchor, so trim the inner padding to a more reasonable editorial rhythm. */
.main-module-news.text-wimage .news-inner {
    padding: 24px 30px;
}

@media (min-width: 1200px) {
    .main-module-news.text-wimage .news-inner {
        padding: 40px 55px;
    }
}

@media (max-width: 480px) {
    .main-module-news.text-wimage .news-inner {
        padding: 15px 0 30px 0;
    }
}

/* Big news/textWImage figure: shorten the aspect ratio from 50% to 40%. */
.main-module-news.big figure {
    padding-top: 40%;
}

@media (max-width: 480px) {
    .main-module-news.big figure {
        padding-top: 70%;
    }
}

/* fixedImageRatio: drop the aspect-ratio frame + object-fit:cover so the image
   keeps its natural proportions, scales to the column width and stays vertically
   centered when the text column is taller. */
.banner-fluid.text-wimage--fixed-ratio .banner-fluid-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-fluid.text-wimage--fixed-ratio .banner-fluid-image figure,
.banner-fluid.text-wimage--fixed-ratio .banner-fluid-image a {
    width: 100%;
}

.banner-fluid.text-wimage--fixed-ratio .banner-fluid-image figure {
    padding-top: 0;
    height: auto;
    overflow: visible;
}

.banner-fluid.text-wimage--fixed-ratio .banner-fluid-image figure img {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: initial;
}

/* H1 inside the topbanner should render at H2 size (60px / 3.75rem base,
   40px / 2.5rem on small screens) to keep the editorial heading from
   dominating the hero. */
.section-main-hero h1 {
    font-size: 60px;
    font-size: 3.75rem;
    line-height: 1.15;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .section-main-hero h1 {
        font-size: 40px;
        font-size: 2.5rem;
    }
}

/* Modulepage topbanner (.hero-internal) needs a fixed 45px gap to the content below. */
.section-main-hero.hero-internal {
    margin-bottom: 45px;
}

@media (max-width: 480px) {
    .section-main-hero.hero-internal {
        min-height: 280px !important;
    }

    .section-main-hero.hero-pre-fair .block-fair-info-date h2 {
        font-size: 1.6rem;
    }

    .section-main-hero .main-title {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2rem;
    }
}

/* Mobile-only fallback for the homepage topbanner. The desktop view plays the video
   inside #media-container; on mobile we can't autoplay video reliably, so paint the
   chosen image (passed via the --hero-mobile-img custom property) onto the section. */
@media (max-width: 768px) {
    #main-hero.section-main-hero.hero-home {
        background-image: var(--hero-mobile-img);
        /* Use min-height (not a fixed height) so the hero can grow when there are
           more CTA buttons than fit in 80vh. Otherwise the last button overflows
           below the hero box. cssCollection.css sets `padding: 125px 0 216px !important`
           at <=767px (and 60px/216px at <=400px); we have to override with !important
           because that 216px bottom padding eats most of the visible space. */
        min-height: max(600px, 80vh);
        padding-top: 60px !important;
        padding-bottom: 30px !important;
    }

    /* Make the hero a flex column so the CTA wrapper can be pushed to the bottom with
       margin-top:auto. This is more robust than absolute positioning. */
    #main-hero.section-main-hero {
        display: flex;
        flex-direction: column;
    }

    #main-hero > .container-fluid {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    #main-hero > .container-fluid > .row {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* Hero CTA wrapper: push to the bottom of the flex column, then add a gap above
       the keep-reading chevron. The selector matches both the new .hero-cta-row class
       and the second .col-lg-10 in the hero row as a fallback (in case the Razor view
       has not been recompiled yet). */
    #main-hero .hero-cta-row,
    #main-hero > .container-fluid > .row > .col-lg-10:nth-child(2) {
        margin-top: auto !important;
        margin-bottom: 90px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Hero CTA buttons: full-width, chunky padding, large readable font.
       cssCollection.css has @media (max-width:480px) .overRideButton { width:200px;
       height:50px; padding:0 !important } which is why these need !important. */
    .section-main-hero .btn-hero,
    .section-main-hero .btn-hero.overRideButton {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 16px 20px !important;
        font-size: 16px;
        line-height: 1.25;
        white-space: normal;
        border-radius: 4px;
    }
}

/* Topbanner (homepage hero) sits on a dark hero background (image/video, with a
   50% black overlay), so all editorial text inside it should default to white.
   Scoped to .hero-home so the eventpage (.hero-pre-fair) and modulepage
   (.hero-internal) heroes keep their own colour scheme. !important is needed
   because individual h1/h2 etc rules at smaller breakpoints set their own
   color in main.css. */
.section-main-hero.hero-home,
.section-main-hero.hero-home p,
.section-main-hero.hero-home h1,
.section-main-hero.hero-home h2,
.section-main-hero.hero-home h3,
.section-main-hero.hero-home h4,
.section-main-hero.hero-home h5,
.section-main-hero.hero-home h6,
.section-main-hero.hero-home li,
.section-main-hero.hero-home strong,
.section-main-hero.hero-home em,
.section-main-hero.hero-home blockquote,
.section-main-hero.hero-home .customColor,
.section-main-hero.hero-home .customColor * {
    color: #fff !important;
}

.section-main-hero.hero-home a:not(.btn) {
    color: #fff !important;
}

body > section.section-news-home h5 {
    color: #262626;
    font-size: 1.6em;
}

/* Grid section with a custom background colour: when the editor picks one of the known
   dark swatches, flip all text inside to white. Buttons keep their own theme. */
.section-col.has-bg.text-light,
.section-col.has-bg.text-light p,
.section-col.has-bg.text-light h1,
.section-col.has-bg.text-light h2,
.section-col.has-bg.text-light h3,
.section-col.has-bg.text-light h4,
.section-col.has-bg.text-light h5,
.section-col.has-bg.text-light h6,
.section-col.has-bg.text-light li,
.section-col.has-bg.text-light strong,
.section-col.has-bg.text-light em {
    color: #fff;
}

.section-col.has-bg.text-light a:not(.btn) {
    color: #fff !important;
}

/* Grid module: center columns horizontally when they don't fill the full 12-col row.
   E.g. a single col-md-8 sits centered with equal space on each side. */
.section-col .grid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

/* Grid module: keep editor-inserted and explicit images contained inside their column. */
.section-col .grid-row .item img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Grid module: long unbroken strings (URLs, gibberish, etc.) in editor content
   were forcing the column wider than the viewport and letting the whole page
   scroll horizontally on mobile. Force them to wrap and clip any overflow. */
.section-col .grid-row .item {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.caption-text {
    color: #fff;
}

/* German header logo (bwllogo-lang1.jpg) is a wider wordmark than the Danish one,
   so the existing 280/220/180 widths render its content too small. Bump it up.
   !important is needed because cssCollection.css carries the original widths
   with higher specificity/order. */
html[lang^="de"] .main-menu .logo img {
    width: 380px !important;
}

@media (max-width: 1400px) {
    html[lang^="de"] .main-menu .logo img {
        width: 300px !important;
    }
}

@media (max-width: 767px) {
    html[lang^="de"] .main-menu .logo img {
        width: 240px !important;
    }

    /* Vertically center the header logo on mobile. cssCollection.css pins it
       at top:3px !important and .logo has a margin-top:17px and inline-block
       baseline-spacing all fighting the centering — reset them and override
       with a more specific selector so this wins regardless of source order. */
    html body .main-menu .logo {
        top: 50% !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        transform: translateY(-50%) !important;
    }

    html body .main-menu .logo img {
        display: block !important;
        vertical-align: middle !important;
    }
}