:root {
	--theme-color: #000;}
* {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	padding: 0;}
body {
	background-color: #F7F7F7;}
body::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100vh;
    background-image: url('https://cartrans.hu/wp-content/uploads/2023/01/autovasarlas-1024x696.jpg');
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    opacity: 0.1;
}
header {
	background-color: transparent;
	height: auto;
	border-top: 10px solid #000;
	width: 100%;
	position: relative;
	z-index: 9;
	float: left;
	color: #fff;}
.container {
	position: relative;
	margin: 0px auto;
	max-width: 94%;
	width: 960px;}
.content {
	background-color: #fff;
	margin: 40px 0;
	border: 1px solid #EAEAEA;
	position: relative;
	z-index: 9;
	border-radius: 4px;
	padding: 80px;
	width: calc(100% - 160px);
	float: left;}
h1 {
	font-size: 24px;
	line-height: 96px;}
input::placeholder {
	color: rgba(0, 0, 0, 0.33);}
header p {
	float: left;
	line-height: 96px;}
header p a {
    color: var(--theme-color);}
header nav {
	float: right;}
header h1 {
	float: left;
	text-align: center;
	font-weight: normal;
	text-transform: uppercase;
	width: calc(100% - 144px);}
nav ul {
	position: absolute;
	top: 96px;
	border-radius: 0px 0px 5px 5px;
	z-index: 9999;
	right: 0;
	overflow: hidden;
	display: none;}
nav ul li a {
	text-decoration: none;
	color: #fff;
	display: block;
	background-color: var(--theme-color);
	padding: 12px 18px;}
nav ul li a:hover {
	opacity: 0.9;}
nav ul.open {
	display: block;}
nav i {
	font-size: 24px !important;
	cursor: pointer;
	margin: 36px 0;}
footer {
	background-color: transparent;
	color: var(--theme-color);
	width: 100%;
	float: left;}
footer p {
	line-height: 48px;
	text-align: center;}
input, select {
	background-color: #f7f7f7;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: bold;
	width: 120px;
	border: 1px solid #EAEAEA;
	text-align: center;}
input[type="radio"] {
	display: none;}
select {
	padding: 10px 8px;
	text-align: left;
	width: 162px;}
label {
	width: 280px;
	display: inline-block;
	line-height: 38px;
	opacity: 0.5;}
label:last-child {
    width: auto;}
label.switcher {
	padding: 0 20px;
	line-height: 36px;
	cursor: pointer;
	border: 1px solid #A8A8A8;
	width: auto;}
label.switcher:nth-last-child(3) {
	border-right: 0 !important;
	margin-left: 8px;
	border-radius: 4px 0px 0px 4px;}
label.switcher:nth-last-child(1) {
	border-radius: 0px 4px 4px 0px;}
input[type="radio"]:checked+label{ color: #000; opacity: 1; border: 1px solid #A8A8A8; background-color: #f7f7f7; } 
button {
	width: 180px;
	text-align: center;
	background-color: var(--theme-color);
	padding: 12px 24px;
	border-radius: 4px;
	color: #fff;
	border: 1px solid #D7D0BB;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;}
button:hover {
	opacity: 0.9;}
input:focus, select:focus {
    outline:none !important;}
form .form-element {
	margin-bottom: 8px;}
form .form-element:last-child {
	border-top: 1px solid #EAEAEA;
	padding-top: 20px;
	margin-top: 20px;}
.content p {
	padding-bottom: 45px;}
.content h2 {
	padding-bottom: 30px;}
form .form-element input:nth-child(n+3) {
	margin-left: 5px;
	width: 30px;}
.result {
	margin-top: 20px;
	border-radius: 4px;
	border: 1px solid #EAEAEA;
	background-color: #f7f7f7;}
.result p {
	line-height: 1.3;
	font-weight: 600;
	padding: 20px;}
p.hidden {
	display: none;}

@media(max-width: 1024px) {
    .content {
        padding: 30px;
        width: calc(100% - 60px);
    }
}

@media(max-width: 640px) {
	input {
		width: calc(100% - 42px);
	}
	select {
	    width: 100%;
	}
	label.switcher:nth-last-child(3) {
		margin-left: 0;
		margin-top: 5px;
	}
	.content {
	    padding: 20px;
	    width: calc(100% - 40px);
	    margin: 20px 0;
	}
	form .form-element input:nth-child(n+3) {
	    margin-left: 0;
	    width: calc(50% - 42px);
	}
}