/* products page ===================================*/
#products .pageheader {
  background-image: url(/img/products.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 190px 0 35px 0;
}

#products .pageheader .title {
  color: #fff;
  border: none;
}

.ul-products {
  list-style: none;
  padding: 0;
}

.ul-products > li {
  background-color: #fdfdfd;
  margin-bottom: 15px;
  -webkit-box-shadow: 0px 3px 3px -3px #ccc;
  box-shadow: 0px 3px 3px -3px #ccc;
  border-radius: 3px;
  position: relative;
  z-index: 0;
}

/* Triangle that exposes the section background behind the curl.
   Offset 6px outside the li on both axes so it also masks the
   box-shadow that bleeds beyond the li's boundary in that corner. */
.ul-products > li::before {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-bottom: 110px solid #f7f7f7;
  z-index: -1;
  pointer-events: none;
}

.ul-products > li::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 134px;
  height: 134px;
  background: url(/img/lab/page-curl.png) no-repeat bottom right;
  background-size: contain;
  z-index: 2;
  pointer-events: none;
}

.ul-products > li.is-open::before,
.ul-products > li.is-open::after {
  display: none;
}

.ul-products > li .image {
  position: relative;
  overflow: hidden;
}


.ul-products > li .meta {
  overflow: hidden;
  padding: 10px;
  cursor: pointer;
}

.ul-products > li:not(.is-open) .meta > *:last-child {
  padding-right: 90px;
}

.ul-products > li .details {
  display: none;
  padding: 20px;
  background: #fff;
  -webkit-box-shadow: inset 0px 3px 5px -3px #ccc;
  box-shadow: inset 0px 3px 5px -3px #ccc;
}

.service-loading {
  padding: 10px 0;
  color: #aaa;
  font-style: italic;
}

/* -----------------------------------------------
   Microsoft 365 plan blocks
   ----------------------------------------------- */

.ms365-plans {
  margin-top: 20px;
}

.ms365-plans .row {
  margin-left: -8px;
  margin-right: -8px;
}

.ms365-col {
  padding: 0 8px 16px;
}

.ms365-block {
  border: 1px solid #dde3e9;
  border-radius: 4px;
  overflow: hidden;
}

.ms365-block-header {
  padding: 13px 16px;
  color: #fff;
}

.ms365-block-header h4 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family: "Lato", sans-serif;
}

.ms365-block-body {
  padding: 14px 16px;
  background: #fff;
}

.ms365-block-body ul {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: disc;
}

.ms365-block-body ul li {
  font-size: 13px;
  margin-bottom: 5px;
  color: #555;
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-left: none;
  padding: 0;
}

.ms365-price {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.ms365-price-amount {
  font-size: 20px;
  font-weight: 700;
  color: #222;
}

.ms365-price-period {
  font-size: 12px;
  color: #777;
  margin-left: 2px;
}

.ms365-price-note {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

/* Per-plan header colours */
.ms365-premium  .ms365-block-header { background: #0078d4; }
.ms365-standard .ms365-block-header { background: #2199e8; }
.ms365-exchange .ms365-block-header { background: #008272; }
.ms365-copilot  .ms365-block-header { background: #7460ee; }

/* 2 columns: landscape phones (480px+) through to desktop */
@media (min-width: 480px) {
  .ms365-col {
    width: 50%;
    float: left;
  }

  .ms365-plans .row::after {
    content: "";
    display: table;
    clear: both;
  }
}