@charset "UTF-8";

/* Includes for hook-ins. */
@import url("/-/media/business/shared/documents/web/css/unslider.css");
@import url("/-/media/business/shared/documents/web/css/unslider-dots.css");
@import url("/-/media/business/shared/documents/web/css/magnific-popup.css");

/* CSS Document */

/*
	These were here before I got here, so I'm hesitant to take them out.
	-DH
*/

.scfRadioButtonListUsefulInfo {
color:#FFCC33;
}

.scfCheckBoxListUsefulInfo {
color:#FFCC33;
}

/*
	These are used as hooks for lightboxes as well as the unslider carousel as well
	as minimal styling.
*/

.bus-img-popup {
	opacity: 1;
	transition: opacity .2s;
}

.bus-img-popup:hover {
	cursor:zoom-in;
	opacity: .5;
}

.boutique-info {
	display:flex;
	-webkit-flex: default;
	-ms-flex: default;
	flex: default;
	align-items: center;
	-webkit-align-items: center;
	-ms-flex-align:start/end/center/stretch/baseline;
}

/*

	This is a useful class for when you want to hide things on initial page load.

*/

.hidden {
	display:none;
}

.centre-text {
	text-align: center;
}

.centre-element-x {
	display:block;
	margin: 0 auto;
	text-align: center;
}

/*
	Use this class in a div to centre elements horizontally inside the div.
*/

.flex-centre {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-bottom: calc((5/7) * 1em);
}

/*
	Use this class in a div to centre elements vertically.


.flex-centre-y {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

*/

/*
	This is for a button that is fixed in the display window to bring the user back to
	the top of the page. It is used by a JS script, so make sure you link it.

	TODO: Document how to use this and list the JS file that needs to be included.
*/

#toTop {
	display:none;
	position: fixed;
	width: 64px;
	height: 64px;

	right:5%;
	bottom:5%;

	z-index: 4;

	cursor: pointer;
	background: rgba(0,0,0,.2) no-repeat 50% 50%;
	background-image:url('https://business.ualberta.ca/-/media/ba024eeb14874ac1b1e55f011d835b85.ashx');
	background-size: 16px 29px;
	border-radius: 64px;
	opacity: 0.6;
	transition: opacity .2s;

	transform: rotate(-90deg);
	-ms-transform:rotate(-90deg);
}
#toTop:hover {
	opacity: 1;
}

/*

	This is to be used instead of headers to call out important information.
	These should be used as leaf classes and not applied to parents. We may
	have to bite the bullet and use multiple selectors for these, eg:

	p.important-info-size,li.important-info-size

	Large is meant to replace h2, medium h3, small h4, and xsmall h5

*/

.important-info-large {
	font-size: calc((12/7) * 1em);
	line-height: 1.2em;
	font-family: "DIN Bold", sans-serif;
	text-rendering: optimizeLegibility;
}

.important-info-medium {
	font-size: calc((9/7) * 1em);
	line-height: 1.2em;
	font-family: "DIN-Medium", sans-serif;
	text-rendering: optimizeLegibility;
	font-weight: bold;
}

.important-info-small {
	font-size: calc((8/7) * 1em);
	line-height: 1.2em;
	font-family: "DIN-Bold", sans-serif;
	text-rendering: optimizeLegibility;
	font-weight: bold;
}

.important-info-xsmall {
	font-size: 1em;
	line-height: 1.2em;
	font-family: "DIN-Light", sans-serif;
	text-rendering: optimizeLegibility;
	font-weight: bold;
}

li.important-info-small {
	margin-bottom: calc( (4/7) * 1em);
}

.fine-print {
	font-size: calc((5/7) * 1em);
	line-height: 1em;
	text-rendering: optimizeLegibility;
}


/*
	This is used to bring text together in <p>'s without having to use a <br>.
	Put all <p>'s that you want to bring together in a div with the consolidatedText class.

	Example:
	<div class="consolidatedText">
		<p>This is the first line.</p>
		<p>This is the second line.</p>
		<p>This is the last line</p>
	</div>

	NOTE: The last line margin was ripped from the UAlberta's default p margin and this could
	change. If it suddenly looks different, look there.
*/

div.consolidatedText {
	display: block;
}

div.consolidatedText>p{
	margin-top:0;
	margin-bottom: 0;
}

div.consolidatedText > p.important-info-large {
	margin-bottom: calc((5/7) * 1em);
}

div.consolidatedText>p:last-child {
	margin: 0 0 calc((5/7) * 1em);
}

div.consolidatedText>p:first-child {
	margin-top: 0.71428571em;
}

/* 
	YouTube Video Icon for Custom embedded Thumbs (For things like lightboxes).
	Wrap the thumbnail img in the video-thumb class and put the video-thumb-play underneath it.
	
	Example:
	<div class="frame">
		<div class="video-thumb">
			<img src="<my-thumb-src>">
			<div class="video-thumb-play"></div>
		</div
	</div>

*/
div.video-thumb {
	position: relative;
}

div.video-thumb > div.video-thumb-play {
	position: absolute;
	background-image: url(https://business.ualberta.ca/-/media/b6f5f4eb0390471a8302f2a3d2858139.ashx);
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: center center;
	background-size: 30%;
	width: 100%;
	height: 100%;
	opacity: 0.75;
	top:0;
	left:0;
	cursor: pointer;
}

/*
	Use this class on a frame to wrap a youtube iframe and container in a frame class.

	Eg.
	<div class="frame video-frame-wrap">
		<div class="video-mod-container">
			<iframe src="http://my-video-source/"></iframe>
		</div>
	</div>
*/

div.video-frame-wrap {
	position: relative;
	display: block;
}

a.in-page-anchor {
	margin:0;
}

/* Pulled from uofa.ualberta.ca/university-relations/about-us/leadership-team */

.team-profile {
	clear: both;
	display: inline-block;
	width: auto;
	margin-bottom: 0.5em;
}
.team-bio {
	margin-left: 185px;
}
.team-bio > h4, h5 {
		margin-top:0.5em;
}
.team-thumbnail {
	float: left;
}

.mfp-popup-youtube {
	cursor: pointer;
}

.show-only-mobile {
	display:none;
}

.hide-on-mobile {
	visibility: visible;
}

/*

	This is to be used instead of a table.

*/

.fluid-table > .row-fluid {
	border-top: 1px solid #ddd;
	background-color: transparent;
	padding-left: .25em;
	padding-right: .25em;
}

.fluid-table > .row-fluid:first-child {
	border-top:0;
	font-family: "DIN Bold", sans-serif;
	font-weight: normal;
	font-size: 1.2em;
	text-rendering: optimizeLegibility;
}

.fluid-table > .row-fluid:first-child:hover {
	background-color: transparent;
	border-top:0;
}

.fluid-table > .row-fluid:nth-child(even) {
	background-color: rgba(249,249,249,0.65);
}

.fluid-table > .row-fluid:hover {
	background-color: rgba(255,245,184,0.15);
	border-color: #e1d8a4;
	border-bottom: 1px solid #e1d8a4;
	margin-bottom: -1px;
}

/*
	This is to be used when putting an image alone in a sidebar container. Add it as an extra class to the object.
*/

.sidebar-img-wrap.extrude {
	box-shadow: none;
	padding-bottom: 0;
	line-height: 0;
}


@media (max-width: 43.07em) {
    .team-bio { 
    	margin-left: 0;
    }
    .team-thumbnail {
    	float: right;
    	margin-left:15px;
    }
    .hide-on-mobile {
    	visibility: hidden;
    }
}
@media (max-width: 61.1904em) {
	.show-only-mobile {
		display:block;
	}
}