:root { --main-font-size: 16px;
--secondary-font-size: 12px; --padding-side-main: calc(100vw / 12);
--padding-side-large: calc(100vw / 8); --custom-yellow: #F5BB3D;
--custom-red: #eb4341;
--custom-grey: #4a4748;
--custom-grey-80: #4a474880;
--custom-light-grey: #9c9c9c;
--custom-dark-grey: #413e3f; --fotogallery-list-height: calc((100vw - var(--padding-side-main) * 2 - 60px) + 30px);
--fotogalery-section-height: calc(var(--fotogallery-list-height) * 0.75 + 150px);
--fotogallery-overflow: calc(var(--fotogallery-list-height) * 0.25);
}
@media screen and (min-width: 1920px) {
:root {
--fotogallery-list-height: calc((100vw - var(--padding-side-large) * 2 - 60px) + 30px);
--fotogalery-section-height: calc(var(--fotogallery-list-height) * 0.75 + 150px);
--fotogallery-overflow: calc(var(--fotogallery-list-height) * 0.25);
}
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
input,
select,
optgroup,
textarea {
font-family: CeraPro, sans-serif!important;
}
.elementor-section-wrap {
overflow: hidden;
} .anchor {
position: absolute;
top: -80px;
left: 0;
height: 0!important;
} h1 {
font-size: calc(var(--main-font-size) * 3);
line-height: calc(var(--main-font-size) * 3.2);
}
h2 {
font-size: calc(var(--main-font-size) * 2);
line-height: calc(var(--main-font-size) * 2.2);
}
h3 {
font-size: calc(var(--main-font-size) * 1.5);
line-height: calc(var(--main-font-size) * 1.8);
}
@media screen and (min-width: 1024px) {
h1 {
font-size: calc(var(--main-font-size) * 4);
line-height: calc(var(--main-font-size) * 4.2);
}
}
@media screen and (min-width: 1280px) {
h1 {
font-size: calc(var(--main-font-size) * 5);
line-height: calc(var(--main-font-size) * 5.5);
}
h2 {
font-size: calc(var(--main-font-size) * 2.5);
line-height: calc(var(--main-font-size) * 2.7);
}
}
@media screen and (min-width: 1366px) {
h1 {
font-size: calc(var(--main-font-size) * 6);
line-height: calc(var(--main-font-size) * 6.5);
}
h2 {
font-size: calc(var(--main-font-size) * 3);
line-height: calc(var(--main-font-size) * 3.3);
}
}
@media screen and (min-width: 1920px) {
h1 {
font-size: calc(var(--main-font-size) * 7.5);
line-height: calc(var(--main-font-size) * 8);
}
h2 {
font-size: calc(var(--main-font-size) * 4);
line-height: calc(var(--main-font-size) * 4.3);
}
} .section {
padding-left: var(--padding-side-main);
padding-right: var(--padding-side-main);
}
.with-lines {
position: relative;
}
@media screen and (min-width: 1920px) {
.section {
padding-left: var(--padding-side-large);
padding-right: var(--padding-side-large);
}
} .form>.elementor-container>.elementor-row:after,
.with-lines:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-image: url(/wp-content/themes/forostina/img/bg_line.png);
background-repeat: repeat-y;
background-position: center;
z-index: 0;
}
.form>.elementor-container>.elementor-row>.elementor-column,
.with-lines>.elementor-container {
z-index: 1;
} .social {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.social * {
display: flex;
margin: 0;
padding: 0;
}
.social__list {
list-style: none;
}
.social .social__icon {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.social .social__icon svg {
width: 40px;
height: 40px;
z-index: 1;
} #sidebar {
position: fixed;
top: 0;
right: 0;
display: block;
height: 100vh;
width: 100vw;
z-index: 125;
transform: translateY(-100%);
background-color: #fff; }
#sidebar {
background-color: var(--custom-grey);
overflow: hidden;
}
#sidebar>.elementor-container,
#sidebar>.elementor-container>.elementor-row {
height: 100%;
}
#sidebar>.elementor-container>.elementor-row {
display: grid;
grid-template-columns: 1fr 300px; }
#sidebar a,
#sidebar a:visited,
#sidebar a:active {
color: inherit
}
#sidebar a:hover {
color: var(--custom-yellow);
}
@media screen and (max-width: 767px) {
#sidebar {
position: fixed;
top: 0;
right: 0;
display: block;
height: 100vh;
width: 100vw;
z-index: 125;
transform: translateX(100%);
background-color: transparent;
padding: 0;
}
#sidebar>.elementor-container>.elementor-row {
display: grid;
grid-template-columns: 1fr 250px;
column-gap: 0;
}
}
@media screen and (min-width: 768px) {
#sidebar:before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-image: url(//doshka.forostina.com.ua/wp-content/uploads/2021/01/sidebar_bg.jpg);
background-size: cover;
opacity: 0.1;
}
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
#sidebar>.elementor-container>.elementor-row {
grid-template-columns: 35% 30% 25%;
column-gap: 5%;
}
} #sidebar .sidebar__gallery {
width: 100%;
overflow: hidden;
padding-left: 10%;
display: none;
}
#sidebar .sidebar__gallery .elementor-column-wrap {
padding: 0;
}
.sidebar__gallery>.elementor-column-wrap>.elementor-widget-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
}
.sidebar__swiper {
max-height: 100vh;
overflow: hidden;
}
.sidebar__swiper_reverse {
transform: rotate(180deg)
}
.sidebar__swiper_reverse img {
transform: rotate(180deg)
}
#sidebar .sidebar__gallery .sidebar__swiper .swiper__image {
padding-top: 15px;
padding-bottom: 15px;
}
#sidebar .sidebar__gallery .sidebar__swiper.initialized .swiper__image img {
height: 100%;
width: auto;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
#sidebar .sidebar__gallery {
display: block;
}
}
@media screen and (max-width: 767px) {
#sidebar .sidebar__gallery {
display: none;
}
} #sidebar .sidebar__logo {
width: 100%;
max-width: 250px;
min-height: 250px;
align-self: center;
justify-self: center;
transform-origin: center; }
#sidebar .sidebar__logo>.elementor-column-wrap {
padding: 0;
}
.sidebar__logo>.elementor-column-wrap>.elementor-widget-wrap {
display: flex;
flex-direction: column;
}
.sidebar__logo .elementor-image img {
visibility: hidden;
}
.sidebar__logo .elementor-image:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/wp-content/themes/forostina/img/logo_white.svg);
background-size: contain;
background-repeat: no-repeat;
}
.sidebar__logo .elementor-image {
text-align: left;
}
.sidebar__social {
margin-top: auto;
}
@media screen and (max-width: 767px) {
#sidebar .sidebar__logo {
display: none;
}
}  #sidebar .sidebar__menu { width: 100%;
height: 100%;
color: #fff;
}
#sidebar .menu-menu-container {
display: flex;
text-transform: uppercase;
}
#sidebar .sidebar__menu .main-nav,
#sidebar .sidebar__menu .main-nav>.elementor-widget-container,
#sidebar .sidebar__menu .main-nav>.elementor-widget-container>.menu-menu-container,
#sidebar .sidebar__menu .main-nav>.elementor-widget-container>.menu-menu-container>.menu {
height: 100%;
margin: 0;
}
#sidebar .sidebar__menu .menu {
margin: 0;
padding: 0;
list-style: none;
text-transform: uppercase; }
.sidebar__menu>.elementor-column-wrap>.elementor-widget-wrap {
flex-direction: column;
justify-content: center;
}
.sidebar__menu .elementor-element {
margin: 0;
}
.sidebar__menu .menu .menu-item {
position: relative;
margin-bottom: 10px;
}
.sidebar__menu .menu .menu-item:before {
content: '';
position: absolute;
left: 8px;
top: 8px;
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--custom-yellow);
visibility: hidden;
}
.sidebar__menu .menu .menu-item:hover:before {
visibility: visible;
}
.sidebar__menu .menu-item a {
position: relative;
}
.sidebar__menu .menu-item {
padding-left: 35px;
}
#sidebar a,
#sidebar a:active,
#sidebar a:visited {
color: inherit;
}
#sidebar a:hover,
#sidebar a.active {
color: var(--custom-yellow);
}
#sidebar .sidebar__btn {
position: absolute;
top: 5px;
right: var(--padding-side-main);
width: 50px;
height: 50px;
border: 1px solid var(--custom-yellow);
border-radius: 50%;
cursor: pointer;
}
#sidebar .sidebar__btn span {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: 3px;
background-color: #fff;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
#sidebar .sidebar__menu {
grid-column: 2;
width: calc(250px + var(--padding-side-main));
padding: 100px var(--padding-side-main) 50px 0;
background-color: var(--custom-dark-grey);
color: #fff;
}
#sidebar .sidebar__btn {
top: -85px;
}
}
@media screen and (min-height: 700px) {
#sidebar .menu {
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media screen and (orientation: landscape) and (max-height: 699px) {
.sidebar__menu>.elementor-column-wrap>.elementor-widget-wrap {
padding-top: 50px;
}
#sidebar .sidebar__btn {
right: 25px;
}
} .header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
color: #fff;
}
.header.sticky { background-color: #fff;
color: #000;
}
.header.sticky p,
.header.sticky a {
color: #000;
}
.header>.elementor-container>.elementor-row {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 80px;
align-items: center;
}
#header .header__col {
width: 100%;
}
.header__nav .burger {
margin-left: auto;
}
@media screen and (max-width: 1023px) {
.header__social,
.header__phones {
display: none;
}
.header__logo .elementor-image {
text-align: left;
}
.header__nav .burger {
margin-left: auto;
margin-right: 0;
}
}
@media screen and (min-width: 1024px) {
.header>.elementor-container>.elementor-row {
grid-template-columns: 280px 1fr 200px 80px;
}
} .header__social p {
margin-right: 10px;
color: inherit;
}
.header__social .icon__fb path {
fill: var(--custom-grey);
}
.header__social .icon__inst circle,
.header__social .icon__inst path {
fill: #fff;
}
.header.sticky .icon__inst circle,
.header.sticky .icon__inst path {
fill: var(--custom-grey);
}
.header__social .icon__yt path {
fill: #fff;
}
.header.sticky .icon__yt path {
fill: var(--custom-grey);
}
.header__social .icon__fb:hover {
background-color: #1E77F0;
}
.header__social .icon__fb:hover path {
fill: #1E77F0;
}
.header__social .icon__fb:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}
.header__social .icon__inst:hover {
background-image: url(/wp-content/themes/forostina/img/bg_ig.svg);
background-repeat: no-repeat;
background-size: cover;
}
.header__social .icon__inst:hover circle,
.header__social .icon__inst:hover path {
fill: #fff;
}
.header__social .icon__yt:hover {
background-color: #FF0000;
}
.header__social .icon__yt:hover path {
fill: #fff;
} .header__logo * {
max-width: 100%;
max-height: 100%;
}
.header__logo .elementor-widget-container {
display: flex;
justify-content: center;
}
.header__logo .elementor-image {
position: relative;
}
.header__logo .elementor-image img {
visibility: hidden;
}
.header__logo .elementor-image:before,
.header__logo .elementor-image:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
}
.header__logo .elementor-image:before {
background-image: url(/wp-content/themes/forostina/img/logo_white.svg);
}
.header__logo .elementor-image:after {
background-image: url(/wp-content/themes/forostina/img/logo_black.svg);
visibility: hidden;
}
.header__logo img {
width: auto;
height: auto;
}
.header.sticky .header__logo img {
visibility: hidden;
}
.header.sticky .header__logo .elementor-image:before {
visibility: hidden;
}
.header.sticky .header__logo .elementor-image:after {
visibility: visible;
}
@media screen and (max-width: 1023px) {
.header__logo .elementor-widget-container {
justify-content: start;
}
} .header__phones {
color: #fff;
}
.header.sticky .header__phones {
color: #000;
}
#header .header__phones a,
#header .header__phones a:active,
#header .header__phones a:visited {
color: inherit;
}
#header .header__phones .elementor-tab-title.elementor-active:hover {
color: var(--custom-red);
}
#header .header__phones a:hover {
color: var(--custom-red);
}
.header__phones .phones {
position: relative;
padding: 10px 10px 0;
}
#phones-spoiler {
width: auto;
}
.phones-spoiler .elementor-toggle .elementor-tab-title {
border-bottom: none;
}
.phones-spoiler .elementor-tab-title {
display: flex;
}
.phones-spoiler .elementor-tab-title:not(.elementor-active):hover a {
color: var(--custom-red)!important;
}
.phones-spoiler .elementor-tab-title:not(.elementor-active):hover span {
color: var(--custom-red)!important;
}
.phones-spoiler .elementor-tab-title .elementor-toggle-icon {
order: 2;
}
#phones-spoiler .elementor-tab-title .elementor-toggle-icon {
margin-left: 5px;
}
#phones-spoiler .elementor-toggle span,
#phones-spoiler .elementor-toggle i,
#phones-spoiler .elementor-toggle i:before {
color: inherit;
}
#phones-spoiler .elementor-active {
background-color: #fff;
color: #000;
}
.phones-spoiler .elementor-active a {
color: inherit;
}
.header__phones .phones-spoiler .elementor-tab-content {
position: absolute;
width: 100%;
} .header__nav .burger {
margin-left: auto;
position: relative;
width: 50px;
height: 50px;
border: 1px solid var(--custom-yellow);
border-radius: 50%;
cursor: pointer;
}
.header__nav .burger span {
position: absolute;
top: 50%;
left: 50%;
display: block;
height: 2px;
background-color: #fff;
}
.header.sticky .burger span {
background-color: #000;
}
.header__nav .burger span:first-child {
width: 20px;
transform: translate(-50%, -5px);
}
.header__nav .burger span:last-child {
width: 15px;
transform: translate(-60%, 5px);
transition: transform 0.3s;
} @media screen and (max-width: 1023px) {
.header__nav .burger {
margin-left: auto;
margin-right: 0;
}
} .intro {
min-height: 100vh;
background-color: var(--custom-grey);
display: flex;
align-items: center;
}
.intro>.elementor-container,
.intro>.elementor-container>.elementor-row {
min-height: 100vh;
}
.intro>.elementor-container>.elementor-row {
flex-direction: column;
justify-content: center;
padding-top: 100px;
padding-bottom: 100px;
}
@media screen and (min-width: 568px) and (min-height: 599px) {
#intro {
background-size: 70vmin auto;
}
.intro>.elementor-container>.elementor-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media screen and (orientation: portrait) and (min-width: 768px) {
.intro>.elementor-container>.elementor-row {
padding-top: 150px;
padding-bottom: 150px;
}
}
@media screen and (min-width: 1025px) {
#intro {
background-size: 50% auto;
background-position: center 65%;
}
.intro,
.intro>.elementor-container,
.intro>.elementor-container>.elementor-row {
min-height: 150vh;
}
.intro>.elementor-container>.elementor-row {
padding-top: 180px;
padding-bottom: 150px;
}
}
@media screen and (min-width: 1536px) {
.intro,
.intro>.elementor-container,
.intro>.elementor-container>.elementor-row {
min-height: 175vh;
}
}
@media screen and (max-height: 600px) {
#intro {
background-size: cover;
}
} #intro .intro__top-text,
#intro .intro__bottom-text,
#intro .intro__additional-text {
width: 100%;
}
.intro p,
.intro h1,
.intro h2 {
margin: 0;
}
.intro h1,
.intro h2 {
font-weight: 500;
}
.intro__top-text,
.intro__additional-text,
.intro__bottom-text {
text-transform: uppercase;
color: #fff;
}
.intro__additional-text {
max-width: 400px;
justify-self: end;
font-size: var(--secondary-font-size);
}
.intro__bottom-text h2 span:not(:nth-child(2)) {
color: var(--custom-red);
}
@media screen and (max-width: 567px) and (min-height: 601px) {
.intro__top-text,
.intro__additional-text {
margin-bottom: 30px;
}
}
@media screen and (min-width: 568px) and (min-height: 601px) {
.intro__top-text span:nth-child(3) {
display: inline-block;
transform: translateX(30%);
}
.intro__bottom-text {
grid-column: 1 / 3;
justify-self: center;
align-self: end;
}
.intro__bottom-text h2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.intro__bottom-text h2 span:nth-child(3) {
grid-column: 2;
grid-row: 1;
justify-self: end;
}
.intro__bottom-text h2 span:nth-child(2) {
grid-column: 1 / 3;
grid-row: 2;
transform: translateX(15%);
}
}
@media screen and (min-width: 1024px) {
.intro__bottom-text h2 {
font-size: calc(var(--main-font-size) * 4);
line-height: calc(var(--main-font-size) * 4.2);
}
.intro__additional-text {
font-size: 14px;
}
}
@media screen and (min-width: 1280px) {
.intro__bottom-text h2 {
font-size: calc(var(--main-font-size) * 5);
line-height: calc(var(--main-font-size) * 5.5);
}
.intro__additional-text {
font-size: 16px;
}
}
@media screen and (min-width: 1366px) {
.intro__bottom-text h2 {
font-size: calc(var(--main-font-size) * 6);
line-height: calc(var(--main-font-size) * 6.5);
}
}
@media screen and (min-width: 1366px) {
.intro__bottom-text h2 {
font-size: calc(var(--main-font-size) * 7.5);
line-height: calc(var(--main-font-size) * 8);
}
}
@media screen and (max-height: 600px) {
.intro h1,
.intro h2 {
font-size: calc(var(--main-font-size) * 2.5);
}
} #intro .intro__deco {
position: absolute;
right: -15px;
bottom: calc(var(--padding-side-main) - 15px);
width: 130px;
height: 130px;
}
#intro .intro__deco .deco__circle {
width: 130px;
height: 130px;
}
#intro .intro__deco .elementor-column-wrap {
padding: 0;
}
.intro__deco .deco__circle {
border-radius: 50%;
background-color: var(--custom-yellow);
}
.intro__deco .deco__inner-circle {
position: absolute;
top: 25px;
left: 25px;
width: 80px;
height: 80px;
border: 1px dashed #dba83c;
border-style: dashed;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.intro__deco .deco__inner-circle-text {
width: 70%;
text-align: center;
color: #fff;
font-weight: 700;
font-size: var(--secondary-font-size);
line-height: 14px;
}
.intro__deco .deco__inner-circle-text span {
font-size: 14px;
}
.intro__deco .deco__circle svg {
animation: introDecoRotation 22s infinite linear;
}
@media screen and (min-width: 568px) and (min-height: 601px) {
#intro .intro__deco {
right: 0;
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
}
@media screen and (min-width: 1024px) {
#intro .intro__deco {
transform: translate(-50%, -50%);
width: 190px;
height: 190px;
}
#intro .intro__deco .deco__circle {
width: 190px;
height: 190px;
}
.intro__deco .deco__inner-circle {
top: 35px;
left: 35px;
width: 120px;
height: 120px;
}
.intro__deco .deco__inner-circle-text {
font-size: 16px;
line-height: 1.5rem;
}
.intro__deco .deco__inner-circle-text span {
font-size: 25px;
}
}
@media screen and (min-width: 1920px) {
#intro .intro__deco {
right: var(--padding-side-large);
transform: translate(50%, -50%);
}
}
@keyframes introDecoRotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
} #products {
z-index: 1;
}
#products,
#products>.elementor-container,
#products>.elementor-container>.elementor-row {
min-height: 75vh;
}
#products .products__description,
#products .products__palette,
#products .products__img {
width: 100%;
}
.products .elementor-container .elementor-row {
display: grid;
grid-template-columns: 1fr;
padding-bottom: 30px;
}
@media screen and (min-width: 1280px) {
.products .elementor-container .elementor-row {
display: grid;
grid-template-columns: 25% 40% 25%;
gap: 0 5%;
padding-bottom: 100px;
}
} #products .products__deco {
left: 7%;
width: 86%;
align-self: end;
min-height: 50px;
}
#products .products__deco>.elementor-column-wrap>.elementor-widget-wrap {
align-content: center;
}
@media screen and (min-width: 1280px) {
#products .products__deco {
grid-column: 1 / 4; transform: translateY(60px);
}
#products .products__deco>.elementor-column-wrap {
padding: 0;
}
#products .products__deco>.elementor-column-wrap>.elementor-widget-wrap {
align-content: flex-end;
}
} .products__img {
position: relative;
}
.products__img .house-img {
overflow: hidden;
}
.products__img .undercoat,
.products__img .box-deco {
position: absolute;
bottom: 2%;
left: 30%;
width: 40%;
height: 100%;
}
.products__img .box-deco {
z-index: -1;
display: grid;
grid-template-columns: 1fr 1fr;
}
.products__img .undercoat {
background-color: var(--custom-light-grey);
z-index: -3;
}
.products__img .plank {
position: relative;
box-sizing: border-box;
display: block;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
border-top: 1px solid var(--custom-light-grey);
border-left: 1px solid var(--custom-light-grey);
}
.products__img .plank:nth-child(6n+3),
.products__img .plank:nth-child(6n+4) {
left: -30%; }
.products__img .plank:nth-child(6n+5),
.products__img .plank:nth-child(6n+6) {
left: 30%; }
.products__img .plank {
position: relative;
background-color: var(--custom-light-grey);
}
.products__img .side {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-size: cover;
transform-origin: center;
}
.products__img .frontside {
z-index: 1;
}
.products__img .backside {
z-index: -1;
} .products__img .texture {
background-image: var(--texture-bg);
opacity: 0.1;
}
@media screen and (min-width: 1280px) {
.products__img .house-img {
position: absolute;
top: 100px;
}
} .products__palette {
padding-top: 50px;
}
.products__palette h3 {
font-size: var(--secondary-font-size);
text-transform: uppercase;
}
.products__palette .colors-list {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.products__palette .color {
position: relative;
width: 30px;
height: 30px;
border: 1px solid transparent;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.products__palette .color.active-image {
border: 1px solid var(--custom-yellow);
}
.products__palette .color>img {
width: 24px;
height: 24px;
border-radius: 5px;
cursor: pointer;
}
.products__palette .color:hover .product__image-deco {
display: flex;
}
.products__palette .product__image-deco {
display: none;
position: absolute;
width: 100px;
min-height: 80px;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: #fff;
box-shadow: 0px 10px 25px 4px rgba( 65, 62, 63, 0.30);
transform: translateY(calc(-100% - 15px));
top: 0;
padding: 5px;
}
.products__palette .product__image-deco:after {
content: '';
position: absolute;
display: block;
width: 16px;
height: 16px;
transform: rotate(45deg);
background-color: #fff;
bottom: -8px;
z-index: 1;
}
.products__palette .product__image-deco img {
width: 80%;
}
.products__palette .product__image-deco p {
margin: 0;
font-size: var(--secondary-font-size);
line-height: 15px;
text-align: center;
z-index: 2;
}
.products__warning p {
font-size: var(--secondary-font-size);
}
.products__warning span {
color: var(--custom-red);
font-weight: 700;
}
@media screen and (min-width: 568px) {
.products__palette .product__image-deco {
width: 140px;
min-height: 100px;
}
#product .product__info .product__image-deco p {
line-height: 18px;
}
}
@media screen and (min-width: 768px) {
.products__palette .product__image-deco {
width: 160px;
height: 120px;
padding: 10px;
}
.products__palette .product__image-deco p {
font-size: 14px;
line-height: 18px;
}
}
@media screen and (min-width: 1280px) {
.products__palette {
grid-column: 3;
padding-top: 40px;
}
} .advantages {
background-color: #f3f3f3;
}
.advantages>.elementor-container>.elementor-row {
padding-top: 80px;
padding-bottom: 50px;
}
@media screen and (min-width: 1280px) {
#advantages,
#advantages>.elementor-container,
#advantages>.elementor-container>.elementor-row {
min-height: 75vh;
}
}
@media screen and (min-width: 1400px) {
.advantages>.elementor-container>.elementor-row {
padding-top: 130px;
padding-bottom: 100px;
}
}
@media screen and (min-width: 1560px) {
.advantages>.elementor-container>.elementor-row {
padding-top: 230px;
padding-bottom: 200px;
}
}
@media screen and (min-width: 1920px) {
.advantages>.elementor-container>.elementor-row {
padding-top: 300px;
}
} #advantages .advantages__list {
width: 100%;
}
.advantages__list>.elementor-column-wrap>.elementor-widget-wrap {
flex-direction: column;
justify-content: center;
}
.advantages__list .items-list {
display: grid;
grid-gap: 60px 0;
}
.advantages__list .item {
display: grid;
grid-template-columns: 90px 1fr;
grid-gap: 20px 40px;
}
.advantages__list .item__deco {
position: relative;
display: block;
background-color: #fff;
width: 60px;
height: 60px;
}
.advantages__list .deco__img {
position: absolute;
left: 50%;
bottom: 50%;
width: 100%;
height: 100%;
transition: transform 0.5s;
}
.advantages__list .item:hover .deco__img {
transform: translate(-50%, 50%);
}
.advantages__list .item:nth-child(1) .deco__img {
background-image: url(/wp-content/themes/forostina/img/deco_icon_1.svg);
}
.advantages__list .item:nth-child(2) .deco__img {
background-image: url(/wp-content/themes/forostina/img/deco_icon_2.svg);
}
.advantages__list .item:nth-child(3) .deco__img {
background-image: url(/wp-content/themes/forostina/img/deco_icon_3.svg);
}
.advantages__list .item:nth-child(4) .deco__img {
background-image: url(/wp-content/themes/forostina/img/deco_icon_4.svg);
}
.advantages__list .item:nth-child(5) .deco__img {
background-image: url(/wp-content/themes/forostina/img/deco_icon_5.svg);
}
.advantages__list .item:nth-child(6) .deco__img {
background-image: url(/wp-content/themes/forostina/img/deco_icon_6.svg);
}
.advantages__list .item__num {
align-self: center;
transform: translateY(-50%);
}
.advantages__list .item__desc {
text-transform: uppercase;
font-weight: 700;
grid-column: 1 / 3;
}
@media screen and (min-width: 568px) {
.advantages__list .item {
grid-gap: 0 40px;
}
.advantages__list .item__desc {
grid-column: 2;
}
}
@media screen and (min-width: 1024px) {
.advantages__list .items-list {
grid-template-columns: 1fr 1fr;
grid-gap: 100px 50px;
}
}
@media screen and (min-width: 1280px) {
.advantages__list .items-list {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 1560px) {
.advantages__list .items-list {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 130px 50px;
}
}  #header-howto {
position: fixed;
top: 0;
top: 30px;
left: 0;
width: 100%;
height: 50px;
background-color: var(--custom-grey);
z-index: 50;
opacity: 0;
display: none; } #header-howto>.elementor-container {
height: 100%;
;
}
#header-howto>.elementor-container>.elementor-row {
display: flex;
align-items: center;
height: 100%;
}
.header-howto .stages-list {
margin-left: auto;
width: 50%;
display: flex;
justify-content: space-around;
text-transform: uppercase;
color: #fff;
}
.header-howto .stages-list .item {
font-weight: 700;
cursor: pointer;
}
.header-howto .stages-list .item.active {
color: var(--custom-yellow);
}
@media screen and (min-width: 1280px) {
#header-howto {
display: block;
}
} #howto { padding-top: 50px;
padding-bottom: 50px;
}
#howto .howto__video,
#howto .howto__description {
width: 100%;
}
.howto {
display: flex;
align-items: center;
}
#howto .elementor-container {
position: static;
}
#howto>.elementor-container>.elementor-row {
display: grid;
}
.howto__description .swiper-pagination {
display: none;
position: relative;
margin-bottom: 25px;
}
@media screen and (min-width: 1280px) {
#howto {
min-height: 100vh; padding-top: 100px;
padding-bottom: 100px;
}
#howto>.elementor-container>.elementor-row {
grid-template-columns: 60% 35%;
grid-gap: 5%;
}
}
@media screen and (min-width: 1560px) {
#howto>.elementor-container>.elementor-row {
grid-template-columns: 60% 30%;
grid-gap: 10%;
}
}
@media screen and (max-width: 1279px) {
.howto__description .custom-swiper-container { }
.howto__description .swiper-pagination {
display: block;
}
#howto .howto__description .swiper-pagination-bullet {
width: auto;
height: auto;
background: none;
font-weight: 700;
outline: none;
}
#howto .howto__description .swiper-pagination-bullet-active {
color: var(--custom-yellow);
}
}
@media screen and (max-width: 567px) {
.howto__description .custom-swiper-container { }
} #howto .howto__video>.elementor-column-wrap { } .howto__description:not(.howto__description-2) {
display: none;
}
.howto__description-2 {
margin-top: 40px;
overflow: hidden;
}
.howto__description .item {
cursor: grab;
}
.howto__description .item__index {
text-transform: uppercase;
color: var(--custom-red);
}
.howto__description .item__title {
margin-top: 30px;
margin-bottom: 40px;
}
.howto__description .item__description p {
margin: 0;
}
@media screen and (min-width: 1280px) {
.howto__description {
margin-top: 0;
}
#howto .howto__description>.elementor-column-wrap {
padding-left: 0;
padding-right: 0;
}
.howto__description .item { }
}
@media screen and (min-width: 1560px) {
.howto__description .item { }
} #howto .howto__deco {
width: auto;
z-index: -1;
}
.howto__deco {
position: absolute;
top: 0;
right: 0;
height: 100%;
opacity: 0.3;
}
.howto__deco .deco__img,
.howto__deco .deco__img .elementor-widget-container,
.howto__deco .deco__img .elementor-widget-container .elementor-image {
max-height: 100%;
height: 100%;
}
.howto__deco .deco__img img {
max-height: 100%;
width: auto;
}
@media screen and (min-width: 1280px) {
.howto__deco {
top: 0;
opacity: 1;
}
} #fotogallery .fotogallery__description,
#fotogallery .fotogallery__list,
#fotogallery .fotogallery__carousel {
width: 100%;
}
#fotogallery>.elementor-container>.elementor-row {
flex-direction: column;
}
.fotogallery {
padding-bottom: 50px;
}
@media screen and (min-width: 1280px) {
#fotogallery {
height: var(--fotogalery-section-height);
z-index: 1;
}
} .fotogallery__description {
margin-bottom: 40px;
}
.fotogallery__description>.elementor-column-wrap>.elementor-widget-wrap>.elementor-element {
margin: 0;
}
.fotogallery__description h2,
.fotogallery__description p {
margin: 0;
}
.fotogallery__description h2 {
text-transform: uppercase;
margin-bottom: 30px;
}
@media screen and (min-width: 1280px) {
#fotogallery .fotogallery__description {
width: calc(60vw - var(--padding-side-main));
}
.fotogallery__description>.elementor-column-wrap>.elementor-widget-wrap {
display: grid;
grid-template-columns: 50% 40%;
grid-gap: 10%;
}
.fotogallery__description {
margin-bottom: 60px;
}
.fotogallery__description p {
text-transform: uppercase;
font-size: var(--secondary-font-size);
}
}
@media screen and (min-width: 1560px) {
.fotogallery__description p {
font-size: var(--main-font-size);
}
} .fotogallery__list .gallery {
align-items: start;
}
.fotogallery__list {
display: none;
}
#fotogallery .fotogallery__list .gallery-item {
display: flex;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
#fotogallery .fotogallery__list .gallery-icon,
#fotogallery .fotogallery__list img {
max-height: 100%;
max-width: 100%;
}
#fotogallery .fotogallery__list img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 1280px) {
#fotogallery .fotogallery__list .gallery {
grid-template-rows: calc(50% - 15px) calc(50% - 15px); height: var(--fotogallery-height);
grid-gap: 30px;
}
#fotogallery .fotogallery__list .gallery-item {
max-width: none;
}
.fotogallery__list {
display: block;
}
.fotogallery__list .gallery .gallery-item:nth-child(1),
.fotogallery__list .gallery .gallery-item:nth-child(2) {
grid-column: 1;
grid-row: 1;
}
.fotogallery__list .gallery .gallery-item:nth-child(3),
.fotogallery__list .gallery .gallery-item:nth-child(4) {
grid-column: 2;
grid-row: 1;
}
.fotogallery__list .gallery .gallery-item:nth-child(5),
.fotogallery__list .gallery .gallery-item:nth-child(6) {
grid-column: 3;
grid-row: 1;
}
.fotogallery__list .gallery .gallery-item:nth-child(7),
.fotogallery__list .gallery .gallery-item:nth-child(8) {
grid-column: 1;
grid-row: 2;
}
.fotogallery__list .gallery .gallery-item:nth-child(9),
.fotogallery__list .gallery .gallery-item:nth-child(10) {
grid-column: 2;
grid-row: 2;
}
.fotogallery__list .gallery .gallery-item:nth-child(11),
.fotogallery__list .gallery .gallery-item:nth-child(12) {
grid-column: 3;
grid-row: 2;
}
.fotogallery__list .gallery .gallery-item:nth-child(even) {
position: relative;
z-index: 1;
}
.fotogallery__list .gallery .gallery-item:nth-child(even) .gallery-item__mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.fotogallery__list .gallery .gallery-item:nth-child(even) .gallery-icon {
pointer-events: none;
}
.fotogallery__list .gallery .gallery-item:nth-child(even) .gallery-icon {
overflow: hidden;
}
} @media screen and (min-width: 1280px) {
.fotogallery__carousel {
display: none;
}
} #form {
z-index: 0;
overflow: hidden;
}
.form {
background-color: var(--custom-grey);
}
.form>.elementor-container>.elementor-row {
justify-content: center;
}
.form>.elementor-container>.elementor-row {
position: relative;
padding-top: 70px;
padding-bottom: 70px; }
.form .elementor-column.form__deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.form .elementor-column.form__details {
width: calc(100% / 1.2);
align-self: center;
}
.form__details h2 {
text-transform: uppercase;
}
.form__details>.elementor-column-wrap>.elementor-widget-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.form .form__title,
.form .form__desc {
text-align: center;
}
@media screen and (min-width: 768px) {
.form .elementor-column.form__details {
width: 70%;
}
}
@media screen and (min-width: 1024px) {
.form>.elementor-container>.elementor-row {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media screen and (min-width: 1280px) {
.form>.elementor-container>.elementor-row {
padding-top: calc(var(--fotogallery-overflow) + 200px);
padding-bottom: 130px;
}
.form .elementor-column.form__deco {
top: calc(var(--fotogallery-overflow) - 65px);
}
.form .elementor-column.form__details {
width: 60%;
}
.form .form__title {
max-width: 70%;
}
.form .form__desc {
max-width: 50%;
}
}
@media screen and (min-width: 1920px) {
.form .elementor-column.form__details {
width: 50%;
}
} .custom-form label {
display: flex;
flex-direction: column;
}
.custom-form .form__label {
margin-bottom: 15px;
color: #fff;
font-size: 14px;
}
.custom-form .form__body {
display: grid;
gap: 15px 0;
}
.custom-form p {
margin: 0;
}
.custom-form .for_phone {
align-self: center;
}
.custom-form .for_email {
align-self: end;
}
.custom-form .for_textarea *:not(.form__label) {
height: 100%;
}
.custom-form input,
.custom-form textarea {
outline: none;
width: 100%;
} .custom-form .wpcf7-not-valid-tip {
text-align: right;
}
.custom-form .for_submit {
margin-top: 20px;
}
.custom-form .for_submit .w-form-row-field {
display: flex;
justify-content: center;
}
.custom-form .for_submit button,
header #slow_form__details a{
padding: calc(var(--main-font-size) * 1.2) calc(var(--main-font-size) * 3);
border: 0;
outline: none;
border-radius: 0;
text-transform: uppercase;
cursor: pointer;
transition: border-radius 0.5s;
}
.custom-form .for_submit button:hover,
header #slow_form__details a:hover {
border-radius: 28px;
}
header #slow_form__details a{
padding: 10px;
font-size: 12px;
color: var( --e-global-color-secondary );
background-color: var( --e-global-color-da74128 );
}
@media screen and (max-width: 767px) {
header #slow_form__details{
display: none;
}
}
.custom-form .wpcf7-response-output {
color: #fff;
}
@media screen and (min-width: 768px) {
.custom-form .form__body {
grid-template-columns: 50% 50%;
gap: 15px 20px;
}
.custom-form .for_text {
grid-column-start: 1;
}
.custom-form .for_textarea {
grid-row-start: 1;
grid-column-start: 2;
grid-row: 1 / 4;
}
.custom-form .for_submit {
grid-column: 1 / 3;
justify-self: center;
}
}
@media screen and (min-width: 1024px) {
.custom-form .form__body {
display: grid;
grid-template-columns: 50% 50%;
gap: 25px 20px;
}
} .footer {
padding-top: 40px;
padding-bottom: 20px;
background-color: var(--custom-dark-grey);
}
.footer>.elementor-container>.elementor-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 20px;
}
footer.footer .elementor-column {
width: 100%;
}
.footer p {
margin: 0;
}
.footer a,
.footer a:active,
.footer a:visited {
color: inherit;
}
.footer a:hover {
color: var(--custom-red);
}
.footer .elementor-column:not(.footer__bottom) p:not(:last-child) {
color: var(--custom-light-grey);
margin-bottom: 10px;
}
.footer__bottom {
grid-column: 1 / 3;
margin-top: 10px;
padding-top: 30px;
border-top: 1px solid var(--custom-light-grey);
}
.footer__bottom>.elementor-column-wrap>.elementor-widget-wrap>.elementor-element {
width: 50%;
margin: 0;
}
.footer__bottom p {
color: var(--custom-light-grey);
}
.footer__developer {
text-align: right;
}
.footer__social .social__icon {
margin: 0 5px;
}
.footer__social .icon__fb {
background-color: #1E77F0;
}
.footer__social .icon__fb:hover {
background-color: #fff;
}
.footer__social .icon__fb:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}
.footer__social .icon__inst {
background-image: url(/wp-content/themes/forostina/img/bg_ig.svg);
background-repeat: no-repeat;
background-size: cover;
}
.footer__social .icon__inst circle,
.footer__social .icon__inst path {
fill: #fff;
}
.footer__social .icon__inst:hover {
background-color: #fff;
background-image: none;
}
.footer__social .icon__inst:hover #Text>g>g:first-child path {
fill: url(#SVGID_1_);
}
.footer__social .icon__inst:hover #Text>g>g:nth-child(2) path {
fill: url(#SVGID_2_);
}
.footer__social .icon__inst:hover #Text circle {
fill: url(#SVGID_3_);
}
.footer__social .icon__yt {
background-color: #FF0000;
}
.footer__social .icon__yt:hover {
background-color: #fff;
}
.footer__social .icon__yt path {
fill: #fff;
}
.footer__social .icon__yt:hover path {
fill: #FF0000;
}
@media screen and (max-width: 1023px) {
.footer__phone {
grid-column-start: 1;
grid-row-start: 1;
}
.footer__emeil {
grid-column-start: 2;
grid-row-start: 1;
}
.footer__main-site {
grid-column-start: 1;
grid-row-start: 2;
}
.footer__address {
grid-column-start: 2;
grid-row-start: 2;
}
.footer__social {
grid-column: 1 / 3;
grid-row-start: 3;
}
.footer__social .social {
justify-content: center;
}
}
@media screen and (min-width: 1024px) {
.footer>.elementor-container>.elementor-row {
grid-template-columns: repeat(5, 1fr);
}
.footer__bottom {
grid-column: 1 / 6;
}
.footer .elementor-column:not(.footer__bottom) p:not(:last-child) {
margin-bottom: 30px;
}
} #wpadminbar {
display: none;
}
html {
margin-top: 0 !important;
}
.page {
margin: 0;
}
.elementor-swiper-button {
outline: none;
}