#feedback {
    width: 600px;
    margin-top: -250px;
    margin-left: -300px;
    position: relative;
    display: flex;
    background: #fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease 0s;
}

.form-picture {
	width: 35%;
    background: #ffc31e;
	background: linear-gradient(45deg, #fec007, #fedd01);
	background-repeat: no-repeat;
	background-position: center;	
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 50px;
    justify-content: center;
}

.popup .form-picture img {max-width: 130px;}


.form-container {
    /* width: 50%; */
    margin: 0 auto;
    color: #333;
    /*padding: 40px 50px 30px;*/
    font-size: 1.2rem;
    border-radius: 5px;
    height: 100%;
    align-items: center;
}

#feedback .form-container {border: none; border-radius: unset;}

.form-container h2 {margin-bottom: 30px;}

.form-container input, .form-container textarea {width: 100%; margin-bottom: 15px; font-size: 1.1rem; border-radius: 5px;}

input.required.not-filled, textarea.required.not-filled {border: 1px solid #f44336;}
input.required.filled, textarea.required.filled {border: 1px solid #8bc34a;}

.form-container input.submit-button {
    background: #ff4400;
    background: linear-gradient(45deg, #ff4400, #ff6933);
    border: 2px solid #cf3700;
    color: #fff;
    width: 60%;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 0;
    text-transform: uppercase;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}

.form-container input.submit-button:hover {-webkit-filter: brightness(120%);}

label.acceptance {display: flex; align-items: center; margin-bottom: 20px;}
label.acceptance input {width: 15%; margin-right: 5%; margin-bottom: 0;}
.form-container small {color: #aaa; font-size: 0.8rem; text-align: left;}
.form-container small a {color: #aaa; text-decoration: underline;}

/*label.acceptance.not-filled small, label.acceptance.not-filled small a {color: red;}*/

.submit-container {text-align: center;}

.form-container .warning {/*margin-top: -15px;*/ margin-bottom: 15px; font-size: 0.8rem; color: #f44336;}
.form-container .notice {font-size: 1rem; /*color: #f44336;*/ text-align: center; display: none;}

.radios {
    display: flex;
	margin: 0 -10px 15px;
}

.form-container .label {
    display: flex;
    margin: 0 10px 15px;
    border-radius: 5px;
    width: 100%;
    justify-content: center;
	white-space: nowrap;
}

/*.form-container .label.checked {border-color: #8bc34a;}*/

/*.form-container label input {
    width: auto;
    margin: 5px 15px 0 0;
}*/



.form-container .phone-block {
    display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

.form-container .phone-block .icon {
    background: #0064b9;
    color: #fff;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 0 0 5px;
}

.form-container .phone-block .icon i {margin: 0;}

.form-container .phone-block input {
    margin-bottom: 0;
    width: 80%;
    border-radius: 0 5px 5px 0;
    border-left: none;
	padding: 10px 30px;
}

.form-container .phone-block .warning {margin-top: 15px;}


.thanks {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99;
    font-size: 22px;
    background: #ffc31e;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    width: 500px;
    margin-left: -250px;
    margin-top: -150px;
    padding: 50px;
    text-align: center;
    display: none;
}


@media screen and (max-device-width: 1024px) { 

}

@media screen and (max-device-width: 800px) {.volumes.radios {flex-wrap: nowrap;} }

@media screen and (max-device-width: 640px) {
	#feedback {flex-wrap: wrap; width: 90%; margin: 5vh auto ; height: 90vh; overflow: hidden;}
	#feedback .form-container {width: 100%; }
	.form-picture {width: 100%; padding: 15px; max-height: 20vh;}
	.popup .form-picture img {width: auto; max-height: 100%; max-width: 75px;}
	#feedback .form-container {max-height: 80vh; overflow-x: hidden; overflow-y: scroll;}
	/*p.close {color: #fff;}*/	
	.volumes.radios {flex-wrap: wrap;}
	.form-container {padding: 30px 30px 20px;}
}

@media screen and (max-device-width: 480px) {
	.form-container {padding: 30px 0 20px;}
	.form-container input.submit-button {width: 100%;}
	.thanks {width: 320px; margin-left: -160px; padding: 25px 30px;} 	
	.form-container .phone-block input {padding: 10px 15px;}
	.mashine.radios {flex-wrap: wrap;}
	.form-container .label {justify-content: left;}
}

@media screen and (max-device-width: 380px) {
	.form-container .volumes .label {margin: 0 10px 15px;}
	.form-container .label input {margin: 5px 10px 0 0;}
}

@media screen and (max-device-width: 330px) { 
	.form-picture {padding: 5px;}
	.popup .form-picture img {max-width: 50px;}
	.mashine, .volumes {margin-bottom: 15px;}
	.form-container .volumes .label {width: 100%;}
	.form-container .phone-block .icon {width: 15%; font-size: 1rem;}
	.form-container .phone-block input {width: 85%;}
}