/*
 * Content pages: Animation, About, Contact and Artist Submission. The copy
 * of About, Contact and Artist Submission is the page content; these rules
 * lay out its blocks (.client-list, .form-intro, .form-box).
 */

/* Animation. The 20px at the bottom matches the space the old layout left
   after the grid. */
.animation-page { position: relative; display: flex; flex-direction: row; gap: 20px; margin-top: 60px; }
.animation-page__column { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; gap: 20px; width: 100%; min-width: 0; padding: 0 30px 20px; }
.animation-page__grid { position: relative; min-width: 0; max-width: 100%; }

/* About: client lists */
.about-page { position: relative; display: flex; flex-direction: column; padding: 0 10px; }
.about-page__inner { display: flex; flex-direction: column; flex-grow: 1; gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 0; }
.client-list { position: relative; min-width: 0; max-width: 100%; font-family: "Oxygen", Sans-serif; font-weight: 400; color: var(--c-text); }

/* Contact and Artist Submission: pill heading and introduction */
.form-intro { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; margin: 60px 0 20px; padding: 0 14%; }
.form-page--submission .form-intro { margin-bottom: 0; }
.form-intro__title { position: relative; min-width: 0; max-width: 100%; padding: 10px 60px; border-radius: 30px; background-color: var(--c-primary); text-align: center; }
.form-page--submission .form-intro__title { width: 780px; max-width: 100%; padding: 10px 20px; }
.lemonade .form-intro__title h2 { margin: 0; padding: 0; font-family: "Oxygen", Sans-serif; font-weight: 700; line-height: 1; color: var(--c-white); -webkit-text-stroke-color: #000; stroke: #000; }
.form-intro__text { position: relative; min-width: 0; max-width: 100%; margin: 0 0 0 20px; text-align: center; font-family: "Oxygen", Sans-serif; font-size: 1.15rem; font-weight: 400; color: var(--c-text); }

/* Contact and Artist Submission: the form column, 800px wide */
.form-box { position: relative; display: flex; flex-direction: column; padding: 0 14%; }
.form-box__inner { display: flow-root; flex-grow: 1; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 10px 10px; }
.form-page--submission .form-box__inner { padding-top: 30px; }

@media (max-width: 767px) {
	.animation-page, .animation-page__column, .about-page__inner, .form-intro { flex-wrap: wrap; }
	.form-intro__title,
	.form-page--submission .form-intro__title { width: 80%; max-width: 80%; }
	.form-intro__text { margin: 0; padding: 0; }
	.form-box { padding: 0 4%; }
}

/* Form adjustments carried over from the old Contact and Artist Submission
   page settings, loaded before Gravity Forms' own styles as before. */
.gform-theme--foundation .gform_fields { grid-row-gap: 20px; row-gap: 20px; }
body .gform_wrapper input[type="text"], body .gform_wrapper input[type="email"], body .gform_wrapper textarea { font-size: 16px; border-radius: 6px; }
#gform_submit_button_2, #gform_submit_button_3 { background: #A1C44B; font-size: 16px; color: white; width: 100%; border-radius: 20px; font-weight: bold; }
#gform_browse_button_2_6, #gform_browse_button_3_6, #gform_browse_button_4_6 { background: #A1C44B; font-size: 16px; color: white; border-radius: 6px; font-weight: bold; text-transform: uppercase; }