/* ---------------------------------
			General Formatting 
			----------------------------------*/
        /* Remove margin and padding from main content area */
        .id7-main-content-area>.id7-main-content, .container {
            padding:0;
            margin:0;
        }
        
        /* Remove page title */
        .id7-page-title {
            display:none;	
        }
        
        /* Remove Tertiary Navbar */
        .navbar-tertiary {
            display:none;
        }

        /* Navbar */
        hr {
            margin: 22px 30px;	
        }
        
    
    /* ---------------------------
            Title Section 
    -----------------------------*/
        /* Left-side */
        section.title-section {
            display:flex;
            flex-wrap:wrap;
            height:300px;
            font-family: 'Raleway', sans-serif;
        }

        div.title {
            flex: 1 50%;
            background: linear-gradient(140deg, #fcfdff, #c9ebfb, #fcfdff);
            display:flex;
            flex-direction: column;
            text-align:center;
            justify-content: center;
            color:#204f79;    
            align-items:center;    
        }

        div.title h2 {
            width: 320px;
            text-transform: uppercase;
            font-size: 68px; 
        }


        /* Right side */

        div.title-image {
            flex: 1 50%;
			height:100%;
        }
        
        div.title-image img {
            width:100%;
            height:100%;
            object-fit:cover;
        }
        

    /* ---------------------------------
                Main Content
    ------------------------------------*/

        main {
            margin: 0 0 5px 0;
        }

        /* Intro Section */
        .impact-intro {
            padding:20px 15px;
            width:70%;
            margin: 0 auto;
        }                           

        /* Projects Section */
        .projects {
            padding: 0 10px;
            background: #f5f5f5;
        }
			
			.projects-intro {
				text-align:center;
			}

        .projects-intro h3 {
            padding: 10px;
			text-align:center;
        }
                                    
        /* Research Section */
        .research {
            padding: 0 10px 5px 10px;
            background: #f5f5f5;
        }
			
			.research-intro {
				text-align:center;
			}

        .research-intro h3 {
            padding: 10px;
			text-align:center;
        }

        /* Cards */
        .card a {
            text-decoration: none;
        }
        
        .card-item {
            display: flex;
            background:#D0EDFD;
            margin: 5px 5px;
        }

        /* Cards - Left */

        a:hover, a:focus, a:active {
            color: #1F4D8E;
        }

        .left::after {
            content:'';
            position:absolute;
            border-top: solid 1px white;
            border-bottom: solid 1px white;
            top: 10px;
            bottom: 10px;
            left: 10px;
            right: 10px;
            transform: scale(0,1);
            transition: 300ms;
        }

        .card-item:hover .left::after {
            transform: scale(1,1);
        }

        .left {
            position:relative;
        }

        .left .caption {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: white;
            opacity: 0;
            transition: 500ms;
            font-family: 'Raleway', serif;
            text-align: center;
        }

        .card-item:hover .left .caption{
            opacity:1;
        }

        div.caption p {
            margin: 0;
        }

        a:focus .caption {
            background: rgba(0, 0, 0, 0.3);
            opacity:1;
        }

            
        .card-item img {
            max-width:160px;
            margin: auto;
        }
        
        /* Cards - Right */
        
        div.right {
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align:center;
            padding: 10px;
        }

    /* ----------------------------------
            Media Queries
    -----------------------------------*/
    
    /* First Media Query is purposely left empty, as the other won't seem to function without this */

    @media screen and (max-width: 1200px) {
    }
                
    @media screen and (max-width:767px) {
        
        /* Title Section */
        
       .title-section {
            position:relative;
        }

        div.title {
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            width:100%;
            background:none;
        }

        div.title h2 {
            width: 100%;
            background: rgba(255, 255, 255, 0.6);
        }

        div.title-image {
            width:100%;
			max-height: 100%;
        }
        
        
        /* Intro Section */ 
        
        .impact-intro {
            width:90%;	
        }
    }
    
    @media screen and (max-width:475px) {
        
        /* Title */ 
        div.title h2 {
            font-size:50px;
        }
        
        /* Intro Section */ 
        .impact-intro {
            width:100%;	
        }
        
        .card-item {
            flex-direction:column;
        }
        .card-item>div {
            margin:5px auto;
            align-items: center;
            text-align: center;
        }
        .card-item img {
            max-width: 200px;
            border-radius: 5px;
        }
    }
			
			@media screen and (min-width:990px) {
				.projects-intro, .research-intro {
					padding-top: 96px;
				}
				
				
			}