/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
/*so white is visible when editting*/
.ou-justedit-region .text-white {
    color: #185c33;
}
/*list styling*/
ul.circled-arrow {
	padding-left: 20px;
}
ul.circled-arrow>li:before {
    color: #285d39;
}

/*picture-cards*/
.e2i-home-picture-cards .card-picture-5 .card-picture-title {
	color: #fff;
	background-color: #275d38;
	border-bottom: 0;
	font-size: 22px;
}

/*****************CONTENT CARDS*********************/
.e2i-content-cards {
	min-height: 100px;
	display: flex;
	background-color: #275D38;
    justify-content: center;
    align-items: center;
}

.e2i-content-cards a {
	text-decoration: none;
	text-align: center;
	outline : none;
	transition: all 300ms;
}
.e2i-content-cards a:hover {
	font-size: 24px;
}

.partners-content {
    padding: 20px;
}
.partners-photo p {
	margin: 0;
	text-align: center;
}

/*****************CONTACT CARDS*********************/
.card-staff-5 {
    height: 100% !important;
    border-radius: 8px;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}
.card-staff-5 .card-staff-portrait {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    width: 35% !important;
    min-height: 100%;
    position: relative;
        background-color: #e8e8e8;
	display: none;
}
.card-staff-5 .card-staff-name {
	text-transform: none !important;
}
h2.card-contact-name {
    margin-bottom: 5px !important;
    text-transform: none !important;
}
a.card-contact-phone {
    font-size: 24px !important;
}
p.card-contact-office {
    display: none;
}

/*****************PICTURE CARDS*********************/
.card-picture-custom {
	border-radius: 8px;
	box-shadow: 0px 0px 6px rgb(0 0 0 / 16%);
	overflow: hidden;
}

.card-picture-custom .card-picture-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 29px;
    color: #275D38;
    padding: 30px 20px;
    margin: auto 0px 0px;
	position: relative;
	transition: all 100ms;
}
.card-picture-custom .card-picture-title::before {
    content: "\f0a9";
    display: inline-block;
    color: #275D38;
    font-size: 35px;
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    top: -15px;
    left: 50%;
    margin-left: -17px;
    z-index: 2;
}
.card-picture-custom .card-picture-title::after {
    content: "";
    display: inline-block;
    background-color: #fff;
    width: 50px;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 50%;
    margin-left: -25px;
    height: 50px;
    z-index: 1;
}
.card-picture-custom .card-picture-img {
    order: -1;
    height: 100%;
}

.card-picture-custom .card-picture-content {
    display: none;
}

.card-picture-custom .card-picture-button {
    overflow: hidden;
    height: 0;
}

.card-picture-custom:hover .card-picture-title, .card-picture-custom:hover .card-picture-title::before, .card-picture-custom:hover .card-picture-title::after {
	background-color: #275D38;
	color: #fff;
}
.card-picture-3 {
    display: flex;
	padding: 40px;
	padding-right: 0;
    flex-flow: row wrap;
}
.card-picture-3 h2 {
    width: 100% !important;
    margin: 0 0 .5em;
    display: inline-block !important;
    font-weight: 600;
}
.card-picture-3 .card-picture-img {
    position: relative;
    left: -48px !important;
    order: revert !important;
    border-radius: 5px;
	width: 500px;
        height: 300px;
    display: none;
}
.card-picture-3 .card-picture-content {
    text-wrap: balance;
    position: relative;
    padding-bottom: 50px;
}
.card-picture-3 .card-picture-content li {
    font-size: 18px;
}

/*================================== HOVER CARDS WITH PHOTOS AND LINKS ===============================*/
.heading-card, .team-card, .resource-card {
	box-shadow: 0 0 5px rgba(0,0,0,.25);
	transition: 0.3s ease-in-out all;
}

.heading-card .heading-card-img {
	    background-color: rgba(0, 0, 0, 0.65);
}

.heading-card .heading-card-img img {
	height: 400px;
	width: 100%;
	object-fit: cover;
	object-position: bottom;
	filter: grayscale(0);
	transition: 0.2s ease-in-out all;
	opacity: 0.55;
}

.heading-card:hover .heading-card-img img, 
.heading-card:target .heading-card-img img,  
.heading-card:focus .heading-card-img img {
	filter: grayscale(100%);
}
.heading-card:hover .heading-card-img {
	    background-color: #1e4119;
	transition: 0.2s ease-in-out all;
}

.heading-card .heading-card-text {
	    position: absolute;
    top: 50%;
	text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s ease-in-out all;
}

.heading-card .heading-card-text h2 {
	color: white;
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
}
.heading-card .heading-card-text h2 span {
    display: block;
    margin-bottom: 20px;
}

.heading-card .heading-card-text a {
	color: white;
}

/*small version of heading card*/
.heading-card.small-card img {
	height: 300px;
}

/*****************STUDENT EXPERIENCE PAGE*********************/
.promo-card .fa-ul {
    font-size: 18px;
}
.promo-card .fa-ul .fa-li {
    color: #75B233;
    font-size: 24px;
    top: -5px;
}


/*stackable cards css*/
.six-stackable {
    margin-bottom: 50px;
}
.six-stackable .stackable-card {
    padding: 30px;
    height: 250px;
    width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 60px;
    justify-content: center;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
.six-stackable .stackable-card:before {
    content: "";
    position: absolute;
    border: 100px solid;
    border-color: #f9f9f9 transparent transparent transparent;
    border-width: 50px 175px 0 175px;
    top: 9px;
    width: 350px;
    z-index: 0;
}
.six-stackable .stackable-card:after {
    content: "";
    position: absolute;
    border: 100px solid;
    border-color: #fff transparent transparent transparent;
    border-width: 50px 175px 0 175px;
    width: 350px;
    bottom: -39px;
    z-index: 3;
}
.six-stackable .step {
	font-size: 26px;
    font-weight: bold;
    color: #fff;
	margin: 0 0 10px;
}
.six-stackable .stackable-card p {
    font-size: 20px;
}

.six-stackable .stackable-card.start {
    background-color: #e8e8e8;
	color: #000;
}
.six-stackable .stackable-card.start:after {
	border-color: #e8e8e8 transparent transparent transparent;
}
.six-stackable .stackable-card.start h3, .six-stackable .stackable-card.middle-1 h3, .six-stackable .stackable-card.middle-1,  .six-stackable .stackable-card.middle-2, .six-stackable .stackable-card.middle-2 h3 {
	color: #000;
}

.six-stackable .stackable-card.middle-1 {
    background-color: #b9b9b9;
}
.six-stackable .stackable-card.middle-1:after {
	border-color: #b9b9b9 transparent transparent transparent;
}

.six-stackable .stackable-card.middle-2 {
	background-color: #8e8c89;
}
.six-stackable .stackable-card.middle-2:after {
	border-color: #8e8c89 transparent transparent transparent;
}

.six-stackable .stackable-card.middle-3 {
	background-color: #00843d;
}
.six-stackable .stackable-card.middle-3:after {
	border-color: #00843d transparent transparent transparent;
}

.six-stackable .stackable-card.middle-4 {
	background-color: #185c33;
}
.six-stackable .stackable-card.middle-4:after {
	border-color: #185c33 transparent transparent transparent;
}

.six-stackable .stackable-card.finish {
	background-color: #1e4119;
}
.six-stackable .stackable-card.finish:after {
	border-color: #1e4119 transparent transparent transparent;
}


/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	/*****************PICTURE CARDS*********************/
	.card-picture-3 .card-picture-img {
        display: block;
    }
	.card-picture-3 .card-picture-content {
        left: -1em;
        max-width: 50%;
		padding-bottom: 0;
    }
	
	.home-video {
		margin-top: 10px;
	}
	
	/*NEW STACKABLE*/
	    .col-sm-2 {
        width: 50%;
    }
	.six-stackable {
		margin-bottom: 0;
	}
	.six-stackable .stackable-card.middle-1:after, .six-stackable .stackable-card.middle-2:before, .six-stackable .stackable-card.middle-3:after, .six-stackable .stackable-card.finish:after {
		content: unset;
	}
	.six-stackable .stackable-card {
		height: 200px !important;
    	padding: 20px 50px !important;
		width: 300px;
	}
	.six-stackable .stackable-card:after {
		border-color: transparent #fff transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        right: -40px;
        bottom: 10px;
        width: unset;
        z-index: 5;
	}

	.six-stackable .stackable-card:before {
		border-color: transparent #f9f9f9 transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        left: 9px;
        bottom: 10px;
        z-index: 1;
		width: unset;
        right: unset;
        top: unset;
	}

	.six-stackable .stackable-card.start:after {
        border-color: transparent #e8e8e8 transparent transparent;
    }
	.six-stackable .stackable-card.middle-2:after {
        border-color: transparent #8e8c89 transparent transparent;
    }
	.six-stackable .stackable-card.middle-4:after {
        border-color: transparent #185c33 transparent transparent;
    }
	
	
	.six-stackable .stackable-card.start, .six-stackable .stackable-card.middle-2, .six-stackable .stackable-card.middle-4 {
		margin-right: 0;
	}
	.six-stackable .stackable-card.finish, .six-stackable .stackable-card.middle-1, .six-stackable .stackable-card.middle-3 {
		margin-left: 0;
	}
	.six-stackable .stackable-card.finish h3, .six-stackable .stackable-card.middle h3 {
		margin-top: 0;
	}
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	/*****************CONTACT CARDS*********************/
	.card-staff-5 {
		flex-direction: row !important;
	}
	.card-staff-5 .card-staff-portrait {
		display: block;
	}
	
	.heading-card .heading-card-text h2 span {
		font-size: 70px;
	}
	
	/*****************STUDENT EXPERIENCE PAGE*********************/
	.promo-card {
		margin: 0 auto;
		width: 70%;
	}

}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	/*stackable cards css*/
	 .six-stackable {
        width: 95%;
        margin: 0 auto;
		 margin-left: 5px;
    }
	.six-stackable .col-sm-2 {
        width: 16.66666667%;
    }
	.six-stackable .stackable-card {
		width: 100%;
	}
	.six-stackable .stackable-card {
        padding: 20px 40px 20px 90px !important;
    }
	.six-stackable .stackable-card:after, .six-stackable .stackable-card:before {
		border-width: 100px 50px 100px 0;
	}
	.six-stackable .stackable-card.middle-1:after, .six-stackable .stackable-card.middle-3:after, .six-stackable .stackable-card.finish:after {
		content: "";
	}
	.six-stackable .stackable-card.middle-2:before, .six-stackable .stackable-card.finish:before {
		content: "";
	}
	.six-stackable .step {
		font-size: 24px;
	}
	.six-stackable .stackable-card p {
		font-size: 18px;
	}
	
	.six-stackable .stackable-card.middle-1:after {
        border-color: transparent #b9b9b9 transparent transparent;
    }
	
	.six-stackable .stackable-card.middle-3:after {
        border-color: transparent #00843d transparent transparent;
    }
	
	.six-stackable .stackable-card.finish:after {
        border-color: transparent #1e4119 transparent transparent;
    }
	
}
/*end media query*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1400px) {
	.heading-card .heading-card-text h2 span {
		font-size: 100px;
	}
	/*stackable cards css*/
	.six-stackable {
        width: 80%;
        margin: 0 auto;
		 margin-left: auto;
    }
	.six-stackable .step {
		font-size: 26px;
	}
	.six-stackable .stackable-card p {
		font-size: 20px;
	}
}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/