/* настройки */
@import '../common/options.less';

@intensives-main-color: #006249;
@white-color: #fff;

.top-nav, .infoBar {
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.65);
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.65);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.65);
}

article {overflow: hidden;}
article >section {padding: 0; margin: 0 0 40px; position: relative; clear: both; overflow: hidden;}
article >section >.container {padding: 0 20px; position: relative; z-index: 2; max-width: 10000px!important;}

h1 {font-size: 1.6em; margin: 0 0 5px; color: @white-color;}
h2 {font-size: 1.5em; margin: 20px 0 20px; text-align: center; color: @intensives-main-color;}
h3 {font-size: 1.3em; text-align: left; color: @intensives-main-color;}
h4 {font-size: 1.1em; color: @intensives-main-color;}
.page-content {padding-top: 0!important; background: #fff!important;}

#productHeader h2 {color: @intensives-main-color;}
#productHeader .price.current {color: @intensives-main-color;}
#productHeader .btn.btn-default {background: #006249; border-color: #084a48;}
#productHeader .btn.btn-default:hover, #productCard .btn.btn-default:active {background: #084a48; border-color: #084a48;}
#productHeader .add .gotoCart > a {color: #084a48!important; text-shadow: none;}

#main {padding: 0;}
#main >.mainContent {background: #fff;}
#main .container {z-index: 3;}

.mainTitle {position: absolute; top: 0; left: 0; right: 0; padding: 15px 15px 0; z-index: 3;}
.mainTitle p {margin: 0; color: @white-color;}
.mainPicture {overflow: hidden; width: 100%; text-align: center; position: relative; z-index: 1; margin: 0;}
.mainPicture img {width: 600px;}

.countdownTimer {background: #fff; color: #000;}
.countdownTimer span.num {color: @intensives-main-color;}

.btn.back-to-top, #read-more {background: fade(@intensives-main-color, 50%); border-color: fade(@intensives-main-color, 10%);}
.btn.back-to-top:hover,  #read-more:hover,
.btn.back-to-top:active, #read-more:active,
.btn.back-to-top:focus,  #read-more:focus  {background: @intensives-main-color; border-color: @intensives-main-color;}

.landingReviews {box-shadow: none!important;}

#productCard {
    position: relative;
    margin: 20px 0 15px;
    padding: 0;
}
#productCard .products {display: block;}
#productCard .products .product {width: auto; border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 0 10px 10px;}
#productCard .size, #productCard p {margin: 0 0 10px;}
#productCard h4 {margin: 0 0 10px; font-size: 1.4em; color: @intensives-main-color;}
#productCard .price.current {color: @intensives-main-color;}
#productCard .infoTop {}
#productCard .infoBottom {}
#productCard .image {position: relative;}
#productCard img {height: 150px; width: auto; margin: 0 auto 10px;}
#productCard .shortDescription {line-height: 120%;}
#productCard .image .almostOutOfStock {bottom: 40px;}
#productCard .image .almostOutOfStock >span {width: 200px;}
#productCard .image .productTimer {position: absolute; bottom: 15px; left: 0; right: 0;}
#productCard .image .productTimer .countdownTimer {margin: 0; padding: 3px 15px 5px; background: rgba(255, 255, 255, 0.8); border-radius: 0; border: 2px solid #f00; color: #f00; font-weight: bold;}
#productCard .image .productTimer .countdownTimer span.num {color: #f00;}
#productCard .add .gotoCart > a {color: @intensives-main-color;}

#delivery {text-align: center; position: relative; z-index: 3;}

#toc {list-style: none; text-align: center; padding: 0; margin: 0 0 20px; z-index: 4; position: relative;}
#toc li {margin: 0 10px 10px; display: inline-block; text-align: left;}
#toc li a {display: inline-block; color: #000; padding: 2px 5px; background: rgba(0, 98, 64, 0.4);}


.art-content {padding: 0;}
section .image {overflow: visible;}
section >.image {position: relative; clear: both; overflow: hidden; z-index: 1; margin: 0 0 10px;}
section .image img {height: 300px; width: auto;}
.art-left, .art-right {width: 100%; padding: 0;}
.art-left.image img {float: right;}
.art-right.image img {float: left;}
.art-content .comment {clear: both;}
.art-content ul, .art-content p {overflow: hidden;}
.art-content ul {padding-left: 20px;}
.art-content ul li {margin: 0 0 10px;}

.art-descr {font-size: 1.1em; margin: 0 0 20px;}

#logo {width: auto; margin: 20px auto;}
#logo img {width: 500px;}

.mobile-hidden, .small-hidden, .medium-hidden {display: none;}
.mobile-visible, .small-visible, .medium-visible {display: block;}

.comment {margin: 20px 0 0;}
.descr {font-size: 1.1em; margin: 0 0 20px;}


@media (min-width: 576px) {
    .mainPicture img {width: 900px;}
    #productCard .products .product {width: 100%;}

    h1 {font-size: 2em;}
    h2 {font-size: 1.8em;}
    h3 {font-size: 1.6em;}
    h4 {font-size: 1.2em;}
}

/* small */
@media (min-width: 901px) {
    article .container {width: 870px;}
    article >section {margin: 0 0 30px;}

    h1 {font-size: 3em;}
    h2 {font-size: 2.5em; margin: 0 0 30px;}
    h4 {font-size: 1.3em;}

    .mobile-hidden {display: block;}
    .mobile-visible {display: none;}

    #main {color: @white-color; overflow: hidden;}
    #main >.mainContent {background: none;}
    .mainTitle p {font-size: 1em;}
    .mainPicture {position: absolute; top: 0; left: 0; right: 0; margin: 0; z-index: 1;}
    .mainPicture img {width: 1400px;}

    #productCard {z-index: 2; margin-top: 500px;}
    #productCard .products {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: stretch;
        align-content: stretch;
        padding: 0;
    }
    #productCard .products .product {flex: 0 0 auto; width: 400px; border-bottom: none; margin-bottom: 0;}
    #productCard .infoTop {height: 40px;}
    #productCard .infoBottom {height: 40px;}

    #productCard .infoTop {height: 40px;}
    #productCard .infoBottom {height: 30px;}
    #productCard h4 {color: @white-color;}
    #productCard .price.current {color: @white-color; text-shadow: 0 1px 2px #000;}
    #productCard .add .gotoCart > a {color: @white-color!important; text-shadow: none;}

    .timer {position: absolute; z-index: 4; top: -100px; left: 0; right: 0;}
    .timer .countdownTimer {padding: 5px 15px;}
    .timer .countdownTimer .title {line-height: 120%;}

    .art-descr {font-size: 1.3em; margin: 0 0 30px;}

    #toc li a {background: rgba(255, 255, 255, 0.7);}

    #logo {margin: 20px 0 40px;}
    #logo img {max-width: 10000px; width: 500px;}

    .descr {font-size: 1.2em;}
}

/* medium */
@media (min-width: 1201px) {
    article >section {margin: 0 0 40px;}
    article .container {width: 970px;}

    #main {margin: 0 0 30px;}

    .small-hidden {display: block;}
    .small-visible {display: none;}

    .art-content {clear: both;}
    .art-content .comment {clear: none;}
    .art-small .art-content .comment {clear: both;}
    .art-small .art-left {padding-right: 15px; float: left; width: 50%;}
    .art-small .art-right {padding-left: 15px; float: right; width: 50%;}
}

/* large */
@media (min-width: 1401px) {
    article >section {margin: 0 0 50px;}
    article .container {width: 1170px;}

    #main {margin: 0 0 40px;}
    .mainPicture img {width: 1820px;}

    .mobile-hidden, .medium-hidden {display: block;}
    .mobile-visible, .medium-visible {display: none;}

    .mainTitle {padding: 20px 20px 0;}
    .mainTitle p {line-height: 120%; font-size: 0.9em;}

    h1 {font-size: 3em;}
    h2 {font-size: 2.5em;}
    h3 {font-size: 2em;}
    h4 {font-size: 1.4em;}

    #productCard {margin-top: 610px;}

    .art-left, .art-small .art-left {padding-right: 20px; float: left; width: 50%;}
    .art-right, .art-small .art-right {padding-left: 20px; float: right; width: 50%;}
    .art-small .art-content .comment {clear: none;}

    #toc {position: fixed; top: 220px; left: 30px; margin: 0;}
    #toc li {margin: 0 0 10px; display: block; height: 30px; line-height: 30px;}
    #toc li a {background: rgba(255, 255, 255, 0.6);}
    #toc li a.current {font-size: 1.4em; font-weight: bold;}

    #logo img {width: 600px;}
}

/* xlarge */
@media (min-width: 1901px) {
    h1 {font-size: 3.5em; margin: 0 0 5px;}
    h2 {font-size: 3em;}
    h3 {font-size: 2em;}
    h4 {font-size: 1.5em;}
    .mainPicture img {width: 2500px;}

    #productCard {margin-top: 760px;}
    #productCard h4 {color: @white-color;}

    #toc {left: 100px;}
}