/*
###########################################################################################
FORMULAR STYLE
###########################################################################################
*/

.formwrapper {padding:20px;background:#D2D2C2;margin:0 0 45px 0;}

.resoption {font-size:1.2em;}
.resinfo {font-weight:400;color:#222;font-size:.9em;line-height:1.2em;margin:10px 0 20px 0;}
.resinputs {margin:0 0 20px 0;border-bottom:1px solid #AEAE97}


.res-where {
        display: -webkit-flex;
          display: flex;
        -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-flow: row wrap;
}

        /*--- Btns ---*/
a.res-where-btns:link,
a.res-where-btns:visited,
a.res-where-btns:active {
            display:flex;
            justify-content: center;
            flex-direction: column;
            text-align:center;
            padding:10px;
            background:#AEAE97;
            color:#222;
            font-size:.9em;
            line-height:1.2em;
            transition: all 300ms ease 0s;
            -moz-transition: all 300ms ease 0s;
            -webkit-transition: all 300ms ease 0s;
}
a.res-where-btns:hover{background:#444;color:#fff;}
a.res-where-btns-choosed:link,
a.res-where-btns-choosed:visited,
a.res-where-btns-choosed:active,
a.res-where-btns-choosed:hover
{background:#fff;color:#9A3334;}

@media only screen and (max-device-width:1024px)
{
            a.res-where-btns:hover{background:#AEAE97;color:#222;}
            a.res-where-btns:active{background:#444;color:#fff;}
            a.res-where-btns-choosed:hover,a.res-where-btns-choosed:active{background:#fff;color:#9A3334;}
}


.res-where-btns {width:100%;margin:5px 0 10px 0;}
@media screen and (min-width:440px) 
{
    .res-where-btns {
            width:49%;
            margin:0 2% 0 0;
            }
}

 .res-where-btns:last-child{margin:0;}


/* ################ Input, SELECT, TEXTAREA - remove standard-styles*/
input,select,textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    border-radius:0;
} 

/* ################ Inputs - FOCUS */
input[type=checkbox]:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
select:focus,
option:focus,
textarea:focus {
  outline: 0;
  border-color: #52251c;
}

/* ################ Inputs - Allg. */
.input,.submitbtn,textarea {
    width:100%;
    border: 1px solid #ccc;
    padding:10px;
    font-family: Roboto,Helvetica, Arial, sans-serif;
    color: #000;
    font-weight:400;
    font-size:1em;
    line-height:1.5em;
}

/* ################ TEXTAREA */
textarea {resize: vertical;min-height:200px;}


/* ################ SELECT */
select {
    width: 100%;
    border: 1px solid #ccc;
    font-family: Roboto,Helvetica, Arial, sans-serif;
    color: #000;
    font-weight:400;
    font-size:1em;
    line-height:1.5em;
    background:#fff url(../images/form-select-arrow.png) no-repeat right 10px center;
    padding:10px 26px 10px 10px;
}
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) 
{
    select {padding:1px 26px 0px 6px;}
}

select::-ms-expand {display:none;}

option { padding:10px;}

/* HIDE DOT FOR FIREFOX BUT HACK FOR IE ??? !!!*/
select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}
select.inputerror {
 background:#E42416 url(../images/form-select-arrow-white.png) no-repeat right 10px center;
  color: rgba(255,255,255,0);
  text-shadow: 0 0 0 #fff;
        }


/* ################ SUBMIT - BUTTONS */
.submitbtn { 
    font-family: fivefont,'Josefin Sans',Roboto,verdana,arial,verdana;
    font-weight:400;
    border:none;
    background:#8D8D6E;
    color:#eee;
    padding:14px 10px;
    transition: background 300ms ease 0s;
    cursor: pointer;
}

.submitbtn:hover,.submitbtn:focus  { 
    background:#191919;
    color:#fff;
}

@media only screen and (max-device-width: 1024px) 
{
            .submitbtn:hover {
               background:#8D8D6E;
               color:#eee;
               transition: background 1ms ease 0s;
               }
            .submitbtn:active {
               background:#191919;
               color:#fff;
               transition: background 1ms ease 0s;
             }
}

/* ################ Input - ERROS */
.inputerror { border:2px solid #c0392b;}
input.inputerror:focus,select.inputerror:focus {  border-color: #E42416;}

.cb_error {border:1px solid red;}

/* ################ Input - CONTAINER */
.inputbox { margin: 0 0 20px 0;position:relative; }
/*.inputbox:last-child { margin: 0;}*/
.mini_input_left { margin: 0 0 20px 0; }
.mini_input_right_empty{margin:0;}
.three_input_field{ margin: 0 0 20px 0; }
.three_input_field_last{margin:0}
@media screen and (min-width:480px) 
{
    .mini_input_left { float:left; width:48%;margin:0;}
    .mini_input_right { float:right; width:48%;margin:0}

    .three_input_field { float:left; width:32%;margin:0;}
    .three_input_field_middle{margin:0 2%}
}




/* ################ DEFAULTS AND LABELS */
.labelvis{color:blue}
.defaultinput{color:green}
.inputerror.defaultinput{color:white}



/*
###########################################################################################
Notifications
###########################################################################################
*/

.formsuccess_box {
    position:relative;
    background:#75A247;
    color:#fff;
    padding:20px 10px;
    }

.formerror_box{
    position:relative;
    background:#c0392b;
    color:#fff;
    padding:20px 10px;
    margin:0;
    }

.formerror_box{position:relative}
.formerror_box.arrow_box:after{
        border-width: 10px;
	margin-left: -10px;
        border-top-color: #c0392b;
}

.response_close { position:absolute;top:5px;right:0;}
a.response_close:link,a.response_close:visited,a.response_close:active{color:#fff;font-size:22px;border:none}
a.response_close:hover{color:#000;border:none}
@media only screen and (max-device-width:1024px){
    a.response_close:hover{color:#fff;border:none}
    a.response_close:active{color:#000;border:none}
}

/* ################ Input - AniLabel */
.ani_label_wrapper {position:relative;}

.ani_label_wrapper label {
    position:absolute;
    bottom:5px;
    left:0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    color:#222;
}
.ani_label_wrapper label:hover {cursor:text;}
label.focusLabel{bottom:85%;font-size:0.8em;color:#000;}






/*
###########################################################################################
FORMULAR AUFTRAG
###########################################################################################
*/


.dosenFormHeading { text-align:center;margin:0 0 15px 0}
.dosenFormHeadingLine{margin:0 auto;}


/*
.order_form_inputswrapper_row:nth-child(odd) .form_order_name, .order_form_inputswrapper_row:nth-child(odd) .form_order_input  {
border-bottom:1px solid rgba(174, 174, 151,.4);
}
.order_form_inputswrapper_row:nth-child(even) { }*/

.order_form_inputswrapper {margin:0 0 20px 0}
.order_form_inputswrapper_row { padding:10px;border-bottom:1px solid rgba(174, 174, 151,.4);}
.form_order_item .input{width:50px;text-align:center;margin:0 5px 0 0;}
.form_order_name {padding:0 0 10px 0;}


 @media only screen and (min-width:480px) 
{
    .form_order_name, .form_order_input  { border-bottom:1px solid rgba(174, 174, 151,.4); }

    .order_form_inputswrapper { display:table;width:100%;/*table-layout:fixed;*/}
    .order_form_inputswrapper_row { display:table-row;padding:0;border:none}
    .form_order_item{display:table-cell;vertical-align:top;padding:20px 0;}
    .form_order_name { padding:20px 20px 20px 10px;}
    .form_order_input { width:120px;}
}

.formsmallinfo {font-size:0.8em}
.formsmallinfosoldout{font-size:0.8em;font-weight:bold;color:#9A3334;}

.ordercathead{font-weight:400;font-size:1.3em;color:#9A3334;font-family:'Josefin Sans',Roboto,helvetica,verdana,arial,sans-serif;text-transform:uppercase}

.checkorderbox .formsuccess_box {background:#555}

/*
###########################################################################################
FORMULAR - FILES
###########################################################################################
*/
        /* FILES */
        label.filelabel input[type="file"] {
            position: fixed;
            top: -1000px;
        }
        .filelabel {
            border-radius: 4px;
            padding: 10px;
            background: #bdcdd9;
            line-height:1;
            display: inline-block;
        }
        .filelabel:hover {
            background: #40b9cc;
            color:#fff;
            cursor:pointer;
        }
        .filepreview img { max-width:100px;}


/* FILES */
label.filelabel input[type="file"] 
{
    position: fixed;
    top: -1000px;
}
.filelabel {
    /*border-radius: 4px;*/
    border:1px solid #ddd;
    padding: 15px;
    text-align:center;
    background: #eee;
    color:#777;
    line-height:1;
    display: block;
}
.filelabel:hover {
    background: #0579b1;
    border:1px solid #0579b1;
    color:#fff;
    cursor:pointer;
}
@media only screen and (max-device-width: 1024px) 
{
    .filelabel:hover {background:#eee;color:#777;border:1px solid #ddd;}
    .filelabel:active {background:#0579b1;color:#fff;border:1px solid #0579b1;}
}

.filepreview img { max-width:100px;}
.filepreview {position:relative;z-index:3;padding:6px;}
.fileinputinfo1 { font-size:12px;font-style:italic;line-height:16px;margin:5px 0 0 0;}
.fileinputinfo { font-size:12px;font-style:italic;line-height:16px;margin:0;position:absolute;top:0;left:0;bottom:0;right:0;background:#fafafa;border:1px solid #ddd;padding:6px;z-index:1}
.removefile { font-size:14px;line-height:1.2em;position:absolute;top:5px;right:5px;z-index:2;}
.filebaseinfo{ font-size:12px;font-style:italic;line-height:16px;margin:0 0 25px 0;}

.file_error {border:1px solid red;}



.wrongtypeinfo{
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:#000;
    background:rgba(0,0,0,.8);
    z-index:30;
}

.wrongtypeinfo_content {
    display:block;
  position: fixed;
  top: 50%;
  left: 50%;
 -webkit-transform:translate(-50%, -50%);
 -ms-transform:translate(-50%, -50%);
  transform: translate(-50%, -50%);
    width:90%;
    max-width:800px;
    background:#e74c3c;
    border-radius:10px;
    color:#fff;
    text-align:center;
    z-index:40;
}
.wrongtypeinfotxt {  padding:20px 0; }


a.wrongtypeinfo_close:link,a.wrongtypeinfo_close:visited,a.wrongtypeinfo_close:active { 
    border-radius:0 0 10px 10px;
    display:block;
    padding:6px;
    background:#c0392b;
    color:#eee;
}
a.wrongtypeinfo_close:hover { color:#fff;background:#d01913;}
@media only screen and (max-device-width:1024px)
{
    a.wrongtypeinfo_close:hover { color:#eee;background:#c0392b;}
    a.wrongtypeinfo_close:active { color:#fff;background:#d01913;}
}

/*
###########################################################################################
FORMULAR - CHECKBOXES / RADIOS
###########################################################################################
*/

input[type='checkbox']:active,input[type='checkbox']:hover,input[type='checkbox']:focus {background:none;}

/* remove standard-styles */
input[type='checkbox'],input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
} 


/* hide standard inputs */
input[type='checkbox']:checked,
input[type='checkbox']:not(checked),
input[type='radio']:checked,
input[type='radio']:not(checked) {
    background: transparent;
    position: absolute;
    visibility: hidden;
    margin:0;
    padding:0;
    width:1px;height:1px;
}

input[type='checkbox'] + span,input[type='radio'] + span {cursor: pointer;}



/* CHECKBOX - RADIO ON LEFT POSITION */
/* add custom inputs with ::before */
input[type='checkbox'].typeleft:checked + span::before, 
input[type='checkbox'].typeleft:not(checked) + span::before,
input[type='radio'].typeleft:checked + span::before,
input[type='radio'].typeleft:not(checked) + span::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: #fff;
    margin-right: .5em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio].typeleft:checked + span::before,input[type=radio].typeleft:not(checked) + span::before {border-radius: 30px;}

input[type='checkbox'].typeleft:hover  + span::before,
input[type='radio'].typeleft:hover  + span::before {
    background:#eee;
}
          
input[type='checkbox'].typeleft:checked  + span::before {
    background:url(../images/form-checked.png) no-repeat center center #fff;
    background-size:90%;
}

input[type='radio'].typeleft:checked  + span::before {
    background:#7A8367;
    box-shadow: inset 0 0 0 2px white;
}


@media only screen and (max-device-width: 1024px) {
        input[type='checkbox'].typeleft:hover  + span::before,
        input[type='radio'].typeleft:hover  + span::before {
          background:#fff;
        }
        input[type='checkbox'].typeleft:active  + span::before,
        input[type='radio'].typeleft:active  + span::before {
          background:#eee;
        }

        input[type='checkbox'].typeleft:checked:hover  + span::before {
            background:url(../images/form-checked.png) no-repeat center center #fff;
        }

        input[type='radio'].typeleft:checked:hover  + span::before {
          background:#7A8367;
        }

}




/* CHECKBOX - RADIO ON RIGHT POSITION */
/* add custom inputs with ::after */
input[type='checkbox'].typeright:checked + span::after, 
input[type='checkbox'].typeright:not(checked) + span::after,
input[type='radio'].typeright:checked + span::after,
input[type='radio'].typeright:not(checked) + span::after {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: #fff;
    margin-left: .5em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio].typeright:checked + span::after,input[type=radio].typeright:not(checked) + span::after {border-radius: 30px;}

input[type='checkbox'].typeright:hover  + span::after,
input[type='radio'].typeright:hover  + span::after {
    background:#eee;
}
          
input[type='checkbox'].typeright:checked  + span::after {
    background:url(../images/form-checked.png) no-repeat center center #fff;
    background-size:90%;
}

input[type='radio'].typeright:checked  + span::after {
    background:#71c3a9;
    box-shadow: inset 0 0 0 2px white;
}


@media only screen and (max-device-width: 1024px) {
        input[type='checkbox'].typeright:hover  + span::after,
        input[type='radio'].typeright:hover  + span::after {
          background:#fff;
        }
        input[type='checkbox']:active  + span::after,
        input[type='radio'].typeright:active  + span::after {
          background:#eee;
        }

        input[type='checkbox'].typeright:checked:hover  + span::after {
            background:url(../images/form-checked.png) no-repeat center center #fff;
        }

        input[type='radio'].typeright:checked:hover  + span::after {
          background:#71c3a9;
        }

}


.dsinputinfo { font-family: Roboto,Helvetica, Arial, sans-serif;background:#fff;color:#222;border: 1px solid #ddd;padding:10px;}
.gridside .dsinputinfo{font-weight:300;}
.dsinputinfo label { float:left;width:30px;line-height:0;}
.dsinputinfotxt{ float:left;width:calc(100% - 30px);font-size:.8em;line-height:1.4em;}
.dsinputerror { border: 2px solid #c0392b;}

.contact-nlinfotxt{ float:left;width:calc(100% - 30px);font-size:.8em;line-height:1.4em;}

.form_success,.form_error {font-family: Roboto,Helvetica, Arial, sans-serif;font-weight:300;}

.nlettertxt{max-width:400px;margin:0 auto;text-align:center;}
#nlForm{max-width:400px;margin:10px auto 0;text-align:left;}
.nlformwrapper{padding:15px 0 0 0;}
@media only screen and (min-width:768px)
{
    .nlettertxt{text-align:left;}
    #nlForm{margin:10px auto 0;}
    .nlformwrapper{background:#555;padding:15px;}
}

.nletteroptions {color:#222;}
.nletteroption_left { float:left; width:48%;margin:0;text-align:center;padding:10px; background:#eee;}
.nletteroption_right { float:right; width:48%;margin:0;text-align:center;padding:10px; background:#eee;}

#nlForm .dsinputinfo a:link,#nlForm .dsinputinfo a:visited,#nlForm .dsinputinfo a:active{color:#9A3334;}
#nlForm .dsinputinfo a:hover{color:#000;}
@media only screen and (max-device-width:1024px){
    #nlForm .dsinputinfo a:hover{color:#9A3334;}
    #nlForm .dsinputinfo a:active{color:#000;}
}

#nlForm .dsinputinfo{background:#eee;}

/* ################ Inputs - FOCUS */
#nlForm input[type=text]:focus,
#nlForm input[type=email]:focus
{
  outline: 0;
  background:#fff;
}

/* ################ Inputs - Allg. */
#nlForm .input {
    width:100%;
    border: none;
    background:#eee;
    color: #000;
}

#nlForm .inputerror { border:2px solid #c0392b;}

/* ################ SUBMIT - BUTTONS */
#nlForm .submitbtn { 
    border:2px solid #ddd;
    background:none;
    color:#eee;
    padding:10px;
    transition: background 300ms ease 0s;
    cursor: pointer;
}

#nlForm .submitbtn:hover,#nlForm .submitbtn:focus  { 
    background:#eee;
    border:2px solid #eee;
    color:#191919;
}

@media only screen and (max-device-width: 1024px) 
{
            #nlForm .submitbtn:hover {
               background:none;
                border:2px solid #ddd;
               color:#eee;
               transition: background 1ms ease 0s;
               }
            #nlForm .submitbtn:active {
               background:#eee;
                border:2px solid #eee;
               color:#191919;
               transition: background 1ms ease 0s;
             }
}