assets/css/landing.css

/* Snapshot of the devsite landing page styles for row and column layout.
 * Renamed to ensure reference/index.html works if the devsite style changes.
 */

.sac-landing-row-theme-color .button-white:hover {
  background: rgba(153, 153, 153, .3)
}
.sac-landing-row-theme-color .button-white:focus {
  background: rgba(153, 153, 153, .5)
}
.sac-landing-row-theme-color .button-primary {
  background: #fff;
  color: #039be5
}
.sac-landing-row-theme-color .button-primary:active,
.sac-landing-row-theme-color .button-primary:focus {
  background: #e1f3fc
}
.sac-landing-row-theme-color .button-primary:hover {
  background: #c3e7f9
}
.sac-landing-row h2,
.sac-landing-row-large-headings .sac-landing-row-item-description>a>h3,
.sac-landing-row-large-headings .sac-landing-row-item-description>h3,
.sac-products-alphabet-letter-heading {
  color: #757575;
  font: 300 34px/40px Roboto, sans-serif;
  letter-spacing: -.01em;
  margin: 40px 0 20px
}
.sac-landing-row h3 {
  border-bottom: 1px solid #ebebeb;
  font: 300 24px/32px Roboto, sans-serif;
  letter-spacing: -.01em;
  margin: 40px 0 20px;
  padding-bottom: 3px
}
.sac-landing-row-item-no-image h3,
.sac-landing-row h4 {
  font: 400 20px/32px Roboto, sans-serif;
  margin: 32px 0 12px;
  padding: 0
}
@media screen and (max-width: 720px) {
  .sac-landing-row h2,
  .sac-products-alphabet-letter-heading {
    font: 300 24px/32px Roboto, sans-serif
  }
}
.sac-landing-row,
.sac-landing-row-column>.sac-landing-row-item+.sac-landing-row-item {
  margin-top: 32px
}
.sac-landing-row:first-child {
  margin-top: 0;
}
.sac-landing-row-colored,
.sac-landing-row-grey,
.sac-landing-row-theme-color {
  margin: 40px -10000px -40px;
  padding: 40px 10000px
}
.sac-landing-row-grey {
  background-color: #f7f7f7
}
.sac-landing-row-cta {
  background-color: #78c257;
  color: #fff;
  margin: 40px -10000px -40px;
  padding: 40px 10000px;
  text-align: center
}
.sac-landing-row-cta h3 {
  font: 400 34px/40px Roboto, sans-serif;
  letter-spacing: -.01em;
  margin-bottom: 16px
}
.sac-landing-row h2 {
  margin: 80px 0 32px
}
.sac-landing-row-colored>h2 {
  margin-top: 0
}
.sac-landing-row-description {
  margin-bottom: 32px
}
h2+.sac-landing-row-description {
  margin-top: -16px
}
.sac-landing-row:first-child h2,
.sac-landing-row-large-headings h3,
.sac-landing-row-item-description>h2 {
  margin-top: 0
}
.sac-landing-row h2,
.sac-landing-row-item h3 {
  border-bottom: 0
}
.sac-landing-row-column,
.sac-landing-row-item {
  display: inline-block;
  vertical-align: top
}
.sac-landing-row-column+.sac-landing-row-column,
.sac-landing-row>.sac-landing-row-item+.sac-landing-row-item {
  margin-left: 40px
}
.sac-landing-row-item-buttons {
  margin: 8px 0 0 -12px
}
.sac-landing-row-item-buttons .button {
  margin: 4px 4px 4px 12px
}
.sac-landing-row-item-buttons .button-white:not(.button-raised),
.sac-landing-row-item-buttons .button-white:not(.button-raised)+.button-white:not(.button-raised) {
  margin: 0 4px
}
.sac-landing-row-cta .sac-landing-row-item-buttons {
  margin: 24px 0 0
}
p+.sac-landing-row-item-buttons {
  margin-top: -8px
}
.sac-landing-row-1-up>.sac-landing-row-column,
.sac-landing-row-1-up>.sac-landing-row-item,
.sac-landing-row-column>.sac-landing-row-item {
  width: 100%
}
.sac-landing-row-2-up>.sac-landing-row-column,
.sac-landing-row-2-up>.sac-landing-row-item {
  width: calc((100% - 40px)/2)
}
.sac-landing-row-3-up>.sac-landing-row-column,
.sac-landing-row-3-up>.sac-landing-row-item {
  width: calc((100% - 80px)/3)
}
.sac-landing-row-4-up>.sac-landing-row-column,
.sac-landing-row-4-up>.sac-landing-row-item {
  width: calc((100% - 120px)/4)
}
.sac-landing-row-item-icon {
  color: #757575;
  font-size: 48px;
  float: left;
  height: 48px;
  margin-left: 4px;
  width: 48px
}
.sac-landing-row-item-icon-container {
  background: #78c257;
  border-radius: 50%;
  box-shadow: none;
  float: left;
  height: 56px;
  width: 56px;
  transition: box-shadow .2s
}
:link>.sac-landing-row-item-icon-container:hover,
:focus>.sac-landing-row-item-icon-container {
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 4px rgba(0, 0, 0, .28)
}
.sac-landing-row-item-icon-white {
  color: #fff;
  font-size: 36px;
  height: 36px;
  margin: 10px;
  width: 36px
}
.sac-landing-row-item-icon-description {
  margin-left: 76px
}
.sac-landing-row-item-code,
.sac-landing-row-item-image,
.sac-landing-row-item-video,
.sac-landing-row-item-youtube {
  margin-bottom: 32px;
  width: 100%
}
.sac-landing-row-item-image,
.sac-landing-row-item-video {
  display: block
}
.sac-landing-row-item-code pre {
  margin-top: 0
}
.sac-landing-row-item-image {
  background: #ebebeb
}
.sac-landing-row-no-image-background .sac-landing-row-item-image {
  background: 0
}
.sac-landing-row-item-custom-image {
  background: #78c257
}
.sac-landing-row-item-custom-image-icon {
  color: #fff;
  display: block;
  margin: 0 auto;
  opacity: .8
}
.sac-landing-row-1-up .sac-landing-row-item-custom-image {
  padding: calc((56.25% - 256px)/2) 0
}
.sac-landing-row-1-up .sac-landing-row-item-custom-image-icon {
  font-size: 256px;
  width: 256px
}
.sac-landing-row-2-up .sac-landing-row-item-custom-image,
.sac-landing-row-50 .sac-landing-row-item-custom-image {
  padding: calc((56.25% - 192px)/2) 0
}
.sac-landing-row-2-up .sac-landing-row-item-custom-image-icon,
.sac-landing-row-50 .sac-landing-row-item-custom-image-icon {
  font-size: 192px;
  width: 192px
}
.sac-landing-row-3-up .sac-landing-row-item-custom-image,
.sac-landing-row-67 .sac-landing-row-item-custom-image {
  padding: calc((56.25% - 128px)/2) 0
}
.sac-landing-row-3-up .sac-landing-row-item-custom-image-icon,
.sac-landing-row-67 .sac-landing-row-item-custom-image-icon {
  font-size: 128px;
  width: 128px
}
.sac-landing-row-4-up .sac-landing-row-item-custom-image,
.sac-landing-row-75 .sac-landing-row-item-custom-image {
  padding: calc((56.25% - 96px)/2) 0
}
.sac-landing-row-4-up .sac-landing-row-item-custom-image-icon,
.sac-landing-row-75 .sac-landing-row-item-custom-image-icon {
  font-size: 96px;
  width: 96px
}
.sac-landing-row-item-youtube {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative
}
.sac-landing-row-item-youtube iframe {
  height: 101%;
  left: -.5%;
  position: absolute;
  top: -.5%;
  width: 101%
}
.sac-landing-row-1-up .sac-landing-row-item-code,
.sac-landing-row-1-up .sac-landing-row-item-image,
.sac-landing-row-1-up .sac-landing-row-item-video,
.sac-landing-row-1-up .sac-landing-row-item-youtube {
  float: right;
  margin: 0 0 0 40px;
  width: calc((100% - 20px)*2/3)
}
.sac-landing-row-1-up .sac-landing-row-item-youtube {
  padding-bottom: calc((100% - 20px)*2/3*.5625)
}
.sac-landing-row-1-up .sac-landing-row-item-custom-image {
  padding: calc(((100% - 20px)*2/3*.5625 - 256px)/2) 0
}
.sac-landing-row-50 .sac-landing-row-item-youtube {
  padding-bottom: calc((100% - 40px)/2*.5625)
}
.sac-landing-row-50 .sac-landing-row-item-custom-image {
  padding: calc(((100% - 40px)/2*.5625 - 192px)/2) 0
}
.sac-landing-row-67 .sac-landing-row-item-youtube {
  padding-bottom: calc((100% - 80px)/3*.5625)
}
.sac-landing-row-67 .sac-landing-row-item-custom-image {
  padding: calc(((100% - 80px)/3*.5625 - 128px)/2) 0
}
.sac-landing-row-75 .sac-landing-row-item-youtube {
  padding-bottom: calc((100% - 120px)/4*.5625)
}
.sac-landing-row-75 .sac-landing-row-item-custom-image {
  padding: calc(((100% - 120px)/4*.5625 - 128px)/2) 0
}
.sac-landing-row-logos .sac-landing-row-item-custom-image {
  background: 0;
  float: none;
  margin: 0;
  padding: 0
}
.sac-landing-row-logos .sac-landing-row-item-custom-image-icon {
  opacity: 1;
  width: 96px
}
.sac-landing-row-logos .sac-landing-row-item-description {
  text-align: center
}
.sac-landing-row-1-up .sac-landing-row-item-image-left {
  float: left;
  margin: 0 40px 0 0
}
.sac-landing-row-1-up .sac-landing-row-item-description {
  float: left;
  width: calc((100% - 80px)/3)
}
.sac-landing-row-50 .sac-landing-row-item-description {
  width: calc((100% - 40px)/2)
}
.sac-landing-row-1-up>.sac-landing-row-item-no-image>.sac-landing-row-item-description,
.sac-landing-row-67 .sac-landing-row-item-description {
  width: calc((100% - 20px)*2/3)
}
.sac-landing-row-75 .sac-landing-row-item-description {
  width: calc((100% - 15px)*3/4)
}
.sac-landing-row-50 .sac-landing-row-item-code,
.sac-landing-row-50 .sac-landing-row-item-image,
.sac-landing-row-50 .sac-landing-row-item-video,
.sac-landing-row-50 .sac-landing-row-item-youtube {
  width: calc((100% - 40px)/2)
}
.sac-landing-row-67 .sac-landing-row-item-code,
.sac-landing-row-67 .sac-landing-row-item-image,
.sac-landing-row-67 .sac-landing-row-item-video,
.sac-landing-row-67 .sac-landing-row-item-youtube {
  width: calc((100% - 80px)/3)
}
.sac-landing-row-75 .sac-landing-row-item-code,
.sac-landing-row-75 .sac-landing-row-item-image,
.sac-landing-row-75 .sac-landing-row-item-video,
.sac-landing-row-75 .sac-landing-row-item-youtube {
  width: calc((100% - 120px)/4)
}
.sac-landing-row-cta>.sac-landing-row-item-no-image>.sac-landing-row-item-description,
.sac-landing-row-100>.sac-landing-row-item-no-image>.sac-landing-row-item-description {
  width: 100%
}
.sac-landing-row h3:first-child,
.sac-landing-row h4:first-child,
.sac-landing-row h5:first-child,
.sac-landing-row h6:first-child,
.sac-landing-row p:first-child,
.sac-landing-row h4+p {
  margin-top: 0
}
.sac-landing-row p:last-child {
  margin-bottom: 0
}
.sac-landing-row-item-description-callout {
  font-weight: bold
}
.sac-landing-row-item-description-feature {
  margin-top: 16px;
  position: relative
}
.sac-landing-row-item-description-feature+.sac-landing-row-item-description-feature {
  margin: 0
}
.sac-landing-row-item-description-feature-link {
  border-bottom: 1px solid #ebebeb;
  font-weight: 500;
  padding: 12px 0 11px
}
.sac-landing-row-item-description-feature-tooltip {
  background: #455a64;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .37);
  color: rgba(255, 255, 255, .7);
  font: 14px/20px Roboto, sans-serif;
  min-width: 200px;
  opacity: 0;
  padding: 24px;
  position: absolute;
  transition: opacity .2s, visibility .2s;
  visibility: hidden;
  width: 67%;
  z-index: 10020
}
.no-touch .sac-landing-row-item-description-feature-link:hover+.sac-landing-row-item-description-feature-tooltip {
  opacity: 1;
  visibility: visible
}
.sac-landing-row-item-description-feature-tooltip:before {
  border-bottom: 8px solid #455a64;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  content: '';
  position: absolute;
  top: -8px
}
.sac-landing-row-item-description-feature-tooltip h3 {
  color: white;
  margin-bottom: 8px;
  padding: 0
}
@media screen and (max-width: 1000px) {
  .sac-landing-row-2-up:not(.sac-landing-row-logos)>.sac-landing-row-item:not(.sac-landing-row-item-no-image),
  .sac-landing-row-3-up:not(.sac-landing-row-logos)>.sac-landing-row-item:not(.sac-landing-row-item-no-image) {
    width: 100%
  }
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column,
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item {
    width: calc((100% - 40px)/2)
  }
  .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-item+.sac-landing-row-item {
    margin: 40px 0 0
  }
  .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-column+.sac-landing-row-column,
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item:nth-of-type(2) {
    margin: 0 0 0 40px
  }
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column:nth-of-type(3) {
    margin: 40px 0 0
  }
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column:nth-of-type(4),
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item:nth-of-type(4) {
    margin: 40px 0 0 40px
  }
  .sac-landing-row-item-code,
  .sac-landing-row:not(.sac-landing-row-logos) .sac-landing-row-item-image,
  .sac-landing-row-item-video,
  .sac-landing-row-item-youtube,
  .sac-landing-row-1-up .sac-landing-row-item-code,
  .sac-landing-row-1-up .sac-landing-row-item-image,
  .sac-landing-row-1-up .sac-landing-row-item-video,
  .sac-landing-row-1-up .sac-landing-row-item-youtube,
  .sac-landing-row-1-up .sac-landing-row-item-image-left {
    float: right;
    margin: 0 0 0 40px;
    width: calc((100% - 40px)/2)
  }
  .sac-landing-row-4-up .sac-landing-row-item-code,
  .sac-landing-row-4-up:not(.sac-landing-row-logos) .sac-landing-row-item-image,
  .sac-landing-row-4-up .sac-landing-row-item-video,
  .sac-landing-row-4-up .sac-landing-row-item-youtube {
    float: none;
    margin: 0 0 32px 0;
    width: 100%
  }
  .sac-landing-row-item-youtube,
  .sac-landing-row-1-up .sac-landing-row-item-youtube {
    padding-bottom: calc((100% - 40px)/2*.5625)
  }
  .sac-landing-row-1-up .sac-landing-row-item-custom-image,
  .sac-landing-row-2-up .sac-landing-row-item-custom-image,
  .sac-landing-row-3-up .sac-landing-row-item-custom-image {
    padding: calc(((100% - 40px)/2*.5625 - 128px)/2) 0
  }
  .sac-landing-row-4-up .sac-landing-row-item-youtube {
    padding-bottom: 56.25%
  }
  .sac-landing-row-4-up .sac-landing-row-item-custom-image {
    padding: calc((56.25% - 128px)/2) 0
  }
  .sac-landing-row-1-up .sac-landing-row-item-custom-image-icon,
  .sac-landing-row-2-up .sac-landing-row-item-custom-image-icon,
  .sac-landing-row-3-up .sac-landing-row-item-custom-image-icon,
  .sac-landing-row-4-up .sac-landing-row-item-custom-image-icon {
    font-size: 128px;
    width: 128px
  }
  .sac-landing-row-logos .sac-landing-row-item-custom-image {
    margin: 0;
    padding: 0
  }
  .sac-landing-row-logos .sac-landing-row-item-custom-image-icon {
    width: 96px
  }
  .sac-landing-row .sac-landing-row-item-description,
  .sac-landing-row-1-up .sac-landing-row-item-description {
    float: left;
    width: calc((100% - 40px)/2)
  }
  .sac-landing-row-4-up .sac-landing-row-item-description {
    float: none;
    width: 100%
  }
  .sac-landing-row>.sac-landing-row-item-no-image {
    float: none;
    width: calc((100% - 40px)/2)
  }
  .sac-landing-row-3-up>.sac-landing-row-item-no-image {
    width: calc((100% - 80px)/3)
  }
  .sac-landing-row-1-up>.sac-landing-row-item-no-image,
  .sac-landing-row-1-up>.sac-landing-row-item-no-image>.sac-landing-row-item-description {
    width: 100%
  }
  .sac-landing-row:not(.sac-landing-row-4-up)>.sac-landing-row-item-no-image+.sac-landing-row-item-no-image {
    margin: 0 0 0 40px
  }
  .sac-landing-row-item-no-image .sac-landing-row-item-description {
    float: none;
    width: 100%
  }
  .sac-landing-row-item-no-image .sac-landing-row-item-icon-description {
    width: calc(100% - 76px)
  }
}
@media screen and (max-width: 720px) {
  .sac-landing-row-2-up>.sac-landing-row-column,
  .sac-landing-row-3-up>.sac-landing-row-column,
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column,
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item {
    width: 100%
  }
  .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-column+.sac-landing-row-column,
  .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-item+.sac-landing-row-item,
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column:nth-of-type(even),
  .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item:nth-of-type(even) {
    margin: 40px 0 0
  }
  .sac-landing-row-item-code,
  .sac-landing-row:not(.sac-landing-row-logos) .sac-landing-row-item-image,
  .sac-landing-row-item-video,
  .sac-landing-row-item-youtube,
  .sac-landing-row-1-up .sac-landing-row-item-code,
  .sac-landing-row-1-up .sac-landing-row-item-image,
  .sac-landing-row-1-up .sac-landing-row-item-video,
  .sac-landing-row-1-up .sac-landing-row-item-youtube,
  .sac-landing-row-1-up .sac-landing-row-item-image-left {
    float: none;
    margin: 0 0 32px;
    width: 100%
  }
  .sac-landing-row-item-youtube,
  .sac-landing-row-1-up .sac-landing-row-item-youtube {
    padding-bottom: 56.25%
  }
  .sac-landing-row-1-up .sac-landing-row-item-custom-image,
  .sac-landing-row-2-up .sac-landing-row-item-custom-image,
  .sac-landing-row-3-up .sac-landing-row-item-custom-image {
    padding: calc((56.25% - 128px)/2) 0
  }
  .sac-landing-row-1-up .sac-landing-row-item-custom-image-icon,
  .sac-landing-row-2-up .sac-landing-row-item-custom-image-icon,
  .sac-landing-row-3-up .sac-landing-row-item-custom-image-icon {
    font-size: 128px;
    width: 128px
  }
  .sac-landing-row-logos>.sac-landing-row-column,
  .sac-landing-row-logos>.sac-landing-row-item {
    width: calc((100% - 40px)/2)
  }
  .sac-landing-row-logos>.sac-landing-row-column:nth-of-type(2),
  .sac-landing-row-logos>.sac-landing-row-item:nth-of-type(2) {
    margin: 0 0 0 40px
  }
  .sac-landing-row-logos>.sac-landing-row-column:nth-of-type(3),
  .sac-landing-row-logos>.sac-landing-row-item:nth-of-type(3) {
    margin: 40px 0 0
  }
  .sac-landing-row-logos>.sac-landing-row-column:nth-of-type(4),
  .sac-landing-row-logos>.sac-landing-row-item:nth-of-type(4) {
    margin: 40px 0 0 40px
  }
  .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-column,
  .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-item {
    width: calc((100% - 32px)/3)
  }
  .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-column+.sac-landing-row-column,
  .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-item+.sac-landing-row-item {
    margin: 0 0 0 16px
  }
  .sac-landing-row-logos .sac-landing-row-item-custom-image {
    margin: 0;
    padding: 0
  }
  .sac-landing-row-logos .sac-landing-row-item-custom-image-icon {
    width: 96px
  }
  .sac-landing-row-item-description:not(.sac-landing-row-item-icon-description),
  .sac-landing-row-1-up .sac-landing-row-item-description {
    float: none;
    margin: 0;
    width: 100%
  }
  .sac-landing-row .sac-landing-row-item-no-image {
    width: 100%
  }
  .sac-landing-row-item-no-image+.sac-landing-row-item-no-image,
  .sac-landing-row>.sac-landing-row-item-no-image+.sac-landing-row-item-no-image:nth-of-type(even) {
    margin: 40px 0 0
  }
  .sac-landing-row-cta .sac-landing-row-item-description {
    font: 400 16px/24px Roboto, sans-serif
  }
}