/***DESKTOP STYLE***/

/*** FORMS
*****************************************************/
form, input, submit {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	display: block;
}
input::placeholder {
	color: var(--textColor) !important;
}
input:hover::placeholder {
	color: var(--hoverColor) !important;
}
*:focus, input:focus{
    outline: none;
}
.modal_grid {
	width: calc(100vw - var(--colGutter)*2);
	position: fixed;
	top: 50vh;
	left: var(--colGutter);
	transform: translateY(-50%);
	display: grid;
	grid-template-columns: var(--twelveGrid);
	grid-gap: 0 calc(var(--innerGridGutter)*2);
}
.modal {
	position: relative;
	grid-column: 4 / 10;
	padding: var(--innerGridGutter);
	background: var(--paletteWhite);
	box-sizing: border-box;
	margin-left: calc(var(--borderWeight)*-1);
}
.modal h2 {
	margin-top: var(--innerGridGutter);
    font-family: "AMA Regular";
    font-size: var(--largeFontAMA);
    text-transform: lowercase;
    line-height: var(--lineHeightAMA);
}
.modal img.close_modal {
	height: var(--rowGutter);
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--innerGridGutter);
	cursor: pointer;
}
.x_lines:before {
	content: "";
    position: absolute;
    left: 0;
    top: calc(var(--innerGridGutter)*-1);
    width: calc(100% + var(--innerGridGutter)*2);
    height: var(--borderWeight);
    background-image: var(--borderLineX);
    background-size: var(--borderSixLinesX);
}
.x_lines:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: calc(var(--innerGridGutter)*-1);
    width: calc(100% + var(--innerGridGutter)*2);
    height: var(--borderWeight);
    background-image: var(--borderLineX);
    background-size: var(--borderSixLinesX);
}
.y_lines:before {
	content: "";
    position: absolute;
    left: calc(var(--innerGridGutter)*-1);
    bottom: 0;
    width: var(--borderWeight);
	height: calc(100% + var(--innerGridGutter)*2);
    background-image: var(--borderLineY);
    background-size: var(--borderTwoLinesY);
}
.y_lines:after {
	content: "";
    position: absolute;
    right: calc(var(--innerGridGutter)*-1);
    bottom: 0;
    width: var(--borderWeight);
	height: calc(100% + var(--innerGridGutter)*2);
    background-image: var(--borderLineY);
    background-size: var(--borderTwoLinesY);
}

/*** CONTACT ***/
a.contact {
	cursor: pointer;
}
a.contact.active {
	color: var(--hoverColor);
}
.modal_grid.contact {
	opacity: 0;
	z-index: -1;
	transition: opacity var(--transitionDuration);
	pointer-events: none;
}
.modal_grid.contact a {
	margin: var(--rowGutter) 0;
    display: block;
}
.modal_grid.contact.open {
	opacity: 1;
	z-index: 300;
	pointer-events: auto;
}

/*** SIGN UP ***/
form.form_stack {
	margin-top: var(--rowGutter);
}
input#from,
input#subject {
	display: none;
}
input[type="submit"] {
	margin-top: var(--rowGutter);
	margin-left: 50%;
    transform: translateX(-50%);
	background: transparent;
	text-align: center;
	cursor: pointer;
	color: var(--linkColor) !important;
}
input[type="submit"]:hover {
	color: var(--hoverColor) !important;
}

/*** NEWSLETTER ***/
a.newsletter {
	cursor: pointer;
}
a.newsletter.active {
	color: var(--hoverColor);
}
.modal_grid.newsletter {
	opacity: 0;
	z-index: -1;
	transition: opacity var(--transitionDuration);
	pointer-events: none;
}
.modal_grid.newsletter.open {
	opacity: 1;
	z-index: 300;
	pointer-events: auto;
}
/*
body.home .modal_grid.newsletter.open {
	z-index: 300;
}
*/
/*** SEARCH ***/
a.search {
	cursor: pointer;
}
a.search.active {
	color: var(--hoverColor);
}
.modal_grid.search {
	opacity: 0;
	z-index: -1;
	transition: opacity var(--transitionDuration);
	pointer-events: none;
}
.modal_grid.search.open {
	opacity: 1;
	z-index: 300;
	pointer-events: auto;
}
/*
body.home .modal_grid.search.open {
	z-index: 300;
}
*/
/*** SEARCH RESULTS ***/
.stack_grid.results,
.stack_grid.no_results {
	display: grid;
	grid-template-columns: var(--fourGrid);
	grid-gap: var(--gridGap);
}

/*** RESPONSIVE STYLE
*****************************************************/
@media (max-width:1024px) {
/***tablet (horizontal)***/

}
@media (max-width:820px) {
/***tablet (vertical)***/
	.modal_grid {
		display: inline;
		grid-template-columns: var(--oneGrid);
	}
	.stack_grid.results,
	.stack_grid.no_results {
		grid-template-columns: var(--twoGrid);
	}
}
@media (max-width:600px) {
/***mobile***/
	.stack_grid.results,
	.stack_grid.no_results {
		grid-template-columns: var(--oneGrid);
	}
	.x_lines:before {
		background-size: var(--borderThreeLinesX);
	}
	.x_lines:after {
		background-size: var(--borderThreeLinesX);
	}
	
}