/***********************************************
Site Wrapper
***********************************************/

.wrapper {
	padding-top: 70px;
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform .3s .2s ease-out;
	// z-index: 2; this was breaking the modal, so removed for now. does it break other things?
}
.intranet .wrapper {
	padding-top: 115px;
}
@media screen and (max-width: $bp-laptop) {
	.hasAnnouncement.intranet .wrapper {
		padding-top: 140px;
	}
}
.js-nav-open .wrapper {
	transform: translateX(250px);
	transition: transform .3s 0s ease-out;
} 
.container {
	@extend %clearfix;
	position: relative;
	width: 100%;
	max-width: 1420px;
	margin: 0 auto;
	padding: em(20);

	@media screen and (min-width: $bp-mobile) {
		padding: em(30);
	}

	@media screen and (min-width: $bp-tablet) {
		padding: em(45);
	}

	@media screen and (min-width: $bp-laptop) {
		padding: em(60);
	}
}
// .intranet-container {
// 	padding: em(30) !important;

// 	@media screen and (min-width: $bp-laptop) {
// 		padding: em(60) !important;
// 	}
// }
.content {
	@extend %clearfix;
	width: 100%;
	text-align: left;

	&--condensed {
		padding: em(20);
	}
}
aside {
	@extend %clearfix;
	width: 100%;
	text-align: left;
	padding: em(20);
	margin-top: 15px;
	width: 100%;
	position: relative;
	@media screen and (min-width: $bp-tablet) {
		width: 33.33%;
		margin-top: 0;
	}
	@media screen and (min-width: $bp-laptop) {
		width: 25%;
	}
}
.sidebar-block:last-of-type {
	hr {
		display: none;
	}
}
article {
	@extend %clearfix;
	width: 100%;
	text-align: left;
	border-bottom: $border-default;
	padding: 25px 0;
	position: relative;
	display: flex;
	
	@media screen and (max-width: $bp-mobile) {
		  padding: 25px;
	}
	&.condensed-article {
		padding: 0;
		display: block;
	}
	&.default-article {
		display: block;
	}
}
section {
	padding: 30px;
	text-indent: left;
	@media screen and (min-width: $bp-tablet) {
		padding: 40px;
	}
}

/***********************************************
Flex-wrappers
***********************************************/

.flex-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: em(30);
	flex-direction: column;

	@media screen and (max-height: 670px) {
		display: block;
	}

	@media screen and (max-height: 425px) {
		min-height: 350px;
	}
}
.flex-container {
	display: flex;

	&--center {
		align-items: center;
	}
	&--wrap {
		flex-wrap: wrap;
	}
	&--row {
		flex-direction: row;
		justify-content: space-between;
	}
	&--left {
		flex-direction: row;
	}
	&--top {
		align-items: flex-start;
	}
}

/***********************************************
Grid
***********************************************/

.grid {
	display: block;

	&--condensed {
		margin: -2px;
	}
	&--thin {
		margin: -10px;
		@media screen and (min-width: $bp-mobile) {
			display: flex;
			flex-wrap: wrap;
		}
	}
	&--extended {
		margin: -6px;
		margin-top: 6px;
	}
	&--with-abs-sibling {
		margin-top: 25px;
		@media screen and (min-width: $bp-laptop) {
			margin-top: 65px;
		}
	}
	@media screen and (min-width: $bp-tablet) {
		display: flex;
		flex-wrap: wrap;
	}

}
.col {
	&--1-2{
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-tablet) {
			width: 50%;
		}
	}
	&--1-4 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-tablet) {
			width: 50%;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 25%;
		}
	}
	&--3-4 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-tablet) {
			width: 66.66%;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 75%;
		}
	}
	&--1-3 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-mobile) {
			width: 50%;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 33.33%;
		}
	}
	&--2-3 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-mobile) {
			width: 50%;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 66.66%;
		}
	}
	&--1-3-thin {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-small) {
			width: 50%;
		}
		@media screen and (min-width: $bp-tablet) {
			width: 33.33%;
		}
	}
	&--1-3-alt {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-tablet) {
			width: 33.33%;
		}
	}
	&--2-4 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-tablet) {
			width: 50%;
		}
	}
	&--4-4 {
		width: 100%;
		position: relative;
	}
	&--1-5 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-mobile) {
			width: 49%;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 33%;
			float: none;
		}
		@media screen and (min-width: $bp-large) {
			width: 19%;
		}
	}
	&--1-6 {
		width: 100%;
		position: relative;
		@media screen and (min-width: $bp-mobile) {
			width: 49%;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 33%;
			float: none;
		}
		@media screen and (min-width: $bp-large) {
			width: 16%;
		}
	}
	&--1-7 {
		width: 50%;
		position: relative;
		padding: 6px;
		float: left;
		display: block;
		@media screen and (min-width: $bp-mobile) {
			width: 33.33%;
		}
		@media screen and (min-width: $bp-tablet) {
			width: 20%;
			float: none;
		}
		@media screen and (min-width: $bp-laptop) {
			width: 14.28%;
		}
	}
	&--condensed {
		padding: 2px;
	}
	&--thin {
		padding: 10px;
	}
	&--with-sidebar {
		padding-right: 0;
		@media screen and (min-width: $bp-tablet) {
			padding-right: 20px;
		}
	}
	&--with-right-margin {
		padding-right: 0;
		@media screen and (min-width: $bp-tablet) {
			padding-right: 20px;
		}
	}
	&--with-left-margin {
		padding-left: 0;
		@media screen and (min-width: $bp-tablet) {
			padding-left: 20px;
		}
	}
	&--outer-2-4 {
		width: 100%;
		position: relative;
		@extend %clearfix;
		margin-bottom: 25px;
		@media screen and (min-width: $bp-laptop) {
			width: 50%;
			padding-top: 15px;
			margin-bottom: 0;
		}
	}
	&--100 {
		height: 100%;
	}
}