@font-face {
	font-family: "Muli";
	font-style: normal;
	font-weight: 200;
	src: url("/Content/Fonts/MuliLight.eot") format('embedded-opentype');
	src: url("/Content/Fonts/MuliLight.woff") format('woff');
	src: url("/Content/Fonts/MuliLight.svg") format('svg');
	src: url("/Content/Fonts/MuliLight.eot");
	src: url("/content/fonts/Muli-Light.ttf") format('truetype');
}
@font-face {
	font-family: "Muli";
	font-style: italic;
	font-weight: 200;
	src: url("/Content/Fonts/MuliLightItalic.woff") format('woff');
	src: url("/Content/Fonts/MuliLightItalic.svg") format('svg');
	src: url("/Content/Fonts/MuliLightItalic.eot");
	src: url("/content/fonts/Muli-LightItalic.ttf") format('truetype');
}
@font-face {
	font-family: "Muli";
	font-style: normal;
	font-weight: 300;
	src: url("/Content/Fonts/Muli.woff") format('woff');
	src: url("/Content/Fonts/Muli.svg") format('svg');
	src: url("/Content/Fonts/Muli.eot");
	src:  url("/content/fonts/Muli.ttf") format('truetype');
}
@font-face {
	font-family: "Muli";
	font-style: italic;
	font-weight: 300;
	src: url("/Content/Fonts/MuliItalic.woff") format('woff');
	src: url("/Content/Fonts/MuliItalic.svg") format('svg');
	src: url("/Content/Fonts/MuliItalic.eot");
	src:  url("/content/fonts/Muli-Italic.ttf") format('truetype');
}
@font-face {
	font-family: "Muli";
	font-style: normal;
	font-weight: 400;
	src: url("/Content/Fonts/MuliSemiBold.woff") format('woff');
	src: url("/Content/Fonts/MuliSemiBold.svg") format('svg');
	src: url("/Content/Fonts/MuliSemiBold.eot");
	src:  url("/content/fonts/Muli-SemiBold.ttf") format('truetype');
}
@font-face {
	font-family: "Muli";
	font-style: italic;
	font-weight: 400;
	src: url("/Content/Fonts/MuliSemiBoldItalic.woff") format('woff');
	src: url("/Content/Fonts/MuliSemiBoldItalic.svg") format('svg');
	src: url("/Content/Fonts/MuliSemiBoldItalic.eot");
	src:  url("/content/fonts/Muli-Semi-BoldItalic.ttf") format('truetype');
}
/*
	COLORS:
		Grey: #656565;
		Light Grey: #E5E5E5;
		Checkout page not selected light grey: #FAFAFA;
		Checkout page not selected darker grey: #C8C8C8;
		Dark (almost black) Grey: #343434;
		Orange: #F04E23;
		Blue: #0066b3;
		Light Blue: #F7FCFF;
		Menu Flyout: #222222 90% opacity;
*/
/*need overflow hidden on both body and html to prevent highlighting from scrolling off screen*/
html{
	overflow-x: hidden;
}
body {
	color: #656565;
	font-family: 'Muli', sans-serif;
	font-size: 22px;
	font-weight: 300;
	overflow-x: hidden;
	margin: 0;

}
/*Use this class on divs that contain floated items so the containing div knows where the edges of the floated item are*/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
/*Use this class for accessibility purposes, so a label can be there for a screenreader, but not need to be visible on the page*/
.offScreen{
    clip: rect(1px 1px 1px 1px);
    height: 1px;
    left: -1000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}
.hide{
	display: none;
}
.button,
button{
	text-transform: uppercase;
	border-radius: 5px;
	font-size: 20px;
	font-weight: 300;
	background-color: #0066b3;
	padding: 5px 40px;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
}
.button:hover,
button:hover{
	text-decoration: none;
}
.bulletImage{
	height: 25px;
    width: 25px;
	background: url("/images/InfiniteScrollImages/Sprite-2015.png") -597px -25px no-repeat;
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
}
.playImage{
	height: 25px;
    width: 25px;
	background: url("/images/InfiniteScrollImages/Sprite-2015.png") -629px -25px no-repeat;
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
}
a{
	color: #0066b3;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
#shadow{
	position: absolute;
    height: 1000%;
    width: 100%;
    left: 0;
    right: 0;
    top: -25px;
    margin: auto;
    z-index: 1000;
    background-color: #E5E5E5;
    opacity: .9;
}
.pagewrapper{
	width: 1200px;
	margin:0 auto 0;
	position: relative;

}

.pagewrapper section{
	height: 495px;
}
.pagewrapper section .rightWrapper{
	display: inline-block;
	width: 49%;
	vertical-align: top;
	position: relative;
	float: right;
}
.pagewrapper section .leftWrapper{
	display: inline-block;
	width: 49%;
	vertical-align: top;
	position: relative;
}
.pagewrapper section .rightWrapper .heading,
.pagewrapper section .leftWrapper .heading{
	font-size: 24px;
	font-weight: 300;
	margin-bottom: 20px;
}
.pagewrapper section .rightWrapper .subheading,
.pagewrapper section .leftWrapper .subheading{
	font-size: 22px;
	font-weight: 200;
	margin-bottom: 20px;
}
.pagewrapper section .rightWrapper button,
.pagewrapper section .leftWrapper button{
	margin: 10px 0;
}
.pagewrapper #pageTitle{
	height: 580px;
	position: relative;
    margin-top: 31px;
}
.pagewrapper #pageTitle .heading{
	font-size: 42px;
	font-weight: 400;
	margin-bottom: 30px;
}
.pagewrapper #pageTitle .subheading{
	font-size: 26px;
	font-weight: 200;
	margin-bottom: 30px;
}
.pagewrapper #pageNavigation{
	height: 80px;
	color: #ffffff;
	text-align: center;
	margin-top: -30px;
}
.pagewrapper #pageNavigation li{
	display: inline-block;
	list-style: none;
	margin: 23px 20px;
}
.viewInfographicLink a{
    color: #fff;
    border-bottom: 2px solid #F04E23;
    text-decoration: none;
}
.pagewrapper #pageInfo{
	height: 149px;
    padding: 125px 88px;
}
.pagewrapper #pageInfo .text{
	padding-bottom: 20px;
	font-weight: 200;
}

.pagewrapper .background{
	width: 300%;
	margin-left: -100%;
	z-index: -1;
	position: absolute;
	top: 20px;
	height: 495px;
}
.pagewrapper .background.pageNavigation{
	height: 80px;
	top: 552px;
	background-color: #656565;
}


/*SCREEN SIZE ADJUSTMENTS*/
/*@media only screen
and (min-width : 1550px){
	
}*/
@media only screen
and (max-width : 1200px) 
and (min-width: 1024px){
	html, body{
		overflow-x: visible;
}
}
/*As of 8/24/15 the size of an ipad horizontal is 1024px*/
@media only screen
and (max-width : 1024px) 
and (min-width: 768px){
	html, body{
		overflow-x: visible;
	}
	/*.pagewrapper{
		width: 1000px;
		overflow-x: visible;
	}*/
}

@media only screen and (max-width: 768px) {
	html, body{
		overflow-x: visible;
	}
	/*.pagewrapper{
		width: 800px;
		overflow-x: hidden;
		padding: 0 5px;
	}*/
}