
.modalSearch {background-color: #fff; position: fixed; top: 0; right: 0; left: 0; max-width: 840px; display: none; border-radius: 8px;
	box-sizing: border-box; margin: 200px auto 0 auto; z-index: 11;
}
.modalSearch.redcodeVisible {animation: modalVisible .5s ease;}

	.modalSearch form {padding: 25px 27px 25px 45px; display: flex; justify-content: space-between; align-items: center;}
		.modalSearch input[type="text"] {border: none; font-size: 30px; background: transparent; width: 85%; padding: 0;}
		.modalSearch input[type="submit"] {background-image: url('images/search.svg'); height: 70px; width: 70px; padding: 0; cursor: pointer;
			border: none; border-radius: 50%; background-position: center; background-repeat: no-repeat; -webkit-appearance: none;
		}

.searchCross {width: 43px; height: 43px; cursor: pointer; border-radius: 50%; border: 2px solid #FFF; box-sizing: border-box;
	position: absolute; top: 0; right: -63px;
}
	.searchCross:before, .searchCross:after {position: absolute; content: ''; width: 18px; height: 2px; background: #fff; margin: -1px 0 0 -9px;
		left: 50%; top: 50%;
	}
	.searchCross:before {transform: rotate(45deg);}
	.searchCross:after {transform: rotate(-45deg);}
	.searchCross span {font-size: 9px; color: #fff; text-transform: uppercase; bottom: -21px; position: absolute; left: -2px;}


.modalSearch input[type="text"]::-webkit-input-placeholder       {color: #B2B2B2;}
.modalSearch input[type="text"]::-moz-placeholder                {color: #B2B2B2;}
.modalSearch input[type="text"]:-moz-placeholder                 {color: #B2B2B2;}
.modalSearch input[type="text"]:-ms-input-placeholder            {color: #B2B2B2;}
/*
.modalSearch input[type="text"]:focus::-webkit-input-placeholder {opacity: 0; transition: opacity .3s ease;}
.modalSearch input[type="text"]:focus::-moz-placeholder          {opacity: 0; transition: opacity .3s ease;}
.modalSearch input[type="text"]:focus:-moz-placeholder           {opacity: 0; transition: opacity .3s ease;}
.modalSearch input[type="text"]:focus:-ms-input-placeholder      {opacity: 0; transition: opacity .3s ease;}	
*/
	
@media all and (max-width: 1050px) {
	.modalSearch {max-width: 90%; margin: 200px 50px 0 50px;}
		.searchCross {top: -60px; right: -1px;}
			.searchCross span {display: none;}
}

@media all and (max-width: 780px) {
	.modalSearch input[type="text"] {font-size: 23px;}
	.modalSearch input[type="submit"] {background-size: 21px; width: 50px; height: 50px;}
}

@media all and (max-width: 620px) {
	.modalSearch {max-width: none; margin: 150px 20px 0 20px;}
	.modalSearch form {padding: 15px 15px 15px 30px;}
		.modalSearch input[type="text"] {font-size: 20px; width: 82%;}
	.searchCross {top: -50px; width: 35px; height: 35px;}
	.searchCross:before, .searchCross:after {width: 15px; margin: -1px 0 0 -7.1px;}
	.searchCross span {left: -8px;}\
}

@media all and (max-width: 450px) {
	.modalSearch form {padding: 10px 10px 10px 20px;}
		.modalSearch input[type="text"] {font-size: 18px;}
		.modalSearch input[type="submit"] {background-size: 18px; width: 40px; height: 40px;}
}