/*
Theme Name: ATCTW Styles
Theme URI: 
Author: ACE
Description: Custom wordpress theme
Version: 2.2 

*/
@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

.woocommerce button.button.alt {
  background-color: #6B6C8D;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
  transition: all 0.175s; 
  float: none !important;
}
  .woocommerce button.button.alt:hover {
    background-color: #3f4053;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.3);
    transform: translate(0, -2px); }

/*Search Form, lifted form twentytwentyone*/
:root {
	--global--spacing-horizontal: 25px;
	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
	--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
	--form--label-weight: 500;
	--global--spacing-vertical: 30px;
	--global--spacing-horizontal: 25px;
	--button--border-width: 3px;
	--button--color-text-hover: #39414d;
	--button--color-background: #39414d;
	--button--color-text: #d1e4dd;
}

@media only screen and (min-width: 482px) {

	:root {
		/*--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
		--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
		--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
		--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));*/
	}
}
@media only screen and (min-width: 822px) {

	:root {
		/*--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);*/
		/*--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);*/
	}
}
@media (min-width: 0px){
	.search-form {
		justify-content: center;
		font-size: 1rem;
		color: black;
	} 
	.search-form .search-submit {
		color: white;
	}

}
@media (min-width: 768px){
	.search-form .search-field {
		width: 100px;
		height: 20px;
		flex-grow: 0;
	}
	.search-form .search-submit {
		height: 30px;
		color: black;
	}
	.nav_menu li:last-child {
		display:block;
		
	}
	.header {
		height: 138px;
	}
	.search-form {
		justify-content: flex-end;
		font-size: .75rem;
	} 
}
@media (min-width: 56em){
	.search-form .search-field {
		width: 100px;
		height: 20px;
	}
	.search-form .search-submit {
		height: 30px;
	}
	.nav_menu li:last-child {
		display:inline-block;
	}
	.search-form {
		font-size: .75rem;
	} 
}
@media (min-width: 64em){
	.search-form .search-field {
		width: 100px;
		height: 30px;
	}
	.search-form .search-submit {
		height: 40px;
	}
	.nav_menu li:last-child {
		inline-block;
	}
	.search-form {
		font-size: 1rem;
	} 	
}
@media (min-width: 90em){
	.search-form .search-field {
		width: 175px;
		height: 30px;
	}
	.search-form .search-submit {
		height: 40px;
		color: black;
	}
	.nav_menu li:last-child {
		display:inline-block;
	}
	.search-form {
		font-size: 1rem;
	} 
}


.search-form {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width: var(--responsive--aligndefault-width);
}

.search-form > label {
	width: 100%;
	margin-bottom: 0;
	font-weight: var(--form--label-weight);
}

.search-form .search-field {
	
	max-width: inherit;
	margin-top: calc(var(--global--spacing-vertical) / 3);
	/*margin-right: calc(0.66 * var(--global--spacing-horizontal));*/

	margin-right: calc(-1 * var(--button--border-width));
	-webkit-appearance: none;
	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
	border-radius: 6px;
	border: 4px solid #6B6C8D;
}

.search-form .search-submit {
	margin-top: calc(var(--global--spacing-vertical) / 3);
	/*margin-left: 10px;*/
	
	margin-left: 0;
	background-color: transparent;
	
	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
	border-radius: 6px;
	border: 4px solid #6B6C8D;
}

 .search-form .search-submit:hover {
	background-color: #0033cc;
	color: #ffffff;
	border-color: #0033cc;
}
