/* Tabs */
#bates_tab_group {
	font-weight: 700;
	font-size: 1.1em;
	overflow: auto;
	margin: .5em auto 0;
	list-style-type: none !important;

	li {
		margin: 0;
		padding: 0;
		&:before {
			display: none;
		}
	}

	a.bates_tab {
		display: block;
		padding: .7em; 
		text-align: center;
		background: hsla(0,0%,50%,.1);
		border-bottom: 0;
	}
	a.bates_tab:hover {
		background: hsla(0,0%,50%,.2);
	}

	a.bates_tab_on,
	a.bates_tab_on:hover 
	{
		background: hsl(350, 75%, 29%);
		color: hsl(0,0%,100%);
		border-radius: 4px 4px 0 0;
	}

	/* hide the p that Wordpress adds after the ul element.  */
	& + p {
		display: none;
	}

	@media(min-width:550px) {
		display: flex;
		justify-content: flex-start;

		a.bates_tab {
			margin-left: 1em;
		}
	}

}

.bates_tab_area {
	background: hsla(0,0%,100%,.7);
	border: 3px solid hsl(350, 78%, 30%);
	/* // display: none; */
	padding: 0 1em 1em;
	border-radius: 4px;
	overflow: auto;
}



/***
 * Columns (Grid System)
 *
 * We can't just put the .with-gutter style on section.column at the very beginning, because
 * we only want the gutter to apply once the column is no longer at full width.
 */
 .columns-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
 
	&.reverse {
		flex-direction: row-reverse;
	}
 
	& > p:empty {
		display:none;
	}
 
	.column {
		width: 100%;
		box-sizing: border-box;
		* { box-sizing: border-box; }
	}
 
	 & > .columns-wrap.column-1-50 > .column:nth-of-type(1) , 
	 & > .columns-wrap.column-2-50 > .column:nth-of-type(2) 
	 {
		width: 50%;
	}
 
	@media(min-width: 550px){
 
		&.all-25 > .column ,
		&.x4-columns.autosize > .column ,
		&.all-50 > .column ,
		&.x2-columns.autosize > .column
		{
			width: 50%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.all-33 > .column ,
		&.x3-columns.autosize > .column 
		{
			width: 33.33%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
		
		&.column-1-33 > .column:nth-of-type(1) ,
		&.column-2-33 > .column:nth-of-type(2) ,
		&.column-3-33 > .column:nth-of-type(3)
		{
			width: 33.33%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.column-1-40 > .column:nth-of-type(1) ,
		&.column-2-40 > .column:nth-of-type(2) ,
		&.column-3-40 > .column:nth-of-type(3) ,
		&.column-4-40 > .column:nth-of-type(3)
		{
			width: 40%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.column-1-25 > .column:nth-of-type(1) ,
		&.column-2-25 > .column:nth-of-type(2) ,
		&.column-3-25 > .column:nth-of-type(3) ,
		&.column-4-25 > .column:nth-of-type(4) ,
 
		&.column-1-50 > .column:nth-of-type(1) ,
		&.column-2-50 > .column:nth-of-type(2) ,
 
		&.column-1-75 > .column:nth-of-type(1) ,
		&.column-2-75 > .column:nth-of-type(2)
		{
			width: 50%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.column-1-60 > .column:nth-of-type(1) ,
		&.column-2-60 > .column:nth-of-type(2) ,
		&.column-3-60 > .column:nth-of-type(3)
		{
			width: 60%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.column-1-66 > .column:nth-of-type(1) ,
		&.column-2-66 > .column:nth-of-type(2)
		{
			width: 66.66%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
	}
 
	@media(min-width: 800px){
 
		&.all-20 > .column ,
		&.x5-columns.autosize > .column ,
		&.column-1-20 > .column:nth-of-type(1) ,
		&.column-2-20 > .column:nth-of-type(2) ,
		&.column-3-20 > .column:nth-of-type(3) ,
		&.column-4-20 > .column:nth-of-type(4) ,
		&.column-5-20 > .column:nth-of-type(5)
		{
			width: 20%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.all-25 > .column ,
		&.x4-columns.autosize > .column ,
		&.column-1-25 > .column:nth-of-type(1) ,
		&.column-2-25 > .column:nth-of-type(2) ,
		&.column-3-25 > .column:nth-of-type(3) ,
		&.column-4-25 > .column:nth-of-type(4)
		{
			width: 25%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.column-1-75 > .column:nth-of-type(1) ,
		&.column-2-75 > .column:nth-of-type(2)
		{
			width: 75%;
 
			&.with-gutter {
				padding-right:1em;
			}
		}
 
		&.column-1-80 > .column:nth-of-type(1) ,
		&.column-2-80 > .column:nth-of-type(2)
		{
			width: 80%;
 
			&.with-gutter {
				padding-right:1em;
			}
		} 
	}
}
 


 /** 
 * Future Students Module
 */
.future-students-module-3 {
	--button-color: var(--colorGarnet);
	--overlay-percentage: .35;

	background-color: hsl(0 0% 0% / var(--overlay-percentage));
	background-image: url('i/future-students-module/241022_Campus_1948.jpg');
	background-size: cover;
	background-position: center bottom;
	background-blend-mode: darken;
	padding-block: 5em;


	.wrapper {
		/* this should be in the main wrappers ruleset, but it's not */
		padding-inline: 4%;

		display: grid;
		gap: 3em;
	}

	h1 {
		color: white;
		font-size: 2.75rem;
		text-align: center;
		margin-bottom: 0;
	}

	a {
		padding: 1.1em 1.5em;
		background: var(--button-color);
		color: white;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center; /* yes, need both */
		line-height: 1.25;
		font-weight: 300;
		font-size: 1.1rem;
		text-wrap: balance;
		transition: color .3s, text .3s;

		&:hover {
			background: white;
			color: var(--button-color)
		}
	}

	._links {
		display: grid;
		grid-template-columns: repeat( 2, min(180px, 45%) );
		gap: 1.5em;
		box-sizing: border-box;
		justify-items: stretch;
	}

	._featured-links {
		margin-top: 2rem;

		a {
			background: white;
			color: black;
			font-weight: 500;

			&:hover {
				background: var(--button-color);
				color: white;
			}
		}
	}

	@media (min-width: 800px) {
		padding-block: 200px 120px;

		h1 {
			text-align: left;
		}

		.wrapper {
			grid-template-columns: 40% 60%;
			align-items: end;
		}

		._links {
			grid-template-columns: repeat( 2, min(280px, 45%) );
		}

		a {
			padding: 1.25em 2em;
		}
	}
}



/**
 * Give Module
 */
@keyframes giftAnimate {
	0% {
		fill: hsl(350, 43%, 42%);
	}
	9% {
		fill: hsl(0,80%,82%);
	}
	15% {
		fill: hsl(50,80%,75%);
	}
	28% {
		fill: hsl(80,69%,69%);
	}
	50% {
		fill: hsl(169,69%,69%);
	}
	75% {
		fill: hsl(220,100%,86%);
	}
}

.give-now-module {

	background-color: hsl(90, 20%, 92%);
	background-image: linear-gradient(150deg, hsl(90,20%,92%), hsl(90,20%,81%));
	border: 1px solid hsl(93,34%,82%);
	padding: 1rem;
	position: relative;

	* {
		position: relative;
	}

	&.give-now-transparent-bg {
		background-color: transparent;
		background-image: none;
		border: none;
		border-top: 1px solid hsl(0,0%,85%);
		border-bottom: 1px solid hsl(0,0%,85%);
		padding: 1em 0;
		margin: 1em 0;
	}

	svg.gift-box-svg {
		position: absolute;
		height: 1.9em;
		width: 1.9em;
		right: 1em;
		top: 12px;
		fill: hsl(350, 43%, 42%);
		transition: transform .25s ease-in-out;
		z-index: 50;
		/* // animation: giftAnimate 20s infinite linear; */
	}

	.give-now-module-header {
		font-size: 1.3em;
		font-weight: 800;
		color: hsl(0,0%,40%);
		margin: 0;
		padding: 0 0 1em;
		z-index: 50;

		svg.gift-box-svg {
			height: 1.1em;
			margin-right: .5em;
			position: relative;
			right: auto;
			top: 0;
			vertical-align: text-top;
			width: 1.1em;
			display: inline-block;
		}
	}

	.give-now-buttons {
		display: flex;
		justify-content: space-between;
	}
	
	.give-now-button {
		display: block;
		margin: 0 0 .5em;
		border: none;
		transition: transform .2s, opacity .2s, filter .3s, border-radius .2s;
		/* // transform: perspective(100px) translateZ(0); */
		z-index: 50;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top left;

		&:hover {
			/* // cancel standard <a> hover effect */
			border: none; 
		}

		&.unhover {
			/* // transform: perspective(100px) translateZ(-5px); */
			/* // opacity: .7; */
			filter: saturate(0) contrast(45%) brightness(200%);
			border-color: transparent;
		}
		&.hover {
			/* // transform: perspective(100px) translateZ(5px); */
			filter: saturate(1) contrast(100%) brightness(100%);
		}
	}

	&.give-now-module-icons {

		background: var(--colorBlue_dark);
		border: none;
		border-top: 4px solid var(--colorBlue_bright);

		.give-now-module-header {
			color: var(--colorGray_light);
		}

		.give-now-module-header svg {
			display: none;
		}

		svg.gift-box-svg {
			fill: hsl(0,0%,75%);
		}

		&:hover svg.gift-box-svg {
			animation: giftAnimate 3s infinite linear;
		}

		.give-now-button {
			background-color: hsl(0,0%,70%);
			border-radius: 55px;
			height: 55px;
			width: 55px;
			filter: saturate(.5) contrast(90%) brightness(138%);

			&.hover {
				border-radius: 3px;
				background-color: white;
				box-shadow: 1px 1px 2px hsla(0,0%,50%,.2);
				filter: saturate(1) contrast(100%) brightness(100%);
			}
			&.unhover {
				filter: saturate(0) contrast(45%) brightness(200%);
			}
		}
		.give-now-button-amazon {
			background-image: url('i/give/amazon-sm.png');
			border: 1px solid hsl(0,0%,65%)

		}
		.give-now-button-paypal {
			background-image: url('i/give/paypal-sm.png');
			border: 1px solid hsl(0,0%,65%);
		}
		.give-now-button-facebook {
			background-image: url('i/give/facebook-sm.png');
		}
		.give-now-button-inhouse {
			background-image: url('i/give/bates-sm.png');
		}
		.give-now-button-givecampus {
			background-image: url('i/give/givecampus-sm.png');
		}
	}

	&.give-now-module-full {

		& > .gift-box-svg {
			display: none;
		}

		svg.gift-box-svg {
			fill: hsl(100, 0%, 40%);
		}

		.give-now-buttons {
			flex-wrap: wrap;
		}
		.give-now-button {
			width: 100%;
			height: 50px;
			margin-bottom: 1em;
			background-position: left bottom;
			transform: perspective(100px) translateZ(0);
			transform-origin: 25% center; 

			&.hover {
				transform: perspective(100px) translateZ(3px);
			}
		}
		.give-now-button-amazon {
			background-image: url('i/give/amazon-full.png');
			background-size: auto 72%;
		}
		.give-now-button-paypal {
			background-image: url('i/give/paypal-full.png');
			background-size: auto 78%;
		}
		.give-now-button-facebook {
			background-image: url('i/give/facebook-full.png');
			background-size: auto 80%;
		}
		.give-now-button-inhouse {
			background-image: url('i/give/bates-full.png');
			background-size: auto 95%;
		}
		.give-now-button-givecampus {
			background-image: url('i/give/givecampus-full.png');
			background-size: auto 51%; 
		}

		@media(min-width: 550px){
			.give-now-button {
				width: 50%;
			}
		}
	}

}

.tooltip-js.tooltip-js-givenow {
	background: hsl(0, 0%, 95%);
	color: #000;
}

footer aside.give-now-module.give-now-module {
	margin-top: 2em;
	border: none;
	background: transparent;

	& > .gift-box-svg {
		display: none;
	}
	.give-now-module-header svg {
		display: inline-block;
	}

	svg.gift-box-svg {
		fill: hsl(0,0%,69%);
	}

	&.give-now-transparent-bg:hover svg.gift-box-svg {
		path {
			stroke-width: 0;
		}
	}

	.give-now-module-header {
		color: hsl(0,0%,100%);
	}

	.give-now-buttons {
		justify-content: space-around;
	}

	.give-now-button {
		border: none;
	}

	@media(min-width: 550px){

		.give-now-buttons {
			display: grid;
			grid-template-columns: repeat(4, min-content);
			gap: 1.5em;
			justify-content: flex-start;
		}
		.give-now-button {
			margin: 0;
		}
	}
}

@keyframes fadeOutModal {
	0% {
		opacity: 1;
		display: flex;
	}
	100% {
		opacity: 0;
		display: flex;
	}
}
@keyframes fadeInModal {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.give-module-modal {
	align-items: center;
	background-color: hsla(0,0%,0%,.8);
	border-radius: 2px;
	box-sizing: border-box;
	display: none;
	height: 100vh;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity .4s;
	width: 100vw;
	z-index: 100;

	.modal-content {
		background: hsl(0,0%,97%);
		padding: 1.5em;
		box-shadow: 0 0 20px hsla(0,0%,0%,.8);
		max-width: 500px;
		max-height: 90vh;
	}

	&.js-active {
		display: flex;
		animation: fadeInModal .4s forwards;
	}
	&.js-inactive {
		display: flex;
		animation: fadeOutModal .4s;
	}

	.modal-content:empty, 
	.modal-content-inner-widget-emptyIsLoading:empty
	{

		min-height: 50px;
		min-width: 50px;

		&:before {
			--size: 36px;
			border-radius: var(--size);
			border: 5px solid hsl(0,0%,80%);
			border-top-color: transparent;
			box-sizing: border-box;
			content: '';
			display:block;
			height: var(--size);
			left: calc(50% - ( var(--size) / 2 ) );
			position: absolute;
			top: calc(50% - ( var(--size) / 2 ) );
			width: var(--size);
			animation: spinner infinite linear .8s;
		}
	}

	div.ap-dw-container input.ap-dw-optional-input {
		padding: 0;
	}
	div.ap-light div.ap-dw-main {
		border: none;
	}
	div.ap-dw-container li {
		padding-left: 0;

		&:before {
			content: '';
		}
	}
}