/* ==========================================================================
   Project:     Albany State University -  Landing Page
   Date:        04/19/2024 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Typograpy
========================================================================== */

body {font-family: "Nunito Sans", sans-serif;font-optical-sizing: auto;background:#FAFAFA}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Nunito Sans", sans-serif; font-weight: 700;font-optical-sizing: auto;line-height:1.35}

/* ==========================================================================
     Main Layout
========================================================================== */

html {scroll-behavior: smooth;overflow-x:hidden;}

header {border-bottom: 10px solid #FFD700;height: 60px}
header .logo {position: absolute; z-index: 1; top: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%)}
header .social { position: absolute; top: 55px; z-index: 1}
header .social a {color: #000}

footer a {color: #fff}
footer a:hover, footer a:focus {color:#FFD700}

/* ==========================================================================
     Components
========================================================================== */

/* Images */
img {max-width: 100%;}
.img-white {filter: brightness(0) invert(1);}

/* Heros */
.hero {position: relative;}
.hero::after {content:""; position: absolute; bottom: 0px; z-index: 1; left: 0px; width: 100%;height: 400px; background:linear-gradient(0deg, rgba(0,34,106,1) 10%, rgba(0,34,106,0) 100%); }
.img-hero {object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 0; object-position: 50% 0%;}

/* Backgrounds */
.bg-blue {background: #0033A0}
.bg-dark-blue {background: #00226A}
.bg-yellow {background: #FFD700;}
.bg-logomark {background: url(/img/albany-state-university-logomark-blue.svg) center top no-repeat; background-size: contain}
.bg-student {background: url(/img/bg-student.webp) center center no-repeat; background-size: cover; position: relative;}
.bg-student::after {content:""; z-index: -1; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;background:linear-gradient(90deg, rgba(0,34,106,1) 10%, rgba(0,34,106,0) 100%);}
.bg-graduates {background: url(/img/asu-programs.webp) center top no-repeat; background-size: cover; position: relative;}
.bg-graduates::after {content:""; z-index: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;background: rgba(0,34,106,.75)}
.bg-graduates .container {position: relative; z-index: 1}

/* Text */
.text-blue {color: #0033A0}
.text-yellow {color: #FFD700}
.text-grey {color: #D1D2D3}
.text-extrabold {font-weight: 800}
.leading-tight {line-height: 1.2}
.text-shadow {text-shadow:0px 0px 10px rgba(0,0,0,1)}

/* Borders */
.border-bottom-yellow {border-bottom: 2px solid #FFD700}

/* Forms */
#form label {font-weight: 600; font-size: .875rem}
#form button[type="submit"] {margin-bottom: -70px}

/* Buttons */
.btn-yellow, .btn-white { text-decoration:none;padding: 7.5px 20px; transition: all 250ms ease; border-radius: 4px; text-align:center;  border: none; font-family: "Nunito Sans", sans-serif;  font-optical-sizing: auto; font-weight:700; line-height: 1}

.btn-yellow { background: #FFD700;color:#0033A0}
.btn-yellow:hover, .btn-yellow:focus {background: #fff; color: #0033A0;}

.btn-white {background: #fff; color: #000}
.btn-white:hover, .btn-white:focus {background: #FFD700; color: #000}

.btn-lg {font-size: 1.125rem; padding: 10px 35px}

/* Socials */
.social img {margin: -1.5px 0px 1.5px 0px}

/* Indices */
.z-0 {z-index: 0}
.z-1 {z-index: 1}
.z-2 {z-index: 2}

/* Tabs */
.nav[role="tablist"] button {background: #FFF2AC; margin: 0px 5px;}
.nav[role="tablist"] button.active {background: #FFD700;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);}
.nav[role="tablist"] button:active, .nav[role="tablist"] button:focus {outline:none}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Header */
     .logo {width: 215px}
     header .social {right: 15px; }
     .img-hero {object-position: 30% 50% !important;}

     /* Forms */
     .form-group {margin-bottom: .5rem}
     #google_recaptcha {transform:scale(0.925);transform-origin:0 0;}

     /* Tabs */
     .nav[role="tablist"] button {width: 100%}
}

@media (min-width: 576px) {	
     /* Tabs */
     .nav[role="tablist"] button {padding: 5px 20px; }
}

@media (min-width: 768px) {	
     /* Header */
     .logo {width: 400px}
     header .social {right: 50px; }


     /* Forms */
     .form-group {margin-bottom: 1rem}

     /* Tabs */
     .nav[role="tablist"] li {background: #FFF2AC;}
     .nav[role="tablist"] button {width: auto; padding: 5px 40px}
}

@media (min-width: 992px) {
     /* Forms */
     #google_recaptcha {transform:scale(1);transform-origin:0 0;}
     
     /* Borders */
     .border-lg-right-grey {border-right: 1px solid #D1D2D3}
}

@media (prefers-reduced-motion: reduce) {
     * { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}