@font-face { 
	font-family: "Oswald"; 
	src: url("../fonts/Oswald-VariableFont_wght.ttf"); 
}
:root {
	--blue: 21,103,156;
	--red: 234,12,12;
	--green: 6,216,21;
	--darkgreen: 10,97,43;
	--black: 0,0,0;
	--lightgrey: 245,245,245;
	--grey: 200,200,200;
	--darkgrey: 50,50,50;
	--orange: 174,108,4;
	--font: 22px;
	--fontcolor: 0,0,0;
}

body {
	font-size: var(--font);
	margin: 0;
	padding: 0;
	color: rgb(var(--fontcolor));
}
body * {
	color: inherit;
	text-decoration: inherit;
	font-size: inherit;
	list-style: inherit;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Oswald";
	font-weight: 300;
	line-height: 1.25em;
	outline: 0;
}

h1, h1 *, .h1, .h1 *,
h2, h2 *, .h2, .h2 *,
h3, h3 *, .h3, .h3 *,
h4, h4 *, .h4, .h4 *,
h5, h5 *, .h5, .h5 *,
h6, h6 *, .h6, .h6 * {
	font-family: "Oswald";
	font-weight: 700;
	margin-bottom: 1em;
	display: block;
}
h1 {
	display: none;
}
h2, h2 *, .h2, .h2 * {
	font-size: 5rem;
}
h3, h3 *, .h3, .h3 * {
	font-size: 4rem;
}
h4, h4 *, .h4, .h4 * {
	font-size: 3rem;
}
h5, h5 *, .h5, .h5 * {
	font-size: 2rem;
}
h6, h6 *, .h6, .h6 * {
	font-size: 1rem;
	font-weight: 100;
}
main h6, main h6 *, main .h6, main .h6 * {
	font-size: 1.5rem;
	font-weight: 500;
}
@media (max-width: 1000px) {
	:root {
		--font: 20px;
	}
	h2, h2 *, .h2, .h2 * {
		font-size: 3.5rem;
	}
	h3, h3 *, .h3, .h3 * {
		font-size: 3rem;
	}
	h4, h4 *, .h4, .h4 * {
		font-size: 2rem;
	}
	h5, h5 *, .h5, .h5 * {
		font-size: 1.5rem;
	}
	h6, h6 *, .h6, .h6 * {
		font-size: 1rem;
	}
}
small {
	font-size: 0.8rem;
	font-weight: 300;
}
ol,
ul {
	margin-left: 1.5rem;
}
strong {
	font-weight: 500;
}
code {
	display: inline-block;
	padding: 1rem;
	line-height: 2rem;
	color: rgb(var(--red));
	background: rgba(var(--red),.25);
	border: .1rem solid rgb(var(--red));
}
p {
	-webkit-hyphens: auto;
	hyphens: auto;
	text-align: justify;
}

sup {
	display: inline !important;
	vertical-align: super !important;
	font-size: .5em !important;
}

header nav {
	background: #fff;
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 5vw;
	z-index: 5;
}
header nav a {
	padding: 1rem;
	text-transform: uppercase;
}
header nav a:Hover {
	color: rgb(var(--blue));
}

@media (max-width:1200px) {
	header nav a {
		font-size: 0.9em;
	}
}
@media (max-width:1000px) {
	header nav a {
		font-size: 0.8em;
		text-transform: none;
	}
}
@media (max-width:800px) {
	header nav {
		flex-direction: column;
	}
	header nav a {
		font-size: 0.8em;
		text-transform: none;
		padding: 0.2em;
	}
}


main > div {
	min-height: 100vh;
	padding: 5vw;
}
main > div * {
	margin-bottom: 1rem;
}

main p a {
	color: rgb(var(--red));
}

#start {
	padding: 20vw 5vw;
	color: #fff;
	background: url("../img/start.png") bottom left no-repeat fixed,
		 		rgb(var(--blue));
}

#benefits {
	color: rgb(var(--darkgreen));
	background: url("../img/benefits.jpg") center no-repeat, linear-gradient(to right, #c8e4e5, #c4e0e1, #c6e2e3, #cde7e8, #d1e9e9, #d1eaee, #d1eaee, #cee9f0, #cde8f1, #cce9f1, #cbe8f0);
	background-size: cover;
}
#benefits .row {
	margin: 0rem -2rem;
}
#benefits .row > * {
	padding: 1rem 2rem;
}
#benefits strong {
	display: inline-block;
	margin-bottom: 1rem;
}
#benefits li {
	list-style: none;
}
#benefits li:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content: '\f564';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	width: 1rem;
	height: 1rem;
	margin-left: -1.5rem;
	margin-right: 1rem;
}

.pakete {
	display: flex;
	margin: 5rem 0;
}
.pakete > * {
	width: 25%;
	background: rgba(var(--blue),1);
	padding: 2rem;
	color: #fff;
	z-index: 1;
	filter: brightness(110%);
	transition: margin ease .25s, filter ease .25s, padding ease .25s, width ease .25s;
}
.pakete:Hover > * {
	opacity: .5;
}
.pakete > *:nth-child(2),
.pakete > *:nth-child(4) {
	z-index: 2;
	margin: -1rem;
	padding: 4rem 2rem;
}
.pakete > *:Hover {
	width: calc(25% + 6rem);
	z-index: 3;
	margin: -4rem;
	padding: 4rem;
	filter: brightness(100%);
	opacity: 1;
}
.pakete > *:Hover:nth-child(1),
.pakete > *:Hover:nth-child(3) {
	width: calc(25% + 8rem);
}
.pakete > *:nth-child(1) {
	padding-right: 3rem;	
}
.pakete > *:nth-child(2) {
	background: rgba(var(--red),1);
}
.pakete > *:nth-child(3) {
	background: rgba(var(--green),1);
	padding: 2rem 3rem;
}
.pakete > *:nth-child(4) {
	background: rgba(var(--black),1);
}

.pakete .h5 small {
	display: inline;
	font-size: 1.25rem;
}

.pakete dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.pakete dl * {
	margin-bottom: .5rem;
}
.pakete input[type=radio] + label,
.pakete a {
	display: block;
	font-size: 1rem;
	text-transform: uppercase;
	text-align: center;
	border: .1rem solid #fff;
	background: rgba(255,255,255,.25);
	margin: 1rem 0;
	padding: 1rem;
}
.pakete input[type=radio]:checked + label,
.pakete a:Hover {
	background: rgba(255,255,255,.95);
	color: rgb(var(--blue));
}
.pakete > *:nth-child(2) input[type=radio]:checked + label,
.pakete > *:nth-child(2) a:Hover {
	color: rgb(var(--red));
}
.pakete > *:nth-child(3) input[type=radio]:checked + label,
.pakete > *:nth-child(3) a:Hover {
	color: rgb(var(--darkgreen));
}
.pakete > *:nth-child(4) input[type=radio]:checked + label,
.pakete > *:nth-child(4) a:Hover {
	color: rgb(var(--black));
}

.pakete input[type=radio] {
	position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.pakete input[type=radio] + label {
	padding: 1rem;
}

@media (max-width: 1800px) {
	.pakete > * {
		padding: 1rem;
		flex-grow: 1;
	}
	.pakete > *:nth-child(2),
	.pakete > *:nth-child(4) {
		margin: -1rem;
		padding: 2rem 2rem;
	}
	.pakete > *:Hover {
		width: calc(25% + 2rem);
		margin: -2rem;
		padding: 2rem;
	}
	.pakete > *:Hover:nth-child(1),
	.pakete > *:Hover:nth-child(3) {
		width: calc(25% + 4rem);
	}
	.pakete > *:nth-child(1) {
		padding-right: 2rem;	
	}
	.pakete > *:nth-child(3) {
		padding: 1rem 2rem;
	}
	.pakete * {
		font-size: .9em;
	}
	.pakete h4, .pakete .h5 {
		font-size: 1.5em;
	}
}
@media (max-width: 1400px) {
	.pakete * {
		font-size: .9em;
	}
	.pakete h4, .pakete .h5 {
		font-size: 1.2em;
	}
}
@media (max-width: 1000px) {
	.pakete {
		flex-direction: column;
	}
	.pakete > * {
		width: 100% !important;
		margin: 1rem !important;
		padding: 1rem !important;
	}
	.pakete * {
		font-size: 1em;
	}
	.pakete h4,
	.pakete .h5 {
		font-size: 3rem;
	}
}


#faq {
	background: rgb(var(--lightgrey));
}
.faq {
	cursor: help;
}
.faq > div {
	margin: 1rem 0;
}
.faq > div > strong {
	display: block;
	background: linear-gradient(to bottom, rgb(var(--grey)), rgb(var(--lightgrey)));
	background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%);
	border: 0.1rem solid rgb(var(--grey));
	margin: 0;
	padding: 1rem;
	color: rgb(var(--darkgrey));
	font-size: 1.5rem;
	font-weight: 500;
}
.faq > div > strong > i {
	float: right;
}
.faq > div > p {
	display: none;
	margin: 0;
	padding: 1rem;
	background: rgb(var(--lightgrey));
	border: 0.1rem solid rgb(var(--grey));
	border-bottom: transparent;
	border-top: transparent;
}
.faq > div > p:last-child {
	border-bottom: 0.1rem solid rgb(var(--grey));
}

#customer {
	color: #fff;
	background: linear-gradient(to right bottom, rgb(var(--black)), rgb(var(--black)) 50%, rgb(var(--orange)) 50%, rgb(var(--orange)));
}
.customer {
	margin: 10rem -1rem 1rem -1rem;
	display: flex;
	color: rgb(var(--fontcolor));
}
.customer > * {
	background: rgba(255,255,255,.9);
	margin: 1rem;
	padding: 1rem;
	text-align: center;
	width: 100%;
}
.customer > *:hover {
	background: rgba(255,255,255,1);
}
.customer > * img {
	display: block;
	border-radius: 50%;
	margin: calc(-25% - 1rem) auto 1rem auto;
	width: 50%;
	height: auto;
	background: #fff;
	transition: .25s;
}
.customer > *:Hover img {
	margin: calc(-27% - 1rem) auto 1rem auto;
	width: 52%;
}
.customer > * .h5 {
	font-size: 1.5rem;
	margin: 0;
	color: rgb(var(--darkgrey));
	filter: brightness(50%);
	display: block;
	font-weight: 100;
}
.customer > * cite {
	display: block;
	font-style: normal;
	padding: 1rem;
	color: rgb(var(--grey));
	filter: brightness(50%);
	font-size: .75em;
}
.customer > * cite * {
	display: inline-block;
	color: rgb(var(--black));
	filter: brightness(100%);
	font-size: 1.75rem;
}
.customer > * .stars {
	display: block;
	color: rgb(var(--orange));
	filter: brightness(200%);
}
.customer > * .stars i {
	background: tranparent;
}
.customer > * .h4 {
	color: rgb(var(--darkgrey));
	font-size: 1.5rem;
	font-weight: 500;
	margin: .5rem;
	padding: 1rem;
}
@media (max-width: 1000px) {
	.customer {
		flex-direction: column;
	}
	.customer > * {
		margin-top: 30%;
	}
}


#contact {
	background: linear-gradient(to bottom right, rgb(var(--lightgrey)), rgb(var(--grey)));
}


footer {
	color: #fff;
	padding: 5vw;
	background: linear-gradient(to bottom right, rgb(var(--black)), rgb(var(--darkgrey)));
	list-style: none;
}
footer ul {
	margin: .5rem 0;
}
footer dl {
	display: grid;
	grid-template-columns: auto 1fr;
}
footer dt {
	padding-right: 1rem;
}
footer h6 {
	margin: 1rem;
	text-align: center;
}
footer .fab {
	margin: 1rem 1rem 0 0;
	padding: .5rem;
	border-radius: .1rem;
	font-size: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	text-align: center;
}
footer .fa-facebook-square {
	background: #3b5998;
}
footer .fa-instagram {
	background: linear-gradient(to bottom left, #c32aa3, #fc5fd7, #7232bd, #f46f30, #ffdc7d);
}
footer .fa-heart {
	color: red;
}


.row {
	display: flex;
	margin: auto -1rem;
}
.row > * {
	width: 100%;
	padding: 1rem;
}
@media (max-width: 1000px) {
	.row {
		flex-direction: column;
	}
}

.alert-error {
	border: 5px solid rgb(var(--red));
	background: rgba(var(--red),.7);
	color: #fff;
	padding: 1rem;
}

.button {
	display: inline-block;
	border: .1rem solid rgb(var(--black));
	background: rgba(255,255,255,.5);
	padding: 1rem;
	text-transform: uppercase;
}
.button:Hover {
	background: rgba(255,255,255,.9);
	color: rgb(var(--black));
}
.button-big {
	width: 100%;
	font-size: 1.5em !important;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}