﻿/* ==========================================================================
Base colors
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for colors
   ========================================================================== */
/* ==========================================================================
Base Mixins
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Mixins
   ========================================================================== */
/*when used ALLWAYS use in this order 
       @include phones {
                bottom: 117px;
            }

            @include tablets {
                bottom: 190px;
            }

            @include desktops {
                bottom: 300px;
            }
*/
/* ==========================================================================
Base colors
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for colors
   ========================================================================== */
/* ==========================================================================
Base utility
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for font-family 
 *  2. Other variables
 *  3. Animations
 *  4. Shadows
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Variables for font-family
   ========================================================================== */
/* 2. Other variables
   ========================================================================== */
/*sizes*/
/*input, select*/
/*Buttons*/
/*$button-min-width: 50px;*/
/*$button-max-width: 130px;*/
/*$button-min-width-small: $input-select-height;*/ /*same as $button-min-height*/
/*$button-background-color: $blue;*/
/* 3. animations
   ========================================================================== */
/*Buttons*/
/* ==========================================================================
Base _productpage
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. shoppingcart-page
 *  2. 
 *  3.
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. shoppingcart-page
   =============================================================================== */
/********PRODUCT PAGE VIEW**********/
.product-page {
  background-color: #fff;
  padding-bottom: 30px;
}
.product-page .button-wrapper {
  display: block;
  margin-top: 15px;
}
.product-page .product-brands {
  position: absolute;
  text-align: right;
  top: 30px;
}
@media only screen and (max-width: 767px) {
  .product-page .product-brands {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .product-page .product-brands {
    right: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .product-page .product-brands {
    right: 30px;
  }
}
.product-page .rate-list-wrapper {
  margin-top: 25px;
}
.product-page .rate-list-wrapper .rate-list {
  text-align: left;
}
@media only screen and (min-width: 992px) {
  .product-page h1, .product-page h2 {
    max-width: 290px;
  }
}
.product-page h2 {
  margin-top: 45px;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .product-page h2 {
    margin-top: 0;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .product-page h2 {
    margin-top: 0;
  }
}
@media only screen and (min-width: 992px) {
  .product-page h2 {
    margin-top: 45px;
  }
}
.product-page h4 {
  font-size: 2.143em;
}
.product-page .rate-list {
  text-align: left;
  margin-top: 25px;
  position: relative;
}
.product-page .variant {
  font-size: 1.286em;
  display: inline-block;
  margin-bottom: 5px;
  margin-top: 20px;
  width: 100%;
}
.product-page select {
  margin-bottom: 15px;
}
.product-page .product-price {
  margin-top: -5px;
  margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
  .product-page .add-to-cart-btn {
    margin-bottom: 5px;
  }
}
.product-page .add-to-fav-btn {
  width: auto;
}
@media only screen and (min-width: 992px) {
  .product-page .add-to-fav-btn {
    margin-left: 15px;
  }
}
.product-page .product-main-price {
  color: #009fe3;
  display: inline-block;
  width: 100%;
  font-family: "Titillium Web", sans-serif;
  font-size: 2.143em; /*30px */
  font-weight: 600;
}
.product-page .content-left {
  padding: 30px 15px 0 15px;
}
@media only screen and (max-width: 767px) {
  .product-page .content-left {
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .product-page .content-left {
    padding: 0;
  }
}
@media only screen and (min-width: 992px) {
  .product-page .content-left {
    padding: 30px 15px 0 15px;
  }
}
.product-page .content-left .splash {
  margin: 0;
  margin-top: 0;
}
.product-page .content-left .product-main-img {
  width: 100%;
}
.product-page .content-left .actions-small {
  margin-top: 25px;
  position: absolute;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .product-page .content-left .actions-small {
    max-width: 290px;
  }
  .product-page .content-left .actions-small span {
    padding-right: 3px;
  }
}
@media only screen and (min-width: 768px) {
  .product-page .content-left .actions-small {
    max-width: 320px;
  }
}
@media only screen and (min-width: 992px) {
  .product-page .content-left .actions-small {
    max-width: 409px;
  }
}
@media only screen and (min-width: 1199px) {
  .product-page .content-left .actions-small {
    max-width: 510px;
  }
}
.product-page .content-left h3 {
  text-align: center;
  font-size: 2.143em;
  margin-top: 50px;
}
