/*************************************************** Banner headline Styling*********************************************************/ 

.caption-wrapper{
	color:  #54585A;
	text-transform: uppercase;
	line-height: 1.5;
  	animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.caption-wrapper >.container > .caption{
	background: rgba(255,249,217, .8);
	border-radius: 5px;
}

@media (max-width: 767px)
	{
.caption-wrapper >.container > .caption{
	background: rgb(255, 249, 217) !important;
    color: #54585A;
}
	}

/***************************************************Hiding Bread Crambs Section*****************************************************/
.nav-breadcrumb{
	display: none;
}


/*************************************************** Section Title & Sub-Title Styling**********************************************************/ 	
h2.lead
{
	color: white;
	background-color: #00B388;
	padding: 20px;
	text-transform: uppercase;
	line-height: 1.5;
}
h3.lead{
	text-transform: uppercase;
}

/*************************************************** Text padding Styling**********************************************************/ 	
article > p, article > div, article > ul{
	padding-right: 40px;
}

/**************************************************** ACC Featured Section Styling***************************************************/
.news{
     position: relative;
     width: 80%;
     height: 20vh;
     border-radius: 10px;
     background-image: url("/amazon-career-choice/_images/cougar-logo.png");
     background-color: #C8102E;
     background-repeat: no-repeat;
     background-position-x: 1rem;
     background-position-y: 2rem;
     background-size: 190px;
     margin-left: auto;
     margin-bottom: 520px;
     margin-right: auto;
    }
    .article{
     position: absolute;
     top: 40%;
     left: 23%;
    }
    .newscard{
        position: absolute;
        width: 100%;
        height: auto;
        padding: 20px;
        top: 550px;
        color: #54585A;
        border-radius: 15px;
        border-left: 1px solid gray;
        border-right: 1px solid gray;

    }
   .cougar{
     animation: slide-top 3s ease-in-out both;
   }
  @keyframes slide-top {
	  0% {
		  transform: translateY(30%);
		  opacity: 0;
	  }
	  100% {
		  transform: translateY(0);
		  opacity: 1;
	  }
   }
        
@media only screen and (max-width: 1050px)
{
       .article
       {
        width: 90%;
        left: 14%;  
    }
    .news .newscard{
        top: 520px;
    }
}
@media only screen and (max-width: 900px)
{
    .news .newscard{
        top: 445px;
        font-size: .8em; 
    }
    .article
       {
        width: 100%;
        left: 3%;
        font-size: .9em; 
        
    }
}
@media only screen and (max-width: 500px)
{
  .news .newscard{
        top: 360px;
        font-size: .8em; 
	    border: none;
	    text-align: left; 
    }
    .article img{
        width: 100%;
        left: 7%;
    }
	.article{
		text-align: left;
	}
}


/**************************************************** ACC Hightlight Styling*******************************************************/		
.flex-hightlight-container{
	display: flex;
	flex-wrap: wrap;
	background-color: #FFF9D9;
	justify-content: space-evenly;
	align-items: center;
    }
  
.icons{
	text-align: center;
	padding: 20px;
	border-bottom: 2px solid rgba(84,88,90,.3);
	position: relative;
    overflow: hidden;
    }



.icons img{
	padding-bottom: 5px;
	border-bottom: 4px solid #F6BE00;
}

@media (max-width: 768px) {
.flex-container {
    flex-direction: column;
    }
  }

/**************************************************** ACC Undergraduate Programs Tabs Styling*******************************************************/

.wrp{
     display: flex;
     gap: 45px;
	 justify-content: center;
	 align-items: center; 
	 flex-wrap: wrap; 
	 margin-top: 15px;
    }
 .image-container {
	 position: relative;
	 display: inline-block;
	 overflow: hidden;
     }
 .image-container a {
	 display: block;
	 width: 100%;
	 height: 100%;
	 color: white; 
    }     
.image-container img {
	display: block;
	width: 100%;
	height: auto;  
	border-radius: 10px;
    }
 .image-container::before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(255, 0, 0, 0); 
	 transition: background-color 0.3s ease; 
	 pointer-events: none; 
    }
.image-container:hover::before {
	background-color: rgba(255, 0, 0, 0.2); 
    }	
.prog-link{
    display: block; 
   background-color: rgba(0,0,0, .3);
    padding: 7px;
    text-align: left;
    width: 100%;
	color: white;
    }
.program-title{
	position: absolute;
	width: 25rem;
	top: 40%;
	left: 0%;
	font-size: 2vw;
    }
.nav-tabs .nav-link {
	border-radius: 5px;
	border: 1px solid rgba(136,139,141, .7);
	width: 50%;
	text-transform: uppercase;
	font-size: 40px;
	color: gray; 
    }
.nav-tabs .nav-link:hover:not(.active){
	background-color: silver;
	color: white;
    }
div.nav-tabs button.nav-link.active{
	border: 1px solid gray;
	border-bottom: 3px solid gray;
	/*background-color: rgba( 255,249,217, .6); */
	color:  #C8102E;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15);
}
.tab-content {
  	border: 1px solid gray;
    padding: 35px;
	border-radius: 1px;
	text-align: center;
   /* background-color: rgba( 255,249,217, .5); */
}
    .more{
	display: inline-block;
	position: relative;
	padding: 20px;   
	}
.more::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	border-bottom: 5px solid  #960C22;
	transition: width 0.2s ease-in-out;
	}
.more:hover::after {
	width: 100%;
	color:  #960C22;
    }