/*  Formatting Hero text & Adding Alert text */
#hero-bg{
	position: relative;
}

 /*#hero-bg::before{
	content: '\01F6C8 New Online Programs Through UH Extend';
	position: absolute;
	width: 100vw;
	height: auto;
	top: 0;
	left: 0;
	font-size: 2em;
	text-align: center;
	background-color: #F6BE00;
	Color:  #960C22;
	padding: 20px;
	 text-indent: .05em;
}
#hero-bg .hero-text > h1{
	margin-top: 110px;
}*/
@media(max-width: 767px)
	{
		#hero-bg .hero-text > h1{
	margin-top: 0px;
		}
		#hero-bg div.hero-text,#hero-bg div.hero-text > h1, #hero-bg div.hero-text > p {
		 background-color: #FFF9D9 !important;
		 color: #54585A !important;	
		 width: 100%  !important;
		 padding: 0px !important;	
		}
		
		 #hero-bg::before{
		 font-size: 1.4em;
		
		 }
		.cover-photo .caption-wrapper>.container>.caption, .cover-photo .caption-wrapper>.container>.caption>h2{
	background-color: transparent !important;
			color:  #63666A !important;
}
		
	}
@media(max-width: 1460px)
			{
				#hero-bg div.hero-text{
					width: 75% !important;
				}
			}
@media(max-width:768px){
	#hero-bg div.hero-text{
					width: 100% !important;
					height: 100% !important;
					margin-bottom: 0px !important;	
		            padding: 20px !important; 
				}
	.program-info-table{
		height: auto !important;
	}
}
#hero-bg div.hero-text{
	background-color: rgba(0,0,0, .4);
	padding-left: 35px;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 35px;
	width: 45vw;
	border-radius: 12px;
	margin-bottom: 40px !important;
}
#hero-bg .hero-text > h1, #hero-bg .hero-text > p  {
	color: white !important;
	
}
/* Formatting Hero text button */
.hero-text .hero-btn {
	text-align: center;
	font-size: 1.1em;
	color: white;
	
	
}
#hero-bg .hero-text ul li a{
	text-align: center;
}


/* Styling Pref. Development Section */
.pd-img-link{
  position: relative;
  display: inline-block;
  width: auto; 
  height: auto; 
  overflow: hidden;
}
.pd-img-link .pd-img-section{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
   

}
.pd-img-link::after {
    content:'';
	padding: 0 10px;
	text-align: center;
    position: absolute;
    top: 0;
    left: 0;
	width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.2rem;
  }
.pd-img-link:hover::after {
    opacity: 1;
  }
div:nth-child(1) .pd-img-link::after {
	content: "Engaging courses on hundreds of topics to help you advance your professional goals.";
}

div:nth-child(2) .pd-img-link::after {
	content: "Free self-directed opportunities for professional development.";
}
/* Formatting Hero Caption */
#main-content .caption{
	background-color: rgba(0,0,0, .5);
}
#main-content .caption> h2{
	
	color: white;
	text-align: center;
	font-family: 'League Gothic', sans-serif;
}
/*Formatting graduare programs links*/
.only-uh-extend{
    border: 1px solid #D89B00 !important; 
	padding: 3px !important; 
	border-radius: 4px !important; 
	background-color: #fff9d9 !important; 
	font-size: .8em !important;
	text-decoration: none !important;
}
.only-uh-extend-btn{
	padding: 3px !important; 
	border-radius: 12px !important; 
	background-color: #C8102E !important; 
	font-size: .8em !important;
	text-decoration: none !important;
	color: white !important;
	text-decoration: none !important;
}
.only-uh-extend:hover{
 background-color: transparent !important;	
}
.uh-extend{
	 border: 1px solid  #640817 !important; 
	padding: 3px !important; 
	border-radius: 4px !important; 
	background-color: #960C22 !important; 
	color: white;
	font-size: .8em !important;
	text-decoration: none !important;
}
.uh-extend:hover{
	color: white !important;
	background-color: #C8102E !important;
}
@media (max-width: 1380px) {
	.only-uh-extend, .uh-extend, .only-uh-extend-btn{
    display: inline-block;
    margin-right: 20px !important;
	margin-bottom: 10px !important;	
    text-align: center !important;	
    }
}

/* Formatting uh system images */
.image-uh-link, .image-uhcl-link, .image-uhd-link  {
   position: relative;
  display: inline-block;

    }
 .image-uh-link::before{
         content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(200,16,46, 0); 
          transition: background-color 0.3s ease; 
        
    }

.image-uh-link::before{
         content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(200,16,46, 0); 
          transition: background-color 0.3s ease; 
        
      
    }
     .image-uhcl-link::before{
         content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,134,108, 0); 
          transition: background-color 0.3s ease; 
        
      
    }
    .image-uhd-link::before{
         content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 255, 0); 
          transition: background-color 0.3s ease; 
        
      
    }
    .image-uh-link:hover::before {
       background-color: rgba(200,16,46, .4);
       
    }
     .image-uhcl-link:hover::before {
       background-color: rgba(0,134,108, .4);
    }
     .image-uhd-link:hover::before {
       background-color: rgba(0, 0, 255, .4);
    }

/*Formatting the PD buttons*/
.pd-btn {
  position: relative;
  overflow: hidden;
  display: inline-block; 
}

.pd-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(136,139,141,.4);
  transition: left 0.4s ease-in-out;
  z-index: 0;
}

.pd-btn:hover::before {
  left: 0;
  font-weight: bold;	
}
.ed2go-courses{
	display: inline-block;
	transition: transform .4s ease-out;
}
.ed2go-courses:hover{
	transform: scale(1.02);
}

#cyber-tuition-alert
{
	background-color: #F6BE00 !important;
}
#cyber-tuition-alert p:nth-of-type(2)::before
{
     content: "\F5B4";
      font-family: 'bootstrap-icons';
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      display: inline-block;
      margin-right: 8px;
      speak: none;
}
.accordion-item>.accordion-button{
	font-size: 1.5em !important;
}

#banner-photo{
	position: relative !important;
	display: block !important;
}