/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		1. OOCSS GRID
 *		2. MAIN LAYOUT
 *		3. HEADER
 *			- Brand
 *			- Search Form
 *		4. Navigation
 *			- Primary Navigation
 *			- tablet Navigation
 *			- Secondary Navigation
 *			- Secondary Nav 2-5 Levels deep
 *		5. Mixed
 *		6. Footer
 *		7. Page Specific Layout
 *			- Homepage
 *			- Search Results
 *		8. Device and Responsive Layout
 *			- Breakpoint 960px
 *			- Breakpoint 640px
 *				- Search Form
 *				- Main Content
 *		9. Print Styles
 *			- Simple Theme custom print styles
 *
 * @author Your Name <email@silverstripe.com>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	overflow:hidden;
	*overflow:visible;
	*zoom:1;
	padding:0 10px;
}
.unit { /* unit - Base class which divides a line into sections (columns). */
	float:left;
	padding:0 10px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where
	padding and border are NOT added onto the width - they are included in the width,
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
}

.inc { 
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; 
}
.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float:right;
}

.clearAll{clear:both;}
/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space.
The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */

.size1of1 {
	float:none;
}
.size1of2 {
	width:50%;
}
.size1of3 {
	width:33.33333%;
}
.size2of3 {
	width:66.66666%;
}
.form-element__form.size2of3{width:100%;}
.size3of3 {
	width:100%;
}
.size1of4 {
	width:25%;
}
.size3of4 {
	width:75%;
}
.size1of5 {
	width:20%;
}
.size2of5 {
	width:40%;
}
.size3of5 {
	width:60%;
}
.size4of5 {
	width:80%;
}
.lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */
	float:none;
	width:auto;
	_position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters.
	meaning that anything prefixed with _ wouldn't be picked up by any other browsers */
	_left:-3px;
	_margin-right:-3px;
}

/* MAIN LAYOUT */
body {
    margin: 0;
    background: #fff;
    min-width: 240px;
    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
}
	.ie7 body,
	.ie8 body {
	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
	}
	.main {
	    background: #fff;
	    padding: 40px 0 60px;
	    min-height: 300px;
		z-index:1;
	}
	.inner {
	    max-width: 1100px;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.ie6 .inner {
	    width: 960px;
	}
	.no-sidebar .content-container {
	    float: left;
	    width:100%; /* makes content container full width when there is no sidebar */
	}
	.sidebar { /* this is the sidebar element */
	    margin-top: 12px;
	}
	.no-sidebar .sidebar {
		display: none;
	}


/* HEADER */
.header {
    background: #fff;
	
}
	.header .inner {
	    position: relative;
	    min-height: 45px;
	}
	.header .MainAward{position:absolute; top:0; right:0; clear: both; width: 84px;max-width:25%;}
	.header .MainLogo{clear:both; margin-bottom:30px; padding-top:30px; max-width:70%;}
	.header .MainLogo img, .header .MainAward img{max-width:100%;}
	/* Brand */
	header .brand, header .brand:hover {
	    float: left;
	    color: #fff;
	    display: inline-block;
	}
		.brand h1 {
		    margin: 0;
		    padding: 0;
		    font-size: 48px;
		    font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		    color: #fff;
		    font-weight: 600;
		    font-stretch: normal; /* default value. No font stretching */
		    line-height: 1em;
		}
		.brand p {
		    color: #888;
		    margin-bottom: 22px;
		}

	/* Search form */

	.search-bar {
		position: absolute;
		right: 13px;
		top: 12px;
	}
		.search-bar .field {
			margin: 0;
			padding: 0;
		}
		.search-bar form input.text {
		    width: 155px;
		    padding: 5px 34px 5px 15px;
		    color: #888;
		    margin: 0;
		    border: none;
		    border-radius: 14px;
		    background: #fff;
		}

		.search-bar form input.action { /* positions the search button icon over the top of the search input */
		    font-size: 14px;
		    position: absolute;
		    right: 5px;
		    top: 0;
		    cursor: pointer;
		    border: none;
		    padding: 5px;
		    background: none;
		    font-family: 'WebSymbolsRegular';
		    color: #848484;
			border-radius: 0;
			margin: 0;
		}
		.search-bar form input.active,
		.search-bar form input.action:hover {
		    color: #000;
		}
		.search-bar form input:focus,
		.header textarea:focus {
		    outline: none; /* removes default browser outlining on focus */
		}
		.search-dropdown-icon {
		    display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
		}


.callButtonOutter{position:relative; }
.callButtonOutter .inner{position:relative; }
.callButtonOutter .inner .callButton{position:fixed; bottom:3%;  right:-40px; padding:10px 30px; background-color:#009DDF; width:150px; font-size:20px; text-align:center; border-radius:20px 0 ; opacity:0.8; z-index:9;}
.Magenta .callButtonOutter .inner .callButton{background-color:#E2007A;}
.Yellow .callButtonOutter .inner .callButton{background-color: #FFED02;}
.callButtonOutter .inner .callButton:hover{ right:0px;}
.callButtonOutter .inner .callButton a{color:#fff; }
/* NAVIGATION */

 nav{height:48px;}
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
	background-color:#009DDF;
	opacity:0.95;
	padding:0 30px 0 30px;
	z-index:9999;
}
.Magenta .fixed-header{background-color:#E2007A;}
.Yellow .fixed-header{background-color: #FFED02;}
.fixed-header .innerFixed{max-width:1200px; margin:0 auto;}
.header .fixed-header.primary ul{padding-top:10px;}

.stickyLogo{display:none;}
.fixed-header .stickyLogo{ float:left; padding:0 20px; width:120px;}
.fixed-header .stickyLogo img{width:100%;}
.callButtonMob{position:absolute; right:30px; top:20px; font-size:18px;}
.callButtonMob a{color:#fff;}

	/* Primary navigation */
	.header .mainNavigation{background-color:#009DDF;}
	.Magenta .header .mainNavigation{background-color:#E2007A;}	
	.Yellow .header .mainNavigation{background-color:#FFED02;}		
	.header .inner .unit {
		position: relative; /* used to position the main navigation */
	}
	
	
	.header .primary ul {
		position:relative;
		float:right;
	}
	.header .primary li {
	    float: left;
	    padding-bottom: 10px;
		padding-top:10px;
	    margin: 0 5px;
	    position: relative;
	    white-space: nowrap; /* forces text to never wrap onto a second line */
	}
	.header .primary li a {
	    color: #fff;
	    font-size: 15px;
		line-height:18px;
	    font-family: Helvetica, Arial, sans-serif;
	    padding: 6px 8px;
	    font-weight: 500;
	    display: block;
		text-transform:uppercase;
	}
	.Yellow .header .primary li a {color:#000;}
	.Magenta .header .primary li a {}	
	.header .primary li a:hover {
	}
	.header .primary li.section a,
	.header .primary li.current a {
	    color: #fff;
	}
	.header .primary li.section:after,
	.header .primary li.current:after {

	}
	
	#Breadcrumbs {padding:10px; margin-bottom:20px; background-color:#F5F5F5;}
#coolMenu li ul li { 
		display: block; 
		line-height:16px;
		text-decoration: none; 
		border-bottom:dotted 1px #fff;
		background-color:#ced2da;
		list-style: none;
		background-image:none;
		padding:5px;
		margin:0;
		
		
		} 
	
		
	#coolMenu ul {     
		position: absolute;     
		display: none; 
		z-index: 80;
		background-color: #d3df89;
		top: 38px;		
		clear: both;
		z-index:99999;
		padding-bottom:0;

		} 
		
	
	#coolMenu li a:hover {  
		color: #132477; 
		
		} 


	#coolMenu li:hover ul {     
		display: block; 
		
		} 
		
						
	 #coolMenu .current { color: #132477;  }
					#coolMenu li ul li {
					  display: block;
					  line-height: 14px;
					  text-decoration: none;
					  border-bottom: dotted 1px #fff;
					  background-color: #ced2da;
					  list-style: none;
					  float:none;
}

#coolMenu li ul li:hover {background-color:#132477; color:#fff;}
#coolMenu li ul li a:hover { color:#fff;}


#coolMenu .link {
  background: none;
}

	#coolMenu li.current:after {
	   
	}
		

	/* Tablet Navigation */
	/* When navigation and logo overlap tablet-nav is initialized */
	.tablet-nav .brand p {
	    margin-bottom: 0;
	}
	.tablet-nav .header .inner {
	    padding-top: 20px;
	}
	.tablet-nav .header .primary ul {
	    float: left;
	    clear: both;
	    position: relative;
	    margin: 20px 0 0 -13px;
	    white-space: nowrap;
	    right: auto; /* resets the right property value that is set for the desktop site */
	}
		.tablet-nav .header .primary ul li {
		    white-space: nowrap;
		}
			.tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */
			    -moz-transition: none;
			    -webkit-transition: none;
			    transition: none;
			}
	.tablet-nav .footer .right {
	    float: left;
	    width: 100%;
	}

	/* Secondary navigation */
	.main .secondary h3 {
	    font-size: 20px;
	    color: #AAA;
	    margin: 0 0 8px 0;
	    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
	    font-weight: normal;
	}
	.main .secondary {
	    border-bottom: 1px solid #e5e5e5;
	}
		.main .secondary ul {
		    padding: 0;
		    margin: 0;
		}
		.main .secondary li {
		    border-top: 1px solid #e5e5e5;
		    position: relative;
		    list-style-type: none;
		    margin-bottom: 0;
		}
			.main .secondary li .arrow {
			    color: #009DDF;
			    padding-right: 5px;
			    display: block;
			    font-size: 15px;
			    line-height: 20px;
			    position: absolute;
			    left: 2px;
			    top: 7px;
			    -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */
			    -webkit-transition: 0.2s;
			    transition: 0.2s;
			}
		.main .secondary li a:hover .arrow {
		    left: 6px; /* this sets the final position for the arrow transition */
		}
		.main .secondary li a { /* side nav link styling */
		    padding: 10px 0;
		    display: block;
		    text-transform: uppercase;
		    letter-spacing: 2px;
		    font-size: 11px;
		    color: #333;
		    line-height: 17px;
		    border-bottom: none;
		    font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
		}
		.main .secondary li .text {
		    padding-left: 28px;
		    display: block;
		}
		.main .secondary li.current a.current {
			color: #009DDF;
			background-color: #EDEDED;
		}
		.main .secondary li.section,
		.main .secondary li.current {
		    background-color: #F3F3F3;
		}
			.main .secondary li.section a,
			.main .secondary li.current a {
			    color: #000;
			}
.boxOutter{  margin: 0;
  padding: 50px;
  background: #efefef;}
.box {
  position: relative;
  margin: 40px auto;
  width: 400px;
  height: 350px;
  background: #fff;
  border-radius: 2px;
}

.box::before,
.box::after {
  content: '';
  position: absolute;
  bottom: 10px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0,0,0,.7);
  z-index: -1;
  transition: all .3s ease-in-out;
}

.box::before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.box::after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}

.box:hover::before,
.box:hover::after {
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
}

.box:hover::before {
  left: 5px;
}

.box:hover::after {
  right: 5px;
}


		/* Secondary navigation 2-5 levels deep */
		.main .secondary ul ul {
			display: none;
		}
		.secondary ul li.current ul,
		.secondary ul li.section ul { /* Only show child pages from selected parent */
			display: block;
		}
		.secondary li.current ul ul {
			display: none;
		}
		.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
			.main .secondary ul ul li a .arrow { left: 12px; }
			.main .secondary ul ul li a:hover .arrow { left: 16px; }

		.main .secondary ul ul ul li a { padding-left: 20px; }
			.main .secondary ul ul ul li a .arrow { left: 22px; }
			.main .secondary ul ul ul li a:hover .arrow { left: 26px; }

		.main .secondary ul ul ul ul li a { padding-left: 30px; }
			.main .secondary ul ul ul ul li a .arrow { left: 32px; }
			.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }

		.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
			.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
			.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }

		.main .secondary li a:hover,
		.main .secondary li.section a:hover,
		.main .secondary li.current a:hover {
			color: #009DDF;
		}


.mainFeatureImage img{width:100%; z-index:-1; }
.mainFeatureImage{position:relative; max-height:500px; overflow:hidden; }
.headerCallOuts {
    position: absolute;
    top:20%;
	background-color:#fff;
    max-width:30%;
    text-align: center;

	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.headerCallOuts.left{left:10%; transform: rotate(-5deg);}
.headerCallOuts.right{right:10%; transform: rotate(5deg);}
.headerCallOuts .inner {
    position: relative;
	margin:0 auto;
	max-width:80%;
	padding:30px 50px;
	
}
.headerCallOuts .inner button{float:none;}
.mobileHeader{display:none;}

/* PACKAGING */
.row1, .row2, .row3, .row4{width:100%; position:relative;}
.row1{background-image: url('../images/tile-card.jpg');}
.row4{background-color:#7d848e;}
.rowblock33{width:33.33%; float:left; line-height:0;}
.rowblock50{width:50%; float:left; line-height:0; position:relative; }
.dummy {
    padding-top: 50%; /* forces 1:1 aspect ratio */
}

.rowblock50t{width:50%; float:left; box-sizing: border-box; padding:10px; }
.rowblock50t form {width:100%;}
.rowblock50t form label.left {color:#fff; font-family: 'century gothic', 'arial'; font-size:14px; font-weight:normal;}
.rowblock67{width:66.66%; float:left; line-height:0;}
.rowblock33 img, .rowblock67 img, .rowblock50 img{width:100%;}
.dummy .rowblock50 img{width:80%;}
.rowblock50t .typography h1, .rowblock50t .typography h2, .rowblock50t .typography h3, .rowblock50t .typography p, .rowblock50t .typography li, .rowblock50t .typography ul, .rowblock50t .typography label{color:#fff; font-family:'century gothic', 'arial';
}
.rowblock50t .typography h1{}
.rowblock50t .typography h2{font-weight:bold; font-size:17px; line-height:19px; margin-bottom:6px;}
.rowblock50t .typography p{font-size:15px; line-height:18px; margin-bottom:6px;}
.rowblock50t form input.text, form textarea, form .textajaxuniquetext, form select {border-radius: 5px; padding:5px; box-sizing: border-box;}
.helper{ display: inline-block; height: 100%; vertical-align: middle; }
.rowblock50t input[type="file"]{border-radius: 5px; padding:5px; color:#fff; background-color:#bbb;}
.rowblock50t input[type="submit"] {background-color:#bbb;}
.rowblock50t input[type="submit"]:hover{background-color:#000;}
.row1 {background-color:#a4784b; }
.row1 .right {background-color:#e2001a; padding:20px 10px; min-height:250px;}

/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after { /* clearfix */
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}
.search-bar form input.action,
.header .primary li a,
.footer a { /* adds color transition when links/inputs on hover */
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.footer a.brand { color: #fff; margin-left: 0; }
.footer a.brand:hover { color: #fff; }
body h1 span.amp {
    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
    font-style: italic;
}

/* FLEXLAYOUT */
.flexLayout{width: 100%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
	}
.flexBlock {
    width: 25%;
    padding: 10px;
    float: left;
    display: flex;
	position:relative;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;	
		-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; 
}
.flexBlock.five { width: 20%;}
.flexBlock.four { width: 25%;}
.flexBlock.three { width: 33.33%; }
.flexBlock.two { width: 50%; }
.flexBlock.entertainmentWrap {width:66.66%} 
.flexInner{display:block; position:relative; width:100%;}
.flexInner img{width:100%;}

.flexBlock img{align-self:flex-start}

/* PROMOBOXES */

.featuredItemsWrap{width:100%; float:none; clear:both; text-align:center; padding:30px 20px; position:relative;}
.featuredItems{}
.featuredItems .flexInner{  text-align: center;
    width: 100%;
 line-height: 0;}
.featuredItems h4.Title{background-color:#132477; color:#fff; font-size:16px; line-height:20px; padding:20px 0; text-transform:uppercase;}
.featuredItems .cyan h4.Title{background-color:#009DDF; }
.featuredItems .magenta h4.Title{background-color:#E2007A; }
.featuredItems .yellow h4.Title{background-color:#FFED02; }
.featuredItems h4.Title a{color:#fff;}
.featuredItemsWrap .flexBlock img{width:100%;}


/* FOOTER */
.footer {
    color: #fff;
    background: #132477;
    padding: 20px 0;
    font-size: 11px;
    line-height: 22px;
	text-align:center;
}
	.footer a {
	    color: #fff;
	}
	.footer a:hover {
	    color: #fff;
	}
	.footer #coolMenu a.current {
	    color: #fff;
	}	
	.footer .left {
	    float: left;
	    color: #000;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer .right {
	    float: right;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer span {
	    padding: 0 3px;
	    color: #fff;
	}
	.footer .primary,
	.footer .primary ul {
	    display: inline;
	    margin: 0;
	    padding: 0;
	}
		.footer .primary li {
		    display: inline;
		}
	.ie6 .footer .primary li,
	.ie7 .footer .primary li { /* this is a bugfix for ie6/7 */
	    display: inline;
	    zoom: 1;
	    margin-right: 10px;
	}
	.footer .primary li:after { /* adds '/' to separate the footer navigation items */
	    padding: 0 3px 0 5px;
	    content: '/';
	    color: #999;
	}
	.footer .primary li:last-child:after {
	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
	}
	.footer .arrow {
	    padding: 0 8px 0 5px;
	    color: #fff;
	    font-size: 13px;
	}
	.footer .primary .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	}

/* PAGE SPECIFIC LAYOUT */

	/* Homepage */
		/* currently no Hompage specific styles - feel free to add your own */

	/* Search Results */
	.typography .searchResults h1 {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.searchResults p.searchQuery {
	    margin-bottom: 10px;
	    font-size: 15px;
	    font-weight: bold;
	}
	.searchResults ul#SearchResults {
	    padding: 0;
	    border-bottom: 1px solid #e5e5e5;
	    margin:0;
	}
		.searchResults ul#SearchResults li {
		    border-top: 1px solid #e5e5e5;
		    padding: 20px 0;
		    list-style-type: none;
		}
		.searchResults ul#SearchResults p {
		    margin-bottom: 10px;
		}
		.searchResults #PageNumbers a {
		    padding: 0 5px;
		}
		.searchResults #PageNumbers .pagination {
		   	border-bottom: 1px solid #e5e5e5;
		    padding: 20px 0;
		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
		    width:100%;
		}
		.searchResults #PageNumbers .pagination span{
			display:table-cell; /* each element in the pagination div displays as a table cell */
		}
		.searchResults #PageNumbers p {
		    text-align: center;
		    padding:20px 0;
		}
		.searchResults #PageNumbers .next,
		.searchResults #PageNumbers .prev {
		    font-size: 14px;
		    padding: 0 20px;
		    display:table-cell; /* each element in the pagination div displays as a table cell */
		    vertical-align: middle;
		    border-bottom:0 !important;
		}
		.searchResults #PageNumbers .next {
		    margin-left: 15px;
		}
		.searchResults #PageNumbers .prev {
		    margin-right: 15px;
		}

/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none; /* removes the nav toggle button for desktop site */
}
#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries)
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;
}

/* BREAKPOINT 960px */

@media only screen and (max-width: 960px) {
	.content img {
	    max-width: 97%;
	    height: auto;
	}
	.header .primary ul {
	    margin-left: -12px;
	    -webkit-padding-start: 0px; /* removes default webkit padding on ul items */
	}
	.headerCallOuts{max-width:50%; width:50%;}
	.size2of3{width:100%; float:none; margin-bottom:30px;}
	.flexBlock.three{width:50%;}
}

/* BREAKPOINT 640px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) {
	body {
	    max-width: 640px;
	}
	#media-query-trigger {
	    visibility: visible;
	}
	.callButtonOutter{display:none;}
	.headerCallOuts{background:none; border:none; box-shadow:none;}
	.headerCallOuts button{font-size:18px;}
	.headerCallOuts h2{display:none;}
	.flexBlock.three{width:100%;}
	.stickyLogo{display:block;}

	/* Navigation*/

	.tablet-nav .header .brand {
	    float: none;
	    display: inline-block;
	    margin-left: 22px;
	    margin-bottom: 22px;
	}
		.brand h1 {
		    font-size: 40px;
		}
		.brand h1 {
		    padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
		}
	.tablet-nav .header {
	    padding: 0px;
	}
		.tablet-nav .header .inner {
		    padding: 20px 0 0 0;
		    min-height: 0;
		}
		.tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */
		    z-index: 100;
		    position: relative;
		    display: block;
		    cursor: pointer;
		    font-family: 'WebSymbolsRegular';
		    font-size: 20px;
		    color: #ededed;
			padding: 0 20px 20px 20px;
		}
		.tablet-nav .header .primary.fixed-header  .nav-open-button {padding: 20px 20px 20px 20px; }
		.tablet-nav .header .primary ul {
		    z-index: 10;
		    position: relative;
		    display: none; /* initially hiding the navigation */
		    float: left;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
		}
			.tablet-nav .header .primary ul li {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
			}
			.tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */
			    content: '\003e';
			    display: block;
			    position: absolute;
			    right: 20px;
			    top: 0px;
			    font-family: 'WebSymbolsRegular';
			    font-size: 14px;
			    color: #fff;
			    text-align: center;
			    vertical-align: middle;
			    line-height: 38px;
			}
			.tablet-nav .header .primary ul li a,
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
			    padding: 10px 0 10px 22px;
			    font-weight: bold;
			    border-bottom: 1px solid #bbb;
			    color: #FFF;
			    background: #e7e7e7;
			}
			.tablet-nav .header .primary ul li.current a,
			.tablet-nav .header .primary ul li.section a {
				background: #FFF; /* makes background on current top level page slightly darker */
			}
			#coolMenu .current{color:#009DDF;}
			.tablet-nav .header .primary ul li a:hover {
			    color: inherit;
			}
			.tablet-nav .header .primary li.section:after,
			.tablet-nav .header .primary li.current:after {
			    display: none; /* hides the link arrow on current top level page */
			}
			.tablet-nav .tablet-nav .header nav.primary ul li {
				padding: 0;
			}
			#coolMenu ul{position:relative; top:0; float:none;}
			#coolMenu li ul li{background:#fff; }
			#coolMenu li ul li a{background:#fff; color:#000; }
	/* Search Form */
	.search-bar { /* adds new styling to mobile search bar */
	    width: 100%;
	    position: relative;
	    top: 0;
	    right: 0;
	    display: none; /* hides searchbar initially */
	    padding: 20px 0;
	    margin: 0;
	    background-color: #E7E7E7;
	}
	.search-dropdown-icon { /* styling for search toggle button */
	    display: block;
	    cursor: pointer;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    right: 60px;
	    top: 34px;
	    font-family: 'WebSymbolsRegular';
	    font-size: 20px;
	    color: #ededed;
	    text-align: center;
	    line-height: 20px;
	}
	.search-bar form {
	    margin: 0;
	    width: 100%;
	}
		.search-bar form fieldset {
		    padding: 0 18px;
		    left: 0;
		    right: 0;
		    position: relative;
		}
	.search-bar div.field {
	    margin-bottom: 0;
	}
	.search-bar form input.text {
	    width: 89%; /* makes search input full width - allowing for space either side */
	    max-width: 89%;
	    padding: 8px 10% 8px 1%;
	    text-indent: 15px;
	    position: relative;
	    display: block;
	    right: 0;
	    left: 0;
	    border: 1px solid #e5e5e5;
	    background: #fff;
	    font-size: 17px;
	    border-radius: 20px; /* increase border radius due to increased padding */
	}
	.search-bar form input.action {
	    right: 5%;
	    top: 2px;
	    font-size: 18px;
	}

	/* Main Content */
	.main {
	    padding: 20px 0 45px; /* decrease padding so that more content can fit on screen */
	}
	.content-container,
	.sidebar {
	    width: 100%; /* sidenav is now shown above the page content */
	    margin-bottom: 30px;
	}
		.typography h1 { /* decrease size of page heading due to smaller screen */
		    font-size: 30px;
			line-height:35px;
		    margin-bottom: 15px;
		    padding-bottom: 10px;
		}
		.typography p {
		    font-size: 14px;
		    line-height: 23px;
		}
	p.intro {
	    font-size: 19px;
	    line-height: 27px;
	}
	.main .inner {
	    padding: 0 22px;
	}
	/* Secondry Nav */
	.secondary li a {
	    line-height: 24px;
	}
	.secondary li .arrow {
	    line-height: 26px;
	}
	
	
	/* Footer */
	.footer .right {
	    float: left;
	    width: 100%;
	}
}

/* Print Styles */

/* Based on HTML5 boilerplate print styles */
@media print {
	* {
	    background: transparent !important;
	    color: black !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    filter: none !important;
	    -ms-filter: none !important;
	}
	a,
	a:visited {
	    text-decoration: underline
	}
	a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

	thead {
	    display: table-header-group
	}
	tr,
	img {
	    page-break-inside: avoid
	}
	img {
	    max-width: 100% !important
	}
	pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Simple theme custom print styles */
	.header,
	.footer,
    .nav-open-button,
    .search-bar,
    .search-dropdown-icon,
    nav.primary {
	    display: none;
	}
}

/* BREAKPOINT 480px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 480px) {
.headerCallOuts{max-width:70%; width:70%;}
.headerCallOuts .inner{padding:10px;}
.headerCallOuts button {font-size:26px; padding:10px 20px;}

	
}