﻿.product-info {
  display: flex;
  flex-direction: column; }
  .product-info .product-info-header {
    display: flex;
    align-items: center; }
    .product-info .product-info-header > img {
      max-width: 300px; }
    .product-info .product-info-header > div {
      text-align: center;
      flex-grow: 1;
      padding: 10px; }
    .product-info .product-info-header .article-header {
      font-family: 'Montserrat', sans-serif;
      font-style: italic;
      font-weight: 500;
      font-size: 16px; }
  .product-info .product-info-body {
    display: flex;
    justify-content: space-between; }
    .product-info .product-info-body .product-info-price {
      flex-direction: column;
      flex-basis: 30%; }
      .product-info .product-info-body .product-info-price td:last-child {
        font-weight: 500; }

#monthly-fee, #start-fee {
  font-size: 24px;
  flex-basis: 10%; }

small {
  font-size: .9rem; }

.campaign-text {
  display: block;
  background: #eee;
  padding: 5px; }

.product-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }

.product-logo {
  width: 175px;
  margin-right: 10px; }

.product-spinner {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px; }

.product-filter-container label {
  width: 100%; }

#comparer-table td:first-child {
  font-weight: 500;
  text-align: right; }

#comparer-table td:not(:first-child),
#comparer-table th:not(:first-child) {
  text-align: center; }

#products-list td {
  white-space: nowrap; }

#products-categories {
  display: flex;
  flex-direction: row;
  height: 95vh;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around; }
  #products-categories .products-item {
    flex-basis: 48%;
    height: 43%;
    background-color: #fff; }
    #products-categories .products-item a:hover {
      text-decoration: none; }
    #products-categories .products-item .category-text {
      padding: 10px; }
    #products-categories .products-item .category-image {
      height: 65%;
      background-size: cover;
      background-position: center center; }

#compare-container {
  display: flex;
  flex-direction: column;
  position: sticky;
  bottom: 0;
  right: 10px;
  padding: 0 0 10px 0;
  display: none;
  width: 400px;
  z-index: 1040;
  margin-top: 10px; }
  #compare-container > table {
    margin-bottom: 0; }
    #compare-container > table td:first-child {
      width: 60px; }
    #compare-container > table td {
      vertical-align: middle; }
  #compare-container .compare-row:hover {
    background-color: #E6E8EB; }
  #compare-container .compare-row > div {
    margin: auto; }
  #compare-container #compare-btns {
    padding: 10px; }

#shopping-cart-container {
  margin: -16px;
  padding: 20px;
  display: inline-block;
  width: 192px; }
  #shopping-cart-container.has-items {
    background: #3998CC;
    color: #fff; }

#shopping-cart-header {
  display: flex;
  justify-content: space-between;
  background: #3998CC;
  color: #fff; }

.order-line-remove {
  background-color: #e74a3b;
  align-self: stretch;
  flex-basis: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  color: #fff; }

.checkout-provider-logo {
  height: 80px; }

@media (max-width: 768px) {
  #products-list td {
    white-space: initial; }
  #compare-container {
    position: sticky !important; }
  .product-info > div > img {
    display: none !important; }
  .product-info-header img {
    max-width: 200px; } }

@media (max-width: 1200px) {
  .product-body {
    flex-direction: column-reverse; }
    .product-body > div {
      margin-top: 10px; }
  .product-header {
    flex-direction: column; }
  .product-logo {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important; }
  #shopping-cart-container {
    width: auto !important;
    margin-left: 10px !important; }
    #shopping-cart-container > span {
      display: none !important; }
  #compare-container {
    width: 100% !important; }
  #comparer-table td:first-child {
    position: sticky;
    left: 0;
    background-color: #eee; }
  #comparer-table th {
    vertical-align: baseline; }
  .category-image {
    display: none !important; }
  #products-container {
    flex-direction: column !important; }
  #filter-container {
    display: none; }
  #products-categories {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    height: auto !important; }
    #products-categories .products-item {
      flex-basis: 45vh !important; }
      #products-categories .products-item .category-image {
        height: 40% !important; }
  .product-info-header {
    flex-direction: column; }
  .product-info-body {
    flex-direction: column; }
  .product-info-price {
    flex-direction: row !important;
    flex-wrap: wrap;
    margin-top: 20px;
    background: #eee;
    padding: 10px; }
    .product-info-price > div {
      flex-basis: 50%; }
      .product-info-price > div label {
        width: 55px; }
  .checkout-provider-logo {
    height: 40px !important; }
  .checkout-product-content {
    flex-direction: column; }
  .order-line-remove {
    flex-basis: 10% !important; }
  #monthly-fee,
  #start-fee {
    flex-basis: 25% !important; } }

h4#optional-header {
  margin-left: -16px;
  margin-right: -16px;
  padding: 10px 20px;
  border-top: 1px solid #ddd; }

.optional-container {
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid #ddd;
  margin-left: -16px;
  margin-right: -16px; }
  .optional-container:nth-child(odd) {
    background: #f7f7f7; }
  .optional-container + .optional-container {
    border-bottom: 1px solid #ddd; }

#compare-container tr:nth-child(odd) {
  background: #fff; }
