html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: .67em 0
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,
th {
padding: 0
}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none
}
button,
button:hover,
button:focus,
button:active {
text-decoration: none;
outline: none
}
:focus {
outline: none
}
input,
input:hover,
input:focus,
input:active {
text-decoration: none;
outline: none
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit
}
textarea,
textarea:hover,
textarea:focus,
textarea:active {
text-decoration: none;
outline: none
}
figure {
line-height: 0
}
@font-face {
font-family: "OpenSansRegular";
src: url(fonts/OpenSansRegular/OpenSansRegular.eot);
src: url("fonts/OpenSansRegular/OpenSansRegular.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansRegular/OpenSansRegular.woff) format("woff"), url(fonts/OpenSansRegular/OpenSansRegular.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansLight";
src: url(fonts/OpenSansLight/OpenSansLight.eot);
src: url("fonts/OpenSansLight/OpenSansLight.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansLight/OpenSansLight.woff) format("woff"), url(fonts/OpenSansLight/OpenSansLight.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansItalic";
src: url(fonts/OpenSansItalic/OpenSansItalic.eot);
src: url("fonts/OpenSansItalic/OpenSansItalic.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansItalic/OpenSansItalic.woff) format("woff"), url(fonts/OpenSansItalic/OpenSansItalic.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansBold";
src: url(fonts/OpenSansBold/OpenSansBold.eot);
src: url("fonts/OpenSansBold/OpenSansBold.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansBold/OpenSansBold.woff) format("woff"), url(fonts/OpenSansBold/OpenSansBold.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansExtraBold";
src: url(fonts/OpenSansExtraBold/OpenSansExtraBold.eot);
src: url("fonts/OpenSansExtraBold/OpenSansExtraBold.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansExtraBold/OpenSansExtraBold.woff) format("woff"), url(fonts/OpenSansExtraBold/OpenSansExtraBold.ttf) format("truetype");
font-style: normal;
font-weight: 800
}
@font-face {
font-family: "OpenSansExtraBoldItalic";
src: url(fonts/OpenSansExtraBoldItalic/OpenSansExtraBoldItalic.eot);
src: url("fonts/OpenSansExtraBoldItalic/OpenSansExtraBoldItalic.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansExtraBoldItalic/OpenSansExtraBoldItalic.woff) format("woff"), url(fonts/OpenSansExtraBoldItalic/OpenSansExtraBoldItalic.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansBoldItalic";
src: url(fonts/OpenSansBoldItalic/OpenSansBoldItalic.eot);
src: url("fonts/OpenSansBoldItalic/OpenSansBoldItalic.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansBoldItalic/OpenSansBoldItalic.woff) format("woff"), url(fonts/OpenSansBoldItalic/OpenSansBoldItalic.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansRegularItalic";
src: url(fonts/OpenSansRegularItalic/OpenSansRegularItalic.eot);
src: url("fonts/OpenSansRegularItalic/OpenSansRegularItalic.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansRegularItalic/OpenSansRegularItalic.woff) format("woff"), url(fonts/OpenSansRegularItalic/OpenSansRegularItalic.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "OpenSansSemiBold";
src: url(fonts/OpenSansSemiBold/OpenSansSemiBold.eot);
src: url("fonts/OpenSansSemiBold/OpenSansSemiBold.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansSemiBold/OpenSansSemiBold.woff) format("woff"), url(fonts/OpenSansSemiBold/OpenSansSemiBold.ttf) format("truetype");
font-style: normal;
font-weight: 500
}
@font-face {
font-family: "OpenSansSemiBoldItalic";
src: url(fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.eot);
src: url("fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.eot?#iefix") format("embedded-opentype"), url(fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.woff) format("woff"), url(fonts/OpenSansSemiBoldItalic/OpenSansSemiBoldItalic.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
@font-face {
font-family: "Bodoni";
src: url(fonts/Bodoni/Bodoni.eot);
src: url("fonts/Bodoni/Bodoni.eot?#iefix") format("embedded-opentype"), url(fonts/Bodoni/Bodoni.woff) format("woff"), url(fonts/Bodoni/Bodoni.ttf) format("truetype");
font-style: normal;
font-weight: 400
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input,
textarea {
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
line-height: 1.5em;
font-family: "OpenSansRegular", Verdana, Helvetica, sans-serif;
box-sizing: border-box;
color: #000;
}
p {
font-size: 17px;
font-family: "OpenSansRegular";
}
.wrapper {
max-width: 1600px;
margin: 0 auto;
font-size: 0;
position: relative;
width: 87%
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Bodoni", Georgia, Charcoal CY, serif
}
html,
body {
width: 100%;
overflow-x: hidden
}
body {
overflow-x: hidden
}
.page-header {
position: fixed;
z-index: 20;
width: 100%;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
top: 0;
left: 0
}
.page-header .wrapper {
text-align: center
}
.page-header .wrapper > div {
display: inline-block;
vertical-align: middle
}
.page-header .search-block {
float: left
}
.page-header .navigation {
position: absolute;
right: 0
}
.menu {
width: 100%;
min-height: 100vh;
position: absolute;
right: 0;
top: 0;
background: #3e3c3b;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.2s all ease-in;
transition: 0.2s all ease-in;
z-index: 10
}
.menu.open {
opacity: 1;
visibility: visible
}
.menu .wrapper {
padding: 90px 70px
}
.menu a,
.menu span,
.menu p {
text-transform: uppercase;
color: #fff;
padding: 10px 0
}
.menu .close {
position: absolute;
right: 70px;
top: 0
}
.menu .close > * {
display: inline-block;
vertical-align: middle;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.menu .close svg {
stroke: #fff;
fill: #fff
}
.menu .close:hover span {
color: #e27b5b
}
.menu .close:hover svg {
stroke: #e27b5b;
fill: #e27b5b
}
.menu h3 {
color: #e27b5b;
text-align: left;
border-bottom: 1px solid #5c5b59;
padding: 0 0 6px 0;
margin-bottom: 32px
}
.menu ul {
list-style: none
}
.menu-left-block {
display: inline-block;
width: 250px;
vertical-align: top;
margin-right: 60px
}
.menu-left-block a {
padding: 10px 0;
display: block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
font-weight: bold;
}
.menu-left-block a:hover {
background: #e27b5b
}
.menu-right-block {
display: inline-block;
width: calc(100% - 310px);
vertical-align: top
}
.menu-right-block > p {
margin-bottom: 10px
}
.menu-block {
position: relative;
min-height: 140px;
border-bottom: 1px solid #5c5b59;
padding: 10px 0
}
.menu-block li {
text-align: right
}
.menu-block a {
display: block;
text-align: right;
z-index: 3;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
font-size: 16px;
font-weight: bold;
}
.menu-block a:hover {
background: #e27b5b
}
.menu-block > a {
position: absolute;
left: 0;
top: 10px;
font-family: "OpenSansBold";
text-align: left;
width: 50%;
z-index: 1
}
.menu-block > a:hover {
z-index: 2
}
.navigation {
cursor: pointer
}
.navigation > span {
color: #fff;
display: inline-block;
vertical-align: top;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-top: 11px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.navigation:hover > span,
.navigation.open > span {
color: #e27b5b
}
.navigation:hover .nav-toggle span,
.navigation.open .nav-toggle span {
background-color: #e27b5b
}
.navigation:hover .nav-toggle span:before,
.navigation:hover .nav-toggle span:after,
.navigation.open .nav-toggle span:before,
.navigation.open .nav-toggle span:after {
background-color: #e27b5b
}
.navigation:hover .nav-toggle span:before,
.navigation.open .nav-toggle span:before {
bottom: -11px
}
.navigation:hover .nav-toggle span:after,
.navigation.open .nav-toggle span:after {
bottom: -17px
}
.nav-toggle {
display: inline-block;
z-index: 1;
left: 0;
top: 0;
height: 42px;
width: 42px;
background: transparent;
position: relative;
padding: 13px 10px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
cursor: pointer
}
.nav-toggle span {
width: 25px;
height: 5px;
background-color: white;
display: block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.nav-toggle span:before,
.nav-toggle span:after {
position: relative;
display: block;
width: 25px;
height: 5px;
background-color: #fff;
content: "";
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.nav-toggle span:before {
bottom: -8px
}
.nav-toggle span:after {
bottom: -11px
}
.page-header.on-scroll {
background: #dfd8d2
}
.page-header.on-scroll .navigation > span {
color: #000
}
.page-header.on-scroll .navigation .nav-toggle span {
background: #000
}
.page-header.on-scroll .navigation .nav-toggle span:before,
.page-header.on-scroll .navigation .nav-toggle span:after {
background: #000
}
.page-header.on-scroll .logo img {
width: 60px
}
aside {
position: fixed;
right: 50px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 12
}
aside a {
height: 19px;
width: 16px;
display: block;
font-size: 0;
position: relative
}
aside a:after {
content: '';
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0;
display: block;
background: #fff
}
aside a.cur {
color: #e27b5b;
font-size: inherit
}
aside a.cur:after {
display: none
}
aside a.cur:before {
content: '';
width: 100%;
height: 1px;
position: absolute;
top: 50%;
right: -24px;
display: block;
background: #fff
}
aside .svg {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -22px;
bottom: -40px
}
aside svg {
fill: #e27b5b;
stroke: #e27b5b
}
aside .aside-text {
position: absolute;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
left: -43px;
top: -64px;
display: inline-block;
color: #fff;
width: 100px
}
aside ul {
list-style: none
}
.main-screen.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0
}
.logo {
width: 100%
}
.logo img {
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
@media (max-width: 1260px) {
aside {
display: none
}
}
@media (min-width: 0) and (max-width: 1299px) {
.wrapper {
width: 87%
}
.menu .wrapper {
padding: 50px
}
.menu .close {
position: absolute;
right: 50px;
top: 0
}
.menu-block p {
width: 30%
}
.menu-block a {
width: 50%;
display: inline-block
}
}
@media (max-width: 767px) {
.wrapper {
width: 90%
}
.menu .wrapper {
padding: 15px;
width: 90%;
margin: 0 auto;
position: relative
}
.menu h3 {
font-size: 28px;
margin-bottom: 5px
}
.menu .close {
right: 10px;
top: 10px;
padding: 0
}
.menu .close span {
display: none
}
.menu .close svg {
width: 15px;
height: 15px
}
.menu p {
width: 20%
}
.menu a,
.menu p {
font-size: 11px
}
.menu-left-block,
.menu-right-block {
display: block;
width: 100%;
margin-right: 0
}
.menu-block p {
width: 50%
}
aside {
display: none
}
}
footer {
background: #31302e
}
footer ul {
list-style: none
}
footer p,
footer li,
footer label,
footer a {
color: #fff
}
footer li {
margin-bottom: 15px
}
footer form {
font-size: 0
}
footer label {
display: block;
margin-bottom: 25px;
text-transform: uppercase
}
footer label span {
display: inline-block;
color: #fff;
text-transform: uppercase;
vertical-align: top
}
footer textarea {
display: inline-block;
vertical-align: top;
background: transparent;
margin-left: 3px;
border-bottom: 1px solid #494949;
width: 60%;
color: #fff;
padding: 0 0 0 20px;
text-transform: uppercase;
resize: none;
height: 22px
}
footer .label-50 {
display: inline-block;
width: 50%
}
footer input:not([type="submit"]) {
background: transparent;
margin-left: 3px;
border-bottom: 1px solid #494949;
width: 60%;
color: #fff;
padding: 0 0 0 20px;
text-transform: uppercase
}
footer input[type="submit"] {
background: #3e3c3b
}
footer input[type="submit"]:hover {
background: #e27b5b
}
footer .width-50:nth-of-type(1) {
padding: 93px 70px 0 25px;
width: 49%
}
footer .width-50:nth-of-type(1) p {
text-align: right;
border-bottom: 1px solid #494949;
text-transform: uppercase;
margin-bottom: 10px
}
footer .width-50:nth-of-type(1) svg {
fill: #fff;
stroke: #fff;
vertical-align: middle;
margin-right: 20px
}
footer .width-50:nth-of-type(1) span {
color: #fff
}
footer .width-50:nth-of-type(2) {
text-align: right;
padding: 50px 0 0 25px
}
footer .width-50:nth-of-type(2) form {
text-align: right
}
footer .width-50:nth-of-type(2) h5 {
text-align: right;
width: 50%;
display: inline-block;
margin: 0 0 26px 0
}
footer .button-block {
text-align: right
}
footer .social-block {
text-align: right;
padding: 20px 0 52px 0
}
footer .social-block a {
display: inline-block;
vertical-align: top;
width: 25px;
height: 25px;
margin-left: 20px
}
footer .contact-text {
text-align: right;
padding: 0
}
footer .contact-text p {
text-transform: uppercase;
font-size: 12px;
color: #fff
}
footer .contact-text p:nth-of-type(1):after {
display: none
}
footer .scrollto {
-webkit-transform: rotate(-90deg) translate(-114px, 50%);
-ms-transform: rotate(-90deg) translate(-114px, 50%);
transform: rotate(-90deg) translate(-114px, 50%);
display: inline-block;
left: 50%;
position: absolute;
z-index: 1;
text-transform: uppercase;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
float: left;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
color: #fff
}
footer .scrollto svg {
fill: #fff;
stroke: #fff
}
footer .scrollto svg {
vertical-align: middle;
width: 60px;
height: 12px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
margin-left: 10px
}
footer .scrollto:hover {
color: #e27b5b
}
footer .scrollto:hover svg {
fill: #e27b5b;
stroke: #e27b5b
}
.social-block svg {
fill: #fff;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.social-block svg:hover {
fill: #e27b5b
}
@media (min-width: 0) and (max-width: 1299px) {
footer ul {
padding: 12px 0 0 43px
}
footer li {
padding: 9px 0;
margin-bottom: 9px
}
footer li svg {
width: 25px;
height: 25px
}
footer li span {
font-size: 16px
}
footer .width-50:nth-of-type(1) {
padding: 190px 70px 0 25px;
width: 100%
}
footer .width-50:nth-of-type(1) p {
font-size: 18px
}
footer .width-50:nth-of-type(2) {
padding: 43px 70px 0 25px;
width: 100%
}
footer .width-50:nth-of-type(2) h5 {
width: 100%;
font-size: 34px
}
footer .width-50:nth-of-type(2) label {
font-size: 16px;
margin: 21px 0 53px 0
}
footer .width-50:nth-of-type(2) label span {
font-size: 16px
}
footer .social-block {
padding: 80px 0 52px 0
}
footer .social-block a,
footer .social-block svg {
width: 30px;
height: 30px
}
}
@media (max-width: 767px) {
footer ul {
padding: 0
}
footer li {
margin-bottom: 0;
padding: 6px 0
}
footer li svg {
width: 22px;
height: 22px;
float: left
}
footer li span {
font-size: 12px
}
footer .width-50:nth-of-type(1) {
padding: 150px 0 50px 0
}
footer .width-50:nth-of-type(1) p {
font-size: 12px;
margin-bottom: 0
}
footer .width-50:nth-of-type(2) {
padding: 0 0 0 0
}
footer .width-50:nth-of-type(2) h5 {
font-size: 22px;
margin: 0 0 22px 0
}
footer .width-50:nth-of-type(2) label {
font-size: 10px;
margin: 0 0 12px 0
}
footer .width-50:nth-of-type(2) label span {
font-size: 10px
}
footer .width-50:nth-of-type(2) .label-50 {
width: 100%
}
footer .width-50:nth-of-type(2) textarea {
width: 70%
}
footer input:not([type="submit"]) {
width: 70%
}
footer .social-block {
padding: 30px 0
}
footer .social-block a,
footer .social-block svg {
width: 15px;
height: 15px
}
}
.button1 {
border: 1px solid #31302e;
color: #fff;
font-size: 14px;
padding: 12px 30px;
background: #31302e;
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
text-transform: uppercase
}
.button1:hover {
color: #fff;
border: 1px solid #e27b5b;
background: #e27b5b
}
.button1:active {
color: #fff;
border: 1px solid #e27b5b;
background: #e27b5b
}
.button2 {
border: 1px solid #e27b5b;
color: #fff;
font-size: 14px;
padding: 12px 30px;
background: #e27b5b;
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
text-transform: uppercase
}
.button2:hover {
color: #fff;
border: 1px solid #31302e;
background: #31302e
}
.button2:hover {
color: #fff;
border: 1px solid #31302e;
background: #31302e
}
.button3 {
border: 1px solid #dfd8d2;
color: #000;
font-size: 15px;
padding: 12px 30px;
background: #dfd8d2;
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
text-transform: uppercase;
font-family: "OpenSansBold";
}
.button3:hover {
color: #fff;
border: 1px solid #31302e;
background: #31302e
}
.button3:hover {
color: #fff;
border: 1px solid #31302e;
background: #31302e
}
.product-slider button.slick-prev.slick-arrow {
position: absolute;
left: -30px;
top: 20%;
z-index: 1;
border: 0;
background: transparent;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.product-slider button.slick-prev.slick-arrow svg {
fill: #e27b5b;
stroke: #e27b5b
}
.product-slider button.slick-prev.slick-arrow:hover {
left: -50px
}
.product-slider button.slick-prev.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.product-slider button.slick-next.slick-arrow {
position: absolute;
right: -30px;
top: 20%;
z-index: 1;
border: 0;
background: transparent;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.product-slider button.slick-next.slick-arrow svg {
fill: #e27b5b;
stroke: #e27b5b
}
.product-slider button.slick-next.slick-arrow:hover {
right: -50px
}
.product-slider button.slick-next.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.img-slider button.slick-prev.slick-arrow {
position: absolute;
left: -30px;
top: 50%;
z-index: 1;
border: 0;
background: transparent;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.img-slider button.slick-prev.slick-arrow svg {
fill: #e27b5b;
stroke: #e27b5b
}
.img-slider button.slick-prev.slick-arrow:hover {
left: -50px
}
.img-slider button.slick-prev.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.img-slider button.slick-next.slick-arrow {
position: absolute;
right: -30px;
top: 50%;
z-index: 1;
border: 0;
background: transparent;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.img-slider button.slick-next.slick-arrow svg {
fill: #e27b5b;
stroke: #e27b5b
}
.img-slider button.slick-next.slick-arrow:hover {
right: -50px
}
.img-slider button.slick-next.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.history-slider button.slick-prev.slick-arrow {
position: absolute;
left: 260px;
top: 15px;
z-index: 1;
border: 0;
background: transparent;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.history-slider button.slick-prev.slick-arrow svg {
fill: #e27b5b;
stroke: #e27b5b;
width: 60px
}
.history-slider button.slick-prev.slick-arrow:hover {
left: 240px
}
.history-slider button.slick-prev.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.history-slider button.slick-next.slick-arrow {
position: absolute;
right: 260px;
top: 15px;
z-index: 1;
border: 0;
background: transparent;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.history-slider button.slick-next.slick-arrow svg {
fill: #e27b5b;
stroke: #e27b5b;
width: 60px
}
.history-slider button.slick-next.slick-arrow:hover {
right: 240px
}
.history-slider button.slick-next.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.slider-clients button.slick-prev.slick-arrow {
position: absolute;
left: 10%;
top: 2px;
z-index: 1;
border: 0;
background: transparent;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.slider-clients button.slick-prev.slick-arrow svg {
fill: #fff;
stroke: #fff;
width: 60px
}
.slider-clients button.slick-prev.slick-arrow:hover {
left: 10%
}
.slider-clients button.slick-prev.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
.slider-clients button.slick-next.slick-arrow {
position: absolute;
right: 10%;
top: 2px;
z-index: 1;
border: 0;
background: transparent;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.slider-clients button.slick-next.slick-arrow svg {
fill: #fff;
stroke: #fff;
width: 60px
}
.slider-clients button.slick-next.slick-arrow:hover {
right: 10%
}
.slider-clients button.slick-next.slick-arrow:hover svg {
fill: #000;
stroke: #000
}
@media (max-width: 1027px) {
.button1 {
font-size: 12px;
padding: 14px 18px
}
.button2 {
font-size: 12px;
padding: 14px 18px
}
.button3 {
font-size: 12px;
padding: 14px 18px
}
.img-slider button.slick-prev.slick-arrow {
left: 0
}
.img-slider button.slick-next.slick-arrow {
right: 0
}
.history-slider button.slick-prev.slick-arrow {
left: 100px
}
.history-slider button.slick-prev.slick-arrow:hover {
left: 80px
}
.history-slider button.slick-next.slick-arrow {
right: 100px
}
.history-slider button.slick-next.slick-arrow:hover {
right: 80px
}
.slider-clients button.slick-prev.slick-arrow {
left: 10%
}
.slider-clients button.slick-prev.slick-arrow:hover {
left: 8%
}
.slider-clients button.slick-next.slick-arrow {
right: 10%
}
.slider-clients button.slick-next.slick-arrow:hover {
right: 8%
}
}
@media (max-width: 767px) {
.product-slider button.slick-prev.slick-arrow,
.product-slider button.slick-next.slick-arrow,
.img-slider button.slick-prev.slick-arrow,
.img-slider button.slick-next.slick-arrow {
display: none !important
}
.history-slider button.slick-prev.slick-arrow {
left: 0
}
.history-slider button.slick-prev.slick-arrow:hover {
left: 0
}
.history-slider button.slick-prev.slick-arrow:hover svg {
fill: #e27b5b;
stroke: #e27b5b
}
.history-slider button.slick-next.slick-arrow {
right: 0
}
.history-slider button.slick-next.slick-arrow:hover {
right: 0
}
.history-slider button.slick-next.slick-arrow:hover svg {
fill: #e27b5b;
stroke: #e27b5b
}
.slider-clients button.slick-prev.slick-arrow {
left: 10%
}
.slider-clients button.slick-prev.slick-arrow:hover {
left: 10%
}
.slider-clients button.slick-prev.slick-arrow:hover svg {
fill: #fff;
stroke: #fff
}
.slider-clients button.slick-next.slick-arrow {
right: 10%
}
.slider-clients button.slick-next.slick-arrow:hover {
right: 10%
}
.slider-clients button.slick-next.slick-arrow:hover svg {
fill: #fff;
stroke: #fff
}
}
.overlay {
position: fixed;
top: 0;
left: 0;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
z-index: 55
}
.overlay.active {
display: block
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0
}
.slick-list:focus {
outline: none
}
.slick-list.dragging {
cursor: pointer;
cursor: hand
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block
}
.slick-track:before,
.slick-track:after {
content: "";
display: table
}
.slick-track:after {
clear: both
}
.slick-loading .slick-track {
visibility: hidden
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none
}
[dir="rtl"] .slick-slide {
float: right
}
.slick-slide img {
display: block
}
.slick-slide.slick-loading img {
display: none
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-initialized .slick-slide {
display: block
}
.slick-loading .slick-slide {
visibility: hidden
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent
}
.slick-arrow.slick-hidden {
display: none
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(28, 28, 28, .55)
}
.light-back {
background: #dfd8d2
}
.dark-back {
background: #3e3c3b
}
.dark-back h2,
.sec-dark-back h2 {
color: #e27b5b
}
.grad-back h2 {
color: #e27b5b;
color: #e27b5b
}
h1 {
font-size: 72px;
line-height: 92px;
text-align: center;
color: #fff
}
h2 {
font-size: 54px;
margin: 0 0 60px 0;
text-align: center;
text-transform: uppercase
}
h3 {
font-size: 36px;
margin: 0;
text-align: center;
text-transform: uppercase
}
h4 {
font-size: 30px;
margin: 0;
text-align: center;
text-transform: uppercase;
color: #e27b5b
}
h5 {
font-size: 22px;
margin: 0;
text-align: center;
text-transform: uppercase;
color: #e27b5b
}
.main-screen {
position: relative
}
.main-screen .wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.main-screen p {
font-family: "OpenSansBold";
font-size: 18px;
color: #fff;
text-align: center;
line-height: 18px
}
.signature {
width: 180px;
height: 180px;
background: url(img/signat.svg) no-repeat 50% 50%;
background-size: cover
}
.about-company {
position: relative;
padding: 100px 0 0 0
}
.about-company .signature {
position: absolute;
right: 118px;
bottom: 23px
}
.about-company .button-block {
padding: 25px 0
}
.about-blocks {
font-size: 0
}
.about-blocks .width-50:first-child {
padding: 0 30px 20px 73px
}
.about-blocks .width-50:first-child p {
font-size: 16px;
line-height: 25px;
font-family: "OpenSansRegular";
text-align: justify
}
.about-blocks .width-50:first-child p:first-child {
font-size: 21px;
text-transform: uppercase;
font-family: "OpenSansBold";
line-height: 27px;
margin: 0 0 18px 0
}
.about-blocks .width-50:first-child p:nth-child(2) {
font-family: "OpenSansBold";
margin-bottom: 33px;
text-align: left
}
.about-blocks .width-50:last-child {
padding: 0 70px 20px 37px
}
.about-blocks .width-50:last-child p {
font-size: 16px;
line-height: 25px;
font-family: "OpenSansRegular";
margin-bottom: 33px;
text-align: justify
}
.width-50 {
display: inline-block;
vertical-align: top;
width: 50%;
position: relative
}
.button-block {
text-align: center
}
.navigation-catalog {
position: relative;
height: 630px;
overflow: hidden
}
.navigation-catalog .category {
width: 25%
}
.navigation-catalog .category a {
text-transform: uppercase;
-webkit-transition: 0.3s color ease-in;
transition: 0.3s color ease-in;
font-size: 20px;
font-weight: bold;
}
.navigation-catalog .category a.active {
color: #e27b5b
}
.navigation-catalog .category-1 {
position: absolute;
left: 0;
top: 30%;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
opacity: 0;
visibility: hidden
}
.navigation-catalog .category-1:after {
content: '';
width: 6px;
height: 6px;
display: block;
border-radius: 6px;
right: -20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
background: #e27b5b;
opacity: 0;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
visibility: hidden;
position: absolute
}
.navigation-catalog .category-1:before {
content: '';
width: 0;
height: 1px;
display: block;
right: -240px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
background: #e27b5b;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.5s width ease-in;
transition: 0.5s width ease-in
}
.navigation-catalog .category-2 {
position: absolute;
right: 0;
top: 30%;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 0;
visibility: hidden
}
.navigation-catalog .category-2:after {
content: '';
width: 6px;
height: 6px;
display: block;
border-radius: 6px;
left: -20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
background: #e27b5b;
opacity: 0;
visibility: hidden;
position: absolute
}
.navigation-catalog .category-2:before {
content: '';
width: 0;
height: 1px;
display: block;
left: -240px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
background: #e27b5b;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in
}
.navigation-catalog .category-3 {
position: absolute;
left: 0;
top: 60%;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
opacity: 0;
visibility: hidden;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s
}
.navigation-catalog .category-3:after {
content: '';
width: 6px;
height: 6px;
display: block;
border-radius: 6px;
right: -20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
background: #e27b5b;
opacity: 0;
visibility: hidden;
position: absolute
}
.navigation-catalog .category-3:before {
content: '';
width: 0;
height: 1px;
display: block;
right: -240px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
background: #e27b5b;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in
}
.navigation-catalog .category-4 {
position: absolute;
right: 0;
top: 60%;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
opacity: 0;
visibility: hidden;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s
}
.navigation-catalog .category-4:after {
content: '';
width: 6px;
height: 6px;
display: block;
border-radius: 6px;
left: -20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in;
background: #e27b5b;
opacity: 0;
visibility: hidden;
position: absolute
}
.navigation-catalog .category-4:before {
content: '';
width: 0;
height: 1px;
display: block;
left: -240px;
top: 50%;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
background: #e27b5b;
position: absolute;
-webkit-transition: 0.5s all ease-in;
transition: 0.5s all ease-in
}
.navigation-catalog.visible .category-1 {
left: 90px;
opacity: 1;
visibility: visible;
text-align: right
}
.navigation-catalog.visible .category-1:after {
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-1:before {
width: 200px;
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-2 {
right: 90px;
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-2:after {
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-2:before {
width: 200px;
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-3 {
left: 90px;
opacity: 1;
visibility: visible;
text-align: right
}
.navigation-catalog.visible .category-3:after {
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-3:before {
width: 200px;
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-4 {
right: 90px;
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-4:after {
opacity: 1;
visibility: visible
}
.navigation-catalog.visible .category-4:before {
width: 200px;
opacity: 1;
visibility: visible
}
#catalog-img {
width: 333px;
height: 333px;
border: 33px solid #fff;
background-image: url(img/catalog-img.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
position: absolute;
left: 50%;
top: 44%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
-webkit-transition: 0.3s background-image ease-in;
transition: 0.3s background-image ease-in;
background-color: #dfd8d2
}
#catalog-img a {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
visibility: hidden;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
z-index: -1;
background: transparent
}
#catalog-img a.active {
visibility: visible;
z-index: 1;
background: #e27b5b
}
#catalog-img a.active:hover {
background: #31302e
}
.product-slider-block .width-50 {
vertical-align: middle
}
.product-slider-block .wrapper .width-50:first-child {
padding: 0 80px
}
.product-slider-block .wrapper .signature {
position: relative;
margin: 0 auto
}
.slide-number {
position: absolute;
top: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1
}
.slide-number span {
padding: 30px 10px 0;
display: inline-block
}
.slide-number span:first-child {
border-right: .5px solid #000
}
.number {
position: absolute;
right: -35px;
top: 60%;
z-index: 1
}
.number span {
font-size: 65px;
color: #000;
font-family: "Bodoni"
}
#products,
#history,
#blog,
footer {
z-index: 4;
position: relative
}
#history {
text-align: center
}
#history p,
#history span {
color: #fff;
line-height: 1.4
}
.product-slider .product {
background: url(img/slide1.jpg) no-repeat 50% 50%;
background-size: cover;
padding: 120px 36px 104px 36px;
position: relative;
min-height: 550px
}
.product-slider .product h4 {
margin-bottom: 30px
}
.product-slider p {
font-family: "OpenSansBold";
line-height: 20px;
margin: 32px 0;
position: relative;
text-align: center;
text-transform: uppercase
}
.product-slider p:nth-of-type(1):after {
width: 300px;
height: 1px;
background: #434141;
position: absolute;
top: -14px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
content: '';
display: block
}
.product-slider p:nth-of-type(1):before {
width: 300px;
height: 1px;
background: #434141;
position: absolute;
bottom: -14px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
content: '';
display: block
}
.history-block {
font-size: 0
}
.history-block > p {
margin-bottom: 32px;
font-family: "OpenSansRegular";
font-size: 25px;
}
.history-block h2 {
margin: 0 auto;
line-height: 63px;
margin-bottom: 12px
}
.history-block .width-33 {
position: relative;
border-top: 1px solid gray;
margin-top: 30px;
padding: 40px 54px;
min-width: 320px
}
.history-block .width-33 p,
.history-block .width-33 span {
text-transform: uppercase
}
.history-block .width-33 p:first-child {
font-family: "Bodoni";
font-size: 24px;
margin-bottom: 20px
}
.history-block .width-33 p:nth-child(2) {
font-family: "OpenSansBold";
font-size: 16px;
margin-bottom: 23px
}
.history-block .width-33 span {
font-size: 14px;
display: inline-block;
line-height: 16px;
font-family: "OpenSansRegular";
}
.history-block .width-33:after {
width: 30px;
height: 1px;
background: #fff;
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
content: '';
display: block
}
.history-block .button-block {
padding: 40px 0
}
.print {
background: url(img/stamp.svg) no-repeat 0 0;
background-size: cover;
width: 120px;
height: 120px;
position: absolute;
right: 3%;
top: 30%;
}
.width-33 {
vertical-align: top;
display: inline-block;
width: 33.33%
}
.dark-back,
.sec-dark-back {
padding: 100px 0 0
}
.video-block {
margin-top: 66px;
text-align: center
}
.video-block video {
width: 100%
}
#blog {
padding: 100px 0 66px 0
}
.blog-blocks {
position: relative;
margin-top: 1px
}
.blog-blocks span.arrow {
top: 50%;
left: 20%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: 0.3s opacity ease-in;
transition: 0.3s opacity ease-in;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0;
min-width: 84px;
width: 10%
}
.blog-blocks svg {
min-width: 84px;
width: 100%;
stroke: #fff;
fill: #fff
}
.blog-blocks .post {
font-size: 0
}
.blog-blocks .post > * {
display: inline-block
}
.blog-blocks .post .post-date {
min-width: 84px;
text-align: center;
vertical-align: middle;
width: 10%
}
.blog-blocks .post .post-date * {
color: #000;
text-transform: uppercase
}
.blog-blocks .post .post-date p {
font-size: 42px;
font-family: "Bodoni"
}
.blog-blocks .post .post-img {
min-width: 426px;
font-size: 0;
vertical-align: middle;
width: 40%
}
.blog-blocks .post .post-img img {
width: 100%;
-webkit-filter: grayscale(100%)
}
.blog-blocks .post .post-text {
padding: 25px 76px 0 38px;
vertical-align: top
}
.blog-blocks .post .post-text * {
color: #000
}
.blog-blocks .post .post-text a {
font-size: 22px;
line-height: 26px;
font-family: "Bodoni";
margin: 0 0 14px 0;
text-transform: uppercase;
text-align: right;
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
width: 100%
}
.blog-blocks .post .post-text a:hover,
.blog-blocks .post .post-text a:active {
color: #e27b5b
}
.blog-blocks .post .post-text span {
font-size: 16px;
line-height: 21px;
font-family: "OpenSansRegular";
margin: 0;
text-align: right;
display: inline-block
}
.blog-blocks > a {
display: block;
width: 0%;
height: 100%;
background: rgba(0, 0, 0, .2);
z-index: 2;
position: absolute;
left: 0;
top: 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.blog-blocks + .button-block {
padding: 56px 0 23px
}
.bv-video-wrap {
width: 100%;
height: 100%;
position: relative
}
.bv-video-wrap--ready {
display: block
}
.bv-video-wrap::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
z-index: 10
}
.bv-video {
width: 100%
}
.bv-video.show video {
z-index: 2
}
.bv-video video {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -5
}
@media (min-width: 1600px) {
.blog-blocks:hover {
}
.blog-blocks:hover a {
width: 100%
}
.blog-blocks:hover span.arrow {
opacity: 1
}
}
@media (max-width: 1025px) {
.bv-video,
.bv-video-wrap--ready {
display: none
}
}
@media (min-width: 0) and (max-width: 1299px) {
.video-main-page {
background: url(video/main_video.jpg) no-repeat 50% 50%;
background-size: cover
}
.video-main-page video {
display: none
}
h1 {
font-size: 57px;
line-height: 76px;
margin-bottom: 38px
}
h2 {
font-size: 48px;
margin: 0 0 35px 0
}
h3 {
font-size: 36px;
margin: 0
}
h4 {
font-size: 30px;
margin: 0
}
h5 {
font-size: 22px;
margin: 0
}
.about-company {
padding: 26px 0 0 0
}
.about-company .button-block {
padding: 0
}
.about-blocks {
font-size: 0
}
.about-blocks .width-50:first-child {
padding: 0 30px 0 34px
}
.about-blocks .width-50:first-child p {
font-size: 14px
}
.about-blocks .width-50:first-child p:first-child {
font-size: 18px
}
.about-blocks .width-50:last-child {
padding: 0 31px 20px 23px
}
.about-blocks .width-50:last-child p {
font-size: 14px
}
#catalog-img {
width: 220px;
height: 220px;
border: 25px solid #fff;
top: 53%
}
.category a {
font-size: 12px
}
.navigation-catalog .category-1 {
top: 41%;
width: 20%
}
.navigation-catalog .category-2 {
top: 40%;
width: 20%
}
.navigation-catalog .category-3 {
top: 61%;
width: 20%
}
.navigation-catalog .category-4 {
top: 60%;
width: 20%
}
.navigation-catalog.visible .category-1 {
left: 10px
}
.navigation-catalog.visible .category-2 {
right: 10px
}
.navigation-catalog.visible .category-3 {
left: 10px
}
.navigation-catalog.visible .category-4 {
right: 10px
}
.product-slider-block {
text-align: center
}
.product-slider-block .width-50 {
min-width: 518px
}
.history-block h2 {
line-height: 60px;
margin-bottom: 27px
}
.history-block h4 {
padding: 0 0 48px 0;
border-bottom: 1px solid gray;
margin-bottom: 20px
}
.history-block .width-33 {
border-top: 0;
margin-top: 0;
padding: 36px 54px;
min-width: 410px
}
.history-block .width-33:after {
bottom: 27px
}
.history-block .width-33 p {
line-height: 17px
}
.dark-back,
.sec-dark-back {
padding: 70px 0 0
}
.video-block {
display: none
}
.print {
width: 100px;
height: 100px;
top: 250px
}
}
@media (max-width: 1299px) {
.blog-blocks {
position: relative
}
.blog-blocks .post .post-date {
display: none
}
.blog-blocks .post .post-img {
width: 100%;
min-width: inherit
}
.blog-blocks .post .post-img img {
width: 100%
}
.blog-blocks .post .post-text {
width: 100%;
padding: 20px 23px 20px 28px
}
.blog-blocks .post .post-text a {
font-size: 18px;
line-height: 16px
}
.blog-blocks > a {
display: none
}
.blog-blocks + .button-block {
padding: 69px 0 53px
}
.about-company .button-block {
padding: 20px 0
}
}
@media (max-width: 767px) {
h1 {
font-size: 28px;
line-height: 28px;
margin-bottom: 38px
}
h2 {
font-size: 28px;
margin: 0 0 50px 0
}
h3 {
font-size: 22px;
margin: 0
}
h4 {
font-size: 30px;
margin: 0
}
h5 {
font-size: 22px;
margin: 0
}
.about-company {
padding: 17px 0 20px 0
}
.about-company .button-block {
padding: 0
}
.about-company .signature {
position: relative;
bottom: 0;
right: 0;
margin: 0 auto
}
.about-blocks .width-50:first-child {
width: 100%;
padding: 0 20px 20px
}
.about-blocks .width-50:first-child p {
font-size: 14px
}
.about-blocks .width-50:first-child p:first-child {
text-align: center
}
.about-blocks .width-50:last-child {
width: 100%;
padding: 0 15px 20px 15px
}
.about-blocks .width-50:last-child p {
font-size: 14px
}
#catalog-img {
display: none
}
.navigation-catalog {
position: relative;
height: 274px;
margin: 1px 0
}
.navigation-catalog .category-1 {
top: 10%;
width: 40%
}
.navigation-catalog .category-2 {
top: 60%;
width: 40%
}
.navigation-catalog .category-3 {
top: 33%;
width: 40%
}
.navigation-catalog .category-4 {
top: 80%;
width: 40%
}
.navigation-catalog.visible .category-1 {
left: 45%
}
.navigation-catalog.visible .category-2 {
right: 45%
}
.navigation-catalog.visible .category-3 {
left: 45%
}
.navigation-catalog.visible .category-4 {
right: 45%
}
.product-slider-block {
padding: 0
}
.product-slider-block .width-50 {
min-width: 100%
}
.product-slider-block .wrapper .width-50:first-child {
padding: 93px 27px 51px
}
.product-slider-block p:nth-of-type(1):after {
width: 260px;
top: -10px
}
.product-slider-block p:nth-of-type(1):before {
width: 260px;
bottom: -10px
}
.product-slider-block .product {
padding: 108px 10px 56px 10px
}
.slide-number {
display: none
}
.number {
right: 50%;
top: 0;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.history-block h2 {
margin-bottom: 10px
}
.history-block > p {
margin-bottom: 11px
}
.history-block h4 {
padding: 0 0 19px 0;
margin-bottom: 0
}
.history-block .width-33 {
padding: 36px 16px 57px;
min-width: 100%
}
.history-block .width-33:after {
bottom: 30px
}
.history-block .width-33 p:nth-child(2) {
font-size: 12px;
margin-bottom: 25px
}
.history-block .width-33 p:first-child {
font-size: 18px
}
#blog {
padding: 50px 0 0 0
}
.print {
top: 100px
}
}
.sec-dark-back {
background: #31302e
}
.link-back {
border-top: 1px solid #5c5b59;
min-height: 40px
}
.breadcrumbs {
margin: 0 0 20px 0;
}
.breadcrumbs * {
font-size: 13px;
font-weight: bold;
letter-spacing: 2px
}
.breadcrumbs li {
display: inline-block;
padding: 0 40px 0 0;
text-transform: uppercase;
color: #fff
}
.breadcrumbs li a,
.breadcrumbs li span {
color: #fff
}
.breadcrumbs li:first-of-type a {
color: #e27b5b;
display: inline-block;
text-transform: uppercase;
position: relative
}
.breadcrumbs li:first-of-type a:after {
content: '';
width: 33px;
height: 1px;
background: #e27b5b;
position: absolute;
right: -37px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.page-title {
padding: 30px 0 30px 0;
text-align: center
}
.page-title p {
font-size: 14px;
text-transform: uppercase;
color: #e27b5b
}
.page-title h2 {
margin: 0
}
.page-title span {
display: none
}
.catalog-navigation {
border-bottom: 1px solid #595959;
font-size: 0;
padding: 0 30px
}
.catalog-navigation ul {
display: inline-block;
width: 62%
}
.catalog-navigation li {
margin: 0 30px 0 0;
display: inline-block;
padding: 27px 0
}
.catalog-navigation li a {
text-transform: uppercase;
font-size: 15px;
font-family: "OpenSansBold";
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.catalog-navigation li a:hover {
color: #e27b5b
}
.catalog-navigation:after {
content: '';
display: block;
clear: both
}
.select-block {
text-align: right;
float: right
}
.select2 {
margin: 24px 0 24px 0;
min-width: 250px
}
.select2-container--default .select2-selection--single {
background: #f3efec
}
.select2-container .select2-dropdown {
background: #f3efec
}
.select2-container .select2-search {
display: none
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #e27b5b;
color: #000
}
.select2-container--default .select2-selection--single {
border-radius: 0
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
text-align: left
}
.select2-dropdown {
border-radius: 0
}
.catalog-grid {
padding: 0 0 50px 0
}
.product-line {
font-size: 0;
padding: 52px 70px 30px 70px;
overflow: hidden
}
.product-line h4 {
font-size: 26px;
font-family: "OpenSansBold";
color: #000;
background: #dfd8d2;
padding: 4px 16px 4px 0;
z-index: 1;
position: relative;
display: inline-block
}
.product-line p {
color: #000;
text-align: justify
}
.product-line .width-50 {
padding: 70px 25px 0 40px
}
.product-line .width-50 .button-block {
text-align: left;
padding: 43px 0 0
}
.product-line .width-50:nth-child(2) {
padding: 60px 0 0;
text-align: right;
float: right
}
.product-line .width-50:nth-child(2) .print {
display: none
}
.product-line .width-50:nth-child(2) img {
width: 100%;
height: auto
}
.product-title {
position: relative
}
.product-title:after {
content: '';
width: 100%;
height: 1px;
background: #8c8888;
display: block;
position: absolute;
left: 0;
top: 67%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
@media (min-width: 0) and (max-width: 1299px) {
body.dark-back {
padding: 95px 0 0 0
}
.link-back {
min-height: auto
}
.breadcrumbs {
margin: 0 0 0 8%;
padding: 18px 0 40px 0
}
.page-title {
padding: 20px 0 20px 0
}
.catalog-navigation {
padding: 0 20px 16px;
border-bottom: 2px solid #000
}
.catalog-navigation ul {
float: none;
width: 100%;
text-align: center;
margin: 0
}
.catalog-navigation li {
margin: 0 20px 0 20px
}
.catalog-navigation li a {
font-size: 10px
}
.select-block {
width: 100% !important;
text-align: center;
padding: 0
}
.select-block .select2 {
margin: 24px 0 24px 0;
min-width: 100%;
width: 100% !important
}
.product-line {
padding: 68px 20px 30px 20px
}
.product-line p {
font-size: 12px
}
.product-line .width-50 {
padding: 57px 10% 0 32px
}
.product-line .width-50 .button-block {
padding: 20px 0 0
}
.product-line .width-50:last-child .print {
width: 100px;
right: 12%;
display: none
}
}
@media (max-width: 767px) {
body.dark-back {
padding: 80px 0 0 0
}
.breadcrumbs {
display: none
}
.page-title p {
font-size: 11px;
margin-bottom: 6px
}
.page-title span {
display: inline-block;
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 12px
}
.page-title h2 {
margin: 0 0 40px 0
}
.catalog-navigation li {
display: block;
margin: 10px 0 0 0;
padding: 10px 0
}
.catalog-navigation li a {
font-size: 15px
}
.select-block .select2 {
margin: 0
}
.product-line {
padding: 10px 20px 10px 20px
}
.product-line .width-50 {
width: 100%;
padding: 20px 10px
}
.product-line .width-50 .button-block {
text-align: center
}
}
.product-page {
background: url(img/main-back.jpg) no-repeat 0 0;
background-size: cover;
padding: 135px 0 0 0
}
.product-page .scrollto .arrow {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.product-page svg {
width: 7px
}
.product-page .print {
right: 0;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
top: 0
}
.product-page .page-title * {
color: #000
}
.product-page .page-title p {
font-family: "OpenSansBold";
font-size: 22px;
}
.product-page .page-title h1 {
font-family: "OpenSansBold";
font-size: 55px;
}
.product-page .product-info {
padding: 0 128px
}
.product-page .product-info p {
margin-bottom: 10px;
text-align: justify
}
.product-page .product-info p:first-child {
font-family: "OpenSansBold";
margin-bottom: 20px
}
.product-page .button-block {
text-align: right;
padding: 0 128px 25px
}
.product-page .button-block span {
font-size: 10px;
display: inline-block;
vertical-align: middle
}
.bv-video-2 {
width: 100%;
height: 750px;
overflow: hidden;
position: relative
}
.bv-video-2 .play-button {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
-webkit-transition: .3s;
transition: .3s
}
.bv-video-2 .play-button.hide {
z-index: -1
}
.bv-video-2 .play-button.hide img {
-webkit-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
opacity: 0;
visibility: hidden
}
.bv-video-2 .play-button:hover img {
width: 110px;
height: 110px
}
.bv-video-2 .play-button img {
width: 100px;
height: 100px;
-webkit-transition: .3s;
transition: .3s
}
.bv-video-2 video {
position: absolute;
width: 100%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.img-slider {
padding: 80px 0
}
.img-slider > div {
text-align: center
}
.img-slider img {
width: 60%;
height: auto;
display: inline-block
}
.product-description {
padding: 35px 0 175px;
font-size: 0
}
.product-description .product-title {
border-bottom: 1px solid #a3a3a3
}
.product-description .product-title:after {
display: none
}
.product-description h4 {
font-size: 41px;
color: #000;
text-align: left;
padding: 0 0 13px 43px
}
.product-description .width-50 {
padding: 52px 0 0 60px
}
.product-description dl {
font-size: 0
}
.product-description dt,
.product-description dd {
min-height: 21px;
display: inline-block;
vertical-align: middle;
width: 50%;
margin-bottom: 2px
}
.product-description dd {
font-family: "OpenSansBold"
}
.product-description p,
.product-description span {
font-size: 12px;
font-family: "OpenSansBold";
margin-bottom: 12px
}
.product-description ul {
list-style: none
}
.product-description li {
position: relative
}
.product-description li:before {
content: "-";
margin-right: 10px
}
.product-description a {
font-size: 11px;
font-family: "OpenSansLight";
padding: 5px 0;
text-transform: uppercase
}
.product-description a:hover {
color: #e27b5b;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
@media (max-width: 1025px) {
.bv-video-2 {
display: none
}
}
@media (max-width: 1299px) {
.product-page .breadcrumbs {
padding: 16px 0 0 0
}
.product-page .product-info {
padding: 0 50px
}
.product-page .print {
right: 7%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
top: -6%
}
.product-description h4 {
padding: 0 0 13px 0
}
.product-description .width-50 {
padding: 32px 0 0 20px;
width: 65%
}
.product-description .width-50:last-child {
width: 35%
}
}
@media (max-width: 767px) {
.img-slider {
padding: 40px 0
}
.img-slider img {
width: 95%
}
.page-title h2 {
margin: 0 0 5px 0;
line-height: 60px
}
.product-page .product-info {
padding: 0 13px
}
.product-page .button-block {
text-align: center;
padding: 0 20px 25px 0
}
.product-page .link-back {
display: none
}
.product-description {
padding: 35px 40px 35px
}
.product-description .product-title {
display: none
}
.product-description .width-50 {
width: 100%;
padding: 0
}
.product-description .width-50:last-child {
display: none
}
.product-description dt,
.product-description dd {
width: 100%;
text-align: center
}
.product-description dt {
padding: 11px 0 0 0
}
.product-description dd {
border-bottom: 1px solid #cbc6c2;
padding: 0 0 11px 0
}
}
.related-news {
position: relative;
font-size: 0;
padding: 108px 0 100px 0;
text-align: center
}
.related-news .post {
width: 27%;
display: inline-block;
vertical-align: top;
min-width: 230px;
margin: 0 3%;
position: relative
}
.related-news .post > div {
display: block
}
.related-news .post .post-date {
text-align: center
}
.related-news .post .post-date * {
color: #000
}
.related-news .post .post-date > * {
display: inline;
text-transform: uppercase
}
.related-news .post .post-date p {
font-size: 42px;
font-family: "Bodoni"
}
.related-news .post .post-img {
font-size: 0
}
.related-news .post .post-img img {
width: 100%;
height: auto;
-webkit-filter: grayscale(100%)
}
.related-news .post .post-text {
padding: 25px 0;
vertical-align: top
}
.related-news .post .post-text * {
color: #000
}
.related-news .post .post-text p a {
font-size: 22px;
line-height: 26px;
font-family: "Bodoni";
margin: 0 0 14px 0;
text-transform: uppercase;
text-align: center;
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.related-news .post .post-text p a:hover {
color: #e27b5b
}
.related-news .post:after {
width: 30px;
height: 1px;
background: #3e3c3b;
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
content: '';
display: block
}
.grad-back {
padding: 135px 0 0 0;
background: #3e3c3b;
background: -webkit-linear-gradient(top, #3e3c3b 90%, #3e3c3b 90%, #dfd8d2 90%);
background: linear-gradient(to bottom, #3e3c3b 90%, #3e3c3b 90%, #dfd8d2 90%)
}
.grad-back .blog-blocks:last-child {
border-bottom: 1px solid #3e3c3b
}
.post-content {
font-size: 0;
position: relative
}
.post-content > div,
.post-content a {
display: inline-block;
vertical-align: top
}
.post-content h4 {
text-transform: initial;
color: #fff
}
.post-content .post-text {
width: calc(100% - 190px);
border-top: 1px solid #5c5b59;
padding: 58px 0 0 0;
margin: 0 0 0 100px
}
.post-content .post-text ul {
margin: 20px 0 20px 45px
}
.post-content .post-text li {
color: #c5c0c0
}
.post-content .prev-post,
.post-content .next-post {
width: 130px;
padding: 17px 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.post-content .prev-post span,
.post-content .next-post span {
display: inline-block;
z-index: 1;
text-transform: uppercase;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
float: left;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
color: #fff;
font-size: 10px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.post-content .prev-post span.arrow,
.post-content .next-post span.arrow {
float: none;
vertical-align: top;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center
}
.post-content .prev-post svg,
.post-content .next-post svg {
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.post-content .prev-post:hover span,
.post-content .next-post:hover span {
color: #e27b5b
}
.post-content .prev-post:hover svg,
.post-content .next-post:hover svg {
fill: #e27b5b
}
.post-content .prev-post:hover:after,
.post-content .next-post:hover:after {
background: #e27b5b
}
.post-content .prev-post {
position: relative;
-webkit-transform: rotate(-90deg) translate(-36px, -37px);
-ms-transform: rotate(-90deg) translate(-36px, -37px);
transform: rotate(-90deg) translate(-36px, -37px);
position: absolute;
left: 0;
top: 0
}
.post-content .prev-post span.arrow {
-webkit-transform: rotate(-90deg) translate(2px, 14px);
-ms-transform: rotate(-90deg) translate(2px, 14px);
transform: rotate(-90deg) translate(2px, 14px)
}
.post-content .prev-post svg {
fill: #fff;
width: 17px;
height: 13px
}
.post-content .prev-post:after {
width: 4px;
height: 54px;
content: '';
display: block;
background: #fff;
position: absolute;
right: 0;
top: 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.post-content .next-post {
position: relative;
-webkit-transform: rotate(-90deg) translate(-36px, 37px);
-ms-transform: rotate(-90deg) translate(-36px, 37px);
transform: rotate(-90deg) translate(-36px, 37px);
position: absolute;
right: 0;
top: 0
}
.post-content .next-post span.arrow {
-webkit-transform: rotate(90deg) translate(-1px, -16px);
-ms-transform: rotate(90deg) translate(-1px, -16px);
transform: rotate(90deg) translate(-1px, -16px)
}
.post-content .next-post svg {
fill: #fff;
width: 17px;
height: 13px
}
.post-content .next-post:after {
width: 4px;
height: 54px;
content: '';
display: block;
background: #fff;
position: absolute;
right: 0;
top: 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.post-content img {
float: left;
margin: 0 35px 4px 0;
width: 490px;
height: auto;
-webkit-filter: grayscale(100%)
}
.full-post {
padding: 30px 0
}
.full-post .post-title {
text-align: left;
padding: 0 96px
}
.full-post .post-title h2 {
text-align: left;
font-size: 40px;
line-height: 48px;
margin: 0 0 50px 0
}
.full-post .post-title .post-date * {
color: #fff
}
.full-post .post-title .post-date > * {
display: inline;
text-transform: uppercase
}
.full-post .post-title .post-date p {
font-size: 42px;
font-family: "Bodoni"
}
.full-post .post-text {
text-align: justify
}
.full-post .post-text p,
.full-post .post-text span {
margin-bottom: 10px;
color: #c5c0c0
}
.link-back {
padding: 9px 110px 9px 30px;
text-align: right;
position: relative;
width: 100%;
display: inline-block
}
.link-back span:not(.arrow) {
font-size: 10px;
color: #fff;
text-transform: uppercase;
font-family: "OpenSansLight";
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.link-back .arrow {
-webkit-transform: rotate(180deg) translate(-1px, -1px);
-ms-transform: rotate(180deg) translate(-1px, -1px);
transform: rotate(180deg) translate(-1px, -1px);
display: inline-block
}
.link-back svg {
fill: #fff;
width: 17px;
height: 13px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.link-back:hover span {
color: #e27b5b
}
.link-back:hover svg {
fill: #e27b5b
}
a.link-back:after {
width: 1px;
height: 100%;
background: #5c5b59;
content: '';
position: absolute;
right: 310px;
top: 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.share {
background-size: contain;
width: 111px;
height: 111px;
margin: 0 auto;
position: relative;
cursor: pointer;
text-align: center;
padding: 38px 0 0
}
.share > svg {
display: block;
width: 20px;
margin: 0 auto;
fill: #fff;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.share img {
width: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
z-index: 0
}
.share span {
font-size: 10px;
text-transform: uppercase;
color: #fff;
line-height: 10px;
display: block;
margin-bottom: 4px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.share span:nth-child(2) {
opacity: 0
}
.share:hover svg {
fill: #e27b5b
}
.share:hover span {
color: #e27b5b
}
.share:hover img:nth-of-type(2) {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg)
}
.share:hover span:nth-child(2) {
opacity: 1
}
.social-share a {
width: 27px;
height: 27px;
border-radius: 27px;
background: #e27b5b;
display: inline-block;
margin: 0 2px;
text-align: center;
padding: 4px 0
}
.social-share a > svg {
stroke: #fff;
fill: #fff
}
.social-share {
text-align: center
}
.social-share .google {
-webkit-transform: translateY(22px);
-ms-transform: translateY(22px);
transform: translateY(22px);
opacity: 0;
-webkit-transition: 0.3s all ease-out;
transition: 0.3s all ease-out
}
.social-share .link {
-webkit-transform: translateY(22px);
-ms-transform: translateY(22px);
transform: translateY(22px);
opacity: 0;
-webkit-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s
}
.social-share .tw {
-webkit-transform: translateY(22px);
-ms-transform: translateY(22px);
transform: translateY(22px);
opacity: 0;
-webkit-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s
}
.social-share .fb {
-webkit-transform: translateY(22px);
-ms-transform: translateY(22px);
transform: translateY(22px);
opacity: 0;
-webkit-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s
}
.share-block {
width: 150px;
margin: 30px auto 0
}
.share-block:hover:hover .google {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block:hover:hover .link {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block:hover:hover .tw {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block:hover:hover .fb {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block.opened .google {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block.opened .link {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block.opened .tw {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block.opened .fb {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0)
}
.share-block.opened span {
color: #e27b5b
}
.share-block.opened img:nth-of-type(2) {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg)
}
.share-block.opened span:nth-child(2) {
opacity: 1
}
.share-block.opened .share svg {
fill: #e27b5b
}
.pagination-wrapper {
text-align: center;
padding: 50px 0
}
.pagination-wrapper > * {
display: inline-block;
vertical-align: middle
}
.pagination-wrapper ul {
list-style: none;
margin: 0 25px
}
.pagination-wrapper li {
display: inline-block;
vertical-align: middle
}
.pagination-wrapper li a {
padding: 15px 15px
}
.pagination-wrapper a {
display: inline-block;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.pagination-wrapper a.active {
color: #e27b5b
}
.pagination-wrapper a:hover {
color: #e27b5b
}
.pagination-wrapper a svg {
stroke: #000;
fill: #000
}
.pagination-wrapper a svg:hover {
stroke: #e27b5b;
fill: #e27b5b
}
.pagination-wrapper svg {
stroke: #31302e;
fill: #31302e;
width: 50px;
height: 20px;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.pagination-wrapper div:first-child svg {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
@media (min-width: 0) and (max-width: 1299px) {
.post-content .post-text {
width: 100%;
margin: 0
}
.post-content .prev-post,
.post-content .next-post {
display: none
}
.post-content img {
float: none;
width: 100%
}
.related-news-wrapper {
text-align: center
}
.related-news {
padding: 55px 0 0 0
}
.full-post .post-title {
padding: 0
}
.link-back svg,
.link-back span {
display: none
}
.link-back:after {
display: none
}
.share-block {
margin: 20px auto
}
.related-news .post {
min-width: 180px;
margin: 0 2%
}
}
@media (max-width: 767px) {
.related-news-wrapper {
text-align: center
}
.related-news {
text-align: center;
padding: 50px 0 0 0
}
.related-news .post {
width: 210px;
margin: 0 2%
}
.related-news .post .post-date {
text-align: center
}
.related-news .post .post-date p {
font-size: 28px
}
.related-news .post .post-date span {
font-size: 12px
}
.related-news .post .post-text p a {
font-size: 18px
}
.pagination-wrapper {
padding: 20px 0
}
.grad-back .link-back {
padding: 0
}
.post-text img {
width: 100%
}
.post-text p {
text-align: justify
}
.full-post .post-title h2 {
font-size: 22px;
line-height: 28px
}
}
.contact-page {
background: #dfd8d2 url(img/main-back.jpg) no-repeat 0 0;
background-size: 100% 50%;
padding: 135px 0 50px 0
}
.contact-page .page-title {
padding: 0 0 50px 0
}
.contact-page .page-title p {
display: none
}
.contact-page .print {
right: -50px;
top: 1%
}
.contact-form-wrapper {
height: 440px;
max-height: 440px;
position: relative;
margin-bottom: 70px;
-webkit-transition: .3s;
transition: .3s
}
.contact-form-wrapper:after {
content: '';
display: block;
top: 0;
left: 0;
position: absolute;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
background: url(img/preloader.gif) no-repeat center #dfd8d2;
z-index: 50;
-webkit-transition: .3s;
transition: .3s
}
.contact-form-wrapper.load:after {
background: url(img/preloader.gif) no-repeat center #dfd8d2;
opacity: 1;
visibility: visible
}
.callback-form-wrapper {
height: 165px;
position: relative;
-webkit-transition: .3s;
transition: .3s
}
.callback-form-wrapper:after {
content: '';
display: block;
top: 0;
left: 0;
position: absolute;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
background: url(img/preloader.gif) no-repeat top right #31302e;
background-size: 64px 64px;
z-index: 50;
-webkit-transition: .3s;
transition: .3s
}
.callback-form-wrapper.load:after {
opacity: 1;
visibility: visible
}
.callback-form-wrapper .contact-text {
right: 0
}
.callback-form-wrapper .contact-text p {
max-width: 100%;
margin: 0
}
#callback-form {
-webkit-transition: .3s;
transition: .3s
}
#callback-form.hide {
opacity: 0;
visibility: hidden
}
#callback-form input.required.error,
#callback-form textarea.required.error {
border: 1px solid red
}
.contact-form {
width: 788px;
margin: 0 auto;
-webkit-transition: .3s;
transition: .3s
}
.contact-form.hide {
opacity: 0;
visibility: hidden
}
.contact-form input.required.error,
.contact-form textarea.required.error {
border: 1px solid red
}
.contact-form label {
display: block;
margin-bottom: 40px;
text-transform: uppercase;
position: relative
}
.contact-form label span {
width: 100px;
display: inline-block;
text-align: left;
vertical-align: top;
position: absolute;
left: 20px;
font-family: "OpenSansBold"
}
.contact-form label:nth-child(5) {
margin-top: 60px
}
.contact-form label:nth-child(5) span {
margin-top: -26px
}
.contact-form input:not([type="submit"]) {
background: transparent;
margin-left: 3px;
border-bottom: 1px solid #494949;
width: 100%;
color: #000;
padding: 0 0 0 155px;
font-family: "OpenSansBold";
resize: vertical;
text-transform: uppercase
}
.contact-form textarea {
background: transparent;
margin-left: 3px;
border: 1px solid #494949;
width: 100%;
color: #000;
padding: 10px 0 0 20px;
font-family: "OpenSansBold";
height: 150px;
text-transform: uppercase;
resize: none
}
.contact-form input[type="submit"] {
background: #3e3c3b
}
.contact-form input[type="submit"]:hover {
background: #e27b5b
}
#google-map {
height: 550px
}
.contact-text {
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: .3s;
transition: .3s;
padding: 0 10% 0;
position: absolute;
top: 0;
left: 50%;
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.contact-text.show {
opacity: 1;
visibility: visible
}
.contact-text h1 {
font-family: "Bodoni";
font-size: 75px;
text-transform: uppercase;
color: #000
}
.contact-text p {
font-size: 21px;
text-transform: uppercase;
position: relative;
max-width: 500px;
margin: 0 auto 50px
}
.contact-text p:nth-of-type(1):after {
content: '';
width: 27px;
height: 4px;
position: absolute;
left: 50%;
bottom: -24px;
display: block;
background: #000;
-webkit-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
transform: translate(-50%, 50%)
}
@media (min-width: 0) and (max-width: 1299px) {
.contact-page {
background-size: 100% 50%;
padding: 104px 0 50px 0
}
.contact-form {
width: 90%;
margin: 0 auto 70px
}
.contact-text {
text-align: center;
padding: 0 20px 0
}
.contact-text h1 {
font-size: 40px;
line-height: 23px
}
.contact-text p {
font-size: 21px
}
.callback-form-wrapper {
height: auto
}
}
@media (max-width: 767px) {
.contact-page {
background-size: 100% 50%;
padding: 76px 0 50px 0
}
.contact-page .page-title {
padding: 0 0 37px 0
}
.contact-page .page-title h2 {
padding: 16px 45px 0;
line-height: 25px;
margin-bottom: 0;
font-size: 22px
}
.contact-page .print {
right: 7%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
top: -20px
}
.contact-form {
width: 90%;
margin: 0 auto 70px
}
.contact-form label {
margin-bottom: 28px
}
.contact-form label span {
font-size: 10px;
left: 10px;
top: 6px
}
.contact-form input:not([type="submit"]) {
width: 100%;
padding: 0 0 0 80px
}
.contact-form textarea {
width: 100%
}
.contact-form label:nth-child(5) {
margin-top: 50px
}
.contact-text {
text-align: center;
padding: 0 20px 0
}
.contact-text h1 {
font-size: 20px;
line-height: 23px
}
.contact-text p {
font-size: 16px
}
.callback-form-wrapper {
height: auto
}
}
.faq-page {
background: #dfd8d2 url(img/main-back.jpg) no-repeat 0 0;
background-size: 100% 700px;
padding: 135px 0 50px 0
}
.faq-page .page-title p {
display: none
}
.faq-page .print {
right: -50px;
top: 1%
}
.light-back > .breadcrumbs li:not(:first-of-type) a,
.light-back > .breadcrumbs li:not(:first-of-type) span {
color: #000
}
.question-block {
padding: 20px 92px 0 92px
}
.question-block .question {
padding: 0 124px 0 0;
position: relative;
margin-bottom: 8px;
cursor: pointer
}
.question-block .question span {
font-family: "Bodoni";
font-size: 19px;
text-transform: uppercase;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.question-block .question span.arrow {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
position: absolute;
right: 0;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
top: 0
}
.question-block .question svg {
width: 22px;
height: 15px;
fill: none;
stroke: #000
}
.question-block .question:hover span {
color: #e27b5b
}
.question-block .question:hover span.arrow {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
.question-block .question:hover svg {
stroke: #e27b5b
}
.question-block .answer {
height: 0;
overflow: hidden;
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in;
padding: 0 30px 0 0;
font-size: 16px
}
.question-block.opened .question span {
color: #e27b5b
}
.question-block.opened .question span.arrow {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
.question-block.opened .question svg {
stroke: #e27b5b
}
@media (min-width: 0) and (max-width: 1299px) {
.faq-page .page-title p {
display: block;
color: #000
}
.faq-page .print {
right: -50px;
top: 1%
}
.faq-page .breadcrumbs {
padding: 18px 0 14px 0
}
.question-block {
padding: 20px 12px 0 26px
}
.question-block .question {
padding: 0 30px 0 0
}
.question-block .question span {
font-size: 17px
}
.question-block .question svg {
width: 19px;
height: 12px
}
.question-block .answer {
padding: 0 40px 0 0;
font-size: 15px
}
}
@media (max-width: 767px) {
.faq-page {
padding: 78px 0 50px 0;
background-size: 100% 700px
}
.faq-page .link-back {
display: none
}
.faq-page .page-title p {
display: block;
color: #000
}
.faq-page .page-title h2 {
line-height: 28px
}
.faq-page .print {
right: 7%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
top: -20px
}
.question-block {
padding: 20px 20px 0 20px
}
.question-block .question {
padding: 0 30px 0 0
}
.question-block .question span {
display: inline-block;
line-height: 17px;
font-size: 16px
}
.question-block .answer {
font-size: 14px;
padding: 0 20px 0 0
}
}
.about-page {
background: #dfd8d2 url(img/about-back.jpg) no-repeat 0 0;
background-size: cover;
padding: 135px 0 0 0
}
.about-page .breadcrumbs {
margin: 0 0 20px 88px;
padding: 36px 0 21px 0
}
.about-page .page-title {
padding: 0 0 10px 0
}
.about-page .page-title p {
font-size: 12px;
font-family: "OpenSansBold";
color: #000
}
.about-page .print {
right: -50px;
top: 1%
}
.about-text {
padding: 0 19% 12%;
text-align: justify;
position: relative
}
.about-text p {
margin-bottom: 4px
}
.about-text p:first-child {
font-family: "OpenSansBold"
}
.about-text .signature {
position: absolute;
right: 22%;
bottom: 0
}
.about-img {
padding: 0 14% 130px 14%;
overflow: hidden;
text-align: justify
}
.about-img img {
width: 60%;
float: left;
margin-right: 30px;
margin-bottom: 30px;
-webkit-filter: grayscale(100%)
}
.about-img h4 {
font-size: 23px;
font-family: "Bodoni";
text-align: left;
color: #000;
position: relative;
padding: 0 0 50px 0;
margin-bottom: 50px
}
.about-img h4:after {
content: '';
width: 27px;
height: 4px;
position: absolute;
left: 64%;
bottom: 0;
display: block;
background: #000
}
.history-slider {
text-align: center
}
.history-slider * {
color: #fff
}
.history-slider .slick-slide {
padding: 0 190px 40px;
font-size: 17px;
font-family: "OpenSansRegular";
}
.history-slider .slick-slide p {
font-family: "OpenSansLight"
}
.history-slider .slick-slide .history-title {
font-family: "OpenSansBold"
}
.history-slider .slick-slide .date {
font-family: "Bodoni"
}
.history-slider .date {
font-size: 43px;
color: #e27b5b;
opacity: 0;
-webkit-transform: translateY(16px);
-ms-transform: translateY(16px);
transform: translateY(16px);
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.history-slider .history-title {
font-size: 30px;
position: relative;
padding: 14px 0 0 0;
margin: 0 0 38px 0
}
.history-slider .history-title:after {
content: '';
width: 27px;
height: 4px;
position: absolute;
left: 50%;
bottom: -12px;
display: block;
background: #fff;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.history-slider .slick-active .date {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.3s all ease-in;
transition: 0.3s all ease-in
}
.slider-photo {
text-align: center;
padding: 0 0 86px 0
}
.slider-photo .light-back {
width: 258px;
height: 258px;
text-align: center;
padding: 69px 47px;
display: inline-block;
vertical-align: top;
margin-right: 30px;
position: relative;
margin-bottom: 20px
}
.slider-photo .light-back p {
font-size: 74px;
font-family: "Bodoni";
line-height: 48px
}
.slider-photo .light-back span {
font-size: 28px;
font-family: "Bodoni"
}
.slider-photo > img {
width: 660px;
height: auto;
-webkit-filter: grayscale(100%)
}
.slider-photo .print {
position: absolute;
right: inherit;
top: -14%;
left: -20%
}
.clients-slider-block {
font-size: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px
}
.clients-slider-block .slider-clients-wrapper {
background: #e27b5b;
display: inline-block;
width: 40%
}
.clients-slider-block .slider-clients-wrapper h3 {
margin-bottom: 10px
}
.clients-slider-block .slider-clients-wrapper > p {
text-align: center;
text-transform: uppercase;
margin-bottom: 20px
}
.clients-slider-block .slider-clients-wrapper * {
color: #000
}
.clients-slider-block .slider-clients-wrapper h6 {
color: #fff;
font-size: 18px;
text-align: center
}
.clients-slider-block .slider-clients-wrapper ul {
text-align: center;
list-style: none
}
.clients-slider-block .slider-clients-wrapper li {
padding: 6px 0
}
.clients-slider-block .clients-img {
display: inline-block;
width: 60%
}
.clients-slider-block .clients-img img {
width: 100%;
height: auto
}
.equipment {
padding: 75px 0 0 0
}
.equipment .equipment-text {
min-width: 314px;
vertical-align: top;
display: inline-block;
padding: 110px 0 0 52px;
width: 30%
}
.equipment .equipment-text p {
font-size: 23px;
font-family: "Bodoni";
text-transform: uppercase;
position: relative;
line-height: 28px;
padding: 0 0 40px 0;
margin: 0 0 25px 0
}
.equipment .equipment-text p:after {
content: '';
width: 27px;
height: 4px;
position: absolute;
left: 11px;
bottom: 0;
display: block;
background: #000;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.equipment .equipment-text span {
font-size: 17px;
font-family: "OpenSansRegular";
}
.equipment .equipment-img {
display: inline-block;
vertical-align: middle;
width: 68%;
padding: 0 0 280px 0;
position: relative
}
.equipment .equipment-img .print {
position: absolute;
right: 0;
top: -7%;
left: 37%;
z-index: 2
}
.videos-block {
position: relative
}
.videos-block .video-img {
position: absolute;
right: 10%;
top: 108px;
width: 65%
}
.videos-block .video-img img {
width: 100%;
height: auto;
-webkit-filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1)
}
.videos-block video {
-webkit-transform: translate(-20%, 0%);
-ms-transform: translate(-20%, 0%);
transform: translate(-20%, 0%)
}
.videos-block .border-block {
border: 34px solid #fff;
position: absolute;
left: 0;
top: 0;
width: 333px;
height: 333px
}
.videos-block .video {
width: 333px;
height: 333px;
left: 0;
top: 0;
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
z-index: 1;
position: relative
}
.date-line {
width: 100%;
border-top: 1px solid #4f4d4c;
position: relative;
text-align: center;
margin: 71px 0 33px 0
}
.date-line > div {
width: 15%;
height: 20px;
display: inline-block;
position: relative;
top: -34px
}
.date-line > div span {
font-family: "OpenSansBold";
font-size: 10px;
color: #878585
}
.date-line > div:after {
content: '';
width: 1px;
height: 100%;
background: #b8b8b8;
display: block;
position: absolute;
left: 50%;
bottom: -25px;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.date-line .first-year {
position: absolute;
left: 0
}
.date-line .first-year span {
font-size: 24px;
color: #878585;
text-transform: uppercase;
position: relative;
-webkit-transform: translate(2px, -17px);
-ms-transform: translate(2px, -17px);
transform: translate(2px, -17px);
display: inline-block
}
.date-line .last-year {
position: absolute;
right: 0
}
.date-line .last-year span {
font-size: 24px;
color: #878585;
text-transform: uppercase;
position: relative;
-webkit-transform: translate(-7px, -17px);
-ms-transform: translate(-7px, -17px);
transform: translate(-7px, -17px);
display: inline-block
}
.date-line .current:after {
content: '';
width: 4px;
height: 100%;
background: #e27b5b;
display: block;
position: absolute;
left: 50%;
bottom: -25px;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0)
}
.historys-block {
padding: 122px 0 0 0
}
.historys-block h2 {
line-height: 39px;
margin-bottom: 34px
}
.historys-block h5 {
font-size: 11px;
font-family: "OpenSansBold";
color: #fff
}
@media (max-width: 1299px) {
.about-page .breadcrumbs {
margin: 0 0 20px 20px;
padding: 24px 0 21px 0
}
.about-page .page-title {
padding: 0 0 20px 0
}
.about-text {
padding: 0 10% 12%
}
.about-img {
padding: 0 5% 12%
}
.about-img img {
width: 100%;
float: none;
margin-right: 0
}
.about-img h4 {
text-align: center;
padding: 26px 0 10px 0;
margin-bottom: 50px
}
.about-img h4:after {
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: -25px
}
.history-slider .slick-slide {
padding: 0 80px 40px
}
.slider-photo > img {
height: auto;
text-align: center;
padding: 0;
display: inline-block;
vertical-align: top;
margin-right: 30px
}
.slider-photo .print {
position: absolute;
right: inherit;
top: -14%;
left: -20%
}
article.historys-block {
padding: 35px 0 0 0
}
.equipment {
padding: 35px 0 0 0
}
.equipment h2 {
margin: 0 0 30px 0
}
.equipment .equipment-text {
width: 100%;
vertical-align: top;
display: block;
padding: 0 0 0 0;
text-align: center;
margin: 0 0 30px;
min-width: inherit
}
.equipment .equipment-text p:after {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.equipment .print {
display: none
}
.equipment .equipment-img {
width: 100%;
padding: 0 0 40px 0
}
.videos-block {
text-align: center
}
.videos-block .video-img {
position: relative;
top: 0;
margin-top: 20px;
width: 80%;
margin: 0 auto;
right: inherit
}
.videos-block .video {
display: none
}
}
@media (max-width: 1060px) {
.clients-slider-block {
display: block
}
.clients-slider-block .slider-clients-wrapper {
width: 100%
}
.clients-slider-block .clients-img {
width: 100%
}
}
@media (max-width: 767px) {
.about-page .page-title {
padding: 20px 0 20px 0
}
.about-page h2 {
line-height: 30px
}
.about-text {
padding: 0 20px 12%
}
.about-text .signature {
display: none
}
.date-line {
display: none
}
.history-slider .slick-slide {
padding: 50px 0 40px
}
.history-slider .history-title {
font-size: 22px
}
.slider-photo .light-back {
margin-right: 0;
margin-bottom: 20px
}
.slider-photo > img {
margin-right: 0;
width: 300px;
height: auto
}
.slider-photo .print {
top: -14%;
left: -20%
}
.videos-block .video-img {
position: relative;
right: 0;
top: 0
}
.videos-block .video-img img {
width: 100%;
height: auto
}
.videos-block video {
-webkit-transform: translate(-25%, -4%);
-ms-transform: translate(-25%, -4%);
transform: translate(-25%, -4%)
}
.videos-block .border-block {
width: 270px;
height: 270px
}
.videos-block .video {
width: 270px;
height: 270px
}
.videos-block .video img {
width: 100%
}
}
.phone-numbers {
display: flex;
flex-direction: column;
margin-bottom: 0
}
.phone-numbers span {
margin-right: 10px;
margin-bottom: 15px
}
.phone-numbers span svg {
width: 20px;
height: 20px;
fill: #fff;
margin-right: 20px
}
.text-header {
font-family: "Bodoni", Georgia, Charcoal CY, serif;
color: #e27b5b;
text-align: left;
border-bottom: 1px solid #5c5b59;
padding: 0 0 6px 0;
margin-bottom: 32px;
font-size: 30px !important;
}
#nf-form-title-1 h3 {
color: #fff
}
.footer-form-button {
border: 1px solid #5b4b44;
color: #fff !important;
font-size: 14px;
padding: 12px 30px !important;
background: #5b4b44 !important;
display: inline-block;
transition: 0.3s all ease-in;
text-transform: uppercase !important
}
#nf-form-2-cont form {
max-width: 70%;
margin: 0 auto
}
#nf-form-2-cont form textarea {
background: transparent;
margin-left: 3px;
border: 1px solid #494949;
width: 100%;
color: #000;
padding: 10px 0 0 20px;
font-family: "OpenSansBold";
height: 150px;
text-transform: uppercase;
resize: none
}
#nf-form-2-cont form input {
background: transparent;
margin-left: 3px;
border-bottom: 1px solid #494949;
width: 100%;
color: #000;
padding: 0 0 0 155px;
font-family: "OpenSansBold";
resize: vertical;
text-transform: uppercase
}
.catalog-grid {
display: flex;
flex-direction: column-reverse
}
.seo-text {
margin-left: 80px;
max-width: 91%;
font-size: 12px;
text-align: justify
}
@media (max-width: 1160px) {
.seo-text {
max-width: 91%;
margin: 0 auto
}
}
@media (max-width: 320px) {
.seo-text {
margin-left: 0;
width: 79%;
margin: 0 auto;
font-size: 12px
}
}
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(56, 57, 58, .9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s
}
.cd-popup.is-visible {
z-index: 9999;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s
}
.cd-popup-container {
position: relative;
margin: 4em auto;
max-width: 665px;
max-height: 65vh;
background: #red;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s
}
.cd-popup-container .cd-buttons:after {
content: "";
display: table;
clear: both
}
.cd-popup-container .cd-buttons li {
float: left;
width: 50%;
list-style: none
}
.cd-popup-container .cd-buttons a {
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s
}
.cd-popup-container .cd-buttons li:first-child a {
background: #fc7169;
border-radius: 0 0 0 .25em
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
background-color: #fc8982
}
.cd-popup-container .cd-buttons li:last-child a {
background: #b6bece;
border-radius: 0 0 .25em 0
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
background-color: #c5ccd8
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px
}
.is-visible .cd-popup-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.callback-form {
background-color: #fff;
padding: 20px;
padding-top: 40px;
z-index: 100
}
.callback-title {
padding: 6px;
font-size: 14px;
border-radius: 14px;
font-weight: 700;
color: #373737
}
.callback-form label {
color: #373737;
width: 110px;
height: 45px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center
}
.callback-title-modal {
font-size: 22px;
font-weight: 700;
color: #222;
padding: 10px;
border-radius: 15px
}
.cd-popup-container #nf-form-title-1 h3 {
color: #000
}
.cd-popup-container #nf-field-1-wrap {
display: flex;
align-items: center
}
.cd-popup-container #nf-field-1-wrap .nf-field-element {
border-bottom: 1px solid #000
}
.cd-popup-container #nf-field-6-wrap {
display: flex;
align-items: center
}
.cd-popup-container #nf-field-6-wrap .nf-field-element {
border-bottom: 1px solid #000
}
.cd-popup-container #nf-field-3-wrap textarea {
border: 1px solid #000
}
@media (max-width: 414px) {
.cd-popup-container #nf-field-3-wrap textarea {
border: 1px solid #000;
height: 57px
}
.cd-popup-container #nf-form-title-1 h3 {
font-size: 13px
}
}
/*Стили для заголовков на главной*/
.heading {
color: #000;
font-size: 54px;
margin: 0 0 60px 0;
text-align: center;
text-transform: uppercase;
font-family: "Bodoni", Georgia, Charcoal CY, serif;
}
@media (max-width: 767px) {
.heading {
font-size: 28px;
margin: 0 0 50px 0;
}
}
.small-heading {
color: #000;
font-size: 30px;
text-align: center;
text-transform: uppercase;
font-family: "Bodoni", Georgia, Charcoal CY, serif;
}
@media (max-width: 767px) {
.small-heading {
font-size: 25px;
margin: 0 0 50px 0;
}
}
.white-heading {
color: #000;
font-size: 36px;
margin: 0 0 60px 0;
text-align: center;
text-transform: uppercase;
font-family: "Bodoni", Georgia, Charcoal CY, serif;
}
@media (max-width: 767px) {
.white-heading {
font-size: 28px;
margin: 0 0 50px 0;
}
}
.white-heading-small {
color: #000;
font-size: 23px;
margin: 0 0 60px 0;
text-align: center;
text-transform: uppercase;
font-family: "Bodoni", Georgia, Charcoal CY, serif;
}
.white-heading-big {
color: #000;
font-size: 60px;
text-align: center;
text-transform: uppercase;
font-family: "Bodoni", Georgia, Charcoal CY, serif;
}
@media (max-width: 767px) {
.white-heading-big {
font-size: 28px;
margin: 0 0 50px 0;
}
}
/*END Стили для заголовков на главной*/
.seo-text-home {
margin: 20px 10px 0px 10px;
padding-bottom: 20px;
padding-top: 20px;
text-align: justify;
max-width: 1440px;
margin: 0 auto;
}
.seo-home-inner {
overflow: hidden;
height: 304px;
margin-left: 20px;
margin-right: 20px;
position: relative;
}
.seo-home-inner:before {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 4em;
background: -moz-linear-gradient(top, rgba(62, 60, 59) 0, #3E3C3B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(62, 60, 594)), color-stop(100%, #3E3C3B));
background: -webkit-linear-gradient(top, rgba(62, 60, 59) 0, #3E3C3B 100%);
background: -o-linear-gradient(top, rgba(62, 60, 59) 0, #3E3C3B 100%);
background: -ms-linear-gradient(top, rgba(62, 60, 59) 0, #3E3C3B 100%);
background: linear-gradient(top, rgba(62, 60, 59) 0, #3E3C3B 100%);
}
.seo-home-inner.active {
overflow: hidden;
height: 100%;
padding-bottom: 70px;
}
.seo-home-inner p {
color: #fff;
font-size: 16px;
font-family: "OpenSansRegular", Verdana, Helvetica, sans-serif;
margin-bottom: 10px;
}
.seo-home-inner h1 {
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}
.seo-home-inner h2 {
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}
.seo-home-inner h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
}
.seo-home-inner ul {
margin-left: 30px
}
.seo-home-inner li {
color: #fff;
list-style-type: disc;
font-size: 16px;
}
.button3.seo-text-read {
color: #fff;
}
.button3.seo-text-read:hover {
cursor: pointer;
}
.seo-text h2 {
margin: 20px 0 20px 0;
}
.seo-text p {
margin-bottom: 10px;
}
.seo-text ul {
margin-left: 30px;
}
#contacts li {
font-size: 15px;
}
#contacts li a {
font-size: 15px;
}
.top-nav-menu ul li {
list-style-type: none;
}
.top-nav-menu ul li a {
color: #fff;
margin-right: 20px;
text-transform: uppercase;
font-weight: bold;
}
.top-nav-menu ul li a:hover {
color: #e27b5b;
}
.top-nav-menu ul {
display: flex;
}
.top-menu-wrapper {
display: flex !important;
align-items: center;
padding-top: 15px;
position: relative;
}
.top-menu-wrapper .logo {
width: auto;
margin-right: 50px;
}
.page-header .navigation {
display: none !important;
}
.page-header.on-scroll .top-nav-menu ul li a {
color: #000;
}
.video-relative {
position: relative;
max-width: 860px;
margin: 0 auto;
}
.video-title {
display: none;
position: absolute;
top: 20px;
left: 20px;
color: #e27b5b;
z-index: 1;
font-family: "OpenSansBold";
font-size: 25px;
}
.messangers {
position: absolute;
top: 10px;
right: 20px;
display: flex;
align-items: center;
}
.messangers svg {
fill: #fff;
width: 30px;
height: 30px;
background-color: #333;
padding: 7px;
border-radius: 6px;
margin-right: 10px;
}
.messangers a {
color: #fff;
font-family: "OpenSansRegular";
}
.page-header.on-scroll .messangers a {
color: #000;
}
@media (max-width: 1070px) {
.page-header .wrapper {
display: flex;
align-items: center;
}
.top-menu-wrapper {
width: 78%;
}
.top-nav-menu {
display: none;
}
.page-header .navigation {
display: block !important;
}
.messangers{
padding-top: 7px;
}
.navigation > span{
margin-top: 14px;
}
}
@media (max-width: 450px) {
.messangers a{
font-size: 11px;
}
.messangers svg{
width: 20px;
height: 20px;
}
}
.skype{
display: none;
}
.second-video{
display: none;
}
.second-video.show{
display: block;
}
.none-video{
display: none;
}