/* 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 ========================== */
/*-- General Text Styles --*/
.mobile-center {
	text-align: center;
}

.left-mobile {
	text-align: left;
}

/* =========== Header =========== */
.diagonal-header {
	height: 400px;
	z-index: -1;
	background-position: bottom;
	border: 0;
}

.diagonal-header h1 {
	letter-spacing: 1px;
	margin-left: -50px;
	font-size: 3rem !important;
}

.diagonal-header.team {
	background-position: center;
}

.diagonal-header.spo {
	background-position: top;
}

div.colorful-lines {
	height: 12px;
	background-image: url('/talentsourcing/images/colorful-slant-line.png');
	background-position: left;
	background-size: contain;
	background-repeat: no-repeat;
}

.diagonal-header div.colorful-lines {
	margin-left: -50px;
}

.design-your-career-header {
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0 !important;
	margin: 0 !important;
}

.resources-header {
	background-position: center right;
}

/* =========== Diagonal Separators =========== */
.diagonal-header:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	z-index: 10;
	right: 0;

	border-bottom: 18vw solid #fff;
	border-right: 100vw solid transparent;
	bottom: 0;
}

.footer-diagonal:before  {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	z-index: 10;
	right: 0;

	border-top: 18vw solid #fff;
	border-left: 100vw solid transparent;
	margin-top: -40px;
}
.grey-diagonal:after {
	border-bottom-color: #f6f6f7;
	bottom: 0px;
}
.grey-diagonal:before {
	border-top-color: #f6f6f7;
}



/* =========== Heading Cards =========== */
.heading-card, .team-card, .resource-card {
	box-shadow: 0 0 5px rgba(0,0,0,.25);
	transition: 0.2s ease-in-out all;
}

.heading-card .heading-card-img {
	background-color: black;
}

.heading-card .heading-card-img img {
	height: 450px;
	width: 100%;
	object-fit: cover;
	object-position: bottom;
	filter: grayscale(100%);
	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(0);
}

.heading-card .heading-card-text {
	position: absolute;
	bottom: 60px;
	left: 10%;
	transition: 0.2s ease-in-out all;
}

.heading-card .heading-card-text h2 {
	color: white;
	max-width: 45%;
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
}

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

.resources-cards .container-fluid {
	max-width: 1500px;
	margin: 0 auto;
}

.resources-cards .region:nth-child(2) .heading-card .heading-card-img img {
	object-position: top right;
}


.resources-cards .region:nth-child(4) .heading-card .heading-card-img img {
	object-position: center right;
}

/* =========== Team / Resources Cards =========== */
.team-card .team-card-img, .resource-card .resource-card-img {
	max-height: 450px;
	overflow: hidden;
	background-color: black;
}
.resource-card .resource-card-img img {
	opacity: 0.6;
}
.team-card .team-card-img img {
	height: 450px;
	width: 100%;
	object-fit: cover;
	object-position: center;
}
.team-card .team-card-name h2, .resource-card .resource-card-title h2 {
	position: absolute;
	color: white;
	font-weight: 600;
	bottom: 120px;
	left: 40px;
	max-width: 80%;
	font-size: 42px;
	text-shadow: 0 0 3px rgba(0,0,0,.75);
	transition: 0.2s ease-in-out all;
}
.resource-card .resource-card-title h2 {
	bottom: 150px;
	max-width: 300px;
}
.team-card .team-card-text, .resource-card .resource-card-content {
	padding: 30px 20px;
	background-color: white;
	border-bottom: 4px solid #0095c8;
}
.team-card .team-card-text p {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	text-align: center;
	margin-bottom: 0;
	font-family: 'Raleway', san-serif;
}

.team-card:hover,
.team-card:focus,
.team-card:target,
.resource-card:hover,
.resource-card:focus,
.resource-card:target {
	transition: 0.2s ease-in-out all;
	box-shadow: 0 0 10px 2px rgba(0,0,0,.5);
}



/* =========== Ghost Buttons =========== */
.ghost-btn {
	display: inline-block;
	vertical-align: calc(-100% - 2px);
	color: #000;
	border: 1px solid #000;
	font-weight: bold;
	padding: 15px 30px;
	margin: 20px 0;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	z-index: 2;
	outline-offset: -2px;
}
.ghost-btn:focus, .ghost-btn:hover {
	outline: 1px solid #000;
	color: #000;
}
.ghost-btn::before, .ghost-btn::after { /* (Default) GREEN BTN */
	content: '';
	position: absolute;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 95px solid rgba(120, 190, 32, 0.5);
	z-index: -1;
	left: 50%;
	will-change: transform;
	transform: translate(-50%, 0);
	top: calc(100% + 1px);
	transition: all .5s;
}
.ghost-btn.orange::before, .ghost-btn.orange::after { /* ORANGE BTN */
	border-bottom: 95px solid rgba(212, 93, 0, 0.5);
}
.ghost-btn.blue::before, .ghost-btn.blue::after { /* BLUE BTN */
	border-bottom: 95px solid rgba(0, 149, 200, 0.5);
}
.ghost-btn.purple::before, .ghost-btn.purple::after { /* PURPLE BTN */
	border-bottom: 95px solid rgba(	89, 84, 120, 0.5);
}
.ghost-btn.gold::before, .ghost-btn.gold::after { /* GOLD BTN */
	border-bottom: 95px solid rgba(	255, 181, 0, 0.5);
}
.ghost-btn.dark::before, .ghost-btn.dark::after { /* DARK BTN */
	border-bottom: 95px solid rgba(0, 0, 0, 0.5);
}
.ghost-btn.dark {
	color: #fff;
	border: 1px solid #fff;
}
.ghost-btn.dark:focus, .ghost-btn.dark:hover {
	outline: 1px solid #fff;
	color: #fff;
}
.ghost-btn:focus::before, .ghost-btn:hover::before {
	transform: translate(-50%, -80%);
}
.ghost-btn:focus::after, .ghost-btn:hover::after {
	transition-delay: .2s;
	transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
	.ghost-btn::before,
	.ghost-btn::after {
		transition: none !important;
	}
}

/* =========== Careers & Internships Section & SOCIAL Styles =========== */
.pencil-bg, .social-bg {
	background-image: url(/talentsourcing/images/page-career-internships.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 350px;

}

.pencil-bg div.row, .social-bg div.row {
	display: flex;
	align-items: center;
	justify-content: center;
}

.floating-text {
	z-index: 12;
	background-color: #4ba23f;
	text-align: center;
	padding: 20px 40px;
	max-width: fit-content;
}

.floating-text h2 {
	color: white;
	font-weight: 500;
	letter-spacing: 1px;
}

.social-bg {
	background-image: url('/talentsourcing/images/social-media-2.jpg');
	background-position: center left;
}

.get-social.floating-text {
	background-color: #d45d00;
}

.get-social.floating-text .social-icons .fa {
	color: white;
	transition: 0.2s ease-in-out all;
}

.get-social.floating-text .social-icons .fa:hover,
.get-social.floating-text .social-icons .fa:target,
.get-social.floating-text .social-icons .fa:focus {
	color: black;
	cursor: pointer;
}

/* ============ Design Your Career ============ */
.footer-diagonal.grey-diagonal .container-fluid {
	padding-top: 215px;
}

.pathwayU {
	width: 70%;
	text-align: center;
	margin: 20px 15%;
}

/* Navigation Card Button Styles */
.tab-btns {
	margin-top: -75px;
}

.tab-btns .tabs {
	padding: 0;
}

.tab-btns .tabs li a {
	color: black;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;

	display: flex;
	flex-direction: column-reverse;
}

.tab-btns .tabs li a img {
	margin-bottom: 15px;
}

.tab-btns .tabs li {
	width: 50%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 15px 10px;
	z-index: 5;
}
.tab-btns .tabs li:nth-child(5) {
	width: 100%;
}
.tab-btns .tabs li:before {
	content:"";
	z-index:-1;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.tab-btns .tabs li, .tab-btns .tabs li:before, .tab-btns .tabs li a {
	background-size: 100% 200%;
	background-position: top;
	transition: background-position 0.3s ease-in-out;
}
.tab-btns .tabs li:nth-child(1) {
	border-bottom: 5px solid #4ba23f;}

.tab-btns .tabs li:nth-child(1):before {
	background-image: linear-gradient(to top, #4ba23f 50%, transparent 50%);
}

.tab-btns .tabs li:nth-child(2) {
	border-bottom: 5px solid #00843d;
}

.tab-btns .tabs li:nth-child(2):before {
	background-image: linear-gradient(to top, #00843d 50%, transparent 50%);
}

.tab-btns .tabs li:nth-child(3) {
	border-bottom: 5px solid #35712c;
}

.tab-btns .tabs li:nth-child(3):before {
	background-image: linear-gradient(to top, #35712c 50%, transparent 50%);
}

.tab-btns .tabs li:nth-child(4) {
	border-bottom: 5px solid #275d38;
}

.tab-btns .tabs li:nth-child(4):before {
	background-image: linear-gradient(to top, #275d38 50%, transparent 50%);
}

.tab-btns .tabs li:nth-child(5) {
	border-bottom: 5px solid #1e482c;
}

.tab-btns .tabs li:nth-child(5):before {
	background-image: linear-gradient(to top, #1e482c 50%, transparent 50%);
}

.tab-btns .tabs li:hover, .tab-btns .tabs li:focus, .tab-btns .tabs li:target,
.tab-btns .tabs li:hover:before, .tab-btns .tabs li:focus:before, .tab-btns .tabs li:target:before,
.tab-btns .tabs li:hover a, .tab-btns .tabs li:focus a, .tab-btns .tabs li:target a {
	background-position: bottom;
}
.tab-btns .tabs li a {
	text-align: center;
	font-weight: 800;
	letter-spacing: 0.5px;

	padding:20px;
	position:relative;

	background-image: linear-gradient(to top, white 50%, #000 50%);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.tab-btns .tabs li:hover a, .tab-btns .tabs li:target a, .tab-btns .tabs li:focus a {
	text-decoration: none !important;
	background-position: bottom;
}
/* End Navigation Card Button Styles */

/* ============= Career Resources Pg ============= */

.underline-hover a, .border-left-hover a, .button-slide-hover a {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	color: black;
	transition: 0.2s ease-in-out all;
	padding-bottom: 2px;
	border: 0px;
}

.underline-hover .flex a {
	margin: 0;
}

.underline-hover .flex li {
	margin: 0;
	margin-bottom: -5px;
}
.underline-hover .flex {
	display: block;
}

.button-slide-hover {
	color: white;
}

.underline-hover a:hover, .underline-hover a:target, .underline-hover a:focus
{
	text-decoration: none;
	border-bottom: 4px solid #595478;
}

.border-left-hover a {
	display: block;
}

.border-left-hover a:hover, .border-left-hover a:target, .border-left-hover a:focus {
	text-decoration: none;
	border-left: 4px solid #d45d00;
	padding-left: 10px;
}

.border-left-hover .blue a:hover, .border-left-hover .blue a:target, .border-left-hover .blue a:focus  {
	border-left: 4px solid #0095c8;
}

.border-left-hover .green a:hover, .border-left-hover .green a:target, .border-left-hover .green a:focus  {
	border-left: 4px solid #4ba23f;
}

.resources-right-triangle-svg {
	z-index: -10;
	width: 100%;
	height: 600px;
	margin-top: -700px;
	margin-bottom: -5px;
}

.border-left-hover .no-list li {
	margin: 0;
	margin-bottom: -10px;
}

.border-left-hover#internships .no-list li {
	margin-bottom: 10px;
}

/* Button Slide Hover */
.button-slide .flex {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0; margin: 0;
	flex-direction: column;
}


a.button-slide-hover {
	font-size: 1rem;
	overflow: hidden;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 1;
	margin: 10px auto;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
}

a.button-slide-hover span {
	display: block;
	overflow: hidden;
	padding: 15px;
	background-color: #0095c8;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

a.button-slide-hover::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 97%;
	color: #000;
	background-color: #4db5d9;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	padding: 15px;
	-webkit-transform: translateX(-25%);
	-moz-transform: translateX(-25%);
	transform: translateX(-25%);
}

a.button-slide-hover:hover span,
a.button-slide-hover:focus span {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

a.button-slide-hover:hover::before,
a.button-slide-hover:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

/* ========== Student Professional Organizations ========== */
.spo-image-flex img, .spo-image-first img {
	width: 50%;
	border-radius: 100%;
	box-shadow: 0 0 5px rgba(0,0,0,.35);
	margin: 0 25%;
}

.spo-image-flex .transform-grid {
	flex-direction: column-reverse;
}


/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	/* =========== Headers or Separators =========== */
	.diagonal-header {
		height: 450px;
	}

	.diagonal-header h1 {
		margin-top: -20px;
	}

	.grey-diagonal:after {
		bottom: 0px;
	}

	.design-your-career-header svg {
		margin-top: 60px;
	}


	/* =========== Careers & Internships Section =========== */
	.pencil-bg, .social-bg {
		height: 450px;
	}

	.floating-text h2 {
		font-size: 2.5rem;
	}

	.floating-text {
		padding: 40px 60px;
	}

	/* ============ Career Resources Pg ============ */
	.button-slide .flex {
		flex-direction: row;
	}


	a.button-slide-hover {
		width: 45%;
		margin: 10px 2.5%;
	}

	.left-mobile {
		text-align: center;
	}

	.underline-hover .flex li {
		margin: 15px;
	}

	.underline-hover .flex {
		display: flex; 
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}


	/* ============ Design Your Career ============ */
	.pathwayU {
		width: 50%;
		margin: 20px 0;
	}
	/* Navigation Card Button Styles */
	.tab-btns .tabs {
		padding: 0 20px;
		margin: 0;
	}

	.tab-btns .tabs li {
		width: 33.33%;
	}

	.tab-btns .tabs li:nth-child(4), .tab-btns .tabs li:nth-child(5) {
		width: 50%;
	}
	/* End Navigation Card Button Styles */


	/* ========== Student Professional Organizations ========== */
	.spo-image-flex img, .spo-image-first img {
		width: 100%;
		margin: 0;
	}

	.spo-image-flex .transform-grid-cell:nth-child(even), .spo-image-first .transform-grid-cell:nth-child(odd) { /* Targets Image cells in Grid */
		width: 25%;
	}

	.spo-image-flex .transform-grid-cell:nth-child(odd), .spo-image-first .transform-grid-cell:nth-child(even) { /* Targets Text cells in Grid */
		width: 75%;
	}

	.spo-image-flex .transform-grid, .spo-image-first .transform-grid {
		display: flex;
		align-items: center;
	}

	.spo-image-flex .transform-grid {
		flex-direction: row;
	}

}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	/*-- General Text Styles --*/
	.mobile-center {
		text-align: left;
	}

	/* =========== Header =========== */
	.diagonal-header {
		height: 500px;
	}

	.diagonal-header h1 {
		font-size: 78px !important;
		margin-top: -20px;
	}

	.diagonal-header.team h1 {
		margin-top: 20px;
		font-size: 4rem !important;
	}

	.diagonal-header .ts-team h1 {
		margin-top: -20px;
	}

	.design-your-career-header svg {
		width: 75%;
		margin: 0 15%;
		margin-top: 50px;
	}
	
	/* =========== Careers & Internships Section =========== */
	.pencil-bg, .social-bg {
		height: 500px;
	}

	.social-bg {
		background-position: top center;
	}

	/* =========== Heading Cards =========== */
	.heading-card-section {
		margin-top: -200px;
	}

	.heading-card:hover, 
	.heading-card:target, 
	.heading-card:focus,
	.resource-card:hover,
	.resource-card:target,
	.resource-card:focus {
		margin-top: -40px;
	}

	.heading-card:hover .heading-card-text, 
	.heading-card:target .heading-card-text, 
	.heading-card:focus .heading-card-text {
		bottom: 100px;
	}

	.team-card-section {
		margin-top: -200px;
	}

	.team-card:hover,
	.team-card:focus,
	.team-card:target,
	.resource-card:hover,
	.resource-card:focus,
	.resource-card:target {
		margin-top: -40px;
	}
	.team-card:hover .team-card-name h2,
	.team-card:focus .team-card-name h2,
	.team-card:target .team-card-name h2 {
		bottom: 160px;
	}

	.resource-card:hover .resource-card-title h2,
	.resource-card:focus, .resource-card-title h2,
	.resource-card:target .resource-card-title h2 {
		bottom: 190px;
	} 

	/* ============ Design Your Career ============ */
	.pathwayU {
		width: auto;
	}
	/* Navigation Card Button Styles */
	.tab-btns .tabs {
		padding: 0;
		margin: 0;
	}

	.tab-btns .region {
		margin-bottom: -25px;
	}

	.tab-btns .tabs li, .tab-btns .tabs li:nth-child(4), .tab-btns .tabs li:nth-child(5) {
		width: 20%;
	}

	/* End Navigation Card Button Styles */

	/* ============ Student Professional Organizations ============ */
	.section-padding, .section-padding-bot {
		padding-top: 0;
		margin-top: -90px;
	}

	.section-padding-top {
		padding-top: 0;
		margin-top: -90px;
	}
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1050px) {
	/* ============ Design Your Career ============ */
	.pathwayU {
		position: absolute;
		right: 20px;
		top: 100px;
		z-index: 15;
	}

}

@media only screen and (min-width: 1200px) {
	/* =========== All Headers =========== */
	.diagonal-header {
		height: 750px;
	}

	.diagonal-header h1, .diagonal-header div.colorful-lines {
		margin-left: 0;
	}

	.diagonal-header .ts-team h1 {
		margin-top: 20px;
	}

	div.colorful-lines {
		height: 20px;
	}

	.design-your-career-header svg {
		margin-top: 110px;
	}

	.heading-card-section, .team-card-section {
		margin-top: -400px;
	}

	.resources-cards .region:nth-child(2) .heading-card .heading-card-img img {
		object-position: -280px 0;
	}


	/* =========== Careers & Internships Section =========== */
	.pencil-bg, .social-bg {
		height: 650px;
	}


}

/* ====================== Large Desktop Only ========================== */
@media only screen and (min-width: 1600px) {
	/* ============ Design Your Career ============ */
	.design-your-career-header svg {
		width: 85%;
		margin: 0 7.5%;
		margin-top: 80px;
	}

	.pathwayU {
		right: 150px;
	}


}

/* ====================== 4k Desktop Only ========================== */
@media only screen and (min-width: 2440px) {
	.design-your-career-header svg {
		margin-top: 0;
	}
}


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