/* ==========================================================================
   Side bar transition
   ========================================================================== */

html,
body,
.st-container,
.st-pusher,
.st-content {
	min-height: 100%;
}
ul.menu li:last-child ul {
    min-width: 11.429em;
}
.st-container {
	position: relative;
	overflow: hidden;
}

.st-pusher {
	position: relative;
	left: 0;
	z-index: 99;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.st-pusher::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
	width: 100%;
	/*height: 100%;*/
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	z-index: 9999;
}

.st-menu {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	visibility: hidden;
	width: 274px;
	height: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.st-menu-open .st-pusher {
	-webkit-transform: translate3d(-274px, 0, 0);
	transform: translate3d(-274px, 0, 0);
}

.st-menu-open .st-menu {
	visibility: visible;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.st-content:after {
	position: absolute;
	content: '';
	width: 21px;
	height: 100%;
	top: 0;
	left: 100%;
	background-size: 21px 1px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

body {
	background: url(images/bg/pattern1.jpg);
	width: 100%;
	font-size: 14px;
}

.wrapper {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}

.bg-block1 {
	position: absolute;
	left: 0;
	background: url(images/bg/pattern2.jpg) repeat;
	width: 50%;
	height: 180px;
}

.bg-block2 {
	position: absolute;
	width: 10000px;
	left: 68.5%;
	background: url(images/bg/pattern3.jpg) repeat;
	top: 180px;
	height: 396px;
}

.bg-block3 {
	position: absolute;
	width: 10000px;
	left: -98800px;
	background: url(images/bg/pattern4.jpg) repeat;
	top: 577px;
	height: 580px;
}

.l-header {
	width: 100%;
	/*padding-bottom: 1.214em; /*17px*/
	background: #fff;
}

.l-header__top,
.l-header__top-search {
	float: right;
	clear: right;
}

.l-header .wrapper:after {
	position: absolute;
	content: '';
	right: 0;
	top: 0;
	background: #febe10;
	height: 1em;
	width: 10000px;
}

.l-header .logo {
	display: block;
	float: left;
	margin: 3.786em 0 3.000em; /* 53px 0 42px */
	width: 28.8%;
}

.l-header .logo img {
	width: 100%;
}

.l-header .moduletable {
	float: left;
}

.l-header__top {
	min-height: 136px;
}

.l-header__top .moduletable ~ .moduletable {
	margin-left: 3.571em; /* 50px */
}

.l-mobile-navigation {
	margin-top: 30px;
	margin-bottom: 100px;
}

.l-mobile-navigation:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	background: #febe10;
	height: 7px;
	width: 100%;
}

.l-mobile-navigation__top {
	margin: 0 20px 25px;
}

.l-content {
	position: relative;
	background: #fff;
}

.internal .l-content {
	padding-bottom: 3.000em; /* 42px */
}

.home .l-content .wrapper:after {
	position: absolute;
	content: '';
	z-index: 1;
	left: 68.5%;
	bottom: 0;
	width: 10000px;
	height: 109px;
	background: #f6f6f6;
}

.l-home-left,
.l-home-right {
	float: left;
	position: relative;
}

.l-home-left {
	width: 68.5%; /* 822 */
}

.l-home-left .moduletable:nth-child(even) {
	clear: left;
}

/* Simulate nth-child(even) for <ie8, assumed there are only 5 modules */
.lt-ie9 .l-home-left .moduletable:first-child + .moduletable,
.lt-ie9 .l-home-left .moduletable:first-child + .moduletable + .moduletable + .moduletable {
	clear: left;
}

.l-home-right {
	width: 31.5%;
}

.l-home-left .moduletable {
	width: 46.5%;
	float: left;
	margin-right: 3.5%;
	margin-bottom: 3.214em; /* 45px */
}

.l-bottom {
	position: relative;
	border-top: 2px solid #dbdcdc;
	padding: 1.929em 0; /* 27px */
	background: url(images/bg/pattern4-light.jpg) repeat;
}

.home .l-bottom {
	position: absolute;
	width: 100%;
	left: 0;
	margin-top: -109px;
}

.l-footer {
	position: relative;
	padding: 2.500em 0px; /*35px 0px*/
	background: url(images/bg/pattern1.jpg);
}

.l-footer .logo {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 172px;
	height: 67px;
	text-align: right;
}

.l-footer .logo img {
	width: inherit;
	height: inherit;
}

.l-main-wrapper,
.l-right,
.l-left {
	float: right;
	position: relative;
}

.l-main {
	float: left;
	position: relative;
}

.l-main .moduletable {
	margin-top: 2.857em; /*40px*/
}

.l-main .moduletable:first-child {
	margin-top: 0;
}

.two_column_l .l-main-wrapper,
.three_column .l-main-wrapper {
	width: 946px;
}

.l-main-block {
	background:#fff;
	padding-top: 1.071em; /*15px*/ /* padding top for all pages except one column */
	padding-bottom: 3.214em; /*45px*/
}

.one_column .l-main-block {
	width:1088px;
	padding-top: 2.143em; /*30px*/ /* padding top is based on advanced search psd */
	padding-left: 56px; /* padding left is based on advanced search psd */
	padding-right: 56px; /* padding right is based on advanced search psd */
}

.two_column_r .l-main-block {
	width: 1100px;
	padding-top: 2.143em; /*30px*/
	padding-left: 50px;
	padding-right: 50px;
}
#resources_features {
	width: 846px;
}
.two_column_l .l-main-block,
.three_column .l-main-block {
	width: 846px;
	max-width: 100%;
	padding-right: 50px;
	padding-left: 50px;
}

.l-main {
	width: 100%;
	min-height: 140px;
}

.two_column_r .l-main {
	width: 736px;
	margin-right: 50px;
}

.three_column .l-main {
	width: 482px;
	margin-right: 50px;
}

.l-main-top {
	margin-bottom: 3.57em; /* 50px */
}

.l-main-bottom {
	width: 100%;
	margin-top: 2.143em; /*30px*/
}

.l-left {
	width: 254px;
}

.l-left > .moduletable {
	margin-right: 20px;
	
}

.l-left > .moduletable ~ .moduletable {
	margin-top: 2.143em; /*30px*/
}

.l-left > .fullwidth-mod {
	margin-right: 0;
}

.l-right {
	width: 274px;
	margin-right: -50px;
}

.l-right > .moduletable ~ .moduletable {
	margin-top: 2.857em; /*40px*/
}

/* ==========================================================================
   Rsponsives
   ========================================================================== */

/* Tablet */
@media screen and (min-width: 768px) and (max-width:1200px) {
	.wrapper {
		width: 96%;
	}

	.l-header__top {
		position: absolute;
		top: 0;
		right: 0;
	}

	.l-header__top .moduletable ~ .moduletable {
		margin-left: 3em;
	}

	.l-header__top-search {
		position: absolute;
		right: 0;
		bottom: 36%;
	}

	.home .l-bottom {
		position: relative;
		margin-top: 0;
	}

	.l-left {
		width: 25%;
	}

	.one_column .l-main-wrapper,
	.two_column_r .l-main-wrapper {
		width: 100%;
	} 
	.two_column_l .l-main-wrapper,
	.three_column .l-main-wrapper {
		width: 75%;
	}
	.l-main-wrapper.mobileFullWidth.custom-box {
    	width: 100%;
	}
	p.image-wrap img {
    min-width: 100% !important;
	}
	.l-header .logo {
    width: 24.8%;
	}

	.one_column .l-main-block,
	.two_column_r .l-main-block {
		width: 90%;
		padding-left: 5%; /* padding left is based on advanced search psd */
		padding-right: 5%; /* padding right is based on advanced search psd */
	}
	.two_column_l .l-main-block,
	.three_column .l-main-block {
		width: 96% !important;
		padding-right: 4.5%;
		padding-left: 4.5%;
	}

	.two_column_r .l-right {
		width: 33.09%;
		margin-right: -5.556%; /* make it stick to right */
	}
	.three_column .l-right {
		width: 43.03%;
		margin-right: -4.945%; /* make it stick to right */
	}

	.two_column_r .l-main {
		width: 66.91%;
		margin-right: 5.556%;
	}
	.three_column .l-main {
		width: 56.97%;
		margin-right: 4.945%;
	}
}

@media screen and (max-width:900px) {
	.l-header__top {
		font-size: 11px;
	}
}

/* Mobile */
@media screen and (max-width: 767px) {
	.mobileFullWidth,
	.mobileFullWidthWithPadding,
	.mobileFullWidthWithMargin,
	.mobileFullWidthWithMarginLeft {
		float: none !important;
		clear: both !important;
	}

	.mobileFullWidth,
	.mobileFullWidthWithPadding {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mobileFullWidth,
	.mobileFullWidthWithMargin,
	.mobileFullWidthWithMarginLeft {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.mobileFullWidth,
	.mobileFullWidthWithPadding {
		width: 100% !important;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.mobileFullWidthWithMargin {
		width: 88% !important;
	}

	.mobileFullWidthWithPadding {
		padding-left: 6% !important;
		padding-right: 6% !important;
	}

	.mobileFullWidthWithMargin,
	.mobileFullWidthMarginLeft {
		margin-left: 6% !important;
		margin-right: 6% !important;
	}

	.mobileFullWidthMarginLeft {
		margin-right: 0 !important;
		width: 94% !important;
	}

	body{
		min-width:320px;	
	}

	.st-content {
		overflow: hidden;
	}

	.wrapper {
		width:100%;	
	}

	.l-header {
		padding: 0;
		height: 94px;
	}

	.l-header .logo {
		margin: 13px 0;
		width: 160px;
	}

	.l-header .wrapper:after {
		height: 7px;
		right: -999px;
	}

	.l-footer .logo {
		width: 139px;
		height: 54px;
	}

	.l-bottom {
		padding: 30px 0;
	}

	.home .l-bottom {
		position: relative;
		margin-top: 0;
	}

	.l-home-left .moduletable,
	.l-home-right .moduletable {
		width: 100%;
		float: none;
		margin: 0 0 25px 0;
	}

	.l-home-left .custom img,
	.l-home-right .custom img {
		width: 100%;
	}

	.internal .l-content {
		background: #fff;
	}

	.home .l-content .wrapper:after {
		display: none;
	}

	.l-main-top {
		margin-bottom: 3em;
	}

	.l-main-block,
	.one_column .l-main-block,
	.two_column_r .l-main-block {
		padding: 0;
		margin-top: 25px;
	}

	.l-right,
	.l-main-bottom,
	.l-left {
		margin-top: 40px;
	}

	.l-left > .moduletable ~ .moduletable,
	.l-right > .moduletable ~ .moduletable {
		margin-top: 20px;
	}

	.l-left > .moduletable {
		margin-right: 0;
	}

	.l-left img:not([class]),
	.l-right img:not([class]),
	.l-content p > img:not([class]) {
		width: 100%;
		height: auto;
	}
}

/* Descale pattern background (DO NOT ADD STYLES HERE) */
@media screen and (max-width: 767px) {

	/*url(images/bg/pattern1.jpg)*/
  	body,
  	.l-footer {
		background-size: 4px 4px;
	}

	/*url(images/bg/pattern2.jpg)*/
	.bg-block1 {
		background-size: 3px 3px;
	}

	/*url(images/bg/pattern3.jpg)*/
	.bg-block2 {
		background-size: 3px 3px;
	}

	/*url(images/bg/pattern4.jpg)*/
	.bg-block3 {
		background-size: 6px 6px;
	}

	/*url(images/bg/pattern4-light.jpg)*/
	.l-bottom {
		background-size: 6px 6px;
	}

}

@media screen and (max-width: 1200px) and (min-width: 768px) {
	.product_imgg{
	 	width: 100%;
     min-width: 100%; 
	}
}

.teacher-notes-sidebar{
	margin-left: 55px;
}