/* from https://slackfoundry.builtbyslack.com/public/css/style.css */
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section,
 summary {
   display: block;
 }
 /**
  * Correct `inline-block` display not defined in IE 8/9.
  */
 audio,
 canvas,
 video {
   display: inline-block;
 }
 /**
  * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
  */
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 /**
  * Address `[hidden]` styling not present in IE 8/9.
  * Hide the `template` element in IE, Safari, and Firefox < 22.
  */
 [hidden],
 template {
   display: none;
 }
 /* ==========================================================================
    Base
    ========================================================================== */
 /**
  * 1. Set default font family to sans-serif.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 html {
   font-family: sans-serif;
   /* 1 */
   -ms-text-size-adjust: 100%;
   /* 2 */
   -webkit-text-size-adjust: 100%;
   /* 2 */
 }
 /**
  * Remove default margin.
  */
 body {
   margin: 0;
 }
 /* ==========================================================================
    Links
    ========================================================================== */
 /**
  * Remove the gray background color from active links in IE 10.
  */
 a {
   background: transparent;
 }
 /**
  * Address `outline` inconsistency between Chrome and other browsers.
  */
 a:focus {
   outline: thin dotted;
 }
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
 a:active,
 a:hover {
   outline: 0;
 }
 /* ==========================================================================
    Typography
    ========================================================================== */
 /**
  * Address variable `h1` font-size and margin within `section` and `article`
  * contexts in Firefox 4+, Safari 5, and Chrome.
  */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 /**
  * Address styling not present in IE 8/9, Safari 5, and Chrome.
  */
 abbr[title] {
   border-bottom: 1px dotted;
 }
 /**
  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
  */
 b,
 strong {
   font-weight: bold;
 }
 /**
  * Address styling not present in Safari 5 and Chrome.
  */
 dfn {
   font-style: italic;
 }
 /**
  * Address differences between Firefox and other browsers.
  */
 hr {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0;
 }
 /**
  * Address styling not present in IE 8/9.
  */
 mark {
   background: #ff0;
   color: #000;
 }
 /**
  * Correct font family set oddly in Safari 5 and Chrome.
  */
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, serif;
   font-size: 1em;
 }
 /**
  * Improve readability of pre-formatted text in all browsers.
  */
 pre {
   white-space: pre-wrap;
 }
 /**
  * Set consistent quote types.
  */
 q {
   quotes: "\201C" "\201D" "\2018" "\2019";
 }
 /**
  * Address inconsistent and variable font size in all browsers.
  */
 small {
   font-size: 80%;
 }
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 sup {
   top: -0.5em;
 }
 sub {
   bottom: -0.25em;
 }
 /* ==========================================================================
    Embedded content
    ========================================================================== */
 /**
  * Remove border when inside `a` element in IE 8/9.
  */
 img {
   border: 0;
 }
 /**
  * Correct overflow displayed oddly in IE 9.
  */
 svg:not(:root) {
   overflow: hidden;
 }
 /* ==========================================================================
    Figures
    ========================================================================== */
 /**
  * Address margin not present in IE 8/9 and Safari 5.
  */
 figure {
   margin: 0;
 }
 /* ==========================================================================
    Forms
    ========================================================================== */
 /**
  * Define consistent border, margin, and padding.
  */
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
 }
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  */
 legend {
   border: 0;
   /* 1 */
   padding: 0;
   /* 2 */
 }
 /**
  * 1. Correct font family not being inherited in all browsers.
  * 2. Correct font size not being inherited in all browsers.
  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
  */
 button,
 input,
 select,
 textarea {
   font-family: inherit;
   /* 1 */
   font-size: 100%;
   /* 2 */
   margin: 0;
   /* 3 */
 }
 /**
  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
 button,
 input {
   line-height: normal;
 }
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
  * Correct `select` style inheritance in Firefox 4+ and Opera.
  */
 button,
 select {
   text-transform: none;
 }
 /**
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
  * 2. Correct inability to style clickable `input` types in iOS.
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
  */
 button,
 html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
   /* 2 */
   cursor: pointer;
   /* 3 */
 }
 /**
  * Re-set default cursor for disabled elements.
  */
 button[disabled],
 html input[disabled] {
   cursor: default;
 }
 /**
  * 1. Address box sizing set to `content-box` in IE 8/9/10.
  * 2. Remove excess padding in IE 8/9/10.
  */
 input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box;
   /* 1 */
   padding: 0;
   /* 2 */
 }
 /**
  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  *    (include `-moz` to future-proof).
  */
 input[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   /* 2 */
   box-sizing: content-box;
 }
 /**
  * Remove inner padding and search cancel button in Safari 5 and Chrome
  * on OS X.
  */
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 /**
  * Remove inner padding and border in Firefox 4+.
  */
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 /**
  * 1. Remove default vertical scrollbar in IE 8/9.
  * 2. Improve readability and alignment in all browsers.
  */
 textarea {
   overflow: auto;
   /* 1 */
   vertical-align: top;
   /* 2 */
 }
 /* ==========================================================================
    Tables
    ========================================================================== */
 /**
  * Remove most spacing between table cells.
  */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 input[type="search"] {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
 }
 body {
   font-family: sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #323648;
   font-size: 16px;
   line-height: 1.5rem;
 }
 h1 {
   font-weight: 700;
   font-size: 44px;
   line-height: 56px;
   margin: 0;
 }
 h2 {
   font-weight: 700;
   font-size: 32px;
   line-height: 42px;
   margin: 0;
 }
 h3 {
   font-weight: 400;
   font-size: 22px;
   line-height: 32px;
   margin: 0;
 }
 h4 {
   font-weight: 400;
   font-size: 16px;
   line-height: 1.5rem;
   margin: 0;
 }
 .small {
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
 }
 a,
 a:visited {
   color: #5A5B68;
 }
 a:active,
 a:focus,
 a:hover {
   color: #3F46AD;
 }
 section {
   margin-bottom: 32px;
 }
 section:last-child,
 section:last-of-type {
   margin-bottom: 0;
 }
 section.styled {
   margin-bottom: 0;
   padding-bottom: 32px;
 }
 section.non-styled {
   margin-bottom: 0;
   padding-bottom: 0;
 }
 .content {
   max-width: 956px;
   margin-left: auto;
   margin-right: auto;
 }
 .buffer_left {
   margin-left: 32px;
 }
 .buffer_right {
   margin-right: 32px;
 }
 .buffer_top {
   margin-top: 32px;
 }
 .buffer_bottom {
   margin-bottom: 32px;
 }
 .half_buffer_bottom {
   margin-bottom: 16px;
 }
 .header {
   display: flex;
   background: #F9F9F9;
   box-sizing: border-box;
   min-height: 560px;
   padding-top: 60px;
   padding-bottom: 60px;
 }
 .header .content {
   display: flex;
   flex-direction: row-reverse;
   flex: 1 0 auto;
   justify-content: flex-end;
   align-items: center;
 }
 .header .content .built-by-slack-logo {
   position: absolute;
   top: 16px;
   left: 16px;
 }
 .header .content > div {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: center;
 }
 .header .content > div > div h3 {
   color: #5A5B68;
 }
 .header .content > img {
   flex: 0 0 310px;
 }
 .header .content .links {
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 .header .content .links a {
   margin: 0;
   margin-right: 18px;
   color: #5A5B68;
 }
 .header .content .links a.add-to-slack-button {
   height: 40px;
   margin-right: 24px;
 }
 .header .content .links a:last-child {
   margin: 0;
 }
 .header .content .links > div {
   display: flex;
   flex: 1;
 }
 .sub-header {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   min-height: 245px;
   line-height: 42px;
   text-align: center;
 }
 .sub-header > div {
   align-items: center;
   align-content: center;
   display: flex;
   flex-wrap: wrap;
 }
 .sub-header > div > h2,
 .sub-header > div > h3 {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 100%;
 }
 .cards {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   min-height: 420px;
 }
 .cards .content {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   flex: 1 0 auto;
   justify-content: space-between;
 }
 .cards .card {
   background: #FFFFFF;
   flex: 0 1 460px;
   flex: 0 1 310px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 12px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
   margin-bottom: 21.33333333px;
 }
 .cards .card .title {
   position: relative;
   min-height: 110px;
 }
 .cards .card .title .headers {
   position: absolute;
   bottom: 0;
   left: 0;
 }
 .cards .card .title h4 {
   color: #E8E8E8;
 }
 .cards .card .title h3 {
   color: #FFFFFF;
 }
 .cards .card .title > img {
   width: 100%;
 }
 .cards .card p {
   margin-top: 0;
 }
 .cards .card ul {
   padding: 0;
   list-style-position: inside;
 }
 .benefit {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   min-height: 256px;
 }
 .benefit .content {
   display: flex;
   flex-direction: row;
   flex: 1 0 auto;
   justify-content: space-between;
   align-items: start;
 }
 .benefit .content > div {
   display: flex;
   flex-direction: row;
   margin: 0;
   flex: 0 1 auto;
   align-items: center;
 }
 .benefit .content > div p {
   margin: 0;
   flex: 0 1 auto;
   font-size: 22px;
   line-height: 32px;
 }
 .benefit .content > div img {
   flex: 0 0 136px;
   margin-left: 32px;
   margin-right: 0;
 }
 .benefit.benefit-left .content > div {
   flex-direction: row-reverse;
 }
 .benefit.benefit-left .content > div img {
   margin-left: 0;
   margin-right: 32px;
 }
 .cta {
   display: flex;
   background: #F9F9F9;
   box-sizing: border-box;
   min-height: 250px;
 }
 .cta .content {
   display: flex;
   flex-direction: row;
   flex: 1 0 auto;
   align-items: center;
 }
 .cta .content > div {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 .the-table {
   display: flex;
   flex-wrap: wrap;
   background: #F9F9F9;
   box-sizing: border-box;
   min-height: 570px;
 }
 .the-table .content {
   display: flex;
   flex: 1 1 auto;
   box-sizing: border-box;
 }
 .the-table .table {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   box-shadow: 0 0 0 1px #E8E8E8;
 }
 .the-table .table .table-header {
   display: flex;
   flex-wrap: wrap;
   background: #F5F5F5;
   padding-left: 32px;
   padding-right: 32px;
   flex-direction: row;
   min-height: 60px;
   align-items: center;
   box-shadow: 0 1px 0 #E8E8E8;
 }
 .the-table .table .table-header p {
   margin: 0;
 }
 .the-table .table .table-body {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
 }
 .the-table .table .table-body .table-row {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   min-height: 170px;
   align-items: center;
   padding-left: 32px;
   padding-right: 32px;
   box-shadow: 0 1px 0 #E8E8E8;
 }
 .the-table .table .table-body .table-row:last-child {
   box-shadow: none;
 }
 .the-table .table .table-body .table-row .table-cell:first-child {
   margin-right: 32px;
 }
 .the-table .table .table-body .table-row .table-cell:first-child > .number {
   width: 98px;
   text-align: center;
   color: #5A5B68;
   border-radius: 52px;
   font-size: 40px;
   line-height: 98px;
   border: 2px solid rgba(90, 91, 104, 0.3);
 }
 .footer {
   display: flex;
   flex-wrap: wrap;
   background: #F9F9F9;
   box-sizing: border-box;
   min-height: 220px;
   padding-top: 136px;
 }
 .footer .content {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   flex: 1 1 auto;
   align-items: center;
   justify-content: space-between;
 }
 .footer .content .links {
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 .footer .content .links a {
   margin: 0;
   margin-right: 32px;
 }
 .footer .content .links a:last-child {
   margin: 0;
 }
 /*
  * The basic media query sizes are borrowed from https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
 */
 @media (max-width: 1024px) {
   h2 {
     font-size: 22px;
     line-height: 32px;
   }
   h3:not(.title-sub-header) {
     font-size: 16px;
     line-height: 24px;
   }
   section {
     padding-left: 32px;
     padding-right: 32px;
   }
   .content {
     max-width: 100%;
   }
   .buffer_left {
     margin-left: 16px;
   }
   .buffer_right {
     margin-right: 16px;
   }
   .buffer_top {
     margin-top: 16px;
   }
   .buffer_bottom {
     margin-bottom: 16px;
   }
 }
 /*
   ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px
 */
 @media (min-width: 768px) and (max-width: 1024px) {
   .header {
     padding-bottom: 64px;
   }
   .header .content {
     flex-direction: column-reverse;
     align-items: flex-start;
   }
   .header .content > div {
     margin-top: 32px;
   }
   .header .content > img {
     flex-basis: 236px;
     max-width: 236px;
   }
   .header .content .links {
     flex-wrap: wrap;
   }
   .header .content .links a {
     margin-right: 16px;
   }
   .header .content .links a:first-child {
     display: block;
   }
   .sub-header {
     min-height: 145px;
   }
   .cards .card {
     flex-basis: 48.5%;
   }
   .cards .card > img {
     width: 100%;
     height: auto;
   }
   .benefit .content > div p {
     font-size: 16px;
     line-height: 24px;
   }
   .benefit .content > div img {
     margin-left: 16px;
   }
   .benefit.benefit-left .content > div img {
     margin-right: 16px;
   }
   .the-table .table .table-header {
     padding-left: 16px;
     padding-right: 16px;
   }
   .the-table .table .table-body .table-row {
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 16px;
     padding-bottom: 16px;
   }
 }
 @media (max-width: 956px) {
   .header .content > img {
     margin-right: 32px;
   }
 }
 /*
   ##Device = Tablets, Ipads (landscape)
   ##Screen = B/w 768px to 1024px
 */
 @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   .header {
     padding-bottom: 60px;
   }
   .header .content {
     flex-direction: row-reverse;
     align-items: center;
   }
   .header .content > div {
     margin-top: 0;
   }
   .header .content .links {
     flex-wrap: wrap;
   }
   .header .content .links a {
     margin-right: 32px;
   }
   .header .content .links a:first-child {
     display: block;
   }
 }
 /*
   ##Device = Low Resolution Tablets, Mobiles (Landscape)
   ##Screen = B/w 481px to 767px
 */
 @media (min-width: 481px) and (max-width: 767px) {
   .header {
     padding-top: 64px;
     padding-bottom: 32px;
   }
   .header .content {
     flex-direction: column-reverse;
     align-items: flex-start;
   }
   .header .content > div {
     margin-top: 32px;
   }
   .header .content > img {
     flex-basis: 236px;
     max-width: 236px;
   }
   .header .content .links {
     flex-wrap: wrap;
   }
   .header .content .links a {
     margin-right: 16px;
   }
   .header .content .links a:first-child {
     display: block;
   }
   .sub-header {
     min-height: 145px;
   }
   .cards .card {
     flex-basis: 48%;
   }
   .cards .card > img {
     width: 100%;
     height: auto;
   }
   .benefit .content > div p {
     font-size: 16px;
     line-height: 24px;
   }
   .benefit .content > div img {
     margin-left: 16px;
   }
   .benefit.benefit-left .content > div img {
     margin-right: 16px;
   }
   .the-table .table .table-header {
     padding-left: 16px;
     padding-right: 16px;
   }
   .the-table .table .table-body .table-row {
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 16px;
     padding-bottom: 16px;
   }
 }
 @media (max-width: 660px) {
   .cards .card {
     flex-basis: 100%;
     margin-bottom: 21.33333333px;
   }
   .cards .card:last-child {
     margin-bottom: 0;
   }
 }
 /*
   ##Device = Most of the Smartphones Mobiles (Portrait)
   ##Screen = B/w 320px to 479px
 */
 @media (max-width: 480px) {
   section {
     padding-left: 21.33333333px;
     padding-right: 21.33333333px;
   }
 }
 @media (min-width: 320px) and (max-width: 480px) {
   .header {
     padding-top: 64px;
     padding-bottom: 32px;
   }
   .header .content {
     flex-direction: column-reverse;
     align-items: flex-start;
   }
   .header .content > div {
     margin-top: 32px;
   }
   .header .content > img {
     flex-basis: 180px;
     max-width: 180px;
   }
   .header .content .links {
     flex-wrap: wrap;
   }
   .header .content .links a {
     margin-right: 16px;
   }
   .header .content .links a:first-child {
     display: block;
   }
   .header .content .links > div {
     flex: 1 0 auto;
   }
   .sub-header {
     min-height: 145px;
   }
   .cards .content {
     flex-direction: column;
   }
   .cards .card {
     flex-basis: initial;
     margin-bottom: 21.33333333px;
   }
   .cards .card:last-child {
     margin-bottom: 0;
   }
   .cards .card > img {
     width: 100%;
     height: auto;
   }
   .benefit .content {
     flex-direction: column;
   }
   .benefit .content > div {
     flex-direction: column-reverse;
   }
   .benefit .content > div p {
     font-size: 16px;
     line-height: 24px;
   }
   .benefit .content > div img {
     margin-left: 0;
     flex-basis: auto;
     width: 100%;
     margin-bottom: 16px;
   }
   .benefit.benefit-left .content > div {
     flex-direction: column-reverse;
   }
   .benefit.benefit-left .content > div img {
     margin-right: 0;
     flex-basis: auto;
     width: 100%;
     margin-bottom: 16px;
   }
   .the-table .table .table-header {
     padding-left: 16px;
     padding-right: 16px;
   }
   .the-table .table .table-body .table-row {
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 16px;
     padding-bottom: 16px;
     align-items: flex-start;
     min-height: auto;
   }
   .the-table .table .table-body .table-row .table-cell:first-child {
     display: none;
     margin-right: 0;
   }
   .footer {
     padding-top: 68px;
   }
   .footer .content {
     margin-bottom: 32px;
     flex-direction: column;
     align-items: flex-start;
   }
   .footer .content .links {
     flex-direction: column;
     align-items: flex-start;
   }
   .footer .content .links a {
     margin-bottom: 16px;
   }
   .footer .content .links a:last-child {
     margin-bottom: 16px;
   }
 }

section.alert{
  margin-bottom: 0;
  border: 1px solid;
}

div.alert-content {
  margin: 10px;
  font-size: 1.1em;
}

section.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

section.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

section.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

section.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}