@charset "UTF-8";
.clearfix::after {
    content: "";
    clear: both;
    display: table; }
header {
  height: 100vh;
  background-color: #141516; }

header .header-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

header .lang {
  font-weight: 300;
  line-height: 60px;
  width: 60px;
  height: 60px;
  margin-bottom: 3vh;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 30px;
  border-radius: 30px; }

header .call {
  width: 1.3rem;
  height: 1.3rem;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 8vh; }

header .call img {
  width: 100%; }

.call-mobile {
  visibility: hidden !important;
  display: none !important; }

.navbar-header {
  height: 150px;
  z-index: 50;
  margin-top: 2vh; }

.navbar-header .toggle-button {
  position: relative;
  z-index: 50;
  width: 5vw;
  height: 5vh;
  margin-top: 5vh;
  cursor: pointer; }

.navbar-header .toggle-button:hover {
  opacity: 1;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }

.bar {
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
  cursor: pointer;
  -webkit-transition: all 0.35s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.35s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.35s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  border: 0;
  background-color: #fff; }

.bar + .bar {
  margin-top: 4px; }
.top {
  top: 4px; }

.middle {
  top: 11px; }

.bottom {
  top: 22px; }

.toggle-active .bar {
  background-color: #fff; }

.toggle-active .top {
  -webkit-transform: translateY(10px) translateX(-50%) rotate(45deg);
  -ms-transform: translateY(10px) translateX(-50%) rotate(45deg);
  transform: translateY(10px) translateX(-50%) rotate(45deg); }

.toggle-active .middle {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.toggle-active .bottom {
  -webkit-transform: translateY(-12px) translateX(-50%) rotate(-45deg);
  -ms-transform: translateY(-12px) translateX(-50%) rotate(-45deg);
  transform: translateY(-12px) translateX(-50%) rotate(-45deg); }

.is-blured {
  -webkit-filter: blur(1.5px);
  filter: blur(1.5px); }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 0;
  background: #575757;
  background: rgba(22, 22, 22, 0.88);
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.overlay .rofas-nav {
  top: 8vh;  }

.overlay .rofas-nav, .overlay .info-nav {
  font-weight: 400;
  position: relative;
  left: 10vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  list-style: none;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.overlay .info-nav {
  top: 10vh; }

.overlay ul li {
  display: block;
  width: 12%;
  height: 8vh; }

.overlay ul li a {
  font-size: 1.5em;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center; }

.overlay ul li a img {
  width: 15%;
  min-width: 20px;
  margin-bottom: .25vh;
  margin-left: 1vw;
  opacity: 1;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  display: none; }

.overlay ul li a:hover img {
  opacity: 1;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  display: block; }

.overlay ul li a h3 {
  margin: 0;
  font-family: 'Adineue'; }

.overlay ul li a .roof-link {
  font-family: 'ABold';
  margin-left: .5vw;
  color: #fff; }

.overlay ul li a:hover .roof-link {
  color: #e64e4e; }

.overlay ul li a .fasad-link {
  font-family: 'ABold';
  margin-left: .5vw;
  color: #fff; }

.overlay ul li a:hover .fasad-link {
  color: #f7a550; }

.overlay ul li a .design-link {
  font-family: 'ABold';
  margin-left: .5vw;
  color: #fff; }

.overlay ul li a:hover .design-link {
  color: #fedd32; }

.overlay ul li a .industry-link {
  font-family: 'ABold';
  margin-left: .5vw;
  color: #fff; }

.overlay ul li a:hover .industry-link {
  color: #51b9f1; }

.overlay ul li a .eco-link {
  font-family: 'ABold';
  margin-left: .5vw;
  color: #fff; }

.overlay ul li a:hover .eco-link {
  color: #70ca57; }

.overlay ul li a .stone-link {
  font-family: 'ABold';
  margin-left: .5vw;
  color: #fff; }

.overlay ul li a:hover .stone-link {
  color: #956ccc; }

.overlay ul li a .stone-link img {
  width: 1vw;
  opacity: 1;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }

.rofas-nav > li > a > h3 {
  margin-top: 0;
  margin-bottom: 0; }

.nav-active {
  z-index: 2;
  visibility: visible;
  width: 100%;
  opacity: 1;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }

.scroll-passive {
  overflow: hidden; }

a {
  text-decoration: none; }

.roof {
  color: #e64e4e; }

.fasad {
  color: #f7a550; }

.design {
  color: #fedd32; }

.industry {
  color: #51b9f1; }

.eco {
  color: #70ca57; }

.stone {
  color: #956ccc; }

.slick-active:nth-of-type(1) > button {
  background-color: #e64e4e !important; }

.slick-active:nth-of-type(2) > button {
  background-color: #f7a550 !important; }

.slick-active:nth-of-type(3) > button {
  background-color: #fedd32 !important; }

.slick-active:nth-of-type(4) > button {
  background-color: #51b9f1 !important; }

.slick-active:nth-of-type(5) > button {
  background-color: #70ca57 !important; }

.slick-active:nth-of-type(6) > button {
  background-color: #956ccc !important; }

.slick-dots {
  display: none; }

.slick-dots .slide-active button {
  background-color: #e64e4e; }

.slick-slide img {
  margin-top: .5vh; }

.mobile-slider {
  display: none; }

.mobile-slider .mobile-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100vw;
  height: 90vh;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.mobile-slider .mobile-slide .mobile-inline {
  font-size: 1.2em;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 40% 5% 0 5%; }

.mobile-slider .mobile-slide .mobile-inline h1 {
  font-weight: 300;
  color: #fff; }

.mobile-slider .mobile-slide h1 {
  font-family: 'Adineue';
  color: #fff; }

.mobile-slider .mobile-slide p {
  font-family: 'Lato';
  line-height: 1.75;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 4% 20% 10% 5%;
  color: #fff; }

.mobile-slider .mobile-slide .mobile-inline-bottom {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  height: 10%;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  margin-bottom: 20px; }

.mobile-slider .mobile-slide .mobile-inline-bottom a {
  font-family: 'Adineue';
  font-size: 1.2em;
  margin-right: 5%;
  margin-left: 5%;
  text-decoration: none; }

.mobile-slider .mobile-slide-roof {
  background-image: url("../images/bg/roof-bg_1.jpg"); }

.mobile-slider .mobile-slide-roof .mobile-inline-bottom p {
  margin-right: 5%;
  color: #e64e4e; }

.mobile-slider .mobile-slide-fasad {
  background-image: url("../images/bg/facade-bg_after.jpg"); }

.mobile-slider .mobile-slide-fasad .mobile-inline-bottom p {
  margin-right: 2vw;
  color: #f7a550; }

.mobile-slider .mobile-slide-design {
  background-image: url("../images/bg/design-bg_1.jpg"); }

.mobile-slider .mobile-slide-design .mobile-inline-bottom p {
  margin-right: 2vw;
  color: #fedd32; }

.mobile-slider .mobile-slide-industry {
  background-image: url("../images/bg/industry-bg_1.jpg"); }

.mobile-slider .mobile-slide-industry .mobile-inline-bottom p {
  margin-right: 2vw;
  color: #51b9f1; }

.mobile-slider .mobile-slide-eco {
  background-image: url("../images/bg/eco-bg_1.jpg"); }

.mobile-slider .mobile-slide-eco .mobile-inline-bottom p {
  margin-right: 2vw;
  color: #70ca57; }

.mobile-slider .mobile-slide-stone {
  background-image: url("../images/bg/stone-bg_1.jpg"); }

.mobile-slider .mobile-slide-stone .mobile-inline-bottom p {
  margin-right: 2vw;
  color: #956ccc; }

.slide.active {
  -webkit-box-flex: 25 !important;
  -webkit-flex-grow: 25 !important;
  -ms-flex-positive: 25 !important;
  flex-grow: 25 !important; }

.active .watch__video, .active .main-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.active .main-text {
  z-index: 2;
  top: 40vh;
  left: 8vw;
  -webkit-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 1; }

.active .preview .number {
  font-weight: bold;
  margin-left: 6.75vw;
  -webkit-transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  color: #fff; }

.active .down {
  font-family: 'Adineue';
  position: absolute;
  bottom: 5vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: bottom 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: bottom 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: bottom 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.active .down:hover {
  bottom: -1%; }

.active .arrow {
  -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 0; }

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.preview {
  font-family: 'Adineue';
  position: relative;
  left: .66vw;
  float: left;
  width: 0;
  margin-top: 1.5vh; }

.preview, .preview a {
  color: #bababa; }

.preview .number {
  font-weight: 300;
  position: relative;
  top: 5vh;
  left: 1.4vw;
  margin-left: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  color: #cbcbcb; }

.preview .number > img {
  -webkit-transition: transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
  width: 3vw; }

.arrow {
  position: relative;
  top: 85vh;
  left: 3vw;
  display: block;
  -webkit-transition: opacity 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  white-space: nowrap;
  opacity: 1; }

.arrow span {
  font-family: 'Adineue';
  font-weight: 300; }

.main-text {
  z-index: 2;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 30vw;
  position: absolute;
  top: 120vh;
  left: 8vw;
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  color: #fff;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.rofas {
  font-size: 1.3em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 10vh;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center; }

.main-text h2 {
  font-family: 'Adineue';
  font-size: 2em;
  font-weight: 300;
  margin-right: .75vw;
  color: #fff; }

.main-text h1 {
  font-family: 'ABold';
  font-weight: 600; }

.main-text p {
  font-family: 'Lato Light';
  font-size: 1.1rem;
  line-height: 1.75;
  margin-top: 0;
  max-width: 400px;
  width: 80vw;
  color: #fff; }

.down {
  position: absolute;
  bottom: -35%;
  width: 0;
  margin-top: 17%;
  margin-left: 9.5%;
  -webkit-transition: bottom 0.6s ease-in-out;
  -o-transition: bottom 0.6s ease-in-out;
  -moz-transition: bottom 0.6s ease-in-out;
  transition: bottom 0.6s ease-in-out;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  white-space: nowrap;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center; }

.down img {
  margin-bottom: -5.5vh; }

.down img, .active .down img {
  width: 13px;
  height: 13px;
  margin-right: 1vw;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.active .down img {
  margin-bottom: .5vh; }

.slides-container {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  height: 100vh;
  color: #bababa; }

.slide {
  cursor: pointer;
  transition: flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-box-flex 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1);
  -webkit-transition: flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-box-flex 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1);
  transition: flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-box-flex 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1);
  -o-transition: flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1);
  transition: flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1);
  transition: flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-box-flex 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -webkit-flex-grow 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1), -ms-flex-positive 0.6s cubic-bezier(0.5, 0.1, 0.5, 0.1);
  outline: none;
  -webkit-box-flex: 3;
  -webkit-flex-grow: 3;
  -ms-flex-positive: 3;
  flex-grow: 3; }

.slide:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.149); }

.slide:focus {
  -webkit-box-flex: 25 !important;
  -webkit-flex-grow: 25 !important;
  -ms-flex-positive: 25 !important;
  flex-grow: 25 !important; }

.slide:focus .img {
  visibility: visible; }

.slide:focus .img, .slide .img {
  -webkit-transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.slide:hover {
  -webkit-box-flex: 3.5 !important;
  -webkit-flex-grow: 3.5 !important;
  -ms-flex-positive: 3.5 !important;
  flex-grow: 3.5 !important;
  -webkit-transition: flex-grow 0.65s, background-color 0.6s;
  -o-transition: flex-grow 0.65s, background-color 0.6s;
  transition: flex-grow 0.65s, background-color 0.6s; }
    
.slide-1:hover {
  background-color: rgba(230,78,78, 0.15); }

.slide-2:hover {
  background-color: rgba(247,165,80, 0.15); }

/*.design .slide:hover {
  background-color: #fedd32; }*/

.slide-4:hover {
  background-color: rgba(81,185,241, 0.15); }

.slide-5:hover {
  background-color: rgba(112,202,87, 0.15); }

.slide-6:hover {
  background-color: rgba(149,108,204, 0.15); }

.slide.active:hover {
  background-color: transparent;
  -webkit-box-flex: 25 !important;
  -webkit-flex-grow: 25 !important;
  -ms-flex-positive: 25 !important;
  flex-grow: 25 !important; }

.slide .img {
  visibility: hidden; }

.active .img {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: visible;
  max-width: 91.6667vw;
  -webkit-transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  background-position: 50% 50%;
  -webkit-background-size: cover;
  background-size: cover; }

.roof-slider, .facade-slider, .design-slider, .industry-slider, .eco-slider, .stone-slider {
  height: 100vh;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%; }

.roof-slider {
  background-image: url("../images/bg/roof-bg_1.jpg"); }

.facade-slider {
  background-image: url("../images/bg/facade-bg_after.jpg"); }

.design-slider {
  background-image: url("../images/bg/design-bg_after.jpg"); }

.industry-slider {
  background-image: url("../images/bg/industry-bg_after.jpg"); }

.eco-slider {
  background-image: url("../images/bg/eco-bg_after.jpg"); }

.stone-slider {
  background-image: url("../images/bg/stone-bg_after.jpg"); }

.slider-content {
  height: 100vh;
  color: #fff; }

.slider_content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  margin-right: 3vw;
  margin-left: 3vw;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.slider_content span {
  font-family: 'Adineue';
  margin-top: 5vh; }

.slider_content span img {
  height: 37px; }

.slider-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 20vh;
  margin-bottom: 2vh;
  margin-right: 1vw;
  -webkit-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 0;
  color: #fff;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-align: baseline;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.slider-text h2 {
  font-family: 'Adineue';
  font-size: 2em;
  font-weight: 300;
  margin-right: 5%;
  color: #fff; }

.slider-text h1 {
  font-family: 'ABold';
  font-weight: 600; }

.roof-slider-text h1 {
  color: #e64e4e; }

.facade-slider-text h1 {
  color: #f7a550; }

.design-slider-text h1 {
  color: #fedd32; }

.slider-text p {
  font-family: 'Lato Light';
  font-size: 1rem;
  line-height: 1.66;
  max-width: 700px;
  color: #fff; }

.btn-roof {
  line-height: 40px;
  display: block;
  width: 40px;
  height: 40px;
  margin-top: 24vh;
  text-align: center;
  opacity: 0;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.btn-roof img {
  width: 16px;
  height: 16px; }

.inline__play__button {
  display: none;
  width: 100%;
  height: 10%;
  margin-top: 20%;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.inline__play__button img {
  width: 15%;
  margin-right: 5%; }

.inline__play__button h3 {
  font-family: 'Adineue';
  font-size: 1.2em;
  font-weight: 300; }

.object-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  width: 50vw;
  height: 100vh; }

.all {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
  -ms-align-items: flex-end;
  align-items: flex-end;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 38vw;
  -webkit-transition: opacity 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 0;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.for-all {
  max-width: 700px;
  width: 100%;
  height: 200px;
  cursor: pointer;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-filter: opacity(0.5);
  filter: opacity(0.5); }

.for-all, .for-all:hover {
  transition: -webkit-filter .6s ease-in-out;
  -webkit-transition: -webkit-filter .6s ease-in-out;
  -o-transition: filter .6s ease-in-out;
  transition: filter .6s ease-in-out;
  transition: filter .6s ease-in-out, -webkit-filter .6s ease-in-out; }

.for-all:hover {
  -webkit-filter: opacity(1);
  filter: opacity(1); }

.sub {
  font-family: 'Adineue';
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 700px;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
  background-color: #d3d3d3;
  background-color: rgba(211, 211, 211, 0.2);
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.sub, .sub a {
  color: #fff; }

.sub a img {
  width: 1vw; }

.sub a p {
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.1rem; }

.sub_link {
  padding-left: 5%; }

.sub_arrow {
  padding-right: 10%; }

.first {
  background-image: url("../images/roof/finnera/finnera-category.jpg"); }

.second {
  background-image: url("../images/cheker.jpg"); }

.third {
  background-image: url("../images/roof/bitum/bitum-category-image.jpg"); }

.fourth {
  background-image: url("../images/elems.jpg"); }

.fifth {
  background-image: url("../images/falz.jpg"); }

.sixth {
  background-image: url("../images/gidro.jpg"); }

.seventh {
  background-image: url("../images/mansard3.jpg"); }

.eigth {
  background-image: url("../images/metalo.jpg"); }

.nineth {
  background-image: url("../images/samorez.png"); }

.tenth {
  background-image: url("../images/vodostok.jpg"); }

.luxard {
  background-image: url("../images/roof/luxard/luxard-category.jpg"); }

.right-side {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 7vw;
  height: 20vh;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.right-side a {
  position: absolute;
  right: 3vw;
  top: 5vh;
  height: 3vh;
  width: 3vh; }

.right-side a img {
  position: relative;
  min-width: 20px;
  width: 3vh; }

/*.right-side a.btn.back {*/
/*position: absolute;*/
/*right: 3vw;*/
/*top: 6vh;*/
/*background-size: 3vh;*/
/*}*/
.btn {
  line-height: 33px;
  display: block;
  width: 33px;
  height: 33px;
  text-align: center;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-background-size: 15px 15px;
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: background-image .7s;
  -o-transition: background-image .7s;
  transition: background-image .7s; }

.btn.back {
  background-image: url(../icons/return-white.svg); }

.btn.speaker {
  background-image: url(../icons/speaker-white.svg); }

body {
  position: fixed;
  font-family: 'Adineue';
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #141516; }

.main {
  position: relative;
}

.main .main_left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 3;
  height: 100vh;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_left #myCarousel {
  height: -webkit-calc(100vh - 3px);
  height: calc(100vh - 3px); }

.main .main_left .return {
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 22vh;
  margin-left: 20vw;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center; }

.main .main_left .return img {
  width: 5vw; }

.main .main_left .return p {
  font-family: 'ABold';
  margin-left: 2vw;
  color: #fff; }

.main .main_left .main_slider {
  height: 100vh;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover; }

.main .main_left .hr {
  z-index: 1;
  width: 0;
  max-width: 100%;
  height: 3px;
  -webkit-transition: height 1 ease-in-out;
  -o-transition: height 1 ease-in-out;
  transition: height 1 ease-in-out;
  color: #e64e4e;
  background-color: #e64e4e; }

.main .main_center {
  height: 100vh;
  background-color: white; }

.main .main_center .scroll-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  width: 70vw;
  height: 100vh;
  background-color: white; }

.main .main_center .scroll-container .ruukki-finnera {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 40vw;
  margin-left: 4vw;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera h1 {
  width: 100%;
  margin: 0;
  font-family: 'ABold';
  font-weight: bold;
  color: #606060;
  display: inline-block; }

.ruukki-warranty {
  width: 7em;
  position: relative;
  bottom: -2.5em;
  left: 2em;
  margin: 0 !important; }

.main .main_center .scroll-container .ruukki-finnera p {
  font-family: 'Lato Light';
  line-height: 1.4;
  max-width: 1400px;
  color: #606060;
  text-align: justify; }

.main .main_center .scroll-container .ruukki-finnera p:nth-child(6) {
  margin-top: 1vh; }

.main .main_center .scroll-container .ruukki-finnera .bold {
  font-family: 'Lato';
  font-weight: bold;
  margin-top: 4vh;
  color: #606060; }

.main .main_center .ruukki-logo-string {
  margin-top: 25vh;
  width: 100%;
  min-height: 45px;
  line-height: 45px;
  position: relative;
}

.main .main_center .scroll-container .ruukki-finnera img {
  /*max-width: 700px;*/
  margin-top: 1vh;
  margin-bottom: 2vh;
  -o-object-fit: cover;
  object-fit: cover; }

.main .main_center .scroll-container .ruukki-finnera iframe {
  width: 40vw;
  max-width: 700px;
  min-height: 22.5vw; }

.main .main_center .scroll-container .ruukki-finnera h3 {
  font-family: 'ABold';
  font-weight: bold;
  color: #606060; }

.main .main_center .scroll-container .ruukki-finnera table {
  font-family: 'Adineue';
  font-weight: 300;
  margin-top: 2vh;
  margin-bottom: 2vh;
  border-collapse: separate; }

.main .main_center .scroll-container .ruukki-finnera table th {
  font-family: 'ABold';
  font-weight: bold;
  text-align: left;
  color: #606060; }

.main .main_center .scroll-container .ruukki-finnera table tr {
  border-spacing: 1vh; }

.main .main_center .scroll-container .ruukki-finnera table tr:nth-child(odd) {
  color: white;
  background-color: rgba(200,79,79, 0.4); }

.main .main_center .scroll-container .ruukki-finnera table tr:nth-child(1) {
  color: #606060;
  background-color: inherit; }

.scroll-container .scrollbar-inner .scroll-bar {
  background-color: #e64e4e; }

.scroll-container .scroll-wrapper > .scroll-content {
  padding-right: 6vw; }

.main .main_center .scroll-container .ruukki-finnera table .table-left {
  display: inline-table;
  width: 20vw;
  text-align: left; }

.main .main_center .scroll-container .ruukki-finnera table .table-right {
  font-weight: bold;
  display: inline-table;
  float: right;
  width: 20vw;
  text-align: right; }

.main .main_center .scroll-container .ruukki-finnera .colors {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 40vw;
  min-height: 200px;
  margin-bottom: 4vh;
  background-color: #f4f4f4;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-up {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 1vh;
  margin-right: 3vh;
  margin-left: 3vh;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-up h3 {
  font-family: 'ABold';
  font-weight: bold;
  color: #606060; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-up p {
  font-family: 'Adineue';
  color: #606060; }

.mobile-header {
  display: none; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3vh;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .circle {
  width: 40px;
  height: 40px;
  cursor: pointer;
  -webkit-border-radius: 50%;
  -webkit-transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  -moz-transition: transform 0.25s ease-in-out, -moz-transform 0.25s ease-in-out;
  -ms-transition: transform 0.25s ease-in-out, -ms-transform 0.25s ease-in-out;
  -o-transition: transform 0.25s ease-in-out, -o-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  border-radius: 50%; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .circle:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2); }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr29 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr29 .circle {
  background-color: #941822; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr32 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr32 .circle {
  background-color: #433427; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr11 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr11 .circle {
  background-color: #32582f; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr750 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr750 .circle {
  background-color: #7d2827; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr23 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr23 .circle {
  background-color: #515351; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr887 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr887 .circle {
  background-color: #2a1f1d; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr33 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .rr33 .circle {
  background-color: #181918; }

.main .main_center .scroll-container .ruukki-finnera .info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  min-height: 400px;
  margin-top: 5%;
  /*     background-color: #f4f4f4; */
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-align: stretch;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .info h3 {
  font-family: 'ABold';
  font-weight: bold;
  /*     height: 5vh; */
  /*     margin-left: 1vw; */
  color: #606060; }

.main .main_center .scroll-container .ruukki-finnera .info .cloud {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  /*     margin: 1%; */
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center; }

.main .main_center .scroll-container .ruukki-finnera .info .cloud p {
  font-family: 'Adineue';
  margin-left: 1vw; }

.main .main_center .scroll-container .ruukki-finnera .info .cloud .roof {
  color: #e64e4e; }

.cloud img {
  margin: 0 !important; }

.main .main_center .scroll-container .ruukki-finnera .info .cloud a:hover {
  -webkit-filter: opacity(0.5);
  filter: opacity(0.5);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncA type="table" tableValues="0 0.5" /></feComponentTransfer></filter></svg>#filter'); }

.main .main_center .scroll-container .ruukki-finnera .info .consultation {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  margin: 2% 2% 10% 2%;
  padding: 2%;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-color: #c84f4f;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.main .main_center .scroll-container .ruukki-finnera .info .consultation p {
  font-family: 'Adineue';
  margin: 0;
  padding-left: 1%;
  color: #fff; }

.main .main_center .scroll-container .ruukki-finnera .info .consultation:hover {
  opacity: .8;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; }

.main .main_center .scroll-container .ruukki-finnera .info .pure-form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: auto;
  margin: 5%;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_center .scroll-container .ruukki-finnera .info .pure-form .pure-button {
  margin-left: 5.5vw; }

.main .main_right {
  z-index: 4;
  float: right;
  height: 20vh; }

.main .main_right .side-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 8vw;
  height: 20vh;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.main .main_right .side-bar a {
  width: 15%;
  margin-top: 8vh;
  right: -8.8vw;
  -webkit-border-radius: 50%;
  border-radius: 50%; }

.side-bar a img:not(.cancel) {
  position: absolute;
  right: 3vw;
  top: 7vh;
  width: 3vh; }

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  left: 8.3333%;
  right: 0;
  bottom: 0;
  height: 5px;
  overflow: hidden; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  z-index: 2000;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: #7d2827;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: block;
  position: absolute;
  top: 0;
  right: 100%; }

.watch__video {
  position: relative;
  left: 66%;
  display: none;
  width: 33%;
  height: 15%;
  margin: 3% 0 0 0;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.watch__video img {
  max-width: 15%; }

.watch__video p {
  font-family: 'Adineue';
  padding-left: 3%; }

.container:hover .active .img {
  transition: -webkit-transform 100s ease-in-out;
  -webkit-transition: -webkit-transform 100s ease-in-out;
  -o-transition: transform 100s ease-in-out;
  transition: transform 100s ease-in-out;
  transition: transform 100s ease-in-out, -webkit-transform 100s ease-in-out;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5); }

.star {
  z-index: 2;
  bottom: 15%;
  max-width: 1.5%; }

.star, .notification {
  position: absolute;
  cursor: pointer; }

.notification {
  font-family: 'Lato Light';
  bottom: 17%;
  left: 4.5%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  -webkit-transition: opacity .5s ease-in;
  -o-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in;
  color: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #f24841;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.notification p {
  position: relative;
  right: .075vw; }

.double-block {
  width: 100%;
}

.service-block {
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  min-height: 400px;
  max-height: 400px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #f4f4f4;
  background-repeat: no-repeat;
  background-position: right;
  -webkit-background-size: contain;
  background-size: contain;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.safe-img {
  margin: 0 !important;
  position: absolute;
  right: -10%;
  bottom: -35px;
  height: 468px;
  opacity: .3; }

.service-block p {
  font-family: 'Lato';
  font-weight: 300;
  line-height: 1.143;
  margin-bottom: 0;
  padding-top: 10px;
  z-index: 2; }

.service-block p, .service-block h2 {
  padding-left: 3%;
  text-align: left;
  color: #666;
  z-index: 2; }

.service-block h2 {
  font-family: 'ABold';
  font-size: 1.334em;
  line-height: 1.334;
  padding-bottom: 20px;
  z-index: 2; }

.service-block input {
  font-family: 'Lato Light';
  width: 50%;
  margin-bottom: 15px;
  margin-left: 3%;
  border: none;
  border-bottom: 1px solid #acacac;
  outline: none;
  background-color: transparent;
  z-index: 2; }

.service-block input::-webkit-input-placeholder {
  font-family: 'Lato';
  font-weight: 300;
  padding-bottom: 10px;
  color: #666;
  z-index: 2; }

.service-block input:-ms-input-placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #666;
  z-index: 2; }

.service-block input::-moz-placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #666;
  z-index: 2; }

.service-block input::-ms-input-placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #666;
  z-index: 2; }

.service-block input::placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #666;
  z-index: 2; }

.service-block input:focus::-webkit-input-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  z-index: 2; }

.service-block input:focus:-ms-input-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  z-index: 2; }

.service-block input:focus::-moz-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  z-index: 2; }

.service-block input:focus::-ms-input-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  z-index: 2; }

.service-block input:focus::placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  z-index: 2; }

.worker {
  position: relative;
  top: 5.7%;
  left: 56%;
  width: 39%;
  margin: 0 !important;
  -o-object-fit: cover;
  object-fit: cover; }

.service-cons, .deals-cons {
  z-index: 2;
  font-family: 'Lato Light';
  font-size: .9em;
  width: 50%;
  height: 18px;
  padding: 18px 3.5%;
  margin: 15px 0 15px 3%;
  color: #fff;
  background-color: #c84f4f;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.service-cons, .deals-cons, .threed {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.threed {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 330px;
  position: relative;
  background-image: url("../images/3d.png");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  margin-bottom: 10px; }

.threed p {
  font-family: 'Lato';
  font-weight: 300;
  margin-top: 5%; }

.threed p, .threed h1 {
  padding-left: 3%;
  color: #fff !important; }

.threed h1 {
  font-family: 'ABold';
  font-size: 3em;
  margin-top: 1% !important; }

.deals-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  height: 100%;
  -webkit-transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 0;
  background: #575757;
  background: rgba(87, 87, 87, 0.76);
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.deals-overlay, .deals-active {
  width: 100%;
  -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.deals-active {
  z-index: 2;
  visibility: visible;
  -webkit-transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: visibility 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  opacity: 1;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }

.deals-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 20%;
  margin-top: 2%;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.deals-list:first-child {
  margin-left: 12%; }

.deals-list:nth-child(2), .deals-list:nth-child(3) {
  margin-left: 8%; }

.deals-list p {
  font-family: 'Lato Light';
  color: #fff; }

.deals-list h2 {
  font-family: 'Adineue';
  color: #fff; }

.deals-images {
  width: 100%;
  height: 30vh;
  margin-top: 20%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover; }

.close-deals {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.close-deals img {
  max-width: 7.5%;
  margin-left: 5%; }

.carousel-indicators {
  z-index: 1 !important; }

.carousel-inner {
  -webkit-transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.deal-container {
  overflow: auto;
  width: 110%;
  height: 100vh;
  background-image: url("../images/deals/deals-4.png");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover; }

.deal-container, .deal-wall {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.deal-wall {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 50%;
  background-color: #111;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.deal-wall .deals-cons {
  margin-left: 5%; }

.deal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 200%;
  margin-top: 22.5%;
  margin-left: 6%;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.deal p, .deal-wall p, .deal-wall h1 {
  font-family: 'Lato Light';
  line-height: 1.5;
  width: 80%;
  margin-left: 5%;
  color: #fff; }

.deal-wall h1 {
  font-weight: 100; }

.deal-wall h3 {
  font-family: 'ABold';
  line-height: 1.5;
  width: 90%;
  margin-bottom: 8%;
  margin-left: 5%;
  color: #fff; }

.deal-wall input {
  font-family: 'Lato Light';
  width: 50%;
  margin-bottom: 5%;
  margin-left: 5%;
  border: none;
  border-bottom: 1px solid #acacac;
  outline: none;
  background-color: transparent; }

.deal-wall input::-webkit-input-placeholder {
  font-family: 'Lato';
  font-weight: 300;
  padding-bottom: 2%;
  color: #666; }

.deal-wall input:-ms-input-placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #666; }

.deal-wall input::-moz-placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #fff; }

.deal-wall input::-ms-input-placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #fff; }

.deal-wall input::placeholder {
  font-family: 'Lato Light';
  padding-bottom: 2%;
  color: #fff; }

.deal-wall input:focus::-webkit-input-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.deal-wall input:focus:-ms-input-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.deal-wall input:focus::-moz-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.deal-wall input:focus::-ms-input-placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.deal-wall input:focus::placeholder {
  opacity: 0;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; }

.hover {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 38.3vw;
  height: 100vh;
  background-color: #575757;
  background-color: rgba(87, 87, 87, 0.66);
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.hover p {
  font-family: 'Lato Light';
  color: #fff; }

.hover img {
  max-width: 5%; }

.hover a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.increase {
  z-index: 2;
  width: 85vw !important;
  -webkit-transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.cancel {
  visibility: hidden;
  max-width: 15%;
  cursor: pointer; }

.carousel-control {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff; }

.carousel-control img {
  max-width: 47%; }

h2 {
  font-family: 'ABold';
  color: #606060; }

.main .main_center .scroll-container .ruukki-finnera .colors .colors-down .pipe {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.cancel:hover {
  transition: -webkit-transform .6s ease-in;
  -webkit-transition: -webkit-transform .6s ease-in;
  -o-transition: transform .6s ease-in;
  transition: transform .6s ease-in;
  transition: transform .6s ease-in, -webkit-transform .6s ease-in;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

.first-paragraph {
  margin-top: 0; }

.arrow-down, .arrow-up {
  position: fixed;
  bottom: 0;
  left: 71%;
  max-width: 66px;
  max-height: 15%;
  cursor: pointer;
  -o-object-fit: contain;
  object-fit: contain; }

.arrow-up {
  display: none; }

.force-overflow {
  overflow-y: auto;
  width: 42vw;
  padding-top: 45%; }

#style-1::-webkit-scrollbar-track {
  background-color: rgba(211, 211, 211, 0.2); }

#style-1::-webkit-scrollbar {
  /*width: .5%;*/
  width: 1%;
  background-color: transparent; }

#style-1::-webkit-scrollbar-thumb {
  background-color: #e64e4e; }

.design-slider .slider-content {
  height: auto;
  margin-bottom: 20vh; }

.design-slider .slider_content {
  height: auto; }

.design-slider--content .slider-content {
  margin-bottom: 0;
  -webkit-transition: margin-bottom 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: margin-bottom 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: margin-bottom 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.design-slider--content {
  background-image: url(../icons/bg_white.jpg);
  -webkit-transition: background-image 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: background-image 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: background-image 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.design-slider--content .design-slider-text {
  margin-top: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19), margin-top 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19), margin-top 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19), margin-top 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.design-slider--content .slider-text h2,
.design-slider--content .slider-text p {
  color: #606060;
  -webkit-transition: color 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: color 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: color 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.design-slider--content .btn.back {
  background-image: url(../icons/return-black.svg); }

.design-slider--content .btn.speaker {
  background-image: url(../icons/speaker-black.svg); }

.design-slider--scroll .scroll-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  overflow: auto;
  width: 100vw;
  height: 100vh; }

.design-cat {
  width: 80vw;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 5vh; }

.design-cat__item {
  margin-bottom: 8vh; }

.design-cat__img {
  display: block;
  height: 270px;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  position: relative; }

.design-cat__img:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url(../icons/arrow-right-yellow.svg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 15px 15px;
  background-size: 15px;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out; }

.design-cat__img:hover:before {
  opacity: 1; }

.design-cat__text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }

.design-cat__heading {
  font-family: 'Adineue';
  -webkit-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 100px;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100px;
  flex: 1 0 100px; }

.design-cat__heading h2 {
  font-family: 'Adineue';
  font-weight: 300;
  font-size: 1.5em;
  color: #606060; }

.design-cat__descrip {
  -webkit-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 2 0 100px;
  -webkit-box-flex: 2;
  -ms-flex: 2 0 100px;
  flex: 2 0 100px; }

.design-cat__descrip p {
  font-family: 'Lato Light';
  font-size: .9rem;
  line-height: 1.66;
  max-width: 700px;
  color: #000; }

.design-detail .scroll-container {
  overflow: auto;
  width: 100vw;
  height: 100vh; }

.design-detail__header {
  height: 56vh;
  width: 92vw;
  position: relative;
  padding-top: 6vh;
  margin-bottom: 5vh;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover; }

.design-detail__header:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0; }

.design-detail__heading {
  margin-left: 3vw;
  position: relative; }

.design-detail__heading h1 {
  margin: 0;
  font-family: Adineue;
  font-weight: 300;
  font-size: 2.2em;
  color: #fff; }

.design-detail__heading h1 span {
  color: #fedd32; }

.design-detail__content {
  width: 89vw;
  padding-left: 3vw;
  overflow: hidden; }

.design-detail__box {
  margin-bottom: 12vh; }

.design-detail__text {
  margin-bottom: 5vh; }

.design-detail__text h2 {
  font-family: Adineue;
  font-weight: 300;
  font-size: 1.5em;
  color: #606060; }

.design-detail__text p {
  font-family: 'Lato Light';
  font-size: .9rem;
  line-height: 1.66;
  max-width: 570px;
  color: #606060; }

.design-detail__slider {
  margin-left: -4px;
  margin-bottom: 6vh; }

.design-detail__item {
  padding: 0 4px; }

.design-detail__img {
  height: 37vh;
  display: block;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  position: relative; }

.design-detail__img:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url(../icons/arrow-right-yellow.svg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 15px 15px;
  background-size: 15px;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out; }

.design-detail__img:hover:before {
  opacity: 1; }

.design-detail__more {
  font-family: 'Lato';
  font-size: .9rem;
  line-height: 1.66;
  max-width: 570px;
  color: #606060;
  text-decoration: underline;
  margin-left: 110px; }

.design-detail__more:hover {
  text-decoration: none; }

.design-detail .slick-list {
  overflow: visible; }

.design-detail .slick-arrow {
  border: 0;
  font-size: 0;
  width: 33px;
  height: 33px;
  background-color: #f3f3f3;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: 10em;
  background-size: 12px;
  outline: 0;
  position: absolute;
  bottom: -10vh;
  left: 0;
  opacity: .7;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s; }

.design-detail .slick-arrow:hover {
  background-color: #e2e2e2; }

.design-detail .slick-arrow:active {
  -webkit-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px); }

.design-detail .slick-prev {
  background-image: url(../icons/left-arrow.svg); }

.design-detail .slick-next {
  background-image: url(../icons/right-arrow.svg);
  left: 45px; }

.design-detail.popup .right-side .btn.back {
  background-image: url(../icons/return-black.svg); }

.design-detail.popup .right-side .btn.speaker {
  background-image: url(../icons/speaker-black.svg); }

.design-popup {
  position: fixed;
  left: 8.3333vw;
  top: 0;
  bottom: 0;
  right: -2vw;
  z-index: 1;
  background-color: #fff;
  padding: 4vh 10vw 3vh 3vw;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out; }

.design-popup.active {
  opacity: 1;
  visibility: visible; }

.design-popup .slick-list {
  overflow: hidden; }

.design-popup__item {
  height: 75vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center; }

.design-popup__back {
  font-family: 'Lato';
  font-size: .9rem;
  line-height: 1.66;
  color: #606060;
  padding-left: 25px;
  margin-bottom: 3vh;
  display: inline-block;
  position: relative;
  background-image: url(../icons/left-arrow.svg);
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-background-size: 12px;
  background-size: 12px; }

.design-popup__back:hover {
  text-decoration: underline; }

.design-popup__text {
  font-family: 'Lato';
  font-size: .9rem;
  line-height: 1.66;
  color: #606060;
  margin-left: 110px;
  margin-top: 6vh; }

.design-work .scroll-container {
  overflow: auto;
  width: 100vw;
  height: 100vh; }

.design-work__header {
  padding: 3vh 0 6vh; }

.design-work__content {
  width: 91.6667vw;
  padding-bottom: 10vh; }

.design-work h1 {
  font-family: 'Adineue';
  font-weight: 300;
  font-size: 1.5em;
  color: #606060;
  margin-bottom: 1.2em;
  margin-left: 4vw;
  margin-right: 2vw; }

.design-work p {
  font-family: 'Lato Light';
  font-size: .9rem;
  line-height: 1.66;
  max-width: 730px;
  color: #606060;
  margin-bottom: 1.7em;
  margin-left: 4vw;
  margin-right: 2vw; }

.design-work img {
  width: 100%;
  margin-top: 3vh; }

.design-work .right-side .btn.back {
  background-image: url(../icons/return-black.svg); }

.design-work .right-side .btn.speaker {
  background-image: url(../icons/speaker-black.svg); }

.contacts__content {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  height: 85vh;
  width: 40vw;
  padding-top: 10vh;
  padding-bottom: 5vh;
  padding-left: 3vw;
  background: -webkit-linear-gradient(left, #141516 0%, #141516 1%, #141516 54%, rgba(20, 21, 22, 0.75) 70%, rgba(20, 21, 22, 0.5) 86%, rgba(20, 21, 22, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, from(#141516), color-stop(1%, #141516), color-stop(54%, #141516), color-stop(70%, rgba(20, 21, 22, 0.75)), color-stop(86%, rgba(20, 21, 22, 0.5)), to(rgba(20, 21, 22, 0)));
  background: -o-linear-gradient(left, #141516 0%, #141516 1%, #141516 54%, rgba(20, 21, 22, 0.75) 70%, rgba(20, 21, 22, 0.5) 86%, rgba(20, 21, 22, 0) 100%);
  background: linear-gradient(to right, #141516 0%, #141516 1%, #141516 54%, rgba(20, 21, 22, 0.75) 70%, rgba(20, 21, 22, 0.5) 86%, rgba(20, 21, 22, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#141516', endColorstr='#00141516', GradientType=1); }

.contacts__heading h1 {
  font-family: ABold;
  font-size: 2.5rem;
  color: #fff;
  margin-top: 0; }

.contacts__info {
  margin-bottom: 6vh; }

.contacts__row {
  margin-bottom: .8vh; }

.contacts__row.address {
  margin-bottom: 4vh; }

.contacts__row.mail {
  margin-top: 4vh; }

.contacts__row.mail .contacts__label,
.contacts__row.mail .contacts__text {
  display: block;
  margin-bottom: .8vh; }

.contacts__label {
  font-family: "Lato Light";
  font-size: .9rem;
  color: #c9c9c9; }

.contacts__text {
  font-family: "Lato Light";
  font-size: .9rem;
  color: #fff; }

a.contacts__text:hover {
  text-decoration: underline; }

.contacts__btn {
  font-family: 'Lato Light';
  font-size: .9rem;
  color: #fff;
  display: inline-block;
  padding: .5rem 1.1rem;
  background-color: #f33838;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s; }

.contacts__btn:hover {
  background-color: #FF4242; }

.social {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 8vh; }

.social__link {
  width: 25px;
  height: 25px;
  margin-right: 3vw;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s; }

.social__link:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); }

.map {
  position: fixed;
  left: 8.3333vw;
  right: 0;
  top: 0;
  bottom: 0; }

.map__elem {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; }

.blog {
  background-color: #141516; }

.blog__container {
  width: 77vw;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-top: 3vh;
  padding-bottom: 3vh; }

.blog .scroll-container {
  overflow: auto;
  width: 100vw;
  height: 100vh; }

.blog__section {
  width: 100%;
  margin-bottom: 7vh; }

.blog__header {
  margin-bottom: 5vh; }

.blog__header h2 {
  margin-top: 0;
  margin-bottom: .5em;
  font-family: ABold;
  font-size: 2.2em;
  color: #fff; }

.blog__header p {
  font-family: 'Lato Light';
  font-size: .9rem;
  line-height: 1.66;
  max-width: 570px;
  color: #fff; }

.blog__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -7px; }

.blog__item {
  width: 33.333%;
  margin-bottom: 6vh; }

.blog__inner {
  padding: 0 7px; }

.blog__img {
  display: block;
  height: 30vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  margin-bottom: 2vh;
  position: relative; }

.blog__section.video .blog__img:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MCA2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PHBhdGggZD0iTTMwLDBDMTMuNDU4LDAsMCwxMy40NTgsMCwzMHMxMy40NTgsMzAsMzAsMzBzMzAtMTMuNDU4LDMwLTMwUzQ2LjU0MiwwLDMwLDB6IE00NS41NjMsMzAuODI2bC0yMiwxNSAgQzIzLjM5NCw0NS45NDEsMjMuMTk3LDQ2LDIzLDQ2Yy0wLjE2LDAtMC4zMjEtMC4wMzgtMC40NjctMC4xMTZDMjIuMjA1LDQ1LjcxMSwyMiw0NS4zNzEsMjIsNDVWMTVjMC0wLjM3MSwwLjIwNS0wLjcxMSwwLjUzMy0wLjg4NCAgYzAuMzI4LTAuMTc0LDAuNzI0LTAuMTUsMS4wMzEsMC4wNThsMjIsMTVDNDUuODM2LDI5LjM2LDQ2LDI5LjY2OSw0NiwzMFM0NS44MzYsMzAuNjQsNDUuNTYzLDMwLjgyNnoiIGZpbGw9IiNGRkZGRkYiLz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 2em 2em;
  background-size: 2em;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s; }

.blog__section.video .blog__img:hover:before {
  opacity: 1; }

.blog__section.article .blog__img:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url(../icons/arrow-right-yellow.svg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 15px 15px;
  background-size: 15px;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out; }

.blog__section.article .blog__img:hover:before {
  opacity: 1; }

.blog__name {
  display: block;
  font-family: Adineue;
  font-size: 1.2em;
  color: #fff;
  margin-bottom: 2vh;
  max-width: 85%; }

.blog__desc {
  display: block;
  font-family: "Lato Light";
  font-size: .9em;
  color: #fff; }

.blog__count {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.blog__count span {
  font-family: Adineue;
  font-size: 1.13em;
  color: #fff; }

.blog__count span:first-child {
  font-family: ABold;
  font-size: 1.5em; }

.blog__img:hover .blog__count {
  opacity: 1; }

.video {
  background-color: #141516; }

.video__container {
  /*padding-left: 3vw;*/
  /*padding-right: 3vw;*/
  /*padding-top: 3vh;*/
  /*padding-bottom: 3vh;*/ }

.video .scroll-container {
  overflow: auto;
  width: 100vw;
  height: 100vh; }

.video__wrap {
  width: 91.667vw;
  height: 80vh;
  position: relative; }

.video-responsive {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.video-responsive iframe,
.video-responsive video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%; }

.video__text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 77vw;
  padding: 3vw; }

.video__heading {
  font-family: 'Adineue';
  -webkit-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 0 100px;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100px;
  flex: 1 0 100px; }

.video__heading h1 {
  font-family: 'Adineue';
  font-weight: 300;
  font-size: 1.1em;
  color: #fff;
  padding-right: 15px;
  margin-top: 0; }

.video__descrip {
  -webkit-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 2 0 100px;
  -webkit-box-flex: 2;
  -ms-flex: 2 0 100px;
  flex: 2 0 100px; }

.video__descrip p {
  font-family: 'Lato Light';
  font-size: .9rem;
  line-height: 1.66;
  color: #fff;
  margin-top: 0; }

.article {
  background-color: #141516; }

.article__bg {
  width: 100%;
  height: 40vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center; }

.article__content {
  background-color: #141516;
  padding: 5vh 3vw;
  color: #fff; }

.article__content h1 {
  font-family: Adineue;
  font-weight: 300;
  margin-top: 0;
  font-size: 1.5rem; }

.article__content h2 {
  font-family: Adineue;
  font-weight: 300;
  margin-top: 0;
  font-size: 1.2rem;
  color: #fff; }

.article__content p {
  margin-top: 0;
  font-family: "Lato Light";
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.4;
  text-align: justify; }

.article__content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 6vh 0; }

.article__content li {
  font-family: "Lato Light";
  font-weight: 300;
  font-size: .9rem;
  list-style: none;
  line-height: 1.7; }

.gallery {
  background-color: #141516; }

.gallery__container {
  width: 77vw;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-top: 5vh;
  padding-bottom: 3vh; }

.gallery .scroll-container {
  overflow: auto;
  width: 100vw;
  height: 100vh; }

.gallery__section {
  width: 100%;
  margin-bottom: 7vh; }

.gallery__header {
  margin-bottom: 5vh; }

.gallery__header h2 {
  margin-top: 0;
  margin-bottom: .5em;
  font-family: ABold;
  font-size: 2.2em;
  color: #fff; }

.gallery__header p {
  font-family: 'Lato Light';
  font-size: .9rem;
  line-height: 1.66;
  max-width: 570px;
  color: #fff; }

.gallery__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -7px; }

.gallery__item {
  width: 23.5%;
  padding-bottom: 150px;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  margin: 0 .66% 15px; }

.main .main_center .scroll-container .b-slider__img img {
  max-width: 100%;
  display: block;
  height: auto;
  width: 100%;
  margin: 0; }

.b-slider {
  margin: 4vh 0;
  position: relative; }

.b-slider__slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.b-slider__slider.slick-initialized {
  display: block;
  margin: 0 -5px 10vh; }

.b-slider__item {
  width: 49%;
  margin-bottom: 10px;
  outline: 0 !important; }

.b-slider__item:nth-child(2n+1) {
  padding-right: 2%; }

.b-slider__slider.slick-initialized .b-slider__item {
  width: auto;
  margin-bottom: 0;
  padding: 0 5px; }

.b-slider__all {
  font-family: 'Lato Light';
  font-size: 1rem;
  color: #606060;
  position: absolute;
  right: 0;
  bottom: 2vh;
  border-bottom: 1px solid transparent;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s; }

.b-slider__all:hover {
  border-color: #606060; }

.b-slider .slick-arrow {
  border: 0;
  font-size: 0;
  width: 33px;
  height: 33px;
  background-color: #f3f3f3;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: 10em;
  background-size: 12px;
  outline: 0;
  position: absolute;
  bottom: -9vh;
  left: 0;
  opacity: 1;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s; }

.b-slider .slick-arrow:active {
  -webkit-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px); }

.b-slider .slick-prev {
  background-image: url(../icons/left-arrow.svg); }

.b-slider .slick-next {
  background-image: url(../icons/right-arrow.svg);
  left: 45px; }

.ruukki-finnera li {
  font-family: 'Lato Light';
  line-height: 1.66;
  max-width: 700px;
  color: #606060; }

.active > .pure-u-1.main {
  height: 100vh; }

.ruukki--logo {
  max-width: 260px;
  margin-left: 5px !important;
  position: absolute;
  right: 2vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10em;
  margin: 0 !important; }

.main .main_center .scroll-container .ruukki-finnera h2 {
  margin-bottom: 2vh;
  margin-top: 2vh; }

.main .main_center .scroll-container .ruukki-finnera p {
  text-align: justify; }

.scroll-container > .scrollbar-inner > .scroll-element {
  z-index: 1; }

.main-icons {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 6vh;
  width: 0;
  height: 150px !important; }

.blog-text.scrollbar-inner > .scroll-element.scroll-y {
  left: 87vw !important; }

.blog-text.scroll-wrapper {
  height: 100vh; }

.end-box {
  height: 200px; }

.end-box .up-box {
  cursor: pointer;
  height: auto;
  background: #f4f4f4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.end-box > .up-box > .first-ch {
  width: 80%; }

.end-box > .up-box > .first-ch > span {
  display: block;
  margin: 2vh 0px 3px 15px !important; }

.end-box > .up-box > .first-ch > h2 {
  margin: 3px 0px 3px 15px; }

.end-box > .up-box > .second-ch {
  width: 20%;
  text-align: right;
  padding-right: 15px; }

.end-box > .up-box > .second-ch > img {
  width: 20px; }

.end-box > .down-box {
  height: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.end-box > .down-box > span {
  margin-top: 2vh !important;
  cursor: pointer;
  margin-left: 15px; }

.end-box > .down-box > span > img {
  width: 20px; }

#main-speaker {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100px;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row; }

#main-speaker > i {
  color: white; }

#musicStyle {
  font-family: "Lato Light";
  color: #565656; }

.sound-bar {
  margin-top: -2vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 55px; }

.mouse-pointer {
  cursor: pointer; }

.logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: .75; }

.logo svg {
  width: 60%;
  height: 60%; }

.logo svg path {
  -webkit-transition: fill 1s ease-in-out, stroke 1s ease-in-out;
  -o-transition: fill 1s ease-in-out, stroke 1s ease-in-out;
  transition: fill 1s ease-in-out, stroke 1s ease-in-out;
  fill: white;
  stroke: transparent; }

.logo svg .main_logo_roof {
  /*transform-origin: 50% 50%;*/
  /*transform: translateY(15px);*/
  -webkit-transform: translate(187px, 35px);
  -ms-transform: translate(187px, 35px);
  transform: translate(187px, 35px); }

/* animation */
.logo.v2 svg.animation .main_logo_roof {
  -webkit-animation: up 2s ease-in-out infinite;
  animation: up 2s ease-in-out infinite; }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translate(187px, 35px) rotateY(0deg);
    transform: translate(187px, 35px) rotateY(0deg); }
  30% {
    -webkit-transform: translate(187px, 20px) rotateY(0deg);
    transform: translate(187px, 20px) rotateY(0deg); }
  70% {
    -webkit-transform: translate(187px, 20px) rotateY(720deg);
    transform: translate(187px, 20px) rotateY(720deg); }
  100% {
    -webkit-transform: translate(187px, 35px) rotateY(720deg);
    transform: translate(187px, 35px) rotateY(720deg); } }

@keyframes rotate {
  0% {
    -webkit-transform: translate(187px, 35px) rotateY(0deg);
    transform: translate(187px, 35px) rotateY(0deg); }
  30% {
    -webkit-transform: translate(187px, 20px) rotateY(0deg);
    transform: translate(187px, 20px) rotateY(0deg); }
  70% {
    -webkit-transform: translate(187px, 20px) rotateY(720deg);
    transform: translate(187px, 20px) rotateY(720deg); }
  100% {
    -webkit-transform: translate(187px, 35px) rotateY(720deg);
    transform: translate(187px, 35px) rotateY(720deg); } }

@-webkit-keyframes up {
  0%, 100% {
    -webkit-transform: translate(187px, 35px) scale(1);
    transform: translate(187px, 35px) scale(1); }
  30%, 70% {
    -webkit-transform: translate(187px, 20px) scale(1);
    transform: translate(187px, 20px) scale(1); }
  50% {
    -webkit-transform: translate(187px, 20px) scale(1.3);
    transform: translate(187px, 20px) scale(1.3); } }

@keyframes up {
  0%, 100% {
    -webkit-transform: translate(187px, 35px) scale(1);
    transform: translate(187px, 35px) scale(1); }
  30%, 70% {
    -webkit-transform: translate(187px, 20px) scale(1);
    transform: translate(187px, 20px) scale(1); }
  50% {
    -webkit-transform: translate(187px, 20px) scale(1.3);
    transform: translate(187px, 20px) scale(1.3); } }

@-webkit-keyframes change {
  0%, 100% {
    -webkit-transform: translate(187px, 35px);
    transform: translate(187px, 35px);
    fill-opacity: 1; }
  30%, 70% {
    -webkit-transform: translate(187px, 20px);
    transform: translate(187px, 20px);
    fill-opacity: 1; }
  49% {
    -webkit-transform: translate(217px, 20px);
    transform: translate(217px, 20px);
    fill-opacity: 0; }
  51% {
    -webkit-transform: translate(157px, 20px);
    transform: translate(157px, 20px);
    fill-opacity: 0; } }

@keyframes change {
  0%, 100% {
    -webkit-transform: translate(187px, 35px);
    transform: translate(187px, 35px);
    fill-opacity: 1; }
  30%, 70% {
    -webkit-transform: translate(187px, 20px);
    transform: translate(187px, 20px);
    fill-opacity: 1; }
  49% {
    -webkit-transform: translate(217px, 20px);
    transform: translate(217px, 20px);
    fill-opacity: 0; }
  51% {
    -webkit-transform: translate(157px, 20px);
    transform: translate(157px, 20px);
    fill-opacity: 0; } }

#mobile-sound-bar {
  visibility: hidden;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: #141616;
  width: 100vw;
  height: 35px;
  opacity: 0.8; }

#main-mob-speaker {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  color: white;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start; }

#main-mob-speaker > div {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 75px;
  margin-left: 3vw; }

#music-mob-style {
  text-align: center;
  font-family: "Lato Light";
  color: #565656; }

#play-button {
  margin-left: 9vw;
  color: white;
  font-size: 20px; }

.mob-play-active {
  visibility: visible !important; }

.mob-play-passive {
  visibility: hidden !important; }

.icons_block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 200px;
  margin-bottom: 4vh;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical; }

.icon_image {
  margin: 0 !important;
  width: 52px;
  height: 48px;
  -o-object-fit: none !important;
  object-fit: none !important; }

.icon_text {
  font-family: 'Lato Light';
  font-size: .8em;
  line-height: 1.4;
  text-align: center;
  color: #606060;
  margin-top: 5px; }

.mt20px {
  margin-top: 20px !important; }

.login__content .service-block {
  background: none; }

.login__content .service-block input {
  display: block;
  margin: 0;
  line-height: 2em;
  width: 15em; }

.login__content .service-block input::-webkit-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content .service-block input::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content .service-block input:-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content .service-block input::-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content .service-block input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content .service-block input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content .service-block input::-ms-input-placeholder {
  /* Microsoft Edge */
  font-size: 0.8em;
  color: #b5b5b5; }

.login__content {
  margin-top: 10vh; }

.cabinet-button {
  z-index: 2;
  font-family: 'Lato Light';
  font-size: .9em;
  width: 16.75em;
  padding: 1em 1em;
  margin: 1em 0;
  color: #fff;
  background-color: #c84f4f;
  text-align: center;
  border: 0;
  line-height: 0; }

.exit-button {
  width: 10em;
  margin-left: 1em; }

.cabinet-button[disabled] {
  opacity: 0.5; }

.login__content p {
  padding-left: 0;
  color: #b5b5b5;
  text-align: none; }

.login-left-side, .login-right-side {
  letter-spacing: normal; }

.login__content .service-block {
  height: auto;
  min-height: auto;
  padding-bottom: 5em; }

.downloads__content {
  margin-right: 20vw !important; }

.downloads__brands img {
  width: auto;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%); }

.downloads__brands a {
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s; }

.downloads__brands a:hover img {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s; }

.downloads__brands .active img {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%); }

.downloads__brands ul,
.downloads__category ul,
.downloads__subcategory ul {
  margin: 0;
  padding: 0; }

.downloads__subcategory ul li {
  margin-top: 30px; }

.downloads__category ul li,
.downloads__subcategory ul li {
  display: inline-block;
  margin-right: 30px; }

.downloads__category ul li a,
.downloads__subcategory ul li a {
  color: #ffffff; }

.downloads__category ul a {
  font-size: 1.5em;
  cursor: pointer; }

.downloads__category .active,
.downloads__subcategory .active {
  color: #007398;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s; }

.downloads__category ul li a:hover,
.downloads__subcategory ul li a:hover {
  color: #007398; }

.downloads__content img {
  width: 150px;
  margin: 30px 0 15px; }

.downloads__files span {
  font-family: "Lato Light";
  font-weight: 300;
  font-size: .8rem;
  line-height: 1.7;
  display: block; }

.download-button {
  z-index: 2;
  font-family: 'Lato Light';
  font-size: .9em;
  width: 5em;
  padding: 8px 8px;
  color: #fff;
  background-color: #c84f4f;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: block;
  margin-top: 10px; }

.cabinet__content {
  margin-right: 20vw; }

.cabinet__content span {
  font-family: 'Lato Light';
  margin-bottom: 15px; }

.cabinet-menu-header {
  font-size: 1.3em;
  display: block; }

.cabinet-menu-about {
  display: block; }

.cabinet__content .download-button {
  width: 100%;
  text-align: center;
  max-width: 17em; }

.cabinet__content .cabinet_menu_item {
  /*  max-width: 17em; */ }

.cabinet__menu {
  margin-top: 60px; }

.profile__block .name,
.profile__block .email {
  display: block;
  margin-bottom: 10px;
  margin-top: 5px; }

.profile__block .download-button {
  margin-right: 2em;
  display: inline-block;
  width: auto;
  padding: 8px 20px; }

.text-center {
  text-align: center; }

.profile__block img {
  fill: white;
  color: white;
  width: 4em;
  margin: 0 auto; }

.login__content .validation-error {
  border-bottom: 1px solid #e64e4e; }

#email-form {
  z-index: 1; }

#email-form .validation-error::-webkit-input-placeholder {
  color: #e64e4e; }

#email-form .validation-error::-moz-placeholder {
  color: #e64e4e; }

#email-form .validation-error:-ms-input-placeholder {
  color: #e64e4e; }

#email-form .validation-error:-moz-placeholder {
  color: #e64e4e; }

.cabinet-text-link {
  color: #b5b5b5;
  font-family: "Lato Light";
  font-size: .9rem;
  text-decoration: underline; }

input {
  outline: none; }

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 50px #141516 !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important; }

/* breadcrumbs */
.breadcrumbs {
  --cssuiBreadcrumbsTextColor: var(--breadcrumbsTextColor);
  --cssuibreadcrumbsTextColorActive: var(--breadcrumbsTextColorActive);
  --cssuiBreadcrumbsDivider: var(--breadcrumbsDivider);
  --cssuiBreadcrumbsDividerColor: var(--breadcrumbsDividerColor, inherit);
  --cssuiBreadcrumbsDividerSize: var(--breadcrumbsDividerSize, 16px);
  --cssuiBreadcrumbsIndent: var(--breadcrumbsIndent, 8px);
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.breadcrumbs__item {
  display: inline-block;
  position: relative;
  padding-right: -webkit-calc(16px + 8px);
  padding-right: calc(16px + 8px);
  margin-right: 8px;
  color: #b5b5b5; }

.breadcrumbs__item:after {
  content: "›";
  width: 16px;
  height: 16px;
  line-height: 1;
  text-align: center;
  font-size: 16px;
  color: inherit;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.breadcrumbs__item_active {
  margin-right: 0;
  padding-right: 0;
  color: #fff; }

.breadcrumbs__item_active:after {
  display: none; }

.breadcrumbs__element {
  color: inherit; }

/* examples */
.breadcrumbs {
  --breadcrumbsTextColor: #b5b5b5;
  --breadcrumbsTextColorActive: #fff;
  margin-bottom: 30px; }

.breadcrumbs_type6 {
  --breadcrumbsDivider: "›";
  --breadcrumbsDividerSize: 20px; }

/* breadcrumbs end */
/* miniform */
.miniform-block {
  display: inline-block;
  position: relative;
  vertical-align: top; }

.miniform-overlay {
  background: rgba(0, 0, 0, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 2.75em 0em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s; }

.miniform-block:hover .miniform-overlay {
  opacity: 1; }

.miniform-overlay input {
  border: 0;
  font-size: 0.8em;
  padding: .35em 0.15em;
  margin: 4px 0;
  color: black;
  font-family: 'Lato Light';
  max-width: 80%; }

.miniform-button {
  margin: 0 auto;
  border: 0px;
  margin-top: 15px; }

.miniform-button {
  font-family: 'Lato Light';
  font-size: .9em;
  padding: 8px 25px;
  color: #fff;
  background-color: #c84f4f;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: block;
  margin-top: 10px; }

/* miniform end */
@-webkit-keyframes invalidInput {
  0% {
    background-color: transparent;
    color: black;
    border-bottom: 1px solid #acacac;
  }
  50% {
    background-color: rgba(255,0,0,0.25);
    color: red;
    border-bottom: 1px solid red;
  }
  100% {
    color: black;
    border-bottom: 1px solid #acacac;
  }
}
@-o-keyframes invalidInput {
  0% {
    background-color: transparent;
    color: black;
    border-bottom: 1px solid #acacac;
  }
  50% {
    background-color: rgba(255,0,0,0.25);
    color: red;
    border-bottom: 1px solid red;
  }
  100% {
    color: black;
    border-bottom: 1px solid #acacac;
  }
}
@-moz-keyframes invalidInput {
  0% {
    background-color: transparent;
    color: black;
    border-bottom: 1px solid #acacac;
  }
  50% {
    background-color: rgba(255,0,0,0.25);
    color: red;
    border-bottom: 1px solid red;
  }
  100% {
    color: black;
    border-bottom: 1px solid #acacac;
  }
}
@keyframes invalidInput {
  0% {
    background-color: transparent;
    color: black;
    border-bottom: 1px solid #acacac;
  }
  50% {
    background-color: rgba(255,0,0,0.25);
    color: red;
    border-bottom: 1px solid red;
  }
  100% {
    color: black;
    border-bottom: 1px solid #acacac;
  }
}

.invalidInput {
  animation-name: invalidInput;
  animation-duration: 1s;
  animation-play-state: linear;
}

/* Ruukki Action page */
.ruukki_action-title {
  line-height: 30px;
  color: #E64E4E;
  font-size: 30px; }
.ruukki_discount {
  font-family: "ABold", sans-serif;
  display: inline-block;
  width: 100%;
  height: 100px; }
.ruukki_discount_left, .ruukki_discount_right {
  display: inline-block;
  width: 50%; }
.ruukki_discount .ruukki_discount_up {
  line-height: 30px;
  color: #606060;
  font-weight: 700;
  height: 30px;
  width: 100%; }
.ruukki_discount_left {
  text-align: center;
  float: left; }
.ruukki_discount_left .ruukki_discount_up {
  font-size: 28px; }
.ruukki_discount_left .ruukki_discount_down {
  line-height: 70px;
  color: #E64E4E;
  font-size: 50px;
  font-weight: 700; }
.ruukki_discount_right {
  text-align: left; }
.ruukki_discount_right .ruukki_discount_up {
  font-size: 17px; }
.ruukki_discount_right .ruukki_discount_down {
  height: 70px; }
.ruukki_discount_right img {
  margin: 0 !important;
  max-height: 70px;
  height: 100%; }
.ruukki_action-date {
  line-height: 30px;
  margin-top: 6vh;
  width: 100%;
  margin-bottom: 6vh; }
.ruukki_action-date-red {
  font-family: "ABold", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #E64E4E; }
.ruukki_action-date-num {
  font-size: 14px;
  color: #606060; }
.ruukki_action-form .service-block {
  margin-bottom: 4vh; }
/* Modal */
.modal-window-overlay {
  left: 0;
  z-index: 11;
  position: fixed;
  top: 200%;
  height: 0;
  width: 100%;
  background-color: rgba(20,21,22,0.9);
}
.modal-window {
  z-index: 12;
  letter-spacing: 0.5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
  width: auto;
  box-shadow: 0 0 25px black;
  background: white;
  color: #141516;
}
.modal-window img {
  width: 100%;
  max-width: 680px;
  height: auto;
  display: block;
  margin: 30px auto 0;
}
.modal-window button {
    font-family: "Lato Light",sans-serif;
    cursor: pointer;
    width: 40%;
    min-width: 100px;
    position: absolute;
    height: 40px;
    line-height: 40px;
    background-color: #e64e4e;
    color: #fff;
    border: none;
    bottom: 5%;
    left: 24%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.modal-close {
  cursor: pointer;
  font-size: 32px;
  color: white;
  position: absolute;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  top: -50px;
  right: -50px;
  -webkit-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.modal-close:hover {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.pure-g.wrapper {
  height: 100%;
  width: 100%;
}