/* Visual Studio Formatting Code- Not needed on actual site */
.id7-main-content-area>.id7-main-content, .container {
    padding:0;
    margin:0;
}

/* General Formatting */

.main-container {
    padding:10px;
}
hr {
	margin: 22px 30px;	
}

	/* ---------------------------
				Header Section 
		-----------------------------*/
		
		/*Left-side- Header text */
		
		.id7-page-title h1 {
            display:none;	
        }

		header.content-header {
			display:flex;
			height:35vh;
			min-height: 300px;
		}

		.intro {
			width:50%;
			background: linear-gradient(140deg, #fcfdff, #c9ebfb, #03a2ec);
			display:flex;
			flex-direction: column;
			text-align:center;
			justify-content: center;
			color:#204f79;    
			align-items:center;    
		}
        
        .intro h2 {
            width: 320px;
            text-transform: uppercase;
            font-size: 68px; 
			font-family: 'Raleway', sans-serif;
        }

        .intro .h3 {
            margin: 0 !important;
            padding-bottom:10px;
			font-size:30px;
			font-family: 'Shadows Into Light', cursive;

        }
		
	        div.intro-img {
			width:50%;
		}

		/* Right side- Header Img */
		
		.intro-img img {
			height: 35vh;
			width: 100vw;
			min-height: 300px;
			object-fit:cover;
        }
        
        div.intro-text p {
            text-align:center;
            margin-bottom: 5px !important;
        }
		
		.impact-intro {
			padding:20px 0;	
		}
		
		.impact-intro h4 {
			margin:0;	
        }

        /*Fallback for Grid */
       
       @media screen and (max-width:500px) {
        .content-header .intro-img {
            display:none;
        }
        .content-header .intro {
            width:100%;
        }
    }

    @supports (display:grid) {
        @media screen and (max-width:350px) {
            .intro {
                height:92%;
            }
        }
        @media screen and (max-width:500px) {
          
            header.content-header {
                display:grid;
            }
            .content-header .intro,
            .content-header .intro-img {
                width:100%;
                grid-column:1;
                grid-row:1;
            }

            .content-header .intro-img {
                display:block;
                opacity:0.1;
            }

            .intro h2 {
                width: 200px;
                text-transform: uppercase;
                font-size: 60px;
            }
        }
    }
     
        @media screen and (max-width:650px) {
            .intro {
                width:60%;
            }
            div.intro-img {
                width:40%;
            }
        }
        
/*------------------ 
    Intro Section
------------------ */

.intro {
    padding:20px 15px;
}


/*---------------- 
        Cards
------------------ */

.card {
    margin:5px 0;
}
.card a {
    text-decoration: none;
}
.flex-container {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.card-item {
    display:flex;
}
.left-side {
    flex: 0 0 15%;
    display:grid;
}
.left-side img {
    object-fit: cover;
}
.left-side img,
.left-side p {
    grid-column:1;
    grid-row:1;
}
.left-side p {
    display:flex;
    align-items:center;
    justify-content:center;
	text-align:center;
    margin:0;
    opacity:0;
    text-transform: uppercase;
    background:#FFEBE0;
}
a:hover .left-side p {
    transition: 400ms;
    opacity:1;
}
.right-side {
    flex: 0 0 85%;
    padding:10px;
    background:#D0EDFF;
    text-align:center;
}

@media screen and (max-width: 500px) {
	.left-side p {
        font-size:30px;
    }
    .card-item {
        flex-direction: column;
    }
    .projects-intro,
    .core-practice-intro {
        text-align:center;
    }
}


@media screen and (max-width: 768px) {
    .card {
        flex: 0 0 95%;
    }
    .left-side {
        flex: 0 0 23%;
        display:grid;
    }
    .right-side {
        flex: 0 0 77%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:10px;
        background:#D0EDFF;
        text-align:center;
    }
}

/* Projects Positioning */

.projects .left-side img {
    min-height: 130px;
}

@media screen and (min-width: 768px) {
    .projects .card {
        flex: 0 0 90%;
    }
}

@media screen and (min-width: 990px) {
    .projects .card {
        flex: 0 0 70%;
    }
}
/* Core Practice */

.core-practice .left-side img {
    min-height: 128px;
}

.current-projects h4 {
    text-align:center;
}

.archived-projects h4 {
    text-align:center;
    padding:10px;
}

@media screen and (min-width: 768px) {
    .core-project.card {
        flex: 0 0 90%;
    }
    .core-practice .left-side img {
        min-height: 116px;
    }
    .archived-projects {
        flex: 0 0 100%;
    }
}

@media screen and (min-width: 990px) {
    .core-project.card {
        flex: 0 0 50%;
    }
    .core-practice .card-item {
        margin:0 2.5px;
    }
    .core-practice .left-side {
        flex: 0 0 25%;
    } 
    .core-practice .right-side {
        flex: 0 0 75%;
    } 
    .core-practice .left-side img {
        min-height: 165px;
    }
    .core-project.card:last-of-type {
        flex: 0 0 60%;
    }
    .core-practice .core-project:last-of-type img {
        min-height:120px;
    }
    .core-practice .core-project:last-of-type .left-side {
        flex: 0 0 18%;
    }
    .core-practice .core-project:last-of-type .right-side {
        flex: 0 0 82%;
    }
}

@media screen and (min-width: 1200px) {
    .core-practice .left-side img {
        min-height: 147px;
    }
    

}