/* colors */
a {
	color: #113c96;
}

.black-box, button, .btn {
	background-color: #25272a;
	color: #ffffff;
}

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

.blue-box {
    background-color: #113c96;
    color: #ffffff;
}

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

body {
	color: #25272a;
}

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

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

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

.shadow-box {
	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.125em rgba(0,0,0,0.8);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}

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

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

/* fonts */
@font-face {
    font-family: "Roboto-Light";
    src: url("../fonts/roboto-light.eot");
    src: url("../fonts/roboto-light.eot") format("embedded-opentype"),
         url("../fonts/roboto-light.woff") format("woff"),
         url("../fonts/roboto-light.ttf") format("truetype"),
         url("../fonts/roboto-light.svg#HelveticaCompressedRoman") format("svg");
    font-display: swap;
}

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

a {
	text-decoration: none;
}

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

.big-12, h3, h4 {
	font-size: 1.2em;
}

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

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

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

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

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

/* responsive */
@media all and (min-width: 0em){
	/* general */
	body { 
		margin: 0em;
		margin: 0px;
		padding: 0em;
		padding: 0px;
		text-align: center
	}
    
    .center-box {
        text-align: center;
    }
    
    .center-box div {
        margin: auto;
    }
    
    .center-box button, .center-box .btn {
        display: block;
    }
	
	.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;
	}
	
	.padding-8, .padding-8.btn, form input, form textarea {
		padding: 0.5em;
		padding: 8px;
	}
	
	.padding-16, .slider-container .slider-nav .nav-elm, .btn, button {
		padding: 1em;
		padding: 16px;
	}
    
    ul {
        margin: 0.5em 0.25em;
        margin: 8px 4px;
    }

	
	/* Buttons */
	button, .btn, .slider-nav {
        display: block;
		border: none;
		cursor: pointer;;
		transition: all linear 0.5s;
	}
	
	button:hover, .btn:hover {
		filter: brightness(150%);
	}
	
	/* header */
	header .logo {
		margin: 0em auto 2em auto;
		margin: 0px auto 32px auto;
		width: 80%;
	}
	
	header .logo img {
		max-width: 100%;
	}
    
    /* Offer List */
    .offer, .image-list .image {
        margin: 0.5em 0px;
        margin: 8px 0px;
    }
    
    .offer ul {
        list-style: none;
        margin: 0em;
        margin: 0px;
        padding: 0em;
        padding: 0px;
    }
    
    .offer li {
        
    }
    
    .offer li.location::before {
        content: "\1F4CD";
    }
    
    .offer li.review::before {
        content: "\2B50";
    }
    
    .offer .offer-action, .offer .offer-data {
        margin: 0em 0em 0.5em 0em;
        margin: 0px 0px 8px 0px;
        float: right;
        width: 72%;
    }
    
    .offer .more-info {
        display: none;
    }
    
    .offer .offer-image {
        float: left;  
        width: 25%;
    }
    
    .offer .offer-title {
        height: 3.25em;
        height: 52px;
        overflow: hidden; 
    }
    
	/* Slider / Banner */
	.slider-container {
		height: 12.5em;
		height: 200px;
		font-size: 0em;
		overflow: hidden;
		position: relative;
		white-space: nowrap;
		width: 100%;
	}
	
	.slider-container .slider-item {
		height: 100%;		
		filter: blur(0.5em);
		filter: blur(8px);
		display: inline-block;
		position: relative;
		transition: all linear 0.5s;
		width: 100%;
        z-index: 0;
	}
	
	.slider-container .slider-item.is-active {
		filter: blur(0em);
		filter: blur(0px);
        z-index: 5;
	}
	
	.slider-container .slider-image-box, .slider-container .slider-text-box {
		position: absolute;
	}
	
	.slider-container .slider-image-box {
		display: block;
		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%;
	}
	
	.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;
		width: 75%;
	}
	
	.slider-container .slider-nav {
		height: 100%;
		position: absolute;
		top: 0em;
		top: 0px;
		width: 40%;
        z-index: 10;
	}
	
	.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 {
		margin-bottom: 1em;
		margin-bottom: 16px;
		display: block;
		width: 95%;
	}
	
	.contact button {
		width: 99%;
	}
	
	/* Modal Box */
	#modalBox {
		left: 50%;
		position: fixed;
		opacity: 1;
		text-align: left;
		transition: all linear 0.2s;
		transform: translate(-50%, -50%);
		top: 50%;
		width: 90%;
		z-index: 10;
	}
	
	#modalBox.is-hidden {
		display: block;
		opacity: 0;
		top: 20%;
		z-index: -1;
	}
	
	#modalBox .close {
		background-color: transparent;
		position: absolute;
		right: 0em;
		right: 0px;
		top: -3em;
		top: -48px;
		width: auto;
	}
	
	#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";
	}
	
	/* 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;
	}
	
}

@media all and (min-width: 30em){ /* 480px */
	/* general */
	.content-container {
		width: 90%;
	}
    
    /* Offer List */    
    .offer .more-info {
        display: block;
    }
	
	/* Banner / Slider */
	.slider-container {
		height: 15em;
		height: 240px;
	}
	
	/* Modal Box */
	#modalBox {
		width: 70%;
	}
}

@media all and (min-width: 48em){ /* 768px */
	/* general */
	.content-container {
		width: 42.5em;
		width: 680px;
	}
	
	/* fonts */
	.mobile-big-20 {
		font-size: 2.0em;
	}
	
	/* Banner / Slider */
	.slider-container {
		height: 20em;
		height: 320px;
	}
	
	.slider-container .bullet-point-container {
		position: absolute;
		bottom: 1em;
		bottom: 16px;
		right: 2em;
		right: 32px;
        z-index: 10;
	}
	
	.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;
	}
	
	/* Modal Box */
	#modalBox {
		width: 30em;
		width: 480px;
	}
}

@media all and (min-width: 64em){ /* 1024px */
	/* general */
	.content-container {
		width: 60em;
		width: 960px;
	}
    
    /* Offer List */
    .image-list .image {
        float: left;
        margin: 0.5em 0.5em 0.5em 0em;
        margin: 8px 8px 8px 0px;
        width: 27em;
        width: 432px;
    }
    
    .image-list .image:nth-child(2n+2) {
        margin-right: 0em;
        margin-right: 0px;
    }
    
    .offer {
        float: left;
        margin: 0.5em 0em 0.5em 0em;
        margin: 8px 0px 8px 0px;
        width: 27em;
        width: 432px;
    }
    
    .offer:nth-child(2n+2) {
        margin-right: 1em;
        margin-right: 16px;
    }
    
    .offer .offer-title {
        height: 1.75em;
        height: 28px; 
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .offer .offer-action, .offer .offer-data {
        width: 19em;
        width: 304px;
    }

    
    .offer .offer-image { 
        width: 7.5em;
        width: 120px;
    }
	
	/* Banner / Slider */
	.slider-container {
		height: 25em;
		height: 400px;
	}
	
	/* Contact Form */
	.contact .contact-name, .contact .contact-mail {
		float: left;
		width: 26.25em;
		width: 420px;
	}
	
	.contact form input {
		width: 23.75em;
		width: 380px;
	}
	
	.contact form textarea {
		width: 50em;
		width: 800px;
	}
	
	.contact button {
		width: 25em;
		width: 400px;
	}
	
	/* Modal Box */
	#modalBox {
		width: 48em;
		width: 768px;
	}
}

@media all and (min-width: 75em){ /* 1200px */
	/* general */
	.content-container {
		width: 71.250em;
		width: 1140px;
	}
    
    /* Offer List */
    .offer, .image-list .image {
        width: 33em;
        width: 528px;
    }
    
    .offer .offer-action, .offer .offer-data {
        width: 22.25em;
        width: 356px;
    }

    
    .offer .offer-image { 
        width: 9em;
        width: 144px;
    }
    
    .offer ul {
        margin: 0.75em 0em;
        margin: 12px 0px;
    }
	
	/* Banner / Slider */
	.slider-container {
		height: 32em;
		height: 512px;
	}
}