/* 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 ========================== */
/* ====================== SOCIAL MEDIA LINKS ========================== */
.social-heading {
	font-size: 28px;
	text-align: center;
}
.social-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.social-links p a {
    border-radius: 50%;
    height: 100%;
    display: block;
	outline: none;
}
.social-links p a img {
    width: 75px;
    height: 75px;
}

/* ====================== GENERAL CSS ========================== */
.homepage-header {
    padding: 60px 30px !important;
}

.header-hr {
    border-bottom: 6px solid #78BE43;
    padding-bottom: 20px;
    margin-bottom: 0;
}

h1.math-heading {
	margin: 0;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.ml-h {
	font-weight: 700;
	letter-spacing: 1px;
}

p.ml-p, ul.ml-ul li {
	letter-spacing: 1px;
}

.bg-grey-xlight {
	background-color: #EEE;
}

.home-social-section-switch {
	background-color: #eee;
}

.bg-gradient {
    background: linear-gradient(297deg, #205C3A 19.44%, #00843D 68.32%);
}

.border-bottom-grey {
	border-bottom: 1px solid #D9D9D9;
}

/* ====================== BUTTONS AND LINKS ========================== */
.ml-button {
    border-radius: 0px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 18px;
    padding: 8px 40px;
}
/* ====================== HOMEPAGE CSS ========================== */
/*HEADER OVERRIDE*/
.jumbo {
	padding-top: 20px;
	padding-bottom: 20px;
}
.home-change-padding {
	background-color: #eee;
}

/***********BLURB BOXES************/
/*MATH SUPPORT SECTION*/
.border-box {
	margin: 0;
	padding: 20px 0 20px;
	background-color: #fff;
}
.border-box div {
	padding: 0;
}
.border-box div:last-child {
	padding: 0 10px;
}

.border-box img {
	width: 100%;
}

/*LOCATION BOX*/
.home-location-blurb {
	background-color: #fff;
    padding: 20px 40px;
}
.home-location-blurb h2 {
	font-weight: 900;
    font-family: "Lato";
    font-size: 22px;
    margin: 0 0 5px 0;
}
.home-location-blurb p {
	color: #275D38;
    margin-bottom: 3px;
}

/*SUPPORT BOX*/
.home-support-blurb {
    display: flex;
    padding: 0 20px 0 0px;
}
.home-support-blurb p.icon {
    flex: 1;
   	margin: 15px 10px 0px 20px;
}
.home-support-blurb div {
    flex: 5;
}

/*TUTORING BOX*/
.home-tutoring-blurb-icons {
    display: flex;
}
.home-tutoring-blurb-icons p {
    margin-right: 20px;
}

/* ====================== SUPPORT CARDS - three links to videos, handouts, online tutoring ========================== */
h2.support-card-heading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
	margin-top: 0;
	margin-bottom: 5px;
}
h3.support-card-info {
    color: #757677;
    margin: 0;
    font-weight: 500;
    font-size: 20px;
}
.support-card {
    min-height: 110px;
    display: flex;
    box-shadow: 4px 4px 11px 0px rgba(0, 0, 0, 0.10);
    background-color: #fff;
    padding: 0px 30px 0px 20px;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
}
.support-card div {
    flex: 5;
}

/*HOVER STATE*/
.support-card:hover {
    background: linear-gradient(144deg, #205C3A 21.08%, #00843D 114.19%);
    color: #fff;
}
.support-card:hover:after, .support-card:hover h2, .support-card:hover h3 {
    color: #fff;
}

.support-card:after {
	content: "";
    font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
    font-size: 38px;
    color: #00843D;
    flex: 1;
}
.support-card-video:after {
	content: "\f144";
}
.support-card-handouts:after {
	content: "\f15c";
}

.support-card-tutoring:after {
	background: url(https://www.uvu.edu/mathlab/images/icons/headphones-green.svg) no-repeat;
	background-size: 32px;
    width: 32px;
    height: 37px;
}
.support-card-tutoring:hover:after {
	background: url(https://www.uvu.edu/mathlab/images/icons/headphones-white.svg) no-repeat;
	background-size: 32px;
    width: 32px;
    height: 37px;
}


/*SUPPORT SERVICE LINKS*/
.support-service-links a {
	color: #275d38;
}

/* ====================== ABOUT PAGE ========================== */
.bg-about {
    background-image: url(https://www.uvu.edu/mathlab/images/headers/about.png);
    padding: 100px 0;
    background-size: cover;
}
.border-box-mission {
    border: 1px solid #D9D9D9;
    padding: 20px;
}

/* ====================== EMPLOYMENT PAGE ========================== */
.bg-employment {
    background-image: url(https://www.uvu.edu/mathlab/images/headers/employment.png);
    padding: 100px 0;
    background-size: cover;
	background-position: center;
}

/*POSITION INFORMATION BOXES*/
.position-box {
	height: 100%;
    border-left: 11px solid #00843D;
    display: flex;
	letter-spacing: 1px;
    padding: 30px 20px 20px;
    background-color: #fff;
}
.position-box .ml-button {
    margin-top: 30px;
    width: 80%;
    text-align: center;
}
.position-title, .position-info {
    flex: 2;
}
.position-info {
    display: flex;
    align-items: center;
}
.position-box h3 {
    margin: 0;
    font-weight: bold;
}
.position-box p {
    margin: 0;
}
.position-box ul {
    color: #275d38;
}
.position-box ul li {
    margin: 5px 0;
}

/* ====================== FACULTY RESOURCES PAGE ========================== */
.bg-faculty {
    background-image: url(https://www.uvu.edu/mathlab/images/headers/faculty-resources.png);
    padding: 100px 0;
    background-size: cover;
	background-position: right;
}

.resource-change-padding {
    padding: 0;
	position: relative;
	z-index: 10;
}
.resource-box {
    background-color: #275D38;
    padding: 20px;
}

p.resource-button {
    text-align: center;
}

.white-padding {
        padding: 40px 15px;
	background-color: #fff;
}



/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	/* ====================== GENERAL CSS ========================== */
	.border-box {
    	padding: 20px;
	}
	.border-box div:last-child {
		padding: 0 0px 0 20px;
	}
	
	/* ====================== HOMEPAGE CSS ========================== */
    .home-support-blurb div {
        flex: 7;
    }
	.home-support-blurb p.icon {
		margin: 15px 20px 0px 0px;
		text-align: right;
	}
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	/* ====================== GENERAL CSS ========================== */
	h1.math-heading {
		font-size: 42px;
	}
	.header-hr {
		border-bottom: none;
		margin: 0;
		display: flex;
		align-items: center;
	}
	.header-hr:before {
		content: '';
		height: 5px;
		background-color: #78BE43;
		flex-grow: 1;
		margin-right: 10px;
	}
	.header-hr:after {
		content: '';
		height: 5px;
		background-color: #78BE43;
		flex-grow: 1;
		margin-left: 10px;
	}
	
	/* ====================== HOMEPAGE CSS ========================== */
	.homepage-header {
		padding: 20px 0 !important;
	}
	.home-social-section-switch {
		background-color: #fff;
		padding: 20px 0 30px;
	}
	.home-tutoring-section-switch {
		background-color: #eee;
	}
	.border-box {
		display: flex;
		align-items: center;
		margin-bottom: 40px;
	}
	.border-box div:last-child {
		padding: 0 30px;
	}
	
	.home-change-padding {
		padding: 0;
		height: 0;
	}
	.home-location-blurb {
		box-shadow: 10px 9px 20.5px 0px rgba(198, 198, 198, 0.40);
		position: absolute;
		top: -200px;
		padding: 20px;
		width: 30%;
		right: 20px;
	}
	
	.home-support-blurb {
		padding: 30px 0;
	}
	
	.support-card {
		min-height: 180px;
		align-items: start;
		flex-direction: column;
		justify-content: end;
		text-align: left;
		padding: 20px;
		position: relative;
	}
	.support-card:after {
		margin: 0;
		right: 10px;
		top: 10px;
		position: absolute;
		font-size: 34px;
	}
	.support-card div, .support-card:after {
		flex: unset;
	}
	
	.home-tutoring-blurb-link-icons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}
	
	/* ====================== BACKGROUND HEADERS ========================== */
		.bg-about {
			min-height: 370px;
			background-size: unset;
		}
		.bg-employment, .bg-faculty {
			min-height: 370px;
		}
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1135px) {
	/* ====================== HOMEPAGE CSS ========================== */
	.border-box-mission {
		margin: 0px 60px;
		padding-right: 40px;
	}
	
	.border-box {
		border: 1px solid #D9D9D9;
	}
	
	.home-button {
    	padding: 8px 70px;
	}
	.home-tutoring-blurb-link-icons {
    	justify-content: start;
	}
	.home-tutoring-blurb-icons {
		margin-right: 40px;
	}
	
	.home-support-blurb div {
		flex: 10;
	}
	
	
	
}

/*end media query*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	/* ====================== FACULTY RESOURCES PAGE ========================== */
	.height-76 {
		height: 75.5px;
	}
	.resource-change-padding {
		background-color: #eee;
		padding-top: 0;
		height: 0;
	}
	.resource-box {
		position: absolute;
		top: -88px;
		margin-left: 15px;
	}
	.resource-button {
		text-align: left !important;
		margin-left: 10px;
		margin-bottom: 0px;
	}
}
/*END OF DOCUMENT*/