

#contactform {padding-top:min(100px, 10%);padding-bottom:min(100px, 10%); background:url(images/horizont.jpg) center center no-repeat; background-size:cover; color:#fff;
& .cfs {align-items: center; max-width:1528px;}
& input {font-size: 16px; padding: 8px 9px; border:0; border-radius: 5px;height: 38px;}
& label {line-height: 16px; padding:0 20px; font-size: 14px; display: none;}
& .form-group {display: flex;flex-wrap: wrap; margin-bottom: 10px; align-items: center; opacity:0; transform: translate(0, 20px);transition: all .4s ease;}
& .form-group.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
& .form-group input {flex: 1 1 auto;}
& .form-group label {width: 140px; padding: 0 10px; text-align: left;}
& .item {flex:1 1 400px; text-align: center; padding:0 20px;}
& .form-group2 {font-family: sans-serif; font-weight: 400;}
& textarea {height: 150px; flex:1; padding: 5px; font-size: 16px; line-height: 22px; border:0; border-radius: 9px;font-family: sans-serif;}
& button {width: 170px; border: 0; padding: 11px 0; background: #439ac9; color: #fff; letter-spacing: .5px; font-size: 16px; cursor: pointer; transition: all .3s ease; border-radius: 8px;}
& button:hover {scale:1.2; transition: all .3s ease;}
& .form-group3 {display: flex;margin: 7px 0 22px; justify-content: space-between; align-items: center;flex-wrap: wrap; opacity:0; transform: translate(0, 20px);transition: all .4s ease;
    & input {height: 38px; margin-top: 20px;}
    & label {flex:1; padding:0 10px 0 0; text-align: left;}
    & div {margin-top: 40px; width: 100%;}
}
& .form-group3.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
}

@media screen and (width < 1000px) {
    #contactform {background:url(images/horizont_small.jpg) center center no-repeat; background-size:cover;}
}



#danke {background:url(images/horizont.jpg) center center no-repeat; background-size:cover;        
& .cfs {height: 100vh;  align-items: center; display: flex; justify-content: center;font-family: sans-serif; font-size: 20px;}
& .item {text-align: center;}
& p {color: #fff; font-size:20px;}
& .button {display: inline-block; text-decoration: none; margin:30px 0 0; background: #fff; color:#000000; padding:7px 40px; font-weight: 400; transition: all .3s ease; border-radius: 40px;}
& .button:hover {scale:1.2; box-shadow: 0px 8px 16px rgba(0,0,0,.2); transition: all .3s ease;}
}



@media screen and (max-width:600px) {
    #danke {background:url(images/horizont_small.jpg) center center no-repeat; background-size:cover;}
    #contactform {
    & .form-group label {width: 100%;}
    & .form-group label {padding:0; margin:10px 0 5px; }
    & .item {padding:0;}
    & .cfs {width: 100%;}
    & .form-group3 label {width: 100%; text-align: right; flex:1 1 200px;}
    & .form-group3 input {margin:13px auto; flex:1 1 200px;}
    & textarea {margin-top:20px;}
    & .item {text-align: center;}
    }
}
@media screen and (max-width:444px) {
    #contactform {
    & .form-group3 label {text-align: center;}
     }
}
