*,
:before,
:after {box-sizing: border-box;}

form { 
    width: 80%; 
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}

form .l_form,
form .r_form {
    width: 50%;
    padding: 0 10px;
}

form hr.sep {
  background: #fff;
  box-shadow: none;
  border: none;
  height: 2px;
  width: 100%;
  margin: 0px auto 45px auto;
}

form .emoji {font-size: 1.2em;}

.group {
    position: relative;
    width: 100%;
}

form textarea {
    resize: none;
    min-height: 170px;
}

form .group input,
form .group textarea {
    color: #0e1230;
    background: #fff;
    width: 100%;
    margin: 15px 0px;
    font-size: 17px;
    padding: 10px;
    display: block;
    border: none;
    border-radius: 0;
    margin: 35px 0;
}
.group input:focus,
.group textarea:focus {outline: none;}

.group input:focus ~ label, .group input:valid ~ label,
.group textarea:focus ~ label,
.group textarea:valid ~ label {
    top: -18px;
    font-size: 15px;
    color: #fff;
}
.group input:focus ~ .bar:before,
.group textarea:focus ~ .bar:before {
    width: 100%;
}

.group label {
    color: rgba(14,18,48,.5);
    font-size: 17px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 10px;
    -webkit-transition: 300ms ease all;
            transition: 300ms ease all;
}

.btn {
    margin: 10px 20px;
    padding: 15px 30px;
    background: #0e1230;
    border: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn.btn-submit {
    color: #fff;
    cursor: pointer;
}
.btn.btn-submit:hover:enabled {color: #b33434; background: #fff;}

.btn-box {
    text-align: center;
}



form .radiogroup {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}

form .radiogroup h6 { width: 100%; margin-top: 30px; }

form input[type=radio] {
    width: auto;
    display: inline-block;
    margin: 15px 12px;
    padding: 0;
}

form .buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}

.btn.btn-add {
    color: #b33434;
    background: #fff;
    cursor: pointer;
    padding: 10px;
    width: 170px;
    height: 60px;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
    margin: 10px 5px;
}
.btn.btn-add:hover {color: #fff; background: #0e1230;}

.btn-box {
    display: flex;
	justify-content: center;
	align-items: center;
    flex-wrap: wrap;
    align-content: space-between;
}


/************ АДАПТИВНЫЕ СТИЛИ ************/
/* ДЛЯ ЭКРАНОВ МЕНЬШЕ 1024px */
@media screen and (max-width:1023px) {
    
    form { width: 95%; margin: auto;}

}


/* ДЛЯ ЭКРАНОВ МЕНЬШЕ 768px */
@media screen and (max-width:767px) { 
    
    form { width: 100%; margin: auto;}
    .btn { padding: 13px 30px; font-size: 15px; }
    form textarea { min-height: 140px; }
    form input, form textarea { font-size: 15px; margin: 25px 0; }
    label { font-size: 15px; }
    input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~ label { font-size: 13px; }
    form .l_form, form .r_form { width: 100%; padding: 0 10px; }
    form .buttons { justify-content: center; }
    .btn.btn-add { width: 250px; }
    form .radiogroup:nth-child(1) { margin-top: 20px; }
    form .radiogroup h6 { margin-top: 20px; }
    
}