:root {
	--input-width: 250px;

	--h1-margin-top: 7vh;
	--h1-size: 12vh;
	--h2-size: 8vh;
	--h2-margin: 4vh;
	--h3-margin: 15vh;
}

body {
	margin: 0;
	padding: 0;
	font: 18px 'Akrobat', sans-serif;
}

h1, h2, .h3 { text-align: left; }

h1, h2 { font-family: Kazmann, sans-serif; font-weight: normal; }

.h3 { margin: var(--h3-margin) 0px 0px;}

a, a:hover { color: inherit; }

p {
	margin: 0 0 10px ;
}

.bold { font-weight: 700; }

.toTop { vertical-align: top; }

.main-frame {
	height: 100vh;
	width: 100vw;
	background-image: url('/images/beer.jpg');
	position: relative;
}

.main-frame .backBottom {
    background: url(/images/desktop_bot.png?t) 0 -5vw / cover no-repeat, linear-gradient(0deg, black, transparent);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
}

.shadow {
    background-color: #000;
    opacity: .8;
}

.content-wrapper {
	width: 75%;
    margin-left: 25%;
}

.content-container {
    flex-flow: column;
}

.map-marker {
    fill: #fff;
    height: 1em;
    width: 1em;
}

h1.header-text {
    margin: var(--h1-margin-top) 0px 0px;
    font-size: var(--h1-size);
}

h2.header-slogan {
    font-size: var(--h2-size);
    margin: -2vh 0 var(--h2-margin);
}

.point-address + .point-address {
    margin-left: 10vh;
}

input {
    padding: 5px 10px;
    margin-right: 15px;
    width: var(--input-width);
    font: inherit;
}

input:focus { outline: none; }

.feedback-wrapper {
    margin-top: 4vh;
}

.fb_btn {
    cursor: pointer;
}

.fb_btn, .thanx-block {
	background-color: orange;
	color: #000;
	padding: 5px 15px;
}

.fb_btn, .fb_input, .thanx-block {
	border-radius: 5px;
	border: none;
}

.thanx-block {
	width: 100%; 
	padding: 7px 15px; 
	text-align: right;
	top: -1px;
}

@media (max-width: 1100px) and (min-width: 1024px) {
    .main-frame .backBottom {
        background: 0 0 url(/images/land_bot.png?t);
    }
}

@media (max-width: 1023px) and (min-width: 650px) {
	:root {
		--h-page-padding: 60px;
		--input-width: 200px;
		--h1-margin-top: 5vh;
		--h1-size: 10vh;
		--h2-size: 6vh;
		--h2-margin: 18vh;
		--h3-margin: 5vh;
	}

	.main-frame {
		/*background-image: url('/images/back_cone_v1.jpg');*/
		padding-bottom: 15vh;
	}

	.content-wrapper {
		width: calc(100% - 2 * var(--h-page-padding));
	    margin-left: var(--h-page-padding);
	}
	
	.main-frame .backBottom {
	    background: 0 0 url(/images/port_bot.png?t);
    }

}

@media (max-width: 649px) {
	:root {
		--h-page-padding: 30px;
		--input-width: 200px;
		--h1-margin-top: 22px;
		--h1-size: 50px;
		--h2-size: 32px;
		--h2-margin: 11px;
		--h3-margin: 38px;
	}

	.main-frame {
		/*background-image: url('/images/back_cone_v2.jpg');
		background-position: bottom right;*/
		padding-bottom: 30px;
	}
	
	.main-frame .backBottom {
        background: 0 0 url(/images/mobile_bot2.png?t), 0 0 linear-gradient(180deg, transparent, #000);
    }

	.point-address {
    	margin-left: 0 !important;
    	margin-top: 5px;
    	display: block;
	}

	.content-wrapper {
		width: calc(100% - 2 * var(--h-page-padding));
	    margin-left: var(--h-page-padding);
	}

	.fb_btn, .fb_input, .thanx-block { width: 100%; margin-top: 15px; display: block;}

	.h3 { font-size: 25px; }

	.feedback-wrapper { width: 100%; margin-top: -10px; }
	
	.thanx-block {
        height: 127px;
        display: flex;
        align-items: center;
        text-align: center;
    }

    .fb_btn { text-align: center; }
}