@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
   color: #69697b !important;
  font-size: 19px;
  line-height: 1.667em;
  font-weight: 400;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
font-family: 'Roboto', sans-serif;
	color: #0b0b2c;
}
h1.page-title{
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 24px !important;
    font-weight: 700;
    color: #0b0b2c;
    font-size: 60px;
    line-height: 1.133em;
    margin-bottom: 4rem;
}

h2 {
    margin-top: 0px;
    margin-bottom: 40px;
    color: #0b0b2c;
    font-size: 40px;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.01em;
}
h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #0b0b2c;
    font-size: 23px;
    line-height: 1.36em;
    font-weight: 600;
    letter-spacing: 0.01em;
	font-style: inherit;
}
h3.mega-menu-title {
    margin: 10px 0px 10px 20px;
}

a {
  -webkit-transition: color 350ms ease;
  transition: color 350ms ease;
  color: #024e80;
  text-decoration: none;
}

a:hover {
  color: #0a2697;
}

#mainpage .page-content {padding: 0;}

.header-section {
    padding: 0 2rem;
}

@media (min-width: 992px) {
.header-section {
    padding: 0;
}
}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;

  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#navbar-header{display:none;}
.hero-lg .carousel-inner {
    max-height: 700px!important;
}
.carousel-caption .h2 {
    color: #fafafa;
    font-size: 6.5rem !important;
    position: relative;
    line-height: 0.9em;
    font-weight: 900 !important;
    letter-spacing: 0.01em;
    margin-top: -4.6rem;
    text-shadow: 10px 10px 5px rgb(11 11 44 / 22%);
}
.carousel-caption {
    background-image: linear-gradient(117deg, #024e80, #3e789e)!important;
	box-shadow: 17px 17px 0 0 #35e300;
}

@media (min-width: 960px) {
.carousel-caption {
	top: 20% !important;
    width: 400px !important;
}
.carousel-caption, .carousel-caption.text-left {
    left: 6rem !important;
}}

.carousel-caption p {
    font-size: 24px !important;
    line-height: 1.75rem;
    color: #f5f7ff;
    font-weight: 700;
	padding-top:1 rem;
}
p.captiontext {
    color: #fff;
    font-size: 17px !important;
    line-height: 1.4em;
    font-weight: 400;
    padding-top: 1rem;
}
@media (min-width: 768px) {
#menu-programs{
    position: absolute;
    z-index: 1000;
    width: 700px;
    right: 70px;
    top: 5.5rem;
}}

.main-content {
    padding: 0;
}
.featured-bg-container, .featured-bg-fullwidth-container {
    background: #024e80;
      color: #eee;
    background: linear-gradient(45deg, #024e80a8 25%, rgb(93 115 167 / 30%) 25%, rgb(25 75 128 / 67%) 90%, rgb(40 83 143 / 56%) 90%), linear-gradient(-45deg, rgb(15 49 82 / 11%) 30%, rgb(61 113 149 / 51%) 30%, #0a274e4a 60%, rgb(31 43 120 / 62%) 60%, #22456c99 60%);
    background-color: #024e80;
	margin-bottom: 0;
}

.question-wrapper {
    margin-right: auto;
    margin-left: auto;
    padding: 40px;
    border-radius: 40px !important;
    background-color: hsla(0, 0%, 100%, 0.65);
	margin-top: 3rem;
    margin-bottom: 3rem;
}
.question-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-width: 100%;
    margin: -60px auto 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border-radius: 60px !important;
    background-color: #fff;
    box-shadow: 1px 1px 15px -6px rgb(0 0 0 / 53%);
}
.question-block .fa-solid, .fas {
    font-size: 3rem;
	color: #3c8bce;
}
@media (min-width: 768px) { 
.question-container {
    max-width: 80%;
}
.question-block .fa-solid, .fas {
    font-size: 4rem;
}}
.question-block {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    border-left: 8px none #0b0b2c;
    color: #000;
    font-size: 28px;
    font-weight: 700;
	width: 100%;
}
.ou-component-simple-card, .ou-component-image-card {
    box-shadow: 0 20px 34px 0 rgb(0 0 0 / 10%), 0 10px 34px 0 rgb(0 0 0 / 5%);
    -webkit-transition: box-shadow 350ms ease, -webkit-transform 350ms ease;
    transition: box-shadow 350ms ease, -webkit-transform 350ms ease;
    transition: transform 350ms ease, box-shadow 350ms ease;
    transition: transform 350ms ease, box-shadow 350ms ease, -webkit-transform 350ms ease;
	border-radius: 20px !important;
}
.ou-component-simple-card .card, .ou-component-image-card .card {
 border-radius: 20px !important;
padding:20px;
	border: 0;
}
.ou-component-simple-card .card-title.h3 {
    font-size: 25px;
    padding: 0;
    line-height: 1.36em;
    letter-spacing: 0.01em;
    font-weight: 700;
    font-family: inherit;
    color: #0b0b2c !important;
}
.ou-component-image-card .card-image {
    width: 80%;
    margin: auto;
}
.ou-component-image-card .card-body {
    padding: 0;
}
.options-container {
    padding-bottom: 2rem;
}
.transition-border:hover,
.customtransition-border:hover{
    -webkit-box-shadow: inset 0 0 0 10px #d9e4e6;
    box-shadow: inset 0 0 0 5px #184d80;
    transition: 0.5s;
}
.customtransition-border {
	border-radius: 1rem !important;
}
.btn-outline-secondary {
    color: #024e80;
    border-color: #3e789e;
    border-radius: 20px !important;
    font-size: 18px !important;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #024e80;
    border-color: transparent;
}

.institution-section .ou-component-simple-card .card-title.h3  {
    display: none;
}
.institution-section .ou-component-simple-card p.card-text{
	margin-bottom:0;
}

.student-feedback-section,
.menu-section {
	padding: 4rem 0;
}
.student-feedback-section .carousel-container {
    background-color: #fff;
    box-shadow: 0 10px 34px 0 rgb(0 0 0 / 5%), 0 20px 34px 0 rgb(0 0 0 / 10%);
	border-radius: 20px !important;
}
.student-feedback-section .carousel-container .carousel-item {
    border-radius: 20px !important;
}
.student-feedback-section .carousel-inner {
    padding: 2rem 1rem 1rem 1rem;
    line-height: 1.5rem;
    font-size: 16px;
}

.content-wrapper {
    padding: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 24px !important;
    background-color: #fff;
    box-shadow: 0 -4px 20px 0 rgb(11 11 44 / 4%), 0 40px 44px 0 rgb(0 0 0 / 6%);
}
.mega-menu-link {
    display: block;
    padding: 10px 20px;;
    border-radius: 10px;
    -webkit-transition: background-color 350ms ease, color 350ms ease;
    transition: background-color 350ms ease, color 350ms ease;
    color: #69697b;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none !important;
    white-space: normal;
}
.mega-menu-link.w--current {
    color: #024e80;
    font-weight: 600;
}
.mega-menu-link:hover {
    background-color: #f5f7ff;
    color: #024e80;
}
.social-media{
    width: 200px;
    text-align: center;
}
.social-media a:after {
    content: "" !important;
}
.social-media a:link, .social-media a:visited {
    color: #646464;
}
.social-media a:hover{
	color: #024e80;
}

.home-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 20px;
    padding: 7px 0 0 12px;
    border-radius: 40px !important;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 38%);
    -webkit-transition: color 350ms ease, -webkit-transform 350ms ease;
    transition: color 350ms ease, -webkit-transform 350ms ease;
    transition: transform 350ms ease, color 350ms ease;
    transition: transform 350ms ease, color 350ms ease, -webkit-transform 350ms ease;
}
.home-icon:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
/* secondary pages */

.page-header {
    padding-bottom: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #ccc;
}
.breadcrumb {
	font-size: 1rem;
}

.page-header .h2, .page-header h2 {
    display: none;
}
.page-content {
    padding: 40px 0 40px;
}

.header-section {
    padding-bottom: 40px;
}
#secondary .page-content h1{
	margin-bottom: 30px;
    font-size: 70px;
    line-height: 1em;
    font-weight: 700;
    letter-spacing: 0.01em;
}
@media (min-width: 992px) {
  #secondary .page-content h1{
    font-size: 90px;
}
 .page-content {
    padding: 64 0 40px;
}
.breadcrumb {
    padding-right: 2.5rem !important;
}
}

#secondary h1.page-title {
	display: none;
}

.image-courses {
    border-radius: 30px !important;
    box-shadow: 0 14px 54px 0 rgb(7 7 7 / 8%), 0 14px 74px 0 rgb(0 0 0 / 7%);
}

.featured-bg-container.light {
    background: #cfcfdb;
}
/* card program */
.program-card {
    border-radius: 20px !important;
    background-color: #fff;
    box-shadow: 0 20px 34px 0 rgb(0 0 0 / 10%), 0 10px 34px 0 rgb(0 0 0 / 5%);
    -webkit-transition: box-shadow 350ms ease, -webkit-transform 350ms ease;
    transition: box-shadow 350ms ease, -webkit-transform 350ms ease;
    transition: transform 350ms ease, box-shadow 350ms ease;
    transition: transform 350ms ease, box-shadow 350ms ease, -webkit-transform 350ms ease;
	color: #4e4e65;
    font-size: 16px;
    display: inline-flex;
	margin: 0rem 1rem 1rem 0;
}
@media (min-width: 768px) {
	#programs .program-card {
		width: 48%;
	}
}

@media (min-width: 992px) {
	#programs .program-card {
		width: 30%;
	}
}
 
.institution-flag {
    position: absolute;
    left: auto;
    top: 0%;
    right: 0%;
    bottom: auto;
    height: 50px;
    padding-right: 40px;
    padding-left: 40px;
    border-radius: 0px 16px 0 8px !important;
    background-color: #024e80;
}

.card.program-card.UAA, .card.program-card.uaa {
    border: #00583d solid 2px;
}
.card.program-card.UAF, .card.program-card.uaf {
    border: #024e80 solid 2px;
}
.card.program-card.UAS, .card.program-card.uas {
    border: #7a3476 solid 2px;
}
.UAA .institution-flag,
.uaa .institution-flag{
	background: #00583d;
}
.UAF .institution-flag,
.uaf .institution-flag{
    background: #024e80;
}
.UAS .institution-flag,
.uas .institution-flag{
    background: #7a3476;
}
.institution-label-text {
    color: #fff;
    font-size: 16px;
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.degree-level-tag {
    padding-top: 27px;
}
@media (min-width: 1200px) {
.degree-level-tag {
    padding-top: 14px;
}}

h3.title-program {
    -webkit-transition: color 350ms ease; 
    transition: color 350ms ease;
    font-size: 30px;
    text-align: left;
    font-weight: 700 !important;
    letter-spacing: 0;
}
h3.title-program a:link , h3.title-program a:visited{
    color: #0b0b2c !important;
}
h3.title-program a:hover {
    color: #024e80 !important;
}
.program-summary-text {
    padding-bottom: 20px;
    line-height: 1.4em;
}
.program-notes-text {
    margin: 20px 0 20px 0;
    padding-left: 10px;
    border-left: 2px solid #69697b;
    font-size: 14px;
    line-height: 1.4em;
}
/* -- */
.transition-zoom {
    opacity: 1;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.5s ease-in-out;
}
.transition-zoom:active,
.transition-zoom:focus,
.transition-zoom:hover {
    -webkit-transform: scale(0.95) !important;
    transform: scale(0.95);
}

.filters {
    margin-bottom: 3rem;
}
.filters .text-field {
    height: 50px;
    padding-right: 20px;
    padding-left: 20px;
    border: 1px solid #bcc2c2;
    border-radius: 4px;
    font-size: 20px;
    text-align: left;
}
.text-field.search {
    width: 31%;
    margin-right: 1%;
    margin-left: 1%;
    padding-left: 52px;
}
.filters select {
	width: 29%;
    border-radius: 15px !important;
    height: 50px;
    padding-right: 20px;
    padding-left: 20px;
    border: 1px solid #bcc2c2;
    border-radius: 4px;
    font-size: 20px;
    text-align: left;
	color: #495057;
	margin-right: 1%;
}
.btn {
    border-radius: 0.3rem !important;
}