/*---------------------------------
                    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
            -------------------------------------*/
		
			/*Intro text */
		.intro-text {
			text-align:center;
			padding-top:15px;
			padding-bottom:5px;
		}
		
            
            .flex-container {
                display:flex;
                flex-wrap:wrap;
                justify-content: space-evenly;
                padding: 10px 0 15px 5px;
            }   

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

            .projects h3,
            .supported h3 {
                flex-basis:100%;
				width:100%;
				padding: 10px;
				text-align: center;
            }

            .projects .card {
                flex-basis:35%;
                margin:2.5px;
                border-radius: 5px;
                background:#D0EDFF;
            }
            
            .supported .card {
                flex-basis:30%;
                margin:2.5px;
                border-radius: 5px;
                background:#D0EDFF;
            }
        
            .card-item {
                display:flex;
                flex-direction:column;
                height:380px;
            }
        
            .card-item h4{
                flex-basis:10%;
                margin:0;
                padding:10px;
                text-align:center;
				background: #f5f5f5;
				border-radius: 5px 5px 0 0;
            } 
            .card-item p {
                flex-basis:40%;
                margin:0;
                padding:10px;
				overflow: scroll;
            } 
        
            figure.image {
                background: rgba(0,0,0,0.8);
                flex-basis: 50%;
				flex-shrink: 0;
                display: flex;
                flex-direction: column;
                display: grid;
                border-radius: 0 0 5px 5px;
            }
        
            figure.image img,
            figure.image figcaption {
                grid-column:1;
                grid-row:1;
            }
        
            figure.image img  {
                object-fit: cover;
                height: 100%;
                width: 100%;
                border-radius: 0 0 5px 5px;
                transition: 300ms ease-in-out;  
            }
		
		.ifstal figure.image img {
			object-fit:contain;	
		}

            figure.image figcaption {
                color:white;
                font-family: 'Raleway', serif;
                font-size:30px;
                opacity:0;
                display:flex;
                justify-content: center;
                align-items: center;
                transition: 300ms ease-in-out;   
            }
        
            .card a:hover figure.image img {
                opacity:0.5;
                z-index:0;
            }

            .card a:hover figure.image figcaption {
                opacity:1;
                z-index: 1;
            }

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

                /* Cards */
                .projects .card {
                    flex-basis:40% !important;
                }
                
            }
            
            @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,
                .supported .card {
                    flex-basis:70% !important;
                }
                
            }

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