/********************************************
*	Table of Contents
*	1. Reset Browser Styles: Overrides the default browser styles to start with a clean slate
*	2. Grid Styles: 12 column grid system, please make sure selectivizr v1.0.2 is added to the scripts for ie8 compatibility
*	3. Main Styles: Main text and body styles
*	4. Layout Styles: Custom global branding styles for the header, navigation, content and footer
*	5. Form Styles: Styling forms and associated elements
*	6. Page Specific Styles: Styles that are specific to a certain page or group of pages
*	7. Animations
*	8. IE Styles
********************************************/

/******************************************** 
1. Reset Browser 
********************************************/
body {
  overflow-x: hidden;
  font-size: 0.825em;
}
.portrait-only, .tablet-portrait-only {
  display: block !important;
}
.landscape-only, .desktop-only {
  display: none !important;
}
.tablet-full-width {
	width: auto !important;
}

/******************************************** 
2. Grid Styles
********************************************/
.gutters .col {
	margin-left: 24px;
}
ul.row {
	margin-left: -24px;
}
ul.gutters .col:first-child {
	margin-left: 24px;
}
ul.gutters li {
	margin-bottom: 24px;
}
.grid-1 { width: 60px; }
.grid-2 { width: 120px; }
.grid-3 { width: 180px; }
.grid-4 { width: 240px; }
.grid-5 { width: 300px; }
.grid-6 { width: 360px; }
.grid-7 { width: 420px; }
.grid-8 { width: 480px; }
.grid-9 { width: 540px; }
.grid-10 { width: 600px; }
.grid-11 { width: 660px; }
.grid-12 { width: 720px; }
.gutters .grid-1 { width: 38px; }
.gutters .grid-2 { width: 100px; }
.gutters .grid-3 { width: 162px; }
.gutters .grid-4 { width: 224px; }
.gutters .grid-5 { width: 286px; }
.gutters .grid-6 { width: 348px; }
.gutters .grid-7 { width: 410px; }
.gutters .grid-8 { width: 472px; }
.gutters .grid-9 { width: 534px; }
.gutters .grid-10 { width: 596px; }
.gutters .grid-11 { width: 658px; }
.gutters .grid-12 { width: 720px; }
.prefix-1 { margin-left: 60px; }
.prefix-2 { margin-left: 120px; }
.prefix-3 { margin-left: 180px; }
.prefix-4 { margin-left: 240px; }
.prefix-5 { margin-left: 300px; }
.prefix-6 { margin-left: 360px; }
.prefix-7 { margin-left: 420px; }
.prefix-8 { margin-left: 480px; }
.prefix-9 { margin-left: 540px; }
.prefix-10 { margin-left: 600px; }
.prefix-11 { margin-left: 660px; }
.prefix-12 { margin-left: 720px; }
.gutters .prefix-1 { margin-left: 38px; }
.gutters .prefix-2 { margin-left: 100px; }
.gutters .prefix-3 { margin-left: 162px; }
.gutters .prefix-4 { margin-left: 224px; }
.gutters .prefix-5 { margin-left: 286px; }
.gutters .prefix-6 { margin-left: 348px; }
.gutters .prefix-7 { margin-left: 410px; }
.gutters .prefix-8 { margin-left: 472px; }
.gutters .prefix-9 { margin-left: 534px; }
.gutters .prefix-10 { margin-left: 596px; }
.gutters .prefix-11 { margin-left: 658px; }
.gutters .prefix-12 { margin-left: 720px; }
.suffix-1 { margin-right: 60px; }
.suffix-2 { margin-right: 120px; }
.suffix-3 { margin-right: 180px; }
.suffix-4 { margin-right: 240px; }
.suffix-5 { margin-right: 300px; }
.suffix-6 { margin-right: 360px; }
.suffix-7 { margin-right: 420px; }
.suffix-8 { margin-right: 480px; }
.suffix-9 { margin-right: 540px; }
.suffix-10 { margin-right: 600px; }
.suffix-11 { margin-right: 660px; }
.suffix-12 { margin-right: 720px; }
.gutters .suffix-1 { margin-right: 38px; }
.gutters .suffix-2 { margin-right: 100px; }
.gutters .suffix-3 { margin-right: 162px; }
.gutters .suffix-4 { margin-right: 224px; }
.gutters .suffix-5 { margin-right: 286px; }
.gutters .suffix-6 { margin-right: 348px; }
.gutters .suffix-7 { margin-right: 410px; }
.gutters .suffix-8 { margin-right: 472px; }
.gutters .suffix-9 { margin-right: 534px; }
.gutters .suffix-10 { margin-right: 596px; }
.gutters .suffix-11 { margin-right: 658px; }
.gutters .suffix-12 { margin-right: 720px; }


/******************************************** 
3. Main Styles
********************************************/


/******************************************** 
4. Layout Styles
********************************************/
/* 4.1: Containers */
#container {
  overflow: hidden;
}
.content {
  width: 720px;
}

/* 4.2: Header */
#logo a {
  padding-bottom: 16px;
}

/* 4.3: Footer */
#footer div.default {
  width: 120px;
}
#footer a {
  font-size: 0.9em;
}

/* 4.4: Navigation */
/*#navigation {
  float: none;
  width: auto;
}
#menu-main-menu {
  padding-top: 0;
}*/
#container {
  margin-left: 0px;
  -webkit-transition: all 0.5s ease 0.1s;
  -moz-transition: all 0.5s ease 0.1s;
  transition: all 0.5s ease 0.1s;
}
.menu-open #container {
  margin-left: -240px;
}
.menu-toggle {
  background-image: url("../img/menu.png");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: block;
  height: 40px;
  position: absolute;
  right: 24px;
  text-indent: -9999em;
  top: 20px;
  width: 40px;
}
#menu-main-menu {
  background-color: rgba(51, 51, 51, 0.95);
  color: #ffffff;
  float: none;
  height: 100%;
  position: fixed;
  right: -240px;
  top: 0;
  width: 240px;
  -webkit-transition: all 0.5s ease 0.1s;
  -moz-transition: all 0.5s ease 0.1s;
  transition: all 0.5s ease 0.1s;
}
.menu-open #menu-main-menu {
  right: 0px;
}
#navigation li {
  display: block;
  float: none;
  margin-left: 12px;
  margin-right: 12px;
}
#menu-main-menu > li::after {
  display: none;
}
#menu-main-menu > li > a {
  border-bottom: 1px dotted #666666;
  color: #ffffff;
  display: block;
  height: auto;
  line-height: normal;
  padding: 10px 0;
}
#navigation .sub-menu {
  background-color: transparent;
  border-bottom: 1px dotted #666666;
  box-shadow: none;
  display: block;
  padding: 0;
  position: static;
  width: auto;
}
#navigation .sub-menu li {
  border-bottom: medium none;
}
#navigation .sub-menu a {
  color: #aaaaaa;
  padding-left: 10px;
  position: relative;
}
#navigation .sub-menu a::before {
  border-left: 5px solid #aaaaaa;
  content: " ";
  display: block;
  height: 0;
  left: 0;
  position: absolute;
  width: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  top: 11px;
}



/* 4.5: Page Content */

/* 4.6: Others */
.cta .image {
  margin-top: 12px;
  text-align: center;
}
.cta img {
  display: inline;
  float: none;
}

/******************************************** 
5. Form Styles
********************************************/


/******************************************** 
6. Page Specific Styles
********************************************/
#timeline .carousel-container li {
  width: 210px;
}

/******************************************** 
7. Scroll Animations
********************************************/
.st-hide, .st-top-to-bottom, .st-bottom-to-top, .st-left-to-right, .st-right-to-left, .st-fade, .st-load {
	opacity: 1 !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	transition: none !important;
}