@charset "UTF-8";
/* CSS Document */

/* Default */ 
html, body {margin:0;  padding:0;  height:100%; color: #1c1c1c; font-family: Roboto,-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif; font-size: 14px;  line-height: 19px;  cursor:default;  text-align: left; }

header {background-color: #4281FF; top: 0px; position: sticky; width: 100%; z-index: 5000;}
#conrad-logo{padding: 20px 10px;}
footer {background-color: #eee; bottom: 0px;  width: 100%; box-shadow: 0 -2px 15px -15px rgba(0,0,0,.60); padding: 20px 0;}

.container {margin: 15px auto 40px;}
header .container, footer .container {margin: 0px auto;}
.align-right{text-align: right;}


/* Titel */
/*h1{font-size: 26px; line-height: 1.2em; color: #4281FF;  border-bottom: 4px solid #4281FF; margin-bottom: 18px; padding-bottom: 8px; }*/
h1{font-size: 26px; line-height: 1.2em; color: #4281FF; font-weight: bold; letter-spacing: 0.05em; margin-bottom: 18px; padding-bottom: 8px; background-image: linear-gradient(to right, #4281FF 50%, #4281FF 50%); background-position: 0 50%; background-repeat: repeat-x; background-size: 8em 2px;}
h1 span {background-color: #FFF; padding-right: 18px;}
h2{font-size: 20px; line-height: 1.2em; background: #4281FF; color: #FFF; padding: 10px; border-radius: 4px;}
h3{font-size: 19px; line-height: 1.2em;  color: #1c1c1c; margin-top: 0px;}
h4{font-size: 18px; line-height: 1.2em; color: #4281FF; padding-bottom: 8px; background-image: linear-gradient(to right, #4281FF 50%, #4281FF 50%); background-position: 0 50%; background-repeat: repeat-x; background-size: 8em 2px;}
h4 span {background-color: #FFF; padding-right: 10px;}

img.intro-icon{margin-top: 20px;}

/* LINKS */
a {text-decoration: underline; color: #1c1c1c;}
a:hover, a:active, a:focus {color: #4281FF;}

/* Necessary */
sup, sub { line-height: 1em; }
input [type="submit"], select, button  { cursor: pointer; }
.clr{clear: both;}
.clearfix:after {  content: ".";   visibility: hidden;  display: block;  height: 0;   clear: both;}
img{border:none;}
.trenner{white-space:nowrap;}

/* Problem Float */
.cf:before, .cf:after{content:""; display: table;}
.cf:after{clear: both;}
.cf{*zoom: 1;}

.intro{margin: 0 0 15px;}

/* FORM */
/*=========================================================================================================*/

.well {background-color: #FFF;}
.fieldRow, .fieldRow_add {border: 1px solid #FFF; margin: 20px 0; background:#f5f5f5;}
.fieldRow {padding: 15px 0 10px;}
.fieldRow_add {padding: 30px 0 10px;}
label {margin-right: 10px; font-weight: 500;}
radio { width: 30px;}
/*Anti Spam field hidde*/
.maps{display: none;}

/*BTNs*/
.btn {background: #4281FF; padding: 12px 15px; font-weight: 700; color: #FFF; letter-spacing: 0.08em; border: 1px solid transparent; border-radius: 8px; transition: 0.3s; }
.btn:hover {background: #ffe600;}
#btnPlus {background-image: url("../images/add.png");}
#btnMinus {background-image: url("../images/remove.png"); }
#btnMinus, #btnPlus { float: right; background-position: center right; background-repeat: no-repeat; height: 25px; width: 180px; cursor: pointer; text-align: right;}
#btnPlus::before, #btnMinus::before  { line-height: 25px; vertical-align: middle; padding-right: 30px; }


input.error, select.error {border: 1px solid red;}
label.error {display: block; color: red; font-size: 0.8em; margin-top: 5px;}
input.valid, select.valid {border: 1px solid #2eb43a;}

/* Customize the label (the container) */
.check-container {display: block; position: relative; padding-left: 28px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.radio-container {display: inline-block; position: relative; padding-left: 28px; margin-bottom: 12px; margin-top: 12px;  cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* Hide the browser's default checkbox */
.check-container input, .radio-container input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}

/* Create a custom checkbox */
.check-container .checkmark {position: absolute; top: 0;  left: 0; height: 20px; width: 20px; background-color: #F5F5F5; border: 1px solid #4281FF;}
.radio-container .checkmark {position: absolute; top: 0;  left: 0; height: 20px; width: 20px; background-color: #F5F5F5; border: 1px solid #4281FF; border-radius: 50%;}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {background-color: #ccc; border: 1px solid #4281FF;}
.radio-container:hover input ~ .checkmark {background-color: #ccc; border: 1px solid #4281FF;}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {background-color: #4281FF;}
.radio-container input:checked ~ .checkmark {background-color: #4281FF;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after { display: block;}
.radio-container input:checked ~ .checkmark:after { display: block;}

/* Style the checkmark/indicator */
.check-container .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.radio-container .checkmark:after { left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: white;}

.mobile_no_display {display: initial;}


@media (max-width: 800px) {
    .mobile_no_display {display: none;}
    h1{background-image: none; border-bottom: 2px solid #4281FF;}
    h1 span {background-color: #FFF; padding-right: 0px;}
}