html {
  box-sizing: border-box; }

*:before, *:after {
  box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  background-color: #ea714f; }

.header {
  position: relative;
  background-color: #f6f6f6;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5);
  padding: 1% 0;
  width: 90%;
  margin: 5% auto 0;
  vertical-align: middle; }
  .header__wrapper {
    vertical-align: middle;
    padding-left: 2.7%; }
  .header__title {
    font-size: 16px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: inline-block;
    vertical-align: middle; }
  .header__nav {
    display: inline-block;
    vertical-align: middle; }
  .header-nav__item {
    text-decoration: none;
    color: black;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0 30px;
    font-weight: 300; }
  .header .header-nav__item:hover {
    font-weight: bold;
    border-bottom: 3px solid #000;
    padding-bottom: 10px; }
  .header__search {
    display: inline-block;
    position: absolute;
    right: 40px; }
  .header__search-icon, .header__divider, .header__search-input {
    display: inline-block;
    vertical-align: middle; }
  .header__search-input {
    position: relative;
    border: none;
    font-weight: bold;
    font-size: 13px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color: #f6f6f6;
    height: 30px; }
    .header__search-input:focus {
      outline: none; }

.search-divider {
  margin: 0 8px; }

.nav-divider {
  margin: 0 0 0 35px; }

@media screen and (max-width: 1155px) {
  .header-nav__item {
    margin: 0px 20px; } }
@media screen and (max-width: 1075px) {
  .header__search {
    position: relative;
    margin-left: 2.8%;
    right: 0; } }
@media screen and (max-width: 1023px) {
  .nav-divider {
    margin: 0 0 0 20px; }

  .header-nav__item {
    margin: 0px 10px; }

  .header__search {
    position: relative;
    margin-left: 1%;
    right: 0; }

  .header__search-input {
    width: 60px; } }
@media screen and (max-width: 767px) {
  .header__title {
    text-align: center;
    display: block; }

  .header__divider {
    display: none; }

  .header__wrapper {
    padding: 0;
    text-align: center; }

  .header__nav {
    margin: 0 auto 4%;
    text-align: center; }

  .header-nav__item {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 2px; }

  .header__search {
    display: none; } }
.vertical-line {
  border-right: 1px solid #b5b5b5; }
  .vertical-line--header {
    height: 50px; }
  .vertical-line--graph {
    height: 65px; }
  .vertical-line--footer {
    height: 24px; }

.hero {
  background: #ffffff url("images/hero-image.png") no-repeat center center;
  background-size: cover;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5);
  width: 90%;
  margin: 3% auto 0;
  position: relative;
  padding-bottom: 1.3%; }
  .hero__left-column {
    position: relative;
    width: 44%;
    text-align: left;
    padding-left: 4%;
    padding-top: 3%; }
  .hero__layban {
    padding-top: 2%; }
  .hero__title {
    font-weight: bold;
    font-size: 21px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-top: 5%; }
  .hero__description {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 28px;
    margin-bottom: 6%; }
  .hero__button {
    margin: 6% 0;
    display: inline-block;
    transition: background, .7s, ease-in-out;
    -webkit-transition: background, .7s, ease-in-out;
    -moz-transition: background, .7s, ease-in-out;
    -o-transition: background, .7s, ease-in-out; }
  .hero__logo {
    position: absolute;
    top: 40px;
    right: 40px; }
  .hero__slogan {
    position: absolute;
    bottom: 0;
    right: 38px;
    font: bold 45px 'Microsoft YaHei UI', Arial, sans-serif;
    color: #fff;
    letter-spacing: -2px; }

@media screen and (max-width: 767px) {
  .hero__logo {
    display: none; }

  .hero__left-column {
    width: 100%;
    text-align: center;
    padding: 1% 0; }

  .hero__layban {
    margin: 0 auto;
    text-align: center;
    width: 50%;
    padding: 5% 0 2%; }

  .hero__title {
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
    padding: 5% 0 5%; }

  .hero__description {
    text-align: center;
    width: 84%;
    margin: 0 auto; }

  .hero__slogan {
    display: none; } }
.product {
  background: #f5f5f5;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5);
  width: 28%;
  margin: 3% 5% 0;
  display: inline-block;
  vertical-align: top; }
  .product__image {
    width: 100%; }
  .product__information {
    padding-left: 7%;
    position: relative; }
  .product__title {
    font-weight: normal;
    font-size: 21px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 4% 0 1%; }
  .product__description {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 3.5% 0; }
  .product__size {
    font-weight: bold;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .product__change-size {
    font-size: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #65a0b8; }
    .product__change-size:hover {
      color: #196a8b; }
  .product__price {
    font-weight: bold;
    font-size: 28px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 0 4%;
    margin: 6% 0 1%; }
  .product__button {
    position: absolute;
    bottom: 16px;
    right: 31px;
    -webkit-transition: background, .7s, ease-in-out;
    -moz-transition: background, .7s, ease-in-out;
    -o-transition: background, .7s, ease-in-out;
    transition: background, .7s, ease-in-out; }

@media screen and (max-width: 1075px) {
  .product__price {
    margin: 4% 0 1%; } }
@media screen and (max-width: 1023px) {
  .product__title {
    font-size: 16px; }

  .product__price {
    font-size: 21px;
    margin: 6% 0 3%; }

  .product__button {
    right: 5%;
    bottom: 4%; } }
@media screen and (max-width: 767px) {
  .product {
    margin: 6% 5% 0;
    width: 90%; } }
.graph {
  width: 59%;
  margin: 3% -2% 0;
  display: inline-block;
  background: #f4f4f4;
  vertical-align: top;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5); }
  .graph__image {
    width: 100%; }
  .graph__wrapper {
    width: 100%;
    padding: 2%; }
  .graph__data {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 32%;
    vertical-align: middle; }
  .graph__number {
    font-size: 28px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0; }
  .graph__divider {
    margin-top: 1%;
    vertical-align: middle;
    display: inline-block; }
  .graph__text {
    font-size: 12px;
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding-top: 3%; }

@media screen and (max-width: 767px) {
  .graph {
    display: none; } }
.shopping-bag {
  width: 59%;
  margin: 3% 5% 0;
  display: inline-block;
  background: #fdfdfd;
  vertical-align: middle;
  position: relative;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5); }
  .shopping-bag__title {
    font-size: 21px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 3% 3.8% 2.5%; }
  .shopping-bag__product {
    margin-left: 3.8%;
    position: relative; }
  .shopping-bag__image {
    display: inline-block;
    vertical-align: middle; }
  .shopping-bag__description {
    font-size: 16px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle; }
  .shopping-bag__remove {
    font-size: 10px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #65a0b8;
    display: inline-block;
    margin: 0 auto;
    vertical-align: text-bottom;
    text-decoration: none; }
    .shopping-bag__remove:hover {
      color: #196a8b; }
  .shopping-bag__quanity {
    border: 1px solid #d7d7d7;
    background-color: #ffffff;
    padding: 7px 12px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 15.7%;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .shopping-bag__price {
    font-size: 21px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    bottom: 14.5%;
    right: 3.76%; }
  .shopping-bag__divider {
    margin: 2% auto; }
  .shopping-bag__total {
    font-size: 24px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: inline-block;
    vertical-align: middle;
    margin: 2.8% 3.8%; }
  .shopping-bag__button {
    display: inline-block;
    position: absolute;
    bottom: 4.5%;
    right: 3.76%;
    -webkit-transition: background, .7s, ease-in-out;
    -moz-transition: background, .7s, ease-in-out;
    -o-transition: background, .7s, ease-in-out;
    transition: background, .7s, ease-in-out; }

.horizontal-line {
  border-bottom: 1px solid #b5b5b5;
  width: 93%; }

@media screen and (max-width: 1075px) {
  .shopping-bag {
    width: 90%;
    display: block; }

  .shopping-bag__title {
    padding-top: 2%; } }
@media screen and (max-width: 1023px) {
  .shopping-bag {
    width: 90%;
    display: block; }

  .shopping-bag__title {
    padding-top: 2%; } }
@media screen and (max-width: 767px) {
  .shopping-bag {
    width: 90%;
    text-align: center;
    margin: 5% auto 0;
    display: block; }

  .shopping-bag__title {
    font-size: 23px;
    margin: 5% 3.8% 4.5%;
    text-align: center; }

  .shopping-bag__product {
    margin: 0 auto;
    text-align: center; }

  .shopping-bag__image {
    width: 40%; }

  .shopping-bag__description {
    padding: 3%;
    display: block; }

  .shopping-bag__remove {
    display: block;
    text-align: center; }

  .shopping-bag__quanity {
    position: relative;
    right: 0; }

  .shopping-bag__price {
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: center;
    right: 0; }

  .shopping-bag__divider {
    margin: 7% auto; }

  .shopping-bag__total {
    display: block;
    text-align: center; }

  .shopping-bag__button {
    position: relative;
    margin: 0 auto 4%;
    text-align: center;
    right: 0; } }
.map {
  background: #f5f5f5;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5);
  width: 28%;
  margin: 3% -2% 0;
  display: inline-block;
  vertical-align: top; }
  .map__canvas {
    max-height: 370px; }
  .map__title {
    font-size: 21px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 3% 5% 0; }
  .map__location {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 1% 5% 3.8%; }

@media screen and (min-width: 1440px) {
  .map__google-map {
    padding-bottom: 2.7%; } }
@media screen and (max-width: 1075px) {
  .map {
    width: 90%;
    display: block;
    text-align: center;
    margin: 3% auto 0; }

  .map__title {
    display: inline-block;
    margin: 3% auto; }

  .map__location {
    display: inline-block;
    margin: 0 0 0 2%; } }
@media screen and (max-width: 1023px) {
  .map {
    width: 90%;
    display: block;
    text-align: center;
    margin: 3% auto 0; }

  .map__title {
    display: inline-block;
    margin: 3% auto; }

  .map__location {
    display: inline-block;
    margin: 0 0 0 2%; } }
@media screen and (max-width: 767px) {
  .map {
    width: 90%;
    margin: 5% auto 0;
    display: block; }

  .map__title, .map__location {
    text-align: center; } }
.footer {
  position: relative;
  background-color: #f9f9f9;
  box-shadow: 2px 2px 10px rgba(68, 68, 68, 0.5);
  width: 88%;
  margin: 3% auto 5%;
  padding: 1%; }
  .footer__title {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .footer__divider {
    display: inline-block;
    vertical-align: middle;
    margin: 0 3%; }

.social-media {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 16px; }
  .social-media__link {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-repeat: no-repeat;
    padding: 0 5px;
    background-image: url("images/spritesheet.png"); }
    .social-media__link--twitter {
      background-position: 0px 0px; }
      .social-media__link--twitter:hover {
        background-position: 0px -26px; }
    .social-media__link--facebook {
      background-position: 0px -52px; }
      .social-media__link--facebook:hover {
        background-position: 0px -78px; }
    .social-media__link--vimeo {
      background-position: 0px -104px; }
      .social-media__link--vimeo:hover {
        background-position: 0px -130px; }
    .social-media__link--pinterest {
      background-position: 0px -156px; }
      .social-media__link--pinterest:hover {
        background-position: 0px -182px; }

@media screen and (max-width: 1075px) {
  .social-media {
    top: 13px; } }
@media screen and (max-width: 1023px) {
  .social-media {
    top: 11px; } }
@media screen and (max-width: 767px) {
  .social-media {
    vertical-align: middle;
    position: relative;
    right: 0;
    top: 0;
    margin-left: 5%; } }
.site-button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  cursor: pointer; }
  .site-button--hero {
    border: 1px solid #61ac6e;
    background: #71c77f;
    background-image: linear-gradient(to bottom, #71c77f, #61ac6e);
    font-weight: bold;
    font-size: 14px;
    padding: 12px 18px;
    text-decoration: none; }
    .site-button--hero:hover {
      background: #71c77f; }
  .site-button--product {
    border: 1px solid #7ab6ce;
    background: #87ddff;
    background-image: linear-gradient(to bottom, #87ddff, #74b3cc);
    font-size: 10px;
    font-weight: bold;
    padding: 8px 15px;
    text-decoration: none; }
    .site-button--product:hover {
      background: #87ddff; }
  .site-button--shopping-bag {
    border: 1px solid #f19b13;
    background: #f0ae4a;
    background-image: linear-gradient(to bottom, #f0ae4a, #f19b13);
    font-size: 10px;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none; }
    .site-button--shopping-bag:hover {
      background: #f0ae4a; }

@media screen and (max-width: 768px) {
  .site__button--product {
    padding: 8px 10px; } }
@media screen and (min-width: 1440px) {
  .content {
    margin: 0 auto;
    width: 90%; } }

/*# sourceMappingURL=styles.css.map */