body {
        color: #413938;
        color: #1e1e1e;
        font-size: 16px;
        background: url(../img/bg-body.jpg) top center repeat-y;
        background-size: 100%;
}

p, ul, h2, h3, h4, h5, h6 {
        padding: 0;
        margin: 0;
}

ul {
        list-style: none;
}

a {
        outline: none !important;
        color: inherit;
}

a:hover, a:focus {
        color: inherit;
}
nav {
        background: #2b2b2b;
}
nav li {
        border-left: 1px solid #565656;
}
nav a {
        line-height: 50px;
        color: #b1b1b1 !important;
        display: block;
        text-align: center;
}
.navbar-collapse {
        padding: 0;
}
nav li:last-child {
        border-right: 1px solid #565656;
}
.navbar-toggle span {
        border-top: 1px solid #fff;
}
.navbar-toggle {
        border: 1px solid #fff;
}
*::before, *::after {
        content: '';
}

a, input[type='submit'] {
        transition: all .3s;
}

input::-webkit-input-placeholder {
        opacity: 1 !important;
        color: inherit !important;
}

input::-moz-placeholder {
        opacity: 1 !important;
        color: inherit !important;
}

h1 {
        font: 700 48px 'Roboto Condensed';
}

h3 {
        font: 30px 'Roboto Condensed';
        margin-bottom: 10px;
        margin-top: 15px;
}

.container-fluid {
        max-width: 1000px;
}
aside ul {
        padding-bottom: 20px;
}
.liner {
        border-top: 1px solid #2d2d2d;
        max-width: 1350px;
        margin: 0 auto;
}

.yellow {
        color: #ffc535;
}

body > header {
        background: #1e1e1e;
        color: #b1b1b1;
        padding: 15px 0;
}

body > header .img-responsive {
        display: inline-block;
}

body > header .row:first-child, body > header .row:first-child > div {
        display: flex;
}

body > header .row:first-child > div {
        display: flex;
        align-items: center;
}

body > header .row:first-child > div:last-child {
        justify-content: flex-end;
        font-size: 22px;
}

body > header i {
        font-weight: 700;
        color: #fff;
        margin-left: 30px;
}

body > header .row:last-child {
        /*padding-top: 25px;*/
        /*line-height: 15px;*/
}

body > header li {
        border-left: 1px solid #b1b1b1;
        text-align: center;
        display: table-cell;
        width: 1%;
}

body > header li:first-child {
        border-left-color: transparent;
}

.top-block-main {
        display: flex;
}

.top-block-main > div {
        padding: 25px 15px 50px;
        width: 50%;
}

.top-block-main > div > div {
        max-width: 450px;
}

.top-block-main > div:first-child {
        background: url(../img/bg-top-block-main.jpg) no-repeat;
}

.top-block-main > div:first-child {
        text-align: right;
        color: #780000;
        font: 900 60px/70px 'Roboto';
}

.top-block-main > div:last-child {
        background: #5f1414;
        color: #acacac;
        font: 14px/22px 'Roboto';
}

.top-block-main > div:last-child p {
        font: 700 46px/55px 'Roboto';
}

.top-block-main > div:last-child span {
        display: block;
        font: 24px/30px 'Roboto';
        padding: 20px 0;
        color: #fff;
}

.main-works {
        padding: 55px 15px 40px;
        color: #252525;
        font: 18px/20px 'Roboto';
}

.main-works h6 {
        font: 700 18px/24px 'Roboto';
        padding-bottom: 24px;
}

.main-works img {
        display: inline-block;
        transition: all .2s;
}

.main-works img:hover {
        transform: scale(1.03);
}

.main-works .row {
        text-align: center;
        padding-bottom: 10px;
}

.main-works i {
        color: #811313;
        display: inline-block;
        margin-top: 5px;
}

.main-works a {
        display: block;
        max-width: 188px;
        margin: 0 auto;
}

aside h3 {
        color: #780000;
}

aside li {
        border-top: 2px solid #989898;
        border-bottom: 2px solid #989898;
        border-left: 1px solid #414141;
        border-right: 1px solid #414141;
        padding: 1px;
        max-width: 188px;
        transition: all .05s;
}

aside li + li {
        margin-top: 9px;
}

aside li.act {
        border-color: #000;
        border-width: 2px;
}

aside li:hover {
        transform: scale(1.02);
}

aside a {
        display: block;
        font: 700 18px/29px 'Roboto';
        background: url(../img/bg-aside-link.png) center center;
        padding-left: 17px;
        text-shadow: 0px 1px 0 rgba(255, 255, 255, 1);
        text-decoration: none !important;
}

.main-content {
        padding: 50px 0px 75px;
}

.main-metall > div {
        padding-bottom: 20px;
        float: left;
}

.main-metall > div:nth-of-type(5n+1) {
        /* clear: left; */
        float: left;
        /* margin: 0 auto; */
}

.main-metall a {
        display: block;
        max-width: 187px;
        margin: 0 auto;
        font: 700 18px 'Roboto';
}

.text-catalog a {
    margin: 0;
    display: inline;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 16px;
    text-decoration: underline;
}
.text-catalog ul {
    list-style: disc;
    padding-left: 25px;
}

.main-metall a:hover {
        text-decoration: none;
        color: #780000;
}

.main-metall a img {
        transition: all .2s;
        margin-bottom: 2px;
        width: 187px;
        height: 149px;
}

.main-metall a:hover img {
        transform: scale(1.03);
}

.main-cutting {
        margin-top: 15px;
        border-top: 1px solid #2d2d2d;
}

.main-cutting h4, .cutting-inner h4, .cutting-aside h4 {
        font: 700 36px 'Roboto';
        margin: 25px 0 20px;
}

.main-cutting h4 span, .cutting-inner h4 span, .cutting-aside h4 span {
        color: #ed1c24;
}

.main-cutting img {
        border: solid 1px #7a7a7a;
        margin: 0 auto;
}

.main-cutting h5 {
        font: 700 18px/24px 'Roboto';
        color: #ed1c24;
        margin: 18px 0 5px;
}

.main-cutting h5 + div {
        font: 16px/24px 'Roboto';
}

.main-cutting p {
        line-height: 20px;
        color: #595959;
        margin: 20px 0;
}

.main-cutting div > span {
        font: 500 18px/22px 'Roboto';
}

.bottom-block-main {
        color: #a9a9a9;
        background: #1e1e1e;
        padding: 25px 0 45px;
}

.bottom-block-main h5 {
        font: 700 36px 'Roboto';
        margin-bottom: 18px;
}

.bottom-block-main h5 span, .bottom-block-main h4 span {
        color: #ed1c24;
}

.main-partners {
        padding-bottom: 25px;
}

.main-partners p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
}

.main-partners p span {
        padding: 0 10px 15px;
        opacity: .62;
        text-align: center;
}

.main-partners img {
        max-width: 100%;
}

.main-order div {
        border-top: 1px solid #464646;
        text-align: center;
}

.main-order p {
        display: inline-block;
        padding: 0 15px;
        text-transform: uppercase;
        font: 700 20px 'Roboto';
        background: #1e1e1e;
        position: relative;
        top: -13px;
        margin-bottom: 25px;
}

.main-order p span {
        color: #ed1c24;
}

.main-order a {
        display: block;
        width: 210px;
        margin: 0 auto;
        background: #ed1c24;
        color: #fff;
        text-decoration: none !important;
        text-align: center;
        font: 700 18px/40px 'Roboto';
}

.main-order a:hover {
        background: #f84047;
}

.bottom-block-main h4 {
        font: 700 38px 'Roboto';
        text-transform: uppercase;
        margin-bottom: 20px;
}

.bottom-block-main h4 span {
        font-size: 46px;
}

.main-best {
        padding: 45px 0;
        border-bottom: 1px solid #464646;
        margin-bottom: 40px;
        font: 300 18px/22px 'Roboto';
}

.main-best > div {
        display: flex;
}

.main-best > div div:first-child {
        width: 40%;
        padding-right: 15px;
}

.main-best > div div:last-child {
        width: 60%;
        align-self: flex-end;
        text-align: center;
        padding: 0 5px;
        color: #fff;
        background: #515151;
        line-height: 30px;
}

.main-news h5 {
        margin-right: 40px;
}

.main-news h5, .main-news h5 ~ p {
        display: inline-block;
        vertical-align: middle;
}

.main-news h5 ~ p a {
        display: inline-block;
        margin: 0 10px;
        width: 65px;
        border: 1px solid #a9a9a9;
        color: #a9a9a9;
        font: 300 16px/24px 'Roboto';
        text-align: center;
}

.main-news h5 ~ p a:first-child {
        margin-left: 0;
}

.main-news h5 ~ p a:hover {
        font-weight: 700;
        color: #1e1e1e;
        background: #a9a9a9;
        text-decoration: none;
}

.main-news h5 ~ p {
        margin-bottom: 18px;
        white-space: nowrap;
}

.owl-main-news {
        font: 300 18px/22px 'Roboto';
        margin: 0 -15px;
        width: auto;
}

.owl-main-news .owl-item {
        padding: 0 15px;
}

.owl-main-news time {
        color: #fff;
}

.owl-main-news .owl-pagination {
        text-align: center;
        padding-top: 40px;
}

.owl-main-news .owl-pagination div {
        display: inline-block;
        margin: 0 5px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        border: 1px solid #a9a9a9;
}

.owl-main-news .owl-pagination .active {
        border-color: #e81c24;
}

body > footer {
        padding: 15px 15px 20px;
        color: #262626;
        font: 18px/22px 'Roboto';
}

body > footer img {
        display: inline-block !important;
}

body > footer .row {
        display: flex;
        position: relative;
        padding-right: 55px;
}

body > footer .row > div {
        display: flex;
        align-items: center;
        padding: 0 15px;
}

body > footer .row .text-right {
        position: relative;
        padding-right: 35px;
}

body > footer .text-right i {
        position: absolute;
        right: 15px;
        top: 3px;
        font-size: 22px;
        color: #ed1c24;
}

body > footer .row > a:last-child {
        position: absolute;
        top: 5px;
        right: 30px;
}

.delivery-content {
        background: url(../img/delivery-content.png) right 30px no-repeat;
        background-size: 53%;
        padding-bottom: 75px;
}

.delivery-content h1 + p {
        font: 700 30px/36px 'Roboto Condensed';
        margin-bottom: 5px;
}

.delivery-content h4 {
        font: 700 24px 'Roboto';
        margin: 30px 0 15px;
}

.delivery-content p {
        line-height: 22px;
}

.delivery-content .row {
        display: flex;
}

.delivery-content .row > div:last-child {
        align-self: flex-end;
        text-align: right;
}

.delivery-content .row > div:last-child img {
        margin: 30px 0 0 13px;
}

.cutting-inner {
        overflow: hidden;
}

.cutting-inner::before {
        border-top: 1px solid #2d2d2d;
        display: block;
        max-width: 900px;
        margin: 0 auto;
}

.cutting-inner h4 + p {
        font: 20px/24px 'Roboto';
}

.cutting-inner h4 ~ div {
        line-height: 20px;
        color: #595959;
        padding: 12px 0 20px;
}

.cutting-inner h4 ~ p:last-of-type {
        font: 500 18px/22px 'Roboto';
}

.cutting-inner .row {
        display: flex;
        min-height: 474px;
}

.cutting-inner img {
        position: absolute;
        left: 0;
        bottom: 0;
}

.contacts-page h3 {
        color: #780000;
}

.contacts-page h3 + p {
        font: 700 20px 'Roboto';
        padding-bottom: 25px;
}

.contacts-page .row {
        display: flex;
        line-height: 26px;
}

.contacts-page .row > div {
        padding: 0 15px;
}

.contacts-page h5 {
        font: 700 20px 'Roboto';
        padding-bottom: 20px;
}

.contacts-page a {
        color: #ac0007;
        text-decoration: underline;
}

.contacts-page a:hover {
        text-decoration: none;
}

.map {
        margin: 30px 0 50px;
        border: 1px solid #454545;
}

.blade-descript {
        font: 500 18px/24px 'Roboto';
        margin-bottom: 20px;
}

.blade-types > div {
        padding: 15px 0 25px;
        font-size: 12px;
        border: solid #80808096 1px;
        width: 200px;
        height: 60px;
        margin: 10px;
        float: left;
        background: url(/assets/components/modxsite/templates/spektr/css/BG.jpg);
        text-align: center;
        text-decoration: none!important;
        padding: 10px;
        padding-top: 17.5px;
        background-size: 100%;
        border-radius: 2px;
        box-shadow: inset 0px 0px 9px 0px #222d3896;
}

div {}

.blade-types > div:first-child {
        padding-top: 17.5px;
}

.blade-types h5 {
        margin-bottom: 5px;
}

.blade-types h5 a {
        text-decoration: none !important;
        font-weight: 700;
        /* border-bottom: 1px solid #ffffff; */
        font-size: 20px;
        color: #e7e7e7;
}

.blade-types h5 a:hover {
        border-bottom-color: transparent;
}

.blade-types > div > a {
        display: block;
        width: 112px;
        text-align: center;
        margin-top: 23px;
        text-align: center;
        font: 700 16px/28px 'Roboto';
        text-decoration: none !important;
        border: 1px solid #d30008;
        color: #d30008;
}

.blade-types > div > a:hover {
        background: #d3000d;
        color: #fff;
}

.cutting-types {
        margin: 50px 0 35px;
}

.cutting-types > div {
        overflow: hidden;
}

.cutting-types > div + div {
        margin-top: 40px;
}

.cutting-types img {
        float: left;
}

.cutting-types > div > div {
        margin-left: 235px;
        line-height: 24px;
}

.cutting-types h5 {
        color: #ed1c24;
        font: 700 18px 'Roboto';
        margin-bottom: 5px;
}

.cutting-aside h4 {
        margin-bottom: 10px;
}

.cutting-aside h4 + p {
        font: 20px/24px 'Roboto';
}

.cutting-aside .row {
        display: flex;
}

.cutting-aside .row > div {
        padding: 0 15px;
        min-height: 350px;
        position: relative;
}

.cutting-aside .row > div:first-child {
        width: 35%;
}

.cutting-aside .row > div:last-child {
        width: 65%;
}

.cutting-aside .row p:first-child {
        line-height: 20px;
        color: #595959;
        padding: 12px 0 20px;
}

.cutting-aside .row p:last-child {
        font: 500 18px/22px 'Roboto';
}

.cutting-aside .row img {
        position: absolute;
        left: 0;
        bottom: 0;
        max-width: 100%;
}

.metall-types a {
        display: block;
        max-width: 154px;
        margin: 0 auto;
}

.metall-types p {
        border: 1px solid transparent;
        padding: 7px;
}

.metall-types img {
        border: 1px solid #454545;
}

.metall-types span {
        display: inline-block;
        padding: 0 8px;
        border: 1px solid #1e1e1e;
        font: 500 13px/27px 'Roboto';
        margin: 12px 0 0 8px;
        transition: all .3s;
}

.metall-types a:hover p {
        border-color: #1e1e1e;
}

.metall-types a:hover span {
        color: #e4e4e4;
        background: #1e1e1e;
}

.metall-types .row > div {
        margin-bottom: 15px;
}

.simple-text {
        line-height: 22px;
        padding-bottom: 50px;
        border-bottom: 1px solid #2d2d2d;
}

.simple-text h4 {
        font: 700 18px 'Roboto';
        margin: 25px 0;
}

.simple-text .metall-types {
        margin-top: 25px;
}

.ring {
        margin-top: 45px;
        font: 700 20px/31px 'Roboto';
        color: #ed1c24;
        border: 2px solid #ed1c24;
        padding: 11px 15px;
        text-align: center;
        max-width: 540px;
}

.ring span {
        white-space: nowrap;
}

.blades table {
        width: 100%;
}

.blades table td, .blades table th {
        border: 1px solid #1e1e1e;
        padding: 5px 3px;
        text-align: center;
        font-size: 14px;
}

#breadcrumb{
    padding:20px 0;
    }
 
#breadcrumb ul{
    margin:0;
    padding:0;
    list-style:none;
    }
 
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}

input, label, textarea{
    display: block;
}
input, textarea{
    margin: 0 auto;
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    background: linear-gradient(to top left, #dce5f1, #dce5f1, #828c95);
}
input.submit_button{
    background-color: #000000;
    border: 1px solid #8f908f;
    padding: 5px 10px;
    border-radius: 3px;
    font: 13px Arial, Verdana, Tahoma, sans-serif;
    /* color: #fff; */
    cursor: pointer;
    width: 17%;
    margin-top: 15px;
}
input.submit_button:hover{
    background-color: #358222;
}
span.required,
span.error{
   color: #ff0000;
}
span.required{
    font-size: 18px;
}
span.error{
    font-size: 11px;
}

@media screen and (max-width: 991px) {
        .top-block-main > div:first-child {
                font: 900 45px/50px 'Roboto';
        }

        .top-block-main > div:last-child p {
                font: 700 35px/45px 'Roboto';
        }

        aside a {
                font-size: 16px;
        }

        body > footer {
                font-size: 16px;
        }
}

@media screen and (max-width: 767px) {
        h1 {
                font-size: 36px;
        }

        body > header .row:last-child > div:last-child {
                /*padding-top: 20px;*/
                font-size: 20px;
        }

        .top-block-main > div:first-child {
                width: 35%;
        }

        .top-block-main > div:last-child {
                width: 65%;
        }

        .main-works .row > div {
                padding-bottom: 10px;
        }

        aside {
                padding-bottom: 30px;
        }

        aside ul {
                overflow: hidden;
        }

        aside li {
                max-width: none;
                float: left;
                width: 25%;
                margin-top: 5px !important;
        }

        aside li:hover {
                transform: none;
        }

        aside a {
                font: 700 14px/25px 'Roboto';
        }

        .main-best > div {
                display: block;
        }

        .main-best > div div {
                width: auto !important;
        }

        .main-best > div div:first-child {
                padding: 15px 0;
        }

        body > footer .row {
                display: block;
                text-align: center;
        }

        body > footer .row > div {
                display: block;
        }

        body > footer .row > div + div {
                margin-top: 10px;
        }

        body > footer .row > div.text-right {
                display: inline-block;
        }

        .delivery-content h1 + p {
                font-size: 26px;
        }

        .delivery-content h4 {
                font-size: 22px;
        }

        .delivery-content {
                background-image: none;
        }

        .delivery-content .row {
                display: block;
        }

        .cutting-inner .row {
                display: block;
                min-height: 0;
        }

        .cutting-inner img {
                position: static;
                display: block;
                margin: 25px auto 0;
                max-width: 100%;
        }

        .cutting-aside .row {
                display: block;
        }

        .cutting-aside .row > div {
                width: auto !important;
                min-height: 0;
        }

        .cutting-aside .row img {
                position: static;
                display: block;
                max-width: 100%;
                margin: 25px auto 0;
        }
}

@media screen and (max-width: 600px) {
        body > header .row:first-child > div:last-child {
                font-size: 18px;
        }

        body > header i {
                margin-left: 15px;
        }

        .top-block-main > div:first-child {
                font: 900 35px/35px 'Roboto';
        }

        .top-block-main > div:last-child p {
                font: 700 26px 'Roboto';
        }

        .top-block-main > div:last-child span {
                font: 22px/24px 'Roboto';
                padding: 10px 0;
        }

        aside li {
                width: 33.3%;
        }

        aside a {
                font: 700 13px/22px 'Roboto';
        }

        .main-metall > div {
                width: 50%;
        }

        .main-metall > div:nth-of-type(3n+1) {
                clear: none;
        }

        .main-metall > div:nth-of-type(2n+1) {
                clear: left;
        }

        .main-metall a {
                font-size: 16px;
        }

        .main-cutting h4, .cutting-inner h4, .cutting-aside h4 {
                font: 700 26px 'Roboto';
                margin: 15px 0;
        }

        .bottom-block-main h5 {
                font: 700 28px 'Roboto';
                padding-bottom: 10px;
        }

        .bottom-block-main h4 {
                font: 700 30px 'Roboto';
        }

        .bottom-block-main h4 span {
                font-size: 32px;
        }

        .contacts-page .row {
                display: block;
        }

        .contacts-page .row > div + div {
                margin-top: 25px;
        }

        .cutting-types img {
                float: none;
                display: block;
                margin: 0 auto 15px;
        }

        .cutting-types > div > div {
                margin-left: 0;
        }

        .cutting-types h5 {
                text-align: center;
        }

        .metall-types .row > div {
                width: 50%;
        }

        .metall-types .row > div:nth-child(2n+1) {
                clear: left;
        }
}

@media screen and (max-width: 520px) {
        body > header .row:first-child {
                display: block;
                text-align: center;
        }

        body > header .row:first-child > div {
                float: none;
                width: auto;
                display: block;
        }

        body > header .row:first-child > div:last-child {
                padding-top: 10px;
        }

        body > header ul {
                overflow: hidden;
        }

        body > header li {
                display: block;
                float: left;
                width: 50%;
                border-left: none;
                padding-bottom: 10px;
        }

        body > header .row:last-child > div:last-child {
                padding-top: 10px;
                text-align: center;
        }

        .top-block-main {
                display: block;
        }

        .top-block-main > div {
                width: auto !important;
                padding: 25px 15px;
        }

        .top-block-main > div:first-child > div {
                float: none !important;
        }

        .top-block-main > div:first-child p {
                display: inline-block;
        }

        .top-block-main > div:first-child p + p {
                padding-left: 15px;
        }

        aside li {
                width: 50%;
        }

        .main-cutting > div {
                float: none;
                width: auto;
        }

        .main-cutting > div + div {
                margin-top: 20px;
        }

        .main-cutting * {
                height: auto !important;
        }

        .main-partners p span {
                width: 33%;
        }

        .blades table td, .blades table th {
                font-size: 12px;
        }

        .blades table td:first-child {
                font-size: 10px;
        }
}

a.active {
        text-decoration: underline;
}
.show-form {
        cursor: pointer;
}
.nowrap {
        white-space: nowrap;
}
.content ul {
        padding-left: 25px;
}
.content ul li {
        list-style: disc;
}
.content img {
        max-width: 100%;
        height: auto;
}
.pl5 {
        padding-left: 5px;
}
@media screen and (max-width: 767px) {
        body > header .row > div:last-child {
                font-size: 20px;
        }
}

.formdiv {float:left;margin-left: 10px;}

.blokpreims
{width:100%;
 padding:5px;
}

.blokpreims img {width:100px; height:100px;}

.blokpreims h2 {font-size: 10px;}

.blokpreims p {font-size: 8px;}

.blokpreims img {width:100px; height:100px;}
.samplepreim
{float: left;
    max-width: 50%;
    width: min-content;
    margin: 5px;
    height: max-content;}
    
    

/* generic css */

.view {
  width: 320px;
  height: 180px;
  margin: 3px;
  float: left;
  border: 10px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #e8e8e826 url(/preims/fonpreim.jpg) round;
}

.view .mask,
.view .content {
  width: 300px;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}

.view img {
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  /* transform: rotate(45deg); */
  margin-left: 33%;
  margin-top: 8%;
}

.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-family: Raleway, serif;
  padding: 0px 20px 0px 0px;
  /*background: rgba(0, 0, 0, 0.8);*/
  margin: 20px 0 0 0;
  font-weight: bold;
}

.view p {
  font-family: Merriweather, serif;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  color: #fff;
  padding: 0px 20px 0px 0px;
  text-align: center;
}

.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000
}

.view a.info:hover {
  box-shadow: 0 0 5px #000
}


/*1*/

.view-first img {
  /*1*/
  transition: all 0.2s linear;
  width: 300px;
  height: 200px;
}

.view-first .mask {
  opacity: 0;
  background-color: rgba(58, 1, 132, 0.44);
  transition: all 0.4s ease-in-out;
}

.view-first h2 {
  transform: translateY(-100px);
  opacity: 0;
  font-family: Raleway, serif;
  transition: all 0.2s ease-in-out;
}

.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-first a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}


/* */

.view-first:hover img {
  transform: scale(1.1);
}

.view-first:hover .mask {
  opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-first:hover p {
  transition-delay: 0.1s;
}

.view-first:hover a.info {
  transition-delay: 0.2s;
}


/*2*/

.view-second img {
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
}

.view-second .mask {
  background-color: rgba(12, 19, 27, 0.6);
  width: 300px;
  padding: 105px;
  height: 200px;
  opacity: 0;
  transform: translate(265px, 145px) rotate(45deg);
  -webkit-transform: translate(265px, 145px) rotate(45deg);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.view-second h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  font-family: Raleway, serif;
  background: transparent;
  margin: 20px 40px 0px 40px;
  -webkit-transform: translate(200px, -200px);
  transform: translate(200px, -200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.view-second p {
  transform: translate(-200px, 200px);
  -webkit-transform: translate(200px, -200px);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.view-second a.info {
  transform: translate(0px, 100px);
  -webkit-transform: translate(0px, 100px);
  transition: all 0.2s 0.1s ease-in-out;
  -webkit-transition: all 0.2s 0.1s ease-in-out;
}


/* */

.view-second:hover .mask {
  opacity: 1;
  transform: translate(-80px, -125px) rotate(45deg);
  -webkit-transform: translate(-80px, -125px) rotate(45deg);
}

.view-second:hover h2 {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}

.view-second:hover p {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}

.view-second:hover a.info {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}


/*3*/

.view-tenth img {
  transform: scaleY(1);
  transition: all .7s ease-in-out;
  transform: rotate(31deg);
}

.view-tenth .mask {
  background-color: rgba(255, 231, 179, 0.3);
  transition: all 0.5s linear;
  opacity: 0;
  width: 320px;
  height: 180px;
}

.view-tenth h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  /* margin: 20px 40px 0px 40px; */
  transform: scale(0);
  color: #fff;
  transition: all 0.5s linear;
  opacity: 0;
}

.view-tenth p {
  color: #fff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
}

.view-tenth a.info {
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
}

.view-tenth:hover img {
  -webkit-transform: scale(10);
  transform: scale(10);
  opacity: 0;
}

.view-tenth:hover .mask {
  opacity: 1;
}

.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info {
  transform: scale(1);
  opacity: 1;
}
.mainpagediv {width: 100%;}   
.razdelyglavnoy {width: 20%; float:left; height:200px;} 
.tipystali {width: 95%; padding: 10px;}
.tipystali li {float:left;margin: 10px;background: url(/bg1.jpg) round;padding: 5px;width: 160px;text-align: center;padding: 10px 10px 10px 10px;border-radius: 5px;color: white;font-weight: bold;}

summary{font-size:28px;}
.pricediv {position: fixed;width: 250px;height: 50px;background: #f3c700;top: 97px;right: -200px;padding: 5px; transition: 1s;
animation: nev 8s infinite;
}
@keyframes nev {
0% {transform: rotate(0deg);}
22% {transform: rotate(0deg);}
25% {transform: rotate(5deg);}
27% {transform: rotate(0deg);}
29% {transform: rotate(0deg);}
31% {transform: rotate(-5deg)}
34% {transform: rotate(0deg);}
100% {transform: rotate(0deg);

}    
}
.pricediv a img {width: 45px;height: 45px;}
.pricediv:hover {right: -80px; animation:none;}

@media(max-width:480px){
    .main-metall a img {
        max-width: 100px;
        height: auto;
    }
        .row {
        margin-right: 0;
        margin-left: 0;
        padding: 0 10px;
    }
        .view {
        width: 270px;
        }
        .view-tenth .mask {
        width: 270px;
        }
        .text-catalog p {
        font-size: 12px;
    }
        .razdelyglavnoy {
        height: auto;
    }

        .razdelyglavnoy a {
        font-size: 14px;
    }
}