/*------->>> TABLE OF CONTENTS <<<-------
	1. FOUNDATION OVERRIDE STYLES
	2. RESET AND OVERRIDES
	3. BASIC STYLES
	4. GLOBAL STYLES
	5. HEADER STYLES
	6. BANNER
	7. HERO
	8. PRIMARY CONTENT
	9. CALLOUTS
	10. TAGLINE
	11. FOOTER
	12. PANEL
	13. FORMS
	14. STYLE GUIDE
	15. KEYFRAME ANIMATIONS
	
/*------->>> COLOR PALETTE <<<-------
	#f26c23 - rgb(242,108,35) - Primary Color [orange]
	#4ab4c5 - rgb(74,180,197) - Secondary Color [blue]
	#2b2b2b - rgb(43,43,43) Tertiary Color [grey]

/*------->>> FONT STACKS & TYPOGRAPHY <<<-------
	font-family: 'Raleway', sans-serif; [Primary Font | Google Fonts | 400 & 700]
	font-family: "eurostile",sans-serif [Secondary Font | Google Fonts | 700]
	font-family: 'FontAwesome' [Icon Font]
		SAMPLE CSS USAGE: fortawesome.github.io/Font-Awesome/cheatsheet/
		.myDiv {
			font-family:"FontAwesome";
			content:"\f111";
		}
		SAMPLE HTML USAGE: fortawesome.github.io/Font-Awesome/examples/
		<span class="fa-stack fa-lg">
			<i class="fa fa-square-o fa-stack-2x"></i>
			<i class="fa fa-twitter fa-stack-1x"></i>
		</span>
*/

/*------->>> FOUNDATION OVERRIDE STYLES <<<-------*/

.row {
  max-width: 960px;
  max-width: 60rem;
}

.row--wide {
  max-width: 1400px;
  max-width: 87.5rem;
}

/*- Tables -*/

table tbody,
table tfoot,
table thead {
  border: 0;
  background-color: inherit;
}

table tbody td,
table tbody th,
table tfoot td,
table tfoot th,
table thead td,
table thead th {
  padding: inherit;
  font-weight: inherit;
  text-align: inherit;
}

/*------->>> RESETS AND OVERRIDES <<<-------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
html a,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: auto;
  min-height: 100%;
}

body {
  line-height: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

main,
li {
  display: block;
}

a,
button {
  color: inherit;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

a {
  text-decoration: none;
}

button {
  overflow: visible;
  border: 0;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:focus {
  outline: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Box Model Reset */

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Form Resets */

input,
label,
select,
button,
textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  /* Browsers have different default form fonts */
  font-size: 13px;
  font-family: Arial;
}

/* Remove the stupid outer glow in Webkit */

input:focus,
select:focus {
  outline: 0;
}

/* All of our custom controls should be what we expect them to be */

input,
textarea {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/* These elements are usually rendered a certain way by the browser */

button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type=checkbox],
input[type=radio] {
  /*	width:13px;
	height:13px;*/
}

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}

::-webkit-search-decoration {
  display: none;
}

button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  /* Fix IE7 display bug */
  overflow: visible;
  width: auto;
}

::-webkit-file-upload-button {
  padding: 0;
  border: 0;
  background: none;
}

textarea {
  vertical-align: top;
  overflow: auto;
}

select[multiple] {
  vertical-align: top;
}

/*- Fix red outline for required fields in FF & Safari -*/

input:invalid {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*------->>> BASIC STYLES <<<-------*/

html {
  font-size: 16px;
}

body,
html {
  background-color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #333;
}

a,
a:link,
a:active,
a:visited {
  color: #f26c23;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
}

a:hover {
  color: #4ab4c5;
}

abbr {
  /* Replaces acronym */
  color: #4ab4c5;
  text-decoration: none;
  border: 0px;
  cursor: help;
}

blockquote {
  display: block;
  padding: 0 0 0 55px;
  position: relative;
  font-style: italic;
  border-bottom: 3px solid #333;
  color: #333;
}

blockquote:before {
  content: "\201C";
  font-family: arial, sans-serif;
  font-size: 10rem;
  font-style: normal;
  color: #333;
  position: absolute;
  left: -8px;
  top: -15px;
}

blockquote::after {
  content: "";
}

blockquote p {
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 400;
  color: #333;
}

blockquote cite {
  display: block;
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: right;
  color: #333;
}

blockquote cite:before {
  content: '\2014 \0020';
}

em {
  /* Replaces <i> */
  font-style: italic;
}

em {
  /* Replaces <i> */
  font-style: italic;
}

hr {
  border: 0;
  height: 1px;
  position: relative;
}

hr:before {
  top: -0.5em;
  height: 1em;
}

hr:after {
  content: '';
  height: 0.5em;
  /*- half the height of :before -*/
  top: 1px;
  /*- height of hr -*/
}

hr:before,
hr:after {
  content: '';
  position: absolute;
  width: 100%;
}

hr,
hr:before {
  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -o-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

hr:after {
  background: #fff;
}

i {
  /* Outdated, still used for Font Awesome and Flexnav Menu Icons */
  font-style: normal;
}

small {
  font-size: 80%;
}

strong {
  /*  Replaces <b> */
  font-weight: bold;
}

sup,
sub {
  position: relative;
  top: -0.4em;
  vertical-align: baseline;
}

sub {
  top: 0.4em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: normal;
  font-weight: 700;
}

h1 {
  font-family: "eurostile",sans-serif;
  font-size: 2.625rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

h2 {
  font-family: "eurostile",sans-serif;
  font-size: 1.750rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.375rem;
  color: #f26c23;
}

h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.125rem;
}

h5 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.125rem;
  font-weight: normal;
  font-style: italic;
  color: #f26c23;
}

h6 {
  font-size: 1.125rem;
  font-weight: normal;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h1 a:link,
h2 a:link,
h3 a:link,
h4 a:link,
h5 a:link,
h6 a:link,
h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active,
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: inherit;
}

p,
li,
td,
dt,
dd {
  font-size: 1.125rem;
  line-height: 1.875rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: .5em;
}

p,
ul,
ol,
dl,
table,
blockquote,
hr {
  margin-bottom: 2rem;
}

ul:not([class]) {
  list-style: none;
  padding: 0 0 0 0.938rem;
}

ul:not([class]) li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

ul:not([class]) li:before {
  content: "";
  height: 27px;
  width: 22px;
  background: url(../images/icon-checkmark.svg) top center no-repeat;
  position: absolute;
  top: 0.375rem;
  left: 0;
}

nav ul:not([class]),
form ul:not([class]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul:not([class]) li,
form ul:not([class]) li {
  padding: 0;
}

nav ul:not([class]) li:before,
form ul:not([class]) li:before {
  display: none;
}

ol:not([class]) {
  list-style: none;
  padding: 0 0 0 0.938rem;
}

ol:not([class]) li {
  position: relative;
  padding-left: 1rem;
  counter-increment: step-counter;
  margin-bottom: 0.188rem;
}

ol:not([class]) li:before {
  content: counter(step-counter) ".";
  color: #333;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0;
}

dl:not([class]) dt {
  font-family: "eurostile",sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #f26c23;
  margin-bottom: -0.5rem;
  margin-top: 0.5rem;
}

dl:not([class]) dd {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/*- Highlighting on Select [Click and Drag] -*/

::-moz-selection {
  background: #4ab4c5;
  color: #fff;
}

::selection {
  background: #4ab4c5;
  color: #fff;
}

/*------->>> GLOBAL STYLES <<<-------*/

.img--styled {
  -webkit-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
}

/*- Flexible iFrame [div class="flex__container" then IFRAME] -*/

.flex__container {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.flex__container--styled {
  -webkit-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
}

.flex__container iframe,
.flex__container object,
.flex__container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*- Responsive Tables -*/

.table--styled {
  position: relative;
  width: 100%;
  border-top: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  margin: 2.5em auto;
  font-size: 0.75rem;
  border-collapse: separate;
  text-align: center;
  border-radius: 0;
  -webkit-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  overflow: hidden;
}

.table--styled caption {
  text-align: center;
  font-family: "Raleway", sans-serif;
  color: #333;
  font-size: 1.625rem;
  font-weight: 500;
}

.table--styled thead tr th {
  padding: 1rem 0;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  vertical-align: middle;
  background: #E1E1E1;
  color: #333;
  border-bottom: 1px solid #dcdcdc;
}

.table--styled td {
  border-bottom: 1px solid #dcdcdc;
  padding: .3em 0.5em;
  border-collapse: collapse;
}

.table--styled tr:nth-child(even) {
  background: #eee;
}

.table--styled tr:nth-child(odd) {
  background: #FFF;
}

/*- Button Styling -*/

.btn,
.subnav-list a {
  display: inline-block;
  position: relative;
  background: #f26c23;
  padding: .25rem 1rem .188rem;
  font-family: 'Raleway', sans-serif;
  font-size: .813rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.063rem;
  border: 0 !important;
  border-radius: 25px;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  cursor: pointer;
}

.btn--large {
  font-size: 1.313rem;
}

a.btn,
.subnav-list a {
  color: #fff;
}

.btn:hover,
.subnav-list a:hover {
  color: #fff;
  background: #4ab4c5;
  -webkit-box-shadow: 0px 17px 8px -15px rgba(39, 39, 39, 0.75);
  box-shadow: 0px 17px 8px -15px rgba(39, 39, 39, 0.75);
}

.btn--secondary {
  background: #4ab4c5;
}

.btn--secondary:hover,
a.btn--secondary:hover {
  background: #f26c23;
}

/* Link Class with Arrows */

.link--more {
  font-weight: 700;
  position: relative;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
}

.link--more:after {
  position: relative;
  right: 2px;
  font-family: "FontAwesome";
  content: " \f101";
  font-weight: 400;
  -o-transition: right 200ms ease-in-out;
  transition: right 200ms ease-in-out;
  -webkit-transition: right 200ms ease-in-out;
}

.link--more:hover:after {
  right: -3px;
}

/*- Backgrounds -*/

.background--primary {
  background-color: #f26c23;
}

.background--secondary {
  background-color: #4ab4c5;
}

.background--tertiary {
  background-color: #2b2b2b;
}

.background--soft-accent {
  background-color: #f5f5f5;
}

.band {
  padding: 2rem 0;
}

/*- Display -*/

.display--block {
  display: block;
}

.display--inline {
  display: inline;
}

.display--inline-block {
  display: inline-block;
}

.display--hidden {
  display: none;
}

.display--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*- Width and Height -*/

.width--20 {
  width: 20%;
}

.width--25 {
  width: 25%;
}

.width--33 {
  width: 33%;
}

.width--40 {
  width: 40%;
}

.width--50 {
  width: 50%;
}

.width--66 {
  width: 66%;
}

.width--75 {
  width: 75%;
}

.width--100 {
  width: 100%;
}

.height--50 {
  height: 50%;
}

.height--100 {
  height: 100%;
}

/*- Positioning -*/

.position--fixed {
  position: fixed;
}

.position--relative {
  position: relative;
}

.position--absolute {
  position: absolute;
}

.position--static {
  position: static;
}

.position--center {
  left: 0;
  right: 0;
  margin: 0 auto;
}

.valign--middle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.center--center {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*- Floats -*/

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.float--left {
  float: left;
}

.float--right {
  float: right;
}

/*- Typography -*/

.color--primary {
  color: #f26c23;
}

.color--secondary {
  color: #4ab4c5;
}

.color--tertiary {
  color: #2b2b2b;
}

.font--primary {
  font-family: 'Raleway', sans-serif;
}

.font--secondary {
  font-family: "eurostile",sans-serif;
}

.underline {
  text-decoration: underline;
}

.uppercase {
  text-transform: uppercase;
}

.titlecase {
  text-transform: capitalize;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

/*- Text Alignment -*/

.text--left {
  text-align: left;
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}

.text--justify {
  text-align: justify;
}

/*------->>> HEADER STYLES <<<--------*/

.header {
  position: relative;
  padding-bottom: 0;
  z-index: 3000;
}

.header__wrapper {
  position: relative;
  background: #ffffff;
  -webkit-box-shadow: 0px 1px 10px 0px rgba(17, 17, 17, 0.26);
  box-shadow: 0px 1px 10px 0px rgba(17, 17, 17, 0.26);
  z-index: 5020;
}

.header__call {
  display: block;
  width: 100%;
  background: #f26c23;
  text-align: center;
}

a.header__call__link,
.header__call__link,
.header__call__link:hover {
  display: block;
  font-family: "eurostile",sans-serif;
  font-weight: 700;
  size: 1.313rem;
  color: #fff;
  padding: 0.625rem 1rem;
}

.header__logo__link {
  padding: 0.5rem 0;
  display: block;
  text-align: center;
}

.header__logo__link svg {
  width: 100%;
  /*max-width:202px;
	max-height:65px;*/
}

/*------->>> BANNER <<<-------*/

.banner {
  display: block;
  padding: 0 0 60% 0;
  width: 100%;
  height: 0;
  position: relative;
  z-index: 550;
  overflow: hidden;
}

.banner img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  min-height: 100%;
  max-height: 100%;
  max-width: none;
  margin: 0 auto;
  left: -100%;
  right: -100%;
}

.banner__messaging {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.banner__messaging__title {
  margin: 0;
  font-size: 2.625rem;
  color: #fff;
  text-shadow: 0.515px 0.857px 1px rgba(17, 17, 17, 0.28);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}

/*------->>> HERO <<<-------*/

.hero {
  position: relative;
}

.hero__mobile__image,
.hero__desktop__image {
  display: block;
  width: 100%;
  height: auto;
}

.hero__desktop::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(60,60,60,.3); */
  background-color: rgba(191, 57, 0, 0.5);
  /* -- tried making bg orange and hated it */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='31' height='31' fill-opacity='0.3' fill='%23000000'/%3E%3C/svg%3E");
}

.hero__messaging {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0 auto;
  text-align: center;
}

.hero__messaging__title {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 0rem 0;
}

.hero__messaging__text {
  font-size: 15px;
  color: #fff;
  margin: 0rem 0 0 0;
}

.hero .slick-slide img {
  /* position: static;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0; */
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hero .slick-active img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

/*------->>> PRIMARY CONTENT <<<-------*/

.main {
  position: relative;
  background: #fff;
  padding-top: 2rem;
}

.primary__content {
  padding-bottom: 1.5rem;
}

.primary__content--index {
  background-color: #fff;
  max-width: 1200px;
  max-width: 75em;
}

.primary__content__container--index {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.primary__content img {
  margin: 7px 0;
  padding: 0;
}

.primary__content img.position--center {
  margin: 7px auto;
}

.primary__content img.float--left {
  margin-right: 7px;
}

.primary__content img.float--right {
  margin-left: 7px;
}

.primary__content a:not([class]),
.primary__content a:link:not([class]),
.primary__content a:active:not([class]),
.primary__content a:visited:not([class]) {
  font-weight: 700;
}

.page__title {
  text-align: center;
}

.features {
  text-align: center;
  padding: 3.125rem 0 0 0;
}

.features__title {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.features__icon svg {
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
  max-height: 100px;
  margin: 0 auto;
}

/*------->>> CALLOUT STYLES <<<-------*/

.callouts {
  position: relative;
  background: url(../images/bg-callouts.jpg) top center no-repeat;
}

.callouts__intro {
  padding: 2rem 0;
  text-align: center;
}

.callouts__header {
  font-family: 'Play',sans-serif;
  font-size: 50px;
  color: #fff;
  text-shadow: 0.407px 0.914px 1px rgba(17, 17, 17, 0.45);
}

.callouts__wrapper {
  position: relative;
  max-width: 1200px;
  max-width: 75em;
  margin: 25px 0.625rem;
  -webkit-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  border: 1px solid #1d1d1d;
  border-bottom: 0;
  border-radius: 4px;
  overflow: hidden;
}

.callouts__link {
  display: block;
  position: relative;
  border-bottom: 1px solid #1d1d1d;
}

.callouts__link:before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(45, 56, 63, 0.8);
  -webkit-transition: all ease-in-out .4s;
  -o-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
}

.callouts__image {
  display: block;
  width: 100%;
}

.callouts__title {
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  -webkit-transform: translateY(-33%);
  -ms-transform: translateY(-33%);
  transform: translateY(-33%);
  font-size: 1.563rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0.407px 0.914px 1px rgba(17, 17, 17, 0.45);
  -webkit-transition: all ease-in-out .4s;
  -o-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
  /* -webkit-animation-name: rotateInDownLeft;
	animation-name: rotateInDownLeft;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both; */
}

.callouts__text {
  position: absolute;
  bottom: -150px;
  left: 0;
  right: 0;
  background: #f26c23;
  font-family: "Raleway", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 1rem 0;
  margin: 0;
  -webkit-transition: all ease-in-out .4s;
  -o-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
}

.callouts__link:hover .callouts__title {
  color: #f26c23;
}

/*------->>> TAGLINE <<<-------*/

.tagline {
  padding: 2rem 0 3rem;
  text-align: center;
}

.tagline__text {
  font-size: 35px;
  line-height: 45px;
}

/*------->>> SCROLLING CONTENT STYLES <<<-------*/

.scrolling-content {
  position: relative;
  width: 100%;
}

.scrolling-content__screen {
  background-image: url(../images/browser-frame-claytoncorp.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  max-width: 300px;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
}

.scrolling-content__viewport {
  background-size: cover;
  background-position: 0 0;
  -webkit-transition: background-position 4s ease-in;
  -o-transition: background-position 4s ease-in;
  transition: background-position 4s ease-in;
}

.scrolling-content:hover .scrolling-content__viewport {
  background-position: 0 100%;
}

/*------->>> FOOTER STYLES <<<-------*/

.footer {
  padding: 2.5rem 0;
  background: #2d383f;
  color: #fff;
  overflow: hidden;
}

.footer__logo__link {
  padding: 0.5rem 0;
  display: block;
  text-align: center;
}

.footer__logo__link svg {
  width: 100%;
  max-width: 202px;
  max-height: 65px;
}

.footer__address {
  text-align: center;
}

.footer__address__text {
  font-size: 0.875rem;
  color: #fff;
  line-height: 1.625rem;
}

.footer__social {
  text-align: center;
}

.footer__social__link,
.footer__social__link:link,
.footer__social__link:active,
.footer__social__link:visited {
  position: relative;
  display: inline-block;
  background: #a1a1a1;
  width: 35px;
  height: 35px;
  margin-left: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  color: #2D383F;
  text-align: center;
  line-height: 35px;
  border-radius: 100%;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer__social__link:first-child {
  margin-left: 0;
}

.footer__social__link:hover {
  background: #f26c23;
  color: #fff;
}

.footer__copyright {
  text-align: center;
}

.footer__copyright__text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.625rem;
}

/*------->>> PANEL <<<-------*/

.panel {
  padding: 3rem 0 4rem 0;
  background-color: #bec3c5;
  background-size: auto 100%;
  text-align: center;
}

.panel__title {
  font-size: 2.5rem;
  color: #fff;
}

/*------->>> FORMS <<<-------*/

.formElements h2 {
  font-size: 1.750rem;
  font-weight: 700;
  color: #333;
  line-height: 1;
  margin: 2rem 0;
}

.formElements .row {
  clear: none;
  margin-left: auto;
  margin-right: auto;
}

.formElements .row > ul {
  width: 100%;
  padding: 0;
  display: block;
}

.formElements label {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
}

.formElements legend {
  position: relative;
}

.formElements .formRow > ul > li.required > label::after,
.formElements .formRow > ul > li.required legend::after {
  position: absolute;
  top: 0.25rem;
  right: -0.813rem;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #f26c23;
}

.primary__content form ul li,
form ul li {
  display: block;
  width: 100%;
  position: relative;
  margin: 0 0 23px 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

form input[type=text],
form input[type=email],
form input[type=tel],
form textarea,
form select,
select {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 7px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  line-height: 1.5rem;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border: 1px solid #2b2c2d;
  -webkit-transition: all ease-in-out .15s;
  -o-transition: all ease-in-out .15s;
  transition: all ease-in-out .15s;
}

form select,
select {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 25px 7px;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

form input[type=text]:focus,
form input[type=email]:focus,
form input[type=tel]:focus,
form textarea:focus,
form select:focus,
form input[type=radio]:focus,
form input[type=checkbox]:focus,
select:focus {
  border: 1px solid #f26c23;
  -webkit-box-shadow: none;
  box-shadow: none;
}

form input[type=radio],
form input[type=checkbox] {
  margin: 0 0.313rem 0.250rem 0;
}

form input[type=button],
.currentForm input[type=button],
form input[type=submit],
.currentForm input[type=submit] {
  display: block;
  width: auto;
  margin: 0 auto;
  position: relative;
  top: 0;
  background: #f26c23;
  padding: 15px 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.063rem;
  border: 0 !important;
  border-radius: 4px;
  -webkit-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
}

form input[type=button] {
  background: #4ab4c5;
}

form input[type=button]:hover,
form input[type=button]:focus,
form input[type=submit]:hover,
form input[type=submit]:focus {
  top: 4px;
  cursor: pointer;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

form input[type=submit]:hover,
form input[type=submit]:focus {
  background: #4ab4c5;
}

form input[type=button]:hover,
form input[type=button]:focus {
  background: #f26c23;
}

/*- Floating Labels -*/

form label {
  display: block;
}

form ul li label {
  position: absolute;
  left: 0.625rem;
  top: 0.75rem;
  -webkit-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  /* pointer-events:none; */
}

form ul li.checkbox label,
form ul li.radio label {
  position: relative;
  top: auto;
  left: auto;
}

.formElements ul li.active-field label {
  top: -1.125rem;
  left: 0.625rem;
  font-size: 0.875rem;
  color: #333;
}

.formElements .formRow > ul > li.required.active-field > label::after,
.formElements .formRow > ul > li.required.active-field legend::after {
  color: #f26c23;
}

.formElements .row,
.formElements .formRow {
  clear: none;
}

/*- Spacing -*/

.formElements .formRow ul > li {
  padding-right: 0.625rem !important;
}

.formElements .formRow ul > li:only-child {
  width: 100%;
}

.formElements .formRow ul > li:last-child,
.formElements .formRow ul > li:only-child {
  padding-right: 0 !important;
}

.formElements .formRow ul > li:nth-last-child(n+2):nth-last-child(-n+2):first-child,
.formElements .formRow ul > li:nth-last-child(n+2):nth-last-child(-n+2):first-child ~ li {
  width: 50%;
}

.formElements .formRow ul > li:nth-last-child(n+3):nth-last-child(-n+3):first-child,
.formElements .formRow ul > li:nth-last-child(n+3):nth-last-child(-n+3):first-child ~ li {
  width: 33.333%;
}

.formElements .formRow ul > li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
.formElements .formRow ul > li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
  width: 25%;
}

/*---> Panel Form Specific <---*/

.panel .formElements ul li.active-field label {
  color: #fff;
}

.panel .formElements .formRow > ul > li.checkbox,
.panel fieldset {
  text-align: center;
}

.panel .formElements .formRow > ul > li.checkbox span {
  display: inline-block;
  padding: 0 1rem;
}

.panel legend {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.panel .formElements .formRow > ul > li.required legend::after {
  right: auto;
}

/*------->>> STYLE GUIDE <<<-------*/

.example {
  margin: 25px 0;
  position: relative;
  border: 1px dotted #acacab;
  padding: 1.875rem 0.938rem;
  -webkit-box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.1);
}

.example:before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 75px;
  content: "Example";
  color: #fff;
  background: #4ab4c5;
  padding: 0.313rem 0.438rem;
  font-size: 0.813rem;
  text-align: center;
}

code {
  background: #f2f2f2;
  overflow: visible;
  padding-left: 5px;
  padding-right: 5px;
}

.code {
  position: relative;
  padding: 1.875rem 0.938rem;
  border: 1px solid #acacab;
  background: #f2f2f2;
  line-height: 1.4;
  font-size: inherit;
}

.code:before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 75px;
  content: "Code";
  color: #fff;
  background: #f26c23;
  padding: 0.313rem 0.438rem;
  font-size: 0.813rem;
  text-align: center;
}

.code code {
  background: tranparent;
  padding: 0;
  color: #d5530d;
}

.colors {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.colors .box {
  margin-top: 0.938rem;
  background: #fff;
  border: 1px solid #333;
  -webkit-box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.7);
}

.colors .box div {
  width: 100%;
  padding-top: 0.7em;
  height: 75px;
}

.colors .box div h6 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 1rem 0 0 0;
}

/*------->>> Cards <<<-------*/

.card {
  height: 100%;
  height: calc(100% - 1rem);
}

.card-title,
.card-image {
  text-align: center;
}

.card-icon {
  font-size: 5rem;
  padding: 1rem;
  color: #2d383f;
}

.card-title h3 {
  margin: .625rem 0;
}

.card-section p {
  margin: 0;
}

.card-section p + p {
  margin-top: .5rem;
}

/*------->>> Modular Examples <<<-------*/

.module-example__subhead {
  font-weight: normal;
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: .25rem;
}

.module-example__head {
  margin-top: 0;
  font-size: 1.875rem;
}

.module-example__graphic {
  margin-top: 2rem;
}

.module-example__image {
  -webkit-box-shadow: -1px 0px 27.72px 0.28px rgba(0, 0, 0, 0.15);
  box-shadow: -1px 0px 27.72px 0.28px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.module-example__action {
  margin: 1.5rem 0;
}

/*------->>> Accordion Styles <<<-------*/

.accordion {
  background: transparent none;
}

.accordion-title {
  padding: .5rem 1rem .5rem 2rem;
  border: none;
  border-radius: 0;
  background: transparent none;
}

.accordion-title,
a.accordion-title {
  color: #000000;
  font-weight: bold;
  font-size: 1.125rem;
}

:last-child:not(.is-active) > .accordion-title {
  border-radius: 0;
  border: none;
}

.accordion-title::before {
  left: .25rem;
  right: auto;
  font-size: 1.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #f26c23;
  background-color: #f26c23;
  color: #ffffff;
  -webkit-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
  padding-top: 9px;
  line-height: 0;
  margin-top: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.accordion-title:hover {
  background: transparent none;
}

.is-active > .accordion-title::before {
  background-color: #ffffff;
  color: #f26c23;
  padding-top: 7px;
}

.accordion-content {
  padding: .5rem 1rem .5rem 2rem;
  border: none;
  background: none transparent;
}

.accordion-content > *:last-child {
  margin-bottom: 0;
}

/*------->>> Modal Window <<<-------*/

.reveal {
  z-index: 3999;
}

.reveal.reveal--video {
  background-color: rgba(0, 0, 0, 0.4);
}

.close-button {
  color: #ffffff;
}

/*------->>> Expanding Thumbnails <<<-------*/

.tall-image {
  position: relative;
  overflow: hidden;
  max-width: 400px;
  max-height: 300px;
  -webkit-box-shadow: 0 0 0 1px #dddddd;
  box-shadow: 0 0 0 1px #dddddd;
  /* -webkit-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
	-moz-box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55);
	box-shadow: 0px 20px 8px -15px rgba(39, 39, 39, 0.55); */
  margin: 1rem auto;
  -webkit-transition: max-height 600ms ease-in-out;
  -o-transition: max-height 600ms ease-in-out;
  transition: max-height 600ms ease-in-out;
}

.tall-image img {
  width: 100%;
  margin: 0;
  vertical-align: bottom;
}

.tall-image:hover {
  max-height: 1100px;
}

.faq-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.faq-list__q {
  background-color: #ededed;
  padding: .35rem .35rem .35rem 2.5rem;
  margin-bottom: .388rem;
  position: relative;
  cursor: pointer;
}

.faq-list__a {
  max-height: 0;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  opacity: 0;
  overflow: hidden;
  position: relative;
  padding-left: 2.5rem;
  padding-right: .35rem;
}

.faq-list__q::before {
  content: 'Q:';
  position: absolute;
  left: .875rem;
  font-weight: bold;
  color: #f26c23;
}

.faq-list__a::before {
  content: 'A:';
  position: absolute;
  left: .875rem;
  font-weight: bold;
  color: #4ab4c5;
}

.faq-list__a--show {
  max-height: 400px;
  padding-top: .35rem;
  padding-bottom: .35rem;
  opacity: 1;
}

.faq-list__a--long.faq-list__a--show {
  max-height: 1500px;
}

/*------->>> Subnav <<<-------*/

.subnav-list {
  list-style: none;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.subnav-list li {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.subnav-list a {
  margin: 0 .5rem 1rem;
}

/*------->>> Keyframes <<<-------*/

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@media all and (min-width: 29.375rem) {
  /*- 470px and up -*/

  /*---> Callouts <---*/

  .callouts__title {
    top: 43%;
    -webkit-transform: translateY(-43%);
    -ms-transform: translateY(-43%);
    transform: translateY(-43%);
  }
}

@media all and (min-width: 40rem) {
  /* 640px and up */

  .medium-uncollapse > .columns {
    /* Even tho is in their docs, Foundation does NOT have a .medium-uncollapse class */
    padding-right: .625rem;
    padding-left: .625rem;
  }
}

@media all and (min-width: 64.063em) {
  /*- *1025px and up -*/

  a[href^="tel"] {
    pointer-events: none;
  }

  /*---> Callouts <---*/

  /* .callouts__link:hover .callouts__title {
		-webkit-animation-name: rotateOutUpRight;
		animation-name: rotateOutUpRight;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	} */

  .callouts__link:hover:before {
    height: 0;
  }

  .callouts__link:hover .callouts__text {
    bottom: 0;
  }
}

@media all and (min-width: 40em) {
  /*- 640px and up -*/

  /*---> Header <---*/

  .header__wrapper {
    position: absolute;
    width: calc(100% - 1.25rem);
    max-width: 1200px;
    max-width: 75em;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 0.625rem;
    border-radius: 0 0 4px 4px;
  }

  .header__wrapper {
    position: fixed;
  }

  .header__logo__link {
    padding: 0.625rem;
    text-align: left;
  }

  .header__call {
    background: transparent;
    text-align: right;
    padding-right: 0.625rem;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: flex-end;
    -webkit-box-pack: end;
    justify-content: flex-end;
  }

  a.header__call__link,
  .header__call__link,
  .header__call__link:hover {
    color: #f26c23;
  }

  /*---> Banner <---*/

  .banner {
    padding: 0 0 40% 0;
  }

  .banner__messaging {
    width: 50%;
  }

  .banner__messaging__title {
    top: calc(50% + 25px);
  }

  /*---> Primary Content <---*/

  .main--index {
    margin-bottom: -60px;
  }

  .primary__content--index {
    position: relative;
    top: -120px;
    padding: 0.063rem 1.875rem;
    margin: 0 0.625rem;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: 0.813px 1.827px 10px 0px rgba(17, 17, 17, 0.13);
    box-shadow: 0.813px 1.827px 10px 0px rgba(17, 17, 17, 0.13);
  }

  .primary__content--index:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1.25rem;
    left: -0.625rem;
    right: -0.625rem;
    height: 95%;
    /* IE10+ */
    /* Mozilla Firefox */
    /* Opera */
    background-image: -o-linear-gradient(bottom, white 0%, white 18%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, rgba(255, 255, 255, 0) 100%);
    /* Webkit (Safari/Chrome 10) */
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom, white 0%, white 18%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, rgba(255, 255, 255, 0) 100%);
  }

  /*---> Callouts <---*/

  .callouts__wrapper {
    border-right: 0;
  }

  .callouts__header {
    font-size: 60px;
  }

  .callouts__title {
    top: 43%;
    -webkit-transform: translateY(-43%);
    -ms-transform: translateY(-43%);
    transform: translateY(-43%);
  }

  .callouts__link {
    border-right: 1px solid #1d1d1d;
  }

  /*---> Footer <---*/

  .footer__logo__link {
    text-align: left;
  }

  .footer__social {
    text-align: right;
  }
}

@media all and (min-width: 48em) {
  /*- 768px and up -*/

  /*---> Banner <---*/

  .banner {
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .banner img {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    left: auto;
    right: auto;
  }

  .banner__messaging__title {
    top: calc(50% + 40px);
  }

  /*---> Hero <---*/

  .hero__messaging__title {
    font-size: 55px;
    margin: 0 0 0.5rem 0;
  }

  .hero__messaging__text {
    font-size: 25px;
    margin: 0.5rem 0 0 0;
  }
}

@media all and (min-width: 64em) {
  /*- 1024px and up -*/

  /*---> Banner <---*/

  .banner__messaging__title {
    font-size: 2.625rem;
    right: 60px;
  }

  /*---> Hero <---*/

  .hero__messaging__title {
    font-size: 75px;
    margin: 0 0 1.25rem 0;
  }

  .hero__messaging__text {
    font-size: 35px;
    margin: 1.25rem 0 0 0;
  }

  /*---> Footer <---*/

  footer .row .branding:first-of-type svg {
    margin: 0 0 0 -1rem;
  }
}

@media all and (min-width: 1100px) {
  .primary__content--index {
    padding: 2rem 0 0;
  }
}

@media all and (min-width: 1210px) {
  /*---> Header <---*/

  .header__wrapper {
    margin: 0 auto;
  }

  /*---> Callouts <---*/

  .callouts__wrapper {
    margin: 25px auto;
  }

  /*---> Index Specific <---*/

  .primary__content--index {
    margin: 0 auto;
  }
}