/* Base search bar styling */
/* Standardize format of the search bar's submit button for mobile devices */
input {
	/* -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; */
	opacity: 1;
}
  
input[type="text"] {
	height: 40px;
}
  
::placeholder {
	color: #000;
	padding-left: 6px;
}
  
input[type="submit"] {
	display: inline-block;
	height: 39px;
	border-radius: 0 4px 4px 0;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box; 
	/* padding-left: 100px; 
	padding-right: 100px;  */
	/* this needs to be here also, to show up on mobile for some reason */
}
/* End of standardized formatting of submit button for mobile devices */

.searchForm {
	display: flex;
	text-align: center;
}

.search {
	margin-left: auto;
    margin-right: auto;
}

.search label {
	display: none;
	visibility:hidden;
}

.search input[type="text"] {
	border-radius: 4px 0 0 4px;
	border-color: #add8e6; /* sky blue */
	color: #000;
	border-width: 2px;
	padding-top: 0px;
	padding-bottom: 2px;
	background-color: #fff;
	-webkit-flex: 1;
	flex: 1;
}	

.search input[type="submit"] {
	margin-left: -8px;
	border-radius: 0 4px 4px 0;
	padding: 0px 10px 36px 10px; /* aligns submit button to search bar */
	color: #fff; /*set default color to white */
	background-color: #e5302d; /*changed default background color to red */
	border-color: #add8e6; /* sky blue */
	border-width: 2px;
	-webkit-flex: 1;
	flex: 1;
}

.search input[type="submit"]:hover {
	color: #000; /*changed default color to black */
	background-color: #fff; /*changed default background color to white */
	border-color: #006699; /*changed default border color to dark company blue */
	-webkit-flex: 1;
	flex: 1;
}

.search input[type="submit"]:active {
	color: #fff; /*changed default color to white */
	background-color: #87ceeb; /*changed default background color to sky blue */
	border-color: #e5302d; /*changed default border color to red */
	-webkit-flex: 1;
	flex: 1;
}
/* End Base search bar styling */
@media (max-width: 290.98px) {
.search {
	padding-left: 30px;
	padding-right: 30px;
}
}

@media (min-width: 291px) and (max-width: 324.98px) {
.search {
	padding-left: 55px;
	padding-right: 55px;
}
}

@media (min-width: 325px) and (max-width: 354.98px) {
.search {
	padding-left: 75px;
	padding-right: 75px;
}
}

@media (min-width: 355px) and (max-width: 375.98px) {
.search {
	padding-left: 80px;
	padding-right: 80px;
}
}

@media (min-width: 376px) and (max-width: 455.98px) {
.search {
	padding-left: 100px;
	padding-right: 100px;
}
}

@media (max-width: 455.98px) {
.search input[type="text"], 
.search input[type="submit"] {
	border-radius: 4px;
}

.search input[type="submit"] {
	margin-left: 0px;
}
}

@media (min-width: 400px) {
.search input[type="text"] {
	width: 200px;
}
}

@media (max-width: 527.98px) {
.search {
	margin-bottom: 5px;
}
}

@media (min-width: 528px) and (max-width: 1040px) {
.search {
	margin-bottom: 15px;
}
}

@media (min-width: 1041px) {
.search {
	padding-top: 110px;
}

::placeholder {
	color: #fff;
}

.search input[type="text"], .search input[type="submit"] {
	border-color: #000;
}	

.search input[type="text"] {
	color: #fff;
	border-width: 2px;
	background-color: #000;
	animation-name: glow;
	animation-duration: 4s;
	-moz-animation-name: glow;
	-moz-animation-duration: 4s;
	-webkit-animation-name: glow;
	-webkit-animation-duration: 4s;
	box-shadow: inset 0 0 10px rgb(255,255,255,1);
}

@keyframes glow {
	from {box-shadow: none;}
	to {box-shadow: inset 0 0 10px rgb(255,255,255,1);}
}

@-moz-keyframes glow {
	from {box-shadow: none;}
	to {box-shadow: inset 0 0 10px rgb(255,255,255,1);}
}

@-webkit-keyframes glow {
	from {box-shadow: none;}
	to {box-shadow: inset 0 0 10px rgb(255,255,255,1);}
}

.search input[type="submit"] {
	animation-name: glowButton;
	animation-duration: 4s;
	background-color: #e5302d; /*changed default background color to red */
}

@keyframes glowButton {
	from {background-color: #000;}
	to {background-color: #e5302d;}
}
}

@media (min-width: 1200px) and (max-width: 1300px) {
.search input[type="submit"] {
	padding-top: 0.5px;
	padding-bottom: 35px;
}
}

@media (min-width: 1301px) {
.search input[type="submit"] {
	padding-bottom: 36.5px;
}
}