@media only screen and (width <=960px) {
  div.main {
    width: calc(100% - 20px);
    margin-top: 35px;
    margin-bottom: 85px;
  }


  div.main div.product {
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (width >=960px) {
  div.main {
    width: 100%;
    max-width: 872px;
    margin-top: 65px;
    margin-bottom: 120px;
    padding-bottom: 30px;
  }

  div.main div.product {
    display: flex;
    flex-direction: row;
  }
}

div.wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.main {
  background-color: #fff;
  border: 1px solid #ededed;
  border-radius: 4px;
  padding: 15px;
}

div.main div.product div.thumbnailContainer {
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-right: 15px;
}

div.main div.product div.thumbnail {
  width: 100%;
  height: 350px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div.main div.product img.thumbnail {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

div.main div.product div.images {
  display: flex;
  flex-flow: row wrap;
  overflow-x: auto;
}

div.main div.product div.images div.image {
  width: 60px;
  height: 60px;
  border: 2px solid #D5DBDB;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 5px;
}

div.main div.product div.images div.image:hover {
  border: 2px solid #004b91;
}

div.main div.product div.images div.selected,
div.main div.product div.images div.selected:hover {
  border: 2px solid #FF8F00;
}

div.main div.product div.images img.image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

div.main div.product div.rightPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

div.main div.product div.rightPanel div.name {
  display: flex;
  flex-direction: column;
  color: #282828;
}

div.main div.product div.rightPanel div.name span.name {
  font-size: 1.25rem;
  font-weight: 500;
  padding-bottom: 4px;
  word-break: break-word;
}

div.main div.product div.rightPanel div.name span.price {
  font-size: 1.25rem;
  font-weight: 700;
  padding-bottom: 4px;
}

div.main div.product div.rightPanel div.name span.stock {
  font-size: 11px;
  padding-top: 4px;
  display: block;
  color: #65656a;
}

div.main div.product div.rightPanel div.actions {
  margin-top: 20px;
}

div.main div.product div.rightPanel div.actions .button {
  width: 100%;
  height: 38px;
  margin-bottom: 15px;
}
