:root {
    --primary-color: #f2d320;
    --primary-color-hover: #dbbb02;
    --secondary-color: #00a85a;
    --secondary-color-hover: #008145;
    --default-font-color: #0a0a0a;
    --default-font-color-hover: #565656;

    --gradient-blue: #547096;

    --vw-content-offset: calc(-1 * (100vw * 433 / 640));
    --percent-content-offset: calc(-1 * (100% * 433 / 640));

    --main-content-gradient: radial-gradient(ellipse at center,  #90979c 11%,#547096 68%);
}

body {
    font-size:16px;
    text-wrap:pretty;
    color: var(--default-font-color);
    overflow-x: hidden;
}

h1 {
    color:#2D2424;
    font-size: 40px;
}

h2, .tx-powermail .powermail_legend, .powermail_fieldwrap_type_text.layout2 {
    color:var(--primary-color);
    font-size: 32px;
}

h3, .powermail_fieldwrap_type_text.layout3 {
    color: var(--default-font-color);
    font-size: 26px;
}

h4 { 
    font-size: 22px;
    color: var(--default-font-color);
}

p {
    color: var(--default-font-color);
}

a {
  color: var(--primary-color);
}

a:hover {
    color: var(--primary-color-hover);
    text-decoration:none;
}

ul {
    color: var(--default-font-color);
}

ol {
    color: var(--default-font-color);
}

li {
    color: var(--default-font-color);
}

.horizon-heading {
    height: 90px;
    position: relative;
    top: -10px;
    z-index: -1;
}

.horizon-heading .horizon-img {
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:775px;
    max-width:80%;
}

.horizon-text-svg {
    transform:translate(0, 50%);
}

/* Trying to match to h2 but it is an svg and has some quirks */
.horizon-text-svg text {
    fill:var(--primary-color); /** FOR SVG **/
    font-size: 74px;
    font-weight:500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

blockquote {
    /* PLEASE DEFINE */
}

/* CUSTOM BUTTON STYLES FOR RTE */
.btn.btn-custom-1, .news .news-item-layout-2 .read-more-wrapper a {
    color: var(--default-font-color);
    border-width: 8px;
    border-radius: 0;
    letter-spacing: 1px;
    line-height:1;
    font-weight: 700;
    background-color: var(--primary-color);
    min-width:130px;
    padding:7.5px 3.5px;
    border:1px solid var(--default-font-color);
}

.btn-custom-1:hover, .news .news-item-layout-2 .read-more-wrapper a:hover {
    background-color:var(--primary-color-hover);
}

.btn.btn-custom-2 {
    color: var(--default-font-color);
    border-width: 8px;
    border-radius: 0;
    letter-spacing: 1px;
    line-height:1;
    font-weight: 700;
    background-color: var(--secondary-color);
    min-width:130px;
}

.btn-custom-2:hover {
    background-color:var(--secondary-color-hover);
}

.btn.btn-custom-3 {
    color: var(--default-font-color);
    border-width: 8px;
    border-radius: 0;
    letter-spacing: 1px;
    line-height:1;
    font-weight: 700;
    background-color: white;
    min-width:130px;
}

.btn-custom-3:hover {
    background-color:#bdbdbd;
}

.notice-bar {
    position:absolute;
    height:55px;
    top:30px;
    z-index:998;
    box-shadow: 0px 28px 52px 17px #000000;
}

.no-burn-notification .notice-bar {
    background-color: var(--gradient-blue);
}

.notice-bar .burn-notice-wrapper .frame-default {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.notice-bar .burn-notice-wrapper p {
    margin-bottom:0px;
}

.logo-wrapper {
    position:absolute;
    top:0;
    max-width:25%;
}

.logo {
    width:350px;
    max-width:100%;
}

.main-header-wrapper{
    overflow-x:clip;
    display:flex;
    flex-direction:column;
    min-height:55px;
    position:relative;
}

.homepage .main-header-wrapper {
    margin-bottom:-10px;
}

.homepage .main-header-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
    transform: translate(0px, 50%);
    /* background: linear-gradient(
    to bottom,
    #59728e00 0%, 
    #547096 45%, 
    #547096 55%, 
    #59728e00 100% 
    ); */

    background: linear-gradient(to bottom, #59728e00 0%, #547096 30%, #547096 60%, #59728e00 100%);
    z-index: 99;
}

#searchDiv {
    width:375px;
    max-width:40%;
    position:absolute;
    top: 50%;
    right: 15px;
    transform: translate(0px, -50%);
    margin-left:auto;
    margin-left:right;
}

.storm-default-menu {
    align-items: flex-end;
    padding-right:30px;
}

.menu-wrapper {
    position: absolute;
    top: 85px;
    right: 0;
}

.menu-section-outer-wrapper {
    z-index:999;
    position:relative;
}

#searchDiv .tx-indexedsearch-searchbox-button.form-search-btn {
    position:absolute;
    top:50%;
    transform:translate(0px, -50%);
    right:5px;
    background:none;
    border:none;
    outline:none !important;
}

/* .homepageor homepage */
.homepage .carousel-wrapper {
    top:0;

    /* width:1920px; */

    height:1200px;
    overflow:hidden;
    position:relative;
    min-width: 1920px;
    width: 100%;
}

.homepage .carousel-wrapper .slides {
    /* Fade from fully visible at top to transparent at bottom */
    -webkit-mask-image: linear-gradient(200deg, rgba(0, 0, 0, 1) 75%, rgb(0 0 0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: linear-gradient(200deg, rgba(0, 0, 0, 1) 75%, rgb(0 0 0) 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
}
 

/* Carousel Fade */
/* 
.homepage .carousel-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(192deg, rgba(0, 0, 0, 0) 66%,  rgb(78 104 140 / 0%) 100% );
    pointer-events: none;
    z-index: 9999;
} */

.homepage .carousel-wrapper .flexslider, .homepage .carousel-wrapper figure.image, .homepage .carousel-wrapper .ce-gallery {
    margin:0px !important;
    height:100%;
}

.homepage .carousel-wrapper .flexslider * {
    height:100% !important;
}


.homepage .carousel-wrapper figure.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* crops sides, fills height */
    object-position: center; /* keeps subject centered */
    margin:0 !important;
}

.waves-separation {
    position:relative;
    left:0px;
    z-index:15;
    width:100%;
    aspect-ratio: 640 / 433; /* BG IMAGE ASPECT RATIO */

    background-image:url('/fileadmin/rmoffrenchmanbutte/template/version1/images/header-bg.png');
    background-size:100% auto;
    background-repeat:no-repeat;
    transform: translate(0, calc(-1 * (62vw * 433 / 640)));
}

.waves-separation .waves-content {
    left: 10%;
    top:calc(12vw * (640 / 433));
    transform: translate(0, 0);
    width: 530px;
    position: relative;
}

.waves-separation .waves-content p {
    color:white;
}

.menu-wrapper .storm-default-menu .navbar-nav .nav-link {
    color: var(--primary-color);
    text-transform:uppercase;
    font-weight:600;
}

.menu-wrapper .storm-default-menu .active>.nav-link {
    color: var(--primary-color-hover);
}

.menu-wrapper .storm-default-menu .navbar-nav .nav-link:hover, .menu-wrapper .storm-default-menu .navbar-nav .nav-link:focus {
    color: var(--primary-color-hover);
}

.homepage .gradient-wrapper {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#90979c+11,547096+68 */
    background: var(--main-content-gradient); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    position: relative;
    z-index:100;

}

body.content-page {
    background: var(--main-content-gradient);
}

.main-content {
    min-height:600px;
}

.content-page .main-content {
    padding-top:500px;
}

.homepage .main-content {
    position:relative;
    z-index:9999;
    top: var(--vw-content-offset);
    margin-bottom: var(--vw-content-offset);

    /* top: calc(-1 * (50vw * 433 / 640));
    margin-bottom: calc(-1 * (50vw * 433 / 640)); */
    /* top: calc(-1 * (100% * 433 / 640)); */
    /* padding-bottom: calc(-1 * (100% * 433 / 640)); */
}

.main-content > *:first-of-type {
    padding-top:30px;
}

img {
    max-width:100%;
    height:auto;
}

.main-content > div {
    width: 1440px; /* default site width */
    max-width: 90%; /* default site margin, for responsive / smaller screens */
}


/** NEWS */
.article .footer {
    background-color:transparent;
    
}

.news .article .news-img-wrap {
    margin:0px 0px !important;
}

.news .footer p {
    color:black;
}

.news .news-list-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
    gap: 1.5rem;
}

.homepage .news .news-list-view {
    justify-items: center;
}

.news .news-list-view .article .news-img-wrap {
    background-color:unset;
}

/* News Item Layout 1 is the Important Dates */
.news .news-list-view .news-item-layout-1, .news .news-list-view .news-item-layout-1.article:last-child {
    display: flex;
    align-items: stretch;
    margin-bottom:15px;
    padding-bottom:0px;
    background-color:white;
    box-shadow: 0px 0px 2px #80808070;
}

.news .news-list-view .news-item-layout-1 .month-day-wrapper {
    padding-left: 15px;
    padding-right: 15px;
    text-align:center;
}

.news .news-list-view .news-item-layout-1 .news-list-date {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:var(--primary-color);
    outline:2px solid var(--default-font-color);
    line-height:1;
    width:150px;
}

.news .news-list-view .news-item-layout-1 .news-list-date .month-override {
    font-size:16px;
    margin-bottom:5px;
}

.news .news-list-view .news-item-layout-1 .news-list-date .day-override {
    font-weight:700;
    font-size: 20px;
}

.news .news-list-view .news-item-layout-1 .news-content {
    padding-top:7.5px;
    padding-bottom:7.5px;
    padding-left:15px;
}

.news .news-list-view .news-item-layout-1 .news-content h3, .news .news-list-view .news-item-layout-1 .news-content h3 a {
    font-size:18px;
    color:var(--default-font-color);
}

.news .news-list-view .news-item-layout-1 .news-content h3 a:hover {
    color:var(--default-font-color-hover);
}

.news .news-list-view .news-item-layout-1 .teaser-text p {
    margin-bottom:0px;
    line-height:1;
}

/* News Item Layout 2 is the Home Template for "Latest News" */
.news .news-list-view .news-item-layout-2 {
    display: flex;
    flex-direction: column;
    width:375px;
    max-width:100%;
}


.news .news-list-view .news-item-layout-2 .news-img-wrap a img, 
.news .news-list-view .news-item-layout-2 .news-img-wrap a, 
.news .news-list-view .news-item-layout-2 .news-img-wrap {
    width:100%;
}

.news .news-list-view .news-item-layout-2 .teaser-text p, .news .news-list-view .news-item-layout-2 .teaser-text {
    margin-bottom:0px;
}

.news .news-item-layout-2 .read-more-wrapper a {
    color:inherit;
    display:inline-flex;
    justify-content:center;
    margin-top:5px;
}

.news .news-list-view .news-item-layout-2 h3, .news .news-list-view .news-item-layout-2 h3 a {
    font-size: 18px;
    color: white;
    line-height:1;
    margin-bottom:5px;
}

.news .news-list-view .news-item-layout-2 .teaser-text p, .news .news-list-view .news-item-layout-2 .news-list-date {
    line-height:1;
    margin-bottom:5px;
    color:white;
}

.news .news-list-view .news-item-layout-2 .news-list-date {
    font-size:14px;
    margin: 10px 0px;
    display:block;

}

.news .news-list-view .news-item-layout-2 .news-img-wrap a {
    width:100%;
}

.news .news-list-view .news-item-layout-2 .news-img-wrap a img {
    width:100%;
    height:auto;
}

.flexslider {
    background-color:inherit;
    border:none;
    overflow:hidden;
    border-radius:0;
}

.footer-content {
    display:flex;
    flex-direction:column;
}

.footer-content div.footer-lower, .footer-content div.map-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 1440px; /* default site width */
    max-width: 90%; /* default site margin, for responsive / smaller screens */
    margin:auto;
}

.footer-content div.map-img-wrapper {
    position:relative;
    z-index:2;
}

.footer-content .horizon-heading {
    z-index:1;
}

.footer-content .footer-upper {
    padding-top:400px;
    padding-bottom:200px;
}

.footer-upper .map-img {
    position:relative;
}

.footer-upper .map-img a.img-link-wrapper {
    box-shadow: 4px 4px 10px 0px black;
    display:block;
}

.footer-upper .map-img a.img-link-button {
    position: absolute;
    bottom: 0;
    transform: translate(-50%, 50%);
    left: 50%;
    z-index: 5;
    white-space: nowrap;

}

.footer-content div.footer-lower > div {
    width:33.33%;
}

.footer {
    padding-top:200px;
    min-height:50px;
    background-image:url('/fileadmin/rmoffrenchmanbutte/template/version1/images/footer-bg.png');
    background-repeat:none;
    background-size:cover;
    background-position:top center;
    width: 100%;
    /* aspect-ratio: 160 / 119; */
}

.footer p {
    color:white;
}

@media (max-width: 1199.98px) {

    .content-page .main-content {
        padding-top:calc(100vw * 0.25);
    }

    .horizon-heading {
        top:0px;
    }

    .horizon-heading .horizon-img {
        width:530px;
    }

    .footer-content div.footer-lower, .footer-content div.map-img-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align:center;
    }

    .footer-content .footer-upper {
        padding-bottom:50px;
        padding-top:0px;
    }

}

@media (max-width: 991.98px) {

    .menu-section-outer-wrapper {
        order: 2;
    }
    .storm-default-menu {
        flex-flow: wrap !important;
    }

    .carousel-wrapper {
        order: 3;
    }

    .has-burn-notification .logo-wrapper {
        top:55px;
    }

    .has-burn-notification #searchDiv {
        top:150%;
        max-width:60%;
    }

    .logo-wrapper {
        max-width:30%;
    }

    .notice-bar {
        order:1;
        position:relative;
        top:0px;
    }

    .homepage .carousel-wrapper {
        height:900px;
    }

    /* Pushes the wave content on top of the banner */
    .waves-separation .waves-content {
        /* transform: translate(0px, -250%); */
        background-color: #405e7a;
        padding: 15px;
        width: 100vw;
        left: 0;
        top:-200px;
    }

    /* Sets Latest News to 1 Column */
    .news .news-list-view {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

    /* Centers Latest News */ 
    .news .news-list-view .news-item-layout-2 {
        align-items: center;
        justify-items: center;
        margin-left:auto;
        margin-right:auto;
    }

    .news .news-list-view .news-item-layout-2 .teaser-text {
        text-align:center;
    }

    .horizon-heading {
        top:15px;
    }

    .homepage .main-header-wrapper::after {
        transform: translate(0px, 65%);
    }

    .footer {
        padding-top:50px;
    }
}

@media (max-width: 767.98px) {

    .homepage .carousel-wrapper {
        height:800px;
    }

    .waves-separation .waves-content {
        top:-250px;
    }

    .footer-content {
        flex-direction:column;
    }

    .footer-content div.footer-lower > div, .footer-content > div {
        width:100%;
    }
}

@media (max-width: 576.98px) {
    .homepage .carousel-wrapper {
        height:675px;
    }

    .waves-separation .waves-content {
        top:-265px;
    }
}

@media (max-width: 400.98px) {
    /* .waves-separation .waves-content {
        top:-350px;
    } */

    h2 {
        font-size:24px;
    }

    .homepage .carousel-wrapper {
        height:550px;
    }
}

@media (min-width: 1921px) {

    /* maybe a calc could be used for lower resolutions but everything is coded and working) */
    .homepage .carousel-wrapper {
        height: calc(100vw * .60);
    }

    .homepage .carousel-wrapper .frame-default .ce-gallery, 
    .homepage .carousel-wrapper .frame-default .ce-outer, 
    .homepage .carousel-wrapper .frame-default .ce-inner, 
    .homepage .carousel-wrapper .frame-default .ce-row, 
    .homepage .carousel-wrapper .frame-default .ce-column, 
    .homepage .carousel-wrapper .frame-default .image {
        width:100%;
    }

}