/* 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 ========================== */

/*------------------GLOBAL CSS------------------*/
h1, h2 {
	font-family: "Raleway", arial, sans-serif;
	font-weight: bold;
	letter-spacing: 1px;
}
h3, h4, h5 {
	font-family: 'Lato', sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
}
p {
	letter-spacing: 1px;
}
.header-hr {
	display: flex;
    align-items: center;
}
.header-hr:before {
    content: '';
    height: 5px;
    background-color: #f4f4f4;
    flex-grow: 1;
    margin-right: 10px;
}
.header-hr:after {
    content: '';
    height: 5px;
    background-color: #f4f4f4;
    flex-grow: 1;
    margin-left: 10px;
}

.tutoring-home {
	padding-top: 90px;
	padding-bottom: 140px;
}
.tutoring-home h1 {
	font-size: 16px;
	position: absolute;
	bottom: -130px;
	margin: 0;
}

/*top section image*/
.img-margin-change {
    margin-bottom: -250px;
    z-index: -1;
    position: relative;
	text-align: center;
}

/*course info css found on tutoring page*/
.course-info {
	padding: 20px;
}
.course-info a {
	color: #fff;
}
.course-info a:hover {
	color: #275d38;
	text-decoration: none;
}
.course-info img {
    width: 30px;
}

/*background colors and images*/
.bg-grey-light {
    background-color: #f4f4f4;
}
.bg-icons {
	background-image: url("https://www.uvu.edu/academictutoring/images/headers/tutoring-icons.png");
}

/*buttons and links*/
.tutoring-link {
    color: #00843d;
	
}
.tutoring-link:hover, .tutoring-link:active {
	color: #78be20;
	text-decoration: none;
}
.tutoring-link-dark:hover, .tutoring-link-dark:active {
	color: #fff;
	text-decoration: none;
}

.social-icon a:focus .social-icon a img {
	border: dashed 2px #62A61E;
}
.social-icon a img:hover {
	transform: scale(1.1,1.1);
}
.tutoring-button {
	font-family: 'Lato', sans-serif;
    font-weight: bold;
    border-radius: 25px;
    padding: 10px 30px;
    letter-spacing: 1px;
}
.button-resize {
	text-align: center;
    margin-bottom: 0px;
}
.button-resize a, .button-resize-home a {
    margin-bottom: 0px;
    font-size: 20px;
    padding: 10px 60px;
}
.button-resize a {
	margin-top: 30px;
}

.tutoring-button-small {
	padding: 5px 50px !important;
	font-size: 16px;
}
.button-small-resize {
    text-align: center;
}

.button-images {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.button-images .icons {
	margin-bottom: 20px;
}

/*CARDS CSS*/
/*three cards---white*/
.three-card-white {
    background-color: #fff;
    height: 100%;
    padding: 10px 30px 20px 30px;
    color: #000;
    border: 5px solid #D9D9D9;
}
.three-card-white .three-card-image {
    margin-top: 30px;
}
.three-card-header h3, .three-card-header h4 {
    font-weight: bold;
}
.three-card-header h4 {
    margin-top: 0px;
}
.three-card-content, .three-card-hours {
    margin-bottom: 30px;
}
.three-card-hours p {
	margin: 0px;
}
.three-card-button a {
    width: 100%;
	padding: 5px;
}
.three-card-hours {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.three-card-hours-info {
    text-align: right;
}

/*two cards*/
.two-card-divide {
    position: relative;
}
.two-card-divide h2 {
	margin-top: 0px;
}
.two-card-first {
    padding-bottom: 20px;
    border-bottom: 5px solid #e8e8e8;
}

/*three cards*/
.three-card-divide h3 {
	margin-top: 0px;
}
.three-card-first {
	padding-bottom: 20px;
    border-bottom: 5px solid #D9D9D9;
}
.three-card-last {
	padding-top: 20px;
	border-top: 5px solid #D9D9D9;
}
.three-card-light.three-card-first {
	border-bottom: 5px solid #F4F4F4;
}
.three-card-light.three-card-last {
	border-top: 5px solid #F4F4F4;
}

/*six-cards--three cards in a row*/
.divide-six .three-card-divide {
	border-bottom: 5px solid #d9d9d9;
	padding: 20px 0px;
}
.divide-six .three-card-last {
	border: 0px;
}
.divide-six .three-card-divide img {
	margin-top: 20px;
}

/*five cards*/
.five-divide {
    text-align: center;
    padding: 10px 30px;
}

/*SI ACCORDION GRID*/
.flex-direction-col {
	flex-direction:column;
}

/*SI b2a blurb*/
.b2a-blurb {
	text-align: center;
}

/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	.accordion-grid {
		grid-template-columns: 1fr 1fr;
    	max-width: 900px;
		grid-gap: 0.5em;
    	grid-auto-flow: dense;
    	margin: 0 2rem;
	}
	
	.b2a-blurb {
		display: flex;
		justify-content: center;
		padding: 0 30px;
		align-items: center;
		text-align: left;
	}
	.b2a-blurb p {
    	margin: 0;
    	padding: 0px 30px 0px 0px;
	}
	
	
	.tutoring-home h1 {
		font-size: 22px;
		bottom: -120px;
	}
	
	.button-resize {
		text-align: left;
		margin-top: 15px;
	}
	.button-resize-home {
		text-align: center;
	}
	.button-resize a {
		font-size: 18px;
	}
	.button-resize-home a {
		font-size: 20px;
		padding: 10px 70px;
	}
	
	.section-resize {
    	margin-top: 10px;
    	font-size: 18px;
	}
	.img-margin-change {
		margin-bottom: 0px;
	}
	
	.course-info {
		font-size: 18px;
	}
	
	.button-images {
		margin-top: 50px;
	}
	
	/*two card css*/
	.two-card-first:before {
		background-color: #f4f4f4;
		content: '';
		height: 450px;
		position: absolute;
		left: 0;
		top: 0;
		width: 5px;
	}
	.two-card-first:after, .two-card-last:after {
		background-color: #f4f4f4;
		content: '';
		height: 450px;
		position: absolute;
		right: 0;
		top: 0;
		width: 5px;
	}
	.two-card-first {
		padding: 20px 20px 0px 20px;
		border-bottom: 0;
	}
	.two-card-last {
		padding: 20px 20px 0px 0px;
	}
	
	.two-card-dark:after, .two-card-dark:before {
		background-color: #d9d9d9;
	}
	.two-card-first.two-card-dark:after, .two-card-first.two-card-dark:before, .two-card-last.two-card-dark:after {
		height: 400px;
	}
	
	/*three card css*/
	.three-card-divide {
		position: relative;
		padding-top: 20px;
		padding-right: 20px;
		height: 380px;
	}
	.three-card-first, .three-card-last {
		padding: 20px 30px 0px 20px;
		border-bottom: 0;
		border-top: 0;
	}
	.three-card-img {
		position: absolute;
		bottom: 0;
		text-align: center;
		left: 25%;
		right: 25%;
	}
	
	.three-card-light.three-card-first, .three-card-light.three-card-last {
		border: 0;
	}
	.three-card-first:after, .three-card-last:after {
		content: '';
		position: absolute;
		background-color: #D9D9D9;
		height: 380px;
		width: 5px;
		right: 0;
		top: 0;
	}
	.three-card-light:after, .three-card-light:before {
		background-color: #F4F4F4 !important;
	}
	
	/*six card css-three card in a row*/
	.divide-six .three-card-first:after, .divide-six .three-card-last:after {
		position: relative;
	}
	.divide-six .three-card-divide {
		border: 0;
		padding: 20px 30px 0px 20px;
	}
	.divide-six .three-card-odd:after {
		content: '';
		position: absolute;
		background-color: #D9D9D9;
		height: 380px;
		width: 5px;
		right: 0;
		top: 0;
	}
	
	
	/*five card css*/
	.five-divide {
		padding: 0px;
	}
	/*SI page alignment*/
	.heading-box {
		width: 750px;
	}
	
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	
	
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1000px) {
	.button-images .icons {
    	margin-bottom: 0;
	}
	.button-images {
		margin-top: 20px;
	}
	
	.heading-box {
		width: 950px;
	}
	.accordion-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	.b2a-blurb {
		padding: 0 135px;
	}
	.b2a-blurb p {
    	padding: 0px 100px 0px 0px;
	}
	
	.tutoring-home {
		padding-top: 90px;
		padding-bottom: 100px;
	}
	.tutoring-home h1 {
		font-size: 24px;
		bottom: -80px;
		left: 50px;
		right: 50px;
	}
	.divide-six .three-card-divide {
    	height: 420px !important;
	}
	
	.section-resize {
    	margin-top: 30px;
    	font-size: 22px;
	}
	.button-small-resize {
    	text-align: right;
		margin-top: 50px;
	}
	
	.course-info {
		font-size: 20px;
		padding: 15px 100px 10px 100px;
	}
	.course-info img {
    	width: 40px;
	}
	
	/*two card css*/
	.two-card-first:before, .two-card-first:after, .two-card-last:after {
		height: 340px;
	}
	.two-card-first {
		padding: 20px 40px 0px 40px;
	}
	.two-card-last {
    	padding: 20px 40px 0px 10px;
	}
	
	/*three card css*/
	.three-card-divide {
		padding: 20px 30px 0px 10px;
	}
	.three-card-first, .three-card-last {
		padding: 20px 25px 0px 30px;
	}
	.three-card-last:after, .three-card-first:after {
		height: 380px;
		right: 0;
	}
	.three-card-last:before, .three-card-first:before {
		content: '';
		position: absolute;
		background-color: #D9D9D9;
		height: 380px;
		width: 5px;
		top: 0;
		left: -10px;
	}
	
	/*six card css- three cards in a row*/
	.divide-six .three-card-odd:after {
		position: relative;
		height: 380px;
	}
	.divide-six .three-card-first:after, .divide-six .three-card-last:after {
		position: absolute;
	}
	
	/*five card css*/
	.divide-five {
		flex-wrap: nowrap;
	}
	
}
/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	.button-images {
    	margin-top: 0;
	}
	.button-images {
		display: flex;
		justify-content: start;
		align-items: center;
		flex-direction: row;
	}
	.button-images .icons {
		margin-left: 60px;
	}
	.two-card-first.two-card-dark:after, .two-card-first.two-card-dark:before, .two-card-last.two-card-dark:after {
		height: 280px;
	}
}
/*End desktop only styles*/
/*END OF DOCUMENT*/