/* IMPORT
--------------------------- */
/* Order might matter */
@import url(/assets/css/variables.css?v=4);
@import url(/assets/css/header.css?v=4);
@import url(/assets/css/nav.css?v=4);
@import url(/assets/css/footer.css?v=4);

/* SHARED
--------------------------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  color: #00384a;
  font-family: 'Avenir','Open Sans','Nunito Sans',sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color:#00bbf1; text-decoration:none; }
a:hover { color:#c30; }
address { font-style:normal; }
code { font-size:.9rem; }
img { max-width: 100%; }
nav { outline:none; }
/* p { margin:0 0 15px; } */
p strong { color:#7ca82b; }
p[alt] { margin:8px 0; }
/* article section + section { margin-top:40px; } */
svg { max-width:100%; }
svg .icon-fill { fill: #00384a; }
svg .icon-fill_alt { fill: #00bbf1; }
svg .icon-fill_alt1 { fill: #7da82b; }
svg .icon-fill_alt2 { fill: #c30; }

ul { margin:0 0 20px; padding-left:0; list-style-type:none; }
ol { margin:0 0 20px; padding-left:1.125rem; }
li + li { margin-top:8px; }

h1, .h1 {
  font-size: 1.375rem;
  font-weight: 700;
  /* margin: 0 0 1.125rem; */
}

h2, .h2 {
  font-size: 20px;
  font-weight: 700; 
  line-height: 1.5;
  /* margin: 0 0 25px; */
}
h2 a, .h2 a { color:#00384a; }

h3, .h3 {
  color: #505050;
  font-size: 1.125rem;
  font-weight: 700; 
  line-height: 1.375;
  /* margin: 0 0 10px; */
}

/* MISC
--------------------------- */
[callout] { margin-right:auto; margin-left:auto; max-width:980px; }
[hidden] { display:none; }
[hide] { visibility:hidden; }
@keyframes LOADING {
  0% { transform: rotate(0deg); transform-origin: center 50% 0; }
  100% { transform: rotate(360deg); transform-origin: center 50% 0; }
}
.anim-loading { animation: LOADING 1s linear 0s infinite; display:block; }
.flex { display:inline-flex; align-items:center; }
.no-js .anim-loading { display:none; }
.block { display:block; }
.bg-light { background-color:#f4f4f4 !important; }
.bg-lighter { background-color:#f9f9f9 !important; }
.bullets li { position:relative; padding-left:10px; line-height:1.4; background-repeat:no-repeat; background-position:-144px -112px; padding-left:15px; }
.bullets li:before { content:''; position:absolute; top:6.5px; left:3px; display:block; width:5px; height:5px; background:#7da82b; }
.bullets li + li { margin-top:8px; }
.bullets.white li:before { background:#fff; }
.color-primary { color:#00384a; }
.color-primary1 { color:#2e5c6a; }
.color-secondary { color:#00bbf1; }
.color-alt1 { color:#7da82b; }
.color-alt2 { color:#c30; }
.logo { display:inline-flex; }
.mute { opacity:.5; }
.no-bottom { margin-bottom: 0; }
.note { color:#c30; }
sup.note { display:inline-block; line-height:1; font-size:90%; transform:translate(-3px,3px); }
article .note { margin:-15px 0 30px; }
.text-center { text-align:center; justify-content:center; }
.text-left { text-align:left; justify-content:left; }
.text-right { text-align:right; justify-content:right; }
.version { font-family:monospace; font-weight:lighter; }


/* WIDGETS
--------------------------- */
/* Section Inner Wrapper */
.inner {
  margin: 0 auto; 
  max-width: 1600px; 
  padding: 50px 6%;
  width: calc(100% - 6% - 6%);
}
main .inner { position:relative; }
.inner > :first-child { margin-top:0; }
.inner > :last-child { margin-bottom:0; }

/* Back to Page */
[zc-back] { font-size:.875rem; }
article [zc-back] { margin-top:20px; display:inline-block; }

/* Border */
[zc-border] { border:1px solid #d9d9d9; }
[zc-border~="top"] { margin-top:30px; padding-top:30px; border-width:1px 0 0; }

/* Buttons */
[zc-button] { display:inline-block; padding:15px 20px; color:#fff; font-weight:500; font-size:20px; line-height:20px; border:none; border-radius:5px; box-sizing:border-box; transition:background-color 0.1s ease-in-out; }
[zc-button]:hover { color:#fff; }
[zc-button] i { margin-right:3px; }
[zc-button~="1"] { background-color:#00baf0; }
[zc-button~="1"]:hover { background-color:#00a5d5; }
[zc-button~="2"] { background-color:#f4f4f4; color:#00baf0; }
[zc-button~="3"] { background-color:#006C8C; }
[zc-button~="4"] { background-color:#fff; color:#00baf0; border:1px solid #d9d9d9; max-height:48px; }
[zc-button~="5"] { background-color:#4c6520; }
[zc-button~="5"]:hover { background-color:#4c6520; }
[zc-button~="6"] { background-color:#7ca82b; }
[zc-button~="6"]:hover { background-color:#4c6520; }
[zc-button~="7"] { background-color:#003849; }
[zc-button~="8"] { background-color:#ef8535; }
[zc-button~="8"]:hover { background-color:#ff9545; }
[zc-button~="fullwidth"] { width:100%; padding-left:0px; padding-right:0px; }
[zc-button~="fullheight"] { height:100%; padding-top:0px; padding-bottom:0px; }
[zc-button~="small"] { padding-top:8px; padding-bottom:8px; font-size:1rem; }
[zc-button]:disabled { background-color:#999; color:#EEE; border-color:#666; }

/* CARD */
.card { padding:1rem; width:100%; background:#fff; box-sizing:border-box; border:1px solid #d9d9d9; border-radius:4px; box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
.card h3, .card .h3 { margin-bottom:20px; }
.card > :last-child { margin-bottom:0; }
.card-body { margin:-1rem -1rem 0 !important; padding:1rem; border-radius:4px 4px 0 0; }
.card-body > :last-child { margin-bottom:0; }
.card-header { margin:-1rem -1rem 0 !important; padding:1rem 1rem .75rem; border-bottom:1px solid #d9d9d9; border-radius:4px 4px 0 0; }
.card-header > :last-child { margin-bottom:0; }
.card-header + .card-body { margin-top:0 !important; border-radius:0; }
.card-footer { margin:0 -1rem -1rem !important; padding:.75rem 1rem; width:100%; display:flex; align-items:center; justify-content:flex-start; border-top:1px solid #d9d9d9; border-radius:0 0 4px 4px; }
.card-footer > :last-child { margin-bottom:0; }

/* CONTENT WRAPPER */
/* Wrap this around content that we want to limit width on largest breakpoint */
[zc-content] { max-width:1000px; }

/* CTA Row */
[zc-cta] { margin-top:20px; display:flex; align-items:center; justify-content:center; }

/* FontAwesome Icons */
.fa-caret-right { transform:translateY(1.5px); }

/* GRADIENT */
@keyframes GRADIENT {
  0% { background-position:0 50%; }
  50%{ background-position:100% 50%; }
  100% { background-position:0 50%; }
}

/* SECTIONS */
[type~="center"] .inner { justify-content:center; text-align:center; }
[type~="intro"] { padding-top: 0; padding-bottom: 0; background:linear-gradient(#073c4e, #205160); }
[type~="intro"] .inner { padding-top:0; padding-bottom:0; min-height:44px; display:flex; align-items:center; }
[type~="intro"] svg { margin:0 8px 0 -6px; width:24px; height:24px; transform:translateY(-1px); }
[type~="intro"] svg .icon-fill { fill: #00bbf1 }
[type~="intro"] [icon-email] { margin-right:12px; }
[type~="intro"] h1, [type~="intro"] .h1 { margin:0; line-height:1; color:#fff; }
[type~="intro"] [zc-back] { margin-left:20px; padding:2px 0 2px 20px; font-size:1rem; line-height:1; border-left:1px solid rgba(255,255,255,.2); }
[type~="intro"] [zc-back] i { margin-right:4px; }
[type~="base-to-light"] { background:linear-gradient(#fff, #f4f4f4); }
[type~="light"] { background: #f4f4f4; }
[type~="light-to-base"] { background:linear-gradient(#f4f4f4, #fff 70%); }

/* SPIN */
@keyframes SPIN {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spin { animation: 4.5s SPIN infinite linear; }

/* PRISM.JS OVERRIDE
--------------------------- */
pre { background:#f5f2f0; }
pre[class*="language-"] { overflow:hidden; }
pre code { margin:-5px 0 !important; padding:0 1rem; display:block; line-height:1.3; }
pre[class*="language-"] code { padding:0; overflow:auto; }


/* MIN
--------------------------- */

/* TABLET: PORTRAIT+ */
@media screen and (min-width:768px) {
  body {
    display: flex;
    flex-direction: column;
  }
  main { flex:1; }

  /* Sections */
  [type~="intro"] .inner { min-height:58px; }
  [type~="intro"] svg { width:28px; height:28px; }
}

/* DESKTOP+ */
@media screen and (min-width:1300px) {
  /* Sections */
  [type~="intro"] .inner { min-height:72px; }
  [type~="intro"] svg { width:32px; height:32px; }
  [type~="intro"] [icon-download] { margin-right:14px; width:30px; height:30px; }
  [type~="intro"] h1 { font-size:1.375rem; }
}


/* BOTH
--------------------------- */

/* TABLET ONLY */
@media screen and (min-width:768px) and (max-width:1299px) {
  /* Sections */
  [type~="intro"] h1 { font-size:1.25rem; }
}


/* MAX
--------------------------- */

/* MOBILE ONLY */
@media screen and (max-width:767px) {
  /* Sections */
  [type~="intro"] h1 { font-size:1.125rem; }
}