body {

  background-color: rgba(23,23,23,.9);
  background-image:  url("/20221211080733oe_/https://www.eng.cuhk.edu.hk/ENGE-TellingStories/img/subpagebg.png");
  background-attachment:fixed;
  background-position: top left;
  background-size:contain;
  background-repeat: no-repeat; 
	width: 100%;
	
}

ol {
	list-style-type: decimal;
}

.pagecontent{
	padding:5rem;
}


.dropdown-menu.show {
	width: 100%;
	min-width: 200px
}


.dropdown-item {
    display: block;
    width: 100%;
   padding-left:2rem;
	padding-right:2rem;
    clear: both;
    font-weight: 400;
    color: blue;
    text-align: inherit;
    white-space: nowrap;
text-decoration: underline;
    border: 0;
	
}


.dropdown-item:active {
background-color: #aaa;
	
}




.single-item {
    display: block;
    width: 100%;
   padding:1rem;
    clear: both;
    font-weight: 400;
    color: blue;
    text-align: inherit;
    white-space: nowrap;
text-decoration: underline;
    border: 0;
	
}

.btn,.button , .btn-group{
	color: #fff;
		background-color:#2788d5;
	 text-align: center;
	border-radius: 0.2rem;
	width: 100%;
}



 .btn:hover, btn:active btn:visited {
	
	background-color: #2788d5;
	 color: #fff;
	
}

.card-link:hover {
	color:#fff;
}

.btn{
	 color: #fff;
}

.container{
  width: 100%;
}

.card-header {
    padding: .75rem 1.25rem;
	background-color: #2788d5;
  color: #fff;
	text-align: center;
	border-radius: 0.2rem;
}

.card-link {
   
text-decoration: none;

    color: #ffffff;
}


.card{
 margin-top: 0;   
 margin-bottom: 0;
   
}



.card_display{
    background-color: rgba(182,184,183,0.8);
    margin-right:inherit;
    margin-top: 5%;
   
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #aaa;
    border-color: #cccccc;
}

/*
.grid-container {
  display:block;
  background-color: #FFFFFF;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px;
  font-size: 15px;
  text-align: justify;
}
*/

.cta , .item , .page-section {
    padding-bottom: 0rem;
    margin-bottom: 2rem;
    margin-top: 0rem;
}


/*
.list-group-item  {
    background: rgba(255, 165, 0, 0);
    color: rgba(255, 255, 255, 1); 
}

.list-group-item:hover {
    color: #e6a756;
    background: rgba(255, 165, 0, 0);
    text-decoration: none;
}
*/

.modal {
    width: 80%;
	overflow-y: auto;
}

#mainNav {
    background-color: rgba(23,23,23,.9);
    font-family: Raleway;
}

.footer {
    background-color: rgba(23,23,23,.9);
    position: fixed;
    bottom: 0; 
    width: 100%;
}

.btn-primary {
    background-color: rgba(23,23,23,.9);
    border-color: rgba(23,23,23,.9);
}

/*
.item {
    margin-top: 12%;
    margin-left: 60%;
    background: rgba(255, 165, 0, 0);
    color: rgba(255,255, 255, 1);
}


.list-group {
    display: flex;
    flex-direction:column;
}
*/



.row {
    margin-bottom: 15%;

}

.videorow {
    padding: 5px; 
	width: 100%;
}





@media (max-width: 767px){

body {
   background-color: rgba(23,23,23,.9);
   background-image:  url("/20221211080733oe_/https://www.eng.cuhk.edu.hk/ENGE-TellingStories/img/banner-small.jpg");
   background-attachment:fixed;
   background-position:0% 50px;
   background-size:contain;
   background-repeat: no-repeat;      
}
	
	.pagecontent{
	padding:1rem;
}
.card_display{
    background-color: rgba(182,184,183,0.8);
    margin-bottom: 33%;
}
  .imgball {
    display: none ;
  
}
    
/*
    
    .item {
    margin-top: 0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;    
}
    .list-group-item  {
    background: rgba(255, 165, 0, 0);
    color: rgba(255, 255, 255, 1);   
}
*/
  
    .row {
    margin-left: 5%;
        margin-top: 80px;
}
    
    .footer {
     background-color: rgba(23,23,23,.9);
     width: 100%;
     max-width: 767px;
     position: fixed;
     bottom: 0;
}
}
    

.cta {

    margin-left: 2%; 
    margin-right: 2%; 
}

/*
.list-group {
    display: flex;
    flex-direction: row;
    margin-bottom: 0rem;
    border-radius: 0.25rem;
}
*/
    
    .page-section {
    padding-bottom: 0rem;
    padding-bottom: 0rem;
    margin-bottom: 2rem;
    margin-top: 0rem;
    padding-left: 1rem;
}
    
}