/* ===============================================
CUSTOM CSS
=============================================== */

html, body { 
	scroll-behavior: smooth !important;
}


.elementor-menu-toggle{
	outline: none;
}

#sticky-toggle-btn {
	color: #FFF !iportant;
}

/* aktivate wordbreaks */
body {
 hyphens: auto;
}

/* Login Button */
#userlog {
	width:100px;
	height: 40px;
}


/* Hide-WP-membership-Registrierung */

.swpm-join-us-link{
	display: none !important;
}


/* Style WP-Membership Form*/
.swpm-login-form-submit,
.swpm-registration-submit,
.swpm-pw-reset-submit,
.swpm-edit-profile-submit {
	background-color: #B22222;
	color: #FFF;
	border: 1px solid #B22222;
}

.swpm-login-form-submit:hover,
.swpm-registration-submit:hover,
.swpm-pw-reset-submit:hover,
.swpm-edit-profile-submit:hover {
	background-color: #FFF !important;
	color: #B22222 !important; 
	border: 1px solid #B22222 !important;
}

.swpm-login-form-pw-reset-link,
.swpm-login-form-register-link,
.swpm-registration-form a
{
	color: #B22222 !important;
}

#mitglied h2:before {
	content: 'Willkommen ';
	display: inline;
}



/* --- Shrink Header https://igniteweb.design/blog/elementor-transparent-header-sticky-scroll-changes-v2/ --- */

/* Changes the header to not be sticky when editing (doesn't show in the front end) */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
	/* color: #FFF !important; */
}


body.elementor-editor-active selector {
margin-bottom:0px !important;
}
 
/* Background color on sticky */
.elementor-sticky--effects {
	background-color:rgba(0,0,0,0.85) !important;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	transition: all 0.5s ease;
}

.elementor-sticky--effects .submenu {
	background-color: red !important;
	transition: all 0.5s ease;
}

/* Shrink Menu color */
.elementor-sticky--effects .elementor-nav-menu--main .elementor-item,
.elementor-sticky--effects .elementor-nav-menu--main .elementor-item.elementor-item-active {
	/*color: #e30008 !important; */
} 
 
/* --- Shrink LOGO ---- */
/* Logo sizing before sticky */
.logo img {
width: auto;
max-height: 100px;
transition: all 0.5s ease;
}
 
/* Logo sizing after sticky */
.elementor-sticky--effects .logo img {
max-height: 70px;
width: auto;
}

/* --- calendar plugin - custom colors --- */

.fc-toolbar.fc-header-toolbar button.fc-button.fc-button-primary.fc-button-active,
.fc-toolbar.fc-header-toolbar button.fc-button.fc-button-primary.fc-button-active{
    background: #B22222;
    color: #fff;
}

.fc-toolbar.fc-header-toolbar button.fc-button.fc-button-primary.fc-state-active, .fc-toolbar.fc-header-toolbar button.fc-button.fc-button-primary:hover, .fc-toolbar.fc-header-toolbar button.fc-button.fc-button-primary:visited, .fc-toolbar.fc-header-toolbar button.fc-button.fc-button-primary:focus {
    background: #B22222;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.fc-event, .fc-event-dot {
    background-color: #B22222 !important;
}

.eaelec-modal-header {
	    border-left: 5px solid #B22222 !important;
}

.eael-event-calendar-wrapper .eaelec-modal-header .eaelec-event-popup-date i {
    color: #B22222 !important;
}

.fc-today .fc-day-number {
    color: #FFF !important;
	border: 1px solid #A9A9A9 !important;
	background-color: #A9A9A9;
}

.eael-event-calendar-wrapper .fc-view td.fc-today {
	background-color: #A9A9A9;
}


.slide-menu {
	opacity: 0;
	z-index: 500 !important;
}




/* back to top btn */
#backupthepage{
cursor: pointer;
display: none; 
}


/* ===============================================
MEDIA Queries 
=============================================== */

/* @screen min-width = 320px > iPhone4 */
@media screen and (max-width: 20em) {

}

/* @screen min-width = 568px > iPhone5 horizontal*/
@media screen and (min-width: 35.5em) {
	
}

/* @screen min-width = 767px */
@media screen and (min-width: 47.94em) {
	.slide-menu {
		opacity: 1;
	}
	
	.my-vertical-nav /* column on the LEFT */ {
		position: fixed !important;
		top: 0 !important;
		min-width: 60px !important;
		height: 100vh;
		max-height: 100vh !important;
		overflow:hidden !important;
    }
    
    .my-vertical-content /* column on the RIGHT */ {
        margin-left: 5%; 
    }
}
	
/* @screen min-width = 991px */
@media screen and (min-width: 61.93em) {

}

/* @screen min-width = 1100px */
@media screen and (min-width: 68.75em) {
}

/* @screen min-width = 1300px */
@media screen and (min-width: 81.25em) {
}

/* @screen min-width = 2000px */
@media screen and (min-width: 125em) {
/*	#wrapper{
	max-width: 1920px;
	margin: 0 auto;
	}*/
}