.alignwide {
    margin-left  : -20%;
    margin-right : -20%;
    max-width: 140%
}
.alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
    width: 100vw;

}

/* Hauptmenu */
.single.single-post > #menuMain li a[title="Aktuelles"] {
    color: #d5082e;
}

/* Header Images */
.archive .page-header .herobg {
    background-image: url("https://www.herrmann-bedachung.de/wp-content/uploads/2023/02/header_aktuelles_01-scaled.jpg")!important;
}

.blog .page-header .herobg {
    background-image: url("https://www.herrmann-bedachung.de/wp-content/uploads/2025/07/58-XHII2598-e1752746719203.jpg")!important;
}

.single-post .page-header .herobg {
    background-image: url("https://www.herrmann-bedachung.de/wp-content/uploads/2025/07/58-XHII2598-e1752746719203.jpg")!important;
}

.error404 .page-header .herobg {
    background-image: url("https://www.herrmann-bedachung.de/wp-content/uploads/2023/02/header_home-scaled.jpeg")!important;
}

/* News */
#content .footer {
    clear: both;
    padding: 10px 0 0 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
    color: #888;
}

/* News - Homepage */
.has-h3 {
    margin-top:40px;
    color:#d5082e;
    text-transform:uppercase
}

/* Slider - Text */
.slider .container {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Slides */
.mySlides {
    display: none;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #fff;
    height: 440px;
}

@media (max-width: 776px) {
    .mySlides {
        padding: 15px;
    }
}

.mySlides {
    animation-name: slide_move;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes slide_move {
    from {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.mySlides h2 {
    color: #fff;
}

/* Next & previous buttons */
.prev-ts, .next-ts {
    cursor: pointer;
    position: absolute;
    /*top: 50%;*/
    width: auto;
    /*margin-top: -30px;*/
    padding: 16px;
    color: black;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(255,255,255,1);
    color: black;
}

/* Position the "next button" to the right */
.next-ts {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
    transform: translateY(250%) translateX(100%);
}

.prev-ts {
    transform: translateY(250%) translateX(-100%);
}

.prev-ts svg, .next-ts svg {
    display: block;
    width:40px;
    height:40px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-ts:hover, .next-ts:hover {
    background-color: black;
    color: white;
}

.prev-ts:hover svg, .next-ts:hover svg {
    fill: rgba(255,255,255,1);
}

.slider:hover .prev-ts {
    animation-name: prev_move;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.slider .prev-ts {
    animation-name: prev_hide;
    animation-duration: 0.5s;
    animation-fill-mode: backwards;
}

.slider:hover .next-ts {
    animation-name: next_move;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.slider .next-ts {
    animation-name: next_hide;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes prev_move {
    from {
        transform: translateY(250%) translateX(-100%);
    }
    100% {
        transform: translateY(250%) translateX(0);
    }
}

@keyframes prev_hide {
    from {
        transform: translateY(250%) translateX(0);
    }
    100% {
        transform: translateY(250%) translateX(-100%);
    }
}

@keyframes next_move {
    from {
        transform: translateY(250%) translateX(100%);
    }
    100% {
        transform: translateY(250%) translateX(0);
    }
}

@keyframes next_hide {
    from {
        transform: translateY(250%) translateX(0%);
    }
    100% {
        transform: translateY(250%) translateX(100%);
    }
}

@media (max-width: 776px) {
    .prev-ts, .next-ts {
        display: none;
    }
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 40px;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 40%);
}

/* Add a background color to the active dot/circle */
dot.active, .dot:hover {
    background-color: rgba(255,255,255,1);
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}

/* Team */
.team {
    margin-left: -15px;
    margin-right: -15px;
}

.team .col-md-4 {
    padding-block: 15px;
}

/* Simply Gallerie */
.pgcsimplygalleryblock-masonry-collection .pgcsimplygalleryblock-masonry-content {
    margin-left: -15px;
    margin-right: -15px;
}

#content .pgcsimplygalleryblock-masonry-content {
    padding: 0!important;
}

.pgc-sgb-cb .wp-block-pgcsimplygalleryblock-slider .pgcsimplygalleryblock-slider-content {
    padding: 0!important;
}

/* hr */
.wp-block-separator {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #ededed;
}

/* Seitenmenü - Sub Klasse nur active wenn Main Page */
.navigation .menu-item .sub {
    display: none;
}
.navigation .menu-item.active .sub {
    display: block;
}

/* News Teaser */
#pagecount{
    float: left;
    padding: 0px;
    margin-bottom: 40px;
}

#pagelink{
    float: right;
    padding: 0px;
    margin-bottom: 40px;
    text-align: right;
}

/* Footer */
@media (max-width: 776px) {
    #areaFooter .container {
        margin-left: 0;
    }
}

/* Back to Top Button */
.back-to-top {
    background:#d5082e;
    position: fixed;
    bottom:20px;
    right:20px;
    padding:1em;
    z-index: 100;
}

/* Animationen */
/* Headerbild */
.zoom{
    transform:scale(1.08,1.08);
}

/* Nachladen einzl. Elemente */
.reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: all 2s ease;
}

.reveal-load {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: all 2s ease;
}

.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}

.reveal-load.active{
    transform: translateY(0px);
    opacity: 1;
}

/*#areaFeature a {
    padding-top: 60px;
}
#areaFeature a span {
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    box-sizing: border-box;
    z-index: 2;
    background:#d5082e;
    padding:1em;
}*/

.img-container {
    width: 100%;
    height: 365px;
}