@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------
    UA Online Responsive CSS
    Version 1.0 - September 27, 2021

    TABLE OF CONTENTS
    
    DESKTOP
		> 1320px
		> 1170px
		> 730px
		> 580px
		> 545px
    
---------------------------------------------------------- */

/* SCREENS < 1320px */

@media only screen and (max-width: 1320px) {
	
	/* 01 = BASE STYLES
	---------------------------------------------------------- */

	p {
		font-size: 18px;
	}
	
	/* 04 = LAYOUT
	---------------------------------------------------------- */
	
	.global-width {
		width: 90%;
	}
	
	.section-width {
		width: 95%;
	}
	
	/* 07 = CONTENT STYLES
	---------------------------------------------------------- */
	
	#hero-01 {
		background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("https://online.ua.edu/landing/_images/hero-01-resp-1.jpg");
	}
	
	.padded-multiline h1 {
		line-height: 1.550;
		text-transform: uppercase;
		font-size: 48px;
	}

	.padded-multiline h2 {
		line-height: 1.6;
		font-size: 36px;
		margin: 0;
	}

	.padded-multiline p {
		line-height: 1.5;
	}
	
	/* 08 = FORM STYLES
	---------------------------------------------------------- */
	
	.slate-form {
		width: 100%;
		float: left;
	}
	
	.slate-form input {
		height: 40px;
		font-size: 18px;
	}

	.slate-form textarea {
		height: 40px;
		font-size: 18px;
	}

	.slate-form select {
		height: 40px;
		font-size: 18px;
	}
	
}

/* SCREENS < 1170px */

@media only screen and (max-width: 1170px) {
	
	/* 02 = BUTTONS
	---------------------------------------------------------- */
	
	.button {
		float: none;
		width: 97%;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.button-text {
		font-size: 36px;
	}
	
	/* 04 = LAYOUT
	---------------------------------------------------------- */

	.global-width {
		width: 90%;
	}
	
	/* 05 = HEADER STYLES
    ---------------------------------------------------------- */
	
	.logo_wrap {
		text-align: center;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.logo img {
		border: none;
		float: none;
		height: auto;
		width: 100%;
		padding-bottom: 10px;
		margin-right: 500px;
	}
	
	.logo-phone-number {
		width: 60%;
		float: none;
		font-size: 24px;
	}
	
	.logo-phone-number img {
		height: 30px;
	}
	
	/* 07 = CONTENT STYLES
	---------------------------------------------------------- */
	
	.hero-01-overlay-wrapper {
		float: left;
		width: 100%;
	}
	
	.padded-multiline {
		text-align: left;
	}
	
	.padded-multiline h1 {
		font-size: 72px;
		line-height: 1.5;
	}
	
	.padded-multiline h2 {
		font-size: 56px;
		line-height: 1.5;
	}
	
	.padded-multiline p {
		line-height: 1.390;
		font-size: 24px;
		padding-left: 0;
	}
	
	.padded-multiline-section-horizontal-center h2 {
		font-size: 56px;
		line-height: 1.5;
	}
	
	.padded-multiline-section-horizontal-center h3 {
		line-height: 1.6;
	}
	
	.padded-multiline-section-horizontal-center-1 h2 {
		font-size: 56px;
		line-height: 1.5;
	}
	
	.padded-multiline-section-horizontal-center-1 h3 {
		line-height: 1.6;
	}
	
	.padded-multiline-section-horizontal-center-2 h2 {
		font-size: 56px;
		line-height: 1.6;
	}
	
	.padded-multiline-section-horizontal-center-2 h3 {
		line-height: 1.6;
	}	
	
	.section-why-choose-left {
		float: none;
		width: 100%;
	}

	.section-why-choose-right {
		float: none;
		width: 100%;
	}
	
	#section-why-choose img {
		display: none;
	}
	
	#section-why-choose h2 {
		font-size: 30px;
	}

	#section-why-choose p {
		line-height: 18px;
	}
	
	.padded-multiline-section-horizontal-center-3 h2 {
		font-size: 56px;
		line-height: 1.6;
	}
	
	.padded-multiline-section-horizontal-center-3 h3 {
		line-height: 1.6;
	}
	
	.padded-multiline-section-horizontal-center-4 h2 {
		font-size: 56px;
		line-height: 1.5;
	}
	
	.padded-multiline-section-horizontal-center-4 h3 {
		line-height: 1.6;
	}
	
	.grant-container {
  		grid-template-columns: auto;
  	}
	
	.grant-container h3 {
		font-size: 42px;
	}
	
	.grant-container p {
		font-size: 32px;
	}
	
	.padded-multiline-section-horizontal-center-5 h2 {
		font-size: 56px;
		line-height: 1.5;
	}
	
	.padded-multiline-section-horizontal-center-5 h3 {
		line-height: 1.6;
	}
	
	.ranking-logo img {
		width: 30%;
	}
	
	/* 08 = FORM STYLES
	---------------------------------------------------------- */
	
	.slate-form input {
		height: 90px;
		font-size: 35px;
		margin-top: 10px;
		padding-left: 20px;
	}

	.slate-form textarea {
		height: 90px;
		font-size: 35px;
	}

	.slate-form select {
		height: 90px;
		font-size: 35px;
		padding-left: 15px;
	}
	
	/* Mobile Phone Number Fields - Some mobile phone fields have different IDs
	---------------------------------------------------------- */

	.slate-form .form_question_21afd8f5-25c9-402b-9067-95dfdff0a803 {
		margin-left: 20px;
	}
	
	.slate-form .form_question_fe04f61e-a7f1-4529-a5f6-3b7a039bb37f {
		margin-left: 20px;
	}
	
	/* End Mobile Phone Number Fields
	---------------------------------------------------------- */
	
	.slate-form #form_cfc9cbae-b517-47ee-af87-99e790e88a79_country {
		margin-top: 10px; 
	}
	
	.slate-form #form_cfc9cbae-b517-47ee-af87-99e790e88a79_region {
		margin-top: 10px;
		padding-left: 10px;
	}
	
	.slate-form #form_cfc9cbae-b517-47ee-af87-99e790e88a79_postal {
		margin-bottom: 12px;
	}
	
	/* Military Status Dropdown
	---------------------------------------------------------- */
	
	.slate-form #form_4ce32ffb-7fca-4df6-8593-505d41527332 {
		margin-bottom: 12px;
	}
	
	/* End Military Status Dropdown
	---------------------------------------------------------- */
	
	.form_question[data-required="1"] .form_responses::before {
		font-size: 40px;
		color: #ffffff;
		padding-right: 5px;
	}
	
	.action button {
		font-size: 36px;
		width: 95%;
	}
	
	/* 09 = FOOTER STYLES
	---------------------------------------------------------- */

	#footer {
		padding-bottom: 40%;
	}
	
	#footer-left {
		width: 100%;
	}
	
	#footer-right {
		width: 100%;
		margin-top: 5%;
	}
	
	#footer-right img {
		float: left;
		width: 90%;
		height: auto;
	}
	
	#footer-left p {
		font-size: 28px;
	}
	
	.footer ul li {
		font-size: 28px;
	}
	
	.footer ul li:after {
		font-size: 20px;
	}
	
}

/* SCREENS < 730px */

@media only screen and (max-width: 730px) {
	
	/* 03 = BUTTONS
	---------------------------------------------------------- */
	
	.button-text {
		font-size: 24px;
	}
	
	/* 07 = CONTENT STYLES
	---------------------------------------------------------- */
	
	.logo-phone-number {
		font-size: 20px;
	}
	
	.padded-multiline h1 {
		font-size: 40px;
	}
	
	.padded-multiline h2 {
		font-size: 26px;
		line-height: 1.7;
	}
	
	.padded-multiline p {
		font-size: 15px;
	}
	
	.padded-multiline-section-horizontal-center h2 {
		font-size: 36px;
		line-height: 1.55;
	}
	
	.padded-multiline-section-horizontal-center-1 h2 {
		font-size: 36px;
		line-height: 1.55;
	}
	
	.padded-multiline-section-horizontal-center-2 h2 {
		font-size: 36px;
		line-height: 1.55;
	}
	
	.padded-multiline-section-horizontal-center-3 h2 {
		font-size: 36px;
		line-height: 1.55;
	}
	
	.padded-multiline-section-horizontal-center-4 h2 {
		font-size: 36px;
		line-height: 1.55;
	}
	
	.padded-multiline-section-horizontal-center-5 h2 {
		font-size: 36px;
		line-height: 1.55;
	}
	
	/* 08 = FORM STYLES
	---------------------------------------------------------- */

	.slate-form select {
		padding-left: 15px;
	}
	
	.action button {
		width: 95.5%;
		margin-top: 5px;
	}
	
	/* 09 = FOOTER STYLES
	---------------------------------------------------------- */
	
	#footer-left p {
		font-size: 20px;
	}
	
	.footer ul li {
		font-size: 20px;
	}
	
	.footer ul li:after {
		font-size: 16px;
	}
	
}

/* SCREENS < 580px */

@media only screen and (max-width: 580px) {
	
	/* 05 = HEADER STYLES
	---------------------------------------------------------- */

	.logo_wrap {
		margin: 0;
		padding-right: 10px;
		padding-left: 10px;
	}
	
	.logo-phone-number img {
		height: 18px;
	}
	
	/* 07 = CONTENT STYLES
	---------------------------------------------------------- */
	
	.hero-01-overlay-wrapper {
		width: 97%;
	}
	
	.padded-multiline span { 
		padding-left: 0.4rem;
		padding-right: 0.4rem;
	}
	
	.padded-multiline h1 {
		font-size: 36px;
		line-height: 1.6;
	}
	
	.padded-multiline h2 {
		font-size: 28px;
		line-height: 1.75;
	}
	
	.padded-multiline p {
		font-size: 14px;
		line-height: 1.75;
	}
	
	.grant-container h3 {
		font-size: 28px;
	}
	
	.grant-container p {
		font-size: 16px;
	}
	
	/* 08 = FORM STYLES
	---------------------------------------------------------- */
	
	.slate-form input {
		height: 40px;
		font-size: 18px;
		width: 85%;
		padding-left: 7px;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.slate-form textarea {
		height: 40px;
		font-size: 18px;
		width: 85%;
		padding-left: 7px;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.slate-form select {
		height: 40px;
		font-size: 18px;
		width: 85%;
		padding-left: 5px;
		margin-top: 0;
		margin-bottom: 10px;
	}
	
	/* Mobile Phone Number Field
	---------------------------------------------------------- */
	
	.slate-form .form_question_21afd8f5-25c9-402b-9067-95dfdff0a803 {
		margin-left: 14px;
	}
	
	/* End Mobile Phone Number Field
	---------------------------------------------------------- */
	
	.slate-form #form_cfc9cbae-b517-47ee-af87-99e790e88a79_country {
		margin-top: 1px;
		padding-left: 3px;
	}
	
	.slate-form form_cfc9cbae-b517-47ee-af87-99e790e88a79_city {
		margin-top: 4px;
		padding-left: 1px;
	}
	
	.slate-form #form_cfc9cbae-b517-47ee-af87-99e790e88a79_region {
		margin-top: 3px;
		padding-left: 3px;
	}
	
	.slate-form #form_cfc9cbae-b517-47ee-af87-99e790e88a79_postal {
		margin-top: 5px;
		padding-left: 3px;
	}
	
	/* Military Status Dropdown
	---------------------------------------------------------- */
	
	.slate-form #form_4ce32ffb-7fca-4df6-8593-505d41527332 {
		padding-left: 3px;
	}
	
	/* End Military Status Dropdown
	---------------------------------------------------------- */
	
	/* Military Branch Dropdown
	---------------------------------------------------------- */
	
	.slate-form #form_498d4d00-f3b2-492e-8e00-6b53cdb7b52c {
		padding-left: 3px;
	}
	
	/* End Military Branch Dropdown
	---------------------------------------------------------- */
	
	.form_question[data-required="1"] .form_responses::before {
		font-size: 24px;
		margin-top: 5px;
	}
	
	.action button {
		font-size: 24px;
	}
	
}

/* SCREENS < 545px */

@media only screen and (max-width: 545px) {
	
	/* 09 = FOOTER STYLES
	---------------------------------------------------------- */
	
	#footer {
		padding-bottom: 100%;
	}
	
	#footer-right img {
		width: 100%;
	}
	
}