.timed-modal {
    background:rgba(0,0,0,.1);
}
.timed-modal .modal-body {
    padding:0;
}
.timed-modal .modal-header {
    display:none;
}
.timed-modal .modal-content {
    /*background-image:linear-gradient(to right, #433c41 20%, red 20%)!important;*/
    background:#433c41;
    color:white;
    display:flex;
}
.timed-modal .modal-content .content-wrapper {
    display:flex;
    flex-direction:row;
}
.timed-modal .modal-content .content-wrapper .modal-image {
    background-image:url('https://www.fham.de/wp-content/uploads/2025/07/popup-veranstaltung-3.jpg');
    background-position:center center;
    background-size:cover;
    margin-top:0px;
    width:35%;
    height:auto;
    margin-right:0;
    position:relative;
}
.timed-modal .modal-content .content-wrapper .modal-image .badge-time {
    border-radius:50%;
    background:red;
    width:130px;
    height:130px;
    position:absolute;
    right:-48px;
    top:25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-image: linear-gradient(to top right, #f0a74b 0, #f8f143 100%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
    font-size: 16px;
    color: #333;
}
.timed-modal .modal-content .content-wrapper .modal-image .badge-time span {
    font-size:1.9rem;
    line-height:1em;
    font-weight:900;
}
.timed-modal .modal-content .content-wrapper .content {
    background-image:linear-gradient(to bottom right, #e45b5c 0%, #b5190e 100%); /* #c3016f #960358 */
    width:70%;
    /*margin:0 0 0 auto;*/
    padding:24px 24px 24px calc(5% + 24px);
	
}
.timed-modal .modal-content .content-wrapper .content .wrapper-close {
    margin-bottom:10px;
    text-align:right;
    color: #fff !important;
    font-size: 24px !important;
    right: 18px !important;
}
.timed-modal .modal-content .content-wrapper .content .wrapper-close i {
    cursor:pointer;
}
.timed-modal .modal-content h3 {
    margin-top:0;
    color:white;
}
.timed-modal .modal-content ul {
    list-style-type: "\2605"!important;
}
.timed-modal .modal-content ul li {
    padding-left:10px;
}
.timed-modal .fusion-countdown .fusion-countdown-counter-wrapper {
    justify-content:flex-start;
}
.timed-modal .fusion-countdown .fusion-dash {
    flex-direction:column;
}
.timed-modal .fusion-countdown .fusion-dash .fusion-digit {
    font-size:50px;
    font-weight:600;
    margin-bottom:10px;
}
.timed-modal .fusion-button.btn-timed-modal {
    color:#333;
    background:#f0a74b;
    box-shadow:1px 3px 12px 0 rgba(0,0,0,.2);
}
.timed-modal .fusion-button.btn-timed-modal:hover {
    background:#f0a74be6;
    box-shadow:1px 3px 6px 0 rgba(0,0,0,.4);
}
.timed-modal .modal-content .close {
    color:white;
    opacity:.8;
}
.timed-modal .modal-content .close:hover,
.timed-modal .modal-content .close:focus {
    opacity:1;
}

.timed-modal .fusion-countdown .fusion-countdown-counter-wrapper {
    flex-wrap: nowrap;
    overflow: unset;
}


@media only screen and (max-width:800px) {
    .timed-modal .modal-content .content-wrapper {
        flex-direction:column;
    }
    .timed-modal .modal-content .content-wrapper .content {
        width:100%;
    }
    .timed-modal .modal-content .content-wrapper .modal-image {
        /*background-image:none;
        margin-top:0;*/
    }
	
    .timed-modal .modal-content .content-wrapper .modal-image .badge-time {
        width:110px;
        height:110px;
        right:auto;
        left:20px;
        top:10px;
        font-size:14px;
    }
    .timed-modal .modal-content .content-wrapper .modal-image .badge-time span {
        font-size:1.5rem;
    }
    .timed-modal .modal-content .content-wrapper .content {
        padding:120px 20px 20px;
    }
    .timed-modal .modal-content .content-wrapper .content .wrapper-close {
        margin-bottom:50px;
    }
	
	
	.timed-modal .modal-content .content-wrapper .modal-image {
        background-image: block;
    }
	.timed-modal .modal-content .content-wrapper .modal-image .badge-time {
        top: 90px;
    }
	.timed-modal .modal-content .content-wrapper .modal-image {
		background-position: center -422px;
		margin-top: 0px;
		width: 100%;
		height: 180px;
	}
	.timed-modal .modal-content .content-wrapper .content {
        padding: 24px 20px 20px;
    }
	.timed-modal .modal-content .content-wrapper .content p {
        font-size: 15px;
    	padding-right: 12px;
    }
	.timed-modal .fusion-countdown .fusion-dash .fusion-dash-title {
        font-size: 0.6rem;
    }
	
	.timed-modal .modal-content h3 {
		margin-top: 0px;
        margin-bottom: 6px;
		font-size: calc(18px + 1.95vw) !important;
	}
}

@media only screen and (max-width:768px) {
.timed-modal .modal-content .content-wrapper .modal-image .badge-time {
        width: 110px;
        height: 110px;
    }
	.timed-modal .modal-content .content-wrapper .modal-image .badge-time span {
        font-size: 1.2rem;
    }
	
	.awb-off-canvas {
		padding-left: 0.9em;
    	padding-right: 0.9em;
	}
	
	.timed-modal .modal-content .content-wrapper .modal-image {
		background-position: center -280px;
	}
	

}

@media only screen and (max-width:640px) {
    .timed-modal .fusion-countdown .fusion-dash .fusion-digit {
        font-size:1.6rem;
        margin-bottom:5px;
    }
    .timed-modal .fusion-countdown .fusion-dash .fusion-dash-title {
        font-size:0.7rem;
    }
	.timed-modal .modal-content .content-wrapper .modal-image {
		background-position: center -200px;
	}
}

@media only screen and (max-width:480px) {
	.timed-modal .modal-content .content-wrapper .modal-image {
		background-position: center -100px;
	}
    .timed-modal .fusion-countdown .fusion-dash {
        padding:10px;
    }
}

@media only screen and (max-width:360px) {
    .timed-modal .fusion-countdown .fusion-dash {
        padding:10px 5px;
    }
}