.on-mobile {
    display: none;
}

.animated{
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@media all and (min-width: 1100px) {
}

@media all and (max-width: 1100px) {
    /* top line */
    body header ul.about li {border-width: 0}
    body header ul.about li:first-child, body header ul.about li:last-child {display: none}
    /* banner */
    body #banner, body #banner > div > div > a {height: 378px;}
    /* main menu */
    body header nav.main li.right {margin-left: 100px; margin-right: 160px}
    body header nav.main li.left {margin-right: 100px;}
    header nav.main li {padding: 0 5px}
    /* main page features */
    body ul.features li {min-width: 300px; padding: 10px}
    body ul.features li:after {display: none}
    /* main page categories*/
    body section.categories {height: auto; overflow: hidden}
    body section.categories ul.dots {margin-left: 0; text-align: center}
    body section.categories ul.dots li {margin: 20px; float: none; display: inline-block}
    /* main page subscription */
    body section.subscribe .border {width: 70%; padding: 60px 14%}
    /*list*/
    body .list .goods .name {height: 77px; width: 52%;}
    /* footer */
    footer nav {display: none}
    footer .ways_to_pay {left: 42%;}
}

@media all and (max-width: 860px) {
    /* main page advantages */
    body ul.advantages li {float: none; width: 96%; padding-bottom: 40px}
    body ul.advantages li:last-child {padding-bottom: 0}
    /* banner */
    body #banner, body #banner > div > div > a {height: 287px;}
    /*list*/
    body .list .goods {width: 90.5%;}
    body .list .goods .name {left: 128px;}
    /* footer */
    body footer .timetable {display: none}
    body footer .ways_to_pay {display: none}
}

@media all and (max-width: 720px) {
    /* logo */
    body header .logo {left: 0; margin-left: 0}
    /* search */
    header .top form.search {display: none}
    /* main menu */
    body header nav.main {display: none}
    /* banner */
    body #banner, body #banner > div > div > a {height: 240px;}
    /* map */
    body #YMapsID, body section.text-main {display: none}
    /* list */
    body .list .goods {min-width: 340px;}
    body .list .goods img {left: 0;}
    body .list .goods .name {left: 99px; font-size: 13px; height: 78px; width: 40%;}
    /* footer */
    body footer .bottom a {display: none}
}

@media all and (max-width: 640px) {
    /* general */
    body .container .container {margin: 0 5px;}
    body #content .left_col {display: none;}
    body .has_left_col main {margin-left: 0;}
    #shop_goods .sorting {display: none}
    body form.forms .item .title, body form.forms .item .input,  body form.forms .item .textarea, body form.forms .item .hint, body form.forms .item .hinterror {width: 90%}
    body #shop_goods, body #shop_goods div.nav {width: 342px; margin: 0 auto;}
    body section.goods_set, body section.goods_set h2  {margin-left: 0;}
    body .goods_wrapper {margin-left: -12px;}
    /* mobile head */
    body header div, body header nav, body header a {display: none}
    body header, #mobile_nav ul.panel {height: 50px; background-color: #000;}
    body #cart:before {display: none}
    /* banner */
    body #banner {padding-top: 50px;}
    body #banner, body #banner > div > div > a {height: 213px; background-size: 100%; background-repeat: no-repeat;}
    /* Organic similar to Electro */
    body .banner_line {display: none}
    #content {padding-top: 40px}
    /*body #shop_goods {margin-top: 70px}*/
    body #shop_goods div.nav {margin-right: 0;}
    /* shopping cart */
    /*#shopping_cart_table .qt .incr, #shopping_cart_table .qt .decr {display: none}*/
    #shopping_cart_table td .qt {width: 48px}
    #shopping_cart_table th {padding: 0; font-weight: normal}
    /* main page & titles */
    body section h2, body section h2 span {font-size: 30px; line-height: 30px;}
    body section.priority {display: none}
    /* shop module */
    body .goods {width: 270px; margin: 0 auto 50px auto;}
    body .goods a {margin: 0 auto;}
    body #shop_goods .goods-card {margin-left: 0}
    body #shopping_cart_table .features {display: none}
    body #shop_goods .filters {margin: 50px auto;}
    body ul.dots {margin: 0 auto; width: 312px;}
    body .categories ul.dots {width: unset;}
    body ul.dots li {width: 270px; margin: 0 auto 50px auto}
    body section.categories ul.dots {margin: 0 auto;}
    /* articles */
    body ul.news_list {max-width: 330px; position: relative; margin: 20px auto;}
    body ul.news_list li {position: relative;}
    body ul.news_list a {position: absolute; left: 0; top: 20px; height: 60px; overflow: hidden}
    body ul.news_list a.img {display: block; float: none; position: relative; margin: 70px 0 20px 0; width: 100%; padding: 0; border-width: 0; text-align: center}
    body ul.news_list .date {position: absolute; left: 0; top: 0; margin: 0}
    body ul.news_list li p {text-align: center;}
    body ul.news_list li p a, body ul.news_list li:after {display: none}
    body ul.news_list li img {display: inline-block; width: 100%; max-width: 330px; height: auto}
    /* questions */
    body .mobile_tc_1020_del {display: none}
    /* list */
    body .list .goods_wrapper {margin: 0;}
    body .list .goods {width: 99%;}
    body .list .goods img {left: 20px;}
    body .list .goods .name {left: 130px; font-size: 16px; height: 78px; width: 40%;}
    /* goods list */
    body .goods {display: block; float: left; width: calc(50% - 14px); min-width: 0; margin: 0 0 12px 12px; border: 1px solid #eee; border-radius: 8px; height: 320px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%);}
    body .goods a, body .list .goods a {width: 100%; height: auto;}
    body .goods img {margin: 0 auto 8px auto; width: 100%; max-width: 180px; height: auto; float: none; border-radius: 8px; border: none;}
    body .goods .name {top: unset; left: unset; width: 100%; font-size: 14px; line-height: 16px; margin: 0 auto; padding: 0; height: 48px; overflow: hidden; display: block; max-width: 100%;}
    body .goods .price {width: 100%; left: 0; right: auto; bottom: 60px;}
    body .goods a.buy {right: 8px; top: 270px; width: 100%; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; opacity: 1;}
    body .goods a.buy.in_cart:after {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
    body .goods span.info, body .gallery span.info {display: block; left: -6px; top: 8px; padding: 4px 6px; background-color: #000; border-radius: 4px; color: #fff; line-height: 1;}
    body .goods a.buy:before, body .goods a.buy.in_cart:before {left: 50%; bottom: 8px; margin-left: -57px;}
    body .goods a.buy:after {width: 100%;}
    body #shop_goods .goods {margin: 40px 0 12px 12px;}
    /* viewed goods list */
    body .container-view-products .container.products {margin: 0}
    body .goods_viewed .title {margin-bottom: 20px;}
    body .goods_viewed > div {margin-left: -12px;}
    body .goods_viewed .item {width: calc(50% - 14px); min-width: 0; margin: 0 0 12px 12px; border: 1px solid #eee; border-radius: 8px; height: 250px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)}
    body .goods_viewed .item a {height: auto; text-decoration: none}
    body .goods_viewed .item img {border: none; margin: 0 auto 8px auto; width: 100%; max-width: 180px; height: auto; float: none; border-radius: 8px;}
    body .goods_viewed .item .name {position: relative; width: auto; left: auto; top: auto; font-size: 14px; line-height: 16px; margin: 8px; padding: 0; height: 48px; overflow: hidden; font-weight: 600;}
    body .goods_viewed .item:not(:first-of-type) {margin: 0 0 12px 12px;}
    /* FOOTER: general styles */
    body footer {margin-top: -383px;}
    body.main #wrapper #content {padding-bottom: 383px;}
    body .on_top.ontop:before {bottom: 10px;}
    body .on_top.ontop:after {bottom: 2px;}
    body footer, body footer .container {height: auto;}
    body footer ul.contacts {display: block; position: relative; top: auto; padding: 20px 0 0 0; background: transparent; width: auto; max-width: 100%; margin: 0; float: none}
    body footer ul.contacts li, body footer nav > ul > li li {font-size: 14px; line-height: 24px; margin-left: 0;}
    body footer ul.contacts li.title, body footer nav > ul > li.sub span {height: auto; line-height: 40px; font-size: 16px; font-weight: bold}
    body footer ul.contacts a, body footer ul.contacts span {height: auto; line-height: 24px; text-decoration: none}
    body footer nav {display: block; max-width: 100%; padding: 0; position: relative; float: none; height: auto}
    body footer nav > ul > li {float: none; width: auto; margin: 0}
    body footer nav > ul > li ul {list-style-type: none}
    body footer nav a {text-decoration: none}
    body footer ul.social {position: relative; left: auto; top: auto; margin: 0; padding: 16px 0; text-align: center; width: auto; height: auto}
    body footer .bottom {position: relative; top: auto; text-align: center; height: auto; padding: 20px 0; line-height: 24px}
    body footer .ways_to_pay {position: relative; display: block; width: 100%; height: 20px; background-size: contain; background-position: center 0; left: auto; top: auto; bottom: auto; margin: 0 0 20px 0; padding: 0; font-size: 1px; color: transparent;}
    body footer .unisiter {display: block; position: relative; left: auto; right: auto; top: auto}
    body footer .unisiter a {display: inline-block; background-position: 0 -14px}
    body footer .unisiter a:hover {background-position: 0 -64px}
    body footer .copyright {position: relative; left: auto; top: auto; line-height: 24px; margin: 0; height: auto}
    body footer p.description {display: none}
    /* FOOTER: organic styles*/
    body footer .subscription {display: none}
    body footer nav > ul > li span:after, body footer .subscription h3:after {display: none}
    body footer .on_top {top:-36px}
    body footer .bottom {margin-top: 30px}
    /* footer elements */
    body footer nav > ul > li.sub ul {opacity: 0; height: 0; transition: all 0.5s ease; overflow: hidden;}
    body footer nav > ul > li.sub > span:after {content: '\e90a'; display: inline-block; font-family: 'Unisiter-Icons'; font-size: 12px; font-weight: bold;}
    body footer nav > ul > li.show ul {opacity: 1; height: auto}
    body footer nav > ul > li.show > span:after {transform: rotate(180deg);}
    body footer nav > ul > li > span.empty {display: none}
    body #mobile_nav ul.category li a, #mobile_nav .mobile-menu-header ul li a,
    body #mobile_nav .mobile-menu-bottom ul li a,
    body #mobile_nav #search_hints h2,
    body #mobile_nav #search_hints .result {text-align: left!important; font-weight: 400;}

    body #mobile_nav ul.category li,
    body #mobile_nav .mobile-menu-header ul li,
    body #mobile_nav .mobile-menu-bottom ul li {
        height: 40px!important;
    }
}

@media all and (max-width: 600px) {
    body section.subscribe .title span {font-size: 26px;}
    body section.categories ul.dots {margin: 0 auto;}
    body ul.dots {width: unset;}
    /*body .goods {width: 270px; margin: 0 auto 50px auto;}*/
}

@media all and (max-width: 480px) {
    /* top line */
    body .on-mobile {display: block;}
    /* shop module */
    body #shopping_cart_table .img {display: none}
    body section.subscribe .title span {font-size: 15px;}
    body section.subscribe .title {font-size: 50px; line-height: 44px;}
    /* goods on main page */
    body section.goods_set, body section.goods_set h2 {margin-left: 0}
    /* list */
    body .list .goods {min-width: 340px;}
    body .list .goods img {left: 0;}
    body .list .goods .name {left: 99px; font-size: 13px; height: 78px; width: 40%;}
    /* banner */
    body #banner, body #banner > div > div > a {height: 160px;}
    /* goods card */
    body .one_click_buy {margin-top: 12px; margin-left: 0;}
    body #shop_goods, body #shop_goods div.nav {width: 100%;}
    body #shop_goods .goods-card .gallery {max-width: unset; margin: 40px auto; padding-right: 0;}
    body #shop_goods .goods-card .gallery .middle {max-width: 266px; min-width: 200px; margin: 0 auto;}
    body #shop_goods .goods-card .gallery .middle img {width: 266px;}
    body .goods_viewed .item a {margin: 0 auto;}
    body .similar-goods .goods {float: unset}
    /* categories */
    body #cat_list {margin-left: -8px;}
    body .main_categories ul, body main ul.dots, body .cats_with_goods #shop_cats ul {margin-left: 2px; padding: 0; box-sizing: border-box;}
    body .main_categories li, body main ul.dots li, body .cats_with_goods #shop_cats ul li {width: calc(33.3% - 14px); margin: 0 0 8px 8px; position: relative; height: 190px; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)}
    body .main_categories li img, body ul.dots li img {width: 100%; height: auto; margin: 0 auto; border: none; border-radius: 0}
    body .main_categories li a, body ul.dots li a {width: 100%; height: 100%; border: none;}
    body .main_categories li .name, body ul.dots li .name {width: 100%; height: 32px; left: 0;font-size: 12px; line-height: 1.2; bottom: 0}
    body section.categories ul.dots li {margin: 0 0 8px 8px; float: unset;}
    /* categories with goods */
    body #shop_cats .devider {display: none}
    /* categories as a list */
    body #shop_cats {width: 100%}
    body #shop_cats ul {width: calc(100% - 2px);}
    body #shop_cats ul li {width: 96%; padding: 6px 2%;}
}

@media all and (max-width: 352px) {
    /* cart */
    body #cart {right: 50%; margin-right: -56px;}
    .goods_viewed .item:not(:first-of-type){margin-left: auto;}
    body #cart {right: 50%; margin-right: -56px; }
}