#configurator_area {
	width:100%;
	background:url(../image/configurator/Background.png);
	background-position:center;
}
#configurator {
	width:100%;
	max-width:1200px;
	min-width:600px;
	margin:0px auto;
}
#configurator h1 {
	padding-top:50px;
	font-family:"Titillium Web SemiBold";
	font-size:36px;
	color:#f47c2a;
	text-transform:uppercase;
	text-align:left;
	line-height:40px;
	width:100%;
}
#configurator .line {
	width:100%;
	height:9px;
	border-radius:9px;
	background-color:#d8d8d8;
	margin:10px 0px 50px;
}
#configurator .flex {
	display:inline-flex;
	width:100%;
	flex-wrap:wrap;
}
#configurator .flex .column {
	width:33.333%;
	text-align:center;
}
#configurator .rectangle {
	position:relative;
	width:290px;
	height:350px;
	background-color:#ffffff;
	border:1px solid #f0f0f0;
	border-radius:15px;
	margin:0px auto 50px;
	box-shadow:1px 1px #d0d0d0;
	box-sizing:border-box;
}
#configurator .rectangle:hover {
	background-color:#f47c2a;
	cursor:pointer;
}
#configurator .rectangle:hover h2 {
	color:#ffffff;
}
#configurator .rectangle:hover h3 {
	color:#ffffff;
}
#configurator .image {
	position:absolute;
	left:0px;
	top:0px;
	width:290px;
	z-index:2;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}
#configurator .separation {
	position:absolute;
	left:-5px;
	top:225px;
	z-index:1;
}
#configurator h2 {
	position:absolute;
	left:5px;
	top:240px;
	width:calc(100% - 10px);
	padding-top:5px;
	font-family:"Titillium Web SemiBold";
	font-size:30px;
	color:#f47c2a;
	text-transform:uppercase;
	text-align:center;
	line-height:40px;
	width:100%;
}
#configurator h3 {
	position:absolute;
	left:5px;
	top:285px;
	width:calc(100% - 10px);
	font-family:"Titillium Web Regular";
	font-size:18px;
	color:#626262;
	text-align:center;
	line-height:25px;
	width:100%;
}
#configurator_images {
	margin:40px 0px 60px;
	display:inline-flex;
	width:100%;
}	
#configurator_images .column {
	width:33.333%;
	text-align:center;
	margin:auto;
}

#configurator .flex2 {
	display:inline-flex;
	width:100%;
	flex-wrap:wrap;
}
#configurator .flex2 .left {
	width:60%;
	text-align:justify;
	padding:0px 5px;
	box-sizing:border-box;
	font-family:"Titillium Web Regular";
	font-size:18px;
	color:#626262;
	line-height:30px;
}
#configurator .flex2 .left span {
	font-family:"Titillium Web SemiBold";
	font-size:22px;
	color:#f47c2a;
}
#configurator .flex2 .left b {
	font-family:"Titillium Web SemiBold";
}
#configurator .flex2 .right {
	margin:0px 15px;
	width:calc(40% - 30px);
	text-align:center;
	padding:28px 20px;
	box-sizing:border-box;
	border-radius:15px;
	border:2px solid #f47c2a;
	font-family:"Titillium Web Regular";
	font-size:18px;
	color:#f47c2a;
	line-height:30px;
}
#configurator iframe {
	display:block;
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:hidden;
	height:830px;
	width:99%;
}

#request {
	width:100%;
	margin-bottom:30px;
	border:1px solid #e4e4e4;
	border-radius:15px;
	background-color:#f2f2f2;
}
#request h1 {
	font-family:"Titillium Web SemiBold";
	font-size:28px;
	color:#ffffff;
	background-color:#f47c2a;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	padding:10px 30px;
	text-align:left;
	box-sizing:border-box;
}
#request .flex {
	display:inline-flex;
	width:100%;
}
#request .flex .column {
	width:50%;
	padding:30px;
	box-sizing:border-box;
}
#request .row_flex {
	display:inline-flex;
	width:100%;
	margin:7px 0px;
}
#request .row_flex div.text {
	padding-top:7px;
	width:20%;
	font-family:"Titillium Web";
	font-size:18px;
	color:#f47c2a;
	text-align:left;
	text-transform:uppercase;
}
#request .row_flex div.input {
	width:80%;
	overflow:hidden;
	background:url(../image/configurator/legordulo_gomb_inaktiv.svg);
	background-size:33px;
    background-repeat:no-repeat;
    background-position:right;
	background-color:rgb(255, 255, 255);
	border-radius:15px;
}
#request .row_flex div.input:hover {
	background:url(../image/configurator/legordulo_gomb_aktiv.svg);
	background-size:33px;
	background-repeat:no-repeat;
    background-position:right;
	background-color:rgb(255, 255, 255);
}
#request select {
	border:0px;
	border-radius:12px;
	background-color:transparent;
	box-shadow:inset 0px 1px 2px 0px rgba(0, 4, 14, 0.24);
	width:calc(100% + 30px);
	padding:5px 10px;
	box-sizing:border-box;
	font-family:"Titillium Web";
	font-size:14px;
	color:#666666;
}
#request input {
	font-family:"Titillium Web";
	font-size:14px;
	color:#666666;
}
#request p {
	margin-top:10px;
	width:100%;
	text-align:right;
}
#request button {
	border:0px;
	border-radius:15px;
	background-color:rgb(102, 102, 102);
	width:313px;
	height:47px;
	font-size:24px;
	font-family:"Titillium Web";
	color:rgb(255, 255, 255);
	text-transform: uppercase;
	line-height:1.25;
	text-align:justifyLeft;
	text-shadow:0.5px 0.866px 2px rgba(0, 4, 14, 0.42);  
}
#request button:hover {
	cursor:pointer;
	background-color:#f47c2a;
	color:#ffffff;
}
#request .line {
	margin:7px 0px;
	width:100%;
	height:2px;
	background-color:#ffffff;
}
#request .input_row {
	margin:7px 0px;
	display:inline-flex;
	width:100%;
}
#request .input_row div {
	width:20%;
	padding-top:7px;
	font-family:"Titillium Web";
	font-size:18px;
	color:#f47c2a;
	text-align:left;
	text-transform:uppercase;
}
#request .input_row input {
	width:80%;
	padding:8px 10px;
	border:0px;
	border-radius:12px;
	background-color:rgb(255, 255, 255);
	box-shadow:inset 0px 1px 2px 0px rgba(0, 4, 14, 0.24);
	box-sizing:border-box;
}
#request .error_row {
	display:none;
	margin:0px 0px 7px;
	width:100%;
	text-align:left;
	font-family:"Titillium Web";
	font-size:16px;
	color:#f42a46;
	padding-left:calc(20% + 10px);
}
#request h2 {
	margin:5px -30px 5px -30px;
	padding:5px 30px;
	position:unset;
	width:calc(200% + 120px);
	font-family:"Titillium Web";
	font-size:24px;
	color:#f47c2a;
	text-align:left;
	background-color:#fafafa;
	box-sizing:border-box;
}
#request h2 span {
	font-size:14px;
}
#request textarea {
	margin:10px 0px;
	width:100%;
	height:230px;
	border:0px;
	border-radius:15px;
	padding:5px 10px;
	box-shadow:inset 0px 1px 2px 0px rgba(0, 4, 14, 0.24);
	box-sizing:border-box;
	font-family:"Titillium Web";
	font-size:14px;
	color:#666666;
	resize: none;
}

#result {
	width:100%;
	margin-bottom:30px;
	border:1px solid #e4e4e4;
	border-radius:15px;
	background-color:#f2f2f2;
	padding-bottom:20px;
	display:none;
}
#result h1 {
	font-family:"Titillium Web SemiBold";
	font-size:28px;
	color:#ffffff;
	background-color:#f47c2a;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	padding:10px 30px;
	text-align:left;
	box-sizing:border-box;
}
#result h2 {
	margin:15px 0px 5px 0px;
	padding:5px 30px;
	position:unset;
	width:100%;
	font-family:"Titillium Web";
	font-size:24px;
	color:#f47c2a;
	text-align:center;
	box-sizing:border-box;
}
#result h3 {
	margin:5px 0px 5px 0px;
	padding:5px 30px;
	position:unset;
	width:100%;
	font-family:"Titillium Web";
	font-size:18px;
	color:#f47c2a;
	text-align:center;
	box-sizing:border-box;
}
#result h4 {
	margin:5px 0px 5px 0px;
	padding:5px 30px;
	position:unset;
	width:100%;
	font-family:"Titillium Web";
	font-size:16px;
	text-align:center;
	box-sizing:border-box;
}

.battery-configurator {
	height:830px;
	margin-top:0px;
    min-width:530px;
    background: white;
}

@media only screen and (max-width: 1024px) {
#configurator {
	padding:0px 15px;
	box-sizing:border-box;
}
.battery-configurator {
	height:1620px !important;
}
#configurator iframe {
	height:1620px;
}
#request .row_flex div.text {
	width:25%;
}
#request .row_flex div.input {
    width:75%;
}
}

@media only screen and (max-width: 834px) {
#request .row_flex div.text {
	width:30%;
}
#request .row_flex div.input {
    width:70%;
}
}

@media only screen and (max-width: 768px) {
#request .row_flex div.text {
	width:35%;
}
#request .row_flex div.input {
    width:65%;
}
#request .input_row div {
    width:35%;
}
#request .input_row input {
	width:65%;
}
}

@media only screen and (max-width: 640px) {
#request .flex .column {
	padding:10px 30px 10px;
	width:100%;
}
#request h2 {
	margin:5px -30px;
	width:calc(100% + 60px);
	padding: 0px 30px;
	box-sizing: border-box;
}
#menu_area, #footer_area {
	min-width:600px;
}
}