/* INTERACTIVE POPOVER */

/* Default position is .bottom-right so it is not specified here */
#popover {
	background: #ffffff;
	color: #231f20;
	display: block;
	font-size: 90%;
	line-height: 1.5em;
	padding: 1.5em 4em;
	position: fixed; top: auto; right: auto; bottom: 0.667em; left: 100%;
	max-width: 50%;
	z-index: 5;
}
#popover.open {
	border: 1px solid rgba(0,0,0,0.1);
	border-right: none;
	border-radius: 0;
	border-bottom-left-radius: 4px;
	box-shadow: 0 0 20px -8px rgba(0,0,0,0.25);
	top: auto; right: 0; bottom: 0.667em; left: auto;
}

#popover.bottom-left {
	top: auto; right: 100%; bottom: 0.667em; left: auto;
}
#popover.bottom-left.open {
	border: 1px solid rgba(0,0,0,0.1);
	border-left: none;
	border-radius: 0;
	border-bottom-right-radius: 4px;
	top: auto; right: auto; bottom: 0.667em; left: 0;
}

#popover.bottom-center {
	padding: 1.5em;
	top: 100%; right: 25%; bottom: auto; left: 25%;
}
#popover.bottom-center.open {
	border: 1px solid rgba(0,0,0,0.1);
	border-bottom: none;
	border-radius: 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	top: auto; right: 25%; bottom: 0; left: 25%;
}

#popover.middle-left {
	top: 50%; right: 100%; bottom: auto; left: auto;
	transform: translateY(-50%);
}
#popover.middle-left.open {
	border: 1px solid rgba(0,0,0,0.1);
	border-left: none;
	border-radius: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	top: 50%; right: auto; bottom: auto; left: 0;
}

#popover.middle-right {
	top: 50%; right: auto; bottom: auto; left: 100%;
	transform: translateY(-50%);
}
#popover.middle-right.open {
	border: 1px solid rgba(0,0,0,0.1);
	border-right: none;
	border-radius: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	top: 50%; right: 0; bottom: auto; left: auto;
}

#popover_wrapper, #popover.modal { display: none; }

#popover_wrapper.open {
	background: rgba(0,0,0,0.5);
	display: block;
	max-width: 100%;
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 5;
}

#popover_wrapper.modal_wrapper.open > .close {
	background: #231f20 url('../images/ui/lightbox_close.svg') center center no-repeat;
	background-size: 24px 24px;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 100%;
	cursor: pointer;
	float: none;
	height: 44px;
	margin: 0;
	overflow: hidden;
	position: fixed; top: 12.5%; right: calc(20% - 22px);
	text-indent: 999px;
	width: 44px;
	z-index: 4;
}

	#popover.modal.open {
		background: #ffffff;
		border: 1px solid rgba(0,0,0,0.5);
		border-radius: 4px;
		display: block;
		max-width: 60%;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 1.5em;
		position: fixed; top: 25%; left: 50%;
		transform: translate(-50%, -12.5%);
		width: 60%;
		z-index: 3;
	}

	#popover p:last-child { margin: 0; }

	#popover > .close {
		cursor: pointer;
		float: right;
		font-size: 200%;
		margin-top: -0.25em;
		margin-right: -1.5em;
	}
	#popover.bottom-left > .close {
	}
	#popover.bottom-center > .close {
		margin-right: 0;
	}
	#popover.middle-left > .close {
	}
	#popover.middle-right > .close {
	}
	
	#popover > .toggle {
		background: #ffffff;
		border: 1px solid rgba(0,0,0,0.1);
		border-right: 0;
		border-radius: 0;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		cursor: pointer;
		height: 44px;
		position: absolute; top: -1px; right: 100%; bottom: auto; left: auto;
	}

	#popover > .toggle:not(.with_header_text)::before {
		background: transparent url('../images/ui/toggle_closed.svg') center center no-repeat;
		background-size: 18px 18px;
		content: '';
		display: block;
		height: 44px;
		position: absolute; top: 0; left: 0;
		transition: transform 0.25s ease;
		transform: scaleX(-1);
		transform-origin: 50% 50%;
		width: 44px;
	}
	#popover.open > .toggle:not(.with_header_text)::before {
		transform: scaleX(1);
	}

	#popover.bottom-left > .toggle {
		border: 1px solid rgba(0,0,0,0.1);
		border-left: 0;
		border-radius: 0;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		right: auto; left: 100%;
	}
	#popover.bottom-left > .toggle:not(.with_header_text)::before {
		right: 0; left: auto;
		transform: scaleX(1);
	}
	#popover.bottom-left.open > .toggle:not(.with_header_text)::before {
		transform: scaleX(-1);
	}
			
	#popover.bottom-center > .toggle {
		border: 1px solid rgba(0,0,0,0.1);
		border-bottom: none;
		border-radius: 0;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		top: auto; right: 50%; bottom: 100%; left: auto;
		transform: translateX(50%);
	}
	#popover.bottom-center > .toggle:not(.with_header_text)::before {
		transform: rotate(90deg) scaleX(-1);
	}
	#popover.bottom-center.open > .toggle:not(.with_header_text)::before {
		transform: rotate(90deg) scaleX(1);
	}
			
	#popover.middle-left > .toggle {
		border: 1px solid rgba(0,0,0,0.1);
		border-left: 0;
		border-radius: 0;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		top: 50%; right: auto; left: 100%;
		transform: translateY(-50%);
	}
	#popover.middle-left > .toggle:not(.with_header_text)::before {
	}
	#popover.middle-left.open > .toggle:not(.with_header_text)::before {
	}
			
	#popover.middle-right > .toggle {
		top: 50%; right: 100%; left: auto;
		transform: translateY(-50%);
	}
	#popover.middle-right > .toggle:not(.with_header_text)::before {
	}
	#popover.middle-right.open > .toggle:not(.with_header_text)::before {
	}
			
	#popover > .toggle.with_header_text {
		white-space: nowrap;
		width: auto;
	}
	
		#popover > .toggle.with_header_text > h4 {
			line-height: 44px;
			margin: 0 0.5em;
		}

		#popover.bottom-left > .toggle.with_header_text,
		#popover.middle-left > .toggle.with_header_text,
		#popover.bottom-right > .toggle.with_header_text,
		#popover.middle-right > .toggle.with_header_text
		{
			border: 1px solid rgba(0,0,0,0.1);
			border-bottom: 0;
			border-radius: 0;
			border-top-right-radius: 4px;
			border-top-left-radius: 4px;
		}
		#popover.bottom-left > .toggle.with_header_text {
			transform: rotate(90deg) translate(0, -100%);
			transform-origin: left top;
		}
		#popover.middle-left > .toggle.with_header_text {
			transform: rotate(90deg) translate(-50%, -100%);
			transform-origin: left top;
		}
		#popover.bottom-right > .toggle.with_header_text {
			transform: rotate(-90deg) translate(0, -100%);
			transform-origin: right top;
		}
		#popover.middle-right > .toggle.with_header_text {
			transform: rotate(-90deg) translate(50%, -100%);
			transform-origin: right top;
		}
		
	#popover > h3 {
		clear: none;
		font-size: 150%;
		margin: 0 0 0.333em 0;
	}

	#popover *:not(.gform_wrapper) > form { margin: 0; }

		#popover *:not(.gform_wrapper) > form * {
			display: inline-block;
			vertical-align: middle;
		}

		#popover *:not(.gform_wrapper) > form input:not([type=submit]) {
			background: #ffffff;
			border-radius: 0;
			color: #555555;
			font-size: 80% !important;
			height: 2.333em !important;
			line-height: 2.333em !important;
			margin-bottom: 0.5em;
			padding: 0 0.667em;
			width: 200px;
		}
		#popover *:not(.gform_wrapper) > form input:not([type=submit]):focus { color: #231f20; }

		#popover *:not(.gform_wrapper) > form input[type=submit] {
			background: #2980b9;
			color: #ffffff !important;
			cursor: pointer;
			font-size: 80% !important;
			height: 2.333em !important;
			line-height: 2.333em !important;
			margin-bottom: 0.5em;
			margin-left: 1em;
			padding: 0 0.667em;
		}
		#popover *:not(.gform_wrapper) > form input[type=submit]:hover {
			background: #3498db;
			color: #ffffff !important;
		}


/* CSS3 MEDIA QUERIES */

/* LARGE SCREENS (content area over 1600 pixels) */
@media screen and (min-width: 1600px) {

	#popover {
		max-width: 40%;
	}
	#popover.bottom-center {
		right: 30%; left: 30%;
	}

}


/* SMALLER COMPUTERS (content area under 1200 pixels) */
@media screen and (max-width: 1200px) {

	#popover {
		max-width: 60%;
	}
	#popover.bottom-center {
		right: 20%; left: 20%;
	}

}


/* TABLETS (content area under 1024 pixels) */
@media screen and (max-width: 1024px) {

	#popover {
		max-width: 80%;
	}
	#popover.bottom-center {
		right: 10%; left: 10%;
	}

}


/* NON-PHONES (content area over 783px) */
@media screen and (min-width: 783px) {

	#popover[data-breakpoint="phone"] { display: none !important; }

}


/* PHONES (content area under 782 pixels) */
@media screen and (max-width: 782px) {


	#popover[data-breakpoint="desktop"] { display: none !important; }

	#popover, #popover.bottom-center {
		font-size: 80%;
		top: 100%; right: 0; bottom: auto; left: 0;
		max-width: calc(100% - 44px);
	}
	#popover.open, #popover.bottom-center.open {
		border: none;
		border-top: 1px solid rgba(0,0,0,0.1);
		border-radius: 0;
		top: auto; right: 0; bottom: 0; left: 0;
	}
	#popover.bottom-center.open {
		right: 22px; left: 22px;
	}

	#popover > .toggle {
		border: 1px solid rgba(0,0,0,0.1);
		border-bottom: none;
		border-radius: 0;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		opacity: 0.5;
		top: auto; right: calc(50% - 23px); bottom: 100%; left: calc(50% - 23px);
	}
	#popover > .toggle::before {
		transform: rotate(90deg) scaleX(-1);
	}
	#popover.open > .toggle::before {
		transform: rotate(90deg) scaleX(1);
	}

	#popover.modal.open {
		max-width: 80%;
		position: fixed; top: 15%; left: 50%;
		transform: translate(-50%, -7.5%);
		width: 80%;
	}
	
	#popover > .toggle:hover { opacity: 1; }

}


/* MEDIUM PHONES (content area under 640 pixels) */
/*
@media screen and (max-width: 640px) {

}
*/


/* SMALL PHONES (content area under 480 pixels) */
/*
@media screen and (max-width: 480px) {

}
*/