.btn-primary {
	--bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #71a6bf;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #71a6bf;
    --bs-btn-active-border-color: #fff;
    --bs-btn-disabled-bg: #4d4d4d;
    --bs-btn-disabled-border-color: #4d4d4d;
    --bs-btn-border-radius: 0rem;
    --bs-btn-border-width: 0.2rem;
}

.btn-secondary {
    --bs-btn-bg: #ff6600;
    --bs-btn-border-color: #ff6600;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d84200;
    --bs-btn-hover-border-color: #d84200;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d84200;
    --bs-btn-active-border-color: #d84200;
    --bs-btn-disabled-bg: #4d4d4d;
    --bs-btn-disabled-border-color: #4d4d4d;
}

html {
	font-size: 20px;
}

body {
	color: white;
	background-color: #000;
}

html,
body {
	margin: 0;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

main {
	position: relative;
	overflow: hidden;
	width: 100%;
}

h1, h2, h3, h4, h5 {
	margin-bottom: 0;
}

h1 {
	font-size: 3.55rem;
}

h2 {
	font-size: 2.1rem;
}

h3 {

}

p {
	
}

.wrapper {
	position: relative;
	width: 95%;
	max-width: 60rem;
}

.content-wrapper {
	position: relative;
	margin: 0 auto;
}

.btn {
	font-size: 1.55rem;

	-webkit-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
			transition: opacity 0.5s ease;
}

.btn.hidden {
	pointer-events: none !important;
	opacity: 0;
}

.btn:focus-visible {
	box-shadow: none;
}

a.btn:hover {
	text-decoration: none;
}

.custom-invalid-feedback {
	display: none;
	width: 100%;
	margin-top: .25rem;
	font-size: .875em;
	color: var(--bs-form-invalid-color);
}

.custom-invalid-feedback.show {
	display: block;
}

.bg {
	background-position-y: 0;
	background-position-x: 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

a { color: #8ac5e1; text-decoration: none; }
a:hover { color: white; text-decoration: none; }




/*
	MODAL
*/
.modal {
	--bs-modal-width: 40rem;
}

.modal .modal-header {
	border-bottom: 0;
}

.modal .modal-content {
	background-color: #1a1a1a;
}

.modal .btn-close {
	opacity: 1 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5l11 11M13.5 2.5l-11 11' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.modal h3 {
	margin-bottom: 0.3rem;
}

.modal p,
.modal a {
	font-size: 0.85rem;
}

.modal p + h3 {
	margin-top: 1.5rem;
}

.modal-dialog-scrollable .modal-content {
	border:0;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  	width: 0.3rem !important;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
	background: #343434 !important;
}
.modal-body::-webkit-scrollbar-thumb {
    background: #85b7ce !important;
    border-radius: 0.5rem;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #85b7ce !important;
}

.modal-dialog-scrollable .modal-body {
	scrollbar-color:#85b7ce; /* Firefox */
	/*scrollbar-width: thin; */
	overflow-y: auto !important;
}

.modal-body {
    max-height: 70vh;
    overflow-y: scroll;
}










header {
	position: relative;
	width: 100%;
}

header:after {
	display: block;
	content: '';
	width: 100%;
	padding-bottom: 41.2rem;
}

header .bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-repeat: no-repeat;
	background-image: url('../img/header.jpg');
	background-size: cover;
	background-position: 50% 100%;
}

header .language-select {
	position: absolute;
	top: 0; left: 0;
}

header .language-select a {
	color: #000;
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.4;
}

header .language-select a:hover,
header .language-select a:focus,
header .language-select a:active {
	color: white;
}

header .language-select a.selected {
	color: white;
	border-bottom: 0.2rem solid white;
}

header .content-wrapper {
	position: absolute;
	top: 8rem; left: 50%;
	width: 90%;

	-webkit-transform: translate(-50%,0);
			transform: translate(-50%,0);
}

header .logo-wrapper {
	position: absolute;
	bottom: 1.5rem; left: 50%;

	-webkit-transform: translate(-50%,0);
			transform: translate(-50%,0);
}

header .logos > * {
	margin: 0 1.8rem;
	flex-grow: 0;
	flex-shrink: 0;
}

header .logos img {
	display: block;
	margin: 0 auto;
}

header .logos .logo-bramhultsvitaminwater {
	width: 10.5em;
}

header .logos .logo-weekend {
    width: 12.5em;
    margin-top: 2.2rem;
}

header .balloon {
	position: absolute;
	top: -3.5rem; right: -6.2rem;

	width: 2.35em; height: 2.35em;
	border-radius: 50%;
	background-color: #000;
	font-size: 3.15rem;
}

header .balloon > span {
	position: absolute;
	top: 50%; left: 50%;
	font-size: 1em;
	font-weight: 700;

	-webkit-transform: translate(-50%,-50%) rotate(25deg);
			transform: translate(-50%,-50%) rotate(25deg);
}

header h1 small { font-size: 72%; color: #000; }

section#intro {

}

section#intro .content-wrapper {
	max-width: 35.5rem;
}

section#form {
	background: #000;
	background: linear-gradient(1deg,rgba(113, 155, 174, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

section#form .btn {
	padding-left: 6rem;
    padding-right: 6rem;
}

section#form .invalid-feedback {
	color: #ff8f8f !important;
	font-size: var(--paragraph-font-size);
}

section#form .form-control {
    --bs-form-valid-border-color: #fff;
    --bs-form-invalid-border-color: #fff;
    border-radius: 0;
    border: 0;
	font-size: var(--paragraph-font-size);
    padding: .5rem .75rem;
}

section#form .form-control:focus  {
	box-shadow: 0 0 0 .25rem rgba(178, 220, 236, 0.5);
}

section#form .form-control::placeholder {
	opacity: 1;
	color: #bbbbbb !important;
	font-size: var(--paragraph-font-size);
}

section#form .form-label {
	font-size: 2.1rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
   	margin-bottom: 1rem;
    text-transform: uppercase;
}

section#form .required-asterisk:after {
	z-index: 5;
	display: block;
	position: absolute;
	top: 0.9rem; right: 0.5rem;
	content: '*';
	font-size: 1rem;
	color: #000;
	width: 0.5rem; height: 0.5rem;
}

section#form .form-control.is-invalid ~ .required-asterisk:after, 
section#form .was-validated .form-control:invalid ~ .required-asterisk:after,
section#form .form-control.is-valid ~ .required-asterisk:after, 
section#form .was-validated .form-control:valid ~ .required-asterisk:after {
	display: none;
}

section#form .form-control.is-invalid, 
section#form .was-validated .form-control:invalid {
	box-shadow: 0 0 0 .25rem rgb(251 106 106);
}

section#form .custom-radio-card {
	padding: 0;
	cursor: pointer;
}

/* Remove Bootstrap positioning */
section#form .custom-radio-card .form-check-input {
	position: relative;
	display: block;
	float: none !important;
    width: 2.2rem;
    height: 2.2rem;
	border: 0.2rem solid #fff;
	border-radius: 50%;
	background: transparent;
	font-size: 2.3rem;
	margin: 1.4rem auto 0;
	cursor: pointer;
	box-shadow: none;

	-webkit-appearance: none;
			appearance: none;
}

/* Inner dot */
section#form .custom-radio-card .form-check-input:checked::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
    width: 1rem;
    height: 1rem;
	background: #fff;
	border-radius: 50%;

	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}

/* Remove Bootstrap glow */
section#form .custom-radio-card .form-check-input:focus {
	box-shadow: none;
	border-color: #fff;
}

section#form .custom-radio-card .form-check-label {
	cursor: pointer;
	font-size: 1.6rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
}

section#form .custom-radio-card .form-check-label small {
	display: block;
	font-size: 57%;
    line-height: 1.5;
    margin-top: 0.3rem;
}

section#form .custom-radio-card img {
	pointer-events: none;
	display: block;
	width: 100%;
	margin-bottom: 0.7rem;
}

section#form .custom-radio-card img.mobile { display: none; }

section#form .products {
	position: relative;
	width: 100%;
}

section#form .products > .col {
    width: 25%;
    flex: 0 0 auto !important;
}



footer {
	position: relative;
	width: 100%;
	padding: 0;
    background-color: #85b7ce;
    background-repeat: no-repeat;
    background-position-y: 100%;
    background-size: 100% auto;
}

footer .d-flex {
	position: relative;
	width: 15rem;
    margin: 0 auto;
}


footer .img-container {
	position: relative;
	width: 100%;
}

footer .img-container img { display: block; }
footer .img-container img.mobile { display: none; }

footer .img-container .footer-img {
	width: 100%;
}

footer .img-container .floating-img {
    position: absolute;
    width: 21.8vw;
    bottom: -10.5vw;
    right: 11.8vw;
}

footer .text-container {
	position: relative;
	padding: 4.2rem 1rem;
	box-sizing: border-box;
}

footer .text-container h1 {
    margin-left: -7rem;
}




section#kiitos {
	background: #000;
	background: linear-gradient(1deg, rgba(133, 183, 206, 1) 15%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
    padding-bottom: 4rem;
}

section#kiitos a {
	color: #8ac5e1;
}

section#kiitos a:hover {
	color: white;
}

section#kiitos h1 { margin-bottom: 2rem; }
section#kiitos h1 small {
	display: block;
    font-size: 72%;
    line-height: 1.1;
}

section#kiitos .content-wrapper {
    max-width: 37rem;
}

section#kiitos .content-wrapper p,
section#kiitos .content-wrapper a {
	font-size: 1.7rem;
}

section#kiitos .content-wrapper a {
	display: block;
    margin-top: 2.3rem;
}

section#kiitos .product-row {
	display: block;
    width: 90%;
    max-width: 34rem;
    margin: 4rem auto 3rem;
}

section#kiitos .logo-bramhultsvitaminwater {
	display: block;
	width: 80%;
	max-width: 10.5rem;
	margin: 0 auto;
}





@media all and (min-width: 1921px) {

	html {
		font-size: 1.041667vw;
	}

}


@media all and (max-width: 1300px) {

	:root {
		--paragraph-font-size: 1rem;
	}

	html {
		font-size: 18px;
	}

	section#intro .content-wrapper {
	    max-width: 30rem;
	 }

}

@media all and (max-width: 1100px) {

	html {
		font-size: 16px;
	}

}

@media all and (max-width: 1000px) {

	html {
		font-size: 18px;
	}

	h1 {
		font-size: 3rem;
	}

	h2,
	section#form .form-label {
		font-size: 1.6rem;
	}

	.wrapper {
		width: 90%;
		max-width: none;
	}

	.modal-body {
    	max-height: 90vh;
   	}

	section#form .products > .col {
	    width: 50%;
	    flex: 0 0 auto !important;
	    margin-bottom: 1.6rem;
	}

	section#form .custom-radio-card img.desktop { display: none; }
	section#form .custom-radio-card img.mobile { display: block; }


}

@media all and (max-width: 900px) {


}

@media all and (max-width: 767px) {

	header .balloon {
		top: -7rem;
    	right: 0;
	}

}

@media all and (max-width: 699px) {




}

@media all and (max-width: 599px) {

	html {
		/*font-size: clamp(14px, 4.5vw, 17px);*/
	}

	html {
		font-size: 17px;
	}

	header:after {
		padding-bottom: 116vw;
	}

	header .bg {
	    background-image: url('../img/header-mob.jpg');
	    background-position: 50% 0;
	}
	header .language-select {
		width: 100%;
    	justify-content: center !important;
    	margin: 4vw 0 0 0 !important;
    	padding-top: 0 !important;
	}
	header .language-select a { 
		font-size: 5.5vw;
		margin: 0 7vw !important;
	}
	header .content-wrapper { top: 17.5vw; }
	header .logo-wrapper { bottom: 5vw; }
	header h1 { font-size: 8.5vw; }
	header .logos { font-size: 3vw; }
	header .logos > * { margin: 0 4vw; }
	header .logos .logo-weekend {
		position: relative;
        right: -1vw;
		width: 13em;
	}
	header .balloon {
		font-size: 11vw;
		top: -28vw;
		right: -2vw;
	}

	footer .img-container img.desktop { display: none; }
	footer .img-container img.mobile { display: block; }

	footer .img-container .floating-img {
        right: auto;
        left: -0.5vw;
        bottom: -16vw;
        width: 56.4vw;
	}

	footer .text-container {
	    padding-top: 23vw;
	}

	footer .text-container h1 {
	    margin-left: auto;
	}


	section#kiitos .content-wrapper p,
	section#kiitos .content-wrapper a {
		font-size: 1.4rem;
	}

	section#form .products {
	    width: 110%;
	    left: -4.1%;
	}

}

@media all and (max-width: 499px) {

	section#form .custom-radio-card .form-check-label { font-size: 5.7vw; }

}

@media all and (max-width: 399px) {



}

@media all and (max-width: 350px) {

	html {
		font-size: 16px;
	}

    h1 {
        font-size: 2.8rem;
    }

    h2, section#form .form-label {
        font-size: 1.4rem;
    }


}