@font-face {
    font-family: 'MetronicPro-Light';
    src: url('../fonts/MetronicPro-Light.eot');
    src: local('☺'), url('../fonts/MetronicPro-Light.woff') format('woff'), url('../fonts/MetronicPro-Light.ttf') format('truetype'), url('../fonts/MetronicPro-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { font-family: 'MetronicPro-Light', Arial, Helvetica, sans-serif }
BODY { color: #fff; background: #000; font-size: 16px; margin: 0; padding: 0 }

A { color: #d8b96b }
A:hover { color: #fff; text-decoration: none }
HR { height: 1px; border: 0; background: #dba73e;
background: -moz-linear-gradient(left,  #dba73e 20%, #ffffff 50%, #dba73e 80%);
background: -webkit-linear-gradient(left,  #dba73e 20%,#ffffff 50%,#dba73e 80%);
background: linear-gradient(to right,  #dba73e 20%,#ffffff 50%,#dba73e 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dba73e', endColorstr='#dba73e',GradientType=1 );
}

.wrapper { width: auto; overflow: hidden; padding: 0; margin: 0; }
.title { margin: 40px 0 30px 0; color: #d8b96b; text-transform: uppercase; font-size: 42px; text-align: center; text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.75); }
.title > HR { width: 40%; margin-top: 13px }
@media (max-width: 480px) {
    .title { font-size: 34px }
}

/* Header */
HEADER { padding-top: 20px; padding-bottom: 50px; }
HEADER DIV.logo { text-align: center }
HEADER DIV.logo > A > IMG { width: 100%; max-width: 390px }
HEADER DIV.lang { text-align: right }
@media (max-width: 992px) {
    HEADER DIV { text-align: center }
    HEADER DIV.email { padding-bottom: 10px }
    HEADER DIV.logo { padding-bottom: 10px }
    HEADER DIV.lang { text-align: center }
}
@media (max-width: 768px) { }
@media (max-width: 480px) { }
A.mail_sm { display: inline-block }
A.mail_sm > SPAN { width: 16px; height: 16px; display: inline-block; background: url('../img/icons.png') no-repeat }
A.mail_sm > SPAN.mail { vertical-align: middle; margin-right: 5px; background-position: 0 0 }
A.mail_sm:hover > SPAN.mail { background-position: 0 -16px }

/* Footer */
FOOTER { padding: 15px 0 20px 0 }
FOOTER DIV.copyright { font-size: 14px; line-height: 32px }
FOOTER DIV.dev { font-size: 14px; text-align: right; line-height: 32px }
FOOTER DIV.dev > A { font-size: 14px; text-decoration: none }

A.social_sm { display: inline-block }
A.social_sm > SPAN { width: 32px; height: 32px; margin: 0 4px; display: inline-block; background: url('../img/social.png') no-repeat }
A.social_sm > SPAN.fb { background-position: -0 0 }
A.social_sm > SPAN.inst { background-position: -32px 0 }
A.social_sm:hover > SPAN.fb { background-position: 0 -32px }
A.social_sm:hover > SPAN.inst { background-position: -32px -32px }
@media (max-width: 768px) {
    FOOTER { text-align: center }
    FOOTER DIV.copyright { text-align: center }
    FOOTER DIV.dev { text-align: center }
}



/* Catalogue */
DIV.cat { clear: both; margin-left: -34px; margin-right: -34px; }
DIV.cat .item .img-wrap { position:relative }
DIV.cat .item { margin-bottom: 40px; padding-left: 34px; padding-right: 34px; cursor: pointer }
DIV.cat .item IMG { max-width: 100%; min-width: 100%; height: auto; border: 1px solid #d8b96b }
DIV.cat > DIV.item > DIV.img-wrap { position: relative; text-align: center }


/* Catalogue 2 */
DIV.cat2 { clear: both; margin-left: -8px; margin-right: -8px; }
DIV.cat2 .item .img-wrap { position:relative }
DIV.cat2 .item { margin-bottom: 50px; padding-left: 8px; padding-right: 8px; cursor: pointer }
DIV.cat2 .item P { margin-bottom: 0px }
DIV.cat2 .item IMG { max-width: 100%; min-width: 100%; height: auto; border: 1px solid #d8b96b }

DIV.cat2 > DIV.item > DIV.img-wrap { position: relative; text-align: center }
DIV.cat2 > DIV.item DIV.info-wrap > DIV.info { width:100%; height:100%; background-color:rgba(0,0,0,0.5) } 
DIV.cat2 > DIV.item DIV.info-wrap > DIV.info > DIV { text-align: center }

DIV.cat2 > DIV.item DIV.info-wrap { display: block; position: absolute; bottom: 0; left: 0; margin: 0; padding: 10px; width: 100%; height: auto; max-height: 100px; transition: max-height 0.5s ease; -webkit-transition: max-height 0.5s ease; -moz-transition: max-height 0.5s ease; -o-transition: max-height 0.5s ease; }
DIV.cat2 > DIV.item:hover DIV.info-wrap { display: block; height: 100%; max-height: 500px; transition: max-height 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: max-height 0.5s ease; -o-transition: max-height 0.5s ease; }
DIV.cat2 > DIV.item DIV.info-wrap SPAN.name { width: 100%; margin: 3% 0; text-align: center; color: #d8b96b; font-weight: bold; font-size: 18px; text-decoration: none; display: inline-block; clear: both; text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.75); }
DIV.cat2 > DIV.item DIV.info-wrap SPAN.name > A { color: #d8b96b; font-weight: bold; font-size: 18px; text-decoration: none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.75); }
DIV.cat2 > DIV.item:hover DIV.info-wrap SPAN.name > A { color: #fff; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; }






/* добавьте класс equal к классу row главного блока и колонки будут равными по высоте */
.row-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
}

.v-center { display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:center; -webkit-box-align:center; display:-moz-box; -moz-box-orient:vertical; -moz-box-pack:center; -moz-box-align:center; display:-ms-flexbox; -ms-box-orient:vertical; -ms-flex-pack:center; -ms-flex-align:center; display:box; box-orient:vertical; box-pack:center; box-align:center }


/* Bootstrap */
@media (min-width: 1600px) {
  .container {
    width: 1330px;
  }
}