:root {
    --primary-color: #f2d320;
    --primary-color-hover: #dbbb02;
    --secondary-color: #00a85a;
    --secondary-color-hover: #008145;
    --burn-notice-font-color: black;
    --default-font-color: #0a0a0a;
    --default-font-color-hover: #565656;
    --gradient-blue: #547096;
    --gradient-blue-hover: #547096;
    --vw-content-offset: calc(-1 * (115vw * 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;
    font-family: "Times New Roman", Times, serif;
}

h1 {
    color:#2D2424;
    font-size: 40px;
    text-transform: uppercase;
    font-weight:700;
}

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

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

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

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

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

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

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

.content-page a {
  color: var(--gradient-blue);
  font-weight:700;
}

.content-page a:not(.btn):not(.more):not(h3):hover:not(.nav-link) {
    color: var(--gradient-blue-hover);
    text-decoration:none;
}

.burn-notice-wrapper a {
  color: var(--burn-notice-font-color) !important;
  text-decoration: underline;
}

.homepage a, .footer-lower a {
 color: var(--primary-color);
}

.homepage a:hover, .footer-lower a:hover {
    color: var(--primary-color-hover);
    text-decoration:none;
}

.footer-lower a:hover {
    color: var(--primary-color-hover) !important;
    text-decoration:none !important; 
}

.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%);
    max-width:100%;
}

/* 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"; */
}

.btn:hover, .btn a:hover, .news a.more:hover {
    text-decoration:none;
}

/* CUSTOM BUTTON STYLES FOR RTE */
.btn.btn-custom-1, .news .news-item-layout-2 .read-more-wrapper a, .news-backlink-wrap a, .news a.more, .powermail_fieldwrap_type_submit input[type="submit"] {
    color: var(--default-font-color);
    border-radius: 0;
    letter-spacing: 1px;
    line-height:1;
    font-weight: 700;
    background-color: var(--primary-color);
    min-width:130px;
    padding:7.5px 7.5px;
    border:1px solid var(--default-font-color);
    text-transform:uppercase;
    margin-bottom:5px;
}

.btn-custom-1:hover, .news .news-item-layout-2 .read-more-wrapper a:hover, .news a.more:hover, .news-backlink-wrap a:hover {
    background-color:white !important;
    color: var(--default-font-color) !important;
}

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

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

.btn.btn-custom-3 {
    color: var(--default-font-color);
    border-radius: 0;
    letter-spacing: 1px;
    line-height:1;
    font-weight: 700;
    background-color: white;
    border: 1px solid black;
    min-width:130px;
    padding:7.5px 7.5px;
    text-transform:uppercase;
}

.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%;
}

.content-page .logo {
    width:150px;
}

.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 30%, #547096 60%, #59728e00 100%);
    z-index: 99;
    height:100px;
}

#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;

}

.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;
    overflow:hidden;
    position:relative;
    min-width: 1920px;
    width: 100%;
}

.homepage .carousel-wrapper, .homepage .carousel-wrapper img {
    height:1200px;
}

.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;
}
 

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

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


.homepage .carousel-wrapper figure.image img {
    width: 100%;
    /* height: 1200px; */
    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;
    font-weight:600;
    font-size:20px;
    line-height:1.1;
}

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

.menu-wrapper .storm-default-menu .navbar-nav .level-1 > .nav-link:hover, .menu-wrapper .storm-default-menu .navbar-nav .level-1.active > .nav-link {
    color: white;
    
}

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

.menu-wrapper .storm-default-menu .navbar-nav .level-1 ul .nav-link {
    font-weight:400;
    white-space:break-spaces;
}

.menu-wrapper .storm-default-menu ul li.submenu-wrapper:hover > ul.dropdown-menu {
    /* background-color: var(--primary-color); */
    background-color: white;
}

.menu-wrapper .storm-default-menu .dropdown-menu .nav-link {
    color:black;
}

.storm-default-menu .dropdown-menu:not(.show) {
    display:none !important;
}


.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:150px;
    margin-bottom:-100px;
    position:relative;
    z-index:500;
}

.homepage .main-content {
    position:relative;
    z-index:9999;
    top: var(--vw-content-offset);
    margin-bottom: var(--vw-content-offset);
    margin-bottom: calc(-1 * (137vw * 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 */
}

/* POWERMAIL */
.powermail_legend {
    padding:0px;
}


/** NEWS */
.news-single .footer, .news-list-view .footer {
    background:none;
    border:none;
}

.news-list-view .news-img-wrap, .news-list-view .teaser-text {
    display:inline-block;
}


.article .footer {
    background-color:transparent; 
}

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

.news .footer p {
    color:black;
}

.news .footer {
    background-image:none !important;
}


.news .news-list-view .article .news-img-wrap {
    width:100%;
}


.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;
    max-width:100%;
}

.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:66px;
}

.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;
    width: 300px;
    max-width: 100%;
}

.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);
    font-weight:700;
}

.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:450px;
    max-width:100%;
}

.news-img-wrap {
  float: left !important;
}
.news-text-wrap {
  min-height: 500px;
}

.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%;
    aspect-ratio: 16 / 9;
}

.news .article .news-img-wrap a, .news .article .news-img-wrap img {
   /* aspect-ratio: 16  9;*/
    width:100% !important;
}

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

.homepage .news [itemprop="description"] {
  min-height: 65px;
}

.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;
    font-weight:700;
}

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

.contentpage .news .news-list-view :not(.news-item-layout-1) .news-list-date {
    color:#999;
}

.homepage .news .news-list-view :not(.news-item-layout-1) .news-list-date {
    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;
}

.tx-kesearch-pi1 {
    margin-bottom:100px;
    font-family:inherit;
}



.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;
}

.content-page .footer-upper {
    padding-top:0px;

}

.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:225px;
    min-height:50px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    width: 100%;
    /* aspect-ratio: 160 / 119; */
}


.homepage .footer {
    background-image:url('/fileadmin/rmoffrenchmanbutte/template/version1/images/footer-bg.png');
}

.content-page .footer {
    background-image:url('/fileadmin/rmoffrenchmanbutte/template/version1/images/footer-bg-content.jpg');
}


 .content-page .footer-content div.footer-lower, .content-page .footer-content div.map-img-wrapper {
    background-color: #00000063;
    padding: 40px;
 }


.footer p {
    color:white;
}

.news .news-list-view .f3-widget-paginator li.current, .kesearch_pagebrowser .pagination li.active span.page-link {
    background-color: var(--default-font-color);
    border:none;
}

.news .news-list-view .f3-widget-paginator li {
    text-transform:uppercase;
}

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

/** OVERRIDES **/
#page-91 .news-list-view .news-img-wrap {
    display:none;
}




#c6 {
    width: 1200px;

}


@media (max-width:1599px) and (min-width:992px) {
    .logo {
        width:350px;
        max-width:60%;
    }
}


@media (max-width: 1300px) {
    .storm-default-menu li {
        font-size:12px;
    }


}

@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;
        background-color: var(--gradient-blue);
    }

    .storm-default-menu .nav-item.level-1 .nav-link {
        display: inline-flex;
        align-items: center;
        text-transform:uppercase;
        color: var(--primary-color);
    }

    .storm-default-menu .nav-item .nav-link, .navbar-light .navbar-toggler, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
       color: white;
    }

    .storm-default-menu ul.dropdown-menu {
        background-color: transparent;
        left: unset;
        transform: none;
        top: unset;
        text-align:left;
        margin-left:15px;
        border:none;
    }

    .storm-default-menu .nav-item.active a {
        color: var(--primary-color) !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;
        width: 450px;
        margin: auto;
        max-width: 100%;
    }

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

    .footer {
        padding-top:50px;
    }

    .storm-default-menu li {
        font-size:14px;
    }
}

@media (max-width: 767.98px) {

    .news .news-list-view .news-item-layout-2 h3, .news .news-list-view .news-item-layout-2 h3 a {
        text-align:center;
    }


    .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) {
    h2 {
        font-size:24px;
    }

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

@media (min-width:768px) {
    .storm-default-menu ul.dropdown-menu {
        border: 1.5px solid black;
    }
}


@media (min-width:992px) {
    
    .storm-default-menu ul li.submenu-wrapper:hover > ul.dropdown-menu {
        display:block !important;
    }

    .storm-default-menu ul.dropdown-menu {
        width:190px !important;
    }

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

@media (min-width: 1921px) {

    /* maybe a calc could be used for lower resolutions but everything is coded and working) */
    .homepage .carousel-wrapper, .homepage .carousel-wrapper img {
        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%;
    }

}