/*
Theme Name: Slide Theme (Assmann)
Author: Julia Hoffmann & Steve Margenfeld
Author URI: https://www.stylegfx.de/
Version: 1.0.4
 */

html {
    overflow: hidden;
    height: 100dvh;
}
*{
    box-sizing: border-box;
}
body {
    background-image: url("./pictures/window-assmann.svg");
    background-color: #591b1e;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: revert;
    background-attachment: fixed;
    font-family: system-ui, serif;
    color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden;
    min-height: 100dvh;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

a{
	color:#00daff;
}

.window_pic{
    transform: rotate(45deg);
}
.site-header {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1.5em;
}

.site-nav{
    margin-right: 1.5em;
}
.site-nav input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

/* General Layout */
.container {
    margin: 0;
    max-height: 100dvh;
    max-width: 100%;
    display: flex;
    padding: 0 1.5em 0 1.5em;
}

/* PAGE TITLE FOOTER ------------------------------------- */
.title {
    flex: 2;
    text-align: left;
    font-size: 34px;
    padding-right: 5px;
}

/* PAGE Content ------------------------------------------- */
/*noinspection ALL*/


/* EVERY POST ---------------------------------------------- */
.posts{
    width: 100%;
}

.post {
    scroll-snap-align: start;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.u_title{
    font-size:1rem;
}

/* ARROW SVG LINES ----------------------------------- */

.cls-1 {
    cursor: none;
	
    stroke: none;
    stroke-width: 5px;
    fill: rgba(0, 0, 0, 0);
    scale: 0.25;
}

.cls-1:hover {
    stroke: #ffffff;
    fill: #ffffff;
}

/* ARROW UP & DOWN ---------------------------------------- */
.up , .up svg{
    width: 40.65px;
    height: 50px;
}

.topArrow{
    margin-top: 1.5em;
    width: 40.65px;
    z-index: 99;
    cursor: auto;
    stroke: #ff000000;
    fill: rgba(82, 82, 82, 0);
}

/* Link Farbe und decoration */
.topArrow a svg, .bottomArrow a svg{
    text-decoration: none;
    color: #343434;
}

.topArrow a svg:hover, .bottomArrow a svg:hover{
    color: #828282;
}

/**
    Content Div from every Post
 */
.post-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    scrollbar-width: none !important;
}

/**
    media query
 */
@media only screen and (max-width: 780px) {
    .post-content{
        max-font-size: 4vw;
        display: block;
        overflow: scroll;
        overflow-x: hidden;
    }
}

@media only screen and (max-height: 780px) {
    .post-content{
        max-font-size: 4vw;
        display: block;
        overflow: scroll;
        overflow-x: hidden;
    }
}

/* FIRST ARROW NONE */
#top1{
    cursor: auto;
    stroke: #ff000000;
    fill: rgba(82, 82, 82, 0);
}


/* DOWN ARROW ------------- */
.down {
    animation-direction: alternate;
    position: relative;
    transform: rotate(180deg);
    z-index: 10;
}
.down-content{
    /*
    height: 10vh;
    margin-bottom: 40px;
    display: flex;
    justify-content: flex-end;*/
    animation-direction: alternate;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5em;
}

.bottomArrow{
    width: 40.65px;
    cursor: auto;
    stroke: #ff000000;
    fill: rgba(82, 82, 82, 0);
}
.bottomArrow svg{
    width: 40.65px;
    height: 50px;
}
.bottomArrow.deactivate{
    visibility: hidden;
}

.down.cls-1 {
    scale: 0.25;
}



/* RIGHT SITE MENU ------------------------------- */
.menu{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.menu-container{
	overflow-y: auto;
	max-height: 100vh;
	scroll-snap-type: y mandatory;
    scrollbar-width: none;
    display: flex;
    padding-top: 3em;
    background-color: black;
    border-radius: 0 0 0 10px;
    height: auto;
    width: 200rem;
    flex-direction: column;
}

/* MENU OPEN BUTTON ------------------------ */
.menu-open{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 20px;
    width: 30px;
    flex: 3;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    transition: 0.1ms;
}
/* Open Icon activ */
.menu-open.active{
    visibility: hidden;
    transition: 0.5ms;
}

.menu-open span{
    width: 30px;
    height: 4px;
    border-radius: 3px;
    background: #ffffff;
}

/** X MENU CLOSE BUTTON ------------------ */
.menu-close{
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    height: 30px;
    width: 30px;
    cursor: pointer;
}
/* close icon deactivate */
.menu-close.deactivate{
    visibility: hidden;
    cursor: none;
}

/* close icon active */
.menu-close.active{
    visibility: visible;
    cursor: pointer;
}

.menu-close span{
    display: flex;
    width: 30px;
    height: 4px;
    border-radius: 3px;
    background: #ffffff;
}
/**
    first child from menu-close
 */
.menu-close :nth-child(1){
    position: absolute;
    top:8px;
    transform: rotate(45deg);
}

/**
    second child from menu-close
 */
.menu-close :nth-child(2){
    position: absolute;
    top:8px;
    transform: rotate(135deg);
}
/* MENU NAV --------------------------- */
.menu-nav{
    position: fixed;
    top:0;
    right: -15rem;
    width: 15rem;
    display: flex;
	z-index: 99;
    justify-content: flex-end;
    transition: 0.5s;
}
.menu-nav.active{
    /*position: fixed;
    top:0;*/
    right: 0;
    z-index: 99;
    /*width: 15rem;
    height: 100vh;
    transition: 0.5s;*/
}
.menu-nav ul{
    display: flex;
    width: 100%;
    padding-inline-start: 0;

}
.menu-nav ul a{
    display: flex;
    text-decoration: none;
    width: 100%;
    justify-content: space-around;
}
.menu-nav ul a li {
    color: #ffffff;
    text-decoration: none;
}
.menu-nav .menu-item{
    display: flex;
    width: 100%;
    height: 4rem;
    align-items: center;
    justify-content: space-around;
}
.menu-nav ul .menu-item:hover{
    background-color: rgba(255, 255, 255, 0.47);
    color: white;
}
.menu-nav ul .menu-item:hover a{
    color: white;
}
/** SUB MENU : HIDDEN **/
.sub-menu{
    visibility:hidden;
}

/** TOP MENU ----------------------------------- */
.menuToggle{
    flex: 3;
}
.menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
.menuToggle span, input:checked {
    display: block;
    width: 33px;
    height: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}
.menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}
.menuToggle span:first-child {
    transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
.menuToggle:active #slide {
    transition: 1s;
    right: 0;
}

/* footer ---------------------------------------- */
.site-footer {
    display: flex;
    position: absolute;
    bottom: 0;
    height: 5vh;
    left: 0;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 0 20px 0 0;
    background-color: rgb(0, 0, 0);
    align-items: center;
}
.site-footer a{
    color:white;
    text-decoration: none;
}
#menu_footer {
    display: none;
}

/* scroll-bar -------------------------------------- */
.vertical::-webkit-scrollbar {
    width: 1em;
    background-color: #ddd;
}
.vertical::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 70%);
}
.vertical {
    height: 30vh;
    scroll-snap-type: y mandatory;
    scroll-snap-type: mandatory;
    overflow-y: scroll;
    scrollbar-color: #383838 #000000; /** Firefox **/
}
.vertical-section {
    scroll-snap-align: start;
}
.elem {
    scrollbar-color: #383838 #000000;
    scrollbar-width: thin;
}

.maxheight{
    height: 100%;
}

.maxwidth{
    width: 100%;
}

/* IMPRESSUM --------------------------------- */
.page{
	
	scroll-snap-type: y mandatory;
    scrollbar-width: none;
    overflow-x: hidden;
	max-height: 90vh;
}

/* Anpassungen Events ------------------------ */
.wpem-event-banner, .wpem-event-single-image {
display: none;}

.wpem-single-event-widget{
	background: #ffffff82;
	border:0;
}

/* Dokumenteinbettung ------------------------- */
.cui-toolbar-buttondock .alignright, #ChromlessStatusBar{
	display: none !important;
}