/*
Theme Name:   Understrap Child
Theme URI:    https://wordpress.org/themes/understrap/
Description:  Understrap child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     understrap
Version:      1.0.0
Text Domain:  understrapchild
*/

body {
    font-family: "Quicksand", sans-serif!important;
    font-size: 18px!important;
    font-optical-sizing: auto;
    font-weight: 300!important;
    font-style: normal!important;
    color: #232323;
}

.bubble {
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7); /* White bubbles with transparency */
    border-radius: 50%;
    opacity: 0.3;
    animation: rise 5s infinite ease-in;
  }
  
@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-500px); /* Adjust to match the height of #header */
        opacity: 0;
    }
}

#Stroke-3 {
    stroke-dasharray: 1713;
    stroke-dashoffset: 1713;
    animation: draw 10s forwards;
}

@keyframes draw {
    from {
        stroke-dashoffset: -1713; /* Path length - hidden */
    }
    to {
        stroke-dashoffset: 1713; /* Fully visible */
    }
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease; /* Fade effect */
}

.visible {
    visibility: visible;
    opacity: 0.7;
    transition: opacity 0.5s ease; /* Fade effect */
}

.hidden-ob {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease; /* Fade effect */
}

.visible-ob {
    visibility: visible;
    opacity: 0.7;
    transition: opacity 0.5s ease; /* Fade effect */
}

.visible-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 1.2s ease; /* Fade effect */
}

button {
    transition: transform 1s ease, box-shadow 0.3s ease;
}

button:hover {
    transform: scale(1.06); /* Slightly enlarge the card on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow effect */
}

h2 a {
    color:#000;
    text-decoration: none;
}

h2 a:hover {
    color:#000;
    text-decoration: none;
}

h3 a {
    color:#000;
    text-decoration: none;
}

h3 a:hover {
    color:#000;
    text-decoration: none;
}

#audiobutton {
    position: fixed;
    top: 110px;
    right:35px;
    z-index: 3;    
    font-size: 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #738b7e;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

#audiobutton:hover {
    background-color: #738b;
}

.icon-container {
    display: none; /* Hide by default */
}

.active {
    display: flex; /* Show active icon */
}

#alliVideo {
    display: block;
    object-fit: contain;
    position: fixed;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    top: 0;
    padding: 0px;
    filter:opacity(80%);
    transform: translateX(0%) translateY(0%);
    box-sizing:border-box;
    z-index:2;
}

#alliVideoPage {
    display: block;
    position: absolute;
    object-fit: contain;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    top: 0;
    padding: 0px;
    box-sizing:border-box;
    z-index:2;
}

#illustration-line {
    position: absolute;
    top: -500px;
    right: 0px;
    width: 2000px;
    height: 1900px;
}

#illustration-line svg {
    overflow-clip-margin: content-box;
    overflow: hidden;
}

#wrapper-footer {
    background-color: #223a2d;
    color:#fff;
    height:800px; 
    position: relative;
    z-index: 3;
}

#wrapper-header {
    background-color: none;
    position: absolute;   
    top:0px;
    width: 100%;
    z-index: 11;
}

#wrapper-navbar {
    background: none;
}

#page-wrapper {
    position: relative;
    min-height: 600px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 0px;
}

.line-cheese-bg {
    background-image: url("images/liquid-cheese.svg");
}

.page-header {
    position: relative;
    z-index: 9;
    background-color: #F7F5F3;
    background-position: top;
    background-size: cover;
    min-height: 800px;
}

.page-header2::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 50px; /* Adjust the height of the pseudo-element as needed */    
    background-image: url("images/wavy-steps.svg#svgView(preserveAspectRatio(none))");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 100% 100%!important;
    z-index: -1; /* Ensure it's behind the content */
}

.page-content {
    position: relative;
    z-index: 10;
    padding-bottom: 60px;
    margin-top: 60px;
    min-height: 800px;
}

#overlay-black {
    position: fixed;
    background-color: #000;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 7;
}

#targetContact {
    font-size: 1.875rem;
    line-height: 2.5rem;
    color:#fff;
    text-align: center;
}

.navbar-brand {
    z-index: 10;
}

.navbar-brand img {
    height: 100%;
    width: 100%;
}

/**
MENY code
**/

#menu-toggle {
    z-index: 12;
}

#overlayMenu {
    position: fixed;
    top:0px;
    right: 0px;
    height: 100%;
    width:50%;
    background-color: #fff;
    z-index: 11;
}

/* Ensure the hamburger menu is always visible */
.menu-toggler {
    position: fixed;
    top:32px;
    right: 30px;
    border: none;
    height: 60px;
    width: 60px; /* Set width for circle */
    outline: none;
    background-color: #fff!important; /* White background for the circle */
    border-radius: 50%!important; /* Make it a circle */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for a more 3D effect */
  }

  .menu-toggler span {
    display: block;
    width: 25px;
    height: 2px;
    margin-bottom: 5px;
    background-color: #000;
    transition: all 0.3s ease-in-out;
  }
  
  .menu-toggler-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 20px!important;
    width: 25px!important;
    cursor: pointer;
  }
  
  .menu-toggler.active {
    box-shadow: none;
  }

  /* Transition to X */
  .menu-toggler.active span:nth-child(1) {
    transform: rotate(45deg);
    position: absolute;
    top: 7px;
  }
  
  .menu-toggler.active span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggler.active span:nth-child(3) {
    transform: rotate(-45deg);
    position: absolute;
    top: 7px;
  }


#main-menu  {
    font-size: 26px;
    padding: 150px;
}

#main-menu a {
    color: #333;
    font-weight: bold;
}

#main-menu a:hover {
    color: #ff6b6b;
    font-weight: bold;
}

#main-menu li {
    list-style: none;
}

.full-width-banner {
    padding-bottom: 160px;
    padding-top: 130px;
    min-height: 200px;
    overflow: hidden;
}

.full-width-banner .btn {
    border-radius: 0px!important;
    font-size: 1.075rem;
    padding: 10px 50px 10px 50px;
    margin: 0px 10px 10px 0px;
}

.full-width-banner-start {
    position: relative;
    background-color: #738b7e;
    color: #fff;
    font-size: 1.575rem;
    line-height: 2.5rem;
    text-align: center;
    z-index: 3;
}


.full-width-banner-start h2 {
    margin-bottom: 30px;
}

.full-width-banner-start p {
    margin-bottom: 30px;
}

.full-width-banner-header-start {
    position: relative;
    /* background-image: url("images/highwaybus.webp");
    background-position: center;
    background-size: cover; */
    background-color: #000;
    color:#fff;
    font-size: 1.575rem;
    /* font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;     */
    min-height:860px;
    padding-bottom: 130px;
    padding-top: 200px;
}

.full-width-banner-header-start h1 {
    font-size: 6rem;
    margin-bottom: 60px;
}

.full-width-banner-header-start h2 {
    font-size: 1.075rem;
}

.full-width-banner-header-start .container-fluid {
    position: absolute;
    z-index: 3;
}

.full-width-banner-header-page {
    position: relative;
    /* background-image: url("images/highwaybus.webp"); */
    background-position: center;
    background-size: cover;
    color:#fff;
    font-size: 1.575rem;
    /* font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;     */
    min-height:860px;
    padding-bottom: 40px;
    padding-top: 300px;
}

.full-width-banner-header-page-contact {
    padding-top: 180px;
    background-image: url("images/telefon_bg.png"); 
    background-size:70%; 
    background-repeat: no-repeat; 
    background-position: right;    
    background-color:#2e2f2c; 
}

.full-width-banner-header-page h1 {
    font-size: 5.5rem;
    margin-bottom: 10px;
}

.full-width-banner-header-page h3 {
    font-size: 5.5rem;
    margin-bottom: 10px;
}

.full-width-banner-header-page h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.full-width-banner-header-page .container-fluid {
    position: absolute;
    z-index: 3;
}

.full-width-banner-header-page.no-image {
    color:#fff!important;
    /* color:#212529!important; */
}

.lined-heading {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lined-heading:before,
.lined-heading:after {
    content: "";
    width:60px;
    border-bottom: 1px solid #fff; /* Change the color and thickness as needed */
    margin: 0 20px; /* Adjust the space between the line and the text */
}

.lined-heading-black {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lined-heading-black:before,
.lined-heading-black:after {
    content: "";
    width:60px;
    border-bottom: 1px solid #000; /* Change the color and thickness as needed */
    margin: 0 20px; /* Adjust the space between the line and the text */
}

.stops-divider {
    height: 20px;
    margin-bottom: 40px;
    width: 100%;
}

.card-right {
    font-size: 22px;
}

.card-product {
    /* border: none!important; */
    border-radius: 10px!important;
    border:none!important;
    overflow: hidden;
    height: 360px;
    margin-bottom: 0px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card-product:hover {
    transform: scale(1.05); /* Slightly enlarge the card on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow effect */
}

.card-product.no-hover:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
}

.card-product-link {
    text-decoration: none;
    color: inherit;
}

.card-product-link:hover {
    text-decoration: none;
    color: inherit;
}

.card-product p {
    display: none;
}

.card-product ul {
    display: none;
    margin-top: 10px;
    padding-left: 20px;
}

.card-product ul li {
    font-size: 10px;
}

.card-product .card-header {
    color:#fff;
    font-size: 60px;
    text-align: center;
    height: 300px;
    background: none;
    border-bottom: none;
    background-size: cover;
    background-repeat: no-repeat;    
    background-position: top;
}

.card-product .card-header .icon {
    margin:0 auto;
    margin-top:10px;
    padding-top: 3px;
    background-color: #fff;
    color:#000;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.card-product .card-header img {
    height: 70px;
    width: 70px;
}

.card-header.light-blue {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%238fa398"/></svg>');
}

.card-header.light-blue2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%23738b7e"/></svg>');
}

.card-header.light-blue3 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%235f7468"/></svg>');
}

.card-header.light-purple {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%23A88FAB"/></svg>');
}

.card-header.light-purple2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%23B296B8"/></svg>');
}

.card-header.light-purple3 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%23AA86AD"/></svg>');
}

.card-header.light-green {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%23c9a79b"/></svg>');
}

.card-header.light-green2 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%23b38b80"/></svg>');
}

.card-header.light-green3 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 200"><path d="M0,150 C70,100 210,200 280,150 L280,0 L0,0 Z" fill="%238f6a60"/></svg>');
}

.card-product .card-body {
    font-size: 22px;
    line-height: 26px;
    font-weight: 500;
    height: 220px;
    padding-left: 30px;
}

.card-product .card-body span { 
    font-size: 32px;
}

.card-product .card-body p { 
    font-size: 10px;
}

.card-product .card-footer {
    background-color: #fff;
    border: none;
    font-size: 24px;
    padding-left: 30px;
    text-align: right;
    height:70px;
}

.card-product .card-footer span {
    font-size: 12px;
    margin-left:10px;
}   

.contact-icon {
    color: #fff;
    font-size: 20px;
}

.contact-icon:hover {
    color: #FFF;
}

.for-who .card-body {
    font-size: 18px;
}

.wpcf7-submit {
    width:100px!important;
    background-color: #000!important;
    border:1px solid #000!important;
    border-radius: 1px!important;
    color:#FFF!important;
}

.wpcf7-submit:hover {
    width:100px!important;
    background-color: #fff!important;
    border:1px solid #fff!important;
    border-radius: 1px!important;
    color:#000!important;
}

.site-main {
    min-height: 400px;
}

.station-graph {
    margin: 20px 0px;
}

.station-graph h2 {
    font-size: 22px;
    color: #232323;
}

.line-container {
    position: relative;
    width: 100%;
    height: 60px; /* Increased height to accommodate text below circles */
}

.line-container .line {
    position: absolute;
    top: 50%;
    left: -50vw; /* Extend the line to the left beyond the container */
    right: -50vw; /* Extend the line to the right beyond the container */
    height: 3px;
    background-color: #ff6b6b;
    transform: translateY(-50%);
}

.circle-container {
    position: absolute;
    text-align: center;
    width: 0; /* Prevent the container from affecting circle positioning */
    height:60px;
    margin-top: 10px;
}

.circle-container .circle {
    width: 20px;
    height: 20px;
    background-color: #ff6b6b;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    margin-bottom: 5px; /* Space between the circle and the text */
}

.circle-container .label {
    height: 40px;
    margin: 0;
    margin-top:20px;
    font-size: 14px;
    color: #333;
    transform: translate(-50%, 0);
    width: 90px;
}

.circle-container:nth-child(2) { left: calc(0% + 15px); }
.circle-container:nth-child(3) { left: calc(14.2857% + 15px); }
.circle-container:nth-child(4) { left: calc(28.5714% + 15px); }
.circle-container:nth-child(5) { left: calc(42.8571% + 15px); }
.circle-container:nth-child(6) { left: calc(57.1429% + 15px); }
.circle-container:nth-child(7) { left: calc(71.4286% + 15px); }
.circle-container:nth-child(8) { left: calc(85.7143% + 15px); }
.circle-container:nth-child(9) { left: calc(100% - 15px); }

@keyframes pulsate {
    0% {
        transform: translate(-50%, 50%) scale(1);
    }
    50% {
        transform: translate(-50%, 50%) scale(1.9);
    }
    100% {
        transform: translate(-50%, 50%) scale(1);
    }
}

.fa-arrow-circle-o-right {
    color:#444;
    font-size: 34px!important;
}

article {
    margin: 0 auto;
    margin-top: 140px;
    padding: 0px;
    max-width: 1000px;
}

article h1 {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 40px;
}

article h2 {
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

.wp-block-separator {
    border-top:1px dashed!important;
    margin-bottom: 20px!important;
    margin-top: 20px!important;
    padding-bottom: 0px!important;
    padding-top: 0px!important;
    width:80%;    
}

#content {
    padding-bottom: 60px;
}

.entry-content {
    margin: 0 auto;
    text-align: left;
}

.site-footer {
    background-color: #223a2d;
    color:#fff;
    font-size: 10px;
    position: relative;
    z-index: 3;
}

.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    padding-bottom: 40px;
    padding-top: 20px;
}

.social {

}

.social img {
    height: 40px;
}

.podcast_logo img {
    height: 40px;
}

.pod-row {
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #ccc;
}

.pod-row-date {
    font-size: 12px;
    line-height: 10px;
}

.pod-row-title {
    font-size: 22px;
    font-weight: bold;
}

.pod-row-description {
    font-size: 18px;
    line-height: 24px;
}

.pod-row-info {
    text-align: left;
}

.pod-row-image img {
    border-radius: 5px;
    height: 100px;
    width: 100px;
}

.audioPlayer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px;
    font-family: Arial, sans-serif;
    color: #333;
}

.playButton {
    background: none;
    border: 1px solid #333;
    border-radius: 3px;
    color: #333;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 12px;
    transition: background-color 0.3s, color 0.3s;
}

.playButton:hover {
    background-color: #333;
    color: #fff;
}

.progressBar {
    flex: 1;
    cursor: pointer;
}

.timeElapsed, .timeRemaining {
    font-size: 14px;
}



/** 
 MOBILE RESPONSIVE CUSTOMIZATIONS 
**/
@media (max-width: 767.98px) {
    /* Mobile styles go here */

    h1 {
        font-size: 4rem;
        word-break: break-all;
    }

    .articel h1 {
        font-size: 2.5rem;
        word-break: break-all;
    }    

    .entry-title {
        font-size: 2.5rem;
        word-break: break-all;        
    }

    #overlayMenu {
        width:100%;
    }

    #main-menu {
        padding: 100px 10px 20px 20px;
    }

    .full-width-banner {
        overflow: visible;
    }

    .full-width-banner-header-start {
        min-height: 800px;
    }

    .full-width-banner-header-start h1 {
        font-size: 4rem;
        margin-bottom: 60px;
    }
    
    .full-width-banner-header-start h2 {
        font-size: 1.075rem;
    }

    #alliVideo {
        display: none;
    }

    #alliImageMobile {
        display: block!important;
        object-fit: cover;
        position: absolute;
        min-height: 100%;
        min-width: 100%;
        height: auto;
        width: auto;
        top: 0;
        left: 0;
        padding: 0px;
        box-sizing: border-box;
        z-index: 2;
    }    

    .full-width-banner-header-page {
        padding-top: 160px;
        font-size: 1.2rem;
    }

    .full-width-banner-header-page h1 {
        font-size: 4rem;
        word-break: break-all;
    }

    .full-width-banner-header-page-contact {
        min-height: 1200px;
    }    

    .card-product {
        margin-bottom: 40px;
    }

    .stops-divider {
        height: 0px;
        margin-bottom: 0px;
    }
    

    .page-header {
        min-height: 1000px;
    }

}