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

/* adds a semi-transparent color over header images */
.fullbleed:has(h1):before {	
	background: linear-gradient(to bottom, #00000080, #00000080);
}
.row.equal-height {
	align-items: stretch;
}
.light {
	font-weight: 400;
}

.jumbo header h1 {
	font-weight: 600;
	font-size: 2em;
	color: white;
}

.long-text {
	font-size: 1.25em;
	max-width: 80ch;
	line-height: 1.5em;
	margin-inline:auto;
}

h2 {
    font-family: "Rajdhani", sans-serif;
    font-size: 1.75em;
    font-weight: 900;
    text-align: center;
/*     text-transform: uppercase;	 */
	color:black;
}

h3 {
	font-weight: 900;
	color: var(--color-uvu-primary);
	font-size: 1.5em;
}

.display-grid {
	display: grid;
}

/* External Links */
ul.external-links {
	list-style: none;
	padding-left: 0;
	margin-left: 30px;
	text-indent: -28px;
	
}
.external-links a{
    color: #275D38;
/*     text-transform: uppercase; */
    text-align: left;
    text-decoration: underline;
    font: normal normal bold 16px/21px Rajdhani;
	text-wrap: balance;
}
.external-links a:before {
    content: "\f08e";
    font-family: "Font Awesome 5 Pro";
    color: #030303;
    padding-right: 10px;
    text-decoration: none;
}

/* Connection Cards */

.card-staff-5 {
		height: 100% !important;
		border-radius: 8px;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
		
	}
.directory .card-staff.card-staff-5 {    
	height: calc(100% - 30px) !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
   }
 .card-staff-5 .card-staff-portrait img {
	max-width: none;
	 height: auto;
/* 	 width: auto !important */
}
   .directory  .card-staff-5 .card-staff-portrait img {
            height: 100%;
	   max-width: 100%;

        }
 .card-staff-5 .card-staff-portrait img {
	max-width: none;
}

    
  .card-staff-5 .card-staff-details .card-staff-title{
        font-size: 1.15em !important;
    }
    .card-staff-details .card-staff-name {
        text-transform: none !important;
        color: var(--color-uvu-primary);
		font-size: 1.33em;
		font-weight: 700;
    }
.card-staff-5.smaller {
	min-height: 0 !important;
 }
   .card-staff-5.smaller .card-staff-portrait {
        width: 30% !important;   
}


.degree-type .transform-grid-cell {
	padding: 0 20px 60px;
	position: relative;
}
.degree-type .card-staff-5 {
	position:revert !important;
}
.degree-type .card-staff-5 .card-staff-details h3 {
	margin: 20px 10px 10px 0;
	color: var(--color-uvu-primary);
	font-size: 1.25em;
	border-bottom: 3px solid #E8E8E8;
	font-weight: 900;
}
.degree-type .card-staff-5 .card-staff-details {
	padding-right: 20px;
}
/*.degree-type .card-staff-5 .card-staff-details p {
 	margin-bottom: 60px;
} */
.degree-type .card-staff-5 .buttons {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 35px;
    left: 10%;
    z-index: 1;
    width: 90%;
    padding: 0;
}
.buttons a {
	display: block;
	font-weight: 600;
	border-bottom: none;
	padding: 10px 20px;
	box-shadow: 0px 3px 6px #00000029;
	border-radius: 10px;
	background-color: #fff;
	min-width: 160px;
	text-align: center;
}

.card.dates {
	padding: 40px 0;
}

/* Cards over Pictures */

.tradition-pic, .resource-pic {
	position: relative;
	padding-inline: 0;
	min-height: 300px;
	
}
	.tradition-pic {
		background: url("../jpg/traditions.jpg") top left no-repeat;
		background-size: contain;
	}
	.resource-pic {
		background: url("../jpg/resources.jpg") bottom center no-repeat;
		min-height: 400px;
		background-size: contain;
	}
			
.card-over {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: white;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	width: 400px;
	position: absolute;
	left: calc(50% - 200px);
	bottom: 10%;
}
	.card-over h3 {
		margin-block: 0;
	}
	.resource-pic .card-over {
		bottom: 20%;
	}

/* resource section */

.resource-section {
	background-color: #F8F8F8;
	border-radius: 8px;
	margin-bottom: 20px;
	padding: 20px;
}

.resource-section .name {
	padding-inline-end: 20px;
}
	.resource-section h3 {
		margin-top: 0;
	}

.resource-links ul, .resource-links li:first-child {
	padding-top: 0;
	margin-top: 0;
}

/* 	follow us section */
	.social {
		background-color: var(--color-uvu-primary);
		padding: 20px;
		border-radius: 8px;
		color: #fff;
		width: 100%;
	}
	.social a, .social h4 {
		color: #fff;
	}
	.social h4 {
		font-size: 1.75em;
		font-weight: 900;
		margin-bottom: 40px;
	}
	.social a {
		text-decoration: underline;
	}
	.social a .span {
		text-decoration: none;
	}
	.app {
		font-size: 1.25em;
		margin-top: 40px;
		font-weight: 600;		
		
}

		.app a {
			background-color: #fff;
			border: 2px solid var(--color-uvu-primary);
			border-radius: 10px;
   			padding: 15px 20px;
    		margin-bottom: 10px;
			width: 100%;
			position: relative;
			display: inline-block;
		}
		.app a:after {			
			content: "\f061";
			display: inline;
			font-family: "Font Awesome 5 Pro";
			float: right;
		}
	.phones {
		display:none;
	}

.connect .app a {
	background-color: #f3f7f1;
}
.connect {
    position: relative; /* Ensure the container is positioned */
}

.connect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(325deg, white, white 40%, #f3f7f1 40%, #f3f7f1);
    z-index: -1;
}

/* Original gradient for the main content */
.connect {
    background: linear-gradient(210deg, #d9e4cf, #d9e4cf 40%, transparent 40%, transparent);
}



/* wolverine hr */

hr.wolverine-icon::before {
    background-color: white;
    padding-inline-start: 15px;
    padding-inline-end: 15px;
    position: absolute;
    top: -15px;
    left: calc(50% - 30px);
    content: url("../png/wolverine-2.png");
}

h2.traditions:after {
    content: '\f107' !important;
    font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
    font-size: 2em;
    font-weight: 200;
    position: absolute;
    color: var(--color-uvu-primary);
    bottom: -.75em;
    right: 50%;
    scale: 1.15 1;
}



.really-big {
	color: var(--color-uvu-primary);
	font-size: 2.75em;
	font-weight: 900	
}
.really-big.den {
	color: white;
}
.lime-green {
	font-size: 1.75em;
	color: #5A9D2C;
}
.fight-song {
	font-size: 1.375em;
	margin-inline: auto;
		display: grid;
		justify-content: center;
	color: var(--color-uvu-primary);
}
.fight-song p {
	margin-bottom: 1em;
}
.fight-song::before {
    position: absolute;
    background: url(../png/square-top.png) no-repeat;
    background-size: 70%;
    left: 0;
    top: -120px;
    width: 20%;
    height: 100%;
    z-index: 1;
    content: "";
}
.fight-song::after {
    position: absolute;
    background: url(../png/circle-bottom.png) no-repeat;
    background-size: 70%;
    right: -10%;
    bottom: -100%;
    width: 40%;
    height: 100%;
    z-index: 1;
    content: "";
}

.willy-pic {
		background: #f9f9f9 url("../png/wolverine-background.png") no-repeat center center;
	background-size: 75% auto;
	} 

/* move pictures on traditions page left and right  */
	.move-left {
		min-width: 115%;
		position: relative;
		left: -20%;
	}
.move-right {
		min-width: 115%;
		position: relative;
		left: -5%;
	}
.move-left.hand-sign {
	left: -10%;
}
	


/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	
	.first-section {
		padding-top: 40px;
	}
	
	 .card-staff-5 .card-staff-portrait img {
	 height: 100%;
}
	
	.tradition-pic .card-over {
left: -40px;
}
	.resource-pic .card-over {
		bottom: 30%;
	}
	
	.resource-section {
		display: flex;
	}

	.resource-section .name, .resource-section .resource-links {
	flex-basis: 50%;
}

	.phones {
		display: block;
		padding-top: 80px;
	}

	.app {
		font-size: 1.75em;
		margin-top: 20px;
		font-weight: 600;
	}
		.app a {
			background-color: #fff;
			padding: 0;
			padding-right: 20px;
			text-decoration: underline;
			border: none;
			display: inline;
			width: auto;
		}
		.app a:after {
			content: "";
		}
	.social {
		width: 80%;
	}
	
		.fight-song::before {
   left: 10%;
}
/* 	move images left or right on the traditions page */
		.move-left {
		left: -10%;
	}
		
	
}/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	
	
	.resource-links ul {
	columns: 2;
		column-gap: 3em;
}
	.resource-pic {			
		background-size: contain;
		background-position: top right;
	}

 	.app {
		background: url("../png/arrow.png") repeat-x center right;
	} 
	
	
	h2.really-big {
	color: var(--color-uvu-primary);
	font-size: 3.75em;
	font-weight: 900
		
}
.lime-green {
	font-size: 2.375em;
	color: #5A9D2C;
}
	.fight-song {
		font-size: 2em;
	}
	
	.fight-song::before {
   left: 5%;
    top: -100px;
}
	.fight-song::after {    
    bottom: -90%;
}
	
	.move-right {
			left: 0;
		}

	
}/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	
	
		.resource-pic .card-over {
		left: -40px;
	}
	
	.fight-song::before {
   left: 10%;
    top: -100px;
}

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