.feedback-form {
	position: fixed;
	top: 0;
	right: -1000px;
	transition: right .25s linear;

	height: 100%;
	width: 500px;

	z-index: 1001;
}

.feedback-form::before {

	content: '';
    position: absolute;
    left: calc(-80% + 0px);
    height: 200%;
    width: 80%;
    background-image: url(/wp-content/themes/twentyseventeen/assets/img/feedback_border.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;

}

.feedback-background {
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -100;
}

.feedback-background-active {
	z-index: 100;
	backdrop-filter: blur(2px);
}

.feedback-background-keyboard-open {
	background-color: #2C346E;
}

.feedback-form-active {
	right: 0;
	/*box-shadow: -1px 0px 6px 1px black;*/
}

.feedback-form .form-container {
	position: absolute;
	right: 0;
	transition: right 0.2s linear;

	height: 100%;

	padding: 16px;
	background-color: #2C346E;
}

.feedback-form-active .form-container { right: 0; }

.feedback-form .form-container > button {
	width: 40px;
    height: 40px;
    
    background-image: url(/wp-content/themes/twentyseventeen/assets/img/close_btn.png);
    background-size: cover;
    background-color: inherit;
    
    padding: 0;
    border: 0;
}

.feedback-form .form-container > button {
	cursor: pointer;
}

.feedback-form .form-container form {
	padding: 40px;
	color: white;
}

.feedback-form .form-container form input[type="text"] {
	margin-top: 8px !important;
	background-color: #4C548D;
	padding: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	border: 0;
	width: 100%;
	/* color: #BDBABA; */
	color: white;
	font-family: "OpenSans-Light", sans-serif;
	/* text-transform: uppercase; */
}

.feedback-form .form-container form input[type="text"]:first-of-type { margin-top: 32px; }
/* .feedback-form .form-container form input[type="text"]:last-of-type { margin-bottom: 16px; } */

.feedback-form .form-container form input::placeholder {
	color: #BDBABA;
	font-family: "OpenSans-Light", sans-serif;
	text-transform: uppercase;
}

.feedback-form .form-container form .checkbox-group label * {
	display: inline;
}

input[type="checkbox"] {
	width: 16px;
	height: 16px;
	background-color: #4C548D;
}

.feedback-form .form-container form .button-group { 
	text-align: center;
	margin-top: 32px;
}	

@media screen and (max-width: 768px)
{
	.feedback-form::before { display: none; }

}


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

	.feedback-form { width: 100%; }

}

@media screen and (max-width: 425px)
{
	.feedback-background-active { backdrop-filter: blur(0px);  }
}

@media screen and (max-width: 375px)
{
	.feedback-form .form-container form { 
		padding-top: 40px;
	    padding-left: 8px;
	    padding-right: 8px;
	    color: white;
	}
}