.app-title {
	padding: 1rem 0;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

#sulo-help {
	.page-container {
		background: $dashboard-background;
	}
	.row {
		&.sulo-help-sections {
			// max-width: $dashboard-content-width;
		}
		&.expanded {
			.photo-container {
				.photo.cover {
					padding-top: 40%;
					@include breakpoint(medium) {
						padding-top: 25%;
					}
				}
				.overlay {
					background: rgba($sulo-color, 0.25);
				}
			}
		}
	}
	.callout {
		&:not(.small) {
			padding: $global-padding;
			@include breakpoint(medium) {
				padding: 2rem;
			}
		}
		:first-child {
			margin-top: 0;
		}
		&.still-questions {
			margin-top: 2rem;
			background: transparent;
		}
	}
	.callout.help-menu {
		padding: $global-padding 0;
		ul {
			margin: 0;
			li {
				font-weight: $global-weight-bold;
			}
		}
	}
	

	.row .column.sulo-help-section {
		transition: transform .25s ease-in-out;
		&:hover {
			transform: scale(1.1);
		}
		a {
			text-align: center;
			h3 {
				margin: 0;
			}
			.callout {
				padding: $global-padding;
				margin: $global-margin;
			}
		}
	}
	.help-items {
		.header {
			font-size: 120%;
			letter-spacing: 1px;
			color: $body-font-color;
			h3 {
				font-weight: $global-weight-bold;
				margin: $global-margin 0;
			}
		}
		section {
			border-bottom: $global-border-secondary;
			&:last-child {
				// border-bottom: none;
			}
			margin: 0;
			overflow: hidden;
			.help-item-content {
				// transform: scale(1,0);
				// transform-origin: 0 0;
				// transition: transform .25s ease-in-out, height 0s ease-in-out .5s,;
				overflow-y: hidden;
				height: 0;
			}

		}
		section.is-active {
			.help-item-content {
				// transition: transform .25s ease-in-out, height 0s ease-in-out;
				// transform: scale(1,1);
				height: auto;
			}
		}
	}
	h1 { 
		margin-top: 2rem;
		small {
			font-weight: $global-weight-normal;
			text-transform: none;
		}
	}

	h2 {
		// margin-top: 2rem;
		margin: 0;
		margin-top: 4rem;
		font-weight: normal;
		color: $dark-gray;
		// text-transform: none;

	}
	h3 {
		text-transform: none;
		// color: $dark-gray;
		font-weight: $global-weight-normal;
		margin-top: 2rem;
	}
	h4 {
		font-weight: $global-weight-bold;
		.icon {
			margin-right: 0.5rem;
		}
	}
	ol {
		margin-left: 3rem;
	}
	ul.nested {
		margin-left: 2rem;
	}
	strong {
		font-weight: bold;
	}
	#sulo-navbar {
		// position: absolute;
		input {
			display: none;
			margin: 0 0.5rem;
			max-width: 20rem;
		}
		.top-bar-left {
			margin-right: 1rem;
			ul {
				li:last-child {
					flex: 1 0 auto;
					padding: 0 1rem;
					input {
						max-width: 100%;
						margin: 0;
					}
					// border-right: $global-border;
				}
			}
		}
	}

	// .callout {
	// 	@include breakpoint(large) {
	// 		padding: 2.5rem;
	// 	}
	// 	.callout {
	// 		padding: 1rem;
	// 	}
	// }

	.callout a, p a {
		color: map-get($foundation-palette, sulo-dark);
		&:hover {
			text-decoration: underline;
		}
	}
	.callout label {
		@include breakpoint(medium) {
			text-align: right;
		}
	}
	.callout input {
		cursor: default;
		background: $white; 
	}

	section {
		margin-bottom: 3rem;
	}
}