/* colors */
.black-border, form input, form textarea, form select {
	border: 1px solid #25272a;
}

.black-box, .black-box.btn, .pagination li.active {
    background: #000000;
    color: #ffffff;
}

.black-box a, .black-box.btn a, .pagination li.active a {
    color: #ffffff;
}

.blue-text, a, h1, h2 {
	color: #0c7f9f;
}

.blue-box, button, .btn {
	background-color: #0c7f9f;
	color: #ffffff;
}

.blue-box a {
    color: #ffffff;
}

body {
	background: #7dc6d4;
	background: linear-gradient(90deg, #3f9bb5, #7dc6d4);
	color: #25272a;
}

.grey-box {
    background: #dedede;
}

.grey-border {
    border: 1px solid #9e9e9e;
}

.green-box, .message-status.success-true {
	background: #80c316;
}

.red-box, .message-status.success-false {
	background: #de1133;
}

.shadow-box, .donation-fly img {
	box-shadow: 0.125em 0.125em 0.5em rgba(0,0,0,0.25);
	box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
}

.shadow-image, .slider-container .slider-nav .nav-elm {
	filter: drop-shadow(0.125em 0.125em 0.5em rgba(0,0,0,0.25));
	filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.25));
}

.shadow-text {
	text-shadow: 0.125em 0.125em 0.25em rgba(0,0,0,0.5);
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.white-box {
	background-color: #ffffff;
}

.white-box-transparent {
    background-color: rgba(255,255,255,0.75);
    color: #000000;
}

.white-text, #modalBox .close, .green-box, .message-status.success-true, .red-box, .message-status.success-false, .blue-box, .slider-wts a {
	color: #ffffff;
}

/* fonts */
@font-face {
    font-family: 'alfcami-regular';
    src: url('../fonts/alfcami-regular.eot');
    src: url('../fonts/alfcami-regular.eot') format('embedded-opentype'),
         url('../fonts/alfcami-regular.woff') format('woff'),
         url('../fonts/alfcami-regular.ttf') format('truetype'),
         url('../fonts/alfcami-regular.svg#HelveticaCompressedRoman') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'alfcami-bold';
    src: url('../fonts/alfcami-bold.eot');
    src: url('../fonts/alfcami-bold.eot') format('embedded-opentype'),
         url('../fonts/alfcami-bold.woff') format('woff'),
         url('../fonts/alfcami-bold.ttf') format('truetype'),
         url('../fonts/alfcami-bold.svg#HelveticaCompressedRoman') format('svg');
    font-display: swap;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

.slider-wts a {
	text-decoration: underline;
}

body, .text-size-std {
	font-family: "alfcami-regular", Segoe, "Segoe UI", "Arial", Verdana;
	font-size: 16px;
}

.big-12, h3, h4, .translate .goog-te-gadget-simple  {
	font-family: "alfcami-regular", Segoe, "Segoe UI", "Arial", Verdana;
	font-size: 1.2em;
}

.big-15, h2{
	font-family: "alfcami-bold", Segoe, "Segoe UI", "Arial", Verdana;
	font-size: 1.5em;
}

.big-20, h1 {
	font-family: "alfcami-bold", Segoe, "Segoe UI", "Arial", Verdana;
	font-size: 2.0em;
}

[data-wts-action="loadModalBoxWithContent"] {
	cursor: pointer;
}

h1, h2, h3, h4 {
	font-weight: normal;
	margin: 0.5em 0em;
	margin: 8px 0px;
}

.mobile-big-20 {
	font-size: 1.5em;
}

.small-08 {
	font-size: 0.8em;
}

.text-left {
	text-align: left;
}
	

/* responsive */
@media all and (min-width: 0em){
	/* general */	
	
    .animate {
		transition: all linear 0.25s;
	}
    
    body { 
		margin: 0em;
		margin: 0px;
		padding: 0em;
		padding: 0px;
		text-align: center
	}
	
	.clear {
		clear: both;
	}
	
	.content-container {
		margin: auto;
		width: 100%
	}
	
	.filter-blur {
		transition: all linear 0.5s;
		filter: blur(0.25em);
		filter: blur(4px);
	}
	
	img {
		max-width: 100%;
	}
	
	#main-container {
	}
	
	.is-hidden {
		display: none;
	}
    
    .margin-top-bottom-16 {
        margin: 1em 0em;
        margin: 16px 0px;
    }
	
	.padding-4 {
		padding: 0.25em;
		padding: 4px;
	}
	
	.padding-8, .padding-8.btn, form input, form textarea, form select {
		padding: 0.5em;
		padding: 8px;
	}
	
	.padding-16, .slider-container .slider-nav .nav-elm, .btn, button {
		padding: 1em;
		padding: 16px;
	}
	
	.scroll-lock {
		overflow: hidden;
	}
	
	/* Buttons */
	a.btn {
		display: inline-block;
	}
	
	button, .btn, .slider-nav {
		border: none;
		cursor: pointer;;
		transition: all linear 0.5s;
	}
	
	button:hover, .btn:hover {
		filter: brightness(120%);
	}
    
    img.btn {
        background: none;
        padding: 0;
    }
    
    img.btn:hover {
        filter: brightness(100%);
    }
	
	/* Footer */
	footer ul {
		list-style: none;
		margin: 0em;
		margin: 0px;
		padding: 0em;
		padding: 0px;
	}
	
	footer ul li {
		float: left;
		margin: 0em;
		margin: 0px;
		padding: 0.5em;
		padding: 8px;
	}
	
	footer ul li:first-child {
		padding-left: 0em;
		padding-left: 0px;
	}
	
	/* header */
    header {
        align-items: center;
        display: grid;
        grid-template-areas: 
                "header-translate"
                "header-logo";
        grid-gap: 0.25em;
        grid-gap: 4px;
    }
    
    header .logo {
        grid-area: header-logo;
	}
    
    header .translate {
        display: grid;
        grid-area: header-translate;
        grid-gap: 1%;
        grid-template-columns: 49.5% 49.5%;
    }
    
    header .translate .flags ul {
        list-style: none;
        margin: 0.125em 0em 0em 0em;
        margin: 2px 0px 0px 0px;
        padding: 0em;
        padding: 0px;
        text-align: right;
    }
    
    header .translate .flags li {
        display: inline-block;
    }
	
    header .translate .flags li img {
        height: 20px;
    }
    
    header .translate .translate-element {
        text-align: left;
    }
	
	header .logo img {
		max-width: 100%;
	}
	
	/* Banner / Slider */
	.slider-container {
		height: 26.25em;
		height: 420px;
		font-size: 0em;
		overflow: hidden;
		position: relative;
		white-space: nowrap;
		width: 100%;
	}
	
	.slider-container .slider-item {
		height: 100%;		
		filter: saturate(0);
		display: inline-block;
		position: relative;
		transition: all linear 0.5s;
		width: 100%;
	}
	
	.slider-container .slider-item.is-active {
		filter: saturate(1);
	}
	
	.slider-container .slider-image-box, .slider-container .slider-text-box {
		position: absolute;
	}
	
	.slider-container .slider-image-box {
		display: block;
        height: 100%;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}
	
	.slider-container .slider-image-box img {
		opacity: 1;
		transition: all linear 0.5s; 
		width: 100%;
        height: 100%;
        object-fit: cover;
	}
	
	.slider-container .slider-image-box img[data-slider-wts-img] {
		opacity: 0;
	}
	
	.slider-container .slider-text-box {
		bottom: 2em;
		bottom: 32px;
		left: 3em;
		left: 48px;
		text-align: left;
		white-space: normal;
		max-width: 75%;
	}
	
	.slider-container .slider-nav {
		height: 100%;
		position: absolute;
		top: 0em;
		top: 0px;
		width: 40%;
	}
	
	.slider-container .slider-nav .nav-elm {
		position: absolute;
		opacity: 0.5;
		top: 40%;
		transition: all linear 0.5s;
	}
	
	.slider-container .slider-nav:hover .nav-elm {
		opacity: 0.8;
	}
	
	.slider-container .slider-nav .nav-elm img {
		max-width: 1.25em;
		max-width: 20px;
	}
	
	.slider-container .slider-nav.nav-to-left, .slider-container .slider-nav.nav-to-left .nav-elm {
		left: 0em;
		left: 0px;
	}
	
	.slider-container .slider-nav.nav-to-right, .slider-container .slider-nav.nav-to-right .nav-elm {
		right: 0em;
		right: 0px;
	}
	
	.slider-container .slider-nav.nav-to-right .nav-elm {
		transform: rotate(180deg);
	}
	
	/* Audio */
	audio {
		width: 100%;
	}
	
	/* Contact Form */
	form label {
		display: block;
	}
	
	form input, form textarea, form select {
        box-sizing: border-box;
		margin-bottom: 1em;
		margin-bottom: 16px;
		display: block;
		width: 100%;
	}
    
    form input[type="checkbox"] {
        transform: scale(1.75);
    }
    
    form input[type="checkbox"], form input[type="checkbox"] + label {
        cursor: pointer;
        display: inline-block;
        width: inherit;
    }
    
    form select {
        background: #ffffff;
    }
    
    form textarea {
        height: 11.25em;
        height: 180px;
    }
	
	/* Modal Box */
	#modalBox {
        display: grid;
        grid-template-rows: 3.25em auto;
        grid-template-rows: 52px auto;
        height: 90%;
		left: 50%;
		position: fixed;
		opacity: 1;
		text-align: left;
		transition: all linear 0.2s;
		transform: translate(-50%, 0%) scale(1,1);
		top: 5%;
		width: 90%;
		z-index: 10;
	}
	
	#modalBox.is-hidden {
		display: block;
		opacity: 0;
        transform: translate(-50%, 0%) scale(0,0);
		top: 20%;
		z-index: -1;
	}
	
	#modalBox .container {
		overflow: auto;
		max-height: 90vh;
	}
	
	#modalBox .content {
        display: block;
        height: 100%;
	}
    	
	#modalBox .close-container {
        display: grid;
        grid-template-areas: ". modal-close-container-btn";
        grid-template-columns: auto 11.25em;
        grid-template-columns: auto 180px;
	}
    	
	#modalBox .close-container .close {
        grid-area: modal-close-container-btn;
        text-align: center;
	}
	
	#modalBox header .logo img {
		max-height: 8.5em;
		max-height: 136px;
	}
	
	#modalBox .message-status {
		margin: 0em 0em 1em 0em;
		margin: 0px 0px 16px 0px;
		height: 2em;
		height: 32px;
		text-align: center;
	}
	
	#modalBox .message-status.success-false::before {
		content: "\1F915";
	}
	
	
	#modalBox .message-status.success-true::before {
		content: "\1F929";
	}
    
    #modalBox .slider-wts {
        height: 100%;
    }
    
    #modalBox .slider-wts .slider-image-box {
        align-content: center;
        text-align: center;
    }
    
    #modalBox .slider-wts .slider-image-box img {
        height: auto;
        max-height: 100%;
        max-width: 100%;
        /*object-fit: inherit;*/
        width: auto;
    }
    
    #modalBox .slider-wts .nav-elm {
        background: rgba(0,0,0,0.5)
    }
    
    
    /* Notes / menu grid */
    ul.menu.grid {
        display: grid;
        grid-template-columns: 49% auto;
        grid-gap: 0.5em;
        grid-gap: 8px;
        list-style: none;
        margin: 1em 0em;
        margin: 16px 0px;
        padding: 0;
    }
    
    ul.menu li {
        overflow: hidden; 
        max-height: 15em;
        max-height: 240px;
    }
    
    ul.menu li.img {
        position: relative;
    }
    
    ul.menu li a {
        box-sizing: border-box;
        display: block;
        height: 100%;
    }
    
    ul.menu li img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    } 
    
    ul.menu li.img .title {
        box-sizing: border-box;
        bottom: 0;
        position: absolute;
        width: 100%
    }
    
    ul.menu li.img.no-title img {
        max-width: 100%;
    }
    
    ul.menu li.img.no-title .title {
        display: none;
    }
    
    ul.menu li.img.img-full-width a {
        align-content: center;
        display: grid;
    }
    
    ul.menu li.img.img-full-width img {
        height: auto;
        object-fit: inherit;
        width: 100%;
    }
    
    /* Sponsors / menu grid */
    .sponsoren ul.menu.grid, .werbung ul.menu.grid {
        grid-template-columns: 31% 31% auto;
        grid-gap: 1em;
        grid-gap: 16px;
    }
	
	/* Overlay */
	#overlay {
		height: 100%;
		left: 50%;
		position: fixed;
		opacity: 0.4;
		transition: all linear 0.2s;
		transform: translate(-50%, -50%);
		top: 50%;
		width: 100%;
		z-index: 5;
	}
	
	#overlay.is-hidden {
		display: block;
		height: 0;
		opacity: 0;
		width: 0;
		z-index: -1;
	}
    
    /* pagination */
    .pagination ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .pagination li {
        display: inline-block;
        margin-right: 2px;
    }
    
    .pagination li a {
        align-content: center;
        box-sizing: border-box;
        display: block;
        height: 36px;
        text-align: center;
        width: 36px;
    }
    
    /* Donation-Fly */
    .donation-fly {
        display: none;
    }
	
}

@media all and (min-width: 30em){ /* 480px */
	/* general */
	.content-container {
		width: 90%;
	}
	
	/* Banner / Slider */

}

@media all and (min-width: 48em){ /* 768px */
	/* general */
	.content-container, #modalBox {
		width: 42.5em;
		width: 680px;
	}
	
	/* fonts */
	.mobile-big-20 {
		font-size: 2.0em;
	}
    
    /* header */
    header {
        grid-template-areas: 
                "header-logo header-translate";
        grid-template-columns: 25em auto;
        grid-template-columns: 400px auto;
    }
    
    header .logo {
        text-align: left;
    }
    
    header .logo img {
        margin-left: 1em;
        margin-left: 16px;
	}
    
    header .translate.grey-box {
        background: none;
        
    }
    
    header .translate {
        grid-template-columns: auto;
        grid-gap: 0.125em;
        grid-gap: 2px;
    }
    
    header .translate .flags, header .translate .translate-element {
        text-align: right;
    }
    
	
	/* Banner / Slider */	
	.slider-container .bullet-point-container {
		position: absolute;
		bottom: 1em;
		bottom: 16px;
		right: 2em;
		right: 32px;
	}
	
	.slider-container .bullet-point-container .bulltet-point {
		background-color: #ffffff;
		display: inline-block;
		height: 0.125em;
		height: 2px;
		margin-left: 0.5em;
		margin-left: 8px;
		opacity: 0.25;
		transition: all linear 0.5s;
		width: 1em;
		width: 16px;
	}
	
	.slider-container .bullet-point-container .bulltet-point.is-active {
		height: 0.25em;
		height: 4px;
		opacity: 0.8;
	}
	
	.slider-container .slider-text-box {
		left: 4.5em;
		left: 72px;
	}
	
	.slider-container .slider-nav .nav-elm img {
		max-width: 1.5em;
		max-width: 24px;
	}
	
	/* Notes / menu grid */
    ul.menu.grid {
        grid-template-columns: 32% 32% auto;
    }
    
    /* Sponsors / menu grid */
    .sponsoren ul.menu.grid, .werbung ul.menu.grid {
        grid-template-columns: 23% 23% 23% auto;
    }
    
    /* Form */
    form {
        display: grid;
        grid-template-columns: auto 49%;
        grid-gap: 0em 0.75em;
        grid-gap: 0px 12px;
    }
    
    form .full, form .contact-company, form .company {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    
    /* Donation-Fly */
    .donation-fly {
        bottom: 2em;
        bottom: 32px;
        display: inherit;
        position: fixed;
        right: 2em;
        right: 32px;
    }
    
    .donation-fly img {
        border-radius: 0.5em;
        border-radius: 8px;
        max-width: 7.5em;
        max-width: 120px;
    }

}

@media all and (min-width: 64em){ /* 1024px */
	/* general */
	.content-container, #modalBox {
		width: 60em;
		width: 960px;
	}
    
    /* header */
    header {
        grid-template-areas: 
                "header-logo header-translate";
        grid-template-columns: 30em auto;
        grid-template-columns: 480px auto;
    }
    
    header .translate {
        grid-template-columns: auto 12em;
        grid-template-columns: auto 192px;
    }
    
    header .translate .flags, header .translate .translate-element {
        text-align: right;
    }
    
    /* Sponsors / menu grid */
    .sponsoren ul.menu.grid, .werbung ul.menu.grid {
        grid-template-columns: 15.25% 15.25% 15.25% 15.25% 15.25% auto;
    }
		
	/* Modal Box */
	#modalBox header .logo img {
		max-height: 12.5em;
		max-height: 200px;
	}
}

@media all and (min-width: 75em){ /* 1200px */
	/* general */
	.content-container, #modalBox {
		width: 71.250em;
		width: 1140px;
	}
	
	/* Banner / Slider */
	.slider-container {
		height: 32em;
		height: 512px;
	}
    
    /* Sponsors / menu grid */
    .sponsoren ul.menu.grid, .werbung ul.menu.grid {
        grid-template-columns: 15.5% 15.5% 15.5% 15.5% 15.5% auto;
    }

}

@media all and (min-width: 90em){ /* 1440px */
	/* general */
	.content-container, #modalBox {
		width: 87.50em;
		width: 1400px;
	}
    
    /* Notes / menu grid */
    ul.menu.grid {
        grid-template-columns: 24.5% 24.5% 24.5% auto;
    }
    
    /* Sponsors / menu grid */
    .sponsoren ul.menu.grid, .werbung ul.menu.grid {
        grid-template-columns: 15.75% 15.75% 15.75% 15.75% 15.75% auto;
    }


}