@charset "utf-8";
/* Frontend style of Ruhr Kontakt */

.visible {
   display: block!important;
   -webkit-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

.unvis {
   display: none!important;
   -webkit-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;    
}

strong, .strong {
   font-weight: bold;
}

/* what should be visible? */
.contact_form .member-box,
.contact_form .custom-box1,
.contact_form .custom-box2 {display: none !important;} /* if hidden comment out scripts! */

#frmContact_wrapper {margin: 2px auto 16px auto; text-align: center; max-width: 800px;}
.contact_form {margin: 0 auto 0 0; padding: 15px 14px 15px 14px; text-align: left;}
.row {
	display: flex;
	flex-wrap: wrap;
	background: transparent;
	width: 100%;
	margin: 0 0 18px 0;
	padding: 0;
}
.flex-input {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
}

.contact_form .gender-box { 
	position: fixed !important;
	top: -500vh !important;
	left: 20000vw !important;
	height: 10px !important;
	width: 10% !important;
	overflow: visible!important; 
}
/* Gesamtbreite 768px!! */
.flex-33-1, .flex-33-2, .flex-33-3 {
	-webkit-flex-basis: calc(33% - 20px);
	flex-basis: calc(33% - 20px);
	flex: calc(33% - 20px);	
	max-width: 90px;
	margin-right: 18px;
	vertical-align: middle;
}
.flex-50-1, .flex-50-2 {
	-webkit-flex-basis: calc(50% - 20px);
	flex-basis: calc(50% - 20px);
	flex: calc(50% - 20px);
}
.flex-50-1 {margin-right: 18px;}
.flex-50-2 {margin-right: 0px;}

.flex-60 {
	-webkit-flex-basis: calc(60% - 100px);
	flex-basis: calc(60% - 100px);
	flex: calc(60% - 100px);
	margin-right: 18px;
	background: yellow;
}
.flex-40 {
	-webkit-flex-basis: calc(40% - 20px);
	flex-basis: calc(40% - 20px);
	flex: calc(40% - 20px);
	margin-right: 0px;
	background: orange;
}

.flex-100 {
	-webkit-flex-basis: calc(100% - 20px);
	flex-basis: calc(100% - 20px);
	flex: calc(100% - 20px);
	margin-right: 0px;
}
.align_left {text-align: left;}
.pl14 {padding-left: 14px;} 

input#privacy {width:22px; height: 22px;}

.contact_form .datenschutz-box {text-align: left; margin: 15px auto 25px -15px!important; padding: 0!important;}

.flex-privacy-1  {
	-webkit-flex-basis: 30px;
	flex-basis: 30px;
	flex: 30px;	
	background: orange;
}
.flex-privacy-2 {
	-webkit-flex-basis: calc(94% - 30px)!important;
	flex-basis: calc(94% - 30px)!important;
	flex: calc(94% - 30px)!important;	
	vertical-align: top;
}
.flex-33-1, .flex-50-1, .flex-privacy-1, .flex-60 {order: 1;}
.flex-33-2, .flex-50-2, .flex-privacy-2, .flex-40 {order: 2;}
.flex-33-3 {order: 3;}

.contact_form .bf_first-last-name-box {margin-bottom: 25px!important;}

.contact_form input, .contact_form select, .contact_form textarea {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.contact_form button, .contact_form input, .contact_form select, .contact_form textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.select-option-box,
.select-option-box option {font-size: 16px!important;}


.contact_form input {line-height: 1.6!important; padding: 1px 3px!important;}

.contact_form input.inline_block {display: inline-block; padding-right: 6px;}

.contact_form label {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	padding-left: 3px;
	padding-bottom: 0px;
	margin: 0;
	display: inline-block;
}

.contact_form label.inline {
	width: auto;
	display: inline;
	margin-top: 0px;
	vertical-align: middle;
}

.contact_form label.inline a{
	width: auto;
	display: inline;
	margin-top: 0px;
	vertical-align: top;
}

.contact_form label span, .contact_form label span.required {
   display: inline;
	color: #eb5927!important;
	font-weight: 700;
   font-size: 1.5rem;
   line-height: 1!important;
   vertical-align: top!important;
}
.contact_form label span.transp {color: transparent; opacity: 0;}

.contact_form label.required span {color: #eb5927!important; font-weight: 700; font-size: 1.5rem;}

input.cf_input {outline: none; /*min-width: 230px;*/ width: 100%; min-height: 44px;}

.contact_form .bf_salutation {display: none !important;}

select.pre_title {
	height:auto!important;
	width: auto!important;
	min-width: 190px;
	color: inherit;
	padding-left: 8px !important;
	padding-right: 4px !important;
}
select.pre_title option {
	min-height: 24px !important;
	max-height: 24px !important;
	line-height: 24px !important;
	border: none !important;
}

.contact_form .bf_request-box {
height: 0px !important;
max-height: 0px !important;
line-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
color: rgba(83, 83, 83, 0.00) !important;
}

input#membership {
	width: 22px;
	margin-right: 6px;
	display: inline-block;
}

textarea.cf_input {
	width: 100%;
	height: auto;
	min-height: 8rem;
	padding: 2px 5px;
	box-sizing: border-box;
	margin: 0px;
	resize: vertical;
}

.flex-checkbox {width: 20px!important; height: 20px!important;}
.check_box_label {position: relative; bottom: 4px; display: inline-block!important; width: calc( 100% - 40px )!important;line-height: 1.4!important;}

input[type=checkbox]:checked::before {
   margin: 0 auto;
   bottom: 5px!important;
   right: 1px!important;
   vertical-align: middle!important;
   text-align: center;
 }


.math_captcha, #captcha_question {line-height: 50px!important; vertical-align: top!important; }
#captcha_question {color: #eb5927!important; font-weight: 700; font-size: 20px!important;}
label.math_captcha {display: inline-block!important; min-width: 130px!important; width: auto; height: 50px; text-align: center;  background:rgba(249,245,242,1.00);}
input#math_captcha {position: relative; top: 0px; border: none!important; min-width: 55px;width: 55px!important; max-width: 55px; height: 50px; display: inline-block!important; background: rgba(249,245,242,1.00); text-align: center; font-size: 1.5rem !important; color: #ff6d00 !important; font-weight: 700;}
label #captcha_gleich {position: relative; top: 7px; font-weight: 700; font-size: 20px!important; padding: 0px 6px 0 2px; line-height: 50px;}

#captcha_question {
    transition: opacity 0.3s ease-in-out;
}

#refresh-message {display: none;}	
#countdown, .math_captcha span {font-weight: 600; padding: 0 6px;}		
.circleloader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spinnner 1s linear infinite;
	display: inline-block;
	margin-right: 10px;
}
@keyframes spinnner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }