.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;
}

.on-mobile {
    display: none;
}

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

}

@media all and (max-width: 1280px) {

}

@media all and (max-width: 1100px) {
    /* header */
    header .phone {display: block; left: 300px;}
    header .main {display: none;}
    header .mail {right: 0; left: auto; display: block;}
    body header .top .slogan {display: none}
    /* banner */
    body #banner img {width: 100%; position: absolute;}
    /* list */
    body #shop_goods .list .filters {width: 25%;}
    body .list .goods_wrapper {width: 66%;}
    body .list .goods .price {top: 75px;}
    body .list .goods .name {width: 50%; font-size: 16px;}
    /* footer */
    footer ul.social {top: 69px;}
    body footer .ways_to_pay {display: none}
}

@media all and (max-width: 860px) {
    #line form {display: block;}
    #main_catalog {display: block;}
    #banner {display: block;}
    .banner_line .goods {float: right;}
    #shop_goods .sorting {display: none}
    body .list .goods .name {width: 43%; font-size: 14px;}
    body footer .subscription {display: none}
}

@media all and (max-width: 720px) {
    /* general */
    #line form {display: none;}
    header .mail {display: none;}
    #main_catalog {display: none;}
    /* banner */
    body #banner {margin: 0; height: 180px;}
    body .banner_line {display: none}
    #shopping_cart_table .img {display: table-cell;}
    /* main page */
    body .text-main {margin-left: 0;}
    body .goods_hits, body .goods_sale {margin-left: 0;}
    /* list */
    body .list .goods_wrapper {width: 97%;}
    body #shop_goods .list .filters {width: 210px;}
    body #shop_goods .filters {margin-bottom: 30px;}
}

@media all and (max-width: 640px) {
    /* general */
    body .container .container {margin: 0 10px;}
    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 {margin-left: 0}
    /* mobile head */
    body header div, body header nav, body header a {display: none}
    body header, #mobile_nav ul.panel {height: 50px; background: #4f6868;}
    #mobile_nav ul.panel #cart:before {display: none}

    body #line {display: none}
    /* banner */
    body #banner {height: 161px;}
    /* Martfor similar to Electro */
    body #content {padding-top: 90px}
    body .text-main .advantages {margin-left: 0;}
    #shopping_cart_table td, #shopping_cart_table th {word-break: normal;}
    .goods_hits > a, .goods_sale > a {display: inline;}
    body #shop_goods .filters {float: none; margin-bottom: 30px; left: 50%; margin-left: -115px;}
    /* goods card */
    body .one_click_buy {right: unset; top: 60px;}
    body #shop_goods .buttons, body #shop_goods .features {float: none; width: auto}
    /* goods set */
    body .goods_set {height: auto; margin-left: -12px;}
    body .goods {display: block; float: left; padding: 0; width: calc(50% - 14px); min-width: 0; margin: 0 0 12px 12px; border: 1px solid #eee; border-radius: 8px; height: 302px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)}
    body .list .goods {float: none; width: calc(100% - 2px); min-width: 0; margin: 0 0 12px 0; height: 330px;}
    body .goods a, body .list .goods a {width: 100%; height: auto}
    body .goods:after {display: none}
    body .goods img {margin: 0 auto 8px auto; float: none; border-radius: 8px; display: block; position: relative;}
    body .list .goods img {width: 40%; height: auto; float: left; margin: 0}
    body .goods .name {font-size: 14px; line-height: 16px; margin: 8px; padding: 0; height: 48px; overflow: hidden; display: block; max-width: 100%}
    body .list .goods span.name {position: absolute; left: 45%; top: 34px; margin: 0; padding: 0; height: 48px; line-height: 16px; overflow: hidden; display: block; max-width: 100%}
    body .goods span.info, body .gallery span.info {display: block; left: -5px; top: 8px; padding: 4px 6px; background-color: #00a9ec; color: #fff; line-height: 1}
    body .list .goods span.info {left: 45%; top: 8px; padding: 4px 6px;}
    body .goods .price {padding-left: 8px;}
    body .list .goods .price {left: 45%; right: auto; bottom: 14px;}
    body .goods .buttons, body #shop_goods .goods .buttons {width: 100%; bottom: 8px; height: 34px}
    body .goods .qt input, body #shop_goods .goods .qt input {font-size: 14px}
    body .list .goods .qt {display: none}
    body .gallery span.info {left: 0;}
    /* list */
    body .list .goods .name {width: 50%; font-size: 16px;}
    body .list .goods_wrapper {width: 100%;}
    body .similar-goods .goods {height: 304px;}
    body #shop_goods .similar-goods {margin-left: -12px;}
    /* viewed goods list */
    body .container-view-products .container.products {margin: 0}
    body .goods_viewed .title {margin-bottom: 20px; left: 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 {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-left: 12px;}
    /* FOOTER: general styles */
    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: martfor styles */
    body footer .contacts .title {display: block}
    body footer ul.social {padding-bottom: 0; height: 32px}
    /* 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}
}

@media all and (max-width: 480px) {
    /* general */
    body #shopping_cart_table .img {display: none}
    body .on-mobile {display: block}
    #shopping_cart_table td, #shopping_cart_table th {word-break: break-all;}
    body .ontop:before {right: 10px;}
    body .goods_set > a {right: unset; top: 19px; left: 21px;}
    /* banner */
    body #banner {height: 120px;}
    /* main page */
    body .goods_hits > a, body .goods_sale > a {display: none}
    /* логотип платформы  */
    body .goods_hits, body .goods_sale {text-align: center; height: 650px;}
    body #shop_cats, body ul.dots li {float: none; margin: 0 auto; margin-bottom: 20px;}
    /* list */
    body .list .goods img {left: 0; width: 100px; height: 100px;}
    body .list .goods a {height: 100px;}
    body .list .goods .price {right: 119px; top: 66px;}
    body .list .goods .name {left: 109px; top: 10px; font-size: 14px; line-height: 14px; margin-right: 0; height: 41px; width: 42%;}
    body #shop_goods .list .goods_wrapper .buttons {top: 14px;}
    body .list .goods {min-width: 354px;}
    body buy-wrapper .qt, body .goods .buttons .qt {margin-left: 12px;}
}

@media all and (max-width: 460px) {
    body .goods {height: 330px;}
    body .goods .buttons .qt {margin-left: 0; margin-bottom: 5px;}
    body .goods .buttons, body #shop_goods .goods .buttons {position: unset; width: 100%; max-width: 92px; height: 70px;  margin: 10px auto 0 auto;}
    body .goods .buttons input.buy, body #shop_goods .buttons input.buy {left: 0;}
    body .goods .buttons a.buy, body #shop_goods .goods .buttons a.buy {position: unset; padding: 0; height: 30px; line-height: 30px; text-align: center;}

}

@media all and (max-width: 414px) {
    body #shop_goods .list .goods_wrapper .buttons {right: 5px;}
}

@media all and (max-width: 352px) {
    /* banner */
    body #banner {height: 86px;}
}