/* Home Page
----------------------------------------- */

/* Press Quotes
---------------- */
.home-press-quote-container {
  padding: 40px 30px;
  background-color: var(--gray-light);
  border-radius: 8px;
}
.home-press-quote-container.dark {
  background-color: rgba(0,0,0,0.25);
}

.home-press-quote-logo {
  max-width: 60%;
  margin-bottom: 32px;
}

.home-press-quote {
  line-height: 1.8;
  font-size: 20px;
  font-style: italic;
  color: var(--gray);
}


/* Hero / Banner
---------------- */
.section-hero {
  position: relative;
  left: 0;
  right: 0;
  height: 450px;
  background-color: #ccc;
  overflow: hidden;
}

.section-hero-bg {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.section-hero-banner {
  position: relative;
  z-index: 999;
  box-sizing: border-box;
  height: 680px;
  margin-top: -500px;
  padding-top: 80px;
  background: transparent;
  background: -webkit-linear-gradient(rgba(255,255,255,0.07) 43%, rgba(255,255,255,1) 450px);
  background: -o-linear-gradient(rgba(255,255,255,0.07) 43%, rgba(255,255,255,1) 450px);
  background: linear-gradient(rgba(255,255,255,0.07) 43%, rgba(255,255,255,1) 450px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}

.hero-banner-headline {
  position: absolute;
  box-sizing: border-box;
  height: 190px;
  padding-left: 20px;
  padding-right: 20px;
  bottom: 60px;
  color: black;
}

.hero-banner-headline .highlight {
  color: #469afc;
}


/* Algo view sections
---------------- */
.home-section-algo {
  background-color: var(--gray-darker);
}

.home-section-algo .content-section-heading {
  color: #fff;
}

.home-algo-view-container {
  padding-top: 40px;
  padding-bottom: 40px;
}

.home-algo-view {
  width: 100%;
  margin-bottom: 40px;
  border-radius: 8px;
  background-color: #000;
  box-shadow: 2px 0 24px rgba(0,0,0,0.25);
  overflow: hidden;
}

.home-algo-view-loop {
  display: block;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.home-algo-view-subheading {
  font-size: 16px;
  font-style: italic;
  color: var(--brand-primary);
}


/* Dashboard view sections
---------------- */
.home-section-dashboard-a .content-container,
.home-section-dashboard-b .content-container {
  padding-left: 20px;
  padding-right: 20px;
}

.home-section-dashboard-a {
  max-height: 850px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: #fff;
  overflow: hidden;
}

.home-section-dashboard-b {
  max-height: 750px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  background-color: var(--gray-darker);
}
.home-section-dashboard-b .content-section-heading {
  color: #fff;
}

.home-section-dashboard-image {
  display: block;
  width: 100%;
  max-width: 960px;
  margin-top: 60px;
  box-shadow: 2px 0 14px rgba(0,0,0,0.12);
  background-color: #F1F1F3;
}
.home-section-dashboard-image img,
.home-section-dashboard-image video {
  display: block;
  max-width: 100%;
}


/* Workplace logos section
---------------- */
.home-section-workplace-logos {
  background-color: #ffffff;
}

.home-section-workplace-logos-image {
  padding-top: 80px;
  max-width: 100%;
  margin-bottom: 80px;
}


/* Integrations section
---------------- */
.home-section-integrations {
  position: relative;
  background-color: var(--gray-darker);
  padding-bottom: 0;
}
.home-section-integrations .content-section-heading {
  color: #ffffff;
}
.home-section-integrations .button {
  margin-top: 40px;
  margin-bottom: 40px;
}

.home-integrations-slack-image-a {
  display: block;
  max-width: 280px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  border-bottom: 4px solid #fff;
  box-shadow: 2px 0 24px rgba(0,0,0,0.15);
}


/* Enterprise section
---------------- */
.home-enterprise-checklist-panel .content-section-heading {
  width: 100%;
}

.home-enterprise-checklist {
  padding-left: 0;
  font-size: 16px;
}

.home-enterprise-checklist li {
  padding-top: 6px;
  padding-bottom: 6px;
  list-style: none;
}
.home-enterprise-checklist li:before{
   content: '';
   display: inline-block;
   height: 22px;
   width: 22px;
   margin-right: 10px;
   background-image: url('../assets/images/checklist_icon_placeholder.png');
   background-size: 22px;
   vertical-align: bottom;
}


/* Enterprise section
---------------- */
.home-section-contact .button {
  margin-top: 40px;
}

.contact-tip {
  display: inline-block;
  margin-left: 16px;
  padding: 10px 0;
  font-style: italic;
  color: gray;
}


/* Desktop
------------------------------------*/
@media (min-width: 580px) {
  .home-press-quote-logo {
    height: 36px;
    width: auto;
  }
}

@media (min-width: 640px) {
  .home-enterprise-checklist-panel {
    width: 400px;
  }

  .hero-banner-headline {
    height: auto;
  }

  .home-algo-view-container {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .home-algo-view {
    flex-basis: 49%;
    margin-bottom: 0;
    max-height: 250px;
  }

  .home-section-enterprise {
    background-image: url('../assets/images/office_sf.png');
    background-repeat: none;
    background-size: cover;
    background-position: center;
  }

  .home-enterprise-checklist-panel {
    box-sizing: border-box;
    background-color: var(--gray-lighter);
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 4px;
    box-shadow: 2px 0 24px rgba(0,0,0,0.20);
  }
}

@media (min-width: 768px) {
  .home-press-quote-container {
    padding: 60px 50px;
  }

  .home-section-dashboard-image {
    width: 90%;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px 4px 0 0;
  }

  .home-section-integrations {
    padding-bottom: 260px;
  }

  .home-integrations-slack-image-a {
    position: absolute;
    bottom: 0;
    right: 10%;
    max-width: 320px;
  }
}

@media (min-width: 960px) {
  .hero-banner-headline {
    left: 14%;
    width: 72%;
    padding: 0;
    text-align: center;
  }

  .home-section-dashboard-a .content-container,
  .home-section-dashboard-b .content-container {
    padding-left: 0;
    padding-right: 0;
  }

  .home-section-dashboard-image {
    width: 70%;
  }

  .home-section-integrations {
    padding-bottom: 80px;
  }

  .home-integrations-slack-image-a {
    right: 15%;
  }
}

@media (min-width: 1024px) {
  .home-integrations-slack-image-a {
    right: 20%;
  }
}