/* 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 editing*/
.ou-justedit-region .text-white {
    color: #000;
}

.box-shadow-section {
	box-shadow: 0px 5px 6px #00000014;
	z-index: 0;
}

/*GEN PAGE HEADER CSS*/
.flex-col-row {
    display: flex;
    flex-direction: column;
}
.head-img-end {
    padding-bottom: 35px;
}
/*******************HOMEPAGE HEADER CSS*********************/
.homepage-header {
    padding: 0;
    height: 800px;
    background-size: 800px !important;
    display: flex;
    align-items: end;
    background-position: top;
}
.homepage-header > div {
    display: contents;
}
.homepage-header header {
    color: #fff;
	width: 100%;
    background-color: #275d38;
	border-radius: 0 !important;
    padding: 40px 10px;
	z-index: 1;
}
.homepage-header header  h1 {
    margin: 0;
    padding-bottom: 10px;
}
.homepage-header header p {
	margin-top: 10px;
	font-size: 18px;
}

/*******************HOVER CARD CSS*********************/
.card-hover {
	border-radius: 10px;
	min-height: 330px !important;
}
.card-hover-img {
	opacity: 0.6;
}
.card-hover-container {
	background-color: rgba(0, 0, 0, 0.0);
}

/*icons on hover cards*/
.card-hover-front {
	display: none;
	padding-top: 15px;
}
.card-hover-title, .card-hover-back {
    position: relative;
}

h2.card-hover-title {
    text-transform: uppercase;
    font-weight: bold;
}
.card-hover-back h3 {
    color: #fff;
    font-family: "Lato";
    font-weight: 600;
    font-size: 20px;
	width: 100%;
	    margin-bottom: 20px;
	margin-top: 5px;
}
.card-hover-back {
	padding: 20px;
}
.card-hover-back h3 a {
    font-weight: 600;
	text-decoration: underline;
    font-size: 19px;
    font-family: "Lato";
	color: #fff;
}

.card-hover a.hover-link {
	color: #fff;
	width: 100%;
    background-color: #185c33;
    display: block;
    font-weight: bold;
    font-size: 18px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
    position: relative;
    padding: 15px 20px;
	display: flex;
	border: 2px solid #275D38;
    justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	transition: all 300ms;
}
.card-hover a.hover-link:after {
	content: "\f061";
    font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
}

/*******************STYLED PICTURE CSS*********************/
p.image-styled img {
    border-radius: 10px;
}
p.image-styled {
    position: relative;
}
p.image-styled::before {
	content: "";
    background: url(/educational-support-services/images/assets/rectangle-stripe.png) no-repeat;
    position: absolute;
    background-size: 100%;
    right: -20px;
    top: -15px;
    z-index: -1;
    width: 350px;
    height: 400px;
}

/************STAFF CARDS CSS************/
.card-staff-5 {
	background-color: var(--color-uvu-primary);
    color: #fff;
	border-radius: 8px;
}
.card-staff-5 .card-staff-name, .card-staff-5 a, .card-staff-5 a:hover {
	color: #fff !important;
}
.card-staff-5 .card-staff-portrait {
	display: none;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
}
.card-staff-5 .card-staff-details .card-staff-name {
    font-size: 1.65em;
}
.card-staff-5 .card-staff-details .card-staff-title {
	color: #fff;
	font-size: 1.2em;
}
p.card-staff-email, p.card-staff-directory, .card-staff-officecontact {
    margin: 0;
	color: #fff;
}

/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	.two-column {
		column-count: 2;
	}
	
	.card-staff-5 .card-staff-portrait {
		display: block;
	}
	/*GEN PAGE HEADER CSS*/
	.flex-col-row {
        flex-direction: row;
    }
	.header-text {
        padding-left: 0;
    }
	 .head-img-end {
        margin-left: auto;
        padding-bottom: 0;
    }
	/*******************HOMEPAGE HEADER CSS*********************/
	.homepage-header {
        display: block;
        height: 500px;
        background-position: left;
        position: relative;
        background-size: 1100px !important;
    }
	.homepage-header header {
        height: 100%;
        padding: 20px 0px 20px 20px !important;
        width: 45%;
        z-index: 5;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
	.homepage-header header h1 {
		font-size: 40px;
	}
	
	.fern-border-bottom::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
		bottom: -10px;
        height: 10px;
        background-image: url(/educational-support-services/images/assets/bg-repeat-meadow-lines.svg);
        background-repeat: repeat-x;
        background-size: auto 100%;
    }
	
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	/* ====================== HOVER CARD CSS ========================== */
	.card-hover-img {
		opacity: 0.8;
	}
	.card-hover {
		    min-height: 630px !important;
	}
	/*icons on hover cards*/
	.card-hover-title {
		font-size: 30px !important;
	}
	.card-hover-title:after {
		content: "\f067";
		font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
		position: absolute;
		bottom: -60px;
		left: 0;
		right: 0;
		color: #fff;
		font-size: 24px;
	}
	
	.card-hover-front {
		display: block;
	}
	.card-hover-back {
		background-color: #275D38;
		padding: 20px 30px !important;
	}
	.card-hover-back h2 {
		text-align: center;
	}
	
	.card-hover-back:before {
	   content: "\f0d7";
		font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
		position: absolute;
		top: -25px;
		font-weight: bold;
		text-align: center;
		left: 0;
		right: 0;
		top: 0;
		color: #fff;
		font-size: 40px;
	}
	.card-hover a.hover-link {
		background-color: #fff !important;
		color: #275D38 !important;
	}
	
	/*******************HOMEPAGE HEADER CSS*********************/
	.homepage-header header {
		padding: 20px !important;
		width: 40%;
	}
	.homepage-header header h1 {
		font-size: 44px;
	}
	
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	/*******************HOMEPAGE HEADER CSS*********************/
	.homepage-header {
		background-size: 1000px !important;
		background-position: right;
	}
	.homepage-header header {
		padding: 40px !important;
		display: flex;
        flex-direction: column;
        justify-content: center;
	}
	.homepage-header header h1 {
        font-size: 54px;
    }
	
	/* ====================== HOVER CARD CSS ========================== */
	.card-hover {
        min-height: 560px !important;
    }
}

/*end media query*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1500px) {
	/*******************HOMEPAGE HEADER CSS*********************/
	.homepage-header {
		background-size: 1200px !important;
	}
	.homepage-header header {
		padding: 80px !important;
	}
	
}

/*end media query*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1750px) {
	/*******************HOMEPAGE HEADER CSS*********************/
	.homepage-header {
		background-size: 1300px !important;
		height: 600px;
	}
	.homepage-header header {
		padding: 120px !important;
	}
	
}

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