/*---------------------------------
                    General Formatting 
            ------------------------------------*/        
            /* Remove id7 padding/margins */
            .id7-main-content-area>.id7-main-content, .container {
                padding:0;
                margin:0;
            }
		
		/* Remove page title */
		.id7-page-title {
			display:none;	
		}

            .wrapper {
                padding:5px;
            }
		

		/*-------------Scrollbar Styling ---------- */
		.scrollbar::-webkit-scrollbar {
			width: 12px;
			height: 0px;
		}

		.scrollbar::-webkit-scrollbar-track {
			border: 0.1px solid rgba(0,0,0,0.1);
			border-radius: 10px;
		}

		.scrollbar::-webkit-scrollbar-thumb {
			background: rgba(0,0,0,0.1);  
			border-radius: 10px;
		}

		.scrollbar::-webkit-scrollbar-thumb:hover {
			background: rgba(0,0,0,0.1);  
		} 

            
            /* ----------------------------------
                        Title Section
            -------------------------------------*/
            
            /* General Formatting */
            .title-section .title {
                width:50%;
                background: linear-gradient(119deg, #ffffff, #D0EDFF, #ffffff);
            }
            
            .title-image {
                width:50%;	
				height:300px;
            }

			.title-image img {
				height:100%;
				width:100%;
				object-fit:cover;
			}
    
                .title-section {
                display:flex;
					height:300px;
            }
            
    
            /* Left side text */
    
            .title {
                display:flex;
                align-items: center;
                justify-content: center;
                text-align:center;
                font-family: 'Raleway', sans-serif;
            }
    
            .title h2 {
                text-transform: uppercase;
                font-size: 68px;
                width:100%;
                color:#204f79;
            }
            
            /* ----------------------------------
                    Main Section
            -------------------------------------*/
            
            .flex-container {
                display:flex;
                flex-wrap:wrap;
                justify-content: space-evenly;
                padding: 10px 0 15px 5px;
            }

		.articles.flex-container {
			justify-content: center;	
		}

            .flex-container a {
                text-decoration: none;
            }

            .projects h3,
            .articles h3,
			.cetl h3 {
                flex-basis:100%;
				width:100%;
				padding: 10px;
				text-align: center;
            }
		
		.cetl h3 {
			margin-bottom:0;
		}

            .projects .card {
                flex-basis:35%;
                margin: 10px 5px;
                border-radius: 5px;
                background:#D0EDFF;
            }
		
			.articles .card {
                flex-basis:30%;
                margin: 10px 5px;
                border-radius: 5px;
                background:#D0EDFF;
            }
            		
			.cetl .card {
				flex-basis:35%;
				margin: 10px 5px;
				border-radius: 5px;
				background:#D0EDFF;
			}
		
            .card-item {
                display:flex;
                flex-direction:column;
                height:380px;
            }
        
            .card-item h4{
                height:20%;
                margin:0;
                padding:10px;
                text-align:center;
				background: #f5f5f5;
				border-radius: 5px 5px 0 0;
				display:flex;
				justify-content:center;
				align-items:center;
				transition: 300ms;
            } 
            .card-item p {
                height:35%;
                margin:0;
                padding:10px;
				overflow:scroll;
            } 
		
		 div.image {
				  position:relative;
				  height:45%;
			  }

			  div.image div {
				  position: absolute;
				  top: 0;
				  bottom: 0;
				  left: 0;
				  right: 0;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  border-radius: 0 0 5px 5px;
				  font-size: 30px;
				  color: white;
				  background: rgba(0, 0, 0, 0.4);
				  opacity: 0;
				  transition: 300ms ease-in-out;
				  font-family: 'Raleway', serif;
			  }

			  div.image img {
				  width:100%;
				  height:100%;
				  border-radius: 0 0 5px 5px;
				  object-fit:cover;
			  }
		
		.reinvention div.image img {
			object-position: 50% 80%;	
		}

			  .card-item:hover div.image div {
				  opacity:1;  
			  }
		
		.card-item:hover h4 {
			background: #efefef;
		}
		
		.archived-projects,
		.archived-reports{
			text-align:center;
		}

            /*--------------------------------
                    Media Queries
            --------------------------------*/
            
            @media screen and (max-width:992px) {
                
                /* Header Section */
                .title h2 {
                    font-size:50px;	
                }
				
				.articles .card {
					flex-basis:40%;
				}

                
            }
            
            @media screen and (max-width:660px) {
                
                /* Title Section */
                .title-section {
                    display: grid;	
                }
                
                .title-section .title {
                    grid-column: 1;
                    grid-row: 1;
                    width: 100%;
                    z-index: 1;
                    background: linear-gradient(119deg, rgba(255, 255, 255, 0.53), rgba(208, 237, 255, 0.48), rgba(255, 255, 255, 0.54));
                }
                
                .title h2 {
                    background: rgba(255, 255, 255, 0.5);	
                    font-size:45px;
                }
                
                .title-section .title-image {
                    grid-column: 1;
                    grid-row: 1;
                    width: 100%;
                    z-index: 0;
                }

                /* Cards */
                .projects .card,
                .articles .card,
				.cetl .card {
                    flex-basis:70% !important;
                }
                
            }

            @media screen and (max-width: 550px) {
                .projects .card,
                .articles .card,
				.cetl .card {
                    flex-basis:90% !important;
                }
            }