.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: 1100px) {
}

@media all and (max-width: 1100px) {
	/* header */
	body header ul.about li.slogan {
    	display: none;
    }
    body header ul.social {display: none;}
    /*body nav.user {margin: 0px 0px 0px 68%;}*/
     /* main*/
	body section.about {width: 830px;}
	footer nav {display: none;}
}

@media all and (max-width: 860px) {
	body #banner {display: none;  margin-top: 50px;}
	body header nav.main {font-size: 12px;}
	body header nav.main a {line-height: 27px;}
	body header nav.main a[href="/shop/category/"]:after {top: -17px;}
	body header nav.main li.sub:after {top: 8px;}
    /* main*/
	body section.about {width: 689px;}
	/* catalog */
	body #wrapper > .line {display: none;}
	body #shop_goods .sorting {display: none;}
	body #shop_goods .buttons_wrapper {margin-bottom: 30px;}
    body header nav.main li {height: 40px;}
    body #content h1 {padding-top: 40px;}
    body #shop_goods div.nav {top: -83px;}
    body .goods-card .qt {margin-bottom: 10px;}
}

@media all and (max-width: 720px) {
	body header div.search {display: none; top: -13px; left: 20px; width: auto;}
	body header .logo {left: 22%;}
	body header nav.main {display: none;}
	/* main*/
	body section.about {width: 610px;}
	body #content .text-main .left_col {width: auto;}
	body #content .text-main .right_col {width: auto;}
    body #shopping_cart_table .decr {display: none;}
    body #shopping_cart_table .incr {display: none;}
    body #shopping_cart_table .qt input {border-left-width: 2px; border-right-width: 2px;}
    body #content h1 {padding-top: 50px;}
    body #shop_goods div.nav {top: -124px;}

}

@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}
	/* header */
	body header .logo {left: 22%;}
    /* mobile head */
    body header div, body header nav, body header a {display: none}
    body header, #mobile_nav ul.panel {height: 50px; background-color: #10499e;}
    body header:before {display: none}
    /* Hipster similar to Electro */
    body #content {padding-top: 40px}
    body #content h1 {padding-top: 0; padding-bottom: 20px; margin-bottom: 20px}
    body #content #shop_goods {margin: 70px 0 0 0;}
    body #shop_goods div.nav {margin-top: -60px; margin-right: 0; top: auto; left: auto}
    body div.nav {margin-top: 20px; margin-bottom: 20px; position: relative; top: auto}
	/* main*/
	body section.about {width: 449px;}
    body header nav.main {position: unset; height: 40px; font-family: Montserrat; border-bottom: none;}
    body header nav.main ul li {display: block; position: relative; float: left;}
    body #mobile_nav .mobile-menu-header ul li {width: 100%; text-align: left;}
    body #mobile_nav .mobile-menu-header ul li:first-of-type a:after {content: " "; display: block; position: absolute; left: 5%; bottom: 0; width: 90%; height: 1px; background-color: #eee;}
    body header nav.main ul li a {text-transform: none;}
	/* footer */
	footer .contacts {display: none;}
    body footer .unisiter {font-size: 0;}
	body footer .unisiter a {display: block; position: absolute; top: 27px; right: 0; height: 20px; font-size: 0;}
    /* catalog */
    body #content .left_col {display: none;}
    body .has_left_col main {margin-left: 0;}
    body .one_click_buy {margin-bottom: 30px;}
    
    body .goods {float: none; margin: 0 auto; margin-bottom: 60px;}
    body ul.dots {margin-left: 0;}
    body ul.dots li {float: none; margin: 0 auto;}
    body #shop_goods .similar-goods {margin: 0;}
    body #shop_goods .similar-goods h4 {margin: 0; margin-bottom: 20px; text-align: center;}
    body header .logo {background-size: contain; width: 300px;}
    body #shopping_cart_table .features {display: none;}

    body #banner, body #banner .sl_a, body #banner .sl_a > div, body #banner .sl_a > div > a{width: 100%;height: 210px;display: block;}
    body .hint div[data-purchase-hint]{position: unset;}
}

@media all and (max-width: 480px) {
     /* general */
    body #shopping_cart_table .img {display: none}
	body .on-mobile {display: block}
    body form.search {top: 52px;}
	/* header */
	/*body header ul.about {float: none; height: 30px; text-align: center;}*/
    /*body header ul.about li.phone {display: block; text-align: center; float: none; padding: 5px 0; width: 100%; margin: 0;}*/
    /*body header ul.about li:before {display: none;}*/
	/*body nav.user {margin: 0px auto; margin-top: 13px; float: none; width: 135px;}*/
	/*body header .logo {width: 120px; height: 40px; left: 39%; top: 34px; background-size: contain;}*/
	body section.about {display: none;}
	body #cart {right: -10px; top: 20px;}
	body #cart .cart_m {font-size: 12px;}
	body section.subscribe h2 {line-height: 22px;}
	body section.subscribe form input[type=submit] {font-size: 10px; right: -21px;}
	/* catalog */
	body section.subscribe form input[type=text] {width: 100%;}
	body header ul.about li {float: none; margin: 0;}
    body .goods {float: none; margin: 0 auto; margin-bottom: 60px;}
    body ul.dots li {float: none; margin: 0 auto;}
    body #shop_goods .goods-card {margin: 0 auto;}
    body #shop_goods .goods-card .gallery {float: none; margin: 0 auto; margin-bottom: 40px; padding-right: 0;}
    body #shop_goods .goods-card .buttons {float: none;}
    body #shop_goods .buttons .price {text-align: center;}
    body .goods-card .qt {float: none; margin: 0 auto; margin-bottom: 25px;}
    body #buy_btn_cont {float: none; margin: 0 auto; text-align: center;}
    body .one_click_buy {width: 107px; float: none; margin: 0 auto; margin-top: 25px;}
}

@media all and (max-width: 352px) {
	/*body header .top {height: 50px;}*/
	body section.subscribe form input[type=text] {width: 120%; margin-left: -40px;}
	body section.subscribe form input[type=submit] {right: -18px;}
    body .one_click_buy {margin-top: 30px; margin-left: 20%;}
    body #content h1 {padding-top: 55px;}
    body footer .bottom  {line-height: 20px;}
}